body{
    overflow-x:hidden;
}

/* HERO */

.hero-section{
    height:90vh;
    background:url('/static/images/hero.png');
    background-size:cover;
    background-position:center;
    position:relative;
}

.hero-overlay{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:white;
    width:100%;
    padding:20px;
}

.hero-title{
    font-size:6rem;
    font-weight:700;
    letter-spacing:4px;
}

.hero-subtitle{
    font-size:1.4rem;
    letter-spacing:4px;
}

/* ABOUT */

.profile-photo{
    max-width:300px;
}

/* GALLERY */

.gallery-card{
    position:relative;
    height:420px;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    transition:all .4s ease;
}

.gallery-card:hover{
    transform:scale(1.02);
}

.gallery-card::before,
.gallery-card::after{
    content:"";
    position:absolute;
    background:white;
    transition:.4s ease;
    z-index:2;
}

.gallery-card::before{
    left:20px;
    right:20px;
    top:20px;
    height:1px;
    transform:scaleX(0);
}

.gallery-card::after{
    left:20px;
    right:20px;
    bottom:20px;
    height:1px;
    transform:scaleX(0);
}

.gallery-card:hover::before,
.gallery-card:hover::after{
    transform:scaleX(1);
}

.gallery-label{
    position:absolute;
    left:30px;
    bottom:30px;
    background:white;
    color:black;
    padding:15px 25px;
    font-weight:600;
    z-index:3;
    line-height:1.3;
}

/* MOBILE */

@media (max-width:768px){

     .display-4{
        font-size:1.6rem;
        line-height:1.25;
    }

    .hero-section{
        height:45vh;
    }

    .hero-title{
        font-size:2.6rem;
        letter-spacing:2px;
    }

    .hero-subtitle{
        font-size:1rem;
        letter-spacing:2px;
    }

    .profile-photo{
        max-width:180px;
    }

    .gallery-card{
        height:280px;
    }

    .gallery-label{
        left:15px;
        bottom:15px;
        padding:10px 15px;
        font-size:.8rem;
        max-width:80%;
        line-height:1.3;
    }

    .navbar-brand{
        font-size:1.2rem !important;
    }

}