/* ==========================================
   GERALFIN ACADEMY
   GLOBAL STYLES
========================================== */

:root{

    --primary:#072C63;
    --secondary:#D4AF37;
    --green:#1E8E3E;
    --white:#ffffff;
    --light:#F5F8FC;
    --dark:#16213E;
    --grey:#6E6E6E;

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

    --radius:12px;

    /* Semantic CTA colors — used site-wide so every action
       button (view/lessons, edit/suspend, delete, approve)
       reads the same regardless of which page or table it's
       on. --warning and --info alias the brand colors so
       "caution" and "informational" actions stay on-brand
       instead of introducing new one-off hues. */
    --success:#198754;
    --danger:#dc3545;
    --warning:var(--secondary);
    --info:var(--primary);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:var(--light);
color:var(--dark);
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1300px;
margin:auto;

}

/*====================================
HEADER
====================================*/

.header{

position:sticky;

top:0;

left:0;

width:100%;

background:#123C73;

z-index:9999;

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

overflow:visible;

}

.header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:90%;
    max-width:1400px;
    margin:auto;

    height:85px;
}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    flex-shrink:0;

}

.logo img{

    height:70px;      /* Reduced from 65px */
    width:auto;
    display:block;
    transform:translateY(-4px);

}

.logo-text{

    display:flex;

    flex-direction:column;

    line-height:1.1;

}

.logo-title{

    font-size:24px;

    font-weight:700;

    color:#ffffff;

    letter-spacing:1px;

}

.logo-subtitle{

    font-size:15px;

    font-weight:500;

    color:var(--secondary);

}

.desktop-logo{
    display:block;
}

.mobile-logo{
    display:none;
    color:#fff;
    font-size:22px;
    font-weight:700;
}

.navbar{

flex:1;

display:flex;

justify-content:center;

}

.navbar ul{

display:flex;

align-items:center;

gap:28px;

flex-wrap:nowrap;

}

.navbar ul li{

    white-space:nowrap;

}

.navbar > ul > li > a{

    color:#fff;

    font-weight:500;

    text-decoration:none;

    transition:.3s;

}

.navbar ul li a:hover{

    color:var(--secondary);

}

.navbar li{

position:relative;

}

.header-auth{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-shrink:0;
    white-space:nowrap;
}

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

    height:42px;
    padding:0 22px;

    background:var(--secondary);
    color:var(--primary);

    border:none;
    border-radius:8px;

    font-weight:600;
    cursor:pointer;
}

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

    height:42px;
    padding:0 22px;

    background:#fff;
    color:var(--primary);

    border-radius:8px;
    text-decoration:none;
    font-weight:600;
}

.menu-toggle{

display:none;

background:none;

border:none;

font-size:25px;

color:#fff;

cursor:pointer;

}

.mobile-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:320px;
    max-width:90%;

    height:100vh;

    background:#123C73;

    z-index:10000;

    transition:.35s ease;

    padding:30px;

    overflow-y:auto;

}

.mobile-menu.active{

    right:0;

}

.mobile-menu-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.mobile-menu-header h3{

    color:#fff;

}

.mobile-menu-header button{

    background:none;

    border:none;

    color:#fff;

    font-size:28px;

}

.mobile-menu nav{

    display:flex;

    flex-direction:column;

}

.mobile-menu nav a{

    color:#fff;

    text-decoration:none;

    padding:14px 0;

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

}

.mobile-auth{

    margin-top:30px;

    display:flex;

    flex-direction:column;

    gap:15px;

}
/*==========================
DROPDOWN
===========================*/

.dropdown{

    position:relative;

    display:flex;

    align-items:center;

}

.dropdown-menu{

    position:absolute;

    top:100%;

    left:0;

    min-width:230px;

    background:#ffffff;

    border-radius:10px 0;

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

    list-style:none;

    padding:10px 0;

    margin-top:0px;

    display:none;

    z-index:9999;

}


.dropdown-menu li{

    width:100%;

}

.dropdown-menu li a{

    display:block;

    padding:12px 20px;

    color:#123C73 !important;

    font-size:15px;

    text-decoration:none;

    transition:.3s;

}

.dropdown-menu li a:hover{

    background:#F5F8FC;

    color:var(--secondary);

}

.dropdown:hover > .dropdown-menu{

    display:block;

}

/*====================================
REGISTER MODAL
====================================*/

.register-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    z-index:99999;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.register-modal-content{

    width:95%;
    max-width:760px;

    background:#fff;

    border-radius:18px;

    padding:35px;

    position:relative;

}

.register-modal-content h2{

    color:#123C73;

    margin-bottom:8px;

    text-align:center;

}

.register-modal-content p{

    text-align:center;

    color:#666;

    margin-bottom:30px;

}

.close-register-modal{

    position:absolute;

    right:25px;

    top:20px;

    font-size:30px;

    cursor:pointer;

    color:#888;

}
.register-options{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    width:100%;
    margin-top:25px;

}
.register-card{

    width:100%;
    min-width:0;

    background:#F8FAFC;

    border-radius:15px;

    padding:30px 20px;

    text-align:center;

    text-decoration:none;

    transition:.35s;

    border:2px solid transparent;

    overflow:hidden;

}

.register-card:hover{

    border-color:var(--secondary);

    transform:translateY(-8px);

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

}

.register-icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:#123C73;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    margin-bottom:20px;

}

.register-card h3{

    color:#123C73;

    margin-bottom:15px;

}

.register-card p{

    color:#666;

    font-size:15px;

    line-height:1.6;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*====================================
Login MODAL
====================================*/

.login-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    z-index:99999;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.login-modal-content{

    width:95%;
    max-width:760px;

    background:#fff;

    border-radius:18px;

    padding:35px;

    position:relative;

}

.login-modal-content h2{

    color:#123C73;

    margin-bottom:8px;

    text-align:center;

}

.login-modal-content p{

    text-align:center;

    color:#666;

    margin-bottom:30px;

}

.close-login-modal{

    position:absolute;

    right:25px;

    top:20px;

    font-size:30px;

    cursor:pointer;

    color:#888;

}
.login-options{

    display:flex;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    width:100%;
    margin-top:25px;

}
.login-card{

    width:100%;
    min-width:0;

    background:#F8FAFC;

    border-radius:15px;

    padding:30px 20px;

    text-align:center;

    text-decoration:none;

    transition:.35s;

    border:2px solid transparent;

    overflow:hidden;

}

.login-card:hover{

    border-color:var(--secondary);

    transform:translateY(-8px);

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

}

.login-icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:#123C73;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    margin-bottom:20px;

}

.login-card h3{

    color:#123C73;

    margin-bottom:15px;

}

