/* ========================================
   Narhost Style - Modern Clean Design
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

body {
    font-family: 'Roboto', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif !important;
}

input,
button,
select,
textarea {
    font-family: 'Roboto', sans-serif !important;
}


/* ========================================
   1. HEADER - NARHOST STYLE
   ======================================== */

.hostquix-header {
    background: var(--bg-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-bar-hostquix {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 8px 0;
    font-size: 13px;
}

.top-bar-hostquix ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.toplink-left {
    justify-content: flex-start;
}

.toplink-right {
    justify-content: flex-end;
}

.top-bar-hostquix ul li {
    margin: 0 12px;
}

.top-bar-hostquix ul li a {
    color: #6c757d;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.top-bar-hostquix ul li a:hover {
    color: var(--primary-color);
}

.top-bar-hostquix ul li a i {
    margin-right: 5px;
}

.top-bar-hostquix .login-btn a {
    background: var(--primary-color);
    color: white;
    padding: 6px 16px;
    border-radius: 4px;
}

.top-bar-hostquix .login-btn a:hover {
    background: var(--primary-dark);
    color: white;
}

/* Navbar */
.hostquix-navbar {
    padding: 12px 0;
    background: white;
}

.hostquix-navbar .navbar-brand img {
    height: 40px;
    width: auto;
}

.hostquix-navbar .navbar-nav {
    align-items: center;
}

.hostquix-navbar .nav-link {
    color: #2d3748;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 16px;
    transition: color 0.2s;
}

.hostquix-navbar .nav-link:hover {
    color: var(--primary-color);
}

.hostquix-navbar .nav-link i {
    font-size: 14px;
    margin-left: 4px;
}


.hostquix-navbar .nav-link i {
    font-size: 14px;
    margin-left: 4px;
    font-weight: 900;
    display: inline-block;
}

.top-bar-hostquix ul li a i {
    margin-right: 6px;
    font-size: 14px;
}

/* Fix Login Links - Robust */
.toplink2 {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    height: 100%;
}

.toplink2 li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.toplink2 li a {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    background: transparent !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid transparent !important;
    height: 36px !important;
}

.toplink2 li.login-lnk a {
    background: #e30613 !important;
    color: #ffffff !important;
    border: 1px solid #e30613 !important;
}

.toplink2 li.login-lnk a:hover {
    background: #b90510 !important;
    border-color: #b90510 !important;
}

.toplink2 li a:hover {
    color: var(--primary-color) !important;
    background: #edf2f7 !important;
    border-color: #cbd5e0 !important;
}

.nav-cart-item {
    margin-left: 8px;
}


.nav-cart-link {
    position: relative;
    padding: 8px 12px !important;
}

.nav-cart-link i {
    font-size: 20px;
}

/* Custom Cart Button - Simplified & Robust */
.custom-cart-btn {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    transition: all 0.3s ease;
    margin-left: 15px !important;
    height: 48px !important;
    /* Fixed Height */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    width: 48px !important;
    padding: 0 !important;
    text-decoration: none !important;
    justify-content: center !important;
}

.custom-cart-btn:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2) !important;
}

.custom-cart-btn:hover .cart-text,
.custom-cart-btn:hover .cart-icon-wrapper i {
    color: #fff !important;
}

.cart-icon-wrapper {
    position: relative !important;
    margin-right: 0 !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.cart-icon-wrapper i {
    font-size: 20px !important;
    color: #4a5568 !important;
    transition: all 0.3s ease;
    display: block !important;
    line-height: 1 !important;
}

.cart-badge-count {
    position: absolute !important;
    top: -8px !important;
    right: -10px !important;
    background: #e53e3e !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    border-radius: 50% !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    z-index: 10 !important;
    padding: 0 !important;
}

.cart-text {
    font-weight: 600 !important;
    color: #2d3748 !important;
    font-size: 15px !important;
    transition: all 0.3s ease;
    line-height: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}



/* Dropdown Menu */
/* Dropdown Menu - Mega Menu Fix */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 0;
    margin-top: 15px;
    /* Offset from header */
}

@media (min-width: 992px) {

    /* Allow dropdown to be wider than parent */
    .navbar-expand-lg .navbar-nav .nav-item.dropdown {
        position: static;
    }

    .navbar-expand-lg .navbar-nav .nav-item.dropdown .dropdown-menu {
        left: 50%;
        transform: translateX(-50%);
        min-width: 900px !important;
        /* Force wide width */
        width: auto;
        max-width: 100vw;
    }

    /* Fix for Login Dropdown to NOT be wide */
    .toplink2 .dropdown-menu {
        min-width: 200px !important;
        width: 200px !important;
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        position: absolute !important;
    }
}


.mega-menu-header {
    padding: 20px;
    min-width: 800px;
}

.mega-menu-header b {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mega-menu-header ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-header ul li {
    margin-bottom: 15px;
}

.mega-menu-header ul li a {
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
}

.mega-menu-header ul li a p {
    margin: 0;
    display: flex;
    align-items: flex-start;
}

.mega-menu-header .menu-icon {
    margin-right: 15px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-rgb), 0.08);
    /* Light primary background */
    border-radius: 8px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.mega-menu-header .menu-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    /* CSS Filter to turn icons to Black */
    filter: brightness(0) saturate(100%);
}


.mega-menu-header .menu-text {
    display: flex;
    flex-direction: column;
}

.mega-menu-header .menu-text b {
    font-size: 12px;
    color: #2d3748;
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: normal;
}

.mega-menu-header .menu-text {
    font-size: 13px;
    color: #718096;
    line-height: 1.4;
}

.mega-menu-header ul li a:hover .menu-text b {
    color: var(--primary-color);
}

.mega-menu-header ul li a:hover .menu-icon {
    background: rgba(227, 6, 19, 0.1);
}

/* Badge Styles in Menu */
.mega-menu-header .badge {
    font-size: 10px;
    padding: 3px 6px;
    margin-left: 5px;
    vertical-align: middle;
}

@media (max-width: 991px) {
    .mega-menu-header {
        min-width: 100%;
        padding: 15px;
    }

    .mega-menu-header .col-md-4 {
        margin-bottom: 20px;
    }
}


