/* Basic Reset and Font (adjust font-family to match exact design) */
:root {
    --site-max-width: 1200px;
    --site-padding: 20px;
    --site-font: 'Roboto', sans-serif;
}

body {
    margin: 0;
    font-family: var(--site-font);
    background-color: #f7f7f7; /* Light background matching the image */
    color: #1a1a1a;
}

/* Consistent heading sizes across the site */
/* Use clamp so headings scale but remain consistent between pages */
h1, .hero-title, .main-heading {
    font-family: var(--site-font);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.5rem); /* main page headings */
    line-height: 1.1;
    margin: 0 0 0.75rem 0;
}

h2, .section-title {
    font-family: var(--site-font);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    margin: 0 0 0.6rem 0;
}

h3 {
    font-family: var(--site-font);
    font-weight: 600;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    margin: 0 0 0.5rem 0;
}

/* Ensure smaller headings and labels inherit the same font */
h4, h5, h6, .card-title, .description-text {
    font-family: var(--site-font);
}

/* --- Hero Section Layout (Desktop/Large Screens) --- */
.hero-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligns content to the top */
    max-width: var(--site-max-width); /* Unified container width */
    margin: 60px auto; /* Centering the layout with top/bottom margin */
    padding: 0 var(--site-padding);
    gap: 30px; /* Spacing between the three main columns */
}

.hero-content {
    flex: 1; /* Takes up one part of the space */
    padding-top: 50px; /* Align title baseline with image top */
    max-width: 420px; /* allow a bit more room for content */
}

.hero-image-container {
    flex: 0 0 45%; /* Use percentage so image scales with container */
    max-width: 520px;
    height: auto;
}

.hero-sidebar {
    flex: 1; /* Takes up one part of the space */
    padding-top: 50px; 
    max-width: 420px;
}

/* --- Typography and Element Styling --- */
.hero-title {
    font-size: 3.5em; /* Large, bold text */
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 30px 0;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
    max-height: 80vh; /* Prevent the image from exceeding viewport height */
    object-fit: cover; /* Fill the image container consistently */
}

/* Apply unified container width/padding to main sections/header */
.expertise-section,
.about-section {
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-padding);
    padding-right: var(--site-padding);
    box-sizing: border-box;
}

header.main-header {
    width: 100%;
    background: transparent;
}



.intro-text {
    font-size: 1.1em;
    line-height: 1.5;
    margin-bottom: 30px;
}

.contact-info {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #1a1a1a; /* Underline for the email */
    padding-bottom: 5px;
    margin-bottom: 40px;
    margin-top: 50px
    ;
}

.email-icon {
    font-size: 1.2em;
    margin-right: 10px;
}

.email-link {
    color: #1a1a1a;
    text-decoration: none;
    font-size: 1.1em;
}

.social-icons {
    margin-bottom: 40px;
    margin-top: 70px;
}

.social-icon {
    width: 40px; /* Size of the small profile images */
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    border: 2px solid #fff; /* White border for separation */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Make any responsive images behave consistently */
.responsive-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.quote {
    font-style: italic;
    font-size: 1.1em;
    margin: 0;
    padding: 0;
    border: none;
    text-align: right; /* Aligns to the right as in the image */
}

/* Hire Me Button Styling */
.hire-me {
    display: inline-block;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: 500;
    position: relative;
    padding-bottom: 5px;
}

.hire-me .underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%; /* Shorter underline */
    height: 2px;
    background-color: #1a1a1a;
}

/* --- Responsiveness (Tablet and Mobile) --- */
@media (max-width: 992px) {
    .hero-section {
        flex-direction: column; /* Stack columns vertically */
        align-items: center;
        margin: 40px auto;
        padding: 0 12px;
    }

    .hero-content, 
    .hero-sidebar,
    .hero-image-container {
        max-width: 100%; /* Use full width */
        width: 100%;
        padding-top: 0;
        text-align: center; /* Center content when stacked */
    }

    .hero-title {
        font-size: 3em;
        margin-top: 20px;
    }

    .hero-image-container {
        order: 0; /* Keep DOM order so heading (hero-content) appears first */
        flex: none; /* Remove fixed flex properties */
        max-width: 420px; /* Constrain image width for better look */
        width: 100%;
    }
    
    .social-icons {
        display: flex;
        justify-content: center;
    }

    .contact-info {
        justify-content: center;
    }

    .quote {
        text-align: center; /* Center quote on mobile */
    }
}

