/********** Template CSS **********/
/********** Template CSS **********/

/*** CSS Variables ***/
:root {
    --seafoam-green: #014f86;
    --ocean-blue: #1692eb;
}

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.5s ease-out,
        visibility 0s linear 0.5s;
    z-index: 99999;
}

#spinner.show {
    transition:
        opacity 0.5s ease-out,
        visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/*** Button ***/
.btn {
    transition: 0.5s;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

/*** Navbar ***/
.sticky-top {
    top: -150px;
    transition: 0.5s;
}

.navbar {
    padding: 15px 0;
    font-family: "Candara", sans-serif;
    font-size: 18px;
}

.navbar .navbar-nav .nav-link {
    margin-left: 30px;
    padding: 0;
    outline: none;
    color: var(--bs-dark);
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--bs-primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item.active {
    color: var(--bs-white);
    background: var(--bs-primary);
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-left: 0;
        padding: 10px 0;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: 0.5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: 0.5s;
        opacity: 1;
    }
}

/*** Hero Header ***/
.hero-header {
    margin-top: -110px;
    padding-top: 110px;
    background: url(../img/hero-bg.jpg) top center no-repeat;
    background-size: cover;
}

.custom-title {
    font-size: 40px; /* غيّر الرقم حسب ما تريد */
}

.hero-header .breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}

.header-carousel {
    position: relative;
    padding: 45px 90px 45px 0;
}

.header-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: calc(50% + 45px);
    height: 100%;
    background: var(--bs-primary);
    z-index: -1;
}

.header-carousel .owl-dots {
    position: absolute;
    top: 50%;
    right: 38px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 5px 0;
    width: 15px;
    height: 15px;
    border: 2px solid var(--bs-white);
    transition: 0.5s;
}

.header-carousel .owl-dot.active {
    height: 30px;
    background: var(--bs-white);
}

.header-carousel img {
    clip-path: inset(0 round 50px 0 50px 0);
}

/*** About ***/
.about-section {
    position: relative;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.about-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.045);
}

.about-card .icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(13, 110, 253, 0.1);
    color: var(--bs-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.small-features h6 {
    font-weight: 700;
}

/* About photos */
.about-photo {
    position: relative;
    border-radius: 50px 0 50px 0;
    overflow: hidden;
    transform: translateZ(0);
    /* Limit height so video doesn't exceed the Our Story card */
    max-height: 520px;
    height: 500px;
}
.about-photo img,
.about-photo video {
    transition: transform 0.8s ease;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-photo:hover img,
.about-photo:hover video {
    transform: scale(1.03);
}

.about-photo video {
    clip-path: inset(0 round 50px 0 50px 0);
}

/* Responsive height limits for the about video */
@media (max-width: 991.98px) {
    .about-photo {
        max-height: 380px;
    }
}
@media (min-width: 1400px) {
    .about-photo {
        max-height: 580px;
    }
}

.about-photo--a {
    transform: rotate(-1.5deg);
}
.about-photo--b {
    transform: rotate(1.5deg);
    margin-top: 18px;
}

.about-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.25);
}
.about-badge span {
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Fish Experience Counter */
.experience-counter {
    position: relative;
}
.experience-counter::before {
    content: "";
    position: absolute;
    inset: -10px;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(0, 188, 212, 0.09),
            transparent 40%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(13, 110, 253, 0.09),
            transparent 40%
        );
    border-radius: 18px;
    z-index: -1;
}

.fish-counter {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.fish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34px, 46px));
    gap: 10px;
    justify-content: center;
}

.fish {
    display: grid;
    place-items: center;
}
.fish i {
    font-size: 30px;
    color: #9ad1f7; /* light sea blue */
    opacity: 0.35;
    transform: translateZ(0);
    transition:
        transform 0.4s ease,
        opacity 0.3s ease,
        color 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
}
.fish.filled i {
    color: #00bcd4; /* turquoise */
    opacity: 1;
}

.fish.splash i {
    animation: splash 0.6s ease-out both;
}
@keyframes splash {
    0% {
        transform: translateY(10px) scale(0.9);
        opacity: 0.6;
    }
    60% {
        transform: translateY(-6px) scale(1.05);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

.counter-label h3 {
    font-weight: 800;
    letter-spacing: 0.2px;
}

@media (max-width: 575.98px) {
    .fish-grid {
        gap: 8px;
    }
    .fish i {
        font-size: 26px;
    }
}
@media (min-width: 992px) {
    .fish-grid {
        gap: 14px;
    }
    .fish i {
        font-size: 36px;
    }
}

/* Fish Digits (23) Grid - enhanced precision */
.digit-grid {
    display: grid;
    /* 16 columns: 7 for "2" + 2 spacer + 7 for "3" for sharper edges */
    grid-template-columns: repeat(16, minmax(14px, 22px));
    grid-auto-rows: minmax(14px, 22px);
    gap: 6px;
    justify-content: center;
}
.fish-23 {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.fish-dot {
    display: grid;
    place-items: center;
}
.fish-dot i {
    font-size: 18px;
    color: #0d6efd; /* navy/sea blue */
    opacity: 0.15; /* faint for background dots */
    transition:
        transform 0.35s ease,
        opacity 0.35s ease,
        color 0.35s ease,
        filter 0.35s ease;
}
.fish-dot.active i {
    /* blue gradient hint via filter glow + color */
    color: #0b84ff;
    opacity: 0.98;
    filter: drop-shadow(0 1px 4px rgba(11, 132, 255, 0.3));
}

/* subtle swim motion */
.fish-dot.swim i {
    animation: swim 3.2s ease-in-out infinite;
}
@keyframes swim {
    0%,
    100% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(2px) translateY(-1px);
    }
}

/* gentle glow */
.fish-dot.glow i {
    animation: glow 2.8s ease-in-out infinite;
}
@keyframes glow {
    0%,
    100% {
        filter: drop-shadow(0 0 0 rgba(10, 170, 209, 0));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(10, 170, 209, 0.55));
    }
}

/* responsive sizes */
@media (max-width: 575.98px) {
    .digit-grid {
        gap: 5px;
        grid-template-columns: repeat(16, minmax(10px, 16px));
        grid-auto-rows: minmax(10px, 16px);
    }
    .fish-dot i {
        font-size: 14px;
    }
}
@media (min-width: 992px) {
    .digit-grid {
        gap: 8px;
        grid-template-columns: repeat(16, minmax(18px, 26px));
        grid-auto-rows: minmax(18px, 26px);
    }
    .fish-dot i {
        font-size: 22px;
    }
}

/* helper utility if needed for spacing rows */
.fish-row-gap {
    grid-column: 1 / -1;
    height: 0;
}
@media (max-width: 575.98px) {
    .digit-grid {
        gap: 5px;
        grid-template-columns: repeat(7, minmax(18px, 26px));
        grid-auto-rows: minmax(18px, 26px);
    }
    .fish-dot i {
        font-size: 18px;
    }
}
@media (min-width: 992px) {
    .digit-grid {
        gap: 8px;
        grid-template-columns: repeat(7, minmax(26px, 40px));
        grid-auto-rows: minmax(26px, 40px);
    }
    .fish-dot i {
        font-size: 26px;
    }
}

/*** Project ***/
.project-item img {
    transition: 0.5s;
}

.project-item:hover img {
    transform: scale(1.2);
}

.project-overlay {
    position: absolute;
    padding: 25px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    background: linear-gradient(rgba(255, 255, 255, 0.1) 50%, var(--bs-dark));
    z-index: 1;
}

/*** Service ***/
.service-item {
    position: relative;
    padding: 30px 25px;
    transition: 0.5s;
}

.service-item.bg-primary:hover {
    background: var(--bs-light) !important;
}

.service-item.bg-primary p {
    color: var(--bs-light);
    transition: 0.5s;
}

.service-item.bg-primary:hover p {
    color: var(--bs-secondary);
}

.service-item.bg-light:hover {
    background: var(--bs-primary) !important;
}

.service-item.bg-light p {
    color: var(--bs-secondary);
    transition: 0.5s;
}

.service-item.bg-light:hover p {
    color: var(--bs-light);
}

.service-item .service-img h3 {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 12px 7px 0;
}

.service-item.bg-primary .service-img h3 {
    background: var(--bs-primary);
    color: var(--bs-white);
    transition: 0.5s;
}

.service-item.bg-primary:hover .service-img h3 {
    background: var(--bs-light);
    color: var(--bs-dark);
}

.service-item.bg-light .service-img h3 {
    background: var(--bs-light);
    color: var(--bs-dark);
    transition: 0.5s;
}

.service-item.bg-light:hover .service-img h3 {
    background: var(--bs-primary);
    color: var(--bs-white);
}

/*** Our Team ***/
.team-item img {
    transition: 0.5s;
}

.team-item:hover img {
    transform: scale(1.2);
}

.team-overlay {
    position: absolute;
    padding: 30px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    background: linear-gradient(rgba(255, 255, 255, 0.1) 50%, var(--bs-dark));
    z-index: 1;
}

.team-overlay small {
    display: inline-block;
    padding: 3px 15px;
    color: var(--bs-white);
    background: var(--bs-primary);
}

/*** Testimonial ***/
.testimonial-img {
    position: relative;
    padding: 45px 0 45px 90px;
}

.testimonial-img::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: calc(50% + 45px);
    height: 100%;
    background: var(--bs-primary);
    z-index: -1;
}

