/* modern.css - Premium Corporate Design: Navy Blue & Gold */
/* Version 3.3 - Complete Premium Overhaul */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* Premium Corporate Color Palette */
    --navy-dark: #060F1F;       /* Deepest Navy for backgrounds and text contrast */
    --navy: #0B1D3A;            /* Primary Navy */
    --navy-light: #142847;      /* Lighter Navy for cards/gradients */
    --navy-glow: rgba(11, 29, 58, 0.15);
    
    --gold: #C5A047;            /* Premium Classic Gold */
    --gold-light: #D4B565;      /* Warm soft gold for hover/gradients */
    --gold-dark: #A8862F;       /* Dark gold for active states/borders */
    --gold-glow: rgba(197, 160, 71, 0.25);
    
    --surface: #F4F6F9;         /* Very clean light gray for section backgrounds */
    --surface-card: #FFFFFF;    /* Clean white for cards */
    --text-primary: #111827;    /* Modern near-black for primary text */
    --text-secondary: #4B5563;  /* Sleek gray for body text */
    --text-muted: #9CA3AF;      /* Light gray for secondary metadata */
    
    /* Elegant Layered Shadows */
    --shadow-sm: 0 2px 8px rgba(11, 29, 58, 0.04);
    --shadow-md: 0 8px 20px -4px rgba(11, 29, 58, 0.08);
    --shadow-lg: 0 16px 32px -6px rgba(11, 29, 58, 0.12);
    --shadow-gold: 0 10px 25px -5px rgba(197, 160, 71, 0.35);
    
    /* Radius & Transitions */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== GLOBAL TYPOGRAPHY & RESET ===== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--text-primary) !important;
    background-color: var(--surface) !important;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.02em;
}

/* Fix Boxed Layout & Old Theme Side Blocks with high specificity */
body #wrapper-header, 
body #wrapper-navbar,
body .wrapper-navbar {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
}

body #wrapper-navbar::before, 
body #wrapper-navbar::after, 
body .wrapper-navbar::before,
body .wrapper-navbar::after,
body .header-container::before,
body .header-container::after,
body .vlogo-container,
body .bg-vlogo,
body .bg-vlogo::before {
    display: none !important;
    content: none !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}

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

/* ===== HEADER AREA ===== */
.header-container {
    background: var(--surface-card) !important;
    border-bottom: 1px solid rgba(11, 29, 58, 0.04) !important;
    padding: 24px 0 !important;
    box-shadow: var(--shadow-sm);
}

/* Top bar contact details */
.h-contact {
    position: relative;
    padding-left: 54px;
    min-height: 48px;
    line-height: 1.3;
    padding-top: 4px;
    text-align: left;
}

.h-contact span.colortheme {
    color: var(--gold) !important;
    font-size: 16px;
    width: 38px;
    height: 38px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(197, 160, 71, 0.08);
    border: 1px solid rgba(197, 160, 71, 0.15);
    border-radius: var(--radius-md);
    position: absolute;
    left: 0;
    top: 4px;
}

.h-contact .text-dark {
    font-weight: 700 !important;
    color: var(--navy) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.h-contact .text-secondary,
.h-contact .text-secondary a {
    color: var(--text-secondary) !important;
    font-size: 12px;
}

.h-contact .text-secondary a:hover {
    color: var(--gold) !important;
}

/* ===== NAVIGATION ===== */
#main-navi {
    background: rgba(11, 29, 58, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-md) !important;
    padding: 8px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: var(--shadow-md) !important;
    margin-top: -10px;
    z-index: 100;
}

.menu-styles.bg-theme {
    background: transparent !important;
}
/* Remove gold capsule/oval borders inside the navbar */
#main-navi .offcanvas-body,
#main-navi .navbar-collapse,
#main-navi ul,
#main-navi div:not(.dropdown-menu),
#primary-menu,
.menu-styles {
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
}

#primary-menu > li > a {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 10px 18px !important;
    border-radius: var(--radius-sm);
    transition: all var(--transition-smooth);
}

#primary-menu > li > a:hover {
    color: var(--gold) !important;
    background: rgba(197, 160, 71, 0.08) !important;
}

#primary-menu > li.current_page_item > a,
#primary-menu > li.current-menu-item > a {
    color: var(--gold) !important;
    background: rgba(197, 160, 71, 0.12) !important;
}

/* Dropdown styling */
#primary-menu .dropdown-menu {
    background: var(--navy-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 8px !important;
    margin-top: 12px !important;
}

@media (min-width: 768px) {
    #primary-menu .dropdown:hover .dropdown-menu {
        display: block !important;
        margin-top: 0 !important;
    }
}

#primary-menu .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: var(--radius-sm);
    padding: 10px 16px !important;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all var(--transition-smooth);
}

#primary-menu .dropdown-menu .dropdown-item:hover {
    background: rgba(197, 160, 71, 0.12) !important;
    color: var(--gold) !important;
    padding-left: 20px !important;
}