.mega-menu-hostquix h6 {
    font-size: 14px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mega-menu-hostquix h6 i {
    color: var(--primary-color);
    margin-right: 8px;
    font-size: 16px;
}

.mega-menu-hostquix ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-hostquix ul li {
    margin-bottom: 8px;
}

.mega-menu-hostquix ul li a {
    color: #4a5568;
    font-size: 14px;
    text-decoration: none;
    display: block;
    padding: 6px 0;
    transition: all 0.2s;
}

.mega-menu-hostquix ul li a i {
    margin-right: 8px;
    font-size: 10px;
    color: var(--primary-color);
    opacity: 0.6;
}

.mega-menu-hostquix ul li a:hover {
    color: var(--primary-color);
    padding-left: 8px;
}

.mega-menu-hostquix ul li a:hover i {
    opacity: 1;
}

/* ========================================
   2. HERO SECTION - NARHOST STYLE
   ======================================== */

.hostquix-hero {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.hostquix-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.03) 0%, rgba(0, 102, 204, 0.08) 100%);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-content h1 {
    font-size: 42px;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 18px;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 32px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-buttons .btn {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
}

.hero-image {
    position: relative;
    z-index: 1;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* ========================================
   3. DOMAIN SEARCH - NARHOST STYLE
   ======================================== */

.hostquix-domain-search {
    background: white;
    padding: 60px 0;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

.domain-search-wrapper {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.domain-search-wrapper h3 {
    font-size: 28px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 24px;
}

.domain-search-form {
    margin-bottom: 24px;
}

.search-input-group {
    display: flex;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.search-input-group .form-control {
    flex: 1;
    height: 56px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 16px;
    transition: all 0.3s;
}

.search-input-group .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.search-input-group .btn {
    height: 56px;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
}

.domain-extensions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.ext-item {
    font-size: 14px;
    color: #4a5568;
}

.ext-item strong {
    color: var(--primary-color);
    font-weight: 600;
    margin-left: 4px;
}

/* ========================================
   4. SERVICES SECTION - NARHOST STYLE
   ======================================== */

.hostquix-services {
    padding: 80px 0;
    background: #f8f9fa;
}

.section-header {
    margin-bottom: 48px;
}

.section-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 12px;
}

.section-header p {
    font-size: 18px;
    color: #4a5568;
}

.service-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s;
    border: 2px solid transparent;
    margin-bottom: 24px;
    position: relative;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.service-card.featured {
    border-color: var(--primary-color);
    box-shadow: 0 8px 16px rgba(0, 102, 204, 0.15);
}

.featured-badge {
    position: absolute;
    top: -12px;
    right: 24px;
    background: var(--primary-color);
    color: white;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
}

.service-card h4 {
    font-size: 22px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 12px;
}

.service-card p {
    font-size: 15px;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 20px;
}

.service-price {
    margin-bottom: 24px;
}

.service-price .price {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
}

.service-price .period {
    font-size: 16px;
    color: #718096;
}

.service-card .btn {
    width: 100%;
    padding: 12px;
    font-weight: 600;
}

/* ========================================
   5. FEATURES SECTION - NARHOST STYLE
   ======================================== */

.hostquix-features {
    padding: 80px 0;
    background: white;
}

.feature-box {
    text-align: center;
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.3s;
}

.feature-box:hover {
    transform: translateY(-4px);
}

.feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #e6f2ff 0%, #cce5ff 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 28px;
}

.feature-box h5 {
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 8px;
}

.feature-box p {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.5;
    margin: 0;
}

/* ========================================
   6. WHY CHOOSE US - NARHOST STYLE
   ======================================== */

.hostquix-why-choose {
    padding: 80px 0;
    background: #f8f9fa;
}

.why-content h2 {
    font-size: 36px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 32px;
}

.why-item {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.why-icon {
    flex-shrink: 0;
}

.why-icon i {
    font-size: 24px;
    color: var(--primary-color);
}

.why-text h5 {
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 8px;
}

.why-text p {
    font-size: 15px;
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
}

.why-image img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   7. RESPONSIVE
   ======================================== */

@media (max-width: 991px) {
    .mega-menu-hostquix {
        min-width: auto;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .hostquix-hero {
        padding: 60px 0;
    }

    .hero-image {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .search-input-group {
        flex-direction: column;
    }

    .search-input-group .btn {
        width: 100%;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .section-header h2 {
        font-size: 28px;
    }

    .why-content h2 {
        font-size: 28px;
    }
}


/* ========================================
   8. LOGIN PAGE - NARHOST STYLE
   ======================================== */

.hostquix-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

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

.login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    padding: 20px;
}

.login-card {
    background: white;
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header img {
    height: 50px;
    margin-bottom: 24px;
}

.login-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
}

.login-header p {
    font-size: 15px;
    color: #718096;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form label {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    display: block;
}

.login-form .form-control {
    height: 48px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 15px;
    transition: all 0.3s;
}

.login-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.login-form .btn-login {
    width: 100%;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    margin-top: 8px;
}

.login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.login-footer a {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

/* ========================================
   9. DOMAIN CHECKER - NARHOST STYLE
   ======================================== */

.hostquix-domain-checker {
    padding: 60px 0;
    background: #f8f9fa;
}

.domain-checker-header {
    text-align: center;
    margin-bottom: 48px;
}

.domain-checker-header h1 {
    font-size: 36px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 16px;
}

.domain-checker-header p {
    font-size: 18px;
    color: #4a5568;
}

.domain-search-box {
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px;
}

.domain-results {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.domain-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
    transition: all 0.3s;
}

.domain-result-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
}

.domain-result-item.available {
    border-left: 4px solid var(--success-color);
}

.domain-result-item.unavailable {
    border-left: 4px solid #cbd5e0;
    opacity: 0.6;
}

.domain-name-col {
    flex: 1;
}

.domain-name-col .domain-name {
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
}

.domain-status-col {
    padding: 0 20px;
}

.domain-status-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.domain-status-badge.available {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
}

.domain-status-badge.unavailable {
    background: #e2e8f0;
    color: #718096;
}

.domain-price-col {
    text-align: right;
}

.domain-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
}

.domain-period {
    font-size: 14px;
    color: #718096;
}

/* ========================================
   10. CLIENT AREA HOME - NARHOST STYLE
   ======================================== */

.hostquix-client-home {
    padding: 40px 0;
    background: #f8f9fa;
}

.client-welcome-banner {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 12px;
    padding: 40px;
    color: white;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.client-welcome-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    max-width: 100%;
    height: 400px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.client-welcome-content {
    position: relative;
    z-index: 1;
}

.client-welcome-content h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
}

.client-welcome-content p {
    font-size: 16px;
    opacity: 0.9;
}

.client-stats-row {
    display: flex;
    gap: 24px;
    margin-top: 24px;
}

.client-stat-box {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 16px 24px;
    flex: 1;
}

.client-stat-box .stat-number {
    font-size: 28px;
    font-weight: 700;
    display: block;
}

.client-stat-box .stat-label {
    font-size: 14px;
    opacity: 0.9;
}

.client-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.quick-action-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.quick-action-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.quick-action-card h5 {
    font-size: 16px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 8px;
}

.quick-action-card p {
    font-size: 13px;
    color: #718096;
    margin: 0;
}

/* ========================================
   11. SERVICES LIST - NARHOST STYLE
   ======================================== */

.hostquix-services-list {
    padding: 40px 0;
}

.services-list-header {
    margin-bottom: 32px;
}

.services-list-header h1 {
    font-size: 32px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
}

.service-item-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s;
}

.service-item-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
}

.service-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.service-item-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.service-item-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.service-item-info h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 4px;
}

.service-item-info p {
    font-size: 14px;
    color: #718096;
    margin: 0;
}

.service-status-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.service-status-badge.active {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
}

.service-status-badge.pending {
    background: rgba(255, 193, 7, 0.1);
    color: var(--warning-color);
}

.service-status-badge.suspended {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
}

.service-item-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid #e2e8f0;
}

.service-detail-item {
    font-size: 14px;
}

.service-detail-label {
    color: #718096;
    display: block;
    margin-bottom: 4px;
}

.service-detail-value {
    color: #1a202c;
    font-weight: 600;
}

.service-item-actions {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.service-item-actions .btn {
    flex: 1;
    padding: 10px;
    font-size: 14px;
}

/* ========================================
   12. INVOICES - NARHOST STYLE
   ======================================== */

.hostquix-invoices {
    padding: 40px 0;
}

.invoice-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    border-left: 4px solid #e2e8f0;
    transition: all 0.3s;
}

.invoice-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.invoice-card.paid {
    border-left-color: var(--success-color);
}

.invoice-card.unpaid {
    border-left-color: var(--danger-color);
}

.invoice-card.cancelled {
    border-left-color: #cbd5e0;
}

.invoice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.invoice-number {
    font-size: 18px;
    font-weight: 700;
    color: #1a202c;
}

.invoice-status {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.invoice-status.paid {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
}

.invoice-status.unpaid {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
}

.invoice-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.invoice-detail-item {
    font-size: 14px;
}

.invoice-detail-label {
    color: #718096;
    display: block;
    margin-bottom: 4px;
}

.invoice-detail-value {
    color: #1a202c;
    font-weight: 600;
}

.invoice-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
}

.invoice-actions {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

/* ========================================
   13. SUPPORT TICKETS - NARHOST STYLE
   ======================================== */

.hostquix-tickets {
    padding: 40px 0;
}

.ticket-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s;
}

.ticket-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
}

.ticket-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ticket-title-section {
    flex: 1;
}

.ticket-id {
    font-size: 13px;
    color: #718096;
    margin-bottom: 4px;
}

.ticket-subject {
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 8px;
}

.ticket-meta {
    font-size: 14px;
    color: #718096;
}

