/* Resetting default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
}

/*+++++++++++++++++++++++++++++ Header styling +++++++++++++++++++++++++++*/
/*header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 28px 315px 19px;
    color: white;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
}


.logo img {
    max-width: 100%;
    width: 80%;
    height: auto;
    margin-top: -13px;
}*/

/* Navigation styling */
/*nav ul {
    list-style: none;
    display: flex;
}

    nav ul li {
        margin: 0 20px;
    }

        nav ul li a {
            text-decoration: none;
            color: black;
            font-weight: 500;
            font-size: 20px;
            position: relative;
            padding-bottom: 5px;
            transition: color 0.3s;
        }

            nav ul li a::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 2px;
                background-color: #2171FF;
                transition: width 0.3s;
            }

            nav ul li a:hover {
                color: #2171FF;
            }

                nav ul li a:hover::after {
                    width: 100%;
                }*/
/* Header styling */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 28px 315px 19px;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

.logo img {
    max-width: 100%;
    width: 80%;
    height: auto;
    margin-top: -13px;
}

/* Navigation styling */
nav ul {
    list-style: none;
    display: flex;
}

    nav ul li {
        margin: 0 20px;
    }

        nav ul li a {
            text-decoration: none;
            color: black;
            font-weight: 500;
            font-size: 20px;
            position: relative;
            padding-bottom: 5px;
            transition: color 0.3s;
        }

            nav ul li a::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 2px;
                background-color: #2171FF;
                transition: width 0.3s;
            }

            nav ul li a:hover,
            nav ul li a.active {
                color: #2171FF;
            }

                nav ul li a:hover::after,
                nav ul li a.active::after {
                    width: 100%;
                }
            nav ul li a.active {
                color: #2171FF;
            }

                nav ul li a.active::after {
                    width: 100%;
                }


