/* ===========================
   GOOGLE FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#090909;

    color:#ffffff;

}

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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:transform .4s ease;

}

header.hide{

    transform:translateY(-120%);

}

.navbar{

    width:90%;

    max-width:1400px;

    margin:20px auto;

    padding:18px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

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

    border-radius:22px;

}

.logo{

    color:#fff;

    text-decoration:none;

    font-size:2rem;

    font-weight:700;

}

.nav-links{

    list-style:none;

    display:flex;

    gap:40px;

}

.nav-links a{

    text-decoration:none;

    color:#fff;

    transition:.3s;

}

.nav-links a:hover{

    color:#8b5cf6;

}

/*==========================
MENU BUTTON
==========================*/

.menu-wrapper{

    position:relative;

}

.menu-btn{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.05);

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

    color:#fff;

    font-size:1.2rem;

    cursor:pointer;

    transition:.35s;

}

.menu-btn:hover{

    background:#8b5cf6;

    transform:translateY(-3px) rotate(90deg);

    box-shadow:0 0 30px rgba(139,92,246,.45);

}

/*==========================
DROPDOWN
==========================*/

.dropdown-menu{

    position:absolute;

    top:70px;

    right:0;

    width:260px;

    background:rgba(18,18,18,.92);

    backdrop-filter:blur(20px);

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

    border-radius:22px;

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:5px;

    opacity:0;

    visibility:hidden;

    transform:translateY(-20px);

    transition:.35s ease;

}

.dropdown-menu.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu a{

    color:#fff;

    text-decoration:none;

    padding:14px 16px;

    border-radius:12px;

    transition:.3s;

}

.dropdown-menu a:hover{

    background:rgba(139,92,246,.15);

    color:#8b5cf6;

    transform:translateX(8px);

}

.dropdown-menu hr{

    border:none;

    border-top:1px solid rgba(255,255,255,.08);

    margin:8px 0;

}

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

#hero{

    height:100vh;

    overflow:hidden;

    position:relative;

}

.hero-image{

    position:absolute;

    inset:0;

    will-change:transform;

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        to right,
        rgba(0,0,0,.15),
        rgba(0,0,0,.10),
        rgba(0,0,0,.55)
    ),

    linear-gradient(
        to top,
        rgba(0,0,0,.45),
        transparent 35%
    );

    z-index:5;

}

.hero-content{

    position:absolute;

    top:35%;

    right:3%;

    transform:translateY(-50%);

    z-index:10;

    width:700px;

    text-align:right;

}

.hero-content h1{

    font-size:10rem;

    line-height:1.0;

    font-weight:700;

    margin-bottom:10px;

    color:#f8f8f8;

}

.hero-content p{

    font-size:2rem;

    font-weight:200;

    line-height:1.8;

    color:rgba(255,255,255,.85);

}

/*====================================
HERO LOAD ANIMATION
====================================*/

.hero-title{

    opacity:0;

    transform:translateY(60px);

    animation:titleReveal .9s ease forwards;

    animation-delay:.3s;

}

.hero-subtitle{

    opacity:0;

    transform:translateY(60px);

    animation:titleReveal .9s ease forwards;

    animation-delay:.6s;

}

@keyframes titleReveal{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*====================================
INTRO SECTION
====================================*/

#intro{

    min-height:100vh;

    background:#090909;

    position:relative;

    z-index:5;

    margin-top:-120px;

    border-radius:40px 40px 0 0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:200px 40px;

}

.intro-container{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.intro-tag{

    display:inline-block;

    letter-spacing:6px;

    color:#8d8d8d;

    font-size:.8rem;

    margin-bottom:20px;

    text-transform:uppercase;

}

.intro-container h2{

    font-size:5rem;

    line-height:1;

    margin-bottom:30px;

    font-weight:700;

    color:#f8f8f8;

}

.intro-container p{

    max-width:700px;

    margin:auto;

    font-size:1.5rem;

    line-height:1.9;

    font-weight:300;

    color:rgba(255,255,255,.75);

}

.delay-1{

    transition-delay:.15s;

}

.delay-2{

    transition-delay:.3s;

}

/*====================================
SOCIALS
====================================*/

#socials{

    min-height:100vh;
    background:#141414;
    position:relative;
    z-index:20;
    margin-top:-120px;
    border-radius:40px 40px 0 0;

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

    padding:180px 60px;

}

.socials-container{

    width:100%;
    max-width:1450px;
    text-align:center;

}

.socials-container h2{

    font-size:4.5rem;
    margin:20px 0;

}

.socials-container p{

    font-size:1.4rem;
    color:rgba(255,255,255,.7);
    margin-bottom:80px;

}

.social-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.social-card{

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    text-decoration:none;

    color:#fff;

    padding:35px;

    border-radius:24px;

    background:rgba(255,255,255,.05);

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

    backdrop-filter:blur(18px);

    overflow:hidden;

    transition:.4s ease;

}

/* Animated Glow */

.social-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:24px;

    opacity:0;

    filter:blur(30px);

    transition:.4s;

    z-index:0;

}

/* Content */

