/*
  VHM Tex India - Custom Stylesheet
  This file contains all the custom styles for the website.
*/

body {
    font-family: 'Inter', sans-serif;
    color: #374151; /* Gray-700 */
}

:root {
    --vhm-gold: #C09A3E; 
    --vhm-dark-text: #2C2C2C;
}

/* ==========================================================================
   Navigation & Dropdown - REWRITTEN AND CORRECTED
   ========================================================================== */
.nav-link {
    color: var(--vhm-dark-text);
    transition: color 0.3s ease;
}
.nav-link:hover {
    color: var(--vhm-gold);
}
.nav-link-active { 
    color: var(--vhm-gold); 
    font-weight: 600; /* semibold */
}

.dropdown {
    position: relative;
    display: inline-block;
}

/* Hide the arrow by default */
.dropdown .fa-chevron-down {
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-1px);
}

/* Show and rotate the arrow ONLY when hovering the parent dropdown container */
.dropdown:hover .fa-chevron-down {
    opacity: 1;
    transform: translateY(0) rotate(180deg);
}
.dropdown:hover .nav-link {
    color: var(--vhm-gold);
}

.dropdown-content {
    display: none;
    position: absolute;
    left: 50%; 
    transform: translateX(-50%);
    background-color: #ffffff;
    min-width: 240px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 50;
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    margin-top: 0; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
    transform: translateY(10px);
    border-top: 3px solid var(--vhm-gold);
}

.dropdown-content a {
    color: var(--vhm-dark-text);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    display: block;
    font-size: 0.875rem;
}

.dropdown-content a:hover {
    background-color: #f3f4f6;
    color: var(--vhm-gold);
}

/* This is the key: only show the menu when hovering the PARENT dropdown div */
.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0s;
}

/* ==========================================================================
   General Page & Component Styles
   ========================================================================== */
.hero-section-video-bg { position: relative; overflow: hidden; color: white; }
#heroVideo { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); object-fit: cover; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: -50; }
.hero-content { position: relative; z-index: 10; }

.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

.btn-primary { background-color: var(--vhm-gold); color: white; transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.btn-primary:hover { background-color: #A98436; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.counter-number { font-size: 2.5rem; font-weight: 700; color: var(--vhm-gold); }
.counter-label { font-size: 0.875rem; color: #4B5563; margin-top: 0.5rem; }

.section-title { color: var(--vhm-dark-text); letter-spacing: -0.5px; }
.section-title::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0px; height: 4px; background-color: var(--vhm-gold); border-radius: 2px; transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.section-title.animate::before { width: 80px; }
.section-title.text-left::before { left: 0; transform: translateX(0); }

.brief-section h3 { color: var(--vhm-gold); }

.social-link { color: #D1D5DB; font-size: 1.5rem; transition: color 0.3s ease, transform 0.3s ease; }
.social-link:hover { color: var(--vhm-gold); transform: scale(1.1); }

.pre-footer { background-color: #f3f4f6; }
.pre-footer-heading { color: var(--vhm-dark-text); }
.pre-footer-link { display: block; margin-bottom: 0.5rem; color: #4B5563; transition: color 0.3s ease; }
.pre-footer-link:hover { color: var(--vhm-gold); }

/* ANIMATION & SERVICES PAGE STYLES */
.animate-on-scroll { opacity: 0; transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in-up { transform: translateY(30px); }
.slide-in-left { transform: translateX(-50px); }
.slide-in-right { transform: translateX(50px); }
.is-visible { opacity: 1; transform: none; }

.service-feature-icon { background-color: #f3f4f6; color: var(--vhm-gold); border-radius: 50%; padding: 0.75rem; font-size: 1.25rem; flex-shrink: 0; }

.sub-nav { background-color: #f9fafb; border-bottom: 1px solid #e5e7eb; position: sticky; top: 104px; z-index: 40; }
.sub-nav-link { color: #6b7280; transition: color 0.3s, border-color 0.3s; border-bottom: 3px solid transparent; }
.sub-nav-link:hover { color: var(--vhm-dark-text); }
.sub-nav-link.active { color: var(--vhm-gold); border-bottom-color: var(--vhm-gold); }

.tabs-container .tab-button { color: #6b7280; transition: color 0.3s, border-color 0.3s; border-bottom: 3px solid transparent; padding-bottom: 0.5rem; }
.tabs-container .tab-button.active { color: var(--vhm-gold); border-bottom-color: var(--vhm-gold); }

.tab-content { display: none; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.tab-content.active { display: block; animation: fadeInUp 0.5s ease-out; }

.gateway-card { position: relative; overflow: hidden; 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); transition: transform 0.4s ease, box-shadow 0.4s ease; }
.gateway-card:hover { transform: scale(1.03); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.gateway-card img { transition: transform 0.4s ease; }
.gateway-card:hover img { transform: scale(1.1); }
.gateway-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0) 50%); }
.gateway-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; color: white; }