/* ========================================================================
   PRIVO TECHNOLOGIES STYLESHEET
   Documented and optimized CSS for the Privo Technologies website
   ======================================================================== */

/* ========================================================================
   1. GLOBAL RESET & BASE STYLES
   ======================================================================== */

* {
    margin: 0;               /* Remove default margins from all elements */
    padding: 0;              /* Remove default padding from all elements */
    box-sizing: border-box;  /* Include padding and border in element's total width/height */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Professional, readable font stack */
    line-height: 1.6;        /* Comfortable line spacing for readability */
    color: #333;             /* Dark gray text (not pure black for easier reading) */
    padding-top: 80px;       /* Space for fixed header at top */
    background-color: white; /* White background for main content */
}

/* Container - Centers content and constrains max width on large screens */
.container {
    max-width: 1200px;      /* Maximum width prevents content from being too wide on large monitors */
    margin: 0 auto;         /* Centers the container horizontally */
    padding: 0 20px;        /* Horizontal padding prevents content from touching screen edges */
}
/* ======================================================================== */
/* ======================================================================== */


/* ========================================================================
   2. HEADER & NAVIGATION
   ======================================================================== */

/* Fixed header - stays at top of page when scrolling */
header {
    background: white;      /* White background for clean, modern look */
    color: #333;            /* Dark text color */
    padding: 0.5rem 0;      /* Small vertical padding to keep header compact */
    position: fixed;        /* Stays fixed at top when scrolling */
    width: 100%;            /* Full width of viewport */
    top: 0;                 /* Positioned at very top */
    z-index: 1000;          /* Stays above all other content */
}

/* Navigation container - flexbox for horizontal layout */
nav {
    display: flex;                  /* Flexbox layout */
    justify-content: space-between; /* Logo on left, menu on right */
    align-items: center;            /* Vertically center items */
}

/* Logo styles */
.logo {
    font-size: 1.8rem;         /* Large text for logo */
    font-weight: bold;         /* Bold weight */
    color: white;              /* White text */
    text-decoration: none;     /* Remove underline from link */
    background: white;         /* White background */
    padding: 0.5rem 1rem;      /* Padding around logo */
    border-radius: 8px;        /* Rounded corners */
    margin-left: 0px;          /* No left margin */
}

/* Navigation links container */
.nav-links {
    display: flex;    /* Horizontal layout */
    list-style: none; /* Remove bullet points */
    gap: 2rem;        /* Space between each link */
}

/* Navigation link styles */
.nav-links a {
    color: #1e40af;        /* Blue color for links */
    text-decoration: none; /* Remove underline */
    font-weight: 500;      /* Medium weight */
    transition: color 0.3s;/* Smooth color change on hover */
    font-size: 1.2rem;     /* Larger font for readability */
}

/* Link hover effect */
.nav-links a:hover {
    color: #ff6b35; /* Orange color on hover */
}

/* Active/current page indicator */
.nav-links a.active {
    color: #ff6b35;                 /* Orange color */
    border-bottom: 2px solid #ff6b35; /* Orange underline */
}

/* Mobile menu toggle button (hamburger icon) */
.menu-toggle {
    display: none;          /* Hidden on desktop */
    background: none;       /* No background */
    border: none;           /* No border */
    color: #1e40af;         /* Blue color to match nav links */
    font-size: 1.5rem;      /* Large size for easy tapping */
    cursor: pointer;        /* Pointer cursor on hover */
    padding: 0.5rem;        /* Padding for larger tap target */
}
/* ======================================================================== */
/* ======================================================================== */


/* ========================================================================
   3. PAGE HEADERS & HERO SECTIONS
   ======================================================================== */

