/*
 * Navy Blue Theme Override
 * Mengubah tema warna menjadi biru navy
 */

:root {
    --theme-color: #001f3f; /* Navy Blue */
    --theme-color-light: #003d7a;
    --theme-color-lighter: #0056b3;
    --navy-accent: #1e4d7b;
    --navy-dark: #001529;
}

/* Override warna utama */
body {
    color: #2c3e50;
}

/* Header */
.header01 {
    background: linear-gradient(135deg, #001f3f 0%, #003d7a 100%);
}

.header01.isSticky {
    background: #001f3f !important;
}

.mainMenu ul li a {
    color: #ffffff !important;
}

.mainMenu ul li a:hover,
.mainMenu ul li.current-menu-item a {
    color: #64b5f6 !important;
}

.mainMenu ul li.menu-item-has-children > a:after {
    color: #ffffff;
}

.mainMenu ul li .sub-menu {
    background: #003d7a;
}

.mainMenu ul li .sub-menu li a {
    color: #ffffff !important;
}

.mainMenu ul li .sub-menu li a:hover {
    background: #001f3f;
    color: #64b5f6 !important;
}

/* Buttons */
.dgBtn,
.dgBtn_two,
.dgBtn_three {
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}

.dgBtn:hover,
.dgBtn_two:hover,
.dgBtn_three:hover {
    background: var(--theme-color-light) !important;
    border-color: var(--theme-color-light) !important;
}

/* Hero Banner */
.heroBanner02 {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.bannerContent02 .sub-title {
    color: var(--theme-color);
    background: rgba(0, 31, 63, 0.1);
}

.bannerContent02 h2 {
    color: #001f3f;
}

/* Sections */
.aboutSection03,
.serviceSection03,
.whyChooseSection03 {
    background: #ffffff;
}

.secTitle h2,
.secTitle h3,
.secTitle h4 {
    color: #001f3f;
}

.secTitle .subTitle {
    color: var(--theme-color);
}

/* Service Items */
.sItem03 {
    border-color: #e3f2fd;
}

.sItem03:hover {
    background: linear-gradient(135deg, #001f3f 0%, #003d7a 100%);
}

.sItem03 h3,
.sItem03 p {
    transition: color 0.3s ease;
}

.sItem03:hover h3,
.sItem03:hover p {
    color: #ffffff !important;
}

.sItem03 .sIcon {
    background: #e3f2fd;
    color: var(--theme-color);
}

.sItem03:hover .sIcon {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Cards & Boxes */
.serviceItem02,
.projectItem02,
.blogPost01 {
    border-color: #e3f2fd;
}

.serviceItem02:hover,
.projectItem02:hover,
.blogPost01:hover {
    border-color: var(--theme-color);
    box-shadow: 0 10px 30px rgba(0, 31, 63, 0.2);
}

/* Footer */
.footer_01 {
    background: linear-gradient(135deg, #001529 0%, #001f3f 100%);
}

.footer_01.white {
    background: linear-gradient(135deg, #001529 0%, #001f3f 100%);
}

.widget_title {
    color: #ffffff !important;
}

.widget ul li a {
    color: #b3d9ff !important;
}

.widget ul li a:hover {
    color: #ffffff !important;
}

.copyright {
    border-color: rgba(255, 255, 255, 0.1);
    color: #b3d9ff;
}

.copyright p,
.copyright a {
    color: #b3d9ff !important;
}

.copyright a:hover {
    color: #ffffff !important;
}

/* CTA Section */
.ctaMail {
    background: var(--theme-color);
}

.ctaMail h2 {
    color: #ffffff;
}

.ctaMail input[type="email"] {
    border-color: rgba(255, 255, 255, 0.3);
}

.ctaMail button {
    background: var(--theme-color-light);
    color: #ffffff;
}

.ctaMail button:hover {
    background: #ffffff;
    color: var(--theme-color);
}

/* About Widget Logo */
.aboutWidget img {
    /* Removed filter to keep original logo colors visible on navy background */
    max-width: 100%;
    height: auto;
}

/* Back to Top */
#backtotop {
    background: var(--theme-color);
}

#backtotop:hover {
    background: var(--theme-color-light);
}

/* Preloader */
.preloader .la-ball-scale-multiple div {
    background-color: var(--theme-color);
}

/* Links */
a {
    color: var(--theme-color);
}

a:hover {
    color: var(--theme-color-light);
}

/* Icons */
.icon,
.sIcon,
.serviceIcon {
    color: var(--theme-color);
}

/* Counters & Stats */
.counter,
.funfact {
    color: var(--theme-color);
}

/* Forms */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--theme-color) !important;
}

/* Maps & Data */
.leaflet-popup-content-wrapper {
    border-color: var(--theme-color);
}

/* Tables */
table thead {
    background: var(--theme-color);
    color: #ffffff;
}

table tbody tr:hover {
    background: #e3f2fd;
}

/* Badges & Tags */
.badge,
.tag {
    background: var(--theme-color);
    color: #ffffff;
}

.badge:hover,
.tag:hover {
    background: var(--theme-color-light);
}

/* Pagination */
.pagination .page-item.active .page-link {
    background: var(--theme-color);
    border-color: var(--theme-color);
}

.pagination .page-link:hover {
    background: var(--theme-color-light);
    border-color: var(--theme-color-light);
    color: #ffffff;
}

/* Alerts & Messages */
.alert-info {
    background: #e3f2fd;
    border-color: var(--theme-color);
    color: #001f3f;
}

/* Progress Bars */
.progress-bar {
    background: var(--theme-color);
}

/* Menu Active State */
.menu-item.current-menu-item a,
.menu-item-has-children.current-menu-item a {
    color: #64b5f6 !important;
}

/* Additional Navy Theme Styling */
.bg-primary {
    background-color: var(--theme-color) !important;
}

.text-primary {
    color: var(--theme-color) !important;
}

.border-primary {
    border-color: var(--theme-color) !important;
}

/* Hover Effects */
.btn-primary {
    background: var(--theme-color);
    border-color: var(--theme-color);
}

.btn-primary:hover {
    background: var(--theme-color-light);
    border-color: var(--theme-color-light);
}

/* Select2 Styling */
.select2-container--default .select2-selection--single {
    border-color: var(--theme-color);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--theme-color);
}

/* Chart Colors */
.chart-color-primary {
    background-color: var(--theme-color);
}

/* Leaflet Map Controls */
.leaflet-control-layers,
.leaflet-bar {
    border-color: var(--theme-color);
}

.leaflet-control-layers-toggle {
    background-color: var(--theme-color);
}

/* Form Controls */
.form-control {
    border-color: #e3f2fd;
}

.form-control:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 31, 63, 0.25);
}