.testimonial-text h5 {
    position: relative;
    padding-left: 45px;
}

.testimonial-text h5::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 40px;
    height: 2px;
    background: var(--bs-primary);
}

.testimonial-carousel .owl-dots {
    position: absolute;
    height: 17px;
    bottom: 0;
    right: 0;
    left: auto;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    width: 15px;
    height: 15px;
    background: var(--bs-white);
    border: 2px solid var(--bs-primary);
    transition: 0.5s;
}

.testimonial-carousel .owl-dot.active {
    width: 30px;
    background: var(--bs-primary);
}

@media (max-width: 768px) {
    .testimonial-carousel .owl-dots {
        left: 0;
        right: auto;
    }

    .testimonial-carousel .owl-dot {
        margin-right: 10px;
        margin-left: 0;
    }
}

/*** Newsletter ***/
.newsletter {
    background: url(../img/hero-bg.jpg) bottom right no-repeat;
    background-size: cover;
}

@media (min-width: 992px) {
    .newsletter .container {
        max-width: 100% !important;
    }

    .newsletter .newsletter-text {
        padding-right: calc(((100% - 960px) / 2) + 0.75rem);
    }
}

@media (min-width: 1200px) {
    .newsletter .newsletter-text {
        padding-right: calc(((100% - 1140px) / 2) + 0.75rem);
    }
}

@media (min-width: 1400px) {
    .newsletter .newsletter-text {
        padding-right: calc(((100% - 1320px) / 2) + 0.75rem);
    }
}

/* Certificates Section Responsive */
.certificates-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.certificates-container img {
    height: 180px;
    width: 170px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 1200px) {
    .certificates-container img {
        height: 150px;
        width: 140px;
    }
}

/* Tablet and Mobile: 3 images per row (max 2 rows) */
@media (max-width: 992px) {
    .certificates-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-items: center;
        gap: 1rem;
    }

    .certificates-container img {
        height: 130px;
        width: 120px;
    }
}

@media (max-width: 768px) {
    .certificates-container {
        gap: 0.8rem;
    }

    .certificates-container img {
        height: 110px;
        width: 100px;
    }
}

@media (max-width: 576px) {
    .certificates-container {
        gap: 0.5rem;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        justify-items: center;
    }

    .certificates-container img {
        height: 95px;
        width: 100px;
        grid-column: span 2;
    }

    .certificates-container img:nth-child(1) {
        grid-column: 1 / span 2;
    }

    .certificates-container img:nth-child(2) {
        grid-column: 3 / span 2;
    }

    .certificates-container img:nth-child(3) {
        grid-column: 5 / span 2;
    }

    .certificates-container img:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .certificates-container img:nth-child(5) {
        grid-column: 4 / span 2;
    }
}

/* Very small screens: maintain balanced 3 + 2 layout */
@media (max-width: 400px) {
    .certificates-container {
        gap: 0.4rem;
    }

    .certificates-container img {
        height: 80px;
        width: 72px;
    }
}

@media (max-width: 350px) {
    .certificates-container {
        gap: 0.35rem;
    }

    .certificates-container img {
        height: 70px;
        width: 63px;
    }
}

/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    text-align: left;
    color: rgba(255, 255, 255, 0.5);
    font-weight: normal;
    transition: 0.3s;
}

.footer .btn.btn-link:hover {
    color: var(--bs-white);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 14px;
    border-top: 1px solid rgba(256, 256, 256, 0.1);
}

.footer .copyright a {
    color: rgba(255, 255, 255, 0.5);
}

.footer .copyright a:hover {
    color: var(--bs-white);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}
/* Harmonized CTA cluster */
.about-cta {
    display: flex;
    align-items: center;
    gap: 12px; /* المسافة بين العنصرين */
    flex-wrap: wrap; /* التفاف جميل على الشاشات الصغيرة */
}

.about-cta .cta-btn {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 20px;
    border-radius: 12px; /* حواف ناعمة */
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.2);
}

.about-cta .cta-badge {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 16px;
    border-radius: 12px;
    font-weight: 700;
    border: 2px solid var(--bs-primary);
    color: var(--bs-primary);
    background: #fff; /* شارة مفرغة لتكامل بصري مع الزر الممتلئ */
    box-shadow: none;
}

.about-cta .cta-badge i {
    color: var(--bs-primary);
}

/* تأثيرات تفاعل خفيفة */
.about-cta .cta-badge:hover {
    background: var(--bs-primary);
    color: #fff;
}
.about-cta .cta-badge:hover i {
    color: #fff;
}

/* استجابة الهاتف */
@media (max-width: 575.98px) {
    .about-cta {
        flex-direction: column;
        align-items: stretch;
    }
    .about-cta .cta-btn,
    .about-cta .cta-badge {
        width: 100%;
        justify-content: center;
    }
}
/* Call-to-action button enhancements */
.btn-cta {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
    backdrop-filter: saturate(1.1);
}
.btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
}
.btn-cta:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Scoped styles for product carousel */
.product-carousel .owl-stage-outer {
    overflow: hidden; /* clip to show only visible slides */
}
.product-carousel .owl-item {
    transition:
        transform 0.4s ease,
        filter 0.4s ease,
        opacity 0.4s ease;
}
.product-card {
    position: relative;
    border-radius: 50px 0 50px 0;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    background: #fff;
}
.product-card img {
    width: 100%;
    height: auto; /* let image define height */
    display: block;
    clip-path: inset(0 round 50px 0 50px 0);
}
.product-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 14px;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.45) 100%
    );
}
.product-carousel .owl-item.active.center {
    transform: scale(1.12); /* larger center card */
    z-index: 3;
}
.product-carousel .owl-item.active:not(.center) {
    transform: scale(0.95); /* less shrink on sides */
    filter: none; /* move visual fade to image only */
    z-index: 2;
}
/* Fade side images only */
.product-carousel .owl-item:not(.center) .product-card img {
    opacity: 0.55;
    filter: grayscale(10%);
    transition: opacity 0.3s ease;
}
.product-carousel .owl-item.center .product-card img {
    opacity: 1;
    filter: none;
}

/* Dots styling */
.product-carousel .owl-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
}
.product-carousel .owl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cfd8dc;
    position: relative;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}
