/* 1. root variables: these allow you to change the theme in one place */
:root {
    --deep-blue: #005193;   /* your primary brand color */
    --light-blue: #aadfff;  /* used for accents and hovers */
    --cool-white: #fefcff;  /* background and header color */
    --dark-text: #333333;
	--black: #000000;
	--white: #ffffff;
    --transition: all 0.3s ease;
}

/* 2. reset: removes browser default margins and forces lowercase */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; */
    
}

/* Premium Serif Headings */
h1, h2, h3, 
.main-journey, 
.display-title, 
.section-title, 
.page-hero h1,
.tagline-part1,
.tagline-part2,
.other-products-title {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.01em;
}

/* Clean Geometric Body Text */
body, p, label, input, textarea, 
.description, 
.spec-row, 
.modal-specs, 
.job-description,
.product-info p,
.modal-description {
    font-family: 'Poppins', sans-serif;
}

/* Bold UI Accents & Buttons */
.fleet-nav-btn, 
.nav-link,
.btn-enquiry, 
.btn-premium.btn-header,
.btn-premium,
.btn-premium.btn-enquiry,
.btn-more-details, 
.btn-other-details, 
.btn-whatsapp-outline,
.btn-whatsapp-modal,
.job-apply-btn,
.sector-item h5,
.year,
.sub-milestones,
.section-subtitle,
.modal-label,
.status-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

/* Metadata and List items */
.other-products-sub,
.job-details-list li,
.modal-spec-list li {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

body {
    background-color: var(--fefcff);
    color: var(--dark-text);
    line-height: 1.6;
}

.container {
    max-width: 1200px; /* Standard width for body content */
    margin: 0 auto;    /* Centering */
    padding-left: 20px; 
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't break the width */
}	

/* 3. sticky header styling */
.main-header {
    background-color: var(--cool-white);
    height: 85px;
    display: flex;
    align-items: center;
    position: sticky; /* safety: keeps navigation visible while scrolling */
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* subtle shadow for premium depth */
    border-bottom: 2px solid var(--light-blue);
}

.main-header .container {
    max-width: 1400px; /* Limits how far the logo/buttons can spread */
    width: 100%;       /* Allows it to be responsive on smaller screens */
    margin: 0 auto;    /* Centers the container on the screen */
    padding: 0 40px;   /* Adds a safety gap so it never touches the glass */
    display: flex;
    justify-content: space-between;
    align-items: center;
}


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

/* 4. logo styling: deep blue as requested */
.logo {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--deep-blue);
    text-decoration: none;
    letter-spacing: -1px;
}

/* strict logo sizing to prevent layout collapse */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
	gap:10px;
}

.logo-text-wrapper {
    display: flex;
    flex-direction: column; /* stacks name over tagline */
    line-height: 1.2;
	justify-content: center;
}

/* this makes your tagline smaller */
.logo-tagline {
    font-size: 0.75rem; 
    font-weight: 700;   /* bold weight so it's not too thin */
    letter-spacing: 0px;
    white-space: nowrap;
}

/* first part: deep blue */
.tagline-part1 {
    color: var(--black) !important;
	text-align: center;
	display: block;
}

/* second part: light blue */
.tagline-part2 {
    color: var(--black) !important;
	text-align: center;
	display: block;
}

.logo span {
    color: var(--light-blue);
}

/* 5. navigation menu */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 20px;
	align-items: center;
}

.nav-link {
    color: var(--deep-blue);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 8px 0;
	white-space: nowrap;
    transition: var(--transition);
    border-bottom: 2px solid transparent;
}
/* Delete the old .nav-link:hover and use this instead */
.nav-link.contact-hover-only:hover {
    color: var(--black);
}


/* 6. dynamic active highlighting */
.nav-link.active {
    color: var(--deep-blue);
    border-bottom: 2px solid var(--deep-blue); /* shows user exactly where they are */
}

/* 7. mobile hamburger icon (hidden on desktop) */
.hamburger {
    display: none;
    color: var(--deep-blue);
    font-size: 1.5rem;
    cursor: pointer;
}


.nav-btn-container {
    margin-left: 10px; /* Space between last link and button */
	display: flex;
    align-items: center;
    gap: 20px; /* Space between the Quote button and WhatsApp icon */
}

.btn-whatsapp-header {
    background-color: #25D366; /* Official WhatsApp Green */
    color: white !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Makes it a circle */
    font-size: 1.4rem;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-whatsapp-header:hover {
    background-color: #128C7E; /* Darker green on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Base button style (Reusing your premium design) */
.btn-header {
    padding: 10px 24px !important;
    font-size: 0.9rem !important;
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--deep-blue);
    color:  var(--white);
    border-radius: 50px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}



.btn-header:hover::before {
    left: -25%;
}

.btn-header:hover {
    color:  var(--deep-blue) !important;
}

/* --- Mobile Responsive Fix --- */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color:  var(--white);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 20px 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu li {
        margin: 15px 0;
    }

    .nav-btn-container {
        margin-left: 0;
        padding: 0 20px;
        width: 100%;
    }

    .btn-header {
        width: 100%; /* Button takes full width on mobile menu */
        min-width: unset;
        padding: 15px 0 !important;
    }
}


/* 8. responsiveness: tablet and mobile views */
@media (max-width: 1200px) {
    .hamburger {
        display: block;
		cursor: pointer;
    }

    .nav-menu {
        position: fixed;
        top: 85px;
        left: -100%; /* hidden off-screen by default */
        flex-direction: column;
        background-color: var(--cool-white);
        width: 100%;
		height: auto;
        text-align: center;
        transition: var(--transition);
        padding: 30px 0;
        border-bottom: 3px solid var(--deep-blue);
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    }

    /* this class is toggled by the javascript in your header.php */
    .nav-menu.mobile-active {
        left: 0;
    }

    .nav-menu li {
        margin: 15px 0;
    }
}

/* --- Content Container --- */
.hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px; /* Standard container width */
  margin: 0 auto;
  padding: 0 5%;    /* Responsive side spacing */
  text-align: left;
  align-items: center;
}
 
.hero-text {
  max-width: 600px; /* Stops text from stretching too wide on desktop */
}
	
.hero-text h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem); /* Responsive font size */
  color: var(--white);
  margin: 0 0 15px 0;
  line-height: 1.1;
  font-weight: 800;
  /* Shadow added for better legibility against the crane 
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7); */
  align-items: center;
}
 
.hero-text p {
  font-size: 1.2rem;
  color: var(--white); /* White contrasts best with the overlay */
  margin-bottom: 30px;
  line-height: 1.5;
}
 
/* --- Buttons --- */
.hero-btns {
  display: flex;
  gap: 15px; /* Spaces buttons apart */
}
 
.btn-primary, .btn-secondary {
  padding: 12px 30px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
 
.btn-primary {
  background-color: var(--deep-blue);
  color: var(--white);
}
 
.btn-secondary {
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}
 
.btn-primary:hover, .btn-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
 
/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
  .hero {
    height: 60vh; /* Shorter hero on mobile */
  }
  .hero-content {
    text-align: center; /* Better look for phones */
    padding: 0 20px;
  }
  .hero-btns {
    justify-content: center;
  }
  .swiper-slide {
    justify-content: center;
  }
 
  .swiper-slide::before {
    background: rgba(0, 0, 0, 0.4); /* Solid overlay for mobile */
  }
}

