@media only screen and (max-width:719px){
    *{
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
        font-family: "Poppins", serif;
    }
    
    .container{
        padding: 0 10px;
    }
    
    .row{
        display: flex;
        flex-wrap: wrap;
    }
    
    
    header{
        color: white;
        background-image: url(./hero-img.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        z-index: -10;
    }
    
    header::before{
        content: "";
        background-color: rgba(255, 0, 191, 0.146);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -9;
    }
    
    header .top .container .row{
        justify-content: space-between;
        padding: 15px 0;
    }
    
    header .top .container .row .logo{
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100%;
        justify-content: center;
        cursor: pointer;
    }
    
    header .top .container .row .logo div{
        background-color: cyan;
        padding: 7px 5px 7px 14px;
        border-radius: 50%;
        font-size: 1.2rem;
        color: #000;
        font-weight: 900;
    }
    header .top .container .row .logo h1{
       font-size: 0.5rem;
    }
    
    header .top .container .row ul{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        list-style-type: none;
        width: 100%;
    }
    
    header .top .container .row ul li a{
        text-decoration: none;
        color: #ffffff;
        font-size: 0.5rem;
        font-weight: 100;
    }
    
    
    header .hero-section .container .row{
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        padding: 15px 0;
        align-items: center;
        text-align: center;
    }
    
    header .hero-section .container .row h1{
        font-size: 1rem;
        font-weight: 900;
    }
    
    header .hero-section .container .row p{
        font-size: 0.5rem;
        font-weight: 800;
        color: #9c9c9c;
    }
    
    
    header .hero-section .container .row .hero-btn{
        font-size: 0.3rem;
        font-weight: 900;
        color: #ffffff;
        background-color: crimson;
        padding: 10px;
        border-radius: 12px;
        margin-top: 20px;
    }
    
    #get-touched .container .row{
        flex-direction: column;
        gap: 30px;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 40px 0;
    }
    
    #get-touched .container .row h1{
        font-size: 0.6rem;
        font-weight: 700;
    }
    
    #get-touched .container .row div{
        background-color:rgb(0, 123, 132);
        width: 100px;
        height: 3px;
    }
    
    #get-touched .container .row p{
        font-size: 0.4rem;
        font-weight: 400;
        color: #9c9c9c;
    }

    #get-touched .container .row button{
        font-size: 0.5rem;
        font-weight: 700;
        color: #ffffff;
        background-color: rgb(0, 123, 132);
        padding: 7px;
        border-radius: 12px;
        margin-top: 20px;
    }
    
    #about-us{
        background-color: #878787;
    }
    
    #about-us .container .row{
        padding: 30px  0px;
        justify-content: center;
        /* align-items: center; */
        text-align: justify;
    }
    
    #about-us .container .row .left{
        width: 100%;
    }
    
    #about-us .container .row .left h1{
       font-size:2rem ;
       font-weight: 600;
       color: aliceblue;
    }
    
    #about-us .container .row .left div{
        width: 150px;
        height: 3px;
        background-color: #ffffff;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    #about-us .container .row .right{
        width: 100%;
        font-size: 0.5rem;
        font-weight: 700;
        color: aliceblue;
    }
    
    #portfolio{
        padding: 20px 0;
    }
    
    #portfolio .top .container .row{
        justify-content: space-between;
        margin-bottom: 40px;
    }
    #portfolio .top .container .row .left h1{
        font-size: 1.8rem;
        font-weight: 700;
    }
    
    #portfolio .top .container .row .left div{
        width: 100px;
        height: 3px;
        background-color: #000;
        margin-top: 1px;
        margin-bottom: 10px;
    }
    #portfolio .top .container .row .right{
        display: flex;
        gap: 15px;
        font-size: 0.5rem;
        width: 100%;
        justify-content: space-around;
    }
    
    
    #portfolio .top .container .row .right div:first-child{
        background-color: rgba(255, 0, 191, 0.788);
        height: 14px;
        padding: 0px 15px 0px 15px;
        border-radius: 8px;
    }

    #portfolio .mid .container .row{
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 10px auto;
    }
    
    #portfolio .mid .container .row>img{
        width: 99%;
        height: 300px;
        object-fit: cover;
        border: 2px solid black;
        margin: 10px 0;
    }
    
    #portfolio .mid .container .row .fst{
        width: 99%;
        height: 300px;
        object-fit: cover;
        border: 2px solid black;
        position: relative;
        z-index: -20;
        margin: 10px 0;
    }
    
    #portfolio .mid .container .row .fst img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
        z-index: -20;
        cursor: pointer;
    }
    
    
    #portfolio .mid .container .fst div{
        background-color: rgba(255, 0, 191, 0.265);
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -9;
        text-align: center;
        align-content: center;
        font-size: 50px;
        color: #ffffff;
        cursor: pointer;
    }
    
    
    #portfolio .mid .container .fst h2{
        background-color: rgba(255, 0, 191, 0.518);
        height: 30;
        width: 100%;
        position: absolute;
        /* top: 0; */
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -8;
        text-align: center;
        align-content: center;
        font-size: 50px;
        color: #ffffff;
        font-size: 1rem;
    }
    
    
    
    #portfolio .bottom .container .row{
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 10px auto;
    }
    
    #portfolio .bottom .container .row img{
        width: 99%;
        height: 300px;
        object-fit: cover;
        border: 2px solid black;
        margin: 10px auto;
    }
    
    #customer-feedback .container{
        padding-top: 20px;
        padding-bottom: 60px;
    }
    
    #customer-feedback{
        position: relative;
    }
    
    #customer-feedback .bg{
        position: absolute;
        background-color:rgb(0, 191, 255) ;
        height: 300px;
        width: 100%;
        z-index: -50;
        bottom: 0;
    }
    
    #customer-feedback .container .row{
        justify-content: center;
    }
    
    #customer-feedback .container .row .left{
        text-align: center;
        width: 100%;
    }
    
    #customer-feedback .container .row .left h3{
        font-size: 1.5rem;
        padding: 40px;
        color: #002d3e;
    }
    
    
    #customer-feedback .container .row .left img{
        width: 250px;
        height: 250px;
        object-fit: cover;
        border: 3px solid rgb(0, 191, 255);
        border-radius: 50%;
    }
    
    #customer-feedback .container .row .right{
        text-align: left;
        justify-content: end;
        width: 100%;
        padding-top: 0px;
    }
    #customer-feedback .container .row .right h4{
        font-size: 1.3rem;
        /* line-height: 50px; */
        color: #002d3e;
    }
    #customer-feedback .container .row .right p{
        font-size: 1rem;
        color: #636363;
    }
    
    #our-team .container{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    #our-team .container h1{
        font-size: 2rem;
        color: #484848;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #our-team .container .line{
        background-color: #002d3e;
        height: 3px;
        width: 180px;
        margin-top: 10px;
        margin-bottom: 40px;
    }
    
    #our-team .container .row{
        justify-content: space-between;
    }
    
    #our-team .container .row .profile{
        width: 99%;
        margin-bottom: 10px;
    }
    
    #our-team .container .row .profile .top{
        width: 100%;
        height: 80%;
    }
    #our-team .container .row .profile .top img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #our-team .container .row .profile .mask{
        width: 100%;
        height: 80%;
        position: relative;
    }
    
    #our-team .container .row .profile .mask img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #our-team .container .row .profile .mask .scl-icon{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #00465f57;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    
    #our-team .container .row .profile .text{
        background-color: #00465f57;
        text-align: center;
        padding: 11px;
    }
    
    #our-team .container .row .profile .text h3{
        font-size: 1.5rem;
        color: #585858;
    }
    
    #our-team .container .row .profile .text h4{
        font-size: 1rem;
        color: #393939;
    }
    
    #contact-us{
        background-image: url(../image/contact\ us.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        z-index: -10;
    }
    
    #contact-us::before{
        content: "";
        background-color: rgba(132, 0, 255, 0.217);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -9;
    }
    
    #contact-us .container{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    #contact-us .container .row{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 40px;
    }
    
    
    #contact-us .container .row h2{
        color: #ffffff;
        font-size: 1rem;
        font-weight: 900;
    }
    
    #contact-us .container .row button{
        color: #ffffff;
        padding: 10px 30px;
        background-color: crimson;
        font-size: 0.8rem;
        font-weight: 600;
        border-radius: 8px;
    }
    
    #our-service .container{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    #our-service .container h1{
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 70px;
    }
    
    #our-service .container .line{
        background-color: #002d3e;
        height: 3px;
        width: 100px;
    }
    
    #our-service .container .row{
        padding: 20px 0;
    }
    
    #our-service .container .row .icon-tabs{
        width: 100%;
        text-align: center;
        padding: 30px 60px;
    }
    #our-service .container .row .icon-tabs i{
        font-size: 60px;
    }
    #our-service .container .row .icon-tabs h2{
        font-size: 25px;
        line-height: 50px;
    }
    #our-service .container .row .icon-tabs h4{
        font-size: 10px;
        font-weight: 300;
        color: #4a4a4a;
        line-height: 20px;
        text-align: center;
    }
    
    #derk-bg{
        background-color: #6e6d6d;
    }
    
    #derk-bg .container{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    #derk-bg .container h2{
       font-size: 1rem;
        text-align: center;
        color: #ffffff;
        font-weight: 200;
    }
    
    #get-in-touch .container{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    #get-in-touch .container h1{
        font-size: 1.8rem;
        line-height: 4rem;
        font-weight: 900;
    }
    
    
    #get-in-touch .container .line{
        background-color: #002d3e;
        height: 3px;
        width: 120px;
    }
    
    #get-in-touch .container .row{
        padding: 40px 0;
    }
    
    #get-in-touch .container .row .left{
        width: 100%;   
    }
    
    #get-in-touch .container .row .left h2{
        font-size: 1.2rem;
        line-height: 5rem;
        font-weight: 800;
        color: #5b5b5b;   
    }
    
    #get-in-touch .container .row .left h3{
        font-size: 1rem;
        line-height: 1.2rem;
        font-weight: 200;
        color: #5b5b5b;
        margin-bottom: 20px;   
    }
    
    #get-in-touch .container .row .left h4{
        font-size: 1rem;
        line-height: 1.3rem;
        font-weight: 200;
        color: #5b5b5b;   
    }
    
    
    #get-in-touch .container .row .right{
        width: 100%;
        padding-top: 20px;
    }
    
    #get-in-touch .container .row .right form{
        width: 50%;
        display: flex;
        flex-direction: column;
        gap: 50px;
    }
    
    #get-in-touch .container .row .right form input{
        width: 100%;
        border: none;
        border-bottom: 1px solid gray;   
    }
    
    #get-in-touch .container .row .right form button{
        width: 100px;
        border-radius: 9px;
        background-color: crimson;
        padding: 4px ;
        color: #ffffff;
        font-weight: 700;
        font-size: 0.5rem;   
    }
    
    footer{
        background-color: #656565;
        padding: 10px 0;
        text-align: center;
        color: #ffffff;
        font-size: 0.4rem;
        font-weight: 300;
        font-size: 0.6rem;
    }
    
    
}