.hero{

    height:100vh;
    position:relative;
    overflow:hidden;

    background-image:url("../assets/hero1.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    animation:kenburns 10s ease-in-out infinite alternate;

    transition:background-image 1.2s ease-in-out;
}

.overlay{

    position:absolute;
    inset:0;

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

    background:
    linear-gradient(
        rgba(0,0,0,.72),
        rgba(0,0,0,.45),            
        rgba(0,0,0,.72)
    );

}

.hero-content{

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

    padding:60px;

    text-align:center;

    border-radius:30px;

    background:rgba(10,20,35,.35);

    backdrop-filter:blur(18px);

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

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

}

.hero-content h1{

    font-size:72px;
    font-weight:800;

    line-height:1.05;

    letter-spacing:2px;

    color:white;

    margin-bottom:30px;

}

.hero-content h2{

    color:#FDBA21;

    font-size:34px;

    font-weight:700;

    margin-bottom:25px;

}

.hero-content h3{

    color:#FBBF24;

    font-size:34px;

    font-weight:700;

    margin-bottom:20px;

}

.hero-content p{

    color:white;

    font-size:22px;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    padding:18px 45px;

    border-radius:50px;

    font-size:20px;

    font-weight:700;

    transition:.35s;

}

.hero-buttons .btn:hover{

    transform:translateY(-4px);

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

}

.scroll-down{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:32px;

    animation:bounce 2s infinite;

}

@keyframes kenburns{

    from{
        background-size:100%;
        background-position:center;
    }

    to{
        background-size:112%;
        background-position:center;
    }

}

.btn-primary,
.btn-secondary{

    transition:.35s;

}

.btn-primary:hover,
.btn-secondary:hover{

    transform:translateY(-5px);

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

}

.scroll-down{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:34px;

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{
        transform:translate(-50%,0);
    }

    40%{
        transform:translate(-50%,-10px);
    }

    60%{
        transform:translate(-50%,-5px);
    }

}

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

@media (max-width: 768px) {

    .hero {

        height: 100svh;

        min-height: 620px;

        background-size: cover;

        background-position: center center;

        animation: none;

    }


    .overlay {

        padding: 20px;

    }


    .hero-content {

        width: 100%;

        max-width: 100%;

        padding: 35px 20px;

        border-radius: 22px;

        background: rgba(10,20,35,.45);

        backdrop-filter: blur(12px);

    }


    .hero-content h1 {

        font-size: clamp(
            32px,
            9vw,
            48px
        ) !important;

        line-height: 1.08;

        letter-spacing: 1px;

        margin-bottom: 18px;

    }


    .hero-content h2 {

        font-size: 22px !important;

        line-height: 1.3;

        margin-bottom: 15px;

    }


    .hero-content h3 {

        font-size: 22px !important;

        margin-bottom: 15px;

    }


    .hero-content p {

        font-size: 15px !important;

        line-height: 1.5;

        margin-bottom: 28px;

    }


    .hero-buttons {

        flex-direction: column;

        width: 100%;

        gap: 12px;

    }


    .hero-buttons a {

        width: 100%;

        max-width: 280px;

        padding: 13px 20px;

        font-size: 15px;

    }


    .scroll-down {

        bottom: 15px;

        font-size: 28px;

    }

}

/* ==================================================
   MOBILE HERO ONLY
   Desktop styles above remain unchanged
================================================== */

@media (max-width: 768px) {

    /* HERO */

    .hero {

        height: 100svh;
        min-height: 620px;
        width: 100%;

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        animation: none;

    }


    /* OVERLAY */

    .overlay {

        min-height: 100svh;

        padding: 80px 16px 30px;

        box-sizing: border-box;

    }


    /* HERO CONTENT */

    .hero-content {

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

        padding: 35px 22px;

        border-radius: 25px;

        box-sizing: border-box;

        background: rgba(10,20,35,.45);

        backdrop-filter: blur(12px);

        -webkit-backdrop-filter: blur(12px);

    }


    /* MAIN TITLE */

    .hero-content h1 {

        font-size: clamp(32px, 9vw, 48px) !important;

        line-height: 1.08;

        letter-spacing: 1px;

        margin-bottom: 18px;

    }


    /* SUBTITLE */

    .hero-content h2 {

        font-size: 22px !important;

        line-height: 1.3;

        margin-bottom: 15px;

    }


    .hero-content h3 {

        font-size: 22px !important;

        line-height: 1.3;

        margin-bottom: 15px;

    }


    /* DESCRIPTION */

    .hero-content p {

        font-size: 15px !important;

        line-height: 1.5;

        margin-bottom: 28px;

    }


    /* ==================================================
       HERO BUTTONS
    ================================================== */

    .hero-buttons {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        width: 100%;

        gap: 14px;

    }


    /* BOTH BUTTONS */

    .hero-buttons .btn {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        max-width: 280px;

        min-height: 54px;

        padding: 15px 25px;

        box-sizing: border-box;

        border-radius: 50px;

        font-size: 17px;

        font-weight: 700;

        line-height: 1.2;

        text-decoration: none !important;

        transition: .35s ease;

    }


    /* ==================================================
       BECOME A SHERPA
    ================================================== */

    .hero-buttons .btn-primary {

        background: #F97316 !important;

        color: #ffffff !important;

        border: 2px solid #F97316 !important;

    }


    /* ==================================================
       EXPLORE EVENTS
    ================================================== */

    .hero-buttons .btn-secondary {

        background: transparent !important;

        color: #ffffff !important;

        border: 2px solid #ffffff !important;

        text-decoration: none !important;

    }


    /* ==================================================
       HOVER
    ================================================== */

    .hero-buttons .btn-primary:hover {

        background: #EA580C !important;

        border-color: #EA580C !important;

        color: #ffffff !important;

        transform: translateY(-4px);

    }


    .hero-buttons .btn-secondary:hover {

        background: #ffffff !important;

        border-color: #ffffff !important;

        color: #111827 !important;

        transform: translateY(-4px);

    }


    /* ==================================================
       SCROLL DOWN ARROW
    ================================================== */

    .scroll-down {

        bottom: 20px;

        font-size: 28px;

    }

}

/* ==================================================
   HERO BUTTON FIX
   ================================================== */

/* Become a Sherpa */
.hero-buttons .join-btn {

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

    padding: 16px 34px;

    min-height: 54px;

    border-radius: 50px;

    background: #F97316;
    color: #ffffff !important;

    text-decoration: none;

    font-size: 18px;
    font-weight: 700;

    border: 2px solid #F97316;

    box-sizing: border-box;

    transition: .35s ease;
}


/* Explore Events */
.hero-buttons .btn-secondary {

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

    padding: 16px 34px;

    min-height: 54px;

    border-radius: 50px;

    background: transparent;
    color: #ffffff !important;

    text-decoration: none;

    font-size: 18px;
    font-weight: 700;

    border: 2px solid #ffffff;

    box-sizing: border-box;

    transition: .35s ease;
}


/* Hover */
.hero-buttons .join-btn:hover {

    background: #EA580C;
    border-color: #EA580C;

    color: #ffffff !important;

    transform: translateY(-5px);

    box-shadow:
        0 15px 30px rgba(249,115,22,.35);
}


.hero-buttons .btn-secondary:hover {

    background: #ffffff;
    color: #111827 !important;

    transform: translateY(-5px);

    box-shadow:
        0 15px 30px rgba(255,255,255,.20);
}


/* ==================================================
   MOBILE HERO BUTTONS
   ================================================== */

@media (max-width: 768px) {

    .hero-buttons {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        width: 100%;

        gap: 14px;

    }


    .hero-buttons .join-btn,
    .hero-buttons .btn-secondary {

        width: 100%;

        max-width: 280px;

        min-height: 54px;

        padding: 14px 22px;

        font-size: 16px;

        border-radius: 50px;

        box-sizing: border-box;

    }


    .hero-buttons .join-btn {

        background: #F97316;

        border: 2px solid #F97316;

        color: #ffffff !important;

    }


    .hero-buttons .btn-secondary {

        background: transparent;

        border: 2px solid #ffffff;

        color: #ffffff !important;

    }


    .hero-buttons .join-btn:hover {

        background: #EA580C;

        border-color: #EA580C;

    }


    .hero-buttons .btn-secondary:hover {

        background: #ffffff;

        color: #111827 !important;

    }

}

/* ==================================================
   DESKTOP HERO - 80% ZOOMED OUT STYLE
   ================================================== */

@media (min-width: 769px) {

    .hero-content {
        width: 900px;
        max-width: 90%;
        padding: 60px;

        transform: scale(0.80);
        transform-origin: center center;
    }

}