.btn-premium.btn-header {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 14px 32px;
    background-color: var(--deep-blue); /* Deep Blue base */
    color: var(--cool-white); /* White text */
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px; 
    position: relative; /* Required for the pseudo-element */
    overflow: hidden;   /* Clips the diagonal layer to the button shape */
    z-index: 1;
    transition: all 0.4s ease;
    border: none;
    cursor: pointer;
}
 
 
.btn-premium.btn-header i {
    font-size: 0.8rem;
    transition: transform 0.4s ease;
}
 
/* Hover States */
.btn-premium.btn-header:hover {
    color: var(--deep-blue); /* Text changes to Deep Blue */
    transform: translateY(-3px); /* Subtle lift */
    box-shadow: 0 8px 25px rgba(170, 223, 255, 0.4);
	background-color: var(--light-blue);
}
 
 
.btn-premium.btn-header:hover i {
    transform: translateX(8px);
}

 
.btn-premium.btn-header:hover i {
    transform: translateX(8px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--cool-white);
    padding: 15px 35px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid var(--cool-white);
    border-radius: 4px;
    transition: var(--transition);
}

.btn-secondary:hover {
    background-color: var(--cool-white);
    color: var(--deep-blue);
}

/* responsiveness for smaller screens */
@media (max-width: 768px) {
    .hero-text h1 { font-size: 2.5rem; }
    .hero-btns { flex-direction: column; }
    .hero { height: 100vh; }
}
.logo-img {
    height: 40px;    /* adjust this height to fit your design */
    width: auto;
	max-width: 180px;	/* this keeps the proportions correct */
    display: block;
    transition: var(--transition);
}

.logo-img:hover {
    opacity: 0.8;    /* slight fade on hover for a premium feel */
}

/* mobile adjustment */
@media (max-width: 768px) {
    .logo-img {
        height: 40px; /* slightly smaller logo on mobile phones */
    }
}


/* --- intro section --- */
.intro-section {
    padding: 80px 0;
    background-color: var(--cool-white);
    overflow: hidden;
}

.intro-full-grid {
    display: flex;
    align-items: stretch;
    gap: 40px;
    width: 100%;
}

.intro-text-col {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- preserved headline & text styles --- */
.intro-headline h2 {
    font-size: 2.2rem;
    color: var(--deep-blue);
    line-height: 1.3;
    font-weight: 800;
    position: relative;
    margin-bottom: 20px;
}

.intro-headline h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--light-blue);
    margin-top: 15px;
}




.intro-content p {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
    hyphens: auto;
}

/* --- preserved button style --- */
.intro-btn-wrapper {
    margin-top: 30px;
    display: flex;
}

/* --- corrected marquee: no gap version --- */
.intro-marquee-col {
    flex: 1;
    position: relative;
    overflow: hidden;
	height: 450px;
	width: 50vw;
    border-radius: 20px;
	aspect-ratio: 16 / 9; /* Optional: Sets a consistent "TV" shape for the slide */
}

.marquee-track-horiz {
    display: flex;
    
    height: 100%;
    /* adjust 20s for speed */
    animation: stepSlide 18s ease-in-out infinite;
}

.marquee-track-horiz img {
    flex: 0 0 100%;
	display: block;
    /* fixed width ensures the animation math stays consistent */
    width: 100%; 
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
    padding: 0; /* this creates the gap between images */
}
@keyframes stepSlide {
    0%, 15%   { transform: translateX(0); }          /* Image 1 stays */
    16.6%, 31% { transform: translateX(-100%); }    /* Image 2 stays */
    33.3%, 48% { transform: translateX(-200%); }    /* Image 3 stays */
    50%, 64%   { transform: translateX(-300%); }    /* Image 4 stays */
    66.6%, 81% { transform: translateX(-400%); }    /* Image 5 stays */
    83.3%, 97% { transform: translateX(-500%); }    /* Image 6 stays */
    100%       { transform: translateX(-600%); }    /* Reset to start */
}

.intro-marquee-col:hover .marquee-track-horiz {
    animation-play-state: paused;
}

/* Mobile Fix */
@media (max-width: 1024px) {
    .intro-full-grid {
        flex-direction: column;
    }
    .intro-text-col {
        padding: 0;
        text-align: center;
        margin-bottom: 40px;
    }
    .intro-marquee-col {
        height: 300px;
        flex: none;
        width: 100%;
    }
    .intro-headline h2::after { margin: 15px auto 0; }
	.intro-content p{ padding-left: 10px; padding-right: 10px;}
    .intro-btn-wrapper { justify-content: center; }

    .marquee-track-horiz img {
        width: 100%; /* full width on mobile */
        padding: 0;
		animation: stepSlide 18s ease-in-out infinite;
    }
    
}



.intro-btn-wrapper .btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 14px 32px;
    background-color: var(--deep-blue); /* Deep Blue base */
    color: var(--cool-white); /* White text */
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px; 
    position: relative; /* Required for the pseudo-element */
    overflow: hidden;   /* Clips the diagonal layer to the button shape */
    z-index: 1;
    transition: all 0.4s ease;
    border: none;
    cursor: pointer;
}



.btn-premium i {
    font-size: 0.8rem;
    transition: transform 0.4s ease;
}

/* Hover States */
.btn-premium:hover {
    color: var(--deep-blue); /* Text changes to Deep Blue */
    transform: translateY(-3px); /* Subtle lift */
    box-shadow: 0 8px 25px rgba(170, 223, 255, 0.4);
	background-color: var(--light-blue);
}



.btn-premium:hover i {
    transform: translateX(8px);
}

/* Mobile Optimization for Premium Button */
@media (max-width: 375px) {
    .intro-btn-wrapper .btn-premium {
        /* Reduce horizontal padding from 32px to 18px */
        padding: 12px 18px !important; 
        
        /* Reduce gap between text and icon */
        gap: 8px !important;
        
        /* Slightly smaller font and letter spacing to save room */
        font-size: 0.8rem !important;
        letter-spacing: 0.5px !important;
        
        /* Ensure the button doesn't force a width wider than the screen */
        white-space: nowrap; 
        max-width: 100%;
    }
}

/* mobile responsive fix */
@media (max-width: 768px) {
    .intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .intro-headline h2 {
        font-size: 1.8rem;
    }
}
.trust-bar {
    padding: 60px 0;
    background-color: var(--white); 
    color: var(--cool-white);
}

.trust-bar .container {
    max-width: 1200px;
    margin: 0 auto; /* This centers the entire block on the page */
    padding: 0 20px;
}

.trust-grid {
    display: grid;
    /* This creates 4 equal columns on desktop */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    width: 100%;
    justify-content: center; /* Aligns the grid items within the container */
    align-items: start;
}


.trust-item {
    text-align: center;
    opacity: 0; 
    transform: translateY(30px); /* Move down slightly */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* transition makes the movement smooth when .reveal is added */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
}

/* staggered delay(the "wave" effect) */
.trust-item:nth-child(1) { transition-delay: 0.1s;}
.trust-item:nth-child(2) { transition-delay: 0.3s; }
.trust-item:nth-child(3) { transition-delay: 0.5s; }
.trust-item:nth-child(4) { transition-delay: 0.7s; }

/* This is what the JavaScript will trigger */
.trust-item.reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}



.trust-item:hover i {
	transform: scale(1.1);
	transition: transform 0.3s ease;
	color: var(--light-blue);
}	

.trust-item i {
    font-size: 2rem;
    color: var(--deep-blue); 
    margin-bottom: 20px;
	display: inline-block;
	transition: transform 0.3s ease, color 0.3s ease;
}

.trust-item h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.4;
	color:var(--deep-blue);
}

.trust-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: justify; /* Justified text */
    opacity: 0.9;
	color: var(--black);
}

.icon-box{
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}	



