:root {
    --primary: #0078d4;      /* High Vis Tech Blue */
    --navy: #0f172a;         /* Cyber Security Navy Blue */
    --dark: #1e293b;         /* Charcoal accents */
    --light: #f8fafc;        /* Clean Off-white */
    --white: #ffffff;
    --border: #cbd5e1;
    --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--navy); background-color: var(--white); line-height: 1.6; }
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Navigation Header Configuration */
.navbar { 
    background-color: var(--white); 
    border-bottom: 1px solid var(--border); 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    padding: 12px 0; 
}
.navbar .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.logo-container { 
    display: flex; 
    align-items: center; 
}
.brand-logo { 
    height: 48px;         
    width: auto;          
    display: block;
    transition: transform 0.2s ease;
}
.brand-logo:hover {
    transform: scale(1.02); 
}

nav {
    display: flex;
    align-items: center;
    gap: 20px;
}
nav a { 
    color: var(--navy); 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 0.95rem; 
    white-space: nowrap; 
}
.btn-nav { 
    background-color: var(--primary); 
    color: var(--white)!important; 
    padding: 8px 18px; 
    border-radius: 4px; 
    display: inline-block;
    white-space: nowrap;
}

/* Hero Section */
.hero { background: linear-gradient(135deg, #090d16 0%, #1e293b 100%); color: var(--white); padding: 120px 0; text-align: center; }
.hero h1 { font-size: 3rem; margin-bottom: 20px; }
.hero p { font-size: 1.2rem; max-width: 700px; margin: 0 auto 30px auto; color: #94a3b8; }
.btn-primary { display: inline-block; background-color: var(--primary); color: var(--white); text-decoration: none; padding: 14px 30px; font-weight: bold; border-radius: 4px; }

/* Sections & Grid Structures */
.section { padding: 80px 0; }
.bg-light { background-color: var(--light); }
h2 { text-align: center; font-size: 2.2rem; margin-bottom: 30px; font-weight: 800; }

.curriculum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.curriculum-item { background: var(--light); border-left: 4px solid var(--primary); padding: 20px; font-weight: 500; border-radius: 0 4px 4px 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 30px; }

/* Pricing Tier Layout */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.tier-card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 30px; text-align: center; position: relative; }
.tier-featured { border: 2px solid var(--primary); box-shadow: 0 10px 25px -5px rgba(0,120,212,0.15); }
.tier-header { font-size: 1.4rem; font-weight: bold; margin-bottom: 10px; }
.tier-price { font-size: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 20px; }
.tier-features { list-style: none; text-align: left; font-size: 0.95rem; }
.tier-features li { margin-bottom: 10px; color: #475569; }

/* Registration Form Controls */
.form-container { max-width: 600px; margin: 0 auto; border: 1px solid var(--border); padding: 40px; border-radius: 8px; background: var(--white); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }
.form-group input, .form-group select { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); }

.disclaimer-box { background-color: #fffbfa; border: 1px solid #fecdd3; border-left: 4px solid #e11d48; padding: 20px; border-radius: 4px; margin-bottom: 30px; font-size: 0.88rem; }
.disclaimer-box strong { color: #9f1239; display: block; margin-bottom: 6px; }
.disclaimer-box ul { padding-left: 18px; color: #4c0519; }
.disclaimer-box li { margin-bottom: 6px; }

.btn-submit { width: 100%; background-color: var(--primary); color: var(--white); border: none; padding: 16px; font-size: 1.1rem; font-weight: bold; border-radius: 4px; cursor: pointer; }
.btn-submit:hover { background-color: #005a9e; }

footer { background-color: #0b0f19; color: #64748b; text-align: center; padding: 30px 0; font-size: 0.85rem; margin-top: 60px; }

/* ==========================================================================
   --- Optimized Mobile Responsiveness & Layout Breaks ---
   ========================================================================== */
@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;  
        gap: 16px;
        text-align: center;
        padding: 8px 0;
    }
    .logo-container {
        justify-content: center;
        width: 100%;
    }
    .brand-logo {
        height: 38px;            
    }
    nav {
        flex-direction: row;     
        justify-content: center;
        flex-wrap: wrap;         
        gap: 14px 20px;
        width: 100%;
    }
    nav a {
        margin: 0;
        font-size: 0.9rem;
    }
    .btn-nav {
        padding: 8px 16px;       
        display: inline-block;
        width: auto;             
        white-space: nowrap !important;     /* Hard lock forcing Enroll Now onto one line */
    }
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1rem; }
    .form-container { padding: 25px 20px; }
}