:root {
            --purple: #4a2b8c;
        }
/* DARK THEME */


.container-fluid{
    padding: 0 135px 0 135px;
}
.language-switcher{
    display:flex;
    align-items:center;
    background:rgba(255,255,255,0.15);
    border-radius:40px;
    padding:4px;
    gap:4px;
}

.lang-btn{
    text-decoration:none;
    padding:8px 16px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    color:#fff;
    transition:0.3s;
}

.lang-btn:hover{
    background:rgba(255,255,255,0.2);
    color:#fff;
}

.active-lang{
    background:#ffffff;
    color:#4b2e83 !important;
}
.asw-menu-btn{
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 10 !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;

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

    transform: none !important;
}

/* wrapper alignment */

.accessibility-box{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left: 2px;
}


/* =========================
   DARK THEME
========================= */

body.dark-theme {

    background:
        linear-gradient(
            rgba(2,6,23,.88),
            rgba(2,6,23,.88)
        ),
        url("{% static 'images/Website_BG.svg' %}");

    background-position: left;

    background-attachment: fixed;

    color: #fff;
}

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

.top-bar{

    background: linear-gradient(135deg,#4b2e83,#673ab7);

    border-bottom:3px solid #ff9800;

    padding:14px 0;

    box-shadow:0 4px 20px rgba(0,0,0,0.15);
}

/* LOGO */

.top-logo{

    height:72px;

    border:3px solid rgba(255,255,255,0.2);
}

/* =========================================
COUNTDOWN
========================================= */

.countdown-pill{

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

    border:1px solid rgba(255,255,255,0.2);

    border-radius:18px;

    padding:10px 18px;

    backdrop-filter:blur(10px);

    display:inline-block;

    min-width:320px;
}

.launch-title{

    color:#fff;

    font-size:14px;

    font-weight:600;

    margin-bottom:4px;
}

#countdownTimer{

    color:#ffe082;

    font-size:22px;

    font-weight:700;

    letter-spacing:1px;
}

/* =========================================
TRANSLATOR
========================================= */

.translator-box{

    display:flex;

    align-items:center;

    background:#fff;

    padding:6px 10px;

    border-radius:30px;
}


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

@media(max-width:991px){

    .countdown-pill{

        min-width:100%;
    }

    #countdownTimer{

        font-size:18px;
    }

    .top-logo{

        height:60px;
    }

    .top-bar{

        text-align:center;
    }
}

        .btn-login {
            border-radius: 50px;
            padding: 8px 25px;
            font-weight: 600;
            font-size: 0.95rem;
        }

        /* =========================================
HERO SECTION
========================================= */

.hero-wrapper{

    margin-top:25px;
}

/* =========================================
HERO BANNER
========================================= */

.hero-banner{

    border-radius:24px;

    overflow:hidden;

    position:relative;

    box-shadow:
        0 20px 40px rgba(0,0,0,0.25),
        0 8px 15px rgba(0,0,0,0.15);

    transition:0.4s ease;
}

/* HOVER EFFECT */

.hero-banner:hover{

    transform:translateY(-8px) scale(1.01);

    box-shadow:
        0 30px 60px rgba(0,0,0,0.35),
        0 10px 20px rgba(0,0,0,0.2);
}

/* =========================================
GRADIENT BORDER
========================================= */

.hero-banner::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:2px;

    background:linear-gradient(
        45deg,
        #ff7a18,
        #ff3d54,
        #6a11cb
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

    z-index:10;
}

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

.hero-image{

    width:100%;

    height:590px;

    object-fit:cover;

    display:block;
}

/* =========================================
CAROUSEL CONTROLS
========================================= */

.carousel-control-prev-icon,
.carousel-control-next-icon{

    background-color:rgba(0,0,0,0.5);

    border-radius:50%;

    padding:25px;
}

/* =========================================
INDICATORS
========================================= */

.carousel-indicators button{

    width:12px;

    height:12px;

    border-radius:50%;
}

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

@media(max-width:768px){

    .hero-image{

        height:260px;
    }

}
        .main-title {
            font-family: 'Playfair Display', serif;
            font-size: 4.8rem;
            font-weight: 700;
            line-height: 1.05;
        }

        .cartoon {
            animation: float 3.5s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-25px); }
        }
        .benefit-icon{

    width:180px;

    height:180px;

    object-fit:contain;

    display:block;

    margin:0 auto 20px auto;

    transition:0.4s ease;
}

