/* ================= GLOBAL RESET ================= */
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:"Segoe UI", Arial, sans-serif;
}

/* ================= BODY ================= */
body{
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(0,0,0,0.03),
            rgba(0,0,0,0.03) 6px,
            transparent 6px,
            transparent 14px
        ),
        #ffffff;
}

/* ================= MAIN CONTAINER ================= */
.container{
    width:90%;
    max-width:1700px;
    margin:auto;
    background:#ffffff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.4);
    padding-top:5px; /* space for sticky header */
}

/* ================= HEADER / NAVBAR ================= */
.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 40px;
    position:relative;
    transition:all .35s ease;
    z-index:999;
}

/* STICKY STATE */
.header.sticky{
    position:fixed;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    max-width:1700px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    border-radius:0 0 14px 14px;
    padding:12px 40px;
}

/* LOGO */
.logo img{
    height:70px;
    transition:filter .35s ease, transform .35s ease;
}

.header.sticky .logo img{
    height:60px;
}

.logo img:hover{
    filter: drop-shadow(0 0 6px rgba(11,95,179,.6))
            drop-shadow(0 0 16px rgba(11,95,179,.45));
    transform: scale(1.06);
}

/* ================= NAV BOX ================= */
.nav-box{
    background:linear-gradient(135deg,#0b5fb3,#083a6a);
    padding:14px 36px;
    border-radius:50px;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.nav-box ul{
    list-style:none;
    display:flex;
    align-items:center;
    gap:28px;
}

.nav-box ul li a{
    text-decoration:none;
    color:#ffffff;
    font-size:15px;
    font-weight:500;
    position:relative;
    padding:4px 0;
}

/* NAV UNDERLINE HOVER */
.nav-box ul li a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:#ffffff;
    transition:.3s ease;
}

.nav-box ul li a:hover::after{
    width:100%;
}

/* LOGIN */
.nav-box ul li.login a{
    opacity:.85;
}

/* CTA BUTTON */
.nav-box ul li.cta a{
    background:#f4b400;
    color:#0a2d4f;
    padding:10px 18px;
    border-radius:30px;
    font-weight:600;
    transition:.3s ease;
}

.nav-box ul li.cta a:hover{
    background:#ffd35a;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* ================= HAMBURGER ================= */
.menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}

.menu-toggle span{
    width:28px;
    height:3px;
    background:#0b5fb3;
    border-radius:5px;
    transition:.3s;
}

/* ================= MOBILE NAV ================= */
@media(max-width:980px){

    .menu-toggle{
        display:flex;
    }

    .nav-box{
        position:absolute;
        top:100%;
        right:40px;
        width:280px;
        border-radius:16px;
        padding:20px;
        opacity:0;
        visibility:hidden;
        transform:translateY(20px);
        transition:.35s ease;
    }

    .nav-box.active{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .nav-box ul{
        flex-direction:column;
        gap:18px;
    }

    .nav-box ul li.cta a{
        width:100%;
        text-align:center;
    }

    .header.sticky{
        padding:10px 20px;
    }
}

/* ================= HERO ================= */
.hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:40px 40px;
    background:linear-gradient(to right,#8bf14f,#e1d2d5,#50ebe8);
}


/* ================= HERO TEXT ================= */
.hero-text{
    max-width:520px;
    min-width:420px;   /* 🔑 prevents vertical text collapse */
    flex-shrink:0;     /* 🔑 stops flexbox squeezing */
}


/* GITA QUOTE CARD */
.gita-quote{
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(6px);
    padding:30px 28px;
    border-left:5px solid #0b5fb3;
    border-radius:14px;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

/* SANSKRIT TEXT */
.gita-quote .sanskrit{
    font-size:22px;
    line-height:1.6;
    font-weight:600;
    color:#0a2c4a;
    font-family: "Noto Serif Devanagari", serif;
}

/* DIVIDER */
.gita-quote .divider{
    display:block;
    width:60px;
    height:3px;
    background:#0b5fb3;
    margin:18px 0;
    border-radius:3px;
}

/* ENGLISH TRANSLATION */
.gita-quote .english{
    font-size:15px;
    line-height:1.7;
    color:#333;
    font-style:italic;
}

/* RESPONSIVE */
@media(max-width:900px){
    .gita-quote{
        text-align:center;
        border-left:none;
        border-top:4px solid #0b5fb3;
    }

    .gita-quote .divider{
        margin:16px auto;
    }
}



/* ================= BOOK STYLE ================= */
/* ================= BOOK QUOTE ================= */
.book{
    position:relative;
    max-width:520px;
    min-height:260px;        /* minimum book size */
    perspective:1200px;
    cursor:pointer;
}
.book::after{
    content:"";
    display:block;
    padding-bottom:20px;
}


/* PAGE */
.page{
    position:absolute;
    inset:0;
    background:#1fe03e6b;
    padding:32px 30px 36px;
    border-radius:14px;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.08),
        0 18px 40px rgba(0,0,0,.25);

    transform-origin:left center;
    transition:transform .8s ease, opacity .4s ease;
    backface-visibility:hidden;

    opacity:0;
    overflow:hidden;   /* keeps page clean */
}
.page > *{
    position:relative;
}


/* ACTIVE PAGE */
.page.active{
    opacity:1;
    z-index:2;
}

/* FLIP EFFECT */
.page.flip{
    transform:rotateY(-180deg);
    opacity:0;
}

/* SANSKRIT */
.page .sanskrit{
    font-family:"Noto Serif Devanagari", serif;
    font-size:22px;
    font-weight:600;
    line-height:1.7;
    color:#0a2c4a;
    word-break:break-word;
}


/* DIVIDER */
.page .divider{
    display:block;
    width:60px;
    height:3px;
    background:#0b5fb3;
    margin:18px 0;
    border-radius:3px;
}

/* ENGLISH MEANING */
.page .english{
    font-size:16px;
    line-height:1.7;
    color:#333;
    font-style:italic;
}


/* ===== FLIP INDICATION (MINIMAL & PREMIUM) ===== */

/* ===== FLIP INDICATOR – MEDIUM SIZE ===== */

.flip-indicator{
    position:absolute;
    bottom:14px;
    right:16px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:6px 12px;          /* ⬅ reduced */
    border-radius:22px;

    background:linear-gradient(135deg,#0b5fb3,#083a6a);
    color:#ffffff;

    font-size:12px;            /* ⬅ reduced */
    font-weight:600;
    letter-spacing:.2px;

    box-shadow:
        0 6px 16px rgba(11,95,179,.45),
        0 2px 6px rgba(0,0,0,.25);

    pointer-events:none;
    opacity:1;
}

/* Circular arrow icon */
.flip-indicator::before{
    content:"↻";
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:22px;               /* ⬅ reduced */
    height:22px;
    border-radius:50%;

    background:#ffffff;
    color:#0b5fb3;

    font-size:13px;
    font-weight:700;

    box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* Hover emphasis (subtle) */
.book:hover .flip-indicator{
    transform:scale(1.05);
}

/* Gentle attention pulse */
.book:not(:hover) .flip-indicator{
    animation:flipPulse 2.6s ease-in-out infinite;
}

@keyframes flipPulse{
    0%,100%{
        transform:scale(1);
        opacity:.85;
    }
    50%{
        transform:scale(1.08);
        opacity:1;
    }
}


/* MOBILE */
@media(max-width:900px){
    .book{
        height:340px;
    }
}


/* HERO IMAGE */
.hero-image img{
    width:480px;
    max-width:100%;
    transition:transform .35s ease;
    transform-origin:center;
}

.hero-image img:hover{
    transform:scale(1.05);
    animation:templeDance .6s ease-in-out;
}

@keyframes templeDance{
    0%{transform:scale(1.05) rotate(0deg);}
    25%{transform:scale(1.05) rotate(1.5deg);}
    50%{transform:scale(1.05) rotate(-1.5deg);}
    75%{transform:scale(1.05) rotate(1deg);}
    100%{transform:scale(1.05) rotate(0deg);}
}




/* ================= SMALL SCREENS ================= */
@media(max-width:900px){
    .header{
        flex-direction:column;
        gap:15px;
    }

    .hero{
        flex-direction:column;
        text-align:center;
        gap:30px;
    }

    .hero-text h1{
        font-size:34px;
    }
}
/* ================= RUNNING TEXT LINE ================= */
.running-line{
    width:100%;
    overflow:hidden;
    background:linear-gradient(to right,#8bf14f,#e1d2d5,#50ebe8);
    padding:0px 0;
    position:relative;
}

.running-text{
    display:inline-block;
    white-space:nowrap;
    font-size:15px;
    font-weight:500;
    color:#ffffff;
    padding-left:100%;
    animation:scrollText 18s linear infinite;
}

/* ANIMATION */
@keyframes scrollText{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-100%);
    }
}

/* HOVER PAUSE (optional) */
.running-line:hover .running-text{
    animation-play-state:paused;
}

/* MOBILE */
@media(max-width:900px){
    .running-text{
        font-size:14px;
    }
}

.subject-card{
  max-width:100%;
  padding:0;
  background:none;
  border-radius:0;
  box-shadow:none;
  text-align:left;
  font-family:"Georgia","Times New Roman",serif;
  position:relative;
  border:none;
}

.subject-card h2{
  font-size:30px;
  color:#6a3f1f;
  margin-bottom:6px;
  letter-spacing:1px;
  display:inline;
}

.subject-card p{
  font-size:20px;
  color:#333;
  line-height:1.7;
  display:inline;
}

.subject-card .relation{
  font-weight:700;
  color:#8b5e34;
  font-size:22px;
}

.subject-card .desc{
  font-size:18px;
  color:#555;
  font-style:italic;
}


/* ===== OTP MODAL ===== */
#otpModal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    z-index:9999;
    backdrop-filter: blur(4px);
}

.otp-card{
    width:360px;
    max-width:92%;
    margin:12% auto;
    background:#fff;
    border-radius:16px;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
    overflow:hidden;
    animation:fadeScale .3s ease;
}

@keyframes fadeScale{
    from{opacity:0; transform:scale(.9)}
    to{opacity:1; transform:scale(1)}
}

/* HEADER */
.otp-header{
    background:#0b5fb3;
    color:#fff;
    padding:14px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:16px;
}

/* CLOSE BUTTON */
.otp-close{
    background:#ffffff22;
    color:#fff;
    border:none;
    width:28px;
    height:28px;
    border-radius:50%;
    font-size:18px;
    cursor:pointer;
}

.otp-close:hover{
    background:#ff4d4d;
}

/* BODY */
.otp-body{
    padding:22px;
}

.otp-body input{
    width:100%;
    padding:12px;
    border-radius:8px;
    border:1px solid #ccc;
    font-size:14px;
    margin-bottom:14px;
}

/* BUTTON */
.otp-btn{
    width:100%;
    padding:12px;
    background:#0b5fb3;
    border:none;
    border-radius:8px;
    color:#fff;
    font-size:15px;
    cursor:pointer;
    transition:.2s;
}

.otp-btn:disabled{
    background:#8bb4e5;
    cursor:not-allowed;
}

.otp-btn:hover:not(:disabled){
    background:#063d73;
}

/* MESSAGE */
.otp-msg{
    display:none;
    padding:10px;
    border-radius:6px;
    font-size:14px;
    margin-bottom:14px;
    text-align:center;
}

.otp-success{
    background:#e6f6ed;
    color:#0f5132;
}

.otp-error{
    background:#fdecea;
    color:#842029;
}

/* ================= HEADER LAYOUT FIX ================= */
.nav-wrapper{
    display:flex;
    align-items:center;
    gap:22px;
}

/* REMOVE UNDERLINE FROM CTA */
.nav-cta a::after{
    display:none !important;
}

/* CTA BUTTON (PREMIUM LOOK) */
.nav-cta a{
    background:#f4b400;
    color:#0a2d4f;
    padding:12px 24px;
    border-radius:32px;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 10px 28px rgba(0,0,0,.35);
    transition:.25s ease;
    white-space:nowrap;
}

.nav-cta a:hover{
    background:#ffd35a;
    transform:translateY(-2px);
}

/* STICKY HEADER CTA FIX */
.header.sticky .nav-cta a{
    padding:10px 22px;
}

/* MOBILE NAV FIX */
@media(max-width:980px){

    .nav-wrapper{
        flex-direction:column;
        align-items:flex-end;
        width:100%;
    }

    .nav-cta{
        margin-top:12px;
    }

    .nav-cta a{
        width:100%;
        text-align:center;
    }
}


@media(max-width:900px){
    .hero-text{
        min-width:100%;
    }
}


/* ================= ABOUT SECTION ================= */
.about-section{
    padding:70px 60px;
    background:#ffffff;
}

.about-header{
    max-width:720px;
    margin-bottom:50px;
}

.about-header h2{
    font-size:32px;
    color:#0a2c4a;
    margin-bottom:14px;
}

.about-header p{
    font-size:16px;
    line-height:1.7;
    color:#555;
}

/* ================= HIGHLIGHTS ================= */
.highlights h3{
    font-size:26px;
    margin-bottom:30px;
    color:#0a2c4a;
}

.highlight-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.highlight-card{
    background:#f8fbff;
    padding:26px;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.3s ease;
}

.highlight-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.highlight-card .icon{
    font-size:28px;
    margin-bottom:12px;
}

.highlight-card h4{
    font-size:20px;
    margin-bottom:10px;
    color:#0b5fb3;
}

.highlight-card p{
    font-size:14.5px;
    line-height:1.6;
    color:#555;
    margin-bottom:14px;
}

.highlight-card a{
    text-decoration:none;
    font-weight:600;
    color:#0b5fb3;
}

/* ================= SUCCESS ================= */
.success-section{
    padding:70px 60px;
    background:#f5f9ff;
}

.success-section h2{
    font-size:30px;
    margin-bottom:40px;
    color:#0a2c4a;
}

.testimonials{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.testimonial{
    background:#ffffff;
    padding:28px;
    border-radius:18px;
    box-shadow:0 12px 28px rgba(0,0,0,.1);
    display:flex;
    gap:16px;
}

.testimonial .avatar{
    width:52px;
    height:52px;
    background:#0b5fb3;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:18px;
}

.testimonial p{
    font-size:14.5px;
    line-height:1.6;
    color:#444;
}

/* ================= FOOTER ================= */
.site-footer{
    background:linear-gradient(to right,#062b52,#041d38);
    padding:26px 60px;
    color:#ffffff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
}

/* ================= MOBILE ================= */
@media(max-width:900px){
    .about-section,
    .success-section{
        padding:50px 24px;
    }

    .site-footer{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }
}