/* Larger-screen tweaks: make image even bigger on wide viewports */
@media (min-width: 1400px) {
    .hero-image-container {
        flex: 0 0 600px; /* extra-large image on very wide screens */
    }

    .hero-content, .hero-sidebar {
        max-width: 480px;
    }
}
/* --- Navbar Styling --- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px; /* Matching the hero section padding */
    background-color: transparent; /* Assuming the background is the light page color */
    position: relative; /* If you want it part of the flow */
}

.logo a {
    font-size: 1.5em;
    font-weight: 700;
    text-decoration: none;
    color: #1a1a1a;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px; /* Space between navigation items */
}

.main-nav li a {
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 500;
    padding-bottom: 3px;
    position: relative;
    transition: color 0.3s;
}

.main-nav li a:hover,
.main-nav li a.active {
    color: #007bff; /* Example hover/active color */
}

/* Underline effect for active/hover */
.main-nav li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #1a1a1a;
    left: 0;
    bottom: 0;
    transition: width 0.3s;
}

.main-nav li a:hover::after,
.main-nav li a.active::after {
    width: 100%;
}

/* --- Navbar Responsiveness --- */
@media (max-width: 768px) {
    .main-header {
        flex-direction: column;
        padding: 20px 20px 10px 20px;
    }

    .main-nav {
        margin-top: 15px;
    }

    .main-nav ul {
        flex-wrap: wrap; /* Allows links to wrap on very small screens */
        justify-content: center;
        gap: 15px 20px;
    }
}
.social-icons {
    display: flex;
    gap: 12px;
}

.social-circle {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #1a1a1a15;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-decoration: none;
    transition: 0.3s;
}

.social-circle svg {
    width: 22px;
    height: 22px;
    fill: #1a1a1a;
    transition: 0.3s;
}

.social-circle:hover {
    transform: scale(1.15);
    border-color: #1a1a1a;
}

.social-circle:hover svg {
    fill: #0077ff;
}
/*section2
/* --- Expertise Section Styling (Matching Image) --- */
.expertise-section {
    width: 100%;
    background-color: #000; /* Black background full-width */
    color: #fff; /* White text for contrast */
    padding: 80px 0; /* vertical padding only so background spans full width */
}

.expertise-container {
    display: flex;
    max-width: var(--site-max-width); /* constrain inner content */
    margin: 0 auto;
    gap: 30px; /* Space between the four cards */
    padding: 0 var(--site-padding); /* horizontal padding inside the full-width section */
    box-sizing: border-box;
}

.expertise-card {
    flex: 1; /* Ensures all four cards take equal space */
    padding: 20px;
}

/* Icon Styling (The neon-lime color) */
.expertise-card .icon {
    display: block;
    font-size: 2.5em;
    color: #ccff00; /* Neon Lime/Yellow color */
    margin-bottom: 20px;
}

.expertise-card .card-title {
    font-size: 1.4em;
    font-family: var(--site-font);
    font-weight: 700;
    color: #ccff00; /* Title in neon color */
    margin-top: 0;
    margin-bottom: 15px;
}

.expertise-card .card-description {
    font-size: 1em;
    line-height: 1.6;
    color: #ccc; /* Slightly muted white for body text */
}

