/* GLOBAL & FONTS */
body { 
    font-family: 'Montserrat', sans-serif; 
    color: #1a202c; 
    background: #ffffff; 
    scroll-behavior: smooth; 
    overflow-x: hidden; 
}

/* MOBILE MENU LOGIC */
#mobile-menu {
    transition: transform 0.3s ease-in-out;
}
.menu-hidden {
    transform: translateX(100%);
}
.menu-visible {
    transform: translateX(0%);
}

/* HERO SECTION - 100% CLEAR (NO FADE) */
.hero-section { 
    background:url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?auto=format&fit=crop&q=80&w=2000'); 
    background-size: cover; 
    background-position: center;
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    position: relative;
}

/* overlay layer */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(127, 126, 126, 0.5); /* controls fade */
}

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

.animate-hero {
    animation: fadeInUp 1s ease-out forwards;
}

/* Fix visibility: Ensure text is crisp white on dark bg */
.hero-title {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    color: #ffffff !important;
}

.hero-subtitle {
    color: #cbd5e1 !important; /* Lighter Slate for readability */
}

/* ANIMATIONS */
.reveal { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: all 0.6s ease-out; 
}
.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}

/* FORM SCALING */
input, select, textarea { 
    border: 2px solid #f1f5f9 !important; 
    padding: 1rem !important; 
    border-radius: 0.75rem !important; 
    font-size: 16px !important; 
    width: 100%;
}

/* 1. Force the phone wrapper to match standard input behavior */
.iti { 
    width: 100% !important; 
    display: block !important; 
    align-items: center;
}

/* 2. Standardize the flex containers to prevent "1 level down" shifts */
.form-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligns both inputs to the bottom of the label area */
}

/* 3. Ensure the height of labels is identical */
.form-label {
    height: 20px; /* Fixed height prevents alignment drift */
    display: block;
}

/* 2. Ensure both containers in the grid have the same vertical baseline */
.input-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Keeps the inputs on the same horizontal line */
    height: 100%;
}

/* 3. Adjust the flag dropdown so it doesn't shift the input box */
.iti__flag-container {
    padding-left: 10px;
}