@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

        /* Custom Colors */
        .bg-custom-gray {
            background-color: #F6F0EA; /* Bootstrap Gray */
        }
        
        .bg-custom-black {
            background-color: #000000; /* Pure Black */
        }

        /* Sticky Footer Setup: Ensures footer stays at bottom even with little content */
        body {
          font-family: "Inter", sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        header {
  /* 1. Stick to the top */
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0;
  
  /* 2. Ensure it sits on top of other content */
  z-index: 1020; 
  
  /* 3. Ensure full width */
  width: 100%;
  
  /* 4. Shadow for better separation (Optional) */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 
   IMPORTANT: 
   This prevents the Sticky Header from covering 
   the top of your section titles when scrolling.
   Adjust '80px' to match the actual height of your header.
*/
html {
  scroll-padding-top: 80px;
}

     /* --- HERO SECTION STYLES --- */
      .hero-section {
        position: relative;
        padding-bottom: 80px;
        background-color: #fff;
        overflow: hidden;
        /* Keeps the curved background from spilling out */
      }

      /* --- NEW CSS: Top Left Ring Decoration --- */
      /* This recreates the image using CSS borders */
      .hero-top-ring {
        position: absolute;
        top: -230px;
        left: -200px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        /* The thick beige line */
        border: 70px solid #f6f0ea;
        z-index: 0; /* Behind text */
        pointer-events: none; /* Ensures clicks pass through */
      }

      /* The Light Blue Curved Background (Existing) */
      .hero-bg-shape {
        position: absolute;
        top: 60%;
        bottom: 0;
        right: 0;
        width: 80%;
        background-color: #e3eceee3;
        border-top-left-radius: 200px;
        z-index: 0;
      }

      /* Typography */
      .hero-kicker {
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #000000;
        margin-bottom: 20px;
      }

      .hero-title {
        font-size: 3.8rem;
        font-weight: 800;
        line-height: 1.1;
        color: #212529;
        margin-bottom: 20px;
      }

      .hero-text {
        margin-bottom: 20px;
      }

      /* Custom Black Button */
      .btn-hero-black {
        background: #000000;
        color: #fff;
        padding: 12px 30px;
        font-size: 1rem;
        font-weight: 600;
        border: none;
        border-radius: 8px;
        transition: 0.3s;
        transform: translateX(-3px);
      }

      .btn-hero-black:hover {
        transform: translateX(-3px);
        color: #fff;
        transition: 0.3s;
      }

      /* Phone Mockup Styling */
      .phone-mockup img {
        height: auto;
        display: block;
      }

      /* Mobile Responsiveness */
      @media (max-width: 991px) {
        .bannerdes{
            text-align: center;
        }
        .phone-mockup img{
            width:100%;
        }
        .hero-bg-shape {
          width: 100%;
          height: 70%;
          border-radius: 0;
          top: auto;
        }

        .hero-title {
          font-size: 2.5rem;
        }

        .phone-left {
          margin-top: 0;
          margin-bottom: 20px;
        }

        .phone-right {
          margin-bottom: 0;
        }

        /* Adjust the top-left ring for mobile so it doesn't cover text */
        .hero-top-ring {
          width: 300px;
          height: 300px;
          top: -120px;
          left: -120px;
          border-width: 40px;
        }
        .cta{
            flex-direction:column !important;
            text-align: center;
        }
        
      }

      .text-high {
        background: linear-gradient(
          90deg,
          rgba(255, 185, 30, 1) 0%,
          rgba(18, 18, 17, 0.99) 50%,
          rgba(0, 208, 138, 1) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
      }
      .cta{
         background: rgba(255, 255, 255, 0.25);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border-radius: 16px;
                padding: 25px 30px;
                border: 1px solid #dedede;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      }


  /* --- BENEFITS SECTION STYLES --- */
      .benefits-section {
        padding: 100px 0;
      }

      /* Left Column Typography */
      .benefits-kicker {
        font-size: 1rem;
        font-weight: 600;
        color: #212529;
        margin-bottom: 15px;
      }

      .benefits-main-title {
        font-size: 3.4rem; /* Big bold text */
        font-weight: 800;
        line-height: 1; /* Tight line spacing */
        color: #1a1a1a;
        letter-spacing: -1px;
        margin-bottom:30px;
      }

      /* Right Column Grid Items */
      .benefit-item {
        padding-right: 30px;
      }

      .benefit-header {
        display: flex;
        justify-content: space-between; /* Pushes title left, icon right */
        align-items: flex-start;
        padding-top: 24px;
        margin-bottom: 10px;
      }

      .benefit-title {
        font-size: 22px;
        font-weight: 600;
        color: #1a1a1a;
        line-height: 1.2;
        max-width: 70%; /* Ensures title wraps before hitting the icon */
      }

      /* White Circle Icon Container */
      .benefit-icon-box {
        position: relative;
        width: 60px;
        height: 60px;
        background-color: #03b2771c;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        flex-shrink: 0; /* Prevents circle from squishing */
      }

      .benefit-icon-img {
        width: 38px;
        height: 38px;
        opacity: 0.8;
        position: absolute;
        top: 0px;
        right: 28px;
      }
      .benefit-desc {
        font-size: 1rem;
        color: #6c757d;
        line-height: 1.6;
        margin-bottom: 0px;
      }

      /* "Read more" Link styling */
      .benefit-link {
        font-weight: 800;
        color: #1a1a1a;
        text-decoration: none;
        font-size: 0.95rem;
        display: inline-flex;
        align-items: center;
      }

      .benefit-link::after {
        content: "•"; /* The bullet point */
        font-size: 1.2rem;
        margin-left: 8px;
        line-height: 1;
      }

      .benefit-link:hover {
        color: #000;
        text-decoration: underline;
      }

      /* RESPONSIVE */
      @media (max-width: 991px) {
        .textmakingcenter{
            align-items: center !important;
        }
        .benefits-main-title {
          font-size: 2.5rem;
          margin-bottom: 50px;
          text-align: center;
        }
        .benefits-kicker{
            text-align: center;
        }
        .benefit-item {
          margin-bottom: 40px;
        }
        .benefits-section{
            padding-top: 0px !important
        }
        .benefit-item:nth-child(1) {
            border:0 !important

        }
        .benefit-item:nth-child(3) {
             border:0 !important

        }
        .benefit-item:nth-child(2){
            border: 0 !important;
        }
      }

      /* --- NEW BORDERS FOR CARDS --- */
      .benefit-item:nth-child(1) {
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #ddd;
        padding-bottom: 30px;
        padding-left: 20px;
      }

      .benefit-item:nth-child(2) {
        border-bottom: 1px solid #ddd;
        padding-bottom: 30px;
      }

      .benefit-item:nth-child(3) {
        border-right: 1px solid #ddd;
      }


      /* --- PROMOTION CARDS SECTION --- */
      .promo-section {
        padding: 80px 0;
        background-color: #f4f6f8; /* Light gray background */
      }

      /* Centered Heading Styles (Reusing your previous style structure) */
      .center-heading-wrapper {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 60px auto;
      }
      .promo-kicker {
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #6c757d;
        margin-bottom: 15px;
      }
      .promo-title {
        font-size: 3rem;
        font-weight: 800;
        color: #212529;
        line-height: 1.1;
      }

      /* --- THE COLORED CARDS --- */
      .promo-card {
        border-radius: 8px;
        padding: 30px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform 0.3s ease;
        border: 1px solid #dedede;
      }

      /* Card Colors */
      .card-purple {
        background-color: #8254ff59; /* Purple */
        color: #000000;
      }
      .card-green {
        background-color: #d2f25e75; /* Lime Green */
        color: #1a1a1a;
      }
      .card-orange {
        background-color: #ed8b6842; /* Orange */
        color: #000000;
      }

      /* Card Content */
      .card-top-img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 30px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }

      .card-heading {
        font-size: 1.4rem;
        font-weight: 700;
        margin-bottom: 5px;
      }

      .card-text {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 30px;
        opacity: 0.9;
      }

      /* Custom Buttons inside cards */
      .btn-card-white {
        background-color: #ffffff;
        color: #1a1a1a;
        border-radius: 10px;
        padding: 12px 20px;
        font-weight: 700;
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: 0.2s;
        margin-top: 15px;
      }
      .btn-card-black {
        background-color: #1a1a1a;
        color: #ffffff;
        border-radius: 10px;
        padding: 12px 20px;
        font-weight: 700;
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: 0.2s;
        margin-top: 15px;
      }
      .btn-card-white:hover {
        background-color: #f0f0f0;
        text-decoration: none;
        color: #000;
      }
      .btn-card-black:hover {
        background-color: #333;
        text-decoration: none;
        color: #fff;
      }

      /* The little dot in the button */
      .btn-dot {
        font-size: 1.2rem;
        line-height: 0;
      }

      /* --- BOTTOM CAPSULES (PILLS) --- */
      .info-capsule {
        background-color: #ffffff;
        border-radius: 50px; /* High radius for pill shape */
        padding: 20px 30px;
        display: flex;
        align-items: center;
        height: 100%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
      }

      .capsule-icon {
        width: 40px;
        height: 40px;
        margin-right: 20px;
        flex-shrink: 0;
      }

      .capsule-text {
        font-size: 0.9rem;
        line-height: 1.4;
        color: #1a1a1a;
        font-weight: 500;
        margin: 0;
      }

      /* Text Highlighting Colors */
      .text-highlight-purple {
        color: #8254ff;
        font-weight: 700;
      }
      .text-highlight-green {
        color: #a4c928;
        font-weight: 700;
      } /* Slightly darker green for text readability */
      .text-highlight-orange {
        color: #ed8b68;
        font-weight: 700;
      }

      /* Responsive Spacing */
      @media (max-width: 991px) {
        .promo-title {
          font-size: 2.5rem;
        }
        .promo-card,
        .info-capsule {
          margin-bottom: 30px;
        }
      }


       /* --- APP SHOWCASE SECTION --- */
.app-showcase-section {
    padding: 100px 0;
    background-color: #ffffff;
    overflow: hidden; /* Prevents large shadow from causing scrollbars */
}

/* Left Column Typography */
.app-title {
    font-size: 3rem;
    font-weight: 700; /* Bold but not extra bold */
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 40px;
}

.app-text {
    font-size: 1rem;
    color: #000; /* Muted gray */
    line-height: 1.8; /* Relaxed reading spacing */
    margin-bottom: 15px;
    font-weight: 400;
}

/* Device Availability Block */
.app-availability {
    display: flex;
    align-items: center;
    margin-top: 40px;
}

.device-icons {
    display: flex;
    gap: 10px;
    margin-right: 20px;
}

/* Custom CSS-drawn Device Icons (No external font needed) */
.icon-tablet, .icon-phone {
    border: 2px solid #ced4da;
    border-radius: 4px;
    display: inline-block;
}

.icon-tablet {
    width: 28px;
    height: 36px;
}

.icon-phone {
    width: 20px;
    height: 36px;
}

.availability-text {
    font-size: 0.9rem;
    color: #6c757d;
    font-style: italic; /* Italicized as in image */
    line-height: 1.4;
    max-width: 250px;
}

/* Right Column Image Styling */
.app-mockup-wrapper {
    position: relative;
    /* Optional: Slide it slightly to the right to match the "cut off" look if desired */
    /* margin-right: -50px; */ 
}

.app-mockup-img {
    height: 500px;
    border-radius: 15px; /* Smooth corners */
    /* Soft, large shadow to mimic the floating effect */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05); 
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .app-title {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }
    .app-mockup-wrapper {
        margin-top: 50px; /* Space between text and image on mobile */
    }
}


        /* SECTION STYLE */
        .showcase-slider-section {
            padding: 80px 0;
            background-color: #f8f9fa;
            overflow: hidden;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
            font-weight: 800;
            font-size: 2.5rem;
            color: #333;
        }

        /* SWIPER CONTAINER */
        .swiper-container {
            width: 100%;
            padding-top: 60px;   /* Space for the active card to pop up */
            padding-bottom: 60px; /* Space for shadow */
        }

        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.5s ease; /* Smooth transition speed */
        }

        /* PHONE IMAGE STYLING */
        .phone-img {
            width: 100%;
            max-width: 400px;
            height: auto;
            border-radius: 20px;
            
            /* INACTIVE STATE (Side Cards) */
            opacity: 0.4;             /* Faded */
            transform: scale(0.85);    /* Smaller */
            filter: grayscale(100%);   /* Black & White */
            transition: all 0.5s ease;
        }

        /* ACTIVE STATE (Center Card) */
        .swiper-slide-active .phone-img {
            opacity: 1;               /* Fully Visible */
            transform: scale(1);    /* Pop out larger */
            filter: grayscale(0%);     /* Color */
            z-index: 10;
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .phone-img { max-width: 200px; }
        }


.help-section {
        padding: 80px 0;
      }

      /* --- Left Column Styling --- */
      .main-image-wrapper-faq {
        position: relative;
      }

      .main-image-wrapper-faq .main-image-faq {
        border-radius: 12px;
        width: 100%;
      }

      /* --- Right Column (FAQ Accordion) Styling --- */
      .faq-accordion {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .accordion-item {
        background-color: #ffffff;
        border-radius: 12px;
        border: none;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        transition: box-shadow 0.3s ease;
      }

      .accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        padding: 20px 25px;
      }

      .accordion-header h4 {
        font-size: 1rem;
        font-weight: 600;
        color: #1c2a45;
        padding-right: 15px;
        margin-bottom: 0;
        transition: color 0.3s ease;
      }

      .accordion-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
        padding: 0 25px;
      }

      .accordion-body-content {
        padding-top: 15px;
        padding-bottom: 20px;
        border-top: 1px solid #e9ecef;
      }

      .accordion-body p {
        color: #6c757d;
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 0;
      }

      /* Accordion Icon (Font Awesome) */
      .accordion-header .icon {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 0.9rem;
        color: #2a2a2a;
        border: 2px solid #2a2a2a;
        border-radius: 50%;
        transition: all 0.3s ease;
      }

      /* --- Active State for Accordion (VIDEO MATCHED) --- */
      .accordion-item.active .accordion-body {
        max-height: 250px;
      }

      /* The header text color no longer changes */
      /* .accordion-item.active .accordion-header h4 { ... } is removed */
      /* CORRECTED: Only the border color of the icon changes */
      .accordion-item.active .accordion-header .icon {
        border-color: #2a2a2a;
        /* background-color and color rules are removed to keep the background white */
      }

      @media (max-width: 480px) {
        .accordion-header h4 {
          font-size: 0.9rem;
        }
      }

      .accordion-item:first-of-type {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
      }

      .accordion-item:last-of-type {
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;
      }


        /* Styling links in the black footer */
        .footer-link {
            color: #b3b3b3;
            text-decoration: none;
        }
        
        .footer-link:hover {
            color: #ffffff;
            text-decoration: underline;
        }