/* ==========================================
   GOOGLE FONT
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#faf9f6;
    color:#222;
}

/* ==========================================
   COLOURS
========================================== */

:root{

    --green:#0B5D3B;
    --dark:#031A12;
    --gold:#D4AF37;
    --light-gold:#FFD95A;
    --white:#ffffff;

}

/* ==========================================
   TOP BAR
========================================== */

/* ==========================================
   TOP BAR
========================================== */

.top-bar{

    background:
        radial-gradient(circle at top left, rgba(20,92,67,0.35), transparent 45%),
        radial-gradient(circle at bottom right, rgba(11,61,46,0.25), transparent 40%),
        linear-gradient(135deg,#000,#041b13,#0b5d3b,#02150f);

    color:#fff;

    border-top:2px solid #d4af37;
    border-bottom:1px solid rgba(212,175,55,.3);

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;

    padding:12px 7%;

    font-size:15px;

    box-shadow:0 3px 15px rgba(0,0,0,.35);

}



.top-left{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

}

.top-right{

    font-weight:600;

}

/* ==========================================
   NAVBAR
========================================== */

.navbar{

    background:white;

    padding:18px 0;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

}

.navbar-brand{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.navbar-brand img{

    width:75px;

}

.brand-text{
    display:flex;
    flex-direction:column;
}

.brand-text h2{
    color:var(--green);
    font-size:2rem;
    font-weight:800;
    margin:0;
    line-height:1.1;
}

.brand-text p{
    display:flex;
    align-items:center;
    gap:6px;

    font-size:0.78rem;
    font-weight:700;
    letter-spacing:.5px;
    margin:0;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffd95a,
        #d4af37,
        #ffd95a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 0 6px rgba(255,217,90,.4);
}
.brand-text span{

    margin:0 5px;

}

/* ==========================================
   NAVIGATION
========================================== */

.navbar-nav{

    gap:18px;

}

.nav-link{

    position:relative;

    color:var(--green)!important;

    font-size:1.25rem;

    font-weight:700;

    transition:.35s;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:3px;

    border-radius:10px;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffd95a,
        #d4af37,
        #ffd95a,
        #fff8c6);

    box-shadow:
        0 0 6px rgba(255,217,90,.6);

    transition:width .35s ease;

}

.nav-link:hover{

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffd95a,
        #d4af37,
        #ffd95a);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
    0 0 10px rgba(255,217,90,.6);

}

.nav-link:hover::after{

    width:100%;

}
.nav-link.active{

    color:var(--green)!important;

}

.nav-link:hover,
.nav-link.active:hover{

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffd95a,
        #d4af37,
        #ffd95a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 0 10px rgba(255,217,90,.6);

}

.nav-link:hover::after,
.nav-link.active:hover::after{

    width:100%;

}

/* ============================= */
/* Contact Page */
/* ============================= */

.contact-section{

    min-height:100vh;

    padding:80px 20px;

    background:
        radial-gradient(circle at top left, rgba(20,92,67,.35), transparent 45%),
        radial-gradient(circle at bottom right, rgba(11,61,46,.25), transparent 40%),
        linear-gradient(135deg,#000,#041b13,#0B5D3B,#000);

}


/* Contact Card */

.contact-card{

    max-width:800px;

    margin:auto;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    border:1px solid rgba(212,175,55,.25);

    border-radius:25px;

    padding:50px;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}


/* Heading */

.contact-card h1{

    text-align:center;

    font-size:3rem;

    font-weight:800;

    color:#D4AF37;

    text-shadow:
        0 0 8px rgba(212,175,55,.35),
        0 0 18px rgba(212,175,55,.25);

}


/* Description */

.contact-card p{

    text-align:center;

    color:#f5e7a7;

    margin-bottom:35px;

}


/* Labels */

.contact-card label{

    color:#D4AF37;

    font-weight:600;

}


/* Inputs */

.contact-card .form-control{

    background:rgba(255,255,255,.08);

    color:white;

    border:1px solid rgba(212,175,55,.25);

    border-radius:12px;

    padding:14px;

}


.contact-card .form-control::placeholder{

    color:#d8d8d8;

}


.contact-card .form-control:focus{

    background:rgba(255,255,255,.12);

    color:white;

    border-color:#D4AF37;

    box-shadow:0 0 12px rgba(212,175,55,.35);

}


/* Button */

.contact-submit{

    display:block;

    margin:35px auto 0;

    padding:14px 40px;

    border:none;

    border-radius:30px;

    background:
        linear-gradient(135deg,#0B5D3B,#000);

    color:white;

    font-weight:700;

    transition:.35s;

}


/* Hover */

.contact-submit:hover{

    background:#D4AF37;

    color:#000;

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(212,175,55,.45);

}

@media (max-width:768px){

    .contact-section{

        padding:40px 15px;

    }

    .contact-card{

        padding:30px 20px;

        border-radius:18px;

    }

    .contact-card h1{

        font-size:2.2rem;

    }

    .contact-submit{

        width:100%;

    }

}

.contact-card .form-control:focus{

    background:rgba(255,255,255,0.12);

    color:#ffffff;

    border:1px solid rgba(212,175,55,0.3);

}

.contact-card .form-control:focus{

    background:rgba(255,255,255,0.18);

    color:#ffffff;

    border-color:#D4AF37;

    box-shadow:0 0 10px rgba(212,175,55,0.4);

}


.contact-card input,
.contact-card textarea{

    color:#222 !important;
    caret-color:#D4AF37;

}

.contact-card input::placeholder,
.contact-card textarea::placeholder{

    color:#777;

}

/* ==========================================
   HAMBURGER
========================================== */

.navbar-toggler{

    border:none;

}

.navbar-toggler:focus{

    box-shadow:none;

}


/* ===========================
   HERO SLIDESHOW
=========================== */

.hero{
    width:100%;
}

.carousel-item{
    height:650px; /* Desktop height */
}

.carousel-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

@media (max-width:991px){

    .carousel-item{
        height:450px;
    }

}

@media (max-width:576px){

    .carousel-item{
        height:280px;
    }

}

.hero{
    position:relative;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
    z-index:2;
}

.carousel{
    position:relative;
    z-index:1;
}

/* ==========================
   MOBILE NAVBAR
========================== */

@media (max-width:768px){

    .navbar-brand{
        align-items:flex-start;
    }

    .brand-text h2{
        font-size:1.35rem;
    }

    .brand-text p{

        display:block;

        font-size:.72rem;

        line-height:1.25;

    }

    .brand-text span{

        display:none;

    }

}

/* ==========================================
   FOOTER
========================================== */

.footer{

    background:
        radial-gradient(circle at top left, rgba(20,92,67,.30), transparent 45%),
        radial-gradient(circle at bottom right, rgba(212,175,55,.15), transparent 40%),
        linear-gradient(135deg,#000,#041b13,#0b5d3b,#02150f);

    color:white;

    padding:70px 0 25px;

    margin-top:0px;

    border-top:3px solid #d4af37;

}

.footer h3{

    font-size:1.4rem;

    margin-bottom:22px;

    font-weight:700;

    background:linear-gradient(
        90deg,
        #fff7c2,
        #ffe27a,
        #d4af37,
        #ffe27a,
        #fff7c2);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 6px rgba(255,217,90,.4);

}


.footer a{

    text-decoration:none;

    transition:.35s;

}

.footer a:hover{

    text-shadow:
        0 0 8px rgba(255,217,90,.8),
        0 0 16px rgba(255,217,90,.5);

}

.footer p,
.footer li,
.footer a{

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffe27a,
        #d4af37,
        #ffe27a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 5px rgba(255,217,90,.35);

    line-height:1.9;

}

/* ==========================================
   COPYRIGHT
========================================== */

.copyright{

    text-align:center;

    margin-top:40px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.15);

    font-size:.95rem;

    font-weight:600;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffe27a,
        #d4af37,
        #ffe27a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 6px rgba(255,217,90,.45),
        0 0 12px rgba(255,217,90,.25);

}



.footer ul{

    list-style:none;

    padding:0;

}

.footer li{

    margin-bottom:10px;

}

.social-icons a{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:45px;
    height:45px;

    border:1px solid rgba(212,175,55,.5);
    border-radius:50%;

    margin-right:10px;

    font-size:20px;

    transition:.35s;

}

.social-icons a:hover{

    background:#d4af37;

    color:#041b13 !important;

    box-shadow:0 0 18px rgba(255,217,90,.7);

}

/* ==========================================
   MOBILE NAVBAR
========================================== */

@media (max-width:768px){

    .navbar{
        padding:10px 0;
    }

    .container{
        align-items:center;
    }

    .navbar-brand{
        display:flex;
        align-items:center;
        max-width:80%;
    }

    .navbar-brand img{
        width:45px;
    }

    .brand-text h2{
        font-size:1rem;
    }

    .brand-text p{
        font-size:.55rem;
    }

    .brand-text span{
        display:none;
    }

    .navbar-toggler{
        padding:.25rem .45rem;
        margin-left:auto;
    }

}

/* ==========================================
   ABOUT HERO
========================================== */

.about-hero{

    background:
        linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
        url("../images/madinah.jpg");

    background-size:cover;
    background-position:center;

    min-height:420px;

    display:flex;
    align-items:center;
    justify-content:center;

}

.about-hero h1{

    font-size:3.2rem;

    font-weight:800;

    margin-bottom:20px;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffd95a,
        #d4af37,
        #ffd95a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.about-hero p{

    color:white;

    font-size:1.2rem;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}

/* ==========================================
   ABOUT SECTION
========================================== */

.about-section{

    background:#faf9f6;

    padding:90px 0;

}

.section-title{

    font-size:2.6rem;

    font-weight:800;

    margin-bottom:25px;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffd95a,
        #d4af37,
        #ffd95a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 6px rgba(255,217,90,.35);

}

.about-text{

    font-size:1.08rem;

    line-height:2;

    color:#444;

}

.about-image{

    width:100%;

    border-radius:18px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.18);

    transition:.4s;

}

.about-image:hover{

    transform:scale(1.02);

}

/* ==========================================
   MISSION & VISION
========================================== */

.mission-section{

    padding:90px 0;

    background:
        linear-gradient(to bottom,#ffffff,#f6f8f7);

}

.mission-card{

    background:white;

    border-top:5px solid #0B5D3B;

    border-radius:18px;

    padding:40px;

    text-align:center;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    transition:.4s;

    height:100%;

}

.mission-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,.18);

    border-top:5px solid #d4af37;

}

.mission-icon{

    font-size:3rem;

    margin-bottom:20px;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffd95a,
        #d4af37,
        #ffd95a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.mission-card h3{

    color:#0B5D3B;

    font-size:2rem;

    font-weight:700;

    margin-bottom:20px;

}

.mission-card p{

    color:#555;

    line-height:1.9;

    font-size:1.05rem;

}

/* ==========================================
   CORE VALUES
========================================== */

.values-section{

    padding:90px 0;

    background:#faf9f6;

}

.section-subtitle{

    font-size:1.1rem;

    color:#666;

    max-width:650px;

    margin:auto;

}

.value-card{

    background:white;

    padding:35px 25px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.4s;

    border-bottom:5px solid #0B5D3B;

    height:100%;

}

.value-card:hover{

    transform:translateY(-10px);

    border-bottom:5px solid #D4AF37;

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.value-card i{

    font-size:3rem;

    margin-bottom:20px;

    display:block;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffd95a,
        #d4af37,
        #ffd95a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.value-card h4{

    color:#0B5D3B;

    font-weight:700;

    margin-bottom:15px;

}

.value-card p{

    color:#555;

    line-height:1.8;

    font-size:.98rem;

}

/* ==========================================
   WHY CHOOSE US
========================================== */

.choose-section{

    padding:90px 0;

    background:white;

}

.choose-image{

    width:100%;

    border-radius:20px;

    box-shadow:0 18px 45px rgba(0,0,0,.15);

    transition:.4s;

}

.choose-image:hover{

    transform:scale(1.02);

}

.choose-list{

    list-style:none;

    padding:0;

    margin-top:25px;

}

.choose-list li{

    font-size:1.08rem;

    margin-bottom:18px;

    color:#444;

    display:flex;

    align-items:flex-start;

    gap:15px;

}

.choose-list i{

    font-size:1.3rem;

    color:#d4af37;

    margin-top:2px;

}

/* ==========================================
   CTA
========================================== */

.cta-section{

    padding:90px 20px;

    background:
        radial-gradient(circle at top left, rgba(20,92,67,.35), transparent 45%),
        linear-gradient(135deg,#000,#041b13,#0b5d3b,#02150f);

    text-align:center;

}

.cta-section h2{

    font-size:2.8rem;

    font-weight:800;

    margin-bottom:20px;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffd95a,
        #d4af37,
        #ffd95a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.cta-section p{

    color:white;

    max-width:700px;

    margin:0 auto 35px;

    line-height:1.8;

}

.btn-akhlaq{

    background:#d4af37;

    color:#041b13;

    font-weight:700;

    padding:14px 38px;

    border-radius:50px;

    transition:.35s;

}

.btn-akhlaq:hover{

    background:#ffe27a;

    transform:translateY(-3px);

    box-shadow:0 0 20px rgba(255,217,90,.6);

}

/* ==========================================
   COURSES HERO
========================================== */

.courses-hero{

    background:
        linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
        url("images/coursesquran.jpg");

    background-size:cover;
    background-position:center;

    padding:140px 20px;

    text-align:center;

}

.courses-hero h1{

    font-size:3.2rem;

    font-weight:800;

    margin-bottom:20px;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffd95a,
        #d4af37,
        #ffd95a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.courses-hero p{

    color:white;

    max-width:700px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.8;

}

/* ==========================================
   COURSES
========================================== */

.courses-grid{

    padding:90px 0;

    background:#faf9f6;

}

.course-card{

    background:white;

    padding:35px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.4s;

    border-bottom:5px solid #0B5D3B;

    height:100%;

}

.course-card:hover{

    transform:translateY(-10px);

    border-bottom:5px solid #D4AF37;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.course-icon{

    font-size:3rem;

    display:block;

    margin-bottom:20px;

    color:#0B5D3B;

}

.course-card h3{

    color:#0B5D3B;

    font-weight:700;

    margin-bottom:18px;

}

.course-card p{

    color:#555;

    line-height:1.8;

}

.course-btn{

    display:inline-block;

    margin-top:20px;

    background:#0B5D3B;

    color:white;

    text-decoration:none;

    padding:10px 25px;

    border-radius:30px;

    transition:.35s;

}

.course-btn:hover{

    background:#D4AF37;

    color:#041b13;

}

.courses-intro .section-title{

    font-size:2.8rem;

    font-weight:800;

    margin-bottom:20px;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffe27a,
        #d4af37,
        #ffe27a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 8px rgba(255,217,90,.45);

}

.courses-intro .section-subtitle{

    color:#ffffff;

    max-width:750px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.9;

}

.gold-divider{

    width:100px;

    height:4px;

    margin:20px auto 30px;

    border-radius:10px;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffd95a,
        #d4af37,
        #ffd95a,
        #fff8c6);

    box-shadow:
        0 0 12px rgba(255,217,90,.6);

}

/* ==========================================
   COURSES INTRO
========================================== */

.courses-intro{

    padding:90px 20px;

    background:
        radial-gradient(circle at top left, rgba(20,92,67,.35), transparent 45%),
        radial-gradient(circle at bottom right, rgba(212,175,55,.15), transparent 40%),
        linear-gradient(135deg,#000,#041b13,#0b5d3b,#02150f);

    text-align:center;

}

/* ==========================================
   LEARNING JOURNEY
========================================== */

.journey-section{

    padding:90px 0;

    background:white;

}

.journey-title{

    font-size:2.8rem;

    font-weight:800;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffd95a,
        #d4af37,
        #ffd95a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.journey-card{

    background:#faf9f6;

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.journey-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.journey-number{

    width:60px;

    height:60px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#0B5D3B;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.5rem;

    font-weight:700;

}

/* ==========================================
   BOOKS HERO
========================================== */

.books-hero{

    background:
        linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.60)),
        url("images/library.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    min-height:450px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:80px 20px;

}

.books-hero h1{

    font-size:3.3rem;

    font-weight:800;

    margin-bottom:20px;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffe27a,
        #d4af37,
        #ffe27a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 10px rgba(255,217,90,.45);

}

.books-hero p{

    color:white;

    font-size:1.2rem;

    max-width:750px;

    margin:auto;

    line-height:1.9;

}

/* ==========================================
   BOOKS INTRO
========================================== */

.books-intro{

    padding:90px 20px;

    background:
        radial-gradient(circle at top left, rgba(20,92,67,.35), transparent 45%),
        radial-gradient(circle at bottom right, rgba(212,175,55,.15), transparent 40%),
        linear-gradient(135deg,#000,#041b13,#0b5d3b,#02150f);

    text-align:center;

}

.books-title{

    font-size:2.8rem;

    font-weight:800;

    margin-bottom:20px;

    background:linear-gradient(
        90deg,
        #fff8c6,
        #ffe27a,
        #d4af37,
        #ffe27a,
        #fff8c6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 0 8px rgba(255,217,90,.45);

}

.books-subtitle{

    color:white;

    max-width:780px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.9;

}

/* ==========================================
   BOOK CATEGORIES
========================================== */

.book-categories{

    padding:90px 0;

    background:#faf9f6;

}

.category-card{

    background:white;

    border-radius:18px;

    padding:40px 25px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    border-bottom:5px solid #0B5D3B;

    transition:.35s;

    height:100%;

}

.category-card:hover{

    transform:translateY(-10px);

    border-bottom:5px solid #D4AF37;

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.category-card i{

    font-size:3rem;

    display:block;

    margin-bottom:20px;

    color:#0B5D3B;

}

.category-card h4{

    color:#0B5D3B;

    font-weight:700;

}

/* ==========================================
   BOOK CARDS
========================================== */

.books-section{

    padding:90px 0;

    background:#faf9f6;

}

.book-card{

    background:white;

    border-radius:20px;

    overflow:hidden;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

    border-bottom:5px solid #0B5D3B;

}

.book-card:hover{

    transform:translateY(-10px);

    border-bottom:5px solid #D4AF37;

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.book-cover{

    width:100%;

    height:420px;

    object-fit:cover;

}

.book-card h4{

    margin-top:20px;

    color:#0B5D3B;

    font-weight:700;

}

.book-author{

    color:#777;

    font-style:italic;

    margin-bottom:20px;

}

.book-btn{

    display:inline-block;

    margin-bottom:25px;

    background:#0B5D3B;

    color:white;

    padding:10px 28px;

    border-radius:30px;

    text-decoration:none;

    transition:.35s;

}

.book-btn:hover{

    background:#D4AF37;

    color:#041b13;

}

.book-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.book-card img {
    width: 100%;
    height: 420px;
    object-fit: contain;
    background: #f8f5ee;
    padding: 10px;
}


/* Reader Page */

.reader-section{

min-height:800px;
background:#5b3a1e;
padding:60px 20px;
text-align:center;

}


.book-table{

background:
url("../images/wood.jpg");

padding:80px;
border-radius:20px;

}


.book-cover img{

width:250px;
cursor:pointer;

box-shadow:0 20px 40px rgba(0,0,0,.5);

}


.book-page{

display:none;

background:#fffdf5;
max-width:700px;
margin:40px auto;
padding:50px;
border-radius:10px;

}


.page-number{

margin-top:40px;
color:#D4AF37;
font-weight:bold;

}

.reader-section{

min-height:700px;
padding:60px 20px;
background:#5a3a1c;
text-align:center;

}


.book-table{

background:#7b4b25;
padding:80px 20px;
border-radius:20px;

}


.book-cover img{

width:280px;

box-shadow:
0 20px 40px rgba(0,0,0,0.5);

cursor:pointer;

}


.book-cover p{

color:white;
margin-top:20px;

}


.book-page{

display:none;

background:#faf9f6;

max-width:700px;

margin:50px auto;

padding:50px;

border-radius:15px;

box-shadow:
0 15px 35px rgba(0,0,0,.3);

}


.page-number{

margin-top:40px;

color:#D4AF37;

font-weight:bold;

}

.contact-section{

background:#faf9f6;

padding:80px 0;

}


.contact-card{

background:white;

max-width:750px;

margin:auto;

padding:50px;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.12);

}


.contact-card h1{

text-align:center;

color:#0B5D3B;

font-weight:800;

}


.contact-card p{

text-align:center;

color:#555;

margin-bottom:35px;

}


.contact-card label{

font-weight:600;

color:#0B5D3B;

}


.contact-card .form-control{

padding:14px;

border-radius:10px;

border:1px solid #ddd;

font-size:16px;

}



.contact-submit{

display:block;

margin:auto;

padding:12px 35px;

border:none;

border-radius:25px;

background:
linear-gradient(
135deg,
#0B5D3B,
#000
);

color:white;

font-weight:600;

border:1px solid #D4AF37;

}


.contact-submit:hover{

color:#D4AF37;

}

@media(max-width:576px){

.contact-section{

padding:40px 15px;

}


.contact-card{

padding:30px 20px;

}


.contact-card h1{

font-size:30px;

}


.contact-card .form-control{

font-size:17px;

padding:15px;

}


.contact-submit{

width:100%;

}

}

/* ==========================================
   CONTACT BUTTON
========================================== */

.contact-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    white-space:nowrap;      /* Keeps "Contact Us" on one line */

    padding:14px 32px;
    margin-left:20px;        /* Moves it slightly to the right */

    background:linear-gradient(135deg,#000,#062f22,#0B5D3B);
    color:#fff;

    text-decoration:none;
    font-weight:700;
    font-size:16px;

    border:2px solid transparent;
    border-radius:50px;

    transition:all .35s ease;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.contact-btn:hover{
    background:linear-gradient(135deg,#000,#062f22,#0B5D3B);
    color:#D4AF37;
    border-color:#D4AF37;

    transform:translateY(-3px);

    box-shadow:
        0 0 10px rgba(212,175,55,.45),
        0 0 20px rgba(212,175,55,.25),
        0 12px 30px rgba(0,0,0,.3);
}

.contact-btn:active{
    transform:translateY(0);
}

@media (max-width:768px){

    .contact-btn{

        margin-left:0;
        margin-top:20px;

        width:100%;
        max-width:260px;

        font-size:15px;

    }

}

/* ==========================================
   SERIES LIBRARY
========================================== */

.series-library{

    padding:70px 0 40px;
    background:#faf9f6;

}


.library-title{

    color:#0B5D3B;
    font-size:48px;
    font-weight:800;
    margin-bottom:10px;

}


.library-subtitle{

    color:#666;
    font-size:20px;
    margin-bottom:35px;

}



/* SEARCH BAR */

.search-wrapper{

    margin-bottom:50px;

}


.search-wrapper input{

    width:100%;
    height:60px;
    border-radius:12px;
    border:2px solid #d8d8d8;
    padding:0 20px;
    font-size:18px;
    transition:.3s;

}


.search-wrapper input:focus{

    outline:none;
    border-color:#0B5D3B;
    box-shadow:0 0 15px rgba(11,93,59,.15);

}



/* SERIES LIST */

.series-link{

    text-decoration:none;
    color:inherit;

}


.series-item{

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

    background:white;

    border-radius:20px;

    margin-bottom:35px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}



.series-item:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}





/* ==========================
   SERIES IMAGE
========================== */

.series-image{
    width:70%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:20px;
    background:#000;
}

.series-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    /* Move the crop upward */
    object-position:center 35%;

    display:block;

    transition:0.5s ease;
}

.series-item:hover .series-image img{
    transform:scale(1.05);
}





/* INFORMATION */

.series-info{

    width:30%;

    padding:30px;

}



.series-info h2{

    color:#0B5D3B;

    font-size:34px;

    font-weight:800;

}



.series-info h5{

    color:#D4AF37;

    font-size:22px;

    margin:20px 0;

}



.series-info p{

    color:#555;

    line-height:1.8;

}



/* RESPONSIVE */

@media (max-width:992px){

.series-item{

    flex-direction:column;

}


.series-image{

    width:100%;
    height:260px;

}


.series-info{

    width:100%;

}

}



@media (max-width:768px){

.library-title{

    font-size:36px;

}

.library-subtitle{

    font-size:18px;

}

.series-info h2{

    font-size:28px;

}

.series-info{

    padding:25px;

}

}

.series-image{
    width:70%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:18px;
}

.series-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ==========================================
   WATCH PAGE
========================================== */

.watch-page{

    min-height:100vh;

    background:
        radial-gradient(circle at top left, rgba(20,92,67,.35), transparent 45%),
        radial-gradient(circle at bottom right, rgba(11,61,46,.25), transparent 40%),
        linear-gradient(135deg,#081b16 0%,#0b3d2e 55%,#050505 100%);

    padding:70px 0;

}


/* HEADER */

.watch-header{

    margin-bottom:40px;

}



/* ===========================
   PLAYLIST
=========================== */

.playlist{

    background:white;
    border-radius:20px;
    padding:20px;

    max-height:700px;
    overflow-y:auto;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}



.playlist-item{

    margin-bottom:20px;

    border-radius:16px;

    overflow:hidden;

    cursor:pointer;

    border:3px solid transparent;

    transition:.35s;

}



.playlist-item:hover{
    transform:translateY(-4px);
}


.playlist-item.active{
    border:3px solid #D4AF37;
    box-shadow:0 0 18px rgba(212,175,55,.45);
}

.episode-thumb{

    position:relative;

}



.episode-thumb img{

    width:100%;
    display:block;

}



.episode-overlay{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    padding:16px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.92)
    );

}



.episode-overlay span{

    color:white;

    font-weight:700;

    font-size:18px;

}





/* VIDEO */

.video-player{

    background:black;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}



.video-player iframe{

    width:100%;

    aspect-ratio:16/9;

    border:none;

    display:block;

}






/* MOBILE */

@media(max-width:992px){

.watch-title{

    font-size:38px;

}

.playlist{

    max-height:500px;

    margin-bottom:30px;

}

}



@media(max-width:768px){

.watch-title{

    font-size:30px;

}

.watch-presenter{

    font-size:18px;

}

}

.video-title{

    color:#D4AF37;

    font-size:2rem;

    font-weight:700;

    text-align:center;

    margin-bottom:20px;

    text-shadow:
        0 0 4px #D4AF37,
        0 0 10px #D4AF37,
        0 0 18px rgba(212,175,55,.8),
        0 0 30px rgba(212,175,55,.5);

}


.playlist{
    background:#fff;
    border-radius:18px;
    padding:20px;
}

.series-title{
    color:#D4AF37;
    font-size:2.7rem;
    font-weight:800;
    text-align:center;

    text-shadow:
        0 0 8px rgba(212,175,55,.65),
        0 0 18px rgba(212,175,55,.45);
}

.presenter{
    color:#D4AF37;
    text-align:center;
    font-size:1.2rem;
    margin-bottom:35px;
}

.learning-card{

    background:white;

    border-radius:15px;

    padding:20px;

    margin-bottom:15px;

    font-weight:600;

    transition:.3s;

}

.learning-card:hover{

    border:2px solid #D4AF37;

    transform:translateY(-3px);

}

.watch-page{
    min-height:100vh;

    background:
        radial-gradient(circle at top left, rgba(20,92,67,.35), transparent 45%),
        radial-gradient(circle at bottom right, rgba(11,61,46,.25), transparent 40%),
        linear-gradient(135deg,#081b16 0%,#0b3d2e 55%,#050505 100%);

    padding:60px 0;
}

.series-title{

    color:#D4AF37;

    font-size:3rem;

    font-weight:800;

    text-shadow:
        0 0 10px rgba(212,175,55,.45);

}

.series-presenter{

    color:#D4AF37;

    font-size:1.25rem;

    margin-top:10px;

    margin-bottom:40px;

    opacity:.9;

}

.video-title{

    color:white;

    font-weight:700;

    margin-bottom:20px;

}

.video-player{

    background:#000;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 15px 35px rgba(0,0,0,.35);

}

.video-player iframe{

    width:100%;

    aspect-ratio:16/9;

    border:none;

}

.playlist{

    background:white;

    border-radius:18px;

    padding:20px;

    height:650px;

    overflow-y:auto;

}

.playlist-item{

    border:3px solid transparent;

    border-radius:14px;

    margin-bottom:20px;

    cursor:pointer;

    transition:.3s;

    overflow:hidden;

}

.playlist-item:hover{

    transform:translateY(-3px);

    border-color:#D4AF37;

}

.playlist-item.active{

    border:3px solid #D4AF37;

    box-shadow:
        0 0 20px rgba(212,175,55,.45);

}

.episode-thumb img{

    width:100%;

    display:block;

}

.series-info{

    margin-top:70px;

    background:white;

    border-radius:18px;

    padding:35px;

}

#learningGrid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}

.learning-card{

    background:white;

    padding:25px;

    border-radius:16px;

    font-weight:700;

    text-align:center;

    transition:.3s;

}

.learning-card:hover{

    transform:translateY(-5px);

    border:2px solid #D4AF37;

}

@media(max-width:991px){

    .playlist{

        height:420px;

        margin-bottom:30px;

    }

    .series-title{

        font-size:2rem;

    }

}

.series-title{

    color:#0B5D3B;
    font-size:48px;
    font-weight:800;

}

.series-presenter{

    color:#D4AF37;
    font-size:22px;
    font-weight:600;

}


.section-heading{

    text-align:center;

    color:#D4AF37;

    font-size:2.5rem;

    font-weight:800;

    margin-bottom:35px;

    text-shadow:
        0 0 5px rgba(212,175,55,.9),
        0 0 10px rgba(212,175,55,.8),
        0 0 18px rgba(212,175,55,.6),
        0 0 28px rgba(212,175,55,.4);

}

.playlist::-webkit-scrollbar{
    width:10px;
}

.playlist::-webkit-scrollbar-track{
    background:#f1f1f1;
    border-radius:10px;
}

.playlist::-webkit-scrollbar-thumb{
    background:#0B5D3B;
    border-radius:10px;
}

.playlist::-webkit-scrollbar-thumb:hover{
    background:#D4AF37;
}

.series-info{

    background:#ffffff;

    border-radius:20px;

    padding:35px 45px;

    margin-top:60px;

    width:100%;

    max-width:100%;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.series-info p{

    font-size:1.05rem;

    line-height:1.9;

    color:#444;

    text-align:justify;

    margin:0;

}

.series-card{

    display:flex;

    gap:40px;

    align-items:stretch;

    background:white;

    border-radius:24px;

    padding:30px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.series-image{

    flex:0 0 38%;

}

.series-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:18px;

}

.series-content p{

    font-size:0.8rem;

    line-height:1.8;

    color:#555;

    flex-grow:1;

}

.watch-btn{

    align-self:flex-start;

    margin-top:30px;

}

.series-content p{

    display:-webkit-box;

    -webkit-line-clamp:5;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.series-card img {
    width: 100%;
    height: 280px; /* increase/decrease depending on card size */
    object-fit: cover;
    object-position: center;
    display: block;
}

.series-card {
    overflow: hidden;
    border-radius: 15px;
}

.series-image {
    width: 100%;
    height: 300px;
}

@media(max-width:992px){

    .series-card{

        flex-direction:column;

    }

    .series-image{

        flex:auto;

    }

    .series-content h2{

        font-size:2.2rem;

    }

}

.watch-btn:hover{

    background:#D4AF37;

    color:#111;

}

.watch-btn{

    align-self:flex-start;

    background:linear-gradient(135deg,#0B5D3B,#021b13);

    color:white;

    padding:15px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.series-meta{

    display:flex;

    gap:25px;

    margin:25px 0;

    color:#666;

    font-weight:600;

}

.series-content h2{

    color:#0B5D3B;

    font-size:2rem;

    font-weight:800;

    margin-bottom:10px;

}