/* Primary SEO Focus: Digital Marketing Course, Training, Placement in Thrissur, Kerala */
    
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
    body {
        font-family: 'Inter', sans-serif;
        background-color: #f7fafc;
    }
    /* Hero Section Styling - The wrapper for the full-width carousel */
    
    .hero-section {
        width: 100%;
        overflow: hidden;
        color: white;
        /* Added position relative to correctly contain the carousel */
        position: relative;
    }
    /* Carousel Dimensions and Positioning */
    
    .carousel-container {
        position: relative;
        /* Changed from min-height to fixed height for consistent carousel section height */
        height: 450px;
        width: 100%;
        /* Important for full-height items */
    }
    /* Mobile adjustment for height - Ensures usability for students in Kerala */
    
    @media (max-width: 768px) {
        .carousel-container {
            /* Changed from min-height to fixed height for consistent mobile height */
            height: 350px;
        }
    }
    /* Individual Slide Styling for Background Image */
    
    .carousel-item-custom {
        background-size: cover;
        height: 100%;
        width: 100%;
        background-position: center;
        background-repeat: no-repeat;
        transition: opacity 0.75s ease-in-out;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .carousel-item-custom.active {
        opacity: 1;
        position: relative;
    }
    /* Dark Overlay for Text Readability (Crucial for SEO) */
    
    .dark-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.65);
    }
    
    .slide-content {
        position: relative;
        z-index: 10;
        padding: 3rem 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
    }
    /* Custom Heading Sizes for Responsiveness */
    
    .display-hero {
        font-size: 2.5rem;
        /* Default mobile size */
        font-weight: 800;
        line-height: 1.2;
    }
    
    @media (min-width: 576px) {
        .display-hero {
            font-size: 3.5rem;
        }
    }
    
    @media (min-width: 992px) {
        .display-hero {
            font-size: 4rem;
        }
    }
    /* CTA Button Styling */
    
    .btn-cta-primary {
        background-color: #facc15;
        /* Yellow-400 equivalent */
        color: #312e81;
        /* Indigo-800 equivalent */
        border: none;
        font-weight: 600;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, background-color 0.3s;
    }
    
    .btn-cta-primary:hover {
        background-color: #f9db4a;
        /* Slightly darker yellow */
        transform: scale(1.05);
        color: #312e81;
    }
    
    .btn-cta-secondary {
        border: 2px solid white;
        color: white;
        font-weight: 500;
        transition: transform 0.3s, background-color 0.3s;
    }
    
    .btn-cta-secondary:hover {
        background-color: white;
        color: #312e81;
        transform: scale(1.05);
    }
    /* Highlight Colors */
    
    .text-highlight-yellow {
        color: #facc15;
    }
    
    .text-highlight-green {
        color: #86efac;
    }
    /* Green-300 equivalent */
    /* Bootstrap Indicators Customization */
    
    .carousel-indicators [data-bs-target] {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        margin: 0 0.35rem;
        background-color: white;
        opacity: 0.5;
        transition: opacity 0.3s, transform 0.3s;
    }
    
    .carousel-indicators .active {
        opacity: 1;
        transform: scale(1.2);
        border: 2px solid #facc15;
        /* Yellow ring */
    }
    /* Hide the hidden SEO image */
    
    .seo-alt-image {
        width: 1px;
        height: 1px;
        opacity: 0;
        position: absolute;
        pointer-events: none;
    }
    
  /* Nav links */
    
    .navbar .nav-link {
        color: #008da6 !important;
        /* White text over video */
        font-weight: 600;
        margin: 0 12px;
        /* spacing between links */
        display: flex;
        align-items: center;
        /* vertically align text */
        height: 100%;
        padding: 0.5rem 0;
        /* balanced vertical spacing */
    }
    
    .navbar .nav-link:hover {
        color: #f1f1f1 !important;
    }
    /* Navbar when scrolled */
    
    .navbar.scrolled {
        background-color: #ffffff !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .navbar.scrolled .nav-link {
        color: #000 !important;
        /* Dark text */
    }
    
    .navbar.scrolled .nav-link:hover {
        color: #007bff !important;
    }
    /* Logo size for consistency */
    
    .navbar-brand img {
        height: 50px;
        /* adjust to balance with links */
        object-fit: contain;
    }
    /* Apply Now Button */
    
    .btn-apply {
        background-color: #0056b3;
        /* Blue background */
        color: #ffffff !important;
        /* White text */
        font-weight: 600;
        padding: 8px 20px;
        border-radius: 25px;
        margin-left: 16px;
        border: none;
        display: flex;
        align-items: center;
        height: 40px;
        /* keeps alignment with nav links */
        transition: background-color 0.3s ease;
    }
    /* Hover Effect (simple highlight) */
    
    .btn-apply:hover {
        background-color: #003f8a;
        /* Darker blue */
        color: #fff !important;
    }

    
    /* Hero Section */
    
    .hero {
        position: relative;
        width: 100%;
        text-align: center;
        overflow: hidden;
    }
    
    .hero video {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    #speakerBtn {
        position: absolute;
        bottom: 20px;
        right: 20px;
        z-index: 5;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #speakerBtn svg {
        width: 24px;
        height: 24px;
    }
    /* Custom styles for performance and aesthetics */
    
    body {
        font-family: 'Inter', sans-serif;
        background-color: #fcfcfc;
        /* Very light, clean background */
        line-height: 1.6;
    }
    
    .service-card:hover {
        transform: translateY(-8px);
        /* Deeper lift on hover */
        /* Modern, lifted shadow for depth */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08), 0 5px 10px rgba(0, 0, 0, 0.04);
    }
    
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
    body {
        font-family: 'Inter', sans-serif;
        background-color: #f7fafc;
    }
    
    .carousel-container {
        position: relative;
        min-height: 550px;
        /* Default height */
    }
    /* Mobile adjustment for height */
    
    @media (max-width: 768px) {
        .carousel-container {
            min-height: 350px;
        }
    }
    /* Individual Slide Styling for Background Image */
    
    .carousel-item-custom {
        background-size: cover;
        height: 100%;
        width: 100%;
        /* Explicitly set full width for absolute certainty */
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 0rem;
        /* Rounded corners */
        transition: opacity 0.75s ease-in-out;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }
    
    .carousel-item-custom.active {
        opacity: 1;
        position: relative;
    }
    /* Dark Overlay for Text Readability (Crucial for SEO) */
    
    .dark-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 0.75rem;
    }
    /* Text Content Layer */
    
    .slide-content {
        position: relative;
        z-index: 10;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
    }
    /* Custom Heading Sizes for Responsiveness */
    
    .display-hero {
        font-size: 2.5rem;
        /* Default mobile size */
        font-weight: 800;
        line-height: 1.2;
    }
    
    @media (min-width: 576px) {
        .display-hero {
            font-size: 3.5rem;
        }
    }
    
    @media (min-width: 992px) {
        .display-hero {
            font-size: 4rem;
        }
    }
    /* CTA Button Styling */
    
    .btn-cta-primary {
        background-color: #facc15;
        /* Yellow-400 equivalent */
        color: #312e81;
        /* Indigo-800 equivalent */
        border: none;
        font-weight: 600;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, background-color 0.3s;
    }
    
    .btn-cta-primary:hover {
        background-color: #f9db4a;
        /* Slightly darker yellow */
        transform: scale(1.05);
        color: #312e81;
    }
    
    .btn-cta-secondary {
        border: 2px solid white;
        color: white;
        font-weight: 500;
        transition: transform 0.3s, background-color 0.3s;
    }
    
    .btn-cta-secondary:hover {
        background-color: white;
        color: #312e81;
        transform: scale(1.05);
    }
    /* Highlight Colors */
    
    .text-highlight-yellow {
        color: #facc15;
    }
    
    .text-highlight-green {
        color: #86efac;
    }
    /* Green-300 equivalent */
    /* Bootstrap Indicators Customization */
    
    .carousel-indicators [data-bs-target] {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        margin: 0 0.35rem;
        background-color: white;
        opacity: 0.5;
        transition: opacity 0.3s, transform 0.3s;
    }
    
    .carousel-indicators .active {
        opacity: 1;
        transform: scale(1.2);
        border: 2px solid #facc15;
        /* Yellow ring */
    }
    /* Hide the hidden SEO image */
    
    .seo-alt-image {
        width: 1px;
        height: 1px;
        opacity: 0;
        position: absolute;
        pointer-events: none;
    }
    /* Parallax section on the downside of service section */
    
    @keyframes parallax-move {
        0% {
            background-position-x: 0%;
        }
        100% {
            background-position-x: 100%;
        }
    }
    
    .parallax-bg {
        background-image: linear-gradient(to right, rgba(243, 244, 246, 0.742), rgba(243, 244, 246, 0.596)), url('../Assets/Img/Cover photos/Digital\ marketing\ banner.svg');
        /* gradient overlay */
        background-size: 150% auto;
        background-repeat: no-repeat;
        background-attachment: scroll;
        animation: parallax-move 80s linear infinite alternate;
        overflow: hidden;
    }
    /* Responsive Typography  */
    
    @media (max-width: 768px) {
        .display-responsive {
            font-size: 2.25rem;
            /* Smaller than display-5 on mobile */
        }
    }
    
    @media (min-width: 769px) {
        .display-responsive {
            font-size: 3rem;
            /* Display-5 equivalent for larger screens */
        }
    }
    /* end of parallax section */
    /* --- 3D Card Style  --- */
    
    .shadow-3d {
        box-shadow: 0 10px 30px var(--card-shadow-color), 0 30px 60px rgba(0, 0, 0, 0.08);
        /* Main elevation */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.05);
        /* Subtle border for definition */
        position: relative;
        /* Crucial for positioning the sparkle effect */
        overflow: hidden;
        /* Contains the sparkle effect within the card */
    }
    
    .hover-lift:hover {
        transform: translateY(-5px);
        /* Lift card on hover */
        box-shadow: 0 15px 40px var(--card-shadow-color), 0 40px 80px rgba(0, 0, 0, 0.12);
        /* Increase shadow depth */
    }
    /* Icon Centering Container */
    
    .icon-container {
        display: flex;
        justify-content: center;
        /* Center the icon horizontally */
        align-items: center;
        height: 40px;
        margin-bottom: 1rem;
    }
    /* --- Elegant Cyan Sparkle Animation (Following Mouse) --- */
    
    .sparkle {
        position: absolute;
        width: 4px;
        /* Slightly smaller for elegance */
        height: 4px;
        /* White core with cyan radial gradient for glow effect */
        background: radial-gradient(circle at center, rgba(255, 255, 255, 1) 10%, rgba(6, 182, 212, 0.6) 70%);
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
        z-index: 10;
        /* Smoother animation duration (1.2s) and cubic-bezier for a non-linear, gentle drift */
        animation: sparkle-move 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        /* Refined shadow matching the card's info color */
        box-shadow: 0 0 5px 1px rgba(6, 182, 212, 0.5), 0 0 15px 3px rgba(6, 182, 212, 0.2);
        /* To ensure proper positioning relative to the left/top styles */
        transform-origin: center center;
    }
    
    @keyframes sparkle-move {
        0% {
            transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
            /* Start small at cursor position */
            opacity: 1;
        }
        50% {
            transform: translate(calc(-50% + var(--sparkle-x) * 0.5), calc(-50% + var(--sparkle-y) * 0.5)) scale(1.1) rotate(180deg);
            /* Slight scale up and rotation for shimmer */
            opacity: 0.8;
        }
        100% {
            /* Moves outward (relative to the cursor) and fades/shrinks */
            transform: translate(calc(-50% + var(--sparkle-x)), calc(-50% + var(--sparkle-y))) scale(0) rotate(360deg);
            opacity: 0;
        }
    }
    /* end of parkling section */
    /* contact form */
    /* BASE & VARIABLES */
    
     :root {
        --clr-bg-dark: #0F172A;
        /* Slate/Deep Navy */
        --clr-accent: #38BDF8;
        /* Sky Blue */
        --clr-text-light: #F8FAFC;
        /* White-ish */
        --clr-text-secondary: #94A3B8;
        /* Slate Gray */
        --clr-danger: #F87171;
        --font-inter: 'Inter', sans-serif;
        --radius-lg: 12px;
        --shadow-subtle: 0 4px 15px rgba(0, 0, 0, 0.3);
        --shadow-deep: 0 12px 40px rgba(0, 0, 0, 0.6);
    }
    /* UTILITY CLASSES */
    
    .h-full {
        height: 100%;
    }
    
    .min-h-screen {
        min-height: 100vh;
    }
    
    .w-full {
        width: 100%;
    }
    
    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }
    
    .max-w-4xl {
        max-width: 800px;
    }
    
    .flex {
        display: flex;
    }
    
    .flex-col {
        flex-direction: column;
    }
    
    .justify-center {
        justify-content: center;
    }
    
    .items-start {
        align-items: flex-start;
    }
    
    .text-center {
        text-align: center;
    }
    
    .p-8 {
        padding: 2rem;
    }
    
    .pb-10 {
        padding-bottom: 2.5rem;
    }
    
    .pt-10 {
        padding-top: 2.5rem;
    }
    
    .mb-2 {
        margin-bottom: 0.5rem;
    }
    
    .mb-4 {
        margin-bottom: 1rem;
    }
    
    .mb-8 {
        margin-bottom: 2rem;
    }
    
    .mt-8 {
        margin-top: 2rem;
    }
    
    .gap-6 {
        gap: 1.5rem;
    }
    
    .text-white {
        color: var(--clr-text-light);
    }
    
    .text-gray-400 {
        color: var(--clr-text-secondary);
    }
    
    .text-sky-500 {
        color: var(--clr-accent);
    }
    
    .text-3xl {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
    }
    
    .text-base {
        font-size: clamp(0.95rem, 2.5vw, 1rem);
    }
    
    .font-extrabold {
        font-weight: 800;
    }
    
    .font-semibold {
        font-weight: 600;
    }
    
    .rounded-xl {
        border-radius: var(--radius-lg);
    }
    /* CORE STYLES & OVERRIDES */
    
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    
    .bg-abstract-tech {
        background-image: linear-gradient(to right, rgba(1, 9, 26, 0.354), rgba(0, 5, 14, 0.053)), url('../Assets/Img/Cover photos/Business\ deal\ by\ shaking\ hands.svg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        width: 100%;
        height: auto;
        padding: 40px 15px;
    }
    
    .glass-card {
        background: rgba(46, 65, 93, 0.621);
        /* Less opaque background */
        backdrop-filter: blur(18px) saturate(180%);
        /* Higher blur and saturation */
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        /* Very thin, subtle border */
        box-shadow: var(--shadow-deep);
        transition: all 0.3s ease-in-out;
    }
    /* FORM CONTROLS (Minimalistic Underline) */
    
    .form-control,
    .form-select {
        display: block;
        width: 100%;
        padding: 0.6rem 0;
        font-size: 1rem;
        color: var(--clr-text-light);
        background-color: transparent;
        border: none;
        border-bottom: 1px solid rgba(53, 53, 53, 0.119);
        border-radius: 0;
        transition: border-color 0.2s, box-shadow 0.2s;
        appearance: none;
    }
    
    .form-control::placeholder {
        color: rgba(0, 0, 0, 0.336);
    }
    
    .form-control:focus,
    .form-select:focus {
        border-bottom: 2px solid var(--clr-accent);
        /* Focus glow effect */
        outline: 0;
        box-shadow: none;
    }
    /* FORM LAYOUT - Two-column desktop, one-column mobile */
    
    .form-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    
    .col-span-12 {
        flex: 1 1 100%;
    }
    
    .col-span-6 {
        flex: 1 1 100%;
    }
    /* Default to full width on mobile */
    /* BUTTONS (Clean, flat design) */
    
    .btn-primary {
        display: block;
        padding: 1rem 1.5rem;
        font-size: 1.05rem;
        font-weight: 700;
        border-radius: var(--radius-lg);
        cursor: pointer;
        background-color: var(--clr-accent);
        color: var(--clr-bg-dark);
        border: none;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 4px 15px rgba(93, 206, 255, 0.4);
        /* Subtle shadow lift */
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(88, 97, 101, 0.6);
    }
    /* MODE SWITCH (Minimalist Tabs) */
    
    .switch-container {
        margin-bottom: 2.5rem;
    }
    
    .switch-wrapper {
        position: relative;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 9999px;
        padding: 4px;
        max-width: 450px;
    }
    
    .switch-label {
        padding: 0.75rem 0.5rem;
        flex-grow: 1;
        font-weight: 600;
        z-index: 10;
        transition: color 0.3s;
        border: none;
        background: transparent;
        color: var(--clr-text-secondary);
        font-size: clamp(0.8rem, 3.5vw, 0.95rem);
    }
    
    .switch-label.active {
        color: var(--clr-bg-dark);
        /* Active text color contrast */
    }
    
    .switch-slider {
        position: absolute;
        width: calc(50% - 4px);
        height: calc(100% - 8px);
        background: var(--clr-text-light);
        border-radius: 9999px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        top: 4px;
        left: 4px;
    }
    
    .switch-slider.active-services {
        transform: translateX(100%);
    }
    /* VISIBILITY */
    
    .hidden {
        display: none !important;
    }
    /* RESPONSIVE MEDIA QUERY (Tablet/Desktop) */
    
    @media (min-width: 640px) {
        .glass-card {
            padding: 50px 40px;
        }
        .col-span-6 {
            flex: 1 1 calc(50% - 0.75rem);
        }
        /* Activate 2-column layout */
        .p-8 {
            padding: 2.5rem;
        }
    }
    /* Modal Styles */
    
    .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    
    .modal-backdrop.active {
        opacity: 1;
        display: flex;
    }
    
    .modal-content {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
        padding: 2.5rem;
        max-width: 90%;
        width: 400px;
        color: var(--clr-text-light);
        text-align: center;
        transform: scale(0.9);
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        position: relative;
    }
    
    .modal-content.show {
        transform: scale(1);
        opacity: 1;
    }
    
    .modal-close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        color: var(--clr-text-secondary);
        font-size: 1.5rem;
        cursor: pointer;
        line-height: 1;
    }
    
    .spinner-border {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 0.15em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spinner-grow 0.75s linear infinite;
    }
    
    @keyframes spinner-grow {
        to {
            transform: rotate(360deg);
        }
    }
    
    /* footer */
        .footer-dark {
            background-color: #e4fdff; /* Custom dark slate color */
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
        }
        .footer-link .footer-text {
            color: #00595f; 
            text-decoration: none;
        }
        .footer-link:hover {
            color: #f59e0b; /* Amber/Warning color on hover */
        }
        .brand-text {
            color: #00595f; /* Amber/Warning color */
        }