/* ================================================
   OCEAN THEME - 海洋風格
   ================================================ */

/* --- CSS Variables --- */
:root {
    --ocean-deep: #1a3d5c;
    --ocean-dark: #1f4a6e;
    --ocean-mid: #276a8e;
    --ocean-blue: #2180b0;
    --ocean-light: #2ca6d8;
    --ocean-cyan: #3cdfff;
    --ocean-foam: #d4f3ff;
    --ocean-white: #eef9ff;
    --ocean-sand: #f5e6c8;
    --ocean-coral: #ff6b6b;
    --ocean-gold: #ffd700;
    --ocean-glow: rgba(60, 223, 255, 0.3);
}

/* --- Global Ocean Background --- */
body {
    background: var(--ocean-deep) !important;
    color: #e8f0f5 !important;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(39, 106, 142, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(44, 166, 216, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(60, 223, 255, 0.08) 0%, transparent 40%),
        var(--ocean-deep);
    z-index: -2;
    pointer-events: none;
}

/* --- Bubbles Background Animation --- */
.ocean-bubbles {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.ocean-bubbles .bubble {
    position: absolute;
    bottom: -80px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(60, 223, 255, 0.25), rgba(60, 223, 255, 0.08));
    border: 1px solid rgba(60, 223, 255, 0.15);
    animation: bubbleRise linear infinite;
}

@keyframes bubbleRise {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 0.6; }
    100% {
        transform: translateY(-110vh) translateX(40px) scale(0.3);
        opacity: 0;
    }
}

/* --- Light Rays --- */
.ocean-rays {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    pointer-events: none;
    background:
        conic-gradient(from 200deg at 50% 0%, transparent 0deg, rgba(0, 212, 255, 0.03) 10deg, transparent 20deg,
        transparent 40deg, rgba(0, 212, 255, 0.02) 50deg, transparent 60deg,
        transparent 100deg, rgba(0, 212, 255, 0.03) 110deg, transparent 120deg,
        transparent 200deg, rgba(0, 212, 255, 0.02) 210deg, transparent 220deg,
        transparent 300deg, rgba(0, 212, 255, 0.03) 310deg, transparent 320deg);
    animation: rayRotate 30s linear infinite;
}

@keyframes rayRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Wave SVG Dividers --- */
.wave-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: -2px;
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: 60px;
}

.wave-divider-flip {
    transform: rotate(180deg);
    margin-bottom: -2px;
    margin-top: 0;
}

/* --- Top Bar --- */
.top-bar {
    background: linear-gradient(135deg, var(--ocean-dark) 0%, var(--ocean-mid) 100%) !important;
    border-bottom: 1px solid rgba(60, 223, 255, 0.2) !important;
}

.top-bar .top-info li i,
.top-bar .top-info a,
.top-bar .top-info p {
    color: #fff !important;
}

.top-bar .top-social .social-icon i {
    transition: all 0.3s ease;
}

.top-bar .top-social a[title="Facebook"] .social-icon i {
    color: #1877F2 !important;
}

.top-bar .top-social a[title="Mobile"] .social-icon i {
    color: #FF6B6B !important;
}

.top-bar .top-social a[title="Line"] .social-icon i {
    color: #06C755 !important;
}

.top-bar .top-social a:hover .social-icon i {
    filter: brightness(1.3);
    text-shadow: 0 0 12px currentColor;
}

/* --- Navbar --- */
.site-navigation {
    background: rgba(10, 50, 80, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(60, 223, 255, 0.25) !important;
    transition: all 0.4s ease;
}

.navbar-fixed {
    background: rgba(10, 50, 80, 0.98) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(60, 223, 255, 0.1) !important;
}

/* Mobile nav collapse */
.navbar-collapse {
    background: rgba(10, 50, 80, 0.98) !important;
}

@media (min-width: 992px) {
    .navbar-collapse {
        background: transparent !important;
    }
}

.navbar-toggler {
    border-color: rgba(0, 212, 255, 0.3) !important;
}

.navbar-light .navbar-toggler-icon,
.navbar-dark .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(0, 212, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

ul.navbar-nav > li > a,
.navbar-light ul.navbar-nav > li > a {
    color: #e0f4ff !important;
    position: relative;
    transition: color 0.3s ease;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    font-size: 1.05rem;
}

ul.navbar-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ocean-cyan), transparent);
    transition: all 0.4s ease;
    transform: translateX(-50%);
}

ul.navbar-nav > li:hover > a::after,
ul.navbar-nav > li.active > a::after {
    width: 80%;
}

