@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

/* Basic Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Nunito', sans-serif; background-color: #121212; color: #ffffff; line-height: 1.6; }
a { color: #bb86fc; text-decoration: none; }
a:hover { text-decoration: underline; }

html {
    scroll-behavior: smooth;
}

/* Card anchor for mobile navigation */
.card-anchor {
    display: none;
}

/* Navbar Styles */
header {
    background-color: transparent; /* Ensure no background color */
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Added transform transition */
}

.header-hidden {
    transform: translateY(-100%); /* Use transform instead of top for smooth animation */
}

nav .container { display: flex; justify-content: space-between; align-items: center; max-width: none; margin: 0 auto; padding: 0 20px; }
nav .brand-logo { font-size: 1.5rem; font-weight: bold; color: #ffffff; font-family: 'Nunito', sans-serif; /* Ensured logo uses new font */ }
/* ADDED: Style for the logo image */
nav .brand-logo img {
    height: 30px; /* ADJUSTED: Was 40px, 0.75x */
    width: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align nicely with nav items */
}
nav ul { list-style: none; display: flex; }
nav ul li { margin-left: 20px; }
nav ul li a {
    color: #ffffff; /* UPDATED to white */
    font-weight: 500;
    position: relative; /* For positioning the lines */
    text-decoration: none; /* Ensure no default underline */
    padding: 5px; /* UPDATED: 5px padding on all sides */
    overflow: hidden; /* Optional: if lines ever slightly exceed bounds during animation */
    border-radius: 3px; /* ADDED: For slightly rounded corners of the animated box */
}
nav ul li a:hover { text-decoration: none; }
nav ul li a.active {
    color: #bb86fc;
}
nav ul li .cta-button {
    background-color: #121212; /* Black fill */
    color: #20C9D4; /* Primary blue text */
    padding: 10px 15px;
    border-radius: 50px; /* Fully rounded corners */
    transition: all 0.3s ease; /* Transition all properties */
    border: none; /* REMOVED border from default state */
    font-weight: 600; /* Ensure font weight is explicitly set */
    text-decoration: none; /* Ensure no underline */
}
nav ul li .cta-button:hover {
    /* Set up multi-layer background: gradient for text, solid color for button bg */
    background: linear-gradient(90deg, #20C9D4 0%, #bb86fc 50%, #20C9D4 100%) 0 0 / 200% auto, #121212;
    /* Apply background-clip: first for text (gradient), second for button area (solid color) */
    -webkit-background-clip: text, padding-box;
    background-clip: text, padding-box;
    color: transparent; /* Make text transparent to show gradient */
    animation: gradient-continuous-flow 6.67s linear infinite; /* Animation for the gradient */
    /* background-size for the gradient is set within the background shorthand above */
    border: none; /* Ensure no border on hover */
    text-decoration: none; /* Ensure no underline */
}

/* New styles for animated box on nav links */
.line {
    background-color: #ffffff; /* CHANGED: Lines are now white */
    position: absolute;
    transition: opacity 0.2s ease-out, width 0.2s ease-out; /* Include width for underline animation */
    opacity: 0; /* ADDED: Lines start transparent */
}

.line-bottom { /* This will be our underline */
    bottom: 0;
    left: 0;
    width: 0; /* CHANGED: Start with 0 width for underline effect */
    height: 2px;
    opacity: 1; /* Underline is initially opaque but 0-width */
}

.line-right,
.line-top,
.line-left {
    display: none; /* Hide other lines for underline-only effect */
}

/* Hover animations - Underline effect */
nav ul li a:not(.cta-button):hover .line-bottom {
    width: 100%; /* Make underline full width on hover */
    opacity: 1;
}

/* End of new styles for animated box */

/* Scroll Indicator Styles */
.scroll-indicator {
    position: absolute;
    bottom: calc(3svh + 70px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.scroll-indicator.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Desktop scroll indicator */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

#mouse-scroll {
    display: block;
    position: relative;
    margin: auto;
}

#mouse-scroll span {
    display: block;
    width: 5px; 
    height: 5px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-right: 2px solid #fff; 
    border-bottom: 2px solid #fff;
    margin: 0 0 3px 5px;
}

#mouse-scroll .mouse {
    height: 21px;
    width: 14px;
    border-radius: 10px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    border: 2px solid #ffffff;
    margin-bottom: 6px;
}

#mouse-scroll .down-arrow-1 {
    margin-top: 6px;
}

#mouse-scroll .down-arrow-1, 
#mouse-scroll .down-arrow-2, 
#mouse-scroll .down-arrow-3 {
    -webkit-animation: mouse-scroll 1s infinite; 
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
}

#mouse-scroll .down-arrow-1 {
    -webkit-animation-delay: .1s; 
    -moz-animation-delay: .1s;
    animation-delay: .1s;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    animation-direction: alternate;
}

