/* ===== FLEXBOX UTILITIES ===== */
.d-flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column {
    flex-direction: column;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

.justify-content-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}

.text-center {
    text-align: center;
}

.m-0 {
    margin: 0;
}

.p-0 {
    padding: 0;
}

/* ===== FLEXBOX UTILITIES ENDS ===== */


:root {
    --primary-text-color: #FAFAFA;
    --secondary-text-color: #E5E5E5;
    --border-color: #292929;
}

h1, h2, h3, h4, h5, h6, p{
    padding: 0 !important;
    margin: 0 !important;
}

body {
    background-color: #FFFFFF !important;
}

.cfibreOrangeBtn {
    margin: 0 !important;
    font-family: 'Poppins-medium' !important;
}

.transparent-btn {
    background-color: transparent !important;
    border-color: #0f0f0f !important;
    color: #141414 !important;
}

.cfibreOrangeBtn.transparent-btn:hover {
    background-color: transparent !important;
    border-color: #0f0f0f !important;
    color: #141414 !important;
}

h1{
    color: aquamarine;
    font-size: 30px;
}


/* ---------------------------- hero section start -------------------------- */
.hero-carousel-section{
    padding: 50px;
    overflow: hidden;
}

.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Cover full element */
    padding: 4px;
    /* Border thickness */
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    pointer-events: none;

    /* So clicks go through */
}

.hero-banner {
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    background: url('/cellc/img/business/home/business-banner.webp') center/cover no-repeat;
    z-index: 0;
}

.hero-banner .banner-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(279.67deg, rgba(250, 250, 250, 0) 41.19%, #FAFAFA 105.04%),
                linear-gradient(201.65deg, rgba(0, 0, 0, 0) 48.79%, rgba(255, 255, 255, 0.8) 111.69%),
                linear-gradient(111.45deg, rgba(234, 91, 12, 0) 60.63%, #010101 99.34%);
    z-index: 1;
}

.hero-banner h1 {
    font-family: 'CellCSans-bold';
    font-weight: 400;
    font-size: 86px;
    line-height: 110%;
    color: #F05A1E;
    z-index: 2;
    margin-bottom: 36px !important;
}

.hero-banner h6 {
    font-family: 'Cell C Sans';
    font-weight: 400;
    font-size: 22px;
    line-height: 120%;
    color: #0C0D0D;
    margin-bottom: 50px !important;
    z-index: 2;
}

.hero-banner .cfibreOrangeBtn{
    z-index: 2;
}

.hero-banner .highlight-card{
    background-blend-mode: darken;
    background: #9999994D;
    background-blend-mode: luminosity;
    background: #FFFFFF05;
    background: #FFFFFF14;
    border: 1px solid #FDFDFD5C;
    opacity: 1;
    border-radius: 18px;
    position: absolute;
    padding: 19px 26px;
    z-index: 2;
    align-items: center;
}   

.hero-banner .hero-banner-review{
    padding: 19px 25px;
    background-blend-mode: darken;
    background: #9999994D;
    background-blend-mode: luminosity;
    background: #FFFFFF05;
    background: #FFFFFF14;
    border: 1px solid #FDFDFD5C;
    display: flex;
    flex-direction: column;
    z-index: 2;
    border-radius: 18px;
    margin-bottom: 32px;
    bottom: 31px;
    right: 34px;
    position: absolute;

}

.hero-banner .hero-banner-review img{
    max-height: 17px;
    align-self: baseline;
    margin-bottom: 11px;
}

.hero-banner .hero-banner-review p{
    color: #FFFFFF;
    font-family: 'CellCSans-semibold';
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 9px !important;
}

.hero-banner .hero-banner-review .reviewer-details{
    display: flex;
    gap: 8px;
}

.hero-banner .hero-banner-review .reviewer-details img{
    height: 26px;
    width: 26px;
    margin: 0;
    max-height: unset;
}

.hero-banner .hero-banner-review .reviewer-details p{
    font-family: 'CellCSans-semibold';
    font-size: 16px;
    line-height: 28px;
    color: #FFFFFF;
}


/* for slick carousel */
.hero-carousel-section ul.slick-dots > li {
    background: none repeat scroll  #D9D9D9;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    height: 10px;
	width:10px;
    margin: 0 4px;  
    line-height: 10px;
}

.hero-carousel-section ul.slick-dots{
    bottom: 0;
}

.hero-carousel-section ul.slick-dots > li.slick-active {
    background: none repeat scroll 0 0 #EA5B0C;
}

.slick-list.draggable{
    border-radius: 32px;
}

.slick-dots li button, .slick-dots li button:hover, .slick-dots li button:focus{
    visibility: hidden;
}
/* for slick carousel ends */

/* ---------------------------- hero section end -------------------------- */


/* ---------------------------- Deals section start -------------------------- */

.deals-section{
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(184, 184, 184, 0.09) 100%);
}