.ticket-status {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.ticket-status.open {
    background: rgba(0, 102, 204, 0.1);
    color: var(--primary-color);
}

.ticket-status.answered {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
}

.ticket-status.closed {
    background: #e2e8f0;
    color: #718096;
}

.ticket-preview {
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #4a5568;
    line-height: 1.6;
}

.ticket-actions {
    display: flex;
    gap: 8px;
}

/* ========================================
   14. CONTACT PAGE - NARHOST STYLE
   ======================================== */

.hostquix-contact {
    padding: 60px 0;
    background: #f8f9fa;
}

.contact-header {
    text-align: center;
    margin-bottom: 48px;
}

.contact-header h1 {
    font-size: 36px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 16px;
}

.contact-header p {
    font-size: 18px;
    color: #4a5568;
}

.contact-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

.contact-info-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s;
}

.contact-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.contact-info-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
}

.contact-info-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 8px;
}

.contact-info-card p {
    font-size: 15px;
    color: #4a5568;
    margin: 0;
}

.contact-form-card {
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.contact-form-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 24px;
}

/* ========================================
   15. KNOWLEDGEBASE - NARHOST STYLE
   ======================================== */

.hostquix-kb {
    padding: 60px 0;
}

.kb-search-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 60px 0;
    margin-bottom: 48px;
    color: white;
}

.kb-search-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.kb-search-content h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
}

.kb-search-content p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 32px;
}

.kb-search-box {
    position: relative;
}

.kb-search-box input {
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 28px;
    padding: 0 60px 0 24px;
    font-size: 16px;
}

.kb-search-box button {
    position: absolute;
    right: 8px;
    top: 8px;
    height: 40px;
    width: 40px;
    border: none;
    background: var(--primary-color);
    color: white;
    border-radius: 20px;
    cursor: pointer;
}

.kb-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.kb-category-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s;
}

.kb-category-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 16px rgba(0, 102, 204, 0.1);
    transform: translateY(-4px);
}

.kb-category-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.kb-category-card h4 {
    font-size: 20px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 12px;
}

.kb-category-card p {
    font-size: 14px;
    color: #718096;
    margin-bottom: 16px;
}

.kb-article-count {
    font-size: 13px;
    color: var(--primary-color);
    font-weight: 600;
}

/* Package Cards Styles */
.hostquix-packages {
    padding: 80px 0;
    background: #fff;
}

.package-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    background: #fff;
    height: 100%;
}

.package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.package-card.featured {
    border: 2px solid var(--primary-color);
    box-shadow: 0 10px 30px rgba(227, 6, 19, 0.1);
}

.featured-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primary-color);
    color: white;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: 700;
    border-bottom-left-radius: 12px;
}

.package-header h4 {
    font-size: 20px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 10px;
}

.package-header .price {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.package-header .price span {
    font-size: 16px;
    color: #718096;
    font-weight: 500;
}

.package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left;
}

.package-features li {
    padding: 10px 0;
    border-bottom: 1px solid #f7fafc;
    color: #4a5568;
    font-size: 15px;
}

.package-features li:last-child {
    border-bottom: none;
}

.package-features li i {
    color: var(--success-color);
    margin-right: 10px;
}

/* Fix Menu/Navbar Issues overriding custom-corporate.css */
.header .navbar .nav-item.show .nav-link,
.header .navbar .nav-link:focus,
.header .navbar .nav-item.show .nav-link:before {
    background: transparent !important;
    color: var(--primary-color) !important;
}

.header .dropdown:hover .nav-link {
    background: transparent !important;
    color: var(--primary-color) !important;
}

.header .dropdown-menu {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 0;
}

/* Mega Menu Adjustments */
.mega-menu-hostquix {
    padding: 20px;
    min-width: 600px;
}

@media (max-width: 991px) {
    .mega-menu-hostquix {
        min-width: 100%;
        width: 100%;
    }
}

/* Mega Menu Grid Style */
.menu-item-box {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 20px;
    transition: all 0.3s;
    text-decoration: none;
    background: #fff;
    height: calc(100% - 20px);
}

.menu-item-box:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(227, 6, 19, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
}

.menu-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 10px;
    margin-right: 15px;
}

.menu-icon img {
    width: 28px;
    height: 28px;
}

.menu-content h6 {
    font-size: 16px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 4px;
}

.menu-content p {
    font-size: 13px;
    color: #718096;
    margin: 0;
    line-height: 1.4;
}

.menu-item-box:hover .menu-content h6 {
    color: var(--primary-color);
}

/* Login Page Redesign */
.hostquix-login-page {
    background: #f4f7f6;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-wrapper {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
}

.login-left {
    padding: 60px;
    width: 50%;
}

.login-right {
    width: 50%;
    background: var(--primary-color);
    padding: 60px;
    color: white;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-right h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
}

.feature-list li .icon {
    background: rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    font-size: 18px;
}

.feature-list li h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    color: white;
}

.feature-list li p {
    font-size: 13px;
    margin: 0;
    opacity: 0.9;
    line-height: 1.4;
}

/* Header Login Buttons */
.btn-header-login {
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff !important;
    border-radius: 50px;
    padding: 6px 20px;
    font-size: 13px;
    font-weight: 500;
    transition: none;
    /* Removed transition */
    text-decoration: none;
}

.btn-header-login:hover {
    background: transparent;
    /* No background change */
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2);
    /* No border change */
    text-decoration: none;
}

.btn-header-register {
    display: inline-block;
    background: #cc0000;
    /* Hostquix Red */
    border: 1px solid #cc0000;
    color: #fff !important;
    border-radius: 50px;
    padding: 6px 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(204, 0, 0, 0.3);
    transition: none;
    /* Removed transition */
    text-decoration: none;
}

.btn-header-register:hover {
    background: #cc0000;
    /* No background change */
    border-color: #cc0000;
    color: #fff !important;
    transform: none;
    /* No movement */
    box-shadow: 0 4px 10px rgba(204, 0, 0, 0.3);
    /* No shadow change */
    text-decoration: none;
}

.limited-offer {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    margin-top: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.limited-offer h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffd700;
}

.limited-offer .price-tag {
    font-size: 24px;
    font-weight: 800;
    color: #ffd700;
}

.login-title {
    text-align: center;
    margin-bottom: 40px;
}

.login-title h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 10px;
}

.login-title p {
    color: #718096;
    font-size: 16px;
}

.form-group label {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
}

.form-control {
    height: 50px;
    padding: 0 20px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.form-control:focus {
    background: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.1);
}

.btn-primary.btn-block {
    height: 54px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 10px;
    background: var(--primary-color);
    border: none;
    width: 100%;
}

.btn-primary.btn-block:hover {
    background: #c00510;
}

.login-bottom-links {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    font-weight: 600;
}

.login-bottom-links a {
    color: var(--primary-color);
}

@media (max-width: 991px) {
    .login-left {
        width: 100%;
        padding: 40px;
    }

    .login-right {
        display: none;
    }
}

/* Footer Redesign - Dark Theme */
.hostquix-footer {
    background: #23272b;
    color: #9ca3af;
    font-size: 14px;
}

.footer-main {
    padding: 80px 0;
}

.footer-contact-card {
    background: #2d3339;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #374151;
}

.footer-contact-card .footer-logo {
    height: 40px;
    margin-bottom: 24px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.footer-contact-card .address {
    margin-bottom: 20px;
    line-height: 1.6;
    color: #9ca3af;
}

.footer-contact-card .contact-info {
    font-size: 15px;
    margin-bottom: 24px;
    color: #d1d5db;
}

.footer-contact-card .contact-info strong {
    color: #fff;
    font-size: 16px;
}

.ns-info-box {
    background: #1f2227;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid #374151;
}

.ns-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #374151;
    font-family: monospace;
    font-size: 13px;
    color: #d1d5db;
}

.ns-item:last-child {
    border-bottom: none;
}