#mouse-scroll .down-arrow-2 {
    -webkit-animation-delay: .2s; 
    -moz-animation-delay: .2s;
    animation-delay: .2s;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    animation-direction: alternate;
}

#mouse-scroll .down-arrow-3 {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    animation-delay: .3s;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    animation-direction: alternate;
}

#mouse-scroll .mouse-in {
    height: 5px;
    width: 2px;
    display: block; 
    margin: 5px auto;
    background: #ffffff;
    position: relative;
    -webkit-animation: animated-mouse 2.4s ease infinite;
    -moz-animation: animated-mouse 2.4s ease infinite;
    animation: animated-mouse 2.4s ease infinite;
}

@-webkit-keyframes animated-mouse {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(6px);
        -ms-transform: translateY(6px);
        transform: translateY(6px);
    }
}

@-moz-keyframes animated-mouse {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        -moz-transform: translateY(6px);
        transform: translateY(6px);
    }
}

@keyframes animated-mouse {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(6px);
    }
}

@-webkit-keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

@keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Mobile scroll indicator */
.scroll-down {
    position: relative;
    display: block;
    width: 13px;
    height: 13px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    -webkit-animation: fade_move_down 4s ease-in-out infinite;
    -moz-animation: fade_move_down 4s ease-in-out infinite;
    animation: fade_move_down 4s ease-in-out infinite;
    bottom: calc(3svh + 70px);
}

@-webkit-keyframes fade_move_down {
    0% {
        -webkit-transform: translateY(-10px) rotate(45deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(10px) rotate(45deg);
        opacity: 0;
    }
}

@-moz-keyframes fade_move_down {
    0% {
        -moz-transform: translateY(-10px) rotate(45deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -moz-transform: translateY(10px) rotate(45deg);
        opacity: 0;
    }
}

@keyframes fade_move_down {
    0% {
        transform: translateY(-10px) rotate(45deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(10px) rotate(45deg);
        opacity: 0;
    }
}

/* Responsive behavior for scroll indicators */
@media (max-width: 1024px) {
    .desktop-only {
        display: none;
    }
    
    .mobile-only {
        display: block;
    }
}

.nav-toggle-label,
.nav-toggle {
    display: none;
}

/* New Hero Section Styles */
#hero {
    min-height: calc(100vh + 70px); /* Ensure hero is tall enough to go behind navbar */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px; 
    background-color: #101112; /* Dark background */
    position: relative;
    overflow: hidden; 
    text-align: center;
}

/* Aurora background styles */
#aurora-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* CSS for MovingGridEffect Canvas */
#movingGridCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Base layer for the hero background effect */
    background-color: #161616; /* Fallback, though JS also fills */
}

/* New: Pseudo-element for fading out the bottom of the hero section */
#hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Adjust height for desired fade length */
    background: linear-gradient(
        to bottom,
        rgba(22, 22, 22, 0) 0%,  /* Transparent, hero bg is #161616 */
        #161616               /* Opaque, portfolio bg is #161616 */
    );
    z-index: 1; /* Above canvas, same level as .hero-background-mask */
    pointer-events: none; /* Prevent interference with mouse events */
}

.hero-content {
    position: relative;
    z-index: 2; /* Ensures hero text is on top of the mask and canvas */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px; /* Was 100px, now higher up */
}

#hero h1 {
    font-size: 3.9rem; /* Increased 1.5x from 2.6rem */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px; /* Was 3px, now a bit more for clarity */
}

.hero-name-gradient {
    background: linear-gradient(90deg, #20C9D4 0%, #bb86fc 50%, #20C9D4 100%); /* UPDATED */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block; 
    background-size: 200% auto; /* Gradient is twice the width of the text */
    animation: gradient-continuous-flow 6.67s linear infinite; /* Adjusted duration */
}

/* New Keyframes for a smoother, continuous flow */
@keyframes gradient-continuous-flow {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: -200% center; /* Move left by the full background-size */
    }
}

/* New Reusable Gradient Title for Sections */
.section-gradient-title-wrapper {
    /* For the H2 block */
    font-size: 3.9rem; /* UPDATED: Was 3.5rem */
    font-weight: 700; 
    margin-top: 0;
    margin-bottom: 60px; 
    text-align: center; 
}

