/*------------- media screen -----------*/

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .service-section .service .desc {
        width: 174px;
        height: 96px;
        overflow: hidden;
    }
}

/*------------- media screen 992px-1199px  -----------*/
@media only screen and (max-width: 991px) {
    .navigation {
        display: none;
        width: 100%;
    }

    .navigation-mobile {
        display: none;
        width: 100%;
    }

    .nav-btn {
        display: block !important;
    }

    .navigation ul {
        margin: 0;
    }

    .about-section .about-img {
        margin-bottom: 30px;
    }
}

/*------------- media screen 991px  -----------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .work-process .process h4 {
        font-size: 20px;
        word-break: break-all;
    }

    header .topbar span {
        margin-left: 0;
        margin-right: 0;
    }

    .slider .carousel-item .caption-1 .left-content {
        top: 32%;
        position: absolute;
        left: 0;
        display: inline-block;
        width: 45%;
    }

    .slider .carousel-item .caption-1 .right-img {
        position: absolute;
        right: 0;
        bottom: 9px;
        width: 50%;
    }

    .slider .carousel-item .caption-1 .left-content h2 {
        /* font-size: 82px; */
        font-size: 9.7vw;
        color: #ed3237;
        font-weight: 600;
        margin: 0;
        line-height: 1.05;
    }

    .slider .carousel-item .caption-1 .left-content .first-p {
        /* font-size: 26px; */
        font-size: 3vw;
        font-weight: 500;
        text-align: right;
        line-height: 1.05;
        position: relative;
        margin: 0;
    }

    .slider .carousel-item .caption-1 .left-content .first-p::before {
        height: 2px;
        width: 24%;
        position: absolute;
        left: 0;
        content: "";
        top: 46%;
        background: #ed3237;
    }

    .slider .carousel-item .caption-1 .left-content .second-p {
        /* font-size: 24px; */
        font-size: 2.9vw;
        margin: 0;
        line-height: 1.3;
        text-align: center;
        font-weight: 500;
    }

    /* end of caption 1*/
    .slider .carousel-item .caption-2 .left-img {
        position: absolute;
        left: -20px;
        bottom: 40px;
        width: 50%;
    }

    .slider .carousel-item .caption-2 .right-content {
        top: 28%;
        position: absolute;
        right: 0;
        display: inline-block;
        width: 50%;
    }

    .slider .carousel-item .caption-2 .right-content h2 {
        /* font-size: 35px; */
        font-size: 3.1vw;
        color: #ed3237;
        font-weight: 600;
        margin: 0;
        line-height: 1.05;
        text-align: right;
    }

    .slider .carousel-item .caption-2 .right-content .second-p {
        /* font-size: 20px; */
        font-size: 1.9vw;
        margin: 20px 0 0;
        line-height: 1.7;
        text-align: center;
        font-weight: 500;
        border-bottom: 3px solid #ed3237;
        padding-bottom: 20px;
    }

    /* end of caption-2 */
    .slider .carousel-item .caption-3 .left-img {
        position: absolute;
        bottom: 15px;
        width: 45%;
    }

    .slider .carousel-item .caption-3 .right-content {
        top: 25%;
        position: absolute;
        right: 0;
        display: inline-block;
        width: 55%;
    }

    .slider .carousel-item .caption-3 .right-content h2 {
        font-size: 4vw;
        color: #ed3237;
        font-weight: 600;
        margin: 10px 0 0;
        line-height: 1.3;
        text-align: left;
    }

    .slider .carousel-item .caption-3 .right-content .first-p {
        /* font-size: 26px; */
        font-size: 2.8vw;
        font-weight: 500;
        text-align: left;
        line-height: 1.2;
        position: relative;
        margin: 0;
    }

    .slider .carousel-item .caption-3 .right-content .second-p {
        /* font-size: 26px; */
        font-size: 2.4vw;
        margin: 10px 0 0;
        line-height: 1.2;
        text-align: left;
        font-weight: 500;
    }
}