.ns-item .btn-copy {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.ns-item .btn-copy:hover {
    color: #fff;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social a {
    width: 36px;
    height: 36px;
    background: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #9ca3af;
    transition: all 0.2s;
}

.footer-social a:hover {
    background: var(--primary-color);
    color: white;
}

.footer-links h5 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links ul li a {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s;
    font-size: 14px;
}

.footer-links ul li a:hover {
    color: #fff;
    padding-left: 5px;
}

.footer-bottom {
    background: #1a1d21;
    padding: 24px 0;
    border-top: 1px solid #374151;
    font-size: 13px;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-legal li a {
    color: #9ca3af;
    text-decoration: none;
}

.footer-legal li a:hover {
    color: #fff;
}

.payment-logos {
    display: flex;
    gap: 10px;
    align-items: center;
}

.payment-logos img {
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

@media (max-width: 991px) {
    .footer-contact-card {
        margin-bottom: 40px;
    }

    .footer-bottom-right {
        justify-content: flex-start;
        margin-top: 20px;
    }
}

/* Compact Menu Fix */
.hostquix-dropdown .mega-menu-hostquix {
    min-width: 600px !important;
    padding: 10px !important;
}

.menu-item-box {
    padding: 10px !important;
    margin-bottom: 10px !important;
    align-items: center !important;
}

.menu-icon {
    width: 36px !important;
    height: 36px !important;
    margin-right: 10px !important;
}

.menu-icon img {
    width: 20px !important;
    height: 20px !important;
}

.menu-content h6 {
    font-size: 14px !important;
    margin-bottom: 2px !important;
}

.menu-content p {
    font-size: 11px !important;
    line-height: 1.2 !important;
    display: none;
    /* Hide description for more compactness if needed, or keep small */
}

@media (min-width: 992px) {
    .menu-content p {
        display: block;
    }
}

/* Narrow Menu Width Fix */
.hostquix-dropdown {
    width: 320px !important;
    min-width: unset !important;
}

.hostquix-dropdown .mega-menu-hostquix {
    min-width: unset !important;
    width: 100% !important;
    padding: 10px !important;
}

.menu-item-box {
    margin-bottom: 5px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    padding: 8px !important;
}

.menu-item-box:hover {
    background: #f8f9fa !important;
    box-shadow: none !important;
    transform: none !important;
}

.menu-content p {
    display: none !important;
    /* Hide descriptions to keep it narrow and clean */
}

/* Login Link Fixes */
.login-bottom-links {
    position: relative;
    z-index: 10;
}

.login-bottom-links a {
    position: relative;
    z-index: 10;
    cursor: pointer;
    display: inline-block;
    /* Ensure clickable area */
}

/* Homepage Redesign Styling */

/* Campaign Cards */
.campaign-card {
    border-radius: 12px;
    padding: 24px;
    color: white;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s;
}

.campaign-card:hover {
    transform: translateY(-5px);
}

.campaign-card .card-content {
    position: relative;
    z-index: 2;
}

.campaign-card h5 {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.campaign-card .old-price {
    text-decoration: line-through;
    opacity: 0.7;
    margin-bottom: 0;
    font-size: 0.9rem;
}

.campaign-card .new-price {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1;
}

.campaign-card .new-price small {
    font-size: 1rem;
    font-weight: 400;
}

.campaign-card .discount-circle {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
}

.campaign-card .card-icon-bg {
    position: absolute;
    bottom: -20px;
    right: -20px;
    opacity: 0.1;
    width: 150px;
    height: 150px;
    transform: rotate(-15deg);
    z-index: 1;
}

.card-red {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

.card-dark-red {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}

.card-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.card-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

/* Service Tabs */
.hostquix-solutions {
    border-bottom: 1px solid #edf2f7;
}

.nav-pills .nav-link {
    background: #f7fafc;
    color: #4a5568;
    margin: 0 5px;
    border-radius: 50px;
    padding: 10px 25px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
}

.nav-pills .nav-link.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.nav-pills .nav-link i {
    margin-right: 5px;
}

/* MENU ALIGNMENT FIX */
/* Force nav-item to be the reference for dropdown positioning */
.header .navbar-nav .nav-item {
    position: relative !important;
}

/* Reset dropdown positioning to align with the parent item */
.hostquix-dropdown {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin-top: 15px !important;
    /* Space between menu and dropdown */
}

/* Ensure dropdown arrow is centered if possible, or just look good */
.hostquix-dropdown:before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    /* Adjust based on preference */
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    z-index: 1001;
}

/* CART DESIGN REDESIGN */
.nav-cart-item {
    display: flex;
    align-items: center;
}

.nav-cart-item .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: #4a5568 !important;
    transition: all 0.3s ease;
    margin-left: 15px;
    padding: 0 !important;
    /* Override default padding */
}

.nav-cart-item .nav-link:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* LOGO SIZING */
.navbar-brand .logo {
    max-height: 50px;
    /* Adjust as needed */
    width: auto;
}

.logo-mobile {
    max-height: 40px;
    width: auto;
}

/* MENU WIDTH FIX (FINAL) */
/* Override previous narrow constraints for desktop */
@media (min-width: 992px) {
    .hostquix-dropdown {
        width: 600px !important;
        /* Wider container */
        min-width: 600px !important;
    }

    .hostquix-dropdown .mega-menu-hostquix {
        width: 100% !important;
        padding: 20px !important;
    }

    /* Restore grid layout for menu items */
    .mega-menu-hostquix .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* CART REDESIGN - PILL STYLE */
.nav-cart-item {
    margin-left: 15px;
}

.nav-cart-item .nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 8px 20px !important;
    background: transparent !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important;
    color: #4a5568 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    width: auto !important;
    /* Reset fixed width */
    height: auto !important;
    /* Reset fixed height */
    transition: all 0.3s ease;
}

.nav-cart-item .nav-link:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.cart-icon-wrapper {
    position: relative;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.cart-icon-wrapper i {
    font-size: 16px;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

.nav-cart-item .nav-link:hover .cart-badge {
    border-color: var(--primary-color);
}

.cart-text {
    display: inline-block;
}

/* APPLE/RETINA SMOOTHING */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* HERO ANIMATIONS */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.hero-animate-float {
    animation: float 4s ease-in-out infinite;
}

.hero-animate-fade-down {
    animation: fadeInDown 1s ease-out;
}

.hero-animate-fade-up {
    animation: fadeInUp 1s ease-out 0.5s both;
    /* 0.5s delay */
}

/* Fix Overlap Visibility */
.hostquix-campaigns .section-heading h2,
.hostquix-campaigns .section-heading p {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* SEARCH INPUT ANIMATIONS */
.domain-search-hero {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 2px solid transparent;
}

.domain-search-hero:focus-within {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5);
}

.domain-search-hero input {
    transition: all 0.3s ease;
}

.domain-search-hero button {
    transition: all 0.3s ease;
    transform: scale(1);
}

.domain-search-hero button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.6) !important;
}

/* Typing Effect Placeholder (Optional css-only trick) */
.domain-search-hero input::placeholder {
    transition: opacity 0.3s ease;
}

.domain-search-hero input:focus::placeholder {
    opacity: 0.5;
    transform: translateX(10px);
}

/* ========================================
   RECOVERED LINUX HOSTING STYLES
   Targeting original .package structure
   ======================================== */
/* Main Hosting Package Container */
.hosting-package {
    padding: 60px 0;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Centers items if less than 4, but 4 will take full width */
}

/* Strict Flexbox Widths to prevent shifting */
.hosting-package .package {
    margin: 15px;
    flex: 0 0 calc(25% - 30px);
    /* 4 items per row minus margins */
    max-width: calc(25% - 30px);
    width: 100%;
}

@media (max-width: 1199px) {

    /* Smaller desktops/Laptops */
    .hosting-package .package {
        flex: 0 0 calc(33.333% - 30px);
        /* 3 per row if needed, or stick to 25% if space allows. Let's stick to 2 for safe responsiveness */
        max-width: calc(33.333% - 30px);
    }
}

@media (max-width: 991px) {

    /* Tablets */
    .hosting-package .package {
        flex: 0 0 calc(50% - 30px);
        /* 2 items per row */
        max-width: calc(50% - 30px);
    }
}

@media (max-width: 767px) {

    /* Mobile */
    .hosting-package .package {
        flex: 0 0 100%;
        /* 1 item per row */
        max-width: 100%;
        margin: 15px 0;
    }
}

.package {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 30px 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e2e8f0;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.package:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.package.featured {
    border: 2px solid #28a745;
    box-shadow: 0 10px 25px rgba(40, 167, 69, 0.15);
    transform: scale(1.05);
    z-index: 3;
}

.package.featured:hover {
    transform: scale(1.05) translateY(-5px);
}

.package .popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #28a745;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(40, 167, 69, 0.3);
}

.p-header {
    background: transparent;
    padding: 20px 0 10px 0;
}

.p-header h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #2d3748;
}

.p-header p {
    font-size: 13px;
    color: #718096;
    margin-bottom: 20px;
    height: 40px;
}

.p-price {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: none;
}

.p-price .badgex {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    margin-bottom: 10px;
}

.p-price .old-price {
    font-size: 14px;
    color: #a0aec0;
    text-decoration: line-through;
    margin-bottom: 5px;
}

.p-price .price {
    font-size: 32px;
    font-weight: 700;
    color: #2d3748;
    line-height: 1;
}

.p-price .price small {
    font-size: 14px;
    color: #718096;
    font-weight: 400;
}

.p-detail {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: center;
    flex-grow: 1;
}

.p-detail li {
    font-size: 14px;
    color: #4a5568;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e2e8f0;
    background: transparent !important;
    /* Ensure no stripe effect */
}


.package .p-price {
    background: transparent !important;
}

.p-detail li:last-child {
    border-bottom: none;
}

.p-detail li b {
    color: #2d3748;
    font-weight: 600;
}

.p-action {
    margin-top: auto;
}

.p-action .btn {
    width: 100%;
    padding: 12px;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 13px;
}

.btn-succes {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
}

.btn-succes:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* ========================================
   PREMIUM CORPORATE HERO STYLES for Linux Hosting
   ======================================== */
.linux-hero-corporate.page-banner {
    position: relative;
    padding: 180px 0 150px 0;
    /* Increased padding to prevent overlap */
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    overflow: hidden;
    color: #fff;
    min-height: 600px;
    /* Ensure minimum height */
    z-index: 1;
}

/* Overlay for texture/pattern */
.linux-hero-corporate.page-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 40%);
    z-index: 1;
}

