/* Main color template */
:root {
    --blue-dark: #0a1b3d;
    /* page base */
    --blue-darker: #071430;
    /* vignette */
    --blue-glow: #3a86ff;
    /* “light” color */
    --ink: #dfe7ff;
    /* body text on dark */
    --ink-dim: #d0d8f0;
    /* Dimmed text color */
    --accent: #61d0ff;
    /* hover/active accents */
    --card: rgba(255, 255, 255, 0.06);
    /* card background */
    --card-border: rgba(255, 255, 255, 0.14);
    /* card border */
    --radius: 16px;
    /* border radius for elements */
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    /* shadow for depth */
}

/* Page background with top-center "light": Sets full height and hidden overflow for x-axis */
html,
body {
    height: 100%;
    /* full viewport height */
    overflow-x: hidden;
    /* Prevents horizontal scrolling */
}

/* Box sizing: Ensures padding and borders are included in element sizes */
*,
*::before,
*::after {
    box-sizing: border-box;
    /* Includes padding/border in width/height */
}

/* Font size: Allows text to scale with user settings, base 100% (usually 16px) */
html {
    font-size: 100%;
    /* Browser default font size */
}

/* Media elements: Ensures images/videos fit containers without overflowing */
img,
video {
    max-width: 100%;
    /* Max width to container */
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    /* Block display for better control */
}

/* Body styles: Sets background, font, line height, and overflow */
body {
    background-color: var(--blue-darker);
    /* Dark background */
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /* System font stack */
    line-height: 1.5;
    /* Comfortable line spacing */
    overflow-x: hidden;
    /* No horizontal overflow */
}

/* HOME section: First viewport, set to full height for one-page view */
.home {
    min-height: 100vh;
    /* Ensure full vertical viewport coverage */
}

/* Logo image: Sets size for logo */
#my-logo {
    height: auto;
    /* Maintain aspect */
    width: 20px;
    /* Fixed width */
}

/* Logo-name container: Flex for side-by-side alignment */
.logo-name {
    display: flex;
    /* Flexbox activation */
    align-items: center;
    /* Vertically center items */
    gap: 8px;
    /* Space between logo and text */
}

/* Logo text: Styles for name text */
#logo-text {
    color: var(--ink);
    /* Light text */
    font-weight: 700;
    /* Bold */
    font-size: 12px;
    /* Small size */
}

/* Header: Sticky at top for persistent navigation */
header {
    position: sticky;
    /* Sticks to top on scroll */
    top: 0;
    /* Top of viewport */
    z-index: 50;
    /* Above other content */
}

/* Header inner: Flex for layout of logo, nav, cta */
#header-inner {
    display: flex;
    /* Activate flexbox */
    align-items: center;
    /* Vertical alignment */
    justify-content: space-between;
    /* Equal spacing */
    padding: 14px clamp(16px, 4vw, 40px);
    /* Responsive padding */
    max-width: 1200px;
    /* Max width */
    margin: 0 auto;
    /* Center */
}

/* Nav list: Flex for horizontal links, styled as pill */
#nav-list {
    display: flex;
    /* Horizontal list */
    list-style: none;
    /* No bullets */
    gap: clamp(16px, 4vw, 36px);
    /* Responsive gap */
    padding: 6px 16px;
    /* Inner padding */
    margin: 0;
    /* No margin */
    background-color: rgba(255, 255, 255, 0.05);
    /* Semi-transparent bg */
    border-radius: 80px;
    /* Pill shape */
}

/* Nav links: Styles for each link */
#nav-list li a {
    display: flex;
    /* Flex for centering */
    align-items: center;
    /* Centers text vertically */
    justify-content: center;
    /* Centers text horizontally */
    color: var(--ink-dim);
    /* Dim text */
    text-decoration: none;
    /* Remove underline */
    font-weight: 600;
    /* Semi-bold */
    font-size: 9px;
    /* Small font */
    padding: 6px 12px;
    /* Padding */
}

/* Nav container: Flex for alignment */
nav {
    display: flex;
    /* Flexbox */
}

/* CTA container: Aligns to end */
.cta {
    justify-content: end;
    /* Right align */
    align-items: center;
    /* Vertical center */
}

