:root {
    --color-green: #60B22F;
    --color-blue: #007FC7;
    --color-sky: #EFF9FF;
    --color-white: #FFFFFF;
    --color-dark: #000000;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: normal;
    src: local("OpenSans-Light"),
      url("../fonts/OpenSans-Light.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: normal;
    src: local("OpenSans-Regular"),
      url("../fonts/OpenSans-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: normal;
    src: local("Montserrat-Regular"),
      url("../fonts/Montserrat-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: normal;
    src: local("Montserrat-Bold"),
      url("../fonts/Montserrat-Bold.woff2") format("woff2");
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Open Sans', sans-serif!important;
    font-weight: 300;
}

span{
    color: var(--color-blue);
    font-weight: bold;
}

.navbar {
    border-width: 5px 0 0;
    border-top: 5px solid var(--color-blue);
}

.navbar__logo{
    width: 100%;
    max-width: 260px;
    margin: 15px;
}

section.banner-hero{
    background: url(../img/woman-1.jpg) no-repeat;
    background-position: center 30%;
    background-size: cover;
    height: 226px;
    position: relative;
}

.banner-hero.banner-hero__overlay{
    width: 100%;
    height: 226px;
    position: absolute;
    z-index: 9;
    background: rgb(0, 0 , 0, 0.6);
}

.banner-hero__text-button{
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner-hero__title{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 22px;
}

.banner-hero__subtitle {
    color: var(--color-white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
}

.banner-hero__teavisa{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--color-green);
}

a.banner-hero__button,
a.banner-hero__button--blue{
    background: var(--color-green);
    color: var(--color-white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    border: none;
    border-radius: 21px;
    cursor: pointer;
    text-decoration: none;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s linear;
    width: 180px;
}

a.banner-hero__button--blue{
    background: var(--color-blue);
    font-weight: bold;
}

a.banner-hero__button:hover{
    background: var(--color-blue);
    color: var(--color-white);
    transition: all 0.4s linear;
}

a.banner-hero__button--blue:hover{
    background: var(--color-green);
    color: var(--color-white);
    transition: all 0.4s linear;
}

.sectiontwo__text{
    font-size: 14px;
    font-weight: 300;
}

section.sectionthree{
    background-color: var(--color-blue);
    color: var(--color-white);
}

.sectionfour__content{
    display: flex;
    align-items: start;
    flex-direction: row;
}

.sectionfour__text{
    font-size: 13px;
    font-weight: 300;
}

.sectionfour__imgwoman{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.sectionfour__imgwoman--imgw{
    height: 220px;
    width: 235px;
}

section.sectionfive{
    background-color: var(--color-sky);
    color: var(--color-dark);
}
.sectionfive__text{
    font-size: 13px;
    font-weight: 300;
    line-height: 23px;
}


@media (min-width: 768px) {
    .navbar__logo{
        max-width: 370px;
    }
     
    section.banner-hero,
    .banner-hero.banner-hero__overlay{
        height: 300px;
    }
    .banner-hero__text-button{
        align-items: start;
    }
    .sectionfour__imgwoman{
        display: flex;
        align-items: center;
    }
    .sectionfour__imgwoman--imgw {
        height: 300px;
        width: 300px;
    }
}

@media (min-width: 992px) {
    .banner-hero__title,
    .banner-hero__subtitle,
    .banner-hero__teavisa{
        font-size: 40px;
    }
    .sectionfour__content{
        min-height: 200px;
    }
    .sectionfour__imgwoman--imgw {
        height: 419px;
        width: 439px;
    }
    section.banner-hero,
    .banner-hero.banner-hero__overlay{
        height: 470px;
    }
    .banner-hero__text-button{
       top: 70px;
    }
    a.banner-hero__button,
    a.banner-hero__button--blue{
        width: 250px;
    }
    .sectiontwo__text{
        font-size: 24px;
        line-height: 30px;
    }
    .sectionthree__text{
        font-size: 20px;
        line-height: 26px;
    }
    .sectionfour__text{
        font-size: 16px;
    }
    .sectionfive__text{
        font-size: 20px;
        line-height: 26px;
        font-weight: 400;
    }
}