/* --- Responsiveness: Stack columns on Tablet/Mobile --- */
@media (max-width: 992px) {
    .expertise-container {
        /* On screens narrower than 992px, switch to 2 columns */
        flex-wrap: wrap; 
        justify-content: space-around;
        gap: 40px;
    }

    .expertise-card {
        /* Each card takes up almost half the width, stacking two per row */
        flex: 0 0 calc(50% - 20px); 
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 600px) {
    .expertise-section {
        padding: 50px 20px; /* Reduce padding on smallest screens */
    }
    
    .expertise-container {
        /* On screens narrower than 600px, stack to 1 column */
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .expertise-card {
        /* Full width for single-column stack */
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center; /* Center content for better mobile look */
    }
    
    .expertise-card .icon {
        margin-left: auto;
        margin-right: auto;
    }
}
/* --- Expertise Card Styling with Shadow --- */
.expertise-card {
    flex: 1; 
    padding: 20px;
    
    /* ADDED: Subtle White/Light Shadow */
    /* 0 0 10px: No horizontal/vertical offset, 10px blur */
    /* rgba(255, 255, 255, 0.1): White color with 10% opacity for a subtle glow */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); 
    
    /* ADDED: Optional border or background hover effect to show interactivity */
    transition: box-shadow 0.3s ease-in-out, transform 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Very light border to define edges */
}

/* Optional: Enhance the shadow on hover */
.expertise-card:hover {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.25); /* Stronger glow on hover */
    transform: translateY(-5px); /* Lift the card slightly */
}
/*section3
/* --- About Section Layout (Desktop) --- */
.about-section {
    width: 100%;
    padding: 80px 0; /* vertical padding so background spans full width */
    background-color: #fff; /* full-width white background */
    color: #1a1a1a;
}

.about-container {
    display: flex;
    max-width: var(--site-max-width);
    margin: 0 auto;
    gap: 30px; 
    align-items: flex-start;
    padding: 0 var(--site-padding);
    box-sizing: border-box;
}

.about-column {
    display: flex;
    flex-direction: column;
}

.column-left {
    flex: 1; /* Takes up one part of the space */
    gap: 30px; 
}

.column-center {
    flex: 1; /* Takes up one part of the space */
    gap: 30px;
}

.column-right {
    flex: 1; /* Takes up one part of the space */
    /* Add padding/margin to vertically align the title with the images */
    padding-top: 100px; 
}

/* --- Image and Text Block Styling --- */
.responsive-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.section-title {
    font-size: 1.2em;
    font-family: var(--site-font);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
}

.description-text {
    font-size: 1em;
    font-family: var(--site-font);
    line-height: 1.6;
    margin: 0;
}

.main-heading {
    font-size: 3em; 
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 30px 0;
}

/* About Us Link Styling (Similar to the Hire Me link) */
.about-link {
    display: inline-block;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: 500;
    position: relative;
    padding-bottom: 5px;
}

.about-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%; 
    height: 2px;
    background-color: #1a1a1a;
}


/* --- Responsiveness (Mobile First Approach) --- */

@media (max-width: 992px) {
    .about-container {
        flex-direction: column; /* Stack all columns */
        align-items: center;
        gap: 40px;
        padding: 0 20px;
    }

    .about-column {
        width: 100%;
        max-width: 600px; /* Constrain width for readability */
        padding-top: 0;
        text-align: center; /* Center content on mobile */
    }
    
    .content-block {
        margin-top: 30px; /* Add space between elements */
    }

    .main-heading {
        font-size: 2.5em;
        text-align: center;
        font-family: var(--site-font);
    }
    
    .about-link {
        margin: 0 auto; /* Center the "About Us" link */
    }
    
    /* Key for Responsiveness: Reordering content */
    /* Use 'order' to control stacking regardless of HTML order */
    /* Mobile Order: Image 1, Text 1, Image 2, Text 2, Title/Link */
    
    .image-wrapper.top-image { order: 1; }
    .content-block.what-i-know { order: 2; }
    
    .content-block.how-i-execute { order: 3; }
    .image-wrapper.bottom-image { order: 4; }

    .column-right { 
        order: 5; /* Move the main title and link to the bottom (last) */
    }

    /* Column left/center need to be restructured to ensure the correct image/text stacking */
    .column-left, .column-center {
        flex-direction: column;
    }

    /* Adjust the center column items to maintain the desired flow:
       How I Execute (text) should be before Image Two on mobile. 
       Since we used order on the individual blocks, we ensure the correct flow.
    */
    .column-center {
        /* On mobile, this column just becomes a container for ordered blocks */
        gap: 0; 
    }
    
    /* IMPORTANT: Re-adjusting the content order for the final mobile view */
    /* The blocks in the HTML need to be manually re-ordered to achieve:
       Image 1 -> How I Execute Text -> Image 2 -> What I Know Text -> Title
       To simplify, let's target the parent columns and adjust their internal element orders.
    */
    
    /* Adjusting to match the requested flow: Image (top) -> Text -> Image (bottom) -> Text -> Title */
    /* Let's redefine the mobile order based on the final visual sequence */
    
    .column-left { order: 1; } /* Image 1 & What I Know Text */
    .column-center { order: 2; } /* How I Execute Text & Image 2 */
    .column-right { order: 3; } /* Title */
    
    /* Within the columns, we need to ensure Image 1 is first: */
    .column-left > * { width: 100%; } /* Ensure sub-blocks are full width */
    .column-center > * { width: 100%; }
}