.product-carousel .owl-dot:hover {
    background: #90a4ae;
    transform: scale(1.05);
}
.product-carousel .owl-dot.active {
    background: #007bff;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15);
}

/* Fallback visibility if Owl fails to init */
.product-carousel {
    display: block;
}
.product-carousel:not(.owl-loaded) {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 6px;
}
.product-carousel:not(.owl-loaded) .product-card {
    flex: 0 0 calc(33.333% - 11px);
}
@media (max-width: 575.98px) {
    .product-carousel:not(.owl-loaded) .product-card {
        flex-basis: 100%;
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .product-carousel:not(.owl-loaded) .product-card {
        flex-basis: calc(50% - 8px);
    }
}
/* Guest carousel styles - similar to product-carousel but without center scaling */
.guest-carousel .owl-stage-outer {
    overflow: hidden;
}
.guest-carousel .owl-item {
    transition: all 0.4s ease;
}
.guest-carousel .owl-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
}
.guest-carousel .owl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cfd8dc;
    position: relative;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}
.guest-carousel .owl-dot:hover {
    background: #90a4ae;
    transform: scale(1.05);
}
.guest-carousel .owl-dot.active {
    background: #007bff;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15);
}

/* Sea-themed professional footer styles (scoped to #site-footer) */
#site-footer.sea-footer {
    position: relative;
    color: #eaf6ff;
    background:
        radial-gradient(
            ellipse 800px 400px at 30% 60%,
            rgba(42, 157, 219, 0.15),
            transparent 70%
        ),
        radial-gradient(
            ellipse 600px 300px at 70% 40%,
            rgba(86, 197, 169, 0.12),
            transparent 60%
        ),
        radial-gradient(
            1200px 600px at 50% -200px,
            rgba(255, 255, 255, 0.08),
            transparent 60%
        ),
        linear-gradient(
            180deg,
            #041e2f 0%,
            #063854 40%,
            #0a4b6f 70%,
            #0e8296 100%
        );
    overflow: hidden;
}

/* Underwater caustics light effect */
#site-footer.sea-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(
            ellipse 400px 300px at 20% 30%,
            rgba(95, 230, 245, 0.08),
            transparent 50%
        ),
        radial-gradient(
            ellipse 500px 350px at 80% 60%,
            rgba(42, 157, 219, 0.06),
            transparent 50%
        ),
        radial-gradient(
            ellipse 300px 200px at 50% 80%,
            rgba(86, 197, 169, 0.05),
            transparent 50%
        );
    animation: caustics 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes caustics {
    0%,
    100% {
        opacity: 0.4;
        transform: scale(1) translateY(0);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1) translateY(-10px);
    }
}

/* Floating particles (plankton effect) */
#site-footer.sea-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(
            2px 2px at 20% 30%,
            rgba(255, 255, 255, 0.3),
            transparent
        ),
        radial-gradient(
            2px 2px at 60% 70%,
            rgba(255, 255, 255, 0.25),
            transparent
        ),
        radial-gradient(
            1px 1px at 50% 50%,
            rgba(255, 255, 255, 0.2),
            transparent
        ),
        radial-gradient(
            2px 2px at 80% 10%,
            rgba(255, 255, 255, 0.3),
            transparent
        ),
        radial-gradient(
            1px 1px at 90% 60%,
            rgba(255, 255, 255, 0.25),
            transparent
        ),
        radial-gradient(
            1px 1px at 15% 80%,
            rgba(255, 255, 255, 0.2),
            transparent
        ),
        radial-gradient(
            2px 2px at 35% 20%,
            rgba(255, 255, 255, 0.25),
            transparent
        );
    background-size: 200% 200%;
    background-position: 0% 0%;
    animation: floatParticles 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

@keyframes floatParticles {
    0%,
    100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
}

/* Enhanced realistic wave with multiple layers */
#site-footer .footer-wave {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 120px;
    opacity: 1;
    z-index: 3;
    overflow: hidden;
}

#site-footer .footer-wave svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

/* Animate main wave path */
#site-footer .footer-wave .wave-main {
    animation: wave-flow 8s ease-in-out infinite;
    transform-origin: center;
}

@keyframes wave-flow {
    0%,
    100% {
        d: path(
            "M0,45 C120,65 240,25 360,40 C480,55 600,30 720,45 C840,60 960,35 1080,50 C1200,65 1320,40 1440,55 L1440,0 L0,0 Z"
        );
    }
    25% {
        d: path(
            "M0,50 C120,60 240,35 360,48 C480,50 600,40 720,50 C840,55 960,45 1080,55 C1200,60 1320,50 1440,60 L1440,0 L0,0 Z"
        );
    }
    50% {
        d: path(
            "M0,40 C120,55 240,40 360,50 C480,45 600,55 720,50 C840,50 960,50 1080,60 C1200,55 1320,55 1440,50 L1440,0 L0,0 Z"
        );
    }
    75% {
        d: path(
            "M0,48 C120,58 240,38 360,45 C480,52 600,42 720,48 C840,58 960,42 1080,52 C1200,62 1320,45 1440,58 L1440,0 L0,0 Z"
        );
    }
}

/* Animate light reflection */
#site-footer .footer-wave .wave-light {
    animation: wave-shimmer 6s ease-in-out infinite;
}

@keyframes wave-shimmer {
    0%,
    100% {
        opacity: 0.3;
        transform: translateX(0);
    }
    50% {
        opacity: 0.5;
        transform: translateX(20px);
    }
}

/* Wave spray/mist effect */
#site-footer .footer-wave svg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    animation: mist-flow 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mist-flow {
    0%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-5px);
    }
}

/* Glitter effect on wave surface */
#site-footer .footer-wave svg::after {
    content: "";
    position: absolute;
    top: 35px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 20%,
        transparent 40%,
        rgba(255, 255, 255, 0.3) 60%,
        transparent 80%,
        rgba(255, 255, 255, 0.5) 100%
    );
    background-size: 200% 100%;
    animation: glitter-sweep 3s linear infinite;
    pointer-events: none;
    filter: blur(1px);
}

@keyframes glitter-sweep {
    0% {
        background-position: 0% 0%;
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        background-position: 200% 0%;
        opacity: 0.6;
    }
}

#site-footer .footer-inner {
    position: relative;
    z-index: 4;
    padding-top: 60px;
}
#site-footer .footer-title {
    color: #ffffff;
    letter-spacing: 0.8px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

#site-footer .footer-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #56c5a9, #2a9ddb, transparent);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(86, 197, 169, 0.5);
}

#site-footer a {
    color: #bfefff;
    text-decoration: none;
    transition: all 0.3s ease;
}

#site-footer a:hover {
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

#site-footer .contact-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
    transition: transform 0.3s ease;
}

#site-footer .contact-item:hover {
    transform: translateX(5px);
}

#site-footer .contact-item i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(86, 197, 169, 0.25),
        rgba(42, 157, 219, 0.15)
    );
    color: #5fe6f5;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15) inset,
        0 0 15px rgba(86, 197, 169, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

#site-footer .contact-item:hover i {
    background: linear-gradient(
        135deg,
        rgba(86, 197, 169, 0.4),
        rgba(42, 157, 219, 0.3)
    );
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15) inset,
        0 0 20px rgba(86, 197, 169, 0.5);
    transform: rotate(360deg) scale(1.1);
}
#site-footer .quick-links a {
    display: block;
    padding: 6px 0;
}
#site-footer .badge-pill {
    display: inline-block;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.14),
        rgba(255, 255, 255, 0.06)
    );
    color: #d2f5ff;
    padding: 6px 10px;
    font-size: 12px;
    margin: 0 6px 6px 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
#site-footer .social a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(86, 197, 169, 0.2),
        rgba(42, 157, 219, 0.15)
    );
    margin-right: 10px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 3px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    color: #ffffff;
    font-size: 18px;
}

