/* Base Button Styling (Applies to both) */
.btn-primary,
.btn-secondary {
    display: inline-block; /* Allows padding and width */
    padding: 18px 40px; /* Generous padding for a substantial feel */
    border-radius: 50px; /* Pill shape for a modern, soft look */
    text-decoration: none; /* Remove underline */
    font-weight: 700; /* Bolder text */
    font-size: 1.15em; /* Slightly larger, more impactful text */
    letter-spacing: 0.5px; /* A touch of letter spacing for elegance */
    transition: all 0.3s ease-in-out; /* Smooth transitions for all hover effects */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Soft, noticeable shadow for depth */
    position: relative; /* Needed for potential pseudo-elements or advanced effects */
    overflow: hidden; /* Ensures inner effects stay within button bounds */
    transform: perspective(1px) translateZ(0); /* Hardware acceleration for smoother animations */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Primary Button: View Our Work */
.btn-primary {
    /* Dynamic gradient from a professional blue to a vibrant green */
    background: linear-gradient(135deg, #5100ff 0%, #ff7300 100%);
    color: #ffffff; /* White text for contrast */
    border: none; /* No border for a seamless gradient look */
}

.btn-primary:hover {
    /* Shift the gradient slightly on hover for an animated feel */
    background: linear-gradient(135deg, #ff0000 0%, #d000ff 100%);
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 12px 25px rgba(0, 123, 255, 0.4); /* Larger, more pronounced shadow */
}

.btn-primary:active {
    transform: translateY(-2px); /* Slight press effect when clicked */
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.3);
}

/* Secondary Button: Get a Free Quote */
.btn-secondary {
    /* Dynamic gradient from a sophisticated purple to a warm orange */
    background: linear-gradient(135deg, #2f0085 0%, #fd7e14 100%);
    color: #ffffff; /* White text */
    border: none;
    margin-left: 20px; /* Space between buttons */
}

.btn-secondary:hover {
    /* Shift the gradient slightly on hover */
    background: linear-gradient(135deg, #ff1717 0%, #4f0063 100%);
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 12px 25px rgba(111, 66, 193, 0.4); /* Larger, more pronounced shadow */
}

.btn-secondary:active {
    transform: translateY(-2px); /* Slight press effect */
    box-shadow: 0 5px 10px rgba(111, 66, 193, 0.3);
}

/* Optional: Add a subtle text shadow for better readability on gradients */
.btn-primary,
.btn-secondary {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* For a more defined, professional look if not using a dark/night mode */
/* If you want outline buttons for night mode, keep the night mode CSS from previous example */


/* Services*/

/* --- CSS Variables for Professional Orange Palette (from previous steps) --- */
/* Ensure these are defined globally or within a :root selector */
:root {
    --orange-light: #FF8C00; /* DarkOrange - a vibrant but mature orange */
    --orange-mid: #E65100;   /* Burnt Orange - deeper, richer */
    --orange-dark: #CC4500;  /* Even deeper, almost reddish-brown orange */

    /* RGB values for box-shadows, derive from hex codes manually or via preprocessor */
    --orange-mid-rgb: 230, 81, 0; /* RGB for #E65100 */
    --orange-dark-rgb: 204, 69, 0; /* RGB for #CC4500 */

    --secondary-orange-light: #FF7043; /* Slightly redder, warm orange */
    --secondary-orange-dark: #D84315; /* Deeper version of the above */
    --secondary-orange-darker: #BE360F; /* Even deeper for hover */
    
    --secondary-orange-dark-rgb: 216, 67, 21; /* RGB for #D84315 */

    /* A deep background color, similar to your current dark theme */
    --bg-dark-primary: #1a1a2e; 
    --bg-dark-secondary: #282c3f; /* Slightly lighter dark for boxes */
    --text-light: #e0e0e0;
    --text-muted: #b0b0b0;
    --text-highlight-default: #a7c5ed; /* A soft blue/indigo for default highlight */
}

/* --- Section Background (From your HTML: bg-gray-900) --- */
#services {
    background-color: var(--bg-dark-primary); /* Use our defined variable for consistency */
    padding: 6rem 0; /* py-16 is roughly 6rem */
}

#services .container {
    max-width: 1200px; /* Tailwind's mx-auto with container */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
}

#services h2 {
    color: var(--text-light); /* text-white */
    font-size: 2.5rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
}

/* --- Service Icon Box Styling --- */
.service-icon-box {
    background-color: var(--bg-dark-secondary); /* A slightly lighter dark for the box */
    border-radius: 12px; /* Rounded corners for modern look */
    padding: 40px; /* Generous padding */
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth and slightly bouncy transition */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Subtle initial shadow */
    border: 1px solid rgba(255, 255, 255, 0.08); /* A very subtle light border */
    position: relative; /* For potential future effects */
    overflow: hidden; /* Important for any inner element effects */
}

/* Service Box Hover State (Sexy & Professional) */
.service-icon-box:hover {
    background: linear-gradient(135deg, var(--orange-mid) 0%, var(--secondary-orange-dark) 100%); /* Orange gradient on hover */
    transform: translateY(-10px); /* Lift effect */
    box-shadow: 0 15px 35px rgba(var(--orange-mid-rgb), 0.5), 0 0 20px rgba(255, 140, 0, 0.6); /* More pronounced, orange-tinted shadow */
    border-color: var(--orange-light); /* Highlight border with orange */
}

/* Image Styling within the Service Box */
.service-icon-box img {
    width: 80px; /* Adjust size as needed, mb-4 is 1rem margin-bottom */
    height: 80px; /* Ensure aspect ratio is kept */
    object-fit: contain; /* Prevents stretching */
    margin-bottom: 1rem;
    filter: brightness(1) grayscale(0%); /* Default: no filter */
    transition: filter 0.4s ease-in-out, transform 0.4s ease-in-out; /* Smooth filter and scale transition */
}

/* Image Hover Effect: Make it Orange! */
.service-icon-box:hover img {
    /* This combination often yields a good orange/golden tint for various image colors. */
    /* You might need to tweak these values based on your specific image set. */
    filter: brightness(1.2) saturate(2) hue-rotate(-20deg) sepia(0.8) contrast(1.1);
    transform: scale(1.1); /* Slightly enlarge image on hover */
}

/* Heading Styling within Service Box */
.service-icon-box h3 {
    font-size: 1.5em; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: var(--text-highlight-default); /* Default text-indigo-300 refined */
    margin-bottom: 0.5rem; /* mb-2 */
    transition: color 0.4s ease-in-out;
}

/* Heading Hover Effect (changes to white/brighter on orange background) */
.service-icon-box:hover h3 {
    color: #ffffff; /* White text on orange hover */
}

/* Paragraph Styling within Service Box */
.service-icon-box p {
    font-size: 0.95em; /* text-sm */
    color: var(--text-muted); /* text-gray-400 refined */
    transition: color 0.4s ease-in-out;
    line-height: 1.5;
}

/* Paragraph Hover Effect (changes to white/brighter on orange background) */
.service-icon-box:hover p {
    color: #ffffff; /* White text on orange hover */
}

/* Grid Layout (from your HTML: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8) */
.grid {
    display: grid;
    grid-template-columns: 1fr; /* Default for mobile */
    gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) { /* md breakpoint */
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Service Detail Area Styling (if it's shown) --- */
#service-detail-area {
    margin-top: 3rem; /* mt-12 */
    background-color: var(--bg-dark-secondary); /* bg-gray-800 refined */
    padding: 2.5rem; /* p-8 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* shadow-inner refined */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#service-detail-area h3 {
    font-size: 2em; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: var(--orange-light); /* text-indigo-400 refined to orange */
    margin-bottom: 1rem; /* mb-4 */
}

#service-detail-area p {
    color: var(--text-light); /* text-gray-300 refined */
    line-height: 1.7; /* leading-relaxed */
    font-size: 1.15em; /* text-lg */
    margin-bottom: 1.5rem; /* mb-6 */
}

/* --- "Learn More" Button inside Service Detail --- */
/* This will inherit the btn-primary styles you already have */
/* Make sure your btn-primary CSS block is loaded AFTER these styles, or is also in this same file. */

/* Section*?


/* --- External CSS for PixelPerfect About Section --- */

/* --- CSS Variables for easy customization --- */
:root {
    --color-bg-deep: #0A0A0A; /* Deeper charcoal for dark mode */
    --color-bg-darker: #1A1A1A;   /* Slightly lighter dark */
    --color-accent-blue: #6366F1; /* Indigo */
    --color-accent-purple: #8B5CF6; /* Violet */
    --color-text-primary: #E0E0E0; /* Light gray text */
    --color-text-secondary: #CBD5E1; /* Muted gray text */
    --color-text-highlight: #FFFFFF; /* Pure white */
    --shadow-strong: 0 15px 30px rgba(0, 0, 0, 0.5);
    --shadow-subtle: 0 5px 15px rgba(0, 0, 0, 0.3);
    --border-radius-card: 1.25rem; /* More rounded corners */
    --transition-duration: 0.5s;
}

/* --- Base Section Styling --- */
.about-section-v3 {
    background: linear-gradient(160deg, var(--color-bg-deep) 0%, var(--color-bg-darker) 100%);
    padding: 100px 0; /* Ample vertical padding */
    position: relative;
    overflow: hidden; /* Important for any expanding elements/shadows */
    color: var(--color-text-primary);
    font-family: 'Inter', sans-serif; /* Recommended modern font, ensure it's imported in your HTML */
    text-align: center; /* Center aligns content by default, overridden by grid for larger screens */
}

/* --- Container for content (replaces Tailwind's container) --- */
.about-container-plain {
    max-width: 1280px; /* Equivalent to max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* Equivalent to px-6 */
    padding-right: 1.5rem; /* Equivalent to px-6 */
}

/* --- Subtle background glow/effect --- */
.about-section-v3::before,
.about-section-v3::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.1; /* Very subtle glow */
    filter: blur(120px); /* Large, soft blur */
    z-index: 0;
    animation: pulseBackground 10s infinite alternate ease-in-out;
}

.about-section-v3::before {
    background: radial-gradient(circle, var(--color-accent-blue), transparent 60%);
    width: 450px;
    height: 450px;
    top: -100px;
    left: -100px;
}

.about-section-v3::after {
    background: radial-gradient(circle, var(--color-accent-purple), transparent 60%);
    width: 550px;
    height: 550px;
    bottom: -120px;
    right: -120px;
    animation-delay: 1.5s; /* Stagger animation */
}

@keyframes pulseBackground {
    0% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.05); opacity: 0.15; }
    100% { transform: scale(1); opacity: 0.1; }
}

