@charset "UTF-8";

@media only screen and (min-width: 768px) {

    .homebanner1, .homebanner2, .homebanner3, .homebanner4, .homebanner5, .homebanner6, .homebanner7, .homebanner8

{
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 850;
    overflow: hidden;
}
/* Image */
/* .homebanner1 img, .homebanner2 img, .homebanner3 img, .homebanner4 img, .homebanner5 img, .homebanner6 img, .homebanner7 img, .homebanner8 img { */
.hero-header-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Background Text */
.homebanner1 p, .homebanner2 p, .homebanner3 p, .homebanner4 p, .homebanner5 p, .homebanner6 p, .homebanner7 p, .homebanner8 p {
    position: absolute; /* VERY IMPORTANT */
    top: 10%;
    left: 5%;
    margin: 0;
    z-index: -2;
}
/* Center Button */
.homebanner1 .banner-center {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

    .homebanner1 .banner-center button {
        background: #fff;
        color: #000;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        padding: 10px 20px;
        border: none;
    }

.homebanner2 .banner-center {
    position: absolute;
    top: 50%;
    left: 42%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
}

    .homebanner2 .banner-center button {
        background: #fff;
        color: #000;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        padding: 10px 20px;
        border: none;
    }

.homebanner3 .banner-center, .homebanner4 .banner-center, .homebanner5 .banner-center, .homebanner6 .banner-center, .homebanner7 .banner-center, .homebanner8 .banner-center {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
}

    .homebanner3 .banner-center button, .homebanner4 .banner-center button, .homebanner5 .banner-center button, .homebanner6 .banner-center button, .homebanner7 .banner-center button, .homebanner8 .banner-center button {
        background: #000;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        padding: 10px 20px;
        border: none;
    }

.homebanner3 .bannertxt, .homebanner4 .bannertxt, .homebanner6 .bannertxt, .homebanner8 .bannertxt {
    position: absolute;
    top: 42%;
    left: 22%;
    color: white;
    text-align: left;
    width: 30%;
}

.homebanner8 .bannertxt {
    position: absolute;
    top: 65%;
    left: 22%;
    color: white;
    text-align: left;
    width: 30%;
}

.homebanner5 .bannertxt {
    position: absolute;
    top: 42%;
    left: 22%;
    color: black;
    text-align: left;
    width: 30%;
}

.homebanner7 .bannertxt {
    position: absolute;
    top: 40%;
    left: 24%;
    color: white;
    text-align: left;
    width: 36%;
}

.fntmontserrat {
    font-family: Montserrat Light;
    text-align: left;
    font-size: 35px;
}

.fntgraphik {
    font-family: Graphik Bold;
    text-align: left;
    font-size: 40px;
}

.fntherabig {
    font-family: Hera Big Regular;
    text-align: left;
    color: #df1515;
    font-size: 35px;
}

.button-md {
    top: 35px;
    min-width: 30%;
}

.homebanner7 .bannertxt .button-md {
    min-width: 25%;
}

}

@media only screen and (max-width: 768px) {

    .homebanner1, .homebanner2, .homebanner3, .homebanner4, .homebanner5, .homebanner6, .homebanner7, .homebanner8 {
        position: relative;
        /* height: 55vh; */
        height: 60vh;
        min-height: 300px;
        overflow: hidden;
    }

        .homebanner1 picture, .homebanner2 picture, .homebanner3 picture, .homebanner4 picture, .homebanner5 picture, .homebanner6 picture, .homebanner7 picture, .homebanner8 picture,
        .homebanner1 img, .homebanner2 img, .homebanner3 img, .homebanner4 img, .homebanner5 img, .homebanner6 img, .homebanner7 img, .homebanner8 img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .homebanner1 img, .homebanner2 img, .homebanner3 img, .homebanner4 img, .homebanner5 img, .homebanner6 img, .homebanner7 img, .homebanner8 img {
            object-fit: cover;
            /* height: calc(70vh - 130px); */
            height: calc(80vh - 130px);
        }

        .homebanner1 p, .homebanner2 p, .homebanner3 p, .homebanner4 p, .homebanner5 p, .homebanner6 p, .homebanner7 p, .homebanner8 p {
            position: absolute;
            z-index: -1;
            left: 9%;
        }

        .homebanner1 .banner-center {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            text-align: center;
        }

            .homebanner1 .banner-center button {
                background: #fff;
                color: #000;
                border: none;
                font-size: 14px;
                font-weight: 600;
                line-height: 1.5;
                padding: 3px 8px 5px;
                /* z-index: 999 !important; */
            }

        .homebanner2 .banner-center {
            position: absolute;
            top: 45%;
            left: 67%;
            transform: translate(-50%, -50%);
            width: 100%;
            text-align: center;
        }

            .homebanner2 .banner-center button {
                background: #fff;
                color: #000;
                border: none;
                font-size: 14px;
                font-weight: 600;
                line-height: 1.5;
                padding: 3px 8px 5px;
            }

        .homebanner3 .banner-center, .homebanner4 .banner-center, .homebanner5 .banner-center, .homebanner6 .banner-center, .homebanner7 .banner-center, .homebanner8 .banner-center {
            position: absolute;
            top: 20%;
            left: 60%;
            transform: translate(-50%, -50%);
            width: 100%;
            text-align: center;
        }

            .homebanner3 .banner-center button, .homebanner4 .banner-center button, .homebanner5 .banner-center button, .homebanner6 .banner-center button, .homebanner7 .banner-center button {
                background: #000;
                color: #fff;
                border: none;
                font-size: 14px;
                font-weight: 600;
                line-height: 1.5;
                padding: 3px 8px 5px;
                float: left;
            }

            .homebanner8 .banner-center button {
                background: #fff;
                color: #000;
                border: none;
                font-size: 14px;
                font-weight: 600;
                line-height: 1.5;
                padding: 3px 8px 5px;
                float: left;
            }
        
        .homebanner5 .bannertxt, .homebanner6 .bannertxt, .homebanner8 .bannertxt {
            color: #fff;
        }
   
    .fntmontserrat {
        font-family: Montserrat Light;
        text-align: left;
        font-size: 20.4px;
    }

    .fntgraphik {
        font-family: Graphik Bold;
        text-align: left;
        font-size: 22px;
    }

    .homebanner7 .fntgraphik {
        color: #fff;
    }

    .fntherabig {
        font-family: Hera Big Regular;
        text-align: left;
        font-size: 22px;
        color: #df1515;
    }



    .bannertxt .button {
        font-size: 10px;
        font-weight: 400;
        line-height: 1.5;
        padding: 5px 8px;
        z-index: 999 !important;
        /* z-index: 1 !important; */
    }

    .button-md {
        min-width: 18%;
    }

    .fntgraphikreg {
        font-family: Graphik Regular;
        text-align: left;
        font-size: 7px;
    }

    .hero-header--carousel .hero-header-bg:before {
        background: 0;
    }
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat.woff2') format('woff2');
    font-display: swap;
}