/* ===================== GLOBAL RESET ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {  
    font-family: 'Poppins', sans-serif;

    background: #f4f8ff;
    
}

/* ===================== TOP BAR ===================== */
/* TOP BAR */
/* ===================== TOP BAR - PREMIUM ===================== */

.top-bar {
width: 100%;
background: transparent;
font-family: "Segoe UI", sans-serif;
}

/* Flexible layout with grid for larger screens */
.top-bar-flex {
display: grid;
grid-template-columns: 35% 65%;
width: 100%;
height: 48px;
}

/* LEFT SECTION */
.top-left {
background: #2e67b3; 
/* background: #22A8FF; */
position: relative;
display: flex;
align-items: center;
padding-left: 30px;
}

.top-left::after {
content: "";
position: absolute;
right: -35px;
top: 0;
width: 36px;
height: 100%;
background: #2e67b3;
/* background: #22A8FF; */
clip-path: polygon(0 0, 100% 0, 0 100%);
}

.welcome-text {
color: #fff;
padding-left: 20%;
font-size: 17.5px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
letter-spacing: 0.4px;
}

/* RIGHT SECTION */
.top-right {
background: #0A2A43;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 25px;
gap: 25px;
flex-wrap: wrap;
}

/* CLICKABLE CONTACTS */
.top-right a {
display: inline-flex;
align-items: center;
color: #ffffff;
font-size: 14px;
text-decoration: none;
padding-left: 20px;
border-left: 1px solid rgba(255,255,255,0.25);
transition: 0.25s ease;
  font-family: 'Inter', sans-serif;
}

.top-right a:first-child {
border-left: none;
padding-left: 0;
}

.top-right a:hover {
opacity: 0.85;
transform: translateY(-1px);
}

.top-right i {
width: 17px;
margin-right: 7px;
color: #fff;
}
.top-right a i {
margin-right: 8px !important;
width: 18px;
stroke-width: 2.2;
}

/* SOCIAL ICONS */
.social-icons {
margin-left: 15px;
padding-left: 20px;
border-left: 1px solid rgba(255,255,255,0.25);
display: flex;
gap: 14px;
flex-wrap: wrap;
}

.social-icons a {
font-size: 17px;
color: #fff;
transition: 0.25s ease;
}

.social-icons a:hover {
transform: translateY(-2px);
color: inherit !important;
}

.social-icons a:hover i {
color: inherit !important;
}

