/* Custom Tailwind Configuration */
:root {
    /* Light Mode Colors (default) */
    --color-primary-blue: #1877F2;
    --color-dark-blue: #166FE5;
    --color-light-blue: #42A5F5;
    --color-white: #FFFFFF;
    --color-light-gray: #F8F9FA;
    --color-dark-gray: #1C1E21;
    --color-accent-teal: #00BCD4; /* A complementary accent color */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--color-dark-gray);
    background-color: var(--color-light-gray);
    /* Subtle background pattern for texture */
    background-image: radial-gradient(rgba(24, 119, 242, 0.05) 1px, transparent 1px); /* Reduced opacity for subtlety */
    background-size: 40px 40px;
}

/* Custom Colors for Tailwind */
.bg-primary-blue { background-color: var(--color-primary-blue); }
.bg-dark-blue { background-color: var(--color-dark-blue); }
.bg-light-blue { background-color: var(--color-light-blue); }
.text-primary-blue { color: var(--color-primary-blue); }
.text-dark-gray { color: var(--color-dark-gray); }
.bg-accent-teal { background-color: var(--color-accent-teal); }
.text-accent-teal { color: var(--color-accent-teal); }


/* Hero Section Gradient Background */
.hero-gradient-bg {
    background: linear-gradient(135deg, var(--color-primary-blue), var(--color-light-blue));
    position: relative; /* Needed for absolute positioning of pattern */
    overflow: hidden; /* Hide overflow from pattern */
}

/* Hero Section Subtle Pattern */
.hero-gradient-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0 20v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 46v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6-20v-4H4v4H0v2h4v4h2v-4h4v-2H6zM36 0v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 10v-4H4v4H0v2h4v4h2v-4h4v-2H6zM26 46v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM26 0v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM56 16v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0 20v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM26 26v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM46 16v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4z"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    opacity: 0.1; /* Further reduced opacity for the pattern */
    z-index: 0; /* Behind content */
}

/* Glassmorphism Effect for Header and Footer */
.glassmorphism {
    backdrop-filter: blur(12px); /* Slightly more blur */
    background-color: rgba(24, 119, 242, 0.6); /* Primary Blue with slightly less opacity */
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Glassmorphism for Header on Scroll */
.glassmorphism.scrolled {
    background-color: rgba(24, 119, 242, 0.85); /* Slightly less opaque on scroll */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); /* More pronounced shadow */
}

/* Client Logo Carousel Animations */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

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

.animate-scroll-left {
    animation: scroll-left 60s linear infinite; /* Slower for smoother movement */
}

.animate-scroll-right {
    animation: scroll-right 60s linear infinite; /* Slower for smoother movement */
}

.logo-item.paused {
    animation-play-state: paused;
}

.logo-item img {
    filter: grayscale(00%); /* More grayscale by default */
    transition: filter 0.40s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow to transition */
}

.logo-item:hover img {
    filter: grayscale(0%);
    transform: scale(1.15); /* More pronounced scale on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Added shadow on hover */
}

/* Added box-shadow to the logo-item container for depth */
.logo-item {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow by default */
    border-radius: 0.75rem; /* Rounded corners for the item itself */
    overflow: hidden; /* Ensure shadow respects border-radius */
    transition: box-shadow 0.3s ease; /* Transition for shadow */
}
.logo-carousel-container .logo-item {
  flex: 0 0 auto;      /* don’t shrink or grow */
  width: 16rem;        /* each card is 16rem wide */
  display: flex;
  align-items: center; /* center vertically */
  justify-content: center; /* center horizontally */
}

.logo-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}


/* Fade-in and Staggered Animations */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px); /* Increased initial translateY */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Slower and smoother transition */
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.service-card-wrapper,
.contact-card-wrapper {
    height: 100%; /* Ensure wrappers fill grid cell height */
}

.service-card,
.contact-card {
    background-color: var(--color-white);
    border: 1px solid rgba(66, 165, 245, 0.15); /* light-blue with less opacity */
    color: var(--color-dark-gray);
    opacity: 0;
    transform: translateY(30px); /* Increased initial translateY */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Slightly more prominent shadow */
}

.service-card.is-visible,
.contact-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.service-card:hover,
.contact-card:hover {
    transform: translateY(-10px); /* Slightly more aggressive lift */
    box-shadow: 0 18px 30px rgba(24, 119, 242, 0.25); /* More pronounced shadow on hover */
    border-color: var(--color-primary-blue); /* Highlight border on hover */
}

/* Staggered delay for service cards - adjust as needed for new cards */
.service-card-wrapper:nth-child(1) .service-card { transition-delay: 0.1s; }
.service-card-wrapper:nth-child(2) .service-card { transition-delay: 0.2s; }
.service-card-wrapper:nth-child(3) .service-card { transition-delay: 0.3s; }
.service-card-wrapper:nth-child(4) .service-card { transition-delay: 0.4s; }
.service-card-wrapper:nth-child(5) .service-card { transition-delay: 0.5s; }
.service-card-wrapper:nth-child(6) .service-card { transition-delay: 0.6s; }
.service-card-wrapper:nth-child(7) .service-card { transition-delay: 0.7s; }
.service-card-wrapper:nth-child(8) .service-card { transition-delay: 0.8s; }
.service-card-wrapper:nth-child(9) .service-card { transition-delay: 0.9s; }
.service-card-wrapper:nth-child(10) .service-card { transition-delay: 1.0s; }
.service-card-wrapper:nth-child(11) .service-card { transition-delay: 1.1s; }
.service-card-wrapper:nth-child(12) .service-card { transition-delay: 1.2s; }
.service-card-wrapper:nth-child(13) .service-card { transition-delay: 1.3s; }
.service-card-wrapper:nth-child(14) .service-card { transition-delay: 1.4s; }
.service-card-wrapper:nth-child(15) .service-card { transition-delay: 1.5s; }
.service-card-wrapper:nth-child(16) .service-card { transition-delay: 1.6s; }

