@font-face {
    font-family: defaultSans;
    src: url(./assets/fonts/RedHatDisplay-VariableFont_wght.ttf);
}

html,body{
    margin:0;
    padding:0;
    font-family: defaultSans;
    letter-spacing: 0.3px;;
    background-color: rgb(243, 240, 235);
    font-size: 16px;
}


ol li{
    margin:8px 0;
    
}
ol  li::marker {
    font-weight: bold;
}
.color-primary{
    color: #0068B5;
}

.white{
    color: white
}

.green{
    color: rgb(26, 156, 0)
}

.whiteBg{
    background-color: white
}

.text-align-left{
    text-align: left;
}

.text-align-right{
    text-align: right;
}

.text-align-center{
    text-align: center;
}

.inline{
    display:inline-block
}

.outlined{
    outline: solid 1px;
    color:#5b5b5b;
}

.rounded{
    border-radius: 16px;
    padding:8px;
    margin:16px;
}

.text-align-center{
    text-align: center;
}


.font-family-secondary{
    letter-spacing:2px;
}

.link-icon{
    width:128px;
    vertical-align: middle;
    text-decoration: none;
}

.link-icon svg{
    width:128px;
    fill:#0068B5;
}

.link-icon:hover svg{
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.2));
}


#header{
    z-index: 99;
    top:0;
    display:block;
    position:fixed;
    width:100%;
    height:124px;
    background-color: rgb(250, 249, 246);
    -webkit-box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.3);
    box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.1);
    transition:height 0.2s;
}

#header-content{
    display:flex;
    max-width: 1148px;
    margin:auto;
    height:100%;
    padding:0 16px;
}

#header-content > a{
    margin:auto 0;
}

#header-logo{
    height: 58px;
    transition:height 0.2s;
}


#header-menu{
    margin:auto;
    margin-right: 0;
}

#header-menu a{
    margin-left: 40px;
    text-decoration: none;
    font-weight: 600;
    color: #5b5b5b;
}

#header-menu a.active{
    color: #0068B5;
}

#header-menu a:hover{
    color: #0068B5;
}

@media only screen and (max-width: 960px){
    #header{
        height: 60px;
        -webkit-box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.3);
        -moz-box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.3);
        box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.1);
    }
    #header-logo{
        height: 36px;
    }

    #header-menu{
        display: none !important;
    }
    #header-menu-mobile{
        display: block !important;
    }
}

@media only screen and (min-width: 959px){
    #header-menu{
        display: block !important;
    }
    #header-menu-mobile{
        display: none !important;
    }
}





#footer{
    z-index: 99;
    background-color: #01538B;
    display:block;
    position:relative;
    padding:80px 16px;
    color:white;
}

#footer .footer-content{
    display:flex;
    width:100%;
    max-width: 1180px;
    margin:auto;
}



#footer .footer-content > div{
    width:50%;
    max-width: 1180px;
    margin:auto;
}


#footer .footer-content > div  a{
    color:white;
    display:block;
    text-decoration: none;
}

#footer .footer-content > div:nth-child(2n){
    font-size: 16px;
    text-align: right;
    padding-right:40px;
}


#footer .footer-content > div:nth-child(2n)  a{
    color:white;
    display:block;
    line-height:32px;
}




#footer .footer-content > div:nth-child(2n) > span{
    text-align: left;
    display:inline-block;
}


#footer .footer-content .footer-logo{
    height:58px;
}

@media only screen and (max-width: 960px){
    #footer{
        font-size: 12px !important;
    }
    #footer .footer-content > div{
        font-size: 12px !important;
    }
    #footer .footer-content .footer-logo{
        height:32px;
    }
}


.banner{
    display:flex;
    width:100%;
    height: 340px;
    background: rgb(0,61,95);
    background: linear-gradient(90deg, rgba(0,61,95,1) 0%, rgba(0,104,181,1) 100%);
    background-repeat: no-repeat;
    background-position: top right 10%;
    background-size: contain;
}



@media only screen and (max-width: 960px){
    .banner{
        display: none !important;
    }
}



@media only screen and (min-width: 1024px){
    .banner.banner-big{
        height: 560px !important;
    }
    
    .banner .banner-content div{
        font-size:18px !important;
        width:60%;
    }
}



@media only screen and (min-width: 1400px){
    .banner.banner-big{
        height: 640px !important;
    }

    .banner .banner-content h3{
        font-size:44px !important;
    }
    
    .banner .banner-content h2{
        font-size:64px !important;
    }
    
    .banner .banner-content div{
        font-size:24px !important;
        width:60%;
    }
}



