@media (min-width:0px) and (max-width:667px) {
    
    #header{
        width: 100%;
        height: 100vh;
        background-image: url(../images/Bg_Image.jpeg)no-repeat center center/cover;
    }
    .tab-titles{
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        line-height: 30px;
    }
    .tab-titles p{
        font-size: 1.5em;
    }
    .tab-links::after{
        height: 2px;
        bottom: -1px;
    }
    .logo img{
        margin-top: 5px;
        height: 3.5rem;
    }
    hr{
        width: 80%;
    }
    .back-top{
        margin-left: 16rem;
    }
    #sidemenu a{
        background-color: #ff004f;
    }
    .contact-left p{
        font-size: 1.2rem;
    }
    .copyright p{
        font-size: 1rem;
    }
}

@media only screen and (max-width: 600px){
    .header-text{
        margin-top: 100%;
        font-size: 16px;
        margin-left: 1rem;
    }
    .header-text h1{
        font-size: 30px;
    }
    nav .fa-solid{
        display: block;
        font-size: 25px;
    }
    nav ul{
        background: #ff004f;
        position: fixed;
        top: 0;
        right: -220px;
        width: 150px;
        /* height: 100vh; */
        padding-top: 50px;
        z-index: 2;
        transition: right 0.5s;
    }
    nav ul li{
        display: block;
        margin: 25px;
    }
    nav ul .fa-solid{
        position: absolute;
        top: 25px;
        left: 25px;
        cursor: pointer;
    }
    .sub-title{
        font-size: 40px;
    }
    .about-col-1, .about-col-2{
        flex-basis: 100%;
    }
    .about-col-1{
        margin-bottom: 30px;
    }
    .about-col-2{
        font-size: 14px;
    }
    .tab-links{
        font-size: 16px;
        margin-right: 20px;
    }
    .contact-left, .contact-right{
        flex-basis: 100%;
    }
    .copyright{
        font-size: 14px;
    }
}
/* ------------------- */

@media (max-width:280px) {
    .back-top{
        margin-left: 11rem;
    }
    .contact-left p{
        font-size: 0.8rem;
    }
    .services-list div{
        margin-right: 20px;
    }
    .work-list .work{
        margin-right: 20px;
    }
}
/* ----------- */

@media (min-width:360px) and (max-width:393px) {
    #header{
        height: 100vh;
    }
    .back-top{
        margin-top: -15rem;
        margin-left: 17rem;
    }
    .logo img{
        height: 3.5rem;
    }
    .header-text{
        margin-top: 10rem;
    }
}
/* -------------------- */
@media (min-width:394px) and (max-width:412px) {
    #header{
        height: 100vh;
    }
    .back-top{
        margin-left: 19rem;
    }
}
@media (min-width:413px) and (max-width:414px){
    .back-top{
        margin-left: 19.5rem;
    }
}
/* ------------------- */
@media (min-width:415px) and (max-width:540px) {
    #header{
        height: 100vh;
    }
    .back-top{
        margin-left: 27rem;
    }
    .header-text{
        margin-top: 15rem;
    }
    .logo img{
        height: 3.5rem;
    }
}
/* ----------------- */

@media (min-width:668px) and (max-width:768px){
    .back-top{
        margin-left: 41rem;
    }
    #sidemenu {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        margin-left: 25px;
        margin-top: 10px;
    }
    #sidemenu a{
        font-weight:bolder;
        font-size: 1.5rem;
        border-radius: 10px;
    }
    .logo img{
        height: 3rem;
        margin-top: -285px;
    }
    .about-col-1{
        margin-left: 16rem;
    }
}

@media (min-width:769px) and (max-width:820px){
    .back-top{
        margin-left: 45rem;
    }
    .logo img{
        height: 3.5rem;
        margin-top: -285px;
    }
    #sidemenu{
        display: flex;
        flex-wrap: nowrap;
        margin-top: 10px;
    }
    #sidemenu a{
        font-weight:bolder;
        font-size: 1.8rem;
        border-radius: 10px;
    }
    .about-col-1{
        margin-left: 17rem;
    }

}
@media (min-width:821px) and (max-width:912px){
    .back-top{
        margin-left: 50rem;
    }
    #sidemenu{
        margin-top: 30px;
    }
    #sidemenu a{
        font-weight:bolder;
        font-size: 1.9rem;
        border-radius: 10px;
    }
    .header-text{
        margin-top:10rem;
    }
    .about p{
        font-size: 2rem;
    }
    .header-text span{
        font-weight: 900;
        font-size:xx-large;
    }
    .contact-left p{
        font-size: 2rem;
    }
    .contact-left p i{
        font-size: 30px;
    }
    .social-icons a{
        font-size: 40px;
    }
    .social-icons .fa-whatsapp{
        font-size: 45px;
    }
    .btn.btn2{
        font-size: 1.5rem;
    }
    .about-col-1 img{
        margin-left: 18rem;
    }
}
@media (min-width:913px) and (max-width:1024px){
    .back-top{
        margin-left: 57rem;
    }
    #sidemenu{
        margin-top: 10px;
    }
    #sidemenu a{
        font-weight:bolder;
        font-size: 1.5rem;
        border-radius: 10px;
    }
    .header-text{
        margin-top: -10rem;
    }
    .about p{
        font-size: 2rem;
    }
    .contact-left p{
        font-size: 2rem;
    }
    .contact-left p i{
        font-size: 30px;
    }
    .social-icons a{
        font-size: 40px;
    }
    .social-icons .fa-whatsapp{
        font-size: 45px;
    }
    .btn.btn2{
        font-size: 1.5rem;
    }
    .logo img{
        margin-top: -280px;
    }
    .about-col-1 img{
        margin-left: 20rem;
    }
}
@media (min-width:1025px) and (max-width:1280px){
    .back-top{
        margin-left: 73rem;
    }
}