@media (max-width: 600px) {
    /* Refine mobile centering */
    .about-link::after {
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .about-link {
        text-align: center;
        display: block;
    }
}
/* --- Shadow Styles for Images and Text Blocks --- */

/* Style for the image wrappers */
.image-wrapper {
    /* Subtle shadow for depth */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    transition: box-shadow 0.3s ease;
}

.image-wrapper:hover {
    /* Slightly stronger shadow on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); 
}

/* Style for the text blocks ("How I Execute" and "What I Know") */
.content-block {
    padding: 20px;
    background-color: #fcfcfc; /* A slight off-white background to make the shadow visible */
    border-radius: 5px; /* Optional: adds soft corners */
    /* Subtle shadow for the text blocks */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); 
    transition: box-shadow 0.3s ease;
}

.content-block:hover {
    /* Slightly stronger shadow on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

/* --- Ensure Images Scale Correctly within the Shadow Box --- */
.responsive-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 5px; /* Match the content block radius */
}

/* --- Responsive Adjustments for Centering Shadows on Mobile --- */
@media (max-width: 992px) {
    /* Ensure all elements that are centered on mobile are contained within the shadow */
    .about-column {
        padding: 10px; /* Add some padding so the shadow doesn't touch the screen edge */
        box-sizing: border-box;
    }
}
/*section4
/* ================================
   Skills & Experience Section
================================ */

.skills-experience-section {
    background-color: #1a1a1a;
    padding: 100px 0;
    color: #fff;
}

/* Container */
.container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section Title */
.section-title {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 70px;
    letter-spacing: -1px;
}

/* ================================
   Experience Cards Grid
================================ */
.experience-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
}

.experience-card {
    padding: 45px;
    border-right: 1px solid #3a3a3a;
    background-color: #2a2a2a;
}

/* Remove border from last */
.experience-card:last-child {
    border-right: none;
}

/* Role */
.card-role {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Company (Neon Yellow) */
.card-company {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #d5ff3f;
}

/* Description */
.card-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #d0d0d0;
}

/* ================================
   Skill Bars
================================ */
.skills-bars-container {
    margin-top: 80px;
}

.skill-bar-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-bottom: 60px;
}

.skill-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Outer Bar */
.skill-bar-outer {
    position: relative;
    border-bottom: 2px solid #444;
    height: 5px;
}

/* Inner Progress Bar */
.skill-bar-inner {
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    background-color: #d5ff3f;
    width: 0%;
    transition: width 1.2s ease-in-out;
}

/* If width applied, border turns yellow */
.skill-bar-outer:has(.skill-bar-inner[style*="width"]) {
    border-bottom-color: #d5ff3f;
}

/* Percentage Label */
.skill-percentage {
    position: absolute;
    right: 0;
    top: -35px;
    background: #2a2a2a;
    padding: 6px 12px;
    font-size: 1rem;
    color: #fff;
    border: 1px solid #d5ff3f;
    border-radius: 4px;
}

/* ================================
   Responsive
================================ */