ul.navbar-nav > li:hover > a,
ul.navbar-nav > li.active > a {
    color: var(--ocean-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.header-get-a-quote .btn-primary {
    background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-cyan)) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;
    transition: all 0.4s ease !important;
}

.header-get-a-quote .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 212, 255, 0.5) !important;
}

/* --- Header Two (white bg fix) --- */
.header-two {
    background: var(--ocean-dark) !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(60, 223, 255, 0.15);
}

.header-two .navbar-fixed {
    background-color: rgba(15, 42, 68, 0.95) !important;
}

/* --- Banner / Hero --- */
.banner-carousel .banner-carousel-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

/* Dark overlay */
.banner-carousel .banner-carousel-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg,
        rgba(8, 30, 52, 0.5) 0%,
        rgba(15, 42, 68, 0.25) 40%,
        rgba(8, 30, 52, 0.7) 100%) !important;
    z-index: 1;
    pointer-events: none;
}

/* Underwater caustic light effect */
.banner-carousel .banner-carousel-item::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse 80px 80px at 20% 30%, rgba(60, 223, 255, 0.12) 0%, transparent 100%),
        radial-gradient(ellipse 60px 100px at 50% 60%, rgba(60, 223, 255, 0.08) 0%, transparent 100%),
        radial-gradient(ellipse 90px 70px at 75% 25%, rgba(60, 223, 255, 0.1) 0%, transparent 100%),
        radial-gradient(ellipse 70px 90px at 85% 70%, rgba(60, 223, 255, 0.07) 0%, transparent 100%),
        radial-gradient(ellipse 50px 80px at 35% 80%, rgba(60, 223, 255, 0.09) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
    animation: causticShift 8s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

@keyframes causticShift {
    0% {
        background-position: 0% 0%, 10% 10%, 0% 0%, 5% 5%, 0% 0%;
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        background-position: 10% 5%, 0% 0%, 10% 10%, 0% 0%, 5% 5%;
        opacity: 0.7;
    }
}

/* Floating sparkles on banner */
.banner-sparkles {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.banner-sparkles .sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 6px 2px rgba(60, 223, 255, 0.5);
    animation: sparkleFloat linear infinite;
}

@keyframes sparkleFloat {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    15% {
        transform: scale(1);
        opacity: 1;
    }
    85% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-200px) translateX(30px) scale(0);
        opacity: 0;
    }
}

/* Wave at bottom of banner */
.banner-wave {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    z-index: 3;
    line-height: 0;
}

.banner-wave svg {
    display: block;
    width: 100%;
    height: 50px;
}

/* Shimmer light streak across banner */
.banner-carousel .banner-carousel-item .banner-shimmer {
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg,
        transparent 30%,
        rgba(60, 223, 255, 0.04) 45%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(60, 223, 255, 0.04) 55%,
        transparent 70%);
    z-index: 2;
    pointer-events: none;
    animation: shimmerSweep 6s ease-in-out infinite;
}

@keyframes shimmerSweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

.banner-carousel .banner-carousel-item .container,
.banner-carousel .banner-carousel-item .slider-content {
    position: relative;
    z-index: 2;
}

/* Override the original absolute positioning — use flexbox centering instead */
.box-slider-content {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: 100% !important;
    padding: 20px 0 !important;
}

.box-slider-text {
    background: rgba(15, 42, 68, 0.65) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(60, 223, 255, 0.2);
    border-radius: 12px !important;
    padding: 20px 30px !important;
    max-width: 650px;
}

.box-slide-title {
    color: #fff !important;
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.4), 0 2px 10px rgba(0, 0, 0, 0.5);
    animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    0% { text-shadow: 0 0 20px rgba(0, 212, 255, 0.3), 0 2px 10px rgba(0, 0, 0, 0.5); }
    100% { text-shadow: 0 0 40px rgba(0, 212, 255, 0.6), 0 0 80px rgba(0, 212, 255, 0.2), 0 2px 10px rgba(0, 0, 0, 0.5); }
}

.box-slide-sub-title {
    color: var(--ocean-cyan) !important;
}

.box-slide-description {
    color: rgba(255, 255, 255, 0.9) !important;
}

.slider.btn-primary {
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    transition: all 0.4s ease !important;
    position: relative;
    overflow: hidden;
}

.slider.btn-primary::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: btnShine 3s ease-in-out infinite;
}

@keyframes btnShine {
    0%, 100% { transform: translateX(-100%) rotate(45deg); }
    50% { transform: translateX(100%) rotate(45deg); }
}

