/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
html {
    scroll-behavior: smooth;
  }


/* ================== font sizes and common colors ================== */
h1{
    font-size: 50px;
    line-height: 50px;
    font-weight: 900;
    color: #000;
    letter-spacing: -1.44px;
    margin-bottom: 0px;
}
.htt-heading{
    font-size: 42px;
    line-height: 52px;
}
@media (max-width: 768px) {
    h1{
        font-size: 32px !important;
        line-height: 40px !important;
    }
}

h4{
    font-size: 22px;
    line-height: 32px;
}
h3{
   font-size: 36px;
    line-height: 48px;
}
h5{
    letter-spacing: 0.26px !important;
    font-size: 16px !important;
    line-height: 26px !important;
}
h6{
	font-size: 20px;
	line-height: 32px;
}
#logo img {
    display: block;
    max-width: 60%;
    max-height: 100%;
    height: 100px;
}
.button-primary, .button-primary:hover, .button-primary:focus-visible{
	border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 30px;
    -webkit-appearance: none;
	background-color: #03a9f4;
    border-color: #03a9f4;
	letter-spacing: 0.04px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.button-primary:active{
    background-color: #03a9f4 !important;
    border-color: #03a9f4 !important;
}
.button-primary .bi-arrow-right{
    display: none;
}
.button-primary:hover .bi-arrow-right{
    display: inline-block;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.button-outline, .button-outline:hover{
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 30px;
    text-shadow: none;
    -webkit-appearance: none;
    color: #03a9f4 !important;
    background-color: transparent !important;
    border: 1px solid #03a9f4 !important;
    letter-spacing: 0.04px;
}

.banner-h1 {
    font-size: 50px;
    line-height: 50px;
    font-weight: 900;
    color: #000;
    letter-spacing: -1.44px;
    margin-bottom: 0px;
}
.circle:before {
    content: ' \25CF';
    font-size: 26px;
    color: #FF4D4D;
    line-height: 50px;
    font-weight: 800;
    letter-spacing: -1.44px;
}
.primary-link{
    color: #FF4D4D;
}
.link-secondary{
    color: #29B6F6 !important;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-appearance: none;
}
.link-secondary:hover, .link-secondary:focus {
    color: #29B6F6 !important;
    -webkit-appearance: none;
}
.link-secondary.bi-arrow-right{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.link-secondary:hover .bi-arrow-right{
    transform: translateX(54px);
    padding-left: 10px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.color-heading {
    color: #E60000 !important;
}
.grey{
    color: #707070;
}
.dark-grey{
    color: #7D7D7D;
    opacity: 0.8;
}
.subtitle {
    font-size: 18px;
    line-height: 28px;
    font-weight: normal;
    color: #7D7D7D;
}


.btn-arrow:hover, .btn-arrow:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}
.btn-white:hover, .btn-white.btn-arrow:hover{
    background: #03a9f4 ;
    border-color: #03a9f4 ;
    color: #000;
}
.button-outline:hover polyline, .button-outline:hover line{
    stroke: #03a9f4;
}
.btn-arrow {
    position: relative;
    transition: background-color 300ms ease-out;
}
.btn-arrow span {
    display: inline-block;
    position: relative;
    transition: all 300ms ease-out;
    will-change: transform;
}
.btn-arrow:hover span {
    transform: translate3d(-1rem, 0, 0);
}
.btn-arrow:hover svg {
    opacity: 1;
    right: -2rem;
}
.btn-arrow svg {
    position: absolute;
    width: 1em;
    right: 0px;
    right: 0rem;
    opacity: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 300ms ease-out;
    will-change: right, opacity;
}


/*============================= mega menu csws ========================== */

.mega-widget-title{
    font-weight: 600;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #031649f2;
    opacity: 0.9;
}
.list-group-item.active {
    color: #E60000;
}
.bg-academy{
    background-color: #0095DA;
}
.bg-primary-light {
    background-color: #F5F7FA;
}
.visibility-hidden{
    visibility: hidden;
}
.menu-item:hover > .menu-link, .menu-item.current > .menu-link, .menu-item.active > .menu-link {
    color: #E60000;
}
.menu-link .active{
    color: #E60000;
}
.mega-links a.active {
    color: #E60000 !important;
}
a.menu-link.active {
    color: #E60000;
}

@media (min-width: 992px){
.sub-menu-container, .mega-menu-content {
    border-top: 1px solid #E60000;
}
}

/* =============================== home page css ======================== */
.banner-logo img {
    padding-right: 30px;
    transition: 0.2s linear;
    filter: grayscale(1);
}
.gradient-text {
    background: transparent linear-gradient( 71deg, #00EEF8 0%, #00BCF6 44%, #009CF3 62%, #0492FF 100%) 0% 0% no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}
.banner-logos1{
    width: 200px;
}
.banner-logos{
    width: 149px;
}

@media (max-width: 767px){
.banner-logos, .banner-logos1 {
    width: 30%;
}
}


/* global delivery */

.global-delivery-section {
    background-image: url(../demos/hosting/images/home-page/globe-bg1.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
}
.global-delivery-section .clients-grid .grid-item::after,
.global-delivery-section .clients-grid .grid-item::before{
    border: 0px solid transparent;
}

/* halil testimonilas */

.testimonials-halil{
    background: transparent linear-gradient(51deg, #132540 0%, #0F203A 62%, #1E4176 100%) 0% 0% no-repeat padding-box;
}

/* sebastian section */

.sibastian-div{
    background-image: url(../demos/hosting/images/home-page/wining-formule.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 430px;
}

/* talk to us form css */

.form label {
    display: inline-block;
    font-weight: 600;
    font-size: 14px;
    color: #212529;
    text-transform: capitalize;
    margin-bottom: 0px;
}
.ast-red {
    color: red;
    font-size: 8px;
    line-height: 20px;
}
.ast-red .bi-asterisk::before{
    vertical-align: 0.475em;
}
.form .form-control {
    text-align: left;
    letter-spacing: 0px;
    color: #7D7D7D;
    font-size: 16px;
    line-height: 32px;
    border: 1px solid #00000033;
    border-radius: 6px;
}

/* counter section */

.excellence{
    background-image: url(../demos/hosting/images/home-page/counter.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding: 30px 0px 0px 0px;
    background-position: bottom;
}
.counterplus::after{
    content: '+';
    color: red;
    font-size: 58px;
    font-weight: bold;
}
.afterk:after{
    content: 'K';
    font-size: 58px;
    font-weight: bold;
}
.trustpilot .icon-star{
    color: #11AA73;
    margin: 3px;
    font-size: 12px;
}

/* our services section */

.pricing ul li::marker{
    content: url(../demos/hosting/images/home-page/arrow-right.svg);
}

/* case study section */

.custom-badge-one{
    background: #E5F8F1 0% 0% no-repeat padding-box;
    border: 1px solid #02BC77;
    border-radius: 4px;
    color: #02BC77;
}
.custom-badge-two{
    background: #FFEEEE 0% 0% no-repeat padding-box;
    border: 1px solid #FF5959;
    border-radius: 4px;
    color: #FF5959;
}
.custom-badge-three{
    background: #FFFAF0 0% 0% no-repeat padding-box;
    border: 1px solid #FFD071;
    border-radius: 4px;
    color: #F1B206;
}
.custom-badge-four{
    background: #ECF4FF 0% 0% no-repeat padding-box;
    border: 1px solid #4791FF80;
    border-radius: 4px;
    color: #4791FF;
}
.custom-badge-five{
    background: #F5E5F5 0% 0% no-repeat padding-box;
    border: 1px solid #A100A180;
    border-radius: 4px;
    color: #A100A1;
}
.custom-badge-six{
    background: #FFF0E5 0% 0% no-repeat padding-box;
    border: 1px solid #FF6F0080;
    border-radius: 4px;
    color: #FF6F00;
}
.custom-badge-seven{
    background: #C1C7D01A 0% 0% no-repeat padding-box;
    border: 1px solid #C1C7D080;
    border-radius: 4px;
    color: #707070;
}
.pricing .badge{
    white-space: normal;
}

/* testimonials section */

.testimonials-section{
    background-image: url(../demos/hosting/images/home-page/bg-testimonials.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.owl-page.active::after{
    content: none !important;
    opacity: 0 !important;
}
.testi-title li::marker{
    content: '\2012';
    padding-left: 10px;
    font-size: 20px;
    font-weight: bold;
}
.testi-title li{
    padding-left: 10px;
}
.testimonial {
    padding: 30px 80px 30px 130px;
    margin: 0 15px 30px 15px;
    overflow: hidden;
    position: relative;
    background-color: transparent;
    border: 0px solid transparent;
    box-shadow: none;
}

.testimonial .pic {
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 20px;
    left: 20px;
}

.testimonial .pic img {
    width: 100%;
    height: auto;
}

.testimonial .description {
    font-size: 15px;
    letter-spacing: 1px;
    color: #6f6f6f;
    line-height: 25px;
    margin-bottom: 15px;
}

.testimonial .title {
    display: inline-block;
    font-size: 18px;                  
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 1px;
    color: #2E2E2E;
    margin: 0;
}

.testimonial .post {
    display: inline-block;
    font-size: 17px;
    color: #29D18B;
    font-style: italic;
}

.owl-theme .owl-controls .owl-page span {
    border: 2px solid #FF5959;
    background: #FF5959 !important;
    border-radius: 25 !important;
    opacity: 1;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls .owl-page:hover span {
    background: #FF0000 !important;
    border-color: #FF0000;
    width: 15px;
    height: 15px;
}

.owl-theme .owl-controls .owl-buttons div {
    color: #fff;
    display: inline-block;
    zoom: 1;
    margin: 5px;
    padding: 1px 11px;
    font-size: 20px;
    background: #FF0000;
    opacity: 1;
    font-weight: 500;
    border-radius: 50%;
}

.owl-prev {
    position: absolute;
    left: -40px;
    top: 70px;
}

.owl-next {
    position: absolute;
    right: -40px;
    top: 70px;
}
@media only screen and (max-width: 767px){
    .owl-buttons{
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    .testimonial {
        padding: 20px;
        text-align: center;
    }
    .testimonial .pic {
        display: block;
        position: static;
        margin: 0 auto 15px;
    }
}


/* ========================= services page css ======================== */

.distinguished-angular{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/angular/angular-distinguished.png);
    background-size: contain;
}
.aspnetcore{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/aspnetcore/distinguished-aspnet-core.png);
    background-size: contain;
}
.frontend{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/frontend-developer/hire-frontend-developer.png);
    background-size: cover;    
}
.backend{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/backend-developer/distinguished-backend.png);    
    background-size: contain;
}
.uidesigner{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/ui-designer/hire-ui-designer.png);  
    background-size: cover;   
}
.quality{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/quality-analyst/hire-quality-analytics.png);  
    background-size: cover;   
}
.business{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/business-analyst/hire-business-analytics.png);  
    background-size: cover;   
}
.test-engineer{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/test-enginner/performance-en-banner.png);  
    background-size: cover;   
}
.devops{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/devops/devops-en-banner.png);  
    background-size: cover;   
}
.react-native{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/react-native/Hire-a-React-Native-Developer.png);  
    background-size: cover;   
}
.Azure-admin{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/Azure-admin/Hire-an-Azure-Admin-banner.png);  
    background-size: cover;   
}
.xamarin{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/xamarin-developer/Hire-a-Xamarin-Developer-banner.png);  
    background-size: cover;   
}
.hiretech-banner{
    background-position: center;
    background-repeat: no-repeat;
}

.services-color{
    color: #FF4D4D;
}
.services-color{
    color: #FF4D4D !important;
}

@media (max-width: 768px) {
    .hiretech-banner{
        background: white !important;
    }
}
.angular-developer .heading-block::after {
    content: '';
    display: block;
    margin-top: 30px;
    width: 150px;
    border-top: 3px solid #FF4D4D;
    margin-top: 20px !important;
}
.angular-developer .iconlist .icon-angle-right{
    background-color: #FF4D4D;
    padding: 0px 6px 0px 7px;
    border-radius: 20px;
    font-size: 20px;
    font-weight: normal;
    line-height: 20px;
    width: auto !important;
    top: 5px !important;
    color: #fff !important;
}


/* ====================== full cycle product development =================== */

.full-cycle-prod-development{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/use-cases/full-cycle-product-banner.png);  
    background-size: cover !important;   
    background-position: center;
    background-repeat: no-repeat;
}