/* Brand Hover Colors */
.social-icons .yt:hover { color: #ff3b30 !important; }
.social-icons .li:hover { color: #0a66c2 !important; }
.social-icons .wa:hover { color: #25d366 !important; }
.social-icons .ig:hover { color: #e1306c !important; }

/* ====================== RESPONSIVE ====================== */
@media (max-width: 1338px) {
.social-icons {
display: none;
}

}
@media (max-width: 964px) {
/* Hide email link next (assuming it's second in order) */
.top-right a.email-link {
display: none;
}
.top-bar{
    padding-bottom: 5px;
}
}

@media (max-width: 600px) {
    .top-bar{
    padding-bottom: 0px;
}
      .top-bar-flex {
        grid-template-columns: auto 1fr; /* keep left and right */
    }

    /* Left welcome section stays same width */
    .top-left {
        padding-left: 30px;
    }
    
/* Hide email link next (assuming it's second in order) */
.top-right a.email-link {
display: none;
}
.top-right a.contact-link { display: none; }
.welcome-text {
        font-size: 14px;
        padding-left: 15px;
        text-align: left;
        width: auto;   /* IMPORTANT: remove 100% */
    }

    /* Right background remains but shrinks naturally */
    .top-right {
        background: #0f3348;
        display: flex;
        justify-content: flex-end;
        padding: 0 10px;
        gap: 10px;
        width: auto;  /* allow shrinking */
    }
    
}

@media (max-width: 480px) {

    /* DO NOT MAKE IT 1 COLUMN */
    .top-bar-flex {
        grid-template-columns: auto 1fr; /* keep left and right */
    }

    /* Left welcome section stays same width */
    .top-left {
        padding-left: 30px;
    }

    .welcome-text {
        font-size: 14px;
        padding-left: 15px;
        text-align: left;
        width: auto;   /* IMPORTANT: remove 100% */
    }

    /* Right background remains but shrinks naturally */
    .top-right {
        background: #0f3348;
        display: flex;
        justify-content: flex-end;
        padding: 0 10px;
        gap: 10px;
        width: auto;  /* allow shrinking */
    }
     /* hide items one-by-one */
    .social-icons { display: none; }
    .top-right a.email-link { display: none; }
    .top-right a.contact-link { display: none; }
}



/* ===================== HEADER MAIN ===================== */
/* ======== HEADER MAIN ======== */
.header-main {
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
  font-family: 'Inter', sans-serif;
}

.header-flex {
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

/* = Left: Logo + Brand = */
.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-logo {
  height: 106px;
  padding-left: 30px;
}

.logo-text .brand {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  display: flex;
  gap: 8px;
}

.text-3d {
    font-weight: 900;
    background: linear-gradient(
        135deg,
        #d7d7d7 0%,
        #f3f2f2 20%,
        #9e9e9e 40%,
        #f1efef 60%,
        #7d7d7d 80%,
        #cfcfcf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    overflow: hidden;
}

.text-3d::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.6) 50%,
        transparent 100%
    );
    animation: shine 2.8s infinite;
}

@keyframes shine {
    0% { left: -150%; }
    100% { left: 150%; }
}

.text-auto {
    background: linear-gradient(
        to bottom,
        #5a98ce 0%,
        #4c86b6 35%,
        #123a5a 65%,
        #0c2840 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* tagline */
.tagline {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: #102f6c;
  font-weight: 500;
font-family: 'Poppins', sans-serif !important;
}

/* = Right Panels = */
.header-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.quality-box {
  display: flex;
  gap: 36px;
  align-items: center;
}

.quality-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* PNG icon styling */
.q-icon-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* text */
.q-text {
  display: flex;
  flex-direction: column;
}

.q-title {
  font-size: 16px;
  font-weight: 800;
  color: #0A2A43;
}

.q-sub {
  font-size: 12px;
  color: #5b6064;
  margin-top: 2px;
  font-weight: 600;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
  .header-info { display: none; }
  .main-logo { height: 70px; }
  .logo-text .brand { font-size: 22px; }
  .tagline { font-size: 12px; }
}

@media (max-width: 576px) {
  .logo-text .brand { font-size: 20px; }
  .tagline { font-size: 11px; }
}



/* ===================== NAVBAR (STICKY) ===================== */
/* ================= NAVBAR BASE ================ */
.navbar {
    width: 100%;
    background: white;
    padding: 12px 0;
    position: relative;
    z-index: 1000;
   border-top: 1px solid #9b9b9b62;  /* lighter blue */
}

.navbar ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.navbar > ul > li {
    margin-right: 30px; /* add gap between direct li children */
}

/* Remove last extra margin */
.navbar > ul > li:last-child {
    margin-right: 0;
}


.navbar ul li {
    position: relative;
}

.navbar ul li a {
    color: #003e7e;
    font-weight: 600;
    font-size: 15px;
    text-transform: capitalize;
    padding: 8px 6px;
    text-decoration: none;
    display: inline-block;       /* important for transform to work */
    transition: all 0.3s ease;   /* smooth transition for color and movement */
}

.navbar ul li a:hover {
    color: #007bff;               /* text color on hover */
    transform: translateY(-4px);  /* lift up slightly */
}

/* Down arrow for dropdown links */
.navbar ul li.dropdown > a::after {
    content: " ▼";             /* small downward arrow */
    font-size: 0.7em;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

/* Optional: rotate arrow when dropdown is active/open */
.navbar ul li.dropdown:hover > a::after {
    transform: rotate(180deg);
}

/* Right arrow for buttons like CONTACT US */
.navbar ul li a.contact-btn::after {
    content: " ➤";             /* small right arrow */
    font-size: 0.8em;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

/* Hover effect for contact button arrow (optional) */
.navbar ul li a.contact-btn:hover::after {
    transform: translateX(3px); /* moves arrow slightly on hover */
}

/* ================= DESKTOP DROPDOWN (VERTICAL 250px) ================= */
.dropdown {
    position: relative;
}

/* Hide all dropdowns by default */
.navbar ul li.dropdown ul {
    display: none;        /* hidden initially */
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 150px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 99;
}

/* Show dropdown on desktop hover */
@media (min-width: 992px) {
    .navbar ul li.dropdown:hover ul {
        display: block;
    }
}

/* Show dropdown when JS adds "show" class */
.navbar ul li.dropdown ul.show {
    display: block;
    position: relative;  /* for mobile, inside menu */
}

/* Increase navbar height for tablet and mobile only */
@media (max-width: 992px) {
/* Adjust top and bottom padding to increase height */
.navbar {
padding: 20px 0;  /* increase from 12px to 25px */
}

/* Center the hamburger menu vertically with new height */
.menu-toggle {
    top: 50%;
    transform: translateY(-50%);
}

/* Optional: adjust mobile drawer padding so links don't stick too high */
.navbar ul {
    padding-top: 100px;  /* increase slightly if needed */
}
}

  .dropdown-menu a {
       display: block;
        width: 100%;
        padding: 10px 16px;
        color: #003e7e;
        text-decoration: none;
        transition: background 0.18s ease, color 0.18s ease;
        box-sizing: border-box;
        font-size: 13.5px !important;
         font-family: 'Inter', sans-serif;
         padding-bottom: 14px !important;
    }

/* desktop dropdown: vertical list, fixed 250px, left aligned under parent */
@media (min-width: 993px) {
    .dropdown-menu {
        position: absolute;
        top: calc(100% + 6px); /* just under the parent link */
        left: 0;
        width: 260px;                /* fixed width */
        background: #ffffff;
        border-radius: 6px;
        box-shadow: 0 6px 22px rgba(0,0,0,0.12);
        opacity: 0;
        visibility: hidden;
        transform-origin: top left;
        transition: opacity 0.22s ease, transform 0.22s ease;
        display: flex;
        flex-direction: column;
        z-index: 1100;
        cursor: pointer; 
    }

    .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-menu li {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /* links inside desktop dropdown: block, no underline, fill full 250px */
    /* .dropdown-menu a {
        display: block;
        width: 100%;
        padding: 10px 16px;
        color: #003e7e;
        font-size: 14px;
        text-decoration: none;
        transition: background 0.18s ease, color 0.18s ease;
        box-sizing: border-box;
    } */

    /* hover fills entire 250px area and shows left accent */
    .dropdown-menu a:hover {
        background: #f0f8ff;
        color: #003e7e;
        border-left: 4px solid #007bff;
        padding-left: 12px; /* keep a little inner offset while left border appears */
    }
}

/* ================= HAMBURGER ================= */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 16px;
    z-index: 2000;
}

.menu-toggle span {
    width: 28px;
    height: 3px;
    background: #003e7e;
    border-radius: 3px;
    transition: 0.3s ease;
}

/* X animation */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
}

/* ================= MOBILE NAV ================= */
@media (max-width: 992px) {

    .menu-toggle {
        display: flex;
    }

    .navbar ul {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 80px;
        padding-left: 18px;
    }

    .nav-links {
        position: fixed;
        left: -280px;
        top: 0;
        width: 260px;
        height: 100vh;
        background: white;
        padding: 20px;
        box-shadow: 3px 0 20px rgba(0,0,0,0.20);
        transition: 0.35s ease;
        display: flex;
        flex-direction: column;
        gap: 15px;
        overflow-y: auto;
        z-index: 1500;
    }

    /* slide open */
    .nav-links.active {
        left: 0;
    }

    /* remove underline for mobile */
    .nav-links a {
        text-decoration: none;
        width: 100%;
        display: block;
        color: #003e7e;
    }

    /* MOBILE DROPDOWN: vertical 250px inside drawer */
    .dropdown-menu {
        position: static;
        width: 250px !important; /* fixed width */
        padding: 0;
        margin-left: 0;
        background: #ffffff;
        border-left: 3px solid #003e7e;
        box-shadow: none;
        display: none;
        opacity: 1;
        visibility: visible;
    }

    .dropdown-menu.show {
        display: block;
    }

    .dropdown-menu li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

 .dropdown-menu a {
    display: block;
    width: 100%;
    padding: 7px 16px;     /* reduced padding -> NO GAP */
    color: #003e7e;
    font-size: 14px;
    text-decoration: none;
    box-sizing: border-box;
    margin: 0;             /* remove unwanted spacing */
    transition: background 0.18s ease, color 0.18s ease;
}
    /* mobile hover */
    .dropdown-menu li a:hover {
        background: #e9f0ff;
        color: #003e7e;
    }
}

/* Sticky shadow */
.navbar.sticky {
    position: sticky;
    top: 0;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

@media (max-width: 992px) {
/* Hide dropdown menus entirely on tablet/mobile */
.navbar ul li.dropdown ul,
.dropdown-menu {
display: none !important;
}

/* Remove down arrow on dropdown links */
.navbar ul li.dropdown > a::after {
    content: none !important;
}
}

/* LEFT CONTACT BUTTON - hidden by default */
.left-contact-btn {
    display: none; /* hide on desktop */
    position: absolute;
    left: 20px; /* left side of navbar */
    top: 50%;
    transform: translateY(-50%);
    background: #007bff;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    z-index: 2000;
    transition: background 0.3s ease;
}

.left-contact-btn:hover {
    background: #0056b3;
}

/* SHOW ONLY ON TABLET/MOBILE */
@media (max-width: 992px) {
    .left-contact-btn {
        display: block;
    }
}

/* ===================== PAGE CONTENT ===================== */
.content {
    width: 90%;
    margin: 140px auto; 
    min-height: 60vh;
}

/* ===================== FOOTER ===================== */
/* =================== FOOTER MAIN =================== */
.footer {
    background: #000000;
    color: #fff;
    padding: 60px 6%;
    font-family: 'Poppins', sans-serif;
}

.footer-container {
    display: grid;
    grid-template-columns: 25% 18% 23% 1fr;
    gap: 45px;
}

.footer-logo {
    width: 140px;
    margin-bottom: 15px;
}

.footer-about-text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-title {
    font-size: 20px;
    font-weight: 700;
    color: #2e67b3;
    margin-bottom: 18px;
}

/* QUICK LINKS */
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    text-decoration: none;
    color: #d9e6f7;
    font-size: 14.5px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #2e8cff;
    padding-left: 4px;
}

/* CONTACT DETAILS */
.footer-contact p {
    margin: 12px 0;
    line-height: 1.5;
    font-size: 14px;
}

.footer-contact i {
    color: #2e8cff;
    margin-right: 7px;
}
.footer-contact2{
    margin-top: 50px;
}
.footer-contact2 p {
    margin: 12px 0;
    line-height: 1.5;
    font-size: 14px;
}

.footer-contact2 i {
    color: #2e8cff;
    margin-right: 7px;
}

.footer-contact a,
.footer-contact2 a {
    color: #ffffff;
    text-decoration: none;
    margin-left: 5px;
    font-weight: 500;
}

.footer-contact a:hover,
.footer-contact2 a:hover {
    color: #2e8cff;
}


/* SOCIAL ICONS */
.footer-social a {
    color: #fff;
    font-size: 18px;
    margin-right: 13px;
    transition: 0.3s;
}

.footer-social a:hover {
    transform: translateY(-3px);
}

.footer-social .ig:hover { color: #e1306c !important; }
.footer-social .li:hover { color: #0a66c2 !important; }
.footer-social .yt:hover { color: #ff3b30 !important; }
.footer-social .wa:hover { color: #25d366 !important; }

/* MAP */
.footer-map iframe {
    border-radius: 6px;
}

/* BOTTOM COPYRIGHT BAR */
.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.devby {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dev-logo {
    height: 42px;
    vertical-align: middle;
}

/* ============== FLOATING BUTTONS ============== */
.float-wa,
.float-call {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 99999;
}

.float-call {
    bottom: 130px; /* keeps call icon above whatsapp */
}

.float-wa-icon,
.float-call-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
    cursor: pointer;
    transition: 0.25s ease;
}

.float-wa-icon:hover,
.float-call-icon:hover {
    transform: scale(1.1);
}

/* Scroll to Top Button */
.scroll-top {
    position: fixed;
    bottom: 10px;
    right: 20px;
    z-index: 999;
    display: none;
    cursor: pointer;
}

.scroll-top img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    transition: 0.3s ease;
}

.scroll-top img:hover {
    transform: scale(1.1);
}
html {
    scroll-behavior: smooth;
}

/* =================== RESPONSIVE =================== */
@media(max-width: 1100px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 650px) {
    .footer-container {
        grid-template-columns: 1fr;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }
}


/* =====================------------- Index ===================== */

/* ===== HERO SECTION ===== */
.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Full screen */
    overflow: hidden;
}

/* -------- DESKTOP VIDEO -------- */
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Perfectly fit all screen sizes */
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

/* -------- MOBILE/TABLET IMAGE FALLBACK -------- */
.hero-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* Hidden on desktop */
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: fadeZoom 10s infinite;
}

/* Hero image animations */
.img1 {
    animation-delay: 0s;
}
.img2 {
    animation-delay: 5s;
}

/* Fade + zoom-out effect */
@keyframes fadeZoom {
    0% { opacity: 0; transform: scale(1.12); }
    10% { opacity: 1; transform: scale(1.05); }
    50% { opacity: 1; transform: scale(1.00); }
    60% { opacity: 0; transform: scale(0.98); }
    100% { opacity: 0; }
}
/* ===== RESPONSIVE ===== */

/* Hide video + show images on mobile & tablet */
@media (max-width: 992px) {
    .hero-video {
        display: none;
    }
    .hero-images {
        display: block;
    }
}

/* GLASS CURVED TEXT BOX */
.hero-glass-box {
    position: absolute;
    top: 60%;
    left: 50px;
    transform: translateY(-50%);
    z-index: 20;

    padding: 35px 40px;
    width: 520px;
    border-radius: 28px;

    background: linear-gradient(
        to bottom right,
        rgba(0, 153, 255, 0.55),
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.15)
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,0.20);
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

/* Small heading */
.hero-small-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #00c3ff;
    margin-bottom: 12px;
    opacity: 0.95;
}

/* Main animated lines */
.hero-lines h1 {
    color: white;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    opacity: 0;
     font-family: 'Segoe UI', sans-serif;
}

/* Slide animation */
.hero-lines.show h1 {
    animation: slideUpFade 0.9s forwards ease-out;
}

.hero-lines.show h1:nth-child(2) {
    animation-delay: 0.12s;
}

@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(25px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Contact Button */
.hero-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 26px;
    border-radius: 30px;
    background: #00aaff;
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s ease;
}

.hero-btn:hover {
    background: #0088cc;
    transform: translateY(-2px);
}

/* Mobile */
@media(max-width:600px){
    .hero-glass-box {
        width: 300px;
        left: 20px;
        padding: 25px 30px;
    }
    .hero-lines h1 { font-size: 24px; }
    .hero-btn { padding: 10px 22px; font-size: 14px; }
}


/* =================---------------------------------- ABOUT SECTION ================= */
/* ================= ABOUT SECTION ================= */
.about-section {
    width: 100%;
    padding: 80px 6%;
    background: #f8f9ff;
}

.about-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* LEFT SIDE */
.about-left {
    width: 50%;
}

/* SMALL UPPER TITLE */
.about-small-title {
    display: block;
    font-family: 'Rajdhani', sans-serif !important;
  
    letter-spacing: 2px;
    margin-bottom: 10px;
     font-size: 20px;
    color: #1c6fc9;
    font-weight: 700;
}

/* MAIN BIG TITLE */
.about-main-title {
    font-size: 34px;
    font-weight: 800;
    color: #0a1f44;
    margin: 12px 0 8px 0;
    line-height: 1.3; /* FIX: better readability */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto; /* centers long text */
    margin-bottom: 20px;
}

/* DESCRIPTION */
.about-left p {
    font-size: 16px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* BUTTON */
.about-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 14px 30px;
    background: #0055ff;
    color: white;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.3s;
}
.about-btn:hover {
    background: #003bb5;
}

/* RIGHT SIDE IMAGE */
.about-right {
    width: 50%;
    position: relative;
}

/* BACKGROUND EGG / BLOB SHAPE */
.about-img-shape {
    position: absolute;
    top: -40px;
    right: -20px;
    width: 350px;
    height: 350px;
    background: #e8ecff;
    opacity: 0.6;
    border-radius: 60% 40% 55% 45%;
    filter: blur(10px);
    z-index: 1;
}

/* IMAGE WRAPPER */
.about-img-wrap {
    width: 100%;
    padding: 0px;
    background: white;
    border-radius: 18px;
    position: relative;
    overflow: visible;
    box-shadow: 0px 12px 30px rgba(0,0,0,0.08);
    z-index: 2;
}

/* DOTTED PATTERN BEHIND IMAGE */
.about-img-wrap::before {
    content: "";
    position: absolute;
    top: -25px;
    left: -25px;
    width: 180px;
    height: 180px;
    background-image: radial-gradient(#b8befa 2px, transparent 2px);
    background-size: 14px 14px;
    opacity: 0.6;
    z-index: -1;
}

/* IMAGE */
.about-img-wrap img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .about-container {
        flex-direction: column;
    }
    .about-left, 
    .about-right {
        width: 100%;
    }
    .about-main-title {
        font-size: 32px;
    }
}

/* ================= PRODUCT SHOWCASE ================= */
/* Font */
.about-section {
    font-family: 'Rajdhani', sans-serif;
}


/* Heading Section */
/* Heading Section */
.uc-heading {
    text-align: center;
    margin-bottom: 50px;
    padding: 60px 20px; /* FIX: add side padding for mobile/tablet */
}

.uc-sub {
    font-size: 20px;
    color: #1c6fc9;
    font-weight: 700;
}

.uc-heading h2 {
    font-size: 34px;
    font-weight: 800;
    color: #0a1f44;
    margin: 12px 0 8px 0;
    line-height: 1.3; /* FIX: better readability */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto; /* centers long text */
}

.uc-divider {
    width: 140px;
    height: 3px;
    background: #1c6fc9;
    margin: 18px auto;
    border-radius: 10px;
}

.uc-small-title {
    font-size: 22px;
    font-weight: 700;
    margin-top: 18px;
    color: #0a1f44;
}
/* Tablet */
@media (max-width: 992px) {
    .uc-sub { font-size: 18px; }
    .uc-heading h2 { font-size: 28px; }
    .uc-small-title { font-size: 20px; }
}

/* Mobile */
@media (max-width: 576px) {
    .uc-heading { padding: 0 14px; margin-bottom: 40px; }
    .uc-sub { font-size: 16px; }
    .uc-heading h2 { 
        font-size: 22px;
        line-height: 1.35;
    }
    .uc-small-title { font-size: 18px; }
}


/* Grid layout */
.uc-grid {
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;                               /* equal spacing */
    justify-content: center;                 /* center full grid */
    justify-items: center !important;                   /* center cards */
    width: 100%;
    max-width: 1150px;                       /* keeps grid centered */
    margin: 0 auto;                          /* center whole block */
    justify-items: center; 
}

.uc-single-center {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 60px;
}

/* Card */
.uc-card {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    width: 100%;
    max-width: 340px;
    padding: 40px 28px;
    text-decoration: none;

    border: 1px solid #e2e6ef;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: 0.35s ease;
    overflow: hidden;
}

/* Hover effect */
.uc-card:hover {
    background: #1c6fc9;
    transform: translateY(-10px);
    box-shadow: 0 16px 34px rgba(0,0,0,0.18);
}

/* Transparent background product image */
.uc-bg-img {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 50px;
    opacity: 0.07;
    pointer-events: none;
    transition: 0.3s;
}

.uc-card:hover .uc-bg-img {
    opacity: 1;
}

/* Icon */
.uc-icon img {
    width: 60px;
    filter: invert(20%) sepia(90%) saturate(1500%) hue-rotate(200deg);
    margin-bottom: 12px;
    transition: 0.3s;
}

.uc-card:hover .uc-icon img {
    filter: brightness(0) invert(1);
}

/* Number label */
.uc-number {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 58px;
    font-weight: 800;
    color: rgba(0,0,0,0.08);
    transition: 0.3s;
}

.uc-card:hover .uc-number {
    color: rgba(255,255,255,0.18);
}

/* Product name */
.uc-name {
    color: #0a1f44;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    transition: 0.3s;
}

.uc-card:hover .uc-name {
    color: #ffffff;
}

/* Read more */
.uc-read {
    display: block;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: #1c6fc9;
    transition: 0.3s;
}

.uc-card:hover .uc-read {
    color: #ffffff;
    transform: translateX(5px);
}
/* Tablet – 2 per row */
@media (max-width: 992px) {
    .uc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile – 1 per row */
@media (max-width: 576px) {
    .uc-grid {
        grid-template-columns: 1fr;
    }
}


/* ================= -------------------------------QUALITY SECTION ================= */

.qc-section {
    position: relative;
    width: 100%;
    padding: 80px 6%;
    overflow: hidden;
    color: #fff;
}

.qc-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.qc-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

/* Content */
.qc-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.qc-subtitle {
    font-size: 20px;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 10px;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
}

.qc-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 40px;
        color: #3179f5;
}

/* GRID */
.qc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

/* CARDS */
.qc-card {
    background: rgba(255,255,255,0.09);
    padding: 30px;
    border-radius: 16px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15);
    transition: 0.35s ease;
}

.qc-card:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-8px);
}

/* Counter number */
.qc-counter {
    font-size: 40px;
    font-weight: 750;
    margin-bottom: 8px;
}

/* Description */
.qc-card p {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

/* Final text */
.qc-final-text {
    margin-top: 45px;
    font-size: 17px;
    line-height: 1.6;
    color: #e8e8e8;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.uc-divider2 {
    width: 140px;
    height: 3px;
    background: #4b9df5;
    margin: 18px auto;
    border-radius: 10px;
}

/* Mobile */
@media (max-width: 576px) {
    .qc-title {
        font-size: 26px;
    }
    .qc-counter {
        font-size: 32px;
    }
}


/* =============================================Misision an dvisison =============================*/

.mv-section {
    width: 100%;
    padding: 70px 6%;
    background: #f8f9ff;
    text-align: center;
}

.mv-main-title {
   font-size: 20px;
    color: #1c6fc9;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
}


.mv-subtext {
     font-size: 34px;
    font-weight: 800;
    color: #0a1f44;
    margin: 12px 0 8px 0;
    line-height: 1.3; /* FIX: better readability */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto; /* centers long text */
    padding-bottom: 40px;
    font-family: 'Rajdhani', sans-serif;
}

.mv-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

/* === CARD BASE === */
.mv-card {
    position: relative;
    width: 550px;
    height: 430px;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    cursor: pointer;
}

/* Image Zoom Effect */
.mv-card .mv-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mv-card:hover .mv-bg {
    transform: scale(1.12);
}

/* === Sliding Overlay === */
.mv-overlay {
    position: absolute;
    top: 100%;        /* Start below the card */
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(33, 117, 226, 0.55);
    transition: top 0.6s ease;
}

.mv-card:hover .mv-overlay {
    top: 0%;         /* Slides up */
}

/* === Sliding Text === */
.mv-content {
    position: absolute;
    top: 60%;
    left: 20px;
    right: 20px;
    color: #fff;
    z-index: 3;
    text-align: left;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease;
}

.mv-card:hover .mv-content {
    opacity: 1;
    transform: translateY(0px);
    top: 30%;
}

/* Bottom Icon */
.mv-icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 55px;
    height: auto;
    z-index: 4;
    transition: transform 0.6s ease;
}

.mv-card:hover .mv-icon {
    transform: scale(1.15);
}
/* ===== Tablet ===== */
@media (max-width: 992px) {
    .mv-main-title { font-size: 28px; }
    .mv-subtext { font-size: 20px; }
}

/* ===== Mobile ===== */
@media (max-width: 576px) {
    .mv-main-title {
        font-size: 22px;
        line-height: 1.35;
        padding: 0 14px;
    }
    .mv-subtext { font-size: 18px; }
}



/*======================================= Producs scrolling===================== */
/* Background */
.prod-slider-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.prod-bg {
    background: url('assets/images/heroimg1.webp') center/cover no-repeat;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.prod-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2;
}

/* Title */
.prod-title {
    position: relative;
    z-index: 3;
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 24px;
    font-family: 'Rajdhani', sans-serif;
}

/* Slider */
.prod-slider-wrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    overflow: hidden;
}

.prodts-slider {
    display: flex;
    gap: 20px;
    padding: 20px;

    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;           /* Firefox */
}

.prodts-slider::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari */
}


/* .prod-slider:hover {
    animation-play-state: paused;
} */

.prodts-slider img {
    width: 400px;
    height: auto;
    border-radius: 20px;
    transition: transform .3s;
    cursor: pointer;
}

.prodts-slider img:hover {
    transform: scale(1.08);
}

/* Buttons */
.prod-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 14px 18px;
    cursor: pointer;
    color: #fff;
    font-size: 26px;
    border-radius: 10px;
    transition: 0.3s;
    backdrop-filter: blur(6px);
}

