/* darkblue background: #033B58; */
/* lightble background: #005B96 */

/* lightgray #B4B4B4*/

/* body, h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
  } */


body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    width: 100%;
}

header {
    display: grid;
    background-color: #033B58;
    
    /* height: 80px; */

    grid-template-columns: auto auto auto;

}




.headerElements {
    color: #FFFFFF;

    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 30px;

    letter-spacing: 5px;
    text-transform: uppercase;
   
}

@media (min-width: 600px) {
    .headerElements {
        font-size: 15px;
    }
}


.hero {
    text-align: center;
    vertical-align: middle;
    padding-top: 15vh;
    padding-bottom: 15vh;

    align-items: center;
    justify-content: center;
}

.logoAndText>.logo {
    height: 8vh;
}

.logoAndText>.heroSub {
    margin-top: 2em;
    margin-left: calc((100vw - 35vw)/2);
    width: 35vw;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 26px;
}


footer {
    background-color: #033B58;
    text-align: center;
    color: #FFFFFF;

    height: 25px;
    padding-top: 0.7em;
    padding-bottom: 0.7em;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 25px;
}

.downarrow {
    height: 2.5rem;
}

.missionAndVision {
    /* background-color: aquamarine; */
    /* height: 30vh; */
    margin: 3vh 8vw;
    padding: 1rem;
    display: grid;

    grid-template-rows: auto auto;
}


@media (min-width: 940px) {
    .missionAndVision {
        grid-template-columns: repeat(2, 1fr);
        
    }
    .MaVElement:nth-child(1) {
        border-right: 0.25px solid #B4B4B4;
    }
}


.MaVElement {
    /* background-color: aqua; */
    height: 100%;
    padding-top: 3em;
    /* padding-right: 5rem; */
    text-align: left;
    display: grid;

    grid-template-rows: auto auto auto ;
    grid-template-areas:
    "Img"
    "Header"
    "Content";
}

@media (min-width: 940px){
    .MaVElement{
        grid-template-columns: 0.1fr 1.9fr;
        grid-template-rows: 0.1fr 1.9fr;
        gap: 0px 0px;
        grid-template-areas:
            "Img Header"
            "Img Content";
    }
}



.MaVElement>img {
    grid-area: Img;
    height: 5rem;
    margin-left: 3rem;
    margin-right: 5rem;
}

.MaVElement>.headLine {
    grid-area: Header;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 26px;
    /* identical to box height, or 186% */
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #033B58;
}

.MaVElement>.text {
    grid-area: Content;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: rgba(33, 33, 33, 0.8);
    margin-right: 30%;
    /* width: 20em; */

}



hr {
    margin-left: 12vw;
    margin-right: 12vw;
    color: #B4B4B4;
}

h2 {
    margin: 5vh 10vw;
    text-align: left;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 35px;
    line-height: 52px;
    /* identical to box height, or 149% */
    letter-spacing: -0.4px;

    color: #033B58;
}

.product {
    display: grid;
    grid-template-rows: 0.2fr 0.8fr 0.9;
    gap: 0px 0px;
    grid-template-areas:
        "Img"
        "Header"
        "Content";
    margin: 5vh 10vw;
}

@media (min-width: 940px) {
    .product {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.2fr 1.8fr;
        gap: 0px 0px;
        grid-template-areas:
            "Img Header"
            "Img Content";
    }
}

.product>.images {
    grid-area: Img;
}

.product>.images>img {
    height: 10rem;
}

.product>.headLine {
    grid-area: Header;
    text-align: left;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 52px;
    /* or 208% */
    letter-spacing: -0.4px;

    color: #033B58;
}

.lastword {
    color: #005B96;
}

.product>.content {
    grid-area: Content;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: left;
}

.product>.content>.moreButton {

    float: right;
    background: #005C95;
    border-radius: 100px;
    color: white;
    width: 12rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-top: 2rem;
    margin-right: 2rem;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
}

.claims {
    background: #F9FAFC;
    display: grid;
    margin: 5vh 10vw;
}

@media (min-width: 940px) {
    .claims {
        grid-template-columns: repeat(3, 1fr);
    }

    .claims>.claimElement:not(:first-child) {
        border-left: #B4B4B4 solid 1px;
    }
}


.claims>.claimElement {
    /* height: 20em; */
    padding: 3em 2em;
    text-align: center;

}

.claims>.claimElement>img {
    height: 7rem;
}

.claims>.claimElement>.claimText {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    /* or 138% */
    color: #5D5D5D;
    margin-top: 3rem;
}




.getInTouch {
    margin: 5vh 10vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px 2rem;
    grid-template-areas:
        "one two"
}

.getInTouch>.leftSide {
    text-align: left;
    grid-area: one;
}

.leftSide>h2 {
    margin: 0;
}

.getInTouch>.leftSide>.text {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    /* or 162% */

    color: rgba(21, 20, 57, 0.7);

    mix-blend-mode: normal;
}

.getInTouch>.rightSide {
    grid-area: two;
    text-align: left;
}

.getInTouch>.rightSide>img {
    width: 3rem;
    margin-right: 2rem;
}

.getInTouch>.feedback {
    grid-area: three;
}