.section-gradient-text {
    /* For the inner SPAN carrying the gradient */
    background: linear-gradient(90deg, #20C9D4 0%, #bb86fc 50%, #20C9D4 100%); /* UPDATED */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block; /* Critical for gradient to size to text */
    padding: 0 2px; 
    background-size: 200% auto; /* Gradient is twice the width of the text */
    animation: gradient-continuous-flow 6.67s linear infinite; /* Adjusted duration */
}

@media (max-width: 768px) {
    .section-gradient-title-wrapper {
        font-size: 3rem;
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .section-gradient-title-wrapper {
        font-size: 2.5rem;
    }
}

.hero-dynamic-subheading {
    font-size: 3.4rem; /* Slightly reduced to be secondary to h1 */
    font-weight: 700;
    color: #20C9D4; /* UPDATED */
    margin-bottom: 20px; /* Adjusted margin */
    margin-top: -20px; /* Pull subheader up by 20px, reducing space to header */
    min-height: 2.2em; /* Re-evaluate if font size changes significantly */
    position: relative; /* For cursor positioning */
}

/* Typing cursor for the dynamic text */
#dynamic-titles {
    position: relative; /* Ensure it can be a reference for the pseudo-element */
    display: inline-block; /* Needed for proper pseudo-element positioning with text */
}

#dynamic-titles::after {
    content: '';
    position: absolute;
    right: -8px; /* Adjust for spacing */
    top: 10%; /* Adjust vertical alignment */
    height: 80%; /* Adjust height relative to text */
    width: 2px;
    background-color: #20C9D4; /* UPDATED */
    animation: blinkCursor 1s infinite step-start;
}

