/* Professional Custom Styles for Hostboom */

/* === PROFESSIONAL SCROLL PROGRESS BAR === */
/* Fixed scroll progress bar at top of page */
.scroll-progress-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 6px !important;
    background: rgba(0, 0, 0, 0.1) !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.scroll-progress-bar {
    height: 100% !important;
    width: 0% !important;
    background: linear-gradient(90deg, #56c8fb 0%, #627bed 100%) !important;
    transition: width 0.1s ease-out !important;
    box-shadow: 0 2px 10px rgba(86, 200, 251, 0.8) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

/* Enhanced glow effect for the progress bar */
.scroll-progress-bar::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 20px !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 100%) !important;
    border-radius: 0 2px 2px 0 !important;
}

/* Alternative style for dark pages */
.dark-page .scroll-progress-container {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* === PROFESSIONAL SCROLLBAR HIDING === */
/* Hide scrollbars while maintaining scroll functionality */
html {
    -webkit-overflow-scrolling: touch !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: 100% !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
    display: none !important;
}

body {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none !important;
}

/* Hide scrollbars for all scrollable elements */
*::-webkit-scrollbar {
    display: none !important;
}

* {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
}

body {
    -webkit-overflow-scrolling: touch !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100% !important;
    touch-action: pan-y !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Allow text selection for content areas */
p, span, div, a, h1, h2, h3, h4, h5, h6, li, td, th {
    -webkit-user-select: text !important;
    -khtml-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Fix for iOS Safari scrolling issues */
@supports (-webkit-overflow-scrolling: touch) {
    body {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Prevent horizontal scrolling on mobile */
.container-fluid, .container {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Ensure proper mobile viewport behavior */
@media screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
    }
    
    /* Fix for mobile navbar and content interaction */
    .ftco-navbar-light {
        position: relative !important;
        z-index: 1000 !important;
    }
    
    /* Ensure sections don't cause horizontal overflow */
    section, .ftco-section {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    /* Fix for mobile form elements */
    .form-control, input, select, textarea {
        max-width: 100% !important;
        -webkit-appearance: none !important;
        touch-action: manipulation !important;
    }
    
    /* Fix for mobile images */
    img {
        max-width: 100% !important;
        height: auto !important;
        touch-action: manipulation !important;
    }
    
    /* Fix for mobile tables */
    .table-responsive {
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
    }
}

/* === Fix Navbar for Secondary Pages === */
/* Make navbar visible and properly positioned on pages without hero slider */
/* Only apply these styles on desktop, let mobile use original styles */
@media (min-width: 992px) {
    body:not(:has(.home-slider)) .ftco-navbar-light,
    body:not(.home-page) .ftco-navbar-light {
        background: #ffffff !important;
        position: relative !important;
        top: 0 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        margin-bottom: 0 !important;
        padding: 15px 0 !important;
    }

    /* Logo color for scrolled/secondary pages - BLACK for contrast */
    body:not(:has(.home-slider)) .ftco-navbar-light .navbar-brand,
    body:not(.home-page) .ftco-navbar-light .navbar-brand,
    .ftco_navbar.scrolled .navbar-brand {
        color: #333333 !important;
        font-weight: 700 !important;
        font-size: 1.6rem !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Logo hover effect for scrolled/secondary pages */
    body:not(:has(.home-slider)) .ftco-navbar-light .navbar-brand:hover,
    body:not(.home-page) .ftco-navbar-light .navbar-brand:hover,
    .ftco_navbar.scrolled .navbar-brand:hover {
        color: #56c8fb !important;
        text-decoration: none !important;
        transform: translateX(3px) !important;
    }
    
    /* Logo alignment improvements - Professional positioning */
    .navbar-brand {
        margin-left: 60px !important;
        margin-right: 2rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        line-height: 1.2 !important;
        display: flex !important;
        align-items: center !important;
        font-size: 1.6rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        transition: all 0.3s ease !important;
    }
    
    /* Logo color for HOME PAGE ONLY - WHITE for dark navbar */
    .home-page .navbar-brand,
    body:has(.home-slider) .navbar-brand {
        color: #fff !important;
    }
    
    /* Professional logo hover effect for HOME PAGE */
    .home-page .navbar-brand:hover,
    body:has(.home-slider) .navbar-brand:hover {
        color: #56c8fb !important;
        text-decoration: none !important;
        transform: translateX(3px) !important;
    }
    
    /* Ensure proper spacing on home page too */
    .home-page .navbar-brand {
        margin-left: 60px !important;
        margin-right: 2rem !important;
    }
    
    /* Container adjustments for better logo positioning */
    .ftco-navbar .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Responsive adjustments */
    @media (max-width: 991.98px) {
        .navbar-brand {
            margin-left: 30px !important;
            margin-right: 1rem !important;
            font-size: 1.4rem !important;
        }
    }

    body:not(:has(.home-slider)) .ftco-navbar-light .navbar-nav > .nav-item > .nav-link,
    body:not(.home-page) .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
        color: #333333 !important;
        font-weight: 500 !important;
        font-size: 14px !important;
    }

    body:not(:has(.home-slider)) .ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover,
    body:not(.home-page) .ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover {
        color: #627bed !important;
        background: linear-gradient(transparent 70%, rgba(98, 123, 237, 0.1) 0%) !important;
        z-index: 1000 !important;
    }

    body:not(:has(.home-slider)) .ftco-navbar-light .navbar-nav > .nav-item.active > .nav-link,
    body:not(.home-page) .ftco-navbar-light .navbar-nav > .nav-item.active > .nav-link {
        color: #627bed !important;
        font-weight: 600 !important;
    }

    /* Login/Signup button on secondary pages */
    body:not(:has(.home-slider)) .ftco-navbar-light .navbar-nav > .nav-item.cta > a,
    body:not(.home-page) .ftco-navbar-light .navbar-nav > .nav-item.cta > a {
        background: linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
        color: #ffffff !important;
        border-radius: 25px !important;
        padding: 8px 20px !important;
        margin-top: 2px !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 3px 10px rgba(86, 200, 251, 0.3) !important;
    }

    body:not(:has(.home-slider)) .ftco-navbar-light .navbar-nav > .nav-item.cta > a:hover,
    body:not(.home-page) .ftco-navbar-light .navbar-nav > .nav-item.cta > a:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(86, 200, 251, 0.4) !important;
    }

    body:not(:has(.home-slider)) .ftco-navbar-light .navbar-nav > .nav-item.cta > a span,
    body:not(.home-page) .ftco-navbar-light .navbar-nav > .nav-item.cta > a span {
        color: #ffffff !important;
        background: transparent !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
        font-weight: 600 !important;
    }
}

/* === Beautiful Gradient Buttons === */
.btn-primary,
.btn-success,
.btn,
.search-domain {
    background: #56c8fb !important;
    background: -moz-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: -webkit-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: -o-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: -ms-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    border: none !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn:hover,
.search-domain:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(86, 200, 251, 0.5) !important;
}

/* VPS Tab Navigation - Beautiful gradient buttons */
.nav-pills .nav-link {
    background: #56c8fb !important;
    background: -moz-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: -webkit-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: -o-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: -ms-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 25px !important;
    margin: 0 5px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(86, 200, 251, 0.3);
}

.nav-pills .nav-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(86, 200, 251, 0.5);
}

.nav-pills .nav-link.active {
    background: #627bed !important;
    background: -moz-linear-gradient(45deg, #627bed 0%, #4a5fb8 100%) !important;
    background: -webkit-linear-gradient(45deg, #627bed 0%, #4a5fb8 100%) !important;
    background: -o-linear-gradient(45deg, #627bed 0%, #4a5fb8 100%) !important;
    background: -ms-linear-gradient(45deg, #627bed 0%, #4a5fb8 100%) !important;
    background: linear-gradient(45deg, #627bed 0%, #4a5fb8 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(86, 200, 251, 0.4);
}

/* === Social Media Icons - Beautiful Gradient Theme === */
.social-link {
    background: #56c8fb !important;
    background: -moz-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: -webkit-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: -o-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: -ms-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    color: #fff !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(86, 200, 251, 0.3);
}

.social-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(86, 200, 251, 0.6);
}

.ftco-footer-social li {
    margin-right: 10px;
}

/* === Professional Card Effects === */
.block-6.services,
.block-7 {
    border-radius: 15px !important;
    transition: all 0.3s ease;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 123, 255, 0.1) !important;
}

.block-6.services:hover,
.block-7:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 123, 255, 0.2) !important;
    border-color: rgba(0, 123, 255, 0.3) !important;
}

/* Enhanced Guarantee Cards */
.block-6.services .icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto 15px;
    transition: all 0.3s ease;
}

.block-6.services:hover .icon {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}

/* Pricing Card Enhancements */
.block-7 {
    position: relative;
    padding: 30px 25px;
}

.block-7::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #0056b3);
    border-radius: 15px 15px 0 0;
}

.pricing-header {
    position: relative;
}

.price .number {
    font-size: 3.5rem;
    font-weight: 700;
    color: #007bff;
}

/* === Navbar Effects - Original + Enhanced Scrolled === */
/* Only apply enhanced effects on desktop, preserve mobile behavior */

@media (min-width: 992px) {
    /* Default state - dark navbar (landing page) - ORIGINAL STYLING RESTORED */
    .ftco_navbar .navbar-nav .nav-link {
        font-size: 14px !important;
        padding-top: 0.9rem !important;
        padding-bottom: 0.9rem !important;
        color: #fff !important;
        font-weight: 400 !important;
        position: relative;
        transition: all 0.3s ease;
    }

    .ftco_navbar .navbar-nav .nav-link:hover {
        color: #fff !important;
        /* Keep original simple hover - no lift or shadow effects */
    }

    /* Scrolled state - light navbar (keep current enhanced styling) */
    .ftco_navbar.scrolled .navbar-nav .nav-link {
        color: #000 !important;
        padding-top: 0.9rem !important;
        padding-bottom: 0.9rem !important;
    }

    .ftco_navbar.scrolled .navbar-nav .nav-link:hover {
        color: #000 !important;
        transform: translateY(-3px);
        text-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }

    /* Restore original navbar padding */
    .ftco_navbar {
        padding: 10px 0 !important;
    }
}

/* Underline styling - Desktop only */
@media (min-width: 992px) {
    .navbar-nav .nav-link::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background-color: #007bff;
        transition: all 0.3s ease;
        transform: translateX(-50%);
        z-index: 1000;
    }

    .navbar-nav .nav-link:hover::before {
        width: 80%;
    }

    /* Ensure underline is always visible on all navbar states */
    .ftco_navbar .navbar-nav .nav-link::before,
    .ftco_navbar.scrolled .navbar-nav .nav-link::before {
        background-color: #007bff !important;
    }

    /* Special case for login button - no underline */
    .nav-item.cta .nav-link::before {
        display: none !important;
    }
}

/* CTA Button - Original CSS + Landing Page Size Adjustment */
/* Reduce size only on landing page, keep scrolled version as is */
@media (min-width: 992px) {
    .ftco_navbar .nav-item.cta .nav-link {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: 13px !important;
        margin-top: 8px !important;
    }

    .ftco_navbar.scrolled .nav-item.cta .nav-link:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(86, 200, 251, 0.6);
    }
}

