/*
Theme Name: Reliable Tech Theme
Theme URI: https://reliabletech.co.in
Author: Mukesh Kumar
Description: Custom WordPress theme with Orange & Green Identity (Based on provided HTML).
Version: 5.0
*/

/* =========================================
   1. FONTS & ICONS IMPORT
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round|Material+Icons+Outlined');

/* =========================================
   2. GLOBAL VARIABLES (BRAND COLORS)
   ========================================= */
:root {
    /* --- Brand Colors --- */
    --bs-primary: #FF6B00;   /* Bright Orange */
    --bs-secondary: #76B900; /* Fresh Green */
    
    /* --- Gradients --- */
    --brand-gradient: linear-gradient(135deg, #FF8C00 0%, #FF4500 100%);
    --brand-gradient-hover: linear-gradient(135deg, #FFA500 0%, #FF6B00 100%);
    --green-gradient: linear-gradient(135deg, #84CC16 0%, #65A30D 100%);

    /* --- Mapping --- */
    --primary: var(--bs-primary);
    --secondary: var(--bs-secondary);

    /* --- Backgrounds --- */
    --bg-light: #F9FAFB;
    --text-main: #1F2937;
    --text-muted: #6B7280;
}

/* =========================================
   3. BASE STYLES & TYPOGRAPHY
   ========================================= */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-main);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

/* Material Icons Fix */
.material-icons, .material-icons-round {
    font-family: 'Material Icons Round';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
}

/* =========================================
   4. TEXT & BACKGROUND UTILITIES
   ========================================= */
/* Custom Text Colors */
.text-primary-custom { color: var(--bs-primary) !important; }
.text-secondary-custom { color: var(--bs-secondary) !important; }

/* Text Gradients */
.text-gradient-orange {
    background: linear-gradient(to right, #FF8C00, #FF4500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.text-gradient-green {
    background: linear-gradient(to right, #84CC16, #4D7C0F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Soft Backgrounds */
.bg-orange-soft { background-color: #FFF7ED; color: #9A3412; }
.bg-green-soft { background-color: #F0FDF4; color: #166534; }

/* Section Overflow Fix */
section { overflow: hidden; }

/* =========================================
   5. BUTTONS & GRADIENTS
   ========================================= */
.bg-brand-gradient, .btn-custom {
    background: var(--brand-gradient);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.bg-brand-gradient:hover, .btn-custom:hover {
    background: var(--brand-gradient-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
}

.bg-green-gradient {
    background: var(--green-gradient);
}

/* =========================================
   6. NAVBAR & HEADER
   ========================================= */
.navbar {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid #e5e7eb;
}

.nav-link {
    font-size: 0.95rem;
    transition: color 0.2s;
}
.nav-link:hover, .nav-link.active {
    color: var(--bs-primary) !important;
}

/* =========================================
   7. HERO SECTION STYLES
   ========================================= */
.hero-img {
    border-radius: 1rem;
    transform: rotate(3deg);
    transition: transform 0.5s ease;
    border: 4px solid white;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.hero-img:hover {
    transform: rotate(0deg);
}

/* Spinner styling inside badge */
.spinner-grow {
    --bs-spinner-width: 0.8rem;
    --bs-spinner-height: 0.8rem;
    animation-duration: 1.5s;
}

/* Trusted By Logos (Grayscale) */
.grayscale {
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s;
}
.grayscale:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* =========================================
   8. CARDS & FLOATING ELEMENTS
   ========================================= */
/* Custom Cards */
.card-custom, .service-card {
    border: none;
    border-radius: 1rem;
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card-custom:hover, .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.border-hover-green:hover {
    border: 1px solid var(--bs-secondary); /* Optional highlight */
}

/* Floating Badge Animation */
.floating-badge {
    position: absolute;
    background: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 20;
    animation: bounce 3s infinite ease-in-out;
    border: 1px solid #f3f4f6;
}

@keyframes bounce {
    0%, 100% { transform: translateY(-5%); }
    50% { transform: translateY(5%); }
}

/* =========================================
   9. FOOTER
   ========================================= */
.footer-link {
    color: #9CA3AF;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-link:hover {
    color: var(--bs-primary);
}

.social-icon {
    width: 40px;
    height: 40px;
    background: #374151;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.3s;
    color: white;
}
.social-icon:hover {
    background: var(--bs-primary);
    color: white;
}

/* =========================================
   10. PORTFOLIO GRID (From Previous Steps)
   ========================================= */
/* Ensure portfolio grid works with new colors */
.filter-btn.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}
.portfolio-overlay {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.9), rgba(118, 185, 0, 0.9));
}