/* Mobile adjustments */
@media (max-width: 768px) {
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.main-footer {
    background-color: var(--cool-white); /* Your Deep Blue */
    color: var(--black);
    padding: 70px 0 0 0;
    
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
	align-items: start;
    padding-bottom: 50px;
}

.footer-col {
	flex: 1;
    min-width: 250px;
    padding: 20px 40px; /* Adds space inside the columns so text doesn't touch the line */
    
    /* The vertical line */
    border-right: 1px solid rgba(211, 211, 211, 0.5); /* Light grey with low opacity */
	
	/* Ensures padding doesn't increase the total width of the column */
    box-sizing: border-box;
	
}

/* 3. Remove the border from the very last column */
.footer-col:last-child {
    border-right: none;
	padding-right: 0;
}

/* Remove padding on the first column to keep it aligned to the left edge */
.footer-col:first-child {
    padding-left: 0;
}

/* --- Update this section --- */
@media (max-width: 991px) {
    .footer-grid {
        /* Change 1: Force grid to only 1 column */
        grid-template-columns: 1fr; 
        gap: 30px; /* Adds space between the stacked rows */
        padding-left: 20px; /* Adds the side padding you requested earlier */
        padding-right: 20px;
    }

    .footer-col {
        /* Change 2: Remove vertical lines and reset padding */
        border-right: none;
        border-bottom: 1px solid rgba(211, 211, 211, 0.3); 
        padding: 20px 0; /* Vertical padding only, removes the 40px side padding */
        width: 100%;
    }
    
    .footer-col:last-child {
        border-bottom: none; /* Keeps the bottom clean */
    }

    /* Optional: Center the text for a better mobile look */
    .footer-col, .footer-col h3 {
        text-align: left; /* Keep left or change to center based on your preference */
    }

    .footer-col h3::after {
        left: 0; /* Ensures the blue accent line stays at the start */
    }
}

.footer-col h3 {
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
	margin-top: 0;
	line-height: 1.2;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--light-blue); /* Light Blue accent */
}

.footer-logo {
    max-width: 200px;
    margin-bottom: 20px;
	justify-content:center;
}

.footer-tagline {
    font-weight: 700;
    color: var(--black);
    margin-bottom: 10px;
}

.footer-col p {
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: justify; /* Consistent with your intro section */
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
	font-size: 0.9rem;
}

.footer-links a {
    color: var(--black);
    text-decoration: none;
    font-size: 0.9rem;
	font-weight: 400;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--deep-blue);
    padding-left: 5px;
	text-decoration: none;
}

.address-link {
    text-decoration: none !important; /* Removes the underline */
    color: inherit !important;           /* Takes the color from the <li> or parent div */
    cursor: pointer;
}

.address-link:hover {
    text-decoration: none;
}

.contact-info {
    list-style: none;
    padding: 0;
}

.contact-info li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.contact-info i {
    color: var(--deep-blue);
	/* Add a small top margin to the icon to perfectly align it with the first line of text */
    margin-top: 3px; 
    /* Ensures the icon doesn't shrink when text is long */
    flex-shrink: 0; 
    width: 20px; /* Optional: setting a fixed width makes all text start at the exact same point */
    text-align: center;
}

/* Use this class for both <li> and <a> to ensure alignment */
.contact-item {
    display: flex !important;
    align-items: flex-start; /* Pins icon to the top line */
    gap: 15px;
    margin-bottom: 15px;
    text-decoration: none !important;
    color: inherit !important;
}

.contact-text {
    display: block;          /* Ensures the text block behaves predictably */
    line-height: 1.5;        /* Improves readability for multi-line addresses */
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icons a {
    width: 35px;
    height: 35px;
    background: rgba(254, 252, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--cool-white);
    text-decoration: none;
    transition: 0.3s;
}

.social-icons a:hover {
    background: var(--light-blue);
    color: var(--deep-blue);
}

.footer-bottom {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
    border-top: 1px solid var(--cool-white);
}

.footer-bottom p a {
    color: var(--deep-blue) !important; /* Forces your deep blue variable */
    font-weight: 700;                  /* Makes it Bold */
    font-style: italic;                /* Makes it Italic */
    text-decoration: none !important;  /* Removes the default underline */
    transition: 0.3s ease;             /* Smooth transition for hover */
}

.footer-bottom p a:hover {
    text-decoration: none;             /* Keeps underline removed on hover */
    opacity: 0.8;                      /* Optional: slight fade effect on hover */
}


/* --- Stats Section (White Background) --- */
.stats-section {
    padding: 100px 0;
    background-color: var(--white);
    color: var(--dark-text);
    width: 100%;
    /* REMOVED display: grid from here as it conflicts with the container */
}

/* Ensure the container allows the grid to take full width */
.stats-section .container {
    display: block; 
    max-width: 1200px;
    margin: 0 auto;
}

.stats-grid {
    display: grid;
    /* Desktop: 4 Columns */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    width: 100%;
}

.stat-box {
    text-align: center;
    padding: 40px 20px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    
    /* Reveal Animation Start State */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.stat-box.reveal-stat {
    opacity: 1;
    transform: translateY(0);
}

/* --- Spinning Icon & Border --- */
.icon-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrap i {
    font-size: 2.2rem;
    color: var(--deep-blue); 
    z-index: 2;
}

.spinning-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(170, 223, 255, 0.2);
    border-top: 3px solid var(--light-blue);
    animation: spin 2s linear infinite;
    z-index: 1;
}

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

/* --- Numbers & Text --- */
.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--deep-blue);
    margin-bottom: 10px;
}

.stat-box p {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dark-text);
}

/* --- Responsive Breakpoints --- */

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

/* Phone View: 1 Column */
@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .stat-number {
        font-size: 2.2rem; /* Adjusted for smaller mobile screens */
    }
}

.client-section {
    padding: 80px 0;
    background-color: var(--white);
    overflow: hidden;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    color: var(--deep-blue); /* Deep Blue */
    font-size: 2.5rem;
    font-weight: 800;
    position: relative;
    display: inline-block;
}

.stats-section .section-title {
	font-size: 1.5rem;
}	

/* Optional underline for the heading */
.section-title h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--lighe-blue); /* Light Blue */
    margin: 10px auto 0;
}
.section-title p {
	color: var(--black);
	font-weight: 600;
	font-size: 1.2rem;
}	

.logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
	background: var(--cool-white);
}

/* The track width must be (width of 1 slide) * (total logos * 2) */
.logo-track {
    display: flex;
	gap: 30px;
    width: calc((200px + 30px) * 48);
    animation: scrollContinuous 40s linear infinite;
}

/* Pause on hover so users can see specific partners */
.logo-track:hover {
    animation-play-state: paused;
}

.slide {
    width: 200px; /* Adjust based on your logo sizes */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.slide img {
    max-width: 150px;
    max-height: 150px;
    filter: none;
    opacity: 1;
    object-fit: contain;
}

.slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

@keyframes scrollContinuous {
    0% { transform: translateX(0); }
    /* (200px image + 30px gap) * 24 logos = 5520px */
    100% { transform: translateX(calc(-230px * 24)); }
}

/* Adjust speed/width for Mobile */
@media (max-width: 768px) {
    .logo-track {
        gap: 20px;
        width: calc((150px + 20px) * 48);
        animation: scrollContinuous 25s linear infinite;
    }
    .slide { width: 150px;}
    @keyframes scrollContinuous {
        
        /* Move by EXACTLY one full set: (Width + Gap) * 24 */
        100% { transform: translateX(calc(-170px * 24)); }
    }
}


.services-overview {
    padding: 100px 0;
    background-color: var(--white); 
    width: 100%;
    display: block;
}

/* Resetting container logic */
.services-overview .container {
    display: flex !important;
    flex-direction: column !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.services-overview .section-title {
    text-align: center;
    margin-bottom: 50px;
}

.services-overview .section-title h2 {
    color: var(--deep-blue);    font-size: 2.5rem;
    font-weight: 800;
    
}

.services-overview .section-title p {
    color: var(--black);
    font-weight: 600;
	font-size: 1.2rem;
}

/* The Grid - 3 Columns */
.services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px;
    width: 100%;
    margin-bottom: 60px;
}

/* The Card Styling - White on Light Blue */
.service-card {
    background:var(--deep-blue);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 81, 147, 0.1);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(0, 81, 147, 0.2);
}