.login-card p{

    color:#666;

    font-size:15px;

    line-height:1.6;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

.hero{

position:relative;

min-height:90vh;

display:flex;

align-items:center;


background:
    linear-gradient(
            90deg,
            rgba(4, 24, 55, 0.98) 0%,
            rgba(4, 24, 55, 0.94) 30%,
            rgba(4, 24, 55, 0.78) 55%,
            rgba(4, 24, 55, 0.38) 78%,
            rgba(4, 24, 55, 0.20) 100%
        ),

url('../assets/images/hero 1.jpg');

background-size:cover;

background-position:center right;

background-repeat: no-repeat;

overflow:hidden;

width:100%;

}

.hero-container{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:60px;

align-items:center;

}

.hero-content{

color:white;

z-index:2;

}

.hero-badge{

display:inline-block;

background:var(--secondary);

color:#071B3A;

padding:10px 18px;

border-radius:50px;

font-weight:600;

margin-bottom:20px;

}

.hero-content h1{

font-size:62px;

line-height:1.15;

margin-bottom:25px;

font-weight:800;

}

.hero-content p{

font-size:20px;

line-height:1.9;

margin-bottom:35px;

max-width:700px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:50px;

}

.btn-primary{

background:var(--secondary);

color:var(--primary);

padding:16px 35px;

border-radius:8px;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

border:2px solid white;

color:white;

padding:16px 35px;

border-radius:8px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn-secondary:hover{

background:white;

color:var(--primary);

}

.hero-stats{

display:flex;

gap:60px;

}

.hero-stats h3{

font-size:38px;

color:var(--secondary);

}

.hero-image img{

width:100%;

max-width:700px;

height:auto;

animation:floatHero 5s ease-in-out infinite;

}

@keyframes floatHero{

0%{transform:translateY(0);}

50%{transform:translateY(-15px);}

100%{transform:translateY(0);}

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

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

/*==========================================
MARKET SNAPSHOT
==========================================*/

.market-section{

padding:120px 0;

background:white;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:42px;

color:var(--primary);

margin-bottom:15px;

}

.section-title p{

color:var(--grey);

font-size:18px;

max-width:700px;

margin:auto;

line-height:1.7;

}

.market-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.market-card{

background:white;

padding:35px;

border-radius:15px;

box-shadow:var(--shadow);

transition:.35s;

cursor:pointer;

}

.market-card:hover{

transform:translateY(-12px);

}

.market-card .icon{

width:70px;

height:70px;

background:var(--primary);

color:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

margin-bottom:25px;

}

.market-card h3{

margin-bottom:15px;

font-size:18px;

color:var(--grey);

}

.market-card h1{

font-size:34px;

margin-bottom:18px;

color:var(--primary);

}

.positive{

background:#dff7e5;

color:green;

padding:8px 18px;

border-radius:30px;

font-weight:600;

}

.negative{

background:#ffe3e3;

color:red;

padding:8px 18px;

border-radius:30px;

font-weight:600;

}
/*==========================================
WHY GERALFIN
==========================================*/

.why-us{

padding:120px 0;

background:#F8FAFD;

}

.why-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.why-card{

background:white;

padding:45px;

border-radius:18px;

box-shadow:var(--shadow);

transition:.4s;

}

.why-card:hover{

transform:translateY(-12px);

}

.why-icon{

width:85px;

height:85px;

background:linear-gradient(135deg,var(--primary),#0C5DB8);

color:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

margin-bottom:30px;

}

.why-card h3{

font-size:24px;

margin-bottom:18px;

color:var(--primary);

}

.why-card p{

line-height:1.8;

font-size:17px;

color:var(--grey);

}

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

.courses{

padding:100px 0;

background:white;

}

.course-grid{

display:grid;

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

gap:28px;

margin-top:50px;

}

.course-card{

background:white;

border-radius:16px;

overflow:hidden;

box-shadow:0 8px 25px rgba(0,0,0,.08);

border-top:5px solid var(--secondary);

transition:.3s;

}

.course-card:hover{

transform:translateY(-8px);

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

}

.course-image{
height:150px;
background:linear-gradient(135deg,var(--primary),#0B5DB8);
display:flex;
justify-content:center;
align-items:center;
font-size:50px;
color:white;
overflow:hidden;        /* NEW — clips anything oversized */
}

.course-image img{
width:100%;
height:100%;
object-fit:cover;       /* NEW — fills the box, crops instead of stretching/overflowing */
display:block;
}

.course-content{

padding:24px;

}

.course-content h3{

font-size:20px;

margin-bottom:12px;

color:var(--primary);

line-height:1.3;

}

.course-content p{

line-height:1.6;

margin-bottom:18px;

color:var(--grey);

font-size:14px;

}

.course-level{

position:absolute;

margin:20px;

padding:10px 18px;

border-radius:30px;

color:white;

font-weight:700;

font-size:14px;

}

.beginner{

background:#27AE60;

}

.intermediate{

background:#F39C12;

}

.Advanced{

background:#8E44AD;

}

.course-info{

display:flex;

justify-content:space-between;

margin-bottom:25px;

font-size:15px;

color:var(--grey);

}

.primary-btn{

display:inline-block;

background:var(--primary);

padding:14px 28px;

border-radius:8px;

font-weight:700;

color:white;

transition:.3s;

}

.primary-btn:hover{

background:var(--secondary);

color: var(--primary);

}

.price-badge { position: absolute; top: 12px; right: 12px; padding: 4px 12px; border-radius: 20px; font-weight: 600; font-size: 13px; }
.price-badge.free { background: #16a34a; color: #fff; }
.price-badge.paid { background: #1e3a8a; color: #fff; }
.view-all-courses { text-align: center; margin-top: 32px; }

/*==========================================
LEARNING ROADMAP
==========================================*/

.roadmap{

padding:120px 0;

background:#F7FAFC;

}

.roadmap-container{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-top:70px;

flex-wrap:wrap;

}

.roadmap-item{

flex:1;

min-width:220px;

background:#fff;

padding:35px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.roadmap-item:hover{

transform:translateY(-10px);

}

.roadmap-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

background:linear-gradient(135deg,var(--primary),#0B5DB8);

display:flex;

justify-content:center;

align-items:center;

color:white;

font-size:36px;

}

.roadmap-item h3{

color:var(--secondary);

margin-bottom:10px;

font-size:20px;

}

.roadmap-item h4{

font-size:24px;

margin-bottom:20px;

color:var(--primary);

}

.roadmap-item p{

line-height:1.9;

color:var(--grey);

}

.roadmap-arrow{

font-size:40px;

color:var(--secondary);

}

/*==========================================
INVESTMENT TOOLS
==========================================*/

.tools{

padding:120px 0;

background:white;

}

.tools-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.tool-card{

background:white;

padding:40px;

border-radius:18px;

box-shadow:var(--shadow);

transition:.35s;

text-align:center;

}

.tool-card:hover{

transform:translateY(-12px);

}

.tool-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:30px;

border-radius:50%;

background:linear-gradient(135deg,var(--secondary),#FFD86B);

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

color:var(--primary);

}

.tool-card h3{

font-size:24px;

margin-bottom:18px;

color:var(--primary);

}

.tool-card p{

color:var(--grey);

line-height:1.8;

margin-bottom:30px;

}

.tool-card a{

display:inline-block;

padding:14px 28px;

background:var(--primary);

color:white;

border-radius:8px;

font-weight:600;

transition:.3s;

}

.tool-card a:hover{

background:var(--secondary);

color:var(--primary);

}

/*==========================================
MARKET INTELLIGENCE
==========================================*/

.market-news{

padding:120px 0;

background:#F7FAFD;

}

.news-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.news-card{

background:white;

padding:35px;

border-radius:18px;

box-shadow:var(--shadow);

transition:.35s;

border-top:6px solid var(--primary);

}

.news-card:hover{

transform:translateY(-10px);

}

.news-tag{

display:inline-block;

background:var(--primary);

color:white;

padding:8px 18px;

border-radius:30px;

font-size:13px;

font-weight:600;

margin-bottom:20px;

}

.news-tag.global{

background:#1E8E3E;

}

.news-tag.economy{

background:var(--secondary);

color:black;

}

.news-card h3{

font-size:24px;

margin-bottom:18px;

color:var(--primary);

}

.news-card p{

line-height:1.8;

color:var(--grey);

margin-bottom:25px;

}

.news-card a{

font-weight:700;

color:var(--primary);

transition:.3s;

}

.news-card a:hover{

color:var(--secondary);

}

/*==========================================
TESTIMONIALS
==========================================*/

.testimonials{

padding:120px 0;

background:white;

}

.testimonial-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.testimonial-card{

background:#fff;

padding:40px;

border-radius:18px;

box-shadow:var(--shadow);

transition:.35s;

border-left:6px solid var(--secondary);

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.stars{

font-size:22px;

color:#FFD700;

margin-bottom:25px;

}

.testimonial-card p{

line-height:1.9;

color:var(--grey);

margin-bottom:30px;

font-style:italic;

}

.student h4{

font-size:20px;

color:var(--primary);

margin-bottom:5px;

}

.student span{

color:var(--grey);

font-size:15px;

}

/*==========================================
CALL TO ACTION
==========================================*/

.cta-section{

padding:100px 20px;

background:linear-gradient(135deg,var(--primary),#0B5DB8);

text-align:center;

color:white;

}

.cta-section h2{

font-size:48px;

margin-bottom:20px;

}

.cta-section p{

max-width:700px;

margin:0 auto 40px;

font-size:20px;

line-height:1.8;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

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

.footer{

background:#071B3A;

color:white;

padding:80px 0 20px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1.5fr;

gap:50px;

}

.footer-logo{

height:70px;

margin-bottom:20px;

}

.footer h3{

margin-bottom:20px;

color:var(--secondary);

}

.footer ul{

list-style:none;

padding:0;

}

.footer li{

margin-bottom:12px;

}

.footer a{

color:#ddd;

text-decoration:none;

transition:.3s;

}

.footer a:hover{

color:white;

}

.footer input{

width:100%;

padding:14px;

margin:15px 0;

border:none;

border-radius:8px;

}

.footer button{

width:100%;

padding:14px;

background:var(--secondary);

border:none;

border-radius:8px;

cursor:pointer;

font-weight:600;

}

.footer hr{

margin:50px 0 20px;

border-color:rgba(255,255,255,.15);

}

.copyright{

text-align:center;

opacity:.8;

}


/*==========================================
ABOUT PAGE
==========================================*/

.page-hero{

padding:180px 0 100px;

background:linear-gradient(rgba(7,44,99,.90),rgba(7,44,99,.90)),
url("../assets/images/hero.jpg");

background-size:cover;

background-position:center;

color:white;

text-align:center;

}

.page-hero h1{

font-size:60px;

margin-bottom:20px;

}

.page-hero p{

font-size:22px;

max-width:800px;

margin:auto;

line-height:1.8;

}

.about-section{

padding:120px 0;

background:white;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.about-grid img{

width:100%;

border-radius:20px;

box-shadow:var(--shadow);

}

.about-grid h2{

font-size:42px;

color:var(--primary);

margin-bottom:25px;

}

.about-grid p{

font-size:18px;

line-height:2;

margin-bottom:20px;

color:var(--grey);

}

.mission{

padding:120px 0;

background:#F5F8FC;

}

.mission-grid{

display:grid;

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

gap:35px;

}

.mission-card{

background:white;

padding:40px;

text-align:center;

border-radius:18px;

box-shadow:var(--shadow);

}

.mission-card i{

font-size:50px;

color:var(--secondary);

margin-bottom:25px;

}

.mission-card h3{

margin-bottom:20px;

color:var(--primary);

}

.mission-card p{

line-height:1.8;

color:var(--grey);

}
/*==========================================
COURSES PAGE
==========================================*/

.course-page{

padding:100px 0;

background:#F5F8FC;

}

.course-search{

display:flex;

gap:15px;

margin-bottom:40px;

}

.course-search input{

flex:1;

padding:18px;

font-size:17px;

border-radius:8px;

border:1px solid #ddd;

}

.course-search button{

background:var(--primary);

color:white;

border:none;

padding:18px 30px;

border-radius:8px;

cursor:pointer;

}

.course-filter{

display:flex;

gap:15px;

margin-bottom:50px;

flex-wrap:wrap;

}

.course-filter button{

padding:12px 24px;

border:none;

border-radius:30px;

background:#E8ECF5;

cursor:pointer;

font-weight:600;

}

.active-filter{

background:var(--secondary)!important;

}

.course-page-grid{

display:grid;

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

gap:35px;

}
/*==================================
MARKET BASICS PAGE
==================================*/

.market-basics{

padding:120px 0;

background:#F5F8FC;

}

.basics-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.basic-card{

background:white;

padding:40px;

border-radius:18px;

box-shadow:var(--shadow);

text-align:center;

transition:.35s;

}

.basic-card:hover{

transform:translateY(-10px);

}

.basic-card i{

font-size:50px;

color:var(--secondary);

margin-bottom:25px;

}

.basic-card h3{

color:var(--primary);

margin-bottom:18px;

}

.basic-card p{

line-height:1.8;

color:var(--grey);

}

.capital-market{

padding:120px 0;

background:white;

}

.capital-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

margin-top:60px;

}

.capital-grid img{

width:100%;

border-radius:18px;

box-shadow:var(--shadow);

}

.capital-grid ul{

line-height:2.2;

font-size:18px;

}

/*==================================
DASHBOARD
==================================*/

.dashboard{

padding:100px 0;

background:#F5F8FC;

}

.dashboard-grid{

display:grid;

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

gap:30px;

}

.dashboard-card{

background:white;

padding:40px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

transition:.3s;

}

.dashboard-card:hover{

transform:translateY(-10px);

}

.dashboard-card i{

font-size:45px;

color:var(--secondary);

margin-bottom:20px;

}

.dashboard-card h2{

font-size:42px;

color:var(--primary);

margin:10px 0;

}

.progress-section{

padding:100px 0;

background:white;

}

.progress-box{

max-width:900px;

margin:auto;

}

.progress-box h4{

margin-top:25px;

margin-bottom:10px;

}

.progress-bar{

height:24px;

background:#ddd;

border-radius:30px;

overflow:hidden;

}

.progress-fill{

height:100%;

background:linear-gradient(90deg,#0B5DB8,var(--secondary));

color:white;

display:flex;

justify-content:center;

align-items:center;

font-size:14px;

font-weight:600;

}

.activity{

padding:100px 0;

background:#F5F8FC;

}

.activity-table{

overflow-x:auto;

}

.activity-table table{

width:100%;

border-collapse:collapse;

background:white;

box-shadow:var(--shadow);

}

.activity-table th,

.activity-table td{

padding:18px;

border-bottom:1px solid #eee;

text-align:left;

}

.activity-table th{

background:var(--primary);

color:white;

}

.complete{

background:#DFF7E5;

color:#1E8E3E;

padding:6px 14px;

border-radius:20px;

font-size:13px;

}

.pending{

background:#FFF4D6;

color:#B7791F;

padding:6px 14px;

border-radius:20px;

font-size:13px;

}

/*=========================================
DOWNLOAD HEADER
=========================================*/

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}
/*==================================
CALCULATORS
==================================*/

.calculator-section{

padding:100px 0;

background:#F5F8FC;

}

.calculator-grid{

display:grid;

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

gap:40px;

}

.calculator-card{

background:white;

padding:40px;

border-radius:18px;

box-shadow:var(--shadow);

}

.calculator-card h2{

margin-bottom:30px;

color:var(--primary);

}

.calculator-card label{

display:block;

margin-top:20px;

margin-bottom:10px;

font-weight:600;

}

.calculator-card input{

width:100%;

padding:15px;

border-radius:8px;

border:1px solid #ccc;

}

.calculator-card button{

margin-top:25px;

padding:15px;

width:100%;

border:none;

background:var(--primary);

color:white;

border-radius:8px;

font-size:17px;

cursor:pointer;

transition:.3s;

}

.calculator-card button:hover{

background:var(--secondary);

color:black;

}

.calculator-card h3{

margin-top:25px;

font-size:28px;

color:var(--secondary);

}

/*==================================
CONTACT PAGE
==================================*/

.contact-page{

padding:100px 0;

background:#F5F8FC;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1.2fr;

gap:50px;

}

.contact-info{

background:white;

padding:40px;

border-radius:18px;

box-shadow:var(--shadow);

}

.info-box{

display:flex;

align-items:flex-start;

gap:20px;

margin-bottom:35px;

}

.info-box i{

font-size:30px;

color:var(--secondary);

width:50px;

}

.contact-form{

background:white;

padding:40px;

border-radius:18px;

box-shadow:var(--shadow);

}

.contact-form input,

.contact-form textarea{

width:100%;

padding:16px;

margin-bottom:20px;

border-radius:8px;

border:1px solid #ddd;

font-size:16px;

}

.contact-form button{

width:100%;

padding:16px;

background:var(--primary);

color:white;

border:none;

border-radius:8px;

cursor:pointer;

font-size:17px;

transition:.3s;

}

.contact-form button:hover{

background:var(--secondary);

color:black;

}

.map-section{

padding:100px 0;

background:white;

}

.map-placeholder{

height:420px;

background:#EEF2F7;

border-radius:20px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

}

.map-placeholder i{

font-size:80px;

color:var(--primary);

margin-bottom:25px;

}

/*==================================
QUIZ PAGE
==================================*/

.quiz-section{

padding:100px 0;

background:#F5F8FC;

}

.quiz-card{

background:white;

padding:50px;

border-radius:18px;

box-shadow:var(--shadow);

max-width:900px;

margin:auto;

}

.quiz-card h2{

margin-bottom:15px;

color:var(--primary);

}

.quiz-card p{

margin-bottom:20px;

font-size:18px;

}

.quiz-card label{

display:block;

padding:15px;

margin-bottom:10px;

background:#F7F8FC;

border-radius:8px;

cursor:pointer;

}

.quiz-card button{

margin-top:30px;

padding:15px 40px;

background:var(--primary);

color:white;

border:none;

border-radius:8px;

cursor:pointer;

font-size:17px;

transition:.3s;

}

.quiz-card button:hover{

background:var(--secondary);

color:black;

}

#scoreResult{

margin-top:30px;

font-size:28px;

}

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

.certificate-page{

padding:60px 20px;

background:#f5f8fc;

display:flex;

justify-content:center;

}


.certificate-logo{

width:100px;

margin-bottom:20px;

}

.certificate-header h1{

font-size:42px;

color:#072C63;

margin-bottom:10px;

}

.certificate-header p{

font-size:24px;

color:#555;

}

.certificate-body{

margin:50px 0;

}

.certificate-body h2{

font-size:42px;

color:#0B7A44;

margin:20px 0;

}

.certificate-body h3{

font-size:28px;

margin:20px 0;

color:#072C63;

}


.certificate-signatures{

display:flex;

justify-content:space-around;

margin-top:60px;

}

.certificate-signatures hr{

width:220px;

border:1px solid #333;

margin-bottom:10px;

}

@media print{

button{

display:none;

}

body{

background:white;

}

.certificate{

box-shadow:none;

margin:0;

}



.certificate-signatures{

flex-direction:column;

gap:30px;

}

.certificate-body h2{

font-size:30px;

}

}

/*=========================================
LOGIN PAGE
=========================================*/

.login-page{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:#F5F8FC;

padding:40px;

}

.login-container{

display:grid;

grid-template-columns:1fr 1fr;

max-width:1300px;      /* was 1100px */

width:95%;              /* was 100% */

min-height:680px;       /* new — taller card overall */

background:white;

border-radius:20px;

overflow:hidden;

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

}

.login-left{

background:linear-gradient(135deg,#072C63,#0B5DB8);

color:white;

padding:90px;           /* was 70px */

display:flex;

flex-direction:column;

justify-content:center;

text-align:center;

}

.login-left img{

width:160px;            /* was 140px */

margin:0 auto 30px;

}

.login-left h1{

font-size:46px;         /* was 42px */

margin-bottom:20px;

}

.login-right{

padding:70px;            /* was 60px */

}

.login-right label{

display:block;

margin-top:40px;         /* was 50px, tightened a touch since card is taller overall */

margin-bottom:8px;

font-weight:600;

font-size:15px;

}

.login-right input{

width:100%;

padding:17px;            /* was 15px */

border:1px solid #ddd;

border-radius:8px;

font-size:16px;

}

.login-options{

display:flex;

justify-content:space-between;

margin:20px 0;

font-size:14px;

}

.login-right button{

width:100%;

padding:18px;            /* was 16px */

background:var(--primary);

color:white;

border:none;

border-radius:8px;

font-size:18px;          /* was 17px */

cursor:pointer;

transition:.3s;

}

.login-right button:hover{

background:var(--secondary);

color:black;

}

.register-link{

margin-top:25px;

text-align:center;

}

/*=========================================
ADMIN DASHBOARD
=========================================*/

.admin-dashboard{

padding:100px 0;

background:#F5F8FC;

}

.admin-grid{

display:grid;

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

gap:30px;

}

.admin-card{

background:white;

padding:40px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

transition:.3s;

}

.admin-card:hover{

transform:translateY(-8px);

}

.admin-card i{

font-size:45px;

color:var(--secondary);

margin-bottom:20px;

}

.admin-card h2{

font-size:40px;

color:var(--primary);

margin:15px 0;

}

.management{

padding:100px 0;

background:white;

}

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}
.admin-grid{

    display:grid;

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

    gap:30px;

    margin-bottom:35px;

}


/*==================================
INSTRUCTOR PAGE
==================================*/

.instructor-dashboard{

padding:100px 0;

background:#F5F8FC;

}

.upload-section{

padding:100px 0;

background:white;

}

.upload-card{

max-width:850px;

margin:auto;

background:white;

padding:45px;

border-radius:18px;

box-shadow:var(--shadow);

}

.upload-card h2{

margin-bottom:30px;

color:var(--primary);

}

.upload-card input,

.upload-card textarea,

.upload-card select{

width:100%;

padding:16px;

margin-bottom:20px;

border:1px solid #ddd;

border-radius:8px;

font-size:16px;

}

.upload-card button{

padding:16px 40px;

background:var(--primary);

color:white;

border:none;

border-radius:8px;

cursor:pointer;

font-size:17px;

transition:.3s;

}

.upload-card button:hover{

background:var(--secondary);

color:black;

}

.small-btn{

padding:8px 16px;

background:var(--primary);

color:white;

border:none;

border-radius:6px;

cursor:pointer;

font-size:14px;

}

.small-btn:hover{

background:var(--secondary);

color:black;

}

/*==================================
DOWNLOADS
==================================*/

.downloads-page{

padding:100px 0;

background:#F5F8FC;

}

.download-search{

margin-bottom:40px;

}

.download-search input{

width:100%;

padding:18px;

font-size:17px;

border-radius:8px;

border:1px solid #ddd;

}

.download-grid{

display:grid;

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

gap:30px;

}

.download-card{

background:white;

padding:40px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

transition:.3s;

}

.download-card:hover{

transform:translateY(-8px);

}

.download-card i{

font-size:55px;

color:var(--secondary);

margin-bottom:20px;

}

.download-card h3{

margin-bottom:15px;

color:var(--primary);

}

.download-card p{

line-height:1.8;

margin-bottom:25px;

color:var(--grey);

}

.download-card a{

display:inline-block;

padding:12px 28px;

background:var(--primary);

color:white;

border-radius:8px;

transition:.3s;

}

.download-card a:hover{

background:var(--secondary);

color:black;

}

/*==================================
FAQ PAGE
==================================*/

.faq-section{

padding:100px 0;

background:#F5F8FC;

}

#faqSearch{

width:100%;

padding:18px;

font-size:17px;

border:1px solid #ddd;

border-radius:8px;

margin-bottom:40px;

}

.faq-item{

background:white;

border-radius:12px;

margin-bottom:20px;

box-shadow:var(--shadow);

overflow:hidden;

}

.faq-question{

width:100%;

padding:22px;

background:white;

border:none;

display:flex;

justify-content:space-between;

align-items:center;

font-size:18px;

font-weight:600;

cursor:pointer;

text-align:left;

}

.faq-answer{

display:none;

padding:0 22px 22px;

line-height:1.8;

color:var(--grey);

}

.faq-answer.show{

display:block;

}

/*==================================
GLOSSARY
==================================*/

.glossary-page{

padding:100px 0;

background:#F5F8FC;

}

#glossarySearch{

width:100%;

padding:18px;

border-radius:8px;

border:1px solid #ddd;

font-size:17px;

margin-bottom:45px;

}

.glossary-grid{

display:grid;

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

gap:30px;

}

.glossary-card{

background:white;

padding:35px;

border-radius:18px;

box-shadow:var(--shadow);

transition:.3s;

}

.glossary-card:hover{

transform:translateY(-8px);

}

.glossary-card h3{

color:var(--primary);

margin-bottom:18px;

font-size:24px;

}

.glossary-card p{

line-height:1.8;

color:var(--grey);

}

/*==================================
HOW TO INVEST
==================================*/

.investment-guide{

padding:100px 0;

background:#F5F8FC;

}

.guide-grid{

display:grid;

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

gap:40px;

margin-bottom:70px;

}

.guide-card{

background:white;

padding:40px;

border-radius:18px;

box-shadow:var(--shadow);

}

.guide-card i{

font-size:50px;

color:var(--secondary);

margin-bottom:20px;

}

.guide-card h2{

margin-bottom:20px;

color:var(--primary);

}

.guide-card ol{

padding-left:20px;

line-height:2;

}

.investment-checklist{

background:white;

padding:40px;

border-radius:18px;

box-shadow:var(--shadow);

}

.checklist p{

font-size:18px;

margin-bottom:18px;

}

.checklist i{

color:green;

margin-right:10px;

}

.cta-banner{

padding:80px 20px;

background:linear-gradient(135deg,#072C63,#0B5DB8);

color:white;

text-align:center;

}

.cta-banner h2{

font-size:38px;

margin-bottom:20px;

}

.cta-banner p{

font-size:18px;

max-width:700px;

margin:0 auto 30px;

}

.cta-banner .course-btn{

background:var(--secondary);

color:var(--primary);

padding:15px 35px;

border-radius:8px;

font-weight:600;

text-decoration:none;

display:inline-block;

transition:.3s;

}

.cta-banner .course-btn:hover{

background:white;

}

/*==================================
RISK MANAGEMENT
==================================*/

.risk-section{

padding:100px 0;

background:#F5F8FC;

}

.risk-grid{

display:grid;

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

gap:30px;

}

.risk-card{

background:white;

padding:35px;

text-align:center;

border-radius:18px;

box-shadow:var(--shadow);

transition:.3s;

}

.risk-card:hover{

transform:translateY(-8px);

}

.risk-card i{

font-size:50px;

color:var(--secondary);

margin-bottom:20px;

}

.risk-quiz{

padding:100px 0;

background:white;

}

.risk-form{

max-width:700px;

margin:auto;

background:#F5F8FC;

padding:40px;

border-radius:18px;

box-shadow:var(--shadow);

}

.risk-form label{

display:block;

margin:20px 0 10px;

font-weight:600;

}

.risk-form select{

width:100%;

padding:15px;

border:1px solid #ddd;

border-radius:8px;

}

.risk-form button{

margin-top:30px;

width:100%;

padding:16px;

background:var(--primary);

color:white;

border:none;

border-radius:8px;

font-size:17px;

cursor:pointer;

transition:.3s;

}

.risk-form button:hover{

background:var(--secondary);

color:black;

}

#riskResult{

margin-top:30px;

text-align:center;

font-size:30px;

font-weight:700;

}

/*==================================
WEALTH BUILDING
==================================*/

.wealth-roadmap{

padding:100px 0;

background:#F5F8FC;

}

.wealth-grid{

display:grid;

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

gap:30px;

}

.wealth-card{

background:white;

padding:35px;

text-align:center;

border-radius:18px;

box-shadow:var(--shadow);

transition:.3s;

}

.wealth-card:hover{

transform:translateY(-8px);

}

.wealth-card i{

font-size:50px;

color:var(--secondary);

margin-bottom:20px;

}

.networth-section{

padding:100px 0;

background:white;

}

.wealth-calculator{

max-width:700px;

margin:auto;

background:#F5F8FC;

padding:45px;

border-radius:18px;

box-shadow:var(--shadow);

}

.wealth-calculator input{

width:100%;

padding:16px;

margin-bottom:20px;

border-radius:8px;

border:1px solid #ddd;

}

.wealth-calculator button{

width:100%;

padding:16px;

background:var(--primary);

color:white;

border:none;

border-radius:8px;

cursor:pointer;

font-size:17px;

}

.wealth-calculator button:hover{

background:var(--secondary);

color:black;

}

#networthResult{

margin-top:30px;

text-align:center;

font-size:34px;

color:green;

}

/*==================================
MARKET TICKER
==================================*/

.market-ticker{

background:#072C63;

color:white;

overflow:hidden;

padding:15px 0;

}

.ticker{

display:flex;

gap:50px;

white-space:nowrap;

animation:tickerMove 25s linear infinite;

}

@keyframes tickerMove{

0%{transform:translateX(100%);}
100%{transform:translateX(-100%);}

}

/*==================================
STATISTICS
==================================*/

.stats-section{

padding:80px 0;

background:white;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-card{

background:#F5F8FC;

padding:35px;

text-align:center;

border-radius:18px;

}

.stat-card h2{

font-size:42px;

color:#072C63;

}



/*==================================
TESTIMONIALS
==================================*/

.testimonials{

padding:100px 0;

background:white;

}

.testimonial-grid{

display:grid;

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

gap:30px;

}

.testimonial-card{

background:#F5F8FC;

padding:35px;

border-radius:18px;

}

/*==================================
NEWS
==================================*/

.news-section{

padding:100px 0;

background:#F5F8FC;

}

.news-grid{

display:grid;

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

gap:30px;

}

.news-card{

background:white;

padding:35px;

border-radius:18px;

box-shadow:var(--shadow);

}


/*==================================
REGISTER PAGE
==================================*/

.register-page{

padding:80px 0;

background:#F5F8FC;

min-height:100vh;

}

.register-wrapper{

display:grid;

grid-template-columns:1fr 1.2fr;

background:#fff;

border-radius:20px;

overflow:hidden;

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

}

.register-left{

background:linear-gradient(135deg,#072C63,#0B5DB8);

color:#fff;

padding:60px;

display:flex;

flex-direction:column;

justify-content:center;

}

.register-left h1{

font-size:42px;

margin-bottom:20px;

}

.register-left p{

line-height:1.8;

margin-bottom:30px;

}

.register-left ul{

list-style:none;

padding:0;

}

.register-left li{

margin-bottom:15px;

font-size:17px;

}

.register-left i{

color:var(--secondary);

margin-right:10px;

}

.register-right{

padding:50px;

}

.register-right h2{

margin-bottom:30px;

color:var(--primary);

}

.form-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.register-right label{

display:block;

margin-top:18px;

margin-bottom:8px;

font-weight:600;

}

.register-right input,

.register-right select{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:8px;

font-size:15px;

}

.photo-upload{

margin-bottom:20px;

}

#strength,

#passwordMatch,

#successMessage{

margin-top:10px;

font-weight:600;

}

.register-right button{

width:100%;

padding:16px;

margin-top:25px;

background:var(--primary);

color:#fff;

border:none;

border-radius:8px;

font-size:17px;

cursor:pointer;

transition:.3s;

}

.register-right button:hover{

background:var(--secondary);

color:#000;

}

.login-link{

margin-top:20px;

text-align:center;

}

@media(max-width:991px){

.register-wrapper{

grid-template-columns:1fr;

}

.register-left{

text-align:center;

}

.form-grid{

grid-template-columns:1fr;

}

}

/*==================================
STUDENT DASHBOARD V2
==================================*/

.dashboard-header h1{

color:#071B3A;

margin-bottom:10px;

}

.dashboard-stats{

display:grid;

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

gap:25px;

margin:40px 0;

}

.stat-card{

background:white;

padding:30px;

border-radius:15px;

text-align:center;

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

}

.stat-card h2{

font-size:40px;

color:#072C63;

}

.dashboard-section{

background:white;

padding:30px;

margin-bottom:30px;

border-radius:15px;

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

}

.course-item{

margin:25px 0;

}

.progress{

height:12px;

background:#ddd;

border-radius:50px;

overflow:hidden;

margin:12px 0;

}

.progress-fill{

height:100%;

background:var(--secondary);

}

.dashboard-table{

width:100%;

border-collapse:collapse;

}

.dashboard-table th,

.dashboard-table td{

padding:16px;

border-bottom:1px solid #eee;

text-align:left;

}

.badge{

padding:6px 12px;

border-radius:20px;

font-size:13px;

font-weight:600;

}

.pending{

background:#FFE9A8;

color:#8A6A00;

}

.upcoming{

background:#D6F5E3;

color:#0B7A44;

}


/*==================================
COURSE DETAILS
==================================*/

.course-banner{

padding:100px 0;

background:#071B3A;

color:white;

}

.course-banner-grid{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:60px;

align-items:center;

}

.course-tag{

display:inline-block;

background:var(--secondary);

color:#071B3A;

padding:8px 18px;

border-radius:50px;

font-weight:600;

margin-bottom:20px;

}

.course-banner h1{

font-size:48px;

margin-bottom:20px;

}

.course-meta{

display:flex;

flex-wrap:wrap;

gap:20px;

margin:30px 0;

}

/* course-details.php banner — renamed to avoid collision */
.course-banner-image{
width:100%;
border-radius:20px;
}

.course-content,

.curriculum,

.instructor-section,

.reviews{

padding:80px 0;

}

.course-details-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:40px;

}

.learning-list{

list-style:none;

padding:0;

}

.learning-list li{

margin-bottom:15px;

font-size:18px;

}

.info-card{

background:#F5F8FC;

padding:30px;

border-radius:15px;

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

}

.lesson{

display:flex;

justify-content:space-between;

padding:20px;

margin-bottom:15px;

background:white;

border-radius:12px;

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

}

.instructor-card{

display:flex;

gap:30px;

align-items:center;

background:#F5F8FC;

padding:30px;

border-radius:18px;

}

.instructor-card img{

width:180px;

height:180px;

border-radius:50%;

object-fit:cover;

}

.review-card{

background:white;

padding:25px;

margin-bottom:20px;

border-radius:15px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

@media(max-width:991px){

.course-banner-grid,

.course-grid,

.instructor-card{

grid-template-columns:1fr;

display:block;

}

.course-banner h1{

font-size:36px;

}

.instructor-card img{

margin-bottom:20px;

}

}

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

.courses-hero{

padding:120px 0;

background:linear-gradient(rgba(7,27,58,.9),rgba(7,27,58,.9)),
url("../assets/images/courses-bg.jpg");

background-size:cover;

color:white;

text-align:center;

}

.courses-hero h1{

font-size:55px;

margin-bottom:20px;

}

.course-filter{

padding:40px 0;

background:#F5F8FC;

}

.course-filter .container{

display:flex;

gap:20px;

}

.course-filter input,

.course-filter select{

flex:1;

padding:16px;

border-radius:8px;

border:1px solid #ddd;

font-size:16px;

}

.course-catalog{

padding:80px 0;

background:#fff;

}

.catalog-grid{

display:grid;

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

gap:35px;

}

.catalog-card{

background:white;

border-radius:18px;

overflow:hidden;

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

transition:.3s;

}

.catalog-card:hover{

transform:translateY(-10px);

}

.catalog-card img{

width:100%;

height:230px;

object-fit:cover;

}

.catalog-content{

padding:25px;

}

.badge{

padding:8px 18px;

border-radius:50px;

font-size:13px;

font-weight:600;

display:inline-block;

margin-bottom:15px;

}

.beginner{

background:#D6F5E3;

color:#0B7A44;

}

.intermediate{

background:#FFF0C7;

color:#B47B00;

}

.professional{

background:#E5E7FF;

color:#1F3EA3;

}

.course-info{

display:flex;

justify-content:space-between;

margin:20px 0;

}

.course-buttons{

display:flex;

gap:15px;

}

.course-buttons a{

flex:1;

padding:12px;

text-align:center;

text-decoration:none;

border-radius:8px;

font-weight:600;

}

.course-buttons a:first-child{

background:var(--primary);

color:white;

}

.course-buttons a:last-child{

background:var(--secondary);

color:var(--primary);

}

@media(max-width:768px){

.course-filter .container{

flex-direction:column;

}

.courses-hero h1{

font-size:38px;

}

}

/*==================================
ADMIN DASHBOARD V2
==================================*/



.admin-content{

padding:40px;

}

.admin-stats{

display:grid;

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

gap:25px;

margin:40px 0;

}

.admin-card{

background:white;

padding:30px;

border-radius:18px;

text-align:center;

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

}

.admin-card h2{

font-size:40px;

color:#072C63;

}

.admin-section{

background:white;

padding:30px;

margin-bottom:30px;

border-radius:18px;

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

}

.admin-table{

width:100%;

border-collapse:collapse;

}

.admin-table th,

.admin-table td{

padding:18px;

border-bottom:1px solid #eee;

text-align:left;

}

.status{

padding:6px 14px;

border-radius:20px;

font-size:13px;

font-weight:600;

}

.status.active{

background:#D6F5E3;

color:#0B7A44;

}

.status.pending{

background:#FFF0C7;

color:#B47B00;

}

.quick-actions{

display:grid;

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

gap:20px;

margin-top:20px;

}

.quick-btn{

background:var(--primary);

color:white;

padding:18px;

text-align:center;

border-radius:12px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.quick-btn:hover{

background:var(--secondary);

color:var(--primary);

}

.activity-list{

line-height:2.3;

padding-left:20px;

}



/*==================================
INSTRUCTOR DASHBOARD
==================================*/

.intructor-content{

    margin-left:260px;

    width:calc(100% - 260px);

    padding:30px;

    overflow-x:hidden;

}

.instructor-stats{

display:grid;

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

gap:25px;

margin:40px 0;

}

.instructor-card{

background:white;

padding:30px;

text-align:center;

border-radius:15px;

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

}

.instructor-card h2{

font-size:42px;

color:#072C63;

}

.instructor-section{

background:white;

padding:30px;

border-radius:15px;

margin-bottom:30px;

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

overflow:visible;

}


.instructor-table{

width:100%;

border-collapse:collapse;

}

.instructor-table th,

.instructor-table td{

padding:18px;

border-bottom:1px solid #eee;

text-align:left;

}

.action-btn{

background:var(--primary);

color:white;

border:none;

padding:10px 18px;

border-radius:8px;

cursor:pointer;

}

.action-btn:hover{

background:var(--secondary);

color:#000;

}

.schedule-card{

background:#F5F8FC;

padding:25px;

border-radius:10px;

line-height:2;

}

@media(max-width:991px){

.instructor-layout{

grid-template-columns:1fr;

}

}


/*====================================
TABLE RESPONSIVE
====================================*/

.table-responsive{

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

    margin-top:20px;

    border-radius:12px;

}

/* Scrollbar */

.table-responsive::-webkit-scrollbar{

    height:10px;

}

.table-responsive::-webkit-scrollbar-track{

    background:#E9EEF5;

    border-radius:20px;

}

.table-responsive::-webkit-scrollbar-thumb{

    background:#0B3C74;

    border-radius:20px;

}

.table-responsive::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}

/* Firefox */

.table-responsive{

    scrollbar-width:thin;

    scrollbar-color:#0B3C74 #E9EEF5;

}

.table-responsive .admin-table{

    min-width:1400px;

}

.table-responsive .course-table,
.table-responsive .student-table{

    min-width:900px;

}

/*=========================================
TABLE ACTIONS
=========================================*/

.table-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    margin:30px 0;

    flex-wrap:wrap; 

}

.table-actions input{

    flex:1;

    min-width:280px;

    padding:12px 18px;

    border:1px solid #dbe3ec;

    border-radius:10px;

    font-size:15px;

    outline:none;

    transition:.3s;

}

.table-actions input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(13,33,69,.08);

}

.table-actions select{

    width:230px;

    padding:12px 18px;

    border:1px solid #dbe3ec;

    border-radius:10px;

    background:#fff;

    font-size:15px;

    cursor:pointer;

    outline:none;

    transition:.3s;

}

.table-actions select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(13,33,69,.08);

}


/*====================================
LIVE MARKET OVERVIEW
====================================*/

.market-overview{

padding:100px 0;

background:#f7f9fc;

}

.section-heading{

text-align:center;

margin-bottom:60px;

}

.section-tag{

display:inline-block;

padding:10px 18px;

background:var(--secondary);

color:#071B3A;

border-radius:50px;

font-weight:600;

margin-bottom:20px;

}

.section-heading h2{

font-size:44px;

color:#071B3A;

margin-bottom:15px;

}

.market-grid{

display:grid;

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

gap:25px;

}

.market-card{

background:white;

padding:30px;

border-radius:18px;

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

transition:.35s;

}

.market-card:hover{

transform:translateY(-8px);

}

.market-card h3{

color:#777;

margin-bottom:10px;

}

.market-card h2{

font-size:34px;

color:#071B3A;

margin-bottom:15px;

}

.positive{

color:#1b8f3d;

font-weight:700;

}

.negative{

color:#d32f2f;

font-weight:700;

}

.neutral{

color:#0B5DB8;

font-weight:700;

}

.calculator-note{

margin-top:15px;

font-size:14px;

line-height:1.6;

color:#666;

text-align:center;

}

.calculator-card select{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:8px;

margin-bottom:15px;

font-size:15px;

background:#fff;

}

/*==================================
POSITION SIZE CALCULATOR
==================================*/

.calculator-results{

margin-top:25px;

padding:20px;

background:#F8FAFC;

border-radius:10px;

border:1px solid #E2E8F0;

}

.calculator-results p{

margin-top:15px;

font-weight:600;

color:#555;

}

.calculator-results h3{

margin-top:5px;

margin-bottom:15px;

font-size:24px;

color:#0B7A44;

}

.calculator-dashboard{

padding:90px 0;

background:#071B3A;

color:white;

text-align:center;

}

.dashboard-stats{

display:grid;

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

gap:25px;

margin-top:60px;

}

.stat-box{

background:white;

color:#071B3A;

padding:35px;

border-radius:15px;

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

}

.stat-box h2{

font-size:40px;

margin-bottom:10px;

}

.growth-chart{

padding:80px 0;

background:white;

}

.growth-chart canvas{

margin-top:40px;

max-height:450px;

}

/*==================================
VIDEO LESSON PAGE
==================================*/

.lesson-layout{

display:grid;

grid-template-columns:320px 1fr;

min-height:100vh;

background:#F5F8FC;

}

.lesson-sidebar{

background:#071B3A;

color:white;

padding:30px;

}

.lesson-sidebar h2{

margin-bottom:30px;

}

.lesson-sidebar ul{

list-style:none;

padding:0;

}

.lesson-sidebar li{

padding:16px;

border-radius:10px;

margin-bottom:12px;

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

}

.lesson-sidebar li.active{

background:var(--secondary);

color:#071B3A;

font-weight:600;

}

.lesson-sidebar li.completed{

background:#0B7A44;

}

.lesson-content{

padding:40px;

}

.video-wrapper{

position:relative;

padding-bottom:56.25%;

height:0;

overflow:hidden;

border-radius:15px;

margin-bottom:30px;

}

.video-wrapper iframe{

position:absolute;

width:100%;

height:100%;

border:none;

}

.lesson-actions{

display:flex;

gap:20px;

margin:30px 0;

}

.lesson-actions button{

padding:15px 25px;

background:#072C63;

color:white;

border:none;

border-radius:8px;

cursor:pointer;

}

.lesson-notes{

background:white;

padding:35px;

margin:40px 0;

border-radius:15px;

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

}

.discussion{

background:white;

padding:35px;

border-radius:15px;

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

margin-bottom:40px;

}

.discussion textarea{

width:100%;

height:180px;

padding:15px;

margin:20px 0;

border-radius:10px;

}

.lesson-navigation{

display:flex;

justify-content:space-between;

margin-top:50px;

}

.lesson-navigation a{

background:#072C63;

color:white;

padding:15px 30px;

border-radius:8px;

text-decoration:none;

}

@media(max-width:900px){

.lesson-layout{

grid-template-columns:1fr;

}

.lesson-sidebar{

order:2;

}

}

/*====================================
EXAM SYSTEM
====================================*/

.exam-container{

max-width:900px;

margin:60px auto;

background:white;

padding:40px;

border-radius:15px;

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

}

.exam-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

#timer{

background:var(--secondary);

padding:12px 20px;

border-radius:8px;

font-size:22px;

font-weight:700;

}

.exam-progress{

height:10px;

background:#ddd;

border-radius:20px;

overflow:hidden;

margin-bottom:30px;

}

#examProgress{

height:100%;

width:0;

background:#072C63;

transition:width .5s;

}

.question{

margin-bottom:35px;

}

.question h3{

margin-bottom:15px;

color:#071B3A;

}

.question label{

display:block;

margin:12px 0;

cursor:pointer;

}

.exam-container button{

padding:15px 35px;

background:#072C63;

color:white;

border:none;

border-radius:8px;

font-size:16px;

cursor:pointer;

}

.exam-container button:hover{

background:var(--secondary);

color:#071B3A;

}

#examResult{

margin-top:40px;

padding:25px;

background:#F8FAFC;

border-left:6px solid #0B7A44;

border-radius:10px;

font-size:18px;

}

/*=========================
ADMIN ANALYTICS
==========================*/

.admin-analytics{

display:grid;

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

gap:25px;

margin:40px 0;

}

.analytics-card{

background:#fff;

padding:30px;

border-radius:15px;

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

text-align:center;

transition:.3s;

}

.analytics-card:hover{

transform:translateY(-5px);

}

.analytics-card h4{

color:#777;

margin-bottom:10px;

}

.analytics-card h2{

color:#072C63;

font-size:34px;

}

/*==================================
COURSE MANAGEMENT
==================================*/

.course-management{

margin-top:50px;

background:#fff;

padding:30px;

border-radius:15px;

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

}

.section-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

flex-wrap:wrap;

gap:15px;

}

.course-table{

width:100%;

border-collapse:collapse;

}

.course-table th,
.course-table td{

padding:15px;

border-bottom:1px solid #eee;

text-align:left;

}

.status.active{

background:#0B7A44;

color:white;

padding:6px 12px;

border-radius:20px;

font-size:13px;

}

.edit-btn,
.delete-btn{

padding:8px 15px;

border:none;

border-radius:6px;

cursor:pointer;

margin-right:8px;

}

.edit-btn{

background:var(--warning);

color:var(--primary);

}

.delete-btn{

background:var(--danger);

color:white;

}

.modal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.5);

