/* // https://piccalil.li/blog/a-modern-css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    overflow-x: clip;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
video {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Fonts */
@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/PlayfairDisplay/PlayfairDisplay-Italic") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../fonts/PlayfairDisplay/PlayfairDisplay.woff2") format("woff2"),
        url("../fonts/PlayfairDisplay/PlayfairDisplay.woff") format("woff"),
        url("../fonts/PlayfairDisplay/PlayfairDisplay.ttf") format("truetype"),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url("../fonts/PlayfairDisplay/PlayfairDisplay.svg") format("svg");
    font-weight: 400;
}

@font-face {
    font-family: "Playfair Display Italic";
    src: url("../fonts/PlayfairDisplay/PlayfairDisplay-Italic.eot") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../fonts/PlayfairDisplay/PlayfairDisplay-Italic.woff2") format("woff2"),
        url("../fonts/PlayfairDisplay/PlayfairDisplay-Italic.woff") format("woff"),
        url("../fonts/PlayfairDisplay/PlayfairDisplay-Italic.ttf") format("truetype"),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url("../fonts/PlayfairDisplay/PlayfairDisplay-Italic.svg") format("svg");
    font-weight: 400;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat/Montserrat-Regular.eot") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../fonts/Montserrat/Montserrat-Regular.woff2") format("woff2"),
        url("../fonts/Montserrat/Montserrat-Regular.woff") format("woff"),
        url("../fonts/Montserrat/Montserrat-Regular.ttf") format("truetype"),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url("../fonts/Montserrat/Montserrat-Regular.svg") format("svg");
    font-weight: 400;
}

@font-face {
    font-family: "Montserrat Italic";
    src: url("../fonts/Montserrat/Montserrat-Italic.eot") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../fonts/Montserrat/Montserrat-Italic.woff2") format("woff2"),
        url("../fonts/Montserrat/Montserrat-Italic.woff") format("woff"),
        url("../fonts/Montserrat/Montserrat-Italic.ttf") format("truetype"),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url("../fonts/Montserrat/Montserrat-Italic.svg") format("svg");
    font-weight: 400;
}

@font-face {
    font-family: "Montserrat Semibold";
    src: url("../fonts/Montserrat/Montserrat-SemiBold.eot") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../fonts/Montserrat/Montserrat-SemiBold.woff2") format("woff2"),
        url("../fonts/Montserrat/Montserrat-SemiBold.woff") format("woff"),
        url("../fonts/Montserrat/Montserrat-SemiBold.ttf") format("truetype"),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url("../fonts/Montserrat/Montserrat-SemiBold.svg") format("svg");
    font-weight: 600;
}

@font-face {
    font-family: "Montserrat Semibold Italic";
    src: url("../fonts/Montserrat/Montserrat-SemiBoldItalic.eot") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../fonts/Montserrat/Montserrat-SemiBoldItalic.woff2") format("woff2"),
        url("../fonts/Montserrat/Montserrat-SemiBoldItalic.woff") format("woff"),
        url("../fonts/Montserrat/Montserrat-SemiBoldItalic.ttf") format("truetype"),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url("../fonts/Montserrat/Montserrat-SemiBoldItalic.svg") format("svg");
    font-weight: 600;
}

@font-face {
    font-family: "remixicon";

    src: url("../fonts/remixicon/remixicon.eot") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../fonts/remixicon/remixicon.woff2") format("woff2"),
        url("../fonts/remixicon/remixicon.woff") format("woff"),
        url("../fonts/remixicon/remixicon.ttf") format("truetype"),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url("../fonts/remixicon/remixicon.svg") format("svg");
    /* iOS 4.1- */
    font-display: swap;
}