#site-footer .social a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(95, 230, 245, 0.4), transparent);
    transform: translate(-50%, -50%);
    transition:
        width 0.5s ease,
        height 0.5s ease;
}

#site-footer .social a:hover::before {
    width: 100px;
    height: 100px;
}

#site-footer .social a:hover {
    transform: translateY(-5px) scale(1.15) rotate(5deg);
    background: linear-gradient(
        135deg,
        rgba(86, 197, 169, 0.5),
        rgba(42, 157, 219, 0.4)
    );
    box-shadow:
        0 8px 25px rgba(86, 197, 169, 0.4),
        0 0 30px rgba(42, 157, 219, 0.3),
        inset 0 1px 5px rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

#site-footer .social a i {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

#site-footer .social a:hover i {
    transform: scale(1.2) rotate(-5deg);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}
#site-footer .footer-bottom {
    border-top: 2px solid rgba(86, 197, 169, 0.2);
    padding-top: 20px;
    margin-top: 30px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1));
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

#site-footer .section-note {
    color: #cfefff;
    opacity: 0.9;
}

/* Logo hover effect with ripple */
#site-footer img[alt="Aden Gulf Fisheries"] {
    transition: all 0.5s ease;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    position: relative;
}

#site-footer img[alt="Aden Gulf Fisheries"]:hover {
    transform: scale(1.08) translateY(-5px);
    filter: drop-shadow(0 10px 30px rgba(86, 197, 169, 0.4))
        drop-shadow(0 0 20px rgba(42, 157, 219, 0.3));
    animation: logoRipple 1.5s ease-out;
}

@keyframes logoRipple {
    0% {
        filter: drop-shadow(0 10px 30px rgba(86, 197, 169, 0.4))
            drop-shadow(0 0 20px rgba(42, 157, 219, 0.3));
    }
    50% {
        filter: drop-shadow(0 15px 40px rgba(86, 197, 169, 0.6))
            drop-shadow(0 0 30px rgba(42, 157, 219, 0.5));
    }
    100% {
        filter: drop-shadow(0 10px 30px rgba(86, 197, 169, 0.4))
            drop-shadow(0 0 20px rgba(42, 157, 219, 0.3));
    }
}

/* Underwater depth shadow effect */
#site-footer .footer-inner > .container {
    position: relative;
}