@media (max-width: 992px) {
    .experience-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .experience-cards-grid {
        grid-template-columns: 1fr;
    }

    .skill-bar-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .section-title {
        font-size: 2rem;
    }
}
/*section5
/* Updated CSS for the Design Section
    - Added box-shadow to .service-card.
*/

/* Define variables and base styles within the .finalcontainer */
.finalcontainer {
    --color-primary: #ecff30; /* Vibrant yellow-green */
    --color-dark: #222222;
    --color-light: #ffffff;
    --spacing-lg: 60px; /* Decreased from 80px */
    --spacing-md: 40px;
    --spacing-sm: 20px;
    
    /* Base styles now on the container, not body */
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--color-dark);
    background-color: var(--color-light); 
    margin: 0 auto;
    max-width: 1200px;
    padding: var(--spacing-md) var(--spacing-sm);
}


/* --- Services Block Styling (Now First Section) --- */

.content-block-services {
    text-align: center;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-lg);
}

.services-headline {
    /* DECREASED SIZE: clamp(2rem, 5vw, 3rem) changed to this */
    font-size: clamp(1.8rem, 4vw, 2.5rem); 
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-lg);
}

.services-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: var(--spacing-md);
    text-align: left;
}

.service-card {
    flex: 1 1 300px; 
    max-width: 350px;
    background-color: var(--color-light); /* Ensure background for shadow */
    padding: var(--spacing-sm);
    border-radius: 8px; /* Match icon border-radius */
    /* ADDED SHADOW */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth hover */
}

.service-card:hover {
    transform: translateY(-5px); /* Lift card slightly on hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* Slightly stronger shadow on hover */
}

.service-card h3 {
    font-size: 1.3rem; /* Adjusted for consistency */
    font-weight: 700;
    margin: 20px 0 10px 0;
}

.service-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #444; 
}

.service-icon {
    width: 60px;
    height: 60px;
    padding: 15px;
    border-radius: 8px; 
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.service-icon svg {
    height: 40px;
    width: 40px;
}

.icon-yellow {
    background-color: var(--color-primary);
    color: var(--color-dark);
}

.icon-dark {
    background-color: var(--color-dark);
    color: var(--color-primary);
}

/* --- Top Content Block Styling (Now Second Section) --- */

.content-block-top {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
    padding-top: var(--spacing-lg); /* Added space between sections */
}

.headline {
    /* DECREASED SIZE: clamp(3rem, 7vw, 4.5rem) changed to this */
    font-size: clamp(2.5rem, 6vw, 3.5rem); 
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 var(--spacing-md) 0;
    flex: 1 1 50%; 
}

.intro-text {
    flex: 1 1 40%; 
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0;
    padding-top: 10px; 
}

.intro-text p {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
}

/* --- Call-to-Action Banner Styling --- */

.cta-banner {
    background-color: var(--color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.cta-text {
    /* DECREASED SIZE: clamp(1.8rem, 4vw, 2.5rem) changed to this */
    font-size: clamp(1.5rem, 3.5vw, 2rem); 
    font-weight: 700;
    margin: 0;
}

.contact-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-dark);
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid var(--color-dark);
    padding-bottom: 4px;
    transition: opacity 0.3s;
}

.contact-link svg {
    margin-left: 8px;
    height: 18px;
    width: 18px;
    stroke: var(--color-dark);
}

.contact-link:hover {
    opacity: 0.7;
}

/* --- Responsiveness for Mobile/Tablet --- */

@media (max-width: 900px) {
    .content-block-top {
        flex-direction: column;
    }

    .headline, .intro-text {
        flex: 1 1 100%;
    }

    .headline {
        margin-bottom: var(--spacing-sm);
    }
    
    .intro-text {
        margin-bottom: var(--spacing-md);
    }
    
    .cta-banner {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .cta-text {
        margin-bottom: var(--spacing-sm);
    }

    .contact-link {
        margin-top: 10px;
    }
}
/* ================================
   CONTACT FORM STYLING
================================ */

.contact-section {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-sm);
    background-color: var(--color-light);
}

.contact-title {
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 2.3rem);
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
}

.contact-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: var(--spacing-md);
}