/* ====================== faster time to market page =================== */

.faster-time-to-market{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/use-cases/faster-time-to-market.png);  
    background-size: cover !important;   
    background-position: top;
    background-repeat: no-repeat;
}



/* ===================== migration from asp net zero to abp io ============ */

.bg-blue {
    background: #040D21;
}

.migration-asp-net-zero{
    background: url('../demos/hosting/images/use-cases/Artboard-1.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}



/* ========================= distinguished engineer page css =================== */


.distinguished-engineer{
    /* background: url(../demos/hosting/images/about-us/become-distinguished-engineer.png) no-repeat center/cover; */
    background: linear-gradient(to right, #ecf7fc9e, #ecf7fca6);
}

.subtitle-be{
    font-size: 1.1rem;
    line-height: 27px;
}

/* ======================= about us page css ============================= */

.aboutus{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/about-us/about-us-banner.png);  
    background-size: cover !important;   
    background-position: center;
    background-repeat: no-repeat;
}
#about-testimonials{
    background: url(../demos/hosting/images/about-us/employee-slider-bg.svg) no-repeat center;
    background-size: cover;
}

#about-testimonials .swiper .content-wrapper .content {
    padding: 3em 1.5em;
    text-align: left;
    display: grid;
    justify-items: start;
    align-items: center;
    margin: 0 auto;
    color: #000;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    /* box-shadow: 0px 4px 40px #0000001f; */
    max-height: 510px;
    height: 510px;
}
#about-testimonials .swiper .content-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: ".";
    width: 100%;
    justify-items: center;
    align-items: center;
}
#about-testimonials .swiper .swiper-slide.swiper-slide-active {
    background: white;
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0px 4px 40px #00000012;
}
#about-testimonials .swiper .swiper-slide {
    margin: 0;
    height: auto;
    width: 100%;
    padding: 0;
    opacity: 0.5;
    background: rgb(255 255 255 / 80%);
    border-radius: 6px;
    transition: all 0.5s ease-in-out;
    /* box-shadow: 0px 4px 40px #00000012; */
}
#about-testimonials .emp-desc {
    color: #7D7D7D;
    font-size: 14px;
    padding-bottom: 2rem;
}
#about-testimonials .swiper {
    padding: 2.5em;
}
#about-testimonials .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
#about-testimonials .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
    font-size: 15px;
    background: red;
    padding: 6px 10px;
    color: #fff;
    border-radius: 30px;
    font-weight: bold;
}
#about-testimonials .swiper-pagination-bullet {
    background: rgba(255, 0, 0, 0.2) !important;
    transition: all 0.2s ease-in-out;
}
#about-testimonials .swiper-pagination-bullet-active {
    transform: scale(1.5);
    background: #FF0000 !important;
}


