﻿body {
    padding:0;
    margin:0;
}
.footer{
    margin:0 !important;
    padding:0 !important;
    display:none;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent;  
}
.home-header {
    width: 100%;
    height: calc(100dvh - 72px);
    position: relative;
}
    .home-header img {
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        position:fixed;
    }
    .home-header h1 {
        text-align: start;
        position: absolute;
        bottom: 200px;
        margin: 0 5vw;
        color: white;
        font-size: 4em;
        max-width: 60vw;
        text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
        -webkit-transform: translateZ(0);
    }
    .home-header i {
        font-size: 0.5em;
    }

#home-btn {
    margin-top: -110px;
    position: relative;
    display: flex;
    justify-content: start;
    padding: 0 30px;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    transition: all 0.2s;
    background: transparent;
}

    #home-btn.active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }

#home-btn > div{
    width:max-content;
}

    #home-btn .btn {
        max-width: 300px;
        min-width: 300px;
        width: 300px;
        padding: 0;
        transition: all ease 0.6s;
        display: flex;
        margin: 0 1vw;
        background-size: cover;
        color: white;
        overflow: hidden;
        background: rgba(0,0,0,0.5);
        border-color: var(--bg-color-beige-light);
    }

    #home-btn .btn:hover{
        background:var(--bg-color-beige-light);
        color:black;
    }

        #home-btn .btn:hover h2, #home-btn .btn:hover p {
            text-shadow: 0px 0px 4px rgba(255,255,255, 0.5);
        }


    #home-btn h2, #home-btn p {
        text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
        transition-duration: 0.5s;
    }

    #home-btn div {
        width: 100%;
        padding: 20px;
        position: relative;
        background: transparent;
        mix-blend-mode: hard-light;
    }

    #home-btn .button-image1 {
        -webkit-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        transition: all 600ms ease;
        transition: all 600ms ease;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #home-btn .button-image2 {
        -webkit-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        transition: all 600ms ease;
        visibility: hidden;
        opacity: 0;
    }

    #home-btn a:hover .button-image1 {
        transform: scale(1.1,1.1);
        opacity: 1;
    }

    #home-btn a:hover .button-image2 {
        display: inline;
        visibility: visible;
        opacity: 1;
        transform: scale(1.1,1.1);
    }


.carousel-box {
    margin-bottom: 2rem;
}

@media (max-width:991px){

    .home-header h1 {
        font-size: 3em;
        max-width:70vw;
    }
}

@media (max-width:768px) {

    #home-btn{
        justify-content:flex-start;
    }
    #home-btn .btn {
        max-width: 250px;
        min-width:250px;
        width:250px;
        padding: 0;
    }

    #home-btn img {
        max-width: 50%
    }

    #home-btn p {
        font-size: 1rem;
    }

    .home-header h1 {
        font-size: 2em;
        max-width:80vw;
    }
}
