@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
body {
    font-family: "Open Sans", sans-serif!important; 
    a {text-decoration: none;color: unset;}
}

.float {position: fixed;z-index: 1000;top: 50%;left: 0px;transform: translateY(-50%);}
.float img {width: 40px;}

/* Floating phone icon */
.phone-icon {
          position: fixed;top: 50%;right: 4px;transform: translateY(-50%);background: #30a849;color: white;padding: 6px 14px;font-size: 16px;font-weight: bold;
          box-shadow: 12px 0px 0px 6px #2e2e2d;cursor: pointer;display: flex;align-items: center;gap: 10px;transition: background 0.3s ease-in-out;z-index: 1000;}
.hide {display: none;}

/* Contact form styling */
.contact-form {position: fixed;top: 0; right: -300px;width: 300px;height: 100%;background: #fff;overflow-y: auto;
          box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.3);padding: 20px;transition: left 0.3s ease-in-out;z-index: 9999;}
.contact-form h4 {font-size: 20px;color: #30a849;}
/* Show the form when active */
.contact-form.active {right: 0; }
/* Close button */
.close-btn {position: absolute;top: 10px;right: 10px;cursor: pointer;font-size: 20px; color: #30a849;}
.close-btn:hover {color: #30a849;} 


.logo-section {
    font-size: 16px;font-weight: 700;color: #fff;
    i {background-color:  #2e2e2d;padding: 5px;border-radius: 4px;font-size: 15px;}
}
.navbar { background-color: #fff;}
.navbar li a {color:  #2e2e2d;text-transform: capitalize;font-size: 16px;font-weight: 700;}
.navbar-nav .nav-link.show, .navbar-nav .nav-link:hover {color: #30a849;}
.navbar li a i {background-color:  #30a849;padding: 5px;border-radius: 4px;}
.navbar li a:hover {color: #2e2e2d;}
.navbar .dropdown-toggle::after {font-size: 16px;}
.navbar .dropdown-menu {border-radius: unset;--bs-dropdown-border-width: 0;}
.navbar .dropdown-menu .dropdown-item {font-size: 15px;padding: 6px 15px;}
.navbar .dropdown-menu .dropdown-item:hover {background-color: #30a849;}
/* Make dropdown appear directly below the parent link */
.nav-item.dropdown .dropdown-menu {
    left: 0 !important; /* Align dropdown left edge with parent */
    right: auto !important; /* Disable right alignment */
    top: 100%; /* Position right below the parent item */
}

.sticky-header {position: sticky; top: 0;z-index: 1020;background-color: white;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}

footer { background-color: #2e2e2d;color: #fff;}
footer h5 {color:  #30a849;font-size: 18px;font-weight: 600;margin-bottom: 6px;}
footer p{font-size: 13px;font-weight: 600;}
footer .nav .nav-link{padding: 0 18px 0 0;color: #fff;font-size: 14px;font-weight: 600;}
footer .copyright {font-size: 14px;font-weight: 600;}
footer p a i {font-weight: 700;color: #2e2e2d;background-color:  #30a849;padding: 3px;border-radius: 4px;font-size: 8px;}
footer .green-text {color: #30a849;font-weight: 800;font-size: 32px;}
footer .white-text {color: #fff;font-weight: 800;font-size: 32px;}

.banner-b-content {background-color: #f3f4f6;}
.banner-b-content .custom-underline {position: relative;display: inline-block;font-weight: bold;
  font-size: 32px;color: #30a849;padding-bottom: 10px;margin: 0 auto;text-align: center;}
.banner-b-content p {font-size: 18px;font-weight: 500;margin-top: 15px;color: #2e2e2d;}
.banner-b-content .card {border: unset;box-shadow: -3px 3px 5px 0px rgba(201,193,193,0.75);border-radius: 0px;}
.banner-b-content h5 {font-size: 24px;color: #30a849;font-weight: 800;margin-top: 12px;}
.banner-b-content .card img {border-radius: 50px;}
.banner-b-content .custom-underline::after {content: "";position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 100px;height: 4px;background-color: #2e2e2d;border-radius: 2px;}

.home-banner {
    background: url(../images/banner/home_banner.JPG) no-repeat center center/cover;
    height: 90vh;display: flex;align-items: center;justify-content: center;text-align: start;position: relative;width: 100%;}
.home-banner .banner-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);display: block;width: 100%;}
.home-banner .banner-content {position: relative;z-index: 2;color: #fff;} 
.home-banner .banner-content h1 {font-size: 60px;color: #fff;font-weight: 900;text-align: start;margin-bottom: 20px;}
.home-banner .banner-content p {font-size: 20px;font-weight: 400;}
.home-banner .banner-content .btn {font-size: 20px;font-weight: 600; color: #fff;background-color: #2fa848;padding: 6px 20px;border-radius: 5px;}

.company_banner {
    background: url(../images/banner/company_banner.JPG) no-repeat center center/cover;
    height: 80vh;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;width: 100%;}
.company_banner .banner-content {position: relative;z-index: 2;color: #fff;} 

.product_banner {
    background: url(../images/banner/product_banner.JPG) no-repeat center center/cover;
    height: 80vh;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;width: 100%;}
.product_banner .banner-content {position: relative;z-index: 2;color: #fff;} 

.solution_banner {
    background: url(../images/banner/quality.jpeg) no-repeat center center/cover;
    height: 80vh;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;width: 100%;}
.solution_banner .banner-content {position: relative;z-index: 2;color: #fff;} 

.facility_banner {
    background: url(../images/banner/facility.jpeg) no-repeat center center/cover;
    height: 80vh;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;width: 100%;}
.facility_banner .banner-content {position: relative;z-index: 2;color: #fff;} 

/* .banner .banner-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);display: block;width: 100%;} */
/* .banner .banner-content h1 {font-size: 50px;color: #fff;font-weight: 900;text-align: center;margin-bottom: 20px;}
.banner .banner-content p {font-size: 20px;font-weight: 400;} */

.group-offer .custom-underline {position: relative;display: inline-block;font-weight: bold;
  font-size: 32px;color: #30a849;padding-bottom: 10px;margin: 0 auto;text-align: center;}
.group-offer .custom-underline::after {content: "";position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 100px;height: 4px;background-color: #2e2e2d;border-radius: 2px;}
.group-offer .custom-card {background-color: #f0fff4;border-left: 3px solid #28a745;border-radius: 10px;box-shadow: 0 2px 6px rgba(0,0,0,0.05);transition: all 0.3s ease;}
/* .group-offer .icon-circle {background-color: #d1f7df;border-radius: 50%;width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;} */
.group-offer h6 {color: #2e2e2d;font-size: 15px;font-weight: 600;}
.group-offer h5 {color: #2e2e2d;font-size: 20px;font-weight: 700;}
.group-offer p {font-size: 18px;color: #2e2e2d;font-weight: 500;}

.banner-about .custom-underline {position: relative;display: inline-block;font-weight: 900;
  font-size: 32px;color: #30a849;padding-bottom: 10px;margin: 0 auto;text-align: center;}
.banner-about h5 {font-size: 24px;color: #2e2e2d;font-weight: 800;margin-top: 12px;}
.banner-about .custom-underline::after {content: "";position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 100px;height: 4px;background-color: #2e2e2d;border-radius: 2px;}
.banner-about p {font-size: 18px;color: #2e2e2d;}

.home-about {background-color: #f3f4f6;}
.home-about .custom-underline {position: relative;display: inline-block;font-weight: bold;
  font-size: 32px;color: #30a849;padding-bottom: 10px;margin: 0 auto;text-align: center;}
.home-about .custom-underline::after {content: "";position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 100px;height: 4px;background-color: #2e2e2d;border-radius: 2px;}
.home-about .counter {border-radius: 7px;padding: 40px;box-shadow: 6px 6px 0px 0px #30a849;border-top: 2px solid #dddcdc;border-left: 2px solid #dddcdc;}
.home-about .card h4 {font-size: 28px;font-weight: 800;color: #30a849;}
.home-about .card p {font-size: 16px;color: #2e2e2d;}
.home-about .content h5 {font-size: 26px;color: #2e2e2d;font-weight: 700;}
.home-about .content p {font-size: 18px;color: #2e2e2d;}

.global-presence .custom-underline {position: relative;display: inline-block;font-weight: bold;
  font-size: 32px;color: #30a849;padding-bottom: 10px;margin: 0 auto;text-align: center;}
.global-presence .custom-underline::after {content: "";position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 100px;height: 4px;background-color: #2e2e2d;border-radius: 2px;}


.about-card .col-lg-12 {
  box-shadow: 0px 10px 30px -4px rgba(131, 131, 131, 0.65);
  background-color: #f0fff4; /* light green background */
  border-radius: 10px; padding:100px;
}
.about-card h5 {font-size: 30px;color: #2e2e2d;font-weight: 900;}
.about-card p {color: #2e2e2d;font-size:16px;font-weight: 500;}
.about-card .image-left-edge {margin-left: -220px;position: relative;}
.about-card .rotated-image {width: 300px; 
  transform: rotate(-90deg);position: absolute;right: -150px;bottom: 90px;
}

.management-team {background-color: #f3f4f6;}
.management-team .custom-underline {position: relative;display: inline-block;font-weight: 900 !important;
  font-size: 32px;color: #30a849;padding-bottom: 10px;margin: 0 auto;text-align: center;}
.management-team h5 {font-size: 24px;color: #30a849;font-weight: 900;margin-top: 12px;}
.management-team .custom-underline::after {content: "";position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 60px;height: 5px;background-color: #2e2e2d;border-radius: 2px;}
.management-team .content .custom-underline {position: relative;display: inline-block;font-weight: 900;
  padding-bottom: 12px;font-size: 30px;color: #30a849;font-weight: 700;margin-bottom: 0;}
.management-team .content .custom-underline::after {content: "";position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 100%;height: 5px;background-color: #2e2e2d;border-radius: 2px;}
.management-team .content h5 {font-size: 20px;color: #2e2e2d;font-weight: 700;margin-bottom: 20px;margin-top: 15px;}
.management-team .content p {font-size: 16px;color: #2e2e2d;font-weight: 500;}
.management-team .content ul li {font-size: 16px;color: #2e2e2d;font-weight: 500;}
/* .management-team .col-md-5 .img-1 {transform: scaleX(-1);} */
/* .management-team .image-right-edge {margin-right: -40px;position: relative;} */

.custom-card {padding: 30px;color: #fff;}
.left-card {background-color: #1d1d1d;border-top-left-radius: 15px;border-bottom-left-radius: 15px;}
.right-card {background-color: #2eb34f;border-bottom-right-radius: 15px;border-top-right-radius: 15px;}
.custom-underline {position: relative;display: inline-block;padding-bottom: 10px;margin-bottom: 25px;font-size: 30px;font-weight: 800;}
.custom-underline::after {content: '';position: absolute;left: 0;bottom: 0;height: 5px;width: 60px;background-color: #30a849;border-radius: 5px;}
.right-card .custom-underline::after {background-color: #1d1d1d;}
.icon-circle {width: 25px;height: 25px;background-color: #fff;padding: 8px;color: #2eb34f;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;font-size: 12px;margin-right: 10px;}
.right-card .icon-circle {color: #1d1d1d;}
.list-item {margin-bottom: 15px;}

.logo-section {background-color: #f3f4f6;}
.logo-section .custom-underline {position: relative;display: inline-block;font-weight: bold;
  font-size: 32px;color: #30a849;padding-bottom: 10px;margin: 0 auto;text-align: center;}
.logo-section .custom-underline::after {content: "";position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 100px;height: 4px;background-color: #2e2e2d;border-radius: 2px;}
.logo-section .card {border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 10px;}
.logo-section .card:hover {cursor: pointer;}
.logo-section .card .card-header {border-top-left-radius: 10px; border-top-right-radius: 10px;background-color: #30a849;}
.logo-section .card .card-body {border-bottom-left-radius: 0px; border-bottom-right-radius: 1px;background-color: #fff;}
.logo-section .card .card-body h4 {font-size: 18px;font-weight: 700;color: #2e2e2d;margin-bottom: 0;}

.logo-content .row {background-color: #30a849;color: #fff;border-top-left-radius: 25px; border-top-right-radius: 25px;padding: 50px 50px;}
.logo-content h5 {font-size: 22px;font-weight: 700;}

.global-presence1 .custom-underline {position: relative;display: inline-block;font-weight: bold;
  font-size: 32px;color: #30a849;padding-bottom: 10px;margin: 0 auto;text-align: center;}
.global-presence1 .custom-underline::after {content: "";position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 100px;height: 4px;background-color: #2e2e2d;border-radius: 2px;}
.mixing {background: linear-gradient(to bottom, #f5f5f5, #fff, #f5f5f5); /* Light gradient effect */
  padding: 8px 0;}
.mixing h2 {font-size: 30px;font-weight: 700;}
.content p {font-size: 20px;text-align: justify;font-weight: 600;line-height: 1.4;color: #2e2e2d;}


.logo-b-section h4 {font-size: 14px;color: #30a849;font-weight: 700;margin-top: 10px;text-transform: uppercase;}


.product-content p {font-size: 18px;font-weight: 500;margin-top: 15px;color: #2e2e2d;}
.product-content .first_row img {border: 2px solid #30a849;border-radius: 30px;}

.products .swiper {width: 100%;height: 100%; }
.products .swiper .swiper-slide img {display: block;width: 100%; height: 100%;object-fit: cover; }


.common-section.section_1 {background-color: #30a849;box-shadow: 0px 10px 40px -4px rgba(179,176,176,0.65);}
.common-section.section_2 {background-color: #fff;box-shadow: 0px 10px 40px -4px rgba(179,176,176,0.65);}
.common-section.section_1 h2 {color: #fff;font-size: 35px;font-weight: 700;}
.common-section.section_1 p {color: #fff;font-size: 18px;font-weight: 500;}
.common-section.section_2 h2 {color: #2e2e2d;font-size: 35px;font-weight: 700;}
.common-section.section_2 p {color: #2e2e2d;font-size: 18px;font-weight: 500;}
.common-section.section_1 ul li {color: #fff;font-size: 18px;font-weight: 500;}
.common-section.section_2 ul li {color: #2e2e2d;font-size: 18px;font-weight: 500;}

.contact .icon {background-color: #2fa848;}
.contact h5 {font-size: 26px;margin-bottom: 15px;font-weight: 800;color: #30a849;}
.contact .rounded {padding: 50px;}
 

@media (max-width: 1200px) {
  .management-team .image-right-edge {margin-right: 0px;}
  .about-card .image-left-edge {margin-left: -120px;position: relative;}
  .facility_banner {background: url(../images/banner/facility_banner.JPG) no-repeat center center/cover;}
  .solution_banner {background: url(../images/banner/quality_solution_banner.JPG) no-repeat center center/cover;}
}
@media (max-width: 992px) {
    .navbar-collapse {position: absolute;padding: 0 15px;top: 100%;left: 0;width: 100%;background: #30a849;z-index: 1000;box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);}
    .navbar-nav .nav-link.show, .navbar-nav .nav-link:hover {color: #2e2e2d;}

    .home-banner {height: 70vh;background-size: cover;} 
    .company_banner, .product_banner, .solution_banner, .facility_banner {height: 55vh;background-size: cover;}


    .about-card .rotated-image {display: none;}
    .about-card .image-left-edge {margin-left: 0px;position: relative;}
    .about-card .col-lg-12 {padding:60px;}

    .right-card {border-top-left-radius: 15px;border-bottom-left-radius: 15px;}
    .left-card {border-bottom-right-radius: 15px;border-top-right-radius: 15px;}
}
@media (max-width: 768px) { 
    .float {top: 54%;left: unset;right: 4px;}
    .logo-section {font-size: 18px;}
    .navbar li a {font-size: 18px;}
    .navbar{
        --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.12); 
        --bs-navbar-toggler-border-radius: var(--bs-border-radius); 
        --bs-navbar-toggler-focus-width: unset;
    }
    .banner .banner-content h1, .home-banner .banner-content h1 {font-size: 40px;}

    .banner-about .custom-underline, .banner-b-content .custom-underline, .management-team .custom-underline,
     .group-offer .custom-underline, .home-about .custom-underline, .global-presence .custom-underline,
     .common-section.section_1 h2, .common-section.section_2 h2, .logo-section .custom-underline, .global-presence .custom-underline, .global-presence1 .custom-underline  {font-size: 30px;}
     
    .about-card h5, .management-team .content .custom-underline {font-size: 26px;}

    .contact .rounded {padding: 30px;}

}
@media (max-width: 576px) { 
    .phone-icon {display: none !important;}
    .float {top: 97%;}
    .logo-section, footer p {font-size: 16px;}
    .navbar li a {font-size: 15px;}
    .home-banner {height: 65vh;} 
    .banner .banner-content h1, .home-banner .banner-content h1 {font-size: 35px;}
    .about-card .col-lg-12 {padding:40px;}
    .home-about .counter {padding: 30px;}
    .logo-content .row {padding: 50px 30px;}
    .mixing h2 {font-size: 26px;}
}
@media (max-width: 390px) { 

}