/* ==========================================
   FONTS
========================================== */

@font-face {
    font-family: "Space Grotesk";
    src: url("./assets/fonts/Space_Grotesk/static/SpaceGrotesk-Light.ttf");
    font-weight: 300;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("./assets/fonts/Space_Grotesk/static/SpaceGrotesk-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("./assets/fonts/Space_Grotesk/static/SpaceGrotesk-Medium.ttf");
    font-weight: 500;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("./assets/fonts/Space_Grotesk/static/SpaceGrotesk-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("./assets/fonts/Space_Grotesk/static/SpaceGrotesk-Bold.ttf");
    font-weight: 700;
}


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

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

html{
    scroll-behavior:smooth;
}

body{

    background:#0a0a0a;
    color:#f5f5f5;

    font-family:"Space Grotesk",sans-serif;

    overflow-x:hidden;
}


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

:root{

    --background:#0a0a0a;
    --text:#f5f5f5;
    --secondary-text:#9b9b9b;
    --border:#1d1d1d;

    --max-width:1500px;

}


/* ==========================================
   NAVIGATION
========================================== */

nav{

    position:fixed;

    top:0;
    left:0;

    width:100%;

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

    padding:30px 60px;

    z-index:1000;

    background:linear-gradient(to bottom,
        rgba(10,10,10,.95),
        rgba(10,10,10,0));
}

.logo{

    font-size:12px;

    letter-spacing:2px;

    font-weight:600;
}

.nav-links{

    list-style:none;

    display:flex;

    gap:32px;
}

.nav-links a{

    text-decoration:none;

    color:var(--text);

    font-size:12px;

    letter-spacing:1px;

    transition:.3s;
}

.nav-links a:hover{

    opacity:.55;
}


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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:0 60px;
}

.hero-content{

    max-width:900px;
}

.hero h1{

    font-size:84px;

    line-height:.95;

    font-weight:700;

    margin-bottom:90px;
}

.hero p{

    max-width:520px;

    color:var(--secondary-text);

    font-size:20px;

    line-height:1.8;
}

/* ==========================================
   PHOTOGRAPHY
========================================== */

.portfolio-category{

    width:100%;

    padding:120px 60px 80px;
}

.category-button{

    width:100%;

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

    background:none;
    border:none;

    color:var(--text);

    font-family:"Space Grotesk",sans-serif;

    font-size:42px;
    font-weight:500;

    cursor:pointer;

    padding-bottom:25px;

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

    margin-bottom:50px;
}

.category-button:hover{

    opacity:.8;
}

.arrow{

    font-size:34px;

    transition:.3s;
}

.category-content{

    display:block;
}

.gallery{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;
}

.gallery-item{

    overflow:hidden;

    border-radius:10px;
}

.gallery-item img{

    width:100%;

    height:420px;

    object-fit:cover;

    display:block;

    transition:.4s;
}

.gallery-item-vertical{

    overflow: hidden;

    border-radius: 10px;

}

.gallery-item-hrizonzal video{

    width:100%;

    height:420px;

    object-fit:cover;

    display:block;

    border-radius:10px;

}
.gallery-item video{

    width:100%;

    height:420px;

    object-fit:cover;

    display:block;

}

.project-video-vertical{

    width:100%;

    display:flex;

    justify-content:center;

}

.project-video-vertical video{

    width:420px;

    max-width:100%;

    border-radius:10px;

    display:block;

}

.gallery-item:hover img{

    transform:scale(1.03);
}


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

.project-hero{

    position:relative;

    width:100%;

    margin-top:140px;

    overflow:hidden;
}

.project-hero img{

    width:100%;

    display:block;
}

.project-hero::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:350px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,1),
        rgba(0,0,0,0)
    );

    z-index:1;
}

.overlay{

    position:absolute;

    left:80px;

    bottom:120px;

    z-index:2;
}

.overlay h1{

    font-size:110px;

    font-weight:500;

    margin-bottom:12px;
}

.overlay p{

    font-size:22px;

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


/* ==========================================
   PROJECT
========================================== */

.project{

    max-width:900px;

    margin:180px auto;

    padding:0 40px;
}

.project-text{

    margin-bottom:120px;
}

.project p{

    color:var(--secondary-text);

    font-size:22px;

    line-height:1.8;

    margin-bottom:40px;
}

.project-intro{

    color:white !important;

    font-size:34px !important;

    line-height:1.5 !important;

    margin-bottom:70px !important;
}

.project img{

    width:100%;

    display:block;

    margin-bottom:40px;

    border-radius:8px;
}

.project video{

    width:100%;

    display:block;

    border-radius:8px;

    margin-top:50px;
}