.form-control:hover {
    border-color: var(--theme-color-light);
}

/* Select2 Navy Theme */
.select2-container--default .select2-selection--multiple {
    border-color: #e3f2fd;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--theme-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--theme-color) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--theme-color-light);
}

/* Buttons Enhancement */
.dgBtn,
.dgBtn_two,
.dgBtn_three,
a.dgBtn,
a.dgBtn_two,
a.dgBtn_three,
button.dgBtn {
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.dgBtn:hover,
.dgBtn_two:hover,
.dgBtn_three:hover,
a.dgBtn:hover,
a.dgBtn_two:hover,
a.dgBtn_three:hover,
button.dgBtn:hover {
    background: var(--theme-color-light) !important;
    border-color: var(--theme-color-light) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 31, 63, 0.3);
}

/* Section Background - Blue and Gray Theme */
.aboutSection03 {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #e0e0e0 100%);
}

.aboutSection03 .subTitle {
    color: #1565c0;
    font-weight: 600;
}

.aboutSection03 .secDesc {
    color: #424242;
}

.aboutSection03 h2,
.aboutSection03 h3 {
    color: #1976d2;
}

.aboutSection03 p {
    color: #424242;
}

.aboutSection03 label {
    color: #1565c0;
    font-weight: 600;
}

.aboutSection03 .btn,
.aboutSection03 button[type="submit"] {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: #ffffff;
    border: none;
    transition: all 0.3s ease;
}

.aboutSection03 .btn:hover,
.aboutSection03 button[type="submit"]:hover {
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(25, 118, 210, 0.3);
}