[class^="ri-"],
[class*=" ri-"],
.important::before,
.cite::before,
.cite::after {
    font-family: "remixicon" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

.ri-phone-line:before {
    content: "\efec";
}

.ri-menu-line:before {
    content: "\ef3e";
}

.ri-close-large-line:before {
    content: "\f4c8";
}

.ri-arrow-right-line:before {
    content: "\ea6c";
}

.ri-feedback-line:before {
    content: "\ecc1";
}

.ri-telegram-line:before {
    content: "\f1f0";
}

.ri-whatsapp-line:before {
    content: "\f2bc";
}

.ri-mail-line:before {
    content: "\eef6";
}

.ri-mail-fill:before {
    content: "\eef3";

}

.ri-emotion-happy-line:before {
    content: "\ec8d";
}

.ri-arrow-down-line:before {
    content: "\ea4c";
}

.ri-instagram-line:before {
    content: "\ee66";
}

.ri-empathize-line:before {
    content: "\ec98";
}

.ri-pin-distance-line:before {
    content: "\effc";
}

.ri-wallet-3-line:before {
    content: "\f2ac";
}



@media(prefers-color-scheme: dark) {
    :root {
        --clr-primary-100: #393E46;

        --clr-neutral-100: var(--text);
        --clr-neutral-200: hsl(210, 20%, 98%);
        --clr-neutral-300: hsl(216, 12%, 84%);
        --clr-neutral-500: hsl(0, 0%, 90%);
        --clr-neutral-400: #9ca3af;
        --clr-neutral-600: hsla(0, 0%, 0%, 0.5);
        --clr-neutral-700: #000;

        --clr-accent-100: #EDC967;

        --clr-accent-200: hsla(22, 100%, 80%, 0.5);

        --clr-accent-400: rgba(17, 24, 39, 1);
        --clr-accent-500: rgba(31, 41, 55, 1);


        --bg-dark: oklch(0.1 0.035 264);
        --bg: oklch(0.15 0.035 264);
        --bg-light: oklch(0.2 0.035 264);
        --text: oklch(0.96 0.07 264);
        --text-muted: oklch(0.76 0.07 264);
        --highlight: oklch(0.5 0.07 264);
        --border: oklch(0.4 0.07 264);


        --border-muted: oklch(0.3 0.07 264);
        --primary: oklch(0.76 0.1 264);
        --secondary: oklch(0.76 0.1 84);
        --danger: oklch(0.7 0.07 30);
        --warning: oklch(0.7 0.07 100);
        --success: oklch(0.7 0.07 160);
        --info: oklch(0.7 0.07 260);

        --bg-section: var(--bg-dark);
        --bg-card: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
        --bg-card-hover: linear-gradient(0deg, var(--bg), var(--bg-light));

        --border-card: 1px solid var(--border);

        --bg-footer: #111827;


        /* Shadows */
        --shd-sm: 0 6px 6px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
        --shd-md: 0 12px 12px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
        --shd-lg: 0 8px 24px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
        --shd-xl: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
            0 0 32px -8px hsl(0, 0%, 0%, 0.12), 0 0 1px hsl(0, 0%, 0%, 0.2);

        --shd-sm-light: 0 6px 6px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
        --shd-md-light: 0 12px 12px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
        --shd-lg-light: 0 8px 24px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
        --shd-xl-light: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
            0 0 32px -8px hsl(0, 0%, 100%, 0.12), 0 0 1px hsl(0, 0%, 100%, 0.2);


    }


}

@media (prefers-color-scheme: light) {
    :root {
        --clr-primary-100: #FFF2E0;


        --clr-neutral-100: #000;
        --clr-neutral-200: hsl(210, 20%, 98%);
        --clr-neutral-300: hsl(216, 12%, 84%);
        --clr-neutral-500: hsl(0, 0%, 7%);
        --clr-neutral-400: #9ca3af;
        --clr-neutral-600: hsla(0, 0%, 0%, 0.5);
        --clr-neutral-700: #fff;

        --clr-accent-100: #AE8625;
        --clr-accent-200: hsla(22, 100%, 80%, 0.5);

        --clr-accent-400: #948979;
        --clr-accent-500: rgba(31, 41, 55, 1);

        --bg-dark: oklch(0.92 0.035 264);
        --bg: oklch(0.96 0.035 264);
        --bg-light: oklch(1 0.035 264);
        --text: oklch(0.15 0.07 264);
        --text-muted: oklch(0.4 0.07 264);
        --highlight: oklch(1 0.07 264);
        --border: oklch(0.6 0.07 264);
        --border-muted: oklch(0.7 0.07 264);
        --primary: oklch(0.4 0.1 264);
        --secondary: oklch(0.4 0.1 84);
        --danger: oklch(0.5 0.07 30);
        --warning: oklch(0.5 0.07 100);
        --success: oklch(0.5 0.07 160);
        --info: oklch(0.5 0.07 260);

        --bg-section: var(--bg-dark);
        --bg-card: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
        --border-card: 1px solid var(--bg);


        /* Shadows */
        --shd-sm: 0 6px 6px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
        --shd-md: 0 12px 12px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
        --shd-lg: 0 8px 24px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
        --shd-xl: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
            0 0 32px -8px hsl(0, 0%, 0%, 0.12), 0 0 1px hsl(0, 0%, 0%, 0.2);

        --shd-sm-light: 0 6px 6px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
        --shd-md-light: 0 12px 12px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
        --shd-lg-light: 0 8px 24px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
        --shd-xl-light: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
            0 0 32px -8px hsl(0, 0%, 100%, 0.12), 0 0 1px hsl(0, 0%, 100%, 0.2);
    }

    .page-footer {
        --clr-primary-100: #393E46;

        --clr-neutral-100: var(--text);
        --clr-neutral-200: hsl(210, 20%, 98%);
        --clr-neutral-300: hsl(216, 12%, 84%);
        --clr-neutral-500: hsl(0, 0%, 90%);
        --clr-neutral-400: #9ca3af;
        --clr-neutral-600: hsla(0, 0%, 0%, 0.5);
        --clr-neutral-700: #000;

        --clr-accent-100: #EDC967;

        --clr-accent-200: hsla(22, 100%, 80%, 0.5);

        --clr-accent-400: rgba(17, 24, 39, 1);
        --clr-accent-500: rgba(31, 41, 55, 1);


        --bg-dark: oklch(0.1 0.035 264);
        --bg: oklch(0.15 0.035 264);
        --bg-light: oklch(0.2 0.035 264);
        --text: oklch(0.96 0.07 264);
        --text-muted: oklch(0.76 0.07 264);
        --highlight: oklch(0.5 0.07 264);
        --border: oklch(0.4 0.07 264);
        --border-muted: oklch(0.3 0.07 264);
        --primary: oklch(0.76 0.1 264);
        --secondary: oklch(0.76 0.1 84);
        --danger: oklch(0.7 0.07 30);
        --warning: oklch(0.7 0.07 100);
        --success: oklch(0.7 0.07 160);
        --info: oklch(0.7 0.07 260);

        --bg-section: var(--bg-dark);
        --bg-card: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
        --bg-card-hover: linear-gradient(0deg, var(--bg), var(--bg-light));

        --border-card: 1px solid var(--border);

        --bg-footer: #111827;



    }


    .page-footer a {
        font-weight: 600;
    }
}

:root:has(.theme-toggle.dark) {
    --clr-primary-100: #393E46;

    --clr-neutral-100: var(--text);
    --clr-neutral-200: hsl(210, 20%, 98%);
    --clr-neutral-300: hsl(216, 12%, 84%);
    --clr-neutral-500: hsl(0, 0%, 90%);
    --clr-neutral-400: #9ca3af;
    --clr-neutral-600: hsla(0, 0%, 0%, 0.5);
    --clr-neutral-700: #000;

    --clr-accent-100: #EDC967;

    --clr-accent-200: hsla(22, 100%, 80%, 0.5);

    --clr-accent-400: rgba(17, 24, 39, 1);
    --clr-accent-500: rgba(31, 41, 55, 1);


    --bg-dark: oklch(0.1 0.035 264);
    --bg: oklch(0.15 0.035 264);
    --bg-light: oklch(0.2 0.035 264);
    --text: oklch(0.96 0.07 264);
    --text-muted: oklch(0.76 0.07 264);
    --highlight: oklch(0.5 0.07 264);
    --border: oklch(0.4 0.07 264);


    --border-muted: oklch(0.3 0.07 264);
    --primary: oklch(0.76 0.1 264);
    --secondary: oklch(0.76 0.1 84);
    --danger: oklch(0.7 0.07 30);
    --warning: oklch(0.7 0.07 100);
    --success: oklch(0.7 0.07 160);
    --info: oklch(0.7 0.07 260);

    --bg-section: var(--bg-dark);
    --bg-card: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
    --bg-card-hover: linear-gradient(0deg, var(--bg), var(--bg-light));

    --border-card: 1px solid var(--border);

    --bg-footer: #111827;
    /* Shadows */
    --shd-sm: 0 6px 6px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
    --shd-md: 0 12px 12px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
    --shd-lg: 0 8px 24px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
    --shd-xl: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
        0 0 32px -8px hsl(0, 0%, 0%, 0.12), 0 0 1px hsl(0, 0%, 0%, 0.2);

    --shd-sm-light: 0 6px 6px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
    --shd-md-light: 0 12px 12px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
    --shd-lg-light: 0 8px 24px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
    --shd-xl-light: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
        0 0 32px -8px hsl(0, 0%, 100%, 0.12), 0 0 1px hsl(0, 0%, 100%, 0.2);


}



:root:has(.theme-toggle.light) {
    --clr-primary-100: #FFF2E0;


    --clr-neutral-100: #000;
    --clr-neutral-200: hsl(210, 20%, 98%);
    --clr-neutral-300: hsl(216, 12%, 84%);
    --clr-neutral-500: hsl(0, 0%, 7%);
    --clr-neutral-400: #9ca3af;
    --clr-neutral-600: hsla(0, 0%, 0%, 0.5);
    --clr-neutral-700: #fff;

    --clr-accent-100: #AE8625;
    --clr-accent-200: hsla(22, 100%, 80%, 0.5);

    --clr-accent-400: #948979;
    --clr-accent-500: rgba(31, 41, 55, 1);

    --bg-dark: oklch(0.92 0.035 264);
    --bg: oklch(0.96 0.035 264);
    --bg-light: oklch(1 0.035 264);
    --text: oklch(0.15 0.07 264);
    --text-muted: oklch(0.4 0.07 264);
    --highlight: oklch(1 0.07 264);
    --border: oklch(0.6 0.07 264);
    --border-muted: oklch(0.7 0.07 264);
    --primary: oklch(0.4 0.1 264);
    --secondary: oklch(0.4 0.1 84);
    --danger: oklch(0.5 0.07 30);
    --warning: oklch(0.5 0.07 100);
    --success: oklch(0.5 0.07 160);
    --info: oklch(0.5 0.07 260);

    --bg-section: var(--bg-dark);
    --bg-card: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
    --border-card: 1px solid var(--bg);


    /* Shadows */
    --shd-sm: 0 6px 6px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
    --shd-md: 0 12px 12px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
    --shd-lg: 0 8px 24px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
    --shd-xl: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
        0 0 32px -8px hsl(0, 0%, 0%, 0.12), 0 0 1px hsl(0, 0%, 0%, 0.2);

    --shd-sm-light: 0 6px 6px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
    --shd-md-light: 0 12px 12px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
    --shd-lg-light: 0 8px 24px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
    --shd-xl-light: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
        0 0 32px -8px hsl(0, 0%, 100%, 0.12), 0 0 1px hsl(0, 0%, 100%, 0.2);
}

:root:has(.theme-toggle.light) .page-footer {
    --clr-primary-100: #393E46;

    --clr-neutral-100: var(--text);
    --clr-neutral-200: hsl(210, 20%, 98%);
    --clr-neutral-300: hsl(216, 12%, 84%);
    --clr-neutral-500: hsl(0, 0%, 90%);
    --clr-neutral-400: #9ca3af;
    --clr-neutral-600: hsla(0, 0%, 0%, 0.5);
    --clr-neutral-700: #000;

    --clr-accent-100: #EDC967;

    --clr-accent-200: hsla(22, 100%, 80%, 0.5);

    --clr-accent-400: rgba(17, 24, 39, 1);
    --clr-accent-500: rgba(31, 41, 55, 1);


    --bg-dark: oklch(0.1 0.035 264);
    --bg: oklch(0.15 0.035 264);
    --bg-light: oklch(0.2 0.035 264);
    --text: oklch(0.96 0.07 264);
    --text-muted: oklch(0.76 0.07 264);
    --highlight: oklch(0.5 0.07 264);
    --border: oklch(0.4 0.07 264);
    --border-muted: oklch(0.3 0.07 264);
    --primary: oklch(0.76 0.1 264);
    --secondary: oklch(0.76 0.1 84);
    --danger: oklch(0.7 0.07 30);
    --warning: oklch(0.7 0.07 100);
    --success: oklch(0.7 0.07 160);
    --info: oklch(0.7 0.07 260);

    --bg-section: var(--bg-dark);
    --bg-card: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
    --bg-card-hover: linear-gradient(0deg, var(--bg), var(--bg-light));

    --border-card: 1px solid var(--border);

    --bg-footer: #111827;



}



:root {
    /* Colors */

    /* Font Family */
    --ff-primary: "Montserrat", serif;
    --ff-heading: "Playfair Display", sans-serif;
    --ff-heading-i: "Playfair Display Italic", sans-serif;

    /* Font Sizes */
    --fs-100: 0.875rem;
    --fs-200: 1rem;
    --fs-300: 1.125rem;
    --fs-400: 1.25rem;
    --fs-500: 1.875rem;
    --fs-600: 2.25rem;
    --fs-700: 2.5rem;
    --fs-mobile-700: 2rem;

    /* Padding */
    --pad-100: 0.5rem;
    --pad-200: 1rem;
    --pad-300: 1.5rem;
    --pad-400: 2rem;
    --pad-500: 3rem;
    --pad-600: 4rem;
    --pad-700: 5rem;

    /* Margin */
    --mar-100: 0.5rem;
    --mar-200: 1rem;
    --mar-300: 1.5rem;
    --mar-400: 2rem;
    --mar-500: 3rem;
    --mar-600: 4rem;
    --mar-700: 5rem;

    /* Border-radius */
    --bor-rad-100: 0.5rem;
    --bor-rad-200: 1rem;
    --bor-rad-300: 1.5rem;
    --bor-rad-400: 2rem;
    --bor-rad-500: 3rem;
    --bor-rad-600: 4rem;
    --bor-rad-700: 5rem;



    /* Component sizes */
    --header-height: 4rem;
}

/* DEV ONLY */
.outline {
    outline: 1px solid lime;
}


/* Utility classes */
.bg-section {
    background-image: var(--bg-section);

}


.bg-section-2 {
    background-image: var(--bg-section-2);

}

.bg-footer {
    background: var(--bg-footer);
}

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

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

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

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

.bg-neutral-700 {
    background-color: var(--clr-neutral-700);
}

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

.pad-b-100 {
    padding-block: var(--pad-100);
}

.pad-b-200 {
    padding-block: var(--pad-200);
}

.pad-b-300 {
    padding-block: var(--pad-300);
}

.pad-b-400 {
    padding-block: var(--pad-400);
}

.pad-b-500 {
    padding-block: var(--pad-500);
}

.pad-b-600 {
    padding-block: var(--pad-600);
}

.pad-b-700 {
    padding-block: var(--pad-700);
}

.pad-i-100 {
    padding-block: var(--pad-100);
}

.pad-i-200 {
    padding-block: var(--pad-200);
}

.pad-i-300 {
    padding-block: var(--pad-300);
}

.pad-i-400 {
    padding-block: var(--pad-400);
}

.pad-i-500 {
    padding-block: var(--pad-500);
}

.pad-i-600 {
    padding-block: var(--pad-600);
}

.pad-i-700 {
    padding-block: var(--pad-700);
}

.mar-b-100 {
    padding-block: var(--pad-100);
}

.mar-b-200 {
    padding-block: var(--pad-200);
}

.mar-b-300 {
    padding-block: var(--pad-300);
}

.mar-b-400 {
    padding-block: var(--pad-400);
}

.mar-b-500 {
    padding-block: var(--pad-500);
}

.mar-b-600 {
    padding-block: var(--pad-600);
}

.mar-b-700 {
    padding-block: var(--pad-700);
}

.mar-i-100 {
    padding-block: var(--pad-100);
}

.mar-i-200 {
    padding-block: var(--pad-200);
}

.mar-i-300 {
    padding-block: var(--pad-300);
}

.mar-i-400 {
    padding-block: var(--pad-400);
}

.mar-i-500 {
    padding-block: var(--pad-500);
}

.mar-i-600 {
    padding-block: var(--pad-600);
}

.mar-i-700 {
    padding-block: var(--pad-700);
}

.text-neutral-100 {
    color: var(--clr-neutral-100);
}

.text-neutral-200 {
    color: var(--clr-neutral-200);
}

.text-neutral-300 {
    color: var(--clr-neutral-300);
}

.text-neutral-400 {
    color: var(--clr-neutral-400);
}

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

.text-neutral-700 {
    color: var(--clr-neutral-700);
}

.text-accent-100 {
    color: var(--clr-accent-100);
}

.ff-heading {
    font-family: var(--ff-heading);
}

.ff-heading-i {
    font-family: var(--ff-heading-i);
}

.fs-primary-heading {
    font-size: clamp(var(--fs-mobile-700), 1.3753rem + 1.2497vw, var(--fs-700));
    ;
}

.fs-200 {
    font-size: var(--fs-200);
}

.fs-300 {
    font-size: var(--fs-300);
}

.fs-400 {
    font-size: var(--fs-400);
}

.fs-500 {
    font-size: var(--fs-500);
}

.grid {
    display: grid;
    align-items: center;
    gap: var(--_gap);
}

ul.grid {
    gap: 2rem;
}

p,
li,
td {
    color: var(--text-muted);
    text-wrap: balance;
}

.preload-image {
    display: block;
}

.preload-image[src^='high-quality-image'] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--_gap);
}