/* Email button: Styled button for CTA */
.email-btn {
    text-decoration: none;
    /* No underline */
    color: var(--ink);
    /* Light text */
    font-size: 9px;
    /* Small font */
    appearance: none;
    /* Remove default styles */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Border */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    /* Gradient bg */
    padding: 10px 14px;
    /* Padding */
    border-radius: 999px;
    /* Rounded */
    display: inline-flex;
    /* Inline flex */
    align-items: center;
    /* Center */
}

/* Hero big texts: Responsive font sizes */
#first-big-text,
#second-big-text {
    font-size: clamp(1.8rem, 4vw, 3rem);
    /* Responsive: min 1.8rem, preferred 4vw, max 3rem */
    font-weight: bold;
    /* Bold */
    text-align: center;
    /* Center */
    color: var(--ink);
    /* Light text */
}

/* Smaller text: Responsive */
#smaller-text {
    font-size: clamp(0.9rem, 1.0vw, 1.2rem);
    /* Responsive */
    text-align: center;
    /* Center */
    color: var(--ink-dim);
    /* Dim */
}

/* Download button container: Centers the button */
#download-button {
    display: flex;
    /* Flex */
    justify-content: center;
    /* Center */
    margin: 50px 0px 0px 0px;
    /* Top margin */
}

/* Download resume link: Styled button */
#download-resume {
    display: inline-block;
    /* Inline block */
    padding: 10px;
    /* Padding */
    color: var(--ink);
    /* Text */
    background-color: var(--accent);
    /* Accent bg */
    text-decoration: none;
    /* No underline */
    align-items: center;
    /* Center */
    border-radius: 999px;
    /* Rounded */
    font-size: 12px;
    /* Font */
    font-weight: bold;
    /* Bold */
}

/* Responsive button sizes: For email and download */
.email-btn,
#download-resume {
    font-size: clamp(0.7rem, 1.5vw, 0.9rem);
    /* Responsive */
    padding: clamp(8px, 1.5vw, 12px) clamp(12px, 2vw, 18px);
    /* Responsive padding */
}

/* Hamburger */
.hamburger {
    display: none;
    /* Hidden by default */
    font-size: 24px;
    cursor: pointer;
    color: var(--ink);
    padding: 8px;
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
        /* Show on mobile */
    }

    #navbar {
        display: none;
        position: absolute;
        top: 60px;
        right: 20px;
        background: var(--blue-dark);
        padding: 1rem;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }

    #navbar.active {
        display: flex;
        flex-direction: column;
    }

    #nav-list {
        flex-direction: column;
        gap: 12px;
        background: none;
        border-radius: 0;
    }
}

/* Hero container: Centered content with padding */
.hero {
    max-width: 1100px;
    /* Max width */
    margin: 0 auto;
    /* Center */
    padding: clamp(36px, 8vh, 80px) clamp(16px, 4vw, 40px) 40px;
    /* Reduced top padding to fit viewport */
    text-align: center;
    /* Center text */
    position: relative;
    /* For ::before */
    overflow: hidden;
    /* Prevents light from spilling outside */
}

/* Hero light effect: Pseudo-element for torch beam */
.hero::before {
    content: "";
    /* Required for pseudo-elements */
    position: absolute;
    /* Absolute positioning */
    top: -50px;
    /* Start above the hero section */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Adjust for centering */
    width: 300px;
    /* Width of the beam */
    height: 200px;
    /* Height of the beam */
    background: radial-gradient(circle at center top, rgba(58, 134, 255, 0.5) 0%, transparent 70%);
    /* Radial gradient for torch effect */
    box-shadow: 0 0 50px rgba(58, 134, 255, 0.3);
    /* Soft glow */
    opacity: 0;
    /* Start invisible */
    animation: torch 2.5s ease-out forwards;
    /* Run animation once */
    z-index: 0;
    /* Behind content */
}

/* Torch animation: Fades in and moves down */
@keyframes torch {
    0% {
        opacity: 0;
        /* Start faint */
        transform: translateX(-50%) translateY(0);
        /* Start higher */
    }

    100% {
        opacity: 0.7;
        /* Fade in */
        transform: translateX(-50%) translateY(20px);
        /* Move slightly downward */
    }
}

/* Ensure hero content stays above the glow */
.hero>* {
    position: relative;
    /* Keep content above the ::before layer */
    z-index: 1;
    /* Above the glow */
}