/* --- Grid Wrapper for Columns --- */
.about-grid-wrapper-v3 {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 4rem; /* Generous space between columns/rows */
    align-items: center; /* Vertically center items in grid */
    position: relative; /* Ensure content is above background effects */
    z-index: 1;
}

@media (min-width: 1024px) { /* Corresponds to Tailwind's 'lg' breakpoint */
    .about-grid-wrapper-v3 {
        grid-template-columns: 1.2fr 0.8fr; /* Text column slightly wider */
        text-align: left; /* Align text to left within its column */
    }
}

/* --- Text Column Styling --- */
.about-text-column-v3 {
    padding: 1rem;
}

/* --- Headings --- */
.about-heading-v3 {
    font-size: 3.25rem; /* Larger, more impactful */
    font-weight: 900; /* Even bolder */
    line-height: 1.15;
    letter-spacing: -0.06em; /* Tighter for a modern look */
    margin-bottom: 1.75rem;
    color: var(--color-text-highlight);
    text-shadow: 0 6px 20px var(--shadow-strong); /* Deeper text shadow */
}

.about-highlight-v3 {
    background: linear-gradient(90deg, var(--color-accent-blue), var(--color-accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Essential for gradient text */
}

.about-subheading-v3 {
    font-size: 1.875rem; /* Punchy subheading */
    font-weight: 600; /* Semibold */
    color: var(--color-accent-blue);
    margin-bottom: 2.5rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* --- Paragraphs --- */
.about-paragraph-v3 {
    font-size: 1.05rem; /* Slightly refined size */
    line-height: 1.75; /* Excellent readability */
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

.about-paragraph-v3:last-of-type {
    margin-bottom: 3rem; /* More space before button */
}

.about-strong-v3 {
    color: var(--color-text-highlight);
    font-weight: 700;
}

/* --- Button Styling --- */
.about-button-v3 {
    display: inline-block;
    background: linear-gradient(45deg, var(--color-accent-blue) 0%, var(--color-accent-purple) 100%);
    color: var(--color-text-highlight);
    font-weight: 700;
    padding: 1rem 3rem; /* Generous button size */
    border-radius: 50px; /* Pill shape */
    box-shadow: 0 10px 25px var(--shadow-strong), inset 0 0 0 1px rgba(255,255,255,0.1);
    transition: all var(--transition-duration) ease-out;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1; /* Above other elements */
    transform: perspective(1px) translateZ(0); /* For consistent hardware acceleration */
}

.about-button-v3:hover {
    transform: translateY(-4px) scale(1.03); /* More noticeable lift and scale */
    box-shadow: 0 18px 40px var(--shadow-strong), inset 0 0 0 2px rgba(255,255,255,0.15);
    background: linear-gradient(45deg, var(--color-accent-purple) 0%, var(--color-accent-blue) 100%); /* Reverse gradient on hover */
}

.about-button-v3:active {
    transform: translateY(0px) scale(0.98); /* Subtle press effect */
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}

/* Button "shine" effect on hover */
.about-button-v3::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15); /* White highlight */
    transform: skewX(-30deg);
    transition: left var(--transition-duration) ease-in-out;
    z-index: -1;
}

.about-button-v3:hover::before {
    left: 100%; /* Slide shine across */
}


/* --- Image Column Styling --- */
.about-image-column-v3 {
    display: flex;
    justify-content: center; /* Horizontally center image */
    align-items: center; /* Vertically center image */
    padding: 1rem;
    perspective: 1500px; /* Stronger 3D perspective */
}

/* --- Image Styling --- */
.about-image-v3 {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-card);
    box-shadow: 0 20px 50px var(--shadow-strong), 0 0 0 3px var(--color-accent-blue); /* Deeper shadow, pronounced border */
    transition: transform var(--transition-duration) ease-in-out, box-shadow var(--transition-duration) ease-in-out;
    cursor: pointer;
    transform: rotateY(-8deg) rotateX(5deg) scale(1); /* More pronounced initial tilt */
    filter: brightness(0.9); /* Slightly dim initial image */
}

.about-image-v3:hover {
    transform: rotateY(0deg) rotateX(0deg) scale(1.05); /* Straighten and enlarge significantly */
    box-shadow: 0 30px 70px var(--shadow-strong), 0 0 0 4px var(--color-accent-purple); /* Even deeper shadow, accent changes */
    filter: brightness(1.05); /* Slightly brighter on hover */
}

/* --- Fade-in Animations --- */
/* Ensure these keyframes are defined for the animations to work */
@keyframes fade-in-left {
    0% { opacity: 0; transform: translateX(-40px); } /* More prominent initial shift */
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-right {
    0% { opacity: 0; transform: translateX(40px); } /* More prominent initial shift */
    100% { opacity: 1; transform: translateX(0); }
}

/* Initial state and animation application with delays */
.animate-fade-in-left,
.animate-fade-in-right {
    opacity: 0; /* Hidden initially */
    animation-duration: 0.9s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards; /* Keep the end state of the animation */
}

.animate-fade-in-left { animation-name: fade-in-left; }
.animate-fade-in-right { animation-name: fade-in-right; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

/*msme card etc*/
/* --- CSS Variables for easy customization (Refined for Sexy Professional) --- */
:root {
    /* Purples for section background gradient */
    --section-bg-deep-purple: #1A0D3F; /* Deeper, rich purple */
    --section-bg-medium-purple: #3A1A70; /* Muted, medium purple */

    /* Colors for card base state (subtle orangish vibe) */
    --card-base-bg: rgba(255, 140, 0, 0.08); /* Translucent, subtle orange background */
    --card-base-border: rgba(255, 140, 0, 0.2); /* Translucent, subtle orange border */
    --card-base-shadow: rgba(0, 0, 0, 0.3); /* Dark, subtle shadow for base */
    --card-base-glow: rgba(255, 140, 0, 0.1); /* Very subtle orange glow */

    /* Colors for card hover state (purplish vibe) */
    --card-hover-bg: rgba(94, 53, 177, 0.15); /* Translucent, darker purple background */
    --card-hover-border: rgba(126, 87, 194, 0.5); /* Clearer, more vibrant purple border */
    --card-hover-shadow: rgba(0, 0, 0, 0.6); /* Deeper shadow on hover */
    --card-hover-glow: rgba(126, 87, 194, 0.4); /* More pronounced purple glow on hover */

    /* General shadows and transitions */
    --global-shadow-dark: rgba(0, 0, 0, 0.7); /* Stronger, transparent black shadow */
    --transition-fast: 0.3s;
    --transition-normal: 0.5s;

    /* Border Radii */
    --border-radius-wrapper: 20px; /* More rounded outer container */
    --border-radius-item: 12px; /* Slightly more rounded individual cards */
}

/* --- Section Styling --- */
.partners-marquee-section {
    background: linear-gradient(135deg, var(--section-bg-deep-purple) 0%, var(--section-bg-medium-purple) 100%);
    padding: 80px 0; /* More vertical padding for a grander feel */
    overflow: hidden;
    position: relative;
    /* Ensure text color is light if there's any text in this section */
    color: #E0E0E0; /* Light text for dark background */
    font-family: 'Inter', sans-serif; /* Professional font */
}

/* --- Container Styling (for centering and max-width) --- */
.partners-container {
    max-width: 1280px; /* Consistent max width */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    padding-left: 1.5rem; /* Horizontal padding */
    padding-right: 1.5rem; /* Horizontal padding */
}

/* --- Marquee Wrapper Styling (the visible window) --- */
.partners-marquee-wrapper {
    overflow: hidden;
    position: relative;
    border-radius: var(--border-radius-wrapper);
    box-shadow: 0 15px 40px var(--global-shadow-dark); /* Deeper, professional shadow */
    background-color: rgba(255, 255, 255, 0.05); /* Very subtle translucent white background for wrapper */
    padding: 25px 0; /* Increased vertical padding inside the wrapper */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle, light border */
}

/* --- Marquee Content Styling (the actual moving strip) --- */
.partners-marquee-content {
    display: flex;
    width: fit-content; /* This allows the content to dictate its width based on all duplicated items */
    animation: marquee-animation 45s linear infinite; /* Adjusted duration for smoother, slower loop */
    /* Duration can be fine-tuned based on total content width and desired speed */
}

/* Pause animation on hover */
.partners-marquee-content:hover {
    animation-play-state: paused;
}

/* --- Marquee Animation Keyframes --- */
@keyframes marquee-animation {
    0% { transform: translateX(0%); }
    /* This moves the content exactly half its width, assuming you've duplicated
       the entire set of logos exactly once for a seamless loop. */
    100% { transform: translateX(-50%); }
}

/* --- Individual Logo Item Styling (the "cards") --- */
.partner-logo-item {
    flex-shrink: 0;
    width: 170px; /* Slightly wider cards */
    height: 100px; /* Slightly taller cards */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem; /* More internal padding */
    border-radius: var(--border-radius-item);
    margin: 0 20px; /* Increased spacing between cards */
    background-color: var(--card-base-bg); /* Translucent orangish vibe background */
    border: 1px solid var(--card-base-border); /* Translucent orangish border */
    box-shadow: 0 5px 15px var(--card-base-shadow), 0 0 10px var(--card-base-glow); /* Subtle shadow and glow */
    transition: background-color var(--transition-fast) ease,
                border-color var(--transition-fast) ease,
                box-shadow var(--transition-fast) ease,
                transform var(--transition-fast) ease;
    cursor: pointer;
    position: relative; /* For potential pseudo-elements or z-index */
    z-index: 1; /* Ensure it's above any background effects */
}

.partner-logo-item:hover {
    background-color: var(--card-hover-bg); /* Translucent purple background on hover */
    border-color: var(--card-hover-border); /* Vibrant purple border on hover */
    box-shadow: 0 8px 20px var(--card-hover-shadow), 0 0 15px var(--card-hover-glow); /* Deeper shadow and pronounced purple glow */
    transform: translateY(-10px) scale(1.06); /* More pronounced lift and enlarge on hover */
}

/* --- Image Styling --- */
.partner-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(80%) brightness(120%); /* More grayscale, slightly brighter */
    opacity: 0.75; /* Good initial visibility */
    transition: filter var(--transition-fast) ease, opacity var(--transition-fast) ease;
}

.partner-logo-img:hover {
    filter: grayscale(0%) brightness(100%); /* Full color and normal brightness on hover */
    opacity: 1; /* Fully opaque on hover */
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) { /* Adjustments for larger tablets/laptops */
    .partners-marquee-section {
        padding: 60px 0;
    }
    .partner-logo-item {
        width: 150px;
        height: 90px;
        margin: 0 15px;
    }
    .partners-marquee-content {
        animation-duration: 40s;
    }
}

@media (max-width: 768px) { /* For tablets and smaller screens */
    .partners-marquee-section {
        padding: 40px 0;
    }
    .partner-logo-item {
        width: 120px; /* Smaller width for logos */
        height: 72px; /* Smaller height for logos */
        margin: 0 10px;
    }
    .partners-marquee-content {
        animation-duration: 35s; /* Adjust speed for smaller screens */
    }
}

@media (max-width: 480px) { /* For extra small screens/phones */
    .partners-marquee-wrapper {
        padding: 15px 0;
    }
    .partner-logo-item {
        width: 90px;
        height: 55px;
        margin: 0 8px;
    }
    .partners-marquee-content {
        animation-duration: 30s; /* Faster scroll on very small screens */
    }
}

/*Services*/




/* --- Enhanced Custom CSS for Quick Links Section --- */

/* Variables for easy color changes */
:root {
    --section-bg: #0F172A; /* Deeper, more luxurious dark blue/gray */
    --section-border: #334155; /* Slightly softer border color */

    --card-bg-base: rgba(255, 255, 255, 0.03); /* Very subtle translucent background for cards */
    --card-border-base: rgba(255, 255, 255, 0.08); /* Subtle light border */
    --card-shadow-base: rgba(0, 0, 0, 0.2);

    --card-hover-bg: rgba(255, 255, 255, 0.08); /* More prominent translucent background on hover */
    --card-hover-shadow: rgba(0, 0, 0, 0.6); /* Deeper shadow on hover */
    --card-hover-glow: rgba(139, 88, 246, 0.3); /* Subtle purple glow on hover */

    --image-orange-effect: #FF8C00; /* The vibrant orange for image hover */
    --text-color-primary: #E2E8F0; /* Light gray text */
    --text-color-secondary: #94A3B8; /* Muted text for descriptions/links */
    --text-color-hover-accent: #8B5CF6; /* Vibrant accent color for text on hover */

    --transition-speed-fast: 0.25s;
    --transition-speed-normal: 0.4s;
}

/* Ensure the section has its base styles */
section.bg-gray-900 {
    background-color: var(--section-bg);
    padding-top: 3rem; /* py-12 */
    padding-bottom: 3rem; /* py-12 */
    border-top: 1px solid var(--section-border); /* border-t border-gray-700 */
    border-bottom: 1px solid var(--section-border); /* border-b border-gray-700 */
    position: relative; /* For potential background effects if desired */
}

/* Container and Grid Layout - Relying on your existing Tailwind classes,
   but providing plain CSS equivalents if Tailwind is removed. */
/*
.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

@media (min-width: 768px) {
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
*/
.text-center {
    text-align: center;
}


/* Styling for the anchor link parent (each "card") */
a.group {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding: 1.5rem; /* Increased padding for more spacious card */
    border-radius: 0.75rem; /* More rounded corners for the card */
    background-color: var(--card-bg-base);
    border: 1px solid var(--card-border-base);
    box-shadow: 0 4px 12px var(--card-shadow-base); /* Subtle initial shadow */
    position: relative;
    overflow: hidden; /* For any internal hover effects */

    /* All transitions for smooth effect */
    transition: background-color var(--transition-speed-normal) ease-out,
                border-color var(--transition-speed-normal) ease-out,
                box-shadow var(--transition-speed-normal) ease-out,
                transform var(--transition-speed-normal) ease-out;
}

a.group:hover {
    background-color: var(--card-hover-bg);
    border-color: var(--text-color-hover-accent); /* Border turns accent color */
    transform: translateY(-8px); /* More pronounced lift effect */
    box-shadow: 0 15px 35px var(--card-hover-shadow),
                0 0 25px var(--card-hover-glow); /* Deeper shadow with a subtle glow */
}

/* --- Optional: Subtle background pulse for each card on hover --- */
/* This creates a light radial pulse from the center of the card */
a.group::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(139, 88, 246, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width var(--transition-speed-normal) ease-out, height var(--transition-speed-normal) ease-out, opacity var(--transition-speed-normal) ease-out;
    z-index: 0; /* Behind content */
}

a.group:hover::before {
    width: 200%; /* Expands across the card */
    height: 200%;
    opacity: 1;
}

/* Image Styling */
.group img {
    width: 4.5rem; /* Slightly larger images (w-18 equivalent) */
    height: 4.5rem; /* h-18 equivalent */
    margin-bottom: 0.75rem; /* mb-3 */
    object-fit: contain; /* Ensures images scale well */
    position: relative; /* For z-index if needed */
    z-index: 1; /* Above any pseudo-elements like ::before */

    /* Initial filter: slightly desaturated */
    filter: grayscale(40%) brightness(110%) drop-shadow(0 3px 8px rgba(0,0,0,0.4));
    
    transition: transform var(--transition-speed-fast) ease-out, filter var(--transition-speed-normal) ease-out;
}

/* Image Orange Effect on Hover */
.group:hover img {
    transform: scale(1.15); /* More pronounced scale on hover */
    /* Convert image to orange using filters */
    filter: 
        brightness(1) /* Full brightness */
        contrast(1.2) /* Slight contrast boost */
        saturate(2.5) /* Strong saturation for color pop */
        sepia(0.8) /* Adds warmth, contributes to orange */
        hue-rotate(-20deg) /* Fine-tune hue to get desired orange */
        drop-shadow(0 8px 25px var(--image-orange-effect)); /* Prominent orange glow shadow */
}

/* Text Styling - First Span (Title) */
.group span:nth-of-type(1) {
    font-size: 1.25rem; /* Slightly larger font size for titles (text-xl equivalent) */
    font-weight: 700; /* Bolder font weight */
    color: var(--text-color-primary);
    line-height: 1.3; /* Better readability */
    transition: color var(--transition-speed-fast) ease-out;
    position: relative; /* For z-index */
    z-index: 1;
}

.group:hover span:nth-of-type(1) {
    color: var(--text-color-hover-accent);
}

/* Text Styling - Second Span (Link/Action) */
.group span:nth-of-type(2) {
    color: var(--text-color-secondary); /* Muted initial color */
    font-size: 0.95rem; /* Slightly larger text-sm */
    margin-top: 0.5rem; /* More space above */
    position: relative; /* For z-index */
    z-index: 1;
    transition: color var(--transition-speed-fast) ease-out, text-decoration var(--transition-speed-fast) ease-out;
}

.group:hover span:nth-of-type(2) {
    color: var(--text-color-hover-accent); /* Turns vibrant on hover */
    text-decoration: underline;
    text-underline-offset: 4px; /* Space between text and underline */
}

/* Basic text alignment for the columns */
/* Already handled by existing Tailwind text-center class */



/*Our lates projecttttttttttttttttttttttttttttttttttttttt*/

/* --- CSS Variables for Portfolio Section --- */
:root {
    --portfolio-bg-start: #0A0A0A; /* Deepest dark for section background */
    --portfolio-bg-end: #1A1A1A;   /* Slightly lighter dark for section background */
    --card-bg-base: #1F2937; /* Darker gray for card background (similar to gray-800 but refined) */
    --card-border-base: rgba(255, 255, 255, 0.08); /* Subtle light border for cards */
    --card-shadow-base: rgba(0, 0, 0, 0.4); /* Base shadow for cards */
    --card-hover-shadow-strong: rgba(0, 0, 0, 0.8); /* Stronger shadow on hover */
    --card-hover-glow-color: #8B5CF6; /* Purple glow color on hover */
    --overlay-gradient-start: rgba(0, 0, 0, 0.8); /* Darker overlay start */
    --overlay-gradient-end: rgba(0, 0, 0, 0); /* Transparent overlay end */
    --text-color-heading: #FFFFFF; /* Pure white for main heading */
    --text-color-card-title: #FFFFFF; /* Pure white for card titles */
    --text-color-card-subtitle: #CBD5E1; /* Muted gray for card subtitles */
    --button-primary-bg-start: #6366F1; /* Indigo for primary button */
    --button-primary-bg-end: #8B5CF6; /* Violet for primary button */
    --button-secondary-bg: transparent; /* Transparent for secondary button */
    --button-secondary-border: #6366F1; /* Indigo border for secondary */
    --button-secondary-text: #6366F1; /* Indigo text for secondary */
    --transition-speed-fast: 0.25s;
    --transition-speed-normal: 0.4s;
    --transition-speed-slow: 0.6s;
    --border-radius-card: 1rem; /* More pronounced border-radius for cards */
}

/* --- Section Styling --- */
#portfolio {
    background: linear-gradient(145deg, var(--portfolio-bg-start) 0%, var(--portfolio-bg-end) 100%);
    padding: 6rem 0; /* py-16 equivalent */
    position: relative;
    overflow: hidden; /* Ensures shadows/effects don't cause scrollbars */
}

/* --- Main Heading --- */
#portfolio h2 {
    font-size: 2.5rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    text-align: center; /* text-center */
    color: var(--text-color-heading); /* text-white */
    margin-bottom: 3rem; /* mb-12 */
    letter-spacing: -0.03em; /* Tighter letter spacing for professionalism */
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Subtle text shadow for depth */
}