.grid-auto-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--_min-width), 1fr));
    gap: var(--_gap);
}

.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.cta {
    display: flex;
    gap: .25rem;
    color: var(--clr-accent-100);
    border: var(--border-card);
    border-color: var(--clr-accent-100);
    background-color: var(--bg-light);

    padding: var(--pad-100) var(--pad-200);
    border-radius: 100vw;
    box-shadow: var(--shd-sm);
    text-transform: uppercase;
    font-weight: 600;
    height: 40px;
    line-height: 1;
    cursor: pointer;
    --border: var(var(--border-muted));


    background-size: 400% 100%;
    background-position: 0 0;
    align-items: center;
}

@media(max-width: 49.99em) {
    .cta {
        width: 100%;
        justify-content: center;
    }
}

.cta.transparent {
    border-color: var(--border);
    color: var(--text);
}

.cta:is(:hover, :active) {
    color: var(--bg);
    background: var(--clr-accent-100);
    box-shadow: var(--shd-md);


}

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

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* main styles */
h1,
h2,
h3 {
    color: var(--text);
    text-wrap: balance;
}

body {
    font-family: var(--ff-primary);
    background: var(--bg-dark);
    color: var(--text-muted);
    caret-color: var(--clr-accent-100);
    accent-color: var(--clr-accent-100);
}

