/* ===================================================================
    CUSTOM CSS STYLES - ENHANCED USER EXPERIENCE
    ================================================================
    
    Project: LeadSuche Website Enhancement
    Purpose: Custom styling extensions designed to complement the main 
             theme and deliver enhanced user experience with performance 
             optimizations.
    
    This file contains professionally crafted CSS enhancements that 
    improve visual appeal, user interaction, and overall website 
    performance. All styles adhere to modern web standards and best 
    practices for accessibility and cross-browser compatibility.
    
    Author: LeadSuche Development Team
    Last Modified: 2025
    Version: 1.0
================================================================== */

/**
 * TABLE OF CONTENTS
 * =================
 * 
 * 01. Navigation and Scrolling Enhancements
 * 02. Background Image Configurations  
 * 03. Animation and Visual Effects
 * 04. Image Optimization and Loading
 * 05. Interactive Element Styling
 * 06. Hover State Transitions
 * 07. Loading State Management
 * 08. Mobile Device Optimizations
 * 09. Cookie Consent Banner Styling
 * 10. Blog Header Spacing Configuration
 * 11. Hero Section Responsive Height Management
 * 12. Hero Heading Responsive Font Sizes
 */

/* ===================================================================
    01. NAVIGATION AND SCROLLING ENHANCEMENTS
    ================================================================
    
    Enhanced scrolling behavior and navigation improvements designed
    to optimize user experience when navigating through website
    sections and content areas.
================================================================== */

/**
 * Global smooth scroll behavior for enhanced navigation experience.
 */
html {
    scroll-behavior: smooth;
}

/**
 * Section anchor offset adjustment to prevent content overlap with fixed headers.
 */
section[id] {
    scroll-margin-top: 62px;
}

/**
 * Utility class for applying enhanced scroll behavior to specific elements.
 */
.smooth-scroll {
    scroll-behavior: smooth;
}

/* ===================================================================
    02. BACKGROUND IMAGE CONFIGURATIONS
    ================================================================
    
    Centralized background image definitions ensuring consistent
    visual branding and optimized image loading across all major
    page sections.
================================================================== */

/**
 * Hero section primary background image for immediate visual impact.
 */
.hero-bg {
    background-image: url('../images/hero-background.png');
}

/**
 * About section background styling for company information area.
 */
.about-bg {
    background-image: url('../images/demo-it-business-about-bg.jpg');
}

/**
 * Process section background configuration for workflow presentations.
 */
.process-bg {
    background-image: url('../images/demo-it-business-about-bg2.jpg');
}

/* ===================================================================
    03. ANIMATION AND VISUAL EFFECTS
    ================================================================
    
    Professional animations and visual effects that enhance user
    engagement while maintaining optimal performance and brand
    consistency throughout the website experience.
================================================================== */

/**
 * Subtle pulse animation for call-to-action elements.
 */
.pulse-animation {
    animation: gentle-pulse 2s infinite;
}

/**
 * Keyframe definition for gentle pulse effect with smooth scaling.
 */
@keyframes gentle-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

/**
 * Brand gradient text effect using company color palette.
 */