/* =================== product design and development page css =================== */


.product-saas{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/product-development-saas-enterprise/Product-Design-and-Development–SaaS-and-Enterprise-banner.png);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
}
.redesign-ul li::marker {
    color: #FF0000;
    font-size: 24px;
    line-height: 10px;
}


/* ================== front end design and ui design page css ================ */

.front-end-design{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/front-end-development-ui-design/front-end-banner.png);  
    background-size: cover;   
    background-position: top center;
    background-repeat: no-repeat;
}


/* ==================== legacy app moderization page css ==================== */


.legacy-app{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/legacy-app-moderization/legacy-app-banner.png);  
    background-size: cover;   
    background-position: top center;
    background-repeat: no-repeat;
}
.read-more-state {
    display: none;
  }
  
  .read-more-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: .25s ease;
  }
  
  .read-more-state:checked ~ .read-more-wrap .read-more-target {
    opacity: 1;
    font-size: inherit;
    max-height: 999em;
  }
  
  .read-more-state ~ .read-more-trigger:before {
    content: 'See More \01F862';
  }
  
  .read-more-state:checked ~ .read-more-trigger:before {
    content: 'See Less \01F862';
  }
  
  .read-more-trigger {
    cursor: pointer;
    display: inline-block;
    color: rgb(3, 169, 244);
    font-size: 16px;
    text-transform: capitalize;
    font-weight: normal;
    letter-spacing: 0;
  }


  /* ===================== migration service page css ================= */


  .migration-banner{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/legacy-app-moderization/migration-bg.svg);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
  }



  /* =================== mobile apps with asp net zero api page css ============ */


  .mobile-apps-with{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/services/mobile-apps-with-asp-net-zero-api/mobile-apps-banner.png);  
    background-size: contain;   
    background-position: top center;
    background-repeat: no-repeat;
  }

  .technologies {
    align-items: center;
    grid-gap: 40px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .tech-logos img{
    width: 85%;
    aspect-ratio: 3/2;
    object-fit: contain;
    mix-blend-mode: hard-light;
  }


  /* ======================== agile development page css ======================= */


  .agile-development{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/Rad-platform/agile-development/agile-dev-banneer.png);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
  }



  /* ======================== integrations page css ========================== */


  .integrations{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/Rad-platform/integrations/integration-banner.png);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
  }


  /* ======================== rapid prototyping page css ========================== */


  .rapid-prototyping{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/Rad-platform/rapid-prototyping-using-rad-tool/rapid-prototyping-banner.png);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
  }


  /* ======================== Security page css ========================== */


  .Security{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/Rad-platform/security/security-banner.png);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
  }


  /* ======================== quality assurance page css ========================== */


  .quality-assurance{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/Rad-platform/quality-assurance/quality-assurance-banner.png);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
  }



  /* ======================== technology ecosystem page css ========================== */


  .technology-ecosystem{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/Rad-platform/Technology-ecosystem/tecnology-eco-bg.png);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
  }

 .tech-hide{
    display:none;
  }
  
  .tech-content img{
    aspect-ratio: 3/2;
    object-fit: contain;
    width: 60%;
    /* height: 40%; */
  }



  /* ======================== UI/UX design page css ========================== */


  .uiuxdesign{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/Rad-platform/uiux-design/ui-ux-banner.png);  
    background-size: contain;   
    background-position: center;
    background-repeat: no-repeat;
  }


  /* ======================== create an mvp page css ========================== */


  .create-an-mvp{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/Rad-platform/create-mvp-with-asp-net-zero-team/creating-mvp-with-aspnet-zero.png);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
  }



  /* ======================== why start with asp net zero page css ========================== */


  .why-start-with-asp {
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/Rad-platform/why-start-with-asp-net-zero/why-start-aspnet-zero-bg.png);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
  }



  /* ======================== solid principle page css ========================== */


  .solid-principle {
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/Rad-platform/solid-principle/solid-banner.png);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
  }

  .Request-Consultation{
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/Rad-platform/solid-principle/banner-bg.png);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
  }