/*+++++++++++++++++++ footer ++++++++++++++++++*/
.contact-section {
    padding: 60px 20px;
    background-color: #262626;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

/* Left Section */
.left {
    flex: 1;
    min-width: 300px;
}
    .left h2 {
        font-size: 40px;
        margin-bottom: 37px;
        color: #ffffff;
        /* margin-top: -301px; */
        margin-right: -187px;
    }

.contact-block {
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: white;
}

.row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.icon {
    color: #00d26a;
    font-size: 20px;
    line-height: 1.6;
    margin-top: -1px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.text {
    line-height: 1.4;
    font-size: 20px;
    color: white;
}

    .text a {
        color: #ffffff;
        text-decoration: none;
        word-break: break-word;
    }


/* Right Section */
.quick-form {
    max-width: 500px;
    margin: 0 auto;
}

    .quick-form h2 {
        font-size: 26px;
        margin-bottom: 25px;
        color: #ffffff;
    }

    .quick-form form {
        display: flex;
        flex-direction: column;
    }

    .quick-form input, .quick-form textarea {
        width: 500px;
        padding: 14px 18px;
        font-size: 14px;
        border: 1px solid #ccc;
        margin-bottom: 20px;
        background: #ffffff;
        color: #000;
        /* border-radius: 4px; */
        box-sizing: border-box;
    }

    .quick-form textarea {
        min-height: 77px;
        resize: vertical;
    }

    .quick-form .error-new {
        color: #ff4d4d;
        font-size: 14px;
        margin-bottom: 15px;
        display: none;
    }

    .quick-form button {
        width: 214px;
        padding: 9px;
        background-color: #00d26a;
        color: white;
        font-size: 20px;
        border: none;
        cursor: pointer;
        transition: background 0.3s;
        margin-top: -7px;
        /* border-radius: 4px; */
    }

        .quick-form button:hover {
            background-color: black;
        }

.waiting-box {
    display: none;
    margin: 15px auto 0; 
    padding: 8px 16px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    color: #333;
    font-size: 0.95rem;
    width: fit-content; 
    max-width: 90%;
}


footer {
    background-color: #1a73e8;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 347px;
    font-size: 16px;
}

.footer-left,
.footer-right {
    white-space: nowrap;
}
/*+++++++++++++++++++ thnk you +++++++++++++++++*/
.thank-page-v2 {
    width: 100%;
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    background-color: #fff;
}

.thank-container-v2 {
    text-align: center;
    max-width: 900px;
    width: 100%;
}

.main-thank {
    font-size: 115px;
    font-weight: 900;
    color: #2D3C4C;
    text-shadow: 6px 6px 15px rgba(13, 62, 255, 0.3);
    margin-bottom: 30px;
}

.thank-text {
    font-size: 27px;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
}

.nice-day {
    font-size: 24px;
    color: #222;
    font-weight: 600;
}


@media (max-width: 768px) {
    .main-thank {
        font-size: 60px;
    }

    .thank-text {
        font-size: 20px;
    }

    .nice-day {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .main-thank {
        font-size: 46px;
    }

    .thank-text {
        font-size: 18px;
    }

    .nice-day {
        font-size: 16px;
    }
}

/*++++++++++++++++++++++++ first swiper and image +++++++++++++++++++++++++*/
.banner {
    display: flex;
    width: 100%;
    height: 70vh;
}

.left1, .right1 {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center; 
}

.main-swiper {
    width: 100%;
    height: 100%;
}

    .main-swiper .swiper-slide {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .main-swiper .swiper-slide img {
            width: 58%;
            height: auto;
            margin-top: 114px;
            max-height: 80%;
            object-fit: contain;
        }


.right1 img {
    width: 90%; 
    height: auto;
    max-height: 80%; 
    object-fit: contain;
    margin: 0; 
  
}

.btn {
    position: absolute;
    display: inline-block;
    top: 526px;
    left: 322px;
    padding: 13px 45px;
    background-color: #2ecc71;
    color: white;
    text-decoration: none;
   /* border-radius: 4px;*/
    font-size: 20px;
    font-weight: bold;
    transition: background 0.3s;
}

    .btn:hover {
        background-color: #0A0A0A;
    }
.we-text {
    position: absolute;
    bottom: 80px;
    left: 45%;
    top: 71%;
    transform: translateX(-50%);
    width: 90%;
    color: #1a5bff;
    font-size: 21px;
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 768px) {
   /* .banner {
        flex-direction: column;
        height: auto;
    }*/

    .left1, .right1 {
        width: 100%;
        height: 50vh;
    }

    .main-swiper .swiper-slide img {
        width: 90%;
        max-height: 80%;
    }

    .right1 img {
        width: 94%;
        max-height: 67%;
    }
    .we-text {
        position: absolute;
        bottom: 80px;
        left: 50%;
        top: 83%;
        transform: translateX(-50%);
        width: 100%;
        color: #1a5bff;
        font-size: 16px;
        line-height: 1.4;
    }
    .image-container img {
        width: 100%;
    }
}

/*+++++++++++++++++++++++++ One Call, One Partner, One Solution ++++++++++++++++++++++++*/
.contact-banner {
    width: 100%;
    background-color: #0e1624; 
    color: white;
    text-align: center;
    padding:20px 10px;
}

.contact-content h2 {
    margin: 0;
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: 600;
}

.contact-content p {
    margin: 10px 0 0 0;
    font-size: 25px;
}

.contact-content i {
    margin-right: 10px;
    color: white;

}
.phone {
    width:39px;
    height:auto;
    top:0;
}
/*++++++++++++++++++++++ We enhance machines and plants  +++++++++++++++++++++*/
.info-section {
    display: flex;
    max-width: 100%;
    padding: 60px 20px;
    box-sizing: border-box;
    justify-content: center;
    position: relative;
    background-color: #F3F4F6;
}

.blue-divider {
    width: 178px;
    height: 5px;
    background-color: #1e73ff;
    position: absolute;
    top: 93px;
    left: 402px;
    transform: translateY(-20px);
}
.info-content {
    max-width: 833px;
    margin-left: 132px;
    text-align: center;
    color: #222;
}

    .info-content h2 {
        font-size: 27px;
        font-weight: 700;
        margin-bottom: 40px;
    }

    .info-content p {
        font-size: 18px;
        text-align: justify;
        line-height: 1.4;
        margin-bottom: 20px;
        color: #444;
    }

    .info-content strong {
        font-weight: 700;
    }

/*+++++++++++++++++++++ Our Mission ++++++++++++++++*/
.mission {
    max-width: 100%;
    background-color: #F3F4F6;
}
.mission-vision-section {
    width: 100%;
    padding: 60px 20px;
    max-width: 1200px;
    margin: auto;
}

.mission-vision-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
    flex-wrap: wrap;
}

    .mission-vision-row.row-reverse {
        flex-direction: row-reverse;
    }

.image-container {
    flex: 1;
    padding: 0px;
    min-width: 300px;
}

    .image-container img {
        width: 80%;
        height: auto;
        display: block;
       
    }
.image-container2 {
    flex: 1;
    padding: 0px;
    min-width: 300px;
}

    .image-container2 img {
        width: 80%;
        height: auto;
        display: block;       
        margin-left: 86px;
    }


.text-container {
    flex: 1;
    padding: 20px;
    min-width: 300px;
    margin-left: -71px;
}
.text-container2 {
    flex: 1;
    padding: 20px;
    min-width: 300px;
    margin-right: -43px;
}
.text-container h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    
}
.text-container2 h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
}
    .text-container p {
        font-size: 21px;
        font-weight: 600;
        text-align: left;
        line-height: 1.4;
    }
.text-container2 p {
    font-size: 21px;
    font-weight: 600;
    text-align: left;
    line-height: 1.4;
}

/* Responsive for mobile */
@media (max-width: 768px) {
     .mission-vision-row.reverse {
        flex-direction: column-reverse;
        text-align: center;
    }
    .mission-vision-row {
        flex-direction: column;
        text-align: center;
    }
    .text-container, .image-container {
        padding: 10px;
    }
 
        .text-container {
            margin-left: 0px;
        }
    .image-container img {
        width: 100%;
    }
}

/*++++++++++++ Products & Services ++++++++++++*/
.serv {
    max-width: 100%;
    background-color: #F3F4F6;
}
.services-section {
    text-align: center;
    max-width: 1200px;
    margin: auto;
    padding: 40px 20px;

}

    .services-section .title {
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-top: -53px;
    }

    .services-section .subtitle {
        font-size: 19px;
        color: #333;
        margin-bottom: 40px;
        line-height: 1.6;
    }

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px 20px;
}