/* --- Section Titles --- */
.section-sub-title {
    color: var(--ocean-cyan) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

.section-sub-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    margin: 12px auto 0;
    background: linear-gradient(90deg, transparent, var(--ocean-cyan), transparent);
    border-radius: 3px;
    animation: lineExpand 2s ease-in-out infinite alternate;
}

@keyframes lineExpand {
    0% { width: 40px; opacity: 0.5; }
    100% { width: 80px; opacity: 1; }
}

/* --- Ocean Cards (海味極品) --- */
.ocean-card {
    background: rgba(21, 53, 81, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(60, 223, 255, 0.2) !important;
    border-radius: 16px !important;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.ocean-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), transparent, rgba(0, 212, 255, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ocean-card:hover {
    transform: translateY(-10px);
    border-color: rgba(60, 223, 255, 0.45) !important;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(60, 223, 255, 0.2),
        inset 0 1px 0 rgba(60, 223, 255, 0.15);
}

.ocean-card:hover::before {
    opacity: 1;
}

.ocean-card .card-header {
    background: linear-gradient(135deg, rgba(60, 223, 255, 0.18), rgba(60, 223, 255, 0.06)) !important;
    border-bottom: 1px solid rgba(60, 223, 255, 0.15) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    padding: 16px;
}

.ocean-card .card-body {
    padding: 20px;
}

.ocean-card .card-title {
    color: #fff !important;
}

.ocean-card .card-text {
    color: rgba(212, 243, 255, 0.85) !important;
}

.ocean-card .ocean-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    display: block;
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* --- Product Grid / Shuffle --- */
.shuffle-btn-group {
    text-align: center;
    margin-bottom: 30px;
}

.shuffle-btn-group label {
    background: rgba(21, 53, 81, 0.7) !important;
    border: 1px solid rgba(60, 223, 255, 0.25) !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    margin: 4px !important;
    cursor: pointer;
    transition: all 0.4s ease !important;
    backdrop-filter: blur(5px);
}

.shuffle-btn-group label:hover {
    border-color: var(--ocean-cyan) !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

.shuffle-btn-group label.active {
    background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-light)) !important;
    border-color: var(--ocean-cyan) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
}

.project-img-container {
    border-radius: 12px !important;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 212, 255, 0.1);
    transition: all 0.5s ease;
}

.project-img-container:hover {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 212, 255, 0.15);
    transform: scale(1.03);
}

.project-img-container img {
    transition: all 0.6s ease !important;
}

.project-img-container:hover img {
    transform: scale(1.08);
    filter: brightness(1.1);
}

.project-item-info {
    background: linear-gradient(0deg, rgba(10, 22, 40, 0.95) 0%, rgba(10, 22, 40, 0.6) 50%, transparent 100%) !important;
}

.project-item-title {
    color: var(--ocean-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

/* --- Main Container Section --- */
.main-container {
    background: transparent !important;
}

/* --- Scroll Reveal Animation --- */
.ocean-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ocean-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ocean-reveal-delay-1 { transition-delay: 0.1s; }
.ocean-reveal-delay-2 { transition-delay: 0.2s; }
.ocean-reveal-delay-3 { transition-delay: 0.3s; }
.ocean-reveal-delay-4 { transition-delay: 0.4s; }

/* --- Map Section --- */
.action-style-box {
    background: rgba(21, 53, 81, 0.5) !important;
    border: 1px solid rgba(60, 223, 255, 0.15) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    backdrop-filter: blur(10px);
}

.map-responsive iframe {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
}

/* --- Footer --- */
footer.footer {
    background: linear-gradient(180deg, var(--ocean-deep) 0%, #132e47 100%) !important;
    position: relative;
}

footer.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ocean-cyan), transparent);
}

.footer .bg-overlay::before {
    background: transparent !important;
}

.footer-main {
    background: transparent !important;
}

.widget-title {
    color: var(--ocean-cyan) !important;
    position: relative;
    padding-bottom: 12px;
}

.widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--ocean-cyan);
}

.footer-about p,
.footer-about a,
.footer-social p,
.working-hours {
    color: rgba(212, 243, 255, 0.9) !important;
}

.footer-social a:hover {
    color: var(--ocean-cyan) !important;
}

.copyright {
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.08);
}

.copyright span,
.copyright a {
    color: rgba(212, 243, 255, 0.7) !important;
}

.copyright a:hover {
    color: var(--ocean-cyan) !important;
}