/* ======================== develop a poc page css ========================== */


.develop-poc {
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/Rad-platform/develop-a-poc/develop-a-poc-banner.png);  
    background-size: contain;   
    background-position: center;
    background-repeat: no-repeat;
  }

  .poc-cards img{
      width: 240px;
      /* height: 156px; */
  }



  /* ======================== contact us page css ========================== */


.contact-us {
    background: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(../demos/hosting/images/contactus/Contact-Us-banner.svg);  
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;
  }




  /* ========================= case studies page css ========================== */

  .technology-stacks{
      object-fit: contain;
      max-width: 150px;
  }


  /* ====================== requirement analysis page css ==================== */

.requirement-analysis{
    background: url('../demos/hosting/images/Rad-platform/Requirement-analysis/requirement-analysis-banner.png') center center/cover no-repeat;
}
.requirement-analysis-gathering{
    background: url('../demos/hosting/images/Rad-platform/Requirement-analysis/re-gathring-bg.png');
}



/* ====================== framework based acceleration ======================= */



.tool-sl .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #FF0000;
}
.tool-sl .carousel-indicators .active {
    width: 13px;
    height: 13px;
}
.horizontal-line::after {
    content: '';
    display: block;
    width: 150px;
    border-top: 3px solid #FF4D4D;
    margin: 10px auto 40px auto !important;
}



