/* =========================
   VARIABLES
========================= */

:root {

    --green: #53613D;

    --green-dark: #263020;

    --green-light: #7D8C61;

    --orange: #E76F24;

    --cream: #F3F1E9;

    --white: #FFFFFF;

    --black: #151515;

    --gray: #747474;
    --g:#677638;--gd:#202b18;--o:#ff6710;--bg:#f3f1e8;--ink:#182015

}


/* =========================
   RESET
========================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    box-sizing:border-box;
    font-family: Arial, Helvetica, sans-serif;

    background: var(--cream);

    color: var(--black);
    margin: 0;

}

.navbar {

    width: 100%;

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 6%;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 100;

    color: white;

}

.logo {

    color: white;

    text-decoration: none;

    font-size: 1.4rem;

    font-weight: 900;

    letter-spacing: -1px;

    line-height: 0.8;

}

.logo img{
    display: block;
    width: 150px;
}

.logo span {

    display: inline;

}


.logo small {

    display: block;

    font-size: 0.55rem;

    letter-spacing: 5px;

    margin-top: 7px;

}

.nav-links {

    display: flex;

    gap: 35px;

}

.nav-logo {
    display: none;
    position: absolute;
    width: 150px;
    top: 50px;
}

.nav-links a {

    color: white;

    text-decoration: none;

    font-size: 0.75rem;

    letter-spacing: 1.5px;

    font-weight: bold;

}


.menu-button {

    display: none;

}

.b{
    transition: all 1s;
}

.powered.nav {
    display: none;
    position: absolute;
    bottom: 50px;
}

footer {

    padding: 50px 7%;

    background: var(--black);

    color: #888;

    display: grid;

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

    align-items: center;

    gap: 30px;

    font-size: 0.7rem;

}


.footer-logo {

    color: white;

    font-size: 1.2rem;

    font-weight: bold;

}

.footer-logo img {
    width: 100px;
}


.footer-logo small {

    display: block;

    font-size: 0.45rem;

    letter-spacing: 5px;

}


.powered {

    text-align: right;

}

.rigths {
     
    text-align: center;
     
}


.powered a {

    color: white;

    text-decoration: none;

}

/* body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif} */
.hero{color:white;background:linear-gradient(135deg,#1d2816,var(--g));position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-30%;opacity:.12;background:repeating-radial-gradient(ellipse,transparent 0 25px,#fff 26px 27px,transparent 28px 55px);transform:rotate(-12deg)}
.nav,.hero-in,main,.foot-in{max-width:1180px;margin:auto;position:relative}
.nav{padding:25px 28px;display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:900;letter-spacing:.08em;line-height:.9;display:flex;gap:12px;align-items:center}.mark{width:42px;height:30px;position:relative}.mark:before,.mark:after{content:"";position:absolute;background:#fff;height:5px;transform:skewX(-32deg)}.mark:before{width:31px;left:0;top:18px}.mark:after{width:25px;right:0;top:9px}.dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;right:2px;top:1px}
.nav small{text-transform:uppercase;letter-spacing:.22em;opacity:.8}
.hero-in{padding:95px 28px 145px}.kicker{text-transform:uppercase;letter-spacing:.3em;font-size:12px;margin-bottom:22px}
h1{font-size:clamp(58px,9vw,115px);line-height:.82;letter-spacing:-.06em;margin:0;text-transform:uppercase}.orange{color:var(--o)}
.date{margin-top:28px;font-size:24px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.date:before{content:"";display:inline-block;width:48px;height:4px;background:var(--o);margin:0 15px 6px 0}.loc{margin-top:10px;text-transform:uppercase;letter-spacing:.2em;font-size:13px;opacity:.8}
main{padding:0 28px 80px;margin-top:-32px;position:relative;max-width:900px}
.card{background:#fff;box-shadow:0 18px 55px #202b181c}.info{padding:42px}.info h2{font-size:34px;margin:0 0 12px}.info p{line-height:1.65;color:#555}
.details{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border-block:1px solid #ddd}.detail{padding:20px 12px}.detail+ .detail{border-left:1px solid #ddd}.detail small{display:block;text-transform:uppercase;letter-spacing:.14em;color:#777;font-size:10px;margin-bottom:7px}.detail strong{font-size:16px}
.embed{overflow:hidden}.embed-head{background:var(--gd);color:#fff;padding:22px 25px}.embed-head small{display:block;text-transform:uppercase;letter-spacing:.2em;font-size:10px;opacity:.7}.embed-head strong{font-size:21px}
.embed-slot{min-height:650px;padding:22px;background:#fafafa}.placeholder{min-height:605px;border:1px dashed #b9c0ad;display:flex;align-items:center;justify-content:center;text-align:center;padding:25px;color:#777}.placeholder b{display:block;color:var(--gd);font-size:18px;margin-bottom:8px}.placeholder code{display:inline-block;margin-top:12px;padding:9px;background:#edf0e7;color:#53602d;font-size:11px}
.section{margin-top:32px;background:var(--gd);color:#fff;padding:32px 40px}.section h3{margin:0 0 10px;font-size:24px}.section p{margin:0;color:#dce2d4;line-height:1.6}
footer{background:#172013;color:#fff;padding:45px 28px}.foot-in{display:flex;justify-content:space-between;gap:25px}.foot-in small{color:#aeb7a0}.social{display:flex;gap:10px}.social a{border:1px solid #ffffff33;padding:9px 12px;font-size:11px} footer a{color:#c2bfbf}
@media(max-width:850px){main{grid-template-columns:1fr}.nav small{display:none}.hero-in{padding-top:95px}.embed-slot{min-height:500px}.placeholder{min-height:455px}}
@media(max-width:560px){.nav,.hero-in,main{padding-left:18px;padding-right:18px}.details{grid-template-columns:1fr}.detail+.detail{border-left:0;border-top:1px solid #ddd}.foot-in{display:block}.social{margin-top:20px}h1{font-size:58px}}
/* =========================
   RESPONSIVE
========================= */

@media (max-width: 800px) {


    .nav-links {

        display: flex;
        position: fixed;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;

        transform: translateX(-100%);
        transition: all 1s;

        background-color: #53613D;
        padding: 40px;

    }

    .nav-links.active {
        transform: translateX(0);
    }

    .menu-button {

        display: block;
        position: fixed;
        top: 30px;
        right: 30px;

        background: none;

        border: none;

        z-index: 99999;

    }

    .b {
        display: block;
        width: 30px;
        height: 4px;

        border-radius: 5px;

        background-color: white;
    }

    .b-1, .b-2 {
        margin-bottom: 4px;
    }

    .b.close {
        background-color: #E76F24;
    }

    .b-2.close {
        transform: scaleX(0);
    }

    .b-1.close {
        transform: rotate(-45deg) translateY(11.5px);
    }

    .b-3.close {
        transform: rotate(45deg) translateY(-11.5px);
    }

    .section-heading {

        flex-direction: column;

        align-items: start;

        gap: 30px;

    }


    .events-grid {

        grid-template-columns: 1fr;

    }


    .experience {

        grid-template-columns: 1fr;

    }


    .experience-image {

        min-height: 500px;

    }


    .contact {

        flex-direction: column;

        align-items: start;

        gap: 20px;

    }


    footer {

        grid-template-columns: 1fr;

    }

    .footer-logo {

        width: 100%;
        align-items: center;
        justify-content: center;

    }

    .footer-logo img {

        display: block;
        margin: auto;
        width: 200px;

    }

    .powered {

        text-align: center;

    }

    .powered.nav, .nav-logo {
        display: block;
    }

}