justify-content:center;

align-items:center;

z-index:999999;
}


.modal-content{

background:#fff;

padding:30px;

width:90%;

max-width:500px;

border-radius:12px;

position:relative;

z-index:1000000;

}

.modal-content input{

width:100%;

padding:12px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:8px;

}

.close-modal{

position:absolute;

right:20px;

top:15px;

font-size:28px;

cursor:pointer;

}

/*==================================
COURSE IMAGE PREVIEW
==================================*/

#imagePreview{

width:100%;

max-height:220px;

object-fit:cover;

margin-top:15px;

border-radius:10px;

border:1px solid #ddd;

display:none;

}

/*==================================
ADVANCED COURSE FORM
==================================*/

.modal-content{

max-height:90vh;

overflow-y:auto;

}

.modal-content label{

display:block;

margin:18px 0 8px;

font-weight:600;

color:#072C63;

}

.modal-content input,
.modal-content select,
.modal-content textarea{

width:100%;

padding:12px;

border:1px solid #ddd;

border-radius:8px;

font-size:15px;

}

.modal-content textarea{

resize:vertical;

min-height:120px;

}

#imagePreview{

width:100%;

margin-top:15px;

border-radius:10px;

display:none;

max-height:220px;

object-fit:cover;

}

/*==================================
STUDENT MANAGEMENT
==================================*/