/* --- Portfolio Card Styling --- */
#portfolio .grid > div { /* Targets the direct children of the grid, which are your cards */
    background-color: var(--card-bg-base); /* bg-gray-800 equivalent */
    border-radius: var(--border-radius-card); /* rounded-lg equivalent */
    box-shadow: 0 10px 25px var(--card-shadow-base); /* shadow-xl equivalent, but refined */
    overflow: hidden;
    position: relative; /* For absolute positioning of overlay/text */
    border: 1px solid var(--card-border-base); /* Subtle border */

    /* Custom transform and transition for the card itself */
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
    transition: transform var(--transition-speed-normal) ease-in-out,
                box-shadow var(--transition-speed-normal) ease-in-out,
                border-color var(--transition-speed-normal) ease-in-out;
}

#portfolio .grid > div:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) scale(1.03); /* Subtle 3D tilt and slightly larger scale */
    box-shadow: 0 20px 50px var(--card-hover-shadow-strong),
                0 0 30px var(--card-hover-glow-color); /* Deeper shadow with a glow */
    border-color: var(--card-hover-glow-color); /* Border color changes on hover */
}

/* --- Image and Overlay Styling --- */
#portfolio .grid > div .relative.overflow-hidden {
    position: relative;
    overflow: hidden;
}