.deals-section-header{
    padding-top: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.deals-section-header h2{
    color: #141414;
    font-family: 'CellCSans-semibold';
    font-size: 54px;
    margin-bottom: 16px !important;
}

.deals-section-header p{
    color: #0C0D0D;
    font-family: 'CellCSans-semibold';
    font-size: 22px;
    margin-bottom: 32px !important;
}


.deals-section-header .tab-wrapper {
    position: relative;
    display: flex;
    width: 733px;
    background: #0f0f0f;
    border-radius: 13px;
    padding: 12px 16px;
    justify-content: space-between;
    border: 1.5px solid #292929;
}
 
.tab-wrapper .nav-item {
  min-width: 342.5px;
}
 
.tab-wrapper .nav-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 10px;
  color: #fafafa;
  background: transparent;
  border: 2px solid transparent;
  text-decoration: none;
  font-size: 16px;
  transition: all 0.3s ease;
}
 
/* active tab */
.tab-wrapper .nav-item a.active {
  border-color: #9A3804;
  background-color: #141414;
}
 
/* hover effect */
.tab-wrapper .nav-item a:hover {
  border-color: #9A3804;
  background-color: #141414;
}
 
/* remove bootstrap defaults */
.nav-tabs {
  border-bottom: none;
}
 
.nav-tabs .nav-link {
  border: none;
}

.deal-section-body{
    overflow: hidden;
}

/* top delas start */

.deal-section-body .tab-pane{
    padding-bottom: 148px;
}

.top-deals__content{
    display: flex;
    padding: 0 30px;
    justify-content: center;
}

.top-deals__card{
    margin-top: 279px;
    border: 2px solid var(--border-color);
    background-color: #141414;
    border-radius: 16px;
    position: relative;
    padding: 154px 24px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
}

.top-deals__card--image{
    height: 360px;
    position: absolute;
    top: 0;
    z-index: 3;
    margin: 0 auto;
    top: -230px;
    left: 0;
    right: 0;
    width: 75%;
    display: flex;
    align-items: flex-end;
}