/*------------- media screen 768px-991px  -----------*/
@media only screen and (max-width: 767px) {
    .topbar {
        text-align: center;
    }

    .topbar .social-top ul {
        text-align: center !important;
    }

    .work-process .process .line {
        display: none;
    }



    .social-icons {
        text-align: center;
    }

    .copyright .copy-txt {
        text-align: center;
    }

    .contact-bottom .map-location {
        transform: skew(0deg, 15deg);
        margin-top: 50px;
    }

    .contact-bottom .contact-form {
        padding: 50px 30px;
    }

    .social-top {
        margin-top: 5px;
    }

    header .topbar .social-top ul li a {
        margin: 0;
    }

    .slider .carousel-control-next,
    .slider .carousel-control-prev {
        position: absolute;
        top: 0;
        bottom: 0;
        /* display: -ms-flexbox; */
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 10%;
        /* color: #ec3539; */
        color: #000;
        font-size: 20px;
        text-align: center;
        opacity: 1;
    }

}

/*------------- media screen 767px  -----------*/
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider .carousel-item .caption-1 .left-content {
        top: 32%;
        position: absolute;
        left: 0;
        display: inline-block;
        width: 45%;
    }

    .slider .carousel-item .caption-1 .right-img {
        position: absolute;
        right: 0;
        bottom: 9px;
        width: 50%;
    }

    .slider .carousel-item .caption-1 .left-content h2 {
        /* font-size: 82px; */
        font-size: 9.7vw;
        color: #ed3237;
        font-weight: 600;
        margin: 0;
        line-height: 1.05;
    }

    .slider .carousel-item .caption-1 .left-content .first-p {
        /* font-size: 26px; */
        font-size: 3vw;
        font-weight: 500;
        text-align: right;
        line-height: 1.05;
        position: relative;
        margin: 0;
    }

    .slider .carousel-item .caption-1 .left-content .first-p::before {
        height: 2px;
        width: 24%;
        position: absolute;
        left: 0;
        content: "";
        top: 46%;
        background: #ed3237;
    }

    .slider .carousel-item .caption-1 .left-content .second-p {
        /* font-size: 24px; */
        font-size: 2.9vw;
        margin: 0;
        line-height: 1.3;
        text-align: center;
        font-weight: 500;
    }

    /* end of caption 1*/

    .slider .carousel-item .caption-2 .left-img {
        position: absolute;
        left: -20px;
        bottom: 50px;
        width: 40%;
    }

    .slider .carousel-item .caption-2 .right-content {
        top: 30%;
        position: absolute;
        right: 0;
        display: inline-block;
        width: 60%;
    }

    .slider .carousel-item .caption-2 .right-content h2 {
        /* font-size: 35px; */
        font-size: 3.7vw;
    }

    .slider .carousel-item .caption-2 .right-content .second-p {
        /* font-size: 20px; */
        font-size: 2.3vw;
        margin: 10px 0 0;
        line-height: 1.7;
        text-align: center;
        font-weight: 500;
        border-bottom: 2px solid #ed3237;
        padding-bottom: 10px;
    }

    .slider .carousel-item .caption-3 .left-img {
        position: absolute;
        bottom: 10%;
        width: 45%;
        left: 0;
    }

    .slider .carousel-item .caption-3 .right-content {
        top: 26%;
        position: absolute;
        right: 0;
        display: inline-block;
        width: 55%;
    }

    .slider .carousel-item .caption-3 .right-content .first-p {
        /* font-size: 26px; */
        font-size: 2.7vw;
        font-weight: 500;
        text-align: left;
        line-height: 1.2;
        position: relative;
        margin: 0;
    }

    .slider .carousel-item .caption-3 .right-content h2 {
        font-size: 4vw;
        color: #ed3237;
        font-weight: 600;
        margin: 5px 0 0;
        line-height: 1.3;
        text-align: left;
    }

    .slider .carousel-item .caption-3 .right-content .second-p {
        /* font-size: 26px; */
        font-size: 2.4vw;
        margin: 5px 0 0;
        line-height: 1.2;
        text-align: left;
        font-weight: 500;
    }

}