/* Icon Box */
.service-icon {
    width: 65px;
    height: 65px;
    background: var(--light-blue); /* Light blue icon background inside white card */
    color: var(--deep-blue); /* Deep blue icon */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    border-radius: 12px;
    margin-bottom: 25px;
    transition: 0.3s ease;
}

.service-card:hover .service-icon {
    background: var(--white); /* Flip to Deep Blue on hover */
    color: var(--deep-blue);
}

.service-card h3 {
    font-size: 1.4rem;
    color: var(--white);
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: capitalize;
}

/* Premium List Inside Card */
.premium-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.premium-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: var(--white); /* Darker text for readability */
    transition: 0.3s ease;
}

.service-card:hover .premium-list li {
    transform: translateX(8px);
    color: var(--light-blue);
}

.premium-list i {
    color: var(--white); /* Deep Blue checkmarks */
    font-size: 0.9rem;
}

/* Centering the button */
.service-btn-center {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .services-grid {
        grid-template-columns: 1fr !important;
    }
    .services-overview .section-title {
        text-align: center;
    }
}

.services-overview .btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 14px 32px;
    background-color: var(--deep-blue); /* Deep Blue base */
    color: var(--cool-white); /* White text */
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px; 
    position: relative; /* Required for the pseudo-element */
    overflow: hidden;   /* Clips the diagonal layer to the button shape */
    z-index: 1;
    transition: all 0.4s ease;
    border: none;
    cursor: pointer;
}
 
 
.services-overview .btn-premium i {
    font-size: 0.8rem;
    transition: transform 0.4s ease;
}
 
/* Hover States */
.services-overview .btn-premium:hover {
    color: var(--deep-blue); /* Text changes to Deep Blue */
    transform: translateY(-3px); /* Subtle lift */
    box-shadow: 0 8px 25px rgba(170, 223, 255, 0.4);
	background-color: var(--light-blue);
}
 
 
.services-overview .btn-premium:hover i {
    transform: translateX(8px);
}


/* --- enquiry section container --- */
.enquiry-section {
    padding: 80px 0;
    background-color: var(--deep-blue); /* deep blue */
    overflow: hidden;
}

.enquiry-flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
}

/* --- text styling (left side) --- */
.enquiry-header {
    flex: 0 0 30%; /* keeps text compact to give form more room */
}

.enquiry-header h2 {
    color:  var(--white);
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 5px;
    line-height: 1.2;
    text-transform: capitalize;
}

.enquiry-header p {
    color:  var(--light-blue); /* light blue subtext */
    font-size: 0.9rem;
}

.enquiry-pill-wrapper {
    flex: 1;
    background-color: var(--light-blue); /* Restores the light blue background */
    padding: 40px; /* Increased padding for the 3-row layout */
    border-radius: 50px; /* Kept it rounded like a large pill/box */
}

.enquiry-flex-form {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Adds the gap between the rows */
    width: 100%;
}

/* --- Form Row Layouts --- */
.form-row-top {
    display: flex;
    width: 100%;
    gap: 30px;
}

.form-row-full {
    width: 100%; /* Ensures 2nd and 3rd rows take full width */
}

/* --- Input Group (Bottom Border Only) --- */
.input-group-pill {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.input-group-pill label, 
.textarea-container label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--deep-blue);
}

.input-group-pill input {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(0, 81, 147, 0.3); /* Subtle bottom border */
    padding: 10px 0;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s;
}

.input-group-pill input:focus {
    border-bottom-color: var(--deep-blue);
}

/* --- Textarea (Full Box) --- */
.textarea-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.textarea-container textarea {
    width: 100%;
    height: 100px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background-color: var(--white);
    font-size: 0.9rem;
    resize: none;
}

/* --- Button Styling --- */
.button-container {
    width: 100%;
}

.btn-enquiry {
    width: 100%; /* Stretches to match the textarea width above it */
    height: 50px; /* Adjusted height for full-width layout */
    border-radius: 50px;
	background-color: var(--deep-blue);
	color: var(--white);
    /* Keeping your existing transition and z-index effects from previous code */
}

/* --- Responsive Fixes --- */


/* --- Tab view --- */

@media (max-width: 1100px) {
    .enquiry-flex-container {
        flex-direction: column; /* This moves the form to the next row */
        align-items: center;    /* Centers the content */
        gap: 40px;             /* Adds space between the text and the form */
    }

    .enquiry-header {
        text-align: center;     /* Centers the heading and paragraph */
        max-width: 100%;
    }

    .enquiry-pill-wrapper {
        width: 90%;           /* Ensures the form takes full width of the screen */
		margin: 0 auto;
    }
}

@media (max-width: 768px) {
    /* Stack the Name and Phone fields on top of each other */
    .form-row-top {
        flex-direction: column;
        gap: 20px;
    }

    /* Adjust the pill wrapper for smaller screens */
    .enquiry-pill-wrapper {
        padding: 30px 20px;
        border-radius: 30px; /* Slightly less rounded for mobile */
		margin: 0 auto;
		width: 90%;
    }

    .enquiry-header h2 {
        font-size: 1.8rem;    /* Makes the heading fit better on mobile */
    }
}

/* --- Fleet Section Layout --- */
.fleet-section {
    padding: 80px 0;
    background-color:  var(--white);
    position: relative;
}

/* Reusing your headline underline logic but centered */
.fleet-section .intro-headline h2::after {
    margin: 15px auto 0;
}

.fleet-slider-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px; /* Space for the arrows */
}

/* --- Arrows on Sides --- */
.fleet-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background:  var(--white);
    border: 1px solid  var(--deep-blue);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
    color:  var(--deep-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fleet-nav-btn:hover {
    background:  var(--deep-blue);
    color:  var(--white);
}

.fleet-nav-btn.prev { left: -10px; }
.fleet-nav-btn.next { right: -10px; }

/* --- Product Grid --- */
.fleet-card {
    display: none;
    animation: fadeIn 0.6s ease;
}

.fleet-card.active {
    display: block;
}

.fleet-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}

.fleet-img-col img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 20px;
}

/* --- Reusing your Text Styles --- */
.fleet-info-col h3 {
    font-size: 1.5rem;
    color: var(--deep-blue);
    font-weight: 800;
    margin-bottom: 20px;
}