.top-deals__card--image img{
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.top-deals__card__header--pill{
    background-color: #292929;
    border: 1px solid #525252;
    border-radius: 4px;
    padding: 2px 8px;
    color: #F5F5F5;
    font-family: 'Inter';
    font-size: 12px;
    width: max-content;
}

.top-deals__card__header--title{
    font-size: 26px;
    font-family: 'CellCSans-semibold';
    line-height: 130%;
    color: var(--primary-text-color);
    margin-top: 16px !important;
}

.top-deals__card__content{
    display: flex;
    flex-direction: column;
}

.top-deals__card__content p{
    color: var(--secondary-text-color);
    font-size: 16px;
    font-family: 'Poppins';
}

.top-deals__card__footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-deals__price-block{
  display: flex;
  flex-direction: column;
  gap: 6px; 
}

.top-deals__price-from{
  color: #ED6920;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 22px; 
  line-height: 1.1;
}

.top-deals__price-row{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.top-deals__card__footer--price{
  display: flex;
  gap: 6px;
  font-family: 'CellCSans-bold';
  font-size: 54px;
  color: #ED6920;
  line-height: 1; 
}

.top-deals__card__footer--price-details{
  display: flex;
  flex-direction: column;
  justify-content: center; 
  font-size: 12px;
  line-height: 140%;
  font-family: "Poppins", sans-serif;
  color: var(--secondary-text-color);
  margin-top: 4px;
}

.top-deals__card__footer--cta{
  color: var(--primary-text-color);
  border: 0.86px solid #FDFDFD;
  padding: 14px 27px;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  border-radius: 99px;
  background-color: transparent;
  height: max-content;
}

/* top deals ends */

/* swiper related css */

        .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
            z-index: 10;
        }
        
		.usersSlider-swiper .swiper-button-prev {
			background-image: url(/cellc/img/quickLinks/sl-left.png);
			right: auto;
			top: auto;
			bottom: -100px;
			height: 25px;
			background-repeat: no-repeat;
			left: 30%;
		}
	
		.swiper .swiper-button-prev::after,
		.swiper .swiper-button-next::after,
		.usersSlider-swiper .swiper-button-prev::after,
		.usersSlider-swiper .swiper-button-next::after {
			display: none;
		}
		.swiper .swiper-button-prev{
			background-image: url(/cellc/img/quickLinks/sl-left.png);
			right: auto;
			top: auto;
			bottom: -2px;
			height: 25px;
			background-repeat: no-repeat;
			left: 27%;
		

		}
		.swiper .swiper-button-next{
			right: 40px;
			background-image: url(/cellc/img/quickLinks/sl-right.png);
			top: auto;
			bottom: -2px;
			height: 25px;
			background-repeat: no-repeat;
			right: 30%;
            background-color: #fff;
		}
		@media screen and (min-width: 1920px ) {
			.swiper .swiper-button-prev{
			background-image: url(/cellc/img/quickLinks/sl-left.png);
			right: auto;
			top: auto;
			bottom: -2px;
			height: 25px;
			background-repeat: no-repeat;
			left: 32%;

		}
	
		
}

@media screen and (min-width: 1920px ) {

	.swiper .swiper-button-next{
			right: 40px;
			background-image: url(/cellc/img/quickLinks/sl-right.png);
			top: auto;
			bottom: -2px;
			height: 25px;
			background-repeat: no-repeat;
			right: 33%;

		}
}
@media screen and (min-width: 1600px ) {
		.plan-details.lastSlide {
			height: 500px;
		}
		
}


		.usersSlider-swiper .swiper-button-next {
			right: 40px;
			background-image: url(/cellc/img/quickLinks/sl-right.png);
			top: auto;
			bottom: -100px;
			height: 25px;
			background-repeat: no-repeat;
			right: 30%;
		}

	
		.digital-img {
			width: auto !important;
		}
	
		.digital-bottom-desc {
			text-align: center;
			color: #737373;
			font-family: 'Poppins';
			margin-bottom: 40px;
			margin-top: 20px;
		}
	
	
	
		.usersSection {
			margin: 20px;
			margin-bottom: -118px;
		}
	
		.usersSlider .slick-arrow {
			top: auto;
			bottom: -132px;
			border-radius: 50%;
			width: 57px;
			height: 57px;
			background: none;
			position: absolute;
			background-repeat: no-repeat !important;
			box-sizing: border-box;
			background-position: center !important;
	
			margin-left: 301px;
			margin-right: 250px;
			border: none;
		}
	

        .usersSlider-swiper>.swiper-scrollbar {
			height: 12px;
			width: 450px;
			bottom: -95px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #fff;
	
		}
		.swiper>.swiper-scrollbar{
			height: 12px;
			width: 420px;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: #fff;

		}

		.usersSlider-swiper>.swiper-scrollbar {
			width: 370px;
		}
	
		.swiper>.swiper-scrollbar-container{
			border-radius: 8px;
			height: 12px;
			width: 440px;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: #1e1e1e;
			position: absolute;
			
		}
		.usersSlider-swiper>.swiper-scrollbar-container {
			border-radius: 8px;
			height: 12px;
			width: 400px;
			bottom: -95px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #fff;
			position: absolute;
		}

		.swiper-scrollbar-drag {
			background-color: #EA5B0C;
			border-radius: 999px;
			height: 4px;
			top: 4px;
		}
        /* swiper related css ends */

/* ---------------------------- Deals section end -------------------------- */

/* ---------------------------- Advantages section start -------------------------- */

.advantages-section{
    background-color: #ffffff;
}

.advantages-section-header{
    margin: 120px 80px 64px 80px;
    display: flex;
    gap: 74px;
}

.advantages-section-header > h2,
.advantages-section-header > p {
    flex: 1 1 0;                  
    margin: 0;                 
    min-width: 0;
}

.advantages-section-header > h2{
    align-self: flex-start;
    font-size: 60px;
    line-height: 110%;
    color: #141414;
    font-family: 'CellCSans-semibold';
}

.advantages-section-header > p{
    align-self: flex-end;
    font-size: 18px;
    line-height: 140%;
    color: #0C0D0D;
    font-family: 'Poppins';
}


.advantages-section-cards {
    display: flex;
    /* gap: 24px; */
    padding: 24px 24px 35px 24px;
    justify-content: space-between;
}
 
.advantages-section-card {
    display: block;
    position: relative;
    width: 330px;
    height: 420px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 200ms ease;
    text-decoration: none;
    color: inherit;
}
 
.advantages-section-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
/* Base gradient overlay */
.advantages-section-card .overlay {
    position: absolute;
    inset: 0;
    transition: background 0.4s ease;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 23.18%, rgba(255, 255, 255, 0.8) 77.26%);
}

 
/* Hover effect */
.advantages-section-card:hover {
    transform: translateY(-24px);
}