/*------------- media screen 576px-767px  -----------*/
@media only screen and (max-width: 575px) {
    header .topbar a {
        display: block;
        margin-bottom: 5px;
    }

    header .topbar span a {
        display: inline-block;
    }

    .slider .carousel-item .caption-1 .left-content {
        top: 28%;
        position: absolute;
        left: 0;
        display: inline-block;
        width: 45%;
    }

    .slider .carousel-item .caption-1 .right-img {
        position: absolute;
        right: 0;
        bottom: 9px;
        width: 50%;
    }

    .slider .carousel-item .caption-1 .left-content h2 {
        /* font-size: 82px; */
        font-size: 9.7vw;
        color: #ed3237;
        font-weight: 600;
        margin: 0;
        line-height: 1.05;
    }

    .slider .carousel-item .caption-1 .left-content .first-p {
        /* font-size: 26px; */
        font-size: 3vw;
        font-weight: 500;
        text-align: right;
        line-height: 1.05;
        position: relative;
        margin: 0;
    }

    .slider .carousel-item .caption-1 .left-content .first-p::before {
        height: 2px;
        width: 24%;
        position: absolute;
        left: 0;
        content: "";
        top: 46%;
        background: #ed3237;
    }

    .slider .carousel-item .caption-1 .left-content .second-p {
        /* font-size: 24px; */
        font-size: 2.9vw;
        margin: 0;
        line-height: 1.3;
        text-align: center;
        font-weight: 500;
    }

    /* end of caption 1*/



    .slider .carousel-item .caption-2 .left-img {
        position: absolute;
        left: -10px;
        bottom: 40px;
        width: 40%;
    }

    .slider .carousel-item .caption-2 .right-content {
        top: 32%;
        position: absolute;
        right: 0;
        display: inline-block;
        width: 55%;
    }

    .slider .carousel-item .caption-2 .right-content h2 {
        /* font-size: 35px; */
        font-size: 3.4vw;
        color: #ed3237;
        font-weight: 600;
        margin: 0;
        line-height: 1.05;
        text-align: right;
    }

    .slider .carousel-item .caption-2 .right-content .second-p {
        /* font-size: 20px; */
        font-size: 2.1vw;
        margin: 5px 0 0;
        line-height: 1.7;
        text-align: center;
        font-weight: 500;
        border-bottom: 1px solid #ed3237;
        padding-bottom: 5px;
    }

    .slider .carousel-item .caption-3 .left-img {
        position: absolute;
        bottom: 10%;
        width: 40%;
    }

    .slider .carousel-item .caption-3 .right-content {
        top: 22%;
        position: absolute;
        right: 0;
        display: inline-block;
        width: 60%;
    }

    .slider .carousel-item .caption-3 .right-content .first-p {
        /* font-size: 26px; */
        font-size: 3vw;
        font-weight: 500;
        text-align: left;
        line-height: 1.2;
        position: relative;
        margin: 0;
    }

    .slider .carousel-item .caption-3 .right-content h2 {
        font-size: 4.4vw;
        color: #ed3237;
        font-weight: 600;
        margin: 5px 0 0;
        line-height: 1.3;
        text-align: left;
    }

    .slider .carousel-item .caption-3 .right-content .second-p {
        /* font-size: 26px; */
        font-size: 2.6vw;
        margin: 5px 0 0;
        line-height: 1.2;
        text-align: left;
        font-weight: 500;
    }
}

/*------------- media screen 575px  -----------*/
@media only screen and (min-width: 320px) and (max-width: 480px) {

    .slider .carousel-item .caption-2 .left-img {
        position: absolute;
        left: -10px;
        bottom: 25px;
        width: 40%;
    }
}

/*------------- media screen 320px-480px  -----------*/
@media only screen and (min-width: 320px) and (max-width: 575px) {}

/*------------- media screen 320px-575px  -----------*/
@media only screen and (min-width: 320px) and (max-width: 360px) {
    .service-section .service .desc {
        width: 200px;
        height: 96px;
        overflow: hidden;
    }
}

/*------------- media screen 320px-360px  -----------*/
@media only screen and (max-width: 320px) {}

/*------------- media screen 320px  -----------*/