/* =====================================
   EDITINGZENITH V3
   PART 1
   ROOT + GLOBAL + NAVBAR + HERO
===================================== */

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

:root{

    --bg:#05070b;

    --bg-secondary:#0b1018;

    --card:#111827;

    --gold:#d4a94a;

    --gold-light:#f4d37d;

    --white:#ffffff;

    --text:#c9d1d9;

    --border:rgba(212,169,74,.15);

    --shadow:
    0 20px 60px rgba(0,0,0,.35);

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--bg);

    color:var(--white);

    overflow-x:hidden;

    line-height:1.7;

}


/* =====================================
   SELECTION
===================================== */

::selection{

    background:var(--gold);

    color:#000;

}


/* =====================================
   SCROLLBAR
===================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#05070b;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:20px;

}


/* =====================================
   FILM GRAIN
===================================== */

.film-grain{

    position:fixed;

    inset:0;

    background:
    url('../assets/images/grain.png');

    opacity:.04;

    pointer-events:none;

    z-index:9999;

}


/* =====================================
   SECTION COMMON
===================================== */

section{

    padding:120px 8%;

    position:relative;

}

.section-header{

    text-align:center;

    max-width:900px;

    margin:auto auto 70px;

}

.section-label{

    display:inline-block;

    color:var(--gold);

    font-family:'Bebas Neue',sans-serif;

    letter-spacing:3px;

    font-size:1rem;

    margin-bottom:15px;

}

.section-header h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:4rem;

    letter-spacing:3px;

    margin-bottom:20px;

}

.section-header p{

    color:var(--text);

    max-width:700px;

    margin:auto;

}


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

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:20px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(5,7,11,.65);

    backdrop-filter:blur(20px);

    z-index:1000;

    transition:.3s;

}

.logo{

    font-family:'Bebas Neue',sans-serif;

    font-size:2rem;

    color:var(--gold);

    letter-spacing:3px;

}

.navbar nav{

    display:flex;

    gap:30px;

}

.navbar nav a{

    color:var(--white);

    text-decoration:none;

    font-family:'Bebas Neue',sans-serif;

    letter-spacing:1px;

    transition:.3s;

}

.navbar nav a:hover{

    color:var(--gold);

}


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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:
    linear-gradient(
    rgba(0,0,0,.6),
    rgba(0,0,0,.85)
    ),
    url('../assets/images/hero.jpg');

    background-size:cover;

    background-position:center;

    position:relative;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at center,
    rgba(212,169,74,.12),
    transparent 70%
    );

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:1100px;

}

.hero-tag{

    font-family:'Bebas Neue',sans-serif;

    color:var(--gold);

    letter-spacing:3px;

    margin-bottom:20px;

    font-size:1.2rem;

}

.hero h1{

    font-family:'Bebas Neue',sans-serif;

    font-size:8rem;

    line-height:.9;

    letter-spacing:5px;

    margin-bottom:25px;

}

.hero h1 span{

    color:var(--gold);

}

.hero-description{

    color:var(--text);

    max-width:700px;

    margin:0 auto 40px;

    font-size:1.1rem;

}


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

.hero-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}

.hero-btn{

    padding:14px 30px;

    border-radius:50px;

    text-decoration:none;

    color:var(--gold);

    border:1px solid rgba(212,169,74,.3);

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

    backdrop-filter:blur(10px);

    transition:.3s;

    font-weight:600;

}

.hero-btn:hover{

    transform:
    translateY(-5px);

    background:
    rgba(212,169,74,.12);

    box-shadow:
    0 0 30px rgba(212,169,74,.25);

}/* =====================================
   EDITINGZENITH V3
   PART 2
   ABOUT + SERVICES + SHOWREEL +
   VIDEO GALLERIES
===================================== */


/* =====================================
   ABOUT SECTION
===================================== */

.about-section{

    background:
    linear-gradient(
    rgba(5,7,11,.92),
    rgba(5,7,11,.92)
    ),
    url('../assets/images/about-bg.jpg');

    background-size:cover;

    background-position:center;

}

.about-container{

    display:grid;

    grid-template-columns:
    420px 1fr;

    gap:80px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:25px;

    display:block;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

.about-content h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:4rem;

    letter-spacing:3px;

    margin-bottom:25px;

}

.about-content p{

    color:var(--text);

    margin-bottom:20px;

}

.tools{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;

}

.tools span{

    padding:10px 18px;

    border-radius:30px;

    border:1px solid var(--border);

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

    color:var(--gold);

}


/* =====================================
   SERVICES SECTION
===================================== */

.services-section{

    background:
    linear-gradient(
    rgba(5,7,11,.93),
    rgba(5,7,11,.93)
    ),
    url('../assets/images/services-bg.jpg');

    background-size:cover;

    background-position:center;

}

.services-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.service-card{

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

    border:1px solid var(--border);

    border-radius:25px;

    padding:40px 30px;

    text-align:center;

    transition:.4s;

    backdrop-filter:blur(10px);

}

.service-card:hover{

    transform:
    translateY(-10px);

    border-color:var(--gold);

    box-shadow:
    0 20px 50px rgba(212,169,74,.12);

}

.service-icon{

    font-size:2.5rem;

    margin-bottom:20px;

}

.service-card h3{

    font-family:'Bebas Neue',sans-serif;

    font-size:2rem;

    letter-spacing:2px;

    margin-bottom:15px;

}

.service-card p{

    color:var(--text);

}


/* =====================================
   SHOWREEL SECTION
===================================== */

.showreel-section{

    background:
    linear-gradient(
    rgba(5,7,11,.92),
    rgba(5,7,11,.92)
    ),
    url('../assets/images/showreel-bg.jpg');

    background-size:cover;

    background-position:center;

}

