@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat&family=Poppins&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth
}

body{
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

/* -----------------------------------------------Media Queries------------------------------------------------------------------- */



@media (max-width: 992px) {
    .header{
        padding: .7rem 5%;
    }
    .about .container{
        margin: 0 5% 3% 5%;
    }
}



@media (max-width: 768px) {
    .icons{
        display: block;
    }
    #check:checked~.icons #menu-icon{
        display: none;
    }
    .icons #close-icon{
        display: none;
    }
    #check:checked~.icons #close-icon{
        display: block;
    }
    .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 0;
        background-color: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(50px);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
        overflow: hidden;
        transition: .3s ease;
    }
    #check:checked~.navbar{
        height: 17rem;
    }
    .navbar a{
        display: block;
        margin: 1.5rem 0;
        font-weight: 600;
        text-align: center;
        transform: translateY(-50px);
        transition: .3s ease;
        opacity: 0;
    }
    #check:checked~.navbar a{
        transform: translateY(0);
        opacity: 1;
        transition-delay: calc(.15s * var(--i));
    }
    .home .title h1{
        font-size: 40px;
    }
    .home .title .sub-title{
        font-size: 20px;
    }
}



@media (min-width: 425px){
    .home .title h1{
        font-size: 55px;
    }

}

@media (max-width: 425px){
    .about .container{
        display: block;
        margin: 2% 5%;
        text-align: left;
    }
    .about .container .about-img img{
        display: none;
    }
    .about .container .about-desc{
        margin-top: 3%;
    }
}



@media (max-width: 375px) {
    #logo{
        width: 180px;
        height: 70px;
    }
    .home .title h1{
        font-size: 45px;
    }
}



@media (max-width: 320px){
    .home .title h1{
        font-size: 40px;
    }
    .home .title .sub-title{
        font-size: 15px;
    }
}

@media (min-width:950px) and (max-width: 1200px){
    .about .container .about-desc{
        font-size: 12px;
    }
}

@media screen and (max-width: 950px) {
    .about .container {
        flex-direction: column; 
        text-align: center;
    }

    .about .container .about-desc {
        max-width: 100%;
        margin: 10% 5%; 
        font-size: 15px;
        line-height: 30px;
    }
}

@media (min-width: 1200px) and (max-width: 1340px){
    .about .container .about-desc{
        font-size: 15px;
    }
}