/* Hero paragraph */
.hero p {
    margin: 0 auto;
    max-width: 750px;
    color: var(--ink-dim);
    font-size: clamp(14px, 2.2vw, 18px);
}

/* PROJECTS SLIDER: Bottom of home */
.projects {
    position: relative;
    /* For fades */
    margin: min(2vh, 20px) 0 0;
    /* Reduced to minimize space */
    padding: 12px 0 38px;
    /* Padding */
}

/* Fade edges: For track overflow */
.projects::before,
.projects::after {
    content: "";
    /* Required */
    position: absolute;
    /* Absolute */
    top: 0;
    /* Full height */
    bottom: 0;
    /* Full height */
    width: 8vw;
    /* Width */
    pointer-events: none;
    /* No interaction */
    z-index: 2;
    /* Above track */
}

/* Left fade */
.projects::before {
    left: 0;
    /* Left */
    background: linear-gradient(to right, var(--blue-darker), transparent);
    /* Gradient */
}

/* Right fade */
.projects::after {
    right: 0;
    /* Right */
    background: linear-gradient(to left, var(--blue-darker), transparent);
    /* Gradient */
}

/* Slider head: Title and controls */
.slider-head {
    display: flex;
    /* Flex */
    align-items: center;
    /* Center */
    justify-content: space-between;
    /* Space */
    gap: 12px;
    /* Gap */
    max-width: 1200px;
    /* Max */
    margin: 0 auto 10px;
    /* Bottom margin */
    padding: 0 clamp(16px, 4vw, 40px);
    /* Padding */
}

/* Slider title: Styles */
.slider-title {
    font-size: clamp(18px, 2.6vw, 22px);
    /* Responsive */
    opacity: 0.95;
    /* Slight transparency */
    color: white;
    /* White */
}

/* Track: Grid for cards */
.track {
    display: grid;
    /* Grid */
    grid-auto-flow: column;
    /* Horizontal */
    gap: 16px;
    /* Gap */
    grid-auto-columns: 80%;
    /* Mobile columns */
    overflow-x: auto;
    /* Scroll x */
    scroll-snap-type: x mandatory;
    /* Snap */
    scroll-behavior: smooth;
    /* Smooth scroll */
    padding: 8px clamp(16px, 8vw, 100px);
    /* Padding */
    max-width: 1400px;
    /* Max */
    margin: 0 auto;
    /* Center */
}

/* Card: Project card styles */
.card {
    scroll-snap-align: center;
    /* Snap center */
    width: 350px;
    /* Width */
    background: var(--card);
    /* Bg */
    border: 1px solid var(--card-border);
    /* Border */
    border-radius: var(--radius);
    /* Radius */
    padding: 18px;
    /* Padding */
    min-height: 200px;
    /* Minimum height of card */
    box-shadow: var(--shadow);
    /* Shadow */
    display: flex;
    /* Flex */
    flex-direction: column;
    /* To ensure picture is on top of text */
    gap: 12px;
    /* Gap */
}

/* Card image: Fits cover */
.card img {
    width: 100%;
    /* Full width */
    height: 160px;
    /* Height */
    object-fit: cover;
    /* Cover */
    border-radius: 12px;
    /* Radius */
    background: #0d254f;
    /* Bg fallback */
}

/* Card h3: Title */
.card h3 {
    margin: 0;
    /* No margin */
    font-size: 18px;
    /* Size */
    color: var(--ink-dim);
    /* Color */
}

/* Card p: Description */
.card p {
    margin: 0;
    /* No margin */
    color: var(--ink-dim);
    /* Color */
    font-size: 14px;
    /* Size */
}

/* Card link: View button */
.card a {
    margin-top: auto;
    /* Bottom */
    align-self: start;
    /* Left */
    text-decoration: none;
    /* No underline */
    color: white;
    /* White */
    font-weight: 700;
    /* Bold */
    padding: 8px 12px;
    /* Padding */
    border-radius: 12px;
    /* Radius */
    border: 1px solid rgba(255, 255, 255, 0.22);
    /* Border */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
    /* Gradient */
}

/* Card link hover: Brighter border */
.card a:hover {
    border-color: rgba(255, 255, 255, 0.4);
    /* Hover */
}

/* Controls container: For buttons */
.controls {
    display: flex;
    /* Flex */
    gap: 10px;
    /* Gap */
}