.student-management{

margin-top:50px;

background:#fff;

padding:30px;

border-radius:15px;

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

}

.student-table{

width:100%;

border-collapse:collapse;

margin-top:20px;

}

.student-table th,
.student-table td{

padding:15px;

border-bottom:1px solid #eee;

text-align:left;

}

.student-table th{

background:#f8f9fb;

}

.view-btn,
.approve-btn,
.suspend-btn{

padding:8px 14px;

border:none;

border-radius:6px;

cursor:pointer;

margin-right:6px;

font-size:14px;

}

.view-btn{

background:var(--info);

color:#fff;

}

.approve-btn{

background:var(--success);

color:#fff;

}

.suspend-btn{

background:var(--warning);

color:var(--primary);

}

.student-profile{

padding:40px 0;

}

.profile-card{

display:flex;

align-items:center;

gap:30px;

background:#fff;

padding:30px;

border-radius:15px;

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

}

.profile-photo img{

    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:20%;
    border:5px solid #fff;
    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.profile-details h2{

margin-bottom:10px;

color:#0B3D91;

}

.profile-details p{

margin:10px 0;

font-size:16px;

}

.profile-details i{

color:var(--secondary);

margin-right:10px;

}

.success-message{

    background:#d4edda;

    color:#155724;

    padding:15px;

    border-radius:8px;

    margin:20px 0;

    border:1px solid #c3e6cb;

    font-weight:600;

}
.course-buttons{

    display:flex;
    gap:12px;
    margin-top:20px;

}

.course-buttons a,
.course-buttons form{

    flex:1;

}

.enroll-form{

    margin:0;

}

.view-btn,
.enroll-btn{

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

    width:100%;

    padding:12px;

    border-radius:8px;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

    box-sizing:border-box;

}

.view-btn{

    background:#fff;

    color:var(--primary);

    border:2px solid var(--primary);

}

.view-btn:hover{

    background:var(--primary);

    color:#fff;

}

.enroll-btn{

    background:var(--secondary);

    color:var(--primary);

    border:2px solid var(--secondary);

    cursor:pointer;

}

.enroll-btn:hover{

    background:var(--secondary);

}

.success-message{

    background:#d4edda;
    color:#155724;
    padding:15px;
    margin-bottom:20px;
    border-radius:8px;
    font-weight:600;

}

.warning-message{

    background:#fff3cd;
    color:#856404;
    padding:15px;
    margin-bottom:20px;
    border-radius:8px;
    font-weight:600;

}

.my-course-card{

    display:flex;
    gap:20px;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.my-course-card img{

    width:250px;
    height:180px;
    object-fit:cover;

}

.course-content{

    flex:1;
    padding:20px;

}

.progress-bar{

    width:100%;
    height:10px;
    background:#ddd;
    border-radius:20px;
    margin:18px 0;

}

.progress-fill{

    height:100%;
    width:0%;
    background:#0B7A44;
    border-radius:20px;

}

.continue-btn{

    display:inline-block;
    background:var(--primary);
    color:#fff;
    padding:12px 25px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;

}

.continue-btn:hover{

    background:#0B7A44;

}

/*==================================
PROFILE PAGE
==================================*/

.page-title{

    font-size:34px;
    color:#072C63;
    font-weight:700;
    margin-bottom:30px;

}

.profile-card{

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

    background:#fff;

    padding:40px;

    border-radius:20px;

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

    margin-bottom:40px;

}

.profile-left{

    width:230px;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.profile-image{

    width:180px;

    height:180px;

    object-fit:cover;

    border-radius:50%;

    border:5px solid var(--secondary);

    margin-bottom:20px;

}


.change-photo-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    width:180px;
    height:48px;

    background:var(--primary);
    color:#fff;

    border-radius:30px;
    cursor:pointer;

    font-weight:600;
    text-decoration:none;
}

.change-photo-btn:hover{
    
    background:var(--secondary);
    color:var(--primary);
  
}
.photo-form{

    width:100%;

    display:flex;

    justify-content:center;

}

.profile-right{

    flex:1;

}

.profile-right h2{

    color:#072C63;

    font-size:34px;

    margin-bottom:10px;

}

.student-status{

    display:inline-block;

    background:#EAF7EF;

    color:#0B7A44;

    padding:8px 18px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:25px;

}

.profile-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:25px;

}

.profile-info p{

    background:#F8FAFD;

    padding:18px;

    border-radius:10px;

    line-height:1.8;

}

.profile-info strong{

    color:#072C63;

}

.success-message{

    background:#d4edda;

    color:#155724;

    padding:15px;

    border-radius:10px;

    margin-bottom:25px;

    font-weight:600;

}

@media(max-width:900px){

.profile-card{

    flex-direction:column;

    text-align:center;

}

.profile-left{

    width:100%;

}

.profile-info{

    grid-template-columns:1fr;

}

.change-photo-btn{

    width:220px;

}

}

.warning-message{

    background:#fff3cd;
    color:#856404;
    padding:15px;
    border-radius:10px;
    margin-bottom:20px;
    border-left:5px solid var(--secondary);
    font-weight:600;

}

/* Photo Buttons */

.upload-photo-btn,
.cancel-photo-btn{

    display:none;

    width:180px;

    margin-top:12px;

    padding:12px;

    border:none;

    border-radius:30px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.upload-photo-btn{

    background:#0B7A44;

    color:#fff;

}

.upload-photo-btn:hover{

    background:#095f35;

}

.cancel-photo-btn{

    background:#ddd;

    color:#333;

}

.cancel-photo-btn:hover{

    background:#bbb;

}

/*==================================
EDIT PROFILE FORM
==================================*/

.profile-form-card{

    margin-top:35px;

    background:#fff;

    padding:35px;

    border-radius:20px;

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

}

.section-header{

    margin-bottom:30px;

}

.section-header h2{

    color:#072C63;

    margin-bottom:8px;

}

.section-header p{

    color:#777;

}

.profile-form{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:8px;

    font-weight:600;

    color:#072C63;

}

.form-group input{

    padding:14px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:15px;

    transition:.3s;

}

.form-group input:focus{

    outline:none;

    border-color:var(--secondary);

    box-shadow:0 0 0 3px rgba(212,175,55,.2);

}

.save-profile-btn{

    width:220px;

    padding:15px;

    border:none;

    border-radius:40px;

    background:var(--primary);

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.save-profile-btn:hover{

    background:var(--secondary);
    color:var(--primary);
  

}

@media(max-width:768px){

.form-row{

    grid-template-columns:1fr;

}

.save-profile-btn{

    width:100%;

}

}

/*==================================
PROFILE STATS
==================================*/

.profile-stats{

    display:grid;

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

    gap:25px;

    margin-top:40px;

}

.stat-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    text-align:center;

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

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-6px);

}

.stat-card i{

    font-size:40px;

    color:var(--secondary);

    margin-bottom:15px;

}

.stat-card h2{

    font-size:34px;

    color:#072C63;

    margin-bottom:10px;

}

.stat-card p{

    color:#666;

    font-weight:600;

}

/*==================================
PROFILE LEARNING
==================================*/

.profile-learning{

    margin-top:50px;

}

.profile-learning h2{

    color:#072C63;

    margin-bottom:25px;

}

.learning-card{

    display:flex;

    gap:25px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    margin-bottom:25px;

}

.learning-card img{

    width:240px;

    height:170px;

    object-fit:cover;

}

.learning-content{

    flex:1;

    padding:25px;

}

.learning-content h3{

    color:#072C63;

    margin-bottom:10px;

}

.learning-content p{

    color:#666;

    margin-bottom:20px;

    line-height:1.6;

}

.continue-learning-btn{

    display:inline-block;

    background:var(--primary);

    color:#fff;

    padding:12px 25px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.continue-learning-btn:hover{

    background:var(--secondary);
    color:var(--primary);

}

.empty-learning{

    text-align:center;

    background:#fff;

    padding:60px;

    border-radius:18px;

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

}

.empty-learning i{

    font-size:55px;

    color:var(--secondary);

    margin-bottom:20px;

}

@media(max-width:768px){

.learning-card{

    flex-direction:column;

}

.learning-card img{

    width:100%;

    height:220px;

}

}

/*==================================
ACCOUNT INFORMATION
==================================*/

.account-card{

    margin-top:50px;

    background:#fff;

    border-radius:20px;

    padding:35px;

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

}

.account-header{

    margin-bottom:30px;

}

.account-header h2{

    color:#072C63;

    font-size:28px;

}

.account-header i{

    color:var(--secondary);

    margin-right:10px;

}

.account-grid{

    display:grid;

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

    gap:25px;

}

.account-item{

    background:#F8FAFD;

    padding:20px;

    border-radius:12px;

}

.account-label{

    display:block;

    font-size:14px;

    color:#777;

    margin-bottom:8px;

}

.account-value{

    font-size:18px;

    font-weight:600;

    color:#072C63;

}

.account-value.active{

    color:#0B7A44;

}

.account-value.premium{

    color:#072C63;

}

/*==================================
RECENT ACTIVITY
==================================*/

.activity-card{

    margin-top:50px;

    background:#fff;

    padding:35px;

    border-radius:20px;

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

}

.activity-header{

    margin-bottom:30px;

}

.activity-header h2{

    color:#072C63;

}

.activity-header i{

    color:var(--secondary);

    margin-right:10px;

}

.activity-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:25px;

}

.activity-item:last-child{

    margin-bottom:0;

}

.activity-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:20px;

}