/* Mobile Toggler & Responsive Menu Styling */
.navbar-toggler {
    border: 1px solid rgba(197, 160, 71, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    padding: 6px 12px !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-smooth);
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(197, 160, 71, 0.25) !important;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

@media (max-width: 767.98px) {
    #navbarNavOffcanvas {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1050 !important;
        background: rgba(11, 29, 58, 0.85) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out !important;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    #navbarNavOffcanvas.show {
        visibility: visible !important;
        transform: translateX(0) !important;
    }
    #navbarNavOffcanvas .offcanvas-header {
        display: flex !important;
        padding: 15px 20px !important;
        background: transparent !important;
    }
    #navbarNavOffcanvas .offcanvas-body {
        flex-grow: 1 !important;
        overflow-y: auto !important;
        display: block !important;
        padding: 10px 0 !important;
    }
    #primary-menu {
        flex-direction: column !important;
        align-items: stretch !important;
        display: flex !important;
        padding-left: 0 !important;
        margin: 0 !important;
    }
    #primary-menu > li {
        width: 100% !important;
        display: block !important;
    }
    #primary-menu > li > a {
        display: block !important;
        width: 100% !important;
        padding: 12px 20px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    #primary-menu .dropdown-menu {
        position: static !important;
        background: rgba(255, 255, 255, 0.05) !important;
        margin-top: 0 !important;
        border: none !important;
        box-shadow: none !important;
        padding-left: 15px !important;
        display: none;
    }
    #primary-menu .dropdown-menu.show {
        display: block !important;
    }
}

/* ===== BANNER / HERO ===== */
.velocity-banner-title {
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    text-shadow: 0 4px 20px rgba(6, 15, 31, 0.6) !important;
}

/* ===== LAYANAN / SERVICES ===== */
.frame-layanan {
    margin-top: -60px !important;
    position: relative;
    z-index: 10;
}

.frame-layanan .col-sm-4 {
    padding: 15px !important; /* Proper spacing gap between service cards */
}

.card-layanan {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    transition: all var(--transition-smooth);
    background: var(--surface-card) !important;
    border: 1px solid rgba(11, 29, 58, 0.04) !important;
    overflow: hidden;
}

.card-layanan:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--gold-glow) !important;
}

.img-layanan {
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.img-layanan img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    object-fit: cover;
    width: 100%;
}

.card-layanan:hover .img-layanan img {
    transform: scale(1.08);
}

/* Modern Hover Card Icon overlay */
.icon-layanan {
    background: var(--navy) !important;
    color: var(--gold) !important;
    width: 60px;
    height: 60px;
    border-radius: 50% !important;
    margin: -30px auto 12px auto;
    position: relative;
    z-index: 5;
    box-shadow: var(--shadow-md);
    border: 4px solid var(--surface-card) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all var(--transition-smooth);
    padding: 0 !important; /* Fix clipped icon by resetting padding */
    overflow: visible !important; /* Fix clipped icon */
}

body .icon-layanan::before {
    display: none !important;
    content: none !important;
}

.card-layanan:hover .icon-layanan {
    background: var(--gold) !important;
    color: var(--navy) !important;
    transform: scale(1.1) rotate(360deg);
    box-shadow: var(--shadow-gold);
}

.title-layanan strong {
    font-weight: 700;
    color: var(--navy) !important;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.text-layanan {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ===== MODERN BUTTONS ===== */
.bg-theme,
.btn-primary,
a.bg-theme {
    background: var(--gold) !important;
    color: var(--navy) !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    padding: 12px 28px !important;
    border: 1px solid var(--gold) !important;
    transition: all var(--transition-smooth) !important;
    text-transform: uppercase;
    font-size: 0.8rem !important;
}

.bg-theme:hover,
.btn-primary:hover,
a.bg-theme:hover {
    background: var(--navy) !important;
    color: var(--gold) !important;
    border-color: var(--gold) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

/* ===== SEPARATORS ===== */
.separator-hitam, .separator-layanan {
    height: 3px;
    width: 45px;
    background-color: var(--gold) !important;
    margin: 12px auto !important;
    border-radius: var(--radius-full);
}

/* ===== GALLERY SECTION (HOME) ===== */
.bg-dark, .site-main .bg-dark, div.bg-dark {
    background-color: var(--navy-dark) !important;
    padding: 70px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.home-gallery .p-2 {
    padding: 0 12px !important; /* Spacing gap between gallery slider items */
}

.home-gallery .ratio {
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-smooth);
}

.home-gallery .ratio img {
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-smooth);
    filter: none !important; /* Ensure gallery images are in full color */
    opacity: 1 !important;
}

.home-gallery .ratio:hover {
    transform: scale(1.03) translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ===== BERITA / NEWS CARDS ===== */
.title-news + .separator-hitam {
    margin-bottom: 40px !important;
}

/* Spacing gaps for news section columns */
.text-start.row.justify-content-center .col-sm-4 {
    padding: 15px !important;
}

.card.w-100 {
    background: var(--surface-card) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition-smooth);
    border: 1px solid rgba(11, 29, 58, 0.04) !important;
    overflow: hidden;
    padding: 0 !important;
    margin-bottom: 30px;
}

.card.w-100:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md) !important;
}