/* HOVER EFFECT */

.benefit-card:hover .benefit-icon{

    transform:scale(1.08);
}

.benefit-card{

    background:#fff;

    border-radius:24px;

    padding:35px 25px;

    height:100%;

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

    transition:0.3s ease;

    border:2px solid #f3e8d8;

    overflow:hidden;
}

.benefit-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

        .section {
            background: #fff5ea;;
            border-radius: 24px;
            padding: 40px;
            margin-bottom: 40px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.12);
        }

  /* =========================
   JOURNEY IMAGE CARD
========================= */

.journey-card{

    position:relative;

    border-radius:24px;

    overflow:hidden;

    cursor:pointer;

    transition:.4s;

    background:#111827;

    min-height:360px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.25);
    border: 3px solid rgb(3 39 121);
}

.journey-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 25px 50px rgba(0,0,0,.35);
}

/* IMAGE */

.journey-card img{

    width:100%;

   

    object-fit:cover;

    transition:.5s;
}

.journey-card:hover img{

    transform:scale(1.05);
}

/* CONTENT */

.journey-content{

    padding:22px 18px;

    color:#fff;

    background:
    linear-gradient(
        180deg,
        #1e293b,
        #0f172a
    );

    min-height:120px;
}

/* DAY BADGE */

.day-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#fff;

    color:#111827;

    padding:7px 16px;

    border-radius:30px;

    font-size:14px;

    font-weight:700;

    z-index:2;

    box-shadow:
    0 10px 20px rgba(0,0,0,.2);
}

/* TITLE */

.journey-content h5{

    font-size:20px;

    font-weight:700;

    margin-bottom:10px;
}

/* TEXT */

.journey-content p{

    font-size:14px;

    line-height:1.7;

    color:#cbd5e1;

    margin-bottom:0;
}

/* OVERLAY */

.journey-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.65),
        transparent 40%
    );

    opacity:0;

    transition:.4s;
}

.journey-card:hover .journey-overlay{

    opacity:1;
}

/* RESPONSIVE */