/* ======================= explore asp net zero features page css ================== */

.asp-brand{
    max-width: 180px;
}

.explore-banner{
    background: url('../demos/hosting/images/Rad-platform/explore-asp-net-zero-features/anz-banner.svg') top center/cover no-repeat;
    background-size: 100%;
}

.banner-slider .carousel-control-prev-icon, .carousel-control-next-icon {
    width: 3rem;
    background: red;
    height: 3rem;
    border-radius: 50%;
}
.banner-slider .carousel-control-prev-icon {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 60% 60%;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
}

.banner-slider .carousel-control-next-icon {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 60% 60%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.banner-slider .carousel-control-prev, .carousel-control-next {
    opacity: 1;
}

.banner-slider .carousel-control-next {
    right: -150px;
}
.banner-slider .carousel-control-prev {
    left: -150px;
}

@media screen and (max-width:1023px) {
    .banner-slider .carousel-control-next,  .banner-slider .carousel-control-prev{
        display: none;
    }
}

.features-image{
    aspect-ratio: 3/1;
    object-fit: contain;
}
.multi-tabs .nav-pills .nav-link.active, .multi-tabs .nav-pills .show > .nav-link {
    color: #000;
    background-color: transparent;
    box-shadow: 0px 4px 40px #0000001f;
    width: 100%;
}
.multi-tabs .nav-link {
    color: #000;
}


@media (max-width: 768px){
    .multi-tabs .nav-pills .nav-link.active, .multi-tabs .nav-pills .show > .nav-link {
        width: auto;
        padding: 10px;
        background-color: white;
    }
    .multi-tabs .mw-md {
        max-width: 24px !important;
    }
    .multi-tabs .nav-link{
        padding: 10px;
    }
    .bg-black-sm {
        background-color: rgb(128 128 128 / 10%);
        padding: 10px 5px;
    }
  
}

@media (max-width: 767px){
    .multi-tabs .mw-md {
        max-width: 22px !important;
    }
    .sm-pe-0{
        padding-right: 0px;
    }
    .race-video{
        transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
    }
    
}

/* ==================================== deep framework expertise page css ================== */

.bg-light-blue{
    background-color: #DBF2FC;
}



/* ============================== footer css ===================== */

.main-footer{
	background-color: #191919 !important;
}
.disabled{
	cursor: not-allowed !important;
    color: #6c757d !important;
}
.one{
	max-width: 40%;
	width: 15%;
}
.two, .three{
	max-width: 30%;
	width: 15%;
}
.four{
	max-width: 15%;
	width: 7%;
}
.comp-copy{
	color: #dcdedc73;
    font-size: 12px;
    font-weight: normal;
    line-height: 21px;
    /* white-space: nowrap; */
}
/* @media (max-width: 1000px){
	.comp-copy{
		white-space: inherit;
	}
} */

@media (min-width: 992px){
.menu-link {
    padding: 20px 15px;
}
}


.star-rating .bi-star-fill {
    color: #11aa73;
}
@media (max-width: 991.98px){
.mega-menu-column .widget {
    padding: 20px 0;
}
}

@media (max-width: 768px){
    .w-75 {
        width: 100% !important;
    }
    .banner-logo img {
        padding-right: 15px;
    }
    .banner-logos1 {
        width: 120px;
    }
    #navbarSupportedContent {
        height: 520px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .race-video{
        transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
    }
    .ux-design-logos img {
        width: 130px !important;
        height: auto !important;
        margin: 10px !important;
    }
    .border-md-start{
        border-left: 0px solid transparent !important;
    }
    .coming{
        width: 25%;
    }
    .cls{
        right: 0px !important;
        top: 0px !important;
      }
}

@media (min-width: 992px){
    #header.transparent-header, #header.transparent-header:not(.sticky-header) #header-wrap {
        background: white;
    }
}

