@import url(https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto Condensed", sans-serif;
    color: #272727
}

html {
    scroll-behavior: smooth
}

section {
    scroll-margin-top: 70px
}

.sticky-nav {
    position: sticky;
    top: 0
}

.nav-PaddingSection {
    padding: 1.4% 6%;
    background: #ececec;
    z-index: 1000
}

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

.leftNav li {
    list-style: none
}

.leftNav li a {
    text-decoration: none;
    font-size: 2.5rem;
    font-weight: 600
}

.rightNav {
    display: flex;
    align-items: center;
    gap: 40px
}

.rightNav li {
    list-style: none
}

.rightNav li:hover {
    border-bottom: 1px solid #56a77c
}

.rightNav li a {
    text-decoration: none;
    font-weight: 500;
    font-size: 22px
}

.Menu {
    position: absolute;
    right: 30px;
    top: 20px;
    display: none
}

.Menu i {
    font-size: 22px
}

@media only screen and (max-width:992px) {
    .navSection {
        flex-direction: column
    }

    .Menu {
        display: block
    }

    .leftNav {
        justify-content: start;
        width: 100%
    }

    .leftNav li a {
        font-size: 2rem
    }

    .rightNav {
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
        width: 100%;
        display: none
    }

    .nav-PaddingSection {
        padding: 2.6% 6%
    }
}

.active {
    display: flex
}

.paddingSection {
    padding: 1% 6%
}

.mainPadding {
    padding: 2% 6%
}

.main-section {
    
}

.hero-Section {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: center;
    justify-content: center
}

.hero-Section .image-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: start;
    width: 40%
}

.hero-Section .image-wrapper img {
    width: 100%;
}
img{
    border-radius: 10px !important;
}
.hero-Section-Content {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.hero-Section-Content h1 {
    font-size: 40px;
    line-height: 48px
}

.hero-Section-Content h2 {
    font-size: 26px;
    padding: 1% 0;
    line-height: 48px
}

.hero-Section-Content p {
    font-size: 22px;
    margin: 10px 0;
    line-height: 32px !important;
    color: #000
}
.sub-head-heading p {
    font-size: 22px;
    line-height: 32px;
    margin: 2% 0;
}
.sub-head-heading ul {
    margin-left: 5%;
}
.sub-head-heading ul li{
    font-size: 22px;
    line-height: 32px;
    margin: 1% 0;
}

.sub-head-heading h2 {
    font-size: 40px;
    color: #100f0f;
    font-weight: 600
}

.sub-head-heading h4 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 700
}

.sub-head-heading h4 i {
    font-size: 22px
}

.sub-how{
    font-size: 24px;
    margin: 2% 0;
}

.whatspara img {
    float: right;
    width: 100%;
    margin-bottom: 2%
}

.sub-heading {
    text-align: center;
    color: #000 !important;
    font-weight: 700 !important;
    margin: 10px 0
}
.sub-heading2 {
    color: #000 !important;
    font-weight: 700 !important;
    margin: 10px 0
}

.sub-section {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
    border-radius: 10px;
    padding: 30px;
    gap: 30px
}

.sub-section-image img {
    width: 420px
}

.sub-section-content p {
    font-size: 22px;
    margin: 5px;
    line-height: 32px
}

.sub-section-content h2 {
    font-size: 35px;
    font-weight: 700
}

.sub-section-content h2 span {
    text-decoration: underline;
    color: #dc3545
}

.benefits-count{
    margin: 3%;
    display: flex;
    gap: 20px;
    width: 100%;
}
.benefits-count h3{
    font-size: 22px;
}
.banner{
    display: flex;
    width: 90%;
    margin: 2% auto;
}
.banner img{
    width: 100%;
}