@media(max-width:768px){

    .journey-card{

        min-height:auto;
    }

    .journey-card img{

        height:670px;
    }

}

        .generate-btn {
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            border: none;
            padding: 14px 45px;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .mandala {
            background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 40px 40px;
        }
        /* VIDEO LINKS - PREMIUM LOOK */
.video-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

/* BUTTON STYLE LINKS */
.video-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 25px;

    background: linear-gradient(45deg, #ff7a18, #ff3d54);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

    transition: all 0.3s ease;
}

/* HOVER EFFECT */
.video-links a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* DIVIDER */
.video-links .divider {
    color: rgba(255,255,255,0.5);
    font-weight: bold;
}
.section button {
    border-radius: 30px;
    font-weight: 600;
    /* background: linear-gradient(45deg, #ff7a18, #ff3d54); */
    border: none;
}

.section button:hover {
    transform: translateY(-2px);
}

/* INTRO SECTION */
.intro-premium {
    text-align: center;
}

/* CARDS */
.intro-card {
    background: rgba(255,255,255,0.9);
    border-radius: 18px;
    padding: 20px;
    transition: 0.3s;
    font-size: 52px;
    font-weight: 500;
    border:solid #FAEBD7
}

/* TEXT INSIDE CARD */
.intro-card h6 {
    margin-top: 10px;
    font-weight: 600;
}

.intro-card p {
    font-size: 18px;
    color: #666;
}

/* HOVER EFFECT */
.intro-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* BUTTON */
.read-more-btn {
    background: linear-gradient(45deg, #ff7a18, #ff3d54);
    border: none;
    color: #fff;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 600;
}

.read-more-btn:hover {
    transform: translateY(-2px);
}

/* MODAL BODY */
.intro-modal-body {
    font-size: 15px;
    line-height: 1.8;
}

/* HIGHLIGHT TEXT */
.highlight {
    color: #ff7a18;
    font-weight: 600;
}

/* MODAL HEADER */
.modal-header {
    background: linear-gradient(45deg, #ff7a18, #ff3d54);
    color: #fff;
    border-bottom: none;
}

/* CLOSE BUTTON WHITE */
.modal-header .btn-close {
    filter: invert(1);
}

/* MODAL BOX */
.modal-content {
    border-radius: 15px;
    overflow: hidden;
}.objective-card {
    background: rgba(255,255,255,0.95);
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    font-size: 28px;
    transition: 0.3s;
    border: solid #FAEBD7;
}

.objective-card h6 {
    margin-top: 10px;
    font-weight: 600;
}

.objective-card p {
    font-size: 14px;
    color: #666;
}

.objective-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* SECTION TITLE */
.journey-section h3 {
    font-size: 32px;
}

/* CARD BASE */


/* LIGHT CARD */
.light-card {
    background: linear-gradient(135deg, #e0eafc, #cfdef3);
    color: #333;
}

/* HIGHLIGHT LAST DAY */
.highlight-card {
    background: linear-gradient(135deg, #ff6a00, #ee0979);
}

/* ICON */
.premium-card .icon {
    font-size: 40px;
    margin-bottom: 10px;
}

/* DAY BADGE */
.day-badge {
    /* position: absolute;
    top: -12px;
    left: 15px;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px; */
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fff;
    color: #333;
    font-size: 17px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
}

/* TEXT */
.premium-card p {
    font-size: 14px;
    opacity: 0.9;
}

/* HOVER EFFECT */
.premium-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* CLICKABLE CURSOR */
.premium-card {
    cursor: pointer;
}

/* ACTIVE CLICK FEEDBACK */
.premium-card:active {
    transform: scale(0.97);
}

/* OUTCOME CARDS */
.outcome-card {
    background: rgba(255,255,255,0.95);
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    font-size: 28px;
    transition: 0.3s;
        border: 3px solid rgb(3 39 121);
}

.outcome-card h6 {
    margin-top: 10px;
    font-weight: 700;
}

.outcome-card p {
    font-size: 18px;
    color: #666;
}

.outcome-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* IMPACT BOX */
.impact-box {
    background: linear-gradient(45deg, #ff7a18, #ff3d54);
    color: #fff;
    border-radius: 20px;
    padding: 25px;
}

/* HIGHLIGHT CARDS */
.highlight-card {
    background: rgba(255,255,255,0.95);
    border-radius: 18px;
    padding: 25px;
    font-size: 32px;
    transition: 0.3s;
        border: 3px solid rgb(3 39 121);
}

.highlight-card h6 {
    margin-top: 10px;
    font-weight: 600;
}

.highlight-card p {
    font-size: 14px;
    color: #666;
}

.highlight-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* .header-logo img {
    height: 180px;        
    width: 160px;
    object-fit: cover;
    border-radius: 30px; 
} */

/* ICON SIZE CONTROL */
.intro-icon {
    font-size: 45px;   /* 🔥 increase size here */
    display: block;
    margin-bottom: 10px;
}

/* For Bootstrap icons */
.intro-icon i {
    font-size: 45px;
}
#google_translate_element {
    color: white;
    font-size: 14px;
}

/* Hide Google branding */
.goog-logo-link {
    display: none !important;
}
.goog-te-gadget span {
    display: none !important;
}
.goog-te-gadget {
    color: white !important;
}
/* HEADER */
.top-bar {
    background: linear-gradient(90deg, #4b2c82, #6a4ca3);
}

/* LOGO */
.header-logo {
    height: 80px;
    border-radius: 12px;
    width: 20%;
}

/* TRANSLATOR BOX */
.translator-box {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    padding: 6px 10px;
    border-radius: 8px;
    color: white;
    font-size: 14px;
}

/* ICON */
.translator-box i {
    font-size: 16px;
}

/* FIX GOOGLE DROPDOWN */
#google_translate_element select {
    border: none !important;
    background: transparent !important;
    color: white !important;
    font-size: 13px;
    outline: none;
}

/* REMOVE GOOGLE BRANDING */
.goog-logo-link {
    display: none !important;
}
.goog-te-gadget span {
    display: none !important;
}
.goog-te-gadget {
    color: white !important;
    font-size: 0; /* removes extra text */
}
/* ================= STATISTICS ================= */

.stats-section {
    margin-top: 40px;
}

.stats-card {

    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);

    border-radius: 18px;

    padding: 22px 15px;

    text-align: center;

    border: 3px solid rgb(3 39 121);

    transition: 0.3s;
}

.stats-card:hover {

    transform: translateY(-6px);

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

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

.stats-card h2 {

    color: #ff5d5d;

    font-weight: 700;

    font-size: 2rem;

    margin-bottom: 8px;
}

.stats-card p {

    color: #ff5d5d;

    margin: 0;

    font-size: 14px;

    font-weight: 500;
}


/* =========================
   DARK MODE
========================= */

body.dark-theme .section {

    background:
    rgba(15,23,42,.92) !important;

    border:
    1px solid rgba(255,255,255,.06);

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

/* TEXT */

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {

    color: #fff !important;
}

body.dark-theme p,
body.dark-theme small,
body.dark-theme .text-muted {

    color: #cbd5e1 !important;
}

/* TOPBAR */

body.dark-theme .top-bar {

    background:
    rgba(15,23,42,.92) !important;

    backdrop-filter: blur(14px);
}

/* TRANSLATOR */

body.dark-theme .bg-light {

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

    color: #fff;
}

/* CARDS */

body.dark-theme .benefit-card,
body.dark-theme .intro-card,
body.dark-theme .objective-card,
body.dark-theme .outcome-card,
body.dark-theme .highlight-card {

    background:
    linear-gradient(
        180deg,
        #1e293b,
        #0f172a
    ) !important;

    border:
    1px solid rgba(255,255,255,.08);

    color: #fff;
}

/* JOURNEY CARDS */

body.dark-theme .journey-card {

    background:
    linear-gradient(
        180deg,
        #111827,
        #020617
    ) !important;
}

/* BUTTONS */

body.dark-theme .btn-light {

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

    color: #fff;

    border:
    1px solid rgba(255,255,255,.08);
}

/* FOOTER */

body.dark-theme footer {

    background:
    rgba(2,6,23,.92);

    color: #cbd5e1;
}

/* =========================================
COUNTDOWN BAR
========================================= */

.launch-bar{

    background: linear-gradient(90deg,#ff6a00,#ee0979);

    color:#fff;

    padding:12px 0;

    position:sticky;

    top:0;

    z-index:9999;

    box-shadow:0 4px 15px rgba(0,0,0,0.25);
}

.launch-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;
}

.launch-text{

    font-size:18px;

    font-weight:700;
}

.countdown-box{

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

    padding:10px 18px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,0.3);

    backdrop-filter:blur(8px);

    font-weight:600;

    text-align:center;
}

#countdownTimer{

    font-size:18px;

    font-weight:700;

    color:#fff176;
}

/* =========================================
GUIDELINE BAR
========================================= */

.guideline-bar{

    background:#111827;

    overflow:hidden;

    border-top:2px solid #0048ff;

    border-bottom:2px solid #0048ff;
}

.marquee-container{

    width:100%;

    overflow:hidden;

    white-space:nowrap;
}

.marquee-content{

    display:inline-block;

    padding-left:100%;

    animation:marqueeMove 28s linear infinite;

    color:#fff;

    font-size:15px;

    font-weight:500;

    padding-top:10px;

    padding-bottom:10px;
}

.marquee-content:hover{

    animation-play-state:paused;
}

/* PDF LINK */

.guideline-link{

    color:#ffd54f;

    font-weight:700;

    text-decoration:none;

    margin-left:20px;

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

    padding:6px 14px;

    border-radius:30px;

    transition:0.3s;
}

.guideline-link:hover{

    background:#fff;

    color:#111827;
}

/* =========================================
ANIMATION
========================================= */

@keyframes marqueeMove{

    0%{

        transform:translateX(0);
    }

    100%{

        transform:translateX(-100%);
    }
}

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

@media(max-width:768px){

    .launch-wrapper{

        justify-content:center;

        text-align:center;
    }

    .launch-text{

        font-size:15px;
    }

    #countdownTimer{

        font-size:15px;
    }

    .marquee-content{

        font-size:13px;
    }
}
    /* =========================================
RESOURCES SECTION
========================================= */

.resources-wrapper{

    background:#fff;

    border-radius:30px;

    padding:40px;

    margin-top:50px;

    box-shadow:0 10px 40px rgba(0,0,0,0.08);

    border:1px solid rgba(0,0,0,0.05);
}

/* TITLE */

.resource-header{

    text-align:center;

    margin-bottom:20px;
}

.resource-header h3{

    color:#1e293b;

    font-size:34px;
}

.resource-header p{

    font-size:15px;
}

/* =========================================
RESOURCE CARD
========================================= */

.resource-card{

    background:linear-gradient(145deg,#ffffff,#f8fafc);

    border-radius:22px;

    padding:30px 20px;

    display:block;

    height:100%;

    transition:0.35s ease;

    border:1px solid #e2e8f0;

    box-shadow:0 4px 15px rgba(0,0,0,0.05);
}

.resource-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,0.12);

    border-color:#7c3aed;
}

/* ICON */

.resource-icon{

    width:75px;

    height:75px;

    margin:auto;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    background:linear-gradient(135deg,#ede9fe,#ddd6fe);

    margin-bottom:20px;
}

/* TITLE */

.resource-card h5{

    color:#111827;

    font-weight:700;

    margin-bottom:10px;
}

/* DESCRIPTION */

.resource-card p{

    color:#64748b;

    font-size:14px;

    min-height:60px;
}

/* BUTTON */

.resource-btn{

    display:inline-block;

    margin-top:10px;

    color:#7c3aed;

    font-weight:700;

    font-size:14px;
}

/* =========================================
DARK MODE SUPPORT
========================================= */

body.dark-mode .resources-wrapper{

    background:#111827;
}

body.dark-mode .resource-card{

    background:#1e293b;

    border-color:#334155;
}

body.dark-mode .resource-card h5{

    color:#fff;
}

body.dark-mode .resource-card p{

    color:#cbd5e1;
}

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

@media(max-width:768px){

    .resources-wrapper{

        padding:25px;
    }

    .resource-header h3{

        font-size:26px;
    }
}
/* =========================================
MEDIA GALLERY
========================================= */

.media-gallery-section{

    padding:40px 10px;
}

/* TITLE */

.gallery-title{

    font-size:52px;

    font-weight:800;

    color:#111827;

    margin-bottom:10px;
}

.gallery-line{

    width:120px;

    height:4px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #ff7b2c,
        #ff4d6d
    );
}



/* =========================================
GALLERY GRID
========================================= */

.gallery-item{

    transition:0.3s;
}

/* CARD */

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    height:320px;

    background:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* IMAGE */

.gallery-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:0.5s;
}

/* VIDEO */

.gallery-card iframe{

    width:100%;

    height:100%;

    border:none;
}

/* HOVER */

.gallery-card:hover img{

    transform:scale(1.06);
}

/* VIDEO BADGE */

/* .video-badge{

    position:absolute;

    bottom:15px;

    left:15px;

    background:rgba(0,0,0,0.7);

    color:#fff;

    padding:8px 14px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;
} */

/* =========================================
LOAD MORE BUTTON
========================================= */

.load-more-btn{

    border:none;

    padding:14px 38px;

    border-radius:40px;

    background:linear-gradient(
        135deg,
        #ff7b2c,
        #ff4d6d
    );

    color:#fff;

    font-weight:700;

    transition:0.3s;
}

.load-more-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(0,0,0,0.15);
}
/* =========================================
TOP FILTER TABS
========================================= */

