@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

* {
    font-family: "Open Sans", sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: #dbdbdb;
}

header {
    width: 100%;
    height: 85px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    position: absolute;
    padding-top: 40px;
}

.logo-container {
    width: 335px;
    height: 85px;
}

.logo-container img {
    width: 100%;
    height: 85px;
}

.hero-container {
    width: 100%;
    /* height: 100vh; */
    height: 750px;
    position: absolute;
    top: 0;
    background-image: url('/hero.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-position-y: -20px;
}

.hero-container-text {
    width: 70%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 90px;
}

h1 {
    font-size: 37px;
    color: #fff;
    line-height: 1em;
    font-weight: 700;
    margin-bottom: 0px;
}

.hero-container p {
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1.4em;
    color: #fff;
    width: 75%;
    max-width: 780px;
}

.hero-info-divier {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMjBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNkYmRiZGIiPjxwYXRoIGQ9Ik0xMjgwIDMuNEMxMDUwLjU5IDE4IDEwMTkuNCA4NC44OSA3MzQuNDIgODQuODljLTMyMCAwLTMyMC04NC4zLTY0MC04NC4zQzU5LjQuNTkgMjguMiAxLjYgMCAzLjRWMTQwaDEyODB6IiBmaWxsLW9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTAgMjQuMzFjNDMuNDYtNS42OSA5NC41Ni05LjI1IDE1OC40Mi05LjI1IDMyMCAwIDMyMCA4OS4yNCA2NDAgODkuMjQgMjU2LjEzIDAgMzA3LjI4LTU3LjE2IDQ4MS41OC04MFYxNDBIMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMTI4MCA1MS43NmMtMjAxIDEyLjQ5LTI0Mi40MyA1My40LTUxMy41OCA1My40LTMyMCAwLTMyMC01Ny02NDAtNTctNDguODUuMDEtOTAuMjEgMS4zNS0xMjYuNDIgMy42VjE0MGgxMjgweiIvPjwvZz48L3N2Zz4=);
    background-size: 50% 120px;
    bottom: 0;
    /* height: 120px; */
    height: 170px;
    z-index: 10;
    transform: scale(1,1);
    position: absolute;
    /* top: 85vh; */
    top: 630px;
    width: 100%;
}

.info-block {
    width: 100%;
    padding: 40px 0px;
    text-align: center;
    background-color: #dbdbdb;
    position: absolute;
    /* top: 95vh; */
    top: 720px;
}

@media screen and (min-width: 2150px)  {
    .hero-container-text {
        width: 60%;
        max-width: 1100px;
    }
}

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

    .hero-container {
        background-position-y: -400px;
    }
}


.info-block h2 {
    font-weight: 800;
    font-size: 45px;
    color: #545454;
    text-align: center;
}

.info-block p {
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1.4em;
    color: #545454;
    margin-top: 80px;
}

.info-block a {
    color: #00008a;
}

/* TABLET */

@media screen and (min-width: 550px) and (max-width: 767px) {
    .info-block p {
        padding: 0px 50px;
    }
}

/* MOBILE */

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

    header {
        padding-top: 10px;
    }

    .logo-container {
        width: 180px;
        height: 45px;
    }

    .logo-container img {
        width: 100%;
        height: 45px;
    }

    .hero-container {
        background-position-x: center;
        background-position-y: -30px;
    }

    .hero-container-text {
        margin-bottom: 50px;
    }

    .hero-container p {
        width: 90%;
        margin-top: 90px;
    }

    .info-block p {
        padding: 0px 50px;
    }

}

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

    .hero-container-text {
        margin-bottom: 50px;
    }

    .hero-container p {
        width: 90%;
        margin-top: 40px;
    }

    .info-block p {
        padding: 0px 50px;
    }
}