.social-card i,
.social-card span{

    position:relative;

    z-index:2;

    transition:.35s;

}

.social-card i{

    font-size:2rem;

}

.social-card span{

    font-size:1.25rem;

    font-weight:500;

}

/* Hover */

.social-card:hover{

    transform:translateY(-12px) scale(1.02);

}

.social-card:hover i{

    transform:scale(1.25) rotate(-8deg);

}

.social-card:hover span{

    letter-spacing:1px;

}

/*==========================
INSTAGRAM
==========================*/

.instagram:hover{

    border-color:#E1306C;

}

.instagram::before{

    background:#E1306C;

}

.instagram:hover::before{

    opacity:.18;

}

.instagram:hover i{

    color:#E1306C;

}

/*==========================
FACEBOOK
==========================*/

.facebook:hover{

    border-color:#1877F2;

}

.facebook::before{

    background:#1877F2;

}

.facebook:hover::before{

    opacity:.18;

}

.facebook:hover i{

    color:#1877F2;

}

/*==========================
THREADS
==========================*/

.threads:hover{

    border-color:#ffffff;

}

.threads::before{

    background:#ffffff;

}

.threads:hover::before{

    opacity:.15;

}

/*==========================
X
==========================*/

.x:hover{

    border-color:#cccccc;

}

.x::before{

    background:#ffffff;

}

.x:hover::before{

    opacity:.15;

}

/*==========================
TELEGRAM
==========================*/

.telegram:hover{

    border-color:#229ED9;

}

.telegram::before{

    background:#229ED9;

}

.telegram:hover::before{

    opacity:.18;

}

.telegram:hover i{

    color:#229ED9;

}

/*==========================
WHATSAPP
==========================*/

.whatsapp:hover{

    border-color:#25D366;

}

.whatsapp::before{

    background:#25D366;

}

.whatsapp:hover::before{

    opacity:.18;

}

.whatsapp:hover i{

    color:#25D366;

}

.delay-3{
    transition-delay:.45s;
}

.delay-4{
    transition-delay:.60s;
}

.delay-5{
    transition-delay:.75s;
}

/*====================================
GALLERY
====================================*/

#gallery{

    min-height:100vh;

    background:#181818;

    position:relative;

    z-index:30;

    margin-top:-120px;

    border-radius:40px 40px 0 0;

    padding:180px 60px;

}

.gallery-container{

    max-width:1500px;

    margin:auto;

    text-align:center;

}

.gallery-container h2{

    font-size:4.5rem;

    margin:20px 0;

}

.gallery-container p{

    font-size:1.4rem;

    color:rgba(255,255,255,.75);

    margin-bottom:90px;

}

/*====================================
MASONRY GRID
====================================*/

.gallery-grid{

    column-count:4;

    column-gap:30px;

}

/*====================================
CARD
====================================*/

.gallery-item{

    position:relative;

    margin-bottom:30px;

    break-inside:avoid;

    cursor:zoom-in;

    transition:
        transform .45s ease,
        filter .45s ease,
        box-shadow .45s ease;

    box-shadow:
        0 15px 40px rgba(0,0,0,.28);

}

/*====================================
IMAGE WRAPPER
====================================*/

.gallery-image{

    position:relative;

    overflow:hidden;

    border-radius:24px;

}

/*====================================
IMAGE
====================================*/

.gallery-image img{

    width:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .55s ease,
        filter .55s ease;

}

/*====================================
AMBIENT GLOW
====================================*/

.gallery-item::before{

    content:"";

    position:absolute;

    inset:-20px;

    border-radius:34px;

    opacity:0;

    filter:blur(60px);

    transition:.45s ease;

    z-index:-1;

}

.glow-purple::before{

    background:#8b5cf6;

}

.glow-pink::before{

    background:#ff4da6;

}

.glow-orange::before{

    background:#ff8c42;

}

.glow-blue::before{

    background:#3b82f6;

}

.glow-green::before{

    background:#22c55e;

}

.glow-red::before{

    background:#ef4444;

}

.glow-gold::before{

    background:#facc15;

}

.glow-cyan::before{

    background:#06b6d4;

}

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

.gallery-item:hover{

    transform:
        translateY(-12px)
        rotate(.5deg);

    box-shadow:
        0 35px 80px rgba(0,0,0,.45);

}

.gallery-item:hover img{

    transform:scale(1.08);

    filter:
        brightness(1.08)
        saturate(1.08);

}

.gallery-item:hover::before{

    opacity:.25;

}

/*====================================
RESPONSIVE
====================================*/

@media(max-width:1200px){

    .gallery-grid{

        column-count:3;

    }

}

@media(max-width:768px){

    .gallery-grid{

        column-count:2;

    }

}

@media(max-width:500px){

    .gallery-grid{

        column-count:1;

    }

}

/*====================================
MEMBERSHIP
====================================*/

#membership{

    min-height:100vh;

    background:#101010;

    position:relative;

    z-index:40;

    margin-top:-120px;

    border-radius:40px 40px 0 0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:180px 70px;

}