#site-footer .footer-inner > .container::before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 5%;
    right: 5%;
    height: 30px;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.2),
        transparent
    );
    filter: blur(10px);
    opacity: 0.5;
    pointer-events: none;
}
/* Sea-themed footer styles: deep navy background, soft teal accents, high contrast text */
.sea-theme {
    background: linear-gradient(180deg, #04223a 0%, #063454 100%);
    color: #d9f3ff;
}
.sea-theme .text-white,
.sea-theme h1,
.sea-theme h5 {
    color: #ffffff !important;
}
.sea-theme p,
.sea-theme li,
.sea-theme .mb-0 {
    color: #d9f3ff;
}
.sea-theme a,
.sea-theme .btn-link {
    color: #7fd1e8;
}
.sea-theme a:hover,
.sea-theme .btn-link:hover {
    color: #b6f3ff;
    text-decoration: none;
}
.sea-theme .btn.btn-outline-primary {
    border-color: rgba(127, 209, 232, 0.6);
    color: #7fd1e8;
}
.sea-theme .btn.btn-outline-primary:hover {
    background-color: rgba(127, 209, 232, 0.15);
}
.sea-theme .footer-menu a {
    color: #9fe2f7;
}
.sea-theme .footer-menu a:hover {
    color: #b6f3ff;
}
/* Improve readability and spacing */
.sea-theme .footer h5 {
    margin-bottom: 1rem;
}
.sea-theme .footer p {
    margin-bottom: 0.5rem;
}
.hover-zoom {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.hover-zoom:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.3);
}
.section-bg-cephalopods {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-grouper {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-tuna {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-seasonal1 {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-frozen {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-seasonal2 {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-seasonal3 {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-seasonal4 {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-seasonal5 {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.card-custom {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.card-custom:hover {
    transform: translateY(-5px);
}
.card-title {
    font-weight: bold;
    background: linear-gradient(135deg, #014f86 0%, #0a6ba8 50%, #2a9ddb 100%);
    -webkit-background-clip: text; /* لدعم متصفحات WebKit */
    -webkit-text-fill-color: transparent; /* لجعل النص شفاف لظهور التدرج */
    background-clip: text; /* للمتصفحات الحديثة */
    color: transparent; /* احتياط */
}

.card-text {
    font-style: italic;
    color: #6c757d;
}
.btn-hover {
    transition: all 0.3s ease;
    border-radius: 25px;
}
.btn-hover:hover {
    background-color: #004085;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}
.section-title {
    color: #343a40;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Responsive: make product modal comfortable on small screens */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.75rem;
    }
    #productModal .modal-dialog {
        width: auto;
        max-width: 100%;
    }
    #productModal .modal-content {
        max-height: 85vh;
    }
    #productModal .modal-body {
        overflow-y: auto;
    }
    #productModal img#modalImg {
        max-height: 220px;
    }
}
.hover-zoom {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.hover-zoom:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.3);
}
.section-bg-cephalopods {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-grouper {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-tuna {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-seasonal1 {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-frozen {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-seasonal2 {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-seasonal3 {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-seasonal4 {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.section-bg-seasonal5 {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    border-radius: 15px;
    margin-bottom: 30px;
}
.card-custom {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.card-custom:hover {
    transform: translateY(-5px);
}
.card-title {
    color: #007bff;
    font-weight: bold;
}
.card-text {
    font-style: italic;
    color: #6c757d;
}
.btn-hover {
    transition: all 0.3s ease;
}
.btn-hover:hover {
    background-color: #004085;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}
.section-title {
    color: #343a40;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Responsive: make product modal comfortable on small screens */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.75rem; /* reduce outer spacing */
    }
    #productModal .modal-dialog {
        width: auto;
        max-width: 100%;
    }
    #productModal .modal-content {
        max-height: 85vh; /* limit overall height to viewport */
    }
    #productModal .modal-body {
        overflow-y: auto; /* allow inner scrolling when content is taller */
    }
    #productModal img#modalImg {
        max-height: 220px; /* smaller image on phones */
    }
}
/* Swimming fish animation - Enhanced */
.swimming-fish {
    position: absolute;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.35);
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.swimming-fish:hover {
    color: rgba(95, 230, 245, 0.6);
    filter: drop-shadow(0 0 8px rgba(95, 230, 245, 0.5));
}

.footer-bottom {
    position: relative;
}

.swimming-fish i {
    animation: fish-wiggle 0.8s ease-in-out infinite alternate;
}

@keyframes fish-wiggle {
    0% {
        transform: translateX(0) rotate(0deg) scaleX(1);
    }
    50% {
        transform: translateX(2px) rotate(2deg) scaleX(1.02);
    }
    100% {
        transform: translateX(0) rotate(0deg) scaleX(1);
    }
}

/* Bubbles animation */
.footer-inner::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.4) 2px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.3) 3px, transparent 3px),
        radial-gradient(circle, rgba(255, 255, 255, 0.35) 2px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.25) 4px, transparent 4px),
        radial-gradient(circle, rgba(255, 255, 255, 0.3) 2px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.4) 3px, transparent 3px);
    background-size:
        100px 150px,
        150px 200px,
        120px 180px,
        180px 220px,
        90px 140px,
        140px 190px;
    background-position:
        10% 100%,
        30% 100%,
        50% 100%,
        70% 100%,
        85% 100%,
        95% 100%;
    background-repeat: no-repeat;
    animation: bubbles-rise 8s ease-in infinite;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
}

@keyframes bubbles-rise {
    0% {
        opacity: 0;
        background-position:
            10% 100%,
            30% 100%,
            50% 100%,
            70% 100%,
            85% 100%,
            95% 100%;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        background-position:
            12% -20%,
            28% -20%,
            52% -20%,
            68% -20%,
            87% -20%,
            93% -20%;
    }
}

/* Additional bubble layer for more depth */
.footer-inner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle, rgba(86, 197, 169, 0.3) 2px, transparent 2px),
        radial-gradient(circle, rgba(42, 157, 219, 0.25) 3px, transparent 3px),
        radial-gradient(circle, rgba(95, 230, 245, 0.3) 2px, transparent 2px),
        radial-gradient(circle, rgba(86, 197, 169, 0.2) 4px, transparent 4px);
    background-size:
        110px 160px,
        160px 210px,
        130px 190px,
        170px 230px;
    background-position:
        20% 100%,
        45% 100%,
        65% 100%,
        80% 100%;
    background-repeat: no-repeat;
    animation: bubbles-rise-slow 12s ease-in infinite 2s;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
}

@keyframes bubbles-rise-slow {
    0% {
        opacity: 0;
        background-position:
            20% 100%,
            45% 100%,
            65% 100%,
            80% 100%;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        background-position:
            22% -25%,
            43% -25%,
            67% -25%,
            78% -25%;
    }
}
.fish1 {
    top: 20%;
    animation: swim1 18s ease-in-out infinite;
    font-size: 24px;
}
.fish2 {
    top: 40%;
    animation: swim2 22s ease-in-out infinite;
    font-size: 20px;
    opacity: 0.8;
}
.fish3 {
    top: 60%;
    animation: swim3 20s ease-in-out infinite;
    font-size: 26px;
}
.fish4 {
    top: 30%;
    animation: swim4 25s ease-in-out infinite;
    font-size: 19px;
    opacity: 0.75;
}
.fish5 {
    top: 50%;
    animation: swim5 19s ease-in-out infinite;
    font-size: 23px;
}
.fish6 {
    top: 50%;
    animation: swim6 21s ease-in-out infinite;
    font-size: 21px;
    opacity: 0.85;
}

@keyframes swim1 {
    0% {
        left: -10%;
        transform: translateY(0) rotate(0deg);
    }
    20% {
        transform: translateY(-15px) rotate(-3deg);
    }
    40% {
        transform: translateY(10px) rotate(2deg);
    }
    60% {
        transform: translateY(-8px) rotate(-1deg);
    }
    80% {
        transform: translateY(12px) rotate(3deg);
    }
    100% {
        left: 110%;
        transform: translateY(0) rotate(0deg);
    }
}
@keyframes swim2 {
    0% {
        left: -10%;
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(12px) rotate(4deg);
    }
    50% {
        transform: translateY(-12px) rotate(-4deg);
    }
    75% {
        transform: translateY(6px) rotate(2deg);
    }
    100% {
        left: 110%;
        transform: translateY(0) rotate(0deg);
    }
}
@keyframes swim3 {
    0% {
        left: -10%;
        transform: translateY(0) rotate(0deg);
    }
    20% {
        transform: translateY(-10px) rotate(-2deg);
    }
    40% {
        transform: translateY(8px) rotate(3deg);
    }
    60% {
        transform: translateY(-6px) rotate(-1deg);
    }
    80% {
        transform: translateY(10px) rotate(2deg);
    }
    100% {
        left: 110%;
        transform: translateY(0) rotate(0deg);
    }
}
@keyframes swim4 {
    0% {
        left: -10%;
        transform: translateY(0) rotate(0deg);
    }
    30% {
        transform: translateY(14px) rotate(5deg);
    }
    60% {
        transform: translateY(-14px) rotate(-5deg);
    }
    100% {
        left: 110%;
        transform: translateY(0) rotate(0deg);
    }
}
@keyframes swim5 {
    0% {
        left: -10%;
        transform: translateY(0) rotate(0deg);
    }
    35% {
        transform: translateY(-16px) rotate(-4deg);
    }
    70% {
        transform: translateY(16px) rotate(4deg);
    }
    100% {
        left: 110%;
        transform: translateY(0) rotate(0deg);
    }
}

/* Override for product cards in products.html */
.card-custom {
    border-radius: 50px 0 50px 0 !important;
}
.card-custom img {
    clip-path: inset(0 round 50px 0 50px 0) !important;
}

/* Override for modal image in products.html */
#modalImg {
    border-radius: 50px 0 50px 0 !important;
    clip-path: inset(0 round 50px 0 50px 0) !important;
}

/* Override for modal in products.html - reverse curvature */
.modal-content {
    border-radius: 0 50px 0 50px !important;
}
.modal-header {
    border-radius: 0 50px 0 0 !important;
}
.modal-header .btn-close {
    margin-right: 0.5rem !important;
}
@keyframes swim6 {
    0% {
        left: -10%;
        transform: translateY(0) rotate(0deg);
    }
    20% {
        transform: translateY(-12px) rotate(-2deg);
    }
    40% {
        transform: translateY(14px) rotate(4deg);
    }
    60% {
        transform: translateY(-10px) rotate(-3deg);
    }
    80% {
        transform: translateY(8px) rotate(2deg);
    }
    100% {
        left: 110%;
        transform: translateY(0) rotate(0deg);
    }
}

/* Coral reef decorative elements */
#site-footer.sea-footer .footer-inner .container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background:
        radial-gradient(
            ellipse 60px 80px at 10% 100%,
            rgba(86, 197, 169, 0.15),
            transparent 70%
        ),
        radial-gradient(
            ellipse 80px 100px at 25% 100%,
            rgba(42, 157, 219, 0.12),
            transparent 70%
        ),
        radial-gradient(
            ellipse 70px 90px at 45% 100%,
            rgba(86, 197, 169, 0.1),
            transparent 70%
        ),
        radial-gradient(
            ellipse 90px 110px at 65% 100%,
            rgba(42, 157, 219, 0.13),
            transparent 70%
        ),
        radial-gradient(
            ellipse 75px 95px at 85% 100%,
            rgba(86, 197, 169, 0.11),
            transparent 70%
        );
    pointer-events: none;
    z-index: 2;
    animation: coralSway 8s ease-in-out infinite;
}

@keyframes coralSway {
    0%,
    100% {
        transform: scaleY(1) translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: scaleY(1.05) translateY(-3px);
        opacity: 0.8;
    }
}

/* Shimmer effect on footer titles */
#site-footer .footer-title {
    position: relative;
    overflow: hidden;
}

#site-footer .footer-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50%,
    100% {
        left: 100%;
    }
}

/* Seaweed decorative elements */
.footer-inner .row::before,
.footer-inner .row::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 120px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(86, 197, 169, 0.15) 20%,
        rgba(86, 197, 169, 0.25) 50%,
        rgba(86, 197, 169, 0.15) 80%,
        transparent
    );
    border-radius: 50%;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

.footer-inner .row::before {
    left: 5%;
    animation: seaweedSway1 4s ease-in-out infinite;
    transform-origin: bottom center;
}

.footer-inner .row::after {
    right: 5%;
    animation: seaweedSway2 5s ease-in-out infinite;
    transform-origin: bottom center;
    width: 10px;
    height: 140px;
}

@keyframes seaweedSway1 {
    0%,
    100% {
        transform: rotate(-3deg) scaleY(1);
    }
    50% {
        transform: rotate(3deg) scaleY(1.05);
    }
}

@keyframes seaweedSway2 {
    0%,
    100% {
        transform: rotate(4deg) scaleY(1);
    }
    50% {
        transform: rotate(-4deg) scaleY(1.08);
    }
}

