@font-face {
    font-family: 'Mersal';
    src: url('../fonts/Mersal/Mersal-Regular.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mersal';
    src: url('../fonts/Mersal/Mersal-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mersal';
    src: url('../fonts/Mersal/Mersal-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@layer theme {

    :root,
    :host {
        --font-Mersal: 'Mersal', sans-serif;
        --default-font-family: var(--font-Mersal);
        --color-red: oklch(0.3089 0.0997 26.57);
        --color-yellow: oklch(0.8672 0.1767 90.77);
        --color-red-100: oklch(0.9842 0.0076 27.23);
        --color-red-200: oklch(0.9481 0.0197 21.36);
        --color-red-300: oklch(0.78 0.085 21.89);
        --color-red-400: oklch(0.8722 0.0492 22.82);
        --color-gray-100: oklch(0.9923 0.0025 48.72);
        --color-gray-200: oklch(0.9761 0 0);
        --color-gray-500: oklch(0.5795 0 0);
        --color-gray-800: oklch(0.2891 0 0);
        --text-xs: .65rem;
        --text-sm: .775rem;
        --text-base: .9rem;
        --text-lg: 1.05rem;
        --text-xl: 1.2rem;
        --text-2xl: 1.4rem;
        --text-3xl: 1.6rem;
        --transition: 0.25s;
        --spark: 1.8s;
    }
}

@layer utilities {


    .color {
        color: var(--color);
    }

    html,
    :host {
        font-family: var(--default-font-family, sans-serif);
        font-weight: 300;
        line-height: 1.7;
    }

    *,
    ::before,
    ::after {
        box-sizing: border-box;
    }

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

    ::-webkit-scrollbar-thumb {
        background: var(--color-red);
    }

    ::-webkit-scrollbar-track {
        background: #fff;
    }

    /* Text selection */
    ::selection {
        background-color: var(--color-red);
        color: #fff;
    }

    .\32 xs\:text-\[1rem\] {
        @media (width >=23.438rem) {
            font-size: 1rem;
        }
    }

    .\32 xs\:w-8 {
        @media (width >=23.438rem) {
            width: calc(var(--spacing) * 8);
        }
    }

    .\32 xs\:h-8 {
        @media (width >=23.438rem) {
            height: calc(var(--spacing) * 8);
        }
    }

    .\32 xs\:min-w-42 {
        @media (width >=23.438rem) {
            min-width: calc(var(--spacing) * 42);
        }
    }

    .xs\:min-w-45 {
        @media (width >=26.563rem) {
            min-width: calc(var(--spacing) * 45);
        }
    }

    /* Colors */
    .bg-red {
        background-color: var(--color-red);
    }

    .bg-red-100 {
        background-color: var(--color-red-100);
    }

    .bg-red-200 {
        background-color: var(--color-red-200);
    }

    .bg-red-300 {
        background-color: var(--color-red-300);
    }

    .hover\:bg-red {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-red);
            }
        }
    }

    .hover\:bg-red-200 {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-red-200);
            }
        }
    }

    .bg-red-400 {
        background-color: var(--color-red-400);
    }

    .bg-yellow {
        background-color: var(--color-yellow);
    }

    .text-yellow {
        color: var(--color-yellow);
    }

    .hover\:border-yellow {
        &:hover {
            @media (hover: hover) {
                border-color: var(--color-yellow);
            }
        }
    }

    .hover\:border-red {
        &:hover {
            @media (hover: hover) {
                border-color: var(--color-red);
            }
        }
    }

    .hover\:bg-yellow {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-yellow);
            }
        }
    }

    .hover\:text-yellow {
        &:hover {
            @media (hover: hover) {
                color: var(--color-yellow);
            }
        }
    }

    .hover\:text-red {
        &:hover {
            @media (hover: hover) {
                color: var(--color-red);
            }
        }
    }

    .group-hover\:text-red {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                color: var(--color-red);
            }
        }
    }

    .group-hover\:text-yellow {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                color: var(--color-yellow);
            }
        }
    }

    .bg-gray-100 {
        background-color: var(--color-gray-100);
    }

    .text-red {
        color: var(--color-red);
    }

    .text-gray-800 {
        color: var(--color-gray-800);
    }

    .text-gray-500 {
        color: var(--color-gray-500);
    }

    .submenu {
        overflow: hidden;
        will-change: height, opacity;
    }

    .button-scale {
        --cut: 0.1em;
        --active: 0;
        /* --bg:
		radial-gradient(
			40% 50% at center 100%,
			hsl(270 calc(var(--active) * 97%) 72% / var(--active)),
			transparent
		),
		radial-gradient(
			80% 100% at center 120%,
			hsl(260 calc(var(--active) * 97%) 70% / var(--active)),
			transparent
		),
		hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%)); */
        box-shadow:
            0 0 calc(var(--active) * 6em) calc(var(--active) * 1em) hsl(0 0% 100% / 0.2),
            0 0.05em 0 0 hsl(0 0 100% / 0.5) inset,
            0 -0.05em 5px 0 hsl(0 0% 100% / 0.75) inset;
        transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
        scale: calc(1 + (var(--active) * 0.1));
    }

    .button-scale:active {
        scale: 1;
    }

    .button-scale:is(:hover, :focus-visible) path {
        animation-name: bounce;
    }

    @keyframes bounce {

        35%,
        65% {
            scale: var(--scale);
        }
    }

    .button-scale:before {
        content: "";
        position: absolute;
        inset: -0.25em;
        z-index: -1;
        border: 0.25em solid hsl(0 0% 100% / 0.5);
        border-radius: calc(var(--radius-md) + 0.3rem);
        opacity: var(--active, 0);
        transition: opacity var(--transition);
    }

    .spark {
        mask: linear-gradient(white, transparent 50%);
        animation: flip calc(var(--spark) * 2) infinite steps(2, end);
    }

    @keyframes flip {
        to {
            rotate: 360deg;
        }
    }

    .spark:before {
        content: "";
        position: absolute;
        width: 200%;
        aspect-ratio: 1;
        top: 0%;
        left: 50%;
        z-index: -1;
        translate: -50% -15%;
        rotate: 0;
        transform: rotate(-90deg);
        opacity: calc((var(--active)) + 0.4);
        background: conic-gradient(from 0deg,
                transparent 0 340deg,
                white 360deg);
        transition: opacity var(--transition);
        animation: rotate var(--spark) linear infinite both;
    }

    .spark:after {
        content: "";
        position: absolute;
        inset: var(--cut);
        border-radius: var(--radius-md);
    }

    .backdrop {
        inset: var(--cut);
        border-radius: var(--radius-md);
        transition: background var(--transition);
    }

    @keyframes rotate {
        to {
            transform: rotate(90deg);
        }
    }

    @supports(selector(:has(:is(+ *)))) {
        body:has(.button-scale:is(:hover, :focus-visible)) {
            --active: 1;
            --play-state: running;
        }
    }

    .button-scale:is(:hover, :focus-visible) {
        --active: 1;
        --play-state: running;
    }


    .sparkle-button {
        position: relative;
    }

    @keyframes float-out {
        to {
            rotate: 360deg;
        }
    }

    .text {
        translate: 2% -6%;
        background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));
        -webkit-background-clip: text;
        color: #fff;
        transition: background var(--transition);
    }

    .button-scale svg {
        translate: 0 -5%;
    }

    @keyframes floating {
        from {
            transform: translate(0, 0);
        }

        65% {
            transform: translate(0, 15px);
        }

        to {
            transform: translate(0, 0);
        }
    }

    .floating-animate {
        z-index: 2;
        animation: floating 3s ease-in-out infinite;
    }

    /* Desktop submenu */
    @media (min-width: 1024px) {
        .submenu {
            display: block !important;
            visibility: hidden;
            opacity: 0;
            transform: translateY(10px) scale(0.95);
            transition: opacity 0.3s ease,
                transform 0.3s ease,
                visibility 0.3s;
            pointer-events: none;
        }

        .submenu-item:hover .submenu {
            visibility: visible;
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
    }

    /* Mobile submenu */
    @media (max-width: 1023px) {
        .submenu.hidden {
            display: none;
        }
    }
}