.linux-hero-corporate .container {
    position: relative;
    z-index: 2;
}

/* Typography Enhancements */
.linux-hero-corporate h1 {
    font-size: 48px;
    font-weight: 800;
    /* Extra bold */
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: -1px;
}

.linux-hero-corporate p {
    font-size: 18px;
    color: #cbd5e1;
    /* Lighter text color */
    margin-bottom: 30px;
    line-height: 1.6;
    max-width: 600px;
    font-weight: 400;
}

/* List Items Premium Style */
.linux-hero-corporate ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.linux-hero-corporate ul li {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.linux-hero-corporate ul li:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.linux-hero-corporate ul li i {
    margin-right: 10px;
    color: #34d399;
    /* Green accent color */
    font-size: 16px;
}

/* Hide original background divs if they conflict */
.linux-hero-corporate .page-background {
    display: none;
}

.more-features-btn {
    display: block;
    margin-top: 15px;
    font-size: 13px;
    color: #4a5568;
    text-decoration: underline;
    font-weight: 600;
}

.more-features-btn:hover {
    color: #28a745;
    text-decoration: none;
    color: #28a745;
    text-decoration: none;
}

/* Make the pricing section container transparent to blend with the purple hero IF desired, 
   or just remove the white background. User said "paketlerin arka planı olmamalı". 
   This likely means the container holding the cards should be transparent. */
.linux-hero-sale+.section__product {
    background: transparent !important;
    padding-top: 50px;
    /* Adjust spacing */
    position: relative;
    z-index: 2;
    margin-top: -100px;
    /* Pull up to overlap with hero if that's the design, or just regular spacing */
    /* Let's Try pulling it up slightly to integrate */
}

/* Also ensure the cards themselves still look good */
.linux-hero-sale+.section__product .hosting-package .package {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Enhance shadow since bg is gone */
}

/* ========================================
   Linux Hosting Sale Hero (Purple Campaign)
   ======================================== */


/* ========================================
   Linux Hosting Sale Hero (Purple Campaign)
   ======================================== */
.linux-hero-sale.page-banner {
    position: relative;
    padding: 100px 0;
    min-height: 500px;
    background-color: #4c00b0;
    /* Deep Purple Base */
    background-image: url('../img/backgrounds/purple-sale-bg.png');
    background-size: cover;
    background-position: center;
    overflow: visible;
    /* NOTE: Changed to visible to allow 3D elements to pop out if needed, or use hidden if overflow issues occur */
    color: #fff;
    display: flex;
    align-items: center;
}

.linux-hero-sale .sub-title {
    color: #fbbf24;
    /* Amber/Yellow */
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.linux-hero-sale h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff;
}

.linux-hero-sale .text-3d {
    display: inline-block;
    color: #fff;
    /* Simulate 3D gold effect with text-shadow since we can't easily use the image inline effectively without markup changes, otherwise use image */
    /* Actually prompt asked for 3D text image? User said "Fırsat Yağmuru 3D typography".
       I generated an image for it. Let's see if we should replace text with image or style text.
       The TPL uses text. Let's stick to text for SEO unless user insists on image.
       I will style it to look tough. */
    text-shadow: 0 5px 0 #cccccc, 0 10px 10px rgba(0, 0, 0, 0.3);
}

/* Wait, I generated a 3D text image 'opportunity_text_3d_gold.png'. I should probably use that instead of text if I want it to look EXACTLY like the image.
   But the user said "yazılar kaymış" before, so text is editable.
   The prompt 3D text is "FIRSAT YAGMURU".
   I will use the text for now but if it looks weak, I will swap to image.
   Actually, looking at the user request image (screenshot), it's highly graphical.
   I'll style the text to be very big and bold first. */

.linux-hero-sale .campaign-desc {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    opacity: 0.9;
}

.linux-hero-sale .features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
    max-width: 600px;
}

.linux-hero-sale .feature-item {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.linux-hero-sale .feature-item i {
    color: #fbbf24;
    /* Yellow checkmarks */
    margin-right: 10px;
    font-size: 18px;
}

.linux-hero-sale .hero-visuals {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.linux-hero-sale .shield-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    z-index: 2;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.linux-hero-sale .sale-badge {
    position: absolute;
    right: 0;
    top: 20px;
    width: 280px;
    /* Big discount badge */
    z-index: 3;
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.4));
    /* Glow */
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes pulse-glow {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.4));
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 40px rgba(251, 191, 36, 0.6));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.4));
    }
}

.floating-anim {
    animation: float 4s ease-in-out infinite;
}

.pulse-anim {
    animation: pulse-glow 2s infinite;
}

/* Mobile & Tablet Responsive */
@media (max-width: 991px) {
    .linux-hero-sale {
        text-align: center;
        padding-top: 120px;
        /* Space for nav */
    }

    .linux-hero-sale .features-grid {
        margin: 0 auto;
        justify-content: center;
        text-align: left;
    }

    .linux-hero-sale .hero-visuals {
        height: 300px;
        margin-top: 40px;
    }

    .linux-hero-sale .shield-icon {
        left: 20%;
        width: 120px;
    }

    .linux-hero-sale .sale-badge {
        right: 10%;
        width: 200px;
    }
}

/* ========================================
   Windows Hosting Sale Hero
   ======================================== */
.windows-hero-sale.page-banner {
    position: relative;
    padding: 100px 0;
    min-height: 500px;
    background-color: #0078d7;
    background-image: url('../img/background/banner-windows-hosting.jpg');
    background-size: cover;
    background-position: center;
    overflow: visible;
    color: #fff;
    display: flex;
    align-items: center;
}

.windows-hero-sale .sub-title {
    color: #fbbf24;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.windows-hero-sale h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff;
}

.windows-hero-sale .text-3d {
    display: inline-block;
    color: #fff;
    text-shadow: 0 5px 0 #cccccc, 0 10px 10px rgba(0, 0, 0, 0.3);
}

.windows-hero-sale .campaign-desc {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    opacity: 0.9;
}

.windows-hero-sale .features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
    max-width: 600px;
}

.windows-hero-sale .feature-item {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.windows-hero-sale .feature-item i {
    color: #fbbf24;
    margin-right: 10px;
    font-size: 18px;
}

.windows-hero-sale .hero-visuals {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.windows-hero-sale .shield-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    z-index: 2;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.windows-hero-sale .sale-badge {
    position: absolute;
    right: 0;
    top: 20px;
    width: 280px;
    z-index: 3;
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.4));
    animation: pulse-glow 2s infinite;
}