.image-news {
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.image-news img {
    transition: transform 0.8s var(--transition-smooth);
    width: 100%;
}

.card.w-100:hover .image-news img {
    transform: scale(1.06);
}

.card.w-100 .py-3 {
    padding: 24px !important;
}

.card.w-100 .card-title a {
    color: var(--navy) !important;
    font-weight: 700;
    font-size: 1.1rem !important;
    text-decoration: none;
    transition: color var(--transition-smooth);
}

.card.w-100 .card-title a:hover {
    color: var(--gold) !important;
}

.card.w-100 .card-text {
    font-size: 0.88rem;
    color: var(--text-secondary) !important;
    line-height: 1.6;
    margin-bottom: 20px;
}

.card.w-100 a[title*="READ MORE"],
.card.w-100 a:last-child {
    color: var(--gold) !important;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all var(--transition-smooth);
}

.card.w-100 a[title*="READ MORE"]:hover,
.card.w-100 a:last-child:hover {
    color: var(--gold-light) !important;
    letter-spacing: 0.1em;
}

/* ===== CLIENT LOGOS ===== */
/* Only apply grayscale and opacity to client logos, which do NOT use .ratio wrapper */
.home-gallery .p-2:not(.ratio) img {
    filter: grayscale(100%) opacity(60%) !important;
    transition: all var(--transition-smooth) !important;
}

.home-gallery .p-2:not(.ratio) img:hover {
    filter: grayscale(0%) opacity(100%) !important;
    transform: scale(1.08) !important;
}

/* ===== FOOTER ===== */
#colophon {
    background: var(--navy-dark) !important;
    color: rgba(255, 255, 255, 0.7);
    border-top: none;
    position: relative;
    padding: 60px 0 0 0 !important;
}

#colophon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}

.velocity-footer {
    padding: 20px 0 50px 0 !important;
    background: transparent !important;
}

.widget h3.widget-title::before,
.widget-title::before {
    display: none !important;
    content: none !important;
}

.widget-title span {
    color: var(--gold) !important;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    padding-bottom: 8px;
    display: inline-block;
}

/* .widget-title span::after removed */

#colophon a {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none;
    transition: all var(--transition-smooth);
}

#colophon a:hover {
    color: var(--gold) !important;
    padding-left: 4px;
}

.site-info {
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px 0 !important;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4) !important;
}

.site-info a {
    color: var(--gold) !important;
    font-weight: 600;
    text-decoration: none;
}

.site-info a:hover {
    color: var(--gold-light) !important;
}

/* ===== WHATSAPP FLOATING ===== */
.whatsapp-floating a {
    background: #25D366 !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25) !important;
    border-radius: var(--radius-full) !important;
    padding: 12px 24px !important;
    font-weight: 700;
    transition: all var(--transition-smooth) !important;
}

.whatsapp-floating a:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--navy-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--navy-light);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* ===== SELECTION ===== */
::selection {
    background: var(--gold);
    color: var(--navy-dark);
}

/* ===== INFINITE LOGO MARQUEE SLIDER ===== */
.marquee-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 40px 0;
    background: var(--surface) !important;
}

.marquee-content {
    display: flex;
    width: max-content;
    animation: marqueeAnimation 25s linear infinite;
    background: var(--surface) !important;
}

.marquee-item {
    width: 280px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 100px;
    background: var(--surface) !important;
}

.marquee-item img {
    height: 70px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    mix-blend-mode: multiply !important;
    filter: grayscale(100%) opacity(60%) !important;
    transition: all var(--transition-smooth) !important;
}

.marquee-item img:hover {
    filter: grayscale(0%) opacity(100%) !important;
    transform: scale(1.08) !important;
}

/* Individual scaling to normalize different logo padding/aspect ratios */
.marquee-item img[src*="partner2.png"] {
    transform: scale(1.6) !important;
}
.marquee-item img[src*="partner2.png"]:hover {
    transform: scale(1.7) !important;
}

.marquee-item img[src*="partner3.png"] {
    transform: scale(1.6) !important;
}
.marquee-item img[src*="partner3.png"]:hover {
    transform: scale(1.7) !important;
}

.marquee-item img[src*="partner6.png"] {
    transform: scale(1.4) !important;
}
.marquee-item img[src*="partner6.png"]:hover {
    transform: scale(1.5) !important;
}

@keyframes marqueeAnimation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Slide precisely by 50% for seamless looping */
    }
}

/* ===== STATIC GALLERY CARDS ===== */
.card-gallery {
    overflow: hidden;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-smooth);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.card-gallery img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-gallery:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(197, 160, 71, 0.2);
}

.card-gallery:hover img {
    transform: scale(1.06) !important;
}