/* =========================================
   HERO SECTION (Clean Dark Theme)
========================================= */

.hero-section {
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px 20px;
    
    /* Simple, Clean Linear Gradient (Black to Deep Midnight Blue) */
    background: linear-gradient(180deg, #000000 0%, #050a14 100%);
    color: #ffffff;
}

.hero-content {
    max-width: 1000px;
    z-index: 2;
}

/* --- THE ANIMATED H1 --- */
.hero-title {
    font-size: 5rem; /* Massive Size */
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: -2px;

    /* The Moving Gradient inside the text */
    background: linear-gradient(
        to right, 
        #ffffff 0%, 
        #00c6ff 25%, 
        #0072ff 50%, 
        #00c6ff 75%, 
        #ffffff 100%
    );
    background-size: 200% auto; /* Make gradient wide enough to move */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animation: Shimmer Effect */
    animation: textShimmer 4s linear infinite; 
}

/* Animation Keyframes for Text Gradient */
@keyframes textShimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* --- DESCRIPTION --- */
.hero-description {
    font-size: 1.35rem;
    color: #a0aab5; /* Cool grey for good contrast against black */
    max-width: 750px;
    margin: 0 auto 45px auto;
    line-height: 1.6;
}

/* --- BUTTONS --- */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.hero-primary-btn {
    padding: 18px 45px;
    font-size: 1.15rem;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    box-shadow: 0 0 20px rgba(0, 114, 255, 0.4); /* Blue Glow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-primary-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(0, 198, 255, 0.6);
}

.hero-secondary-btn {
    padding: 18px 45px;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    color: #ffffff;
    border: 2px solid #333; /* Darker border for sleek look */
    border-radius: 50px;
    transition: all 0.3s ease;
}

.hero-secondary-btn:hover {
    border-color: #00c6ff;
    color: #00c6ff;
    background: rgba(0, 198, 255, 0.05);
}

/* --- ENTRANCE ANIMATIONS (Slide Up) --- */
.animate-reveal {
    animation: slideUpFade 1s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

.animate-fade-up {
    animation: slideUpFade 0.8s ease-out forwards 0.3s; /* Delay */
    opacity: 0;
    transform: translateY(30px);
}

.delay-200 { animation-delay: 0.5s; }

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

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.8rem;
    }
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: auto;
    }
   .hero-secondary-btn{
        display: none;
    }
}


/* Slider Logo under Hero Section*/

/* =========================================
   INFINITE LOGO SLIDER
========================================= */

.tech-slider {
    /* Single Solid Color Background (Matching Dark Theme) */
    background: #000000; 
    padding: 40px 0;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #1a1a1a; /* Subtle separator */
    white-space: nowrap;
}

/* The Track that moves */
.slider-track {
    display: flex;
    width: max-content; /* Ensure it fits all items */
    animation: scroll 40s linear infinite;
}

/* Pause animation on hover so user can read/click */
.slider-track:hover {
    animation-play-state: paused;
}

/* The Individual Logo Items */
.slide {
    display: flex;
    align-items: center;
    gap: 60px; /* Space between logos */
    padding-right: 60px; /* Gap between the two duplicate groups */
}

.tech-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem; /* Icon Size */
    font-weight: 700;
    color: #fff; /* Initial Grayscale/Dark Color */
    transition: all 0.3s ease;
    cursor: default;
    opacity: 0.6;
    filter: grayscale(100%); /* Makes everything grey initially */
}

.tech-item span {
    font-size: 1.1rem; /* Text Label Size */
}

/* --- HOVER EFFECTS (Reveal Brand Colors) --- */
.tech-item:hover {
    transform: scale(1.1); /* Slight pop up */
    opacity: 1;
    filter: grayscale(0%); /* Remove grey filter */
    color: var(--brand-color); /* Fallback */
}