.contact-form-container {
    max-width: 700px;
    margin: 0 auto;
    background: var(--color-light);
    padding: var(--spacing-md);
    border-radius: 10px;

    /* Matching service-card shadow */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-sm);
}

.form-group label {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-dark);
}

.contact-form-container input,
.contact-form-container textarea {
    padding: 14px;
    border-radius: 8px;
    border: 1.5px solid #ccc;
    font-size: 1rem;
    outline: none;
    transition: border 0.2s ease;
    background-color: #fdfdfd;
}

.contact-form-container input:focus,
.contact-form-container textarea:focus {
    border-color: var(--color-primary);
}

.contact-btn {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    border: none;
    background-color: var(--color-primary);
    color: var(--color-dark);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.2s;
}

.contact-btn:hover {
    opacity: 0.9;
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 768px) {
    .contact-form-container {
        padding: var(--spacing-sm);
    }

    .contact-btn {
        font-size: 1.1rem;
    }
}
.contact-btn {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    border: none;
    background: var(--color-primary);
    color: var(--color-dark);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.4s ease, transform 0.2s ease;
}

/* NEW: Gradient Hover */
.contact-btn:hover {
    background: linear-gradient(90deg, #ecff30, #b2ff00, #89ff1a);
    transform: translateY(-3px);
}
.contact-btn {
    width: auto;                 /* Button adjusts to its text size */
    padding: 10px 18px;          /* Smaller padding */
    border-radius: 6px;          /* Slightly smaller corners */
    border: none;
    background: var(--color-primary);
    color: var(--color-dark);
    font-size: 1rem;             /* Smaller text */
    font-weight: 700;
    cursor: pointer;
    transition: background 0.4s ease, transform 0.2s ease;
    display: inline-block;
    margin-top: 10px;
}

/* Gradient Hover */
.contact-btn:hover {
    background: linear-gradient(90deg, #ecff30, #b2ff00, #89ff1a);
    transform: translateY(-2px);
}
 
/* Header container */
/* Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: right;
    padding: 15px 40px;
    background: transparent;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    
}

/* Logo */
.logo a {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

/* Navigation */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
    align-items: left;
}

/* Links */
.main-nav ul li a {
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    transition: 0.3s;
}

.main-nav ul li a:hover,
.main-nav ul li a.active {
    background: rgba(255,255,255,0.08);
}

/* Hamburger Icon */
.menu-icon {
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    display: none;
}

/* ------- RESPONSIVE ------- */
@media (max-width: 992px) {

    /* Center the icon */
    .menu-icon {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: block;
    }

    /* Adjust layout */
    .main-nav ul {
        position: absolute;
        top: 70px;
        right: 0;
        width: 200px;
        background: rgba(0,0,0,0.85);
        flex-direction: column;
        padding: 20px 0;
        text-align: center;
        display: none;
    }

    .main-nav ul.show {
        display: block;
    }

    /* Logo stays left */
    .logo a {
        position: relative;
        z-index: 1001;
    }
}



.ll{
    color: #89ff1a;
}
/*newnavbar
/* NAVBAR BASE */
.main-navbar {
    width: 100%;
    background: #ffffff;
    padding: 5px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    font-family: "Roboto", sans-serif;
}

.nav-container {
    width: 90%;
    max-width: 1300px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-size: 24px;
    font-weight: 900;
    color: #000;
    text-decoration: none;
}

/* MENU ITEMS */
.nav-menu {
    display: flex;
    gap: 30px;
}

.nav-menu li {
    list-style: none;
}

.nav-menu li a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
    transition: 0.3s ease;
}

.nav-menu li a:hover {
    color: #6c5ce7;
}

/* HAMBURGER ICON */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.nav-toggle span {
    width: 28px;
    height: 3px;
    background: #000;
    transition: 0.3s;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 850px) {
    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: #ffffff;
        flex-direction: column;
        text-align: center;
        padding: 20px 0;
        gap: 20px;

        display: none; /* HIDDEN BY DEFAULT */
    }

    .nav-menu.active {
        display: flex; /* SHOW WHEN ACTIVE */
    }
}