.gallery-tabs{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:25px;
}

.gallery-tab{

    border:none;

    padding:12px 28px;

    border-radius:40px;

    background:#f3e7d8;

    color:#111827;

    font-weight:700;

    transition:0.3s;
}

.gallery-tab.active{

    background:linear-gradient(
        135deg,
        #ff7b2c,
        #ff4d6d
    );

    color:#fff;
}

.gallery-tab:hover{

    transform:translateY(-2px);
}
/* =========================================
DARK MODE
========================================= */

body.dark-mode .gallery-title{

    color:#fff;
}

body.dark-mode .gallery-tab{

    color:#fff;
}

body.dark-mode .year-btn{

    background:#1e293b;

    color:#fff;
}

body.dark-mode .year-btn.active{

    background:#ff9800;
}

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

@media(max-width:768px){

    .gallery-title{

        font-size:34px;
    }

    .gallery-card{

        height:240px;
    }

    .gallery-tabs{

        gap:15px;
    }

    .year-filter{

        gap:10px;
    }

    .year-btn{

        padding:10px 20px;
    }
}
/* VIDEO BUTTON */

.video-card{

    position:relative;
}

.video-play-btn{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%, -50%);

    width:70px;

    height:70px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    color:#ff0000;

    font-weight:bold;
}