/* === ADDITIONAL SCROLLBAR HIDING FOR SPECIFIC ELEMENTS === */
/* Hide scrollbars from common containers */
.container, .container-fluid, .row, .col, [class*="col-"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.container::-webkit-scrollbar, 
.container-fluid::-webkit-scrollbar, 
.row::-webkit-scrollbar, 
.col::-webkit-scrollbar, 
[class*="col-"]::-webkit-scrollbar {
    display: none !important;
}

/* Hide scrollbars from tables and their containers */
.table-responsive, .table, table {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.table-responsive::-webkit-scrollbar, 
.table::-webkit-scrollbar, 
table::-webkit-scrollbar {
    display: none !important;
}

/* Hide scrollbars from content areas */
.ftco-section, section, div, aside, main, nav, header, footer {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.ftco-section::-webkit-scrollbar, 
section::-webkit-scrollbar, 
div::-webkit-scrollbar, 
aside::-webkit-scrollbar, 
main::-webkit-scrollbar, 
nav::-webkit-scrollbar, 
header::-webkit-scrollbar, 
footer::-webkit-scrollbar {
    display: none !important;
}

/* Hide scrollbars from text areas and input fields */
textarea, input, select {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

textarea::-webkit-scrollbar, 
input::-webkit-scrollbar, 
select::-webkit-scrollbar {
    display: none !important;
}

/* Hide scrollbars from modal and popup elements */
.modal, .modal-body, .modal-content, .dropdown-menu {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.modal::-webkit-scrollbar, 
.modal-body::-webkit-scrollbar, 
.modal-content::-webkit-scrollbar, 
.dropdown-menu::-webkit-scrollbar {
    display: none !important;
}

/* Hide scrollbars from carousel and slider elements */
.owl-carousel, .carousel, .slider, .home-slider {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.owl-carousel::-webkit-scrollbar, 
.carousel::-webkit-scrollbar, 
.slider::-webkit-scrollbar, 
.home-slider::-webkit-scrollbar {
    display: none !important;
}

/* Hide scrollbars from card and block elements */
.card, .card-body, .block-6, .block-7, .block-9, .block-18 {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.card::-webkit-scrollbar, 
.card-body::-webkit-scrollbar, 
.block-6::-webkit-scrollbar, 
.block-7::-webkit-scrollbar, 
.block-9::-webkit-scrollbar, 
.block-18::-webkit-scrollbar {
    display: none !important;
}

/* Hide scrollbars from navigation elements */
.navbar, .nav, .nav-pills, .nav-tabs {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.navbar::-webkit-scrollbar, 
.nav::-webkit-scrollbar, 
.nav-pills::-webkit-scrollbar, 
.nav-tabs::-webkit-scrollbar {
    display: none !important;
}

/* === Enhanced Section Styling === */
.heading-section h2 {
    position: relative;
    padding-bottom: 15px;
}

.heading-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #0056b3);
    transform: translateX(-50%);
    border-radius: 2px;
}

/* === Professional Typography === */
.lead {
    font-size: 1.15rem;
    font-weight: 400;
    color: #6c757d;
    line-height: 1.6;
}

.text-primary {
    color: #007bff !important;
}

/* === VPS Section Enhancements === */
.tab-content {
    padding: 40px 0;
}

.tab-pane img {
    transition: all 0.3s ease;
}

.tab-pane:hover img {
    transform: scale(1.05);
}

/* === Domain Form - Keep Original Theme Functionality === */
/* Let original theme handle domain form styling */

/* === Professional Hero Section with Enhanced Gradient & Parallax === */
.owl-carousel.home-slider {
    position: relative;
    background: #56c8fb !important;
    background: -moz-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: -webkit-gradient(left bottom, right top, color-stop(0%, #56c8fb), color-stop(100%, #627bed)) !important;
    background: -webkit-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: -o-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: -ms-linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    background: linear-gradient(45deg, #56c8fb 0%, #627bed 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#56c8fb', endColorstr='#627bed', GradientType=1 ) !important;
}

/* Clean gradient background without images */
.owl-carousel.home-slider .slider-item {
    background-image: none !important;
    position: relative;
}

/* Clean overlay for pure gradient effect */
.owl-carousel.home-slider .slider-item:after {
    background: transparent !important;
}

.owl-carousel.home-slider .slider-item .overlay {
    background: transparent !important;
}

/* Content positioning for clean gradient background */
.owl-carousel.home-slider .slider-item .container-fluid {
    position: relative;
    z-index: 1;
}

/* Professional Hero Text - Enhanced for better contrast */
.owl-carousel.home-slider .slider-item .slider-text h1 {
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
    font-weight: 700 !important;
}

.owl-carousel.home-slider .slider-item .slider-text p {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.owl-carousel.home-slider .slider-item .slider-text .sub-p {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* Elegant Professional Hero Buttons */
.owl-carousel.home-slider .slider-item .slider-text .btn-primary:not(.btn-primary-2) {
    background: rgba(255, 255, 255, 0.95) !important;
    background: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%) !important;
    background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%) !important;
    background: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%) !important;
    background: -ms-linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%) !important;
    color: #1e3c72 !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.2) !important;
}

.owl-carousel.home-slider .slider-item .slider-text .btn-primary:not(.btn-primary-2):hover {
    background: #1e3c72 !important;
    background: -moz-linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    background: -webkit-linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    background: -o-linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    background: -ms-linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(30, 60, 114, 0.5) !important;
}

/* Sophisticated secondary button */
.owl-carousel.home-slider .slider-item .slider-text .btn-primary.btn-primary-2 {
    background: rgba(59, 130, 246, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2) !important;
}

.owl-carousel.home-slider .slider-item .slider-text .btn-primary.btn-primary-2:hover {
    background: rgba(59, 130, 246, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4) !important;
}

/* === Professional Image Enhancement (Similar to Testimony Section) === */
.owl-carousel.home-slider .slider-item img {
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2)) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.owl-carousel.home-slider .slider-item img:hover {
    transform: translateY(-4px) !important;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3)) !important;
}

/* === Pricing Section Text Spacing === */
.pricing-text strong {
    margin-right: 0.25rem !important;
}

/* === Modern Popular Badge (Blue Theme with Blinking) === */
.modern-popular-badge {
    position: absolute;
    top: -8px;
    right: 15px;
    background: linear-gradient(135deg, #56c8fb 0%, #627bed 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(86, 200, 251, 0.4);
    z-index: 10;
    text-transform: none;
    letter-spacing: 0.3px;
    animation: blink-popular 1.8s infinite;
}

.popular-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

@keyframes blink-popular {
    0%, 50% {
        opacity: 1;
        box-shadow: 0 4px 12px rgba(86, 200, 251, 0.4);
    }
    25% {
        opacity: 0.7;
        box-shadow: 0 6px 16px rgba(86, 200, 251, 0.6);
    }
    75% {
        opacity: 0.85;
        box-shadow: 0 2px 8px rgba(86, 200, 251, 0.3);
    }
}





/* === Equal Height Pricing Cards === */
.block-7 {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
}

.block-7 .text-center {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.block-7 .pricing-text {
    flex-grow: 1 !important;
}

.block-7 .btn {
    margin-top: auto !important;
}

/* === Why Choose Hostboom Cards Spacing === */
.media.block-6.services {
    padding: 1.5rem 1rem !important;
    margin-bottom: 2rem !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    transform: scale(0.92) !important;
}

.media.block-6.services .media-body {
    padding: 1rem 0.75rem !important;
}

/* Services Section Container Adjustments */
.services-section .container {
    max-width: 1140px !important;
}

.services-section .row {
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
}

.services-section .col-12.col-md-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* === Equal Width Buttons === */
.owl-carousel.home-slider .slider-item .slider-text .btn-primary {
    min-width: 180px !important;
    text-align: center !important;
    display: inline-block !important;
}

/* === Statistics Counter Enhancements === */
.block-18 {
    transition: all 0.3s ease;
}

.block-18:hover {
    transform: translateY(-5px);
}

.block-18 .number {
    font-size: 3rem;
    font-weight: 700;
    color: #007bff;
}

/* === Footer Enhancements === */
.ftco-footer {
    position: relative;
    padding: 2rem 0 1rem 0 !important;
}

.ftco-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #0056b3);
}

/* Compact Footer Widget Spacing */
.ftco-footer .ftco-footer-widget {
    margin-bottom: 1rem !important;
}

.ftco-footer .ftco-footer-widget h2 {
    margin-bottom: 0.75rem !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.ftco-footer .ftco-footer-widget p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem !important;
}

.ftco-footer .ftco-footer-widget ul li {
    margin-bottom: 0.2rem !important;
}

.ftco-footer .ftco-footer-widget ul li a {
    padding: 0.2rem 0 !important;
    font-size: 13px !important;
}

/* Compact Social Icons */
.ftco-footer-social li a {
    height: 30px !important;
    width: 30px !important;
    margin-right: 6px !important;
}

    .ftco-footer-social li a span {
        font-size: 16px !important;
    }
    
    /* Mobile footer adjustments - reset flexbox for natural stacking */
    .ftco-footer .ftco-footer-widget:first-child {
        display: block !important;
        height: auto !important;
    }
    
    .ftco-footer .ftco-footer-widget:first-child .ftco-footer-social {
        margin-top: 1rem !important;
        padding-top: 0 !important;
    }
    
    .ftco-footer .ftco-footer-widget:first-child p {
        flex: none !important;
        margin-bottom: 0.5rem !important;
    }
    
    .ftco-footer .col-md {
        display: block !important;
    }
    
    .ftco-footer .ftco-footer-widget {
        display: block !important;
        flex: none !important;
    }

/* Corporate Office Section Compact */
.ftco-footer .block-23 ul li {
    margin-bottom: 0.3rem !important;
    font-size: 13px !important;
}

.ftco-footer .block-23 ul li span.icon {
    margin-right: 6px !important;
}

/* Footer Copyright Section */
.ftco-footer .row:last-child {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Ensure all footer instances are compact */
footer.ftco-footer.ftco-bg-dark.ftco-section {
    padding: 2rem 0 1rem 0 !important;
}

/* Corporate Office Address Compact Styling */
.ftco-footer .block-23 ul li span.text {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Ultra-Professional Footer Enhancements */
.ftco-footer {
    background: #233142 !important;
}

.ftco-footer .container {
    max-width: 1200px !important;
}

/* Reduce main content section */
.ftco-footer .row.mb-5 {
    margin-bottom: 0.75rem !important;
}

/* Make footer links more compact */
.ftco-footer ul.list-unstyled {
    margin-bottom: 0 !important;
}

/* Compact footer social section */
.ftco-footer-social.list-unstyled {
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
}

/* === Footer Social Icons Alignment === */
/* Align social icons with bottom level of Useful Links section (Terms and Conditions) */
.ftco-footer .ftco-footer-widget:first-child {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Ensure equal height columns for proper alignment and reduce spacing */
.ftco-footer .row.mb-5 {
    display: flex;
    align-items: stretch;
    margin-bottom: 2rem !important;
}

.ftco-footer .col-md {
    display: flex;
    flex-direction: column;
}

.ftco-footer .ftco-footer-widget {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Allow description to expand and position social icons at exact bottom level */
.ftco-footer .ftco-footer-widget:first-child p {
    flex: 1;
    margin-bottom: 1rem !important;
    padding-bottom: 0 !important;
}

/* FIXED: Position social icons INLINE with last footer links (Terms and Conditions, Contact) */
.ftco-footer .ftco-footer-widget:first-child .ftco-footer-social {
    margin-top: auto !important;
    margin-bottom: 0.15rem !important;
    padding-top: 0 !important;
    padding-bottom: 0.15rem !important;
    align-self: flex-start;
    position: relative !important;
}

/* Compact footer link spacing */
.ftco-footer .ftco-footer-widget ul.list-unstyled li {
    margin-bottom: 0.1rem !important;
}

.ftco-footer .ftco-footer-widget ul.list-unstyled li a {
    padding: 0.15rem 0 !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* Ensure proper footer widget height */
.ftco-footer .ftco-footer-widget h2.ftco-heading-2 {
    margin-bottom: 0.8rem !important;
}

/* Ensure first column has proper height matching other columns */
.ftco-footer .ftco-footer-widget:first-child {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Reduce spacing between all footer headings and content */
.ftco-footer .ftco-footer-widget h2 + ul {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ftco-footer .ftco-footer-widget h2 + div {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* FIXED: Align all footer widgets to same bottom level */
.ftco-footer .ftco-footer-widget.mb-4 {
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Push all footer lists to bottom */
.ftco-footer .ftco-footer-widget.mb-4 ul.list-unstyled {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Consistent last item padding */
.ftco-footer .ftco-footer-widget ul.list-unstyled li:last-child a {
    padding-bottom: 0.15rem !important;
    margin-bottom: 0 !important;
}

/* Corporate Office Icon Spacing */
.ftco-footer .block-23 ul li .icon {
    margin-right: 1rem !important;
}

/* Specific spacing for location icon */
.ftco-footer .block-23 ul li .icon.icon-map-marker {
    margin-right: 1.5rem !important;
}

/* === Development Page Enhancements === */
/* Statistics Section */
.stats-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 3rem 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.stat-item {
    padding: 1.5rem 1rem;
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    font-weight: 500;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Development Cards Enhancements */
.development-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: none;
    overflow: hidden;
}

.development-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 123, 255, 0.2);
}

.development-card .card-header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 2rem 1.5rem;
    text-align: center;
}

.development-card .icon-wrapper {
    margin-bottom: 1rem;
}

.development-card .service-logo {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
}

.development-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.development-card .subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.development-card .card-body {
    padding: 2rem 1.5rem;
}

.development-card .feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.development-card .feature-item i {
    color: #28a745;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    font-size: 1rem;
}

.development-card .tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.development-card .tech-tag {
    background: #e9ecef;
    color: #495057;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.development-card .card-footer {
    background: #f8f9fa;
    border-top: none;
    padding: 1.5rem;
    text-align: center;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 3rem 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.3);
}

.cta-section h3 {
    color: white;
    margin-bottom: 1rem;
}

.cta-section .lead {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.cta-buttons {
    margin-bottom: 1.5rem;
}

.cta-buttons .btn-outline-primary {
    border-color: white;
    color: white;
}

.cta-buttons .btn-outline-primary:hover {
    background: white;
    color: #007bff;
}

/* Process Steps */
.process-step {
    padding: 2rem 1rem;
    transition: transform 0.3s ease;
}

.process-step:hover {
    transform: translateY(-5px);
}

.process-step .step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}

.process-step h5 {
    font-weight: 600;
    color: #343a40;
    margin-bottom: 1rem;
}

.process-step p {
    color: #6c757d;
    font-size: 0.9rem;
}

/* === Contact Page Map Styling === */
#map {
    height: 400px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

.contact-section {
    padding: 4rem 0 !important;
}

.contact-info {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 3rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.contact-info h2 {
    color: #007bff;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.contact-info p {
    margin-bottom: 1rem;
    color: #495057;
}

.contact-info span {
    font-weight: 600;
    color: #007bff;
    display: block;
    margin-bottom: 0.5rem;
}

.contact-info a {
    color: #007bff;
    text-decoration: none;
}

.contact-info a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.block-9 {
    margin-top: 2rem;
}

.block-9 .form-group {
    margin-bottom: 1.5rem;
}

.block-9 .form-control {
    border-radius: 8px;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    font-size: 14px;
}

.block-9 .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.block-9 .btn-primary {
    border-radius: 8px;
    padding: 12px 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile Contact Page */
@media (max-width: 768px) {
    #map {
        height: 300px;
        margin-top: 2rem;
    }
    
    .contact-info {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .contact-section {
        padding: 2rem 0 !important;
    }
    
    .block-9 .col-md-6:first-child {
        margin-bottom: 2rem;
    }
}

/* === ENHANCED Chatbot Visibility & Functionality Fix === */
.hostboom-chatbot,
#hostboom-chatbot,
.chatbot-container {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    max-width: 400px !important;
    max-height: 600px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Ensure chatbot toggle is always visible with enhanced styling */
.chat-toggle,
.hostboom-chatbot .chat-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: #007bff !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    box-shadow: 0 4px 20px rgba(0, 123, 255, 0.4) !important;
    transition: all 0.3s ease !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
}

.chat-toggle:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 25px rgba(0, 123, 255, 0.6) !important;
}

/* Ensure chat container displays properly */
.chat-container,
.hostboom-chatbot .chat-container {
    background: white !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    max-width: 350px !important;
    max-height: 500px !important;
    overflow: hidden !important;
}

/* Fix any potential conflicts with chatbot button interactions */
.hostboom-chatbot * {
    box-sizing: border-box !important;
}

.hostboom-chatbot .chat-toggle,
.chat-toggle {
    border: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Ensure chatbot button responds to clicks */
.hostboom-chatbot .chat-toggle:active,
.chat-toggle:active {
    transform: scale(0.95) !important;
}

/* Prevent any overflow issues that might hide chatbot */
body {
    overflow-x: hidden !important;
}

/* Mobile chatbot positioning */
@media (max-width: 768px) {
    .hostboom-chatbot {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    .chat-toggle {
        width: 56px !important;
        height: 56px !important;
    }
}

/* Mobile Responsive for Development Page */
@media (max-width: 768px) {
    .stats-section {
        padding: 2rem 1rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .stat-label {
        font-size: 0.9rem;
    }
    
    .development-card .card-header {
        padding: 1.5rem 1rem;
    }
    
    .development-card .service-logo {
        width: 50px;
        height: 50px;
    }
    
    .development-card h3 {
        font-size: 1.3rem;
    }
    
    .development-card .card-body {
        padding: 1.5rem 1rem;
    }
    
    .cta-section {
        padding: 2rem 1rem;
    }
    
    .cta-buttons .btn {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .process-step {
        padding: 1.5rem 0.5rem;
    }
    
    .process-step .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

/* === Professional Badge Styling === */
.badge-primary {
    background-color: #007bff !important;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px !important;
}

/* === Responsive Enhancements === */
@media (max-width: 768px) {
    .block-6.services:hover,
    .block-7:hover {
        transform: translateY(-5px);
    }
    
    .navbar-nav .nav-link:hover {
        transform: none;
    }
    
    /* Mobile Hero Section */
    .home-slider .slider-text h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    .home-slider .slider-text p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Mobile Navigation - Restore Original Styling */
    /* Let the original ftco-navbar-light styles handle mobile navbar */
    /* Add minimal improvements without overriding core functionality */
    
    /* Ensure mobile navbar is always visible and accessible */
    .ftco-navbar-light {
        z-index: 9999 !important;
    }
    
    /* Improve mobile toggle button visibility */
    .navbar-toggler {
        border: 1px solid rgba(255,255,255,0.3) !important;
    }
    
    /* Ensure collapsed menu has proper spacing */
    .navbar-collapse.show {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Mobile Domain Form - Let original theme handle this */
    
    /* Mobile Service Cards */
    .block-6.services {
        margin-bottom: 2rem !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
        transform: scale(0.95) !important;
    }
    
    .block-6.services .icon {
        width: 55px !important;
        height: 55px !important;
    }
    
    /* Mobile Pricing Cards */
    .block-7 {
        margin-bottom: 2rem !important;
        padding: 1.5rem !important;
    }
    
    .modern-popular-badge {
        top: -5px !important;
        right: 10px !important;
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
    
    /* Mobile VPS Tabs */
    .nav-pills .nav-link {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
        margin: 2px !important;
    }
    
    /* Mobile Footer */
    .ftco-footer {
        padding: 1.5rem 0 0.75rem 0 !important;
    }
    
    .ftco-footer .ftco-footer-widget {
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    
    .ftco-footer .ftco-footer-widget h2 {
        font-size: 15px !important;
        margin-bottom: 0.5rem !important;
    }
    
    .ftco-footer .ftco-footer-widget p {
        font-size: 12px !important;
        margin-bottom: 0.5rem !important;
    }
    
    .ftco-footer .ftco-footer-widget ul li a {
        font-size: 12px !important;
        padding: 0.15rem 0 !important;
    }
    
    /* FIXED: Center social icons on mobile */
    .ftco-footer .ftco-footer-widget:first-child .ftco-footer-social {
        justify-content: center !important;
        margin-top: 1rem !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        position: relative !important;
        align-self: center !important;
        width: 100% !important;
        display: flex !important;
    }
    
    .ftco-footer-social {
        justify-content: center !important;
        margin-top: 0.75rem !important;
    }
    
    .ftco-footer-social li a {
        height: 28px !important;
        width: 28px !important;
        margin: 0 3px !important;
    }
    
    .ftco-footer-social li a span {
        font-size: 14px !important;
    }
    
    /* Override desktop flexbox settings on mobile */
    .ftco-footer .ftco-footer-widget:first-child {
        display: block !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* === Extra Small Mobile Devices === */
@media (max-width: 576px) {
    /* Very Small Mobile Hero */
    .home-slider .slider-text h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    
    .home-slider .slider-text p {
        font-size: 0.9rem !important;
    }
    
    .btn {
        font-size: 0.85rem !important;
        padding: 10px 20px !important;
    }
    
    /* Small Mobile Container */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Small Mobile Pricing */
    .price .number {
        font-size: 2.5rem !important;
    }
    
    /* Small Mobile Statistics */
    .block-18 .number {
        font-size: 2rem !important;
    }
    
    /* Extra Small Mobile Footer */
    .ftco-footer {
        padding: 1rem 0 0.5rem 0 !important;
    }
    
    .ftco-footer .ftco-footer-widget {
        margin-bottom: 0.75rem !important;
    }
    
    .ftco-footer .ftco-footer-widget h2 {
        font-size: 14px !important;
        margin-bottom: 0.4rem !important;
    }
    
    .ftco-footer .ftco-footer-widget p {
        font-size: 11px !important;
        margin-bottom: 0.4rem !important;
    }
    
    .ftco-footer .ftco-footer-widget ul li a {
        font-size: 11px !important;
        padding: 0.1rem 0 !important;
    }
    
    /* FIXED: Center social icons on extra small mobile */
    .ftco-footer .ftco-footer-widget:first-child .ftco-footer-social {
        justify-content: center !important;
        margin-top: 1rem !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        position: relative !important;
        align-self: center !important;
        width: 100% !important;
        display: flex !important;
    }
    
    .ftco-footer-social li a {
        height: 24px !important;
        width: 24px !important;
        margin: 0 2px !important;
    }
    
    .ftco-footer-social li a span {
        font-size: 12px !important;
    }
    
    /* Override desktop flexbox on extra small mobile */
    .ftco-footer .ftco-footer-widget:first-child {
        display: block !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Small Mobile Domain Price - Let original theme handle this */
}

/* === Tablet Optimization === */
@media (min-width: 769px) and (max-width: 991px) {
    .home-slider .slider-text h1 {
        font-size: 2.2rem !important;
    }
    
    .block-7 {
        padding: 2rem 1.5rem !important;
    }
    
    .nav-pills .nav-link {
        font-size: 0.9rem !important;
        padding: 10px 15px !important;
    }
}

/* === Landscape Mobile Optimization === */
@media (max-height: 500px) and (orientation: landscape) {
    .home-slider .slider-text h1 {
        font-size: 1.6rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .home-slider .slider-text p {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
    
    .home-slider .btn {
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
    }
}

/* === Touch Device Optimizations === */
@media (hover: none) and (pointer: coarse) {
    /* Enhanced mobile scrolling and touch support */
    html, body {
        -webkit-overflow-scrolling: touch !important;
        overflow-x: hidden !important;
        touch-action: pan-y !important;
        -webkit-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
    }
    
    /* Touch-friendly buttons */
    .btn {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation !important;
    }
    
    .nav-link {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        touch-action: manipulation !important;
    }
    
    /* Remove hover effects on touch devices */
    .block-6.services:hover,
    .block-7:hover {
        transform: none !important;
    }
    
    .btn:hover {
        transform: none !important;
    }
    
    /* Enhanced touch scrolling for content areas */
    .ftco-section, section {
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
    
    /* Fix for touch events on interactive elements */
    a, button, input, select, textarea {
        touch-action: manipulation !important;
    }
    
    /* Prevent rubber band scrolling on iOS */
    body {
        overscroll-behavior: none !important;
        -webkit-overscroll-behavior: none !important;
    }
}

/* === High DPI Display Support === */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper text rendering */
    body {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Better icon rendering */
    .icon {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* === FAQ Accordion Improvements === */
/* Ensure accordion works on all devices */
#accordion .card {
    border: 1px solid rgba(0,123,255,0.1) !important;
    border-radius: 8px !important;
    margin-bottom: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
}

#accordion .card:hover {
    box-shadow: 0 4px 16px rgba(0,123,255,0.15) !important;
    transform: translateY(-2px) !important;
}

#accordion .card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 1px solid rgba(0,123,255,0.1) !important;
    padding: 0 !important;
}

#accordion .card-link {
    display: block !important;
    padding: 1rem 1.5rem !important;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    border: none !important;
    background: none !important;
    width: 100% !important;
    text-align: left !important;
}

#accordion .card-link:hover {
    color: #007bff !important;
    text-decoration: none !important;
    background: rgba(0,123,255,0.05) !important;
}

#accordion .card-link:focus {
    outline: none !important;
    box-shadow: none !important;
}

#accordion .card-link .collapsed,
#accordion .card-link .expanded {
    position: absolute !important;
    right: 1.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #007bff !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
}

#accordion .card-link[aria-expanded="true"] .collapsed {
    display: none !important;
}

#accordion .card-link[aria-expanded="false"] .expanded {
    display: none !important;
}

#accordion .card-body {
    padding: 1.5rem !important;
    background: #fff !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

/* Smooth collapse animation */
#accordion .collapse {
    transition: all 0.3s ease !important;
}

/* Mobile FAQ improvements */
@media (max-width: 768px) {
    #accordion .card-link {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    #accordion .card-link .collapsed,
    #accordion .card-link .expanded {
        right: 1rem !important;
        font-size: 1rem !important;
    }
    
    #accordion .card-body {
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }
    
    #accordion .card {
        margin-bottom: 0.75rem !important;
    }
}

/* === Professional Table Styling === */
.table {
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

.table thead th {
    background: linear-gradient(135deg, #627bed 0%, #56c8fb 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.table tbody td {
    padding: 1rem !important;
    border-color: rgba(98, 123, 237, 0.1) !important;
    vertical-align: middle !important;
}

.table tbody tr:hover {
    background: rgba(98, 123, 237, 0.05) !important;
}

/* Mobile domain form - Let original theme handle this */

/* === Smooth Animations === */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === Professional Loading States === */
.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

/* === Enhanced List Styling === */
.list-unstyled li {
    padding: 8px 0;
    transition: all 0.3s ease;
}

.list-unstyled li:hover {
    padding-left: 10px;
    color: #007bff;
}

/* === Professional Icons === */
.icon-check {
    font-weight: bold;
    color: #28a745 !important;
}

/* === Development Page Styles === */
.development-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.development-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.development-card .card-header {
    background: linear-gradient(45deg, #56c8fb 0%, #627bed 100%);
    color: white;
    padding: 30px;
    text-align: center;
}

.development-card .icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    position: relative;
}

.development-card .icon-wrapper i {
    font-size: 40px;
    color: white;
    opacity: 0.2;
    position: absolute;
}

.development-card .icon-wrapper .service-logo {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.development-card .icon-wrapper .service-logo:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.development-card .card-header h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.development-card .card-header .subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin: 0;
}

.development-card .card-body {
    padding: 30px;
}

.features-list {
    margin-bottom: 30px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    padding: 10px 0;
}

.feature-item i {
    color: #56c8fb;
    margin-right: 15px;
    margin-top: 3px;
    font-size: 14px;
}

.feature-item span {
    flex: 1;
    line-height: 1.6;
}

.feature-item strong {
    color: #333;
    font-weight: 600;
}

.technologies h5 {
    color: #333;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 16px;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tech-tag {
    background: linear-gradient(45deg, #56c8fb 0%, #627bed 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
}

.development-card .card-footer {
    padding: 20px 30px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
    text-align: center;
}

.development-card .btn-primary {
    background: linear-gradient(45deg, #56c8fb 0%, #627bed 100%);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.development-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(86, 200, 251, 0.4);
}

/* Process Section */
.process-section {
    background: white;
    padding: 50px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.process-step {
    padding: 20px;
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #56c8fb 0%, #627bed 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto 20px;
}

.process-step h5 {
    color: #333;
    font-weight: 600;
    margin-bottom: 15px;
}

.process-step p {
    color: #666;
    line-height: 1.6;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(45deg, #56c8fb 0%, #627bed 100%);
    color: white;
    padding: 60px 40px;
    border-radius: 15px;
    text-align: center;
}

.cta-section h3 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
}

.cta-section .lead {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.cta-section .btn {
    padding: 15px 30px;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.cta-section .btn-primary {
    background: white;
    color: #56c8fb;
    border: 2px solid white;
}

.cta-section .btn-primary:hover {
    background: transparent;
    color: white;
    transform: translateY(-2px);
}

.cta-section .btn-outline-primary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.cta-section .btn-outline-primary:hover {
    background: white;
    color: #56c8fb;
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .development-card .card-header {
        padding: 20px;
    }
    
    .development-card .card-body {
        padding: 20px;
    }
    
    .development-card .card-footer {
        padding: 15px 20px;
    }
    
    .process-section {
        padding: 30px 20px;
    }
    
    .cta-section {
        padding: 40px 20px;
    }
    
    .cta-section h3 {
        font-size: 24px;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .tech-tags {
        justify-content: center;
    }
}

/* Contact Page Map Styling */
#map {
    height: 400px;
    min-height: 300px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

@media (max-width: 768px) {
    #map {
        height: 300px;
        margin-top: 20px;
    }
}

/* Contact Section Styling */
.contact-section {
    padding: 60px 0;
}

.contact-info {
    margin-bottom: 40px;
}

.contact-info span {
    font-weight: 600;
    color: #627bed;
    display: inline-block;
    min-width: 80px;
}

.block-9 {
    margin-top: 20px;
}

/* === PROFESSIONAL NAVBAR STYLING === */
/* Improve navbar-collapse spacing and alignment */
.navbar-collapse {
    padding-right: 6.25rem !important; /* 100px equivalent */
    padding-left: 2rem !important; /* Move items a bit left */
    margin-right: 0 !important;
}

/* Professional navbar container spacing */
.ftco_navbar .container {
    padding-right: 15px !important;
    padding-left: 103px !important; /* Move logo to the right */
}

/* Improve navbar-nav alignment and spacing */
.navbar-nav.ml-auto {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* Professional nav-link spacing */
.navbar-nav .nav-link {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
}

/* Special styling for Dev Partner link */
.navbar-nav .nav-link[href*="gauravgoel.tech"] {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}

/* Professional CTA button spacing */
.nav-item.cta .nav-link {
    margin-right: 0 !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

/* Mobile responsive adjustments */
@media (max-width: 991.98px) {
    .navbar-collapse {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    .navbar-nav.ml-auto {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    .navbar-nav .nav-link {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        text-align: left !important;
    }
    
    .nav-item.cta .nav-link {
        margin-right: 0 !important;
        margin-left: 0 !important;
        text-align: center !important;
    }
    
    /* Reset container padding on mobile */
    .ftco_navbar .container {
        padding-right: 15px !important;
        padding-left: 15px !important; /* Normal padding on mobile */
    }
}

/* === CUSTOM SLIDEBAR/SCROLLBAR FOR WHOLE PAGE === */
/* Enable scrollbars ONLY for the main page */
html, body {
    scrollbar-width: auto !important; /* Firefox */
    -ms-overflow-style: auto !important; /* Internet Explorer 10+ */
    overflow-y: auto !important;
}

/* Webkit browsers (Chrome, Safari, Edge) - ONLY for main page */
html::-webkit-scrollbar, 
body::-webkit-scrollbar {
    width: 12px !important;
    display: block !important;
}

html::-webkit-scrollbar-track, 
body::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 6px !important;
}

html::-webkit-scrollbar-thumb, 
body::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 6px !important;
    border: 2px solid #f1f1f1 !important;
}

html::-webkit-scrollbar-thumb:hover, 
body::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

/* Mobile specific scrollbar - ONLY for main page */
@media (max-width: 768px) {
    html::-webkit-scrollbar, 
    body::-webkit-scrollbar {
        width: 8px !important;
    }
    
    html::-webkit-scrollbar-thumb, 
    body::-webkit-scrollbar-thumb {
        background: #666 !important;
        border: 1px solid #f1f1f1 !important;
    }
    
    /* Ensure mobile scrolling works properly */
    html, body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* HIDE scrollbars from all sections and containers */
.container, .container-fluid, .row, .col, [class*="col-"], 
section, .ftco-section, .ftco-footer, .ftco-navbar,
.ftco-domain, .home-slider, .slider-item,
.contact-section, .about-section, .domain-section, .hosting-section, .development-section {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
    overflow: visible !important;
}

.container::-webkit-scrollbar, 
.container-fluid::-webkit-scrollbar, 
.row::-webkit-scrollbar, 
.col::-webkit-scrollbar, 
[class*="col-"]::-webkit-scrollbar,
section::-webkit-scrollbar,
.ftco-section::-webkit-scrollbar,
.ftco-footer::-webkit-scrollbar,
.ftco-navbar::-webkit-scrollbar,
.ftco-domain::-webkit-scrollbar,
.home-slider::-webkit-scrollbar,
.slider-item::-webkit-scrollbar,
.contact-section::-webkit-scrollbar,
.about-section::-webkit-scrollbar,
.domain-section::-webkit-scrollbar,
.hosting-section::-webkit-scrollbar,
.development-section::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

/* Mobile-specific overflow fixes */
@media (max-width: 768px) {
    .container, .container-fluid, .row, .col, [class*="col-"], 
    section, .ftco-section, .ftco-footer, .ftco-navbar,
    .ftco-domain, .home-slider, .slider-item,
    .contact-section, .about-section, .domain-section, .hosting-section, .development-section {
        overflow: visible !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure body and html can scroll on mobile */
    body.home-page {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* Force enable scrolling on all elements */
    html, body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* Remove any fixed positioning that might block scrolling */
    .home-slider, .slider-item {
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Ensure no elements block touch events */
    * {
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    /* Allow text selection for better UX */
    p, h1, h2, h3, h4, h5, h6, span, div, a {
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
        user-select: text !important;
        touch-action: pan-y !important;
    }
    
    /* Remove any potential scroll blocking */
    .ftco-loader {
        pointer-events: none !important;
    }
    
    /* Ensure navbar doesn't block scrolling */
    .ftco-navbar {
        position: relative !important;
        z-index: 1000 !important;
    }
}

/* === PROFESSIONAL NAVBAR STYLING === */