/* Control buttons: Prev/next */
.ctrl {
    border: 1px solid rgba(255, 255, 255, 0.25);
    /* Border */
    background: rgba(255, 255, 255, 0.06);
    /* Bg */
    color: white;
    /* Color */
    width: 38px;
    /* Size */
    height: 38px;
    /* Size */
    border-radius: 999px;
    /* Round */
    display: grid;
    /* Grid */
    place-items: center;
    /* Center */
    cursor: pointer;
    /* Pointer */
}

/* Ctrl hover: Brighter, lift */
.ctrl:hover {
    border-color: rgba(255, 255, 255, 0.4);
    /* Hover border */
    transform: translateY(-1px);
    /* Lift */
}

/* Ctrl active: Reset transform */
.ctrl:active {
    transform: none;
    /* No lift */
}

/* Ctrl focus: Outline */
.ctrl:focus-visible {
    outline: 2px solid var(--accent);
    /* Focus */
    outline-offset: 2px;
    /* Offset */
}

/* ABOUT PAGE */
.about {
    display: flex;
    /* Makes this container a flexbox */
    flex-direction: column;
    /* Stack children vertically */
    min-height: 100vh;
    /* Ensure it fills the full viewport height */
    padding: 20px clamp(16px, 4vw, 40px);
    /* Responsive padding */
    background-color: var(--blue-darker);
    /* Dark background color */
    position: relative;
    /* Allows absolute-positioned children */
}

/* Top third section */
.top-third {
    flex: 1;
    /* Takes up 1 part of the total flex space */
    display: flex;
    /* Flexbox inside this section */
    flex-direction: column;
    /* Stack its children vertically */
    justify-content: center;
    /* Center children vertically */
    align-items: center;
    /* Center children horizontally */
    text-align: center;
    /* Center-align text */
    color: var(--ink-dim);
    /* Dim ink color for text */
    margin-bottom: 40px;
}

/* Join text */
#join-text {
    text-align: center;
    /* Center the text */
    color: var(--ink-dim);
    /* Same dim color */
    font-weight: 700;
    /* Light/thin text weight */
    font-size: 1.5em;
    /* Slightly larger font */
    margin-bottom: 40px;
    /* Adds space below this element */
}

/* Project types container */
.project-types {
    display: flex;
    /* Flexbox for layout */
    justify-content: space-between;
    /* Center items horizontally */
    align-items: center;
    /* Center items vertically */
    /* gap: 20px; */
    /* Space between items */
    flex-wrap: wrap;
    /* Allow items to wrap on smaller screens */
    padding: 0 40px;
    gap: clamp(16px, 4vw, 36px);
    width: 1200px;
    /* Max width */
    margin: 0 auto;
    /* Center */
}

/* Individual project type */
.project-type {
    display: flex;
    /* Align image + text in a row */
    align-items: center;
    /* Vertically center image and text */
    gap: 8px;
    /* Space between icon and text */
}

/* Project type image */
.project-type img {
    width: 30px;
    /* Set icon width */
    height: auto;
    /* Maintain aspect ratio */
    filter: grayscale(100%);
    /* Make icon monochrome/grey */
}

/* White box section */
.white-box {
    flex: 2;
    /* Takes up 2 parts of the flex space */
    background-color: white;
    /* White background */
    border-top-left-radius: 100px;
    /* Round top-left corner */
    border-top-right-radius: 100px;
    /* Round top-right corner */
    padding: 60px 80px;
    /* Inner spacing */
    display: flex;
    /* Flexbox layout inside */
    gap: 50px;
    /* Space between inner sections */
    width: 100vw;
    /* Full width */
    box-sizing: border-box;
    /* Include padding in width/height calculations */
    margin-left: calc(50% - 50vw);
    align-items: center;
    margin-bottom: 0;
}

/* Left section of white box */
.left-section {
    flex: 1;
    /* Takes less space compared to right section */
    font-weight: bold;
    /* Bold text */
    font-size: 2em;
    /* Bigger font for emphasis */
    color: #111;
    /* Black text */
    max-width: 350px;
}

/* Right section of white box */
.right-section {
    flex: 1.2;
    /* Takes more space than left section */
    font-size: 1em;
    /* Normal font size */
    max-width: 600px;
    color: #444;
    /* Dark grey text */
    line-height: 1.8;
    /* Comfortable line spacing */
    justify-content: center;
    display: flex;
    flex-direction: column;
}