.windows-hero-sale+.section__product {
    background: transparent !important;
    padding-top: 50px;
    position: relative;
    z-index: 2;
    margin-top: -100px;
}

.windows-hero-sale+.section__product .hosting-package .package {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 991px) {
    .windows-hero-sale {
        text-align: center;
        padding-top: 120px;
    }

    .windows-hero-sale .features-grid {
        margin: 0 auto;
        justify-content: center;
        text-align: left;
    }

    .windows-hero-sale .hero-visuals {
        height: 300px;
        margin-top: 40px;
    }

    .windows-hero-sale .shield-icon {
        left: 20%;
        width: 120px;
    }

    .windows-hero-sale .sale-badge {
        right: 10%;
        width: 200px;
    }
}

/* ========================================
   WordPress Hosting Sale Hero
   ======================================== */
.wordpress-hero-sale.page-banner {
    position: relative;
    padding: 100px 0;
    min-height: 500px;
    background-color: #21759b;
    background-image: url('../img/background/bg-wordpress.jpg');
    background-size: cover;
    background-position: center;
    overflow: visible;
    color: #fff;
    display: flex;
    align-items: center;
}

.wordpress-hero-sale .sub-title {
    color: #fbbf24;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.wordpress-hero-sale h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff;
}

.wordpress-hero-sale .text-3d {
    display: inline-block;
    color: #fff;
    text-shadow: 0 5px 0 #cccccc, 0 10px 10px rgba(0, 0, 0, 0.3);
}

.wordpress-hero-sale .campaign-desc {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    opacity: 0.9;
}

.wordpress-hero-sale .features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
    max-width: 600px;
}

.wordpress-hero-sale .feature-item {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.wordpress-hero-sale .feature-item i {
    color: #fbbf24;
    margin-right: 10px;
    font-size: 18px;
}

.wordpress-hero-sale .hero-visuals {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wordpress-hero-sale .shield-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    z-index: 2;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.wordpress-hero-sale .sale-badge {
    position: absolute;
    right: 0;
    top: 20px;
    width: 280px;
    z-index: 3;
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.4));
    animation: pulse-glow 2s infinite;
}

.wordpress-hero-sale+.section__product {
    background: transparent !important;
    padding-top: 50px;
    position: relative;
    z-index: 2;
    margin-top: -100px;
}

.wordpress-hero-sale+.section__product .hosting-package .package {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 991px) {
    .wordpress-hero-sale {
        text-align: center;
        padding-top: 120px;
    }

    .wordpress-hero-sale .features-grid {
        margin: 0 auto;
        justify-content: center;
        text-align: left;
    }

    .wordpress-hero-sale .hero-visuals {
        height: 300px;
        margin-top: 40px;
    }

    .wordpress-hero-sale .shield-icon {
        left: 20%;
        width: 120px;
    }

    .wordpress-hero-sale .sale-badge {
        right: 10%;
        width: 200px;
    }
}

/* ========================================
   Corporate Hosting Sale Hero
   ======================================== */
.corporate-hero-sale.page-banner {
    position: relative;
    padding: 100px 0;
    min-height: 500px;
    background-color: #333;
    background-image: url('../img/background/bg-hosting-8.jpg');
    background-size: cover;
    background-position: center;
    overflow: visible;
    color: #fff;
    display: flex;
    align-items: center;
}

.corporate-hero-sale .sub-title {
    color: #fbbf24;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.corporate-hero-sale h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff;
}

.corporate-hero-sale .text-3d {
    display: inline-block;
    color: #fff;
    text-shadow: 0 5px 0 #cccccc, 0 10px 10px rgba(0, 0, 0, 0.3);
}

.corporate-hero-sale .campaign-desc {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    opacity: 0.9;
}

.corporate-hero-sale .features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
    max-width: 600px;
}

.corporate-hero-sale .feature-item {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.corporate-hero-sale .feature-item i {
    color: #fbbf24;
    margin-right: 10px;
    font-size: 18px;
}

.corporate-hero-sale .hero-visuals {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.corporate-hero-sale .shield-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    z-index: 2;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.corporate-hero-sale .sale-badge {
    position: absolute;
    right: 0;
    top: 20px;
    width: 280px;
    z-index: 3;
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.4));
    animation: pulse-glow 2s infinite;
}

.corporate-hero-sale+.section__product {
    background: transparent !important;
    padding-top: 50px;
    position: relative;
    z-index: 2;
    margin-top: -100px;
}

.corporate-hero-sale+.section__product .hosting-package .package {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 991px) {
    .corporate-hero-sale {
        text-align: center;
        padding-top: 120px;
    }

    .corporate-hero-sale .features-grid {
        margin: 0 auto;
        justify-content: center;
        text-align: left;
    }

    .corporate-hero-sale .hero-visuals {
        height: 300px;
        margin-top: 40px;
    }

    .corporate-hero-sale .shield-icon {
        left: 20%;
        width: 120px;
    }

    .corporate-hero-sale .sale-badge {
        right: 10%;
        width: 200px;
    }
}

/* ========================================
   Reseller Hosting Sale Hero
   ======================================== */
.reseller-hero-sale.page-banner {
    position: relative;
    padding: 100px 0;
    min-height: 500px;
    background-color: #444;
    background-image: url('../img/background/banner-web-hosting.jpg');
    background-size: cover;
    background-position: center;
    overflow: visible;
    color: #fff;
    display: flex;
    align-items: center;
}

.reseller-hero-sale .sub-title {
    color: #fbbf24;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.reseller-hero-sale h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff;
}

.reseller-hero-sale .text-3d {
    display: inline-block;
    color: #fff;
    text-shadow: 0 5px 0 #cccccc, 0 10px 10px rgba(0, 0, 0, 0.3);
}

.reseller-hero-sale .campaign-desc {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    opacity: 0.9;
}

.reseller-hero-sale .features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
    max-width: 600px;
}

.reseller-hero-sale .feature-item {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.reseller-hero-sale .feature-item i {
    color: #fbbf24;
    margin-right: 10px;
    font-size: 18px;
}

.reseller-hero-sale .hero-visuals {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reseller-hero-sale .shield-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    z-index: 2;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.reseller-hero-sale .sale-badge {
    position: absolute;
    right: 0;
    top: 20px;
    width: 280px;
    z-index: 3;
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.4));
    animation: pulse-glow 2s infinite;
}

.reseller-hero-sale+.section__product {
    background: transparent !important;
    padding-top: 50px;
    position: relative;
    z-index: 2;
    margin-top: -100px;
}

.reseller-hero-sale+.section__product .hosting-package .package {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 991px) {
    .reseller-hero-sale {
        text-align: center;
        padding-top: 120px;
    }

    .reseller-hero-sale .features-grid {
        margin: 0 auto;
        justify-content: center;
        text-align: left;
    }

    .reseller-hero-sale .hero-visuals {
        height: 300px;
        margin-top: 40px;
    }

    .reseller-hero-sale .shield-icon {
        left: 20%;
        width: 120px;
    }

    .reseller-hero-sale .sale-badge {
        right: 10%;
        width: 200px;
    }
}

/* ========================================
   VDS Server Sale Hero
   ======================================== */
.vds-hero-sale.page-banner {
    position: relative;
    padding: 100px 0;
    min-height: 500px;
    background-color: #2c3e50;
    background-image: url('../img/background/banner-vds.jpg');
    background-size: cover;
    background-position: center;
    overflow: visible;
    color: #fff;
    display: flex;
    align-items: center;
}

.vds-hero-sale .sub-title {
    color: #fbbf24;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.vds-hero-sale h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff;
}

.vds-hero-sale .text-3d {
    display: inline-block;
    color: #fff;
    text-shadow: 0 5px 0 #cccccc, 0 10px 10px rgba(0, 0, 0, 0.3);
}

.vds-hero-sale .campaign-desc {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    opacity: 0.9;
}

.vds-hero-sale .features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
    max-width: 600px;
}