@keyframes blinkCursor {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.hero-description {
    font-size: 1.05rem; /* Slightly adjusted */
    color: #b0b0b0;
    max-width: 580px; /* Slightly adjusted */
    line-height: 1.65; /* Slightly adjusted */
    margin-bottom: 30px; /* Adjusted margin */
}

.hero-connect-btn {
    background: linear-gradient(90deg, #20C9D4 0%, #20C9D4 100%); /* Solid blue as base */
    /* background-size: 100% auto; Removed as not needed for solid gradient */
    color: #121212;
    padding: 8px 30px; /* ADJUSTED: Reduced padding for lower height */
    border-radius: 50px; /* ADJUSTED: Fully rounded corners */
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    /* transition: all 0.3s ease; Removed to avoid conflict, transition is on ::before */
    border: 1px solid transparent; /* Add a transparent border by default */
    position: relative; /* For pseudo-element positioning */
    overflow: hidden; /* To contain pseudo-element and respect border-radius */
    z-index: 0; /* Establishes stacking context for ::before z-index: -1 */
    /* animation: none; NO - this would override the hover animation if 'all' includes animation */
}

/* Removed the old .hero-connect-btn:hover rule as its effects are now on ::before */

.hero-connect-btn::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, #20C9D4 0%, #bb86fc 50%, #20C9D4 100%);
    background-size: 200% auto;
    animation: gradient-continuous-flow 6.67s linear infinite paused; /* Animation defined but paused */
    opacity: 0; /* Start transparent */
    transition: opacity 0.3s ease; /* Transition for fade in/out */
    z-index: -1; /* Behind the button's text content */
    border-radius: inherit; /* Inherit border-radius from parent button */
}

.hero-connect-btn:hover::before {
    opacity: 1; /* Fade in on hover */
    animation-play-state: running; /* Start animation on hover */
}

/* Ensure no underline on hover for the button itself */
.hero-connect-btn:hover {
    text-decoration: none;
}

/* Responsive adjustments for new Hero */
@media (max-width: 768px) {
    .hero-headshot { width: 90px; height: 90px; margin-bottom: 15px; }
    #hero h1 { font-size: 3rem; /* Adjusted for responsiveness */ }
    .hero-dynamic-subheading { font-size: 1.6rem; min-height: 2em; margin-bottom: 15px; }
    .hero-description { font-size: 0.95rem; margin-bottom: 25px; }
    .hero-connect-btn { padding: 10px 25px; font-size: 0.9rem; }
    .bubble:nth-child(1) { width: 60px; height: 60px; }
    .bubble:nth-child(3) { width: 80px; height: 80px; }
    /* Hide some bubbles on smaller screens if too cluttered */
    .bubble:nth-child(7), .bubble:nth-child(8), .bubble:nth-child(9), .bubble:nth-child(10) { display: none; }
}

@media (max-width: 480px) {
    #hero { padding: 40px 20px; }
    .hero-headshot { width: 80px; height: 80px; }
    #hero h1 { font-size: 2.4rem; /* Adjusted for responsiveness */ }
    .hero-dynamic-subheading { font-size: 1.4rem; min-height: 1.8em; }
    .hero-description { font-size: 0.85rem; }
    .bubble:nth-child(2) { width: 30px; height: 30px; }
    .bubble:nth-child(5) { width: 50px; height: 50px; }
    .bubble:nth-child(6) { display: none; }
}

/* Features Section Styles */
/* All CSS from the "body { overflow-x: hidden; }" down to the end of responsive styles for features section will be removed. */

/* New Features Grid Section Styles */
/* All CSS from here down to the end of its responsive styles will be removed. */

/* NEW Portfolio Section Styles */
.portfolio-section > .container { /* Title container - NO LONGER STICKY */
    /* Removed: position: sticky, top, z-index */
    /* background-color is now on .portfolio-section */
    padding: 20px 0; /* Keep some padding for the title block */
    /* margin-bottom: 30px; */ /* This can be adjusted or rely on section-title's margin */
}

/* General section-title has margin-bottom: 60px. If too much, uncomment below */
/* .portfolio-section > .container > .section-title {
    margin-bottom: 30px; 
} */

.portfolio-section {
    background-color: #161616; 
    padding: 40px 20px 0 20px; /* Added padding-top for the title, bottom padding is from card margin or dwell-spacer */
    position: relative; 
    --current-card-header-height: 70px; /* ADJUSTED: Was 100px, reduced by 30px due to header padding change */
    /* Removed --portfolio-title-sticky-height */
}

.portfolio-card {
    background-color: #1f1f1f;
    border-radius: 15px;
    margin: 0 auto 100px;
    width: 100%;
    max-width: 1000px;
    border: 1px solid #2a2a2a;
    transition: box-shadow 0.3s ease;
    position: relative; /* Contain positioned children */
}

.card-header { 
    padding: 5px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #2a2a2a;
    background-color: #1f1f1f;
    position: relative;
    border-radius: 15px 15px 0 0;
}

.card-header .client-name {
    font-size: 2.5rem; /* REDUCED: Was 2.7rem */
    color: #e0e0e0;
    font-weight: 700; /* Consider making this bolder if needed with larger font */
    margin-right: auto; /* Push other items to the right */
}

.card-number-style { 
    font-size: 2.5rem; 
    font-weight: 800;
    color: #f0f0f0; 
    margin-left: 15px; /* Moved margin from button to number */
}

.card-content {
    padding: 0px 30px; /* REDUCED top/bottom padding: Was 30px all around */
}
.card-content h3 {
    font-size: 1.8rem; /* Existing font size */
    margin-top: 0;
    margin-bottom: 15px; /* Existing margin */
    color: #ffffff; /* Existing color */
}
.card-content p {
    color: #b0b0b0; /* Existing color */
    line-height: 1.6;
    margin-bottom: 25px; /* Existing margin */
}

/* Styles for images and button from existing portfolio card, now within .card-content */
.portfolio-images {
    margin: 25px 0;
    display: flex; 
    gap: 15px; /* Gap between main and sub image containers */
    align-items: stretch; /* Key for making flex children (main-image, sub-images) same height */
    /* REMOVED: Old grid, fixed height, align-items: flex-start */
}

.main-image {
    flex-grow: 867; /* Proportion for desktop image width */
    flex-shrink: 1;
    flex-basis: 0; /* Allow flex-grow to determine size from 0 */
    aspect-ratio: 16 / 9;
    border: 2px solid #2a2a2a; 
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.5s ease; /* ADDED for smooth grow effect */
    /* REMOVED: flex: 2, explicit height */
}

.main-image img { /* General rule for image inside main-image container */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assumes image is 16:9 or cropping to fill is fine */
    display: block; /* Removes extra space below image */
    overflow: hidden;    /* Clip image to rounded corners */
    display: flex;       /* To allow its child img to use height: 100% */
    transition: transform 0.5s ease; /* ADDED for smooth grow effect */
    /* REMOVED: flex: 1, old display:flex/flex-direction, old height */
}

.sub-images {
    flex-grow: 254; /* Proportion for mobile image width */
    flex-shrink: 1;
    flex-basis: 0; 
    border: 2px solid #2a2a2a; 
    border-radius: 10px; /* Round corners of the sub-image container */
    overflow: hidden;    /* Clip image to rounded corners */
    display: flex;       /* To allow its child img to use height: 100% */
    transition: transform 0.5s ease;
    /* REMOVED: flex: 1, old display:flex/flex-direction, old height */
}

.sub-images img { /* General rule for image inside sub-images container */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container, might crop */
    transition: transform 0.3s ease;
}

.sub-image-mobile {
    display: none;
}

.portfolio-images img { /* General transition and hover for ALL images in .portfolio-images */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
}

/* ADDED: Hover effect for image containers */
.main-image:hover,
.sub-images:hover {
    transform: scale(1.02);
}

.live-project-btn {
    display: inline-block;
    background-color: #161616;
    border: 1px solid #2a2a2a;
    padding: 10px 20px; 
    border-radius: 30px;
    color: #ffffff;
    font-size: 0.75rem; 
    font-weight: 600;
    letter-spacing: 0.5px; 
    text-decoration: none;
    transition: all 0.3s ease;
    /* margin-left: 15px; */ /* Removed, button is now to the left of number */
}

.live-project-btn:hover {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #000000; /* Adding a black border for definition */
    text-decoration: none;
    /* Remove previous gradient and animation properties */
    background-image: none; 
    animation: none;
}

/* Sticky behavior */
/* Body padding-top is 70px */
.card-1 {
    position: sticky;
    top: 70px; /* Reverted: Sticks directly below main navbar */
    z-index: 1;
}

.card-2 {
    position: sticky;
    top: calc(70px + var(--current-card-header-height)); 
    z-index: 2;
}

.card-3 {
    position: sticky;
    top: calc(70px + var(--current-card-header-height) * 2); 
    z-index: 3;
}

.portfolio-inter-card-spacer {
    height: 500px; /* 5x the original 100px margin-bottom */
    width: 100%; /* Ensure it takes up space */
    /* background-color: rgba(0, 255, 0, 0.1); */ /* Optional: for visualizing */
}

.dwell-spacer {
    height: 20vh; /* Increased from 20vh to give more scroll room for the last card to "dwell" */
    /* background-color: rgba(255,0,0,0.1); */ /* Optional: for visualizing */
} 

/* Responsive adjustments for NEW Portfolio */
@media (max-width: 992px) {
    .portfolio-section {
        --current-card-header-height: 55px; /* ADJUSTED: Was 85px, reduced by 30px */
    }
    .card-header .client-name {
        font-size: 2rem; /* Adjust for medium screens */
    }
    .portfolio-images { height: auto; grid-template-columns: 1fr; }
    .main-image { height: 300px; }
    .sub-images { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
    .sub-images img { height: 150px; }
    .card-number-style { font-size: 2rem; } 
    .card-content { padding: 25px; }
    .card-content h3 { font-size: 1.5rem; }
}

@media (max-width: 576px) {
    .portfolio-section {
        --current-card-header-height: 45px; /* ADJUSTED: Was 75px, reduced by 30px */
        padding: 20px 10px; /* Add small side padding for section on mobile */
    }
    .card-header .client-name {
        font-size: 1.8rem; /* Adjust for small screens */
    }
    .card-header {
        padding: 15px 20px; /* Adjust header padding for smaller screens */
    }
    .card-number-style { font-size: 1.8rem; } 
    .card-content { padding: 20px; }
    .card-content h3 { font-size: 1.3rem; }
    .main-image { height: 200px; }
    .sub-images { grid-template-columns: 1fr; }
    .sub-images img { height: 120px; }
}


/* NEW Scrolling Testimonials Section Styles */
#testimonials-scrolling {
    background-color: #0e0e0e;
    padding: 100px 0;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh; /* ADDED: Ensure section takes viewport height */
    display: flex; /* ADDED: For flex controls */
    flex-direction: column; /* ADDED: Stack container and viewport vertically */
    justify-content: center; /* ADDED: Center content vertically if space allows */
}

#testimonials-scrolling .container { /* For the title and subtitle */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    margin-bottom: 80px; /* MODIFIED: Was 50px, increased space to reviews */
}