.membership-container{

    width:100%;

    max-width:1450px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    align-items:center;

}

/*====================================
LEFT
====================================*/

.membership-left h2{

    font-size:5rem;

    line-height:1;

    margin:25px 0;

}

.membership-left p{

    max-width:560px;

    font-size:1.4rem;

    line-height:1.9;

    font-weight:300;

    color:rgba(255,255,255,.72);

    margin-bottom:50px;

}

.price{

    font-size:5.5rem;

    font-weight:700;

    color:#ffffff;

}

.price span{

    display:block;

    font-size:1.4rem;

    font-weight:300;

    color:#bfbfbf;

    margin-top:10px;

}

/*====================================
RIGHT CARD
====================================*/

.membership-right{

    background:rgba(255,255,255,.05);

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

    backdrop-filter:blur(18px);

    border-radius:30px;

    padding:55px;

    transition:.45s ease;

}

.membership-right:hover{

    transform:translateY(-12px);

    border-color:#8b5cf6;

    box-shadow:0 30px 80px rgba(139,92,246,.22);

}

.membership-right h3{

    font-size:2rem;

    margin-bottom:35px;

}

.membership-right ul{

    list-style:none;

    margin-bottom:45px;

}

.membership-right li{

    font-size:1.25rem;

    padding:18px 0;

    color:rgba(255,255,255,.88);

    border-bottom:1px solid rgba(255,255,255,.06);

}

.membership-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    width:100%;

    padding:20px;

    border-radius:18px;

    background:linear-gradient(135deg,#8b5cf6,#6d28d9);

    color:#fff;

    font-size:1.25rem;

    font-weight:600;

    transition:.35s ease;

}

.membership-btn:hover{

    transform:scale(1.03);

    box-shadow:0 0 35px rgba(139,92,246,.45);

}

/*====================================
FOOTER
====================================*/

footer{

    background:#090909;

    position:relative;

    z-index:50;

    margin-top:-120px;

    border-radius:40px 40px 0 0;

    padding:120px 70px 40px;

}

.footer-container{

    max-width:1450px;

    margin:auto;

    display:grid;

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

    gap:90px;

}

.footer-column h2{

    font-size:3rem;

    margin-bottom:25px;

}

.footer-column h3{

    font-size:1.5rem;

    margin-bottom:30px;

}

.footer-column p{

    color:rgba(255,255,255,.72);

    font-size:1.15rem;

    line-height:1.9;

    max-width:350px;

}

/* Links */

.footer-column a{

    display:flex;

    align-items:center;

    gap:15px;

    color:rgba(255,255,255,.72);

    text-decoration:none;

    margin-bottom:18px;

    transition:.35s ease;

}

.footer-column a i{

    width:22px;

    font-size:1.2rem;

    transition:.35s ease;

}

/* Hover */

.footer-column a:hover{

    color:#ffffff;

    transform:translateX(10px);

}

/* Brand Colors */

.footer-column a:hover .fa-instagram{

    color:#E1306C;

}

.footer-column a:hover .fa-facebook{

    color:#1877F2;

}

.footer-column a:hover .fa-threads{

    color:#ffffff;

}

.footer-column a:hover .fa-x-twitter{

    color:#ffffff;

}

.footer-column a:hover .fa-telegram{

    color:#229ED9;

}

.footer-column a:hover .fa-whatsapp{

    color:#25D366;

}

/* Bottom */

.footer-bottom{

    margin-top:90px;

    padding-top:35px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    color:rgba(255,255,255,.45);

    font-size:.95rem;

}

/*====================================
FLOATING SUBSCRIBE BUTTON
====================================*/

#floatingSubscribe{

    position:fixed;

    right:40px;

    bottom:40px;

    z-index:999;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:18px 34px;

    border-radius:50px;

    background:linear-gradient(135deg,#8b5cf6,#6d28d9);

    color:#fff;

    text-decoration:none;

    font-size:1.05rem;

    font-weight:600;

    box-shadow:0 15px 40px rgba(139,92,246,.45);

    transition:
        opacity .35s ease,
        transform .35s ease;

}

#floatingSubscribe:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 60px rgba(139,92,246,.55);

}

#floatingSubscribe.hide{

    opacity:0;

    pointer-events:none;

    transform:translateY(25px);

}

/*====================================
LOADER
====================================*/

#loader{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#090909;

    z-index:99999;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}

#loader.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

#loader h1{

    font-size:9rem;

    line-height:.9;

    text-align:center;

    font-weight:700;

    color:#fff;

    user-select:none;

    letter-spacing:-4px;

    animation:breathe 2.5s ease-in-out infinite;

}

@keyframes breathe{

    0%{

        transform:scale(.97);

        opacity:.55;

    }

    50%{

        transform:scale(1.03);

        opacity:1;

    }

    100%{

        transform:scale(.97);

        opacity:.55;

    }

}

/*====================================
SCROLL PROGRESS BAR
====================================*/

#scrollProgress{

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:3px;

    background:linear-gradient(
        90deg,
        #8b5cf6,
        #a855f7
    );

    z-index:999999;

    transition:width .08s linear;

}