.specs-table .spec-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.spec-row span { color: #777; }
.spec-row strong { color: var(--dark-text); }

/* --- Dots at Bottom --- */
.fleet-pagination-bottom {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.p-dot {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.p-dot.active {
    background: var(--deep-blue);
    width: 25px; /* Pill shape for active dot */
    border-radius: 10px;
}

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

/* Responsive */
@media (max-width: 991px) {
    .fleet-grid { grid-template-columns: 1fr; gap: 20px; }
	.fleet-info-col { text-align: center; padding: 0 10px; }
	.fleet-img-col img {
		height: 250px;
		width: 100%;
		object-fit: contain;
		background-color: #f9f9f9;
		border-radius: 15px;
	}	
    .fleet-nav-btn { top: 25%; width: 35px; height: 35px; } /* Move arrows to image area on mobile */
}


/* Heading styles from your theme */
.fleet-title-centered {
    text-align: center;
    margin-bottom: 50px;
}

.fleet-title-centered h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111;
}

.title-underline {
    width: 60px;
    height: 4px;
    background: var(--deep-blue); /* Brand Blue */
    margin: 10px auto 0;
}


/* Section Wrapper */
.sector-grid-section {
    padding: 80px 0;
    background-color: var(--white);
}

.sector-header {
    text-align: center;
    margin-bottom: 50px;
}

.sector-header h2 {
    color: var(--deep-blue);
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.sector-line {
    width: 60px;
    height: 4px;
    background-color: var(--light-blue);
    margin: 0 auto;
}

/* --- THE GRID ENGINE --- */
.sector-grid {
    display: grid;
    /* Desktop: 4 columns */
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px;
    width: 100%;
}

.sector-item {
    background: var(--deep-blue);
    padding: 40px 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid rgba(0, 81, 147, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sector-item i {
    font-size: 2.5rem;
    color: var(--cool-white);
    margin-bottom: 15px;
}

.sector-item h5 {
    font-size: 1.1rem;
    color: var(--cool-white);
    font-weight: 700;
    margin: 0;
}

/* Hover Effect */
.sector-item:hover {
    transform: translateY(-5px);
    background: var(--light-blue);
	color: var(--deep-blue);
    box-shadow: 0 10px 20px rgba(0, 81, 147, 0.2);
}

.sector-item:hover i, 
.sector-item:hover h5 {
    color: var(--deep-blue);
}

/* --- RESPONSIVE BREAKPOINTS --- */

/* Tablet & Mobile: 3 columns */
@media (max-width: 991px) {
    .sector-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .sector-item {
        padding: 25px 10px; /* Smaller padding for smaller cards */
    }

    .sector-item i {
        font-size: 1.8rem; /* Smaller icons */
    }

    .sector-item h5 {
        font-size: 0.9rem; /* Smaller text */
    }
}

/* Very Small Phones: 2 columns (optional, for readability) */
@media (max-width: 480px) {
    .sector-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* --- Hero Section Styles --- */
.hero {
  width: 100%;
  height: 80vh; /* Consistent height for the section */
  position: relative;
  overflow: hidden;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;         /* Vertically centers the content */
  justify-content: flex-start;    /* Horizontally aligns to the LEFT */
  height: 100%;
  
  
  position: relative;
}

/* Linear gradient makes the left side darker so blue text stands out */
.swiper-slide::before {
  content: '';
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
  z-index: 1;
}


.page-hero {
    width: 100%;
    height: 300px; /* Shorter than the homepage hero */
    min-height: 300px;
    display: flex;
    align-items: center;
    position: relative;
    
    background-size: cover;
    background-position: center;
}

/* The warm orange/dark overlay from your image */
.page-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(139, 69, 19, 0.3));
    z-index: 1;
}

.page-hero .hero-content {
    position: relative;
    z-index: 10;
    padding-left: 5%;
}

.page-hero h1 {
    font-size: 3.5rem;
    color: var(--white);
    margin: 0;
    font-weight: 700;
	
}

.page-hero .subtitle {
    font-size: 1.2rem;
    color: var(--white); /* Matching the orange text in your image */
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 10px;
}

.about-overview {
    padding: 80px 0;
    background-color: var(--white);
	text-align: center;
}

.overview-flex {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap; /* Ensures it stacks on mobile */
}

.overview-text {
    flex: 1;
    min-width: 300px;
}



/* Typography */
.section-subtitle {
    display: block;
    text-transform: uppercase; /* Uppercase as requested */
    color: var(--deep-blue); /* Your Deep Blue */
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.section-title {
    font-size: 2.5rem;
    color: var(--deep-blue); /* Black combination */
    margin-bottom: 25px;
    font-weight: 800;
}

.section-title .highlight {
    color: var(--deep-blue); /* Deep Blue for the company name part */
}

.overview-text p {
    color: #444;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.1rem;
	text-align: justify;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
}

/* --- Journey Section Container --- */
.journey-section {
    position: relative;
    padding: 100px 0;
    background-color: var(--deep-blue); /* Your Deep Blue */
    color: var(--white);
    overflow: hidden;
	margin-top:100px;
}

.journey-header {
    text-align: center;
    margin-bottom: 60px;
}

.sub-milestones {
    display: block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9rem;
    opacity: 0.8;
}

.main-journey {
    font-size: 2.8rem;
    font-weight: 800;
    margin-top: 10px;
}

/* --- Timeline Desktop Layout --- */
.timeline-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px;
}

/* The Horizontal Center Line */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%);
}

.timeline-nodes-top {
    display: flex;
    justify-content: space-between;
	margin-bottom;
}

.timeline-nodes-bottom {
	display: flex;
	justify-content: space-between;
    margin-top: 2px; /* Space between rows */
}

/* Individual Node Styling */
.node {
    flex: 1;
    position: relative;
    text-align: center;
    padding: 20px;
	min-width:200px;
}

/* The Vertical Connectors (Dashed Lines) */
.node::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    height: 50px;
    border-left: 2px dashed rgba(255, 255, 255, 0.5);
}

/* The Red Dot Marker */
.node::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: #e60000; /* Red dot */
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.timeline-nodes-top .node {
    display: flex;
    flex-direction: column-reverse; /* Year and text on top */
    padding-bottom: 60px; 
}

.timeline-nodes-bottom .node {
    padding-top: 60px;
}

/* Positioning for Top Row */
.timeline-nodes-top .node::before { bottom: 0; height: 50px; }
.timeline-nodes-top .node::after { bottom: -6px; left: 50%; }

/* Positioning for Bottom Row */
.timeline-nodes-bottom .node::before { top: 0; height: 50px; }
.timeline-nodes-bottom .node::after { top: -6px; left: 50%; }

.node .year {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.node .description {
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.9;
}

/* --- Responsive Media Query (Tablets & Mobile) --- */
@media (max-width: 991px) {
    .timeline-container::before {
        left: 20px;
        width: 2px;
        height: 100%;
        top: 0;
        transform: none;
    }

    .timeline-nodes-top, 
    .timeline-nodes-bottom {
        flex-direction: column;
    }

    .node {
        text-align: left;
        padding: 20px 0 20px 50px;
        max-width: 100%;
    }

    .node::before {
        left: 20px;
        height: 100%;
        top: 0;
        bottom: auto;
    }

    .node::after {
       
        left: 40px;
        top: 30px;
        bottom: auto;
    }

    .timeline-nodes-bottom {
        margin-top: 0;
    }
}

/* --- Journey Section Base --- */
.journey-section {
    position: relative;
    padding: 100px 0;
    background-color: var(--deep-blue); /* Deep Blue */
    color: var(--white);
    overflow: hidden;
}

.journey-header {
    text-align: center;
    margin-bottom: 80px;
}

.sub-milestones {
    display: block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9rem;
    opacity: 0.7;
}

.main-journey {
    font-size: 3rem;
    font-weight: 800;
    margin: 10px 0 0;
}

/* --- Timeline Architecture --- */
.timeline-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
}

/* The Horizontal Center Line */
.timeline-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-nodes-top, 
.timeline-nodes-bottom {
    display: flex;
    justify-content: space-between;
}

/* --- Node Styling --- */
.node {
    flex: 1;
    position: relative;
    text-align: center;
    padding: 0 10px;
    min-width: 0; /* Allows shrinking on smaller screens */
    z-index: 5;
}

/* Spacer nodes to create the staggered effect */
.node.empty {
    visibility: hidden;
}

.node .year {
    display: block;
	order: 1;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--white);
}