/* LOAD MORE BUTTON */

.load-more-btn{

    border:none;

    background:linear-gradient(
        135deg,
        #ff7b2c,
        #ff4d6d
    );

    color:#fff;

    padding:14px 40px;

    border-radius:40px;

    font-weight:700;

    transition:0.3s;
}

.load-more-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}



/* =========================================
CERTIFICATE SECTION
========================================= */

.certificate-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

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

    transition:0.35s ease;

    height:100%;

    border:2px solid #f3e8d8;
}

.certificate-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,0.15);
}

/* PREVIEW IMAGE */

.certificate-preview{

    width:100%;

    height:220px;

    /* object-fit:cover; */

    border-bottom:1px solid #eee;
}

/* CONTENT */

.certificate-content{

    padding:22px;
}

.certificate-content h5{

    font-weight:700;

    margin-bottom:10px;

    color:#111827;
}

.certificate-content p{

    font-size:14px;

    color:#6b7280;

    min-height:60px;
}

/* GENERATE BUTTON */

.generate-btn{

    border:none;

    padding:16px 42px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #ff7b2c,
        #ff4d6d
    );

    font-weight:700;

    font-size:18px;

    transition:0.3s ease;
}

.generate-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(255,90,90,0.35);
}

    /* TOP BAR */
.top-bar{
    background: linear-gradient(135deg, #4b2e83, #6441a5);
}

/* LOGO */
.top-logo{
    width: 75px;
    height: 75px;
    object-fit: cover;
}

/* TITLE */
.top-title{
    font-size: 2rem;
    line-height: 1.2;
}

.top-subtitle{
    font-size: 1rem;
}

/* COUNTDOWN */
.countdown-pill{
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 14px 24px;
    max-width: 480px;
    width: 100%;
}

.launch-title{
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}

#countdownTimer{
    color: #ffe96a;
    font-size: 2rem;
    font-weight: 800;
}

