/* ==========================================================================
   Kooxn'Kay — site overrides.

   The original build repeated a near-identical inline <style> block in every
   HTML file. Those rules are consolidated here: the shared ones once, and the
   per-page accents driven by a `--accent` custom property that each page's
   wrapper sets (see src/components/SiteLayout.tsx and src/lib/site.ts).

   Loaded last, after main.css — see src/app/layout.tsx.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared
   -------------------------------------------------------------------------- */

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
}

body::-webkit-scrollbar {
    display: none;
}

/* Themeforest promo strip that common.js appends to <body>. */
.fix-bts {
    display: none;
}

.menu-full ul li.has-children > a:after {
    content: "" !important;
}

/* Base menu colour; the current page and the social links override it inline. */
.menu-social-links a,
.menu-full ul li a {
    color: #ffffff;
}

.logo-image img {
    max-width: 200px !important;
}

.spinner-logo {
    width: 320px !important;
}

.preloader .spinner.spinner-line {
    background: #ffffff;
}

body .swiper-pagination-progressbar .swiper-pagination-progressbar-fill,
.section.m-works-carousel .works-slide .desc .name:before {
    background: #ffffff;
    opacity: 1;
}

.footer .social-links a:before,
.footer-social-links a:before {
    background: #ffffff;
}

/* Magnific Popup mounts on <body>, so this one cannot be page-scoped. */
.mfp-container,
.mfp-close {
    cursor: default !important;
}

/* --------------------------------------------------------------------------
   Accent palette
   -------------------------------------------------------------------------- */

.page-about {
    --accent: #ff8f84;
}

.page-services {
    --accent: #5f7aff;
}

.page-gallery {
    --accent: #ffffff;
}

.page-testimonials {
    --accent: #ffd57b;
}

.page-contact {
    --accent: #ff4f4f;
}

.m-titles .m-title {
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 42px;
    line-height: 1.3;
    color: var(--accent, #ffffff);
    font-weight: 900;
}

.services-item .icon i {
    margin-bottom: 15px;
    display: inline-block;
    vertical-align: top;
    font-size: 59px;
    line-height: 69px;
    color: var(--accent, #ffffff);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

.page-home .hero-main-slider .slide-titles .title:after {
    background: #ffffff;
}

.page-home .btn:before,
.page-home a.btn:before {
    background: #5a5a5a;
}

.page-home .label .word {
    letter-spacing: 6px;
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.page-gallery .filter-links a:before {
    background: #ffffff !important;
}

.page-gallery .works-items.hide_description .works-item .desc,
.page-gallery .works-items.hide_category .works-item .desc .category,
.page-gallery .works-items.hide_title .works-item .desc .name {
    display: block !important;
}

.page-gallery .works-item:hover .image {
    transition: 0.6s ease-in-out;
    opacity: 0.3;
}

.page-gallery .works-item .desc .category {
    color: #ffffff;
    opacity: 0.6;
    font-weight: 300;
    letter-spacing: 2px;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.page-testimonials .js-testimonials .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--accent);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.page-contact .btn,
.page-contact a.btn {
    border-color: var(--accent) !important;
}

.page-contact .btn:before,
.page-contact a.btn:before {
    background: var(--accent);
}

.page-contact .submit a {
    float: right;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {

    .page-gallery .works-items.hide_description .works-item .desc,
    .page-gallery .works-items.hide_category .works-item .desc .category,
    .page-gallery .works-items.hide_title .works-item .desc .name {
        opacity: 0;
    }

    .page-gallery .works-item:hover .desc,
    .page-gallery .works-items.hide_category .works-item .desc .category,
    .page-gallery .works-items.hide_title .works-item .desc .name {
        opacity: 1;
        display: block !important;
    }

    .page-testimonials .section.hero-started .title {
        font-size: 62px !important;
    }
}

@media screen and (max-width: 574px) {

    :is(.page-about, .page-services, .page-testimonials, .page-contact) .section-inner,
    :is(.page-about, .page-services, .page-testimonials, .page-contact) .m-title {
        text-align: center;
    }

    :is(.page-about, .page-services, .page-testimonials, .page-contact) .m-title {
        margin-bottom: 80px !important;
    }

    .page-testimonials .text {
        text-align: center;
    }

    .page-testimonials .desc {
        text-align: left;
    }

    .page-testimonials .js-testimonials .swiper-pagination {
        text-align: center;
    }

    .page-testimonials .image {
        margin-left: 24% !important;
    }

    .page-contact .submit a {
        float: unset;
    }
}
