/* CSS FOR THE HERO SECTION
------------------------------------ */

.hero2 { height: calc(100vh - 100px); width: 100%; }

    .hero2 .word-slider { width: 100%; height: 100%; display: flex; justify-content: start; align-items: center; }

        .hero2 .word-slider .text { width: 100%; height: 100%; padding: 0 7.5%; display: flex; flex-direction: column; text-align: center; justify-content: center; /* border: 1px solid red; */ }

            .hero2 .word-slider .text h2 { color: black; font-size: 60px; font-weight: 700; line-height: 75px; text-shadow: 1px 1px 2px var(--green-color); margin: 0 auto 30px; width: 70%; }

            .hero2 .word-slider .text p { width: 35%; margin: 0 auto; }

    /* .hero2 .word-slider .gradient-bg {
    position: absolute;
    z-index: -1;
    width: 77%;
    height: calc(100vh - 100px);
    background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
} */

    .hero2 .image-slider { width: 100%; height: 100%; display: flex; justify-content: end; align-items: center; z-index: -2; position: absolute; margin: 100px 0 0; height: calc(100vh - 100px); top: 0; }

        .hero2 .image-slider .image-bg { width: 100%; position: absolute; top: 0; height: calc(100vh - 100px); overflow: hidden; }

            .hero2 .image-slider .image-bg .carousel,
            .hero2 .image-slider .image-bg .carousel .carousel-inner,
            .hero2 .image-slider .image-bg .carousel .carousel-inner .carousel-item { width: 100%; height: 100%; object-position: 50% 50% !important; object-fit: cover !important; }

                .hero2 .image-slider .image-bg .carousel .carousel-inner .carousel-item div img { height: 100%; object-position: 50% 50% !important; object-fit: cover !important; }

                .hero2 .image-slider .image-bg .carousel .carousel-inner .carousel-item div.firstImg,
                .hero2 .image-slider .image-bg .carousel .carousel-inner .carousel-item div.secondImg,
                .hero2 .image-slider .image-bg .carousel .carousel-inner .carousel-item div.thirdImg { height: 100%; object-position: 50% 50% !important; object-fit: cover !important; background-position: center; background-repeat: no-repeat; background-size: cover; }

                .hero2 .image-slider .image-bg .carousel .carousel-inner .carousel-item div.firstImg { background-image: url('/assets/images/hero-bg2.jpg'); }

/* .hero2 .image-slider .image-bg .carousel .carousel-inner .carousel-item div.secondImg {
    background-image: url('/assets/images/young-man-making-diagnostics-vehicle.svg');
}

.hero2 .image-slider .image-bg .carousel .carousel-inner .carousel-item div.thirdImg {
    background-image: url('/assets/images/pexels-fauxels-3183197.svg');
} */

@media (max-width: 480px), screen and (max-width: 480px) {

    .hero2 .word-slider .text p { width: 100% !important; }
}

@media (max-width: 767px), screen and (max-width: 767px) {

    .hero2 .word-slider .text h2 { font-size: 37px; line-height: 47px; margin: 0 0 35px; width: 100%; }

    .hero2 .image-slider .image-bg { width: 100%; }

        .hero2 .image-slider .image-bg .carousel .carousel-inner .carousel-item div img { width: 100%; object-position: 50% 50% !important; object-fit: cover !important; }
}

/*
@media (max-width: 1024px), screen and (max-width: 1024px) {

    .hero2 .word-slider .text p { width: 65%; }

    .hero2 .word-slider .text h2 { width: 85%; }
}*/