/* LANGUAGE SWITCH */
.language-switcher{
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.12);
    border-radius: 40px;
    padding: 4px;
    gap: 4px;
}

.lang-btn{
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 30px;
    color: #fff;
    font-weight: 700;
    transition: 0.3s;
    white-space: nowrap;
}

.lang-btn:hover{
    color: #fff;
    background: rgba(255,255,255,0.15);
}

.active-lang{
    background: #fff;
    color: #4b2e83 !important;
}

/* BUTTONS */
.top-btn{
    white-space: nowrap;
}

.theme-btn{
    width: 42px;
    height: 42px;
    padding: 0;
}

/* TABLET */
@media (max-width: 991px){

    .top-title{
        font-size: 1.5rem;
    }

    .top-subtitle{
        font-size: 0.9rem;
    }

    #countdownTimer{
        font-size: 1.6rem;
    }

    .countdown-pill{
        max-width: 420px;
    }
}

/* MOBILE */
@media (max-width: 576px){

    .top-logo{
        width: 55px;
        height: 55px;
    }

    .top-title{
        font-size: 1.15rem;
    }

    .top-subtitle{
        font-size: 0.8rem;
    }

    .launch-title{
        font-size: 0.85rem;
    }

    #countdownTimer{
        font-size: 1.2rem;
    }

    .countdown-pill{
        padding: 10px 15px;
    }

    .lang-btn{
        padding: 6px 14px;
        font-size: 0.85rem;
    }

    .top-btn{
        font-size: 0.8rem;
        padding: 6px 12px !important;
    }

    .theme-btn{
        width: 36px;
        height: 36px;
    }
}