/* ==== RESET ==== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',sans-serif;background:#0d0d0d;color:#f2f2f2;scroll-behavior:smooth}
img{max-width:100%;height:auto;display:block}

/* ==== NAV ==== */
.nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:rgba(0,0,0,.8);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    z-index:1000
}
.nav__wrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem}

/* Logo styling */
.logo{display:flex;align-items:center;gap:1rem}
.logo__img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.logo__text{font-weight:600;font-size:1.1rem;letter-spacing:.5px}

.nav__links{display:flex;gap:1.5rem;list-style:none}
.nav__links a{color:inherit;text-decoration:none;font-size:.9rem;transition:color .2s}
.nav__links a:hover{color:#ffd54f}

/* burger */
.burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer}
.burger span{width:22px;height:3px;background:#fff}

/* ==== HERO ==== */
.hero{
    height:100vh;
    background:url('hero.jpg') center/cover fixed no-repeat;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 1rem;
    min-height:500px
}
.hero__overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.5)
}
.hero__content{
    position:relative;
    max-width:600px;
    background:rgba(0,0,0,.7);
    padding:2rem;
    border-radius:8px;
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
    margin:1rem
}
.hero h1{
    font-size:2.4rem;
    margin-bottom:1rem;
    color:#fff;
    text-shadow:2px 2px 4px rgba(0,0,0,.7);
    line-height:1.2
}
.hero p{
    margin-bottom:1.5rem;
    color:#fff;
    text-shadow:1px 1px 2px rgba(0,0,0,.7);
    font-size:1.1rem
}
.btn{
    display:inline-block;
    background:#ffd54f;
    color:#000;
    padding:.7rem 1.3rem;
    border-radius:4px;
    font-weight:600;
    transition:all .2s
}
.btn:hover{background:#ffe17f;transform:translateY(-2px)}

/* cards (Menu) */
.cards{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center}
.cards figure{flex:1 1 260px;max-width:300px;border-radius:8px;overflow:hidden;background:#1a1a1a;transition:transform .2s}
.cards figure:hover{transform:translateY(-5px)}
.cards figcaption{padding:.6rem;text-align:center;font-size:.95rem}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.gallery img{aspect-ratio:1/1;object-fit:cover;border-radius:6px;transition:transform .25s}
.gallery img:hover{transform:scale(1.05)}

/* contact */
.contact{display:flex;flex-direction:column;gap:.5rem;text-align:center;margin-bottom:1.5rem}
.contact i{color:#ffd54f;margin-right:.4rem}
.contact a{
    color: #ffd54f;
    text-decoration: none;
    transition: color .2s;
    font-weight: 500;
}
.contact a:hover{
    color: #ffe17f;
    text-decoration: underline;
}
.map{width:100%;height:300px;border:0;border-radius:8px}

/* Social Float Button */
.social-float{
    position:fixed;
    bottom:20px;
    right:20px;
    background:#1877f2;
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1.7rem;
    z-index:1000;
    transition:transform .2s,background-color .2s
}
.social-float:hover{
    transform:scale(1.1);
    background:#0d6efd;
    color:#fff
}

/* footer */
footer{text-align:center;font-size:.8rem;padding:1rem 0;background:#000}

/* Video Section */
.video-container{
    position:relative;
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding-bottom:56.25%; /* 16:9 Aspect Ratio */
    height:0;
    overflow:hidden;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.2)
}

.video-container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0
}

/* ==== RESPONSIVE ==== */
@media(max-width:760px){
    .burger{display:flex}
    .nav__links{
        position:fixed;
        top:60px;
        right:-100%;
        flex-direction:column;
        background:#000;
        width:220px;
        padding:1rem 1.2rem;
        transition:right .25s
    }
    .nav__links.show{right:0}
    .hero{
        background-attachment:scroll;
        align-items:flex-start;
        padding-top:100px
    }
    .hero h1{
        font-size:1.8rem;
        margin-bottom:.8rem
    }
    .hero p{
        font-size:1rem;
        margin-bottom:1.2rem
    }
    .hero__content{
        padding:1.5rem;
        width:90%
    }
    .logo__text{font-size:.9rem}
    .logo__img{width:32px;height:32px}
    .video-container{
        margin:0 1rem;
        width:auto
    }
}