@media only screen and (min-width:546px) and (max-width:768px) {

    /* header */
    a.navbar-brand {
        width: 35%;
        margin: 0;
    }
    .talent-box {
        gap: 7px;
    }
    .button-box .hbtn {
        font-size: 16px;
        padding: 5px 23px 5px 23px;
        margin-right: 10px;
    }
    button.offcanvasbtn img {
        width: 60%;
    }
    .offcanvas-end {
        width: 300px !important;
    }
    .offcanvasmenu ul li a {
        font-size: 20px;
        line-height: 35px;
    }
    .staycoffcan h5 {

        font-size: 23px;
    }

    input#service {
        padding: 3px 0 3px 12px;
        font-weight: 700;
        font-size: 18px;
    }
    input#date {
        padding: 3px 0 3px 12px;
        font-weight: 700;
        font-size: 18px;
    }
    input#location {
        padding: 3px 0 3px 12px;
        font-weight: 700;
        font-size: 18px;
    }
    button.btn.btn-primary.btnformsearch {
        font-size: 16px;
        padding: 5px 23px 5px 23px;
        margin: 0;  
    }
    input#service::placeholder {
        font-size: 18px;
        font-weight: 700;
    }
    input#date::placeholder {
        font-size: 18px;
        font-weight: 700;
    }
    input#location::placeholder {
        font-size: 18px;
        font-weight: 700;
    }


    /* banner */


    /* sec-1 */

    .sec1h h1 {
        font-size: 40px; 
        padding-top: 25px;
        padding-bottom: 15px;
    }
    .box1 h1 {
        font-size: 19px;
        line-height: 27px;  
        padding-bottom: 70px;
    }
    .box2 h1 {
        font-size: 19px;
        line-height: 27px;  
        padding-bottom: 70px;
    }
    .box3 h1 {
        font-size: 19px;
        line-height: 27px;  
        padding-bottom: 70px;
    }
    .box1 img {
        width: 60%;
    }
    .box2 img {
        width: 60%;
    }
    .box3 img {
        width: 60%;
    }
    .btns1 {
        font-size: 16px;
        padding: 5px 23px 5px 23px;
        margin: 0;  
    }
    .box1 {
        padding: 30px 0 30px 0;
    }
    .box2 {
        padding: 30px 0 30px 0;
    }
    .box3 {
        padding: 30px 0 30px 0;
    }
    a.btn2s1 {
        font-size: 25px;
        margin: 0;
    }
    .btnsec1end{
        padding-top: 25px;
    }
    .sec2col1 h1 {
        font-size: 40px;
        line-height: 50px;
    }
    a.btnsec2 {
        font-size: 16px;
        padding: 5px 23px 5px 23px;
        margin: 0;
    }
    .sec2carousel {
        padding-top: 0px;
        padding-left: 0px;
    }
    /* sec-1 */

    /* sec-3  */
    .sec3 {
        padding-top: 62px;
        padding-bottom: 62px;
        margin-top: 30px;
        margin-bottom: 42px;
    }
    /* sec-3  */



    .colmenu3 {
        padding-left: 35px;
        padding-top: 10px;
    }
    .fanchor a {
        font-size: 16px;
    }
    .footer h1 {
        font-size: 20px;
    }
    .colmenu4 {
        padding-top: 10px;
    }
    .footer .col-4 {
        padding: 0;
    }   
    .icons a img {
        height: 25px;
        margin-right: 15px;
    }
    img.paymentimg {
        width: 90%;
    }
    .icons {
        padding-left: 10px;
    }

    /* secondary footer */


    .secondaryfooter h1 {
        font-size: 16px; 
    }
    .secondaryfooter h2 {
        font-size: 14px;
        padding-top: 11px;
    }

}


@media (min-width: 1601px) and (max-width: 1800px){
    .formsec {
     position: absolute;
     width: 100%;
     bottom: -60px;
 }
 .carousel-caption h5 {
    padding-bottom: 220px;
    width: 85%;
    margin: 0 auto;
}
}

@media (min-width: 1501px) and (max-width: 1600px){
    .formsec {
     position: absolute;
     width: 100%;
     bottom: -10px;
 }
 .carousel-caption h5 {
    padding-bottom: 206px;
    width: 85%;
    margin: 0 auto;
}
}


@media (min-width: 1401px) and (max-width: 1500px){
    .formsec {
     position: absolute;
     width: 100%;
     bottom: -21px;
 }
 .carousel-caption h5 {
    padding-bottom: 200px;
    width: 85%;
    margin: 0 auto;
}
}

@media (min-width: 1500px) and (max-width: 1600px){
    .formsec {
     position: absolute;
     width: 100%;
     bottom: -66px;
 }
 .carousel-caption h5 {
     padding-bottom: 24%;
     width: 85%;
     margin: 0 auto;
 }
 }

 @media (min-width: 1451px) and (max-width: 1500px){
    .formsec {
     position: absolute;
     width: 100%;
     bottom: -21px;
 }
 .carousel-caption h5 {
     padding-bottom: 24%;
     width: 85%;
     margin: 0 auto;
 }
 }

@media (min-width: 1401px) and (max-width: 1450px){
    .formsec {
     position: absolute;
     width: 100%;
     bottom: -21px;
 }
 .carousel-caption h5 {
     padding-bottom: 23%;
     width: 85%;
     margin: 0 auto;
 }
 }

