html,body, *{
    margin: 0 auto;
    padding: 0;
}
* {
    font-family: 'Rubik', sans-serif;
    box-sizing: border-box;
}
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  section{
    min-height: 55vh;
    display:flex;
    align-items: center;
  }
.container{
    max-width:1200px;
}
.container:not(header){

    padding: 33px 0;
}
a,h1,h2,h3{ text-decoration: none; color:#192a51}
h1 {font-size:3.5rem; margin-bottom: 3.5rem ;}
h2 {font-size:2.5rem; margin-bottom: 2.5rem ;}
#services h2{ margin-bottom: 1rem;}
h3 {font-size:1.4rem; margin-bottom: 1.2rem ;}
.divider {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 10px;
    background: #c1c1c1;
}
header{
    display: flex;
    padding: 10px;
}
header img{
    height: 40px;
    width:142px;
    margin: 0;
}
header nav{
    margin-right: 0;
}
header nav ul{
    display: flex;
    list-style: none;
}
header nav ul li {
    padding: 10px 40px;
}
header nav ul li .button{
    background: #187dc5;
    color: #FFFFFF;
    padding: 15px 30px;
    border-radius: 10px;
    text-shadow: 1px 1px 2px #000000;
}
.hero{
    text-align:center;
    background: url(../images/3326663.jpg) center;
    height: 66vh;
    }
#services{
    background: url(../images/SL-011719-17920-65.jpg) center;
    height: 66vh;
}
    .card {
        background: #f3f3f3;
    }
  
    .card-list{
        position:relative;
    }




    @media only screen and (max-width: 768px) {
        nav{ display: none;}
        header{justify-content: center;}
        .divider{
            display:block;
            height: 0;
            width: 0;
        }
        .container:not(header){
            max-width: 85vw;
        }
        .card {
            padding: 10px;
            margin-bottom: 10px;
        }
        .inner div{
            padding: 20px 0;
        }
        h3{ margin-bottom: 0;}
    }

    @media only screen and (min-width: 769px) {
        .card:nth-child(n +1 ){
            margin-top: -70px;
        }    
        .card:nth-child(2n){
            margin-left: 0;
        }
        .card:nth-child(2n+1){
            margin-right: 0;
        }  
        .card {
            padding: 30px 40px;
            border-radius: 15px;
            width:48%;
        }
        .inner{
            display:  flex;
        }
        #about .inner div:nth-child(2) {
            margin-block-start: 100px;margin-inline-start: 155px;}
    }