html,
 body {
     margin: 0;
     padding: 0;
     font-family: "Poppins", sans-serif;
     font-size: 16px;
 }


 .hero-section {
     background-image: url(./images/hero-section/hero-bg-2.png);
     background-size: cover;
     background-position: center;
 }

 .nav-custom-bg {
     background: url('./images/nav-bg.png');
     background-size: cover;
     background-position: center;
 }

 .nav-link:before {
     width: 50px;
     top: 0;
     left: 0;
     opacity: 0;
     height: 1px;
     content: "";
     position: absolute;
     background: #fff;
     transition: all 0.3s ease-in-out;
 }

 .nav-link:after {
     width: 50px;
     bottom: 0;
     right: 0;
     opacity: 0;
     height: 1px;
     content: "";
     position: absolute;
     background: #fff;
     transition: all 0.3s ease-in-out;
 }

 .nav-link:hover:before {
     opacity: 1;
 }

 .nav-link:hover::after {
     opacity: 1;
 }

 .nav-link.active:before {
     opacity: 1;
 }

 .nav-link.active::after {
     opacity: 1;
 }

 .hero-icon-card {
     box-shadow: 0 174px 49px 0 rgba(0, 0, 0, 0.00), 0 112px 45px 0 rgba(0, 0, 0, 0.01), 0 63px 38px 0 rgba(0, 0, 0, 0.05), 0 28px 28px 0 rgba(0, 0, 0, 0.09), 0 7px 15px 0 rgba(0, 0, 0, 0.10);
 }

 /* about section *****************************************************************************************/
 .animate4 {
     animation-name: animate4;
     animation-duration: 4s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-timing-function: ease-in-out;
 }

 .animate3 {
     animation-name: animate3;
     animation-duration: 4s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-timing-function: ease-in-out;
 }

 .animate2 {
     animation-name: animate2;
     animation-duration: 7s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-timing-function: ease-in-out;
     transition-duration: .7s;
 }

 @keyframes animate4 {
     0% {
         transform: translateY(0px);
     }

     100% {
         transform: translateY(-25px);
     }
 }

 @keyframes animate2 {
     0% {
         transform: translateY(0px);
     }

     100% {
         transform: translateY(20px);
     }
 }

 @keyframes animate3 {
     0% {
         transform: translateY(0px);
     }

     100% {
         transform: translateY(15px);
     }
 }

 .button-gradient {
     background: linear-gradient(101.3deg, #017AAE 4.3%, #1CC1FF 91.67%);
     transition: .4s all ease-in-out;
 }

 .button-gradient:hover {
     background: linear-gradient(101.3deg, #1CC1FF 4.3%, #017AAE 91.67%);
 }

 .stop-color1 {
     stop-color: #017AAE;
 }

 .stop-color2 {
     stop-color: #1CC1FF;
 }

 /* service section ******************************************************************************************/

 .service-card {
     transition: margin-bottom 0.5s ease;
     align-self: flex-start;
 }

 .service-card:nth-child(-n+3):hover {
     margin-bottom: 310px;
 }

 .service-card:hover .service-svg g rect {
     fill: #017AAE;
 }

 .our-services-section:before {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 255px;
     background: url('./images/service-section/service-section-clouds.png');
     background-size: cover;
     background-position: center;
 }

 /* why choose us section *************************************************************************************/
 .why-choose-card {
     background: url('./images/why-choose-us/service5-single-bg1.png');
     background-size: cover;
     background-position: center;
 }

 .why-choose-card.why-card2 {
     background: url('./images/why-choose-us/service5-single-bg2.png');
     background-size: cover;
     background-position: center;
 }

 .why-choose-card.why-card3 {
     background: url('./images/why-choose-us/service5-single-bg3.png');
     background-size: cover;
     background-position: center;
 }

 .why-choose-card.why-card4 {
     background: url('./images/why-choose-us/service5-single-bg4.png');
     background-size: cover;
     background-position: center;
 }

 .why-card-svg .stop-color1 {
     stop-color: #F4F5FE;
 }

 .why-card-svg .stop-color2 {
     stop-color: #F4F5F9;
 }

 .why-choose-card-wrapper {
     padding-top: 130px;
     position: relative;
     margin: auto;
     margin-top: -130px;
 }

 .why-choose-section .pin-spacer {
     transform: none !important;
     margin: 0 !important;
 }

 .why-choose-section .why-choose-card-wrapper {
     width: 100% !important;
 }

 /* Stacking container */
 .stack {
     position: relative;
     isolation: isolate;
 }

 /* Cards except the last one are sticky */
 .stack .why-choose-card-wrapper:not(:last-child) {
     position: sticky;
     top: 0;
     transform: translateY(calc(var(--i, 0) * var(--gap, 30px)));
     z-index: calc(10 + var(--i, 0));
 }

 /* Last card is sticky, aligned with first card, and always on top */
 .stack .why-choose-card-wrapper:last-child {
     position: sticky;
     top: 0;
     transform: translateY(0);
     z-index: 100;
     margin-top: 30px;
 }

 .why-choose-card {
     height: 511px;
 }

 /* Remove excessive padding from card wrapper */
 .why-choose-card-wrapper {
     padding-top: 140px !important;
 }

 @media(max-width:1023px) {
     .why-choose-card {
         height: 440px;
     }
 }

 @media(max-width:767px) {
     .why-choose-card {
         height: auto !important;
     }

     .why-choose-card-wrapper {
         padding-top: 20px !important;
         margin-top: 0px !important;
         position: relative !important;
         transform: none !important;
         z-index: auto !important;
     }

     .stack {
         display: flex;
         flex-direction: column;
         gap: 20px;
     }

     .stack .why-choose-card-wrapper:not(:last-child),
     .stack .why-choose-card-wrapper:last-child {
         position: relative !important;
         transform: none !important;
         margin-top: 0 !important;
         top: auto !important;
         z-index: auto !important;
     }
 }


 /* testimonial ********************************************************************************************/

 .testimonial-section {
     background: linear-gradient(180deg, #017AAE 0%, #1CC1FF 100%);
     overflow: hidden;
     position: relative;
     width: 100%;
     margin-left: auto;
     margin-right: auto;
 }

 .bubble-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none;
     overflow: hidden;
 }

 .bg-bubble {
     position: absolute;
     background: rgba(255, 255, 255, 0.25);
     border-radius: 50%;
     pointer-events: none;
 }

 #testimonial-swiper {
     padding: 40px 0 40px 0;
     overflow: visible;
 }

 .testimonial-slide-content {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.5s ease;
     min-height: 450px;
 }

 /* Avatar Bubble (Default/Inactive State) */
 .testimonial-bubble-avatar {
     position: relative;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     border: 2px solid rgba(255, 255, 255, 0.5);
     background: white;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
     transition: all 0.5s ease;
     z-index: 5;
     opacity: 0.6;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .testimonial-bubble-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: grayscale(100%);
     transition: all 0.4s ease;
 }

 .avatar-nav-arrows {
     position: absolute;
     inset: 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 8px;
     opacity: 0;
     transition: all 0.4s ease;
     pointer-events: none;
     z-index: 2;
 }

 .avatar-nav-arrows button {
     background: none;
     border: none;
     padding: 0;
     cursor: pointer;
     color: #0387BC;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 24px;
     height: 24px;
     transition: transform 0.2s ease;
 }

 .avatar-nav-arrows button:hover {
     transform: scale(1.2);
 }

 @media (hover: hover) {
     .testimonial-bubble-avatar:hover img {
         opacity: 0;
         transform: scale(0.8);
     }

     .testimonial-bubble-avatar:hover .avatar-nav-arrows {
         opacity: 1;
         pointer-events: auto;
     }
 }

 /* Split icons between left and right avatars */
 .swiper-slide-prev .avatar-next {
     display: none;
 }

 .swiper-slide-next .avatar-prev {
     display: none;
 }

 .swiper-slide-prev .avatar-nav-arrows,
 .swiper-slide-next .avatar-nav-arrows {
     justify-content: center;
 }

 /* White Card (Active State) */
 .testimonial-card {
     position: absolute;
     width: 450px;
     background: white;
     border-radius: 20px;
     padding: 60px 40px 40px;
     text-align: center;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     opacity: 0;
     transform: scale(0.8);
     transition: all 0.5s ease;
     z-index: 10;
     pointer-events: none;
 }

 .card-avatar-wrapper {
     position: absolute;
     top: -50px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 100px;
     border-radius: 50%;
     border: 5px solid white;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 }

 .card-avatar-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .testimonial-name {
     color: #1a1a1a;
     font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 15px;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .testimonial-text {
     color: #666;
     font-size: 1rem;
     line-height: 1.6;
     margin-bottom: 25px;
 }

 .testimonial-role {
     color: #FF6B00;
     font-size: 0.85rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
 }

 /* Active Slide Styling */
 .swiper-slide-active .testimonial-bubble-avatar {
     opacity: 0;
     transform: scale(0.5);
 }

 .swiper-slide-active .testimonial-card {
     opacity: 1;
     transform: scale(1);
     pointer-events: auto;
 }

 /* Star Rating in design is a bit different, let's refine it */
 .testimonial-card .star-rating {
     position: absolute;
     top: 40px;
     right: -20px;
     background: white;
     padding: 5px 10px;
     border-radius: 20px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .testimonial-card .star-count {
     font-weight: 700;
     color: #333;
     font-size: 0.9rem;
 }

 .testimonial-card .star-icon svg {
     fill: #FFD700;
     width: 14px;
     height: 14px;
 }

 /* Navigation Arrows (Mobile Only) */
 .testimonial-nav-arrows-wrapper {
     display: none;
     justify-content: center;
     gap: 20px;
     margin-top: 40px;
 }

 @media (max-width: 576px) {
     .testimonial-nav-arrows-wrapper {
         display: flex;
     }

     .step-description {
         white-space: pre-line;
     }
 }

 /* Responsive Styles */
 @media (min-width: 1024px) {
     #testimonial-swiper .swiper-slide {
         width: 33.33% !important;
         display: flex;
         justify-content: center;
         align-items: center;
     }
 }

 @media (max-width: 1023px) and (min-width: 768px) {
     #testimonial-swiper .swiper-slide {
         width: 33.33% !important;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .testimonial-card {
         width: 400px;
     }
 }

 @media (max-width: 767px) {
     .testimonial-card {
         width: 280px;
         padding: 50px 20px 30px;
     }

     .card-avatar-wrapper {
         width: 80px;
         height: 80px;
         top: -40px;
     }

     .testimonial-slide-content {
         min-height: 400px;
     }

     #testimonial-swiper .swiper-slide {
         width: 100% !important;
     }
 }


 /* logo slider css *******************************************************************************************************/
 .slider-main {
     position: relative;
 }

 /* .slider-main:before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 200px;
     z-index: 9;
     background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) -7.11%, rgba(255, 255, 255, 0.88) 40.8%, #FFF 79.54%);
 }

 .slider-main:after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     height: 100%;
     width: 200px;
     z-index: 9;
     background: linear-gradient(91deg, rgba(255, 255, 255, 0.00) -7.11%, rgba(255, 255, 255, 0.88) 40.8%, #FFF 79.54%);
 } */

 .slider-container {
     width: 100%;
     overflow: hidden;
     position: relative;
     padding: 30px 0;
 }

 .slider-track {
     display: flex;
     width: max-content;
     will-change: transform;
 }

 .slider-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 0 60px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     flex-shrink: 0;
 }

 /* Ensure images have a consistent size so width doesn’t collapse */
 .slider-item img {
     /* tweak as needed */
     object-fit: contain;
     display: block;
 }

 /* Single marquee keyframes (leftward movement) */
 @keyframes marquee {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 /* Right-to-left (moves left) */
 .slider-rtl .slider-track {
     animation-name: marquee;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
 }

 /* Left-to-right (same keyframes, reversed) */
 .slider-ltr .slider-track {
     animation-name: marquee;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
     animation-direction: reverse;
     /* moves right */
 }

 @media (max-width:1024px) {
     .slider-item {
         margin: 0 30px;
         width: 130px;
     }

     .slider-container {
         padding: 15px 0;
     }

     .slider-main:before,
     .slider-main:after {
         width: 100px;
     }
 }

 @media (max-width:640px) {
     .slider-item {
         margin: 0 15px;
         width: 90px;
     }

     .slider-main:before,
     .slider-main:after {
         width: 50px;
     }
 }

 /* footer css ***********************************************************************************************/
 footer {
     background: linear-gradient(101deg, #017AAE 4.3%, #1CC1FF 91.67%);
     transition: 0.3s ease;
 }

 footer:before {
     content: "";
     position: absolute;
     z-index: 0;
     height: 100%;
     width: 100%;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(101deg, #4b5563 4.3%, #111827 91.67%);
     /* background: linear-gradient(135deg, #8e2de2 0%, #d441a4 30%, #f15a29 70%, #f27121 100%); */
     opacity: 0;
     transition: 0.3s ease;
 }

 footer.hover-footer:hover:before {
     opacity: 1;
 }

 .get-in-touch-btn:after {
     display: block;
     content: "";
     border-bottom: solid 1px #fff;
     transform: scaleX(0);
     transform-origin: 0% 50%;
     transition: transform 250ms ease-in-out;
 }

 .get-in-touch-btn:hover:after {
     transform: scaleX(1);
 }

 /* Luxury Section Styles */
 .luxury-section {
     position: relative;
     width: 100%;
     overflow: hidden;
     background-color: #fff;
 }

 .luxury-container {
     display: flex;
     width: 100%;
     max-width: 100%;
     margin: 0 auto;
     align-items: center;
     min-height: 700px;
 }

 .luxury-col-left {
     width: 50%;
     padding: 80px 60px 80px 10%;
     background-color: #FDFDFD;
     display: flex;
     flex-direction: column;
     justify-content: center;
     z-index: 10;
     position: relative;
 }

 .luxury-col-right {
     width: 50%;
     position: relative;
     /* background-color: #FAFAFA; */
     /* Very light grey for contrast if needed */
     min-height: 700px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* New Circular Shape Design */
 .luxury-shape-wrapper {
     position: relative;
     width: 500px;
     height: 500px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Decorative partial circles / arcs would go here if using CSS only,
    for now we use a border + pseudo-element to mimic the "outer ring with gap" look */
 .luxury-shape-outer-ring {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     border: 40px solid #F3EFEF;
     /* Light beige/grey ring color */
     z-index: 1;
     /* You can use clip-path or transparent borders to make it "partial" if desired */
 }

 /* Add the thin lines / partial arc details */
 .luxury-shape-outer-ring::before {
     content: "";
     position: absolute;
     inset: -20px;
     border-radius: 50%;
     border: 1px solid #E5E5E5;
     z-index: 0;
 }

 .luxury-shape-image-container {
     position: relative;
     width: 380px;
     height: 380px;
     border-radius: 50%;
     overflow: hidden;
     z-index: 10;
     background: #fff;
     border: 15px solid #fff;
     /* White border around image */
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
 }

 .luxury-shape-image-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Decorative small dots */
 .luxury-shape-wrapper::after {
     content: "";
     position: absolute;
     top: 40px;
     right: 40px;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     border: 1px solid #2598bf;
     /* Accent color ring */
     z-index: 5;
     transform: translate(30%, -30%);
 }

 .luxury-shape-wrapper::before {
     content: "";
     position: absolute;
     top: 40px;
     right: 40px;
     width: 60px;
     height: 60px;
     background-color: #2889ac;
     border-radius: 50%;
     z-index: 4;
     transform: translate(50%, -50%);
     opacity: 0.6;
 }


 /* Typography */
 .luxury-subheading {
     /* font properties removed to inherit global styles */
     font-size: 14px;
     letter-spacing: 2px;
     margin-bottom: 20px;
     text-transform: uppercase;
 }

 .luxury-heading {
     /* font properties removed to inherit global styles */
     font-size: 48px;
     margin: 0 0 30px;
     line-height: 1.2;
 }

 .luxury-text {
     /* font properties removed to inherit global styles */
     font-size: 16px;
     line-height: 1.8;
     margin-bottom: 40px;
     max-width: 500px;
 }

 .luxury-btn {
     display: inline-block;
     background: #000;
     color: #fff;
     text-decoration: none;
     padding: 15px 40px;
     font-size: 13px;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     transition: all 0.3s ease;
 }

 .luxury-btn:hover {
     background: #333;
     transform: translateY(-2px);
 }

 @media (max-width: 991px) {
     .luxury-container {
         flex-direction: column;
     }

     .luxury-col-left,
     .luxury-col-right {
         width: 100%;
     }

     .luxury-col-left {
         padding: 60px 20px;
     }

     .luxury-col-right {
         min-height: 400px;
         justify-content: center;
     }

     .luxury-image-card {
         position: relative;
         left: auto;
         top: auto;
         transform: translateY(-50px);
         width: 80%;
         margin: 0 auto;
     }
 }

 /* Bento Grid Section Styles */
 .bento-section {
     padding: 100px 0;
     background-color: #fff;
 }

 .bento-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: auto auto auto;
     gap: 24px;
     max-width: 1200px;
     margin: 0 auto;
     grid-template-areas:
         "maximize manage manage"
         "maximize goals lounges"
         "strategy strategy find";
 }

 .bento-card {
     border-radius: 24px;
     padding: 30px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     overflow: hidden;
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .bento-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
 }

 .bento-title {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 12px;
     color: #111;
     line-height: 1.2;
 }

 .bento-desc {
     font-size: 15px;
     color: #4b5563;
     line-height: 1.5;
 }

 /* Card Specific Styles */
 .card-maximize {
     grid-area: maximize;
     background-color: #f3e8ff;
     /* Light Purple */
 }

 .card-manage {
     grid-area: manage;
     background-color: #fce7f3;
     /* Light Pink */
 }

 .card-goals {
     grid-area: goals;
     background-color: #fef9c3;
     /* Light Yellow */
 }

 .card-lounges {
     grid-area: lounges;
     background-color: #ecfccb;
     /* Light Green */
 }

 .card-strategy {
     grid-area: strategy;
     background-color: #ffedd5;
     /* Light Orange */
 }

 .card-find {
     grid-area: find;
     background-color: #e0f2fe;
     /* Light Blue */
 }

 /* Inner Layouts */
 .bento-img-placeholder {
     height: 180px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 20px 0;
     position: relative;
 }

 .bento-content-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 20px;
     height: 100%;
 }

 .bento-text-side {
     flex: 1;
 }

 .bento-img-side {
     flex-shrink: 0;
 }

 /* Responsive */
 @media (max-width: 1024px) {
     .bento-grid {
         grid-template-columns: 1fr 1fr;
         grid-template-areas:
             "maximize manage"
             "maximize goals"
             "strategy lounges"
             "strategy find";
     }
 }

 @media (max-width: 768px) {
     .bento-grid {
         grid-template-columns: 1fr;
         grid-template-areas:
             "maximize"
             "manage"
             "goals"
             "lounges"
             "strategy"
             "find";
         gap: 16px;
     }

     .bento-content-row {
         flex-direction: column;
         align-items: flex-start;
         text-align: left;
     }

     .bento-img-side {
         align-self: flex-end;
         margin-top: -20px;
     }
 }

 /* Circle Benefits Section */
 .circle-benefits-section {
     padding: 100px 0;
     background-color: #F8F9FC;
     overflow: hidden;
 }

 .benefits-layout-wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     position: relative;
     max-width: 900px;
     margin: 0 auto;
     padding: 20px;
 }

 /* Center Circle */
 .center-circle-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 260px;
     height: 260px;
     z-index: 10;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .center-circle {
     width: 220px;
     height: 220px;
     background: #fff;
     border-radius: 50%;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 20px;
     position: relative;
     z-index: 2;
 }

 .center-circle h2 {
     font-size: 28px;
     font-weight: 700;
     color: #1e293b;
     line-height: 1.2;
 }

 .center-circle span {
     font-size: 24px;
     font-weight: 700;
     color: #0c628f;
     display: block;
     margin-top: 5px;
 }

 /* Colored Fan Blades (Pseudo-elements behind circle) */
 .fan-blade {
     position: absolute;
     width: 130px;
     height: 130px;
     z-index: 1;
 }

 .fan-blade-1 {
     top: 0;
     left: 0;
     background-color: #0F172A;
     /* Dark Blue */
     border-top-left-radius: 100%;
 }

 .fan-blade-2 {
     top: 0;
     right: 0;
     background-color: #0c628f;
     /* Red/Pink */
     border-top-right-radius: 100%;
 }

 .fan-blade-3 {
     bottom: 0;
     right: 0;
     background-color: #0F172A;
     border-bottom-right-radius: 100%;
 }

 .fan-blade-4 {
     bottom: 0;
     left: 0;
     background-color: #0c628f;
     border-bottom-left-radius: 100%;
 }

 /* Benefit Cards */
 .benefit-card {
     background: #fff;
     border-radius: 24px;
     padding: 40px 30px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
     position: relative;
     min-height: 280px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     overflow: hidden;
 }

 .benefit-card p {
     font-size: 18px;
     font-weight: 500;
     color: #334155;
     line-height: 1.6;
     position: relative;
     z-index: 2;
 }

 .benefit-card p .text-black {
     font-weight: 600;
 }

 /* Corner Accents */
 .corner-accent {
     position: absolute;
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .corner-accent span {
     font-size: 24px;
     font-weight: 700;
     color: #fff;
     z-index: 2;
 }

 /* Specific Card Styling to match image */
 .card-1 {
     text-align: left;
     padding-right: 60px;
     /* Space for center */
 }

 .card-1 .corner-accent {
     top: 0;
     left: 0;
     background: #0c628f;
     border-bottom-right-radius: 100%;
     padding-bottom: 10px;
     padding-right: 15px;
 }

 .card-2 {
     text-align: right;
     padding-left: 60px;
 }

 .card-2 .corner-accent {
     top: 0;
     right: 0;
     background: #0c628f;
     border-bottom-left-radius: 100%;
     padding-bottom: 10px;
     padding-left: 15px;
 }

 .card-3 {
     text-align: right;
     padding-left: 60px;
 }

 .card-3 .corner-accent {
     bottom: 0;
     right: 0;
     background: #0c628f;
     border-top-left-radius: 100%;
     padding-top: 10px;
     padding-left: 15px;
 }

 .card-4 {
     text-align: left;
     padding-right: 60px;
 }

 .card-4 .corner-accent {
     bottom: 0;
     left: 0;
     background: #0c628f;
     border-top-right-radius: 100%;
     padding-top: 10px;
     padding-right: 15px;
 }

 /* Responsive */
 @media (max-width: 900px) {
     .benefits-layout-wrapper {
         grid-template-columns: 1fr;
         gap: 20px;
         max-width: 500px;
         padding-top: 340px;
         /* Space for center circle */
     }

     .center-circle-container {
         top: 180px;
         /* Position at top on mobile */
         transform: translate(-50%, 0);
     }

     .benefit-card {
         min-height: auto;
         text-align: left;
         padding: 30px;
     }

     .card-1,
     .card-2,
     .card-3,
     .card-4 {
         text-align: left;
         padding: 30px 30px 30px 80px;
         /* Space for number */
     }

     /* Adjust corners for list view */
     .card-1 .corner-accent,
     .card-2 .corner-accent,
     .card-3 .corner-accent,
     .card-4 .corner-accent {
         top: 0;
         left: 0;
         right: auto;
         bottom: auto;
         border-radius: 0;
         border-bottom-right-radius: 50px;
         width: 60px;
         height: 60px;
         font-size: 16px;
     }
 }

 /* REFINED LUXURY SECTION DESIGN (Overrides previous) */
 .luxury-shape-wrapper {
     position: relative;
     width: 550px;
     /* Increased size */
     height: 550px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 20px;
 }

 /* The main light background ring */
 .luxury-shape-outer-ring {
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background-color: #F0F9FF;
     /* Very light blue (AliceBlue-ish) */
     z-index: 1;
     border: none;
     /* Reset previous border */
 }

 /* The thin outlines inside the main ring */
 .luxury-shape-outer-ring::before {
     content: "";
     position: absolute;
     inset: 20px;
     border-radius: 50%;
     border: 1px solid #BAE6FD;
     /* Light sky blue border */
     z-index: 1;
 }

 .luxury-shape-outer-ring::after {
     content: "";
     position: absolute;
     inset: 80px;
     border-radius: 50%;
     border: 1px solid #BAE6FD;
     /* Light sky blue border */
     z-index: 1;
 }

 /* The detailed "Offset Arc" on the left */
 .luxury-shape-arc {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     height: 100%;
     transform: translate(-50%, -50%) rotate(-45deg);
     /* Rotate to position the arc segment */
     pointer-events: none;
     z-index: 2;
     will-change: transform;
     /* Optimize for smooth scroll-based rotation */
 }

 .luxury-shape-arc::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     /* Create the arc using a transparent border except for one side */
     border: 60px solid transparent;
     border-left-color: #38BDF8;
     /* Bright Sky Blue for the arc */
     /* Darker beige/taupe for the arc */
     transform: rotate(-15deg);
     /* Fine tune position */
     box-sizing: border-box;
 }

 .luxury-shape-image-container {
     position: relative;
     width: 360px;
     height: 360px;
     border-radius: 50%;
     overflow: hidden;
     z-index: 10;
     background: #fff;
     border: 10px solid #fff;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 .luxury-shape-image-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: opacity 0.5s ease-in-out;
 }

 /* Top Right Bubbles Decoration */
 .luxury-decor-bubbles {
     position: absolute;
     top: 0;
     right: 0;
     width: 150px;
     height: 150px;
     z-index: 15;
     pointer-events: none;
 }

 /* The filled grey bubble */
 .luxury-decor-bubbles::before {
     content: "";
     position: absolute;
     top: 20px;
     right: 40px;
     width: 60px;
     height: 60px;
     background-color: #E0F2FE;
     /* Pale Blue */
     border-radius: 50%;
 }

 /* The outlined ring bubble */
 .luxury-decor-bubbles::after {
     content: "";
     position: absolute;
     top: 0px;
     right: 20px;
     width: 80px;
     height: 80px;
     border: 1px solid #0EA5E9;
     /* Medium Blue outline */
     /* Soft reddish/pink outline */
     border-radius: 50%;
     transform: translate(-10px, 10px);
     /* Overlap effect */
 }

 /* Scattered Dots */
 .luxury-decor-dots {
     position: absolute;
     inset: 0;
     z-index: 5;
     pointer-events: none;
 }

 .luxury-decor-dots::before,
 .luxury-decor-dots::after {
     content: "";
     position: absolute;
     background-color: #0284C7;
     /* Darker Blue dots */
     /* Tan color */
     border-radius: 50%;
 }

 .luxury-decor-dots::before {
     width: 8px;
     height: 8px;
     top: 15%;
     left: 10%;
 }

 .luxury-decor-dots::after {
     width: 6px;
     height: 6px;
     bottom: 15%;
     right: 80%;
 }

 /* Mobile responsiveness for new luxury section */
 @media (max-width: 768px) {
     .luxury-shape-wrapper {
         width: 300px;
         height: 300px;
         margin-top: 40px;
     }

     .luxury-shape-image-container {
         width: 220px;
         height: 220px;
     }

     .luxury-shape-arc::before {
         border-width: 30px;
     }

     .luxury-container {
         min-height: auto;
         padding-bottom: 60px;
     }
 }