/* Fixed bg */
/* .fixed-bg {
    width: 100%;
    height: 100%;
    background: url('../img/bg-3.jpg') no-repeat;

    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
} */

button {
    background: none;
    border: 0;
}

section {
    padding-block: var(--pad-700);
    padding-inline: var(--pad-100);
    position: relative;
    isolation: isolate;
    overflow-y: clip;

}

*::selection {
    color: var(--text);
    background-color: color-mix(in oklab, var(--clr-accent-100) 70%, var(--bg));
    /* mix-blend-mode: darken; */

}

/* 
section::after {
    content: "";
    position: absolute;
    width: 60%;
    height: 100%;
    
    inset: 0 50%;
    transform: translateX(-50%);
    
    box-shadow: 0 0 15rem #373737, 0 0 0 1000vw #373737;
    z-index: -1;
    
} */



@media(max-width: 49.99em) {
    section {
        padding-block: var(--pad-300);

    }
}

.section-heading {
    font-family: var(--ff-heading);
    font-size: var(--fs-500);
    background: var(--bg);
    border-radius: var(--bor-rad-100);
    padding-inline: var(--pad-300);
    padding-block: var(--pad-100);

    margin-inline: auto;

}

.section-heading:not(.card .section-heading) {
    margin-bottom: var(--mar-400);
}


/* @media(prefers-reduced-motion: no-preference) {

    @keyframes goldenGlow {
        0% {
            background-position: 0% 0%
        }

        100% {
            background-position: 100% 0%
        }
    }

    @keyframes fill {
        0% {
            background-color: var(--clr-neutral-100);
            background-image: linear-gradient(to right top, var(--clr-neutral-100) 99%, var(--clr-accent-100) 1%);
        }

        100% {
            background-color: var(--clr-accent-100);
            background-image: linear-gradient(to right top, var(--clr-neutral-100) 1%, var(--clr-accent-100) 99%);
        }
    }
} */

.content-wrapper {
    max-width: 1440px;
    margin-inline: auto;
    width: 100%;
}

/* Header */
.page-header {
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-inline: 0.5rem;
    color: var(--clr-neutral-100);
    background: var(--bg);
    border: var(--border-card);
    border-top-color: var(--highlight);


}

.page-header .content-wrapper {
    padding: var(--pad-100) var(--pad-200);
    border-radius: 100vw;

}

.logo {
    font-family: var(--ff-heading-i);
    --_gap: 1rem;
    color: var(--clr-accent-100);

}

.logo img {
    filter: drop-shadow(0 0 .1rem var(--text));
}

@media (max-width: 49.99em) {
    .logo span {
        display: none;
    }

    .page-header .content-wrapper {
        padding: var(--pad-100) 0;
        border-radius: 100vw;

    }
}

.primary-nav ul {
    --_gap: 1rem;
}

.primary-nav ul a {
    padding-bottom: 0.2rem;
    border-bottom: 2px solid transparent;
}

.primary-nav ul a:is(:hover, :active) {
    background-size: 400% 100%;
    background-position: 0 0;
    background-color: #EDC967;
    background-clip: text;

    font-weight: 600;
    color: transparent;
    transition: .2s ease-in;
    border-bottom: 2px solid #EDC967;
}

.primary-nav {
    display: flex;
    --_gap: 2rem;
    justify-content: space-between;
}

@media (max-width: 49.99em) {
    .page-header .buttons {
        --_gap: 1rem;
    }

    .page-header .buttons li span {
        display: none;
    }

    .mobile-menu button {
        border: var(--border-card);
        border-color: var(--border-muted);
        border-radius: var(--bor-rad-100);
        display: grid;
        place-items: center;
        font-size: 1.5rem;
        color: var(--text);
        aspect-ratio: 1;
        width: fit-content;
        z-index: 100;
    }

    .mobile-menu button i {
        aspect-ratio: 1;

    }

    .page-header .primary-nav {
        position: absolute;
        z-index: 10;
        inset: calc(var(--header-height) + 0.1rem) 0.5rem 1rem 0.5rem;
        height: calc(100vh - var(--header-height) - 0.1rem);
        display: none;
        place-content: start center;
        padding: var(--pad-300) 0.5rem;
        gap: 1rem;
        background: var(--bg-card);
        border-radius: 1rem;
        font-size: var(--fs-400);
        border: 1px solid var(--border-card);
        border-top-color: var(--highlight);
        isolation: isolate;
    }

    .page-header .primary-nav[data-visible] {
        display: grid;
    }

    .page-header .primary-nav .socials {
        width: 70%;
        font-size: var(--fs-500);
        margin-inline: auto;
        color: var(--clr-accent-100);
    }

    .page-header .primary-nav::before {
        content: "";
        inset: 0;
        border-radius: inherit;
        position: absolute;
        box-shadow: 0 0 0 10rem hsla(0, 0%, 0%, 0.75);
        z-index: -10;
    }

    .page-header .nav-list {
        width: 100%;
        margin-inline: auto;
        place-content: center;
        --_gap: 1rem;
        display: grid;

        grid-auto-flow: row;
    }

    .page-header .nav-list {
        width: 100%;
        margin-inline: auto;
        place-content: center;
        --_gap: 1rem;
        display: grid;
        grid-auto-flow: row;
    }

    .page-header .nav-list li {
        border-bottom: 1px solid var(--clr-neutral-100);
        padding: var(--pad-100) var(--pad-300);
        width: 100%;
        text-align: center;
    }

    .page-header .nav-list li a {
        width: 100%;
        display: inline-block;
    }

    .mobile-menu:has([aria-expanded="false"]) .ri-menu-line,
    .mobile-menu:has([aria-expanded="true"]) .ri-close-large-line {
        display: grid;
    }

    .mobile-menu:has([aria-expanded="false"]) .ri-close-large-line,
    .mobile-menu:has([aria-expanded="true"]) .ri-menu-line {
        display: none;
    }

    .mobile-menu:has([aria-expanded="true"]) .ri-close-large-line {
        z-index: 1000;
        color: var(--clr-accent-100);
    }

    .page-header .cta {
        width: 5rem;
        font-size: 1.5rem;
    }
}