.node .description {
	order: 2;
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.9;
    margin: 0;
}

/* --- Top Row Specifics --- */
.timeline-nodes-top {
    margin-bottom: 2px;
}

.timeline-nodes-top .node {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
    padding-bottom: 80px; /* Space for the vertical line */
}

/* Vertical line for top nodes */
.timeline-nodes-top .node:not(.empty)::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 70px;
    border-left: 2px dashed rgba(255, 255, 255, 0.4);
}

/* Red dot for top nodes */
.timeline-nodes-top .node:not(.empty)::after {
    content: '';
    position: absolute;
    bottom: -6px; /* Sits on the horizontal line */
    left: 50%;
    width: 12px;
    height: 12px;
    background: #ff0000;
    border-radius: 50%;
    transform: translateX(-50%);
}

/* --- Bottom Row Specifics --- */
.timeline-nodes-bottom {
    margin-top: 2px;
}

.timeline-nodes-bottom .node {
    padding-top: 80px; /* Space for the vertical line */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	
}

/* Vertical line for bottom nodes */
.timeline-nodes-bottom .node:not(.empty)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 70px;
    border-left: 2px dashed rgba(255, 255, 255, 0.4);
}

/* Red dot for bottom nodes */
.timeline-nodes-bottom .node:not(.empty)::after {
    content: '';
    position: absolute;
    top: -6px; /* Sits on the horizontal line */
    left: 50%;
    width: 12px;
    height: 12px;
    background: #ff0000;
    border-radius: 50%;
    transform: translateX(-50%);
}

/* --- Responsive View (Mobile) --- */
@media (max-width: 991px) {
    .timeline-container::after {
        left: 30px;
        width: 2px;
        height: 100%;
        top: 0;
        transform: none;
    }

    .timeline-nodes-top, 
    .timeline-nodes-bottom {
        flex-direction: column;
    }

    .node.empty {
        display: none; /* Remove spacers on mobile */
    }

    .node {
        text-align: left;
        padding: 30px 0 30px 60px !important;
        max-width: 100%;
    }

    /* Vertical line adjustment for mobile */
    .node::before {
        left: 30px !important;
        top: 0 !important;
        bottom: auto !important;
        height: 100% !important;
    }

    /* Red dot adjustment for mobile */
    .node::after {
        left: 30px !important;
        top: 40px !important;
        bottom: auto !important;
    }
}
/* --- Desktop stays the same --- */

/* --- Tablet and Mobile Responsive Fix --- */
@media (max-width: 991px) {
    .timeline-container {
        display: flex;
        flex-direction: column;
        padding: 40px 20px;
    }

    /* Merge the top and bottom containers visually */
    .timeline-nodes-top, 
    .timeline-nodes-bottom {
        display: contents; /* Allows individual nodes to be ordered globally */
    }

    /* Create the vertical line on the left */
    .timeline-container::after {
        left: 20px;
        width: 2px;
        height: 100%;
        top: 0;
        transform: none;
        background: rgba(255, 255, 255, 0.2);
    }

    .node.empty {
        display: none; /* Hide spacers on mobile */
    }

    .node {
        text-align: left;
        padding: 20px 0 20px 50px !important;
        width: 100%;
        display: block;
    }

    /* Re-adding the vertical lines on nodes for mobile */
    .node::before {
        content: '';
        position: absolute;
        left: 20px !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        border-left: 2px dashed rgba(255, 255, 255, 0.4) !important;
    }

    /* Aligning red dots to the vertical line */
    .node::after {
        left: 20px !important;
        top: 30px !important;
        transform: translateX(-50%) !important;
    }

    /* --- CHRONOLOGICAL ORDERING --- */
    /* Assign order based on the date sequence */
    .timeline-nodes-top .node:nth-child(1) { order: 1; } /* 1983 */
    .timeline-nodes-bottom .node:nth-child(2) { order: 2; } /* 1993 (Rental) */
    .timeline-nodes-top .node:nth-child(3) { order: 3; } /* 1993 (Transport) */
    .timeline-nodes-bottom .node:nth-child(4) { order: 4; } /* 1994 */
    .timeline-nodes-top .node:nth-child(5) { order: 5; } /* 1998 */
    .timeline-nodes-bottom .node:nth-child(6) { order: 6; } /* Recent */
    .timeline-nodes-top .node:nth-child(7) { order: 7; } /* 42nd Year */
    .timeline-nodes-bottom .node:nth-child(8) { order: 8; } /* Milestone */
}

.values-grid {

    width: 100%;
	border-bottom: 5px solid var(--light-blue);

}



/* Ensure the row uses flex to align the 3 columns side-by-side */

.values-grid .row {

    display: flex !important;

    flex-wrap: nowrap !important;

}



/* Each column stacks its two boxes vertically */

.bento-column {

    display: flex;

    flex-direction: column;

    flex: 0 0 33.333%;

    max-width: 33.333%;

}



/* The Zigzag: Column 2 puts icon on top on desktop */

@media (min-width: 768px) {

    .column-reverse-desktop {

        flex-direction: column-reverse;

    }

}



.value-box {

    min-height: 400px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 60px;

}



/* Color Palette */

.bg-custom-blue { background-color: var(--light-blue) !important; color: var(--black); }

.bg-black { background-color: var(--black) !important; color: var(--white); }

.bg-white { background-color: var(--white) !important; }



/* Icon & Text Styling */

.value-icon i { font-size: 5rem; color: var(--deep-blue); }

.value-text h3 { font-size: 2.2rem; font-weight: 800; margin-bottom: 20px; position: relative; }

.value-text h3::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 45px; height: 3px; background-color: currentColor; }



/* --- Mobile & Tablet View --- */

@media (max-width: 767px) {

    .values-grid .row {

        flex-wrap: wrap !important;

    }

    

    .bento-column {

        flex: 0 0 100% !important;

        max-width: 100% !important;

        /* Mobile/Tab: Always Icon First, Text Second */

        flex-direction: column-reverse !important; 

    }



    .value-box {

        min-height: auto !important;

        padding: 50px 30px !important;

        text-align: center !important;

    }



    .value-text h3::after {

        left: 50%;

        transform: translateX(-50%);

    }



    .bg-white {

        display: flex !important; /* Ensure icons stay visible */

        padding: 40px !important;

    }

}

.final-values-section {
	margin-bottom: 100px;
}

/* Ensure the container of the cards is a flexbox */
.final-values-section .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap; /* Allows stacking on mobile */
    justify-content: center;
}

/* Force horizontal alignment on desktop (Large screens) */
@media (min-width: 992px) {
    .final-values-section .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
        display: block !important;
    }
}

/* Keep your existing Icon Styling below */
.icon-circle {
    width: 110px;
    height: 110px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.icon-circle i {
    font-size: 3.5rem;
    color: var(--deep-blue);
}

.final-values-section h4 {
    color: var(--deep-blue);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
	text-align: center;
}

.final-values-section p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
	max-width: 250px;
	margin: 0 auto;
	text-align: center;
	padding: 10px;
}	

/* Heading - Forced to Top Row */
.values-top-header {
	margin-top: 100px;
    width: 100%;
    text-align: center;
    display: block !important; /* Forces it to be its own row */
    margin-bottom: 50px;
    clear: both;
}

.display-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--deep-blue);
    margin: 0;
	text-align: center;
}

.accent-line {
    width: 60px;
    height: 4px;
    background-color: var(--light-blue);
    margin: 15px auto 0;
}



