.mcs_hero_sec{background-image: url("../../images/ecommerce-platform-development/hero_sec.webp"), linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1)); background-blend-mode: overlay; background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 100px 20px; min-height: calc(100vh - 95px); display: flex; }
.mcs_hero_sec *{color: white;}
.mcs_hero_sec h2{font-size: 44px;line-height:50px;}
.mcs_hero_sec p{font-size: 22px;}
.btn-orange{background: transparent; color: #fc815b; padding: 12px 30px; border-radius: 40px; font-weight: 600; font-family: "Bricolage Grotesque", sans-serif; border: 1px solid #fc815b !important; font-size: 18px;}
.btn-orange:focus, .btn-orange:active{color: unset !important;background:unset !important;}
.btn-orange:hover{color: white;background:#fc815b;}
.text-pink{color: #ed2c7f; font-family: "Bricolage Grotesque", sans-serif; }
.item{width: 100% !important; height: 100% !important;}
.form.mcs-contact-form.form-control{padding: 10px 20px !important;}
.mcs__second-nav-main ul{height: auto;}
.mcs__second-nav-main ul li{padding: 0; opacity: 1;}
.mcs__second-nav-main ul li a{color: #00000099;}
.cust-tab li a{border-bottom: 2px solid transparent; padding: 12px;}
.cust-tab li a:hover, .cust-tab li a.active{color: #000000 !important; border-color:#5752A2;}
.truncate-text {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* Start Overview Section CSS */
.mcs__overview-main-sec{background: linear-gradient(180deg, #efeef6 90%, #f4f3f800 100%) !important;}
.mcs__overview-main-sec .bg-dot{position: absolute; top: -30px; left: -30px;}
/* End Overview Section CSS */

/* Start Service Section CSS */
.mcs__services-inner-main .service-box{border-radius: 10px; overflow: hidden;}
.mcs__services-inner-main .service-box .content{background: linear-gradient(180deg, #ffffff99 0%, rgba(255, 255, 255, 0) 100%); backdrop-filter: blur(100px); height: 100%; text-align: center; padding: 60px 20px 20px; transform: translateY(-30px);} 
.mcs__services-inner-main .service-box .content img{position: absolute; top: 0; left: 50%; transform: translate(-50%, calc(-50% + 10px));}
.mcs__services-section-three-accordian{border-left: 2px solid #5752a280;}
.mcs__services-section-three-accordian button.accordion-button{background: transparent !important; color: black !important; position: relative; font-size: 24px; box-shadow: none !important;}
.mcs__services-section-three-accordian button.accordion-button:focus{box-shadow: none;}
.mcs__services-section-three-accordian button.accordion-button img{position: absolute; left: -58px; top: 50%; transform: translateY(-50%);}
.mcs__services-section-three-accordian .accordion-body{border-radius: 20px; background: #F4F3F8;}
/* End Service Section CSS */

/* Start Accordion */
#tech-stack #stack-tab .nav-link{color: #000000; background: transparent; font-weight: 500; border-bottom: 2px solid white; transition: 0.3s; border-radius: 0;}
#tech-stack #stack-tab .nav-link.active{color: #5752A2; font-weight: 600; border-color: #ED2C7F;}
/* End Accordion */

/* Start Use Section CSS */
.mcs__services-sec-four-main .use-box{display: flex; flex-direction: column; height: 100%;}
.mcs__services-sec-four-main .use-box img{margin-bottom: 20px; border-radius: 20px;}
.mcs__services-sec-four-main .shadow-box{background: linear-gradient(180deg, #5752A2 0%, #F4F3F8 100%); border-radius: 20px; padding: 1px; height: 100%;}
.mcs__services-sec-four-main .shadow-box > div{background: linear-gradient(180deg, #FFFFFF 0%, #F4F3F8 100%); border-radius: 19px; height: 100%; padding: 20px;}
.mcs__services-sec-four-main .shadow-box p{margin-bottom: 0;}
/* End Use Section CSS */

/* Start MSC Edge */
.mcs-edge-sec-four-right{padding: 100px;}
.mcs-edge-sec-four-right .mcs-edge-sec-four-inner .inner-inner h6{font-size: 35px !important;}
/* End MSC Edge */

/* Start Case Studies CSS */
.mcs__edge-sec-two-main .owl-edge img{border-radius: 30px;}
.owl-edge .owl-nav{margin-top: 20px; padding-bottom: 20px;}
.owl-edge .owl-nav{display: block !important;}
.mcs__edge-sec-two-main .mcs_edge-carousel-card-inner{display: flex; flex-direction: column; justify-content: space-between; height: 100%; align-items: start;}
.mcs__edge-sec-two-main .mcs_edge-carousel-card-inner .blue-badge{background-color: var(--primary-violet); border: none; border-radius: 3px; padding: 3px 10px; color: #FFF; font-family: var(--font-family-secondary); font-size: 14px; font-weight: 700; line-height: 28px; letter-spacing: 0.28px;}
.mcs__edge-sec-two-main .mcs_edge-carousel-card-inner .light-blue-badge{background: transparent; border: 1px solid #E1DFEA; border-radius: 3px; padding: 2px 9px; color: #5752A2; font-family: var(--font-family-secondary); font-size: 14px; font-weight: 500; line-height: 28px; letter-spacing: 0.28px;}
.mcs__edge-sec-two-main .mcs_edge-carousel-card-inner h4{font-size: 40px; margin-bottom: 20px;}
.mcs__edge-sec-two-main .mcs_edge-carousel-card-inner p{font-weight: 500;}
.mcs__edge-sec-two-main .mcs_edge-carousel-card-inner a{background-color: black; padding: 8px 20px; border-radius: 50px; display: inline-block;}
/* End Case Studies CSS */

/* Start Advantage */
.mcs__edge-sec-three-main .image-box img{width: 100px;}
.mcs__edge-sec-three-main .image-box h4{font-weight: 600; font-size: 30px; line-height: 1.3em;}
/* End Advantage */

/* Start Testimonials */
.mcs_edge-carousel-card .author{position: relative;}
.mcs_edge-carousel-card .author-img{position: absolute; bottom: 0; left: 0; transform: translateY(100%);}
.mcs_edge-testimonal {background: transparent !important;}
.mcs__edge-sec-four-testimonal .mcs_edge-carousel-card {height: 100% !important; display: flex; flex-direction: column; justify-content: space-between; }
.mcs__edge-sec-four-testimonal .owl-item{border: 1px solid #DFDCEA; background: transparent !important;}
.owl-testimonal .owl-item {opacity: 0.25; transition: 0.3s;}
.owl-testimonal .owl-item.active.center {opacity: 1;}
.owl-nav button{width: 40px; height: 40px; background: transparent !important; position: relative; margin: 0 !important; padding: 0 !important; margin-left: 5px !important; margin-right: 5px !important;}
.owl-nav button span{display: none !important;}
.owl-nav button.owl-prev::before{content: "\f053"; font-family: "font awesome 6 free"; font-weight: 600; background-color: #fc815b; padding: 5px; border-radius: 50px; font-size: 20px; color: #F4F3F8; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.owl-nav button.owl-next::before{content: "\f054"; font-family: "font awesome 6 free"; font-weight: 600; background-color: #fc815b; padding: 5px; border-radius: 50px; font-size: 20px; color: #F4F3F8; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
/* End Testimonials */

/* Start Tech Stack */
.mcs_tech-stack .accordian_tab_contents {padding: 0 !important; background: none !important;}
.mcs_tech-stack .accordian_tab_contents .col{padding: 0;}
.mcs_tech-stack .accordain_tab_group {margin-bottom: 20px; display: flex; justify-content: center; column-gap: 10px;}
.mcs_tech-stack .accordain_tab_group .tab{background: transparent !important; margin: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0px !important; justify-content: center; padding-bottom: 10px;}
#one:checked ~ .accordain_tab_group #one-tab, #two:checked ~ .accordain_tab_group #two-tab, #three:checked ~ .accordain_tab_group #three-tab, #four:checked ~ .accordain_tab_group #four-tab, #five:checked ~ .accordain_tab_group #five-tab, #six:checked ~ .accordain_tab_group #six-tab, #seven:checked ~ .accordain_tab_group #seven-tab, #eight:checked ~ .accordain_tab_group #eight-tab, #nine:checked ~ .accordain_tab_group #nine-tab{color: #5752A2 !important; border-color: #ed2c7f;}
/* End Tech Stack */

/* Start Engagement Modal */
.mcs_engagment-sec-cards-row .modal-bg{background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%); padding: 30px; border-radius: 30px; margin-bottom: 40px;}
.mcs_engagment-sec-cards-row .modal-bg-reverse{background: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%); padding: 30px; border-radius: 30px; margin-bottom: 40px;}
.mcs_engagment-sec-cards-row p{margin-bottom: 0;}
.mcs_engagment-sec-cards-row h3{font-family: "Manrope", sans-serif; font-weight: bold; font-size: 30px; margin-bottom: 20px;}
.mcs_engagment-sec-cards-row h4{color: #ed2c7f; font-family: "Manrope", sans-serif; font-weight: bold; font-size: 22px; margin-bottom: 10px;}
/* End Engagement Modal */

/* Start Cost of Building a Scalable Marketplace Platform */
.mcs__engagment-sec-two-main .cost{background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100%; position: relative; border-radius: 30px; min-height: 300px; padding: 20px; display: flex; align-items: end;}
.mcs__engagment-sec-two-main .cost button{ width: 100%; padding: 8px 5px; border-radius: 50px; background: white; color: black; box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.3); font-weight: 600;}
.mcs__engagment-sec-two-main .cost-1{background-image: url("../../images/ecommerce-platform-development/cost_1.webp");}
.mcs__engagment-sec-two-main .cost-2{background-image: url("../../images/ecommerce-platform-development/cost_2.webp");}
.mcs__engagment-sec-two-main .cost-3{background-image: url("../../images/ecommerce-platform-development/cost_3.webp");}
.mcs__engagment-sec-two-main .cost-4{background-image: url("../../images/ecommerce-platform-development/cost_4.webp");}
.mcs__engagment-sec-two-main .cost-5{background-image: url("../../images/ecommerce-platform-development/cost_5.webp");}
/* End Cost of Building a Scalable Marketplace Platform */

/* Start Fuel Growth */
.mcs__engagment-sec-three-main{background-image: url("../../images/ecommerce-platform-development/growth_bg.webp"); background-size: 100%;}
.mcs__engagment-sec-three-main{height: 500px;}
.mcs__engagment-sec-three-main h2{font-size: 36px;line-height:46px;}
/* End Fuel Growth */

@media only screen and (max-width: 1400px){
    /*.mcs_hero_sec h1{font-size: 42px;line-height:48px;}*/
    .mcs__service-sec-two-right-txt h4{font-size: 36px;}
    .mcs-edge-sec-four-right{padding: 60px;}
    .mcs-edge-sec-four-right .mcs-edge-sec-four-inner .inner-inner{width: 100%;}
    .mcs__edge-sec-two-main .mcs_edge-carousel-card-inner h4{font-size: 36px;}
    .mcs__edge-sec-three-main .image-box img{width: 80px;}
    .mcs__edge-sec-three-main .image-box h4{font-size: 28px; font-weight: 500;}
    .mcs__engagment-sec-three-main h2{font-size: 36px;line-height:46px;}
    .mcs__engagment-sec-three-main{height: 320px;}
}
    
@media only screen and (max-width: 1200px){
    .mcs_hero_sec h2{font-size: 42px;line-height:48px;}
    .mcs_hero_sec p{font-size: 20px;}
    .mcs-edge-sec-four-right{padding: 40px;}
    .mcs__engagment-sec-three-main h2{font-size: 32px;}
}

@media (min-width: 1024px) and (max-width: 1200px){
    .mcs_menu > ul > li{margin: 0px 10px; white-space: nowrap;}
}
    
@media only screen and (max-width: 992px){
    .mcs_hero_sec h2{font-size: 28px;line-height:34px;}
    .mcs_hero_sec p{font-size: 19px;}
    .mcs_section-main-heading p{font-size: 16px;}
    .mcs__edge-sec-two-main .mcs_edge-carousel-card-inner h4{font-size: 30px;}
    .mcs_engagment-sec-cards-row h3{font-size: 26px;}
    .mcs_engagment-sec-cards-row .modal-bg , .mcs_engagment-sec-cards-row .modal-bg-reverse{background: white;}
    .modal-bg-reverse > div{flex-direction: column-reverse;}
    .mcs__engagment-sec-three-main h2{font-size: 24px;line-height:30px;}
    #smart-contract #stack-tabContent .accordion-body h4{font-size: 26px;}
    #stack-tabContent .tab-pane{display: block !important; opacity: 1;}
    .mcs__second-nav-main{top: 75px !important;}
    .cust-tab{white-space: nowrap; overflow-x: scroll; -webkit-overflow-scrolling: touch;}
    .mcs_mob{display: none;}
}

@media only screen and (max-width: 767px){
    /*.mcs_hero_sec h1{font-size: 40px;}*/
    .mcs_hero_sec p{font-size: 16px;}
    .mcs__overview-main-sec .bg-dot{top: -15px; left: -15px;}
    .mcs__edge-sec-three-main .image-box h4{font-size: 24px;}
    .mcs_section-main-heading h2{font-size: 24px;line-height:30px;}
    .mcs__edge-sec-two-main .mcs_edge-carousel-card-inner h4{font-size: 24px;}
    .mcs__engagment-sec-three-main{background: linear-gradient(90deg, #FFF2F8 0%, #F3F2FF 100%); height: auto; padding: 50px 10px;}
    .mcs_engagement-sec-two-inner{padding-left: 10px; padding-right: 10px;}
    #smart-contract #stack-tabContent .accordion-item{opacity: 1; display: block;}
    #smart-contract #stack-tabContent{padding: 0px; background: none;}
    #smart-contract #stack-tabContent::before{background: none;}
    #smart-contract #stack-tabContent .accordion-collapse{position: relative; margin-top: 15px;} 
    #smart-contract #stack-tabContent .accordion-body{padding: 25px 15px;}
    #smart-contract #stack-tabContent .accordion-button.collapsed{background-color: #000C10;}
    #smart-contract #stack-tabContent .accordion-collapse::before{content: ""; position: absolute; inset: 0; padding: 3px; border-radius: 10px; background: linear-gradient(90deg, #cc46ff 0%, #4659ff 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
    .mcs__services-section-three-accordian button.accordion-button{font-size: 20px;}
    .mcs_engagment-sec-cards-row .modal-bg, .mcs_engagment-sec-cards-row .modal-bg-reverse{padding: 20px;}
}

@media only screen and (max-width: 576px){
    /*.mcs_hero_sec h1{font-size: 32px;}*/
    .mcs-edge-sec-four-right{padding: 20px;}
    #overview, .mcs__services-inner-main, .mcs__services_violet-sec-two, .mcs__services-section-three-inner, .mcs__services-sec-four-main, .mcs__edge-sec-two-main, .mcs__edge-sec-three-main, .mcs__edge-sec-four-testimonal {padding-left: 8px; padding-right: 8px;}
    .mcs__edge-sec-four-testimonal {padding-bottom: 50px !important;}
    .mcs-edge-top-main-heading {padding-left: 20px; padding-right: 20px;}
    .mcs__services-section-three-accordian button.accordion-button img{width: 55px; left: -52px;}
}

.sticky {
    position: fixed;
    top: 75px;
    width: 100%;
    z-index: 1; /* add a z-index to ensure it's on top of other elements */
  }