/* SKILLS-EXPERIENCE SECTION */
/* Defines the main container for the skills, collaboration, and soft skills sections using a grid layout.
   Starts with a single column, white background, full viewport width, and specific padding/margins. */
.skills-experience {
    display: grid;
    /* Uses CSS Grid for layout */
    grid-template-columns: 1fr;
    /* Single column layout with equal width */
    background-color: white;
    /* Sets a white background */
    margin-top: 0;
    /* Removes top margin */
    margin-left: calc(50% - 50vw);
    /* Centers the section by offsetting half the viewport width */
    padding: 60px 80px;
    /* Adds 60px top/bottom and 80px left/right padding */
    box-sizing: border-box;
    /* Includes padding and border in the element's total width/height */
    width: 100vw;
    /* Sets the width to the full viewport width */
    gap: 40px;
    /* Adds 40px space between grid items */
}

/* Styles the unordered list within the skills section, arranging items in a flexible row layout. */
.skills-list {
    text-decoration: none;
    /* Removes underline from list items (though not typically needed for ul) */
    display: flex;
    /* Uses flexbox for horizontal arrangement */
    list-style: none;
    /* Removes default bullet points */
    gap: 24px;
    /* Adds 24px space between list items */
    flex-wrap: wrap;
    /* Allows items to wrap to the next line on overflow */
    max-height: 120px;
    /* Limits the maximum height to 120px */
    justify-content: flex-start;
    /* Aligns items to the start of the container */
}

/* Styles individual list items within the skills-list, giving them a bordered, rounded appearance. */
.skills-list li {
    font-size: 0.95em;
    /* Sets font size to 95% of the parent (slightly smaller than 1em) */
    border: 1px solid var(--blue-darker);
    /* Adds a 1px border with the dark blue color variable */
    border-radius: 999px;
    /* Creates a fully rounded (circular) border */
    display: flex;
    /* Displays as an flex container */
    gap: 8px;
    /* space between logo and text */
    align-items: center;
    /* Vertically centers content within the item */
    justify-content: center;
    /* Horizontally centers content within the item */
    text-align: center;
    /* Centers text horizontally */
    padding: 8px 16px;
    /* Adds 8px top/bottom and 16px left/right padding */
    color: var(--blue-darker);
    /* Sets text color to the dark blue variable */
    background-color: #f8f9fa;
    /* Sets a light gray background for contrast */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Smoothly animates transform and shadow changes */
}

/* Defines hover effect for list items, adding a lift and shadow for interactivity. */
.skills-list li:hover {
    transform: translateY(-2px);
    /* Lifts the item up by 2px on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Adds a subtle shadow for depth */
}

/* Styles the individual containers for skills, collaboration, and soft skills sections. */
.collaboration,
.soft-skills {
    display: flex;
    /* Uses flexbox for vertical stacking */
    flex-direction: column;
    /*Stacks children vertically */
    gap: 16px;
    /* Adds 16px space between child elements */
    padding: 20px;
    /* Adds 20px padding on all sides */
    border-radius: 16px;
    /* Rounds corners to match the --radius variable */
    background-color: #f8f9fa;
    /* Sets a light gray background */
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Adds a subtle black border with 10% opacity */
}

/* Styles the main heading within the skills-experience section. */
.skills-experience h2 {
    margin-top: 0;
    /* Removes default top margin */
    font-size: 1.8em;
    /* Sets a larger font size for prominence */
    color: var(--blue-darker);
    /* Uses the dark blue color variable */
    font-weight: 700;
    /* Sets bold font weight */
    text-align: left;
    /* Aligns text to the left */
}

/* Styles the subheadings within skills, collaboration, and soft skills sections. */
.skills h3,
.collaboration h3,
.soft-skills h3 {
    font-size: 1.3em;
    /* Sets a moderate font size */
    color: var(--blue-darker);
    /* Uses the dark blue color variable */
    font-weight: 600;
    /* Sets semi-bold font weight */
    margin: 0;
    /* Removes default margins */
    text-align: center;
}

/* Styles the paragraphs within collaboration and soft skills sections. */
.collaboration p,
.soft-skills p {
    font-size: 1em;
    /* Sets standard font size */
    color: #444;
    /* Sets a medium gray text color */
    line-height: 1.6;
    /* Improves readability with increased line spacing */
    margin: 0;
    /* Removes default margins */
}

