#map-container {
        width: 100%;
        height: 360px;
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        border: 1px solid #eee;
      }
      .map-wrap {
        margin-top: 12px;
      }
      .leaflet-tooltip {
        font-weight: 600;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 4px 8px;
      }
      .view-larger-map {
        display: inline-block;
        margin-top: 8px;
        text-decoration: underline;
      }
    :root {
      --accent: #ff9800;
      --accent-hover: #e65100;
      --overlay: linear-gradient(111deg,rgba(255,168,51,0.36) 0%,rgba(255,152,0,0.34) 100%);
      --orange-overlay: rgba(255,152,0,0.32);
      --white: #fff;
      --text: #222;

      /* Tailwind palette replacements */
      --vcloud-orange: #ff7a00;
      --vcloud-dark-orange: #e66f00;
      --vcloud-dark: #0f172a;
      --vcloud-light-gray: #f8fafc;

      /* grays like Tailwind */
      --gray-100: #f3f4f6;
      --gray-200: #e5e7eb;
      --gray-300: #d1d5db;
      --gray-500: #6b7280;
      --gray-600: #4b5563;
    }

    /* === Base resets from your file (kept) === */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      margin: 0;
      font-family: 'Segoe UI', Arial, sans-serif;
      background: #fafafa;
      height: 100%;
      color: #111827;
      scroll-behavior: smooth;
    }

    /* ===== Header (from vcloud(header).txt) ===== */
    header {
position: relative;
--orange-color: #f5821f;
background: white;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Orange bar - full width at top */
.orange-bar {
width: 100%;
height: 60px;
background: var(--orange-color);
display: flex;
align-items: center;
padding: 0 20px;
flex-direction: row-reverse;
overflow: visible;
}

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

.contact-section {
display: flex;
align-items: center;
gap: 40px;
flex: 1;
margin-top: 8px;
}

.contact-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
font-size: 15px;
font-weight: 500;
}

.contact-item span {
color: white;
margin-left: 6px;
}

.contact-item i {
font-size: 15px;
color: white;
width: 18px;
text-align: center;
margin-right: 6px;
}

.social-section {
display: flex;
gap: 8px;
}

.social-item {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
color: white;
text-decoration: none;
font-size: 14px;
transition: background 0.3s ease;
}

.social-item:hover {
background: rgba(255, 255, 255, 0.25);
}

/* Main header content below orange bar */
.header-main {
display: flex;
align-items: center;
padding: 15px 20px;
gap: 20px;
}

/* Logo section on the left */
.logo-section {
flex-shrink: 0;
}

.logo-section img {
height: 75px;
width: auto;
max-width: 210px;
object-fit: contain;
display: block;
}

/* Info blocks */
.info-blocks {
display: flex;
gap: 20px;
align-items: center;
margin-left: 15px;
}

.info-block {
text-align: left;
}

.info-title {
font-size: 17px;
font-weight: 700;
color: var(--orange-color);
line-height: 1.1;
margin-bottom: 2px;
display: block;
}

.info-subtitle {
font-size: 12px;
color: #666;
line-height: 1.1;
display: block;
}

/* Navigation area */
.nav-area {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
gap: 15px;
}

.main-nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 12px;
align-items: center;
/* Optional: ensures nav links are vertically centered within this container */
min-height: 75px; 
}

.nav-item {
position: relative;
display: flex;
align-items: center;
/* Setting consistent vertical alignment within the main-nav */
height: 100%; 
}

/* --- CRITICAL FIX FOR VERTICAL ALIGNMENT --- */
.nav-link {
    display: flex;
    flex-direction: column; 
    align-items: center;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    /* Use fixed vertical padding to enforce consistent height */
    padding: 8px 8px 4px 8px; 
    /* Set a minimum fixed height to ensure all links occupy the same vertical space */
    min-height: 65px; 
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 80px;
}

