@media(max-width: 767px){
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 8px;
    }
    html{
        font-family: 'Titillium Web', sans-serif;
        background-color: #EAEAEA;
        scroll-behavior: smooth;
    }
    
    #header{
        display: inline-block;
    }
    .fa-caret-down,
    .fa-caret-up
    {
        margin: 0;
        font-size: 3rem;
    }
    .fa-caret-down{
    
        visibility: hidden;
    }
    .openMenu .fa-caret-down,
    .openMenu .fa-caret-up{
        visibility: visible;
    }
    .top{
        background-color: #135;
        height: 10rem;
        text-align: center;
        margin-bottom: 3rem;
        width: 100%;
        padding: 1rem;
        z-index: 1;
    }
    .openMenu {
        background-color: #135;
        margin-bottom: 3rem;
        height: 10rem;
        text-align: center;
        width: 100%;
        padding: 1rem;
        font-size: 1.6rem;
        margin-bottom: 3rem;
        position: fixed;
        top: 0;
        z-index: 1;
    }
    .openMenu h1,
    .top h1{
        text-align: center;
        font-size: 3rem;
    }
    .openMenu .navbar{
        display: none;
    }
    .footer{
        height: 10rem;
        text-align: center;
        font-size: 2rem;
        padding-top: 2rem;
        color: #fff;
        background-color: #135;
    }
    .footer a{
        text-decoration: none;
        color: #0275D8;
        font-size: 2rem;
        transition: .5s;
    }
    .footer a:hover{
        color: #fff;
    }
    .btn{
        background-color: #0275D8;
        border-bottom: .35rem solid #025AA5;
        border-radius: 5rem;
        width: 15rem;
        padding: 1rem;
        top: 20%;
        position: relative;
        margin: auto;
        transition: .5s;
    }
    .btn:hover{
        background-color: #025AA5;
        border-bottom: .35rem solid rgb(52, 141, 214);
    }
    .nav{
        background-color: #135;
        border-radius: .3rem;
        height: 5rem;
        width: 5rem;
        padding: 1rem;
        text-align: center;
        transition: .5s;
    }
    .nav:hover{
        background-color: #DEDEF5;
        color: white;
        cursor: pointer;
    }
    .nav:hover a{
        color: black;
        cursor: pointer;
    }
    .nav a{
        text-decoration: none;
        font-size: 2rem;
        color: #fff;
    }
    
    .navbar{
        display: grid;  
        grid-template-columns: repeat(13,1fr);
        grid-gap: .5rem;
        padding: 3rem;
        width: 100%;
        background-color: #135;
        z-index: 90;
        position: fixed;
        top: 9rem;
    }
    .navbars{
        display: none;  
        grid-template-columns: repeat(13,1fr);
        grid-gap: .5rem;
        margin: 0;
        padding: 2rem;
        width: 100%;
        background-color: #135;
        position: fixed;
    }
    div h1{
        font-size: 4rem;
        color: #fff;
        font-weight: normal;
        text-align: center;
        display: inline-block;
    }
    .container {
        background-color: #DEDEF5;
        margin-bottom: 5rem;
        margin-left: 10%;
        margin-right: 10%;
        border-bottom: .5rem solid rgba(128, 128, 128, .3);
        border-right: .5rem solid rgba(128, 128, 128, .3);
        border-radius: 1rem;
        height: 25rem;
        width: auto;
        font-size: 1.5rem;
        font-weight: 500;
        padding: 2rem;
    }
    .container_drop{
        margin-top: 10%;
    }
    .logo{
        height: 2.5rem;
        margin-right: 2.5rem;
    }
    .about{
        float:left;
        width: 65%;
        height: 100%;
    }
    .contact{
        width: 25%;
        float: right;
        text-align: center;
        height: 100%;
    }
    .address{
        height: 70%;
        font-size: 1.6rem;
        padding-top: 2.5rem;;
    }
    
    .website{
        height: 30%;
    }
    .website a{
        text-decoration: none;
        font-size: 2rem;
        color: aliceblue;
    }
    .company{
        height: 30%;
        padding-top: 1.5rem;
        padding-left: 1.5rem;
        border-radius: 1rem;
        border-left: .5rem solid rgba(128, 128, 128, .5);
        border-top: .5rem solid rgba(128, 128, 128, .5);
        font-size: 2rem;
    }
    .technologies{
        padding-top: 5rem;
        height: 70%;
        font-size: 1.6rem;
    }
    
}
@media (max-width: 610px)
{
    .navbar{
        display: grid;  
        grid-template-columns: repeat(9,1fr);
        grid-gap: .5rem;
        padding: 5rem;
        width: 100%;
        background-color: #135;
        z-index: 90;
        position: fixed;
        top: 9rem;
    }
    
}
@media (max-width: 479px){
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 6px;
    }
    html{
        font-family: 'Titillium Web', sans-serif;
        background-color: #EAEAEA;
        scroll-behavior: smooth;
    }
    
    #header{
        display: inline-block;
    }
    .fa-caret-down,
    .fa-caret-up
    {
        margin: 0;
        font-size: 3rem;
    }
    .fa-caret-down{
    
        visibility: hidden;
    }
    .openMenu .fa-caret-down,
    .openMenu .fa-caret-up{
        visibility: visible;
    }
    .top{
        background-color: #135;
        height: 10rem;
        text-align: center;
        margin-bottom: 3rem;
        width: 100%;
        padding: 1rem;
        z-index: 100;
    }
    .openMenu {
        background-color: #135;
        margin-bottom: 3rem;
        height: 10rem;
        text-align: center;
        width: 100%;
        padding: 1rem;
        font-size: 1.6rem;
        margin-bottom: 3rem;
        position: fixed;
        top: 0;
        z-index: 100;
    }
    .openMenu h1,
    .top h1{
        text-align: center;
        font-size: 3rem;
    }
    .openMenu .navbar{
        display: none;
    }
    .footer{
        height: 10rem;
        text-align: center;
        font-size: 2rem;
        padding-top: 2rem;
        color: #fff;
        background-color: #135;
    }
    .footer a{
        text-decoration: none;
        color: #0275D8;
        font-size: 2rem;
        transition: .5s;
    }
    .footer a:hover{
        color: #fff;
    }
    .btn{
        background-color: #0275D8;
        border-bottom: .35rem solid #025AA5;
        border-radius: 5rem;
        width: 15rem;
        padding: 1rem;
        top: 20%;
        position: relative;
        margin: auto;
        transition: .5s;
    }
    .btn:hover{
        background-color: #025AA5;
        border-bottom: .35rem solid rgb(52, 141, 214);
    }
    .nav{
        background-color: #135;
        border-radius: .3rem;
        height: 5rem;
        width: 5rem;
        padding: 1rem;
        text-align: center;
        transition: .5s;
    }
    .nav:hover{
        background-color: #DEDEF5;
        color: white;
        cursor: pointer;
    }
    .nav:hover a{
        color: black;
        cursor: pointer;
    }
    .nav a{
        text-decoration: none;
        font-size: 2rem;
        color: #fff;
    }
    
    .navbar{
        display: grid;  
        grid-template-columns: repeat(7,1fr);
        grid-gap: .5rem;
        padding: 3rem;
        width: 100%;
        background-color: #135;
        z-index: 90;
        position: fixed;
        top: 9rem;
    }
    .navbars{
        display: none;  
        grid-template-columns: repeat(13,1fr);
        grid-gap: .5rem;
        margin: 0;
        padding: 2rem;
        width: 100%;
        background-color: #135;
        position: fixed;
    }
    div h1{
        font-size: 4rem;
        color: #fff;
        font-weight: normal;
        text-align: center;
        display: inline-block;
    }
    .container {
        background-color: #DEDEF5;
        margin-bottom: 5rem;
        margin-left: 10%;
        margin-right: 10%;
        border-bottom: .5rem solid rgba(128, 128, 128, .3);
        border-right: .5rem solid rgba(128, 128, 128, .3);
        border-radius: 1rem;
        height: 25rem;
        width: auto;
        font-size: 1.5rem;
        font-weight: 500;
        padding: 2rem;
    }
    .container_drop{
        margin-top: 10%;
    }
    .logo{
        height: 2.5rem;
        margin-right: 2.5rem;
    }
    .about{
        float:left;
        width: 65%;
        height: 100%;
    }
    .contact{
        width: 25%;
        float: right;
        text-align: center;
        height: 100%;
    }
    .address{
        height: 70%;
        font-size: 1.6rem;
        padding-top: 2.5rem;;
    }
    
    .website{
        height: 30%;
    }
    .website a{
        text-decoration: none;
        font-size: 2rem;
        color: aliceblue;
    }
    .company{
        height: 30%;
        padding-top: 1.5rem;
        padding-left: 1.5rem;
        border-radius: 1rem;
        border-left: .5rem solid rgba(128, 128, 128, .5);
        border-top: .5rem solid rgba(128, 128, 128, .5);
        font-size: 2rem;
    }
    .technologies{
        padding-top: 5rem;
        height: 70%;
        font-size: 1.6rem;
    }
    
}
@media (max-width: 390px)
{
    
    .address{
        font-size: 1.3rem;
    }
    .btn{
        width: 12rem;
    }
    .technologies{
        font-size: 1.6rem;
    }
    .btn a{
        font-size: 1.7rem;
    }
}
@media (max-width: 320px)
{
    
    html{
        font-size: 5px;
    }
}