@media (min-width: 50em) {
    .mobile-menu {
        display: none;
    }
}

.page-header .socials {
    font-size: 1.5rem;
    justify-self: flex-end;
}

.page-header .buttons .flex {
    --_gap: 1rem;
}


/* Promo */
.promo {
    --_gap: 1rem;
    min-height: 100vh;
    min-height: 100dvh;
    isolation: isolate;
    position: relative;
    display: grid;
}

.promo-bg {
    display: none;
}

.promo h2 {
    font-size: 1.5rem;
}

.promo-features i {
    font-size: 2rem;
    position: relative;
    display: grid;
    color: var(--clr-accent-100);


}

.promo-features i::after {
    content: "";
    width: 40px;
    aspect-ratio: 1/1;
    background-color: hsla(56, 100%, 88%, 0.2);
    position: absolute;
    box-shadow: 0 0 .5rem #ffcd59;
    border-radius: 50%;
    rotate: 30deg;
    place-self: center;
    z-index: -1;
}



.promo .layout {
    --_gap: 1.5rem;
    z-index: 0;
    padding-inline: var(--pad-100);
    grid-template-columns: subgrid;

}

/* .promo-banner, .promo h2 {
    z-index: 2;
} */

.promo .heading h1 {
    line-height: 1;
    color: var(--clr-accent-100);
}

.promo-features li {
    grid-row: span 3;

}

.promo-features ul {
    place-items: start;


}