.activity-icon.success{

    background:#0B7A44;

}

.activity-icon.primary{

    background:#072C63;

}

.activity-icon.warning{

    background:var(--secondary);

    color:#072C63;

}

.activity-content{

    flex:1;

}

.activity-content h4{

    color:#072C63;

    margin-bottom:6px;

}

.activity-content p{

    color:#666;

    margin-bottom:8px;

    line-height:1.6;

}

.activity-content span{

    font-size:13px;

    color:#999;

}

/*==================================
LEARNING GOALS
==================================*/

.goals-card{

    margin-top:50px;

    background:#fff;

    padding:35px;

    border-radius:20px;

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

}

.goals-card h2{

    color:#072C63;

    margin-bottom:30px;

}

.goal{

    margin-bottom:30px;

}

.goal:last-child{

    margin-bottom:0;

}

.goal-text{

    font-weight:600;

    color:#072C63;

    margin-bottom:10px;

}

.goal-progress{

    width:100%;

    height:12px;

    background:#eee;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:8px;

}

.goal-fill{

    height:100%;

    background:var(--secondary);

    border-radius:20px;

}

.goal span{

    color:#666;

    font-size:14px;

}

/*==================================
QUICK ACTIONS
==================================*/

.quick-actions{

    margin-top: 20px;

    background:#fff;

    padding:35px;

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

}

.quick-actions h2{

    color:#072C63;

    margin-bottom:30px;

}

.quick-actions i{

    color:var(--secondary);

}

.quick-actions-grid{

    display:grid;

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

    gap:25px;

}

.quick-card{

    text-decoration:none;

    background:#F8FAFD;

    padding:30px;

    border-radius:18px;

    text-align:center;

    transition:.3s;

    border:2px solid transparent;

}

.quick-card:hover{

    transform:translateY(-8px);

    border-color:var(--secondary);

    background: #fff;

}

.quick-card i{

    font-size:40px;

    color:#072C63;

    margin-bottom:20px;

}

.quick-card h3{

    color:#072C63;

    margin-bottom:10px;

}

.quick-card p{

    color:#666;

    line-height:1.6;

}

/*==================================
PROFILE COMPLETION
==================================*/

.completion-card{

    margin-top:50px;

    background:#fff;

    padding:35px;

    border-radius:20px;

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

}

.completion-card h2{

    color:#072C63;

    margin-bottom:20px;

}

.completion-bar{

    width:100%;

    height:18px;

    background:#eee;

    border-radius:30px;

    overflow:hidden;

    margin:20px 0;

}

.completion-fill{

    height:100%;

    background:linear-gradient(90deg,#0B7A44,var(--secondary));

    border-radius:30px;

}

.completion-card p{

    font-weight:600;

    color:#072C63;

}

/*==================================
QUIZ PAGE
==================================*/

.page-subtitle{

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

}

.quiz-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    margin-bottom:30px;

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

    transition:.3s;

}

.quiz-card:hover{

    transform:translateY(-4px);

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

}