#portfolio .grid > div img {
    width: 100%; /* w-full */
    height: 14rem; /* h-56 */
    object-fit: cover;
    display: block; /* Remove extra space below image */

    /* Image transform and transition */
    transform: scale(1); /* Initial scale */
    transition: transform var(--transition-speed-slow) ease-in-out, filter var(--transition-speed-normal) ease-in-out;
    filter: brightness(0.9) saturate(0.8); /* Slightly dim and desaturated initially */
}

#portfolio .grid > div:hover img {
    transform: scale(1.15); /* More pronounced zoom on hover */
    filter: brightness(1) saturate(1.1); /* Full brightness and saturation on hover */
}

#portfolio .grid > div .absolute.inset-0 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Custom gradient overlay */
    background: linear-gradient(to top, var(--overlay-gradient-start) 0%, transparent 70%);
    opacity: 0.7; /* opacity-70 */
    transition: opacity var(--transition-speed-fast) ease-in-out;
    pointer-events: none; /* Allows clicks to pass through to the link */
}

#portfolio .grid > div:hover .absolute.inset-0 {
    opacity: 0.9; /* More opaque on hover */
    background: linear-gradient(to top, var(--overlay-gradient-start) 0%, transparent 80%); /* Slightly adjusted gradient on hover */
}

/* --- Text within Overlay --- */
#portfolio .grid > div .absolute.bottom-4.left-4 {
    position: absolute;
    bottom: 1rem; /* bottom-4 */
    left: 1rem; /* left-4 */
    color: var(--text-color-card-title); /* text-white */
    padding: 0.5rem; /* p-2 */
    z-index: 1; /* Ensure text is above overlay */
    transform: translateY(0);
    transition: transform var(--transition-speed-normal) ease-out;
}

#portfolio .grid > div:hover .absolute.bottom-4.left-4 {
    transform: translateY(-8px); /* Lift text slightly on hover */
}

#portfolio .grid > div h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 0.25rem; /* Small margin for subtitle */
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Text shadow for readability */
}

#portfolio .grid > div p {
    color: var(--text-color-card-subtitle); /* text-gray-300 */
    font-size: 0.875rem; /* text-sm */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}



/* --- Responsive Adjustments (if not fully handled by Tailwind grid) --- */
/* These are just examples if you were to remove Tailwind's grid classes */
/*
@media (max-width: 767px) { // md breakpoint for grid-cols-2
    #portfolio .grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)); // Single column on small screens
    }
}

@media (min-width: 768px) and (max-width: 1023px) { // md breakpoint for grid-cols-2
    #portfolio .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) { // lg breakpoint for grid-cols-3
    #portfolio .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
*/



/*fooooooooooooooooooooooteeeeeeeeeeeeeerrrrrrrrrrrrrr*/

/* --- CSS Variables for Footer Section (Consistent with previous response) --- */
:root {
    /* Footer Background & Borders */
    --footer-bg-start: #0F172A; /* Deep blue-gray for the start of the footer gradient */
    --footer-bg-end: #1A202C;   /* Slightly lighter dark for the end of the footer gradient */
    --footer-border-color: #334155; /* Soft border color */

    /* Text Colors */
    --footer-text-base: #CBD5E1; /* Light gray for general text */
    --footer-text-muted: #94A3B8; /* Muted gray for copyright/address */
    --footer-heading-color: #FFFFFF; /* White for section headings */
    --footer-link-color: #A78BFA; /* Primary accent for links (e.g., soft indigo/purple) */
    --footer-link-hover: #C4B5FD; /* Lighter accent on link hover */
    --footer-social-base: #64748B; /* Muted gray for social icons */
    --footer-social-facebook: #3B5998; /* Facebook blue */
    --footer-social-youtube: #FF0000; /* YouTube red */
    --footer-social-twitter: #1DA1F2; /* Twitter blue */
    --footer-social-instagram: #E1306C; /* Instagram pink */ /* Added for completeness */

    /* General Styling */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --footer-shadow-dark: rgba(0, 0, 0, 0.4); /* General dark shadow */
}

/* --- Base Footer Section Styling --- */
footer.bg-gray-900 {
    background: linear-gradient(160deg, var(--footer-bg-start) 0%, var(--footer-bg-end) 100%);
    padding-top: 5rem; /* py-16 */
    padding-bottom: 5rem; /* py-16 */
    border-top: 1px solid var(--footer-border-color); /* border-t border-gray-700 */
    position: relative;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- Container and Grid Layout --- */
/* Your Tailwind classes already handle the container and grid effectively.
   The following are general overrides for specificity or minor adjustments. */

/* Ensures grid items align correctly within their column context */
footer .grid {
    /* Adjust gap for better aesthetics, especially on smaller screens if gap-12 is too much */
    gap: 2.5rem; /* Slightly less than gap-12 (3rem), might look better */
}

/* --- Logo and Description Column --- */
footer .col-span-1.md\:col-span-2 {
    /* Ensure consistent text alignment, overriding text-center for larger screens */
    text-align: center; /* Default for mobile */
}

@media (min-width: 768px) {
    footer .col-span-1.md\:col-span-2 {
        text-align: left; /* md:text-left */
    }
}

footer .col-span-1.md\:col-span-2 img {
    width: 12rem; /* w-48 */
    margin-bottom: 1.5rem; /* mb-6 */
    filter: brightness(180%) drop-shadow(0 4px 10px rgba(0,0,0,0.4));
    transition: transform var(--transition-speed-normal) ease-out;
    /* Ensure margin auto works for centering on smaller screens */
    margin-left: auto; /* mx-auto */
    margin-right: auto; /* mx-auto */
}

@media (min-width: 768px) {
    footer .col-span-1.md\:col-span-2 img {
        margin-left: 0; /* md:mx-0 */
        margin-right: 0; /* md:mx-0 */
    }
}

footer .col-span-1.md\:col-span-2 img:hover {
    transform: scale(1.05);
}

footer .col-span-1.md\:col-span-2 p {
    color: var(--footer-text-base); /* text-gray-400 */
    line-height: 1.7; /* leading-relaxed */
    font-size: 0.875rem; /* text-sm */
    max-width: 500px;
    margin-left: auto; /* For centering on small screens */
    margin-right: auto; /* For centering on small screens */
}

/* --- Quick Links / Connect With Us Headings and Lists --- */
footer .text-center {
    text-align: center; /* Default for mobile */
}

@media (min-width: 768px) {
    footer .text-center.md\:text-left {
        text-align: left; /* md:text-left */
    }
}

footer h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: var(--footer-heading-color); /* text-white */
    margin-bottom: 1.5rem; /* mb-6 */
    position: relative;
    padding-bottom: 0.5rem;
}