@media (min-width: 1300px) and (max-width: 1400px){
    .formsec {
     position: absolute;
     width: 100%;
     bottom: 15px;
 }
 .carousel-caption h5 {
     padding-bottom: 26%;
     width: 85%;
     margin: 0 auto;
 }
 }

 @media (min-width: 1200px) and (max-width: 1299px){
   .formsec {
    position: absolute;
    width: 100%;
    bottom: 80px;
}
.carousel-caption h5 {
    padding-bottom: 34%;
        width: 88%;
        margin: 0 auto;
}
}

@media (min-width: 320px) and (max-width: 980px) {

    .yellow-circle {
        border-radius: 50%;
        position: relative;
        margin-top: 1rem !important;
        margin-bottom: 14px !important;
    }
    .talent-box {
        gap: 6px !important;
    }
    
}

@media (max-width: 400px) {
    .row.justify-content-end.map-indicator-box img {
        width: 70% !important;

    }
    .row.justify-content-end.map-indicator-box {
        width: 100% !important;
    }
}

@media (min-width: 401px) and (max-width: 900px) {
    .row.justify-content-end.map-indicator-box img {
        width: 31% !important;

    }
    .row.justify-content-end.map-indicator-box {
        width: 100% !important;
    }
}
@media (min-width: 980px) and (max-width: 1400px) {

    .yellow-circle {
        border-radius: 50%;
        position: relative;
        margin-top: 1rem !important;
        margin-bottom: 14px !important;
    }
    .talent-box {
        gap: 10px !important;
    }
}

@media (min-width: 320px) and (max-width: 767px) {

    .col-sm-12.about-me {
        padding: 50px 46px 81px 76px !important;
    }
    
    
    .col-sm-8.bullet-points {
        padding: 50px 65px 111px 57px !important;
    }

    .col-sm-12.about-us {
        padding: 50px 46px 50px 150px !important;
    }

    a.navbar-brand {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    a.navbar-brand img {
        width: 95%;
        padding-right: 5px;
    }
    .button-box .hbtn {
        font-size: 15px;
        margin: 10px 10px 10px 0;
        padding: 5px 10px 5px 10px;
    }
    button.offcanvasbtn img {
        width: 55%;
    }
    .col.button-box {
        padding-left: 10px;
    }

    .sec2col1 h2 {
        font-size: 40px;
    }
    
    .sec2col1 h4 {
        font-size: 40px;
        width: 100%;
    }

    
    .sec1h h1:before {
        content: '';
        background-image: url(../images/beforeimage1.png);
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        height: 23px;
        width: 55px;
        white-space: nowrap;
        left: -10px;
        top: 25px;
    }


    /* sec-1 */

    .sec1h h1 {
        font-size: 24px;
        padding-top: 17px;
        padding-bottom: 10px;
    }
    .sec1h {
        background-image: none;
    }
    .sec2 .col-6 {
        width: 100%;
    }
    .sec2col1 h1{
        font-size: 30px;
        text-align: center;
    }
    .sec2col1 h1 {
        font-size: 30px;
        width: 65%;
        line-height: 45px;
        margin: 0 auto;
    }
    .btnsec2 {
        font-size: 15px;
        margin: 0 0px 0 0;
        padding: 5px 30px 5px 30px;
 
    }
    .sec2 {
        padding-top: 30px;
        padding-bottom: 40px;
    }
    .sec2carousel {
        padding-top: 40px;
        padding-left: 0px;
    }
    .sec3 {
        padding-top: 50px;
        padding-bottom: 50px;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .footer .col-5{
        width: 95%;
        margin: 0 auto;
    }
    .colmenu3 {
        padding-left: 0;
        padding-top: 30px;
    }
    .footer .col-3 {
        width: 100%;
        text-align: center;
    }
    .colmenu4 {
        padding-top: 35px;
        padding-bottom: 50px;   
        display: block;
    }
    .footer .col-4 {
        width: 100%;
        text-align: center;
    }
    img.paymentimg {
        margin: 0 auto;
    }
    .icons a img {
        height: 30px;
        margin-right: 0;
        padding-right: 5px;
    }
    .footer {

        padding-top: 20px;
    }

    .secondaryfooter h1 {
        font-size: 17px;
        padding: 15px 0 0 0;

        text-align: center;
    }
    .secondaryfooter .col-8 {
        width: 100%;
    }
    .secondaryfooter .col-4 {
        width: 100%;
    }
    .secondaryfooter h2 {
        text-align: center;
        padding: 10px 0px 15px 0px;
        margin: 0;
    }
    a.btn2s1 {
        font-size: 25px;
        margin: 0 0px 0 0;
        padding: 5px 30px 5px 30px;
    }
    .col.box3 {
        margin-right: 0px;
        margin-left: 25px;
        margin-top: 20px;
        padding: 40px 0 50px 0;
    }
    .col.box2 {
        margin-top: 20px;
        margin-right: 0;
        margin-left: 21px;
        padding: 40px 0 50px 0;
    }
    .col.box1 {
        margin-right: 0;
        margin-left: 21px;
        padding: 40px 0 50px 0;
    }
    .formsec .col-3 {
        flex: 0 0 auto;
        width: 100%;
    }
    /* .formsec {
        position: absolute;
        padding-top: 25px;
        bottom: 0px;
    } */
    .formsec .col-1 {
        width: 100%;
        text-align: center;
    }
    .box1 h1 {
        font-size: 27px;
        padding-bottom: 90px;
        padding-top: 35px;
    }
    .box2 h1 {
        font-size: 27px;
        padding-bottom: 90px;
        padding-top: 35px;
    }
    .box3 h1 {
        font-size: 27px;
        padding-bottom: 90px;
        padding-top: 35px;
    }
    .btnsec1end {
        padding-top: 33px;
    }
    .btnsec1end {
        margin-left: 10px;
    }

}