.question-number{

    display:inline-block;

    background:#072C63;

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.quiz-card h3{

    color:#072C63;

    font-size:24px;

    margin-bottom:25px;

    line-height:1.6;

}

.quiz-options{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.quiz-options label{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    border:2px solid #eee;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

    font-size:16px;

}

.quiz-options label:hover{

    border-color:var(--secondary);

    background:#FFFBEF;

}

.quiz-options input[type="radio"]{

    transform:scale(1.25);

    accent-color:#072C63;

}

.quiz-submit{

    text-align:center;

    margin:50px 0;

}

.quiz-submit .primary-btn{

    padding:16px 45px;

    font-size:18px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:#072C63;

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.quiz-submit .primary-btn:hover{

    background:var(--secondary);
    color:#072C63;


}

/*==================================
QUIZ RESULT
==================================*/

.result-card{

background:#fff;

padding:50px;

border-radius:20px;

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

text-align:center;

}

.result-icon{

font-size:70px;

margin-bottom:20px;

}

.success{

color:#0B7A44;

}

.failed{

color:#D62828;

}

.score-circle{

width:180px;

height:180px;

border-radius:50%;

background:#072C63;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

font-weight:700;

margin:40px auto;

}

.result-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin:40px 0;

}

.result-grid div{

background:#F8FAFD;

padding:25px;

border-radius:15px;

}

.result-grid h2{

color:#0B7A44;

font-size:34px;

}

.result-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:40px;

}

/*==================================
QUIZ HEADER
==================================*/

.quiz-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

    gap:20px;

}
/*=========================================
QUIZ TIMER — SIZE REDUCTION
Replace the existing .quiz-timer block in
style.css (under "QUIZ HEADER") with this.
=========================================*/
 
.quiz-timer{
 
    background:#072C63;
 
    color:#fff;
 
    padding:10px 18px;
 
    border-radius:10px;
 
    font-size:17px;
 
    font-weight:700;
 
    display:flex;
 
    align-items:center;
 
    gap:8px;
 
}
 
.quiz-timer i{
 
    color:var(--secondary);
 
    font-size:15px;
 
}

/*==================================
QUIZ PROGRESS BAR
==================================*/

.quiz-progress-wrapper{

    margin-bottom:35px;

}

.quiz-progress-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

    font-weight:600;

    color:#072C63;

}

.quiz-progress{

    width:100%;

    height:12px;

    background:#e8edf5;

    border-radius:30px;

    overflow:hidden;

}

.quiz-progress-fill{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #072C63,
        var(--secondary)
    );

    border-radius:30px;

    transition:.4s;

}

/*==================================
QUIZ SUBMIT
==================================*/

.quiz-submit{

    margin-top:40px;

    text-align:center;

}

.quiz-submit-btn{

    padding:16px 40px;

    font-size:18px;

}

.quiz-options label{

    transition:.3s;

}

.quiz-options label:hover{

    transform:translateX(5px);

}

/*==================================
CERTIFICATE PAGE
==================================*/

.certificate-card{

    background:#ffffff;

    border-radius:20px;

    padding:50px;

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

    margin:40px auto;

}

.certificate-border{

    border:12px solid var(--secondary);

    padding:60px;

    text-align:center;

    position:relative;

    background:#FFFDF8;

}

.certificate-header{

    margin-bottom:30px;

}

.certificate-logo{

    width:150px;

    margin-bottom:20px;

}

.certificate-header h2{

    color:#072C63;

    font-size:36px;

    font-weight:700;

    margin-bottom:10px;

}

.certificate-header p{

    color:#777;

    font-size:16px;

}

.certificate-title{

    font-size:52px;

    color:var(--secondary);

    margin:35px 0;

    font-weight:700;

}

.certificate-text{

    font-size:20px;

    color:#555;

    margin:18px 0;

}

.certificate-name{

    font-size:44px;

    color:#072C63;

    font-weight:700;

    margin:25px 0;

    text-transform:uppercase;

    border-bottom:3px solid var(--secondary);

    display:inline-block;

    padding-bottom:12px;

}

.certificate-details{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-top:45px;

    text-align:left;

}

.certificate-details div{

    background:#f8f9fc;

    padding:20px;

    border-radius:12px;

}

.certificate-details strong{

    color:#072C63;

    display:block;

    margin-bottom:8px;

}

.certificate-details p{

    font-size:18px;

    color:#333;

}

.certificate-signatures{

    display:flex;

    justify-content:space-between;

    margin-top:80px;

    gap:40px;

}

.signature-line{

    width:220px;

    border-top:2px solid #072C63;

    margin:0 auto 15px;

}

.certificate-signatures p{

    color:#072C63;

    font-weight:600;

}

@media(max-width:900px){

.certificate-border{

    padding:30px;

}

.certificate-details{

    grid-template-columns:1fr;

}

.certificate-signatures{

    flex-direction:column;

    align-items:center;

}

.certificate-title{

    font-size:36px;

}

.certificate-name{

    font-size:30px;

}

}

/*==================================
CERTIFICATE TOOLBAR
==================================*/

.certificate-toolbar{

    display:flex;

    justify-content:flex-end;

    gap:15px;

    margin-bottom:30px;

}

.certificate-seal{

    position:absolute;

    right:50px;

    top:50px;

    width:120px;

    height:120px;

    border:6px solid #072C63;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#072C63;

    font-weight:700;

    background:#fff;

}

.certificate-seal i{

    font-size:34px;

    margin-bottom:6px;

}

.certificate-watermark{

    position:absolute;

    width:300px;

    opacity:.05;

    top:50%;

    left:50%;

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

    pointer-events:none;

}

@media(max-width:900px){

.certificate-toolbar{

    justify-content:center;

    flex-wrap:wrap;

}

.certificate-seal{

    position:relative;

    right:auto;

    top:auto;

    margin:0 auto 30px;

}

}
/*==================================
DASHBOARD 2.0
==================================*/

.dashboard-section{

    margin-top:40px;

}

.dashboard-section h2{

    color:#072C63;

    margin:bottom 40px;

}

.quick-actions{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

.action-card{

    background:#fff;

    border-radius:16px;

    padding:30px;

    text-align:center;

    text-decoration:none;

    color:#072C63;

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

    transition:.3s;

}

.action-card:hover{

    transform:translateY(-6px);

}

.action-card i{

    font-size:36px;

    color:var(--secondary);

    margin-bottom:15px;

}

.continue-learning{

    background:#fff;

    padding:30px;

    border-radius:16px;

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

}

.learning-progress{

    height:12px;

    background:#eee;

    border-radius:20px;

    margin:20px 0;

}

.learning-progress-fill{

    height:100%;

    background:var(--secondary);

    border-radius:20px;

}

.activity-list{

    background:#fff;

    border-radius:16px;

    padding:30px;

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

}

.activity-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 0;

    border-bottom:1px solid #eee;

}

.activity-item:last-child{

    border-bottom:none;

}

.activity-item i{

    color:var(--secondary);

    font-size:20px;

}

