/* ==========================================================================
   CSS Variables & Configuration
   ========================================================================== */
:root {
    --primary: #178D8A;       /* Teal */
    --accent: #B52126;        /* Red */
    --text-main: #222222;     /* Dark Text */
    --bg-white: #FFFFFF;      /* White */
    --bg-light: #F8FAFB;      /* Light Gray/Blue */
    --border-color: #E8ECEF;  /* Subtle Borders */
    
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --border-radius: 12px;
    --transition-speed: 0.3s;
}

/* ==========================================================================
   Base Styles & Resets
   ========================================================================== */
html, body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-main);
}

.text-teal { color: var(--primary) !important; }
.bg-teal { background-color: var(--primary) !important; }
.text-accent { color: var(--accent) !important; }
.bg-accent { background-color: var(--accent) !important; }
.bg-light-custom { background-color: var(--bg-light) !important; }

.font-small { font-size: 0.85rem; letter-spacing: 0.5px; }
.tracking-wide { letter-spacing: 1.5px; }
.py-section { padding-top: 100px; padding-bottom: 100px; }
.rounded-custom { border-radius: var(--border-radius) !important; }
.max-w-700 { max-width: 700px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    font-family: var(--font-heading);
    transition: all var(--transition-speed) ease;
}

.btn-accent {
    background-color: var(--accent);
    color: var(--bg-white);
    border: none;
}
.btn-accent:hover {
    background-color: #941B1F; /* Darker Red */
    color: var(--bg-white);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(181, 33, 38, 0.3);
}

.btn-teal {
    background-color: var(--primary);
    color: var(--bg-white);
    border: none;
}
.btn-teal:hover {
    background-color: #12726F;
    color: var(--bg-white);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(23, 141, 138, 0.3);
}

.btn-outline-light:hover {
    color: var(--text-main);
    transform: translateY(-2px);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.navbar {
    padding: 0 0 2.5rem 0;
    transition: all 0.4s ease-in-out;
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    padding: 1rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

.navbar-dark-text .nav-link { color: var(--text-main) !important; }
.navbar-dark-text .navbar-brand { color: var(--text-main) !important; }
.navbar-dark-text .navbar-toggler i { color: var(--text-main) !important; }

.navbar-brand { font-family: var(--font-heading); font-size: 1.5rem; color: var(--bg-white); transition: color 0.3s; }

/* 1. Ensure the parent container allows taller images */
.navbar-brand.vd-brand {
position: relative;
    z-index: 1;
}

/* 2. Create the white block behind the logo */
.navbar-brand.vd-brand::before {
    content: "";
    position: absolute;
    /* Adjust these negative values to match your navbar's top/bottom padding */
    top: -30px;      
    bottom: -10px;   
    right: -24px;    /* Controls how much white space extends to the right of the logo */
    left: -24px;    /* Stretches White block to the left edge of the browser */
    background-color: var(--bg-white);
    z-index: -1;
    transition: all 0.4s ease-in-out;
}

/* 3. Add a premium drop-shadow and rounded corner when at the top (dark hero) */
.navbar:not(.scrolled) .navbar-brand.vd-brand::before {
    border-radius: 12px; /* Gives the bottom-right corner an elegant curve */
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.15); /* Soft shadow over the hero image */
}

/* 4. Adjust the block seamlessly when the user scrolls down and the whole navbar turns white */
.navbar.scrolled .navbar-brand.vd-brand::before {
    border-radius: 0;
    box-shadow: none;
    /* When scrolled, the navbar padding shrinks, so we adjust the block to match */
    top: -16px;
    bottom: -16px;
}

/* 2. Base Logo Height (Desktop / Unscrolled) */
.navbar .vd-logo {
    height: 130px !important;       /* 👈 Adjust your preferred desktop height here */
    max-height: none !important;   /* Prevents Bootstrap from capping the image size */
    width: auto;
    object-fit: contain;
    transition: height var(--transition-speed) ease;
}

/* 3. Logo Height when Navbar Scrolls Down */
.navbar.scrolled .vd-logo {
    height: 90px !important;       /* 👈 Adjust scrolled height here */
}

/* Show Light Logo, Hide Dark Logo by default */
.logo-light { display: inline-block; }
.logo-dark { display: none; }

/* Switch Logos on Scroll */
.navbar.scrolled .logo-light {
    display: none !important;
}

.navbar.scrolled .logo-dark {
    display: inline-block !important;
}


.nav-link { color: rgba(255,255,255,0.8); transition: color 0.3s; font-size: 0.95rem; margin: 0 0.5rem; position: relative;}
.nav-link:hover { color: var(--bg-white); }
.nav-link.active { color: var(--primary) !important; font-weight: 600;}
.navbar.scrolled .nav-link.active { color: var(--accent) !important; }

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
    min-height: 100vh;
    background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    position: relative;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(23, 141, 138, 0.9) 0%, rgba(34, 34, 34, 0.8) 100%);
}