/* Typography adjustments */
p, .text-md {
    font-size: 1.15rem; /* Slightly larger for better readability */
    line-height: 1.8; /* Increased line height */
}

h1, h2, h3, h4 {
    font-weight: 800;
}

/* Back to Top Button */
#back-to-top {
    position: fixed;
    bottom: 25px; /* Slightly higher */
    right: 25px; /* Slightly more to the right */
    background-color: var(--color-primary-blue);
    color: var(--color-white);
    padding: 14px 17px; /* Slightly larger */
    border-radius: 50%;
    display: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* More prominent shadow */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    z-index: 1000;
}

#back-to-top:hover {
    background-color: var(--color-dark-blue);
    transform: translateY(-5px) scale(1.08); /* More pronounced lift and scale */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}

/* Mobile specific adjustments for footer */
@media (max-width: 767px) {
    footer .container {
        flex-direction: column;
        text-align: center;
    }
    footer nav ul {
        flex-direction: column;
        /* space-y-2; This is a Tailwind class, not CSS property */
    }
    footer nav ul li {
        margin-bottom: 8px; /* Add some space between vertical links */
    }
    
    .hero-gradient-bg h1 {
        font-size: 2.75rem; /* Slightly larger for mobile */
    }
    
    .hero-gradient-bg h2 {
        font-size: 2.25rem; /* Slightly larger for mobile */
    }
}

/* Mobile specific adjustments for logo carousel images */
@media (max-width: 767px) {
    .logo-item {
        flex-shrink: 0;
        width: 40%; /* Increased width for better visibility on mobile */
        padding: 1.25rem; /* Adjusted padding */
    }
    .logo-item img {
        height: 10rem; /* Adjusted height for mobile for both sections */
        width: auto;
        max-width: 100%;
    }
    .logo-carousel-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;     /* fallback if still overflow */
    }
    .animate-scroll-left, .animate-scroll-right {
        animation-duration: 40s; /* Adjusted speed for mobile */
    }
}

/* Section headers */
.section-header {
    position: relative;
    display: block; /* Changed to inline-block for centering underline */
    margin: 0 auto 3.5rem auto; /* More margin below header */
    text-align: center;
    padding-bottom: 18px; /* More space for the underline */
}

.section-header:after {
    content: '';
    position: absolute;
    bottom: 0; /* Position at the bottom of the element */
    left: 50%;
    transform: translateX(-50%) scaleX(0); /* Initially hidden */
    width: 100%; /* Full width of the text */
    max-width: 200px; /* Increased max width for the underline */
    height: 5px; /* Thicker underline */
    background: linear-gradient(90deg, var(--color-primary-blue), var(--color-accent-teal)); /* Gradient with accent color */
    border-radius: 3px;
    transition: transform 0.5s ease-out; /* Slower animation for underline */
}

.section-header.is-visible:after {
    transform: translateX(-50%) scaleX(1); /* Reveal underline */
}

/* Animation for apply button */
.apply-button {
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease-in-out; /* Slower transition */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Initial subtle shadow */
}

.apply-button:after {
    content: '';
    position: absolute;
    top: -50%;
    left: -70%; /* Start further left */
    width: 25px; /* Wider shine */
    height: 250%; /* Taller shine */
    background: rgba(255, 255, 255, 0.4); /* Brighter shine */
    transform: rotate(30deg); /* Slightly more angle */
    transition: all 0.6s ease; /* Slower shine animation */
}

.apply-button:hover:after {
    left: 130%; /* End further right */
}

.apply-button:hover {
    transform: scale(1.1); /* More pronounced scale on hover */
    box-shadow: 0 10px 20px rgba(24, 119, 242, 0.4); /* More pronounced shadow */
}

/* Pulse animation */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.9; } /* Slightly more pulse, with opacity change */
    100% { transform: scale(1); opacity: 1; }
}

.pulse {
    animation: pulse 2.5s infinite ease-in-out; /* Slower and smoother pulse */
}

/* Hero text animation */
@keyframes textShine {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.text-shine {
    background: linear-gradient(90deg, #FFFFFF, var(--color-accent-teal), #FFFFFF); /* Shine with accent color */
    background-size: 250% auto; /* Wider gradient for more effect */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 4s linear infinite; /* Even slower animation */
}

/* Floating animation */
@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); } /* More movement */
    100% { transform: translateY(0px); }
}

.floating {
    animation: floating 5s ease-in-out infinite; /* Slower and smoother */
    opacity: 0.2; /* Slightly more visible */
}

/* Internship Domain Dropdown */
#internship-domain-dropdown {
    position: absolute;
    top: 100%; /* Position below the header */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(24, 119, 242, 0.98); /* Almost opaque */
    backdrop-filter: blur(15px); /* More blur */
    border-radius: 0 0 1.25rem 1.25rem; /* Larger border radius */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* More pronounced shadow */
    padding: 1.25rem; /* More padding */
    z-index: 40; /* Below header, above content */
    min-width: 280px; /* Slightly wider */
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 0.75rem; /* More space between items */
    transition: opacity 0.4s ease-in-out; /* Slower transition */
    opacity: 0;
}

#internship-domain-dropdown.show {
    display: flex;
    opacity: 1;
}

#internship-domain-dropdown a {
    color: var(--color-white);
    padding: 0.85rem 1.25rem; /* Larger padding */
    border-radius: 0.75rem; /* Larger border radius */
    transition: background-color 0.25s ease, color 0.25s ease;
    text-align: center;
    font-weight: 600; /* Slightly bolder text */
}

#internship-domain-dropdown a:hover {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}