.col, .col-1, .col-10,
 .col-11, .col-12,
  .col-2, .col-3, .col-4, .col-5,
   .col-6, .col-7, .col-8, .col-9,
    .col-auto, .col-lg, .col-lg-1,
     .col-lg-10, .col-lg-11, .col-lg-12,
      .col-lg-2, .col-lg-3, .col-lg-4,
       .col-lg-5, .col-lg-6, .col-lg-7,
        .col-lg-8, .col-lg-9, .col-lg-auto,
         .col-md, .col-md-1, .col-md-10,
          .col-md-11, .col-md-12, .col-md-2,
           .col-md-3, .col-md-4, .col-md-5,
            .col-md-6, .col-md-7, 
             .col-md-9, .col-md-auto, .col-sm,
              .col-sm-1, .col-sm-10, .col-sm-11,
               .col-sm-12, .col-sm-2, .col-sm-3,
                .col-sm-4, .col-sm-5, .col-sm-6,
                 .col-sm-7, .col-sm-8, .col-sm-9,
                  .col-sm-auto, .col-xl, .col-xl-1,
                   .col-xl-10, .col-xl-11,
                    .col-xl-12, .col-xl-2,
                     .col-xl-3, .col-xl-4,
                      .col-xl-5, .col-xl-6, .col-xl-7,
                       .col-xl-8, .col-xl-9, .col-xl-auto,.container {
 
    padding-right: unset !important;
    padding-left: unset !important;
}
p {
    margin-bottom: unset !important;

}
/* GLOBAL LAYOUT RESET - Poori Website Ko Center Mein Lani Ke Liye */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important; /* Right side par blank space banny se rokey ga */
    box-sizing: border-box !important;
    font-size: 15px !important;
    line-height: 1.9;
   color: rgba(125, 125, 125, 1);
}

footer{
   font-size: 13px !important;
}

.stat-box .stat-desc{
  
   padding: 10px 30px !important; 
   color: rgba(125, 125, 125, 1) !important;
   
}

.customer-consultant-label{
    color: rgb(10 35 96);
}


.row{
    margin-left: unset !important;
    margin-right: unset !important;
}
.items-grid h6{
    color: #213a72 !important;
    font-weight: 600;
}

.project-details + .mt-3  img{
    max-width: 100px;
    margin-bottom: 10px;
}

/* Default image style */
img {
    width: 100%;
    transition: transform 0.5s ease, opacity 0.5s ease;
    
}
.section-text img{
     transition: unset !important;
    opacity: unset !important;
     transform: unset !important;
}
.stat-box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    border-color: #cbd5e1 !important;
    transition: all 0.3s ease !important;
}
.about-stat-box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    border-color: #cbd5e1 !important;
    transition: all 0.3s ease !important;
}
.product-detail-page-section .image-box {
    padding: 0 30px;
    border-radius:20px;
    overflow: hidden;
}
.product-detail-page-section .image-box img{
   
    border-radius:20px;
}
/* Apply hover ONLY if image is NOT inside these sections */
img:hover:not(.project_bar img):not(.commitment-icon-box img):not(.switchgear_image_home) {
    transform: scale(1.1);
    opacity: 1;
}

.defense-cards-container a{
    color: rgba(125, 125, 125, 1);
}
.defense-cards-container .news-title {
    font-weight: 700 !important;
}
.switchgear_image_home:hover {
    transform: scale(0.9);
    opacity: 1;
}
.container-fluid {
   padding-left: unset !important;
    padding-right: unset !important;
}
.bi::before, [class*=" bi-"]::before, [class^=bi-]::before {
    font-weight: unset !important;
}
.col-md-3{
    padding-left: unset !important;
    padding-right: unset !important;
}
.col-md-6{
     padding-left: 5px !important;
    padding-right: 5px !important;
}

*{
    font-family: "Sora", sans-serif !important;
}
.description-list {
    color: #16387C;
    line-height: 1.9;
}
.switchgear_image_home{
   width: 130px;
   height: 127px;
    border-radius:20px;
    padding: 10px;
}
.about_image_home{
   width: 120px;
   height: 120px;
    border-radius:125px;
}
.stat-box{
  background-color: #f5f4f6;
  border-radius:20px;
  text-align: center;
  min-height: 350px;
  color: #17315f;
  margin: 0 10px;
}

.about-stat-box{
  border: 1px solid #d8d0e1;
  border-radius:20px;
  text-align: center;
  min-height: 315px;
  
  padding: 10px;
}
.about-stat-box h6{
color: #17315f;
}
.about-stat-box p{
font-size: 12px !important;
}

.stat-box .stat-heading{
 padding: 5px 15px;
 
 font-weight: 700;
 text-transform: uppercase;
}
/* SECTION WRAPPER */
.products-section {
    padding: 25px 50px;
    background-color: #ffffff;
}
.project_bar {
    padding: 50px 0px !important;
    background-color: #ffffff;
}

.products-section .container {
   
    margin: 0 auto;
    padding: 0 15px;
}

/* HEADER CSS */
.products-header {
    margin-bottom: 45px;
   
}
.product-header-2 {
    padding-left:50px !important;
   
}

.sub-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.accent-line {
    width: 30px;
    height: 3px;
    background-color: #1fb34b;
    display: inline-block;
    border-radius: 2px;
}

.sub-text {
    color: #1fb34b;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.main-title {
    color: #0a2360;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
}

.main-title .line-2 {
    display: block;
}

.green-text {
    color: #1fb34b !important;
}

/* PRODUCTS GRID (2 COLUMNS) */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 40px;
    padding: 20px 70px;
}
.products-grid-home .product-list li {
    font-size: 12px !important;
}
/* PRODUCT CARD STYLING */
.product-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 25px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.product-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

/* IMAGE LIGHT GRAY BOX */
.product-img-box {
    width: 60%;
    height: 290px;
    background-color: #f3f4f6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    flex-shrink: 0;
}



/* CONTENT AREA */
.product-info {
    width: 55%;
    display: flex;
    flex-direction: column;
}