@media (min-width: 50em) {
    .promo {

        --_gap: 2rem;
    }

    .promo-bg {
        display: grid;
        inset: 0;
        position: absolute;

        --_gap: 2rem;
        pointer-events: none;
        filter:
            drop-shadow(2px 0px 2px #00a2ff79) drop-shadow(0px 0px 2rem #afebf079);
    }

    .promo-bg img {
        position: absolute;
        object-fit: contain;
        right: 20%;
        bottom: 0;
        max-height: 80%;

    }


    .promo .content-wrapper {
        margin-block: auto;
        margin-inline: 25%;
        max-width: 800px;

    }

    .promo .layout {
        padding: var(--pad-400) var(--pad-300);
        width: fit-content;

        --_gap: 2rem;


    }

    .promo-features ul {

        grid-template-columns: 1fr 1fr;

    }

    .promo-features .card {
        grid-template-rows: subgrid;
        grid-row: span 3;
        max-width: 100%;
        height: 100%;
        display: grid;

    }


}



.promo-features .card {
    max-width: 100%;
    height: 100%;
    display: grid;
    place-content: start;
    gap: .5rem;
}

.promo-cta {
    max-width: fit-content;
    --_gap: 1rem;
}


@media (max-width: 49.99em) {
    .promo-cta {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* About */
.about .layout {
    place-content: center;
    --_gap: 1rem;
}

.about {
    position: relative;
}

.about .content-wrapper {
    --_gap: 2rem;
    position: relative;
}


@media (min-width: 50em) {
    .about .layout {
        grid-template-columns: 50% 50%;
    }

}



.about .layout p {
    border: 1px solid #f0cd7b;
    aspect-ratio: 1;
    font-size: var(--fs-400);
    color: var(--clr-neutral-100);
    overflow: clip;
    position: relative;

}

.about .layout p::before,
.about .layout p::after {
    font-family: "remixicon";
    color: #d4a945;
    font-size: 2rem;
    display: grid;
    position: absolute;
    width: 20%;
    aspect-ratio: 1;
    border-radius: 50% 0 0 0;
    background-color: transparent;
}

.about .layout p::before {
    place-content: start;
    padding: 1rem 0 0 1rem;
    content: "\ec51";
    inset: 0;
    box-shadow: -1rem -1rem 1rem #ceae738a;
}

.about .layout p::after {
    place-content: end;
    content: "\ec52";
    padding: 0 1rem 1rem 0;
    border-radius: 0 0 50% 0;
    right: 0;
    bottom: 0;
    box-shadow: 1rem 1rem 1rem #ceae738a;

}

@media(max-width: 49.99em) {

    .about .layout p::after,
    .about .layout p::before {
        content: "";
    }
}

.about .layout figure {
    background-image: radial-gradient(circle, #fefefe, var(--clr-accent-100));
    background-position: center;
    background-size: contain;
    border-radius: var(--bor-rad-300);

}

@media(min-width: 50em) {
    .about .study figcaption {
        font-weight: 600;
        padding-left: var(--pad-200);
        grid-column: 1/5;
        grid-row: 1/2;
    }
}

.about .layout figure img {
    border-radius: var(--bor-rad-300);
    border: 1px solid #f0cd7b;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top;
}

.about .study figure {
    --_gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));


}

.about .study figure img {
    object-fit: contain;
    object-position: left top;
    border: var(--border-card);
    border-color: var(--border-muted);

}

.about .study-scroller {
    display: none;
}

.about .study-scroller.active {
    content: "";
    position: absolute;
    inset: 50% 50%;
    translate: -50% -50%;
    background: #000000ea;
    width: fit-content;
    border-radius: var(--bor-rad-300);
    z-index: 1;
    padding: var(--pad-300);
    width: 1420px;
    height: 80%;


}

.about .study-scroller::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: 0 0 0 100rem hsla(0, 0%, 0%, 0.55);
}

.about .study-scroller figure img {
    position: absolute;
    inset: 50%;
    translate: -50% -50%;

}

.about .buttons {
    position: relative;
    height: 4rem;
    inset: 50% 0;
    align-self: center;
    justify-self: center;
    display: grid;
    align-content: center;
    width: 95%;

}

.btn-prev,
.btn-next {
    max-width: 4rem;
    height: 100%;
    width: 3rem;
    border: 1px solid var(--clr-neutral-100);
    position: absolute;
    font-size: 2rem;
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    padding: var(--pad-200);
    align-self: center;
    display: grid;
    place-content: center;
    color: var(--clr-neutral-100);


}

.btn-next {
    justify-self: end;
}

.btn-prev i {
    rotate: -180deg;
}

.card {
    padding: var(--pad-200);
    border-radius: var(--bor-rad-200);
    background: var(--bg-card);
    border: var(--border-card);
    border-top-color: var(--highlight);
    box-shadow: var(--shd-md);

}

.card .card {
    background: var(--bg-light);
    border-color: var(--border-muted);
    border-top-color: var(--border);
}

.card>img {
    border-radius: var(--bor-rad-200);
}

@media (min-width: 50em) {
    .card {
        padding: var(--pad-300);
        border-radius: var(--bor-rad-300);
    }

    .card>img {
        border-radius: var(--bor-rad-300);
    }
}

.features .layout ul {
    gap: 1rem;
    place-items: center;
}


.features .layout .img {
    grid-row: 1/2;
    grid-column: 1/2;
}

/* Features */
@media (min-width: 50em) {
    .features .layout ul:not(.services-item .features .layout ul) {
        grid-template-columns: 25% 50% 25%;


    }

    .features .layout .img {
        grid-row: 1/4;
        grid-column: 2/3;
        object-fit: contain;
        display: grid;
        place-content: center;
    }

    .features li.card {

        width: 220px;
        display: grid;
        place-content: center;
        gap: 1rem;
    }
}

.features li.card {
    background: var(--bg-light);
    --border: var(--border-muted);
}

.features li.card:hover {
    box-shadow: var(--shd-md);
    background: var(--bg-card-hover);
    border-color: var(--highlight);
}

.features:has(li.card:is(:hover, :active)) .img img {
    opacity: 0;
}

.features:has(li.card:is(:hover, :active)) .img {
    transition: .2s ease-in-out;
}

.features:has(li:nth-of-type(1).card:is(:hover, :active)) .img {

    background-image: url("/assets/img/features-1.png");

}

.features:has(li:nth-of-type(2).card:is(:hover, :active)) .img {

    background-image: url("/assets/img/features-4.png");

}

.features:has(li:nth-of-type(3).card:is(:hover, :active)) .img {

    background-image: url("/assets/img/features.png");

}

.features:has(li:nth-of-type(5).card:is(:hover, :active)) .img {

    background-image: url("/assets/img/features-5.png");

}

.features:has(li:nth-of-type(6).card:is(:hover, :active)) .img {

    background-image: url("/assets/img/features-3.png");

}

.features:has(li:nth-of-type(7).card:is(:hover, :active)) .img {

    background-image: url("/assets/img/features-6.png");

}

/* .features:has(.card:is(:hover,:active)) .features .img {
    background-image: url("assets/img/features.png");
} */
.features .img {
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    transition: .2s ease-in-out;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}



/* Services */
.services {
    --_gap: 2rem;
    --_min-width: 300px;


}

.services h3:not(.grid-auto-layout h3, li h3) {
    margin-bottom: var(--mar-200);
    padding-left: var(--pad-200);
}

li h3 {
    font: inherit;
    margin-bottom: .5rem;
}

.services li.card {
    color: var(--clr-neutral-100);
    aspect-ratio: 1;
    display: grid;
    gap: 1rem;
}

.services li.card a {
    display: flex;
    gap: .25rem;
    color: var(--text);
}

.services li.card a:is(:hover, :active) {
    color: var(--clr-accent-100);
}

.services .prefix {
    background: var(--bg-light);
}

.services .price-link {
    place-self: center;
    margin-top: var(--mar-300);
}

.services-item {
    --_gap: 3rem;
}

.services-item .price-link a {
    color: var(--text);
}

.services-item .price-link a:is(:hover, :active) {
    color: var(--clr-accent-100);
    text-decoration: underline;
}

.services-item .features .card {
    grid-template-rows: subgrid;
    grid-row: span 2;
    --_gap: 1rem;
    place-items: start;
}

.offer {
    background: var(--bg-light);
    border-color: var(--clr-accent-100);
    display: grid;
    place-content: center;
    text-align: center;
    width: fit-content;
}


.services-offer a {
    width: fit-content;
    margin-inline: auto;
    margin-top: var(--mar-400);
}


.order-list {
    padding-left: var(--pad-400);
    --_gap: 1rem;
}

.order-list>li:not(li:has(span)) {
    color: var(--text);
}

.order-list>li>ul {
    margin-top: var(--mar-100);
}

.order-list>li>span {
    color: var(--text);
}

.order-list a {
    color: var(--clr-accent-100);
}

/* Work order */
.work-order {
    overflow: hidden;
    isolation: isolate;
}

.work-order ul {
    --_gap: 1rem;

}

.work-order li {
    background-color: var(--clr-neutral-100);
    padding: var(--pad-300);
    border-radius: var(--bor-rad-300);
    box-shadow: var(--shd-md);
    justify-content: start;
    flex-wrap: wrap;
    --_gap: 1rem;
    font-family: var(--ff-heading);
    position: relative;
    font-size: var(--fs-400);
    font-weight: bold;
}

.work-order li:nth-child(n + 1)::before {
    content: "";
    height: 100vh;
    width: 4px;
    position: absolute;
    background-color: grey;
    inset: -30% 3rem;
    z-index: -2;
}

.work-order li:nth-child(n + 2)::before {
    inset-block: -80%;
}

.work-order li:nth-child(n + 3)::before {
    inset-block: -130%;
}

@media (min-width: 50em) {
    .work-order ul {
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 1fr;
        place-items: stretch;
    }

    .work-order li:nth-child(1) {
        grid-column: 1/2;
        grid-row: 1/3;
    }

    .work-order li:nth-child(2) {
        grid-column: 2/3;
        grid-row: 2/4;
    }

    .work-order li:nth-child(3) {
        grid-column: 3/4;
        grid-row: 3/5;
    }

    .work-order li:nth-child(4) {
        grid-column: 1/2;
        grid-row: 4/6;
    }

    .work-order li:nth-child(5) {
        grid-column: 2/3;
        grid-row: 5/7;
    }

    .work-order li:nth-child(6) {
        grid-column: 3/4;
        grid-row: 6/8;
    }
}

.work-order li i {
    font-family: "system ui";
    line-height: 1;
    display: grid;
    place-content: center;
    font-size: 1.5rem;
    width: 3rem;
    aspect-ratio: 1;
    background: var(--clr-accent-100);
    color: var(--clr-neutral-700);
    border-radius: 50%;
}

/* Featured Articles */
.featured-articles .blog-layout,
.blog .blog-layout {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    --_gap: 2rem;
    place-items: stretch;
    margin-top: 2rem;
}

.featured-articles .article,
.blog .article {
    border-radius: var(--bor-rad-300);
    overflow: hidden;
    box-shadow: var(--shd-md);
}

.post-content {
    padding: var(--pad-300);
    border-radius: var(--bor-rad-300);
}

.article figure,
.post-content figure {
    position: relative;
}

.article figure .categories {
    display: flex;
    flex-wrap: wrap;
}

.article figure time {
    align-self: end;
}

.article figure img,
.post-content figure img {
    width: 100%;
}

.article figcaption,
.post-content figcaption {
    position: absolute;
    inset: auto 0.5rem 0.5rem;
}

.article figcaption span,
.article figcaption time,
.post-content figcaption span,
.post-content figcaption time {
    background-color: hsla(0, 0%, 0%, 0.3);
    padding: var(--pad-100);
    border-radius: var(--bor-rad-100);
    line-height: 1;
    color: var(--clr-neutral-100);
}

.article .article-text {
    --_gap: 1rem;
    padding: var(--pad-300);
    height: 320px;
}

.article .article-text .flex {
    align-self: end;
}

.article .article-text span[itemprop="name"] {
    color: var(--clr-neutral-400);
}

/* Testimonials */
.testimonials-layout {
    margin-top: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    --_gap: 2rem;
    align-items: stretch;
}

.testimonial {
    --_gap: 1rem;
    border-radius: var(--bor-rad-300);
    padding: var(--pad-300);
    box-shadow: var(--shd-md);
}

.testimonial .author {
    justify-content: start;
    --_gap: 1rem;
}

.testimonial .author img {
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
}

.testimonial .author .grid {
    --_gap: 0.5rem;
    line-height: 1;
}

.testimonials .show-all .transparent {
    border-color: var(--clr-accent-100);
    color: var(--clr-accent-100);
}

.testimonials .show-all {
    place-content: center;
}

@media (min-width: 50em) {
    .testimonials .show-all {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
        place-items: center;
    }

    .testimonials .show-all a {
        max-width: fit-content;
    }
}

/* Contacts */
.contacts {
    position: relative;
}


.contacts .content-wrapper {
    --_min-width: 320px;
    --_gap: 1rem;

}

.contacts-info li:not(.work-hours li) {
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.5);
    padding-bottom: .5rem;
}