.anim-slide {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(4px);
    visibility: hidden;
}

.servicesSwiper .swiper-slide .slide-box {
    gap: 2rem;
    overflow: hidden;
    transition: all 300ms linear;
}

.servicesSwiper .swiper-slide .slide-box {
    padding-block: calc(var(--spacing) * 12);
    padding-inline: calc(var(--spacing) * 3);
}

@media (min-width: 768px) {

    .servicesSwiper .swiper-slide .slide-box {
        padding-block: 0;
        padding-inline: 0;
    }

    .servicesSwiper .swiper-slide .slide-box {
        aspect-ratio: 12 / 9;
        transition: clip-path 200ms linear;
        clip-path: inset(0 0 40% 0);
        will-change: clipPath;
    }

    .servicesSwiper .swiper-slide .slide-image {
        width: 25vw;
        height: 14rem;
        transition: all 500ms ease-in-out;
    }

    .servicesSwiper .swiper-slide.swiper-slide-active .slide-box {
        grid-template-columns: 3fr 4fr;
        align-items: center;
        transform: scale(1);
        transform: translate(0%, 0px);
        clip-path: inset(0%);
        padding: calc(var(--spacing) * 5);
        background-color: var(--color-red);
    }

    .servicesSwiper .swiper-slide-active .slide-details {
        opacity: 1;
        visibility: visible
    }

    .servicesSwiper .swiper-slide-active .slide-box {
        transform: scale(1);
    }

    .servicesSwiper .swiper-slide.swiper-slide-prev .slide-box {
        direction: rtl;
    }

    html[dir="rtl"] .servicesSwiper .swiper-slide.swiper-slide-prev .slide-box {
        direction: ltr;
    }

    .servicesSwiper .swiper-slide.swiper-slide-active .slide-image {
        width: 100%;
        height: 100%;
        border-radius: .5rem;
    }
}

