@charset "UTF-8";

header{
    height:100dvh;
    min-height:600px;
    position:relative;

    & .container{
        width:60%;
        height:inherit;
        min-height:inherit;
        position:absolute;
        top:0;
        left:0;
        z-index:0;
        clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
        background-color:rgba(0,0,0,.85);
        align-content:center;

        & h1{
            margin:1rem 0 0;
            font-weight:300;
            color:#fff;
        }

        & h2{
            margin:-.5rem 0 1rem 0;
            font-weight:500;
            color:#fff;
        }

        & p{
            font-size:1.1rem;
            color:rgba(255,255,255,0.8);
        }

        & .social{
            margin-top:2rem;

            & a{
                margin:0 .25rem;
                display:inline-flex;
                width:50px;
                height:50px;
                align-items:center;
                justify-content:center;
                border:2px solid #fff;
                border-radius:50%;
                font-size:1.25rem;
                color:#fff;
                text-decoration:none;
                transition:background-color 0.3s ease-in-out;

                &:first-child{
                    margin-left:0;
                }

                &:hover,
                &:focus,
                &:active{
                    background-color:rgba(255,255,255,0.25);
                }
            }
        }
    }

    & .swiper{
        height:inherit;
        min-height:inherit;
        position:absolute;
        top:0;
        left:0;
        z-index:-1;
    }
}

@media(max-width:991px){
    header{
        & .container{
            width:80%;
        }
    }
}

@media(max-width:767px){
    header{
        & .container{
            width:90%;
        }
    }
}