.nav-link i {
    font-size: 20px;
    color: var(--orange-color);
    margin-bottom: 2px;
    margin-right: 0;
}

.nav-link:hover {
color: #1a4175;
background: #f8f9fa;
}

.nav-link:hover i {
color: #1a4175;
}

.nav-link.dropdown::after {
content: '\f078';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 8px;
color: #999;
margin-left: 0;
margin-top: 2px;
}

/* Dropdown menus - Adjusted for fixed height links */
.dropdown-menu {
position: absolute;
top: 100%; /* Setting to 100% should now work perfectly as the parent link has a fixed height */
left: 0;
background: white;
min-width: 200px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: 1px solid #e0e0e0;
list-style: none;
margin: 0;
padding: 8px 0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
}

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

.dropdown-item {
position: relative;
}

.dropdown-link {
display: block;
padding: 10px 15px;
color: #333;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
}

.dropdown-link:hover {
background: #f8f9fa;
color: var(--orange-color);
padding-left: 20px;
}

.dropdown-link.has-submenu::after {
content: '\f105';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 10px;
color: #999;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
}

/* Submenu */
.submenu {
position: absolute;
top: 0;
left: 100%;
background: white;
min-width: 200px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: 1px solid #e0e0e0;
list-style: none;
margin: 0 0 0 8px;
padding: 8px 0;
z-index: 1001;
opacity: 0;
visibility: hidden;
transform: translateX(-10px);
transition: all 0.3s ease;
}

.dropdown-item:hover .submenu {
opacity: 1;
visibility: visible;
transform: translateX(0);
}

.submenu-link {
display: block;
padding: 10px 15px;
color: #333;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
}

.submenu-link:hover {
background: #f8f9fa;
color: var(--orange-color);
padding-left: 20px;
}

/* CTA Button */
.cta-btn {
display: flex;
align-items: center;
justify-content: center;
background: var(--orange-color);
color: white;
text-decoration: none;
font-size: 15px;
font-weight: 600;
padding: 12px 18px;
border-radius: 5px;
white-space: nowrap;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(245, 130, 31, 0.3);
}

.cta-btn:hover {
background: #e56f0a;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(245, 130, 31, 0.4);
}

.cta-btn i {
margin-left: 8px;
font-size: 13px;
}

/* Responsive Design */
@media (max-width: 1200px) {
.header-main {
padding: 15px 15px;
gap: 15px;
}
.info-blocks {
gap: 15px;
margin-left: 10px;
}
.nav-area {
gap: 10px;
}
.main-nav {
gap: 10px;
}
.nav-link {
min-width: 75px;
font-size: 14px;
}
.nav-link i {
font-size: 18px;
}
}

@media (max-width: 992px) {
.info-blocks {
display: none;
}
.header-main {
gap: 15px;
}
.main-nav {
gap: 8px;
}
.nav-link {
font-size: 14px;
padding: 8px 6px;
min-width: 70px;
}
.nav-link i {
font-size: 18px;
}
}

@media (max-width: 768px) {
.orange-bar {
height: auto;
min-height: 42px;
padding: 10px 15px;
}
.top-bar-content {
flex-direction: column;
gap: 10px;
}
.contact-section {
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.contact-item {
font-size: 14px;
}
.contact-item i {
font-size: 14px;
}
.header-main {
flex-direction: column;
padding: 15px;
gap: 15px;
}
.logo-section {
width: 100%;
text-align: center;
}
.logo-section img {
height: 65px;
margin: 0 auto;
}
.nav-area {
width: 100%;
flex-direction: column;
gap: 10px;
}
.main-nav {
flex-direction: column;
width: 100%;
gap: 8px;
}
.nav-item {
width: 100%;
}
.nav-link {
width: 100%;
justify-content: center;
padding: 10px;
font-size: 15px;
flex-direction: row;
}
.nav-link i {
margin-bottom: 0;
margin-right: 8px;
}
.cta-btn {
width: 100%;
padding: 12px 20px;
}
.dropdown-menu,
.submenu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
margin: 5px 0;
display: none;
top: auto;
}
.nav-item:hover .dropdown-menu,
.dropdown-item:hover .submenu {
display: block;
}
.dropdown-link, .submenu-link {
font-size: 14px;
padding: 8px 12px;
}
}