@media (min-width: 1023px) {
    .servicesSwiper .swiper-slide.swiper-slide-active .slide-box {
        padding: calc(var(--spacing) * 10);
    }

    .servicesSwiper .swiper-slide .slide-box {
        aspect-ratio: 16 / 9;
    }
}

.successSwiper .swiper-slide {
    overflow: hidden;
}

.successSwiper .swiper-slide .sc-wrp {
    overflow: hidden;
    transition: all 500ms ease-in-out;
}

.successSwiper .swiper-slide.swiper-slide-active .sc-wrp {
    transform: scaleY(1);
}

.successSwiper .swiper-slide.swiper-slide-prev .sc-wrp,
.successSwiper .swiper-slide.swiper-slide-next .sc-wrp {
    transform: scaleY(.87);
}

.successSwiper .swiper-slide .sc-wrp img {
    transition: all 500ms ease-in-out;
}

.successSwiper .swiper-slide.swiper-slide-prev .sc-wrp img,
.successSwiper .swiper-slide.swiper-slide-next .sc-wrp img {
    transform: scaleY(calc(1 / 0.87));
    transition: all 500ms ease-in-out;
}

.successSwiper .swiper-slide .sc-wrp {
    transform: scaleY(.78);
}

.successSwiper .swiper-slide .sc-wrp .sc-wrp img {
    transform: scaleY(calc(1 / 0.78));
}

.gl-white {
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(253, 248, 236, 1) 50%, rgba(0, 0, 0, 0) 100%);
}

.accordion-content {
    height: 0;
}

select:invalid {
    color: var(--color-gray-500);
}

select {
    color: var(--color-black);
}

.xs\:grid-cols-2 {
    @media (width >=23.438rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lg\:hover\:text-yellow {
    @media (width >=64rem) {
        &:hover {
            @media (hover: hover) {
                color: var(--color-yellow-500);
            }
        }
    }
}

@media (max-width: 1280px) {
    .servicesSwiper .swiper-slide .slide-image {
        width: 15vw;
        height: 12rem;
    }
}

@media (max-width: 767px) {

    .servicesSwiper .swiper-slide.swiper-slide-active .slide-box {
        grid-template-columns: 1fr;
        aspect-ratio: auto;
    }

    .servicesSwiper {
        background-color: var(--color-red);
    }

    .servicesSwiper .swiper-slide .slide-image {
        width: 100%;
        height: 20rem;
    }
}