/* Responsive adjustments for screens up to 768px (e.g., tablets and mobile). */
@media (max-width: 768px) {
    .skills-experience {
        padding: 0 20px 40px;
        /* Reduces padding to 20px sides and 40px bottom */
        gap: 24px;
        /* Reduces gap between grid items to 24px */
    }

    .skills,
    .collaboration,
    .soft-skills {
        padding: 16px;
        /* Reduces padding to 16px on all sides */
    }

    .skills-list {
        gap: 16px;
        /* Reduces gap between list items to 16px */
        max-height: none;
        /* Removes height limit for better flow on small screens */
    }

    .skills-list li {
        font-size: 0.9em;
        /* Slightly reduces font size */
        padding: 6px 12px;
        /* Reduces padding to 6px top/bottom and 12px left/right */
    }

    .skills-experience h2 {
        font-size: 1.5em;
        /* Reduces main heading size */
    }

    .skills h3,
    .collaboration h3,
    .soft-skills h3 {
        font-size: 1.2em;
        /* Reduces subheading size */
    }
}

/* Responsive adjustments for screens 1000px and wider (e.g., desktops). */
@media (min-width: 1000px) {
    .skills-experience {
        grid-template-columns: repeat(3, 1fr);
        /* Switches to a three-column layout */
        gap: 32px;
        /* Increases gap between grid items to 32px */
    }

    .skills,
    .collaboration,
    .soft-skills {
        padding: 24px;
        /* Increases padding to 24px on all sides */
    }
}

/* FREQUENTLY ANSWERED QUESTIONS PAGE */
.faq {
    min-height: 100vh;
    /* Full viewport height */
    padding: 40px clamp(16px, 4vw, 40px);
    /* Consistent padding */
    background-color: white;
    /* Same dark bg */
    display: flex;
    /* Flex for centering content */
    flex-direction: column;
    /* Vertical stack */
    color: var(--blue-darker);
    /* darker blue text */
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}


.faq-item {
    background: #fff;
    margin-bottom: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
}

.faq-answer {
    display: block;
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    color: #555;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 15px 20px;
}

/* Circle Button */
.circle-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.circle-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.faq-item.active .circle-btn svg {
    transform: rotate(90deg);
}

.faq h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    /* Responsive, matching hero */
    margin-bottom: 20px;
    /* Space below */
}

.faq span {
    font-size: clamp(1rem, 2vw, 1.5rem);
    /* Responsive */
    color: black;
    /* Dim color */
}


/* CONTACT PAGE */
.contact {
    position: relative;
    min-height: 80vh;
    /* Full viewport height */
    padding: 40px clamp(16px, 4vw, 40px);
    /* Consistent padding */
    background-color: var(--blue-darker);
    /* Same dark bg */
    display: flex;
    /* Flex for centering content */
    flex-direction: column;
    /* Vertical stack */
    color: var(--ink);
    /* Light text */
    justify-content: space-between;
    overflow: hidden;

    box-sizing: border-box;
    /* Ensure padding doesn't cause overflow */
}

/* Torch glow at the bottom */
.contact::after {
    content: "";
    position: absolute;
    bottom: -50px;
    /* Start slightly below the contact section */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    width: 350px;
    /* Beam width */
    height: 220px;
    /* Beam height */
    background: radial-gradient(circle at center bottom,
            rgba(58, 134, 255, 0.5) 0%,
            transparent 70%);
    /* box-shadow: 0 0 60px rgba(58, 134, 255, 0.3); */
    opacity: 0;
    animation: torchBottom 2.5s ease-out forwards;
    z-index: 0;
    /* Keep it behind content */
}

/* Animation for the bottom glow */
@keyframes torchBottom {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0.7;
        transform: translateX(-50%) translateY(-20px);
    }
}

/* Make sure content stays above glow */
.contact>* {
    position: relative;
    z-index: 1;
}

/* Moving Text */
.marquee {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.marquee span {
    display: inline-block;
    padding-right: 100px;
    animation: scroll 20s linear infinite;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: bold;
    font-weight: 700;
}

@keyframes scroll {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-50%);
    }
}



/* Content layout */
.contact-content {
    flex: 1;
    display: flex;
    justify-content: space-around;
    padding: clamp(20px, 4vw, 40px);
    gap: 20px;
    /* Added gap for spacing */
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
}