/* Standard page header - gradient blue background */
.page-header {
    background: linear-gradient(135deg, #1e40af 0%, #60a5fa 100%); /* Blue gradient */
    color: white;          /* White text */
    padding: 140px 0 60px; /* Large top padding, moderate bottom */
    text-align: center;    /* Center all text */
}

.page-header h1 {
    font-size: 3rem;          /* Large title */
    margin-bottom: 1rem;      /* Space below title */
    animation: fadeInUp 1s ease; /* Fade in animation */
}

.page-header p {
    font-size: 1.3rem;              /* Larger subtitle text */
    max-width: 800px;               /* Constrain width for readability */
    margin-left: auto;              /* Center horizontally */
    margin-right: auto;             /* Center horizontally */
    animation: fadeInUp 1s ease 0.2s; /* Fade in with slight delay */
    animation-fill-mode: both;      /* Maintain animation end state */
}

/* Animated pipeline banner - used on most pages */
.page-header.pipeline-banner-animated {
    background: linear-gradient(90deg, #0a2463 0%, #1e5fa8 50%, #ff6b35 100%); /* Blue-orange gradient */
    position: relative;  /* For absolute positioning of child elements */
    overflow: hidden;    /* Hide overflow from animated elements */
    margin-top: 0px;     /* No top margin */
    padding: 80px 0 180px; /* Vertical padding */
}

/* Animated pathway background elements */
.pathway {
    position: absolute;          /* Positioned absolutely within banner */
    width: 100%;                 /* Full width */
    height: 100%;                /* Full height */
    display: flex;               /* Flexbox layout */
    align-items: center;         /* Vertically center */
    justify-content: space-around; /* Evenly space stages */
    padding: 0 10%;              /* Horizontal padding */
    z-index: 1;                  /* Behind text content */
}

/* Individual stage circles in pathway */
.stage {
    width: 80px;              /* Circle size */
    height: 80px;             /* Circle size */
    border-radius: 50%;       /* Makes it circular */
    border: 3px solid rgba(255, 183, 77, 0.5); /* Semi-transparent orange border */
    background: rgba(255, 107, 53, 0.2);       /* Semi-transparent orange fill */
    position: relative;       /* For positioning connecting lines */
    animation: stagePulse 2s ease-in-out infinite; /* Pulsing animation */
}

/* Pulsing animation for pathway stages */
@keyframes stagePulse {
    0%, 100% {
        opacity: 0.3;     /* Faded */
        transform: scale(1); /* Normal size */
    }
    50% {
        opacity: 0.6;     /* More visible */
        transform: scale(1.1); /* Slightly larger */
    }
}

/* Stagger animation delays for each stage */
.stage:nth-child(1) { animation-delay: 0s; }
.stage:nth-child(2) { animation-delay: 0.4s; }
.stage:nth-child(3) { animation-delay: 0.8s; }
.stage:nth-child(4) { animation-delay: 1.2s; }

/* Connecting lines between stages */
.stage::after {
    content: '';         /* Creates a pseudo-element */
    position: absolute;  /* Positioned relative to stage */
    right: -80px;        /* Positioned to the right of stage */
    top: 50%;            /* Vertically centered */
    width: 80px;         /* Width of connecting line */
    height: 3px;         /* Thin line */
    background: linear-gradient(to right, rgba(255, 183, 77, 0.5), rgba(255, 107, 53, 0.3)); /* Gradient line */
    transform: translateY(-50%); /* Center vertically */
}

/* Remove connecting line from last stage */
.stage:last-child::after {
    display: none;
}

/* Ensure banner content appears above animated background */
.page-header.pipeline-banner-animated .container {
    position: relative; /* Creates stacking context */
    z-index: 2;         /* Above pathway animation (z-index 1) */
}

/* White text with shadow for banner */
.page-header.pipeline-banner-animated h1,
.page-header.pipeline-banner-animated p {
    color: white;                   /* White text */
    text-shadow: 0 2px 10px rgba(0,0,0,0.4); /* Shadow for readability */
}

/* Hero section - used on homepage */
.hero {
    background: linear-gradient(135deg, #1e40af 0%, #60a5fa 100%); /* Blue gradient */
    color: white;           /* White text */
    padding: 200px 0 100px; /* Large vertical padding */
    text-align: center;     /* Center text */
}

.hero h1 {
    font-size: 3rem;          /* Large title */
    margin-bottom: 1rem;      /* Space below */
    animation: fadeInUp 1s ease; /* Fade in animation */
}

.hero p {
    font-size: 1.3rem;              /* Larger text */
    margin-bottom: 2rem;            /* Space below */
    max-width: 800px;               /* Constrain width */
    margin-left: auto;              /* Center horizontally */
    margin-right: auto;             /* Center horizontally */
    animation: fadeInUp 1s ease 0.2s; /* Delayed fade in */
    animation-fill-mode: both;      /* Maintain animation state */
}

/* Call-to-action button */
.cta-button {
    background: white;      /* White background */
    color: #1e40af;         /* Blue text */
    padding: 15px 40px;     /* Generous padding */
    border-radius: 30px;    /* Very rounded corners */
    text-decoration: none;  /* No underline */
    font-weight: bold;      /* Bold text */
    display: inline-block;  /* Allows padding and margins */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
    animation: fadeInUp 1s ease 0.4s;            /* Delayed fade in */
    animation-fill-mode: both;                   /* Maintain animation state */
}

/* Button hover effect */
.cta-button:hover {
    transform: translateY(-3px);           /* Lifts up slightly */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* Shadow appears */
}
/* ======================================================================== */
/* ======================================================================== */


/* ========================================================================
   4. CONTENT SECTIONS
   ======================================================================== */

/* Base content section with vertical padding */
.content-section {
    padding: 20px 0; /* Generous vertical padding for breathing room */
}

/* Gray background variant */
.content-section.gray-bg {
    background: #f8fafc; /* Very light gray */
}

/* White background variant */
.content-section.white-bg {
    background: white;
}

/* Section title - centered, large, blue */
.section-title {
    text-align: center;  /* Centered text */
    font-size: 2.5rem;   /* Large font size */
    color: #1e40af;      /* Blue color */
    margin-bottom: 1rem; /* Space below title */
}

/* NOTE: .section-subtitle is UNUSED - can be removed */

/* Content text container - centers and constrains width */
.content-text {
    max-width: 900px;      /* Constrain width for readability */
    margin: 0 auto;        /* Center horizontally */
    text-align: center;    /* Center text */
    font-size: 1.2rem;     /* Larger than body text */
    line-height: 1.8;      /* Extra line spacing */
    color: #475569;        /* Medium gray */
}

.content-text p {
    margin-bottom: 1.5rem; /* Space between paragraphs */
}
/* ======================================================================== */
/* ======================================================================== */


/* ========================================================================
   5. GRID LAYOUTS for Value Cards
   ======================================================================== */

/* Values/cards grid - used on homepage */
.values-grid {
    display: grid;                                  /* CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 2rem;        /* Space between cards */
    margin-top: 3rem; /* Space above grid */
    /* new */
    align-items: stretch;
}

/* Individual value card */
.value-card {
    background: white; /* White background */
    padding: 2rem; /* Internal padding */
    border-radius: 10px; /* Rounded corners */
    text-align: center; /* Center content */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover animation */
    /* new */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card hover effect - lifts and enhances shadow */
.value-card:hover {
    transform: translateY(-5px);              /* Lifts up */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Stronger shadow */
}

/* Icon in value card */
.value-icon {
    font-size: 3rem;     /* Large icon */
    margin-bottom: 1rem; /* Space below */
    color: #3b82f6;      /* Lighter blue */
}

.value-card h3 {
    color: #1e40af;      /* Dark blue headings */
    margin-bottom: 1rem; /* Space below heading */
}
/* New */
.value-card p:first-of-type {
    flex-grow: 1;
}
/* ======================================================================== */
/* ======================================================================== */


/* ========================================================================
   6. PLATFORM & FEATURES
   ======================================================================== */

/* Platform description text */
.platform-description {
    max-width: 900px;    /* Constrain width */
    margin: 0 auto 3rem; /* Center and add bottom margin */
    font-size: 1.2rem;   /* Slightly larger text */
    line-height: 1.8;    /* Extra line spacing */
    color: #475569;      /* Medium gray */
}

/* Platform features grid */
.platform-features {
    display: grid;                                  /* CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 2rem;        /* Space between features */
    margin-top: 3rem; /* Space above grid */
}

/* Individual feature box */
.feature-box {
    background: #f1f5f9;           /* Light gray background */
    padding: 2rem;                 /* Internal padding */
    border-radius: 10px;           /* Rounded corners */
    border-left: 4px solid #3b82f6; /* Blue accent border on left */
}

.feature-box h3 {
    color: #1e40af;      /* Dark blue heading */
    margin-bottom: 1rem; /* Space below heading */
}
/* ======================================================================== */
/* ======================================================================== */


/* ========================================================================
   7. PIPELINE & PRODUCTS
   ======================================================================== */

/* Pipeline introduction text */
.pipeline-intro {
    max-width: 900px;    /* Constrain width */
    margin: 0 auto 3rem; /* Center and add bottom margin */
    text-align: center;  /* Center text */
    font-size: 1.1rem;   /* Slightly larger */
    color: #475569;      /* Medium gray */
    line-height: 1.8;    /* Extra line spacing */
}

/* Pipeline products grid - always 3 columns on desktop */
.pipeline-products {
    display: grid;                      /* CSS Grid */
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 2rem;        /* Space between products */
    margin-top: 3rem; /* Space above grid */
}

/* Individual product card */
.product-card {
    background: white;         /* White background */
    padding: 2.5rem;           /* Internal padding */
    border-radius: 15px;       /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effect */
}

/* Product card hover effect */
.product-card:hover {
    transform: translateY(-5px);              /* Lifts up */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Enhanced shadow */
}

.product-card h3 {
    color: #1e40af;      /* Dark blue */
    font-size: 1.8rem;   /* Large heading */
    margin-bottom: 0.5rem; /* Small space below */
}

/* Product stage badge (e.g., "Phase 3 Clinical Trial") */
.product-stage {
    background: #3b82f6;    /* Blue background */
    color: white;           /* White text */
    padding: 0.5rem 1rem;   /* Padding */
    border-radius: 20px;    /* Very rounded */
    display: inline-block;  /* Allows padding */
    font-size: 0.9rem;      /* Slightly smaller text */
    margin-bottom: 1rem;    /* Space below badge */
}

/* Product description text */
.product-description {
    color: #475569;      /* Medium gray */
    line-height: 1.8;    /* Extra line spacing */
    margin-bottom: 1rem; /* Space below */
}

/* Product statistics section */
.product-stats {
    margin-top: 1.5rem;              /* Space above */
    padding-top: 1.5rem;             /* Internal top padding */
    border-top: 2px solid #f1f5f9;   /* Top border separator */
}

.product-stats p {
    color: #64748b;      /* Gray text */
    margin-bottom: 0.5rem; /* Space between stats */
}

/* Indications list container */
.indications-list {
    background: #f8fafc;  /* Light gray background */
    padding: 2rem;        /* Internal padding */
    border-radius: 10px;  /* Rounded corners */
    margin-top: 2rem;     /* Space above */
}

.indications-list h3 {
    color: #1e40af;      /* Dark blue heading */
    margin-bottom: 1rem; /* Space below */
}

.indications-list ul {
    list-style-position: inside; /* Bullets inside container */
    color: #475569;              /* Medium gray text */
    line-height: 2;              /* Extra spacing between items */
}
/* ======================================================================== */
/* ======================================================================== */


/* ========================================================================
   8. RECOGNITION & PARTNERS
   ======================================================================== */

/* Recognition content container */
.recognition-content {
    max-width: 800px;   /* Constrain width */
    margin: 0 auto 3rem; /* Center and add bottom margin */
    font-size: 1.1rem;  /* Slightly larger text */
    color: #475569;     /* Medium gray */
    line-height: 1.8;   /* Extra line spacing */
}

/* Funding highlight box */
.funding-highlight {
    background: #f1f5f9;  /* Light gray background */
    padding: 1.5rem;      /* Internal padding */
    border-radius: 10px;  /* Rounded corners */
    font-weight: bold;    /* Bold text */
    color: #1e40af;       /* Dark blue text */
    margin-bottom: 2rem;  /* Space below */
}

/* Partner logos container - flexbox layout */
.partners-logos {
    display: flex;           /* Flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    gap: 3rem;               /* Space between logos */
    flex-wrap: wrap;         /* Wrap to new line if needed */
    margin-top: 2rem;        /* Space above */
}

/* Individual partner logo */
.partner-logo {
    font-size: 1.5rem;   /* Large text */
    font-weight: bold;   /* Bold */
    color: #64748b;      /* Gray text */
    padding: 1rem 2rem;  /* Internal padding */
    background: #f8fafc; /* Light background */
    border-radius: 10px; /* Rounded corners */
}
/* ======================================================================== */
/* ======================================================================== */


/* ========================================================================
   9. NEWS SECTION
   ======================================================================== */

/* News grid - responsive card layout */
.news-grid {
    display: grid;                                  /* CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Responsive columns */
    gap: 2rem; /* Space between cards */
}

/* Individual news card */
.news-card {
    background: white;       /* White background */
    border-radius: 10px;     /* Rounded corners */
    overflow: hidden;        /* Hide overflow (for future images) */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effect */
}

/* News card hover effect */
.news-card:hover {
    transform: translateY(-5px);              /* Lifts up */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Enhanced shadow */
}

/* News card content area */
.news-content {
    padding: 2rem; /* Internal padding */
}

/* News date */
.news-date {
    color: #64748b;      /* Gray text */
    font-size: 0.9rem;   /* Smaller text */
    margin-bottom: 0.5rem; /* Small space below */
}

/* News card heading */
.news-card h3 {
    color: #1e40af;      /* Dark blue */
    margin-bottom: 1rem; /* Space below */
    line-height: 1.4;    /* Tighter line height for headings */
}

/* News card paragraph text */
.news-card p {
    color: #475569;      /* Medium gray */
    line-height: 1.6;    /* Extra line spacing */
    margin-bottom: 1rem; /* Space below */
}

/* "Read more" link */
.read-more {
    color: #3b82f6;           /* Blue color */
    text-decoration: none;    /* No underline */
    font-weight: bold;        /* Bold text */
    display: inline-block;    /* Allows transitions */
    transition: color 0.3s;   /* Smooth color change */
}

/* Read more hover effect */
.read-more:hover {
    color: #1e40af; /* Darker blue on hover */
}
/* ======================================================================== */
/* ======================================================================== */


/* ========================================================================
   10. FOOTER
   ======================================================================== */

/* Footer container */
footer {
    background: #1e293b;  /* Dark blue-gray background */
    color: white;         /* White text */
    padding: 60px 0 30px; /* Vertical padding */
}

/* Footer content grid */
.footer-content {
    display: grid;                                  /* CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 3rem;         /* Space between sections */
    margin-bottom: 2rem; /* Space below content */
}

/* Footer section heading */
.footer-section h3 {
    margin-bottom: 1rem; /* Space below heading */
    color: #93c5fd;      /* Light blue */
}

/* Footer list styling */
.footer-section ul {
    list-style: none; /* Remove bullets */
}

.footer-section ul li {
    margin-bottom: 0.5rem; /* Space between list items */
}

/* Footer links */
.footer-section a {
    color: #cbd5e1;         /* Light gray */
    text-decoration: none;  /* No underline */
    transition: color 0.3s; /* Smooth color change */
}

/* Footer link hover effect */
.footer-section a:hover {
    color: white; /* White on hover */
}

/* Footer bottom section (copyright) */
.footer-bottom {
    text-align: center;             /* Center text */
    padding-top: 2rem;              /* Space above */
    border-top: 1px solid #334155;  /* Top border separator */
    color: #94a3b8;                 /* Medium gray text */
}
/* ======================================================================== */
/* ======================================================================== */


/* ========================================================================
   11. ANIMATIONS
   ======================================================================== */

/* Fade in and slide up animation - used throughout site */
@keyframes fadeInUp {
    from {
        opacity: 0;                 /* Starts invisible */
        transform: translateY(30px); /* Starts 30px lower */
    }
    to {
        opacity: 1;               /* Becomes visible */
        transform: translateY(0); /* Moves to normal position */
    }
}


/* ========================================================================
   12. RESPONSIVE DESIGN - MOBILE & TABLET
   ======================================================================== */

/* Styles for screens 768px wide or less (tablets and phones) */
@media (max-width: 768px) {
    /* Show hamburger menu button on mobile */
    .menu-toggle {
        display: block; /* Visible on mobile */
    }

    /* Mobile navigation menu - slides in from left */
    .nav-links {
        position: fixed;        /* Fixed positioning */
        left: -100%;            /* Hidden off-screen to the left */
        top: 60px;              /* Below header */
        flex-direction: column; /* Vertical stacking */
        background-color: white; /* White background */
        width: 100%;            /* Full width */
        text-align: center;     /* Center text */
        transition: 0.3s;       /* Smooth slide animation */
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.1); /* Shadow for depth */
        padding: 2rem 0;        /* Vertical padding */
        gap: 0;                 /* No gap (using margin instead) */
        z-index: 999;           /* Above most content */
    }

    /* Active state - menu slides in */
    .nav-links.active {
        left: 0; /* Slides to visible position */
    }

    /* Spacing for mobile menu items */
    .nav-links li {
        margin: 1.5rem 0; /* Vertical margin between items */
    }

    /* Smaller heading text on mobile */
    .hero h1,
    .page-header h1 {
        font-size: 2rem; /* Reduced from 3rem */
    }

    /* Smaller paragraph text on mobile */
    .hero p,
    .page-header p {
        font-size: 1rem; /* Reduced from 1.3rem */
    }

    /* Single column layout on mobile */
    .pipeline-products,
    .news-grid {
        grid-template-columns: 1fr; /* One column */
    }

    /* Mobile adjustments for pipeline banner */
    .page-header.pipeline-banner-animated {
        margin-top: 50px;      /* Less top margin */
        padding: 50px 0 30px;  /* Less padding */
    }

    /* Smaller banner headings on mobile */
    .page-header.pipeline-banner-animated h1 {
        font-size: 1.5rem; /* Much smaller */
    }

    .page-header.pipeline-banner-animated p {
        font-size: 0.9rem; /* Smaller subtitle */
    }

    /* Smaller pathway stages on mobile */
    .stage {
        width: 50px;   /* Smaller circles */
        height: 50px;  /* Smaller circles */
    }

    /* Adjust connecting lines for smaller stages */
    .stage::after {
        right: -50px;  /* Shorter distance */
        width: 50px;   /* Shorter line */
    }
}

/* Styles for very short screens (e.g., landscape phones) */
@media (max-height: 700px) {
    .page-header.pipeline-banner-animated {
        margin-top: 40px;      /* Even less top margin */
        padding: 40px 0 25px;  /* Even less padding */
    }
}

/* Combined media query: small AND short screens */
@media (max-width: 768px) and (max-height: 700px) {
    .page-header.pipeline-banner-animated {
        margin-top: 35px;      /* Minimal top margin */
        padding: 35px 0 20px;  /* Minimal padding */
    }

    .page-header.pipeline-banner-animated h1 {
        font-size: 1.3rem; /* Extra small heading */
    }
}

/* ======================================================================== */
/* ======================================================================== */
/* END SECTION 12                                                           */
/* ======================================================================== */
/* ======================================================================== */


/* ======================================================================== */
/* ======================================================================== */
/* 13. CONTACT FORM STYLES
/* ======================================================================== */
/* ======================================================================== */
.contact-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    margin-top: 0rem;
}

.contact-form-section,
.contact-info-section {
    background: white;
    /*padding: 2.5rem;*/
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

    .contact-form-section h3,
    .contact-info-section h3 {
        color: #1e40af;
        margin-bottom: 1.5rem;
        font-size: 1.8rem;
    }

.form-group {
    margin-bottom: 1.5rem;
}

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: #1e40af;
        font-weight: 600;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        font-size: 1rem;
        font-family: inherit;
        transition: border-color 0.3s;
    }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: #3b82f6;
        }

    .form-group textarea {
        min-height: 150px;
        resize: vertical;
    }

.submit-button {
    background: #3b82f6;
    color: white;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
}

    .submit-button:hover:not(:disabled) {
        background: #1e40af;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
    }

    .submit-button:disabled {
        background: #94a3b8;
        cursor: not-allowed;
    }

.contact-info-item {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e2e8f0;
}

    .contact-info-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .contact-info-item h4 {
        color: #1e40af;
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
    }

    .contact-info-item p {
        color: #475569;
        line-height: 1.8;
        margin: 0;
    }

    .contact-info-item a {
        color: #3b82f6;
        text-decoration: none;
        transition: color 0.3s;
    }

        .contact-info-item a:hover {
            color: #1e40af;
        }

.message-box {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: none;
}

.success-box {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error-box {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.recaptcha-notice {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr;
    }
}

/* ======================================================================== */
/* ======================================================================== */
/* END SECTION 13                                                           */
/* ======================================================================== */
/* ======================================================================== */




/* ======================================================================== */
/* ======================================================================== */
/* 14. MODAL CONTACT FORM STYLES
/* ======================================================================== */
/* ======================================================================== */
/* ========================================================================
   14. MODAL
   ======================================================================== */

/* Modal overlay — covers full screen */
.modal {
    display: none;
    position: fixed;
    z-index: 2000; /* Above nav (z-index 1000) */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

    /* Active state — flex centering is superior to margin: auto */
    .modal.active {
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.3s ease;
    }

/* Modal content box */
.modal-content {
    background: white;
    border-radius: 15px;
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

/* Modal header bar */
.modal-header {
    background: linear-gradient(135deg, #1e40af 0%, #60a5fa 100%);
    color: white;
    padding: 2rem;
    border-radius: 15px 15px 0 0;
    position: relative;
}

/* Close button */
.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .modal-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
    }

/* Modal title and subtitle */
.modal-name {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    padding-right: 3rem; /* Prevent overlap with close button */
}

.modal-title {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* Modal body */
.modal-body {
    padding: 2rem;
}

.modal-bio {
    color: #475569;
    line-height: 1.8;
    font-size: 1rem;
}

    .modal-bio p {
        margin-bottom: 1rem;
    }

/* Slide up entrance animation */
@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .modal-name {
        font-size: 1.5rem;
    }
}

/* ======================================================================== */
/* ======================================================================== */
/* END SECTION 14                                                           */
/* ======================================================================== */
/* ======================================================================== */






/* ========================================================================
   END OF STYLESHEET
   
   UNUSED CLASSES (can be safely removed):
   - .section-subtitle (defined but never used in HTML)
   
   Note: Some classes extracted by the analyzer (.3s, .5rem) are not 
   actual classes but CSS values that were mistakenly captured.
   ======================================================================== */