/*
Theme Name: Deshee Labs Premium
Theme URI: http://desheelabs.store/
Author: Deshee Labs
Author URI: https://profiles.wordpress.org/desheelabs/
Description: A premium, modern WordPress theme for Deshee Labs with advanced animations and professional design
Version: 2.3.21
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deshee-labs-premium
Tags: grid-layout, featured-images, custom-colors, custom-menu, editor-style, full-width-template, theme-options, translation-ready

Copyright (c) 2024 Deshee Labs
Copyright 2024 Deshee Labs

Deshee Labs Premium WordPress Theme
Copyright (C) 2024 Deshee Labs

This theme is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

This theme is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this theme. If not, see <http://www.gnu.org/licenses/>.

Deshee Labs Premium is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800&display=swap');

:root {
    --primary-color: #6366f1;
    --secondary-color: #8b5cf6;
    --accent-color: #ec4899;
    --dark: #0f172a;
    --light: #f8fafc;
    --gray: #64748b;
    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.7;
    color: var(--dark);
    background-color: #fff;
    overflow-x: hidden;
}

.deshee-labs-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

a:focus, button:focus, input:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    line-height: 1.2;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

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

.deshee-labs-site-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 20px 0;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.deshee-labs-site-header.deshee-labs-scrolled {
    padding: 15px 0;
    box-shadow: var(--shadow-md);
}

.deshee-labs-site-header .deshee-labs-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.deshee-labs-site-logo h1,
.deshee-labs-site-logo a {
    font-size: 32px;
    font-weight: 800;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    transition: all 0.3s ease;
}

.deshee-labs-site-logo h1:hover,
.deshee-labs-site-logo a:hover {
    transform: scale(1.05);
}

.deshee-labs-site-header nav ul {
    list-style: none;
    display: flex;
    gap: 40px;
    align-items: center;
}

.deshee-labs-site-header nav a {
    text-decoration: none;
    color: var(--dark);
    font-weight: 600;
    font-size: 15px;
    position: relative;
    transition: color 0.3s ease;
    letter-spacing: 0.3px;
}

.deshee-labs-site-header nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-1);
    transition: width 0.3s ease;
}

.deshee-labs-site-header nav a:hover {
    color: var(--primary-color);
}

.deshee-labs-site-header nav a:hover::after {
    width: 100%;
}

.deshee-labs-mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.deshee-labs-mobile-menu-toggle span {
    width: 28px;
    height: 3px;
    background: var(--dark);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.deshee-labs-hero-section {
    padding: 140px 0 100px;
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    position: relative;
    overflow: hidden;
}

.deshee-labs-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.deshee-labs-hero-section .deshee-labs-container {
    position: relative;
    z-index: 1;
}

.deshee-labs-hero-section h2 {
    font-size: 72px;
    font-weight: 800;
    margin-bottom: 30px;
    color: #fff;
    animation: fadeInUp 0.8s ease;
    text-shadow: 0 4px 20px rgba(0,0,0,0.1);
    line-height: 1.1;
}

.deshee-labs-hero-section p {
    font-size: 22px;
    color: rgba(255,255,255,0.95);
    max-width: 800px;
    margin: 0 auto 50px;
    animation: fadeInUp 0.8s ease 0.2s both;
    font-weight: 400;
    line-height: 1.6;
}

.deshee-labs-hero-image {
    width: 100%;
    max-width: 1100px;
    margin: 60px auto 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.3);
    animation: fadeInUp 0.8s ease 0.4s both;
    transform-origin: center;
    transition: transform 0.5s ease;
}

.deshee-labs-hero-image:hover {
    transform: scale(1.02) translateY(-10px);
}

.deshee-labs-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

.deshee-labs-section-header {
    text-align: center;
    margin-bottom: 80px;
    animation: fadeInUp 0.8s ease;
}

.deshee-labs-section-label {
    display: inline-block;
    padding: 8px 20px;
    background: var(--gradient-1);
    color: #fff;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.deshee-labs-section-header h2 {
    font-size: 56px;
    margin-bottom: 20px;
    color: var(--dark);
}

.deshee-labs-section-header p {
    font-size: 20px;
    color: var(--gray);
    max-width: 700px;
    margin: 0 auto;
}

.deshee-labs-services-section {
    padding: 120px 0;
    background: var(--light);
    position: relative;
}

.deshee-labs-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 35px;
}

.deshee-labs-service-card {
    padding: 50px 40px;
    background: #fff;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

.deshee-labs-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-1);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

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

.deshee-labs-service-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}

.deshee-labs-service-icon {
    width: 70px;
    height: 70px;
    background: var(--gradient-1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 32px;
    color: #fff;
    transition: transform 0.3s ease;
}

.deshee-labs-service-card:hover .deshee-labs-service-icon {
    transform: rotate(10deg) scale(1.1);
}

.deshee-labs-service-card h3 {
    font-size: 26px;
    margin-bottom: 18px;
    color: var(--dark);
}

.deshee-labs-service-card p {
    color: var(--gray);
    line-height: 1.8;
    font-size: 16px;
}

.deshee-labs-resources-section {
    padding: 120px 0;
    background: #fff;
}

.deshee-labs-resource-content {
    display: flex;
    gap: 80px;
    align-items: center;
    margin-bottom: 100px;
}

.deshee-labs-resource-content:nth-child(even) {
    flex-direction: row-reverse;
}

.deshee-labs-resource-text {
    flex: 1;
    animation: fadeInUp 0.8s ease;
}

.deshee-labs-resource-text h3 {
    font-size: 42px;
    margin-bottom: 25px;
    color: var(--dark);
}

.deshee-labs-resource-text p {
    font-size: 18px;
    color: var(--gray);
    line-height: 1.9;
    margin-bottom: 30px;
}

.deshee-labs-btn-primary {
    display: inline-block;
    padding: 16px 40px;
    background: var(--gradient-1);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.deshee-labs-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.deshee-labs-resource-image {
    flex: 1;
    animation: fadeIn 0.8s ease;
}

.deshee-labs-resource-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    transition: transform 0.5s ease;
}

.deshee-labs-resource-image:hover img {
    transform: scale(1.05) rotate(2deg);
}

.deshee-labs-testimonial-section {
    padding: 120px 0;
    background: var(--light);
    text-align: center;
    position: relative;
}

.deshee-labs-testimonial-slider {
    max-width: 900px;
    margin: 0 auto;
}

.deshee-labs-testimonial-content {
    padding: 60px;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    animation: fadeInUp 0.8s ease;
}

.deshee-labs-quote-icon {
    font-size: 60px;
    color: var(--primary-color);
    opacity: 0.2;
    margin-bottom: 20px;
}

.deshee-labs-testimonial-content blockquote {
    font-size: 28px;
    font-style: italic;
    color: var(--dark);
    margin-bottom: 40px;
    line-height: 1.6;
    font-weight: 500;
}

.deshee-labs-testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.deshee-labs-author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-1);
}

.deshee-labs-author-info h4 {
    font-size: 18px;
    color: var(--dark);
    margin-bottom: 5px;
}

.deshee-labs-author-info p {
    font-size: 14px;
    color: var(--gray);
}

.deshee-labs-cta-section {
    padding: 120px 0;
    background: var(--gradient-1);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.deshee-labs-cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite;
}

.deshee-labs-cta-section h2 {
    font-size: 56px;
    margin-bottom: 25px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.deshee-labs-cta-section p {
    font-size: 22px;
    margin-bottom: 50px;
    opacity: 0.95;
}

.deshee-labs-cta-button {
    display: inline-block;
    padding: 18px 50px;
    background: #fff;
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.deshee-labs-cta-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.deshee-labs-site-footer {
    background: var(--dark);
    color: #fff;
    padding: 80px 0 30px;
}

.deshee-labs-footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    margin-bottom: 60px;
}

.deshee-labs-footer-column h3 {
    font-size: 22px;
    margin-bottom: 25px;
    font-weight: 700;
}

.deshee-labs-footer-column ul {
    list-style: none;
}

.deshee-labs-footer-column li {
    margin-bottom: 12px;
}

.deshee-labs-footer-column a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 15px;
}

.deshee-labs-footer-column a:hover {
    color: #fff;
}

.deshee-labs-social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.deshee-labs-social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.deshee-labs-social-links a:hover {
    background: var(--gradient-1);
    transform: translateY(-3px);
}

.deshee-labs-footer-bottom {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
}

.deshee-labs-stats-section {
    padding: 100px 0;
    background: var(--dark);
    color: #fff;
}

.deshee-labs-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    text-align: center;
}

.deshee-labs-stat-item h3 {
    font-size: 56px;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 15px;
}

.deshee-labs-stat-item p {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
}

@media (max-width: 1024px) {
    .deshee-labs-hero-section h2 {
        font-size: 56px;
    }
    
    .deshee-labs-section-header h2 {
        font-size: 42px;
    }
    
    .deshee-labs-resource-content {
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .deshee-labs-site-header nav ul {
        position: fixed;
        top: 80px;
        left: -100%;
        flex-direction: column;
        background: #fff;
        width: 100%;
        padding: 30px;
        box-shadow: var(--shadow-lg);
        transition: left 0.3s ease;
        align-items: flex-start;
    }
    
    .deshee-labs-site-header nav ul.deshee-labs-active {
        left: 0;
    }
    
    .deshee-labs-mobile-menu-toggle {
        display: flex;
    }
    
    .deshee-labs-hero-section {
        padding: 100px 0 60px;
    }
    
    .deshee-labs-hero-section h2 {
        font-size: 40px;
    }
    
    .deshee-labs-hero-section p {
        font-size: 18px;
    }
    
    .deshee-labs-section-header h2 {
        font-size: 36px;
    }
    
    .deshee-labs-services-grid {
        grid-template-columns: 1fr;
    }
    
    .deshee-labs-resource-content {
        flex-direction: column !important;
        gap: 40px;
    }
    
    .deshee-labs-testimonial-content blockquote {
        font-size: 22px;
    }
    
    .deshee-labs-cta-section h2 {
        font-size: 36px;
    }
    
    .deshee-labs-footer-content {
        grid-template-columns: 1fr;
    }
}

.deshee-labs-scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--gradient-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

.deshee-labs-scroll-to-top.deshee-labs-visible {
    opacity: 1;
    visibility: visible;
}

.deshee-labs-scroll-to-top:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

/* WordPress Core Classes */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}

.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption-text {
    text-align: center;
    font-size: 0.9em;
    color: var(--gray);
    margin-top: 0.5em;
}

.sticky {
    display: block;
    border: 2px solid var(--primary-color);
    padding: 1em;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.05);
}

.gallery-caption {
    font-size: 0.9em;
    color: var(--gray);
    text-align: center;
    margin-top: 0.5em;
}

.bypostauthor {
    background: rgba(99, 102, 241, 0.1);
    padding: 0.5em 1em;
    border-radius: 4px;
    border-left: 3px solid var(--primary-color);
}

.page-links {
    clear: both;
    margin: 2em 0;
    text-align: center;
}

.page-links a {
    display: inline-block;
    padding: 0.5em 1em;
    margin: 0 0.25em;
    background: var(--light);
    color: var(--dark);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.page-links a:hover {
    background: var(--primary-color);
    color: #fff;
}