footer h3::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--footer-link-color) 0%, var(--footer-link-hover) 100%);
    position: absolute;
    bottom: 0;
    left: 50%; /* Centered by default for mobile */
    transform: translateX(-50%);
    border-radius: 2px;
    transition: width var(--transition-speed-normal) ease-out;
}
@media (min-width: 768px) {
    footer h3::after {
        left: 0; /* Aligned left on medium screens and up */
        transform: translateX(0);
    }
}

footer h3:hover::after {
    width: 60px;
}

footer ul.space-y-3 {
    list-style: none;
    padding: 0;
    margin: 0;
}
footer ul.space-y-3 li {
    margin-bottom: 0.75rem;
}

footer ul.space-y-3 li:last-child {
    margin-bottom: 0;
}

footer ul.space-y-3 a {
    color: var(--footer-text-base);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--transition-speed-normal) ease, transform var(--transition-speed-normal) ease;
    display: inline-block;
    position: relative;
}

footer ul.space-y-3 a::before {
    content: '→ ';
    color: var(--footer-link-color);
    margin-right: 0.5rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity var(--transition-speed-normal) ease, transform var(--transition-speed-normal) ease;
}

footer ul.space-y-3 a:hover {
    color: var(--footer-link-hover);
    transform: translateX(5px);
}
footer ul.space-y-3 a:hover::before {
    opacity: 1;
    transform: translateX(0);
}


/* --- Social Icons --- */
footer .flex.justify-center.md\:justify-start.space-x-4 {
    /* Ensure the flex container itself respects alignment */
    justify-content: center; /* Default for mobile */
}

@media (min-width: 768px) {
    footer .flex.justify-center.md\:justify-start.space-x-4 {
        justify-content: flex-start; /* md:justify-start */
    }
}

footer .flex.justify-center.md\:justify-start.space-x-4 a {
    color: var(--footer-social-base);
    transition: color var(--transition-speed-normal) ease, transform var(--transition-speed-normal) ease, filter var(--transition-speed-normal) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
}

footer .flex.justify-center.md\:justify-start.space-x-4 a svg {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}

/* Specific social icon hover colors */
footer .flex.justify-center.md\:justify-start.space-x-4 a:nth-child(1):hover { /* Facebook */
    color: var(--footer-social-facebook);
    transform: translateY(-3px) scale(1.1);
    background-color: rgba(59, 89, 152, 0.2);
}
footer .flex.justify-center.md\:justify-start.space-x-4 a:nth-child(2):hover { /* YouTube */
    color: var(--footer-social-youtube);
    transform: translateY(-3px) scale(1.1);
    background-color: rgba(255, 0, 0, 0.2);
}
footer .flex.justify-center.md\:justify-start.space-x-4 a:nth-child(3):hover { /* Twitter */
    color: var(--footer-social-twitter);
    transform: translateY(-3px) scale(1.1);
    background-color: rgba(29, 161, 242, 0.2);
}
/* If you had Instagram, you could add:
footer .flex.justify-center.md\:justify-start.space-x-4 a:nth-child(4):hover {
    color: var(--footer-social-instagram);
    transform: translateY(-3px) scale(1.1);
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
*/
/* General social hover effect for others */
footer .flex.justify-center.md\:justify-start.space-x-4 a:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}


/* --- Bottom Copyright Section --- */
footer .border-t.border-gray-700.mt-12.pt-8 {
    border-color: var(--footer-border-color);
    margin-top: 3rem; /* mt-12 */
    padding-top: 2rem; /* pt-8 */
    text-align: center; /* text-center */
    color: var(--footer-text-muted); /* text-gray-500 */
    font-size: 0.875rem; /* text-sm */
    line-height: 1.6;
}

footer .border-t p.mt-2 {
    margin-top: 0.5rem; /* mt-2 */
}

footer .border-t a {
    color: var(--footer-link-color);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease;
}

footer .border-t a:hover {
    color: var(--footer-link-hover);
    text-decoration: underline;
}

/* --- JavaScript for Current Year (recommended to include in your HTML) --- */
/*
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const currentYearSpan = document.getElementById('current-year');
        if (currentYearSpan) {
            currentYearSpan.textContent = new Date().getFullYear();
        }
    });
</script>
*/



/*ssssssssssssssssssoooooooocccccccial  mmmmmmmmeeeeeediaaaaaaaa*/

/* --- CSS Variables for Social Media Section --- */
:root {
    /* Section Background */
    --social-bg-start: #0F172A; /* Deep blue-gray */
    --social-bg-end: #1A202C;   /* Slightly lighter dark */

    /* Card Styling */
    --card-bg-base: #1F2937; /* A refined gray-800 */
    --card-shadow-base: rgba(0, 0, 0, 0.3);
    --card-shadow-hover: rgba(0, 0, 0, 0.5);
    --card-glow-color: rgba(139, 88, 246, 0.3); /* Purple glow */
    --card-border-radius: 0.75rem;

    /* Text Colors */
    --heading-color: #FFFFFF;
    --card-title-color: #FFFFFF;
    --news-item-bg: #374151; /* bg-gray-700 equivalent */
    --news-item-text: #FFFFFF;
    --news-link-color: #60a5fa; /* Blue for links */

    /* Transitions & Animation Speed */
    --transition-speed-normal: 0.3s;
    --news-scroll-speed: 30s; /* Adjust speed of news scroll */
    --news-scroll-offset: -100%; /* How much the news scrolls */
}

/* --- Base Section Styling --- */
.social-media-section {
    background: linear-gradient(160deg, var(--social-bg-start) 0%, var(--social-bg-end) 100%);
    padding-top: 3rem; /* py-12 */
    padding-bottom: 3rem; /* py-12 */
    position: relative;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@media (min-width: 768px) {
    .social-media-section {
        padding-top: 4rem; /* md:py-16 */
        padding-bottom: 4rem; /* md:py-16 */
    }
}

/* --- Heading Styling --- */
.social-media-section h2.futuristic-heading {
    font-size: 2.25rem; /* text-3xl */
    font-weight: 800; /* font-extrabold */
    text-align: center; /* text-center */
    color: var(--heading-color); /* text-white */
    margin-bottom: 2rem; /* mb-8 */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 4px 15px var(--card-glow-color); /* Purple glow */
}

@media (min-width: 768px) {
    .social-media-section h2.futuristic-heading {
        font-size: 2.5rem; /* md:text-4xl */
        margin-bottom: 3rem; /* md:mb-12 */
    }
}

/* --- Grid Layout (Tailwind handles most of this) --- */
.social-media-section .grid {
    gap: 2rem; /* gap-8 */
}

/* --- Social Card Base Styling (Instagram, Facebook, News) --- */
.social-media-section .social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to the top within the card */
    padding: 1.5rem; /* p-6 */
    background-color: var(--card-bg-base); /* bg-gray-800 equivalent */
    border-radius: var(--card-border-radius); /* rounded-lg */
    box-shadow: 0 10px 25px var(--card-shadow-base); /* shadow-xl */
    overflow: hidden; /* Ensure content within card stays contained */
    transition: transform var(--transition-speed-normal) ease-in-out, box-shadow var(--transition-speed-normal) ease-in-out;
}

.social-media-section .social-card:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    box-shadow: 0 15px 35px var(--card-shadow-hover), 0 0 20px var(--card-glow-color); /* Deeper shadow with subtle glow */
}

.social-media-section .social-card h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: var(--card-title-color); /* text-white */
    margin-bottom: 1rem; /* mb-4 */
    text-align: center;
}

/* --- Iframe Specific Styling for Instagram/Facebook Cards --- */
.social-media-section .iframe-container {
    position: relative;
    /* Using aspect ratio for responsive iframes */
    padding-bottom: 100%; /* For 1:1 aspect ratio to create a square */
    height: 0;
    overflow: hidden;
    width: 100%; /* w-full */
    max-width: 340px; /* max-width: 340px from inline style */
    max-height: 400px; /* max-height: 400px from inline style */
    border-radius: 0.5rem; /* rounded-md */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); /* shadow-lg */
}

.social-media-section .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* w-full */
    height: 100%; /* h-full */
    border: none;
}

/* Adjustments for `md:aspect-w-1 md:aspect-h-1` if using @tailwindcss/aspect-ratio plugin */
/* The inline styles for max-height/max-width are hard limits, consider if you always want these or
   if the aspect ratio should dominate for responsiveness. For fixed height, the following would apply: */
@media (min-width: 768px) {
    .social-media-section .iframe-container {
        /* If you want consistent height on desktop, set a fixed height and remove padding-bottom */
        height: 350px; /* Example fixed height for all iframes on desktop */
        padding-bottom: 0; /* Remove aspect ratio padding if fixed height is set */
    }
}

/* --- Latest News Section (id="news-section") Specific Styling --- */
/* news-card inherits .social-card styling */
#news-section {
    /* No specific background, border-radius, shadow needed here as it inherits from .social-card */
    /* Ensure height is managed for scrolling */
    height: 450px; /* Example fixed height for the scrolling news wrapper */
    overflow: hidden; /* Crucial for clipping the scrolling content */
    position: relative; /* For absolute positioning within if needed, and for children animation */
    /* animate-slide-up is handled by keyframes */
}