.text-gradient-purple-pink {
    background: linear-gradient(135deg, var(--base-color) 0%, #e94037 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/**
 * Light gradient background for content highlighting and emphasis.
 */
.bg-gradient-purple-pink-light {
    background: linear-gradient(135deg, rgba(7, 78, 185, 0.1) 0%, rgba(233, 64, 55, 0.1) 100%);
    border: 1px solid rgba(7, 78, 185, 0.2);
}

/* ===================================================================
    04. IMAGE OPTIMIZATION AND LOADING
    ================================================================
    
    Performance-optimized image handling that improves page load
    times and provides smooth transitions for enhanced user
    experience during content loading processes.
================================================================== */

/**
 * Initial state for lazy-loaded images to prevent layout shift.
 */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/**
 * Loaded state styling with smooth fade-in transition.
 */
img[loading="lazy"].loaded {
    opacity: 1;
}

/* ===================================================================
    05. INTERACTIVE ELEMENT STYLING
    ================================================================
    
    Enhanced styling for user interface elements requiring interaction,
    providing clear visual feedback and improved usability across
    all interactive components.
================================================================== */

/**
 * Enhanced hover effects for call-to-action buttons with animation speed adjustment.
 */
.btn.pulse-animation:hover {
    animation-duration: 1s;
    box-shadow: 0 10px 25px rgba(7, 78, 185, 0.3);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/**
 * Form control focus state with brand color integration.
 */
.form-control:focus {
    border-color: var(--base-color);
    box-shadow: 0 0 0 0.2rem rgba(7, 78, 185, 0.25);
    outline: none;
}

/**
 * Form control hover state for improved interaction feedback.
 */
.form-control:hover {
    border-color: rgba(7, 78, 185, 0.8);
    transition: border-color 0.2s ease;
}

/**
 * Trust indicator styling for credibility elements and testimonials.
 */
.trust-indicator {
    border-left: 3px solid #198754;
    padding-left: 15px;
    background: rgba(16, 185, 129, 0.05);
    border-radius: 0 4px 4px 0;
}

/**
 * Enhanced badge styling with animation and shadow effects.
 */
.badge.pulse-animation {
    animation: gentle-pulse 2s infinite;
    box-shadow: 0 4px 15px rgba(7, 78, 185, 0.3);
}

/**
 * Universal smooth transitions for consistent interaction experience.
 */
a,
button,
.btn {
    transition: all 0.3s ease;
}

/* ===================================================================
    06. HOVER STATE TRANSITIONS
    ================================================================
    
    Specialized hover effects for content sections that enhance
    user engagement through professional animations and visual
    feedback during user interactions.
================================================================== */

/**
 * Pricing card hover transformation with elevation effect.
 */
.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/**
 * Feature box hover effects for service presentations.
 */
.feature-box:hover {
    transform: translateY(-3px);
    transition: transform 0.3s ease;
}

/* ===================================================================
    07. LOADING STATE MANAGEMENT
    ================================================================
    
    Visual indicators and states for form submissions and loading
    processes that provide clear user feedback during data
    processing and improve perceived performance.
================================================================== */

/**
 * Form loading state styling to prevent multiple submissions.
 */
.form-loading {
    opacity: 0.7;
    pointer-events: none;
}

/**
 * Button positioning for loading spinner placement.
 */
.form-loading .btn {
    position: relative;
}

/**
 * Loading spinner animation for processing state indication.
 */
.form-loading .btn::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/**
 * Keyframe definition for continuous spinner rotation.
 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===================================================================
    08. MOBILE DEVICE OPTIMIZATIONS
    ================================================================
    
    Specialized mobile optimizations ensuring optimal display and
    performance on smartphones and tablets, including responsive
    spacing adjustments and performance enhancements.
================================================================== */

/**
 * Mobile-specific animation optimization for improved performance.
 */
@media (max-width: 768px) {
    .pulse-animation {
        animation-duration: 3s;
    }

    .btn.pulse-animation:hover {
        animation-play-state: paused;
    }
}

/**
 * Mobile header spacing adjustments for proper content visibility.
 */
@media (max-width: 991px) {
    .md-pt-140px {
        padding-top: 140px !important;
    }
}

@media (max-width: 767px) {
    .sm-pt-120px {
        padding-top: 120px !important;
    }
}

/**
 * Header height adjustment for optimal spacing on small mobile screens.
 */
@media (max-width: 575px) {
    .sm-pt-120px {
        padding-top: 100px !important;
    }
}

/* ===================================================================
    09. COOKIE CONSENT BANNER STYLING
    ================================================================
    
    Professional styling for the TermsFeed cookie consent banner
    designed to match website branding while ensuring full
    compliance and optimal user experience.
================================================================== */

/**
 * Main cookie consent banner container with full-width coverage.
 */
.cc-nb-main-container {
    width: 100% !important;
    background-color: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    padding: 20px !important;
    border-radius: 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    max-width: none !important;
    display: block !important;
}

/**
 * Cookie consent banner title container with proper spacing.
 */
.cc-nb-title-container {
    margin-bottom: 15px !important;
    text-align: left !important;
}

/**
 * Cookie consent banner title styling matching website typography.
 */
.cc-nb-title {
    color: #252840 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/**
 * Cookie consent text container with responsive organization.
 */
.cc-nb-text-container {
    margin-bottom: 20px !important;
}

/**
 * Cookie consent message text with optimal readability.
 */
.cc-nb-text {
    color: #252840 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

/**
 * Cookie consent buttons container with responsive behavior.
 */
.cc-nb-buttons-container {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

/**
 * Primary accept button with brand gradient styling.
 */
.cc-nb-okagree {
    background: linear-gradient(135deg, #074eb9 0%, #e94037 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 30px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    min-width: 140px !important;
    text-align: center !important;
    outline: none !important;
}

/**
 * Accept button hover state with enhanced visual feedback.
 */
.cc-nb-okagree:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(7, 78, 185, 0.3) !important;
    opacity: 0.95 !important;
}

/**
 * Secondary button styling for preferences and settings.
 */
.cc-nb-changep {
    background: transparent !important;
    color: #252840 !important;
    border: 1px solid #ddd !important;
    border-radius: 25px !important;
    padding: 12px 30px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    min-width: 140px !important;
    text-align: center !important;
    outline: none !important;
}

/**
 * Secondary button hover state maintaining visual hierarchy.
 */
.cc-nb-changep:hover {
    background-color: #f8f9fa !important;
    border-color: #074eb9 !important;
    color: #074eb9 !important;
}

/**
 * Mobile responsive adjustments for cookie banner functionality.
 */
@media (max-width: 768px) {
    .cc-nb-main-container {
        padding: 20px 15px !important;
        text-align: center !important;
    }

    .cc-nb-title-container {
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .cc-nb-title {
        font-size: 16px !important;
    }

    .cc-nb-text-container {
        margin-bottom: 20px !important;
    }

    .cc-nb-text {
        font-size: 13px !important;
        text-align: center !important;
    }

    .cc-nb-buttons-container {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .cc-nb-okagree,
    .cc-nb-changep {
        width: 100% !important;
        min-width: auto !important;
        margin: 0 !important;
    }
}

/**
 * Tablet responsive adjustments for optimal banner layout.
 */
@media (max-width: 991px) and (min-width: 769px) {
    .cc-nb-main-container {
        padding: 20px !important;
    }

    .cc-nb-buttons-container {
        justify-content: center !important;
    }
}

/**
 * Large screen optimization with content width constraints.
 */
@media (min-width: 1200px) {
    .cc-nb-main-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .cc-nb-main-container>* {
        max-width: 1200px !important;
        width: 100% !important;
    }
}

/* ===================================================================
    10. BLOG HEADER SPACING CONFIGURATION
    ================================================================
    
    Responsive spacing configuration ensuring proper content
    positioning below sticky headers across all device sizes
    for optimal reading experience.
================================================================== */

/**
 * Blog header spacing class for content positioning below sticky navigation.
 */
.blog-header-spacing {
    padding-top: 140px !important;
}

/**
 * Responsive adjustments maintaining optimal reading experience.
 */
@media (max-width: 1199px) {
    .blog-header-spacing {
        padding-top: 140px !important;
    }
}

@media (max-width: 767px) {
    .blog-header-spacing {
        padding-top: 100px !important;
    }
}

/* ===================================================================
    11. HERO SECTION RESPONSIVE HEIGHT MANAGEMENT
    ================================================================
    
    Responsive height configuration for hero sections ensuring
    optimal display across all devices while maintaining content
    visibility and professional presentation standards.
================================================================== */

/**
 * Desktop hero section height configuration with viewport coverage and vertical centering.
 */
@media (min-width: 992px) {
    .full-screen {
        height: 100vh !important;
        min-height: 100vh !important;
    }

    .full-screen.top-space-margin {
        height: calc(100vh - 96px) !important;
        min-height: calc(100vh - 96px) !important;
    }

    .full-screen.ipad-top-space-margin {
        height: calc(100vh - 76px) !important;
        min-height: calc(100vh - 76px) !important;
    }
}

/**
 * Tablet hero section height with flexible content and vertical centering.
 */
@media (min-width: 768px) and (max-width: 991px) {

    .full-screen,
    .full-screen.top-space-margin,
    .full-screen.ipad-top-space-margin {
        height: auto !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    /* Ensure container takes full height for vertical centering */
    .full-screen .container,
    .full-screen.top-space-margin .container,
    .full-screen.ipad-top-space-margin .container {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
    }
}

/**
 * Mobile hero section height with flexible content and vertical centering.
 */
@media (max-width: 767px) {

    .full-screen,
    .full-screen.top-space-margin,
    .full-screen.ipad-top-space-margin {
        height: auto !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    /* Ensure container takes full height for vertical centering */
    .full-screen .container,
    .full-screen.top-space-margin .container,
    .full-screen.ipad-top-space-margin .container {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
    }
}

/**
 * Small mobile screen optimization with consistent vertical centering.
 */
@media (max-width: 575px) {

    .full-screen,
    .full-screen.top-space-margin,
    .full-screen.ipad-top-space-margin {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
}

/* ===================================================================
    12. HERO HEADING RESPONSIVE FONT SIZES
    ================================================================
    
    Specialized font size adjustments for the main hero section heading
    providing optimal readability across all device sizes while
    maintaining visual hierarchy and professional presentation.
================================================================== */

/**
 * Hero section main heading font size adjustments for mobile devices.
 */
@media (max-width: 767px) {
    #hero-heading {
        font-size: 3.2rem !important;
        line-height: 3.4rem !important;
    }
}

/**
 * Hero section main heading font size for extra small mobile devices.
 */
@media (max-width: 575px) {
    #hero-heading {
        font-size: 2.8rem !important;
        line-height: 3rem !important;
    }
}

/**
 * Hero section main heading font size for very small mobile devices.
 */
@media (max-width: 480px) {
    #hero-heading {
        font-size: 2.5rem !important;
        line-height: 2.7rem !important;
    }
}