.prod-btn:hover {
    background: rgba(255,255,255,0.35);
}

.left {
    left: 20px;
}
.right {
    right: 20px;
}

/* Responsive */
@media(max-width: 576px){
    .prodts-slider img {
        width: 230px;
    }
    .prod-btn {
        padding: 10px 14px;
        font-size: 20px;
    }
}

@media(max-width: 330px){
   .prodts-slider img {
        width: 190px;
    }
}

/* ------------------------------------------index page->Our Clients */

.client-section {
  padding: 60px 0;
  /* background: #0e0e0e; */
  overflow: hidden;
  position: relative;
}

.client-title {
  text-align: center;
 color: #062a68;
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 28px;
  letter-spacing: .6px;
}

/* slider wrapper */
.client-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* the track is a single row that we will duplicate inside JS */
.client-track {
  display: flex;
  align-items: center;
  gap: 120px;
  width: max-content; /* ensures natural width */
  will-change: transform; /* hint for smoother animation */
  padding: 16px 0;
  user-select: none;
  -webkit-user-drag: none;
}
.client-track img {
    height: 102px;
    max-height: 102px;
    display: block;
    transition: transform .32s ease, filter .32s ease, opacity .32s ease, box-shadow .3s ease;
    border-radius: 8px;           /* slight rounding */
    padding: 8px;                 /* optional space inside */
    background: transparent;      
    box-shadow: 0 4px 15px rgba(30,144,255,0.6);  
}