/* --- Floating Action Buttons (Line / Phone) --- */
.Line .btn,
.mobile .btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- Wave Animation at Bottom of Sections --- */
.ocean-wave-bottom {
    position: relative;
}

.ocean-wave-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30'%3E%3Cpath d='M0 15 Q300 0 600 15 T1200 15 V30 H0Z' fill='rgba(0,212,255,0.05)'/%3E%3C/svg%3E") repeat-x;
    animation: waveFlow 8s linear infinite;
}

@keyframes waveFlow {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Animated Wave Section Separator --- */
.wave-separator {
    position: relative;
    height: 80px;
    overflow: hidden;
}

.wave-separator .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: 50% 100%;
}

.wave-separator .wave1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath d='M0 40 Q150 0 300 40 T600 40 T900 40 T1200 40 V80 H0Z' fill='rgba(0,212,255,0.06)'/%3E%3C/svg%3E");
    animation: waveAnim 7s linear infinite;
}

.wave-separator .wave2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath d='M0 50 Q150 20 300 50 T600 50 T900 50 T1200 50 V80 H0Z' fill='rgba(0,212,255,0.04)'/%3E%3C/svg%3E");
    animation: waveAnim 11s linear infinite reverse;
}

.wave-separator .wave3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath d='M0 60 Q150 35 300 60 T600 60 T900 60 T1200 60 V80 H0Z' fill='rgba(0,212,255,0.03)'/%3E%3C/svg%3E");
    animation: waveAnim 15s linear infinite;
}

@keyframes waveAnim {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Particle Jellyfish / Floating Elements --- */
.ocean-jellyfish {
    position: fixed;
    z-index: -1;
    pointer-events: none;
    opacity: 0.15;
    animation: jellyfishFloat 20s ease-in-out infinite;
}

@keyframes jellyfishFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, -40px) rotate(5deg); }
    50% { transform: translate(-20px, -80px) rotate(-3deg); }
    75% { transform: translate(15px, -40px) rotate(2deg); }
}

/* --- Ripple Effect on Click --- */
.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.3);
    transform: scale(0);
    animation: rippleAnim 0.6s ease-out;
    pointer-events: none;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* --- Glowing Text Utility --- */
.ocean-glow {
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.2);
}

/* --- Banner Swimming Fish --- */
.banner-fish {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.banner-fish .fish {
    position: absolute;
    font-size: 1.6rem;
    opacity: 0;
    left: -60px;
    filter: drop-shadow(0 0 6px rgba(60, 223, 255, 0.4));
    animation: fishSwim linear infinite;
}

.banner-fish .fish.fish-reverse {
    left: auto;
    right: -60px;
    animation: fishSwimReverse linear infinite;
}

/* Left-to-right: flip fish to face right */
@keyframes fishSwim {
    0% {
        transform: scaleX(-1) translateX(0) translateY(0);
        opacity: 0;
    }
    5% { opacity: 0.7; }
    50% { transform: scaleX(-1) translateX(calc(-50vw - 30px)) translateY(-20px); }
    90% { opacity: 0.5; }
    100% {
        transform: scaleX(-1) translateX(calc(-100vw - 60px)) translateY(10px);
        opacity: 0;
    }
}

/* Right-to-left: fish naturally faces left, no flip */
@keyframes fishSwimReverse {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }
    5% { opacity: 0.6; }
    50% { transform: translateX(calc(-50vw - 30px)) translateY(-15px); }
    90% { opacity: 0.4; }
    100% {
        transform: translateX(calc(-100vw - 60px)) translateY(8px);
        opacity: 0;
    }
}