/* Light rays effect from surface - using a wrapper element */
#site-footer.sea-footer .footer-inner .container::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 50%;
    width: 200%;
    height: 100%;
    background:
        linear-gradient(
            165deg,
            transparent 40%,
            rgba(95, 230, 245, 0.04) 45%,
            transparent 50%
        ),
        linear-gradient(
            175deg,
            transparent 40%,
            rgba(86, 197, 169, 0.04) 45%,
            transparent 50%
        ),
        linear-gradient(
            185deg,
            transparent 40%,
            rgba(42, 157, 219, 0.04) 45%,
            transparent 50%
        );
    transform: translateX(-50%);
    animation: lightRays 25s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes lightRays {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }
    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* Responsive adjustments for footer effects */
@media (max-width: 768px) {
    #site-footer .footer-wave {
        height: 80px;
    }

    #site-footer .footer-wave svg {
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
    }

    #site-footer .footer-wave::before,
    #site-footer .footer-wave::after {
        opacity: 0.5;
    }

    #site-footer .footer-inner {
        padding-top: 40px;
    }

    /* Simplify animations on mobile */
    #site-footer .footer-wave .wave-main {
        animation-duration: 10s;
    }

    #site-footer .footer-wave .wave-light {
        animation-duration: 8s;
    }

    #site-footer .footer-wave .wave-foam {
        animation-duration: 6s;
    }
}

.swimming-fish {
    font-size: 18px;
}

.fish1,
.fish2,
.fish3,
.fish4,
.fish5,
.fish6 {
    font-size: 18px !important;
}

#site-footer .social a {
    width: 38px;
    height: 38px;
    font-size: 16px;
    margin-right: 8px;
}

#site-footer .contact-item i {
    width: 34px;
    height: 34px;
}

#site-footer.sea-footer::before,
#site-footer.sea-footer::after {
    opacity: 0.3;
}

.footer-inner .row::before,
.footer-inner .row::after {
    display: none;
}

@media (max-width: 576px) {
    #site-footer .footer-wave {
        height: 70px;
    }

    #site-footer .footer-wave svg {
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.15));
    }

    /* Disable complex wave layers on very small screens */
    #site-footer .footer-wave::before {
        opacity: 0.3;
    }

    #site-footer .footer-wave::after {
        display: none;
    }

    #site-footer .footer-inner {
        padding-top: 30px;
    }

    #site-footer .footer-title::after {
        width: 40px;
        height: 2px;
    }

    #site-footer img[alt="Aden Gulf Fisheries"] {
        max-width: 180px !important;
    }

    .footer-inner::before,
    .footer-inner::after {
        opacity: 0.5;
    }

    #site-footer.sea-footer .footer-inner .container::before {
        display: none;
    }
}
/* Add spacing for fixed header */
body {
    padding-top: 80px;
}

@media (max-width: 992px) {
    body {
        padding-top: 70px;
    }
}

@media (max-width: 576px) {
    body {
        padding-top: 65px;
    }
}

/* Products Hero Section Styles - Enhanced Ocean Design */
.products-hero-section {
    position: relative;
    background: linear-gradient(
        180deg,
        #0a4b6f 0%,
        #0c5f85 25%,
        #0e7a9a 50%,
        #1089a8 75%,
        #0c6f8f 100%
    );
    padding: 30px 0;
    overflow: hidden;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 8px 30px rgba(10, 75, 111, 0.4);
}

/* Underwater Light Rays Effect */
.products-hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
    /* Caustics - Light patterns on ocean floor */
        radial-gradient(
            ellipse 300px 150px at 25% 40%,
            rgba(86, 197, 169, 0.15) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 250px 120px at 75% 60%,
            rgba(42, 157, 219, 0.12) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 200px 100px at 50% 30%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 60%
        ),
        /* Light rays from surface */
        linear-gradient(
                115deg,
                transparent 0%,
                rgba(86, 197, 169, 0.08) 15%,
                transparent 20%,
                transparent 25%,
                rgba(42, 157, 219, 0.06) 30%,
                transparent 35%,
                transparent 45%,
                rgba(255, 255, 255, 0.05) 50%,
                transparent 55%
            );
    animation: caustics 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Animated Water Surface Shimmer */
.products-hero-section::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 25%
        ),
        radial-gradient(
            circle at 70% 40%,
            rgba(86, 197, 169, 0.08) 0%,
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 60%,
            rgba(42, 157, 219, 0.06) 0%,
            transparent 35%
        );
    animation: waterShimmer 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes caustics {
    0%,
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
    25% {
        opacity: 0.85;
        transform: scale(1.05) translateX(10px);
    }
    50% {
        opacity: 1;
        transform: scale(0.98) translateX(-5px);
    }
    75% {
        opacity: 0.9;
        transform: scale(1.02) translateX(8px);
    }
}

@keyframes waterShimmer {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.6;
    }
    33% {
        transform: translate(20px, -15px) rotate(2deg);
        opacity: 0.8;
    }
    66% {
        transform: translate(-15px, 10px) rotate(-1deg);
        opacity: 0.7;
    }
}

.products-hero-content {
    position: relative;
    z-index: 2;
    animation: fadeInUp 0.6s ease-out;
}

/* Hero Icon */
.hero-icon {
    font-size: 32px;
    color: #56c5a9;
    filter: drop-shadow(0 4px 15px rgba(86, 197, 169, 0.6));
    animation: float 3s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(86, 197, 169, 0.4);
}

/* Main Title */
.products-hero-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    text-shadow:
        0 3px 15px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(86, 197, 169, 0.2);
    letter-spacing: 0.5px;
}

