/*
 Theme Name:   Aqil-IT Theme
 Theme URI:    https://aqil-it.com/
 Description:  Custom branded child theme for Aqil-IT with Smooth Dark Mode.
 Author:       Web1o1 Digital Agency
 Author URI:   https://www.web1o1.com/
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  aqil-it
*/

/* --- 1. THE VARIABLES --- */
:root {
    --bg-color: #F7F7FF;
    --text-color: #1a1a1a;
    --brand-blue: #3F59E4;
    --transition-speed: 0.6s;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* HERO GLASS LIGHT (Support Revolution Style) */
    --glass-bg: rgba(255, 255, 255, 0.75); 
    --glass-blur: 0.25rem;
    --glass-border: rgb(228, 228, 228);
    --glass-radius: 3.125rem;
    --glass-shadow: 0.25rem 0.25rem 0.9375rem 0 rgba(0, 0, 0, 0.1);
}

/* --- 2. THE DARK MODE OVERRIDES --- */
html.dark-theme {
    --bg-color: #1b1b1b !important;
    --text-color: #ffffff !important;

    /* HERO GLASS DARK */
    --glass-bg: rgba(0, 0, 0, 0.55); 
    --glass-blur: 0.25rem;
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-radius: 3.125rem;
    --glass-shadow: 0.25rem 0.25rem 0.9375rem 0 rgba(0, 0, 0, 0.4);
}

/* --- 3. THE GLOBAL ENGINE --- */
html, body, .elementor-section, .e-con {
    background-color: var(--bg-color);
    transition: background-color var(--transition-speed) var(--ease) !important;
}

h1, h2, h3, h4, h5, h6, p, a, span, .elementor-heading-title {
    color: var(--text-color);
    transition: color var(--transition-speed) var(--ease) !important;
}

.elementor-widget-container {
    background-color: transparent !important;
}

body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* --- 4. THE TOGGLE TRACK --- */
.toggle-track { background-color: var(--brand-blue) !important; }

/* --- 5. PREMIUM LOGO CROSS-FADE --- */
.logo-container { position: relative; display: flex; align-items: center; }
.logo-light, .logo-dark { transition: opacity var(--transition-speed) var(--ease) !important; }
.logo-dark { opacity: 0 !important; position: absolute !important; pointer-events: none; }
.logo-light { opacity: 1 !important; position: relative !important; }
html.dark-theme .logo-light { opacity: 0 !important; pointer-events: none; position: absolute !important; }
html.dark-theme .logo-dark { opacity: 1 !important; position: relative !important; pointer-events: auto; }

/* --- 6. TOP BAR & ICONS --- */
.top-bar-container .elementor-icon-list-icon i, 
.top-bar-container .elementor-icon-list-icon svg {
    color: var(--text-color) !important;
    fill: var(--text-color) !important;
    transition: color var(--transition-speed) var(--ease), fill var(--transition-speed) var(--ease) !important;
}
.top-bar-container .elementor-icon-list-icon svg path {
    fill: var(--text-color) !important;
    transition: fill var(--transition-speed) var(--ease) !important;
}
.top-bar-container .elementor-icon-list-text {
    color: var(--text-color) !important;
    transition: color var(--transition-speed) var(--ease) !important;
}

/* --- 7. MOBILE MENU ICON --- */
.mobile-menu-trigger i, .mobile-menu-trigger svg {
    color: var(--text-color) !important;
    fill: var(--text-color) !important;
    stroke: var(--text-color) !important;
    transition: all var(--transition-speed) var(--ease) !important;
}
.mobile-menu-trigger svg path, .mobile-menu-trigger svg line, .mobile-menu-trigger svg polyline, .mobile-menu-trigger svg rect {
    fill: var(--text-color) !important;
    stroke: var(--text-color); 
    transition: fill var(--transition-speed) var(--ease), stroke var(--transition-speed) var(--ease) !important;
}

