@charset "utf-8";

/* CSS Document */


/*---For Laptop---*/

@media (max-width: 1800px) {}

@media (max-width: 1600px) {}

/*---For Laptop---*/

@media (min-width: 1200px) and (max-width: 1600px) {}

@media (max-width: 1400px) {}

/*---For Horizental iPad---*/

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 1200px) and (max-width: 1444px) {}

@media(max-width: 1199px) {
    .header-main .nav-outer .nav {
        margin: 0;
    }

    .header-main .nav-outer .button-header {
        display: none;
    }

}


/*---For Vertical iPad---*/

@media (min-width: 768px) and (max-width: 991px) {}

@media (max-width: 992px) {
    .header-main .header-desk {
        display: none;
    }

    .header-main .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px 20px;
    }

    .header-main .mobile-header .logo a {
        width: 100%;
        max-width: 200px;
        display: block;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
        padding: 5px;
    }

    .header-main .mobile-header .logo a img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .header-main .mobile-header .mobile-nav-toggler {
        color: #fff;
        font-size: 60px;
        line-height: 1;
    }
}

/*---For Mobile---*/

@media (max-width: 767px) {

    .section-heading .heading,
    .section-inner-content .heading,
    .section-banner h1 {
        font-size: 26px;
    }

    section {
        padding: 50px 0;
    }

    .contact-area .contact-outer .map {
        border-radius: 10px;
    }

    .contact-area .contact-outer {
        border-radius: 10px;
        padding: 10px;
    }

    .contact-area .contact-box form {
        padding: 25px 15px;
    }

    .footer-section .footer-middle {
        padding: 35px 0;
    }

    .footer-section .footer-title {
        font-size: 18px;
        font-weight: 600;
        margin: 15px 0;
    }

    .contact-area .contact-info ul {
        flex-wrap: wrap;
        justify-content: start;
    }

    .home-banner {
        height: 500px;
    }

    .home-banner video {
        object-fit: cover;
    }

    .home-banner .banner-content h1 {
        font-size: 32px;
    }

    .home-banner .banner-content span::before,
    .home-banner .banner-content span::after {
        width: 30px;
    }

    .home-banner .banner-content span {
        font-size: 14px;
    }

    .home-banner .banner-content .btn-group .btn-banner {
        padding: 10px 25px;
    }

    .section-banner {
        height: auto;
    }

    .contact-page-form .form-contact {
        padding: 20px;
    }

    .header-main .mobile-header .logo a {
        max-width: 110px;
    }

    .header-main .mobile-header .mobile-nav-toggler {
        font-size: 40px;
    }

    .latest-work .latest-work-box .work-items {
        width: 100%;
        height: 300px;
    }

    .latest-work .latest-work-box .work-items .content {
        opacity: 1;
        visibility: visible;
        width: 95%;
        height: 95%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    .our-process .process-card .image-outer {
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .our-process .process-card .image-outer .image-one,
    .our-process .process-card .image-outer .image-two {
        width: 50%;
        top: 0;
        bottom: 0;
    }

    .our-process .process-card::after {
        display: none;
    }

    .our-mission .bg-mission img {
        object-fit: cover;
    }

    .our-mission .bg-mission {
        max-width: 100%;
        opacity: 0.1;
        bottom: 0;
    }

    .our-mission .section-heading {
        position: relative;
        z-index: 1;
    }

    .call-action ul {
        flex-wrap: wrap;
        gap: 10px;
    }

    .call-action ul li {
        padding: 10px 10px 10px 35px;
        font-size: 14px;
        border: 1px solid #fff !important;
        width: 48%;
        border-radius: 10px;
        text-align: start;
    }
    .call-action .btn-group{
        flex-wrap: wrap;
        justify-content: center;
    }
    .product-whychoose .image-why{
        width: 100%;
    }
    .product-whychoose .image-why img{
        opacity: 0.1;
    }
    .product-whychoose .section-heading{
        position: relative;
        z-index: 1;
    }
}


@media (max-width: 575px) {}

@media (max-width: 414px) {}

@media (max-width: 411px) {}

@media (max-width: 375px) {}

@media (max-width: 360px) {}

@media (max-width: 320px) {}