.client-track img:hover {
    transform: scale(1.12);
    opacity: 1;
}


/* subtle fade on left/right edges for premium feel */
.client-section::before,
.client-section::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 120px;
  z-index: 5;
  pointer-events: none;
}

.client-section::before {
  left: 0;
  background: linear-gradient(to right, #0e0e0e2c 0%, rgba(14,14,14,0) 70%);
}

.client-section::after {
  right: 0;
  background: linear-gradient(to left, #0e0e0e2c 0%, rgba(14,14,14,0) 70%);
}

/* responsive tweaks */
@media (max-width: 900px) {
  .client-track { gap: 40px; }
  .client-track img { height: 60px; max-height: 60px; }
}

@media (max-width: 480px) {
  .client-track { gap: 28px; }
  .client-track img { height: 44px; max-height: 44px; }
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++ABOUT US PAGES ++++++++++++++++++++++++++++++++++++++++++++*/

/* =============== ABOUT US TOP BANNER =============== */
.inner-banner {
    width: 100%;
    height: 260px;
    background: url("assets/images/bgimg1.webp") center/cover no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.inner-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.548);
}

/* Text + Breadcrumb */
.inner-banner-content {
    position: relative;
    text-align: center;
    z-index: 2;
}

.inner-title {
    font-size: 42px;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    color: #ffffff;
    margin-bottom: 10px;
}

.breadcrumb {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5; /* ensures breadcrumb appears above overlay */
    color: #ffffff;;
}

.breadcrumb a {
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    font-family: 'Rajdhani', sans-serif;
    text-decoration: none;
    transition: color 0.3s ease;   
}
.breadcrumb a:hover{
      color: #329cec;
}
.breadcrumb p {
    color: #7fc7ff;
    font-size: 18px;
    font-family: 'Rajdhani', sans-serif;
    margin: 0;
}

/*=============================== About us -> company about us  */
/* ================== ABOUT UC STYLE (LIKE REFERENCE) ================== */

.about-uc-section {
    width: 100%;
    padding: 80px 6%;
}

.about-uc-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
/* Tablet + Mobile */
@media (max-width: 1024px) {
    .about-uc-container {
        gap: 60px;   /* Tab & Mobile gap */
    }
}
/* LEFT SIDE IMAGE + FRAME */
.about-uc-left {
    position: relative;
    width: 48%;
}

/* Outer big blue frame */
.img-frame {
    border: 10px solid #0a84d6;
    width: 100%;
    height: 440px;
    position: relative;
    border-radius: 8px;
}

/* Inner white space + image */
.img-frame-inner {
    position: absolute;
    top: 20px;
    left: 20px;
    right: -20px;
    bottom: -20px;
    background: #00000041;
    border-radius: 8px;
    overflow: hidden;
}

.img-frame-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Since 2010 Box */
.since-box {
    position: absolute;
    bottom: -45px;
    left: 30px;
    background: #ffffff;
    padding: 12px 28px;
    border: 6px solid #0a84d6;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 5px 18px rgba(0,0,0,0.15);
}

.since-box span {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    font-family: 'Rajdhani', sans-serif;
}

.since-box h2 {
    font-size: 40px;
    margin: 0;
    font-weight: 900;
    color: #0a84d6;
    font-family: 'Rajdhani', sans-serif;
}

/* RIGHT SIDE */
.about-uc-right {
    width: 48%;
}

.uc-subtitle {
    font-size: 20px;
    color: #0a84d6;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    margin-bottom: 10px;
}

.uc-title {
    font-size: 40px;
    font-weight: 800;
    color: #0a1f44;
    font-family: 'Rajdhani', sans-serif;
    line-height: 1.2;
    margin-bottom: 20px;
}

.uc-text {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 18px;
    color: #333;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
}

/* ================== RESPONSIVE ================== */
@media (max-width: 1024px) {
    .about-uc-left,
    .about-uc-right {
        width: 100%;
    }

    .img-frame {
        height: 380px;
    }
}

@media (max-width: 768px) {
    .img-frame {
        height: 320px;
    }

    .uc-title {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .since-box {
        bottom: -35px;
        padding: 8px 18px;
    }

    .since-box h2 {
        font-size: 28px;
    }
}

/* ---------------------------About us ->Our Story -Director section  */
.directors-intro {
    text-align: center;
    padding: 40px 20px;
}

.directors-intro .directors-subtitle {
    font-size: 32px;
    font-weight: 700;
    color: #1c6fc9; /* blue color */
    text-transform: uppercase;
    margin-bottom: 12px;
}

.directors-intro .directors-main-title {
    font-size: 34px;
    font-weight: 800;
    color: #0a1f44; /* dark navy */
    line-height: 1.3;
    max-width: 900px;
    margin: 0 auto 16px auto;
}

.directors-divider {
    width: 140px;
    height: 3px;
    background: #1c6fc9;
    margin: 18px auto;
    border-radius: 10px;
}

.directors-small-text {
    font-size: 18px;
    color: #0a1f44;
    font-weight: 600;
    margin-top: 16px;
}



.directors-section {
padding: 1px 20px;
}

.directors-container {
max-width: 1200px;
margin: 0 auto;
}

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

.director-row.reverse {
flex-direction: row-reverse;
}

.director-text {
flex: 1 1 500px;
max-width: 600px;
}

.director-text.left {
text-align: left;
}

.director-text.right {
text-align: left; /* keep text left-aligned for readability */
}

.director-subtitle {
font-size: 18px;
font-weight: 700;
color: #1c6fc9;
font-family: 'Rajdhani', sans-serif;
margin-bottom: 8px;
}

.director-name {
font-size: 32px;
font-weight: 800;
color: #0a1f44;
margin-bottom: 16px;
font-family: 'Rajdhani', sans-serif;
}

.director-description {
font-size: 16px;
color: #333;
line-height: 1.6;
font-family: 'Rajdhani', sans-serif;
}

.director-image {
flex: 0 0 500px;
position: relative;
text-align: center;
}


.img-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.377);
color: #fff;
padding: 10px 0;
font-weight: 600;
font-family: 'Rajdhani', sans-serif;
font-size: 14px;
}
.director-text, .director-image {
    flex: 1; /* equal space, allows flipping */
    max-width: 600px; /* optional, for desktop */
}


@media (max-width: 1024px) {
    .director-row, .director-row.reverse {
        flex-direction: column;
        text-align: center;
    }
    .director-text, .director-image {
        max-width: 100%;
    }
    .director-text {
        margin-bottom: 30px;
    }
}

/* Director images with responsive height using aspect ratio */
.img-frame2 {
    width: 100%;
    aspect-ratio: 4 / 3; /* keeps height proportional to width */
    overflow: hidden;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-frame2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover effect */
.img-frame2:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .director-row, .director-row.reverse {
        flex-direction: column;
        text-align: center;
    }
    .director-text, .director-image {
        max-width: 100%;
    }
    .director-text {
        margin-bottom: 30px;
    }
    .img-frame2 {
        aspect-ratio: 3 / 2; /* taller for tablets */
    }
}

@media (max-width: 768px) {
    .img-frame2 {
        aspect-ratio: 16 / 9; /* more compact for small tablets */
    }
}

@media (max-width: 480px) {
    .img-frame2 {
        aspect-ratio: 1 / 1; /* square images on mobile */
    }
    .director-text h2 {
        font-size: 22px;
    }
    .director-text p {
        font-size: 14px;
    }
}


 /* --------------------------------------about us -. Our Team CSS  */

.team-section {
    padding: 80px 20px;
}

.team-container {
    max-width: 1200px;
    margin: 0 auto;
}

.team-intro {
    text-align: center;
    margin-bottom: 60px;
}

.team-subtitle {
    font-size: 32px;
    font-weight: 700;
    color: #1c6fc9;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.team-main-title {
    font-size: 34px;
    font-weight: 800;
    color: #0a1f44;
    margin-bottom: 16px;
    line-height: 1.3;
}

.team-small-text {
    font-size: 18px;
    color: #0a1f44;
    font-weight: 500;
    max-width: 800px;
    margin: 0 auto;
}

/* Single Group Photo */
.team-group-photo {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.group-img-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
}

.group-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.group-img-frame img:hover {
    transform: scale(1.03);
}

/* Horizontal Images */
.team-horizontal-images {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.horizontal-img {
    flex: 1 1 48%;
    overflow: hidden;
    border-radius: 12px;
    max-height: 400px;
    position: relative;
}

.horizontal-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.horizontal-img img:hover {
    transform: scale(1.05);
}

/* Overlay text on images */
.img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(28, 111, 201, 0.7); /* semi-transparent blue */
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-weight: 600;
    font-size: 16px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .team-horizontal-images {
        gap: 20px;
    }
    .horizontal-img {
        flex: 1 1 100%;
        max-height: 300px;
    }
    .group-img-frame {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 600px) {
    .team-main-title {
        font-size: 28px;
    }
    .team-small-text {
        font-size: 16px;
    }
    .horizontal-img {
        max-height: 200px;
    }
    .group-img-frame {
        aspect-ratio: 1 / 1;
    }
    .img-overlay {
        font-size: 14px;
        padding: 6px 0;
    }
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ infrstrucetre => Infrastructure Section ================= */
/* ============================
   INFRASTRUCTURE SECTION
============================ */
.infra-section {
    padding: 80px 20px;
    background: #f7faff;
}

.infra-container {
    max-width: 1300px;
    margin: auto;
}

/* ---------- HEADER ---------- */
.infra-header {
    text-align: center;
    margin-bottom: 60px;
}

.infra-subtitle {
    font-size: 22px;
    font-weight: 700;
    color: #1c6fc9;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.infra-title {
    font-size: 38px;
    font-weight: 800;
    color: #0d2b4c;
    margin-bottom: 15px;
}

.infra-text {
    font-size: 18px;
    color: #555;
    max-width: 700px;
    margin: auto;
}


/* ============================
   INFRA BOXES ROW
============================ */
.infra-box {
    background: #ffffff;
    padding: 30px 25px;
    border-radius: 16px;
    box-shadow: 0px 6px 18px rgba(0,0,0,0.08);
    display: inline-block;
    width: 31%;
    text-align: center;
    vertical-align: top;
    margin: 1%;
    transition: 0.3s ease;
}

.infra-box:hover {
    transform: translateY(-6px);
    box-shadow: 0px 12px 30px rgba(0,0,0,0.12);
}

.infra-icon {
    width: 70px;
    height: 70px;
    margin: auto;
    margin-bottom: 15px;
}

.infra-icon img {
    width: 100%;
    height: 100%;
}

.infra-box h3 {
    font-size: 22px;
    color: #0d2b4c;
    margin-bottom: 12px;
    font-weight: 700;
}

.infra-box p, 
.infra-box ul li {
    font-size: 17px;
    color: #555;
    list-style: none;
}



/* ----------- TABLET VIEW (991px) ----------- */
@media (max-width: 991px) {

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

    .infra-title {
        font-size: 32px;
    }

    .infra-box {
        width: 48%;
        margin: 1%;
    }
}

/* ----------- MOBILE VIEW (600px) ----------- */
@media (max-width: 600px) {

    .infra-title {
        font-size: 26px;
    }

    .infra-text {
        font-size: 16px;
    }

    .infra-box {
        width: 100%;
        margin-bottom: 18px;
        padding: 25px;
    }

    .infra-icon {
        width: 60px;
        height: 60px;
    }
}

/* ============================
   MACHINE TITLE
============================ */
.machine-title {
    font-size: 34px;
    font-weight: 800;
    text-align: center;
    margin: 70px 0 40px;
    color: #0d2b4c;
}


/* ============================
   MACHINE GRID
============================ */
.machine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 38px;
    padding-left: 40px;
    padding-right: 40px;
}


/* ============================
   MACHINE CARD FIXED VERSION
============================ */
.machine-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0px 8px 25px rgba(0,0,0,0.12);
    transition: all 0.35s ease;
    cursor: pointer;
}

/* Hover effect */
.machine-card:hover {
    /* transform: translateY(-8px); */
    box-shadow: 0px 18px 40px rgba(0,0,0,0.18);
}


/* ============================
   MACHINE IMAGE FIX (NO STRETCHING)
============================ */
.machine-card img {
    width: 100%;
    /* VERY IMPORTANT FIX */
    aspect-ratio: 4/3;       /* gives perfect shape */
    object-fit: cover;       /* no stretching ever */
    object-position: center; /* proper crop */
    transition: 0.35s ease-in-out;
}

/* Zoom effect */
.machine-card:hover img {
    transform: scale(1.10);
}


/* ============================
   MACHINE NAME BAR
============================ */
.machine-name,
.machine-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(28, 111, 201, 0.7); 
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    padding: 14px 12px;
    text-align: center;
    backdrop-filter: blur(4px);
}