.vds-hero-sale .feature-item {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.vds-hero-sale .feature-item i {
    color: #fbbf24;
    margin-right: 10px;
    font-size: 18px;
}

.vds-hero-sale .hero-visuals {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vds-hero-sale .shield-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    z-index: 2;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.vds-hero-sale .sale-badge {
    position: absolute;
    right: 0;
    top: 20px;
    width: 280px;
    z-index: 3;
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.4));
    animation: pulse-glow 2s infinite;
}

.vds-hero-sale+.section__product {
    background: transparent !important;
    padding-top: 50px;
    position: relative;
    z-index: 2;
    margin-top: -100px;
}

.vds-hero-sale+.section__product .hosting-package .package {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 991px) {
    .vds-hero-sale {
        text-align: center;
        padding-top: 120px;
    }

    .vds-hero-sale .features-grid {
        margin: 0 auto;
        justify-content: center;
        text-align: left;
    }

    .vds-hero-sale .hero-visuals {
        height: 300px;
        margin-top: 40px;
    }

    .vds-hero-sale .shield-icon {
        left: 20%;
        width: 120px;
    }

    .vds-hero-sale .sale-badge {
        right: 10%;
        width: 200px;
    }
}

/* ========================================
   Dedicated Server Sale Hero
   ======================================== */
.dedicated-hero-sale.page-banner {
    position: relative;
    padding: 100px 0;
    min-height: 500px;
    background-color: #1a1a1a;
    background-image: url('../img/background/banner-dedicated.jpg');
    background-size: cover;
    background-position: center;
    overflow: visible;
    color: #fff;
    display: flex;
    align-items: center;
}

.dedicated-hero-sale .sub-title {
    color: #fbbf24;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.dedicated-hero-sale h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff;
}

.dedicated-hero-sale .text-3d {
    display: inline-block;
    color: #fff;
    text-shadow: 0 5px 0 #cccccc, 0 10px 10px rgba(0, 0, 0, 0.3);
}

.dedicated-hero-sale .campaign-desc {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    opacity: 0.9;
}

.dedicated-hero-sale .features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
    max-width: 600px;
}

.dedicated-hero-sale .feature-item {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.dedicated-hero-sale .feature-item i {
    color: #fbbf24;
    margin-right: 10px;
    font-size: 18px;
}

.dedicated-hero-sale .hero-visuals {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dedicated-hero-sale .shield-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    z-index: 2;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.dedicated-hero-sale .sale-badge {
    position: absolute;
    right: 0;
    top: 20px;
    width: 280px;
    z-index: 3;
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.4));
    animation: pulse-glow 2s infinite;
}

.dedicated-hero-sale+.section__product {
    background: transparent !important;
    padding-top: 50px;
    position: relative;
    z-index: 2;
    margin-top: -100px;
}

.dedicated-hero-sale+.section__product .hosting-package .package {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 991px) {
    .dedicated-hero-sale {
        text-align: center;
        padding-top: 120px;
    }

    .dedicated-hero-sale .features-grid {
        margin: 0 auto;
        justify-content: center;
        text-align: left;
    }

    .dedicated-hero-sale .hero-visuals {
        height: 300px;
        margin-top: 40px;
    }

    .dedicated-hero-sale .shield-icon {
        left: 20%;
        width: 120px;
    }

    .dedicated-hero-sale .sale-badge {
        right: 10%;
        width: 200px;
    }
}

/* ========================================
   Germany Dedicated Server Sale Hero
   ======================================== */
.germany-dedicated-hero-sale.page-banner {
    position: relative;
    padding: 100px 0;
    min-height: 500px;
    background-color: #1a1a1a;
    background-image: url('../img/background/banner-dedicated.jpg');
    background-size: cover;
    background-position: center;
    overflow: visible;
    color: #fff;
    display: flex;
    align-items: center;
}

.germany-dedicated-hero-sale .sub-title {
    color: #fbbf24;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.germany-dedicated-hero-sale h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff;
}

.germany-dedicated-hero-sale .text-3d {
    display: inline-block;
    color: #fff;
    text-shadow: 0 5px 0 #cccccc, 0 10px 10px rgba(0, 0, 0, 0.3);
}

.germany-dedicated-hero-sale .campaign-desc {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    opacity: 0.9;
}

.germany-dedicated-hero-sale .features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
    max-width: 600px;
}

.germany-dedicated-hero-sale .feature-item {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.germany-dedicated-hero-sale .feature-item i {
    color: #fbbf24;
    margin-right: 10px;
    font-size: 18px;
}

.germany-dedicated-hero-sale .hero-visuals {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.germany-dedicated-hero-sale .shield-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    z-index: 2;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.germany-dedicated-hero-sale .sale-badge {
    position: absolute;
    right: 0;
    top: 20px;
    width: 280px;
    z-index: 3;
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.4));
    animation: pulse-glow 2s infinite;
}

.germany-dedicated-hero-sale+.section__product {
    background: transparent !important;
    padding-top: 50px;
    position: relative;
    z-index: 2;
    margin-top: -100px;
}

.germany-dedicated-hero-sale+.section__product .hosting-package .package {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 991px) {
    .germany-dedicated-hero-sale {
        text-align: center;
        padding-top: 120px;
    }

    .germany-dedicated-hero-sale .features-grid {
        margin: 0 auto;
        justify-content: center;
        text-align: left;
    }

    .germany-dedicated-hero-sale .hero-visuals {
        height: 300px;
        margin-top: 40px;
    }

    .germany-dedicated-hero-sale .shield-icon {
        left: 20%;
        width: 120px;
    }

    .germany-dedicated-hero-sale .sale-badge {
        right: 10%;
        width: 200px;
    }
}

/* ========================================
   Cookie Policy Hero
   ======================================== */
.cookie-hero-sale.page-banner {
    position: relative;
    padding: 80px 0;
    min-height: 400px;
    background-color: #2c3e50;
    background-image: url('../img/background/banner-domain.jpg');
    background-size: cover;
    background-position: center;
    overflow: visible;
    color: #fff;
    display: flex;
    align-items: center;
}

.cookie-hero-sale .sub-title {
    color: #fbbf24;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.cookie-hero-sale h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff;
}

.cookie-hero-sale .text-3d {
    display: inline-block;
    color: #fff;
    text-shadow: 0 5px 0 #cccccc, 0 10px 10px rgba(0, 0, 0, 0.3);
}

.cookie-hero-sale .campaign-desc {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    opacity: 0.9;
    max-width: 600px;
}

.cookie-hero-sale .hero-visuals {
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-hero-sale .sale-badge {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    z-index: 3;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
}

@media (max-width: 991px) {
    .cookie-hero-sale {
        text-align: center;
        padding-top: 100px;
    }

    .cookie-hero-sale .hero-visuals {
        height: 200px;
        margin-top: 30px;
    }

    .cookie-hero-sale .sale-badge {
        position: relative;
        right: auto;
        top: auto;
    }
}

/* ========================================
   Infrastructure (Altyapimiz) Hero
   ======================================== */
.infrastructure-hero-sale.page-banner {
    position: relative;
    padding: 100px 0;
    min-height: 500px;
    background-color: #1a1a1a;
    background-image: url('../img/background/bg-ddos.jpg');
    background-size: cover;
    background-position: center;
    overflow: visible;
    color: #fff;
    display: flex;
    align-items: center;
}

.infrastructure-hero-sale .sub-title {
    color: #ef4444;
    /* Red accent for security/infra */
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.infrastructure-hero-sale h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff;
}

.infrastructure-hero-sale .text-3d {
    display: inline-block;
    color: #fff;
    text-shadow: 0 5px 0 #cccccc, 0 10px 10px rgba(0, 0, 0, 0.3);
}

.infrastructure-hero-sale .campaign-desc {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    opacity: 0.9;
}

.infrastructure-hero-sale .features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
    max-width: 600px;
}