.form-wrapper {
    position: relative;
}

.contacts form>.grid {
    --_gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.form-group {
    display: grid;
    gap: 0.5rem;

}

.form-group input,
.form-group textarea,
.form-group select {
    border-radius: var(--bor-rad-300);
    padding: 0.75rem var(--pad-200);
    color: var(--clr-neutral-100);
    border: var(--border-card);
    background: var(--bg-light);

}

.form-group textarea {
    resize: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--clr-neutral-100);
}

.form-group button[type="submit"] {
    width: 10rem;
    margin-inline: auto;
}

/* CSS для кнопки submit */
button[type="submit"] {
    margin-inline: auto;
    display: grid;
    place-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: 0.15s ease-in-out;
}

button[type="submit"]:disabled {
    opacity: 0.65;
}

/* button[type="submit"]:not(:disabled)::before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-right: .5rem;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512.333 512'%3E%3Cpath fill='%23fff' d='M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z'/%3E%3C/svg%3E") transparent no-repeat center center;
  background-size: 100% 100%;
} */

button[type="submit"]:disabled::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    -webkit-animation: 0.75s linear infinite spinner-border;
    animation: 0.75s linear infinite spinner-border;
    border: 1px solid transparent;
}

button[type="submit"]:not(:disabled):hover {
    box-shadow: var(--shd-sm);
}

button[type="submit"]:not(:disabled):focus {
    outline: 0;
    box-shadow: var(--shd-sm);
}

/* Стили для сообщения об ошибках */
.form-error {
    position: relative;
    padding: 0.5rem 1rem 0.6rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    color: #dc3545;
    background-color: #dc35450d;
    border: 1px solid #dc3545;
}

.form-error_hide {
    display: none;
}

/* сообщение об успешной отправки формы */
.form-success {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    background: rgba(0, 0, 0, 0.4);
    font-size: 1.25rem;
    border-radius: 0.25rem;
    z-index: 3;
}

.form-success_hide {
    display: none;
}

.form-success__message {
    vertical-align: center;
    inset: 0;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    background-color: hsl(0, 0%, 50%);
    display: grid;
    place-content: center;
}

.form-success__btn {
    font-weight: 400;
    color: var(--clr-neutral-500);
    text-decoration: underline;
    border: none;
    background-color: transparent;
    display: inline;
    padding: 0;
}

.phone-input {
    padding-left: 2.25rem;
}

.form-group:has(input[type="hidden"]) {
    display: none;
}

input:focus-visible:not(input[type="checkbox"]),
textarea:focus,
button[type="submit"]:focus-visible,
select:focus-visible {
    outline: 2px solid var(--clr-accent-100);
    box-shadow: var(--shd-sm);
}

.form-group.form-agree {
    display: block;
    background: var(--bg-light);
}

.form-group.form-agree a:is(:hover, :active) {
    color: var(--clr-accent-100);
}

.form-group.form-agree input {
    width: fit-content;
}

@media (min-width: 50em) {
    .submit-button {
        width: 20rem;
        margin-inline: auto;
    }
}

label a {
    text-decoration: underline;
    text-decoration-skip: none;
}


.contacts-info li {
    justify-content: start;
    --_gap: 0.5rem;
}

.contacts-info li .big-icon {
    margin-bottom: 0;
}

.contacts-info li .grid {
    --_gap: 0.25rem;
}

.map {
    width: 100%;
}

.map iframe {
    width: 100%;
    border: 0;
    border-radius: var(--bor-rad-300);
    box-shadow: var(--shd-md);
}

/* Footer */
.page-footer {
    font-size: var(--fs-100);
    padding-inline: 0.5rem;
    padding-block: var(--pad-500) var(--pad-200);


}

.page-footer h3,
.page-footer li:not(.work-hours li, .socials li) {
    border-bottom: 1px solid hsla(0, 0%, 50%, 0.5);
    padding-bottom: .25rem;
}

.page-footer .content-wrapper {


    background-size: cover;
    --_gap: 2rem;
}

.footer-top {
    padding-bottom: 1rem;

}

.footer-top,
.footer-bottom {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
    --_gap: 2rem;
}

.footer-bottom {
    align-items: center;
}

.footer-top .footer-menu {
    --_gap: 1rem;

}

.footer-top .logo {
    justify-content: start;
    --_gap: 1rem;
}

.footer-top .footer-location {
    --_gap: 1rem;
}

.footer-top .footer-info {
    --_gap: 1rem;
}

.footer-top .footer-info li .grid {
    --_gap: 0.5rem;
}

.footer-top .footer-info li {
    justify-content: start;
    --_gap: 1rem;
}

.footer-about {
    --_gap: 1rem;
}

.footer-about .socials {
    width: 70%;
    margin-inline: auto;
}

.footer-about .socials i {
    font-size: 2rem;
    color: var(--clr-accent-100);
}

.footer-bottom .copyright .flex {
    justify-content: flex-start;
}

.footer-bottom .documents {
    justify-content: flex-end;
}

@media (max-width: 49.99em) {
    .footer-bottom .documents {
        justify-content: center;
    }
}

.footer-bottom {

    padding-block: var(--pad-300);
}

.footer-menu ul {
    --_gap: 0.5rem;
}