.machine-bg { display: none; }


/* ============================
   RESPONSIVE DESIGN
============================ */

/* -------- Tablet: 2 columns -------- */
@media (max-width: 992px) {
    .machine-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .machine-card img {
        aspect-ratio: 4/3; /* keeps clean shape */
    }
}

/* -------- Mobile: 1 column -------- */
@media (max-width: 600px) {
    .machine-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .machine-title {
        font-size: 26px;
    }

    .machine-name,
    .machine-overlay {
        font-size: 8px;
        padding: 6px;
    }

    .machine-card img {
        aspect-ratio: 4/3;
    }
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++Clinet -> Clients logo +++++++++++++++++++++++*/

/* ================================
   CLIENT SECTION CORE
================================ */
.clients-section {
    padding: 80px 0;
    background: #f8faff;
}

.clients-container {
    max-width: 1400px;
    margin: 0 auto;

    /* Responsive left-right spacing */
    padding-left: 160px;
    padding-right: 160px;
}

/* Tablet spacing */
@media (max-width: 992px) {
    .clients-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Mobile spacing */
@media (max-width: 600px) {
    .clients-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}



/* ================================
   HEADINGS
================================ */
.clients-header {
    text-align: center;
    margin-bottom: 50px;
}

.clients-subtitle {
    font-size: 20px;
    font-weight: 600;
    color: #1c6fc9;
    margin-bottom: 8px;
}

.clients-title {
    font-size: 34px;
    font-weight: 800;
    color: #0d2b4c;
}


/* ================================
   CLIENT GRID
================================ */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* desktop */
    gap: 30px;
}


/* ================================
   CLIENT CARD
================================ */
.client-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 26px;
    display: flex;
    justify-content: center;
    align-items: center;

    box-shadow: 0px 8px 20px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.client-card:hover {
    transform: translateY(-6px);
    box-shadow: 0px 14px 32px rgba(0,0,0,0.15);
}

/* Image Fix (No Stretching) */
.client-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 80px;
    transition: 0.3s;
}

