/* Styles that only apply to service.html */

/* Center & beautify bottom content */
        .beautiful-center {
            text-align: center;
            padding: 25px 20px;
        }

        .beautiful-center .title h2 {
            font-size: 26px;
            margin-bottom: 6px;
            font-weight: 700;
        }

        .beautiful-center .title h3 {
            font-size: 16px;
            color: #8b7355;
            /* light brown */
            font-weight: 500;
            margin-bottom: 15px;
        }

        /* Social Icons */
        .people-social {
            list-style: none;
            padding: 0;
            margin: 15px 0 0 0;
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        .people-social li a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background: #f2e6d8;
            /* soft light brown */
            color: #6d4c41;
            /* darker brown */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
            font-size: 15px;
        }

        .people-social li a:hover {
            background: #d2b48c;
            /* nice light brown */
            color: white;
            transform: translateY(-3px);
        }

        /* ===== FIX #1 & #2: Menu text color + Header background + Logo color ===== */
        nav .menu a {
            color: #fff !important;
            /* PURE white text */
            text-shadow: none;
            /* Remove any shadows */
            text-decoration: none;
        }

        /* Header background color - dark like the body */
        #header, .header-main {
            background-color: #494540 !important;
        }

        /* Make logo white on dark header */
        .header-logo img,
        .header-logo svg {
            filter: brightness(0) invert(1) !important;
        }
        /* ===== END OF FIXES ===== */

        /* Keep marquee images normal (not affected by filter) */
        .animation_block img,
        .marquee-track img {
            filter: none !important;
        }

        /* --- Updated Marquee & Layout CSS --- */

        /* General Dark Background to prevent white gaps */
        body, html, main, #content-block {
            background-color: #494540 !important;
            margin: 0;
            padding: 0;
        }
        /* Only set background on #content-block, do NOT reset its margin/padding */
        #content-block {
            background-color: #494540 !important;
        }

/* Footer global colour + top line */
#footer {
    border-top: 1px solid #c0b7b0;
    color: #c0b7b0;
}

#footer p {
    color: #c0b7b0;
}

#footer a {
    color: #c0b7b0;
}

#footer a:hover,
#footer a:focus,
#footer a:active {
    color: #c0b7b0;
}

/* Social icons */
#footer .social-icon i {
    color: #c0b7b0;
}

#footer .social a,
#footer .social-icon a {
    color: #c0b7b0 !important;
    border-color: #c0b7b0 !important;
}

#footer .social li a {
    border-color: #c0b7b0 !important;
}

#footer .social a:hover,
#footer .social-icon a:hover {
    color: #c0b7b0 !important;
    border-color: #c0b7b0 !important;
}
        /* --- MARQUEE SLIDER --- */

        /* Remove padding from slide to ensure no gaps */
        .marquee-slide {
            display: block !important;
            padding: 0 !important;
            margin: 0 !important;
            background-color: #1e1e1e;
        }

        /* Container */
        .marquee-container {
            width: 100%;
            overflow: hidden !important;
            display: block !important;
            background-color: #1e1e1e;
            position: relative !important; /* Added to position overlay */
        }

        /* Dark Sunglasses Overlay */
        .marquee-container::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* 50% black overlay */
            pointer-events: none; /* Allow interactions to pass through */
            z-index: 2;
        }

        /* Scrolling track */
        .marquee-track {
            display: flex !important;
            align-items: flex-start !important; /* Top align */
            gap: 0 !important;
            /* NO spacing — stick together */
            animation: marquee 40s linear infinite; /* Adjust speed as desired */
            width: max-content; /* Allow track to be as wide as images */
            will-change: transform;
        }

        /* Pause scrolling on hover */
        .marquee-track:hover {
            animation-play-state: paused !important;
        }

        /* Images: uniform 3:2 landscape frames */
        .marquee-track img {
            width: 25vw !important;
            height: 16.67vw !important;
            object-fit: cover !important;
            flex-shrink: 0 !important;
            display: block !important;
            border-radius: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* Animation: Move 50% to the left (assuming we duplicated the images once) */
        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* --- CRITICAL GAP FIXES --- */

        /* 1. Force the Marquee Container to match the image height EXACTLY. */
        #block-0,
        #block-0 .swiper-container,
        #block-0 .swiper-wrapper,
        #block-0 .swiper-slide,
        #block-0 .marquee-container {
            height: 16.67vw !important;
            max-height: 16.67vw !important;
            min-height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            background-color: #1e1e1e !important;
            overflow: hidden !important;
            line-height: 0 !important;
        }

        /* 2. Process Section (Block 1) - remove all spacing above it */
        #block-1.section.people_block {
            background-color: #494540 !important;
            display: block !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            height: auto !important;
            min-height: 0 !important;
        }

        /* 3. Remove default padding from the container holding the image */
        #block-1.section.people_block .container {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin-top: 0 !important;
        }

        /* 4. Ensure the image itself has no margins and behaves as a block */
        #block-1.section.people_block img {
            display: block;
            width: 100%;
            height: auto;
            margin: 0 auto;
            padding: 0;
            vertical-align: top; /* Prevents inline gap at bottom */
        }

        /* Remove anchor spacing if it causes gaps */
        .anchor {
            display: none;
        }

        .header-logo img,
.header-logo svg {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}
#loader-wrapper {
    display: none !important;
}

/* Skip animations, let theme handle logo sizing */
.header-logo img,
.header-logo svg {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}
#loader-wrapper {
    display: none !important;
}

/* Force content visible immediately */
#content-block,
#header {
    opacity: 1 !important;
    visibility: visible !important;
}

/*! This file is auto-generated */

/* Footer 3-column layout overrides */
#footer .social { justify-content: flex-end !important; }
#footer .footer-icon { display: flex; justify-content: center; }
@media (max-width: 767px) {
    #footer .social { justify-content: center !important; margin-top: 15px !important; }
    #footer .text-end { text-align: center !important; }
    #footer .footer-content-outer { justify-content: center; }
}

/* Footer global colour + top line */
        #footer {
            border-top: 1px solid #dbd0ba;  /* the line */
            color: #dbd0ba;                 /* default text colour */
        }

        /* Text inside footer */
        #footer p {
            color: #dbd0ba;
        }

        /* Links in footer */
        #footer a {
            color: #dbd0ba;
        }

        /* Keep hover/focus/active same colour */
        #footer a:hover,
        #footer a:focus,
        #footer a:active {
            color: #dbd0ba;
        }

        /* Social icons (Font Awesome) */
        #footer .social-icon i {
            color: #dbd0ba;
        }

/* Push content below fixed header */
main {
    padding-top: 110px !important;
}

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 767px) {
    main {
        padding-top: 80px !important;
    }
    .marquee-track img {
        width: 60vw !important;
        height: 40vw !important;
    }
    #block-0,
    #block-0 .swiper-container,
    #block-0 .swiper-wrapper,
    #block-0 .swiper-slide,
    #block-0 .marquee-container {
        height: 40vw !important;
        max-height: 40vw !important;
    }
    .beautiful-center .title h2 {
        font-size: 20px !important;
    }
    .beautiful-center .title h3 {
        font-size: 14px !important;
    }
    .people-social li a {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
}

/* Force arrow to be white */
.back-to-top.button,
.back-to-top.button::before,
.back-to-top.button::after {
    color: #fff !important;
    border-color: #fff !important;
    filter: brightness(0) invert(1) !important;
}

/* If arrow is an SVG or image inside the button */
.back-to-top.button svg,
.back-to-top.button img,
.back-to-top.button i {
    filter: brightness(0) invert(1) !important;
}