.left-info span {
    font-size: small;
    font-weight: 100;
}

.left-info p {
    font-weight: 400;
}

.left-info {
    width: 35%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    /* Added for spacing */
}

.right-info {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Added for spacing */
}


.right-info h2 {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.right-info input {
    padding: 12px;
    width: 70%;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    outline: none;
}



.right-info button {
    padding: 10px 15px;
    border: none;
    background: #0077b5;
    /* LinkedIn blue */
    color: white;
    border-radius: 5px;
    cursor: pointer;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center;
 */
}

.right-info button:hover {
    background: #e6004c;
    transform: scale(1.05);
}

.right-info button svg {
    width: 18px;
    height: 18px;
}


@media (max-width: 768px) {
    .contact-content {
        flex-direction: column;
        /* Stack vertically on mobile */
        align-items: center;
        /* Center content */
        padding: 20px;
        /* Further reduce padding */
    }

    .left-info {
        width: 100%;
        /* Full width on mobile */
        flex-direction: column;
        /* Stack email/phone vertically */
        align-items: center;
        /* Center align */
        text-align: center;
        /* Center text */
        gap: 15px;
        /* Smaller gap */
    }

    .right-info {
        width: 100%;
        /* Full width on mobile */
        align-items: center;
        /* Center form */
    }

    .right-info input {
        width: 100%;
        /* Full width input */
        max-width: none;
        /* Remove max-width constraint */
    }

    .right-info button {
        width: 100%;
        /* Full width button */
        max-width: 200px;
        /* Optional: limit button width */
    }

    .marquee span {
        font-size: clamp(1.5rem, 3vw, 2rem);
        /* Smaller marquee text */
    }
}

/* Footer */
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 15px 40px;
    margin-top: auto;
}

.footer-left {
    font-size: 0.6em;
    color: var(--ink-dim)
}

.footer-right {
    display: flex;
    flex-direction: row;
}

.footer-right a svg {
    margin-left: 15px;
    width: 28px;
    height: 28px;
    transition: transform 0.3s, fill 0.3s;
    cursor: pointer;
}

/* Default colors */
.instagram {
    fill: #e1306c;
}

.whatsapp {
    fill: #25d366;
}

.linkedin {
    fill: #0077b5;
}

.github {
    fill: #333;
}

/* Hover effects */
.footer-right a svg:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
}


/* Media query for mobile: Adjusts layout for smaller screens */
@media (max-width: 768px) {
    #header-inner {
        flex-direction: column;
        /* Stack vertically */
        gap: 12px;
        /* Space */
    }

    .logo-name {
        justify-content: center;
        /* Center */
    }

    .cta {
        margin-top: 8px;
        /* Top margin */
    }

    #navbar {
        display: none;
        /* Hide by default on mobile */
        position: absolute;
        /* Absolute for dropdown */
        top: 70px;
        /* Below header */
        right: 20px;
        /* Right align */
        background: var(--blue-dark);
        /* Bg */
        padding: 1rem;
        /* Padding */
        border-radius: var(--radius);
        /* Radius */
        box-shadow: var(--shadow);
        /* Shadow */
    }

    #navbar.active {
        display: block;
        /* Show when active */
    }

    .hamburger {
        display: block;
        /* Show on mobile */
    }

    .project-types {
        flex-direction: column;
        /* Stack vertically */
        gap: 12px;
        /* Smaller gap */
    }

    .white-box {
        flex-direction: column;
        /* Stack left/right */
    }

    .left-section,
    .right-section {
        flex: 1;
        /* Equal when stacked */
    }
}

/* Media for wider screens: More columns */
@media (min-width: 700px) {
    .track {
        grid-auto-columns: 48%;
        /* Two columns */
    }
}

@media (min-width: 1000px) {
    .track {
        grid-auto-columns: 30%;
        /* Three columns */
    }
}

/* Reduced motion: Disables animations and transitions */
@media (prefers-reduced-motion: reduce) {
    .hero::before {
        animation: none;
        /* Disable animation */
        opacity: 0.4;
        /* Static faint glow */
        transform: translateX(-50%) translateY(0);
        /* No movement */
    }

    .track {
        scroll-behavior: auto;
        /* No smooth scroll */
    }

    .btn,
    .ctrl {
        transition: none;
        /* No transitions */
    }
}