.client-card:hover img {
    transform: scale(1.08);
}


/* ================================
   RESPONSIVE DESIGN
================================ */

/* Tablet: 3 logos per row */
@media (max-width: 992px) {
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .client-card img {
        max-height: 70px;
    }
}

/* Mobile: 2 logos per row */
@media (max-width: 600px) {
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .clients-title {
        font-size: 26px;
    }

    .client-card {
        padding: 20px;
    }

    .client-card img {
        max-height: 60px;
    }
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++Media -> media gallery +++++++++++++++++++++++ */
/* Section spacing */
.media-section {
    padding: 60px 40px;
}

.media-title {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 40px;
    font-family: 'Rajdhani', sans-serif;
    color: #0a1f44;
}

/* =========================================================
   UPGRADED GRID — handles 1, 2, 3, 4 images perfectly 
   (keeps your original look, color, padding)
   ========================================================= */
.media-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding: 0 20px;
}

.media-grid img {
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease;
    object-fit: cover;
    width: 100%; /* default for mobile/tablet */
}

/* Desktop logic */
@media (min-width: 992px) {

    /* --- 1 image --- */
    .media-grid img:only-child {
        width: 55%;
        height: 350px;
    }

    /* --- 2 images --- */
    .media-grid img:nth-child(1):nth-last-child(2),
    .media-grid img:nth-child(2):nth-last-child(1) {
        width: calc(40% - 20px);
        height: 300px;
    }

    /* --- 3 images --- */
    .media-grid img:nth-child(1):nth-last-child(3),
    .media-grid img:nth-child(2):nth-last-child(2),
    .media-grid img:nth-child(3):nth-last-child(1) {
        width: calc(30% - 20px);
        height: 280px;
    }

    /* --- 4+ images (your original style) --- */
    .media-grid img {
        max-width: calc(25% - 20px);
        width: calc(25% - 20px);
        height: 260px;
    }
}