/* --- 8. OFF-CANVAS & DROPDOWN --- */
html.dark-theme .elementor-location-popup, html.dark-theme .elementor-off-canvas-content {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}
html.dark-theme .elementor-off-canvas-content a { color: #ffffff !important; }
html.dark-theme .elementor-nav-menu--dropdown .elementor-item:not(.elementor-item-active):not(:hover) { color: #ffffff !important; }
html.dark-theme .elementor-nav-menu--dropdown .elementor-menu-toggle svg { fill: #ffffff !important; }
html.dark-theme .elementor-nav-menu--dropdown .elementor-item {
    border-color: rgba(255, 255, 255, 0.1) !important;
    transition: color var(--transition-speed) var(--ease), border-color var(--transition-speed) var(--ease) !important;
}

/* --- 9. HERO GLASS CONTAINER (Refined Overlap Fix) --- */
.hero-glass-container {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border: 0.063rem solid var(--glass-border) !important;
    border-radius: var(--glass-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    padding: clamp(1.5rem, 5vw, 3rem) !important;
    
    position: relative !important;
    z-index: 9 !important; 

    /* Default Desktop Overlap */
    transform: translateY(120px); 
    margin-bottom: -200px !important; 
    
    transition: all var(--transition-speed) var(--ease) !important;
}

/* --- iPad / Tablet Tweak (Landscape & Portrait) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero-glass-container {
        /* Increased pull for iPad to ensure it overlaps the slant */
        transform: translateY(180px) !important; 
        margin-bottom: -250px !important; 
        
        /* Optional: adjust padding if text feels too tight on tablet */
        padding: 2.5rem !important; 
    }
}

/* --- Mobile Tweak (Remains the same) --- */
@media (max-width: 767px) {
    .hero-glass-container {
        transform: translateY(60px);
        margin-bottom: -40px !important;
        padding: 1.5rem !important;
    }
}

/* Ensure parent doesn't clip the overlap */
.elementor-section, .section-parent {
    overflow: visible !important;
}

/* --- 10. PRIMARY PILL BUTTON (CTAs) --- */
.brand-cta .elementor-button {
    background-color: var(--brand-blue) !important;
    color: #ffffff !important; 
    border-radius: 100px !important; 
    padding: 14px 32px !important;
    font-weight: 600 !important;
    transition: all 0.3s var(--ease) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.brand-cta .elementor-button:hover {
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(63, 89, 228, 0.3) !important; 
    color: #ffffff !important;
}

.brand-cta .elementor-button .elementor-button-text { 
    color: #ffffff !important; 
}

/* Mobile Adjustments for the Breakout */
@media (max-width: 767px) {
.hero-glass-container {
        top: 60px !important;
    }
}


/* --- 11. Aqil IT Services Boxes (Theme-Aware Glass) --- */
.aqil-it-services-boxes {
    /* 1. Base Styles */
    background-color: var(--glass-bg) !important;
    border-radius: 3.125rem !important; /* Desktop Radius */
    padding: 2.5rem !important;
    border: 1px solid var(--glass-border) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    
    /* 2. THE LIGHT MODE SHADOW (Multi-Layered) */
    /* Layer 1: Sharp edge | Layer 2: Soft glow | Layer 3: Deep ambient */
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.02), 
        0 10px 20px rgba(0,0,0,0.04), 
        0 20px 40px rgba(0,0,0,0.04) !important;
}

/* 3. THE DARK MODE SHADOW */
/* In dark mode, shadows must be DARKER and more "tight" 
   to avoid looking like a white glow around the box. */
html[data-theme="dark"] .aqil-it-services-boxes {
    box-shadow: 
        0 4px 6px rgba(0,0,0,0.3), 
        0 15px 30px rgba(0,0,0,0.4) !important;
    background-color: #1f1f1f !important; /* Matches Support Revolution's dark card */
    border-color: rgba(255,255,255,0.05) !important;
}

/* 4. HOVER STATE (The Support Revolution "Pop") */
/* They don't move the card, but they increase the shadow depth on hover */
.aqil-it-services-boxes:hover {
    box-shadow: 
        0 10px 15px rgba(0,0,0,0.05), 
        0 30px 60px rgba(0,0,0,0.1) !important;
}

html[data-theme="dark"] .aqil-it-services-boxes:hover {
    box-shadow: 
        0 10px 20px rgba(0,0,0,0.5), 
        0 40px 80px rgba(0,0,0,0.6) !important;
}

/* 5. MOBILE OVERRIDES (New) */
@media (max-width: 767px) {
    .aqil-it-services-boxes {
        border-radius: 1.5265rem !important; /* Softer radius for smaller screens */
    }
}

/* --- 12. Aqil IT Custom Icon Class (Squircle Style) --- */

/* Targets ONLY the widget with the 'icon-bg' class */
.icon-bg .elementor-icon {
    /* 1. The Background - Your Specific Brand Blue */
    background-color: #3F59E4 !important; 
    
    /* 2. The Shape - Soft Squircle (Support Revolution Style) */
    width: 64px !important;
    height: 64px !important;
    border-radius: 12px !important; 
    
    /* 3. Centering the Icon perfectly */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    
    /* 4. Disable all hover animations */
    transition: none !important;
    transform: none !important;
}

/* 5. Ensuring the icon inside is white and correctly sized */
.icon-bg .elementor-icon i,
.icon-bg .elementor-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 2rem !important;
}

/* 6. Force Static State (No color change or movement on hover) */
.icon-bg:hover .elementor-icon {
    background-color: #3F59E4 !important; /* Stays brand blue */
    transform: none !important; /* Stays put */
}

.icon-post .elementor-icon {
    /* 1. The Background - Your Specific Brand Blue */
    background-color: #3F59E4 !important; 
    
    /* 2. The Shape - Soft Squircle (Support Revolution Style) */
    width: 44px !important;
    height: 44px !important;
    border-radius: 3.125rem !important; 
    
    /* 3. Centering the Icon perfectly */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    
    /* 4. Disable all hover animations */
    transition: none !important;
    transform: none !important;
}

/* 5. Ensuring the icon inside is white and correctly sized */
.icon-post .elementor-icon i,
.icon-post .elementor-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 1.8rem !important;
}