.footer-location div:has(select) {
    width: fit-content;
    --_gap: 0.25rem;
    padding-left: 0.5rem;
    background-color: var(--clr-accent-200);
    border-radius: var(--bor-rad-200);
}

.footer-location .ri-earth-line {
    color: var(--clr-accent-100);
}

.footer-location select {
    background: none;
    padding: var(--pad-100);
    border-radius: 0 var(--bor-rad-200) var(--bor-rad-200) 0;
    color: var(--clr-neutral-100);
    font-family: inherit;
    border-color: transparent;
}

option {
    background: none;
    background-color: var(--bg);
    color: var(--clr-neutral-100);
}

/* Pricing */

ul.pricing-wrapper {
    max-width: 800px;
    margin-inline: auto;
    margin-top: 2rem;
    padding-inline: var(--pad-300);
    padding-bottom: 2rem;

}

.price-list .price {
    color: var(--clr-accent-100);
}

.price-list li:not(.price-li) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-muted);
}

.price-list li:not(.price-li) .price {
    min-width: fit-content;
    font-weight: bold;
}

.price-list {
    --_gap: 0.25rem;
}

.price-list,
.price-li {
    --_gap: 1rem;

}

.individual-price {
    display: flex;
    color: var(--clr-accent-100);
    position: relative;
    font-weight: bold;
    padding-left: calc(var(--pad-300) + 3rem);
    justify-content: start;
    max-width: 600px;
    margin-inline: auto;
    margin-top: 2rem;
}

/*
.individual-price::after {
    --_line-width: 6rem;
    content: "";
    position: absolute;
    width: var(--_line-width);
    height: 0.3rem;
    inset: 0 calc(50% + (var(--_line-width) / -2));
    background: var(--clr-accent-100);
    z-index: 2;
}
*/

.individual-price i {
    position: absolute;
    top: calc(var(--pad-300));
    left: calc(var(--pad-300));
    font-size: 2rem;


}

/* Contacts-page */
.contact-info {
    border-bottom: 1px solid var(--clr-accent-100);
    padding-bottom: var(--pad-500);
    margin-bottom: 3rem;
}

.contacts-layout {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    --_gap: 2rem;
    align-items: start;
    margin-top: 2rem;
    place-content: stretch;
}

.contacts-page .map {
    height: 100%;
}

.contacts-page .map iframe {
    height: 100%;
}

/* Policy */
.policy .content-wrapper {
    --_gap: 2rem;
}

.policy .policy-layout {
    padding: var(--pad-300);
    border-radius: var(--bor-rad-300);
    box-shadow: var(--shd-md);
    --_gap: 0.75rem;
}

.policy .policy-layout a {
    color: var(--clr-accent-100);
    text-decoration: underline;
}


/* FAQ */
.faq .section-heading {
    width: fit-content;
}

.faq-layout {
    margin-inline: auto;
    max-width: 900px;
    --_gap: 1rem;
    margin-block: 2rem;
}

.faq-layout details {
    padding: var(--pad-100) var(--pad-200);
    border-radius: var(--bor-rad-200);
    box-shadow: var(--shd-sm);
    background: var(--bg-light);
}

.faq-layout details i {
    font-size: 1.5rem;
}

details[open] i {
    rotate: 180deg;
}

.faq-cta,
.offer {
    padding: var(--pad-300);
    border-radius: var(--bor-rad-300);
    width: fit-content;
    margin-inline: auto;
    --_gap: 1rem;
    font-size: var(--fs-400);
}

.faq-cta .buttons {
    margin-inline: auto;
}

/* 404 */
@media(min-width:50em) {
    .error-page {
        min-height: 100vh;
        display: grid;
        place-content: center;


    }
}

.error-layout {
    padding: var(--pad-500);
    border-radius: var(--bor-rad-300);
    box-shadow: var(--shd-md);
}

.error-page .content-wrapper {
    place-self: center;
    place-items: center;
    gap: 1rem;
    margin-block: auto;
    padding-block: var(--pad-700);
}

.error-code {
    place-self: center;
    color: var(--clr-accent-100);
    font-weight: bold;
}

.error-page a {
    color: var(--clr-accent-100);
}

/* Payments table */
.payments-table {
    --_gap: 1rem;
    border-radius: var(--bor-rad-200);
}

@media(max-width: 49.99em) {
    .payments-table.card {
        padding-inline: .5rem;
    }
}

.payments-table thead {
    --_gap: 1rem;
    border-bottom: 1px solid var(--clr-accent-100);
    padding-bottom: var(--pad-100);
}

.payments-table tr {
    --_gap: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(6rem, 1fr));
}

.payments-table tr {
    --_gap: 1rem;
    display: grid;

}

.payments-table tbody tr {
    border-bottom: 1px solid var(--clr-neutral-300);
}

.payments-table td:nth-of-type(2) {
    text-align: right;
    place-self: center;
    color: var(--clr-accent-100);
}

@media (min-width: 50em) {
    .payments-table tbody tr {
        padding-inline: var(--pad-100);
    }
}

/* Theme switch */

:root:has(.theme-toggle.dark) .logo .light {
    display: none;
}

:root:has(.theme-toggle.light) .logo .dark {
    display: none;
}

.theme-toggle {
    background: var(--bg);
    --_toggle-width: 60px;
    --_toggle-height: calc(var(--_toggle-width) / 2.1 + var(--_padding));
    --_padding: .2rem;
    padding-inline: var(--_padding);
    width: var(--_toggle-width);
    height: var(--_toggle-height);
    border: var(--border-card);
    border-top-color: var(--highlight);
    border-radius: 100vw;
    border: 1px solid var(--border);
    display: grid;
    place-items: center start;
    position: relative;
}

.theme-toggle::after,
.theme-toggle::before {
    content: "";

    width: calc(var(--_toggle-height) - var(--_padding) * 2);
    aspect-ratio: 1;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    inset: auto var(--_padding);
}

.theme-toggle.dark::after {
    background-image: url("../img/moon.svg");
}

.theme-toggle.light::before {
    place-self: center end;
    background-image: url("../img/sun.svg");
    inset: auto var(--_padding);
}

.theme-toggle button {
    padding: 0;
    width: calc(var(--_toggle-height) - var(--_padding) * 2);
    aspect-ratio: 1;
    border-radius: 50%;

    z-index: 1;
    background-color: var(--bg);
}

.theme-toggle.light button {
    box-shadow: 0 2px 8px #000, 0 4px 8px #00000036;
    box-shadow: inset 0 0 0 calc(var(--_toggle-width) / 28) var(--bg), inset 0 0 0 calc(var(--_toggle-width) / 14) var(--text-muted), 0 2px 8px rgba(255, 255, 255, 0.281);
    transition: .2s ease-in-out;
}

.theme-toggle.dark button {
    transform: translateX(calc(100% + var(--_padding)));
    box-shadow: inset 0 0 0 calc(var(--_toggle-width) / 28) var(--bg-light), inset 0 0 0 calc(var(--_toggle-width) / 14) var(--text-muted), 0 2px 8px #ffffff41;
    transition: .2s ease-in-out;
}

/* online-booking */