/* 1920  */
@media only screen and (min-width: 1600px){
    body, p {
        font-size: 14px;
    }
    .container {
        max-width: 1440px;
    }
    .banner-text{
        max-width: 40%;
    }
    .banner-text h1 {
        font-size: 68px;
    }
    .banner-text p {
        font-size: 15px;
    }
    .btn {
        height: 42px;
        line-height: 42px;
    }
    .exp h3 {
        font-size: 40px;
    }
    .exp h6 {
        font-size: 18px;
    }
    .about-text {
        padding: 0 0 0 80px;
    }
    .about-text h2, .section-heading h2 {
        font-size: 45px;
    }
    .service-box a.desc {
        font-size: 22px;
    }
    .serv-icon {
        height: 70px;
        width: 70px;
    }
    .whyus-box h5, .spec-text h5 {
        font-size: 20px;
    }
    .form-group .bi {
        top: 2px;
    }


}

@media only screen and (min-width: 1366px) and (max-width: 1599px){
    .container{
        max-width: 86%;
    }
}

/* 992  */
@media only screen and (max-width: 1199px){
    .con-box, .con-box a {
        font-size: 14px;
    }
    .navbar-nav li {
        margin: 0 10px;
    }
    .navbar-nav li a {
        font-size: 12px;
    }
    .myHeader .btn {
        height: auto;
        line-height: normal;
        font-size: 12px;
        font-weight: 500;
        max-width: 120px;
        text-wrap: wrap;
        padding: 8px 24px;
        min-width: 148px;
    }
    .banner-text h1 {
        font-size: 47px;
        margin-bottom: 12px;
    }
    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
        left: -24px;
    }
    .owl-carousel .owl-nav button.owl-next {
        left: auto;
        right: -24px;
    }
    .about-text h2, .section-heading h2 {
        font-size: 36px;
    }
    .ab-grid .exp {
        padding: 24px 20px;
        margin: 20px 40px 0 0;
    }
    .about-text {
        padding: 0 0 0 20px;
    }
    .sec-space {
        padding: 80px 0;
    }
    .service-box h6 {
        margin-bottom: 0;
    }
    .service-box h6 a {
        letter-spacing: 0px;
    }
    .service-desc {
        padding: 12px;
    }
    .service-box a.desc {
        font-size: 18px;
        -webkit-line-clamp: 1;
    }
    .whyus .about-text {
        padding: 0 20px 0 0;
    }
    .spec-box .serv-icon {
        height: 57px;
        width: 57px;
    }
    .spec-box p {
        line-height: 1.4;
    }
    .spec-text h5 {
        font-size: 16px;
        margin-bottom: 4px;
    }
    .footer-logo.navbar-brand img {
        height: 140px;
    }
    .main-footer h3 {
        font-size: 18px;
        margin-bottom: 20px;
    }

    /* About Page  */
    .mission-box {
        padding: 40px 24px 24px;
    }
    .about-cms .ab-wrap:nth-child(odd) .about-text {
        padding: 0 20px 0 0;
    }
}

/* 768  */
@media only screen and (max-width: 991px){
    .navbar-collapse{
        position: absolute;
        top: 108%;
        left: 0;
        width: 100%;
        background: var(--white);
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 14px 0px;
        border-bottom: 4px solid var(--red);
        padding: 20px;
        z-index: 999999;
    }
    .myHeader .navbar-nav li:not(:last-child) {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid #dc354536;
    }
    .navbar-toggler-icon .bi{
        color: var(--red);
    }
    .navbar-toggler{
        padding: 0;
        margin-left: 4px;
        font-size: 2rem;
    }
    .navbar-toggler:hover, .navbar-toggler:focus{
         border: none;
         outline: none;
    }
    .navbar-toggler-icon {
        height: auto;
        width: auto;
        font-size: 28px;
    }
    .nav-text{
        margin-left: auto !important;
    }
    .banner-text-wrap, .contact .section-heading {
        padding-left: 24px;
    }
    .banner-text h1 {
        font-size: 36px;
    }
    .about-text h2, .section-heading h2 {
        font-size: 28px;
    }
    .btn, input[type="submit"] {
        height: 38px;
        line-height: 38px;
        font-size: 12px;
        padding: 0 20px;
    }
    .about-text {
        padding: 0;
    }
    .about-img {
        padding-top: 84%;
    }
    .row{
        row-gap: 24px;
    }
    .sec-space{
        padding: 68px 0;
    }
    .section-heading {
        margin-bottom: 30px;
    }
    .why-icon {
        height: 75px;
        width: 75px !important;
    }
    .whyus .row{
        row-gap: 60px;
    }
    .whyus::before {
        content: "";
        width: 100%;
        height: 50%;
    }
    .whyus-list .whyus-box:nth-child(even) {
        margin-left: 60px;
    }
    .whyus-list .whyus-box:nth-child(odd) {
        margin-left: 20px;
    }
    .contact-form {
        padding: 20px;
    }
    .form-group {
        position: relative;
        margin-bottom: 1rem;
    }
    .form-group .bi {
        font-size: 16px;
        top: 6px;
    }
    .form-control, .es-email {
        padding: 8px 12px 8px 26px;
    }
    .es-form-field-container {
        flex-direction: row;
        max-width: 80%;
        margin-top: 8px;
    }
    .gjs-row:nth-child(2){
        flex-grow: 1;
    }    
    .footer-row {
        padding: 68px 0 40px;
    }

    /* About Page  */
    .inner-banner{
        padding: 84px 0;
    }
    .mission  .row{
        row-gap: 40px;
    }
    .about-cms .ab-wrap:nth-child(odd) .about-text {
        padding: 0;
    }


    /* Single Service  */
    .single-service .about-img {
        padding-top: 68%;
    }

    .modal-dialog {
        max-width: 600px;
    }
    .modal-form {
        padding: 24px;
    }
    .modal-form .form-group {
        margin-bottom: 8px;
    }
}

