:root{
    --green: #2F6B2F;
    --green-dark: #214D21;

    --yellow: #E3C12A;
    --yellow-hover: #F0CF45;
    --orange: #EB8415;

    --brown: #C25007;

    --cream: #F8F5EE;
    --light-bg: #FAFAF7;

    --text: #1E1E1E;
    --muted: #666666;

    --white: #FFFFFF;

    --red: #FB090B;

    --shadow:0 10px 30px rgba(0,0,0,.08);
    --radius:24px;
}

html,
body{
    overflow-x:hidden;
    width:100%;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body {
    margin:0;
    font-family:"Manrope",sans-serif;
    background:var(--cream);
    color:var(--text);
}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
}

.container{
    width: 1400px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Navbar */
nav {
    position:fixed;
    width:100%;
    top:0;
    z-index:1000;

    display:flex;
    justify-content:center;

    padding:18px;
}

.nav-inner{
    width:min(1200px,100%);
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 28px;

    border-radius:24px;

    background:rgba(20,20,20,.35);
    backdrop-filter:blur(12px);

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

.logo{
    color:white;
    font-size:28px;
    font-weight:800;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    position: relative;
}

nav ul li a {
    display: block;
    padding: 0px 20px;
    color: white;
    text-decoration: none;
}

.nav-links{
    display:flex;
    gap:10px;
    max-width: 1000px;
}

.nav-links a{
    color:white;
    font-size:16px;
    transition:.25s;
}

.nav-links a:hover{
    color:var(--yellow);
}

.dropdown-menu {
    display: none;

    position: absolute;
    top: 95%;
    left: 0;

    min-width: 250px;

    padding: 8px;

    border-radius: 16px;

    background: rgba(60,60,60,0.45);

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

    backdrop-filter: blur(14px);

    flex-direction: column;

    gap: 4px;
}   

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu a {
    padding: 12px 16px;
}

.dropdown:hover .dropdown-menu {
    display: flex;
}

.nav-container > * {
    color: var(--white);
    font-size: 25px;
}

.fa-angle-down{
    font-size: 1rem;
}

/* Footer */

footer{
    background:#161616;
    color:white;
    padding:70px 24px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:40px;
}

.footer-left {
    display: flex;
    flex-direction: column;
    align-items: center; /* centers both title and logo */
}

.footer-left img {
    width: 120px;
}

.footer-column h4{
    font-size:24px;
    margin-bottom:20px;
}

.footer-column a{
    color:#ccc;
    display:block;
    margin-bottom:12px;
}

.footer-bottom{
    margin-top:60px;
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:30px;
    color:#999;
    display: flex;
    justify-content: center;
}

#footer-logo {
    height: 250px;
    width: auto;
}
/* =========================================
   MOBILE SYSTEM (CLEAN)
========================================= */

/* GLOBAL MOBILE SAFETY */
html,
body{
    width:100%;
    overflow-x:hidden;
}


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

@media (max-width: 900px){

    nav{
        padding:10px;
    }

    .nav-inner{
        padding:14px 16px;

        gap:16px;

        overflow-x:auto;
        scrollbar-width:none;
    }

    .nav-inner::-webkit-scrollbar{
        display:none;
    }

    .logo{
        font-size:22px;
        flex-shrink:0;
    }

    .nav-links{
        display:flex;
        flex-wrap:nowrap;

        gap:14px;

        overflow-x:auto;
        scrollbar-width:none;
    }

    .nav-links::-webkit-scrollbar{
        display:none;
    }

    .nav-links a{
        white-space:nowrap;
        font-size:15px;
    }

    .dropdown-menu{
        min-width:220px;
    }
}

.footer-socials{
    display:flex;
    gap:12px;
    margin-top:18px;
}

.footer-socials a{
    width:40px;
    height:40px;
    
    display:flex;
    align-items:center;
    justify-content:center;
    
    border-radius:50%;
    
    background:rgba(255,255,255,0.08);
    color:var(--white);
    
    text-decoration:none;
    
    transition:all .25s ease;
}

.footer-socials a:hover{
    background:var(--green);
    transform:translateY(-2px);
}

.footer-socials i{
    font-size:16px;
}

.footer-socials .social-links{
    display:flex;
    gap:12px;
}

.footer-socials .social-link{
    display:flex;
}

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

    .nav-inner{
        position:relative;
    }

    .nav-inner::after{
        content:"";

        position:absolute;
        top:0;
        right:0;

        width:40px;
        height:100%;

        pointer-events:none;

        background:linear-gradient(
            to right,
            transparent,
            rgba(20,20,20,.35)
        );
    }

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

    .fa-angle-down{
        display:none;
    }

    .page-hero{
        padding:110px 0 50px;
    }

    .page-hero .container{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .page-hero h1{
        font-size:clamp(28px,6vw,40px);
        line-height:1.15;

        width:100%;
        max-width:100%;

        overflow-wrap:anywhere;
    }

    .page-hero p{
        width:100%;
        max-width:100%;

        font-size:1rem;
        line-height:1.6;

        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .hero-breadcrumb{
        flex-wrap:wrap;
    }
}