/* 6. Force Static State (No color change or movement on hover) */
.icon-post:hover .elementor-icon {
    background-color: #3F59E4 !important; /* Stays brand blue */
    transform: none !important; /* Stays put */
}

/* --- 13. GLASS container --- */
.glass-container {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border: 0.063rem solid var(--glass-border) !important;
    border-radius: var(--glass-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    padding: clamp(1.5rem, 5vw, 3rem) !important;
    
    position: relative !important;
    z-index: 1 !important;  
    
    transition: all var(--transition-speed) var(--ease) !important;
}

/* --- iPad / Tablet Tweak (Landscape & Portrait) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .glass-container {
        
        /* Optional: adjust padding if text feels too tight on tablet */
        padding: 2.5rem !important; 
    }
}

/* --- Mobile Tweak (Remains the same) --- */
@media (max-width: 767px) {
    .glass-container {
        padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
		border-radius:1.5265rem !important;
    }
}

/* --- 14. Targeted Style: Only for Service Box Links --- */

/* 1. Hide the icon for these specific buttons only */
.service-link-button .elementor-button-icon {
    display: none !important;
}

/* 2. Force text to Brand Blue for these specific buttons */
.service-link-button .elementor-button-text {
    color: #3F59E4 !important;
    font-weight: 600 !important;
    padding-left: 0 !important; /* Removes the gap where the icon used to be */
}

/* 3. Hover effect for these buttons */
.service-link-button:hover .elementor-button-text {
    color: #2a41b5 !important;
    text-decoration: underline !important;
}

/* --- 15. client logos --- */

/* 1. Force the parent container to perfectly hold both carousels */
.logo-grid-parent {
    display: grid !important;
    grid-template-columns: 100% !important;
    align-items: center !important;
    position: relative !important;
}

/* 2. Lock both carousels into the exact same grid cell */
.logos-light-container,
.logos-dark-container {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
}

/* 3. LIGHT MODE (Default) */
/* Show Dark Logos, Hide White Logos */
body:not(.dark-theme) .logos-light-container {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}