@media only screen and (max-width: 767px){
    .testimonial {
        text-align: left;
    }
}

@media screen and (min-width:1024px) and (max-width:1279px) {
    .menu-link {
        padding: 20px 5px;
    }
    .race-video{
        transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
    }
}


.stadium{
    background-image: url('/demos/hosting/images/stadium.png');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
}

.race-video{
    mix-blend-mode: darken;
}
.race-video{
    height: 100%;
    width: 100%;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.stadium-image{
    width: 80%;
    float: right;
    object-fit: none;
}


/* @media screen and (min-width: 3840px) {
    body{
        zoom: 2;
    }
} */


.ux-design-logos img{
    object-fit: scale-down;
    aspect-ratio: 1/1;
    width: 160px;
    height: 110px;
    /* mix-blend-mode: darken; */
    margin: 30px 20px;
    box-shadow: 0px 0px 1px 0px #e600001a;
    border-radius: 10px;
}

.subscribe::-webkit-input-placeholder { color:#6c757d8b }
.subscribe::-moz-placeholder { color:#6c757d8b } /* firefox 19+ */
.subscribe:-ms-input-placeholder { color:#6c757d8b } /* ie */
.subscribe:-moz-placeholder { color:#6c757d8b }

.icon-play-circle:before {
    font-size: 70px;
}
.video-play-button {
    position: absolute;
    z-index: 10;
    top: 44%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    /* background: #fa183d; */
    border-radius: 50%;
    padding: 18px 20px 18px 28px;
  }
.video-play-button:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: #ba1f24;
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
  }
  .video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: #e60000;
    border-radius: 50%;
    transition: all 200ms;
  }
  .video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid #fff;
      border-top: 22px solid transparent;
      border-bottom: 22px solid transparent;
  }

@keyframes pulse-border {
    0% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }

  .white-bullet li::marker {
    color: #fff;
}

.swiftic{
    max-width: 66%;
    margin-top: -20px;
}


/* animations css */


.banner-logo img:hover {
    filter: grayscale(0);
}

.services-box .pricing-box{
    transition: transform 0.5s ease;
}


.services-box .pricing-box:hover{ 
    transform: translateY(-0.5em);
 }


 /* get started page css */




.cat{
    overflow: hidden;
    float: left;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #c1c7d0c7;
    border-radius: 33px;
  }
  
  
  .cat label span {
    text-align: center;
    padding: 9px 0;
    display: block;
    color: #808080f0;
  }
  
  .cat label input {
    position: absolute;
    display: none;
    color: #fff !important;
  }
  
  .cat label input + span{    color: #808080f0;}
  
  .cat .form-check-label {
    width: 220px;
    max-width: 220px;
    }
  
  .cat input:checked + span {
    color: #03a9f4;
    text-shadow: 0 0 6px rgb(0 0 0 / 0%);
    border: 1px solid #03a9f4;
    border-radius: 33px;
    width: 220px;
    max-width: 220px;
    background: #E8F7FE80 0% 0% no-repeat padding-box !important;
  }
  
  .cut input:checked + span{
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cut{
    height: 55px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .action input:checked + span{
    background-color: transparent;
}

.bg-getstarted{
    background: url('/demos/hosting/images/get-started-bg.png') center center/cover no-repeat ;
    /* height: 100vh; */
}
.gets-form-div{
    overflow-y: auto;
    overflow-x: hidden;
    /* height: 700px; */
}

/* Scrollbar Styling */
.gets-form-div::-webkit-scrollbar {
    width: 3px;
}
 
.gets-form-div::-webkit-scrollbar-track {
    background-color: #ebebeb7a;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.gets-form-div::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #03a9f4;
}


.new-check{
    background: transparent;
    border: 0px solid;
    position: absolute;
    left: 120px;
}

.new-check:checked + .check-new-label span{
    color: #03a9f4;
    text-shadow: 0 0 6px rgb(0 0 0 / 0%);
    border: 1px solid #03a9f4;
    border-radius: 33px;
}

.new-check:checked[type=checkbox], .new-check:checked[type=radio] {
    background-image: none;
    background-color: transparent;
    border-color: transparent;
}

.new-check:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}

.gets-form-div .form-control {
    border: 1.5px solid #c1c7d0c7;
}

.gets-form-div .form-control:active, .gets-form-div .form-control:focus {
    border: 1.5px solid #999;
}

.coming{
    top: 5px;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: 600;
    line-height: 10px;
}
.coming{
    /* border: double 1px transparent;
    border-radius: 10px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top left, #00EEF8 0%, #00BCF6 44%, #009CF3 62%, #0492FF 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box; */
    background-color: #fff4de !important;
    color: #ffaa00 !important;
}


.cross{
    transition: all .3s ease;
}

  #cookiePopup{
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
  }
  
  .cls{
    right: -40px;
    top: -40px;
  }
  

  @media screen and (max-width: 1280px) {
    .stadium-image {
        width: 68%;
        float: right;
        object-fit: contain;
    }
}

@media screen and (max-width: 1439px) {
    .stadium-image {
        width: 68%;
        float: right;
        object-fit: contain;
    }
}