.serviceSection03 {
    background: linear-gradient(135deg, #546e7a 0%, #78909c 50%, #90a4ae 100%);
}

.serviceSection03 h2,
.serviceSection03 h3,
.serviceSection03 p {
    color: #ffffff;
}

.serviceSection03 label {
    color: #ffffff;
}

.blogSection02 {
    background: linear-gradient(135deg, #cfd8dc 0%, #b0bec5 100%);
}

.blogSection02 .subTitle {
    color: #37474f;
    font-weight: 600;
}

.blogSection02 .secTitle {
    color: #263238;
}

.funfact.fact_01 {
    background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(30, 136, 229, 0.3);
    transition: all 0.3s ease;
}

.funfact.fact_01 h2,
.funfact.fact_01 h3 {
    color: #ffffff !important;
}

.funfact.fact_01:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(30, 136, 229, 0.4);
}

.funfact.fi03 {
    background: linear-gradient(135deg, #78909c 0%, #607d8b 100%);
}

.singleBlog {
    background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%);
    padding: 60px 0;
}

.pageBanner.blog_details_banner {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

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

/* Labels */
label {
    color: #001f3f;
    font-weight: 500;
}

/* Canvas Charts */
canvas {
    max-width: 100%;
}

/* Livewire Tables */
.livewire-tables thead {
    background: var(--theme-color);
    color: #ffffff;
}

.livewire-tables tbody tr:hover {
    background: #e3f2fd;
}

/* Login Link in Menu */
.mainMenu ul li:last-child a {
    background: rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 5px;
}

.mainMenu ul li:last-child a:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Marker Popup Styling */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 3px 14px rgba(0, 31, 63, 0.4);
}

.leaflet-popup-tip {
    background: #ffffff;
}

/* Smooth Transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

button,
a,
.dgBtn,
.form-control {
    transition: all 0.3s ease;
}

/* Additional Section Styling */
.heroBanner02 .bannerContent02 h2 {
    color: #001f3f !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.heroBanner02 .bannerContent02 .sub-title {
    background: var(--theme-color);
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 25px;
    display: inline-block;
}

/* Blue and Gray Section Enhancements */
.aboutSection03 .form-control {
    border: 2px solid #90caf9;
    background: #ffffff;
}

.aboutSection03 .form-control:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
}

.aboutSection03 #map {
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(25, 118, 210, 0.2);
    border: 3px solid #1976d2;
}

.aboutSection03 canvas {
    background: #ffffff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(25, 118, 210, 0.15);
}

.aboutSection03 table {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(25, 118, 210, 0.1);
}

.aboutSection03 table thead {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: #ffffff;
}

.aboutSection03 table tbody tr:hover {
    background: #e3f2fd;
}

.serviceSection03 #map {
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 3px solid #ffffff;
}

.blogSection02 .blogItem02 {
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(55, 71, 79, 0.15);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.blogSection02 .blogItem02:hover {
    box-shadow: 0 8px 30px rgba(55, 71, 79, 0.25);
    transform: translateY(-5px);
}

.testimonialSlider03 .testimonialItem03 {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(25, 118, 210, 0.2);
    transition: all 0.3s ease;
}

.testimonialSlider03 .testimonialItem03:hover {
    box-shadow: 0 8px 30px rgba(25, 118, 210, 0.3);
    transform: scale(1.02);
}

.singleBlog .sic_the_content {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.postPagination a {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1565c0;
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s ease;
    border: 2px solid #90caf9;
}

.postPagination a:hover {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: #ffffff;
    transform: translateX(5px);
    border-color: #1565c0;
}

.postPagination a.prev:hover {
    transform: translateX(-5px);
}

.socialShare a {
    background: #607d8b;
    color: #ffffff;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.socialShare a:hover {
    background: #1976d2;
    transform: translateY(-3px);
}

.aboutSection03 .select2-container--default .select2-selection--multiple {
    border: 2px solid #90caf9;
    background: #ffffff;
}

.aboutSection03 .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #1976d2;
}

.aboutSection03 .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    border-color: #1565c0;
    color: #ffffff;
}

/* F/* Keep original logo colors, add slight brightness for visibility on dark background */
    filter: brightness(1.2) contrast(1.1);
    opacity: 1mg {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .header01 {
        background: var(--theme-color);
    }
    
    .mainMenu {
        background: var(--theme-color);
    }
    
    .funfact.fact_01 {
        margin-bottom: 20px;
    }
    
    .aboutSection03 #map,
    .serviceSection03 #map {
        height: 400px;
    }
}

@media (max-width: 767px) {
    .aboutSection03,
    .serviceSection03,
    .blogSection02 {
        padding: 40px 0;
    }
    
    .funfact.fact_01 {
        padding: 20px;
    }
}