body:not(.dark-theme) .logos-dark-container {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* 4. DARK MODE ACTIVE */
/* Show White Logos, Hide Dark Logos */
body.dark-theme .logos-light-container {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body.dark-theme .logos-dark-container {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}

/* --- 16. Loop Carousel Navigation Dots (Dark Mode) --- */

/* 1. Make all inactive dots semi-transparent white */
body.dark-theme .elementor-widget-loop-carousel .swiper-pagination-bullet {
    background-color: #ffffff !important;
    opacity: 0.4 !important; 
    transition: opacity 0.3s ease, background-color 0.3s ease !important;
}

/* 2. Make the currently active dot solid white */
body.dark-theme .elementor-widget-loop-carousel .swiper-pagination-bullet-active {
    background-color: #ffffff !important;
    opacity: 1 !important; 
}


/* ---17. Style Secondary Button --- */

/* 1. Base Button Styling (Light Mode Default) */
.aqil-secondary-btn .elementor-button {
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 2px solid #111111 !important;
    border-radius: 50px !important; /* Creates the pill shape */
    padding: 12px 30px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0px 0px 0px transparent !important;
    transform: translate(0px, 0px) !important;
}

/* 2. HOVER EFFECT (Light Mode) */
.aqil-secondary-btn .elementor-button:hover {
    background-color: #ffffff !important;
    color: #111111 !important;
    /* Moves the button slightly up and left */
    transform: translate(-4px, -4px) !important; 
    /* The sharp solid shadow in your Brand Blue! */
    box-shadow: 6px 6px 0px #3F59E4 !important; 
}

/* 3. DARK MODE ACTIVE */
body.dark-theme .aqil-secondary-btn .elementor-button {
    background-color: #000000 !important; /* Pure black background */
    color: #ffffff !important; /* White text */
    border: 2px solid #ffffff !important; /* White border */
}

/* 4. HOVER EFFECT (Dark Mode) */
body.dark-theme .aqil-secondary-btn .elementor-button:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    transform: translate(-4px, -4px) !important;
    /* The sharp solid shadow in your Brand Blue! */
    box-shadow: 6px 6px 0px #3F59E4 !important; 
}


/* --- 18. Post Info Tags / Categories (Neo-Brutalist with Large +) --- */

/* 1. Base Tag Styling (Light Mode Default) */
.aqil-post-info-tags a,
.aqil-post-info-tags span.elementor-post-info__terms-list-item {
    /* inline-flex forces the + and text to perfectly center vertically */
    display: inline-flex !important; 
    align-items: center !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 2px solid #111111 !important;
    border-radius: 50px !important; 
    padding: 6px 18px !important; 
    margin: 4px 4px 4px 0 !important; 
    
    /* Matches the screenshot text style */
    font-weight: 400 !important; 
    font-size: 0.875rem !important; 
    text-transform: none !important; /* Turns off uppercase */
    
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0px 0px 0px transparent !important;
    transform: translate(0px, 0px) !important;
    text-decoration: none !important;
}

/* 2. HARD-CODING THE LARGE BRAND BLUE "+" ICON */
.aqil-post-info-tags a::before,
.aqil-post-info-tags span.elementor-post-info__terms-list-item::before {
    content: '+'; 
    color: #3F59E4 !important; /* Your Brand Blue */
    
    /* Matches the screenshot icon style */
    font-size: 1.625rem !important; /* Much larger than the 16px text */
    font-weight: 700 !important; /* Thinner, more elegant lines */
    margin-right: 8px !important; /* Breathing room */
    line-height: 0.8 !important; /* Prevents the large icon from distorting the pill height */
    margin-bottom: 2px !important; /* Optically centers the + with lowercase letters */
}

/* 3. HOVER EFFECT (Light Mode) */
.aqil-post-info-tags a:hover {
    background-color: #ffffff !important;
    color: #111111 !important;
    transform: translate(-3px, -3px) !important; 
    box-shadow: 4px 4px 0px #3F59E4 !important; 
}

/* 4. DARK MODE ACTIVE */
body.dark-theme .aqil-post-info-tags a,
body.dark-theme .aqil-post-info-tags span.elementor-post-info__terms-list-item {
    background-color: #000000 !important; 
    color: #ffffff !important; 
    border: 2px solid #ffffff !important; 
}

/* 5. HOVER EFFECT (Dark Mode) */
body.dark-theme .aqil-post-info-tags a:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    transform: translate(-3px, -3px) !important;
    box-shadow: 4px 4px 0px #3F59E4 !important; 
}

/* 6. Hide default Elementor icons just in case */
.aqil-post-info-tags .elementor-icon-list-icon {
    display: none !important;
}

/* --- 19. Gravity Forms Dark Mode Text Fix --- */

/* 1. Main Field Labels & Checkbox/Radio Text */
body.dark-theme .gform_wrapper label,
body.dark-theme .gform_wrapper .gfield_label,
body.dark-theme .gform_wrapper .gchoice_label {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
}

/* 2. Multi-Page Steps (Numbers & Titles) */
body.dark-theme .gform_wrapper .gf_step_label,
body.dark-theme .gform_wrapper .gf_step_number,
body.dark-theme .gform_wrapper .gform_step_label,
body.dark-theme .gform_wrapper .gf_step_active {
    color: #ffffff !important;
}

/* 3. Descriptions and Sub-labels (Slightly dimmed for hierarchy) */
body.dark-theme .gform_wrapper .gfield_description,
body.dark-theme .gform_wrapper .gform_description,
body.dark-theme .gform_wrapper .instruction {
    color: #dddddd !important;
}

/* 4. Checkbox / Radio input border visibility (Optional but helps them stand out) */
body.dark-theme .gform_wrapper input[type="radio"], 
body.dark-theme .gform_wrapper input[type="checkbox"] {
    border-color: #ffffff !important;
}