.faqs {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.Section11th {
    padding: 0 20px 20px 20px
}

.Section11th .box {
    border-radius: 5px;
    padding: 5px 40px
}

.Section11th .box .ans {
    background-color: #fff;
    width: 800px
}

.Section11th .question {
    background-color: #fff;
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    padding: 10px 0
}

.Section11th .question h3 {
    font-size: 25px;
    background-color: #fff
}

.Section11th .question i {
    font-size: 25px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.Section11th .ans {
    line-height: 32px;
    margin-top: 10px;
    color: #090601;
    padding-left: 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s
}

.Section11th .ans p {
    font-size: 22px;
    line-height: 32px;
    background-color: #fff
}

.ans.active {
    max-height: 400px
}

.refrence {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px
}

.refrence h3 {
    font-size: 30px
}

.refrence img {
    width: 70%
}

.footer-section {
    background-color: #000000d2
}

.footer-section p {
    font-size: 16px;
    text-align: center;
    color: #fff
}

.footer-conditions a {
    text-decoration: none;
    color: #fff
}

.footer-conditions a span {
    color: orange
}

.privacy-term-disclaimer {
    padding: 2% 6%
}

.privacy-term-disclaimer h1 {
    font-size: 35px;
    text-align: center
}

.privacy-term-disclaimer p {
    font-size: 22px
}

.discount-bottle-now {
    background-color: #22335c !important
}

.highlight {
    text-decoration: none;
    font-weight: 600
}

.highlight strong {
    color: #234553 !important
}


@media only screen and (max-width:1200px) {
    .paddingSection {
        padding: 2% 3%
    }

    .faqpadding {
        padding: 0% 3% !important
    }

    .mainPadding {
        padding: 2% 3%
    }

    .hero-Section .image-wrapper img {
        width: 300px
    }

    .hero-Section-Content h1 {
        font-size: 35px
    }
}

@media only screen and (max-width:992px) {
    .paddingSection {
        padding: 2% 6%
    }

    .mainPadding {
        padding: 2%
    }

    .hero-Section {
        flex-direction: column
    }

    .hero-Section .image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .hero-Section .image-wrapper img {
        width: 350px
    }

    .hero-Section-Content h1 {
        font-size: 35px
    }

    .hero-Section-Content {
        width: 100%
    }

    .Section11th .box {
        width: 100%
    }


}

@media only screen and (max-width:768px) {
    .paddingSection {
        padding: 2% 5%;
    }

    .buy-Section {
        padding: 2%;
        flex-wrap: wrap
    }

    .mainPadding {
        padding: 2%
    }

    .hero-Section .image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .hero-Section .image-wrapper img {
        width: 400px
    }

    .sub-section {
        flex-direction: column;
        gap: 10px
    }

    .Section11th .box .ans {
        width: 100%
    }

    .Section11th .box {
        padding: 10px
    }

    .Section11th .box .question h3 {
        font-size: 20px
    }

    .Section11th .question i {
        font-size: 20px;
        width: 30px;
        height: 30px
    }

    .mainfaqsHeading {
        padding: 10px
    }

    .hero-Section {
        gap: 10px;
        flex-direction: column-reverse
    }

    .sub-section-image img {
        width: 300px
    }

    .Discount h2 {
        font-size: 25px
    }

    .review-about {
        flex-direction: column;
        justify-content: center;
        align-content: center
    }

    .sub-section-content h2 {
        font-size: 30px
    }

    .hero-Section .image-wrapper img:nth-of-type(1) {
        width: 100%;
        height: 100%
    }
    .benefits-count {
    flex-direction: column;
}
.benefit-left{
    width: 100%;
}
.benefit-right{
    width: 100%;
}
}

@media only screen and (max-width:576px) {

    p {
        font-size: 16px !important;
        line-height: 25px !important
    }

    .hero-Section-Content p {
        line-height: 25px !important;
        padding: 2%;
    }

    .pricing-Card {
        width: 100%;
        margin: 10px 0
    }

    .pricing-Card h3 {
        font-size: 30px
    }

    .pricing-Card h4:nth-of-type(2) {
        font-size: 20px
    }

    .pricing-Card img {
        width: 100%
    }

    .hero-Section .image-wrapper img {
        width: 80% !important
    }

    .sub-section-image img {
        width: 250px
    }

    .Section11th .box .question h3 {
        font-size: 18px
    }

    .box .question i {
        color: #000;
        background-color: #fff
    }
    .sub-head-heading h2 {
        font-size: 30px
    }

    .sub-head-heading h4 {
        font-size: 20px
    }

    .sub-section {
        padding: 10px
    }


    .sub-section-content h2 {
        font-size: 30px
    }

    .refrence h3 {
        font-size: 25px
    }

    .hero-Section-Content h1 {
        font-size: 30px;
        text-align: center;
        line-height: 35px
    }
    .user-image {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .about-user h2 {
        margin: auto
    }

    .about-user p {
        text-align: center
    }
    .Section11th .ans p {
        font-size: 17px
    }

    .leftNav li a img {
        width: 250px
    }

    .sub-heading {
        font-size: 28px !important
    }
    .sub-heading2 {
        font-size: 28px !important
    }

    .Section11th {
        padding: 0
    }

    .mainfaqsHeading {
        padding: 0 10px
    }

    .review-about {
        gap: 0
    }

    .whatspara img {
        width: 100%
    }

    .leftNav img {
        width: 50px !important;
        padding: 15px 0
    }

    .about-user h3 {
        margin: auto;
        font-size: 1.2rem
    }
}

.why-choose {
    padding: 20px 20px 20px;
    text-align: center
}

.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 40px;
    background-color: #ececec
}

.feature-card {
    background-color: #ececec;
    border-radius: 10px;
    /* box-shadow: 0 2px 8px rgb(0 0 0 / .05); */
    flex: 1 1 220px;
    max-width: 350px;
    padding: 10px 20px;
    text-align: center;
    transition: transform 0.3s ease;
    position: relative;
}
.feature-card button{
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%);
    background-color: rgb(255, 204, 37);
    width: 70%;
    display: flex;
    justify-content: center;
    padding: 10px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    border: none;
    font-size: 18px;
}
.feature-card button:hover {
    width: 75%;
    background-color: rgba(197, 158, 29, 0.79);
    color: #fff;
}

.feature-card img {
    width: 100%;
    height: auto;
}

@media (max-width:768px) {
    .features {
        flex-direction: column;
        align-items: center
    }

    .why-choose h2 {
        font-size: 28px
    }
}


 :root{
    --bg:#0f1724;
    --card:#0b1220;
    --accent:#7c5cff;
    --muted:#9aa4b2;
    --glass: rgba(255,255,255,0.04);
    --success: #16a34a;
    --danger: #ef4444;
    --radius: 14px;
  }

  /* Page / modal backdrop */
  #leadModalBackdrop {
    padding: 20px;
    display: flex;
    justify-content: center;
  }

  /* Card */
  #leadModal {
    width: 100%;
    max-width: 720px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius: var(--radius);
    /* box-shadow: 1px 1px 10px rgba(2,6,23,0.6); */
    padding: 22px;
    color: #e6eef6;
    border: 1px solid #000;
    transform: translateY(8px);
    transition: transform 220ms ease, opacity 220ms ease;
    backdrop-filter: blur(6px);
  }

  /* Header */
  #leadModal h2 {
    margin: 5% auto;
    font-size: 35px;
    letter-spacing: -0.2px;
  }
  #leadModal p.lead {
    margin: 0 0 18px 0;
    color: var(--muted);
    font-size: 18px;
  }

  /* Form layout */
  .form-row {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
  }

  @media(min-width:640px){
    .form-row.two {
      grid-template-columns: 1fr 1fr;
    }
  }

  label {
    display:block;
    font-size:18px;
    color:var(--muted);
    margin-bottom:6px;
  }

  input[type="text"],
  input[type="email"],
  input[type="number"],
  textarea,
  select {
    width:100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #000;
    color: #000;
    font-size: 18px;
    outline: none;
    transition: box-shadow 160ms ease, transform 120ms ease, border-color 120ms ease;
    /* box-shadow: 0 2px 8px rgba(2,6,23,0.45) inset; */
  }

  input::placeholder { color: rgba(230,238,246,0.35); }

  input:focus, select:focus {
    border-color: rgba(124,92,255,0.95);
    box-shadow: 0 6px 24px rgba(124,92,255,0.08);
    transform: translateY(-1px);
  }

  /* Submit */
  .actions {
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:6px;
  }

  button.cta {
    background: linear-gradient(90deg,var(--accent), #5ad0ff);
    color: #071127;
    padding: 12px 14px;
    border-radius: 10px;
    border: none;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    flex:1;
    box-shadow: 0 8px 30px rgba(124,92,255,0.12);
    transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
  }
  button.cta:active { transform: translateY(1px) scale(0.998); }
  button.cta[disabled] { opacity: 0.6; cursor: not-allowed; }

  .alt {
    background: transparent;
    color: var(--muted);
    border-radius: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,0.03);
    cursor:pointer;
  }

  .msg {
    font-size: 17px;
    padding: 10px 12px;
    border-radius: 10px;
    display:none;
    margin-top:10px;
  }
  .msg.success { background: rgba(22,163,74,0.08); color: var(--success); display:none; border: 1px solid rgba(22,163,74,0.12); }
  .msg.error { background: rgba(239,68,68,0.06); color: var(--danger); display:none; border: 1px solid rgba(239,68,68,0.08); }

  /* small close icon */
  .closeModel {
    position:absolute;
    right:16px;
    top:14px;
    background: rgba(255,255,255,0.02);
    width:34px;
    height:34px;
    line-height:34px;
    border-radius:10px;
    text-align:center;
    cursor:pointer;
    color:var(--muted);
    border:1px solid rgba(255,255,255,0.02);
    font-weight:600;
  }



  .popup {
  display: none; /* center image */
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* dark overlay */
  z-index: 9999;
}

/* Container for image + close button */
.popup-content {
  position: relative;
  display: inline-block;
}

/* Image inside popup */
.popup-image {
  max-width: 80vw;
  max-height: 80vh;
  border-radius: 10px;
  display: block;
  cursor: pointer;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 32px;
  color: white;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  line-height: 32px;
  text-align: center;
  transition: 0.2s;
}

.close-btn:hover {
  background: red;
  color: #fff;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .popup-image {
    max-width: 95vw;
    max-height: 80vh;
  }
  .close-btn {
    font-size: 28px;
    width: 30px;
    height: 30px;
    line-height: 28px;
  }
}