@media (max-width: 480px) {
.orange-bar {
padding: 8px 10px;
}
.contact-item {
font-size: 13px;
}
.contact-item i {
font-size: 13px;
}
.social-item {
width: 24px;
height: 24px;
font-size: 13px;
}
.logo-section img {
height: 55px;
}
.nav-link {
font-size: 14px;
padding: 8px;
}
.nav-link i {
font-size: 16px;
}
.cta-btn {
font-size: 14px;
}
}
    /* ===== HERO (kept) ===== */
    .hero { position:relative; height:93vh; min-height:220px; max-width:100vw; overflow:hidden; display:flex; align-items:center; justify-content:flex-start; background:#121212; }
    .carousel-bg { position:absolute; width:100%; height:100%; object-fit:cover; top:0; left:0; z-index:0; opacity:0; transition:opacity 1s, transform 6.5s cubic-bezier(.32,.04,.45,.98); }
    .carousel-bg.active { opacity:1; animation: hero-zoom 13s linear alternate infinite; }
    @keyframes hero-zoom { 0% { transform: scale(1); } 100% { transform: scale(1.07);} }
    .hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; background: var(--overlay); opacity: 1; pointer-events:none; }
    .hero-main-container { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: flex-start; z-index: 2; padding: 0; margin: 0; }
    .hero-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin-left: 52px; width: 700px; opacity: 0; transform: translateY(60px); transition: opacity 0.76s cubic-bezier(.62,.18,.36,.87), transform 0.76s cubic-bezier(.62,.18,.36,.87); }
    .hero-inner.active { opacity: 1; transform: translateY(0); }
    .hero-badge { color: var(--accent); font-size: 1.06rem; font-weight: 600; letter-spacing: 1px; margin-bottom: 5px; display:block; line-height: 1.18; opacity: 0.87; }
    .hero-title { font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 4rem; font-weight: 700; text-align: left; letter-spacing: 0; line-height: 1.08; color: #fff; margin: 0 0 22px 0; text-shadow: 0 3px 18px #222a; max-width: 900px; width: 100%; }
    .hero-desc { font-size: 1.09rem; color: #fff; margin: 0 0 30px 0; opacity: 0.94; line-height: 1.15; text-align: left; font-weight: 400; max-width: 600px; text-shadow: 0 2px 7px #2222; display: block; }
    .hero-c2a-row { display: flex; flex-direction: row; gap: 24px; margin: 0 0 20px 0; align-items: center; }
    .hero-btn { padding: 13px 32px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 1.13rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 12px rgba(255,168,51,0.14); transition: background 0.20s, box-shadow 0.26s; display: inline-block; letter-spacing: 0.10px; outline: none; }
    .hero-btn:hover { background: var(--accent-hover); box-shadow: 0 0 0 4px rgba(255,168,51,0.12), 0 3px 18px #fda; }
    .hero-link { color: #fff; background: none; border: none; border-radius: 0; font-size: 1.13rem; font-weight: 700; text-decoration: underline; cursor: pointer; margin-left: 14px; padding: 0; outline: none; transition: color 0.18s; }
    .hero-link:hover { color: var(--accent); text-decoration: underline; }
    .carousel-arrows { position: absolute; top: 54%; right: 18px; display: flex; flex-direction: column; z-index: 2; }
    .carousel-arrows button { background: rgba(255,152,0,0.5); border: none; color: #fff; font-size: 1.16rem; margin: 6px 0; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; transition: background 0.18s; }
    .carousel-arrows button:hover { background: var(--accent); color: #fff;}

    /* ===== About / Content (kept) ===== */
    .aboutus-section { background: transparent; padding: 44px 0 34px 0; }
    .aboutus-title { color: var(--accent); text-align: center; margin: 0 0 24px 0; font-size: 1.85rem; font-weight: 700; letter-spacing: 1.2px; line-height: 1.19; }
    .aboutus-container { width: 97vw; max-width: 1300px; margin: 0 auto; }
    .aboutus-content p { color: #222; font-size: 1rem; line-height: 1.7; margin: 0 0 16px 0; text-align: justify; font-weight: 400; }
    .aboutus-highlight { color: var(--accent); font-weight: bold; letter-spacing: .03em; }

    .top-section {text-align: center;padding: 40px 20px 20px;}
    .view-more-btn {background-color: #ff6b00;color: white;border: none;padding: 15px 40px;font-size: 16px;font-weight: 600;border-radius: 8px;cursor: pointer;display: inline-flex;align-items: center;gap: 10px;box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);transition: background-color 0.3s;}
    .view-more-btn:hover {background-color: #e55d00;}
    .container {max-width: 1400px;margin: 0 auto;padding: 30px 40px;}
    .content-wrapper {display: grid;grid-template-columns: 1fr 1fr;gap: 80px;align-items: center;}
    .images-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;}
    .image-large {grid-row: span 2;}
    .image-box { position: relative; width: 100%; }
    .image-box img {width: 100%;height: 100%;object-fit: cover;border-radius: 0;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);}
    .image-box::after { content: ''; position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; background: var(--orange-overlay); border-radius: 0; z-index: 2; }
    .image-large img {height: 600px;}
    .image-small img {height: 285px;}
    .content-section {padding: 20px 0;}
    .label {color: #ff6b00;font-weight: 700;font-size: 14px;text-transform: uppercase;letter-spacing: 1px;margin-bottom: 20px;}
    .main-heading {font-size: 48px;font-weight: 800;color: #0a1f44;line-height: 1.2;margin-bottom: 30px;}
    .tabs {display: flex;gap: 15px;margin-bottom: 30px;}
    .tab-button {background: transparent;border: none;padding: 15px 30px;font-size: 15px;font-weight: 600;color: #666;cursor: pointer;position: relative;transition: all 0.3s;border-radius: 8px 8px 0 0;}
    .tab-button.active {background-color: #ff6b00;color: white;}
    .tab-button.active::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 10px solid #ff6b00; }
    .tab-content{display: none;animation: fadeIn 0.5s;}
    .tab-content.active{display: block;}
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .content-text {color: #555;font-size: 16px;line-height: 1.8;margin-bottom: 30px;}
    .features-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin: 30px 0;}
    .feature-item {display: flex;align-items: center;gap: 12px;}
    .checkmark {width: 24px;height: 24px;background-color: #ff6b00;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
    .checkmark::after {content: '✓';color: white;font-size: 14px;font-weight: bold;}
    .feature-text {color: #333;font-weight: 500;font-size: 15px;}
    .contact-section {display: flex;align-items: center;gap: 40px;margin-top: 5px;}
    .contact-btn {background-color: #ff6b00;color: white;border: none;padding: 18px 35px;font-size: 16px;font-weight: 600;border-radius: 8px;cursor: pointer;display: inline-flex;align-items: center;gap: 10px;box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);transition: background-color 0.3s;}
    .contact-btn:hover {background-color: #e55d00;}
    .phone-section {display: flex;align-items: center;gap: 20px;}
    .phone-icon {width: 60px;height: 60px;background-color: #ff6b00;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
    .phone-icon::before {content: '📞';font-size: 28px;}
    .phone-details {display: flex;flex-direction: column;}
    .phone-label {color: #888;font-size: 12px;font-weight: 600;margin-bottom: 4px;}
    .phone-number {color: #0a1f44;font-size: 22px;font-weight: 800;}
    @media (max-width: 1024px) {
      .content-wrapper {grid-template-columns: 1fr;gap: 50px;}
      .main-heading {font-size: 36px;}
    }
    @media (max-width: 768px) {
      .images-grid {grid-template-columns: 1fr;}
      .image-large {grid-row: span 1;}
      .tabs {flex-direction: column;}
      .contact-section {flex-direction: column;align-items: flex-start;}
      .features-grid {grid-template-columns: 1fr;}
      .main-heading {font-size: 28px;}
    }

    /* ===== Scrolling text (kept) ===== */
    .scrolling-container { width: 100%; overflow: hidden; padding: 40px 0; background-color: #f5f5f5; }
    .scrolling-text { display: inline-flex; white-space: nowrap; animation: scroll-left 10s linear infinite; }
    .text-item { font-size: 80px; font-weight: 900; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(100, 100, 100, 0.3); text-stroke: 2px rgba(100, 100, 100, 0.3); padding: 0 40px; display: inline-flex; align-items: center; gap: 40px; }
    .star { width: 60px; height: 60px; background: radial-gradient(circle, rgba(100, 150, 255, 0.3), rgba(100, 150, 255, 0.1)); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
    @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%);} }
    @media (max-width: 768px) {
      .text-item { font-size: 40px; padding: 0 20px; gap: 20px; }
      .star { width: 30px; height: 30px; font-size: 15px; }
    }

    /* ===== Shared card effects (kept) ===== */
    .card-hover-effect { transition: all 0.3s ease-in-out; transform: translateY(0); }
    .card-hover-effect:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); transform: translateY(-5px); border-color: var(--vcloud-orange); }

    .step-icon { cursor: pointer; transition: all 0.3s ease; }
    .step-icon.active { background-color: var(--vcloud-orange) !important; color: white !important; border-color: var(--vcloud-orange) !important; box-shadow: 0 10px 15px -3px rgba(255, 122, 0, 0.3), 0 4px 6px -2px rgba(255, 122, 0, 0.2); transform: translateY(-2px); }
    .step-span.active { color: var(--vcloud-dark) !important; font-weight: 600; }

    /* ===== Hero intro / testimonials / contact / footer (kept) ===== */
    .hero-intro { padding: 28px 0 6px; text-align: center; background: #fbfbfc; }
    .eyebrow { color: orange; font-weight: 700; letter-spacing: 0.6px; display: block; margin-bottom: 8px; }
    .hero-intro h1 { font-size: 34px; color: #0b2a6b; margin-bottom: 10px; }
    .hero-intro .lead { color: #4b5563; max-width: 900px; margin: 0 auto; line-height: 1.6; }

    .carousel-section { padding: 20px 0; background: #fff; }
    .carousel { position: relative; max-width: 1100px; margin: auto; overflow: hidden; border-radius: 10px; }
    .track-wrap { overflow: hidden; }
    .track { display: flex; }
    .slide { flex: 0 0 33.3333%; padding: 0 8px; box-sizing: border-box; }
    .slide img { width: 100%; height: 380px; object-fit: cover; border-radius: 8px; }
    .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: #fff; color: #ff6600; font-size: 22px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 10; display: flex; align-items: center; justify-content: center; }
    .arrow:hover { background: #ff6600; color: #fff; }
    .prev { left: 10px; } .next { right: 10px; }
    @media (max-width: 768px) { .slide { flex: 0 0 100%; } }

    .section { padding: 42px 0; }
    .testimonials { background: hsl(27, 87%, 52%); color: hsl(216, 75%, 20%); text-align: center; }
    .testimonials .eyebrow { color: #ffffff; }
    .testimonials h2 { font-size: 32px; margin-bottom: 6px; color: hsl(216, 75%, 20%); }
    .testimonials .lead { max-width: 800px; margin: 0 auto 18px; color: hsl(216, 75%, 20%); }
    .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
    .rating { color: orange; }
    .card { background: #ffffff; color: hsl(216, 75%, 20%); padding: 22px; border-radius: 10px; border: 2px solid transparent; transition: transform 0.22s ease, border-color 0.22s ease; text-align: left; min-height: 260px; }
    .rating-and-avatar { display: flex; justify-content: space-between; margin-bottom: 10px; padding-right: 140px; }
    .rating { margin-top: 15px; font-size: 24px; }
    .testimonial-card:hover { transform: translateY(-8px); border-color: hsl(27, 87%, 52%); }
    .testimonial-card strong, .testimonial-card .quote { color: hsl(216, 75%, 20%); }
    .testimonial-card .muted { color: hsl(216, 75%, 35%); }
    .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.12); margin-bottom: 12px; }
    .card:hover, .card.hovered { color: darkblue; }
    .card:hover .quote, .card:hover strong, .card:hover .muted { color: darkblue; }
    .lead { color: black; }
    .quote { font-style: italic; color: black; margin-bottom: 12px; }

    .contact-main { background-color: #fafafa; padding: 20px 0; }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-start; }
    .contact-left .lead, .contact-left h2 { text-align: left; margin-left: 0; margin-right: 0; }
    .contact-info { margin-top: 10px; display: block; }
    .info-row { display: flex; align-items: flex-start; margin-bottom: 25px; }
    .info-row .icon { width: 50px; height: 50px; min-width: 50px; background-color: #0b2a6b; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 20px; font-size: 1.5em; color: #ff6600; }
    .info-row .label { font-weight: bold; color: #0b2a6b; margin-bottom: 3px; font-size: 0.95em; }
    .info-row .value { color: #555; line-height: 1.4; }
    .map-wrap { margin-top: 30px; border-radius: 10px; overflow: visible; /* Allow Leaflet controls to show */
  height: 350px;  position: relative; padding-bottom: 56.25%; height: 0; }
    .map-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
    .view-larger-map { display: inline-block; margin-top: 15px; color: #ff6600; text-decoration: none; font-weight: 600; }
    .view-larger-map:hover { text-decoration: underline; }
    .contact-form { background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
    .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea { width: 100%; padding: 15px; margin-bottom: 15px; border: 1px solid #dcdcdc; border-radius: 5px; font-size: 1em; color: #0b2a6b; transition: border-color 0.3s ease; }
    .contact-form input:focus, .contact-form textarea:focus { border-color: #ff6600; outline: none; }
    .contact-form textarea { min-height: 120px; resize: vertical; }
    .btn-send-request { display: block; width: 100%; padding: 15px; background-color: #0b2a6b; color: #ffffff; border-radius: 5px; font-size: 1.1em; }
    .btn-send-request:hover { background-color: #ff6600; transform: translateY(-2px); }

    .cta.project-section { background-color: #faf8f5; color: #0b2a6b; padding: 20px 0; }
    .cta-inner { display: flex;  gap: 14px; align-items: center; justify-content: space-between; }
    .cta-left { max-width: 58%; text-align: left; }
    .cta-left h2, .cta-left p, .cta-left a { margin: 10px 0; }
    .call .phone { padding: 10px; }
    .cta-right img { width: 350px; height: 350px; object-fit: cover; border-radius: 12px; }
    .btn.outline { display: inline-block; background: #fff; border: 2px solid #ff6600; color: #ff6600; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 700; }
    .btn.outline:hover { background: #ff6600; color: #fff; }

    .site-footer { background: hsl(27, 87%, 52%); color: #ffffff; padding: 26px 0; margin-top: 0px; }
    .footer-links a, .footer-contact .value, .footer-locations p { color: #ffffff; text-decoration: none; display: block; margin: 6px 0; }
    .footer-links a:hover { text-decoration: underline; }
    .site-footer h4, .site-footer strong { color: #ffffff; }
    .copyright { text-align: center; padding-top: 12px; color: #ffffff; }
    .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 18px; max-width: 1100px; margin: 0 auto; align-items: start; padding: 0 10px; }
    .footer-brand img.footer-logo { height: 46px; margin-bottom: 10px; }

    .fade-left { opacity: 0; transform: translateX(-60px); transition: all 0.8s ease; }
    .fade-left.visible { opacity: 1; transform: translateX(0); }

    /* ====== ⬇️ Converted Tailwind Sections (pure CSS) ====== */

    /* Shared section paddings: py-16 md:py-24 + px-4 sm:px-6 lg:px-8 */
    .section-pad { padding-top: 4rem; padding-bottom: 4rem; padding-left: 1rem; padding-right: 1rem; background-color: #fff; }
    @media (min-width: 640px) { .section-pad { padding-left: 1.5rem; padding-right: 1.5rem; } }
    @media (min-width: 1024px) { .section-pad { padding-left: 2rem; padding-right: 2rem; } }
    @media (min-width: 768px) { .section-pad { padding-top: 6rem; padding-bottom: 0.5rem; } }

    /* container max-w-7xl */
    .mw-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }

    /* top row: flex-col md:flex-row justify-between items-start md:items-center mb-12 md:mb-16 */
    .top-flex-row {
      display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
      margin-bottom: 3rem;
    }
    @media (min-width: 768px) {
      .top-flex-row { flex-direction: row; align-items: center; margin-bottom: 4rem; }
    }

    /* heading styles: text-3xl sm:text-4xl font-extrabold text-vcloud-dark ... max-w-2xl */
    .section-h2 {
      font-weight: 800; color: var(--vcloud-dark); letter-spacing: 0; line-height: 1.2; max-width: 42rem;
      font-size: 1.875rem; /* 3xl */
    }
    @media (min-width: 640px) { .section-h2 { font-size: 2.25rem; } } /* 4xl */
    .text-orange { color: var(--vcloud-orange); }

    /* CTA button */
    .btn-orange {
      margin-top: 1.5rem;
      padding: 0.75rem 1.5rem;
      background: var(--vcloud-orange);
      color: #fff; font-weight: 600; border-radius: 0.5rem;
      box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
      border: none; display: inline-flex; align-items: center; transition: background 0.3s;
    }
    @media (min-width: 768px) { .btn-orange { margin-top: 0; } }
    .btn-orange:hover { background: var(--vcloud-dark-orange); }
    .btn-icon { width: 20px; height: 20px; margin-left: 0.5rem; display: inline-block; }

    /* Grid: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 */
    .services-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
    @media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

    /* Card: p-8 bg-white border border-gray-200 rounded-xl shadow-lg */
    .svc-card {
      padding: 2rem; background: #fff; border: 1px solid var(--gray-200); border-radius: 0.75rem;
      box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    }
    .icon-badge {
      display: flex; align-items: center; justify-content: center; height: 56px; width: 56px; border-radius: 9999px;
      background: rgba(255,122,0,0.1); color: var(--vcloud-orange); margin-bottom: 1rem;
    }
    .svc-title { font-size: 1.25rem; font-weight: 700; color: var(--vcloud-dark); margin-bottom: 0.5rem; }
    .svc-desc { color: #6b7280; }

    /* Section bg light gray */
    .bg-light { background: var(--vcloud-light-gray); }

    /* Split grid: grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center */
    .split-grid {
      display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center;
    }
    @media (min-width: 1024px) { .split-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
    /* order adjustments */
    .order-left { order: 2; }
    .order-right { order: 1; }
    @media (min-width: 1024px) { .order-left { order: 1; } .order-right { order: 2; } }

    .big-h2 { font-weight: 800; color: var(--vcloud-dark); letter-spacing: 0; line-height: 1.2; margin-bottom: 2rem; font-size: 2.25rem; }
    @media (min-width: 640px) { .big-h2 { font-size: 3rem; } }

    .img-figure { position: relative; width: 100%; height: 24rem; border-radius: 0.75rem; overflow: hidden;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
    }
    .img-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .img-figure::after { content: ''; position: absolute; inset: 0; background: rgba(15,23,42,0.1); }

    .stacked { display: grid; gap: 2.5rem; }
    @media (min-width: 1024px) { .stacked { padding-left: 2.5rem; } }
    .stacked h3 { font-size: 1.5rem; font-weight: 700; color: var(--vcloud-dark); margin-bottom: 0.5rem; }
    .stacked p { color: var(--gray-600); }

    /* Steps */
    .center { text-align: center; }
    .big-title { font-weight: 800; color: var(--vcloud-dark); letter-spacing: 0; line-height: 1.2; margin-bottom: 4rem; font-size: 2.25rem; }
    @media (min-width: 640px) { .big-title { font-size: 3rem; } }

    .steps-row {
      display: flex; justify-content: center; align-items: flex-start; gap: 0.5rem; position: relative; margin-bottom: 3rem;
    }
    @media (min-width: 640px) { .steps-row { gap: 1rem; } }
    @media (min-width: 1024px) { .steps-row { gap: 2rem; } }
    .steps-row::before {
      content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--gray-200); z-index: 0; display: none;
    }
    @media (min-width: 640px) { .steps-row::before { display: block; } }
    .step-col { display: flex; flex-direction: column; align-items: center; z-index: 10; width: 25%; cursor: pointer; }
    .step-pill {
      padding: 1rem; background: #fff; color: var(--vcloud-orange); border: 1px solid var(--gray-300);
      border-radius: 0.75rem; display: inline-flex; align-items: center; justify-content: center;
    }
    .step-label { margin-top: 0.75rem; font-size: 1.125rem; font-weight: 600; color: #6b7280; }

    .detail-box {
      margin-top: 4rem; background: var(--vcloud-light-gray); padding: 3rem; border-radius: 0.75rem;
      box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
      border-top: 4px solid var(--vcloud-orange); text-align: left;
    }
    .detail-title { font-size: 1.875rem; font-weight: 700; color: var(--vcloud-orange); margin-bottom: 2rem; }
    .detail-grid { display: grid; grid-template-columns: 1fr; gap: 2rem 3rem; }
    @media (min-width: 768px) { .detail-grid { grid-template-columns: repeat(2, 1fr); } }
    .detail-item { display: flex; align-items: flex-start; gap: 0.75rem; }
    .detail-item .check { flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; }
    .detail-item .item-title { font-weight: 600; font-size: 1.125rem; color: var(--vcloud-dark); margin-bottom: 0.25rem; }
    .detail-item .item-desc { color: var(--gray-600); }

    /* Customers grid */
    .customers-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
      background: var(--vcloud-light-gray); padding: 1.5rem; border-radius: 0.75rem;
      box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    }
    @media (min-width: 640px) { .customers-grid { gap: 2rem; } }
    .customer-box {
      padding: 1rem; background: #fff; display: flex; align-items: center; justify-content: center; height: 5rem;
      border: 1px solid #f3f4f6; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .customer-box img { max-height: 100%; max-width: 100%; object-fit: contain; }

    /* Utility */
    .text-xl { font-size: 1.25rem; }
    .text-lg { font-size: 1.125rem; }
    .detail-box {
  margin-bottom: 0 !important;
}

.section-pad {
  padding-top: 0 !important;
}
.top-header .contact-info {
  display: flex !important;
  align-items: center !important;
  gap: 5rem !important; /* increase if you want more space */
}

.top-header .contact-info a,
.top-header .contact-info span {
  display: inline-flex !important;
  align-items: center !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

.top-header .contact-info i {
  margin-right: 6px !important; /* space between icon and text */
}
.section-pad {
  padding-top: 50px !important; /* increase this for more vertical space */
}
.big-title {
  margin-bottom: 4rem !important; /* was 4rem in your code */
}

.steps-row {
  margin-top: 0 !important;
}