.row-gap {row-gap:30px;}
.z-index-0 {z-index:0;}
.hero-bg {background:linear-gradient(101.45deg, #FFF2F8 7.01%, #F3F2FF 86.04%); height:calc(100vh - 100px); width:100%;}
.hero-heading {font-size:44px; line-height:50px; position:relative; z-index:0;}
.hero-heading::after {position:absolute; content:"Conversion-Driven Ecommerce UI/UX Design Services"; color:white; -webkit-text-stroke:1px #FCB84C; left:1.5px; top:1.5px; z-index:-1;}
.hero-text p {margin-bottom:30px;}
.hero-bg-design, .hero-bg-design-reverse {position:absolute; top:-5px; background:url(../../images/ecommerce-ui-ux-design/hero-bg-design.webp); background-position:center; background-repeat:no-repeat; background-size:cover; width:150%; height:50%; left:50%; transform:translateX(-50%); z-index:-1;}
.hero-bg-design-reverse {top:unset; bottom:0px; transform:rotate(180deg); left:-25%;}
.contribute-card {padding:30px;}
.contribute-card .card-heading {font-family:var(--font-family-secondary); font-size:22px; line-height:28px; margin:20px 0px; font-weight:700;}
.contribute-card p {font-size:16px; margin-bottom:0px;}
.contribute-carousel .owl-item:nth-child(1), .contribute-carousel .owl-item:nth-child(4) {background:linear-gradient(90deg, #F4F1FF 0%, #FFFFFF 100%); border-left:2px solid #5752A2;}
.contribute-carousel .owl-item:nth-child(2) {background:linear-gradient(90deg, #FFECF4 0%, #FFFFFF 100%); border-left:2px solid #E7107E;}
.contribute-carousel .owl-item:nth-child(3) {background:linear-gradient(90deg, #FFF7EA 0%, #FFFFFF 100%); border-left:2px solid #FCB84C;}
.contribute-carousel .owl-nav {display:flex; justify-content:center; margin-top:30px;}
#services {background:#1B193C;}
#services-tab {display:flex; flex-wrap:nowrap; overflow-x:scroll; -ms-overflow-style:none; scrollbar-width:none;}
#services-tab::-webkit-scrollbar {display:none;}
#prevBtn, #nextBtn {line-height:0px; padding:10px; background:#fc815b; border-radius:50%; width:40px; height:40px; color:white; font-size:20px;}
#prevBtn:hover, #nextBtn:hover {background:#869791;}
#services-tab .nav-link {white-space:nowrap; color:white; opacity:0.7; font-family:var(--font-family-secondary); font-size:15px; line-height:22px; font-weight:400; border-bottom:1px solid #ffffff47; border-radius:0px;}
#services-tab .nav-link.active {background:transparent; opacity:1; font-weight:700; border-bottom:3px solid var(--secondary-pink);}
#services-tabContent .tab-pane {background:transparent;}
#services-tabContent h3 {color:white; font-size:24px; line-height:30px; font-weight:600; margin-bottom:16px;}
#services-tabContent p {color:white; font-size:16px; font-weight:500;}
#services-tabContent ul {padding-left:15px;}
#services-tabContent ul li {list-style:unset; font-family:var(--font-family-secondary); color:white; font-size:16px; font-weight:400; margin-bottom:5px;}
.solutions-card {background:#F4F3F8; display:flex; flex-direction:column; justify-content:center; padding:20px; border-radius:20px;}
.solutions-card .card-heading {font-family:var(--font-family-secondary); font-size:20px; line-height:26px; font-weight:800;}
.solutions-card p {font-size:16px; font-weight:400; margin-bottom:0px;}
.solutions-main .hidden {display:none;}
.cta-1 {background:unset; z-index:0;}
.left-bg {position:absolute; left:-50px; top:0px; background:url(../../images/ecommerce-ui-ux-design/cta-1-img.webp); background-position:center; background-repeat:no-repeat; background-size:cover; height:-webkit-fill-available; z-index:-1;}
.right-bg {position:absolute; right:-50px; top:0px; background:url(../../images/ecommerce-ui-ux-design/cta-1-bg.webp); background-repeat:no-repeat; background-size:cover; height:-webkit-fill-available; z-index:-1;}
.mcs-edge-list li {font-family:var(--font-family-secondary); font-size:18px; font-weight:700; margin-bottom:5px; background:url(../../images/ecommerce-marketplace-development/body/our-services/list-style.png) left center no-repeat; background-size:25px 20px; padding-left:30px;}
.case-study .card-heading {font-size:28px; line-height:34px; font-weight:700; margin-top:20px;}
.case-study p {font-size:18px; font-weight:400;}
.case-study-inner span {font-family:var(--font-family-main); font-size:28px; line-height:34px; font-weight:600;}
.case-study-inner p {font-size:15px;}
.case-study-btn {background:white; padding:10px 20px; border-radius:40px; color:black; font-family:var(--font-family-main); font-size:16px; line-height:22px; font-weight:600;}
.case-studies-carousel .owl-nav {display:flex; justify-content:center; margin-top:40px;}
#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:var(--primary-violet); font-weight:600; border-color:var(--secondary-pink);}
.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:var(--purple) !important; border-color:var(--pink);}
#tech-stack .nav-pills .nav-link {position:relative; display:flex; justify-content:space-between; border-radius:10px !important; border-bottom:none !important; padding:15px 20px; background-color:#F4F3F8 !important; font-size:18px; font-family:var(--font-family-main);}
#tech-stack .nav-pills .nav-link::after {content:"\f138"; font-family:"Font Awesome 6 Free"; font-size:25px; font-weight:700; color:white; line-height:0.8em; background:var(--primary-violet); border-radius:50%;}
#tech-stack .nav-pills .nav-link.active::after {background:transparent;}
#tech-stack .nav-pills .nav-link.active {background-color:var(--primary-violet) !important; color:#fff !important;}
#tech-stack span, #tech-stack button {font-weight:600; color:#000;}
#tech-stack #stack-tabContent {background:linear-gradient(153.43deg, #f4f3f8 0%, rgba(244, 243, 248, 0) 100%); border-radius:25px; padding:15px; height:100%;}
#tech-stack #stack-tabContent, #tech-stack .accordion-item {background:linear-gradient(153.43deg, #f4f3f8 0%, rgba(244, 243, 248, 0) 100%); border-radius:25px;}
#tech-stack .accordion {width:100%;}
#tech-stack .anyClass {overflow:hidden; max-height:none;}
#tech-stack .nav-pills button {width:100%;}
#tech-stack #key_feature .accordion-item {background:transparent;}
#tech-stack #key_feature .accordion-button {background:#f1f7fd1a; color:white; border-radius:10px !important; margin-bottom:15px; border-radius:10px !important; margin-bottom:15px;}
#tech-stack #key_feature .accordion-button:not(.collapsed) {background-color:var(--primary-violet); box-shadow:inset 0px 4px 4px rgba(255, 255, 255, 0.25);}
#tech-stack #key_feature .accordion-body {background:rgba(241, 247, 253, 0.1); border-radius:10px !important; margin-bottom:15px; box-shadow:inset 0px 4px 4px rgba(255, 255, 255, 0.25); padding:5px 20px 20px;}
#tech-stack #key_feature h3 {font-size:30px; color:#CC46FF;}
#tech-stack #key_feature ul {margin-bottom:0; padding-left:25px;}
#tech-stack #key_feature ul li {position:relative; margin-bottom:25px;}
#tech-stack #key_feature ul li::before {content:""; background-image:url("../../images/blockchain_game/tick.svg"); width:20px; height:20px; position:absolute; left:-30px; top:3px; background-position:center center; background-repeat:no-repeat; background-size:cover;}
.engagement-card {padding:30px; display:flex; flex-direction:column; justify-content:end; height:400px; border-radius:15px;}
.engagement-card-1 {background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%), url(../../images/ecommerce-ui-ux-design/engagement-card-1.webp); background-position:center; background-repeat:no-repeat; background-size:cover;}
.engagement-card-2 {background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%), url(../../images/ecommerce-ui-ux-design/engagement-card-2.webp); background-position:center; background-repeat:no-repeat; background-size:cover;}
.engagement-card-3 {background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%), url(../../images/ecommerce-ui-ux-design/engagement-card-3.webp); background-position:center; background-repeat:no-repeat; background-size:cover;}
.engagement-card-4 {background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%), url(../../images/ecommerce-ui-ux-design/engagement-card-4.webp); background-position:center; background-repeat:no-repeat; background-size:cover;}
.engagement-card .card-heading {font-family:var(--font-family-secondary); font-size:22px; line-height:28px; font-weight:700; color:white;}
.engagement-card p {color:white; font-size:16px; margin-bottom:0px;}
.cta-2 {background-image:url(../../images/software-development-company-in-south-africa/cta-2-bg.svg); background-position:center; background-repeat:no-repeat; background-size:cover; height:unset;}
.other-services-card {display:flex; align-items:end; padding:30px; height:400px; border-radius:10px 0px 0px 0px;}
.other-services-card .card-heading {font-family:var(--font-family-secondary); font-size:22px; line-height:28px; font-weight:700; color:white;}
.other-services-card-1 {background:linear-gradient(180deg, rgba(0, 0, 0, 0) 25.1%, #000000 94.66%), url(../../images/ecommerce-ui-ux-design/other-services-1.webp); background-position:center; background-repeat:no-repeat; background-size:cover;}
.other-services-card-2 {background:linear-gradient(180deg, rgba(0, 0, 0, 0) 25.1%, #000000 94.66%), url(../../images/ecommerce-ui-ux-design/other-services-2.webp); background-position:center; background-repeat:no-repeat; background-size:cover;}
.other-services-card-3 {background:linear-gradient(180deg, rgba(0, 0, 0, 0) 25.1%, #000000 94.66%), url(../../images/ecommerce-ui-ux-design/other-services-3.webp); background-position:center; background-repeat:no-repeat; background-size:cover;}
.other-services-card-4 {background:linear-gradient(180deg, rgba(0, 0, 0, 0) 25.1%, #000000 94.66%), url(../../images/ecommerce-ui-ux-design/other-services-4.webp); background-position:center; background-repeat:no-repeat; background-size:cover;}
.other-services-card-5 {background:linear-gradient(180deg, rgba(0, 0, 0, 0) 25.1%, #000000 94.66%), url(../../images/ecommerce-ui-ux-design/other-services-5.webp); background-position:center; background-repeat:no-repeat; background-size:cover;}
.other-services-carousel .owl-stage-outer {overflow:hidden;}
.other-services-carousel .owl-nav {position:absolute; left:0px; bottom:15%;}

@media (min-width: 992px) {
.h-lg-100 {height:100% !important;}
.card-wrapper {display:flex; flex-wrap:wrap;}
.engagement-card {transition:width 0.3s ease-in-out; flex-grow:1; width:0; margin-right:20px;}
.engagement-card:hover {flex-grow:1.8;}
.engagement-card p {max-height:0; overflow:hidden; transform:translateY(100%); transition:max-height 0.3s, transform 0.3s;}
.engagement-card:hover p {max-height:290px; transform:translateY(0);}
.mob.hidden {display:block;}
}

@media (min-width: 1200px) {
.other-services-carousel .owl-nav {bottom:20%;}
}

@media (min-width: 1400px) {
.contribute-carousel .owl-nav {display:none;}
.other-services-carousel .owl-nav {bottom:25%;}
}

@media (max-width: 1200px) {
.hero-heading {font-size:42px; line-height:48px;}
.solutions-card .card-heading {font-size:17px; line-height:23px;}
.solutions-card p {font-size:14px;}
}

@media (max-width: 992px) {
.hero-bg {padding-top:95px; height:unset;}
.hero-heading {font-size:28px; line-height:34px; margin-bottom:15px;}
.contribute-card img {width:40px; height:40px;}
.contribute-card .card-heading {font-size:20px; line-height:26px;}
.contribute-card p {font-size:15px;}
#services-tabContent h3 {font-size:22px; line-height:28px;}
#services-tabContent p {font-size:14px;}
#services-tabContent ul li {font-size:14px;}
.cta-1 {background:url(../../images/ecommerce-ui-ux-design/cta-1-bg-mobile.webp); background-position:center; background-repeat:no-repeat; background-size:cover; height:300px;}
.mcs-edge-list li {font-size:16px;}
.case-study .card-heading {font-size:22px; line-height:28px;}
.case-study p {font-size:16px;}
.case-study-inner span {font-size:22px; line-height:28px;}
.case-study-inner p {font-size:14px;}
.case-study-btn {padding:8px 20px; font-size:15px;}
.case-study-logo {width:100px; height:35px;}
#stack-tabContent .tab-pane {display:block !important; opacity:1;}
#stack-tabContent {background:transparent !important;}
#stack-tabContent .accordion-button {border-radius:10px; box-shadow:none;}
#stack-tabContent .accordion-button:not(.collapsed) {background:var(--primary-violet); color:#ffffff;}
#tech-stack #stack-tabContent {padding:0px;}
#stack-tabContent .accordion-body {background:#f6f5f9; border-radius:10px; margin-top:10px;}
#tech-stack .accordion-item {background:none;}
.engagement-card .card-heading {font-size:20px; line-height:26px;}
.engagement-card p {font-size:14px;}
.engagement-carousel .owl-item {padding:0px 2px;}
.engagement-carousel .owl-nav {display:flex; justify-content:center; margin-top:40px;}
.cta-2 {height:unset;}
.other-services-card .card-heading {font-size:20px; line-height:26px;}
.other-services-carousel .owl-nav {position:unset; display:flex; justify-content:center; margin-top:40px;}
.hidden {display:none;}
}