.infrastructure-hero-sale .feature-item {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.infrastructure-hero-sale .feature-item i {
    color: #ef4444;
    margin-right: 10px;
    font-size: 18px;
}

.infrastructure-hero-sale .hero-visuals {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.infrastructure-hero-sale .shield-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200px;
    z-index: 2;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@media (max-width: 991px) {
    .infrastructure-hero-sale {
        text-align: center;
        padding-top: 120px;
    }

    .infrastructure-hero-sale .features-grid {
        margin: 0 auto;
        justify-content: center;
        text-align: left;
    }
}

/* ========================================
   Homepage Enhancements
   ======================================== */

/* Feature Cards (Why Hostquix) */
.feature-card-modern {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.feature-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(8, 135, 253, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.feature-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: #0887fd;
}

.feature-card-modern:hover::before {
    opacity: 1;
}

.feature-card-modern .icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(8, 135, 253, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #0887fd;
    font-size: 24px;
    transition: all 0.3s ease;
}

.feature-card-modern:hover .icon-wrapper {
    background: #0887fd;
    color: #fff;
    transform: rotateY(180deg);
}

.feature-card-modern h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1a202c;
}

.feature-card-modern p {
    color: #718096;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Stats Section Modern */
.stats-modern {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.stats-modern:hover {
    transform: translateY(-5px);
}

.stats-modern .counter {
    font-size: 3rem;
    font-weight: 800;
    background: -webkit-linear-gradient(45deg, #0887fd, #20b0ac);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
    display: block;
}

/* Customer Reviews */
.reviews-section {
    padding: 80px 0;
    background: #f8fafc;
}

.review-card {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin: 15px;
    position: relative;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.review-card:hover {
    border-bottom-color: #0887fd;
    transform: translateY(-5px);
}

.review-card .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.review-card .user-avatar {
    width: 50px;
    height: 50px;
    background: #e2e8f0;
    border-radius: 50%;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #4a5568;
    font-size: 18px;
}

.review-card .user-meta h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #2d3748;
}

.review-card .user-meta span {
    font-size: 12px;
    color: #718096;
}

.review-card .rating {
    color: #fbbf24;
    font-size: 14px;
    margin-bottom: 15px;
}

.review-card p {
    color: #4a5568;
    font-size: 14px;
    line-height: 1.6;
    font-style: italic;
}

/* Datacenter Ping Map */
.ping-section {
    padding: 80px 0;
    background: #1a202c;
    /* Dark theme for technical section */
    color: #fff;
    position: relative;
    overflow: hidden;
}

.ping-map-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    height: 450px;
    background: url('../img/turkey-map.png') no-repeat center center;
    background-size: contain;
    opacity: 0.8;
}

.ping-point {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #22c55e;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(34, 197, 94, 0.4);
    animation: pulse-green 2s infinite;
}

.ping-point:hover .ping-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-10px);
}

.ping-tooltip {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #1a202c;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.ping-point.istanbul {
    top: 25%;
    left: 18%;
}

.ping-point.ankara {
    top: 35%;
    left: 35%;
}

.ping-point.izmir {
    top: 45%;
    left: 15%;
}

.ping-point.bursa {
    top: 30%;
    left: 20%;
}

.ping-point.antalya {
    top: 65%;
    left: 30%;
}

.ping-point.adana {
    top: 60%;
    left: 55%;
}

.ping-point.trabzon {
    top: 20%;
    left: 65%;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.ping-list {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.ping-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ping-item:last-child {
    border-bottom: none;
}

.ping-item .city {
    font-weight: 600;
    display: flex;
    align-items: center;
}

.ping-item .city i {
    margin-right: 10px;
    color: #fbbf24;
}

/* Modern Solutions Section */
.solutions-modern {
    background: #fff;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.solutions-container {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #eef2f7;
    display: flex;
    min-height: 500px;
}

.solutions-tabs {
    flex: 0 0 300px;
    background: #f8fafc;
    padding: 30px;
    border-right: 1px solid #eef2f7;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.solution-tab-link {
    display: flex;
    align-items: center;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 12px;
    background: transparent;
    border: none;
    color: #4a5568;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.solution-tab-link:hover {
    background: #fff;
    color: #0887fd;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    transform: translateX(5px);
}

.solution-tab-link.active {
    background: linear-gradient(135deg, #0887fd 0%, #066ac9 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(8, 135, 253, 0.2);
}

.solution-tab-link i {
    font-size: 24px;
    margin-right: 15px;
    width: 30px;
    text-align: center;
}

.solutions-content {
    flex: 1;
    padding: 50px;
    position: relative;
    display: flex;
    align-items: center;
}

.solution-pane {
    display: none;
    width: 100%;
    animation: fadeIn 0.5s ease;
}

.solution-pane.active {
    display: block;
}

.solution-pane h3 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 20px;
    background: -webkit-linear-gradient(45deg, #1a202c, #2d3748);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.solution-pane p {
    font-size: 18px;
    line-height: 1.8;
    color: #718096;
    margin-bottom: 30px;
}

.solution-features li {
    margin-bottom: 15px;
    font-size: 16px;
    color: #4a5568;
    display: flex;
    align-items: center;
}

.solution-features li i {
    color: #22c55e;
    margin-right: 12px;
    background: rgba(34, 197, 94, 0.1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 991px) {
    .solutions-container {
        flex-direction: column;
    }

    .solutions-tabs {
        flex: none;
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 20px;
        white-space: nowrap;
        border-right: none;
        border-bottom: 1px solid #eef2f7;
    }

    .solution-tab-link {
        width: auto;
        margin-right: 15px;
        margin-bottom: 0;
    }
}

/* ========================================
   20. NARHOST HEADER REDESIGN
   ======================================== */

.top-bar-narhost {
    background-color: #E30613;
    color: #ffffff;
    font-size: 13px;
    /* Reverted to 13px */
    padding: 8px 0;
    /* Reverted padding */
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

.top-bar-narhost a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s;
}

.top-bar-narhost a:hover {
    opacity: 0.8;
    color: #ffffff;
}

.toplink-left,
.toplink-right {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.toplink-right {
    justify-content: flex-end;
}

.toplink-left li {
    margin-right: 20px;
    /* Reverted margin */
    display: inline-flex;
    align-items: center;
}

.toplink-right li {
    margin-left: 20px;
    /* Reverted margin */
    display: inline-flex;
    align-items: center;
}

.top-bar-narhost i {
    margin-right: 6px;
    /* Reverted margin */
    font-size: 13px;
    /* Reverted font size */
}

/* Navbar Adjustments */
.hostquix-navbar,
.header .navbar {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 0 !important;
    min-height: 80px;
}

.navbar-nav .nav-link {
    color: #333333 !important;
    font-weight: 600;
    /* Increased weight for visibility */
    font-size: 13px;
    /* Reduced from 15px/14px to 13px */
    padding: 24px 10px !important;
    /* Reduced side padding further */
    text-transform: uppercase;
    /* Optional: standard for corporate sites */
    letter-spacing: 0.3px;
}

.navbar-nav .nav-link:hover {
    color: #E30613 !important;
}

.navbar-brand img {
    max-height: 40px;
    width: auto;
}

/* Cart Button Update */
.custom-cart-btn {
    background: #ffffff !important;
    border-left: 0px solid var(--color-base-200);
    border-radius: 4px !important;
    padding: 6px 12px !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
    width: auto !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    margin-left: 10px;
    margin-top: 10px;
    /* Added margin-top */
}

/* ========================================
   21. LOGIN PAGE REDESIGN
   ======================================== */
.login-promo-card {
    background: linear-gradient(135deg, #E30613 0%, #B3050F 100%) !important;
    border: none !important;
}

.promo-icon-box {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    backdrop-filter: blur(5px);
}

.promo-price-badge {
    background: rgba(255, 255, 255, 0.95);
    color: #E30613;
    padding: 15px 20px;
    border-radius: 12px;
    display: inline-block;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.custom-cart-btn:hover {
    background: #f8f9fa !important;
    border-color: #d1d1d1 !important;
    color: #E30613 !important;
    transform: none !important;
}

.custom-cart-btn .badge {
    background: #E30613 !important;
    color: #fff !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    padding: 3px 6px !important;
    position: static !important;
    margin-left: 8px !important;
    box-shadow: none !important;
    border: none !important;
    min-width: auto !important;
    height: auto !important;
    line-height: normal !important;
}

.custom-cart-btn i {
    font-size: 16px !important;
    color: inherit !important;
    margin-right: 5px !important;
}