/* News Container for Scrolling Content */
#news-container {
    display: flex;
    flex-direction: column;
    /* Apply the animation here */
    animation: scrollNews var(--news-scroll-speed) linear infinite;
    /* Important: duplicate content for seamless looping if needed */
}

/* Keyframes for the scrolling animation */
@keyframes scrollNews {
    0% {
        transform: translateY(0%);
    }
    100% {
        /* Adjust -100% if content is duplicated or if you want it to scroll off-screen */
        /* For seamless looping with duplicated content, it should scroll exactly half the total duplicated content height */
        transform: translateY(var(--news-scroll-offset));
    }
}

/* Individual News Item Styling (assuming they will be dynamically added with this class) */
.news-item {
    background-color: var(--news-item-bg); /* bg-gray-700 */
    padding: 0.75rem; /* 12px */
    border-radius: 0.5rem; /* 8px */
    color: var(--news-item-text); /* white */
    width: 100%;
    margin-bottom: 0.625rem; /* 10px spacing between items */
    flex-shrink: 0; /* Ensures items don't shrink when scrolling */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for news items */
    opacity: 0.9; /* Slightly transparent */
    transition: opacity 0.2s ease;
}

.news-item:hover {
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.news-item img {
    border-radius: 0.25rem; /* 4px */
    width: 100%;
    margin-top: 0.5rem; /* 8px */
    display: block; /* Ensures no extra space below image */
}

.news-item a {
    color: var(--news-link-color); /* #60a5fa */
    font-size: 0.875rem; /* 14px */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.news-item a:hover {
    color: var(--news-link-color); /* Stay blue or a slightly darker/lighter blue */
    text-decoration: none; /* Remove underline on hover */
}

/* Ensure the space-y-4 on #news-container correctly adds margin-top to children */
#news-container > *:not(:first-child) {
    margin-top: 1rem; /* Equivalent to space-y-4 */
}


/*TTTTTTTTTTTESTIMONIALLLLLL*/



  #testimonial-section {
    position: relative;
  }

  .testimonial-card {
    background: linear-gradient(135deg, #1f2937, #111827);
    border-left: 4px solid #60a5fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    animation: fadeSlide 0.8s ease-in-out;
    width: 100%;
    max-width: 500px;
    text-align: center;
  }

  .testimonial-card h4 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
    color: #3b82f6;
  }

  .testimonial-card p {
    font-size: 16px;
    color: #e5e7eb;
  }

  @keyframes fadeSlide {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


/*VIDEOOOOOOOOOOOOOOOOSSSSSSSSSSSSSSS*/

/* --- CSS Variables for Education Section (to be placed in your :root or a dedicated variables file) --- */
:root {
    --education-section-bg: #1A202C; /* Dark background */
    --education-heading-color: #FFFFFF; /* White heading */
    --education-heading-shadow: rgba(99, 102, 241, 0.5); /* Indigo glow */
    --video-card-shadow-start: rgba(0, 0, 0, 0.4);
    --video-card-shadow-end: rgba(0, 0, 0, 0.6);
    --button-bg-start: #6366F1; /* Indigo-600 */
    --button-bg-end: #4F46E5;   /* Indigo-700 */
    --button-text-color: #FFFFFF;
    --button-shadow-color: rgba(99, 102, 241, 0.6); /* Button glow */
}

/* --- Base Section Styling --- */
.education-section {
    background-color: var(--education-section-bg); /* bg-gray-900 */
    /* Tailwind handles py-16 px-4 sm:px-6 lg:px-8 text-white */
    position: relative;
    overflow: hidden;
    font-family: 'Inter', sans-serif; /* Modern, clean font */
}

/* --- Section Heading Styling --- */
.education-section .education-heading {
    /* Tailwind handles text-3xl md:text-4xl font-extrabold text-center uppercase mb-8 */
    color: var(--education-heading-color);
    letter-spacing: 0.05em; /* Slightly increased for emphasis */
    text-shadow: 0 5px 15px var(--education-heading-shadow); /* Soft glow */
    position: relative;
    padding-bottom: 0.5rem; /* Space for underline effect */
}

.education-section .education-heading::after {
    content: '';
    display: block;
    width: 80px; /* Length of the underline */
    height: 4px; /* Thickness of the underline */
    background: linear-gradient(90deg, #818CF8, #6366F1, #4F46E5); /* Gradient underline */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* --- Video Card Styling --- */
.education-section .video-card {
    /* Tailwind handles w-full max-w-sm */
    display: flex; /* For centering content within the card if needed */
    flex-direction: column;
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically if space allows */
}

/* iframe wrapper for aspect ratio and visual effects */
.education-section .video-card > div { /* Target the div with aspect-w-16 etc. */
    /* Tailwind handles rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out */
    box-shadow: 0 10px 20px var(--video-card-shadow-start);
    transition: all 0.3s ease-in-out;
    border: 2px solid transparent; /* Subtle border for hover effect */
}

.education-section .video-card > div:hover {
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 15px 30px var(--video-card-shadow-end);
    border-color: #A78BFA; /* Light indigo border on hover */
}

/* If you are NOT using @tailwindcss/aspect-ratio plugin, use this instead: */
/*
.education-section .video-card .video-responsive-container {
    position: relative;
    padding-bottom: 56.25%; // 16:9 aspect ratio (9 / 16 * 100%)
    height: 0;
    overflow: hidden;
    border-radius: 0.5rem; // rounded-lg
    box-shadow: 0 10px 20px var(--video-card-shadow-start); // shadow-xl
    transition: all 0.3s ease-in-out;
}

.education-section .video-card .video-responsive-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px var(--video-card-shadow-end); // hover:shadow-2xl
}

.education-section .video-card iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
*/


/* --- More Courses Button Styling --- */
.education-section .btn-primary { /* More specific selector for the button */
    /* Tailwind handles inline-flex items-center px-8 py-4 bg-indigo-600 text-white font-semibold rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75 transition-all duration-300 ease-in-out text-lg transform hover:scale-105 */
    background: linear-gradient(90deg, var(--button-bg-start) 0%, var(--button-bg-end) 100%);
    color: var(--button-text-color);
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    z-index: 1;
    overflow: hidden; /* For pseudo-element effects */
    box-shadow: 0 8px 20px var(--button-shadow-color); /* Stronger button shadow */
}

.education-section .btn-primary:hover {
    box-shadow: 0 12px 30px var(--button-shadow-color); /* More pronounced shadow on hover */
}

.education-section .btn-primary:active {
    transform: scale(0.98); /* Slight press effect */
}

/* Optional: Button ripple/glow effect */
.education-section .btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
    z-index: -1;
}

.education-section .btn-primary:hover::after {
    width: 200%;
    height: 200%;
    opacity: 1;
}



/*GALLERYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY*/

/* --- CSS Variables for Gallery Section (for easy customization) --- */
:root {
    --gallery-heading-color: #FFFFFF; /* White heading */
    --gallery-heading-glow: rgba(139, 92, 246, 0.4); /* Purple glow for heading */
    --photo-item-border-color: rgba(255, 255, 255, 0.08); /* Subtle border for photos */
    --photo-item-shadow: rgba(0, 0, 0, 0.5); /* Deep shadow for photos */
    --photo-overlay-bg-start: rgba(0, 0, 0, 0.7); /* Dark overlay at bottom */
    --photo-overlay-bg-end: transparent;
    --photo-text-color: #FFFFFF;
    --transition-duration-normal: 0.3s;
}

/* --- IMPORTANT: Place this CSS *after* your TailwindCSS import/output --- */
/* This ensures your custom styles take precedence and are not overridden by Tailwind's defaults. */


/* --- Gallery Heading Styling (Targets .education-heading specifically within .education-section) --- */
/* This ensures specificity and avoids conflicts with other education-heading instances if they exist elsewhere. */
.education-section .education-heading {
    letter-spacing: 0.08em; /* Pronounced letter spacing for a sleek look */
    text-shadow: 0 5px 20px var(--gallery-heading-glow); /* Stronger glow for impact */
    position: relative;
    padding-bottom: 0.5rem; /* Space for subtle underline */
}

.education-section .education-heading::after {
    content: '';
    display: block;
    width: 100px; /* Length of the underline */
    height: 3px; /* Thickness */
    background: linear-gradient(90deg, #A78BFA, #C4B5FD); /* Purple gradient underline */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1.5px;
}

/* --- Photo Grid Container (Targets #photo-grid specifically within .education-section) --- */
.education-section #photo-grid {
    /* Tailwind's `grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6` are HTML classes and handle the layout. */
    /* No additional custom styling is typically needed directly on the grid container itself, beyond what Tailwind provides. */
}


/* --- Individual Photo Item Styling (Assuming your JS injects elements with these classes) --- */
/* Your JavaScript should inject HTML structured like this for the styles below to apply:
   <div class="gallery-photo-item relative group cursor-pointer rounded-lg overflow-hidden shadow-lg">
       <img src="path/to/your/photo.jpg" alt="Description" class="w-full h-auto object-cover transform transition-transform duration-300 ease-in-out group-hover:scale-105">
       <div class="photo-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
           <p class="text-sm font-semibold text-white truncate">Photo Title/Description</p>
       </div>
   </div>
*/
.education-section .gallery-photo-item { /* Highly specific selector: targets .gallery-photo-item only inside .education-section */
    position: relative;
    cursor: pointer;
    border-radius: 0.75rem; /* rounded-lg, slightly more rounded */
    overflow: hidden;
    box-shadow: 0 8px 20px var(--photo-item-shadow); /* shadow-lg, deeper shadow */
    border: 1px solid var(--photo-item-border-color); /* Subtle border for definition */
    transition: transform var(--transition-duration-normal) ease-in-out,
                box-shadow var(--transition-duration-normal) ease-in-out,
                border-color var(--transition-duration-normal) ease-in-out;
}

.education-section .gallery-photo-item:hover {
    transform: translateY(-5px) scale(1.02); /* Lift and slight scale on hover */
    box-shadow: 0 12px 30px var(--photo-item-shadow), 0 0 15px var(--gallery-heading-glow); /* Enhanced shadow with glow */
    border-color: #C4B5FD; /* Border highlights on hover */
}

/* --- Image within Photo Item --- */
.education-section .gallery-photo-item img {
    /* Tailwind's utility classes (`w-full h-auto object-cover transform transition-transform duration-300 ease-in-out group-hover:scale-105`) handle the core styling. */
    /* This rule ensures it behaves as a block element and covers its container */
    display: block;
    width: 100%;
    height: 100%; /* Important if you want consistent heights with object-fit: cover */
    object-fit: cover; /* Ensures images fill their container without distortion */
}


/* --- Photo Overlay Styling (for title/description) --- */
.education-section .photo-overlay { /* Highly specific selector */
    position: absolute;
    inset: 0; /* Covers the entire photo item */
    background: linear-gradient(to top, var(--photo-overlay-bg-start) 0%, var(--photo-overlay-bg-end) 100%);
    display: flex;
    align-items: flex-end; /* Align content to the bottom */
    padding: 1rem; /* p-4 */
    opacity: 0; /* Hidden by default */
    transition: opacity var(--transition-duration-normal) ease-in-out;
}

/* Show overlay on hover of the parent gallery-photo-item (assuming 'group' class is used on it) */
.education-section .gallery-photo-item:hover .photo-overlay {
    opacity: 1;
}

/* --- Photo Title/Description within Overlay --- */
.education-section .photo-overlay p { /* Highly specific selector */
    /* Tailwind's utility classes (`text-sm font-semibold text-white truncate`) handle the core styling. */
    color: var(--photo-text-color);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); /* Subtle shadow for readability */
}

/* Responsive adjustments for gap, if needed more fine-grained than Tailwind's gap-6 */
@media (max-width: 639px) { /* Small screens up to sm breakpoint */
    .education-section #photo-grid {
        gap: 1rem; /* Adjust gap on smaller screens for tighter packing */
    }
}



