/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Color scheme overrides to match onerpsystems.co.ke */
:root {
    --primary-color: #03a9f4;
    --primary-dark: #0288d1;
    --secondary-color: #ff9800;
}

/* Header and Hero section color matching */
.header {
    background-color: #03a9f4 !important;
}

.banner {
    background-color: #03a9f4 !important;
}

.banner.bg1 {
    background: linear-gradient(135deg, #03a9f4 0%, #0288d1 100%) !important;
}

/* Hero text visibility fixes */
.banner h1,
.banner h2,
.banner h3,
.banner h4,
.banner h5,
.banner h6 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.banner p,
.banner ul li,
.banner .list-check li {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.banner-heading {
    color: #ffffff !important;
}

/* Enhanced top header styling */
.topbar {
    background: linear-gradient(135deg, #0288d1 0%, #03a9f4 100%) !important;
    border-bottom: 2px solid #0277bd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.top-bar-support li a {
    color: #ffffff !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.top-bar-support li a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.top-bar-support li a i {
    color: #ffffff !important;
}

/* Enhanced logo bar */
.logo-bar {
    background: #ffffff !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid #e1e8ed;
    padding: 15px 0;
}

.main-logo img {
    max-height: 50px;
    transition: transform 0.3s ease;
}

.main-logo:hover img {
    transform: scale(1.05);
}

/* Enhanced main header */
.header {
    background: linear-gradient(135deg, #03a9f4 0%, #0288d1 100%) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-bottom: 3px solid #0277bd;
}

/* Enhanced navigation */
.mainmenu > li > a {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 15px;
    padding: 15px 20px;
    transition: all 0.3s ease;
    position: relative;
}

.mainmenu > li > a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.mainmenu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.mainmenu > li > a:hover::after {
    width: 80%;
}

/* Dropdown enhancements */
.rn-megamenu {
    background: #ffffff !important;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid #e1e8ed;
    margin-top: 10px;
}

.rn-megamenu .submenu a {
    color: #333333 !important;
    font-weight: 500;
    padding: 10px 15px;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.rn-megamenu .submenu a:hover {
    background: #03a9f4;
    color: #ffffff !important;
    transform: translateX(5px);
}

.rn-megamenu .submenu .heading-content {
    color: #666666 !important;
    font-size: 13px;
    font-weight: 400;
}

/* Enhanced account dropdown */
.top-bar-dropdown button {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    padding: 8px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.top-bar-dropdown button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile menu button enhancement */
.hamberger-button {
    background: #ffffff !important;
    color: #03a9f4 !important;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 20px;
    transition: all 0.3s ease;
}

.hamberger-button:hover {
    background: #f0f0f0 !important;
    transform: scale(1.1);
}

/* Search button enhancement */
.form-domain-search-button {
    background: #03a9f4 !important;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.form-domain-search-button:hover {
    background: #0288d1 !important;
    transform: scale(1.1);
}

/* Enhanced domain search form */
.form-domain-search-header {
    background: #ffffff !important;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 5px;
    margin-right: 15px;
}

.form-domain-search-header .input {
    border: none;
    background: transparent;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 25px;
}

.form-domain-search-header .input:focus {
    outline: none;
    box-shadow: none;
}

.form-domain-search-header .submit {
    background: linear-gradient(135deg, #03a9f4 0%, #0288d1 100%) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 25px;
    padding: 12px 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.form-domain-search-header .submit:hover {
    background: linear-gradient(135deg, #0288d1 0%, #0277bd 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(3, 169, 244, 0.4);
}

/* Domain TLD list styling */
.domain-tld {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}

.domain-tld li {
    background: rgba(3, 169, 244, 0.1);
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 12px;
    color: #03a9f4;
    border: 1px solid rgba(3, 169, 244, 0.3);
}

.domain-tld li .name {
    font-weight: 600;
    color: #03a9f4;
}

.domain-tld li .price {
    color: #0288d1;
    font-weight: 700;
}

/* Enhanced mobile menu */
.popup-mobile-menu {
    background: #ffffff !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}

.popup-mobile-menu-header {
    background: linear-gradient(135deg, #03a9f4 0%, #0288d1 100%) !important;
    padding: 20px;
    border-bottom: 2px solid #0277bd;
}

.popup-mobile-menu .logo img {
    max-height: 40px;
}

.popup-mobile-menu .close-button {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.popup-mobile-menu .close-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.popup-mobile-menu .mainmenu > li > a {
    color: #333333 !important;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
}

.popup-mobile-menu .mainmenu > li > a:hover {
    background: #03a9f4;
    color: #ffffff !important;
}

/* Notification badge enhancement */
.top-bar-dropdown.nofication-dropdown-menu button {
    position: relative;
}

.top-bar-dropdown.nofication-dropdown-menu button::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background: #ff5722;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

/* Currency dropdown enhancement */
.top-bar-dropdown:not(.nofication-dropdown-menu) button i {
    margin-right: 5px;
}

/* Language dropdown enhancement */
.language-dropdown-menu button i {
    margin-right: 5px;
}

/* Dropdown menu styling */
.dropdown-menu {
    background: #ffffff !important;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid #e1e8ed;
    margin-top: 10px;
}

.dropdown-menu li a {
    color: #333333 !important;
    padding: 12px 20px;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.dropdown-menu li a:hover {
    background: #03a9f4;
    color: #ffffff !important;
    transform: translateX(5px);
}

.dropdown-menu .headings {
    font-weight: 700;
    color: #03a9f4 !important;
}

.dropdown-menu .contents {
    color: #666666 !important;
    font-size: 13px;
}

/* Section header enhancements */
.section-header h2 {
    color: #03a9f4 !important;
    font-weight: 700;
    margin-bottom: 15px;
}

.section-header.center h2 {
    text-align: center;
}

.section-header p {
    color: #666666 !important;
    font-size: 16px;
    line-height: 1.6;
}

/* Service cards enhancement */
.services-design-one {
    background: #ffffff !important;
    border-radius: 10px;
    padding: 30px 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e1e8ed;
    text-align: center;
}

.services-design-one:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(3, 169, 244, 0.2);
    border-color: #03a9f4;
}

.services-design-one h3 {
    color: #03a9f4 !important;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 10px;
}

.services-design-one p {
    color: #666666 !important;
    font-size: 14px;
    line-height: 1.5;
}

/* Plan cards enhancement */
.plan-homepage {
    background: #ffffff !important;
    border-radius: 15px;
    padding: 30px 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid #e1e8ed;
    text-align: center;
}

.plan-homepage:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(3, 169, 244, 0.2);
    border-color: #03a9f4;
}

.plan-homepage.popular {
    border-color: #03a9f4;
    background: linear-gradient(135deg, rgba(3, 169, 244, 0.05) 0%, rgba(2, 136, 209, 0.05) 100%) !important;
}

.plan-homepage h3 {
    color: #03a9f4 !important;
    font-weight: 700;
    margin-bottom: 10px;
}

.plan-homepage h4 {
    color: #0288d1 !important;
    font-weight: 700;
    font-size: 28px;
    margin: 15px 0;
}

.plan-homepage h5 {
    color: #ff9800 !important;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Theme button enhancements */
.theme-btn.one {
    background: linear-gradient(135deg, #03a9f4 0%, #0288d1 100%) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    padding: 12px 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(3, 169, 244, 0.3);
}

.theme-btn.one:hover {
    background: linear-gradient(135deg, #0288d1 0%, #0277bd 100%) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(3, 169, 244, 0.4);
}

.theme-btn.two {
    background: transparent !important;
    color: #03a9f4 !important;
    border: 2px solid #03a9f4;
    border-radius: 30px;
    padding: 12px 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.theme-btn.two:hover {
    background: #03a9f4 !important;
    color: #ffffff !important;
    transform: translateY(-3px);
}

/* Section background enhancements */
.section-bg1 {
    background: linear-gradient(135deg, rgba(3, 169, 244, 0.05) 0%, rgba(2, 136, 209, 0.05) 100%) !important;
}

.section-bg2 {
    background: linear-gradient(135deg, #03a9f4 0%, #0288d1 100%) !important;
}

/* List check styling */
.list-check.one li {
    color: #ffffff !important;
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.list-check.one li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ffffff;
    font-weight: bold;
}

/* List check for white backgrounds */
.list-check li {
    color: #333333 !important;
    margin-bottom: 8px;
    position: relative;
    padding-left: 25px;
}

.list-check li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #03a9f4;
    font-weight: bold;
}

/* Additional color overrides for consistency */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #03a9f4 !important;
    border-color: #03a9f4 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #0288d1 !important;
    border-color: #0288d1 !important;
}

/* Links and accents */
a,
a:hover,
.text-primary {
    color: #03a9f4 !important;
}

/* Form controls focus states */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #03a9f4 !important;
    box-shadow: 0 0 0 0.2rem rgba(3, 169, 244, 0.25) !important;
}

/* Table active states */
.table .active > th,
.table .active > td {
    background-color: rgba(3, 169, 244, 0.1) !important;
}

/* Badge and label colors */
.badge-primary,
.label-primary {
    background-color: #03a9f4 !important;
}

/* Panel and card accents */
.panel-primary > .panel-heading,
.card-primary > .card-header {
    background-color: #03a9f4 !important;
    border-color: #03a9f4 !important;
}

/* Progress bars */
.progress-bar {
    background-color: #03a9f4 !important;
}

/* Dropdown menu active items */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: #03a9f4 !important;
}

/* Theme buttons matching main website */
.theme-btn.one {
    background-color: #03a9f4 !important;
    border-color: #03a9f4 !important;
}

.theme-btn.one:hover {
    background-color: #0288d1 !important;
    border-color: #0288d1 !important;
}

/* Footer color matching */
.main-footer {
    background-color: #03a9f4 !important;
    color: #fff !important;
}

.main-footer a {
    color: #fff !important;
}

.main-footer h4 {
    color: #fff !important;
}

.legal-bar {
    background-color: #0288d1 !important;
    color: #fff !important;
}