/* ==========================================================================
   Components (Cards, Shadows, Icons)
   ========================================================================== */
.shadow-soft { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important; }
.shadow-hover { transition: all var(--transition-speed) ease; }
.shadow-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
}

.icon-box {
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
}
.bg-teal-subtle { background-color: rgba(23, 141, 138, 0.1) !important; }
.bg-success-subtle { background-color: rgba(25, 135, 84, 0.1) !important; }

/* Custom Tabs for About */
.custom-tabs .nav-link {
    color: var(--text-main); border-radius: 50px; padding: 0.5rem 1.5rem;
    font-weight: 500; border: 1px solid transparent; background: transparent;
}
.custom-tabs .nav-link.active {
    background-color: rgba(23, 141, 138, 0.1); color: var(--primary);
    border-color: rgba(23, 141, 138, 0.2);
}

/* Projects Table */
.project-table {
    border-collapse: separate; border-spacing: 0 10px;
}
.project-table tbody tr {
    transition: all 0.2s; cursor: pointer;
}
.project-table tbody tr:hover {
    background-color: var(--bg-light); transform: scale(1.01);
}
.project-table td, .project-table th { border: none !important; }

/* Team Members Section  */

/* ==========================================================================
   Team Section
   ========================================================================== */
.team-card {
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
}

/* Passport Frame Container */
.team-avatar-wrapper {
    width: 130px;
    height: 130px;
    position: relative;
    padding: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, rgba(23, 141, 138, 0.2) 100%);
    box-shadow: 0 8px 20px rgba(23, 141, 138, 0.15);
}

/* Image inside passport frame */
.team-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--bg-white);
}


/* Contact Form */
.form-control, .form-select {
    border-radius: 8px; padding: 0.8rem 1rem; transition: all 0.3s;
}
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(23, 141, 138, 0.25);
    border-color: var(--primary);
}

/* ==========================================================================
   Animations & Micro-interactions
   ========================================================================== */
.reveal {
    opacity: 0; transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.fade-up { transform: translateY(40px); }
.fade-left { transform: translateX(40px); }
.fade-right { transform: translateX(-40px); }

.reveal.active { opacity: 1; transform: translate(0, 0); }

/* Scroll Progress Bar */
.scroll-progress-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 1050;
    background: transparent;
}
.scroll-progress-bar {
    height: 100%; width: 0%; background: var(--accent);
}

/* Back to Top */
#backToTop {
    position: fixed; bottom: 30px; right: 30px; z-index: 99;
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.3s; transform: translateY(20px);
}
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* Footer Links */
.footer-links a, .social-link { transition: color 0.2s; }
.footer-links a:hover, .social-link:hover { color: var(--primary) !important; }

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (max-width: 991.98px) {
    .navbar { background-color: var(--bg-white); padding: 1rem 0; }
    .navbar-brand { color: var(--text-main); }
    .nav-link { color: var(--text-main); padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);}
    .navbar-toggler i { color: var(--text-main); }
    .py-section { padding-top: 60px; padding-bottom: 60px; }
    .navbar-brand.vd-brand::before {
        display: none !important;
    }
    .navbar .vd-logo {
        height: 45px !important;   /* 👈 Adjust mobile height here */
    }
    .logo-light { display: none !important; }
    .logo-dark { display: inline-block !important; }
    /* Team Card Responsive Adjustments */
    .team-card {
        padding: 1.75rem 1.25rem !important;
    }
    
    .team-avatar-wrapper {
        width: 110px;
        height: 110px;
    }
}