/*CONTACCTTTTTTTTTTTTT SECCCCCCCTTTTTTTTTTTTION WITH MAPPPPPPP*/

/* --- CSS Variables for Map & Contact Sections --- */
:root {
    /* General Section Styling */
    --section-bg-dark: #1A202C; /* Gray-900 equivalent */
    --section-bg-medium: #2D3748; /* Gray-800 equivalent */
    --section-border-color: #4A5568; /* Gray-700 equivalent */
    --heading-color: #FFFFFF;
    --heading-glow-color: rgba(139, 92, 246, 0.4); /* Purple glow */

    /* Map Section Specific */
    --map-box-border: #4A5568; /* Gray-700 */
    --map-box-shadow: rgba(0, 0, 0, 0.5);

    /* Contact Section Specific */
    --contact-box-bg: #374151; /* Gray-700 equivalent */
    --contact-box-shadow-base: rgba(0, 0, 0, 0.4);
    --contact-box-shadow-hover: rgba(0, 0, 0, 0.7);
    --contact-icon-color: #8B5CF6; /* Indigo-400 equivalent, but more vibrant */
    --contact-icon-glow: rgba(139, 92, 246, 0.6);
    --contact-text-color: #CBD5E1; /* Gray-300 equivalent */
    --contact-link-hover: #C4B5FD; /* Lighter indigo for links */

    --transition-duration-normal: 0.3s;
    --transition-duration-slow: 0.5s;
    --border-radius-xl: 1rem; /* rounded-xl */
}

/* --- Google Map Section Styling --- */
.google-map-section {
    background-color: var(--section-bg-dark); /* bg-gray-900 */
    /* Tailwind handles py-16 px-4 sm:px-6 lg:px-8 text-white */
    font-family: 'Inter', sans-serif;
}

.google-map-section .map-heading {
    /* Tailwind handles text-4xl md:text-5xl font-extrabold text-center mb-12 text-white */
    letter-spacing: -0.03em; /* Tighter for professionalism */
    text-shadow: 0 5px 20px var(--heading-glow-color); /* Subtle glow */
}

.google-map-section .map-box-wrapper {
    /* Tailwind handles rounded-xl overflow-hidden shadow-2xl border border-gray-700 */
    box-shadow: 0 20px 50px var(--map-box-shadow); /* Deeper shadow */
    transition: transform var(--transition-duration-normal) ease-in-out, box-shadow var(--transition-duration-normal) ease-in-out;
}

.google-map-section .map-box-wrapper:hover {
    transform: translateY(-5px) scale(1.005); /* Slight lift and scale */
    box-shadow: 0 25px 60px var(--map-box-shadow), 0 0 30px var(--heading-glow-color); /* More pronounced shadow with glow */
}

/* Fallback for aspect ratio if @tailwindcss/aspect-ratio plugin is not used */
.google-map-section .aspect-w-16 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}
.google-map-section .aspect-w-16 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* --- Sexy 3D Contact Section Styling --- */
.contact-info-section {
    background-color: var(--section-bg-medium); /* bg-gray-800 */
    /* Tailwind handles py-16 px-4 sm:px-6 lg:px-8 text-white */
    font-family: 'Inter', sans-serif;
    perspective: 1500px; /* Crucial for 3D effects on child elements */
}

.contact-info-section .contact-heading {
    /* Tailwind handles text-4xl md:text-5xl font-extrabold text-center mb-12 text-white */
    letter-spacing: -0.03em;
    text-shadow: 0 5px 20px var(--heading-glow-color);
}

.contact-info-section .contact-grid {
    /* Tailwind handles grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 */
    /* No additional custom styling here, as children will have 3D effects */
}

.contact-info-section .contact-box {
    /* Tailwind handles bg-gray-700 rounded-xl shadow-xl p-8 flex flex-col items-center text-center group */
    background-color: var(--contact-box-bg);
    box-shadow: 0 10px 25px var(--contact-box-shadow-base); /* Base shadow */
    transform-style: preserve-3d; /* Enables 3D transformations for children */
    transition: all var(--transition-duration-slow) ease-in-out; /* Slower transition for 3D feel */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    position: relative; /* For pseudo-elements */
}

.contact-info-section .contact-box:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(-5deg) scale(1.02); /* Lift, subtle 3D rotation, slight scale */
    box-shadow: 0 15px 40px var(--contact-box-shadow-hover), 0 0 30px var(--contact-icon-glow); /* Deeper shadow with glow */
    border-color: var(--contact-icon-color); /* Border highlights on hover */
}

/* Optional: Background pulse/glow on hover for contact boxes */
.contact-info-section .contact-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at center, var(--contact-icon-glow) 0%, transparent 70%);
    opacity: 0;
    filter: blur(20px);
    transition: opacity var(--transition-duration-normal) ease-out;
    z-index: -1; /* Behind content */
}

.contact-info-section .contact-box:hover::before {
    opacity: 0.2;
}


.contact-info-section .contact-icon {
    /* Tailwind handles text-5xl mb-4 text-indigo-400 */
    color: var(--contact-icon-color);
    text-shadow: 0 0 15px var(--contact-icon-glow); /* Icon glow */
    transition: transform var(--transition-duration-normal) ease-in-out, color var(--transition-duration-normal) ease-in-out;
}

.contact-info-section .contact-box:hover .contact-icon {
    transform: scale(1.1); /* Icon slightly larger on hover */
    color: var(--contact-link-hover); /* Icon color changes slightly */
}

.contact-info-section .contact-title {
    /* Tailwind handles text-2xl font-bold mb-2 text-white */
    letter-spacing: 0.02em;
}

.contact-info-section .contact-detail {
    /* Tailwind handles text-gray-300 text-lg */
    color: var(--contact-text-color);
}

.contact-info-section .contact-detail a {
    /* Tailwind handles hover:text-indigo-300 transition duration-300 */
    text-decoration: none;
    position: relative;
}

.contact-info-section .contact-detail a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--contact-link-hover);
    transition: width var(--transition-duration-normal) ease-out;
}

.contact-info-section .contact-detail a:hover::after {
    width: 100%; /* Underline expands on hover */
}

/*ENQUIRYYYYYYYYYYYYYYYYYY FORMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM*?

/* --- CSS Variables for Enquiry Form --- */
:root {
    --modal-overlay-bg: rgba(0, 0, 0, 0.7); /* Dark, semi-transparent overlay */
    --modal-content-bg: #1F2937; /* Dark gray for modal background */
    --modal-border-color: rgba(255, 255, 255, 0.1); /* Subtle white border */
    --modal-shadow-color: rgba(0, 0, 0, 0.8); /* Deep shadow for modal */

    --heading-color: #FFFFFF;
    --heading-glow-color: rgba(139, 92, 246, 0.5); /* Purple glow for heading */

    --input-bg: #111827; /* Darker input background */
    --input-border: #374151; /* Gray-700 for input border */
    --input-text-color: #E2E8F0; /* Light text for inputs */
    --input-placeholder-color: #6B7280; /* Gray-500 for placeholder */
    --input-focus-ring: #6366F1; /* Indigo-500 for focus ring */

    --button-bg-start: #6366F1; /* Indigo-600 */
    --button-bg-end: #8B5CF6;   /* Violet-500 */
    --button-text-color: #FFFFFF;
    --button-shadow-glow: rgba(99, 102, 241, 0.6); /* Button glow */

    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.4s;
}