.cranes-top-header {
    width: 100%;
    text-align: center;
    display: block !important; /* Forces it to be its own row */
    margin-bottom: 50px;
    clear: both;
}

.crane-listing-section {
    padding: 80px 0;
    background-color: #fff;
}

/* 1. Force Horizontal Grid Logic */
.row.g-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
	--bs-gutter-x: 1.5rem; 
    --bs-gutter-y: 1.5rem;
    margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
    margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
}

/* Ensure 3 columns per row on desktop (lg screens) */
@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        display: block !important;
		padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
        padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
        padding-top: var(--bs-gutter-y) !important;
    }
}

/* 2. Product Card Design (From Reference Image) */
.product-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 15px; /* Matches rounded corners in reference */
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	margin:2 !important;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.07);
}

.product-image {
    text-align: center;
    padding: 20px 0;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.product-info h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1a1a;
    margin: 15px 0 10px;
    line-height: 1.3;
    text-transform: uppercase;
}

.product-info p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* 3. Button Styling (Orange from Reference) */
.btn-more-details {
    background-color: var(--deep-blue); 
    color: #fff;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-block;
    width: fit-content;
    margin-top: auto; /* Aligns buttons at the bottom of cards */
}

.btn-more-details:hover {
    background-color: var(--light-blue);
    color: var(--deep-blue);
}

/* Tablet View (2 Columns) */
@media (min-width: 768px) and (max-width: 991px) {
    .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 12px !important; /* Space between the 2 columns */
        display: block !important;
    }
}

/* Mobile View (1 Column) */
@media (max-width: 767px) {
    .col-lg-4, .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 10px 0 !important; /* Vertical space when stacked */
        display: block !important;
    }
    
    .product-card {
        margin-bottom: 20px !important; /* Ensures bottom gap on mobile */
    }
}


/* 1. Global fix to ensure padding doesn't add to width */
.other-products-section *, 
.other-products-section *::before, 
.other-products-section *::after {
    box-sizing: border-box;
}

/* Unique section styling */
.other-products-section {
    overflow-x: hidden; /* Safety net to kill horizontal scroll */
    width: 100%;
    background-color: #fcfcfc;
	padding: 60px 0;
	align-items: center;
}

/* Header spacing */
.other-products-top-header {
    margin-bottom: 40px;
}

/* The Card: Forced to full width of the container */
.other-products-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
	max-width: 100%;
    display: flex;
    flex-direction: column; /* Vertical stack: Image on top, Text below */
    margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	padding: 50px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

.other-products-wrapper {
    display: flex;
    flex-direction: column; /* This forces the vertical stack */
    width: 100%;
}

/* Full width image box */
.other-products-img-box {
    background: #f8f9fa;
    width: 100%;
	padding: 30px;
	height:auto;
	display: inline-block;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.other-products-img-box img {
    display: inline-block;
    width: auto;
	height: auto;
    max-width: 100%;
}

/* Content Area */
.other-products-title {
    font-weight: 800;
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 5px;
	margin-top: 5px;
}

.other-products-sub {
    font-weight: 600;
    color: #0056b3;
    margin-bottom: 15px;
}

.other-products-info-list {
    padding-left: 20px;
    color: #666;
}

.status-text {
    font-weight: 700;
    color: #28a745;
    margin: 20px 0 10px 0;
}

/* Unique Buttons */
.btn-other-details {
    background-color: #0056b3;
    color: #ffffff !important;
    display: block;
    width: 100%;
    padding: 12px;
    text-align: center;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
}

.btn-other-inquiry {
    border: 2px solid #0056b3;
    color: #0056b3 !important;
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
}

/* --- Modal Background and Container --- */
.modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-header {
    border-bottom: 1px solid #eee;
    padding: 20px 25px;
}

.modal-title {
    color: var(--deep-blue);
    font-size: 1.5rem;
}

/* --- Image Section --- */
.modal-body img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

/* --- Content Section --- */
.modal-body h6 {
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: #333;
}

.modal-specs {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- Form/Action Area --- */
.modal-footer {
    border-top: 1px solid #eee;
    padding: 15px 25px;
}

/* --- Emergency Visibility Fix --- */
/* This ensures the modal is invisible until Bootstrap's JS triggers it */
.modal:not(.show) {
    display: none !important;
}

/* Background overlay darkness */
.modal-backdrop.show {
    opacity: 0.7;
}
/* --- Crane Listing Enhancements --- */
.product-specs-preview {
    font-size: 0.85rem;
    color: #666;
    height: 3em; /* Limits height */
    overflow: hidden;
    margin-bottom: 15px;
}

.card-actions {
    display: flex;
    gap: 10px;
}

.btn-whatsapp-outline {
    text-decoration: none;
    border: 1px solid #25D366;
    color: #25D366;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
}

.btn-whatsapp-outline:hover {
    background-color: #25D366;
    color: #fff;
}



/* Premium WhatsApp Button in Modal */
.btn-whatsapp-modal {
    background-color: #25D366;
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    display: block;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp-modal:hover {
    background-color: #128C7E;
    color: #fff;
    transform: translateY(-2px);
}



/* Ensure the modal is a true overlay */
.custom-crane-modal {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999 !important; /* Ensures it stays above everything */
    background-color: rgba(0, 0, 0, 0.6); /* Dims the background listing */
}
/* 2. Fix the Modal Size & Alignment */
.custom-crane-modal .modal-dialog {
    max-width: 800px;
    margin: 30px auto;
    display: flex;
    align-items: center;
    min-height: calc(100% - 60px);
	justify-content: center;    
	width: 90%;
}

.custom-crane-modal .modal-content {
    border-radius: 12px;
    max-height: 90vh; /* Prevents popup from going off-screen */
    overflow: hidden;
    display: flex;
    flex-direction: column;
	width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.custom-crane-modal .modal-header {
    background-color: var(--deep-blue);
    color: var(--white);
    padding: 1.2rem 1.5rem;
    border: none;
    flex-shrink: 0; /* Keeps header fixed at top */
}

/* 4. Fix the Invisible Close Button */
.custom-crane-modal .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 1;
    border: none;
    width: 20px;
    height: 20px;
}


/* 3. Internal Scroll: Keeps header and footer visible */
.custom-crane-modal .modal-body {
    overflow-y: auto;
	background-color: var(--cool-white);
    padding: 25px !important;
}

/* Image Column Alignment */
.custom-crane-modal .col-md-5 img {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
    background: #f8f9fa;
    border: 1px solid #eee;
}

/* Text & Labels Alignment */
.modal-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--deep-blue);
    font-weight: 800;
    margin-bottom: 10px;
}

.modal-description {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* 5. Two-Column Specs for cleaner alignment */
.modal-spec-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.modal-spec-list li {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    color: #444;
}

.modal-spec-list i {
    color: var(--deep-blue);
    font-size: 0.8rem;
}



/* Mobile Responsive adjustment */
@media (max-width: 768px) {
    .modal-spec-list {
        grid-template-columns: 1fr; /* Back to 1 column on mobile */
    }
}


/* 1. prevent collision by pulling cards over the hero section */
.contact-info-section {
    position: relative;
    z-index: 10;
    margin-top: 30px; /* adjusts how much the cards overlap the hero image */
    padding-bottom: 50px;
	
}

/* 2. center the cards horizontally */
.contact-info-section .container {
    display: flex;
    justify-content: center;
}

.contact-info-section .row {
    display: flex;
    justify-content: center; /* centers cards within the row */
    width: 100%;
	gap: 15px;
    max-width: 1100px; /* limits total width to keep cards grouped */
}

/* 3. styling the individual cards */
.contact-card {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* adds the shadow you requested */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
	width: 350px;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); /* stronger shadow on hover */
}

.contact-card i {
    font-size: 2rem;
    color: #0056b3; /* matches your header/logo theme */
    margin-bottom: 15px;
    display: block;
}

.contact-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

/* main section styling */
.contact-form-section {
    background-color: #f8f9fa;
    padding: 80px 0;
}

/* ensures the row has no gaps and elements stretch to equal height */
.contact-form-section .row.g-0 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; 
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
}