/* Hover same as before */
.media-grid img:hover {
    transform: scale(1.05);
}

/* LIGHTBOX */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.lightbox-img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 10px;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Close button */
.close-btn {
    position: absolute;
    top: 25px;
    right: 40px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}

/* Next & Prev */
.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    color: white;
    cursor: pointer;
    padding: 15px;
    user-select: none;
}

.prev-btn { left: 40px; }
.next-btn { right: 40px; }

/* Responsive */
@media (max-width: 992px) {
    .media-grid img {
        width: calc(45% - 15px);
        height: 220px;
    }
}

@media (max-width: 768px) {
    .media-grid img {
        width: calc(50% - 15px);
        height: 200px;
    }

    .prev-btn, .next-btn {
        font-size: 40px;
    }
}

@media (max-width: 480px) {
    .media-grid img {
        width: 100%;
        height: 180px;
    }

    .close-btn {
        font-size: 30px;
        right: 20px;
    }
}


/*+++++++++++++++++++++++++++++++++++++++++++++ Contact us -> contact +++++++uc-grid++++++++++++++++++++++ */
.cgrid-section {
    padding: 60px 20px;
    width: 100%;
}

/* GRID WRAPPER */
.cgrid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    justify-content: center;
    justify-items: center;
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
}

/* CARD */
.cgrid-card {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    width: 100%;
    max-width: 340px;
    padding: 40px 28px;
    border: 1px solid #e2e6ef;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: 0.35s ease;
    overflow: hidden;
}

.cgrid-card:hover {
    background: #1c6fc9;
    transform: translateY(-10px);
    box-shadow: 0 16px 34px rgba(0,0,0,0.18);
}

/* ICON */
.cgrid-icon img {
    width: 60px;
    margin-bottom: 12px;
    filter: invert(20%) sepia(90%) saturate(1500%) hue-rotate(200deg);
    transition: 0.3s;
}

.cgrid-card:hover .cgrid-icon img {
    filter: brightness(0) invert(1);
}

/* TITLE */
.cgrid-title {
    color: #0a1f44;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 12px;
    transition: 0.3s;
}

.cgrid-card:hover .cgrid-title {
    color: #ffffff;
}

/* TEXT */
.cgrid-text {
    font-size: 15px;
    color: #4a4a4a;
    line-height: 1.5;
    margin-bottom: 6px;
    transition: 0.3s;
}

.cgrid-card:hover .cgrid-text {
    color: #ffffff;
}

/* BACKGROUND FAINT IMAGE */
.cgrid-bg {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 50px;
    opacity: 0.07;
    pointer-events: none;
    transition: 0.3s;
}

.cgrid-card:hover .cgrid-bg {
    opacity: 1;
}

/* TABLET */
@media (max-width: 992px) {
    .cgrid-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE */
@media (max-width: 576px) {
    .cgrid-grid {
        grid-template-columns: 1fr;
        padding: 0 15px;
    }
}


/*----------------------------------------------- Contcact submit form  */
/* ============================
   CONTACT SECTION (full)
   Left: heading + map
   Right: glass contact form
============================ */
.cnt-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  padding: 80px 6%;
  background: #f5f7fa;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* ========== LEFT SIDE ========== */
.cnt-left {
  flex: 1;
  min-width: 300px;
  max-width: 720px;
}

.cnt-left h2 {
  font-size: 34px;
  font-weight: 700;
   color: #1c6fc9;
  margin: 0 0 12px 0;
}

.cnt-left p {
  font-size: 16px;
  color: #0a1f44;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

/* MAP BOX */
.cnt-map-box {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e6ef;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  margin-top: 18px;
}

/* responsive iframe */
.cnt-map-box iframe {
  width: 100%;
  height: 420px; /* desktop default */
  border: 0;
  display: block;
}

/* ========== RIGHT SIDE (FORM) ========== */
.cnt-right {
  flex: 0.95;
  min-width: 300px;
  max-width: 520px;
  box-sizing: border-box;
}

/* Glass form card */
.cnt-form {
  background: rgba(255,255,255,0.15);
  padding: 34px;
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 25px rgba(0,0,0,0.10);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

/* hover lift & glow */
.cnt-form:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(12,80,160,0.16);
}

/* fields */
.cnt-field-group {
  margin-bottom: 16px;
  width: 100%;
}

.cnt-field-group.full textarea {
  height: 120px;
  resize: none;
}

.cnt-field-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #0f2a4f;
  font-size: 14px;
}

.cnt-required {
  color: #e22;
  margin-left: 6px;
  font-weight: 700;
}

.cnt-field-group input,
.cnt-field-group textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #d7dff0;
  background: rgba(255,255,255,0.9);
  font-size: 15px;
  color: #0b213f;
  outline: none;
  transition: box-shadow .22s ease, border-color .22s ease, transform .18s ease;
}

/* subtle focus */
.cnt-field-group input:focus,
.cnt-field-group textarea:focus {
  border-color: #1c69d4;
  box-shadow: 0 6px 18px rgba(28,105,212,0.12);
  transform: translateY(-2px);
}

/* submit */
.cnt-submit-btn {
  width: 100%;
  padding: 13px 16px;
  background: linear-gradient(135deg,#1c69d4,#0e4ca3);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.cnt-submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(12,80,160,0.2);
}

/* small screens: stack layout and sizes */
@media (max-width: 992px) {
  .cnt-section {
    padding: 60px 5%;
  }

  .cnt-map-box iframe {
    height: 340px;
  }

  .cnt-form {
    padding: 28px;
  }
}

/* very small screens */
@media (max-width: 576px) {
  .cnt-section {
    padding: 40px 4%;
    gap: 28px;
  }

  .cnt-left,
  .cnt-right {
    width: 100%;
    max-width: none;
  }

  .cnt-map-box iframe {
    height: 260px;
  }

  .cnt-left h2 {
    font-size: 24px;
  }

  .cnt-form {
    padding: 20px;
  }
}

@media (max-width: 330px) {

  .cnt-section {
    padding: 32px 3%;
    gap: 20px;
  }

  .cnt-left h2 {
    font-size: 20px;
    line-height: 1.3;
  }

  .cnt-left p {
    font-size: 13px;
    line-height: 1.5;
  }

  .cnt-map-box iframe {
    height: 200px;
  }

  .cnt-form {
    padding: 16px;
    border-radius: 12px;
  }

  .cnt-field-group input,
  .cnt-field-group textarea {
    padding: 10px 12px;
    font-size: 13px;
  }

  .cnt-field-group label {
    font-size: 12px;
  }

  .cnt-submit-btn {
    padding: 11px 14px;
    font-size: 14px;
  }
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++ Products.php  ++++++++++++++++++++++ */
.f1-products-section {
    padding: 60px 40px;
}

.f1-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.f1-product-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.4s ease;
    height: 350px; /* ensures visible height */
}

.f1-product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    transition: transform 0.4s ease;
}

.f1-product-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
}

.f1-product-card:hover img {
    transform: scale(1.08);
}

.f1-product-card:hover .f1-product-overlay {
    transform: translateY(0);
}

.f1-product-overlay h3 {
    font-size: 18px;
    font-weight: 700;
}

.f1-product-overlay p {
    font-size: 14px;
    line-height: 1.4;
}

.f1-explore-link {
    align-self: flex-end;
    color: #1e90ff;
    font-weight: 600;
    text-decoration: none;
}

.f1-product-card:hover {
    transform: scale(1.05);
    z-index: 10;
}