/* --- Modal Overlay Styling --- */
.enquiry-modal-overlay {
    /* Tailwind handles: fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-[1000] hidden opacity-0 transition-opacity duration-300 ease-in-out */
    backdrop-filter: blur(8px); /* Frosted glass effect for the background */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
}

/* --- Modal Content Styling --- */
.enquiry-modal-content {
    /* Tailwind handles: relative bg-gray-900 rounded-xl shadow-2xl p-6 md:p-8 lg:p-10 w-11/12 max-w-2xl transform scale-95 opacity-0 transition-all duration-500 ease-out */
    background-color: var(--modal-content-bg);
    box-shadow: 0 25px 50px -12px var(--modal-shadow-color); /* Stronger shadow */
    border: 1px solid var(--modal-border-color); /* Subtle border */
    /* Initial state for animation is handled by Tailwind's `scale-95 opacity-0` */
    /* When shown via JS, remove `hidden` and add `opacity-100 scale-100` */
}

/* --- Close Button Styling --- */
.close-modal-btn {
    /* Tailwind handles: absolute top-4 right-4 text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none */
    background-color: rgba(255, 255, 255, 0.05); /* Subtle background for the X */
    border-radius: 50%;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.close-modal-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg); /* Spin on hover */
    transition: transform 0.3s ease-in-out;
}

/* --- Heading Styling --- */
.enquiry-heading {
    /* Tailwind handles: text-3xl md:text-4xl font-extrabold text-center mb-8 text-white */
    letter-spacing: 0.05em; /* Slightly wider spacing */
    text-shadow: 0 0 20px var(--heading-glow-color); /* Prominent glow for heading */
}

/* --- Glassmorphism Effect for Form --- */
.glassmorphism {
    background-color: rgba(255, 255, 255, 0.05); /* Very subtle white tint */
    border-radius: 1rem; /* Rounded corners */
    padding: 1.5rem; /* Internal padding */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Light border */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Stronger glassmorphism shadow */
    backdrop-filter: blur(10px); /* The core glassmorphism blur */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
}

/* --- Form Labels --- */
.form-label {
    /* Tailwind handles: block text-gray-300 text-sm font-semibold mb-2 */
    letter-spacing: 0.02em; /* Slight spacing for labels */
}

/* --- Form Inputs & Textarea --- */
.animated-input {
    /* Tailwind handles: w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent */
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text-color);
    transition: all var(--transition-speed-fast) ease-in-out;
}

.animated-input::placeholder {
    color: var(--input-placeholder-color);
    opacity: 0.8; /* Make placeholder slightly more visible */
}

.animated-input:focus {
    background-color: #2C3544; /* Slightly lighter on focus */
    border-color: var(--input-focus-ring);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5); /* Custom focus ring effect */
}

/* --- Submit Button --- */
.btn-glow {
    /* Tailwind handles: inline-flex items-center justify-center px-8 py-4 bg-indigo-600 text-white font-bold rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75 transition-all duration-300 ease-in-out text-lg transform hover:scale-105 */
    background: linear-gradient(45deg, var(--button-bg-start) 0%, var(--button-bg-end) 100%);
    color: var(--button-text-color);
    box-shadow: 0 8px 20px var(--button-shadow-glow); /* Stronger glow shadow */
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: none; /* Ensure no default button border */
}

.btn-glow:hover {
    background: linear-gradient(45deg, var(--button-bg-end) 0%, var(--button-bg-start) 100%); /* Reverse gradient on hover */
    box-shadow: 0 12px 30px var(--button-shadow-glow), 0 0 25px var(--button-shadow-glow); /* More pronounced glow */
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15); /* White highlight */
    transform: skewX(-30deg);
    transition: left var(--transition-speed-normal) ease-in-out;
    z-index: -1;
}

.btn-glow:hover::before {
    left: 100%; /* Slide shine across */
}

/* --- JavaScript Toggle Classes --- */
/* These classes will be added/removed by your JavaScript to show/hide the modal */
.enquiry-modal-overlay.is-active {
    display: flex; /* Show the overlay */
    opacity: 1; /* Fade in overlay */
}

.enquiry-modal-overlay.is-active .enquiry-modal-content {
    opacity: 1; /* Fade in content */
    transform: scale(1); /* Scale up content */
}

/*ENQUIRRRRRRRRRRRRRRRYYYYYYYYYY FORMMMMMMMMMMMM*/
/* --- CSS Variables for Static Enquiry Section --- */
:root {
    --section-bg-dark: #1A202C; /* Gray-900 equivalent */
    --section-bg-medium: #2D3748; /* Gray-800 equivalent */
    --section-border-color: #4A5568; /* Gray-700 equivalent */

    --heading-color: #FFFFFF;
    --heading-glow-color: rgba(139, 92, 246, 0.6); /* Purple glow for heading */

    --form-card-bg: #1F2937; /* Dark gray for form card background (if form was a separate card) */
    --form-card-border-color: rgba(255, 255, 255, 0.15); /* Subtle white border */
    --form-card-shadow: rgba(0, 0, 0, 0.9); /* Deep shadow for form card */

    --glassmorphism-bg: rgba(255, 255, 255, 0.04); /* Very subtle white tint for glassmorphism */
    --glassmorphism-border: rgba(255, 255, 255, 0.08); /* Lighter border for glassmorphism */
    --glassmorphism-shadow: rgba(0, 0, 0, 0.45); /* Shadow for glassmorphism */

    --input-bg: #111827; /* Darker input background */
    --input-border: #374151; /* Gray-700 for input border */
    --input-text-color: #E0E0E0; /* Light text for inputs */
    --input-placeholder-color: #6B7280; /* Gray-500 for placeholder */
    --input-focus-ring: #6366F1; /* Indigo-500 for focus ring */

    --button-bg-start: #6366F1; /* Indigo-600 */
    --button-bg-end: #8B5CF6;   /* Violet-500 */
    --button-text-color: #FFFFFF;
    --button-shadow-glow: rgba(99, 102, 241, 0.7); /* Stronger button glow */

    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.4s;
    --transition-speed-slow: 0.6s;
}

/* --- Base Section Styling --- */
.enquiry-section-static {
    background-color: var(--section-bg-dark); /* bg-gray-900 */
    /* Tailwind handles py-16 px-4 sm:px-6 lg:px-8 text-white */
    font-family: 'Inter', sans-serif; /* Professional font */
    position: relative;
    overflow: hidden;
}

/* --- Heading Styling --- */
.enquiry-section-static .enquiry-heading {
    /* Tailwind handles text-4xl md:text-5xl font-extrabold text-center mb-12 text-white */
    letter-spacing: -0.03em; /* Tighter for professionalism */
    text-shadow: 0 5px 20px var(--heading-glow-color); /* Subtle glow */
}

/* --- Glassmorphism Effect for Form (Applied directly to the form element) --- */
.enquiry-section-static form.glassmorphism {
    background-color: var(--glassmorphism-bg); /* Very subtle white tint */
    border-radius: 0.75rem; /* Rounded corners */
    padding: 2rem; /* Increased internal padding for a more substantial form */
    border: 1px solid var(--glassmorphism-border); /* Light border */
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05), 0 8px 32px 0 var(--glassmorphism-shadow); /* Inner and outer shadow */
    backdrop-filter: blur(12px); /* Stronger glassmorphism blur */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
}

/* --- Form Labels --- */
.enquiry-section-static .form-label {
    /* Tailwind handles: block text-gray-300 text-sm font-semibold mb-2 */
    letter-spacing: 0.02em; /* Slight spacing for labels */
}

/* --- Form Inputs & Textarea --- */
.enquiry-section-static .animated-input {
    /* Tailwind handles: w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 text-white placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 focus:border-transparent */
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text-color);
    transition: all var(--transition-speed-fast) ease-in-out;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle inner shadow */
}

.enquiry-section-static .animated-input::placeholder {
    color: var(--input-placeholder-color);
    opacity: 0.7;
}

.enquiry-section-static .animated-input:focus {
    background-color: #2C3544; /* Slightly lighter on focus */
    border-color: var(--input-focus-ring);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.6), inset 0 2px 5px rgba(0, 0, 0, 0.3); /* Enhanced focus ring and inner shadow */
}

/* --- Submit Button --- */
.enquiry-section-static .btn-glow {
    /* Tailwind handles: inline-flex items-center justify-center px-8 py-4 bg-indigo-600 text-white font-bold rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75 transition-all duration-300 ease-in-out text-lg transform hover:scale-105 */
    background: linear-gradient(45deg, var(--button-bg-start) 0%, var(--button-bg-end) 100%);
    color: var(--button-text-color);
    box-shadow: 0 10px 25px var(--button-shadow-glow); /* Stronger glow shadow */
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: none;
    letter-spacing: 0.05em;
}

.enquiry-section-static .btn-glow:hover {
    background: linear-gradient(45deg, var(--button-bg-end) 0%, var(--button-bg-start) 100%);
    box-shadow: 0 15px 35px var(--button-shadow-glow), 0 0 30px var(--button-shadow-glow); /* More pronounced glow */
    transform: scale(1.08);
}

.enquiry-section-static .btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: skewX(-30deg);
    transition: left var(--transition-speed-normal) ease-in-out;
    z-index: -1;
}

.enquiry-section-static .btn-glow:hover::before {
    left: 100%;
}