/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Outfit:wght@300;400;500;700&display=swap');

:root {
    /* Light/Cream Palette */
    --primary-color: #6c5ce7;
    /* Deep Purple for strong actions */
    --secondary-color: #a29bfe;
    /* Soft Purple */
    --accent-color: #fdcb6e;
    /* Gold/Bronze for luxury feel */
    --bg-color: #fdfcf0;
    /* Warm Cream */
    --bg-color-secondary: #fef9e7;
    /* Lighter Cream */
    --text-color: #2d3436;
    /* Dark Charcoal for readability */
    --text-muted: #636e72;
    /* Grey */

    /* Frosted Glass (Light) */
    --glass-bg: rgba(255, 255, 255, 0.4);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);

    --card-radius: 16px;
    --transition-speed: 0.3s;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    color: #2d3436;
    margin-bottom: 1rem;
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-speed);
}

a:hover {
    color: var(--primary-color);
}

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

.text-center {
    text-align: center;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Glassmorphism (Light) */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: var(--glass-shadow);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--transition-speed) ease;
    border: none;
    cursor: pointer;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: white;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(108, 92, 231, 0.5);
    color: white;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: var(--transition-speed);
    background: rgba(253, 252, 240, 0.85);
    /* Matches cream bg */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand img {
    height: 50px;
}

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
}

.nav-link {
    font-weight: 600;
    position: relative;
    padding: 5px 0;
    color: var(--text-color);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width var(--transition-speed);
}

.nav-link:hover::after {
    width: 100%;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
    overflow: hidden;
}

/* Blended GIF Background */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /*opacity: 0.3;
    /* Subtle Blend */
    background-image: url('../../technew1/img/faceman.gif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
    /* Blends gif into cream background */
    /*filter: grayscale(100%) sepia(20%) hue-rotate(200deg);
    /* Optional: tinting to match theme */
}

.fa-solid,
.fas {
    font-weight: 900;
    color: #fff;
}


.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: radial-gradient(circle, transparent 0%, var(--bg-color) 90%);*/
    z-index: 1;
}

.hero-content {
    z-index: 2;
    position: relative;
    max-width: 800px;
    animation: fadeUp 1s ease-out;
}

.hero h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #2d3436;
    background: linear-gradient(to right, #e4ecee, #f3f2fc);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 30px;
    color: #ffffff;
    font-weight: 500;
}

/* Particle Canvas */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Place above background but below content */
    pointer-events: none;
}

/* Section Styling */
section {
    position: relative;
    padding: 100px 0;
    z-index: 10;
    /* Ensure content is well above particles */
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    color: var(--text-color);
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--accent-color);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Feature Cards (What We Do) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.feature-card {
    padding: 40px;
    text-align: center;
    transition: transform var(--transition-speed);
    background: rgba(255, 255, 255, 0.6);
}

.feature-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.gallery-item {
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    aspect-ratio: 16/9;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(108, 92, 231, 0.9), transparent);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay h3 {
    color: white;
    margin: 0;
}

/* Team Cards */
.team-card {
    transition: all var(--transition-speed) ease;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(108, 92, 231, 0.2);
}

.see-more-btn {
    display: inline-block;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transition-speed) ease;
    margin-top: 10px;
}

.see-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3);
}

.team-preview {
    font-size: 0.95rem;
    color: var(--text-color);
}

.team-details {
    animation: slideDown 0.3s ease-out;
    color: var(--text-color);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slider Section */
.slider-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    background: transparent;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.slider {
    display: flex;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide {
    min-width: 100%;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    overflow: hidden;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 6s ease;
}

.slide.active img {
    transform: scale(1.1);
}

.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 60%);
    z-index: 1;
}

.slide-caption {
    position: absolute;
    bottom: 40px;
    left: 40px;
    max-width: 500px;
    padding: 30px;
    z-index: 2;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.6s ease 0.3s;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}



/* We need a way to target the active slide's caption for animation. 
   Since JS updates transform on .slider, we don't strictly have an ".active" class on .slide yet 
   unless we add it in JS. I will update JS to add an active class. 
   For now, I'll set default styles and assume JS will help or simple transitions.
   Actually, with the transform sliding, all captions are "there". 
   Let's just make them visible always for now to avoid complexity if JS doesn't add .active.
*/
.slide-caption {
    transform: translateY(0);
    opacity: 1;
}


.slide-caption h3 {
    color: white;
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.slide-caption p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.slide-caption .btn {
    padding: 10px 25px;
    font-size: 0.9rem;
    background: white;
    color: var(--primary-color);
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.slide-caption .btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-btn:hover {
    background: white;
    color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.slider-btn.prev {
    left: 20px;
}

.slider-btn.next {
    right: 20px;
}

.slider-dots {
    text-align: center;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dcdde1;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.4);
}

/* Contact Form */
.contact-form-container {
    max-width: 1000px;
    /* Increased from 700px for better side-by-side spacing */
    margin: 50px auto;
    padding: 40px;
    background: white;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group {
    flex: 1;
}

.form-group {
    margin-bottom: 20px;
}

.form-control {
    width: 100%;
    padding: 15px;
    background: #fdfdfd;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    color: var(--text-color);
    font-family: inherit;
    transition: border-color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

/* Footer */
footer {
    background: #f9f9f9;
    padding: 50px 0 20px;
    margin-top: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    color: var(--text-muted);
}

.social-links {
    margin-bottom: 20px;
}

.social-link {
    font-size: 1.5rem;
    margin: 0 10px;
    transition: transform 0.3s;
    display: inline-block;
    color: var(--primary-color);
}

.social-link:hover {
    transform: scale(1.2);
    color: var(--secondary-color);
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}


/* Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-menu-btn {
        display: block;
    }

    .slide img {
        height: 300px;
    }

    .slider-btn {
        padding: 12px 15px;
        font-size: 1.2rem;
    }

    .slide-caption {
        font-size: 1rem;
        padding: 8px 15px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }
}