/* 576  */
@media only screen and (max-width: 767px){
    .banner::before {
        width: 68%;
    }
    .banner-text-wrap, .contact .section-heading {
        border-left: 4px solid var(--red);
        padding-left: 18px;
    }
    .banner-text {
        max-width: 52%;
    }
    .banner-text h1 {
        font-size: 32px;
    }
    .banner-text p {
        line-height: 1.5;
        font-weight: 500;
    }
    .banner-img {
        padding-top: 75%;
    }
    .ab-grid .exp {
        padding: 16px 20px;
        margin: 14px 40px 0 0;
    }
    .whyus-box {
        padding: 18px 18px 18px 75px;
    }
    .contact-img {
        position: static;
        width: 100%;
        max-height: 360px;
        overflow: hidden;
        margin-bottom: 24px;
    }
    .contact.sec-space{
        padding-top: 0 !important;
    }
    .copyright {
        flex-direction: column;
        row-gap: 12px;
    }

    /* About Page  */   
    .inner-banner {
        padding: 60px 0;
    }                
    .inner-banner-text h2 {
        font-size: 26px;
    }

    .modal-content {
        max-width: 80%;
        margin: 0 auto;
    }
}

/* 480  */
@media only screen and (max-width: 575px){
    .navbar-toggler {
        font-size: 1.5rem;
    }
    .con-box, .con-box a, .con-box h5 {
        font-size: 0;
    }
    .banner-text h1 {
        font-size: 28px;
        margin-bottom: 4px;
    }
    .banner-text h4 {
        font-size: 14px;
        margin-bottom: 2px;
    }
    .btn {
        height: 36px;
        font-size: 12px;
        padding: 0 12px;
    }
    .section-heading{
        max-width: 100%;
        margin-bottom: 24px;
    }
    .spec-box {
        row-gap: 16px;
        max-width: 80%;
        margin: 0 auto;
    }
    .spec-row [class*="col-"]:not(:last-child) .spec-box {
        border-bottom: 1px solid var(--light-grey);
        padding-bottom: 20px;
    }
    .footer-logo.navbar-brand img {
        height: 120px;
    }
    .footer-row {
        padding: 60px 0 40px;
    }

    .modal-content {
        max-width: 96%;
    }
}

/* 360  */
@media only screen and (max-width: 479px){
    .navbar-brand img {
        height: 60px;
    }
    .myHeader .con-box {
        display: none;
    }
    .banner-text{
        max-width: 100%;
    }
    .banner-wrapper {
        position: relative;
        transform: translateY(0);
        margin-top: -40px;
    }
    .banner::before {
       display: none;
    }
    .banner-img {
        width: 100%;
        padding-top: 86%;
    }
    .banner-img img {
        object-position: right;
    }
    .banner-img::before {
        content: "";
        width: 100%;
        height: 40%;
        background: linear-gradient(2deg, var(--white), #ffffffc7, #f1ebe900);
        position: absolute;
        bottom: -2px;
        left: 0;
        z-index: 2;
    }
    .about-text h2, .section-heading h2 {
        font-size: 24px;
    }
    .ab-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1.2fr 0.8fr 1fr;
        gap: 8px;
    }
    .ab-grid .exp {
        padding: 12px;
        margin: 14px 20px 0 0;
    }
    .exp h6 {
        font-size: 12px;
    }
    .exp::after {
        width: 12px;
        left: -8px;
    }
    .whyus-list .whyus-box:nth-child(even) {
        margin-left: 20px;
    }
    .mid-banner p {
        font-size: 13px;
        line-height: 1.4;
    }
    .spec-box {
        max-width: 100%;
    }
    .spec-row{
        row-gap: 12px;
    }
    .spec-row [class*="col-"]:not(:last-child) .spec-box {
        padding-bottom: 12px;
    }
    .footer-row [class*="col-"]{
        max-width: 100%;
        flex: 0 0 100%;
    }
    .es-form-field-container {
        flex-direction: column;
        max-width: 100%;
    }

    .modal-header, .modal-body {
        padding: 8px;
    }
    .modal-form {
        padding: 12px;
    }
    .modal-header h5 {
        font-size: 16px;
    }
    .modal-form .form-row [class*="col-"]{
        max-width: 100%;
        flex: 0 0 100%;
    }
}