.advantages-section-card:hover .overlay {
    background: linear-gradient(
        to top,
        rgba(255, 102, 0, 0.85),
        rgba(255, 102, 0, 0.35)
    );
}
 
/* Tags */ 
.tags {
    position: absolute;
    top: 28px;
    left: 28px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag {
    background: #292929;
    color: #F5F5F5;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    border: 1px solid #525252;
    font-family: 'Inter';
}
 
/* Card content */
.advantages-section-card-content {
    position: absolute;
    bottom: 43px;
    left: 28px;
    right: 20px;
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
 
.advantages-section-card-content h3 {
    margin: 0;
    font-size: 28px;
    line-height: 120%;
    font-family: 'Poppins-bold';
    color: #0C0D0D;
}

.advantages-section-card:hover .advantages-section-card-content h3{
    color: #FAFAF9;
}
 
.arrow {
    width: 52px;
    height: 52px;
    cursor: pointer;
}


.image-stack {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.image-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 200ms ease;
  display: block;
}


.img-base { opacity: 1; }
.img-hover { opacity: 0; }


.advantages-section-card:hover .img-base { opacity: 0; }
.advantages-section-card:hover .img-hover { opacity: 1; }


.arrow > img{
    width: 100%;
    height: 100%;
}

/* ---------------------------- Advantages section ends -------------------------- */

.horizontal-section-breaker{
    background-color: rgb(41 41 41 / 20%);
    width: 80%;
    height: 1px;
    border: none;
    margin: 64px auto 90px auto;
    padding: 0;
}

.brands-logo-section{
    display: flex;
    width: 80%;
    margin: 0 auto;
    justify-content: space-between;
}


.brands-logo-section > p {
    flex: 0 0 30%;
    margin: 0;
    min-width: 0;  
}

.brands-logo-section > img {
    flex: 0 0 70%;       
    margin: 0;
    min-width: 0;
    object-fit: contain;
}


.brands-logo-section > p{
    font-size: 15.3px;
    line-height: 110%;
    color: #6b6b6b;
    font-family: 'Cell C Sans';
}


/* horiz-scroll */
.horiz-scroll-wrapper {
    position: relative;
    overflow: hidden;
}

.horiz-scroll-cards-container {
    margin: 160px 0;
    gap: 32px;
    animation: scroll 20s linear infinite;
    will-change: transform;
    z-index: 2;
}

.horiz-scroll-cards-container.paused {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translate(-50%);
    }
}

/* Gradient overlays */
.gradient-left,
.gradient-right {
    position: absolute;
    top: 0;
    width: 156px;
    height: 229px;
    pointer-events: none; /* allows clicks to pass through */
    z-index: 1;
    margin-top: 160px;
}

.gradient-left {
    left: 0;
    background: linear-gradient(to right, #090909, transparent);
}

.gradient-right {
    right: 0;
    background: linear-gradient(to left, #090909, transparent);
}

.horiz-scroll-card{
    border-radius: 12px;
    background-color: #141414;
    border: 1px solid #292929;
    padding: 62px 32px 0 32px;
    gap: 16px;
    flex: 0 0 515px;
    text-align: center;
}

.horiz-scroll-card h2{
    font-family: 'CellCSans-semibold';
    font-weight: 400;
    font-size: 44px;
    line-height: 130%;
    letter-spacing: 0px;
    color: #FAFAFA;
    margin: 0;
}

.horiz-scroll-card p {
    font-family: 'Cell C Sans';
    font-weight: 400;
    font-size: 22px;
    line-height: 120%;
    margin-bottom: 40px !important;
    color: #E5E5E5;
}

/* Blur everything except the hovered card */
body.blur-active>*:not(.horiz-scroll-wrapper),
body.blur-active .horiz-scroll-wrapper>*:not(.horiz-scroll-cards-container),
body.blur-active .horiz-scroll-cards-container>*:not(.horiz-scroll-card.active) {
    filter: blur(8px);
    pointer-events: none;
    transition: filter 0.3s;
}

/* Make the active card stand out */
.horiz-scroll-card.active {
    filter: none !important;
    z-index: 1000;
    pointer-events: auto;
    position: relative;
    background-color: #1e1e1e;
    border-color: #424242;
    cursor: pointer;
}

/* horiz-scroll ends */
    

/* -----------------------Powering business starts */

.powering-business{
    background: linear-gradient(
        to bottom,
        #FFFFFF 50%,
        #090909 50%
    );
    padding: 66px 80px;
}

.powering-business-banner{
    height: 560px;
    background: url('/cellc/img/business/home/moc-banner.webp') center/cover no-repeat;
    position: relative;
}

.powering-business-banner h2{
    color: #FAFAFA;
    font-size: 60px;
    line-height: 120%;
    margin-bottom: 10px !important;
    z-index: 2;
}

.powering-business-banner p{
    color: #E5E5E5;
    font-family: 'Poppins';
    font-size: 18px;
    line-height: 140%;
    margin-bottom: 68px !important;
    z-index: 2;
}

.powering-business-banner .banner-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 1;
}

#powering-business-video .modal-dialog{
    display: flex;
    justify-content: center;
    margin-top: 5%;
}

/* -----------------------Powering business ends */


/* -----------------------success solutions starts ----------------- */
.solutions {
    padding: 101px 80px;
    background-color: #090909;
}

.solutions h2{
    font-family: 'CellCSans-semibold';
    font-size: 60px;
    line-height: 110%;
    color: #FFFFFF;
    margin-bottom: 33px !important;
}

.solutions .solution-cards{
    --gap: 33px;
    
    margin-inline: auto;
    display: grid;
    row-gap: var(--gap);
}


.solution-row {
    display: flex;
    gap: var(--gap);

    /* Compute sizes relative to the row’s width and the shared gap */
    --small: calc((100% - 2 * var(--gap)) / 3);
    --large: calc(2 * var(--small) + var(--gap));
}


/* Card styling for demo */
.solution-card {
    border-radius: 16px;
    min-height: 350px;
    border: 1.5px solid #292929;
    position: relative;;
}

.solution-card--small{
    background-color: #141414;
}


.solution-card--large{
    background: url('/cellc/img/businessPage/solutions.jpeg') center/cover no-repeat;
    overflow: hidden;
}

.solution-card--large .solution-card-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(288.42deg, rgba(234, 91, 12, 0) 51.91%, #EA5B0C 94.93%);
    z-index: 1;
}

/* WIDTHS — the key part */
.solution-row-1 .solution-card--large { flex: 0 0 var(--large); }
.solution-row-1 .solution-card--small { flex: 0 0 var(--small); }

.solution-row-2 .solution-card--small { flex: 0 0 var(--small); }


@media (max-width: 720px) {
    .solution-row {
        flex-wrap: wrap;
    }
    .solution-row-1 .solution-card--large,
    .solution-row-1 .solution-card--small,
    .solution-row-2 .solution-card--small {
        flex: 1 1 100%;                 /* stack gracefully */
        min-width: min(320px, 100%);    /* optional: keep cards readable */
    }
}

.solution-card-tags {
    position: absolute;
    top: 37px;
    left: 35px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.solution-card-tag {
    background: #292929;
    color: #F5F5F5;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    border: 1px solid #525252;
    font-family: 'Inter';
    z-index: 2;
}

.solution-card-cta{
    position: absolute;
    right: 30px;
    top: 28px;
    width: 52px;
    height: 52px;
}

.solution-card--large .solution-card-content{
    padding: 180px 36px 36px 36px;
}

.solution-card--small .solution-card-content{
    padding: 120px 29px 46px 35px;
}

.solution-card-content{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.solution-card-content--header{
    font-family: 'Poppins-semibold';
    font-size: 28px;
    line-height: 120%;
    color: #FAFAF9;
    z-index: 2;
}

.solution-card-content--description{
    font-family: 'Poppins';
    font-size: 18px;
    line-height: 140%;
    color: #E5E5E5;
    z-index: 2;
}


/* -----------------------success solutions ends ----------------- */


        /* testimonial section starts */
        .testimonials {
            padding: 72px 189px 169px 189px;
            gap: 60px;
            background-color: #090909;
        }
    
        .testimonials .testimonials-header {
            font-size: 56px;
            text-align: center;
            color: #FAFAFA;
            line-height: 120%;
            font-family: 'CellCSans-semibold';
        }
    
        .carousel-container {
            position: relative;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    
        .cards-stack {
            position: relative;
            max-width: 838px;
            width: 100%;
            height: 280px;
        }
    
        .testimonial-card {
            position: absolute;
            width: 100%;
            height: 280px;
            background: url('/cellc/img/stars-n-bars/testimonials-curves.svg') center/cover no-repeat;
            background-position-x: 169px;
            background-color: #0f0f0f;
            border: 2px solid #292929;
            border-radius: 16px;
            padding: 0 30px;
            display: flex;
            flex-direction: row-reverse;
            justify-content: center;
            gap: 15px;
            transition: transform 520ms ease-out, opacity 520ms ease;
            pointer-events: auto;
        }

        .testimonial-card .date-badge{
            background-color: #292929;
            border: 1px solid #525252;
            border-radius: 4px;
            padding: 2px 8px;
            color: #F5F5F5;
            font-family: 'Inter';
            font-size: 12px;
            width: max-content;
        }
    
        .customer-name {
            color: #ED6920;
            font-family: 'Poppins';
            font-weight: 400;
            font-size: 14px;
            line-height: 120%;
            letter-spacing: 0px;
            margin-left: 19px !important;
        }
    
        .testimonial-text {
            color: #E5E5E5;
            font-weight: 400;
        }
    
        /* Stack positions - visible from TOP, cards above the main one */
        .card-0 {
            transform: translateY(0px) scale(1);
            z-index: 30;
        }
    
        .card-1 {
            transform: translateY(-20px) scale(0.96);
            z-index: 20;
            background-color: #141414;
            border: none;
            width: 95%;
            opacity: .8;
        }
    
        .card-2 {
            transform: translateY(-43px) scale(0.92);
            z-index: 10;
            background-color: #141414;
            border: none;
            opacity: .6;
            width: 85%;
        }
    
        .card-3 {
            transform: translateY(-60px) scale(0.88);
            z-index: 5;
            pointer-events: none;
        }
    

        .animate-right {
            animation: rightAndFade 800ms ease-out forwards;
        }
            
        @keyframes rightAndFade {
            0% {
                transform: translate(0, 0) scale(1) rotate(0deg);
                z-index: 30;
            }
            250% {
                transform: translate(475px, 10px) scale(0.96) rotate(-2.5deg);
            }
            50% {
                transform: translate(950px, 10px) scale(0.9) rotate(-5deg);
                filter: blur(0.5px);
                opacity: .9;
            }
            75% {
                transform: translate(475px, 10px) scale(0.5) rotate(-2.5deg);
                opacity: .5;
            }
            100% {
                transform: translate(0px, 0) scale(0.5) rotate(0deg);;
                z-index: 5;
                opacity: 0;
            }
        }
 
        /* Card slides LEFT and up smoothly */
        .animate-left {
            animation: leftAndEnter 800ms ease-out forwards;
        }
        
        @keyframes leftAndEnter {
            0% {
                transform: translate(0, 0) scale(.92) rotate(0deg);
            }
            50% {
                transform: translate(-950px, 20px) scale(0.85) rotate(5deg);
            }
            75% {
                z-index: 40;
                opacity: 1;
                transform: translate(-475px, 20px) scale(1) rotate(2.5deg);
            }
            100% {
                transform: translate(-60px, 0) scale(1) rotate(0deg);      
                z-index: 30;          
            }
        }
    
        /* Nav buttons */
        .nav-buttons {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            width: calc(100%);
            pointer-events: none;
        }
    
        .nav-btn {
            width: 48px;
            height: 48px;
            background: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            pointer-events: auto;
        }
    
        .nav-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    
        /* testimonial section ends */