/* SPECIFIC BRAND COLORS */
.tech-item.wp:hover         { color: #21759b; }
.tech-item.elementor:hover  { color: #92003B; }
.tech-item.wpbakery:hover   { color: #378DE5; }
.tech-item.woocommerce:hover{ color: #96588a; }
.tech-item.gravity:hover    { color: #F15A24; }
.tech-item.n8n:hover        { color: #FF6D5A; }
.tech-item.html:hover       { color: #e34c26; }
.tech-item.css:hover        { color: #264de4; }
.tech-item.js:hover         { color: #f7df1e; }
.tech-item.php:hover        { color: #777bb4; }

.tech-item.openai:hover     { color: #10a37f; }
.tech-item.gemini:hover     { color: #4E86F8; }
.tech-item.claude:hover     { color: #d97757; }
.tech-item.grok:hover       { color: #e1e1e1; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
.tech-item.listingpro:hover { color: #00ADEE; }
.tech-item.learndash:hover  { color: #008AD0; }

/* --- ANIMATION KEYFRAMES --- */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move exactly -50% because we duplicated the list once */
        transform: translateX(-50%);
    }
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .tech-item {
        font-size: 1.2rem; /* Smaller icons on mobile */
    }
    .tech-item span {
        font-size: 0.9rem;
    }
    .slide {
        gap: 40px; /* Reduce gap on mobile */
        padding-right: 40px;
    }
}

/* ABout US Section ---------------- */

/* =========================================
   ABOUT SECTION STYLES
========================================= */

.about-section {
    /* Slightly lighter than black to separate from Hero/Slider */
    background-color: #050a14; 
    padding: 100px 5%;
    color: #ffffff;
    position: relative;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: space-between;
    gap: 80px; /* Space between columns */
    flex-wrap: wrap; /* Wraps on mobile */
}

/* --- COLUMN 1: TEXT --- */
.about-text-col {
    flex: 1; /* Takes up 50% width */
    min-width: 300px;
}

.section-tag {
    color: #00c6ff;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 700;
}

.about-headline {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #ffffff;
}

.text-gradient {
    background: linear-gradient(to right, #00c6ff, #0072ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-para {
    color: #b0b0b0; /* Light grey for readability */
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 25px;
}

.about-para strong {
    color: #ffffff; /* Highlight key words in white */
    font-weight: 600;
}

.about-btn {
    margin-top: 10px;
    display: inline-block;
}

/* --- COLUMN 2: STATS VISUAL --- */
.about-visual-col {
    flex: 0.8; /* Takes up slightly less space than text */
    min-width: 300px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 Grid */
    gap: 20px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.03); /* Glass Effect */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px 20px;
    text-align: center;
    border-radius: 15px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-5px);
    border-color: rgba(0, 198, 255, 0.3);
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 10px;
    /* Gradient Numbers */
    background: linear-gradient(to bottom right, #ffffff, #00c6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 0.95rem;
    color: #a0aab5;
    font-weight: 500;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .about-container {
        flex-direction: column; /* Stack columns on tablets/mobile */
        gap: 50px;
    }
    
    .about-visual-col {
        width: 100%; /* Full width stats */
    }
    
    .about-headline {
        font-size: 2.5rem;
    }
}

@media (max-width: 500px) {
    .stats-grid {
        grid-template-columns: 1fr; /* Stack stats vertically on small phones */
    }
}


/* Services Section on Home Page CSS*/

/* =========================================
   SERVICES SECTION (Hardcoded Colors)
========================================= */

.services-section {
    background-color: #000000;
    padding: 100px 5%;
    position: relative;
    /* Tech grid background */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

.services-container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- HEADER --- */
.services-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 70px auto;
    background: #000; /* Masks the grid lines behind text */
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 50px 50px #000000;
}

.services-title {
    font-size: 3rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 25px;
}

.highlight-text {
    /* Standard Blue Gradient for Title */
    background: linear-gradient(to right, #00c6ff, #0072ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.services-desc {
    color: #a0aab5;
    font-size: 1.15rem;
    line-height: 1.6;
}

/* --- GRID --- */
.services-grid {
    display: grid;
    /* Responsive logic without variables */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

/* =========================================
   BASE CARD STYLES
========================================= */

.service-card {
    background: rgba(20, 20, 25, 0.6); /* Dark Glass Base */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Top Gradient Line Base (Hidden) */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

/* Content Styles */
.service-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
}

.service-card p {
    font-size: 0.95rem;
    color: #a0aab5;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

.card-icon {
    font-size: 2rem;
    margin-bottom: 25px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* Tags Container */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.tag {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* Global Hover Movement */
.service-card:hover {
    transform: translateY(-10px);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover .card-icon {
    transform: rotateY(180deg);
    color: #ffffff !important; /* Force white icon on hover */
}

/* =========================================
   COLOR THEMES (EXPLICIT / NO VARIABLES)
========================================= */

/* --- 1. WordPress (Standard Blue) --- */
.card-wp .card-icon {
    color: #0073aa;
    background: rgba(0, 115, 170, 0.1);
    border-color: rgba(0, 115, 170, 0.2);
}
.card-wp .tag {
    color: #0073aa;
    background: rgba(0, 115, 170, 0.1);
    border-color: rgba(0, 115, 170, 0.2);
}
.card-wp::before { background: linear-gradient(90deg, #0073aa, #ffffff); }
/* Hover States */
.card-wp:hover {
    border-color: rgba(0, 115, 170, 0.5);
    box-shadow: 0 15px 40px -10px rgba(0, 115, 170, 0.3);
}
.card-wp:hover .card-icon { background: #0073aa; }
.card-wp:hover .tag { background: rgba(0, 115, 170, 0.2); }


/* --- 2. AI & Automation (Purple) --- */
.card-ai .card-icon {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
}
.card-ai .tag {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
}
.card-ai::before { background: linear-gradient(90deg, #8b5cf6, #ffffff); }
/* Hover States */
.card-ai:hover {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 15px 40px -10px rgba(139, 92, 246, 0.3);
}
.card-ai:hover .card-icon { background: #8b5cf6; }
.card-ai:hover .tag { background: rgba(139, 92, 246, 0.2); }


/* --- 3. Specialized Solutions (Cyan/Teal) --- */
.card-special .card-icon {
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.2);
}
.card-special .tag {
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.2);
}
.card-special::before { background: linear-gradient(90deg, #06b6d4, #ffffff); }
/* Hover States */
.card-special:hover {
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 15px 40px -10px rgba(6, 182, 212, 0.3);
}
.card-special:hover .card-icon { background: #06b6d4; }
.card-special:hover .tag { background: rgba(6, 182, 212, 0.2); }


/* --- 4. SEO (Green) --- */
.card-seo .card-icon {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}
.card-seo .tag {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}
.card-seo::before { background: linear-gradient(90deg, #10b981, #ffffff); }
/* Hover States */
.card-seo:hover {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 15px 40px -10px rgba(16, 185, 129, 0.3);
}
.card-seo:hover .card-icon { background: #10b981; }
.card-seo:hover .tag { background: rgba(16, 185, 129, 0.2); }


/* --- 5. Plugins (Orange) --- */
.card-plugin .card-icon {
    color: #f97316;
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.2);
}
.card-plugin .tag {
    color: #f97316;
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.2);
}
.card-plugin::before { background: linear-gradient(90deg, #f97316, #ffffff); }
/* Hover States */
.card-plugin:hover {
    border-color: rgba(249, 115, 22, 0.5);
    box-shadow: 0 15px 40px -10px rgba(249, 115, 22, 0.3);
}
.card-plugin:hover .card-icon { background: #f97316; }
.card-plugin:hover .tag { background: rgba(249, 115, 22, 0.2); }


/* --- 6. Redesign (Hot Pink) --- */
.card-design .card-icon {
    color: #ec4899;
    background: rgba(236, 72, 153, 0.1);
    border-color: rgba(236, 72, 153, 0.2);
}
.card-design .tag {
    color: #ec4899;
    background: rgba(236, 72, 153, 0.1);
    border-color: rgba(236, 72, 153, 0.2);
}
.card-design::before { background: linear-gradient(90deg, #ec4899, #ffffff); }
/* Hover States */
.card-design:hover {
    border-color: rgba(236, 72, 153, 0.5);
    box-shadow: 0 15px 40px -10px rgba(236, 72, 153, 0.3);
}
.card-design:hover .card-icon { background: #ec4899; }
.card-design:hover .tag { background: rgba(236, 72, 153, 0.2); }


/* --- 7. E-commerce (Woo Purple) --- */
.card-ecom .card-icon {
    color: #9b5c8f; /* Woo Purple */
    background: rgba(155, 92, 143, 0.1);
    border-color: rgba(155, 92, 143, 0.2);
}
.card-ecom .tag {
    color: #9b5c8f;
    background: rgba(155, 92, 143, 0.1);
    border-color: rgba(155, 92, 143, 0.2);
}
.card-ecom::before { background: linear-gradient(90deg, #9b5c8f, #ffffff); }
/* Hover States */
.card-ecom:hover {
    border-color: rgba(155, 92, 143, 0.5);
    box-shadow: 0 15px 40px -10px rgba(155, 92, 143, 0.3);
}
.card-ecom:hover .card-icon { background: #9b5c8f; }
.card-ecom:hover .tag { background: rgba(155, 92, 143, 0.2); }


/* --- 8. Migration (Amber/Gold) --- */
.card-migrate .card-icon {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}
.card-migrate .tag {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}
.card-migrate::before { background: linear-gradient(90deg, #f59e0b, #ffffff); }
/* Hover States */
.card-migrate:hover {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 15px 40px -10px rgba(245, 158, 11, 0.3);
}
.card-migrate:hover .card-icon { background: #f59e0b; }
.card-migrate:hover .tag { background: rgba(245, 158, 11, 0.2); }


/* --- 9. Maintenance (Red) --- */
.card-maint .card-icon {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}
.card-maint .tag {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}
.card-maint::before { background: linear-gradient(90deg, #ef4444, #ffffff); }
/* Hover States */
.card-maint:hover {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 15px 40px -10px rgba(239, 68, 68, 0.3);
}
.card-maint:hover .card-icon { background: #ef4444; }
.card-maint:hover .tag { background: rgba(239, 68, 68, 0.2); }


/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .services-title {
        font-size: 2.2rem;
    }
    .services-grid {
        /* Force 1 column on mobile for better stacking */
        grid-template-columns: 1fr;
    }
}

/* CSS of Infographic Section on Home Page */


/* =========================================
   INFOGRAPHIC SECTION (The Dual Engine)
========================================= */

.info-section {
    background-color: #000000;
    padding: 100px 5%;
    position: relative;
    border-top: 1px solid #111;
}

.info-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- SECTION HEADINGS --- */
.info-header {
    text-align: center;
    margin-bottom: 60px;
}

.info-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
}

.info-subtitle {
    color: #a0aab5;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* --- THE SPLIT GRID --- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% - 50% Split */
    gap: 40px;
    align-items: stretch;
}

/* =========================================
   INFOGRAPHIC CARDS
========================================= */

.info-card {
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}

/* Background Watermark Icon (Visual Interest) */
.info-card .watermark {
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 15rem;
    opacity: 0.03;
    pointer-events: none;
    transition: all 0.5s ease;
}

.info-card h3 {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.info-card .card-desc {
    color: #a0aab5;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 35px;
    position: relative;
    z-index: 2;
}

/* --- LIST STYLES --- */
.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}

.info-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    color: #cfd6e0;
    font-size: 1.05rem;
    font-weight: 500;
}

.info-list li i {
    font-size: 1.2rem;
    margin-top: 4px; /* Align icon with text top */
    min-width: 25px;
}

/* =========================================
   THEME 1: WEBSITE (Blue/Cyan)
========================================= */

/* Top Highlight Line */
.card-web::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
}

/* Icon Colors */
.card-web .info-list li i {
    color: #00c6ff;
    text-shadow: 0 0 10px rgba(0, 198, 255, 0.4);
}

/* Hover Effect */
.card-web:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px -20px rgba(0, 114, 255, 0.2);
    border-color: rgba(0, 198, 255, 0.3);
}

.card-web:hover .watermark {
    opacity: 0.08;
    transform: rotate(-10deg) scale(1.1);
    color: #00c6ff;
}

/* =========================================
   THEME 2: AUTOMATION (Purple/Pink)
========================================= */

/* Top Highlight Line */
.card-auto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #d53369, #daae51); /* Sunset Gradient */
}

/* Icon Colors */
.card-auto .info-list li i {
    color: #daae51; /* Gold/Orange */
    text-shadow: 0 0 10px rgba(218, 174, 81, 0.4);
}

/* Hover Effect */
.card-auto:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px -20px rgba(213, 51, 105, 0.2);
    border-color: rgba(213, 51, 105, 0.3);
}

.card-auto:hover .watermark {
    opacity: 0.08;
    transform: rotate(10deg) scale(1.1);
    color: #d53369;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .info-grid {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 30px;
    }
    
    .info-card {
        padding: 40px 25px;
    }
}


/* Portfolio Projects Section */

/* =========================================
   PORTFOLIO SECTION
========================================= */

.portfolio-section {
    background-color: #050505;
    padding: 100px 5%;
    position: relative;
}

.portfolio-container {
    max-width: 1300px;
    margin: 0 auto;
}

/* --- HEADER --- */
.portfolio-header {
    text-align: center;
    margin-bottom: 50px;
}

.portfolio-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
}

.portfolio-subtitle {
    color: #a0aab5;
    margin-bottom: 40px;
}

/* --- FILTER NAV --- */
.filter-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 60px;
}

.filter-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #a0aab5;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    color: #ffffff;
    border-color: #ffffff;
}

.filter-btn.active {
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(0, 114, 255, 0.4);
}

/* --- PROJECTS GRID --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

.project-item { animation: fadeIn 0.5s ease forwards; }
.project-item.hide { display: none; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   PROJECT CARD DESIGN
========================================= */

.project-card {
    background: #101010;
    border: 1px solid #222;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.4s ease, border-color 0.4s ease;
    position: relative;
}

/* Content Area */
.project-content {
    padding: 30px 30px 20px 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-title {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
}

.project-desc {
    font-size: 0.95rem;
    color: #a0aab5;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* --- COLORFUL TECH TAGS --- */
.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    margin-top: auto; /* Push to bottom of content area */
}

.tech-tag {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 50px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Color Variations (Hardcoded rgba values) */
.tag-blue {
    background: rgba(0, 114, 255, 0.1);
    color: #3399ff;
    border-color: rgba(0, 114, 255, 0.3);
}

.tag-purple {
     background: rgba(139, 92, 246, 0.1);
     color: #a78bfa;
     border-color: rgba(139, 92, 246, 0.3);
}

.tag-green {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

.tag-orange {
    background: rgba(249, 115, 22, 0.1);
    color: #fb923c;
    border-color: rgba(249, 115, 22, 0.3);
}

.tag-cyan {
    background: rgba(6, 182, 212, 0.1);
    color: #22d3ee;
    border-color: rgba(6, 182, 212, 0.3);
}

/* Hover effect for tags */
.tech-tag:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}


/* --- BOTTOM META BOX --- */
.project-meta {
    background: #0a0a0a;
    border-top: 1px solid #222;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
}

.meta-group h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.meta-group span {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ccc;
}

.outcome-val {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

/* --- CARD HOVER EFFECTS --- */
.project-card:hover {
    transform: translateY(-7px);
    border-color: #444;
}

.project-card:hover .project-meta {
    background: #151515;
}

.project-card:hover .outcome-val {
    color: #00c6ff !important;
    text-shadow: 0 0 20px rgba(0, 198, 255, 0.8);
}

/* Responsive */
@media (max-width: 768px) {
    .projects-grid { grid-template-columns: 1fr; }
    .portfolio-title { font-size: 2rem; }
}

/* Clinet Feedback and testimonials Section */


/* =========================================
   TESTIMONIAL SECTION (HORIZONTAL FIX)
========================================= */

.testimonial-section * { box-sizing: border-box; }

.testimonial-section {
    background-color: #000000;
    padding: 100px 5%;
    position: relative;
    border-top: 1px solid #111;
    overflow: hidden; /* Prevent horizontal scrollbar on body */
}

/* Changed: Grid layout to stack vertically on mobile, row on desktop */
.testimonial-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Changed: 40% text, 60% slider to give slider more room */
    grid-template-columns: 40% 60%; 
    gap: 40px;
    align-items: center;
}

/* --- LEFT COLUMN --- */
.testi-content { padding-right: 20px; }
.testi-tag {
    color: #00c6ff;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}
.testi-title {
    font-size: 3rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 25px;
}
.testi-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 30px;
}
.testi-line {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    border-radius: 2px;
}

/* --- SLIDER WRAPPER (HORIZONTAL) --- */
.testi-slider-wrapper {
    position: relative;
    width: 100%;
    /* Changed: Height fits exactly one card + hover space */
    height: auto; 
    overflow: hidden;
    /* Changed: Mask is now Left-to-Right gradient */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.slider-track {
    display: flex;
    /* Changed: Row direction for horizontal */
    flex-direction: row; 
    gap: 20px;
    width: max-content; /* Allows track to be as wide as needed */
    /* Animation: defined below */
    animation: scroll 30s linear infinite; 
}

/* Pause animation on hover for readability */
.slider-track:hover {
    animation-play-state: paused;
}

/* --- CARD STYLES --- */
.testi-card {
    /* Changed: Fixed width is mandatory for horizontal scroll */
    width: 380px; 
    height: auto;
    flex-shrink: 0; /* Prevents squishing */
    
    background: rgba(20, 20, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 30px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.stars { color: #f59e0b; font-size: 0.85rem; }

/* Service Badge */
.service-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    letter-spacing: 0.5px;
}
.badge-purple { background: rgba(139, 92, 246, 0.1); color: #a78bfa; border-color: rgba(139, 92, 246, 0.3); }
.badge-blue { background: rgba(0, 114, 255, 0.1); color: #3399ff; border-color: rgba(0, 114, 255, 0.3); }
.badge-cyan { background: rgba(6, 182, 212, 0.1); color: #22d3ee; border-color: rgba(6, 182, 212, 0.3); }
.badge-green { background: rgba(16, 185, 129, 0.1); color: #34d399; border-color: rgba(16, 185, 129, 0.3); }

/* Text & Author */
.quote-text {
    font-size: 1.05rem;
    color: #cfd6e0;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 20px;
    
    /* Ensure text doesn't break layout */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.author-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
}
.author-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #333;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.1);
}
.author-details h4 { font-size: 0.95rem; color: #ffffff; font-weight: 700; margin-bottom: 2px; margin-top: 0;}
.author-details span { font-size: 0.8rem; color: #8892b0; }

.testi-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

/* --- ANIMATION KEYFRAMES --- */
/* Moves the track to the left by exactly 50% of its width */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

/* Mobile Fix */
@media (max-width: 900px) {
    .testimonial-container { grid-template-columns: 1fr; text-align: center; }
    .testi-content { padding-right: 0; margin-bottom: 40px; }
    .testi-line { margin: 0 auto; }
    .testi-slider-wrapper { 
        /* On mobile, user can swipe manually if needed, or keep animation */
        width: 100vw;
        margin-left: -5%; /* Pull to edges */
    }
}


/* Blogs Posts Section on Home Page */

/* =========================================
   BLOG SECTION (ORDERED + ARROW)
========================================= */

.blog-section {
    background-color: #050505;
    padding: 100px 5%;
    border-top: 1px solid #111;
}

.blog-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- HEADER --- */
.blog-header {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog-tag {
    color: #00c6ff;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.blog-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 20px 0;
}

.blog-line {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    border-radius: 2px;
}

/* --- GRID --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- CARD --- */
.blog-card {
    background: #141419;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

/* 1. Image Wrapper */
.blog-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

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

.blog-card:hover .blog-img {
    transform: scale(1.08);
}

/* Content Wrapper */
.blog-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 2. Title */
.card-title {
    font-size: 1.3rem;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.3;
    font-weight: 700;
}

/* 3. Date */
.blog-date {
    display: block;
    color: #00c6ff; /* Blue accent for date */
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    opacity: 0.9;
}

/* 4. Excerpt */
.card-desc {
    font-size: 0.95rem;
    color: #a0aab5;
    line-height: 1.6;
    margin-bottom: 25px;
    /* Limit lines to 3 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 5. Read More + Arrow */
.read-more {
    margin-top: auto;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between text and arrow */
    transition: color 0.3s ease;
}

/* SVG Arrow Styling */
.read-more svg {
    transition: transform 0.3s ease;
    stroke: #00c6ff; /* Arrow color starts as blue */
}

/* Hover Effects */
.read-more:hover {
    color: #00c6ff;
}

.read-more:hover svg {
    transform: translateX(6px); /* Move arrow to right */
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-title { font-size: 2.2rem; }
}

/* Blogs Section on Home Page*/


/* =========================================
   BLOG SECTION (ORDERED + ARROW)
========================================= */

.blog-section {
    background-color: #050505;
    padding: 100px 5%;
    border-top: 1px solid #111;
}

.blog-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- HEADER --- */
.blog-header {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog-tag {
    color: #00c6ff;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.blog-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 20px 0;
}

.blog-line {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    border-radius: 2px;
}

/* --- GRID --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- CARD --- */
.blog-card {
    background: #141419;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

/* 1. Image Wrapper */
.blog-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

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

.blog-card:hover .blog-img {
    transform: scale(1.08);
}

/* Content Wrapper */
.blog-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 2. Title */
.card-title {
    font-size: 1.3rem;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.3;
    font-weight: 700;
}

/* 3. Date */
.blog-date {
    display: block;
    color: #00c6ff; /* Blue accent for date */
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    opacity: 0.9;
}

/* 4. Excerpt */
.card-desc {
    font-size: 0.95rem;
    color: #a0aab5;
    line-height: 1.6;
    margin-bottom: 25px;
    /* Limit lines to 3 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 5. Read More + Arrow */
.read-more {
    margin-top: auto;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between text and arrow */
    transition: color 0.3s ease;
}

/* SVG Arrow Styling */
.read-more svg {
    transition: transform 0.3s ease;
    stroke: #00c6ff; /* Arrow color starts as blue */
}

/* Hover Effects */
.read-more:hover {
    color: #00c6ff;
}

.read-more:hover svg {
    transform: translateX(6px); /* Move arrow to right */
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-title { font-size: 2.2rem; }
}

/* CTA Section and Form on Home Page */

/* =========================================
   CTA / CONTACT SECTION (FIXED DROPDOWN)
========================================= */

.cta-section {
    background-color: #000000;
    padding: 100px 5%;
    position: relative;
    border-top: 1px solid #111;
}

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* --- COLUMN 1: INFO --- */
.cta-info { max-width: 500px; }

.cta-tag {
    color: #00c6ff;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}

.cta-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 25px;
}

/* Animated Gradient Text */
.gradient-text {
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: gradientMove 4s linear infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.cta-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* Contact Items */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon-box {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00c6ff;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.contact-item:hover .icon-box {
    background: rgba(0, 198, 255, 0.1);
    border-color: #00c6ff;
    transform: scale(1.1);
}

.detail-text span {
    display: block;
    font-size: 0.8rem;
    color: #8892b0;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.detail-text a, .detail-text p {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    margin: 0;
    transition: color 0.3s ease;
}

.detail-text a:hover { color: #00c6ff; }

/* --- COLUMN 2: FORM (UPDATED) --- */
.cta-form-wrapper {
    background: #141419;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

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

.form-group label {
    display: block;
    color: #cfd6e0;
    font-size: 0.9rem;
    margin-bottom: 8px;
    font-weight: 500;
}

/* Base Styles for Inputs and Select */
.form-group input, 
.form-group textarea, 
.form-group select {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 15px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

/* === DROPDOWN SPECIFIC STYLES === */
.select-wrapper {
    position: relative;
    width: 100%;
}

.form-group select {
    /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    /* Add dark background specifically for the options */
    background-color: rgba(0, 0, 0, 0.3); 
}

/* Style the actual dropdown list (options) */
.form-group select option {
    background-color: #141419; /* Dark background for options */
    color: #fff; /* White text */
    padding: 10px;
}

/* Custom Arrow Icon */
.select-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #8892b0;
    pointer-events: none; /* Clicks pass through to select */
    font-size: 0.8rem;
    transition: color 0.3s ease;
}

/* Focus States */
.form-group input:focus, 
.form-group textarea:focus, 
.form-group select:focus {
    border-color: #00c6ff;
    background: rgba(0, 198, 255, 0.05);
    box-shadow: 0 0 15px rgba(0, 198, 255, 0.1);
}

/* Change icon color on focus */
.form-group select:focus + .select-icon {
    color: #00c6ff;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 10px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 114, 255, 0.3);
}

.submit-btn:active { transform: translateY(0); }

/* Status Message */
#form-status {
    margin-top: 15px;
    font-size: 0.9rem;
    text-align: center;
    min-height: 20px;
    font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .cta-container { grid-template-columns: 1fr; gap: 50px; }
    .cta-info { text-align: center; margin: 0 auto; }
    .contact-details { align-items: center; }
    .cta-title { font-size: 2.5rem; }
}