/* left column: image styling */
.contact-image-wrapper {
    height: 100%;
    width: 100%;
}

.contact-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* prevents image distortion */
    min-height: 550px; /* ensures a good height on desktop */
}

/* mobile stack adjustment */
@media (max-width: 991px) {
    .contact-image-wrapper img {
        height: 300px; /* shorter image on mobile so users can see the form quickly */
        min-height: 300px;
    }
}




.map-section {
    width: 100%;
    overflow: hidden;
    line-height: 0; /* removes small white gap at bottom of iframe */
}

.map-responsive iframe {
    width: 100% !important;
    display: block;
}

/* responsive height adjustments */
@media (max-width: 768px) {
    .map-responsive iframe {
        height: 300px; /* shorter map for mobile devices */
    }
}

@media (min-width: 1200px) {
    .map-responsive iframe {
        height: 500px; /* taller map for large desktops */
    }
}

/* gallery grid styling */
.gallery-img-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    height: 280px; /* forces uniform height */
    cursor: pointer;
	margin-bottom: 30px;
}
.gallery-section{
	padding-top: 80px;
}	

.gallery-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* hover overlay */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 86, 179, 0.7); /* matching your deep blue theme */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-overlay i {
    color: #fff;
    font-size: 2rem;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* WhatsApp Float Container */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 35px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999; /* Ensures it stays above all sliders and hero sections */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.whatsapp-float i {
    margin-top: 2px; /* Slight adjustment for icon centering */
}

/* Tooltip (Hidden by default, shown on hover for desktop) */
.wa-tooltip {
    position: absolute;
    right: 75px;
    background-color: #333;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.wa-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
}

/* Hover Effects */
.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.1);
    color: #fff;
}

.whatsapp-float:hover .wa-tooltip {
    opacity: 1;
    visibility: visible;
}

/* --- Responsive Adjustments --- */

/* Tablets & Mobile */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 30px;
    }
    
    .wa-tooltip {
        display: none; /* Hide tooltips on mobile to save screen space */
    }
}

/* Ensure your overlay works correctly */
.gallery-img-container {
    overflow: hidden;
}
.gallery-img-container img {
    transition: transform 0.5s ease;
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-item:hover img {
    transform: scale(1.1);
}


/* Careers Section Styles */
.careers-section {
    background-color: #f8f9fa;
	width:100%;
	display: flex;
    flex-direction: column;
    
	padding-bottom: 80px;
	padding-top: 80px;
}

.job-card-new {
    background: var(--white);
	margin-bottom: 20px; /* Backup gap */
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    padding: 30px;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Visible by default */
    border: 1px solid #eee;
    transition: all 0.3s ease-in-out;
}

.job-card-new:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
    border-color: #00768b;
}

.job-icon {
    width: 60px;
    height: 60px;
    background: rgba(0, 118, 139, 0.1);
    color: var(--deep-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.8rem;
    margin-bottom: 20px;
	margin-left: 0; /* Ensures it stays left-aligned as per your screenshot */
    margin-right: auto;
}



.job-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.job-description {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Fixes for Bullet Points staying inside card */
.job-details-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.job-details-list li {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.job-details-list li i {
    color: #00768b;
    margin-right: 12px;
    font-size: 1.1rem;
}

/* Button Styles */
.job-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    background-color: var(--deep-blue);
    color: var(--white);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.3s;
}

.job-apply-btn:hover {
    background-color: var(--lighe-blue);
    color: var(--deep-blue);
}

/* Mobile Responsive Tweaks */
@media (max-width: 768px) {
    .job-card-new {
        padding: 20px;
    }
    
    .job-title {
        font-size: 1.25rem;
    }
}



/* Customizing the Lightbox close button */
.lb-closeContainer {
    padding-top: 10px;
}

.lb-close {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/contain no-repeat !important;
    opacity: 0.8;
    width: 30px !important;
    height: 30px !important;
    transition: opacity 0.3s;
}

.lb-close:hover {
    opacity: 1;
}

/* Darken the background overlay */
.lightboxOverlay {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

/* Founders Section Styles */
.founders-section {
    background-color: var(--cool-white);
}

.leadership-section-subtitle{
	text-align: center;
	display: block;
    
    color: var(--black); /* Your Deep Blue */
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 50px;
}

.founder-card {
    background: #fff;
    border-radius: 15px;
    overflow: visible; /* allows circle to pop out top */
    cursor: pointer;
    transition: all 0.4s ease;
    border: 1px solid #eee;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    
    /* Layout Logic */
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontally centers everything inside */
    margin-top: 100px;
    padding: 0 25px 40px; 
	min-height: 450px;
}

.founder-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border-color: var(--deep-blue);
}

.founder-img-box {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid var(--deep-blue);
    background: #fff;
    
    /* Center logic without using transform */
    margin-top: -90px; /* pulls half the circle above the card top */
    margin-bottom: 20px; /* space between circle and name */
    
    /* Static positioning */
    position: relative; 
    z-index: 5;
    flex-shrink: 0; /* prevents circle from squeezing */
}

.founder-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* transition removed to stop hover effects on the image itself */
}

/* No hover effect for the box or image */
.founder-card:hover .founder-img-box img {
    transform: none; 
}

.founder-info {
    padding: 25px;
    text-align: center;
}

.founder-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--deep-blue);
    margin-bottom: 5px;
    text-transform: none; /* applying your lowercase preference */
}

.founder-pos {
    font-family: 'Montserrat', sans-serif;
    color: #00768b;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.founder-excerpt {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

.read-more-link {
    display: inline-block;
    margin-top: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--deep-blue);
    font-size: 0.85rem;
}

/* Modal Specific Adjustments for Founders */
#founderModal1 .founder-name, 
#founderModal2 .founder-name {
    font-size: 2rem;
}

.custom-crane-modal .modal-description p {
    font-family: 'Poppins', sans-serif;
    margin-bottom: 15px;
}

/* forces the row to stay side-by-side on screens wider than 768px */
@media (min-width: 768px) {
    .founders-section .row {
        display: flex !important;
        flex-wrap: wrap; /* allows wrapping only on mobile */
    }

    .founders-section .col-md-6 {
        flex: 0 0 50%; /* strictly forces 50% width */
        max-width: 50%;
    }
}

/* ensure the card itself doesn't overflow its container */
.founder-card {
    width: 90%;
    margin-bottom: 150px;
	margin-top: 50px;
    display: flex;
    flex-direction: column;
	height:400px;
}

.founder-img-box {
    width: 180px;           /* fixed width */
    height: 180px;          /* fixed height (must match width for a circle) */
    margin: 20px auto 20px;    /* centers the circle and adds space below */
    border-radius: 50%;     /* makes the container a circle */
    overflow: hidden;       /* clips the image to the circle */
    border: 5px solid var(--deep-blue); /* the border you requested */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.founder-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* ensures the face isn't stretched */
    display: block;
}

/* hover effect for the circle */
.founder-card:hover .founder-img-box {
    transform: scale(1.05);
    border-color: var(--light-blue); /* changes border color on hover */
}