/* GREEN TITLE */
.product-green-title {
    color: #1fb34b;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

/* SUBTITLE (DARK BLUE) */
.product-subtitle {
    color: #0a2360;
    font-size: 19px; /* 👈 Aapki requirement ke mutabiq exact 17px font size */
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

/* DESCRIPTION TEXT & LIST */
.product-desc {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 0 0;
    min-height: 90px;
    
}

.product-list {
    margin: 0 0 0 0;
    padding-left: 15px;
    color: #6b7280;
    font-size: 17px;
    line-height: 1.5;
    min-height: 90px;
}

.product-list li {
    margin-bottom: 4px;
   
}

/* DOWNLOAD BROCHURE BUTTON */
.btn-brochure {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d1d5db;
    border-radius: 30px;
    padding: 6px 8px 6px 16px;
    color: #0a2360;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    width: fit-content;
    transition: all 0.3s ease;
    margin-top: auto;
}

.arrow-circle {
    width: 26px;
    height: 26px;
    background: linear-gradient(90deg, #2fa352 0%, #154c59 50%, #0d364f 100%) !important;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.btn-brochure:hover {
    border-color: #1fb34b;
    color: #1fb34b;
}
.dropdown-menu {
    margin-top: -3px;
}
/* MAIN EXPLORE BUTTON AT BOTTOM */
.products-bottom-btn {
    text-align: center;
}
/* EXPLORE ALL PRODUCTS GRADIENT BUTTON */
.btn-explore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    
    /* Image jaisa exact Green to Dark Blue Mix Gradient */
    background: linear-gradient(90deg, #2fa352 0%, #154c59 50%, #0d364f 100%) !important;
    
    color: #ffffff !important;
    padding: 12px 28px;
    border-radius: 10px; /* Soft Rounded Corners */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(13, 54, 79, 0.2);
}

/* HOVER EFFECT (Slight shift for nice feel) */
.btn-explore:hover {
    background: linear-gradient(90deg, #289348 0%, #103f4a 50%, #08283c 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(13, 54, 79, 0.35);
}
.industry-card .btn-product {
    margin-left: 12px;
}
.btn-product {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    max-width: 180px;
    justify-content: center;
    gap: 12px;
   
    /* Image jaisa exact Green to Dark Blue Mix Gradient */
    background: linear-gradient(90deg, #2fa352 0%, #154c59 50%, #0d364f 100%) !important;
    
    color: #ffffff !important;
    padding: 12px 15px;
    border-radius: 10px; /* Soft Rounded Corners */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(13, 54, 79, 0.2);
}

.btn-download-catalog {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    max-width: 250px;
    justify-content: center;
    gap: 12px;
    
    /* Image jaisa exact Green to Dark Blue Mix Gradient */
    background: linear-gradient(90deg, #2fa352 0%, #154c59 50%, #0d364f 100%) !important;
    
    color: #ffffff !important;
    padding: 12px 28px;
    border-radius: 10px; /* Soft Rounded Corners */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(13, 54, 79, 0.2);
}


/* HOVER EFFECT (Slight shift for nice feel) */
.btn-product:hover {
    background: linear-gradient(90deg, #289348 0%, #103f4a 50%, #08283c 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(13, 54, 79, 0.35);
}

/* RESPONSIVE FOR MOBILE SCREENS */
@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .product-card {
        flex-direction: column;
    }
    .product-img-box, .product-info {
        width: 100%;
    }
}

/* LINK BG, BORDER & UNDERLINE REMOVAL FIX */
.contact-list a, 
.footer-col a {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    color: #8c9ba5 !important;
}
.contact-list b{
    color: #1fb34b;
}
/* Jab mouse hover kare tab bhi koi box ya underline na aye */
.contact-list a:hover, 
.footer-col a:hover {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    color: #1fb34b !important; /* Sirf text ka color green hoga */
}

/* Chrome/Browser selection highlight override */
.contact-list a::selection {
    background-color: transparent !important;
}
    /* --- FOOTER SECTION STYLES --- */
.site-footer {
    width: 100% !important;
    margin-top: auto !important;
    background-color: #021641 !important;
    color: #a0aec0 !important;
    padding: 70px 0px 30px 0px !important;
    padding: 70px 40px 30px 40px !important; /* Left-Right Space Fill karne ke liye padding badhai hai */
   
    box-sizing: border-box !important;
}

/* Full Width Container to avoid empty sides */
.footer-container {
   /* Full width taakay sides empty na lagein */
    margin: 0 auto !important;
}

/* Expanded Grid Columns */
.footer-columns {
    display: grid !important;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1.4fr !important;
    gap: 50px !important;
    justify-content: space-between !important;
    margin-bottom: 50px !important;
}

.footer-col {
    display: flex !important;
    flex-direction: column !important;
}

/* Pure Logo Image without text */
.brand-col .footer-logo img {
    max-width: 210px !important;
    height: auto !important;
    display: block !important;
   
}




/* Logo space aur spacing adjustment */
.footer-logo {
    margin-bottom: 25px !important;
}

.footer-logo img {
    max-width: 180px !important;
    height: auto !important;
    display: block !important;
}

.brand-desc {
   
    margin-bottom: 25px !important;
    color: #8c9ba5 !important;
   
    line-height: 1.6 !important;
   
}
.stats-section{
    padding: 25px 120px;
}

.social-links {
    display: flex !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.social-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important; /* Perfect Round Circle */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 17px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

.social-btn svg {
    fill: #ffffff !important;
}

/* CSS Hover Effect (Green Color) */
.social-btn:hover {
    background-color: #1fb34b !important;
    border-color: #1fb34b !important;
    color: #ffffff !important;
}

/* Column Titles & Accent Lines */
.col-title {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    margin: 0 0 8px 0 !important;
}

.title-line {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background-color: #1fb34b !important;
    margin-bottom: 20px !important;
}

/* Navigation & Contact Lists */
.footer-links, .contact-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}



.footer-links a {
    color: #8c9ba5 !important;
    text-decoration: none !important;
    
    cursor: pointer !important;
    transition: color 0.25s ease !important;
}

.footer-links a:hover {
    color: #1fb34b !important;
}

/* Clean Contact List (Without Highlighted Icons) */


/* ALL LINKS UNDERLINE REMOVAL FIX */
.footer-links a, 
.contact-list a {
    text-decoration: none !important; /* Is se saare underlines khatam ho jaye ge */
    color: #8c9ba5 !important;
    transition: color 0.25s ease !important;
  
}

.footer-links a:hover, 
.contact-list a:hover {
    text-decoration: none !important;
}

/* CONTACT LIST WITH ICONS ALIGNMENT */
.contact-list li {
    /* display: flex !important; */
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    
    line-height: 1.5 !important;
}

/* ICON STYLING */
.contact-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important; /* Resize issue fix */
    fill: #ffffff !important; /* Icons ka color Green */
    margin-top: 2px !important;
}


/* Bottom Divider */
.footer-divider {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 20px 0 25px 0 !important;
}

/* Copyright Row */
.footer-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.shield-icon {
    color: #1fb34b !important;
    font-size: 18px !important;
}
.hero-buttons {
    display: flex !important;
    gap: 16px !important;
}

/* ✅ FIX BUTTONS PROPERLY */
.hero-buttons a {
    flex: 1;              /* equal width */
    min-width: 0;         /* 🔥 CRITICAL (prevents overflow) */

    padding: 14px 18px !important;

    
    align-items: center;
    justify-content: space-between;

    white-space: nowrap;  /* keep text in one line */
}
.hero-buttons{
    transform: translateY(-20px);
}



    /* --- FOOTER SECTION STYLES --- */


/* --- NEWS CARDS SECTION STYLES --- */
.news-cards-section {
    padding:0px 50px;
    width: 100% !important;
   
    background-color: #ffffff !important;
    box-sizing: border-box !important;    
}

/* Grid Container with Center Gap */
.news-cards-container {
    
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 2 Cards Layout */
    gap: 32px !important; /* 👈 Card 1 aur Card 2 ke beech ka GAP */
}
.defense-cards-container {
    
    padding:25px 0;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 2 Cards Layout */
    gap: 32px !important; /* 👈 Card 1 aur Card 2 ke beech ka GAP */
}
.infrastructure-cards-container {
    padding: 25px 0;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 2 Cards Layout */
    gap: 32px !important; /* 👈 Card 1 aur Card 2 ke beech ka GAP */
}

/* Single Card Box (Border & Shadow) */
.news-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important; /* 👈 OUTLINE / BORDER */
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important; /* 👈 SOFT SHADOW */
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
}
.defense-card {
    background-color: #ffffff !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Hover Effect on Card */
.news-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    border-color: #cbd5e1 !important;
}

/* Image Container */
.news-card-img {
    width: 100% !important;
    height: 300px !important; /* Image height */
    overflow: hidden !important;
    background-color: #f1f5f9 !important; /* Placeholder background */
}
.defense-card-img {
    width: 100% !important;
    height: auto !important; /* Image height */
    overflow: hidden !important;
    background-color: #f1f5f9 !important; /* Placeholder background */
    border-radius: 10px;
}

.news-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}
.defense-card-img img {
    width: 100% ;
  
    height: 380px;
    border-radius: 10px;
   
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

.news-card:hover .news-card-img img {
    transform: scale(1.04) !important; /* Slight Image Zoom on Hover */
}

/* Card Body Content */
.news-card-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-grow: 1 !important;
}
.defense-card-body {
    padding: 24px 0px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-grow: 1 !important;
}
.btn-white:hover,
.btn-white:focus,
.btn-white:visited{
    text-decoration: none;
    color: #000;      /* ya white */
}
.btn-green:hover{
    background: #0B4F2B;
    color: #ffff;
}

/* Green Category Badge */
.news-badge {
    background-color: #1fb34b !important; /* Green Color */
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 16px !important;
    display: inline-block !important;
}

/* Card Heading Title */
.news-title {
    color: #0a2360 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    margin: 0 0 12px 0 !important;
}

/* Card Description Paragraph */
.news-desc {
   
    font-size: 12px !important;
    line-height: 1.9 !important;
    margin: 0 !important;
    
}

/* Mobile Responsive */

/* --- NEWS & EVENTS HEADER STYLES --- */
.news-header-section {
    width: 100% !important;
    padding: 50px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
   
}

.news-header-container {
    
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Subtitle Line & Text */
.news-subtitle {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.news-accent-line {
    width: 32px !important;
    height: 3px !important;
    background-color: #1fb34b !important; /* Green Accent */
    border-radius: 2px !important;
}

.news-subtitle-text {
    color: #1fb34b !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
}

/* Main Heading Typography */
.news-main-title {
    font-size: 40px !important;
    font-weight: 700 !important;
    margin: 0 0 30px 0 !important;
    letter-spacing: -1px !important;
    line-height: 1.1 !important;
}

.news-main-title .text-dark {
    color: #0a2360 !important; /* Dark Navy Black */
}

.news-main-title .text-green {
    color: #1fb34b !important; /* Bright Green */
}

/* Filter Buttons Wrapper */
.news-filters-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Filter Button Base Styles */
.filter-btn {
    background-color: #ffffff !important;
    color: #0a2360 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 10px 24px !important;
    border-radius: 50px !important; /* Fully Rounded Pill */
    
    font-weight: 600 !important;
    cursor: pointer !important; /* Hand Cursor */
    transition: all 0.25s ease !important;
    outline: none !important;
}

/* Active Button (Gradient Green/Dark Pill) */
.filter-btn.active {
    background: linear-gradient(90deg, #2fa352 0%, #0a2360 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

/* Hover States */
.filter-btn:hover:not(.active) {
    border-color: #1fb34b !important;
    color: #1fb34b !important;
    background-color: #f8fafc !important;
    transform: translateY(-1px) !important;
}

    /* --- CTA SECTION STYLES --- */
.cta-section {
    width: 100%;
    padding: 15px 120px;
    background-color: #ffffff;
    box-sizing: border-box;
    overflow: hidden !important;
   
}



*, *::before, *::after {
    box-sizing: border-box !important;
}

.cta-banner {
    background: linear-gradient(
        90deg, 
        #021641 0%,
        #021641 25%,
        rgba(3, 14, 33, 0.7) 50%,
        rgba(3, 14, 33, 0.1) 85%
    ), 
    url('../../images/home/navy.jpg') !important;
    
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    
    border-radius: 28px;
    padding: 60px 70px;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
} 

/* Subtitle Header */
.cta-sub-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cta-accent-line {
    width: 32px;
    height: 3px;
    background-color: #27ae60;
    border-radius: 2px;
}

.cta-sub-text {
    color: #27ae60;
    
    font-weight: 500;
    letter-spacing: 1.5px;
}
.cta-title {
    color: #ffffff;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.cta-title .cta-green-text {
    color: #27ae60;
}



/* Right Side Buttons Container */
.cta-buttons-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.trust-text{
    display:flex;
    align-items:center;
    gap:12px;

    transform:translateY(-29px);
}
/* Shared Button Styles */
.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    
    /* HAND CURSOR FOR CLICKING */
    cursor: pointer !important;
}

/* Primary Green Button */
.btn-primary {
    background: linear-gradient(90deg, #34a24b 0%, #144b55 75%);
    color: #ffffff;
    border: 1px solid gray;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.2);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
    opacity: 0.95;
}

/* Outline Transparent Button */
.btn-outline {
    /* background-color: rgba(255, 255, 255, 0.03); */
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(2px);
}

.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* Arrow Icon inside Buttons */
.btn-arrow {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.cta-btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* Responsive Handling */
@media (max-width: 1024px) {
    .cta-banner {
        padding: 40px;
    }
}

    /* --- QUALITY PROMISE SECTION STYLES --- */




.quality-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
    color: #0a2360;
    margin: 15px 0 20px 0;
    letter-spacing: -1px;
    
}

.green-text{
    display:inline-block;
    transform:translateX(-29px);
}
.quality-title .green-text {
    color: #27ae60;
}

.quality-desc {
   
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 480px;
    
    padding: 15px 0;
}

/* Cards List */
.quality-cards-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.q-card {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 16px 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.q-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}


/* Icon Container Box Size */
.q-icon-box {
    width: 60px !important;
    height: 60px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important; /* Extra edges cut ho jayengi */
    position: relative !important;
}

/* Icon Box Ke Andar Tamam Images Par Zoom/Scale Lagane Ke Liye */
.q-icon-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    
    /* 👈 ZOOM/SCALE NUMBER: Is value ko 1.5, 1.8 ya 2.0 kar ke adjust kar sakte hain */
    transform: scale(1.3) !important; 
    
    transition: transform 0.3s ease !important;
}

/* Hover Effect (Optional: Jab mouse layen toh thoda aur highlight ho) */

.q-card-text h4 {
   
    font-weight: 700;
    color: #0a2360;
    margin: 0 0 4px 0;
}

.q-card-text p {
    
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Right Image Side */

/* Section ko poori screen par phelaane ke liye (Full Width Reset) */
.quality-section {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding:15px 50px !important; /* Right padding 0 kar di taakay space na bache */
    box-sizing: border-radius-box !important;
    overflow: hidden !important;
    
}

/* Container space distribution */
.quality-container {
    max-width: 100% !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 0.9fr 1.1fr !important;
    align-items: center !important;
    gap: 60px !important;
}

/* Left Content Block */
.quality-content {
    flex: 1 !important;
   
}
.quality-image-side {
    width: 100% !important;
    margin-right: 0 !important;
    position: relative !important;
    border-radius: 28px !important;
    overflow: hidden !important;
}

/* Image Expansion */
.main-q-img {
    width: 100% !important;
   
    object-fit: cover !important;
    display: block !important;
}
/* Floating Badge Ko Center Mein Shift Karne Ke Liye */
.q-floating-badge {
    position: absolute !important;
    
    /* Absolute Center Logic */
    top: 85% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* Reset bottom/right rules */
    bottom: auto !important;
    right: auto !important;
    
    /* Styling & Design */
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    padding: 16px 22px !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    z-index: 10 !important;
}

.badge-icon-box {
    width: 48px;
    height: 48px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-icon-box img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    /* TRANSFORM FOR FLOATING BADGE ICON */
    transform: scale(1.4) !important;
}

.badge-text h4 {
    font-size: 17px;
    font-weight: 800;
    color: #0a2360;
    margin: 0 0 2px 0;
}

.badge-text p {
    font-size: 17px;
    color: #64748b;
    margin: 0;
}

/* Responsive Handling */
@media (max-width: 1024px) {
    .quality-container {
        display: flex !important;
        flex-direction: column;
    }
    .quality-image-side {
        width: 100%;
    }
}


/* Container to center the button below cards grid */
.view-all-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 45px;
    margin-bottom: 20px;
}

/* Gradient Button Style */
.btn-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 32px;
    
    /* Green to Dark Blue Gradient */
    background: linear-gradient(90deg, #2ea854 0%, #0d384d 100%);
    
    color: #ffffff !important;
    
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(13, 56, 77, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* FLOATING BADGE STAR IMAGE BADA KARNE KE LIYE */
.q-floating-badge .badge-icon-box img {
    width: 32px !important; /* 👈 Default usually 16px-20px hota hai, 32px se yeh kaafi bada ho jayega */
    height: auto !important; /* Aspect ratio maintain rakhne ke liye */
    display: block !important;
}

/* Optional: Agar image badi hone se container chhota pad raha ho, toh usey bhi halka sa bada kar dein */
.q-floating-badge .badge-icon-box {
    width: 50px !important; /* Image size se halka bada padding ke liye */
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Arrow Icon Style */
.btn-view-all .arrow {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Hover Effect */
.btn-view-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(13, 56, 77, 0.35);
    opacity: 0.95;
}

.btn-view-all:hover .arrow {
    transform: translateX(5px); /* Hover par arrow aage shift hoga */
}
/* --- HERO SECTION --- */


/* SECTION HEADER WRAPPER */
.products-header {
    padding-left: 50px;
    margin-bottom: 30px;
}

/* SUB HEADING (Line + Text) */
.sub-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* ACCENT GREEN LINE */
.accent-line {
    width: 32px;
    height: 3px;
    background-color: #1fb34b; /* Green color */
    display: inline-block;
    border-radius: 2px;
}



/* MAIN TITLE (Dark Navy/Blue Text) */
.main-title {
    color: #0a2360; /* Dark Navy Color */
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

/* SECOND LINE BREAK */
.main-title .line-2 {
    display: block; /* Is se "Trusted Electrical Solutions" doosri line par aa jayega */
}

/* GREEN TEXT HIGHLIGHT */
.green-text {
    color: #1fb34b !important;
    margin-left: 35px !important;
    display: inline-block;
}

/* RESPONSIVE FOR MOBILE SCREENS */

.hero-section {
    width: 100%;
    height: 700px;
    background-image: url('../../images/hero-images/home.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.commitment-feature-item{
    position: relative;
    padding-right: 35px;
   
}
.commitment-feature-item:not(:first-child) {
    padding-left: 30px !important;
}
/* HERO IMAGE */
.hero-image{
    position: relative;
    width: 550px;
    height: 510px;
    margin-left: 50px;
    border-radius: 20px;
    overflow: hidden;
    background-color: rgba(243, 243, 245, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:20px;
}
/* Google Font Import */
/* Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* Main Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    
}

/* Hero Image Container - Size chota karne ke liye */
/* Hero Image Container (Card wrapper) - Size controlled but flexible */


/* Hero Image Container (Card wrapper) - Left Aligned */
.hero-image {
    position: relative;
    display: block !important;
    width: 100%;
    max-width: 580px !important; /* Yahan se image width/size chota rakhein */
    
    /* LEFT ALIGNMENT FIX: Center wala "0 auto" hata kar pure left kar diya hai */
    margin: 0 !important; 
    margin-left: 40px !important; /* Is value ko 25px ya 30px karein agar AUR RIGHT karna ho */
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    /* ROUND SHAPE FIX */
    border-radius: 24px !important;
    overflow: hidden !important; 
    box-sizing: border-box !important;
}

/* Background White Card Image */
.hero-image > img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    
    /* ROUND CORNERS FIX */
    border-radius: 24px !important;
    
    /* NO CUTTING FIX */
    object-fit: fill !important; 
}
/* Content Overlayed on Card Image */
.hero-content {
    position: absolute !important;
    top: 28px !important;
    left: 50px !important;
    right: 50px !important;
    bottom: 28px !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

/* 1. Top Green Tag Line */
.hero-tag {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
        color: #22c55e !important;
    margin-bottom: 12px !important;
    margin-left: 10px !important;
}

.hero-tag::before {
    content: "" !important;
    width: 22px !important;
    height: 3px !important;
    background-color: #22c55e !important;
    border-radius: 10px !important;
}
/* 2. Main Heading (Left Aligned) */
/* Main Heading - Forced Right Shift */
/* Main Heading - Bold, Large & Right Shifted */
.hero-content h1 {
    position: relative !important;
    left: 10px !important; /* Right shift position */
    
    margin: 0 0 16px 0 !important;
    
    /* 1. FONT SIZE: Bada aur prominent kar diya */
    font-size: 50px !important; 
    
    /* 2. BOLDNESS: Full premium heavy weight (800) */
    font-weight: 700 !important; 
    
    /* 3. LINE SPACING: Tight clean gap taakay lines aapas me na ghusein */
    line-height: 1.15 !important; 
    letter-spacing: -1px !important; /* Sleek modern look */
    
    color: #0a2360;
    text-align: left !important;
    width: calc(100% - 25px) !important;
}
.hero-content h1 span,
.hero-content .line-two,
.hero-content .green-text {
    display: block !important;
    text-align: left !important;
}

/* 3rd Line: Critical Projects */
.hero-content .green-text {
    color: #22c55e !important;
    
    /* -------------------------------------------------- */
    /* 2. CRITICAL PROJECTS KO RIGHT KARNE WALI VALUE:   */
    margin-left: 25px !important; /* Right push karne ke liye value barha dein */
    /* -------------------------------------------------- */
}

.hero-content .green-text {
    color: #22c55e !important;
}
.project-content marquee{
    padding-top: 10px;
}
/* 3. Paragraph Description */
.hero-content p {
       
    
    color: #475569 !important;
    margin-left: 5px !important;
    line-height: 1.8 !important;
    /* WIDTH ADJUSTMENT: Is se text exactly 4 lines mein wrap hoga */
    max-width: 435px !important;      /* Reduced width taakay 4th line par "region." aaye */
    
   font-size: 14px !important;
    text-align: left !important;
    padding-left: 5px !important;
}

/* 4. Action Buttons Container */
.hero-buttons {
    margin-top: 30px !important; /* Is value ko barha kar buttons ko aur neechay laa sakte hain */
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
}

/* Green & White Buttons Base */
.btn-green,
.btn-white {
    height: 46px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
/* 📍 1. Dono Buttons Ko Exactly 1 Line Mein Rakhne Ke Liye */
.btn-green,
.btn-white {
    white-space: nowrap !important; /* Text ko kabhie 2 lines me nahi hone dega */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 📍 2. Request a Project (📄 Emoji) - Balanced Size */
.btn-green .btn-emoji {
    font-size: 20px !important; /* Size thoda kam balance kar diya */
    margin-right: 6px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 📍 3. Submit BOQ (Shield Icon) - Perfectly Small */
.btn-white .shield-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    margin-right: 6px !important;
}
/* Left Gradient Green Button */

.btn-green {
    /* 📍 Bright Green Start (20% tak proper green rahega, phir dark hoga) */
    background: linear-gradient(90deg, #34a24b 0%, #144b55 75%) !important;
    
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    
    /* 📍 Weight Kam Kar Diya (600 se 500 kar diya) */
    font-weight: 600 !important; 
    
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    transition: opacity 0.3s ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
}


/* Request a Project Button - Icon (SVG / Image) Bada Karne Ke Liye */
/* Request a Project - Icon Size Transform Se Bada */
/* 1. Request a Project (📄 Emoji Icon) - BADA KAR DIYA */
.btn-green .btn-emoji {
    font-size: 18px !important; /* Normal text se zyada bada */
    display: inline-block !important;
    transform: scale(1.3) !important; /* Direct zoom effect */
    vertical-align: middle !important;
    margin-right: 6px !important;
}

/* 2. Submit BOQ (Shield SVG Icon) - CHOTA KAR DIYA */
.btn-white .shield-icon {
    width: 10px !important;  /* HTML width="20" ko override karke 14px (Chota) kar diya */
    height: 10px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}
/* Right White Button */
.btn-white {
    background: #ffffff !important;
    color: #0a2360 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}



/* Shield SVG Inside White Button */
.btn-white .shield-icon {
    width: 10px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}
/* 1. Pure Trust Container (Icon + Text) Ko UPAR Shift Karne Ke Liye */
.trust-text {
    margin-top: -20px !important; /* Continuous upar kheenchein: -40px ya -50px bhi kar sakte hain */
    margin-left: -5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    top: -25px !important;
    line-height: 1.2;
    /* 📍 Y axis (-12px): Icon aur Text DONO KO UPAR KHISAKANE KE LIYE
       📍 X axis (-15px): LEFT SHIFT KE LIYE */
}
/* Trusted by contractors... Text Bold aur Left */
.trust-text p,
.trust-text span,
.trust-text {
    font-weight: 700 !important; /* Full Bold */
    transform: translateX(-10px) !important; /* Left Shift */
}

/* 2. Green Tick Icon Fine-Tuning (Agar Icon ko thora aur upar align karna ho) */
.trust-text img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    
    /* Image Filter Dark Green */
    filter: brightness(0.75) contrast(1.3) !important;
    
    /* Alignment adjustment */
    vertical-align: middle !important;
}
.project-content {
    width: 100%;
    text-align: center;
    color: #ffffff !important;
  
    font-size: 24px;
   
}
.project-content span {
    margin-left: 30px;
}

.single-image-section {
   
    padding: 0 20px;
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
}
.single-image-section img {
    width: 100%;
   
    height: auto;
    object-fit: cover;
    display: block;
    margin: auto;
}

/* --- COMMITMENT SECTION --- */
.commitment-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: #00133a;
   
    position: relative;
    color: #ffffff;
   
}
.commitment-container {    
    width: 100%;
    min-height: 550px;
}
.commitment-content-side {    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 50px;
}

.feature-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 25%;
    height: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
}
.commitment-image-side {
    position: relative;
    overflow: hidden;
}

.commitment-image-side img {
    width: 100%;
   
    min-height: 530px;
    object-fit: cover;
}
/* Sub Heading */

.commitment-sub-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    margin-top: 50px;
}

.commitment-accent-line {
    width: 32px;
    height: 3px;
    background-color: #00e676;
    border-radius: 2px;
}

.commitment-sub-text {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #00e676;
    text-transform: uppercase;
}

/* Main Title */

.commitment-main-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #0b1c38;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

/* Features Grid */

/* .commitment-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
} */

/* Feature Item */

.commitment-feature-item {
    position: relative;
    padding-right: 30px;
  
}

/* Icon Box */

.commitment-icon-box {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-60px);
   
}

.commitment-icon-box img {
    width: 150%;
    height: 110%;
    object-fit: contain;
    transform: translateX(50px);
    border-radius: 10px;
}


.commitment-feature-item h3, .commitment-feature-item p {
        font-family: "Manrope", sans-serif !important;
}




.commitment-feature-title {
    font-size:14px;
    font-weight:700;
    color:#ffffff;
   
    padding-top:7px;
    white-space:nowrap;

    transform: translateY(70px);
}
.commitment-icon-box{
    width:120px;
    height:120px;
    display:flex;
    align-items:center;
    justify-content:center;

    transform: translate(-50px, 55px);
}

.commitment-main-title{
    color:#ffffff;
}
.commitment-divider{
    width:100%;
    height:1px;
    background:#3b4758;
    margin:18px 0;
}
.commitment-feature-text{
    padding-top: 51px;
    font-size:13px;
    
    line-height:1.6;
    color:#a0aec0 !important;
    margin:0 0 !important;
    text-align:left !important;

    transform: translateY(20px);
}

/* --- PRODUCTS & 3-CARDS SECTION (1 ROW FIXED) --- */
.products-section {
    width: 100%;
   
    background-color: #ffffff;
   
    box-sizing: border-box;
}
.products-header {
    margin-bottom: 40px;
}


.green-text {
    color: #27ae60;
}
.line-2 {
    display: block;
    margin-top: 10px;
}

/* CARDS GRID: LOCK TO 1 ROW (3 COLUMNS) */
.industries-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    width: 100% !important;
   
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.industry-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.industry-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1) !important;
}

.card-image-header {
    position: relative !important;
    width: 100% !important;
    height: 240px !important; /* Purana: 180px -> Barhane ke liye 220px ya 240px kar dein */
    border-radius: 19px 19px 0 0 !important;
}

.card-bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 19px 19px 0 0 !important;
    display: block !important;
}
.icon-badge {
    position: absolute !important;
    bottom: -35px !important; /* Pehle -25px tha, size bara hone par position adjust ki hai */
    left: 20px !important;
    width: 75px !important;   /* Pehle 58px tha -> Size bara kiya hai */
    height: 75px !important;  /* Pehle 58px tha -> Size bara kiya hai */
    background: #ffffff !important;
    border: 3px solid #ffffff !important;
    border-radius: 18px !important;
    display: flex !important;
    left: 40px !important; /* Pehle 'left: 20px' tha, isse right side shift ho jayega */
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 10 !important;
}

.icon-badge img {
    width: 48px !important;   /* Pehle 32px tha -> Inside Icon bara ho jayega */
    height: 48px !important;  /* Pehle 32px tha */
    object-fit: contain !important;
    display: block !important;

    /* Image ko bada karne ke liye scale ka use: */
    transform: scale(1.9) !important; 
    
    /* Smooth transitions agar hover animation chahiye ho (Optional) */
    transition: transform 0.3s ease !important;
}

/* Card Body Padding Adjustments (Icon bara hone par text overlap na ho) */
/* Card body ki top padding barhayi taakay sab content neeche shift ho */
.card-body {
    padding: 60px 20px 20px 20px !important; /* Pehle 48px tha -> 60px karne se sab neeche aagaya */
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
   
}

/* Headings ko mazeed thoda neeche push karne ke liye */
.card-body h3 {
    font-size: 25px !important;
    font-weight: 700 !important;
    color: #0a2360 !important;
    transform: translateX(13px) !important;
    margin: 10px 0 10px 0 !important; /* Margin-top 10px ki wajah se heading thodi aur neeche aagayi */
}

/* Accent Line ko Heading se thoda fasla dene ke liye */
.card-line {
    width: 36px !important;
    height: 3px !important;
    background-color: #27ae60 !important;
    margin-left: 15px !important; /* 👈 Is se line b exact heading ke neeche right shift ho jayegi */
    display: block !important;
    margin-bottom: 16px !important; /* Pehle 12px tha -> Ab line paragraph se thoda neeche ho gayi */
    border-radius: 2px !important;
}

.card-body p {
   
    line-height: 1.9 !important;
   
     margin-left: 12px;
     height:95px;
}

.btn-view-project {
    display:block !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #0a2360 !important;
    text-decoration: none !important;
    margin-top: auto !important;
    
    padding: 5px 10px;
}
.link-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
        border: 1px solid #beb4b4;
    border-radius: 50px;
    padding: 6px 12px;
}

.btn-view-project .arrow-icon {
    width: 22px;
    height: 22px;
    background: linear-gradient(90deg, #2fa352 0%, #154c59 50%, #0d364f 100%) !important;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: background 0.3s ease;
}

.btn-view-project:hover .arrow-icon {
    background: #27ae60;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .commitment-container {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .industries-grid {
        grid-template-columns: 1fr !important;
    }
    
}


/* 1. BUTTON KI WIDTH KAM KARNE KE LIYE */


/* 2. SHIELD ICON KO BADA KARNE KE LIYE */
.btn-white .shield-icon {
    width: 25px !important;   /* 👈 Size 20px se bada karke 28px kar diya hai (aap 32px bhi kar sakti hain) */
    height: 28px !important;
    flex-shrink: 0;          /* Icon squeeze nahi hoga */
}



/* DONO BUTTONS SE UNDERLINE, HOVER LINE AUR BLUE OUTLINE KHATAM KARNE KE LIYE */
.hero-buttons a,
.btn-green,
.btn-white {
    text-decoration: none !important; /* Underline khatam karne ke liye */
    outline: none !important;         /* Click par blue outline border hatane ke liye */
    box-shadow: none !important;      /* Extra focus shadow remove karne ke liye */
    -webkit-tap-highlight-color: none !important; /* Mobile click shadow hatane ke liye */
}

/* Hover State Control */
.hero-buttons a:hover,
.btn-green:hover,
.btn-white:hover {
    text-decoration: none !important; /* Hover par line na aaye */
    outline: none !important;
}

/* Click / Active / Focus State Control (Blue Line Removal) */
.hero-buttons a:focus,
.hero-buttons a:active,
.btn-green:focus,
.btn-white:focus {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}






/* Universal Link Focus Kill */




/* ABOUT HERO BANNER CONTAINER */
.about-hero-banner {
    position: relative;
    width: 100%;
    height: 420px; /* Exact height for clean banner look */
    /* 👇 APNI PICTURE KA PATH YAHAN LAGEGA */
        background-image: url('../../images/hero-images/about.jpeg');

    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 50px; /* Left side padding for text placement */
    box-sizing: border-box;
    overflow: hidden;
}

body.hero-contact .about-hero-banner {
    background-image: url('../../images/hero-images/contact.png');
}

body.hero-products .about-hero-banner {
    background-image: url('../../images/hero-images/products.jpg');
}

body.hero-industries .about-hero-banner,
body.hero-projects .about-hero-banner {
    background-image: url('../../images/hero-images/industries.jpg');
}

body.hero-defense .about-hero-banner {
    background-image: url('../../images/hero-images/project-defense.jpg');
}

body.hero-infrastructure .about-hero-banner {
    background-image: url('../../images/hero-images/project-infrastructure.jpg');
}

body.hero-oil-gas .about-hero-banner {
    background-image: url('../../images/hero-images/project-oil-gas.jpg');
}

body.hero-transportation .about-hero-banner {
    background-image: url('../../images/hero-images/project-transportation.jpg');
}

body.hero-utility .about-hero-banner {
    background-image: url('../../images/hero-images/project-utility.jpg');
}

/* DARK BLUE OVERLAY (Image ko dark karne ke liye) */
.about-hero-overlay {
    /* position: absolute;
    top: 0;
    background: linear-gradient(
    180deg,
    rgba(13, 27, 42, 0.68) 0%,
    rgba(10, 22, 36, 0.72) 100%
    );
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: 1; */
}

/* BANNER CONTENT STYLING */
.about-hero-content {
    position: relative;
    z-index: 2; /* Text ko overlay ke upar rakhne ke liye */
    max-width: 800px;
    color: #ffffff;
}

/* MAIN HEADING (About Alhamad Switchgear) */
.about-hero-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #ffffff;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* GREEN TEXT HIGHLIGHT */
.highlight-green {
    color: #2fa352; /* Image wala exact vibrant green */
}

/* SUBTITLE PARAGRAPH TEXT */
.about-hero-subtitle {
    font-size: 15px;
    font-weight: 400;
    color: #d1d5db; /* Light readable greyish-white */
    line-height: 1.6;
    margin: 0;
   
}















/* SECTION WRAPPER */
.who-we-are-section {
    padding: 15px 50px;
    background-color: #ffffff;
    width: 100%;
}

/* CONTAINER (Flex Layout) */
.who-we-are-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
}

/* LEFT CONTENT (Width 50%) */
.who-we-are-content {
    flex: 1;
    
    align-self: center;
}

/* GREEN TOP TAGLINE LINE */
.tagline-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.green-line {
    width: 32px;
    height: 3px;
    background-color: #2fa352;
    display: inline-block;
}

.tagline-text {
    font-size: 17px;
    font-weight: 700;
    color: #2fa352;
    letter-spacing: 1px;
}

/* MAIN HEADING */
.section-title {
   
    font-weight: 700;
    color: #0a2360;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin: 0 0 28px 0;
}

.green-text {
    color: #2fa352; /* Green highlight text */
}

/* SEPARATOR LINE UNDER HEADING */
.heading-border-line {
    width: 42px;
    height: 3px;
    background-color: #2fa352;
    margin-bottom: 28px;
}






.description-text p:last-child {
    margin-bottom: 0;
}

/* RIGHT IMAGE BOX (Exact height, weight & rounded corners) */
.who-we-are-image-box {
    width: 100%;
    max-width: none;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.who-we-are-image-box img {
    width: 100%;
    height: 100%;
  
    display: block;
}

/* MOBILE & TABLET RESPONSIVE */
@media (max-width: 992px) {
    .btn-product {
        max-width: 100% !important;
    }
    .products-section {
        padding: 15px !important;
    }
    .altamayez-section {
        padding: 15px 15px !important;
    }
    .who-we-are-section {
        padding: 0 15px !important;
    }
    .sets-us-apart-section {
       padding: 0 15px !important;  
    }
   
    .who-we-are-container {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .who-we-are-content, 
    .who-we-are-image-box {
        max-width: 100%;
        width: 100%;
    }
    .who-we-are-image-box {
        height: 320px;
    }
    .section-title {
        font-size: 30px;
    }
}













/* SECTION WRAPPER */
.sets-us-apart-section {
    padding: 15px 50px;
    background-color: #ffffff;
    width: 100%;
}

/* CONTAINER (Flex Grid) */
.sets-us-apart-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 52px;
}

/* LEFT COLUMN (Width ~45%) */
.left-column {
    flex: 1;
    
    align-self: center;
}

/* TAGLINE & GREEN LINE */
.left-column .tagline-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}





/* HEADING */
.sets-us-apart-section .section-title {
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 34px !important;
    color: #0a2360;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin: 0 0 40px 0;
}

.left-column .green-text {
    color: #2fa352;
}

/* IMAGE BOX (Exact height, width & smooth rounded corners) */
.feature-image-box {
    width: 100%;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.feature-image-box img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* RIGHT COLUMN (Width ~55%) */
.right-column {
    flex: 1;
    
    padding-top: 16px;
    align-self: center;
}

/* FEATURE LIST ITEMS */
.feature-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 40px 0;
    border-bottom: 1px solid #e5e7eb;
}

.feature-item:first-child {
    padding-top: 0;
}

.feature-item:last-child {
    border-bottom: none;
}

/* FEATURE TITLE (LEFT SIDE OF ROW) */
.feature-title {
    font-size: 15px;
    font-weight: 700;
    color: #0a2360;
   
    flex: 0 0 175px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  
}



/* FEATURE DESCRIPTION (RIGHT SIDE OF ROW) */
.feature-desc {
    margin-bottom: 0 !important;
   
    font-weight: normal;
    color: #6b7280;
    line-height: 1.7;
    flex: 1;
    margin-top: 0;
}

/* MOBILE RESPONSIVE */
@media (max-width: 992px) {
    .sets-us-apart-container {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .left-column, 
    .right-column {
        max-width: 100%;
        width: 100%;
    }
    .feature-item {
        flex-direction: column;
        gap: 8px;
        padding: 20px 0;
    }
    .feature-title {
        flex: auto;
    }
}


/* Container ko top se align karne ki bajaye middle/center flex karein */
.sets-us-apart-container {
    align-items: center !important;
}

.right-column {
  
    padding-top: 0 !important;
}












/* SECTION CONTAINER */
.core-values-section {
    padding: 15px 50px;
    background-color: #ffffff;
   
    
    margin: 0 auto;
}

/* HEADER STYLING */
.core-values-header {
    text-align: center;
    margin-bottom: 50px;
}

/* TAGLINE WITH DOUBLE LINES */
.core-tagline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.core-tagline .line {
    width: 35px;
    height: 3px;
    background-color: #2fa352;
}

.core-tagline .tag-text {
    font-size: 13px;
    font-weight: 700;
    color: #2fa352;
    letter-spacing: 1.5px;
}

/* MAIN TITLE */
.core-title {
    font-size: 56px !important;
    font-weight: 800;
    color: #0a2360;
    margin: 0;
}

.core-title .green-text {
    color: #2fa352;
}

/* GRID LAYOUT (4 CARDS IN A ROW) */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* CARD STYLING WITH SHADOW & ROUNDED CORNERS */
.value-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 35px 20px;
    text-align: center;
    /* Clean Soft Card Shadow & Subtle Border */
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
/* CIRCLE BOX */
.circle-img-box {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    background-color: #f7f9fa !important;
    margin: 0 auto 25px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* INNER IMAGE (NO CUT FIX) */
.circle-img-box img {
    width: 80% !important;
    height: 100% !important;
    object-position: center center !important;
    /* COVER KI BAJAYE CONTAIN USE KAREIN TAUKAY CUT NA HO */
    
    /* Spacing adjust karne ke liye padding */
    padding: 15px !important; 
    /* IMAGE KO BARI / ZOOM KARNE KE LIYE */
    transform: scale(1.3) translate(X-axis, Y-axis) !important;
    
    /* Smooth effect jab aap hover karein */
    transition: transform 0.3s ease !important;
    /* Center align rakhen */
    object-position: center !important; 
}

/* CARD TITLE & TEXT */
.card-title {
    font-size: 20px;
    font-weight: 700;
    color: #0a2360;
    margin-bottom: 12px;
}

.card-desc {
    font-size: 13.5px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
    .core-title {
        font-size: 28px;
    }
}









/* SECTION WRAPPER */
.vision-mission-section {
    padding: 15px 50px;
    background-color: #ffffff;
    width: 100%;
}

.vm-container {
   
    
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px; /* Vision aur Mission blocks ke beech ka gap */
}

/* INDIVIDUAL BLOCK */
.vm-block {
    width: 100%;
}

/* TOP TAGLINE & GREEN LINE */
.vm-tagline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.vm-line {
    width: 28px;
    height: 3px;
    background-color: #2fa352;
    display: inline-block;
}

.vm-tag-text {
    font-size: 18px;
    font-weight: 700;
    color: #2fa352;
    letter-spacing: 1px;
}

/* MAIN TEXT STYLING (No forced line breaks) */
.vm-text {
    font-size: 34px;
    font-weight: normal;
    color: #0a2360; /* Dark Navy Color */
    line-height: 1.35;
    margin: 0;
    letter-spacing: -0.3px;
}

/* VIBRANT GREEN HIGHLIGHTS */
.vm-text .green-text {
    font-weight: 700;
    color: #2fa352;
}




/* Green Span Extra Gap Fix */
.green-text,
.vm-text span {
    display: inline !important;        /* Inline-block ki wajah se aane wala extra gap khatam */
    margin: 0 !important;              /* Extra margins zero */
    padding: 0 !important;             /* Extra padding zero */
    white-space: normal !important;     /* Normal text flow */
}












/* SECTION BACKGROUND */
.contact-section {
    padding: 15px 120px;
    background-color: #f6f8fa;
    width: 100%;
    box-sizing: border-box;
}

.contact-container {
   
    
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* LEFT FORM CARD */
.contact-form-card {
    flex: 1.2;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group {
    flex: 1;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 8px;
}

/* INPUTS & TEXTAREA STYLING */
.form-group input,
.form-group textarea {
    width: 100%;
    background-color: #f3f4f6;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 14px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #2fa352;
    background-color: #ffffff;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
}

/* SELECT DROPDOWN FIX */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper select {
    width: 100%;
    background-color: #f3f4f6;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    padding: 14px 40px 14px 16px;
    font-size: 14px;
    color: #1f2937;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.select-wrapper select:focus {
    border-color: #2fa352;
    background-color: #ffffff;
}

.dropdown-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* SUBMIT BUTTON */
.submit-btn {
    background: linear-gradient(90deg, #2fa352 0%, #0a2360 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: opacity 0.3s ease;
    margin-top: 10px;
}

.submit-btn:hover {
    opacity: 0.92;
}

.btn-arrow {
    font-size: 16px;
}

/* RIGHT COLUMN STYLING */
.contact-info-content {
    flex: 1;
    max-width: 480px;
}

.contact-title {
    font-size: 48px;
    font-weight: 800;
    color: #0a2360;
    line-height: 1.15;
    margin: 0 0 20px 0;
}

.contact-title .green-text {
    color: #2fa352;
}

.contact-desc {
   
    margin-bottom: 25px;
}

.info-divider {
    width: 100%;
    height: 1px;
    background-color: #e5e7eb;
    margin-bottom: 30px;
}

/* INFO LIST ITEMS */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 14px;
    font-weight: 600;
    color: #0a2360;
    line-height: 1.5;
}

.icon-box {
    margin-top: 2px;
    flex-shrink: 0;
}

/* RESPONSIVE */
@media (max-width: 992px) {

    
    .site-footer {
        padding: 15px 15px !important;
    }
    .about-hero-banner {
        background-size: cover;
    }
    .contact-section {
    padding: 15px 15px;
   
   
}

    .contact-container {
        flex-direction: column-reverse;
        gap: 40px;
    }
    .contact-form-card, 
    .contact-info-content {
        width: 100%;
        max-width: 100%;
    }
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}













/* SECTION WRAPPER (Pure White & Center Aligned) */
.cta-clean-section {
    padding: 60px 20px;
    background-color: #ffffff !important;
    width: 100%;
    box-sizing: border-box;
}

.cta-clean-container {
   
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center !important; /* Everything centered */
    text-align: center !important;  /* Center text alignment */
}

/* CENTERED TAGLINE WITH DOUBLE LINES */
.cta-clean-tagline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cta-clean-line {
    width: 28px;
    height: 3px;
    background-color: #2fa352;
    display: inline-block;
}

.cta-clean-tag {
    font-size: 13px;
    font-weight: 700;
    color: #2fa352;
    letter-spacing: 1px;
}

/* CENTERED HEADING */
.cta-clean-title {
    font-size: 38px;
    font-weight: 800;
    color: #0a2360;
    line-height: 1.25;
    margin: 0 0 25px 0;
}

.cta-clean-title .green-text {
    color: #2fa352;
}

/* CENTERED BUTTONS CONTAINER */
.cta-clean-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 5px;
}

/* PRIMARY GRADIENT BUTTON (NO LINK, POINTER HAND CURSOR) */
.btn-primary {
    background: linear-gradient(90deg, #2fa352 0%, #0a2360 100%);
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer !important; /* 👈 Hand cursor on hover */
    user-select: none;
    transition: opacity 0.2s ease;
}

.btn-primary:hover {
    opacity: 0.92;
}

/* SECONDARY GREY BUTTON (NO LINK, POINTER HAND CURSOR) */
.btn-secondary {
    background-color: #cbd5e1;
    color: #475569;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer !important; /* 👈 Hand cursor on hover */
    user-select: none;
    transition: background-color 0.2s ease;
}

.btn-secondary:hover {
    background-color: #94a3b8;
    color: #1e293b;
}

.btn-arrow {
    font-size: 15px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 600px) {
    .cta-clean-buttons {
        flex-direction: column;
        width: 100%;
    }
    .btn-primary, 
    .btn-secondary, .btn-outline {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}











/* CIRCLE BOX CONTAINMENT */
.circle-img-box {
    width: 80px;         /* Aap ka circle box size (adjust as needed) */
    height: 80px;
    overflow: hidden;    /* Taakay bara karne par image circle se bahar na nikle */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;  /* Perfect circle ke liye */
}

/* IMAGE TRANSFORM SCALE (Bara karne ke liye) */
.circle-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* TRANSFORM PROPERTY TO ENLARGE IMAGE */
    transform: scale(0.7); /* 1.3 matlab 30% zoom/bari. Isay 1.4 ya 1.5 bhi kar sakti hain */
    transition: transform 0.3s ease; /* Smooth scaling ke liye */
}

/* OPTIONAL: HOVER EFFECT (Jab cursor layen toh thori aur bari ho) */




/* RESET GRID LAYOUT FOR SINGLE IMAGE */
.values-grid {
    display: block !important;       /* Grid layout khatam karne ke liye */
    width: 100% !important;
    text-align: center !important;   /* Horizontal centering */
    margin: 0 auto !important;
    padding: 0 !important;
}

/* SINGLE IMAGE WRAPPER */
.single-image-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 30px auto !important;     /* Center align & top-bottom space */
}

/* IMAGE WIDTH (WEIGHT) & ALIGNMENT */
.single-image-wrapper img {
    display: inline-block !important;
    width: 100% !important;           /* Screen ki 90% space legi (bari dikhne ke liye) */
    padding:15px 50px;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}











@media (max-width:768px){

    .hero-section{
        display:flex;
        flex-direction:column;
    }

    .project-bar{
        order:1;
        width:100%;
    }

    .hero-image{
        order:2;
    }

}




/* Mobile Banner */
.hero-banner-mobile{
    display:none;
}

@media (max-width:768px){

    .hero-banner-mobile{
        display:block;
        width:100%;
        height:220px;
        background:url('../../images/hero-images/home.jpeg') center center/cover no-repeat;
    }

}










/* Mobile */
@media (max-width:768px){

    .hero-section{
        background:none !important;
        height:auto !important;
        padding:25px 15px 40px;
    }

    .hero-banner-mobile{
        display:block;
        width:100%;
        height:220px;
        background:url('../../images/hero-images/home.jpeg') center center/cover no-repeat;
    }

    .project-bar{
        height:50px;
    }

    .project-content{
        font-size:18px;
        padding:0 15px;
    }

    .project-content span{
        display:block;
        margin:4px 0 0;
        font-size:13px;
    }

    .hero-image{
        width:100% !important;
        height:auto !important;
        margin:25px auto 0 !important;
    }

    .hero-image img{
        width:40px;
        height:40px;
    }

    .hero-image > img {
        min-height: 460px !important;
        height: unset !important;
    }
    .cta-buttons-wrapper {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: center !important;
    z-index: 2;
    margin-top: unset !important;
    
    }
    .core-values-section{
        padding: unset !important
    }
    .vision-mission-section{
        padding: 15px;
    }
    .quality-section{
        padding: 15px !important;
    }
}



/* ==========================
   MOBILE HERO ONLY
========================== */
@media (max-width:768px){

    .hero-section{
        background:none !important;
        padding:0 0 30px !important;
        height:auto !important;
    }

    .hero-image{
        width:85% !important;
        height:450px !important;   /* White card chhoti */
        margin:20px auto !important;
        border-radius:16px !important;
    }


    .hero-content{
        top:18px !important;
        left:18px !important;
        width:calc(100% - 36px) !important;
    }

    .hero-tag{
        font-size:12px !important;
    }

    .hero-content h1{
        font-size:26px !important;
        line-height:1.2 !important;
        margin:12px 0 !important;
    }

    .hero-content p{
        margin-bottom:35px !important;
        font-size:13px !important;
        line-height:1.5 !important;
    }

    .hero-buttons{
        flex-direction:column !important;
        gap:10px !important;
        margin-top:-23px !important;
    }

    .hero-buttons a{
        width:100% !important;
    }

    .trust-text{
        margin-top:15px !important;
    }

    .trust-text img{
        width:30px !important;
        height:30px !important;
    }

    .trust-text p{
        font-size:13px !important;
        top: -10px; 
         transform: translateY(15px);
    }
    .feature-list{
        padding: unset !important;
    }

}




/* Desktop par normal show */
.project-bar{
    display:flex;
}


/* Mobile ke liye bhi show */
@media(max-width:768px){

    .project-bar{
        display:flex;
    }

}



@media(max-width:768px) {
    .footer-columns {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: 30px !important;
        margin-bottom: 50px !important;
    }
    .commitment-content-side{
        padding-left: 15px;
    }
    .commitment-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 270px;
    padding-right: 15px !important;
   
    }
    .commitment-feature-item::after {
        display: none;
    }
    .commitment-icon-box {
        width: 100%;
        height: 120px;
        margin: 0 auto;
        transform: none;
    }
    .commitment-icon-box img {
        width: 120px;
        height: 110px;
        transform: none;
    }
    .commitment-feature-title {
        width: 100%;
        min-height: 42px;
        padding-top: 7px;
        text-align: center;
        white-space: normal;
        transform: none;
    }
    .commitment-feature-text {
       
        padding-top: 0 !important;
        text-align: center !important;
        transform: none;
    }
    .commitment-features-grid{
        padding-top: 25px;
      
    }
    .news-header-section{
        padding: unset !important;
    }
    .transport-section{
        padding: 15px !important; 
    }
   
/* .news-cards-section{
    padding: unset !important;
} */
.cta-section{
    padding: unset !important;
}
.products-section .container{
    padding: unset !important;
}
.commitment-feature-text{
    margin: unset !important;
}
.transport-container{
    flex-direction: column !important;
        gap: 25px !important;
}
.transport-content { 
    width: 100% !important;
}
.transport-image { 
    width: 100% !important;
}
}



/* TEMP TEST PROJECT BAR */

.project-bar{
    padding:40px 0px;
    display:flex !important;
    width:100%;
    height:55px;
    background: linear-gradient(90deg, #34a24b 0%, #144b55 75%);
    align-items:center;
    justify-content:center;
}


@media(max-width:768px){

    .project-bar{
        display:flex !important;
    }

}




@media(max-width:768px){

    .single-image-section{
        width:100%;
        margin-top:30px;
        overflow:hidden;
        padding:0 15px;
    }

    .single-image-section img{
        width:100% !important;
        height:auto !important;
        object-fit:contain !important;
        display:block;
        margin:auto;
        border-radius:15px;
    }
    .hero-buttons a{
        padding: 10px 0px !important;
    }
   
    
    .right-column{
        margin-top: unset !important;
    }

}








/* ==========================
   COMMITMENT MOBILE VIEW
========================== */
/* ===========================
   COMMITMENT MOBILE
=========================== */
/* CIRCLE BACKGROUND & SVG COLOR */
/* SECTION WRAPPER */

/* BUTTON HOVER: SIRF TEXT AUR BORDER GREEN HONGI */
.action-btn:hover {
    border-color: #2bb673 !important;
}

.action-btn:hover span:first-child {
    color: #2bb673 !important;
}

/* DOWNLOAD BROCHURE TEXT & BORDER GREEN ON HOVER (FORCED) */
.action-btn:hover {
    border-color: #2bb673 !important;
}

.action-btn:hover > span:first-child,
div.action-btn:hover > span:not(.btn-arrow) {
    color: #2bb673 !important;
}
.items-section {
    width: 100% !important;
   
    margin: 0 auto !important;
    padding: 40px 100px !important;
}

/* 2-COLUMN GRID */
.items-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

/* CARD CONTAINER */
.item-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

/* LEFT IMAGE AREA WITH GREY BACKGROUND */
.item-img-box {
    width: 58% !important;
    height: 250px !important;
    background-color: #f1f3f5 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    padding: 10px !important;
}

.item-img-box img {
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
}

/* RIGHT INFO CONTENT */
.item-info {
    width: 52% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* TITLE */
.item-title {
    color: #1fb34b !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
}

/* SUBTITLE */
.item-subtitle {
    color: #0b1a30 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
}

/* DESCRIPTION */
.item-desc {
    color: #718096 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 0 14px 0 !important;
}

/* BUTTON MAIN CONTAINER */
.action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 4px 4px 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 50px !important;
    width: fit-content !important;
    cursor: pointer !important;
    user-select: none !important;
}

.action-btn span {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #0b1a30 !important;
    letter-spacing: 0.3px !important;
}

/* ARROW CIRCLE - GUARANTEED PURE BLACK */
.arrow-icon-circle {
    width: 26px !important;
    height: 26px !important;
    background-color: #000000 !important; /* Pure Black Background */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s ease !important;
    flex-shrink: 0 !important;
}

/* SVG ARROW ICON STYLING */
.arrow-icon-circle svg {
    stroke: #ffffff !important; /* White Icon Color */
    display: block !important;
}

/* HOVER EFFECT - TURNS GREEN ON HOVER */
.action-btn:hover .arrow-icon-circle,
.item-card:hover .arrow-icon-circle {
    background-color: #2bb673 !important;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .items-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 576px) {
    .item-card {
        flex-direction: column !important;
    }
    .item-img-box, .item-info {
        width: 100% !important;
    }
}




/* Disable hover effect on CTA buttons */
/* Disable all hover effects */
/* CTA Button Text */
.cta-btn,
.cta-btn:link,
.cta-btn:visited{
    color: #fff !important;
    text-decoration: none !important;
}

/* Primary Button Hover */
.cta-btn.btn-primary:hover{
    border-color: #2bb673 !important;

    color: #fff !important;
}

/* Outline Button Hover */
.cta-btn.btn-outline:hover{

    color: #fff !important;
}

/* Prevent Blue Text on Hover */
.cta-btn:hover,
.cta-btn:hover span{
    color: #fff !important;
    text-decoration: none !important;
}







/* FEATURE SECTION CONTAINER */
/* FEATURE SECTION CONTAINER */
/* FEATURE SECTION CONTAINER */
/* FEATURE SECTION CONTAINER */
.transport-section{
   
    margin:40px auto;
    padding:0 50px;
}

.transport-container{
    display:flex;
    align-items:center;
    gap:70px;
}

.transport-image{
    width:50%;
}

.transport-image img{
    width:100%;
    border-radius:20px;
    display:block;
}

.transport-content{
    width:50%;
}

.transport-heading{
    margin:0 0 6px 0;
    padding:0;

    font-size:38px;
    font-weight:800;
    line-height:1.1;
    color:#0a2360;
}

.transport-text{
    margin:0 0 12px 0;
    padding:0;
    
    line-height:1.6;
        color: rgba(0, 0, 0, 0.51) !important;

}

.transport-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
    padding:5px 5px 5px 16px;
    border:1px solid #cbd5e1;
    border-radius:50px;
    cursor:pointer;
}

.transport-arrow{
    width:30px;
    height:30px;
    border-radius:50%;
    background:linear-gradient(90deg, #2fa352 0%, #154c59 50%, #0d364f 100%) !important;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
}

.transport-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:5px 5px 5px 16px;
    border:1px solid #cbd5e1;
    border-radius:50px;
    cursor:pointer;
    transition:all .3s ease;
}

.transport-btn span:first-child{
    color:#0a2360;
    font-weight:700;
    transition:color .3s ease;
}

.transport-arrow{
    width:30px;
    height:30px;
    border-radius:50%;
    background: linear-gradient(90deg, #2fa352 0%, #154c59 50%, #0d364f 100%) !important;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .3s ease;
}

/* Hover Effect */
.transport-btn:hover{
    border-color:#2bb673;
}

.transport-btn:hover span:first-child{
    color:#2bb673;
}

.transport-btn:hover .transport-arrow{
    color:#fff;
}









@media (min-width: 1200px) {
    .description-section {
        padding: 15px 100px !important;
    }
}
@media (min-width: 1200px){
    .section-block{
        padding:15px 100px !important;
    }
}




/* INFRASTRUCTURE SECTION CONTAINER */
.infra-section {
    width: 100% !important;
   
    margin: 0 auto !important;
    padding: 10px 50px;
}

.infra-container {
    display: flex !important;
    align-items: center !important;
    gap: 70px !important;
}

/* LEFT CONTENT BOX */
.infra-info {
    width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* TITLE (TIGHT MARGIN) */
.infra-title {
    color: #0a2360 !important;
    font-size: 38px !important;
    font-weight: 800 !important;   
    padding-bottom: 8px !important; /* Visual gap & spacing add kar di hai */
    line-height: 1.1 !important;
}
.dropdown-sub-menu {border-radius:20px;}
/* DESCRIPTION PARAGRAPHS */
.infra-desc {
    color: rgba(0, 0, 0, 0.51) !important;
    
    line-height: 1.5 !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
}

/* RIGHT IMAGE BOX (EXACT 50% WIDTH) */
.infra-img-box {
    max-width: 875px !important;
    max-height: 570px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    width: 50%;
}

.infra-img-box img {
    max-width: 875px !important;
    max-height: 570px !important;
    object-fit: cover !important;
    border-radius: 20px !important;
}

/* BUTTON BASE STYLES */
.infra-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 5px 5px 5px 16px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 50px !important;
    width: fit-content !important;
    cursor: pointer !important;
    user-select: none !important;
    margin-top: 8px !important;
    transition: all 0.3s ease !important;
}

.infra-btn span:first-child {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0a2360 !important;
    letter-spacing: 0.5px !important;
    transition: color 0.3s ease !important;
}

/* BLACK ARROW CIRCLE FOR SVG */
.infra-btn .infra-btn-arrow {
    width: 26px !important;
    height: 26px !important;
    background-color: #000000 !important;
    background: linear-gradient(90deg, #2fa352 0%, #154c59 50%, #0d364f 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s ease !important;
    flex-shrink: 0 !important;
}

/* SVG ICON WHITE STROKE */
.infra-btn .infra-btn-arrow svg {
    stroke: #ffffff !important;
    display: block !important;
}

/* HOVER EFFECT: BORDER, TEXT & ARROW CIRCLE ALL TURN GREEN */
.infra-btn:hover {
    border-color: #2bb673 !important;
}

.infra-btn:hover span:first-child {
    color: #2bb673 !important;
}

.infra-btn:hover .infra-btn-arrow {
    background-color: #2bb673 !important;
    background: #2bb673 !important;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .infra-container {
        flex-direction: column-reverse !important;
        gap: 25px !important;
    }
    
    .infra-img-box, 
    .infra-info {
        width: 100% !important;
    }
    
    .infra-img-box {
        height: 280px !important;
    }
}


/* LEFT CONTENT KO RIGHT THORA SHIFT KARNE KE LIYE */


/* MOBILE REPEATER RESPONSIVE ADJUSTMENT */
@media (max-width: 992px) {
    .infra-info {
        padding-left: 0px !important; /* Mobile par wapas normal ho jayega */
    }
}


.main-header{
    padding:15px 0 !important;
}

.nav-menu a{
    color: #223a70 !important;
    white-space: nowrap !important;
}

.nav-button{
    flex-shrink:0 !important;
    margin-left:20px !important;
}



.navbar-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    
}






/* BUTTON WRAPPER ALIGNMENT */
.cta-buttons-wrapper {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: flex-end;
    z-index: 2;
    margin-top: 100px;
    transform: translateY(16px);
}

@media (min-width: 768px) {
    .cta-banner > .cta-content {
        flex: 0 0 58.333333% !important;
        max-width: 58.333333% !important;
    }

    .cta-banner > .cta-buttons-wrapper {
        flex: 0 0 41.666667% !important;
        max-width: 41.666667% !important;
        width: auto !important;
    }
}

/* FIX VERTICAL ALIGNMENT */
.cta-banner {
    align-items: center !important; /* instead of flex-end */
}

/* TEXT STYLING */
.cta-title {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    margin: 15px 0;
}

.cta-green-text {
    color: #22c55e;
}

.cta-desc {
    color: rgba(255,255,255,0.7);
   
    padding-right: 50px;
}

/* BUTTON DESIGN (MATCH IMAGE) */
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* GREEN BUTTON */
.btn-primary {
    /* background: linear-gradient(135deg, #22c55e, #16a34a); */
    color: #fff;
}

/* OUTLINE BUTTON */
.btn-outline {
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}

/* HOVER EFFECT */
.cta-btn:hover {
    transform: translateY(-2px);
}



/* SUB HEADING LINE */
.cta-accent-line {
    width: 30px;
    height: 2px;
    background: #22c55e;
    display: inline-block;
    margin-right: 10px;
}

.dropdown-arrow{
    display: inline-block;
    font-size: 15px;
    margin-left: 4px;
    position: relative;
    top: -4px;   /* Arrow upar aa jayega */
    transition: transform .3s ease;
}



.product-tabs{
    margin:50px 0;
}

/* NAV TABS */
.nav-pills{
    flex-wrap: wrap;
    justify-content: center;
}



.tab-content{
    margin-top:40px;
}

/* ===== SECTION ===== */

.section-block{
    padding:60px 20px;
}

.section-light{
    background:#ffffff;
}

.section-gray{
    background:#f5f7fb;
}

.who-we-are-content .section-title{
    font-size:56px;
    font-weight:700;
    color:#16387C;
}

.section-text{
    color:rgba(125, 125, 125, 1);
    line-height:1.9;
    padding-right: 0 10px !important
}

.feature-list li{
    margin-bottom:12px;
}

/* IMAGE */
.image-box{
    /* background:#f3f5f9; */
    
    border-radius:15px;
}

.image-box img{
    width:100%;
    height:auto;
    display:block;
}

.badge-light{
    background:#eef3f8;
    padding:8px 14px;
    font-weight:500;
    border-radius:6px;
}

/* DESKTOP */
@media (min-width: 1200px){
    .section-block{
        padding: 15px 187px !important;
    }
}

/* 🔥 MOBILE FIX */
@media (max-width: 767px){

    .section-block{
        padding:40px 15px;
    }

    .col-lg-6{
        padding-left:0;
        padding-right:0;
    }

    .image-box{
        padding:10px;
        margin-left:-15px;
        margin-right:-15px;
        border-radius:0;
    }

    .image-box img{
        border-radius:0;
    }
        

}

/* GALLERY */
.gallery-img{
    width:100%;
    border-radius:10px;
}



.custom-tab{
    min-width:150px;
    padding:10px 20px;
    border:2px solid #20c55a !important;
    border-radius:10px !important;
    background:#fff;
    color:#12326b !important;
    font-weight:600;
    text-align:center;
    transition:.3s;
}

.custom-tab.active{
    background: linear-gradient(90deg, #34a24b 0%, #144b55 75%);
    color:#fff !important;
    border:none !important;
}

.custom-tab:hover{
    background: green;
    color:#fff !important;
}
.nav-menu a .active{    
    color: green;   
}

.navbar-wrapper:hover{
    color: green;
    /* color:#fff !important; */
}







.industry-card .card-body{
     min-height:300px 
    }

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: green;
}




@media (max-width: 1400px) {
   
    html, body{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important; /* Right side par blank space banny se rokey ga */
    box-sizing: border-box !important;
    font-size: 13px !important;
   
}

.hero-section {
   
    height: 570px;
}
.feature-item {
   
    padding: 18px 0;
  
}
.defense-card-img img {
   
    height: 240px;
    
}

footer{
   font-size: 11px;
}

.about-hero-banner {
       height: 350px;
}

.cta-title {
    font-size: 20px;
}


.who-we-are-content .section-title,
.sets-us-apart-section .section-title,
.main-title,
.core-title,
.altamayez-title,
.quality-title
{
    font-size: 36px !important;
}

 .commitment-feature-text {
        max-width: unset;
    }


}


@media (max-width: 768px) {

    .news-cards-container {
        grid-template-columns: 1fr !important; /* Stack 1 card per row on mobile */
    }
    .defense-cards-container {
        grid-template-columns: 1fr !important; /* Stack 1 card per row on mobile */
    }
    .infrastructure-cards-container {
        grid-template-columns: 1fr !important; /* Stack 1 card per row on mobile */
        padding: unset;
    }
    .cta-banner{
        border-radius: 0px !important;
    }
    .news-header-container, .news-cards-section {
        padding: 15px !important;
    }
    .stats-section{
        margin-top: 10px;
        padding: unset !important;
    }
    .stat-box .stat-desc{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .products-grid{

        padding: unset !important;
    }
    .products-header{
        padding: unset !important;
    }
    




    .cta-section {
        padding: 15px !important;
    }

    .cta-banner {
        padding: 36px 20px !important;
        border-radius: 16px !important;
    }

    .cta-content,
    .cta-buttons-wrapper {
        min-width: 0 !important;
        width: 100% !important;
    }

    .cta-title {
        font-size: 24px !important;
        line-height: 1.2 !important;
        overflow-wrap: normal !important;
    }

    .cta-desc {
        padding-right: 0 !important;
        padding-top: 8px !important;
    }

    .cta-buttons-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-top: 0 !important;
        padding-top: 12px !important;
        transform: none !important;
    }

    .cta-btn {
        width: 100% !important;
        white-space: normal !important;
        padding: 13px 16px !important;
    }



    .main-title {
        font-size: 28px;
    }



    .commitment-feature-item:not(:first-child) {
    padding-left: unset !important;
    }
    .about-hero-banner {
       
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 220px;
        padding-left: 5%;
        padding-right: 5%;
        
    }
    
    .about-hero-title {
        font-size: 30px;
    }
    .about-hero-subtitle {
        font-size: 13px;
    }

    .infra-section{
        padding: 15px !important;
    }

    .vm-text {
        font-size: 24px;
        line-height: 1.4;
    }
    .vm-container {
        gap: 40px;
    }
}

@media (min-width: 769px) {
    .commitment-section,
    .commitment-container {
        min-height: 486px;
        height: 486px;
    }

    .commitment-content-side,
    .commitment-image-side,
    .commitment-image-side img {
        min-height: 486px;
        height: 486px;
    }

    .commitment-sub-heading {
        margin-top: 55px;
        margin-bottom: 18px;
    }

    .commitment-sub-text {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .commitment-main-title {
        font-size: 50px;
        line-height: 1.08;
        margin-bottom: 16px;
    }

    .commitment-features-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 50px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 25px;
    }

    .commitment-feature-item,
    .commitment-feature-item:not(:first-child) {
        width: auto !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.18);
    }

    .commitment-feature-item:last-child {
        border-right: 0;
    }

    .commitment-icon-box {
        width: 56px;
        height: 56px;
        transform: none;
    }

    .commitment-icon-box img {
        width: 56px;
        height: 56px;
        transform: none;
    }

    .commitment-feature-title {
        font-size: 15px;
        padding-top: 26px;
        transform: none;
    }

    .commitment-feature-text {
        padding-right:5px;
        padding-top: 8px;
       
        line-height: 1.45;
        transform: none;
    }
   
}

@media (min-width: 769px) and (max-width: 1399px) {
    .commitment-features-grid {
        column-gap: 30px;
    }
}