/* Breadcrumb Styling */
.products-breadcrumb {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    border-radius: 30px;
    padding: 10px 24px;
    display: inline-flex;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.products-breadcrumb .breadcrumb-item {
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.products-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    transition: all 300ms ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.products-breadcrumb .breadcrumb-item a:hover {
    color: #56c5a9;
    text-shadow: 0 0 10px rgba(86, 197, 169, 0.5);
}

.products-breadcrumb .breadcrumb-item.active {
    color: #56c5a9;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(86, 197, 169, 0.4);
}

.products-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    padding: 0 8px;
}

/* Animated Background Bubbles */
.hero-bg-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.bubble {
    position: absolute;
    bottom: -100px;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(86, 197, 169, 0.15) 40%,
        rgba(42, 157, 219, 0.1) 100%
    );
    border-radius: 50%;
    animation: rise 15s infinite ease-in;
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(86, 197, 169, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bubble:nth-child(1) {
    width: 40px;
    height: 40px;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 12s;
}

.bubble:nth-child(2) {
    width: 60px;
    height: 60px;
    left: 25%;
    animation-delay: 2s;
    animation-duration: 14s;
}

.bubble:nth-child(3) {
    width: 30px;
    height: 30px;
    left: 50%;
    animation-delay: 4s;
    animation-duration: 10s;
}

.bubble:nth-child(4) {
    width: 50px;
    height: 50px;
    left: 75%;
    animation-delay: 1s;
    animation-duration: 13s;
}

.bubble:nth-child(5) {
    width: 45px;
    height: 45px;
    left: 90%;
    animation-delay: 3s;
    animation-duration: 11s;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes waveFlow {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

@keyframes rise {
    0% {
        bottom: -100px;
        opacity: 0;
        transform: translateX(0) scale(0.8);
    }
    10% {
        opacity: 0.4;
        transform: translateX(5px) scale(0.9);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-10px) scale(1);
    }
    90% {
        opacity: 0.4;
        transform: translateX(8px) scale(1.1);
    }
    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(0) scale(0.7);
    }
}

/* Responsive Design for Hero Section */
@media (max-width: 992px) {
    .products-hero-section {
        padding: 25px 0;
    }

    .products-hero-content {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center;
    }

    .products-hero-title {
        font-size: 28px;
    }

    .hero-icon {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .products-hero-section {
        padding: 20px 0;
    }

    .products-hero-title {
        font-size: 24px;
    }

    .hero-icon {
        font-size: 24px;
    }

    .products-breadcrumb {
        padding: 6px 15px;
    }

    .products-breadcrumb .breadcrumb-item {
        font-size: 12px;
    }

    .products-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        font-size: 14px;
        padding: 0 5px;
    }
}
/* Back to Top - Fish Scroll Indicator */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    background: transparent;
    display: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top.show {
    display: block;
}

.fish-scroll-wrapper-up {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: floatUp 3s ease-in-out infinite;
}

.back-to-top-fish-icon {
    font-size: 42px;
    color: var(--seafoam-green, #014f86);
    filter: drop-shadow(0 4px 12px rgba(86, 197, 169, 0.4));
    transform: rotate(-90deg); /* تدوير السمكة للأعلى */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.fish-trail-up {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(rgba(86, 197, 169, 0.25), transparent 70%);
    animation: waveFlowUp 4s ease-in-out infinite;
    z-index: 1;
}

/* سهم داخل السمكة للأعلى */
.arrow-inside-up {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
}

.arrow-inside-up i {
    font-size: 16px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: arrowPulseUp 2s ease-in-out infinite;
    display: block;
}

/* Float Animation للأعلى */
@keyframes floatUp {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* Arrow Pulse Animation */
@keyframes arrowPulseUp {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.9);
    }
}

/* Wave Flow Animation */
@keyframes waveFlowUp {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.15;
    }
}

/* Hover Effects */
.back-to-top:hover .fish-scroll-wrapper-up {
    transform: translateY(-8px) scale(1.1);
}

.back-to-top:hover .back-to-top-fish-icon {
    color: var(--ocean-blue, #1692eb);
    filter: drop-shadow(0 6px 20px rgba(1, 79, 134, 0.5));
}

.back-to-top:hover .fish-trail-up {
    background: radial-gradient(rgba(1, 79, 134, 0.3), transparent 70%);
    transform: scale(1.3);
}

.back-to-top:hover .arrow-inside-up i {
    color: #ffd700;
    animation: arrowPulseUp 1s ease-in-out infinite;
}

/* Active/Click Effect */
.back-to-top:active .fish-scroll-wrapper-up {
    transform: translateY(2px) scale(1.05);
}

/* Responsive Design */
@media (max-width: 992px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
    }

    .back-to-top-fish-icon {
        font-size: 36px;
    }

    .fish-trail-up {
        width: 52px;
        height: 52px;
    }

    .arrow-inside-up i {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .back-to-top {
        bottom: 15px;
        right: 15px;
    }

    .back-to-top-fish-icon {
        font-size: 32px;
    }

    .fish-trail-up {
        width: 48px;
        height: 48px;
    }

    .arrow-inside-up i {
        font-size: 12px;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .fish-scroll-wrapper-up,
    .fish-trail-up,
    .arrow-inside-up i {
        animation: none;
    }

    .back-to-top:hover .fish-scroll-wrapper-up {
        transform: scale(1.1);
    }
}

/* Footer Dark Mode - عندما يكون الزر فوق Footer */
.back-to-top.on-dark .back-to-top-fish-icon {
    color: white !important;
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.3)) !important;
}

.back-to-top.on-dark .arrow-inside-up i {
    color: var(--seafoam-green, #014f86) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.back-to-top.on-dark .fish-trail-up {
    background: radial-gradient(
        rgba(255, 255, 255, 0.2),
        transparent 70%
    ) !important;
}

/* Hover على Footer */
.back-to-top.on-dark:hover .back-to-top-fish-icon {
    color: #f0f0f0 !important;
    filter: drop-shadow(0 6px 20px rgba(255, 255, 255, 0.5)) !important;
}

.back-to-top.on-dark:hover .arrow-inside-up i {
    color: var(--ocean-blue, #1692eb) !important;
}
.product-gallery {
    position: relative;
    height: 350px;
    margin: 0 auto;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    z-index: 999;
}

.product-card {
    position: absolute;
    width: 300px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    transform-origin: center center;
    z-index: 1000;
}

.product-card img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.product-card:hover img {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.product-title {
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 10px 18px;
    border-radius: 20px;
    margin-top: 12px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: inline-block;
    position: relative;
    z-index: 1003;
}

/* أزرار التنقل */
.gallery-nav {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1001;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    font-size: 20px;
    color: #333;
}

.gallery-nav:hover {
    background: #014f86;
    color: white;
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 6px 30px rgba(0, 123, 255, 0.4);
}

.gallery-nav.prev {
    left: calc(50% - 250px);
}

.gallery-nav.next {
    right: calc(50% - 250px);
}

/* مؤشرات المنتجات */
.product-indicators {
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 1002;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 123, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.indicator:hover {
    background: rgba(0, 123, 255, 0.6);
    transform: scale(1.2);
}

.indicator.active {
    background: #014f86;
    transform: scale(1.3);
    border-color: #014f86;
}

/* تحسين للشاشات الصغيرة */
@media (max-width: 768px) {
    .product-gallery {
        height: 380px;
    }

    .product-card {
        width: 190px;
    }

    .gallery-nav {
        width: 45px;
        height: 45px;
        font-size: 16px;
        top: 45%;
    }

    .gallery-nav.prev {
        left: 15px;
    }

    .gallery-nav.next {
        right: 15px;
    }

    .product-title {
        font-size: 12px;
        padding: 8px 14px;
    }
}

/*****************************************/
/*** Hero Fish Scroll Indicator Styles ***/
/*****************************************/
.scroll-down-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.fish-scroll-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* الحاوي يتحرك - السمكة والسهم يتحركان معاً */
    animation: float 3s ease-in-out infinite;
}

.hero-fish-icon {
    font-size: 42px;
    color: var(--seafoam-green, #014f86);
    filter: drop-shadow(0 4px 12px rgba(86, 197, 169, 0.4));
    transform: rotate(90deg); /* تدوير السمكة للأسفل */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.fish-trail {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(rgba(86, 197, 169, 0.25), transparent 70%);
    animation: waveFlow 4s ease-in-out infinite;
    z-index: 1;
}

/* سهم داخل السمكة */
.arrow-inside {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    /* السهم ثابت نسبياً للسمكة - يتحرك معها كوحدة واحدة */
}

.arrow-inside i {
    font-size: 16px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: arrowPulse 2s ease-in-out infinite;
    display: block;
}

/* Float Animation - حركة طفو للحاوي (wrapper) */
@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* Arrow Pulse Animation - نبض مع scale فقط */
@keyframes arrowPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.9);
    }
}

/* Wave Flow Animation */
@keyframes waveFlow {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.15;
    }
}

/* Hover Effects */
.scroll-down-indicator:hover .fish-scroll-wrapper {
    transform: translateY(-8px) scale(1.1);
}

.scroll-down-indicator:hover .hero-fish-icon {
    color: var(--ocean-blue, #1692eb);
    filter: drop-shadow(0 6px 20px rgba(1, 79, 134, 0.5));
}

.scroll-down-indicator:hover .fish-trail {
    background: radial-gradient(rgba(1, 79, 134, 0.3), transparent 70%);
    transform: scale(1.3);
}

.scroll-down-indicator:hover .arrow-inside i {
    color: #ffd700;
    animation: arrowPulse 1s ease-in-out infinite;
}

.scroll-down-indicator:hover .scroll-text {
    opacity: 1;
    color: var(--seafoam-green, #014f86);
    transform: translateY(-2px);
}

/* Active/Click Effect */
.scroll-down-indicator:active .fish-scroll-wrapper {
    transform: translateY(2px) scale(1.05);
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero-fish-icon {
        font-size: 36px;
    }

    .fish-trail {
        width: 52px;
        height: 52px;
    }

    .arrow-inside i {
        font-size: 14px;
    }

    .scroll-text {
        font-size: 12px;
        letter-spacing: 1.5px;
    }
}

@media (max-width: 576px) {
    .scroll-down-indicator {
        bottom: 20px;
    }

    .hero-fish-icon {
        font-size: 32px;
    }

    .fish-trail {
        width: 48px;
        height: 48px;
    }

    .arrow-inside i {
        font-size: 12px;
    }

    .scroll-text {
        font-size: 11px;
        letter-spacing: 1.2px;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .fish-scroll-wrapper,
    .fish-trail,
    .arrow-inside i {
        animation: none;
    }

    .scroll-down-indicator:hover .fish-scroll-wrapper {
        transform: scale(1.1);
    }
}

/* Candara Font for All Section Titles from About onwards */
.about-card h1.display-5,
.text-center h1,
.newsletter-text h1,
.container-fluid h1 {
    font-family: "Candara", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* Candara Font for Feature Section Subtitles */
.container-fluid h4,
.small-features h6,
.service-item h3 {
    font-family: "Candara", sans-serif !important;
    font-weight: 600 !important;
}

/* Playfair Display Font for Hero Title - Elegant & Classic */
#typewriter-title {
    font-family: "Playfair Display", serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    font-style: normal !important;
    text-align: center !important;
}

/* Ensure Hero Title keeps Playfair Display (override Candara rules) */
.hero-header #typewriter-title {
    font-family: "Playfair Display", serif !important;
}

/* Enhanced styling for the primary text in hero title */
#typewriter-title .text-primary {
    display: inline-block;
    font-weight: 800 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 0.85em !important; /* تصغير حجم الخط للنص "Seafood Exports" */
}

/* Unified Professional Font for All Body Text and Paragraphs */
.about-card p,
.container-fluid p,
.service-item p,
.newsletter-text p,
.text-secondary,
.lead,
.mb-0,
.small-features small {
    font-family: "Verdana", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.3px !important;
}

/* Professional styling for lead paragraphs */
.lead {
    font-weight: 500 !important;
    font-size: 1.1rem !important;
}

/* Professional styling for small text */
.small-features small,
.text-muted {
    font-family: "Verdana", sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
}

/* Ensure all section descriptions use professional font */
.about-section p,
.feature-section p,
.service-section p,
.project-section p,
.newsletter p {
    font-family: "Verdana", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.3px !important;
}

/* Professional font for buttons and links text */
.btn,
.cta-badge,
.about-cta span {
    font-family: "Verdana", sans-serif !important;
}

/* ========================================
   COMPREHENSIVE FONT UNIFICATION SYSTEM
   ======================================== */

/* HEADER FONTS - Candara for Navigation */
.marine-nav-link,
.marine-dropdown-link,
.marine-mobile-menu .marine-nav-link {
    font-family: "Candara", sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}

/* FOOTER FONTS - Professional Verdana */
.footer-title,
#site-footer h5 {
    font-family: "Candara", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

.contact-item,
.contact-item div,
#site-footer .small,
.footer-bottom,
.footer-bottom a {
    font-family: "Verdana", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.2px !important;
    font-size: 0.85rem !important; /* تصغير حجم الخط للنصوص الفرعية في الفوتر */
}

/* MODAL/POPUP FONTS - Professional Typography */
.modal-title,
.modal-header h4 {
    font-family: "Candara", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

.modal-body,
.modal-body p,
.modal-body h5,
.modal-body h6,
.modal-body ul,
.modal-body li,
#modalDesc,
#modalAbout,
#modalForms,
#modalSizesPacking {
    font-family: "Verdana", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.3px !important;
}

.modal-body h5,
.modal-body h6 {
    font-family: "Candara", sans-serif !important;
    font-weight: 600 !important;
}

/* SPINNER/LOADING FONTS */
.spinner-grow,
.sr-only {
    font-family: "Verdana", sans-serif !important;
}

/* FORM ELEMENTS FONTS */
input,
textarea,
select,
.form-control,
.form-select,
.form-label {
    font-family: "Verdana", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
}

/* BADGE AND ALERT FONTS */
.badge,
.alert,
.toast {
    font-family: "Verdana", sans-serif !important;
    font-weight: 500 !important;
}

/* CARD COMPONENTS FONTS */
.card-title {
    font-family: "Candara", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
}

.card-text,
.card-body p {
    font-family: "Verdana", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.3px !important;
}

/* NAVIGATION BREADCRUMB FONTS */
.breadcrumb,
.breadcrumb-item {
    font-family: "Verdana", sans-serif !important;
    font-weight: 400 !important;
}

/* TABLE FONTS */
table,
th,
td,
.table {
    font-family: "Verdana", sans-serif !important;
    font-weight: 400 !important;
}

table th {
    font-family: "Candara", sans-serif !important;
    font-weight: 600 !important;
}

/* PAGINATION FONTS */
.pagination,
.page-link {
    font-family: "Verdana", sans-serif !important;
    font-weight: 500 !important;
}

/* DROPDOWN MENU FONTS */
.dropdown-menu,
.dropdown-item {
    font-family: "Verdana", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
}

/* TOOLTIP AND POPOVER FONTS */
.tooltip,
.popover,
.tooltip-inner,
.popover-body {
    font-family: "Verdana", sans-serif !important;
    font-weight: 400 !important;
}

/* GLOBAL FALLBACK - Ensure all text elements use professional fonts */
body,
html,
* {
    font-family: "Verdana", sans-serif;
}

/* Override for headings to use Candara */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Candara", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
}

/* Specific override for display headings */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: "Candara", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* Maintain Hero Title with Playfair Display */
#typewriter-title,
.hero-header #typewriter-title {
    font-family: "Playfair Display", serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

/* Mobile responsive - تصغير حجم خط ومستطيل النص في قسم الهيرو */
@media (max-width: 767px) {
    .hero-header h5 {
        font-size: 0.85rem !important;
        padding: 0.6rem 1.5rem !important;
    }
}

@media (max-width: 575px) {
    .hero-header h5 {
        font-size: 0.75rem !important;
        padding: 0.5rem 1.2rem !important;
    }
}

/* تقليل الفراغات حول قسم المنتجات (Project Section) */
.project-section-spacing {
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
}

/* استعادة المسافات الأصلية في سطح المكتب */
@media (min-width: 768px) {
    .project-section-spacing {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .project-section-spacing .container {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* تقليل الفراغ بعد قسم المنتجات */
.project-section-spacing + .container-fluid {
    padding-top: 2rem !important;
}

/* رفع محتوى قسم Service للأعلى وتقليل المسافات */
.service-section-spacing {
    padding-top: 0.5rem !important;
    padding-bottom: 1rem !important;
    margin-top: -1.5rem;
}

/* تقليل المسافة مع القسم التالي */
.service-section-spacing + .container-fluid {
    padding-top: 2rem !important;
}

/* رفع محتوى قسم Newsletter للأعلى وتقليل المسافات */
.newsletter-section-spacing {
    margin-top: -1.5rem !important;
}

/* تقليل المسافة مع القسم التالي (Footer) */
.newsletter-section-spacing + div {
    margin-top: -1.5rem !important;
}

/* تقليل مسافات قسم Project في وضع الموبايل */
@media (max-width: 767px) {
    .project-section-spacing {
        padding-top: 1rem !important;
        padding-bottom: 0.5rem !important;
        margin-top: -1rem;
    }

    .project-section-spacing .container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* تقليل المسافة في div الداخلي - رفع المعرض */
    .project-section-spacing .mt-3 {
        margin-top: -0.1rem !important;
        padding-bottom: 40px !important;
    }
}

@media (max-width: 575px) {
    .project-section-spacing {
        padding-top: 0.5rem !important;
        padding-bottom: 0.25rem !important;
        margin-top: -0.5rem;
    }

    .project-section-spacing .container {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .project-section-spacing .mt-3 {
        margin-top: -0.75rem !important;
        padding-bottom: 30px !important;
    }
}