@media only screen and (min-width: 1800px){
    .banner.banner-big{
        height: 640px !important;
    }
}


.banner .banner-content{
    display:block;
    position:relative;
    width:100%;
    max-width: 1148px;
    margin: auto;
    color: white;
    text-align: left;
    padding: 42px;
}

.banner .banner-content h3{
    font-size:28px;
    font-weight: 400;
    margin:0;
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}

.banner .banner-content h2{
    font-size:42px;
    font-weight: bold;
    margin:0;
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}

    
.banner .banner-content div{
    font-size:16px;
    width:60%;
    margin-top:32px;
    font-weight: normal;
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.6));
}

#content{
    margin-top:124px;
    background-color: rgb(243, 240, 235);
}


@media only screen and (max-width: 960px){
    #content{
        margin-top:60px !important;
    }
}

#content .content-section{
    display:block;
    padding:80px 42px;
    background-color: transparent;
}


@media only screen and (max-width: 960px){
    #content .content-section{
        padding:60px 16px;
    }
}

#content .content-section:not(.clean):nth-child(2n){
    background-color: rgb(250, 249, 246);
}


.content-section .content-section-content{
    max-width: 1180px;
    margin:auto;
}


.content-section .content-section-content h2{
    margin-top:0;
}

.content-section .content-section-content.cards{
    display:flex;
    gap:42px;
}

.content-section .content-section-content.cards .card{
    background: rgb(0,61,95);
    aspect-ratio: 1 / 1;
    width:calc(50% - 21px);
    position:relative;
    background-size: auto 102% !important;
    transition: box-shadow 0.2s ease-in-out 0s, background-position 0.2s ease-in-out 0s;
    border-radius: 32px;
    overflow: hidden;
}

.content-section .content-section-content.cards .card:hover{
    -webkit-box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.3);
    box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.3);
    background-position-y: -10px !important;
}


.content-section .content-section-content.cards .card.big{
    width:100%;
    aspect-ratio: 32 / 16;
}




@media only screen and (max-width: 960px){
    .content-section .content-section-content.cards .card{
        width:100%;
        aspect-ratio: 2 / 1;
    }
}


@media only screen and (max-width: 620px){
    .content-section .content-section-content.cards .card{
        width:100%;
        aspect-ratio: 1 / 1;
    }
    .content-section .content-section-content.cards .card.big{
        width:100%;
        aspect-ratio: 1 / 1;
    }
}

@media only screen and (max-width: 460px){
    .content-section .content-section-content.cards .card{
        width:100%;
        aspect-ratio: 3 / 4;
    }
    .content-section .content-section-content.cards .card.big{
        width:100%;
        aspect-ratio: 3 / 4;
    }
}


.content-section .content-section-content.cards .card span{
    bottom:0;
    position:absolute;
    width:calc(100% - 80px);
    padding: 40px;
    padding-top: 80px;
    color:white;
    background: linear-gradient(0deg, rgb(3, 55, 85) 10%, rgba(3, 88, 145, 0.9) 60%, rgba(0, 181, 172, 0) 100%);
    transition:padding 0.2s ease-in-out 0s;
}

.content-section .content-section-content.cards .card:hover > span{
    padding-top:70px;
    padding-bottom:50px;
}



.content-section .cards{
    margin-top:40px;
    display:flex;
    justify-content: space-around;
    flex-wrap: wrap;
    
}


.content-section .cards .employeeCard{
    display: inline-flex;
    gap: 16px;
    margin:24px 8px;
    width: 480px;
    min-width: 260px;
    min-height: 210px;
    height: 210px;
    padding:32px;
    border-radius: 24px;
    -webkit-box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.3);
    box-shadow: -3px 5px 16px 1px rgba(0,0,0,0.16);
    background-color: white;
}

.content-section .cards .employeeCard img{
    width:148px;
    height:210px;
}

@media only screen and (max-width: 600px){
    .content-section .cards .employeeCard{
        height: auto;
        display: flex;
        flex-wrap: wrap;
    }
}


.content-section .cards .employeeCard .description{
    display: block;
}

.content-section .cards .employeeCard .name{
    font-weight: bold;
    display: block;
}

.content-section .cards .employeeCard .position{
    margin:0px 0 16px 0;
    display: block;
    font-size: 12px;;
}


.content-section .textCard{
    display: flex;
    margin:24px 8px;
    padding:32px;
    border-radius: 24px;
    -webkit-box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: -6px 9px 25px 2px rgba(0,0,0,0.3);
    box-shadow: -3px 5px 16px 1px rgba(0,0,0,0.16);
    gap: 0 40px;
}