@media(max-width:900px){

.quick-actions{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.quick-actions{

    grid-template-columns:1fr;

}

}

/*==================================
ANNOUNCEMENTS
==================================*/

.announcement-list{

    display:grid;

    gap:20px;

}

.announcement-card{

    background:#fff;

    padding:25px;

    border-left:6px solid var(--secondary);

    border-radius:12px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.announcement-card h3{

    color:#072C63;

    margin-bottom:10px;

}

.announcement-card p{

    color:#555;

    line-height:1.7;

    margin-bottom:12px;

}

.announcement-card small{

    color:#888;

}

/*=============================
Student Progress
=============================*/

.progress-wrapper{

display:flex;

align-items:center;

gap:12px;

}

.progress-bar{

width:140px;

height:10px;

background:#e5e7eb;

border-radius:30px;

overflow:hidden;

}

.progress-fill{

height:100%;

background:linear-gradient(90deg,#0f766e,#10b981);

border-radius:30px;

transition:.4s;

}

.completed-course{

background:#dcfce7;

color:#166534;

padding:5px 12px;

border-radius:20px;

font-size:12px;

font-weight:600;

}

.learning-course{

background:#fef3c7;

color:#92400e;

padding:5px 12px;

border-radius:20px;

font-size:12px;

font-weight:600;

}

/*=========================================
LESSON MANAGEMENT
=========================================*/

.section-subtitle{
    color:#777;
    margin-top:5px;
    font-size:14px;
}

.table-container{
    overflow-x:auto;
    margin-top:25px;
}

.admin-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.admin-table th{
    background:#0d2a57;
    color:#fff;
    padding:16px;
    text-align:left;
}

.admin-table td a:not([class]){

margin-right:12px;

font-size:18px;

color:#0c2d62;

transition:.3s;

}

.admin-table td a:not([class]):hover{

color:var(--secondary);

}

.admin-table tr:hover{
    background:#f9fbff;
}

.action-buttons{
    display:flex;
    gap:10px;
}

.edit-btn,
.delete-btn{
    padding:8px 14px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
}

.edit-btn{
    background:var(--warning);
    color:var(--primary);
}

.delete-btn{
    background:var(--danger);
    color:#fff;
}

.edit-btn:hover{
    background:#b6912b;
}

.delete-btn:hover{
    background:#b71c1c;
}

.status.active{
    background:#198754;
    color:#fff;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
}

.status.draft{
    background:#ffc107;
    color:#000;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
}

/*=====================================
LESSON SEARCH
=====================================*/

.lesson-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin:20px 0;
}

.lesson-toolbar input{
    flex:1;
    max-width:500px;
    padding:12px 16px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:15px;
}

.lesson-toolbar select{
    width:220px;
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
}

/*=========================================
PAGINATION
=========================================*/

.pagination{

display:flex;

justify-content:center;

gap:10px;

margin-top:30px;

flex-wrap:wrap;

}

.pagination a{

padding:10px 16px;

background:#fff;

border:1px solid #ddd;

border-radius:6px;

text-decoration:none;

color:#333;

transition:.3s;

}

.pagination a:hover{

background:var(--primary);

color:#fff;

}

.pagination a.active{

background:var(--primary);

color:#fff;

font-weight:bold;

}

.lesson-toolbar{

display:flex;

justify-content:space-between;

align-items:center;

margin:25px 0;

gap:20px;

flex-wrap:wrap;

}

.lesson-toolbar select{

padding:10px 14px;

border:1px solid #ddd;

border-radius:6px;

cursor:pointer;

}

/* ===========================
CERTIFICATE TOOLBAR
=========================== */

.certificate-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.certificate-toolbar input{
    width:350px;
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
}

.certificate-toolbar select{
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
}

.export-buttons{
    display:flex;
    gap:10px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.download-btn{
    background:#17a2b8;
    color:#fff;
    padding:8px 14px;
    border-radius:6px;
    text-decoration:none;
}

.download-btn:hover{
    background:#138496;
}

.action-buttons{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.status.active{
    background:#d4edda;
    color:#155724;
    padding:6px 12px;
    border-radius:20px;
    font-weight:600;
}
/*=========================================
CERTIFICATE PAGE
=========================================*/

.certificate-page{
    background:#edf2f8;
    min-height:100vh;
    padding:40px;
    font-family:'Poppins',sans-serif;
}

/*=========================================
TOOLBAR
=========================================*/

.certificate-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

@media print{

.certificate-toolbar{
display:none;
}

body{
background:white;
}

}

/*=========================================
CERTIFICATE — SHRINK, NOT RESHAPE
The certificate keeps its full desktop
layout (1123px) at every screen size —
nothing reflows or restyles. It's scaled
down as a whole so small screens see a
compact preview; pinch-zoom (browser native)
is how the reader inspects detail up close.
=========================================*/

.certificate-wrapper{

    display:flex;

    justify-content:center;

    overflow:hidden;

    width:100%;

}

.certificate{

    position:relative;

    width:1123px;
    min-height:794px;
    max-width:none;
    flex-shrink:0;

    background:#ffffff;

    border:12px solid var(--secondary);

    border-radius:14px;

    padding:70px;

    overflow:hidden;

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

    background-image:
    radial-gradient(circle at 20px 20px,#f6f6f6 2px,transparent 2px),
    radial-gradient(circle at 80px 80px,#f8f8f8 2px,transparent 2px);
    background-size:100px 100px;

    transform-origin:top center;

}

@media(max-width:1200px){
    .certificate{ transform:scale(.8); }
}

@media(max-width:900px){
    .certificate{ transform:scale(.6); }
}

@media(max-width:600px){
    .certificate{ transform:scale(.42); }
}

@media(max-width:400px){
    .certificate{ transform:scale(.32); }
}

/*=========================================
DOUBLE BORDER
=========================================*/

.certificate::before{

content:"";

position:absolute;

top:18px;
left:18px;
right:18px;
bottom:18px;

border:2px solid var(--secondary);

pointer-events:none;

}

/*=========================================
WATERMARK
=========================================*/

.certificate-watermark{

position:absolute;

width:360px;

left:50%;

top:50%;

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

opacity:.05;

pointer-events:none;

}

/*=========================================
CORNERS
=========================================*/

.corner{

position:absolute;

width:90px;
height:90px;

border-color:var(--secondary);

}

.top-left{

top:22px;
left:22px;

border-top:6px solid var(--secondary);
border-left:6px solid var(--secondary);

}

.top-right{

top:22px;
right:22px;

border-top:6px solid var(--secondary);
border-right:6px solid var(--secondary);

}

.bottom-left{

bottom:22px;
left:22px;

border-bottom:6px solid var(--secondary);
border-left:6px solid var(--secondary);

}

.bottom-right{

bottom:22px;
right:22px;

border-bottom:6px solid var(--secondary);
border-right:6px solid var(--secondary);

}

/*=========================================
HEADER
=========================================*/

.certificate-header{

text-align:center;

margin-bottom:45px;

position:relative;

z-index:5;

}

.academy-logo{

width:120px;

margin-bottom:15px;

}

.certificate-header h1{

font-size:42px;

color:#0B3A78;

margin:0;

letter-spacing:2px;

font-weight:700;

}

.certificate-header p{

margin-top:10px;

color:#666;

font-size:16px;

}

/*=========================================
TITLE
=========================================*/

.certificate-title{

text-align:center;

margin-bottom:40px;

}

.certificate-title h2{

font-size:22px;

letter-spacing:8px;

color:var(--secondary);

margin:0;

}

.certificate-title h3{

font-size:52px;

margin-top:12px;

color:#0B3A78;

font-family:Georgia,serif;

}

/*=========================================
BODY
=========================================*/

.certificate-body{

text-align:center;

}

.award-text{

font-size:20px;

color:#555;

margin-bottom:15px;

}

.student-name{

font-size:58px;

font-family:"Georgia",serif;

font-weight:bold;

letter-spacing:2px;

color:#0B3A78;

margin:25px 0;

text-transform:uppercase;

text-shadow:

1px 1px 0 #fff,

2px 2px 4px rgba(0,0,0,.12);

}

.name-line{

width:420px;

height:2px;

background:var(--secondary);

margin:20px auto 35px;

}

.completion-text{

font-size:20px;

line-height:1.9;

max-width:900px;

margin:auto;

color:#444;

}

/*=========================================
INFO GRID
=========================================*/

.certificate-info{

margin-top:50px;

display:grid;

grid-template-columns:repeat(4,2fr);

gap:20px;

}

.info-box{

background:white;

border:1px solid #ececec;

border-top:5px solid var(--secondary);

border-radius:10px;

padding:22px;

text-align:center;

transition:.3s;

}

.info-box:hover{

transform:translateY(-5px);

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

}

.info-box span{

display:block;

font-size:10px;

color:#888;

margin-bottom:10px;

}

.info-box strong{

font-size:18px;

color:#0B3A78;

}

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

.certificate-footer{

margin-top:80px;

display:flex;

justify-content:space-between;

align-items:flex-end;

}

.signature-block{

text-align:center;

width:220px;

}

.signature-line{

height:2px;

background:#0B3A78;

margin-bottom:12px;

}

.signature-block span{

font-weight:600;

color:#0B3A78;

}

.certificate-seal{

width:130px;
height:130px;

border-radius:50%;

background:
radial-gradient(circle,#FFD76A,var(--secondary));

border:6px solid #B8860B;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

box-shadow:

0 0 15px rgba(0,0,0,.15),

inset 0 0 10px rgba(255,255,255,.5);

color:white;

font-weight:700;

}

.certificate-seal i{

font-size:40px;

margin-bottom:8px;

}

.certificate-seal span{

font-size:13px;

letter-spacing:1px;

}

.certificate-seal i{

font-size:36px;

margin-bottom:10px;

}

/*=========================================
RESPONSIVE
=========================================*/

.signature-image{

width:120px;

height:auto;

margin-bottom:10px;

}

.certificate-center{

display:flex;

flex-direction:column;

align-items:center;

gap:25px;

}

.certificate-id{

background:#f8f8f8;

padding:15px 30px;

border-radius:12px;

border:2px solid var(--secondary);

text-align:center;

font-size:14px;

color:#666;

}

.certificate-id strong{

font-size:18px;

color:#0B3A78;

}

.certificate-bottom{

margin-top:60px;

display:flex;

justify-content:space-between;

align-items:center;

border-top:1px solid #ddd;

padding-top:25px;

}

.verification-box{

display:flex;

align-items:center;

gap:15px;

}

.qr-placeholder{

width:90px;

height:90px;

border:2px dashed #0B3A78;

display:flex;

justify-content:center;

align-items:center;

font-size:42px;

color:#0B3A78;

}

.academy-address{

text-align:right;

color:#666;

font-size:14px;

line-height:1.7;

}

@media print{

body{

background:white;

margin:0;

padding:0;

}

.certificate-page{

padding:0;

background:white;

}

.certificate{

box-shadow:none;

border:10px solid var(--secondary);

margin:auto;

page-break-after:avoid;



}

.certificate-toolbar{

display:none;

}

}


/*=========================================
INSTRUCTOR REGISTRATION
=========================================*/

.register-page{
    background:#f4f7fb;
    min-height:100vh;
}

.register-container{
    display:flex;
    min-height:100vh;
}

.register-left{
    width:40%;
    background:linear-gradient(180deg,#0f5e87,#1fa2b8);
    color:#fff;
    padding:60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.register-right{
    width:60%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
}

.register-card{
    background:#fff;
    width:760px;
    max-width:100%;
    padding:40px;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.register-card h2{
    color:#0b3774;
    margin-bottom:5px;
}

.register-card p{
    color:#666;
    margin-bottom:25px;
}

.register-card form{
    margin-top:20px;
}

.register-card .form-row{
    display:flex;
    gap:20px;
    margin-bottom:18px;
}

.register-card .form-group{
    flex:1;
    display:flex;
    flex-direction:column;
}

.register-card label{
    font-size:14px;
    font-weight:600;
    margin-bottom:8px;
    color:#0b3774;
}

.register-card input,
.register-card textarea{

    width:100%;
    padding:14px 16px;

    border:1px solid #d8d8d8;
    border-radius:10px;

    background:#fff;

    font-size:15px;

    color:#222;

    outline:none;

}

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

    color:#999;

}

.register-card input:focus,
.register-card textarea:focus{

    border-color:#0f5e87;

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

}

.register-card textarea{

    resize:vertical;
    min-height:120px;

}

.instructor-dashboard .register-btn{

    width:100%;
    margin-top:20px;

}

.register-benefits{

    margin-top:35px;

}

.register-benefits p{

    color:#fff;
    margin-bottom:16px;

}

.register-benefits i{

    color:#f4b400;
    margin-right:8px;

}

@media(max-width:992px){

.register-container{

    flex-direction:column;

}

.register-left,
.register-right{

    width:100%;

}

.register-left{

    text-align:center;
    padding:40px;

}

.register-card{

    width:100%;

}

.register-card .form-row{

    flex-direction:column;
    gap:15px;

}

}

/*=========================================
PROFILE PHOTO
=========================================*/

.photo-upload{

    text-align:center;
    margin-bottom:25px;

}

.profile-preview{

    width:120px;
    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #0b4f6c;

    margin-bottom:15px;

}

/*=========================================
PASSWORD BOX
=========================================*/

.password-box{

    display:flex;

    border:1px solid #ddd;

    border-radius:10px;

    overflow:hidden;

}

.password-box input{

    flex:1;

    border:none;

}

.password-box button{

    width:55px;

    border:none;

    background:#f8f8f8;

    cursor:pointer;

}

.password-box button:hover{

    background:#ececec;

}

/*=========================================
PASSWORD STRENGTH
=========================================*/

.strength-bar{

    height:8px;

    background:#eee;

    border-radius:10px;

    overflow:hidden;

    margin-top:10px;

}

#strengthFill{

    width:0;

    height:100%;

    transition:.4s;

    background:red;

}

#strengthText{

    display:block;

    margin-top:8px;

    font-weight:600;

}

#passwordMatch{

    display:block;

    margin-top:8px;

    font-weight:600;

}

/*==================================================
GERALFIN ACADEMY
PROFESSIONAL INSTRUCTOR REGISTRATION
===================================================*/

.register-card{
    width:760px;
    max-width:100%;
    padding:45px;
}

.register-card h2{
    font-size:30px;
    color:#0b4f6c;
    margin-bottom:8px;
}

.register-card p{
    color:#777;
    margin-bottom:30px;
}

.register-card form{
    margin-top:20px;
}

/* FORM ROW */

.form-row{
    display:flex;
    gap:20px;
    margin-bottom:20px;
}

.form-group{
    flex:1;
    display:flex;
    flex-direction:column;
}

/* LABEL */

.form-group label{
    font-size:14px;
    font-weight:600;
    color:#0b4f6c;
    margin-bottom:8px;
}

/* INPUT */

.form-group input,
.form-group textarea{

    width:100%;
    padding:15px 18px;

    border:1px solid #d8dce7;

    border-radius:12px;

    font-size:15px;

    background:#fff;

    transition:.30s;

    outline:none;

}

.form-group textarea{

    resize:vertical;
    min-height:120px;

}

.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#999;

}

.form-group input:focus,
.form-group textarea:focus{

    border-color:#1b9aaa;

    box-shadow:0 0 0 4px rgba(27,154,170,.15);

}

/* PROFILE PHOTO */

.photo-upload{

    display:flex;
    flex-direction:column;
    align-items:center;

    margin-bottom:20px;

}

.profile-preview{

    width:130px;

    height:130px;

    border-radius:50%;

    border:4px solid #1b9aaa;

    object-fit:cover;

    margin-bottom:15px;

    background:#f4f4f4;

}

.photo-upload input{

    border:none;

    background:none;

    padding:0;

}

/* PASSWORD */

.password-box{

    position:relative;

}

.password-box input{

    padding-right:55px;

}

.password-box button{

    position:absolute;

    top:50%;

    right:15px;

    transform:translateY(-50%);

    border:none;

    background:none;

    cursor:pointer;

    color:#777;

    font-size:17px;

}

/* PASSWORD STRENGTH */

.strength-bar{

    width:100%;

    height:8px;

    background:#e8e8e8;

    border-radius:20px;

    margin-top:10px;

    overflow:hidden;

}

#strengthFill{

    height:100%;

    width:0;

    border-radius:20px;

    transition:.4s;

}

#strengthText{

    display:block;

    margin-top:8px;

    font-size:13px;

    font-weight:600;

}

/* PASSWORD MATCH */

#passwordMatch{

    display:block;

    margin-top:8px;

    font-size:13px;

    font-weight:600;

}

/* TERMS */

.terms-box{

    margin:30px 0;

}

.terms-box label{

    display:flex;

    align-items:flex-start;

    gap:12px;

    font-size:14px;

    color:#444;

    line-height:1.6;

}

.terms-box input{

    margin-top:5px;

}

/* BUTTON */

.register-card .primary-btn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.register-card .primary-btn:hover{

    transform:translateY(-3px);

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

}

/* SUCCESS */

.success-message{

    background:#e7f8ee;

    color:#1d7d3f;

    padding:14px;

    border-radius:10px;

    margin-bottom:20px;

}

/* BENEFITS */

.register-benefits{

    margin-top:35px;

}

.register-benefits p{

    margin-bottom:16px;

    font-size:15px;

    color:#fff;

}

.register-benefits i{

    color:#ffd54a;

    margin-right:10px;

}

/* RESPONSIVE */

@media(max-width:992px){

.login-container{

    grid-template-columns:1fr;

}

.login-left{

    padding:40px;

}

.login-right{

    padding:30px;

}

.register-card{

    width:100%;

}

.form-row{

    flex-direction:column;

    gap:0;

}

.profile-preview{

    width:110px;

    height:110px;

}

}

/*==================================
INSTRUCTOR MANAGEMENT
==================================*/

.table-wrapper{

background:#fff;
padding:25px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.admin-table{

width:100%;
border-collapse:collapse;

}

.admin-table th{

background:#0b4f6c;
color:#fff;
padding:15px;
text-align:left;

}

.admin-table td{

padding:15px;
border-bottom:1px solid #eee;

}

.table-avatar{

width:55px;
height:55px;
border-radius:50%;
object-fit:cover;

}

.table-btn{

padding:8px 16px;
border-radius:8px;
text-decoration:none;
font-size:14px;
margin-right:6px;

}

.table-btn.view{

background:var(--info);
color:#fff;

}

.table-btn.edit{

background:var(--warning);
color:var(--primary);

}

.table-tools{

display:flex;
justify-content:flex-end;
margin:25px 0;

}

.table-tools input{

width:300px;
padding:12px 16px;
border:1px solid #ddd;
border-radius:10px;

}

.status-badge{
    padding:6px 12px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
}

.status-badge.pending{
    background:#fff3cd;
    color:#856404;
}

.status-badge.active{
    background:#d4edda;
    color:#155724;
}

.status-badge.inactive{
    background:#f8d7da;
    color:#721c24;
}

/*=========================================
VIEW INSTRUCTOR PROFILE
=========================================*/

.page-header{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;

}

.profile-card{

display:flex;
gap:40px;
background:#fff;
padding:35px;
border-radius:20px;
box-shadow:0 12px 35px rgba(0,0,0,.08);
margin-bottom:30px;
align-items:flex-start;

}

.profile-left{

width:280px;
text-align:center;

}

.profile-image{

width:180px;
height:180px;
border-radius:50%;
object-fit:cover;
border:6px solid #f2f4f8;
margin-bottom:20px;

}

.profile-left h2{

margin-bottom:10px;
color:#0b3774;

}

.profile-title{

color:#777;
margin-bottom:20px;

}

.profile-right{

flex:1;

}

.profile-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;

}

.profile-grid h4{

margin-bottom:8px;
color:#0b3774;
font-size:15px;

}

.profile-grid p{

margin:0;
color:#444;
line-height:1.7;

}

.full-width{

grid-column:1 / -1;

}

.full-width p{

margin-top:10px;

}

.action-buttons{

display:flex;
gap:15px;
margin-top:30px;
flex-wrap:wrap;

}

.warning-btn{

background:var(--warning);
color:var(--primary);
padding:12px 22px;
border-radius:10px;
text-decoration:none;
font-weight:600;

}

.danger-btn{

background:var(--danger);
color:#fff;
padding:12px 22px;
border-radius:10px;
text-decoration:none;
font-weight:600;

}

.secondary-btn{

background:#6c757d;
color:#fff;
padding:12px 22px;
border-radius:10px;
text-decoration:none;
font-weight:600;

}

.primary-btn{

padding:12px 22px;

}

.profile-grid a{

color:#0b5ed7;
font-weight:600;
text-decoration:none;

}

.profile-grid a:hover{

text-decoration:underline;

}

.status-badge{

display:inline-block;
padding:8px 18px;
border-radius:30px;
font-size:13px;
font-weight:600;

}

.status-badge.pending{

background:#fff3cd;
color:#856404;

}

.status-badge.active{

background:#d4edda;
color:#155724;

}

.status-badge.inactive{

background:#f8d7da;
color:#721c24;

}

/*=====================================
SUCCESS MESSAGE
=====================================*/

.success-message{

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

    padding:15px 20px;

    margin:20px 0;

    border-radius:10px;

    background:#e8f8ee;

    border-left:5px solid #2e7d32;

    color:#2e7d32;

    font-weight:600;

    animation:fadeIn .4s ease;

}

.success-message i{

    font-size:22px;

}

@keyframes fadeIn{

from{

opacity:0;
transform:translateY(-10px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/*=====================================
COURSE FORM
=====================================*/

.course-form-card{

background:#fff;

padding:35px;

border-radius:18px;

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

max-width:1100px;

}

.course-form-card textarea{

resize:vertical;

min-height:120px;

}

.course-form-card select{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:10px;

background:#fff;

font-size:15px;

outline:none;

}

.course-form-card select:focus{

border-color:#0b4f6c;

}

.course-form-card .primary-btn{

margin-top:25px;

padding:15px 40px;

}

/*==============================
VIEW COURSE
==============================*/

.course-view-card{

display:flex;
gap:30px;
align-items:center;
background:#fff;
padding:30px;
border-radius:20px;
margin-bottom:30px;
box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.course-cover img{

width:260px;
height:170px;
object-fit:cover;
border-radius:15px;

}

.course-info h2{

margin-bottom:10px;
color:#0b3774;

}

.course-code{

color:#777;
margin-bottom:15px;

}

.details-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin:30px 0;

}

.detail-box{

background:#fff;
padding:20px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.content-card{

background:#fff;
padding:30px;
margin-bottom:25px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.content-card h3{

margin-bottom:15px;
color:#0b3774;

}

.action-buttons{

display:flex;

align-items:center;

justify-content:center;

gap:20px;

flex-wrap:nowrap;

}

.btn-lessons,
.btn-view,
.btn-edit,
.btn-delete{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

height:30px;

min-width:100px;

padding:50 30px;

border-radius:8px;

text-decoration:none;

font-size:14px;

font-weight:600;

transition:.3s;

border:none;

}

.danger-btn{

background:var(--danger);
color:#fff;
padding:12px 20px;
border-radius:8px;
text-decoration:none;

}

.secondary-btn{

background:#6c757d;
color:#fff;
padding:12px 20px;
border-radius:8px;
text-decoration:none;

}

/* Lessons = primary navigate action, solid brand blue */
.btn-lessons{

background:var(--info);
color:#fff;

}

.btn-lessons:hover{

background:var(--primary);
color:#fff;
opacity:.9;

}

/* View = neutral action, primary outline so it reads
   distinctly from the solid Lessons button */
.btn-view{

background:#fff;
color:var(--info);
border:2px solid var(--info);

}

.btn-view:hover{

background:var(--info);
color:#fff;

}

/* Edit = caution/warning action, brand gold with primary
   text for contrast (matches .enroll-btn / .btn-edit
   elsewhere on the site) */
.btn-edit{

background:var(--warning);
color:var(--primary);

}

.btn-edit:hover{

background:#b6912b;
color:var(--primary);

}

/* Delete = destructive action, universal danger red */
.btn-delete{

background:var(--danger);
color:#fff;

}

.btn-delete:hover{

background:#bb2d3b;
color:#fff;

}

table th:last-child,
table td:last-child{

width:260px;

min-width:260px;

text-align:center;

}

.create-course-btn{

display:inline-flex;
align-items:center;
gap:10px;

padding:12px 24px;

background:linear-gradient(135deg,var(--primary),#051a3d);

color:#fff;

font-weight:600;

border-radius:10px;

text-decoration:none;

transition:.3s;

margin-top:15px;

}

.create-course-btn:hover{

transform:translateY(-2px);

background:linear-gradient(135deg,var(--secondary),#b6912b);

color:var(--primary);
}

.create-course-btn i{

font-size:16px;

}

table td{

vertical-align:middle;

}

table td:last-child{

width:340px;

}

.courses-toolbar{

display:flex;

justify-content:space-between;

align-items:center;

margin:25px 0;

gap:20px;

}

.search-box{

margin-left:auto;

}

.search-box input{

width:240px;

height:44px;

padding:0 16px;

border:1px solid #d9dee8;

border-radius:10px;

font-size:14px;

outline:none;

transition:.3s;

}

.search-box input:focus{

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(13,110,253,.15);

}

@media (max-width:768px){

.courses-toolbar{

flex-direction:column;

align-items:stretch;

}

.search-box{

margin-left:0;

}

.search-box input{

width:100%;

}

.create-course-btn{

width:100%;

justify-content:center;

}

}


/* NOTE: .btn-lessons color/hover is defined once, earlier in
   this file (near .btn-view/.btn-edit/.btn-delete), using
   var(--info) so all four course-action buttons share one
   consistent palette. Layout-only tweak kept here since this
   selector context (icon+label, tighter padding) differs from
   the shared block above. */
.btn-lessons{
    padding:9px 16px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.resource-thumb{
    width:70px;
    height:50px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid #ddd;
}

.dropdown-menu{
    display:none !important;
}

.dropdown:hover > .dropdown-menu{
    display:block !important;
}

/* ==========================================
Continue Learning Button
========================================== */

.continue-btn{

display:inline-flex;

align-items:center;

gap:10px;

background:var(--secondary);

color:#fff;

padding:14px 28px;

border-radius:50px;

font-size:15px;

font-weight:600;

text-decoration:none;

transition:.3s ease;

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

}

.continue-btn:hover{

background:var(--primary);

transform:translateY(-3px);

color:#fff;

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

}

.continue-btn i{

font-size:18px;

}


/*==================================================
FACULTY SECTION v2.0
==================================================*/

.faculty-section{

    padding:90px 0;

    background:#f7f9fc;

}

.faculty-section .section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-badge{

    display:inline-block;

    background:#eaf2ff;

    color:var(--primary);

    padding:8px 18px;

    border-radius:30px;

    font-size:25px;

    font-weight:600;

    margin-bottom:20px;

}

.faculty-section h2{

    font-size:42px;

    font-weight:700;

    color:#0f2f67;

    margin-bottom:18px;

}

.faculty-section .section-title p{

    width:70%;

    margin:auto;

    color:#6b7280;

    font-size:17px;

    line-height:1.8;

}

.faculty-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:60px;

}

.faculty-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s ease;

    text-align:center;

}

.faculty-card:hover{

    transform:translateY(-10px);

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

}

.faculty-image{

    position:relative;

    background:linear-gradient(135deg,var(--primary),#173f80);

    height:140px;

}

.faculty-image img{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid #fff;

    position:absolute;

    left:50%;

    bottom:-60px;

    transform:translateX(-50%);

    background:#fff;

}

.faculty-content{

    padding:80px 25px 30px;

}

.faculty-content h3{

    color:#0f2f67;

    font-size:23px;

    margin-bottom:10px;

    font-weight:700;

}

.faculty-role{

    color:var(--secondary);

    font-size:15px;

    font-weight:600;

    margin-bottom:18px;

}

.faculty-rating{

    color:var(--secondary);

    font-size:18px;

    letter-spacing:2px;

    margin-bottom:18px;

}

.faculty-content p{

    color:#6b7280;

    font-size:15px;

    line-height:1.7;

}

.admin-sidebar-dropdown{

    position:relative;

}

.admin-dropdown-toggle{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    cursor:pointer;

}

.admin-dropdown-menu{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    background:#0b2d5b;

    position:absolute;

}

.admin-sidebar-dropdown.open .admin-dropdown-menu{

    max-height:300px;

}

.admin-dropdown-menu li{

    list-style:none;

}

.admin-dropdown-menu li a{

    display:block;

    padding:12px 20px 12px 60px;

    color:#d8e4f5;

    text-decoration:none;

}

.admin-dropdown-menu li a:hover{

    background:#143d72;

}

.admin-dropdown-arrow{

    transition:.35s;

}

.admin-sidebar-dropdown.open .admin-dropdown-arrow{

    transform:rotate(180deg);

}

.page-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.table-toolbar{

display:flex;

justify-content:flex-end;

margin-bottom:20px;

}

.search-form{

display:flex;

gap:10px;

}

.search-form input{

padding:10px 15px;

width:280px;

border:1px solid #ddd;

border-radius:8px;

}

.table-card{

background:#fff;

border-radius:12px;

overflow:hidden;

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

}

.admin-table{

width:100%;

border-collapse:collapse;

}

.admin-table th{

background:#0c2d62;

color:#fff;

padding:16px;

text-align:left;

}

.admin-table td{

padding:15px;

border-bottom:1px solid #eee;

vertical-align:middle;

}

.admin-table tr:hover{

background:#f9fbff;

}

.market-thumb{

width:70px;

height:55px;

object-fit:cover;

border-radius:8px;

}

.badge{

padding:6px 12px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.badge.success{

background:#e8fff2;

color:#00a651;

}

.badge.warning{

background:#fff5db;

color:#b78300;

}

.admin-table td a:not([class]){

margin-right:12px;

font-size:18px;

color:#0c2d62;

transition:.3s;

}

.admin-table td a:not([class]):hover{

color:var(--secondary);

}

/*=========================================
REGISTER FORM — SELECT STYLING
(append to style.css — .form-group already
styles input/textarea but not select, which
register.php's "Course Level" dropdown needs)
=========================================*/

.form-group select {

    width: 100%;

    padding: 15px 18px;

    border: 1px solid #d8dce7;

    border-radius: 12px;

    font-size: 15px;

    background: #fff;

    color: #222;

    cursor: pointer;

    outline: none;

    transition: .30s;

}

.form-group select:focus {

    border-color: #1b9aaa;

    box-shadow: 0 0 0 4px rgba(27, 154, 170, .15);

}

/*=========================================
LOGIN / REGISTER PAGES — SMALL PHONE FIX
(append to responsive.css — only a 992px
breakpoint exists today; nothing tuned
further down for real small phones)
=========================================*/

@media (max-width: 480px) {

    .login-left {
        padding: 30px 20px;
    }

    .login-logo {
        width: 90px;
    }

    .login-left h1 {
        font-size: 26px;
    }

    .login-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .register-benefits {
        margin-top: 22px;
        text-align: left;
    }

    .register-benefits p {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .login-right {
        padding: 20px;
    }

    .login-card,
    .register-card {
        padding: 22px 16px;
        border-radius: 14px;
    }

    .login-card h2,
    .register-card h2 {
        font-size: 22px;
    }

    .login-card p,
    .register-card p {
        font-size: 13px;
        margin-bottom: 18px;
    }

    .form-group label {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px 14px;
        font-size: 14px;
        border-radius: 10px;
    }

    .profile-preview {
        width: 100px;
        height: 100px;
    }

    .password-box button {
        right: 10px;
        font-size: 15px;
    }

    .strength-bar {
        height: 6px;
    }

    #strengthText,
    #passwordMatch {
        font-size: 12px;
    }

    .terms-box {
        margin: 20px 0;
    }

    .terms-box label {
        font-size: 13px;
        gap: 10px;
    }

    .register-card .primary-btn,
    .login-right button {
        padding: 14px;
        font-size: 15px;
    }

    .login-footer {
        font-size: 13px;
    }

    .success-message,
    .error-message {
        padding: 11px;
        font-size: 13px;
    }
}

@media (max-width: 380px) {

    .login-left h1 {
        font-size: 22px;
    }

    .login-card h2,
    .register-card h2 {
        font-size: 19px;
    }

    .login-card,
    .register-card {
        padding: 18px 14px;
    }

    .profile-preview {
        width: 85px;
        height: 85px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 11px 12px;
        font-size: 13px;
    }
}

/*=========================================
EVENT PREVIEW — DETAIL BOX LABELS
(pairs with .detail-box, which had no
child typography defined yet)
=========================================*/

.detail-box span{

display:block;

font-size:13px;

color:#888;

margin-bottom:8px;

}

.detail-box strong{

font-size:18px;

color:#0B3A78;

}

.status-badge.upcoming{

background:#e5e7ff;

color:#1f3ea3;

}

.status-badge.released{

background:#d4edda;

color:#155724;

}

.status-badge.cancelled{

background:#f8d7da;

color:#721c24;

}

.checkout-section {
    padding: 60px 0;
    background: #f7f8fa;
    min-height: 70vh;
}

.checkout-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: start;
}

.checkout-summary,
.checkout-payment {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.checkout-summary h2,
.checkout-payment h2 {
    margin-bottom: 20px;
    font-size: 20px;
}

.checkout-course-card {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.checkout-thumb {
    width: 90px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checkout-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-thumb i {
    font-size: 24px;
    color: #999;
}

.checkout-course-info h3 {
    font-size: 16px;
    margin-bottom: 6px;
}

.checkout-course-info p {
    font-size: 13px;
    color: #666;
}

.checkout-price-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #444;
}

.checkout-price-row.total {
    font-weight: 700;
    font-size: 18px;
    border-top: 1px solid #eee;
    margin-top: 8px;
    padding-top: 16px;
    color: #111;
}

.checkout-note {
    font-size: 13px;
    color: #555;
    background: #f2f6ff;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.checkout-note i {
    margin-right: 6px;
    color: #1e3a8a;
}

.checkout-payer-details {
    font-size: 14px;
    margin-bottom: 24px;
}

.checkout-payer-details p {
    margin-bottom: 6px;
}

.pay-btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 15px;
    border: none;
    cursor: pointer;
}

.checkout-cancel {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
}

.checkout-cancel a {
    color: #888;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .checkout-container {
        grid-template-columns: 1fr;
    }
}