.testimonial-viewport {
    width: 100%;
    max-width: 1200px; /* Constrain viewport width */
    margin: 0 auto; /* Center the constrained viewport */
    overflow: hidden; 
    position: relative;
    cursor: grab; /* ADDED: For drag interaction hint */
    user-select: none; /* ADDED: Prevent text selection during drag */
    -webkit-user-select: none; /* For Safari */
    -ms-user-select: none; /* For IE/Edge */
}

/* Left and right gradient overlays using pseudo-elements */
.testimonial-viewport::before,
.testimonial-viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 10;
    pointer-events: none;
}

.testimonial-viewport::before {
    left: 0;
    background: linear-gradient(to right, #0e0e0e, transparent);
}

.testimonial-viewport::after {
    right: 0;
    background: linear-gradient(to left, #0e0e0e, transparent);
}

.testimonial-scrolling-track-container {
    display: none; 
}

.testimonial-row {
    display: flex;
    flex-wrap: nowrap;
    width: max-content; 
    /* animation: scroll-testimonials 47s linear infinite; */ /* REMOVED: CSS animation */
    gap: 1rem; 
    padding: 20px 0; 
}

/* REMOVED: CSS hover pause rule */
/*
.testimonial-viewport:hover .testimonial-row {
    animation-play-state: paused;
}
*/

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

.testimonial-card-scroll {
    background: linear-gradient(to bottom, #202020, #1A1A1A); /* Vertical gradient */
    border-top: 1px solid #333333; /* Top border only, slightly more visible */
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 8px; 
    box-shadow: none; 
    max-width: 320px; /* Adjusted max-width */
    width: 100%; /* Allow to shrink if needed */
    height: auto;
    /* min-height: 150px; */ /* Removed min-height to let content dictate */
    display: flex;
    flex-direction: column;
    padding: 1rem; /* 16px padding */
    transition: background 0.3s ease, transform 0.2s ease; /* Added background to transition */
    text-align: left;
}

.testimonial-card-scroll:hover {
    /* transform: scale(1.03); */ /* Removed grow on hover */
    background: linear-gradient(to bottom, #252525, #1E1E1E); 
}

.testimonial-card-top {
    display: flex;
    align-items: center;
    gap: 12px; 
}

.testimonial-card-scroll-img-placeholder {
    width: 48px; /* Tailwind h-12 w-12 (3rem = 48px) */
    height: 48px;
    min-width: 48px;
    background-color: #2C2C2C; 
    border-radius: 50%;
    overflow: hidden; /* To ensure img inside respects border-radius */
}

.testimonial-card-scroll-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 50%; */ /* Already on parent, not strictly needed here if parent overflows hidden */
}

.testimonial-author-details h4 { /* Name */
    font-size: 1rem; /* Tailwind text-md (16px) */
    font-weight: 600; 
    color: #E0E0E0; 
    margin: 0;
}

.testimonial-author-details p { /* Handle */
    font-size: 0.875rem; /* Tailwind text-sm (14px) */
    color: #888888; /* Lighter grey for handle */
    margin: 0;
}

.testimonial-card-scroll-text { /* The review itself */
    font-size: 0.875rem; /* Tailwind text-sm (14px) */
    color: #AAAAAA; /* Lighter grey for review text */
    line-height: 1.5;
    margin-top: 1rem; /* 16px margin above review text */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #testimonials-scrolling .container {
        margin-bottom: 40px;
    }
    .testimonial-viewport {
        max-width: 90%; 
    }
    
    .testimonial-viewport::before,
    .testimonial-viewport::after {
        width: 80px; /* Smaller gradient width for mobile */
    }
    .testimonial-row {
        gap: 0.875rem; 
        animation-duration: 41.2s; /* Doubled duration */
    }
    .testimonial-card-scroll {
        max-width: 290px; 
        padding: 0.875rem; /* 14px */
    }
    .testimonial-card-scroll-img-placeholder {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    .testimonial-author-details h4 {
        font-size: 0.9375rem; /* 15px */
    }
    .testimonial-author-details p {
        font-size: 0.8125rem; /* 13px */
    }
    .testimonial-card-scroll-text {
        font-size: 0.8125rem; /* 13px */
        margin-top: 0.875rem; /* 14px */
    }
}

@media (max-width: 480px) {
    .testimonial-viewport {
        max-width: 95%; 
    }
    
    .testimonial-viewport::before,
    .testimonial-viewport::after {
        width: 60px; /* Even smaller gradient width for very small screens */
    }
    .testimonial-row {
        gap: 0.75rem; 
        animation-duration: 35.2s; /* Doubled duration */
    }
    .testimonial-card-scroll {
        max-width: 260px; 
        /* padding: 0.75rem; */ /* Keep slightly more padding for very small cards */
    }
    .testimonial-card-scroll-img-placeholder {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
     .testimonial-author-details h4 {
        font-size: 0.875rem; /* 14px */
    }
    .testimonial-author-details p {
        font-size: 0.75rem; /* 12px */
    }
    .testimonial-card-scroll-text {
        font-size: 0.75rem; /* 12px */
        margin-top: 0.75rem; /* 12px */
    }
}


/* Contact Section Styles */
#contact { padding: 50px 0; background-color: #121212; }
#contact .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.contact-container { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; margin-top: 50px; }
.contact-info { display: flex; flex-direction: column; }
.contact-card { background: linear-gradient(145deg, #1f1f1f, #1a1a1a); border-radius: 15px; padding: 30px; height: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: 1px solid #2a2a2a; display: flex; flex-direction: column; }
.contact-card h3 { font-size: 1.8rem; margin-bottom: 15px; color: #ffffff; }
.contact-card p { font-size: 1.1rem; line-height: 1.6; color: #d1d1d1; }
.contact-details { list-style: none; padding: 0; margin: 0 0 0 0; }
.contact-details li { margin-bottom: 10px; display: flex; align-items: center; color: #e0e0e0; font-size: 1rem; }
.contact-details li i { color: #20C9D4; margin-right: 15px; font-size: 1.2rem; width: 24px; text-align: center; }
.contact-details li a {
    color: #20C9D4;
    text-decoration: none;
    transition: color 0.3s ease;
}
#contact > div > p {
    text-align: center;
}
.contact-card-content1 {
    margin-bottom: 30px;
}
#quote-form > div:nth-child(6) {
margin-bottom: 0px;
}
.contact-card-content2 {
    margin-bottom: 30px;
}
.contact-card-content3 {
    margin-bottom: 0px;
}
.contact-details li a:hover {
    color: #1AA2AD;
    text-decoration: underline;
}
.social-icons {
    display: flex;
    gap: 15px;
    margin-top: auto;
}
.social-icons a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: #2a2a2a; border-radius: 50%; color: #ffffff; transition: all 0.3s ease; }
.social-icons a:hover { background-color: #20C9D4; color: #121212; transform: translateY(-5px); text-decoration: none; }
.contact-form-container { background-color: #1f1f1f; border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: 1px solid #2a2a2a; }
.contact-form { display: flex; flex-wrap: wrap; gap: 20px; }
.form-group { margin-bottom: 20px; }
.form-group.half { flex: 0 0 calc(50% - 10px); }
.form-group.full { flex: 0 0 100%; }
.contact-form label { display: block; margin-bottom: 8px; color: #e0e0e0; font-size: 0.9rem; }
.contact-form .required { color: #20C9D4; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 12px 15px; background-color: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 5px; color: #ffffff; font-size: 1rem; transition: border-color 0.3s ease; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: #20C9D4; outline: none; }
.contact-form select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3e%3cpath fill='%23ffffff' d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; }
.checkbox-group { display: flex; align-items: center; }
.checkbox-group input { width: auto; margin-right: 10px; }
.checkbox-group label { margin-bottom: 0; color: #b0b0b0; font-size: 0.85rem; }
.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    background-color: #20C9D4;
    color: #121212;
    border: none;
    border-radius: 5px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    position: relative; /* For positioning the icon during animation */
    overflow: hidden;   /* To clip the icon as it flies out */
}
.submit-btn:hover {
    background-color: #1AA2AD;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.submit-btn i {
    margin-left: 10px;
    display: inline-block; /* Ensures transform can be applied */
    position: relative;    /* Allows z-index if needed, and base for transform */
}
#message {
    font-family: 'Nunito', sans-serif;
}
.contact-form input:invalid:focus, .contact-form select:invalid:focus, .contact-form textarea:invalid:focus {
    border-color: #ff4d4d;
}
.form-message { padding: 15px; margin-top: 20px; border-radius: 5px; text-align: center; font-weight: 500; display: none; }
.form-message.success { background-color: rgba(32, 201, 212, 0.1); color: #20C9D4; border: 1px solid #20C9D4; }
.form-message.error { background-color: rgba(255, 77, 77, 0.1); color: #ff4d4d; border: 1px solid #ff4d4d; }
@media (max-width: 992px) { .contact-container { grid-template-columns: 1fr; } .contact-info { margin-bottom: 20px; } .contact-card { height: auto; padding: 25px; } }
@media (max-width: 576px) { #contact { padding: 60px 0; } .contact-form-container { padding: 25px; } .form-group.half { flex: 0 0 100%; } .contact-form label, .contact-form input, .contact-form select, .contact-form textarea { font-size: 0.95rem; } .submit-btn { width: 100%; } }


/* Footer Styles */
footer { background-color: #121212; }
.footer-bottom .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-bottom { padding: 20px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { color: #757575; font-size: 0.9rem; margin: 0; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: #757575; font-size: 0.9rem; transition: color 0.3s ease; }
.footer-legal a:hover { color: #20C9D4; text-decoration: none; }
@media (max-width: 576px) { .footer-bottom .container { flex-direction: column; text-align: center; } .footer-legal { margin-top: 15px; justify-content: center; } }


/* Back to Top Button */
#back-to-top { position: fixed; bottom: 30px; right: 30px; background-color: #20C9D4; color: #121212; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 999; }
#back-to-top.show { opacity: 1; visibility: visible; }
#back-to-top:hover { background-color: #1AA2AD; transform: translateY(-5px); text-decoration: none; }

/* NEW Data-Backed Features Section Styles */
#features-data-backed {
    background-color: #0e0e0e; /* UPDATED: Was #fdfdfd, now light gray */
    padding: 80px 0;
    font-family: 'Nunito', sans-serif;
    display: flex; /* Enable flexbox for centering */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
}

#features-data-backed .container {
    max-width: 1200px;
    margin: 0 auto;
    /* padding: 0 20px; */ /* This was effectively overridden by the padding below */
    /* background-color: #ffffff; */ /* REMOVED for cardless section */
    /* border-radius: 15px; */ /* REMOVED for cardless section */
    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); */ /* REMOVED for cardless section */
    padding: 60px 50px; /* Kept to maintain content spacing, was card's inner padding */
}

.features-data-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

.features-data-text {
    flex: 1;
    color: #333333;
}

.features-data-text h2 {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #20C9D4 0%, #bb86fc 50%, #20C9D4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block; 
    background-size: 200% auto;
    animation: gradient-continuous-flow 6.67s linear infinite;
}

.features-data-text p {
    font-size: 1.3rem;
    line-height: 1.7;
    color: #ffffff;
    max-width: 450px;
}

.features-data-grid {
    flex: 1.2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.feature-data-item {
    background-color: #1f1f1f; /* Dark background to match theme */
    padding: 30px 25px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #2a2a2a;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-data-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.feature-data-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(32, 201, 212, 0.1); /* UPDATED: rgba of #20C9D4 */
    color: #20C9D4; /* UPDATED */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 20px auto;
    opacity: 0;
    transform: scale(0.9);
}

.feature-data-number-wrapper {
    margin-bottom: 5px; /* Reduced from 10px to tighten space after larger number */
    position: relative;
}

.feature-data-number {
    font-size: 6rem; 
    font-weight: 700;
    color: #ffffff; /* Dimmed from pure white for better readability */
    line-height: 1.0;
    transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
}

.feature-data-suffix {
    font-size: 1.8rem;
    font-weight: 600;
    color: #ffffff; /* Light color for dark background */
    margin-left: 5px;
    opacity: 0; /* Initially hidden, JS makes it visible */
    min-height: 4.5em;
    transition: color 0.5s ease-in-out; /* Transition for color changes */
}

.feature-data-description {
    font-size: 0.9rem;
    color: #b0b0b0;
    line-height: 1.5;
    opacity: 0;
}

/* Highlight class for feature numbers after animation */
.feature-data-item-highlighted .feature-data-number {
    color: #20C9D4;
    text-shadow: 0 0 15px rgba(32, 201, 212, 0.7);
}

/* Suffix color when item is highlighted */
.feature-data-item-highlighted .feature-data-suffix {
    color: #20C9D4;
}

/* Fade out the glow (text-shadow) AND revert number color */
.feature-data-item-glow-fade .feature-data-number {
    color: #ffffff; /* Revert number to base light color */
    text-shadow: none;
}

/* Revert suffix color when glow fades and number color reverts */
.feature-data-item-glow-fade .feature-data-suffix {
    color: #ffffff; /* Revert suffix to base light color */
}

/* Responsive Styles for Data-Backed Features */
@media (max-width: 992px) {
    .features-data-content {
        flex-direction: column;
        text-align: center;
    }
    .features-data-text {
        margin-bottom: 40px;
    }
    .features-data-text p {
        max-width: 100%;
    }
    .features-data-grid {
        width: 100%; /* Take full width on smaller screens */
    }
}

@media (max-width: 576px) {
    #features-data-backed .container {
        padding: 40px 20px;
    }
    .features-data-text h2 {
        font-size: 2.2rem;
    }
    .features-data-text p {
        font-size: 1rem;
    }
    .features-data-grid {
        grid-template-columns: 1fr; /* Stack items on mobile */
        gap: 20px;
    }
    .feature-data-number {
        font-size: 2.8rem;
    }
    .feature-data-suffix {
        font-size: 1.5rem;
    }
}



/* Add styles for #how-we-do-it section spacing */
#how-we-do-it {
    /* padding-top: 80px; */ /* Removed, title is now absolute */
    /* position: relative; */ /* No longer needed for absolute title */
    padding-top: 40px; /* Initial spacing for the section before sticky content */
    /* background-color: #121212; */ /* Retain if needed for section background */
    scroll-margin-top: -1vh; /* Adjust scroll stop point */
}

/* Adjust margin for the title now INSIDE the pinned content */
#how-we-do-it-pinned-content > .container .section-gradient-title-wrapper {
    margin-bottom: 30px; /* Space between title and animation within the pinned block */
}


/* Add top padding to the pinned content to make space for the absolute title */
#how-we-do-it-pinned-content {
    /* padding-top: 220px; */ /* Removed, title is now part of this flow */
    padding-top: 0; /* Title is now first child, section provides initial top space */
}

#testimonials-scrolling .container { /* For the title and subtitle */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    margin-bottom: 80px; /* MODIFIED: Was 50px, increased space to reviews */
}

.feature-data-item-glow-fade .feature-data-suffix {
    color: #c9d1d9; 
    text-shadow: 0 0 0px rgba(32, 201, 212, 0); 
}

#mobile-browser-bar {
    display: none;
}

@media (max-width: 992px) {
    /* Features section: 2 columns on tablets */
    .features-data-content {
        flex-direction: column;
        text-align: center;
    }
    .features-data-text {
        margin-bottom: 40px;
    }
    .features-data-text p {
        max-width: 100%;
    }
    .features-data-grid {
        width: 100%; /* Take full width on smaller screens */
    }
}