/* ============================================================
   INDEX.PHP SPECIFIC STYLES
   ============================================================ */

/* Styles for the main header slider */
.slide {
    transition: opacity 1s ease-in-out;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.active-slide {
    opacity: 1;
    position: relative;
}

.slider-control {
    background-color: rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s;
}

.slider-control:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.slide-content-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Specialized Technologies Continuous Slider */
.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.04);
    padding: 0.5rem 0;
}

.slider-track {
    display: flex;
    width: max-content;
    animation: scroll-left 28s linear infinite;
}

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

.tech-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    min-width: 120px;
    margin: 0 18px;
    font-size: 2.2rem;
    color: #2596be;
    background: none;
    border: none;
    box-shadow: none;
}

.tech-card span {
    font-size: 1rem;
    color: #222;
    margin-top: 0.25rem;
}

@media (max-width: 600px) {
    .tech-card {
        width: 80px;
        min-width: 80px;
        font-size: 1.3rem;
    }
    .tech-card span {
        font-size: 0.85rem;
    }
}

/* Navigation indicator and active item styles */
.nav-container {
    position: relative;
}

.nav-menu {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.nav-item {
    position: relative;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    transition: all .25s ease;
}

.nav-item.active, .nav-item:hover {
    background: #f3f4f6;
    color: #111827;
}

.nav-indicator-track {
    height: 6px;
    background: #e5e7eb;
    border-radius: 9999px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
}

.nav-indicator {
    height: 6px;
    background: #e53e3e;
    border-radius: 9999px;
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    transform-origin: left center;
    transition: left .28s cubic-bezier(.2,.9,.2,1), width .28s cubic-bezier(.2,.9,.2,1);
}

#site-logo {
    transition: transform .3s ease;
}

#site-logo.logo-large {
    transform: scale(1.15);
}

/* Appended from the inline <style> block in index.php so the page can link this file instead. */

        /* Custom styles for the slider animation and scrollbar */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #F9FAFB;
        }
        /* Styles for the main header slider */
        .slide {
            transition: opacity 1s ease-in-out;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .active-slide {
            opacity: 1;
            position: relative; /* Only active slide takes up space */
        }
        .slider-control {
            background-color: rgba(0, 0, 0, 0.4);
            transition: background-color 0.3s;
        }
        .slider-control:hover {
            background-color: rgba(0, 0, 0, 0.6);
        }
        .slide-content-overlay {
            background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for text readability */
        }

        /* --- Specialized Technologies Continuous Slider --- */
        .slider-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            background: #fff;
            border-radius: 1rem;
            box-shadow: 0 2px 16px 0 rgba(0,0,0,0.04);
            padding: 0.5rem 0;
        }
        .slider-track {
            display: flex;
            width: max-content;
            animation: scroll-left 28s linear infinite;
        }
        @keyframes scroll-left {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .tech-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 120px;
            min-width: 120px;
            margin: 0 18px;
            font-size: 2.2rem;
            color: #2596be;
            background: none;
            border: none;
            box-shadow: none;
        }
        .tech-card span {
            font-size: 1rem;
            color: #222;
            margin-top: 0.25rem;
        }
        @media (max-width: 600px) {
            .tech-card { width: 80px; min-width: 80px; font-size: 1.3rem; }
            .tech-card span { font-size: 0.85rem; }
        }

        /* Navigation indicator and active item styles */
        .nav-container { position: relative; }
        .nav-menu { display: flex; gap: 1.5rem; align-items: center; }
        .nav-item { position: relative; padding: 0.6rem 0.85rem; border-radius: 0.5rem; transition: all .25s ease; }
        .nav-item.active, .nav-item:hover { background: #f3f4f6; color: #111827; }
        .nav-indicator-track { height: 6px; background: #e5e7eb; border-radius: 9999px; position: absolute; left: 0; right: 0; bottom: -10px; }
        .nav-indicator { height: 6px; background: #e53e3e; border-radius: 9999px; position: absolute; bottom: -10px; left: 0; width: 0; transform-origin: left center; transition: left .28s cubic-bezier(.2,.9,.2,1), width .28s cubic-bezier(.2,.9,.2,1); }
        #site-logo { transition: transform .3s ease; }
        #site-logo.logo-large { transform: scale(1.15); }

        /* Updated button styles */
        .gradient-button {
            background: linear-gradient(90deg, #2596be, #f9a5b7);
            color: white;
            font-weight: bold;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .gradient-button:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        /* Small-screen header offset and spacer adjustment */
        .page-spacer { padding-top: 77px; }
        @media (max-width: 545px) {
            header.fixed { top: 45px !important; }
            .page-spacer { padding-top: 89px !important; }
        }