/* --- Banner Seaweed --- */
.banner-seaweed {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.banner-seaweed .seaweed {
    position: absolute;
    bottom: -5px;
    width: 20px;
    transform-origin: bottom center;
    animation: seaweedSway ease-in-out infinite;
}

.banner-seaweed .seaweed svg {
    width: 100%;
    height: 100%;
}

@keyframes seaweedSway {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

/* --- Banner Bubbles Rising --- */
.banner-bubbles-rise {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.banner-bubbles-rise .b-bubble {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.35), rgba(60, 223, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: bannerBubbleRise linear infinite;
}

@keyframes bannerBubbleRise {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    8% { opacity: 0.8; }
    50% {
        transform: translateY(-45vh) translateX(15px) scale(0.9);
    }
    80% { opacity: 0.4; }
    100% {
        transform: translateY(-90vh) translateX(-10px) scale(0.5);
        opacity: 0;
    }
}

/* --- Banner Light Pillar (underwater god rays) --- */
.banner-lightrays {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.banner-lightrays .ray {
    position: absolute;
    top: -20%;
    width: 80px;
    height: 130%;
    background: linear-gradient(180deg,
        rgba(60, 223, 255, 0.08) 0%,
        rgba(60, 223, 255, 0.03) 40%,
        transparent 100%);
    transform-origin: top center;
    animation: lightRaySway ease-in-out infinite;
}

@keyframes lightRaySway {
    0%, 100% { transform: skewX(-5deg) scaleX(1); opacity: 0.5; }
    50% { transform: skewX(5deg) scaleX(1.3); opacity: 1; }
}

/* --- Responsive --- */

/* Tablet */
@media (max-width: 991px) {
    .box-slider-text {
        padding: 16px 20px !important;
    }

    .box-slide-sub-title {
        font-size: 26px !important;
        margin: 6px 0 8px !important;
    }

    .box-slide-description {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .slider.btn-primary {
        padding: 8px 18px !important;
        font-size: 13px !important;
    }

    .header-two {
        padding: 8px 0 !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .box-slider-text {
        padding: 12px 16px !important;
        border-radius: 8px !important;
    }

    .box-slide-title {
        font-size: 13px !important;
        margin: 0 0 2px !important;
    }

    .box-slide-sub-title {
        font-size: 18px !important;
        margin: 4px 0 6px !important;
    }

    .box-slide-description {
        font-size: 12px !important;
        line-height: 17px !important;
        margin-bottom: 4px !important;
    }

    .slider.btn-primary {
        padding: 6px 14px !important;
        font-size: 11px !important;
        border-radius: 30px !important;
        margin: 4px 2px 0 !important;
    }

    .ocean-card .ocean-icon {
        font-size: 1.8rem;
        margin-bottom: 5px;
    }

    .ocean-card .card-header {
        padding: 10px;
        font-size: 0.95rem;
    }

    .ocean-card .card-body {
        padding: 12px;
    }

    .section-sub-title {
        font-size: 20px !important;
    }

    .wave-separator {
        height: 40px;
    }

    .action-style-box {
        padding: 15px !important;
        border-radius: 10px !important;
    }

    .shuffle-btn-group label {
        padding: 5px 14px !important;
        font-size: 13px !important;
        margin: 3px !important;
    }

    .project-img-container:hover {
        transform: none;
    }
}

/* Small Mobile */
@media (max-width: 575px) {
    .banner-carousel .banner-carousel-item {
        height: 280px !important;
    }

    .box-slide-title {
        font-size: 12px !important;
    }

    .box-slide-sub-title {
        font-size: 15px !important;
        margin: 2px 0 4px !important;
    }

    .box-slide-description {
        display: none !important;
    }

    .slider.btn-primary {
        padding: 5px 12px !important;
        font-size: 10px !important;
    }

    .box-slider-text {
        padding: 10px 14px !important;
    }
}

/* Bubble / Ray performance on mobile */
@media (max-width: 768px) {
    .ocean-bubbles .bubble {
        display: none;
    }

    .ocean-bubbles .bubble:nth-child(-n+5) {
        display: block;
    }

    .ocean-rays {
        display: none;
    }

    .banner-fish,
    .banner-lightrays,
    .banner-seaweed,
    .banner-bubbles-rise,
    .banner-sparkles,
    .banner-shimmer {
        display: none;
    }
}

/* --- Logo Glow --- */
.logo img {
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.3));
    transition: filter 0.3s ease;
}

.logo img:hover {
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.6));
}

/* --- General btn-primary Override --- */
.btn-primary {
    background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-light)) !important;
    border: none !important;
    transition: all 0.4s ease !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan)) !important;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.4) !important;
    transform: translateY(-2px);
}

/* --- Card General --- */
.card {
    background: rgba(21, 53, 81, 0.65) !important;
    border: 1px solid rgba(60, 223, 255, 0.15) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px);
    transition: all 0.5s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3) !important;
}

.card .card-title {
    color: #fff !important;
}

.card .card-text {
    color: rgba(212, 243, 255, 0.85) !important;
}

/* --- Headings Override --- */
h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
}

/* --- Carousel Controls --- */
.carousel-control {
    background: rgba(0, 212, 255, 0.15) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    color: var(--ocean-cyan) !important;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease !important;
}

.carousel-control:hover {
    background: rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--ocean-deep);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--ocean-mid), var(--ocean-blue));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(var(--ocean-blue), var(--ocean-cyan));
}

/* --- Selection --- */
::selection {
    background: rgba(0, 212, 255, 0.3);
    color: #fff;
}