.service-box {
    text-align: center;
}

    .service-box .icon {
        background: #1e6ffb;
        color: #fff; 
        width:58px;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: auto;
        font-size: 30px;
    }

    .service-box p {
        margin-top: 15px;
        font-size: 18px;
        font-weight: 600;
        color: #000;
    }

/*+++++++++++++++++ Industries We Serve ++++++++++++++*/
.industries {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(img/bck.jpg) no-repeat center center / cover;
    width: 100%;
    padding: 60px 20px;
    color: #fff;
    position: relative;
}

.overlay {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.title {
    font-size: 45px;
    font-weight: 700;
    margin-bottom: 40px;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 45px 103px;
    justify-items: start;
}

.industry {
    font-size: 21px;
    font-weight: 600;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 16px;
}

    .industry i {
        color: #fff;
        font-size: 36px;
    }

/*+++++++++++++++++++++ Brands We Offer +++++++++++++++++++*/

.brand {
    max-width: 1200px;
    margin: 70px auto;
    text-align: center;
}

    .brand h2 {
        font-size: 32px;
        margin-bottom: 42px;
        margin-top: -17px;
        color: #333;
    }

.swiper {
    width: 100%;
    padding: 20px 0;
}


.swiper-slide {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center; 
    align-items: center; 
}

    
    .swiper-slide img {
        width: 85%; 
        height: auto; 
        display: block;
    }

/* Navigation buttons */
.swiper-button-next,
.swiper-button-prev {
    color: #000;
}


/*++++++++++++++ toggle +++++++++++++++*/
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 28px 315px 19px;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

.logo img {
    max-width: 100%;
    width: 80%;
    height: auto;
    margin-top: -13px;
}

nav ul {
    list-style: none;
    display: flex;
}

    nav ul li {
        margin: 0 20px;
    }

        nav ul li a {
            text-decoration: none;
            color: black;
            font-weight: 500;
            font-size: 20px;
            position: relative;
            padding-bottom: 5px;
            transition: color 0.3s;
        }

            nav ul li a::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 2px;
                background-color: #2171FF;
                transition: width 0.3s;
            }

            nav ul li a:hover {
                color: #2171FF;
            }

                nav ul li a:hover::after {
                    width: 100%;
                }

/* ===== Mobile Header ===== */
/* ===== MOBILE HEADER ===== */
.mobile-header {
    display: none;
    background: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Top Bar */
.mobile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 18px;
}

.mobile-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .mobile-logo img {
        width: 270px;
    }

.company-name {
    font-size: 15px;
    font-weight: 700;
    color: #1d57c8;
    margin: 0;
    text-transform: uppercase;
}

/* ===== BLUE BOX TOGGLE ===== */
.menu-toggle {
    width: 38px;
    height: 38px;
    background: #2171FF;
    /*border-radius: 6px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
}

    .menu-toggle span {
        width: 22px;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        margin: 3px 0;
        transition: all 0.4s ease;
    }

    /* ===== Transform to X ===== */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

/* ===== DROPDOWN MENU ===== */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    background: #fff;
    transition: max-height 0.4s ease-in-out;
   /* border-top: 1px solid #eee;*/
}

    .mobile-menu.open {
        max-height: 500px; 
    }

    .mobile-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: block;
    }

        .mobile-menu ul li {
            display: block;
            border-bottom: 1px solid #eee;
        }

            .mobile-menu ul li a {
                display: block;
                padding: 14px 20px;
                font-size: 22px;
                color: #000;
                text-decoration: none;
                transition: 0.3s;
            }

                .mobile-menu ul li a:hover {
                    color: #2171FF;
                }


/*0000000000000000 back to top button 0000000000000000*/

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 35px;
    height: 35px;
    background-color: #2171FF;
    border: none;
    /* border-radius: 6px;*/
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

    .back-to-top.show1 {
        opacity: 1;
        visibility: visible;
    }

    .back-to-top:hover {
        background-color: #2ECC71;
        transform: scale(1.1);
        filter: brightness(110%);
    }

    .back-to-top svg path {
        transition: fill 0.3s ease;
    }

    .back-to-top:hover svg path {
        fill: #fff;
    }