.showreel-container{

    max-width:1200px;

    margin:auto;

}

.showreel-container video{

    width:100%;

    border-radius:25px;

    border:1px solid var(--border);

    overflow:hidden;

    display:block;

    box-shadow:var(--shadow);

}


/* =====================================
   FEATURED SECTIONS
===================================== */

.featured-section{

    background:
    linear-gradient(
    rgba(5,7,11,.95),
    rgba(5,7,11,.95)
    ),
    url('../assets/images/projects-bg.jpg');

    background-size:cover;

    background-position:center;

}


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

.video-gallery{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

.video-card{

    position:relative;

    overflow:hidden;

    border-radius:25px;

    border:1px solid var(--border);

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

    transition:.4s;

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

}

.video-card:hover{

    transform:
    translateY(-10px);

    border-color:var(--gold);

    box-shadow:
    0 25px 60px rgba(212,169,74,.15);

}

.video-card video{

    width:100%;

    display:block;

    border-radius:25px;

}


/* =====================================
   VIDEO PLACEHOLDER
===================================== */

.video-card::before{

    content:"PROJECT";

    position:absolute;

    top:15px;

    left:15px;

    z-index:2;

    padding:6px 14px;

    border-radius:20px;

    background:
    rgba(0,0,0,.75);

    color:var(--gold);

    font-family:'Bebas Neue',sans-serif;

    letter-spacing:2px;

    font-size:.9rem;

}


/* =====================================
   SECTION DIVIDER
===================================== */

.section-header h2::after{

    content:"";

    display:block;

    width:80px;

    height:2px;

    background:var(--gold);

    margin:15px auto 0;

}


/* =====================================
   VIDEO CONTROLS LOOK
===================================== */

video{

    background:#000;

}/* =====================================
   EDITINGZENITH V3
   PART 3
   WHY + CONTACT + FOOTER +
   ANIMATIONS + RESPONSIVE
===================================== */


/* =====================================
   WHY WORK WITH ME
===================================== */

.why-section{

    background:
    linear-gradient(
    rgba(5,7,11,.93),
    rgba(5,7,11,.93)
    );

}

.why-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.why-card{

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

    border:1px solid var(--border);

    border-radius:25px;

    padding:40px 30px;

    transition:.4s;

    backdrop-filter:blur(10px);

}

.why-card:hover{

    transform:
    translateY(-10px);

    border-color:var(--gold);

    box-shadow:
    0 20px 50px rgba(212,169,74,.15);

}

.why-card h3{

    font-family:'Bebas Neue',sans-serif;

    font-size:2rem;

    letter-spacing:2px;

    margin-bottom:15px;

}

.why-card p{

    color:var(--text);

}


/* =====================================
   CONTACT SECTION
===================================== */

.contact-section{

    background:
    linear-gradient(
    rgba(5,7,11,.92),
    rgba(5,7,11,.92)
    ),
    url('../assets/images/contact-bg.jpg');

    background-size:cover;

    background-position:center;

}

.contact-container{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.contact-description{

    color:var(--text);

    max-width:700px;

    margin:20px auto 40px;

}

.contact-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}

.contact-btn{

    padding:15px 35px;

    border-radius:50px;

    text-decoration:none;

    color:var(--gold);

    border:1px solid rgba(212,169,74,.3);

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

    backdrop-filter:blur(10px);

    transition:.3s;

    font-weight:600;

}

.contact-btn:hover{

    transform:
    translateY(-5px);

    background:
    rgba(212,169,74,.12);

    box-shadow:
    0 0 30px rgba(212,169,74,.25);

}


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

.footer{

    background:#040507;

    padding:60px 8%;

    border-top:
    1px solid var(--border);

}

.footer-content{

    text-align:center;

}

.footer h3{

    font-family:'Bebas Neue',sans-serif;

    font-size:2.5rem;

    letter-spacing:3px;

    color:var(--gold);

    margin-bottom:15px;

}

.footer p{

    color:var(--text);

}

.copyright{

    margin-top:20px;

    opacity:.7;

    font-size:.9rem;

}


/* =====================================
   FADE UP ANIMATION
===================================== */

.fade-up{

    opacity:0;

    transform:
    translateY(50px);

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

}

.fade-up.show{

    opacity:1;

    transform:
    translateY(0);

}


/* =====================================
   ACTIVE NAV LINK
===================================== */

.navbar nav a.active{

    color:var(--gold);

}


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

img{

    max-width:100%;

    display:block;

}


/* =====================================
   TABLET
===================================== */

@media(max-width:992px){

    .hero h1{

        font-size:6rem;

    }

    .about-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .tools{

        justify-content:center;

    }

}


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

@media(max-width:768px){

    section{

        padding:90px 6%;

    }

    .navbar{

        flex-direction:column;

        gap:15px;

    }

    .navbar nav{

        flex-wrap:wrap;

        justify-content:center;

        gap:15px;

    }

    .hero h1{

        font-size:4rem;

    }

    .hero-tag{

        font-size:.95rem;

    }

    .hero-description{

        font-size:1rem;

    }

    .section-header h2{

        font-size:3rem;

    }

    .video-gallery{

        grid-template-columns:1fr;

    }

    .contact-buttons{

        flex-direction:column;

    }

    .contact-btn{

        width:100%;

    }

}


/* =====================================
   SMALL MOBILE
===================================== */

@media(max-width:480px){

    .hero h1{

        font-size:3rem;

        letter-spacing:2px;

    }

    .logo{

        font-size:1.5rem;

    }

    .section-header h2{

        font-size:2.5rem;

    }

}