/* Tablet (max 992px) → 2 items per row */
@media (max-width: 992px) {
    .f1-products-section {
        padding: 40px 20px;
    }
    .f1-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile (max 576px) → 1 item per row */
@media (max-width: 576px) {
    .f1-products-section {
        padding: 30px 15px;
    }
    .f1-products-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .f1-product-card {
        height: 220px; /* reduce height for small screens */
    }
}

/*================================ Product Section - 1) Plastic Component Checking Fixture ================================*/
/* ============================================================
   PREMIUM PRODUCT DETAIL PAGE ]
   ============================================================ */

.prodctf-section {
    padding: 80px 20px;
    font-family: 'Poppins', sans-serif;
}

/* Container */
.prodctf-container {
    max-width: 1150px;
    margin: auto;
}

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

.prodctf-title {
    font-size: 36px;
    font-weight: 800;
    color: #0a1f44;
    margin-bottom: 12px;
}

.prodctf-subtitle {
    font-size: 20px;
    color: #1c6fc9;
    font-weight: 600;
}

/* ---------------- FLEX LAYOUT ---------------- */
.prodctf-flex {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

/* LEFT – PRODUCT IMAGES */
.prodctf-left {
    width: 50%;
    position: sticky;
    top: 100px;
}

.prodctf-main-image img {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border: 1px solid #e5e7eb;
    transition: 0.3s;
}

.prodctf-main-image img:hover {
    transform: scale(1.02);
}

/* Thumbnail Row */
.prodctf-thumb-images {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.prodctf-thumb-images img {
    width: 95px;
    height: 75px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.25s;
}

.prodctf-thumb-images img:hover {
    border-color: #1c6fc9;
    transform: scale(1.07);
}

/* Buttons */
.prodctf-buttons {
    margin-top: 25px;
    display: flex;
    gap: 18px;
}

.prodctf-whatsapp,
.prodctf-enquire {
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 0.3px;
    transition: 0.3s;
}

.prodctf-whatsapp {
    background: #25D366;
    color: #fff;
}

.prodctf-whatsapp:hover {
    background: #1ebe56;
    transform: translateY(-2px);
}

.prodctf-enquire {
    background: #1c6fc9;
    color: #fff;
}

.prodctf-enquire:hover {
    background: #144b8e;
    transform: translateY(-2px);
}

/* ---------------- RIGHT – TEXT SECTION ---------------- */
.prodctf-right {
    width: 50%;
    padding-right: 10px;
}

/* Right Title */
.right-title {
    font-size: 28px;
    font-weight: 800;
    color: #0a1f44;
    margin-bottom: 20px;
}

/* SEO Subtitle */
.prodctf-right h3 {
    font-size: 20px;
    margin-top: 25px;
    color: #1c6fc9;
    font-weight: 700;
}

/* Paragraphs */
.prodctf-right p {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 15px;
}

/* ---------------- FULL WIDTH CONTENT ---------------- */
.prodctf-fullwidth {
    width: 100%;
    padding: 35px 25px;
    border-radius: 12px;
    /* box-shadow: 0 8px 25px rgba(0,0,0,0.07); */
    margin-top: 5px;
}

.fullwidth-title {
    font-size: 26px;
    font-weight: 800;
    color: #0a1f44;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* List */
.prodctf-fullwidth ul {
    margin: 15px 0 15px 25px;
}

.prodctf-fullwidth ul li {
    line-height: 1.7;
    font-size: 16px;
    margin-bottom: 8px;
}

/* Headings inside fullwidth */
.prodctf-fullwidth h3 {
    color: #1c6fc9;
    font-size: 20px;
    margin-top: 25px;
    font-weight: 700;
}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width: 992px) {
    .prodctf-flex {
        flex-direction: column;
    }
    .prodctf-left, .prodctf-right {
        width: 100%;
        position: static;
    }
    .prodctf-title {
        font-size: 30px;
    }
}

@media(max-width: 600px) {
    .prodctf-main-image img {
        border-radius: 10px;
    }
    .prodctf-thumb-images img {
        width: 75px;
        height: 60px;
    }
    .right-title {
        font-size: 23px;
    }
}
@media(max-width: 500px) {
    .prodctf-thumb-images img {
        width: 55px;
        height: 40px;
    }
    .prodctf-buttons {
     gap: 8px;
   }
   .prodctf-whatsapp,
   .prodctf-enquire {
    font-weight: 500;
    font-size: 14px;
    padding: 5px 15px;
  }
}
@media(max-width: 400px) {
    .prodctf-thumb-images img {
        width: 40px;
        height: 30px;
    }
}
@media(max-width: 300px) {
    .prodctf-thumb-images img {
        width: 30px;
        height: 30px;
    }
}
/* ===========================================
   PREMIUM SECTION HEADING 
   =========================================== */
.prodctf-heading-box {
    background: linear-gradient(to right, #4e8feb42, #b6d2f838);
    padding: 14px 22px;
    border-left: 4px solid #1c6fc9;
    border-radius: 6px;
    margin: 35px 0 18px 0;
}

.prodctf-heading-box h3 {
    font-size: 20px;
    color: #0a1f44;
    font-weight: 800;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Add extra space on left/right for full page */
.prodctf-fullwidth,
.prodctf-right,
.prodctf-left {
    padding-left: 20px;
    padding-right: 20px;
}

/*========================================== Explore our other products ======================  */
/* SECTION */
.prodctf-related-products {
    padding: 60px 80px;
}

.prodctf-related-title {
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    color: #0a1f44;
    margin-bottom: 50px;
   
}

/* GRID */
.prodctf-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 40px; /* cleaner spacing */
}

/* CLEAN LIST ITEM */
.prodctf-related-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 80, 180, 0.15); /* thin premium divider */
    text-decoration: none;
    transition: all 0.25s ease;
}

/* TEXT */
.prodctf-related-card span {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    transition: all 0.3s ease;
    letter-spacing: 0.2px;
}

/* ARROW ICON */
.arrow-icon {
    width: 26px;
    opacity: 0.6;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* HOVER EFFECT — clean & professional */
.prodctf-related-card:hover span {
    color: #003d99;
    transform: translateX(4px);
}

.prodctf-related-card:hover .arrow-icon {
    transform: translateX(6px);
    opacity: 1;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .prodctf-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 25px;
    }

    .prodctf-related-card span {
        font-size: 17px;
    }
}

@media (max-width: 576px) {
    .prodctf-related-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .prodctf-related-title {
        font-size: 26px;
    }
}


/* +++++++++++++++++++++++++++++++++++++++++++++Footer Vehicla moving ++++++++++++++++++++++++++++++ */
/* ROAD AREA */
.traffic-road {
    width: 100%;
    height: 120px;          /* space for vehicles */
    background: #f4f8ff;     /* white background behind vehicles */
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* ROAD STRIP ONLY AT VERY BOTTOM */
.traffic-road::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;            /* thickness of road */
    background: #000000;        /* black road */
}


/* WRAPPER (scrolls left → right forever) */
.traffic-wrapper {
    position: absolute;
     bottom: 0;
    display: flex;
    white-space: nowrap;
    animation: trafficMove 30s linear infinite;
}

/* KEYFRAME for left → right motion */
@keyframes trafficMove {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* VEHICLE ICONS */
.vehicle {
    height: 65px;
    margin-right: 200px;
    display: inline-block;
}

/* Plane goes higher */
.vehicle.plane {
    height: 80px;
    position: relative;
    bottom: 40px;
}

/* +++++++++++++++++++++++++++++++++ Spinner at con us page  ++++++++++++++++++++++++++++++++++++ */

/* Full Screen Loader */
.form-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* Rotating Spinner */
.loader-spinner {
    width: 70px;
    height: 70px;
    border: 8px solid #ffffff;
    border-top: 8px solid #1c6fc9; /* Blue */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ++++++++++++++++++++++++++++++++aler messgae css ++++++++++++++++++++++++++++++++++++++ */

.captcha-correct { border: 2px solid green; }
.captcha-incorrect { border: 2px solid red; }