/* CSS Variables for Balance Bags - Women 40+ Redesign */
:root {
    /* Primary Brand Colors */
    --primary-amber: #FEBE10;
    --primary-gold: #FFD700;

    /* Background Colors */
    --bg-cream: #FDF8F3;
    --bg-linen: #FAF5F0;
    --bg-white: #FFFFFF;

    /* Text Colors */
    --text-charcoal: #2D2A26;
    --text-warm-gray: #5A5651;
    --text-light-gray: #9CA3AF;

    /* Accent Colors */
    --accent-success: #10B981;
    --accent-error: #EF4444;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #FEBE10, #FFD700);
    --gradient-dark: linear-gradient(135deg, #2D2A26 0%, #1a1816 100%);
}

/* Legacy font-face declarations (kept for backward compatibility) */
@font-face {
    font-family: 'General Sans';
    src: url('./font/GeneralSans-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Inter Tight';
    src: url('./font/InterTight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html{
    overflow-x: hidden !important;
}

body {
    font-family: 'DM Sans', 'General Sans', sans-serif;
    overflow-x: hidden !important;
    overflow-y: hidden;
    color: var(--text-charcoal);
    background-color: var(--bg-white);
}

/* Headings use Playfair Display */
h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    color: var(--text-charcoal);
}

/* Body text uses DM Sans */
p, span, a, li, label, input, textarea, button {
    font-family: 'DM Sans', 'General Sans', sans-serif;
}
  .mobile-circle-image {
    clip-path: circle(50% at center);
  }
  .desktop-circle-image {
    clip-path: circle(50% at center);
}

nav a{
    background: linear-gradient(-45deg, #000000, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

nav a{
    transition: all 0.36s ease-in-out;
}

nav a:hover{
    background: linear-gradient(-45deg, #FEBE10, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

text{
    color: #F3F4F6;
}

.gradient-bg {
    background: linear-gradient(135deg, #FDF8F3 0%, #FAF5F0 100%);
    min-height: 120vh; /* Full-screen height */
}

.destopHeader{
    padding-left: 200px ;
    padding-right: 200px ;
}

.destopMain{
    padding-left: 200px ;
    padding-right: 200px ;
}

@media (min-width: 1280px) and (max-width: 1480px) {
    .gradient-bg {
        width: 100%;
        min-height: 80vh;
    }

    .destopHeader{
        padding-left: 50px ;
        padding-right: 50px ;
    }
    
    .destopMain{
        padding-left: 50px ;
        padding-right: 50px ;
    }

    .clientFeedback{
        padding-left: 50px ;
        padding-right: 50px ;
    } 

    .benifitAndFeature{
        padding-left: 50px ;
        padding-right: 50px ;
        min-height: 60vh !important;
    }

    .benefit{
        padding-left: 50px ;
        padding-right: 50px ;
    }

    .howItWork{
        padding-left: 50px ;
        padding-right: 50px ;
        min-height: 60vh !important;
    }
    
    .pricing{
        padding-left: 50px ;
        padding-right: 50px ;
        min-height: 60vh !important;
    }

    .footerAbove{
        padding-left: 50px ;
        padding-right: 50px ;
    }

    footer{
        padding-left: 50px ;
        padding-right: 50px ;
    }

    .mySwiper{
        min-height: 30vh;
    }


}

.mySwiper{
    min-height: 50vh;
}

@media (min-width: 1024px) and (max-width: 1300px) {
    .destopHeader{
        padding-left: 50px ;
        padding-right: 50px ;
    }
    
    .destopMain{
        padding-left: 50px ;
        padding-right: 50px ;
    }

    .clientFeedback{
        padding-left: 50px ;
        padding-right: 50px ;
    } 

    .benifitAndFeature{
        padding-left: 50px ;
        padding-right: 50px ;
        min-height: 60vh !important;
    }

    .benefit{
        padding-left: 50px ;
        padding-right: 50px ;
    }

    .howItWork{
        padding-left: 50px ;
        padding-right: 50px ;
        min-height: 60vh !important;
    }
    
    .pricing{
        padding-left: 50px ;
        padding-right: 50px ;
        min-height: 60vh !important;
    }

    .footerAbove{
        padding-left: 50px ;
        padding-right: 50px ;
    }

    footer{
        padding-left: 50px ;
        padding-right: 50px ;
    }

    .mySwiper{
        min-height: 30vh;
    }

}

@media (min-width: 1024px) and (max-width: 1124px) {

    .destopHeader{
        padding-left: 50px ;
        padding-right: 50px ;
    }
    
    .destopMain{
        padding-left: 50px ;
        padding-right: 50px ;
    }

   
}


.gradient2-bg {
    background: linear-gradient(to right, #FFF5EA, #FDF9E2);
    min-height: 120vh; /* Full-screen height */
}


.gradient3-bg {
    background: linear-gradient(to right, #fff5ea5e, #fdf9e268);
    min-height: 100vh; /* Full-screen height */
}


.gradient-text {
    background: linear-gradient(5deg,#FEBE10, #FFD700 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* display: inline-block; */
}

.gradient-button {
    background: linear-gradient(45deg, #FEBE10, #FFD700);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-family: 'DM Sans', 'Inter Tight', sans-serif;
}

.gradient-button .turnArrow{
    transition: all 0.36s ease-out;
    transform: rotateZ(0deg);
}


.gradient-button:hover .turnArrow{
    transform: rotateZ(45deg);
    margin-left: 20px;
}




  .gradient-button2{
    background: linear-gradient(45deg,#FEBE10, #FFD700);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-family: 'DM Sans', 'Inter Tight', sans-serif;
  }

  .gradient-button2 svg{
    transition: all 0.3s ease-in-out;
  }

  .gradient-button2:hover svg{
    margin-left: 15px;
}


.gradient-box{
    background: linear-gradient(45deg, #FEBE10, #FFD700);
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}
  
  .gradient-button:hover {
    background: linear-gradient(-45deg,#FFD700 , #FEBE10);
  }
  
  
  .pricing{
    min-height: 100vh;
  }
  

.footerAbove{
    
}


.toggle-button {
    position: relative;
    width: 80px;
    height: 30px;
    background-color: #F5F5F5;
    border-radius: 15px;
    padding: 2px;
}
.toggle-slider {
    position: absolute;
    width: 42px;
    height: 26px;
    background-color: #FFC55C;
    border-radius: 13px;
    left: 36px;
    transition: all 0.3s;
}
.free-card {
    background-color: #FFFFFF;
    border-radius: 16px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
}
.standard-card {
    background: linear-gradient(90deg, #FEBE10, #FFD700);
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.premium-card {
    background-color: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.cta-button-free {
   background: linear-gradient(90deg, #FFD700, #FEBE10);
}
.cta-button-standard {
    background-color: white;
}

.cta-button-standard:hover img{
    transition: all 0.3s ease-in-out;
   
}

.cta-button-standard:hover img{
    margin-left: 15px;
}


.cta-button-premium {
   background: linear-gradient(-90deg, #ffd601,#fdc013);
}
.pricing-feature-check-free {
    color: #FFC55C;
}
.pricing-feature-check-standard {
    color: #000000;
}
.pricing-feature-check-premium {
    color: #FFC55C;
}
.pricing-feature-x {
    color: #FF6B6B;
}

.banner-container {
    width: 100%;
    margin: 0 auto;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  @media (max-width: 768px) {
    .benefits-grid {
      grid-template-columns: 1fr;
    }

    .footerAbove{
        transform: translateY(5px) !important;
      }
  }
  .highlight {
    color: #F59E0B;
  }

  .footerAbove{
    transform: translateY(192px);
  }

  footer{
    background: url('./image/footerbg.png');
    background-repeat: no-repeat;
    background-size: cover;

    width: 100%;
    min-height: 518px;

    padding-top: 192px;
  }