/**
 * Theme Name: Portfolio for Business
 * Template:   business-wpcom
 */

@import url("https://use.typekit.net/bhi3cqa.css");
@import url("https://use.typekit.net/zxg6jgu.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,600;0,700;1,400;1,600;1,600;1,700&display=swap');

.page_container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.website_container {
    width: 600px;
}

.website {
    width: 100%;
}


/* New CSS */


:root {
    /* Colours */
    --dark-bg: #251a2c;
    --gradient: radial-gradient(circle at 62% 50%, rgba(255, 183, 138, 1) 15%, rgba(243, 243, 235, 1) 91%);

    --wp--style--global--background: #fafafa;

    --accent-light-900: #1C2800;
    --accent-light-800: #314500;
    --accent-light-700: #4D6600;
    --accent-light-600: #739400;
    --accent-light-500: #ddf46a;
    --accent-light-400: #E4F784;
    --accent-light-300: #EBF99C;
    --accent-light-200: #F1FAB8;
    --accent-light-100: #F6FCD2;
    --accent-light-50: #FAFEE8;
    --accent-light-25: #FCFEF3;
    --color-accent-light: #ddf46a;

    --accent-base-900: #110D3D;
    --accent-base-800: #1C1663;
    --accent-base-700: #2A2285;
    --accent-base-600: #4138AD;
    --accent-base-500: #5C4FD4;
    --accent-base-400: #7B73DE;
    --accent-base-300: #9B96E8;
    --accent-base-200: #BCB8F2;
    --accent-base-100: #D9D7F8;
    --accent-base-50: #ECEAFB;
    --accent-base-25: #F4F3FD;
    --color-accent-base: #6458cf;

    --color-words-base-900: #080808;
    --color-words-base-800: #111111;
    --color-words-base-700: #1b1b1b;
    --color-words-base-600: #2e2e2e;
    --color-words-base-500: #444444;
    --color-words-base-400: #636363;
    --color-words-base-300: #888888;
    --color-words-base-200: #B0B0B0;
    --color-words-base-100: #D0D0D0;
    --color-words-base-50: #E8E8E8;
    --color-words-base-25: #F4F4F4;
    --color-words-base: #1b1b1b;

    --color-shade-white: #D3D3D3;
    --white: #F4F3F2;
    --light-gray: #5E5E5E;
    --gray: #eeeeee;

    /* Font Styling */
    --wp--preset--font-family--heading: "polymath", sans-serif;
    --wp--preset--font-family--primary: "halyard-text", sans-serif;
    --h3-font: "Montserrat", sans-serif;
    --wp--preset--font-family--body: "Roboto-flex", sans-serif;

    /* Other */
    --flower-size: 12.6rem;

    /* button {
        background-color: var(--)
    } */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-size: 1rem;
    overflow-x: hidden;

    scroll-behavior: smooth;
    background: var(--wp--style--global--background);
}

h1 {
    display: inline-block;
    font-family: var(--wp--preset--font-family--heading);
    /* color: var(--color-words-base); */
    color: var(--dark-bg);
}

h3 {
    font-family: var(--h3-font);
    font-weight: 600;
    font-optical-sizing: auto;
    font-variation-settings: "wght" 600;
    font-synthesis: none;
}

h4 {
    /* color: var(--color-words-base); */
    color: var(--dark-bg);
    font-family: var(--wp--preset--font-family--primary);
    font-weight: 400;
    font-size: 2rem;
}

p {
    font-family: var(--wp--preset--font-family--body);
}

ul li,
p {
    font-size: clamp(1rem, 0.9342rem + 0.2632vw, 1.25rem);
}

.slide p,
.slide-more p {
    margin: 0;
}

#page {
    background-color: var(--wp--style--global--background);
    min-width: 100%;
}

/* Remove inherited top offset from parent theme wrapper */
#page-wrapper {
    padding-top: 0 !important;
}

/* Prevent WordPress admin-bar offsets from adding a visual gap above content */


html,
body,
body.admin-bar {
    margin-top: 0 !important;
}

@media screen and (min-width: 782px) {

    html,
    body,
    body.admin-bar {
        margin-top: 0 !important;
    }
}


main {
    background-color: var(--wp--style--global--background);
    width: 100%;
    height: fit-content;
}

#primary {
    border: none;
}


/* Menu Toggle Navigation */

.main-navigation.toggled .nav-menu {
    display: block;
}

article {
    background-color: var(--wp--style--global--background);
}



/* --------------------------------- HEADER --------------------------------- */

.logo svg {
    fill: var(--color-accent-base);
    width: 3.5em;
    height: auto;
}

.logo {
    width: 60px;
    height: auto;
}

/* -------------------------------- STICKERS -------------------------------- */

#sticker-flower {
    position: absolute;
    /* fill: var(--dark-bg); */
    /* fill: #bf8a67; */
    /* fill: #f7a399; */
    fill: var(--accent-base-200);
    width: var(--flower-size);
    height: auto;
    inset: 0;
}

header #sticker-flower {
    /* fill: var(--color-accent-base); */
    /* fill: #f1a26e; */
    /* fill: #f99864; */
    fill: var(--accent-base-300);
    color: var(--color-words-base);
}

#sticker-2 {
    position: absolute;
    left: 19%;
    top: 16em;

    /* transform: translateY(3em); */

    width: 6.5em;
    height: auto;


    opacity: 0.8;

    /* border: 1px solid red; */

    animation: spin 30s linear infinite;
}

.sticker.circular {
    position: absolute;

    width: var(--flower-size);
    min-height: fit-content;
    aspect-ratio: 1/1;

    animation: spin 60s linear infinite;

}

.site-header .sticker.circular {

    @media screen and (min-width: 1024px) {
        top: 18rem;
        left: 55vw;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        top: auto;
        left: 60vw;
    }

    @media screen and (min-width: 560px) and (max-width: 768px) {
        top: 70%;
        right: 3vw;
    }

    @media screen and (max-width: 560px) {
        display: none;
    }


}

.site-header.single .sticker.circular {
    display: none;
}

#about .sticker.circular {
    right: 10%;
    top: 5rem;
}

.site-footer .sticker.circular {
    right: 0;
    top: auto;

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        margin-top: -2rem;
    }

}


#text-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 8rem;
    height: 8rem;
    aspect-ratio: 1/1;
    text-transform: uppercase;
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 400;

    text {
        font-size: 4.35rem;
        font-weight: 600;
        letter-spacing: 1px;
        color: var(--gray);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.site-header {
    position: relative;

    opacity: 1;
    /* background-color: var(--wp--style--global--background) !important; */
    background-color: #f6f6f6;

    width: 100%;
    min-height: fit-content;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-start;

    gap: 2rem;


    color: var(--dark-bg);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 600;

    transition: all 0.3s ease-in-out;

    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;

    @media screen and (min-width: 1200px) {
        padding: 8rem 8rem 3rem 8rem;

    }

    @media screen and (min-width: 768px) and (max-width: 1200px) {
        padding: 8rem 2rem 5em 2rem;
    }

    @media screen and (max-width: 768px) {
        padding: 5rem 1rem;
        height: 80vh;
        min-height: fit-content;
    }

    &::before {
        content: '';
        background-image: url(template/img/grid-pattern.png);
        background-size: 90%;
        background-position: center center;
        /* background-attachment: fixed; */
        background-blend-mode: multiply;
        mix-blend-mode: multiply !important;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: -5vh;
        opacity: 0.25;
        pointer-events: none;
        z-index: 0;

    }

    >* {
        position: relative;
        z-index: 1;
    }

    .intro-container {
        /* margin-left: 5rem; */
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        /* align-items: flex-end; */
        align-items: center;
        justify-content: flex-start;
        gap: 5rem;
    }

    .location-col {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 5vh;
        height: 100%;
        padding: 1rem 0;

        hr {
            display: block;
            width: 0;
            height: 45vh;
            border: none;
            border-left: 2px solid var(--color-words-base-300);
            margin: 0;
        }
    }

    .intro {
        width: fit-content;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        justify-content: center;

        z-index: 99;

        /* border: 1px solid blue; */

        p {
            font-family: var(--wp--preset--font-family--body);
        }

        h4,
        p {
            /* font-size: clamp(1.25rem, 0.9859rem + 0.8451vw, 2rem); */
            font-size: clamp(1.5rem, 1.3684rem + 0.5263vw, 2rem);
        }

        #availability {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            flex-shrink: 0;
            /* font-size: clamp(1rem, 1vw, 2rem); */
            font-size: 1.25rem;
            font-family: var(--wp--preset--font-family--body);
            font-weight: 600;

            margin-top: 1.5em;
            padding: 0.25rem 1rem;
            background-color: rgb(227, 247, 225);
            color: #00942c;
            border: 1px solid #00942c;
            border-radius: 2rem;
            position: relative;
            overflow: hidden;
            isolation: isolate;

            transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
            animation: wave 3s ease-in-out infinite;
            cursor: pointer;

            a {
                color: #00942c;
                text-decoration: none;

                &:hover {
                    color: var(--white);
                }
            }


            &:hover,
            &:focus {
                background-color: var(--accent-light-400);
                border-color: var(--accent-light-400);
                cursor: default;

                &::after {
                    transform: scaleX(1);
                }

                a {
                    color: #00942c;
                }

            }

            &::before {
                content: '';
                background-color: #00942c;
                display: inline-block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 5px solid lightgreen;
                /* font-size: 100%; */
                /* -webkit-text-stroke: 10px lightgreen;
                paint-order: stroke fill; */
                margin-right: 0.5rem;
                animation: pulse 1.75s infinite !important;
                z-index: 1;
                position: relative;
            }

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background-color: var(--accent-light-400);
                border-radius: inherit;
                transform: scaleX(0);
                transform-origin: left center;
                transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
                z-index: 0;
                will-change: transform;
            }

            a {
                position: relative;
                z-index: 1;
            }


        }

        @media screen and (max-width: 768px) {
            align-items: flex-start;
        }

        .cta-btn {
            margin-top: 2rem;

            @media screen and (max-width: 768px) {
                margin-top: .5em;
                font-size: 1.5rem;
                padding: 0.5em;
            }
        }

    }

    .site-title {
        display: inline-block;
        line-height: 1em;
        font-size: clamp(3.5rem, 6.5vw, 10rem);
        font-weight: 600;
        text-transform: uppercase;
        font-family: var(--wp--preset--font-family--heading);



        @media screen and (min-width: 1024px) {
            font-size: clamp(6rem, 6.5vw, 10rem);
            width: 60%;
        }

        @media screen and (min-width: 768px) and (max-width: 1024px) {
            /* font-size: clamp(3.5rem, 6.5vw, 10rem); */
            font-size: 5rem;
            width: 80%;
        }

        @media screen and (max-width: 768px) {
            font-size: 5.5rem;
            text-align: left;
            width: 100%;
        }
    }

}

.site-header .intro h4 {
    @media screen and (min-width: 1024px) {
        width: 50%;
    }
}

/* --------------------------------- MARQUEE -------------------------------- */

/* Keep home marquee visible by preventing the first section from overlapping it */
.pink-mrq+section {
    margin-top: 0;
}

@keyframes wave {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1vh);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.5;

    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.pink-mrq {
    color: #bcbcbc !important;
    overflow: hidden;
    position: relative;

    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 0;
        width: 10%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }

    &::before {
        left: 0;
        background: linear-gradient(to right, var(--wp--style--global--background) 0%, transparent 100%);
    }

    &::after {
        right: 0;
        background: linear-gradient(to left, var(--wp--style--global--background) 0%, transparent 100%);
    }

    @media screen and (min-width: 1024px) {
        margin: 2rem 0 5rem 0;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        margin: 2rem 0;
    }

    @media screen and (max-width: 768px) {
        margin: 0.5rem 0;
    }


}

.marquee {
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

.marquee div {
    display: flex;
    flex-direction: row;
    width: max-content;
    overflow: hidden;
    gap: 2.5rem;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 3rem 0;
    animation: marquee 50s linear infinite;

    /* &:hover {
        animation-play-state: paused;
    } */
}

.marquee p {
    display: inline-block;
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 2.25rem;

    &::before {
        /* content: '✱'; */
        /* content: '•'; */
        content: '\2022';
        display: inline-block;
        width: 1.5rem;
        /* font-size: 50%; */
        margin-right: 2.5rem;
        margin-top: auto;
        margin-bottom: auto;
        color: #bcbcbc;
    }

    &:hover {
        color: var(--dark-bg);

        &::before {
            color: #bcbcbc;
        }
    }
}

header .site-title a {
    /* color: var(--color-words-base) !important; */
    color: var(--dark-bg);
    text-decoration: none !important;

    /* &:hover {
        color: var(--color-accent-base) !important;
    } */
}

.site-header.single .site-title {
    width: 60%;
}

/* ------------------------------- NAVIGATION ------------------------------- */



.main-navigation {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999999;
    pointer-events: auto;

    width: 100%;
    height: fit-content;

    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: space-between;
    gap: 6vw;

    margin: 0;
    transition: all 0.3s ease-in-out;

    @media screen and (min-width: 1024px) {
        padding: 1.5rem 8rem;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        padding: 2rem;
    }

    @media screen and (max-width: 768px) {
        padding: 1.75rem 1rem;
    }

    hr {
        display: block;
        width: 100%;
        flex: 1;
        flex-shrink: 0;
        height: 0;
        border: none;
        border-top: 2px solid var(--color-words-base-300);
        margin: 0;
    }

    ul {
        width: fit-content;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 5rem;
    }

    li {
        list-style: none;

        font-family: var(--wp--preset--font-family--heading);
        font-weight: 600;
        font-variation-settings: "wght" 600;
        font-optical-sizing: auto;
        font-synthesis: none;
        font-size: clamp(1.5rem, 2vw, 3rem);
        text-transform: lowercase;


        padding: 1rem;


    }

    ul li a {
        color: var(--color-words-base-400) !important;
        border-radius: 2.5vw;

    }

}

.main-navigation ul li:hover {
    transition: all 0.3s ease-in-out;

}

.main-navigation ul li:hover a {
    color: var(--dark-bg);
    background-color: var(--color-accent-light);

    transition: all 0.3s ease-in-out;

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

        letter-spacing: 0.15em;
        padding: 0 0.5rem;
        /* text-transform: uppercase; */
    }
}

/* Keep current page visibly highlighted in main nav */
.main-navigation li.current-menu-item>a:not(.logo a),
.main-navigation li.current_page_item>a:not(.logo a),
.main-navigation li.current-menu-ancestor>a:not(.logo a),
.main-navigation li.current_page_parent>a:not(.logo a),
.main-navigation li.current-page-ancestor>a:not(.logo a),
.main-navigation a[aria-current="page"]:not(.logo a) {
    color: var(--dark-bg);
    background-color: var(--color-accent-light);
    padding: 0 0.5rem;
}

.main-navigation ul li a,
.location-col a {
    text-transform: capitalize;
    font-family: var(--heading-font);
    font-size: 1.5rem;
    font-weight: var(--heading-weight);

    text-decoration: none;
    color: var(--dark-bg);

    background: transparent;


}

.location-col a {
    text-orientation: mixed;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ----------------------------- SECTION STYLING ---------------------------- */

section,
.site.single {
    background-color: var(--wp--style--global--background);
    position: relative;
    width: 100%;
    height: fit-content;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    @media screen and (min-width: 1024px) {
        padding: 0rem
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        padding: 0rem 2rem;
    }

    @media screen and (max-width: 768px) {
        padding: 3rem 1rem;
    }

}

.view-more {
    @media screen and (min-width: 1024px) {
        padding: 6rem 0;

    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        padding: 8rem 0rem 8rem 2rem;

    }

    @media screen and (max-width: 768px) {
        padding: 3rem 1rem;
    }
}

#more {
    @media screen and (min-width: 768px) and (max-width: 1024px) {
        padding: 8rem 2rem 8rem 2rem;

    }

    @media screen and (max-width: 768px) {
        padding: 3rem 1rem;
    }
}

#about .sticker.circular {
    z-index: 2;
}


.heading-label {
    background: none;
    margin: 0 auto !important;
    text-align: center;

    color: var(--color-words-base-200);
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(3rem, 2.2105rem + 3.1579vw, 6rem);
    font-style: normal;
    font-weight: 600;
    text-transform: capitalize;

}

.view-more .heading-label {

    @media screen and (min-width: 1024px) {
        padding-left: 5rem;
    }
}

/* About - Skills */

#skill-tab {
    margin: 0 auto !important;
    padding-top: 2rem;

    @media screen and (min-width: 1200px) {
        width: 70%;
    }

    @media screen and (max-width: 1200px) {
        width: 100%;
    }

}

#about .skill {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    margin: 0 auto !important;
    border-left: 2px dashed var(--color-words-base-200);
    padding: 0 0 0 3rem;

    .row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5vw;
    }

    h2 {
        font-family: var(--wp--preset--font-family--heading);
        font-size: clamp(0.75rem, 1.25vw, 2rem);
    }
}

.skill-label {
    display: flex;
    width: fit-content;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    color: var(--accent-base-500);
    /* font-family: var(--wp--preset--font-family--primary); */
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(1.5rem, 1.0395rem + 1.8421vw, 3.25rem);
    font-style: normal;
    font-weight: 600;
    font-variation-settings: "wght" 600;
    font-optical-sizing: auto;
    font-synthesis: none;
    line-height: normal;

}

.skill-label.design::before {
    content: '✿';
    font-size: inherit;
    color: var(--accent-base-500);
    transition: all 0.3s ease-in-out;
}

.skill-label.code::before {
    content: '</>';
    font-size: inherit;
    color: var(--accent-base-500);
    transition: all 0.3s ease-in-out;
}

.skill-label.design:hover::before {
    animation: spin 5s linear infinite;
}

.skill-label.code:hover::before {
    transform: scale(-1, 1);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


#archive-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 auto;

    @media screen and (min-width: 1440px) {
        width: 70%;
    }

    @media screen and (min-width: 768px) and (max-width: 1440px) {
        width: 90%;
    }

    @media screen and (max-width: 768px) {
        width: 100%;
    }

    p {
        font-size: clamp(1rem, 0.7632rem + 0.9474vw, 1.9rem);
    }
}



/* ---------------------------------- SECTION ID --------------------------------- */

/* Featured */

#featured {
    background-color: var(--wp--style--global--background);
    flex-direction: column;
}

/* More */


.flex-center {
    width: 100% !important;
    height: fit-content;

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
}

/* Contacts */

#contact {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    @media screen and (min-width: 1024px) {
        padding: 6rem 2rem 6rem 2rem;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        padding: 8rem 2rem 8rem 2rem;
    }

    @media screen and (max-width: 768px) {
        padding: 3rem 1rem;
    }

    h1 {
        /* color: var(--color-words-base); */
        color: var(--dark-bg);
        font-size: 6rem;
        font-weight: 600;
    }

    p {
        font-family: var(--wp--preset--font-family--body);
        color: var(--color-words-base);
        font-size: clamp(0.75rem, 2vw, 2rem);
    }

    ul {
        width: 80%;
    }
}

.contact-container {
    background: var(--wp--style--global--background);
    width: 85%;
    /* max-width: 1200px; */
    margin: 0 auto;
    height: 100%;

    display: flex;

    /* gap: 5rem; */

    padding: 5rem 5rem;

    h2 {
        font-family: var(--wp--preset--font-family--heading);
        font-weight: 200 !important;
        font-size: clamp(2rem, 2.5vw, 3.5rem);
    }

    h1 {
        font-family: var(--wp--preset--font-family--heading);
    }

    .text-container {
        display: flex;
        flex-direction: column;
        line-height: 1.25;

    }
}

.contact-container.form {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;

    @media screen and (max-width: 1600px) {
        flex-direction: column;
    }
}

.contact-container.social {
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 3vh;
}



/* ----------------------------- BUTTON STYLING ----------------------------- */

button {
    border: none;
    outline: none;
    cursor: pointer;
}

#wpforms-submit-187.wpforms-submit,
#wpforms-187 .wpforms-submit,
.cta-btn {
    width: fit-content;
    height: fit-content;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem 2rem;

    background-color: var(--color-accent-base);
    color: var(--white);

    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(1.25rem, 1.0526rem + 0.7895vw, 2rem);
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0 !important;

    text-indent: 0px;

    border-radius: 8px;
    position: relative;
    isolation: isolate;
    overflow: hidden;

    transition: all 0.3s ease-in-out !important;

    &:hover {
        background-color: var(--color-accent-light);
        color: var(--color-words-base) !important;
        /* border-radius: 0.5rem; */
        padding-right: 4rem;

        &::before {
            transform: scaleX(1);
        }

        &::after {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: var(--color-accent-light);
        border-radius: inherit;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: -1;
        will-change: transform;
    }

    &::after {
        content: "\2192";
        position: absolute;
        font-family: var(--wp--preset--font-family--heading);
        right: 1rem;
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) translateX(-0.35rem);
        line-height: 1;
        pointer-events: none;
        transition: opacity 0.2s linear, transform 0.2s linear;
    }

}


.wp-block-buttons {
    background: none !important;
    text-align: center;
    width: 100%;
    justify-content: center;

}

.entry-content .wp-block-buttons,
.entry-summary .wp-block-buttons,
.page-content .wp-block-buttons {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}

.wp-block-button.has-custom-width {
    width: fit-content;
}


/* VIEW DEMO BUTTON ON POST */

.wp-block-buttons {
    background: none !important;
}

.wp-block-buttons>.wp-block-button.has-custom-width .wp-block-button__link {
    background: none !important;
    color: var(--color-words-base);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    font-size: 3rem;

    a {
        color: inherit;
        font-family: inherit;
        font-weight: inherit;
        font-size: inherit;
    }
}

.wp-block-buttons>.wp-block-button.wp-block-button__width-100 {
    background: none !important;
}

/* .wp-block-buttons>.wp-block-button.wp-block-button__width-50 {
    width: fit-content;
    border-radius: 1.25vw !important;
    background: var(--color-accent-light);
    transition: all 0.3s ease-in-out !important;

    &:hover {
        background-color: var(--color-words-base);
        color: var(--white);
    }
} */

.entry-content,
.entry-summary,
.page-content {
    @media screen and (max-width: 768px) {
        padding: 0 1rem;
        ;
    }

}

.entry-content button {
    background-color: var(--color-words-base) !important;
    color: var(--color-shade-white) !important;
}

button:focus {
    color: var(--white) !important;
    outline: none !important;
    background-color: var(--color-words-base);
}

/* ------------------------- HOME - PROJECTS STYLING ------------------------ */

/* source: https://codepen.io/bramus/pen/PobmGme */


:root {
    --card-height: fit-content;
    --card-margin: 4vw;
    --card-top-offset: 0em;
    --numcards: 3;

}

#cards {
    list-style: none;
    background: var(--wp--style--global--background);

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--numcards), var(--card-height));
    gap: var(--card-margin);
}

#cards {
    padding-bottom: calc(var(--numcards) * var(--card-top-offset));
    margin-bottom: 0;
}

.card {
    --index0: calc(var(--index) - 1);
    /* 0-based index */
    --reverse-index: calc(var(--numcards) - var(--index0));
    /* reverse index */
    --reverse-index0: calc(var(--reverse-index) - 1);
    /* 0-based reverse index */

    position: sticky;
    top: 5rem;
    padding-top: calc(var(--index) * var(--card-top-offset));
    height: fit-content;
}

#card_1 {
    --index: 1;

    @media screen and (min-width: 1024px) {

        .projects {
            border-left: 4px solid var(--accent-light-300);
        }
    }
}

#card_2 {
    --index: 2;

    @media screen and (min-width: 1024px) {
        .projects {
            border-left: 4px solid var(--accent-light-200);
        }
    }
}

#card_3 {
    --index: 3;

    @media screen and (min-width: 1024px) {
        .projects {
            border-left: 4px solid var(--accent-light-100);
        }
    }
}


/* Animations */

@media screen and (min-width: 600px) {

    @supports (animation-timeline: works) {

        /* .card__content {
            --start-range: calc(var(--index0) / var(--numcards) * 100%);
            --end-range: calc(var(--index) / var(--numcards) * 100%);

            animation: linear scale forwards;
            animation-timeline: --cards-element-scrolls-in-body;
            animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
        } */

        .card {
            --index0: calc(var(--index) - 1);
            /* 0-based index */
            --reverse-index: calc(var(--numcards) - var(--index0));
            /* reverse index */
            --reverse-index0: calc(var(--reverse-index) - 1);
            /* 0-based reverse index */
        }

        @keyframes scale {
            to {
                transform:
                    scale(calc(1.1 - calc(0.1 * var(--reverse-index))));
            }
        }

        #cards {
            --numcards: 3;
            view-timeline-name: --cards-element-scrolls-in-body;
            view-timeline-axis: block;
        }

        .card__content {
            --start-range: calc(var(--index0) / var(--numcards) * 100%);
            --end-range: calc((var(--index)) / var(--numcards) * 100%);

            animation: linear scale forwards;
            animation-timeline: --cards-element-scrolls-in-body;
            animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
        }
    }

}


/* ------- */

.projects {
    display: flex;
    width: fit-content;
    align-items: flex-start;
    justify-content: center;
    margin: 0 auto;

    @media screen and (min-width: 1024px) {
        gap: 5rem;
        padding: 2.25rem 0;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        gap: 2rem;
    }

    @media screen and (max-width: 768px) {
        gap: 2rem;
        padding: 0;
    }

}


.project-cover {
    position: relative;
    width: 40%;
    aspect-ratio: 1/1;
    overflow: hidden;

    border-radius: 1.25vw;

    /* background-color: rgba(0, 0, 0, 0); */
    transition: background-color ease !important;

    cursor: pointer;

    @media screen and (max-width: 1200px) {
        width: 100%;
    }

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.2) 35%,
                rgba(0, 0, 0, 0) 100%);
        opacity: 0;
        border-radius: 1.25vw;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
    }

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1.25vw;
        object-position: center center;
        transition: transform 0.3s ease-in-out;
    }

    &:hover img {
        transform: scale(1.1);
    }

    &:hover::after {
        opacity: 1;
    }

}


.projects.card__content {
    background-color: var(--wp--style--global--background);
}


.project-info {
    display: flex;
    flex-direction: column;

    gap: 0.5rem;

    /* overflow-y: scroll; */

    @media screen and (min-width: 1200px) {
        min-height: fit-content;
        width: 40%;
    }

    @media screen and (min-width: 768px) and (max-width: 1200px) {
        width: fit-content;
        height: fit-content;
    }

    @media screen and (max-width: 768px) {
        width: fit-content;
        height: fit-content;
    }

    h1 {
        font-family: var(--wp--preset--font-family--heading);
        color: var(--color-words-base-700);
        font-weight: 600;
        font-variation-settings: "wght" 600;
        font-optical-sizing: auto;
        font-synthesis: none;
        font-size: clamp(2.25rem, calc(2.0526rem + 0.4934vw), 3rem);
    }

    p {
        width: 100%;
        font-weight: 200;
    }

    .project-description {
        width: 100%;
        /* font-size: clamp(1.25rem, 1.1842rem + 0.2632vw, 1.5rem); */
    }

    button {
        margin-top: 1.5rem;
    }

}

.tools-roles {
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;

    #tools,
    #code {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        h4 {
            width: 100%;
            font-family: var(--wp--preset--font-family--heading);
            font-weight: 500;
            font-size: clamp(0.25rem, 1vw, 1.25rem);
            letter-spacing: 0.1em;
            color: var(--light-gray);
            text-transform: uppercase;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--light-gray);
        }

        p {
            color: var(--Black, #1A1317);
            font-family: "Roboto Flex";
            font-size: clamp(0.75rem, 1.5vw, 2rem);
            font-style: normal;
            font-weight: 400;
        }

        a p {
            color: var(--color-accent-base);
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3 ease;

            &:hover {
                /* color: var(--color-words-base); */
                color: var(--dark-bg);
            }
        }
    }
}

#tags {
    display: flex;
    flex-direction: row;
    gap: clamp(1rem, 1.5vw, 2rem);

    font-family: var(--wp--preset--font-family--body);
    font-weight: 400;
}

#tags p {
    width: max-content;
    cursor: pointer;
    color: var(--color-words-base-600);
    background-color: #fff;
    border: 1px solid var(--color-words-base-400);
    border-radius: 2.5vw;
    padding: 0.25rem 1rem;
    font-size: clamp(0.5rem, 1vw, 1.75rem);
    font-family: var(--wp--preset--font-family--heading);

    transition: all 0.3s ease;

    &:hover {
        background-color: var(--accent-light-400);
        border-color: var(--accent-light-400);
    }

    &:focus {
        background-color: var(--color-accent-light);
        border-color: var(--color-accent-light);
        color: var(--color-words-base);
    }
}

/* More - Projects */

.more-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vh, 3rem);
    min-width: 0;
    white-space: normal;


    transition: all 0.3s ease;

    h3 {
        font-family: var(--h3-font);
        font-size: clamp(1.5rem, 2.5vw, 3.5rem);
        color: var(--color-words-base);
        font-weight: 700;
        width: 100%;
    }

}

/* About Styling */

.about-container {
    height: fit-content;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5vw;
    margin: 0 auto;

    .about-info {
        display: flex;
        flex-direction: column;
        width: fit-content;
        height: fit-content;
        gap: 2rem;

        p {
            font-style: normal;
            font-weight: 400;
            line-height: 1.5em;
        }

        .introduction {
            margin: 0;
        }
    }
}

.about-img {

    border-radius: 2rem;
    object-fit: cover;
    overflow: hidden;


    @media screen and (min-width: 1440px) {
        width: 65%;
        height: 60vh;
    }

    @media screen and (min-width: 1200px) and (max-width: 1440px) {
        width: 65% !important;
        height: 80vh;
    }

    @media screen and (min-width: 768px) and (max-width: 1200px) {
        width: 100% !important;
        height: 50vh;
    }

    @media screen and (max-width: 768px) {
        width: 100% !important;
        height: 50vh;
    }


    img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center center;
        border-radius: inherit !important;
    }
}

.about-container.about {
    width: 70%;
    align-items: flex-start;

    @media screen and (min-width: 1440px) {
        margin-top: 20vh;
    }

    @media screen and (min-width: 768px) and (max-width: 1440px) {
        margin-top: 15vh;
    }

    @media screen and (max-width: 768px) {
        margin-top: 6rem;
    }
}

.about-container.skills {
    width: 100%;
    color: var(--color-words-base);
    font-family: var(--wp--preset--font-family--heading);
    align-items: flex-start;
    margin: 0 auto;


    @media screen and (max-width: 1200px) {
        width: 100%;
    }

    @media screen and (min-width: 768px) and (max-width: 1200px) {
        width: 90%;
    }
}


.social-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5.5vw;
    margin-top: 5.5vh;

    button {
        /* background: linear-gradient(180deg, #8151D5 0%, rgba(54, 26, 41, 0.00) 100%) !important; */
        background: var(--color-words-base) !important;

        width: fit-content;
        height: fit-content;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 2rem;

        border-radius: 1.5rem;

        padding: 1rem 1rem;

        transition: all 0.3s ease-in-out;
        animation: float 3s ease-in-out infinite !important;

        /* font-size: clamp(1.5rem, 2vw, 2rem); */
        font-size: clamp(0.75rem, 2vw, 2rem) !important;
        font-family: var(--wp--preset--font-family--heading) !important;
        text-transform: uppercase !important;

        &:hover {
            background-color: var(--color-accent-light) !important;
            fill: var(--white);


            img {
                filter: invert(1);
            }
        }

        img {
            width: 3.5rem;
            height: auto;
        }

    }

    a:nth-child(odd) {
        animation-delay: 0s !important;
        rotate: -8deg;
    }

    a:nth-child(even) {
        animation-delay: 1.5s !important;
        rotate: 8deg;
    }

}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1vh);
    }

    100% {
        transform: translateY(0);
    }
}




/* --------------------------------- FOOTER --------------------------------- */

.site-footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: fit-content;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5vh;
    margin-top: 25vh;


    /* background-color: var(--color-words-base); */
    /* background: linear-gradient(to top,
            #fbc3bc80 0%,
            #f7a39940 65%,
            transparent 100%); */
    background: linear-gradient(to top,
            #dac7ff57 0%,
            #ebe0ff8c 65%,
            transparent 100%);
    /* background: linear-gradient(to top,
            rgba(226, 225, 153, 0.3) 0%,
            rgba(204, 226, 104, 0.15) 65%,
            transparent 100%); */
    background-blend-mode: multiply;
    outline: none;
    border: none;

    @media screen and (min-width: 1024px) {
        padding: 5.12rem 6.25rem;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        padding: 4rem 2rem;
    }

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

        padding: 0 1rem 3rem 1rem;
    }


    h1,
    h2 {
        /* color: var(--color-words-base); */
        color: var(--dark-bg);
    }

    h3,
    p {
        color: var(--color-words-base);
    }

    button {
        background-color: var(--color-accent-base) !important;
        color: var(--white) !important;
        border: var(--color-accent-base);
    }

    img {
        width: 3rem;
        height: auto;
    }

    .footer-container {
        width: 100% !important;

        color: var(--white);

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        /* align-items: stretch; */

        /* border: 1px solid blue; */

    }

    .credit {
        font-size: clamp(0.75rem, 1.5vw, 1.25rem) !important;
        text-align: right;
        font-family: var(--h3-font);
        font-weight: 500;
    }

    .quick-links {
        width: 100% !important;
        font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
    }

    .question {
        font-size: clamp(1.5rem, 2vw, 3rem);
        font-weight: 600 !important;
        margin-bottom: 3rem;

        @media screen and (min-width: 1024px) {
            font-size: clamp(2rem, 2.2vw, 3rem);
        }

        @media screen and (min-width: 768px) and (max-width: 1024px) {
            font-size: clamp(2.5rem, 3vw, 4rem);
        }

        @media screen and (max-width: 768px) {
            font-size: 1.95rem;
        }

    }

    .social-links {
        background: none;
        gap: 3em;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        filter: invert(1);


        img:hover {
            transition: all 0.3s ease-in;
            transform: scale(1.25);
        }

        @media screen and (max-width: 785px) {
            justify-content: center;
        }
    }

    .footer-row {
        width: fit-content !important;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 6.25vw;
    }

    span {
        width: fit-content !important;
        text-align: left;

        h2 {
            width: fit-content !important;
        }

    }


}


.footer-links {
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 3vh;
    align-items: flex-start;

    @media screen and (max-width:768px) {
        align-items: center;
        margin: 0 auto;
    }
}

.footer-links span {
    display: flex;
    flex-direction: column;

    font-size: clamp(0.75rem, 1.5vw, 1.25rem) !important;

    @media screen and (max-width:768px) {
        align-items: center;
        margin: 0 auto;
        text-align: center;
    }
}

.footer-links a,
.footer-links a:visited,
.footer-links a:hover,
.footer-links a:focus {
    text-decoration: none !important;
    color: var(--color-shade-white) !important;
    font-family: var(--wp--preset--font-family--body) !important;
}

.footer-links h2 {
    font-weight: bold;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links ul li a {
    text-decoration: none;
    color: inherit;
}

/* --------------------------------- OTHERS --------------------------------- */

::selection {
    /* filter: invert(); */
    color: var(--white);
    background: var(--dark-bg);
}

/* --------------------------------- SLIDER --------------------------------- */

.slide {
    /* display: flex; */
    display: grid;
    grid-template-columns: repeat(3, 30vw);
    align-items: flex-start;
    row-gap: 5vh;
    /* column-gap: clamp(1rem, 1.5vw, 2rem); */
    /* flex-direction: row; */
    margin: 5rem auto;

    cursor: grab;
    overflow: hidden;

    min-width: 100%;
    height: fit-content;
    position: relative;

    @media screen and (min-width: 1024px) {
        justify-content: center;
        column-gap: 1.5vw;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
        overflow: visible;
        min-width: 0;
        margin: 0 auto;
    }

    @media screen and (max-width: 768px) {
        justify-content: space-between;
    }

    .project-cover {
        /* min-width: 31.25vw !important; */
        min-width: 100%;
        height: auto;
        aspect-ratio: 1/1;

        object-fit: cover;
        display: inline-block;

        @media screen and (max-width: 500px) {
            min-height: 200px;
            min-width: 200px;
        }

    }

}

/* -------------------------------- VIEW MORE ------------------------------- */


.slide-more {
    display: grid;
    grid-auto-flow: column;
    /* adds a new column per post automatically */
    grid-auto-columns: 31.25vw;
    /* each column is a fixed width */
    grid-template-rows: 1fr;
    /* single row — scroll horizontally */
    column-gap: 1rem;
    scroll-behavior: smooth;
    cursor: grab;
    overflow-x: scroll;


    padding: 5rem 7rem 5rem 5rem;

    width: 100%;
    min-width: 0;
    height: fit-content;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    transition: all 0.2s;
    transform: scale(0.98);
    will-change: transform;
    user-select: none;
    cursor: pointer;

    .project-cover {
        min-width: 31.25vw !important;
        height: auto;
        aspect-ratio: 1/1;

        object-fit: cover;
        display: inline-block;

        @media screen and (max-width: 500px) {
            min-height: 200px;
            min-width: 200px;
        }

    }

}

.slide-more::-webkit-scrollbar {
    height: 0.5rem;
}

.slide-more::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 5rem;
}

.slide-more::-webkit-scrollbar-thumb {
    background: var(--color-words-base);
    border-radius: 999px;
}


.slider {
    /* position: relative; */
    width: 100%;
    height: 100%;

}


/* --------------------------------- WP FORM -------------------------------- */

#wpforms-187 {
    width: 60%;

    @media screen and (max-width: 1600px) {
        width: 100%;
    }


    .wpforms-field-label {
        font-size: clamp(1rem, 1.5vw, 1.5rem) !important;
        color: var(--light-gray) !important;
        font-family: var(--h3-font) !important;
        font-weight: 500 !important;
    }

    input,
    textarea,
    select,
    radio,
    checkbox {
        width: 100% !important;
        border-bottom: 2px solid var(--light-gray) !important;
        outline: none !important;
        background: none !important;
        padding: 1.5rem 1rem !important;

    }

    .wpforms-field-sublabel {
        font-size: clamp(0.75rem, 1.5vw, 1.25rem) !important;
        color: var(--light-gray) !important;
    }

    .wpforms-field-row .wpforms-field-medium {
        width: 100% !important;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    button {
        width: fit-content;
        height: fit-content;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 1rem 2rem !important;
        margin: 0 auto !important;

        transform: translateY(2.5vh);

        background-color: var(--color-accent-light) !important;
        color: var(--color-words-base) !important;

        font-family: var(--wp--preset--font-family--heading) !important;
        font-size: clamp(0.75rem, 2vw, 2rem) !important;
        font-weight: 600 !important;

        border-radius: 1.25vw !important;

        transition: all 0.3s ease-in-out;

        &:hover,
        &:focus {
            background-color: var(--color-words-base) !important;
            color: var(--white) !important;

            border-radius: 1.5rem !important;
        }

    }

    .wpforms-field-row.wpforms-field-medium {
        width: 100% !important;
    }

    .wpforms-field-name-first,
    .wpforms-field-name-last {
        width: 100% !important;
    }

}

.wpforms-form input:not([type="submit"]) {
    outline: none;
}


/* ----------------------------- SINGLE PHP ---------------------------- */
/* ----------------------------- SINGLE PHP ---------------------------- */
/* ----------------------------- SINGLE PHP ---------------------------- */

.site-header.single,
.site-header.archive {
    width: 100%;
    height: fit-content;
    background-repeat: none !important;
    background-size: cover;
    background-position: center center;

    &::before {
        /* display: none; */
        content: '';
    }

    .intro-container {
        height: 30vh;
    }

    @media screen and (max-width: 768px) {
        height: 80vh;
        justify-content: center;
    }
}

main header .entry-header {
    background-image: none !important;
    background-color: #ffffff !important;
    background-attachment: scroll !important;
    color: var(--color-words-base) !important;
    padding: 4rem 5rem !important;
}

/* Universal styling for post */
.hentry {
    width: 100%;
    height: fit-content;

    p {
        @media screen and (min-width: 1024px) {
            font-size: clamp(0.75rem, 2vw, 1.5rem) !important;
        }

        @media screen and (min-width: 768px) and (max-width: 1024px) {
            font-size: 1.25rem !important;
        }

        @media screen and (max-width: 768px) {
            font-size: 1.25rem !important;
        }
    }

    /* border: 1px solid red; */

}

.project-banner,
.entry-content,
.entry-summary,
.page-content {

    max-width: 100% !important;
    margin: 0 auto !important;

    @media screen and (min-width: 1024px) {
        width: 65% !important;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        width: 100% !important;
    }

    @media screen and (max-width: 768px) {
        width: 100% !important;
    }

}

.entry-content>*:not(.alignfull),
.entry-summary>*:not(.alignfull),
.page-content>*:not(.alignfull) {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.entry-content>.alignfull {
    width: 100% !important;
    max-width: 100% !important;
}

/* Post Title */
.entry-title {
    display: none;
    width: fit-content;
    font-size: clamp(3rem, 5vw, 4rem) !important;
    font-weight: 600 !important;

    font-family: var(--wp--preset--font-family--heading) !important;
    padding: 3rem 0;
    margin: 0 auto !important;
    color: var(--color-words-base) !important;

    &:hover,
    &:focus {
        color: var(--color-accent-base) !important;
    }

    a:hover,
    a:focus {
        color: var(--color-accent-base) !important;
    }

    h2 {
        display: inline-block;
    }

}

.hentry .entry-title:last-child {
    display: none;
}


.entry-content {
    display: flex;
    flex-direction: column;


}

.entry-content .wp-block-columns {

    @media screen and (min-width: 1024px) {
        row-gap: 4rem;
    }

    @media screen and (max-width: 1024px) {
        row-gap: 1rem;
    }
}

.entry-content .wp-block-columns+.wp-block-columns {
    margin-bottom: 4rem;
}

.entry-content .wp-block-columns.is-layout-flex {
    align-items: center;
    justify-content: center;
}

.wp-block-image,
.wp-block-video,
.wp-block-image img,
.wp-block-video video {
    border-radius: 16px !important;
}

.project-banner {
    border-radius: 1.25vw;
    object-fit: cover;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: top left;
        border-radius: inherit !important;

        @media screen and (min-width: 1024px) {
            min-height: 100%;
            margin-top: 3rem;
        }

        @media screen and (min-width: 768px) and (max-width: 1024px) {
            min-height: 60vh;
            margin-top: 1rem;
            object-position: 85% center;
        }

        @media screen and (max-width: 768px) {
            min-height: 45vh;
            margin-top: 4rem;
            object-position: 85% center;
        }
    }
}

/* ------------------------------ POST STYLING ------------------------------ */

/* ---------------------------------- JONO ---------------------------------- */

.postid-228 #page,
.postid-228 main,
.postid-228 article,
.postid-228 .site-header,
.postid-228 section {
    background: transparent !important;
}

body.postid-228 {
    background: linear-gradient(180deg, #C7DDF6 10%, #FDFEF4 80%, #FDFEF4 100%) !important;
}


.postid-228 .entry-content {
    --title-color: #0C0D73;
    --subtitle-color: #3a4761;
    --jono-accent: #306DDE;

    h1,
    h2,
    h3 {
        color: var(--title-color);
        font-weight: 600 !important;
    }

    h5 {
        color: var(--subtitle-color) !important;
    }

    a {
        text-decoration: underline;
        color: var(--jono-accent) !important;
        transition: all 0.3s ease;

        &:hover,
        &:focus {
            color: var(--color-words-base) !important;
        }
    }
}

/* -------------------------------- STYLELAB -------------------------------- */

.postid-227 #page,
.postid-227 main,
.postid-227 article,
.postid-227 .site-header,
.postid-227 section {
    background: transparent !important;
}


body.postid-227 {
    --background-hex: #e7e7e7;
    --neutral: #3a3a3a;
    background: var(--background-hex) !important;
    background-image: linear-gradient(var(--neutral) 3px, transparent 3px), linear-gradient(to right, var(--neutral) 3px, var(--background-hex) 3px) !important;
    background-size: 40px 40px;
}

.postid-227 .entry-content {
    --title-color: #171717;
    --subtitle-color: #929292;
    --stylelab-accent: #0051ff;

    h1,
    h2,
    h3 {
        color: var(--title-color);
        font-weight: 600 !important;
    }

    h5 {
        color: var(--subtitle-color) !important;
    }

    a {
        color: var(--stylelab-accent) !important;
        transition: all 0.3s ease;
        text-decoration: underline;

        &:hover,
        &:focus {
            color: var(--color-words-base) !important;
        }
    }
}

/* --------------------------------- ECLIPSE -------------------------------- */

.postid-242 #page,
.postid-242 main,
.postid-242 article,
.postid-242 .site-header,
.postid-242 section {
    background: transparent !important;
}



.postid-242 .entry-content {
    --title-color: #3D1B12;
    --subtitle-color: #aaaaaa;
    --eclipse-accent: #910001;

    h1,
    h2,
    h3 {
        color: var(--title-color);
        font-weight: 600 !important;
    }

    h5 {
        color: var(--subtitle-color) !important;
    }

    a {
        text-decoration: underline;
        color: var(--eclipse-accent) !important;
        transition: all 0.3s ease;

        &:hover,
        &:focus {
            color: var(--color-words-base) !important;
        }
    }
}

/* --------------------------------- SCANWISE -------------------------------- */

.postid-284 #page,
.postid-284 main,
.postid-284 article,
.postid-284 .site-header,
.postid-284 section {
    background: transparent !important;
}


body.postid-284 {
    background: #E5F0FF !important;
}

.postid-284 .st-block {
    background: #d3ddec;
    padding: 2rem;
    border-radius: 1.25vw;

    p {
        font-size: 1.25rem !important;
        margin-bottom: 1rem;
    }
}


.postid-284 .entry-content {
    --title-color: #1B5840;
    --subtitle-color: #66756d;
    --scanwise-accent: #B3DA32;

    h1,
    h2,
    h3 {
        color: var(--title-color);
        font-weight: 600 !important;
    }

    h5 {
        color: var(--subtitle-color) !important;
    }

    a {
        text-decoration: underline;
        color: var(--scanwise-accent) !important;
        transition: all 0.3s ease;

        &:hover,
        &:focus {
            color: var(--color-words-base) !important;
        }
    }
}

/* -------------------------------- PAWADISE -------------------------------- */

.postid-361 #page,
.postid-361 main,
.postid-361 article,
.postid-361 .site-header,
.postid-361 section {
    background: transparent !important;
}


body.postid-361 {
    background: linear-gradient(180deg, #FDFEF4 0%, #FBEAEB 44.71%, #F9D5E2 73.08%, #F8C7DC 100%), linear-gradient(0deg, #F8C7DC 0%, #F8C7DC 100%), #F1EFE7;
}

.postid-361 .st-block {
    background: #d3ddec;
    padding: 2rem;
    border-radius: 1.25vw;

    p {
        font-size: 1.25rem !important;
        margin-bottom: 1rem;
    }
}


.postid-361 .entry-content {
    --title-color: #209653;
    --subtitle-color: #66756d;
    --pawadise-accent: #E85433;

    h1,
    h2,
    h3 {
        color: var(--title-color);
        font-weight: 600 !important;
    }

    h5 {
        color: var(--subtitle-color) !important;
    }

    a {
        text-decoration: underline;
        color: var(--pawadise-accent) !important;
        transition: all 0.3s ease;

        &:hover,
        &:focus {
            color: var(--color-words-base) !important;
        }
    }
}


/* ----------------------- CATEGORY // ARCHIVE STYLING ---------------------- */


.category .page-header {
    display: none;
}

/* .site-header.category {
    width: 100%;
    height: 60vh;
    height: fit-content !important;
    padding-bottom: 0;

    &::before {
        content: '';
        background-image: url(template/img/grid-pattern.png);
        background-size: 90%;
        background-position: center center;
        background-attachment: fixed;
        background-blend-mode: multiply;
        mix-blend-mode: multiply !important;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: -5vh;
        opacity: 0.25;
        pointer-events: none;
        z-index: 0;

    }
        
}*/



.site-header.archive .label {
    display: inline-flex;
    transform: rotate(-1.096deg);
    padding: 1.5rem 5rem;
    justify-content: center;
    align-items: center;

    border-radius: 0.25rem;
    background: var(--color-accent-light);

    h4 {
        color: var(--color-words-base);
        font-family: var(--heading-font);
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        /* line-height: 123.975%; */
        /* 2.4795rem */
        letter-spacing: 0.42rem;
        text-transform: uppercase;
    }
}

article {
    border: none;
}

article.project {
    width: 100% !important;
    flex-direction: row;
    gap: 2.5vw;
}

article header.entry-header {
    width: 100% !important;
}

article h1 a {
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(2rem, 5vw, 4.25rem);
    color: var(--dark-bg) !important;
    font-weight: 600;

    &:hover {
        /* color: var(--color-words-base) !important; */
        color: var(--color-accent-base) !important;
    }

}

.blog .hentry,
.archive .hentry,
.search .hentry {
    width: 100% !important;
    display: flex;
    justify-content: flex-start;
    margin-left: auto;
    margin-right: auto;
    gap: 2.5vw;

    /* 
    .post-thumbnail {
        width: 40%;
        height: auto;
        aspect-ratio: 1/1;
        background-size: cover;
        background-position: center;
        border-radius: 1.25vw;

        img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: inherit !important;
        }
    } */

}

/* --------------------------- META NAV PREV-NEXT --------------------------- */

/* Post Nav */

.navigation.post-navigation {
    width: 80% !important;
    margin: 0 auto 8rem auto !important;
}

.nav-links {
    background: transparent !important;
}

.post-navigation .nav-links a {
    color: var(--color-words-base);
    font-size: 2rem;
    text-transform: uppercase;
    padding: 0.5rem;

    &:hover {
        color: var(--color-words-base);
        background: var(--color-accent-light);
    }
}

/* ---------------------------- WP-BLOCK HEADING ---------------------------- */

.wp-block-heading {
    font-family: var(--wp--preset--font-family--heading) !important;
    font-weight: 700 !important;
    color: var(--color-words-base);

}

h1.wp-block-heading {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: var(--dark-bg);
    font-weight: 500 !important;

    @media screen and (min-width: 1024px) {
        font-size: 3rem;
    }
}

h5.wp-block-heading {
    color: #757575 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    width: 100%;
}

/* --------------------------------- IFRAME --------------------------------- */

.entry-content iframe[src*="figma.com"] {
    width: 100%;
    height: 80vh;
    margin: 0 auto;
}

/* ------------------------------ TABLET SCREEN ----------------------------- */

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

    .menu-toggle {
        display: none;
    }

    .site-header {

        .intro-container {
            /* margin-left: 2rem; */
            height: 35vh;
        }

    }

    #tags p {
        font-size: clamp(0.75rem, 1.5vw, 1rem);
    }

    header .sticker.circular {
        left: 65%;
        top: auto;
        margin-top: 15vh;
    }

    /* Break the sticky-edge card */

    #cards {
        grid-template-rows: unset;
        display: flex;
        flex-direction: column;
    }

    .card {
        position: relative;
        top: unset;
        padding-top: 0;
        height: fit-content;
    }

    .card__content {
        width: 100%;
        height: fit-content;
        margin: 0 auto;
    }


    /* Featured */

    #featured {
        padding: 3rem 2rem !important;
    }

    #featured ul {
        width: 100%;
        padding: 4.5rem 0;
    }

    #featured .card {
        width: 100%;
        top: 0;

        button {
            margin-top: 0.5em;
        }

        .projects {
            width: 100%;
            padding: 0;
            flex-direction: column;
            gap: 1.25rem;
            align-items: center;
            justify-content: center;
        }

        .project-info {
            width: 100%;
            gap: 0.75rem;
            /* align-items: center; */
            /* text-align: center; */

        }


        .tools-roles {
            display: none;
        }

        .cta-btn {
            margin: 0 auto;
            width: 100%;
        }
    }

    #featured .project-cover {
        width: 100%;
        height: 100%;
    }

    /* More */

    #more {
        padding: 8rem 2rem 3rem 2rem;
    }

    /* For Post's slide */

    .slider,
    .slide-track {
        width: 100%;
        flex-direction: column;
        padding: 0;
        margin: 0 auto;
    }

    .slide-more {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-rows: auto;
        column-gap: 1rem;
        row-gap: 1.5rem;
        padding: 3rem 0;
        min-width: 0;
        overflow-x: visible;
        white-space: normal;
        margin: 0 auto;
    }

    .more-card {
        width: 100%;
        gap: 1.5rem;

        h1 {
            font-size: 2.5rem;
        }

        .project-cover {
            width: 100%;
            height: auto;
        }
    }

    /* About */

    #about {

        .sticker.circular {
            right: 10%;
            top: auto;
        }

        .about-container {
            flex-direction: column;
        }

        .skill {
            width: 100%;
        }

        li {
            font-size: 1rem;
        }

    }

    .about-container.about {
        width: 90% !important;
        margin-top: 3rem;
    }

    /* Contact */

    .contact-container {
        padding: 3rem;
    }

    .contact-container.form {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
    }

    .wpforms-container,
    #wpforms-form-187 {
        width: 100% !important;
    }
}



/* ------------------------------- MENU TOGGLE ------------------------------ */

/* Overlay background */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 998;
}

.menu-overlay.active {
    display: block;
}

/* ------------------------------ SMALL SCREEN ----------------------------- */


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



    article {
        background-color: var(--wp--style--global--background);
    }

    :root {
        --card-height: fit-content;

    }

    /* button.menu-toggle {
        display: block;
        color: var(--wp--preset--color--color-words-base) !important;

        &:hover {
            background-color: var(--color-words-base) !important;
            color: var(--white) !important;
        }
    } */

    /* ------------------------------- MENU TOGGLE ------------------------------ */

    /* Slide-in panel */
    #primary-menu {
        display: block;
        position: fixed;
        top: 0;
        right: -100vw;
        width: 50vw;
        height: 100vh;
        padding: 5rem 3rem;
        background: var(--dark-bg);
        color: var(--white);

        list-style: none;
        margin: 0;
        transition: right 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }

    #primary-menu.toggled {
        color: var(--white);
        right: 0;
        z-index: 998;
    }

    #primary-menu li {
        padding: 10px 0;
        text-align: left;
        font-size: 2rem;


        &:hover {
            letter-spacing: normal;
        }

        &:focus {
            background-color: var(--dark-bg) !important;
        }

    }

    #primary-menu a {
        text-decoration: none;
        border: none;
        color: var(--white);
        font-size: 1.75rem;
        transition: all 0.3s ease-in-out;

        &:hover {
            letter-spacing: normal;
            color: var(--color-words-base);
            background-color: var(--color-accent-light);
        }
    }

    #primary-menu li.current-menu-item>a:not(.logo a),
    #primary-menu li.current_page_item>a:not(.logo a),
    #primary-menu li.current-menu-ancestor>a:not(.logo a),
    #primary-menu li.current_page_parent>a:not(.logo a),
    #primary-menu li.current-page-ancestor>a:not(.logo a),
    #primary-menu a[aria-current="page"]:not(.logo a) {
        color: var(--color-words-base);
        background-color: var(--color-accent-light);
        padding: 0 0.5rem;
    }

    .main-navigation #primary-menu li:before {
        display: none;
    }

    /* source: https://codepen.io/erikterwan/pen/EVzeRP */

    .menu-toggle {
        display: block;
        /* You can also use relative/absolute here if you want to stay on the top */
        position: fixed;
        top: 50px;
        left: auto;
        z-index: 9999999999;
        pointer-events: auto;

        background: none;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 0;

        -webkit-user-select: none;
        user-select: none;

        background: none;

        &:focus,
        &:hover {
            outline: none;
            background-color: none !important;
        }
    }

    .bar1,
    .bar2,
    .bar3 {
        width: 35px;
        height: 5px;
        background-color: var(--dark-bg);
        margin: 6px 0;
        transition: 0.4s;
    }

    button.menu-toggle.change .bar1 {
        transform: translate(0, 11px) rotate(-45deg);
    }

    button.menu-toggle.change .bar2 {
        opacity: 0;
    }

    button.menu-toggle.change .bar3 {
        transform: translate(0, -11px) rotate(45deg);
    }

    /* --------------------------- END OF MENU TOGGLE --------------------------- */

    #cards {
        grid-template-rows: unset;
        display: flex;
        flex-direction: column;
    }

    .card {
        position: relative;
        top: unset;
        padding-top: 0;
        height: fit-content;
    }

    .card__content {
        width: 100%;
        height: fit-content;
        margin: 0 auto;
    }

    /* This is the culprit */
    /* .project-info {
        min-height: unset;
    } */


    .site-header {
        z-index: 1;


        h1 {
            font-size: 3.333vw;
            line-height: .5em;
        }

        &::before {
            background-size: cover;
        }
    }

    .main-navigation {

        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        ul {
            display: none;
            flex-direction: column;
            gap: 1rem;
        }

        hr {
            display: none;
        }
    }

    .site-header .intro-container {
        align-items: center;
        justify-content: center;

        margin-left: 0;
        padding: 0;

    }

    .intro-container .location-col {
        display: none;
    }

    /* Main */

    .site-footer .sticker.circular {
        display: none;
    }


    #tags {


        p {
            font-size: 0.75rem;
            border-radius: 3rem;
        }
    }

    /* ARCHIVE */

    .projects {
        width: 100%;
        height: fit-content;
        flex-direction: column;
        gap: 1rem;
    }

    .projects .project-info {
        width: 100%;
        gap: 0.75rem;
        padding: 0 0 5rem 0;
    }



    /* SECTION */


    /* Section - Featured */

    #featured ul {
        width: 100%;
        padding: 4.5rem 0;
    }

    #featured .card {
        width: 100%;
        top: 0;

        button {
            margin-top: 0.5em;
        }

        .projects {
            width: 100%;
            padding: 0;
            flex-direction: column;
            gap: 1.25rem;
            align-items: center;
            justify-content: center;
        }

        .project-info {
            width: 100%;
            gap: 0.75rem;
            /* align-items: center; */
            /* text-align: center; */
        }

        .tools-roles {
            display: none;
        }

        .cta-btn {
            width: 100%;
        }
    }

    #featured .project-cover {
        width: 100%;
        height: 100%;
    }

    /* More work */

    #more {
        padding: 3rem 1rem !important;
    }

    .more-card {
        width: 100%;
        gap: 1.5rem;

        h1 {
            font-size: 2rem;
        }

        .project-cover {
            width: 100%;
            height: auto;
        }
    }


    .slide {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* For post */

    .slider,
    .slide-track {
        width: 100%;
        flex-direction: column;
        padding: 0;
        margin: 0 auto;
    }

    .slide-more {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-rows: auto;
        column-gap: 1rem;
        row-gap: 1.5rem;
        padding: 3rem 0;
        min-width: 0;
        overflow-x: visible;
        white-space: normal;
        margin: 0 auto;

    }

    /* Section - About */

    #about {
        flex-direction: column;
        /* padding: 3rem 0rem !important; */

    }

    #about .tabcontent {
        width: 100%;
        padding: 0rem 1rem 3rem 1rem;
    }

    .about-container {
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 3rem;
    }

    .about-container.about {
        width: 100%;
    }

    #about .skill {
        width: 100%;

    }

    /* Section - Contact */

    #contact {

        h1 {
            /* font-size: (1rem, 3.3vw, 4.25rem); */
            font-size: 4rem;
        }

        .contact-container {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 1rem 1rem;
        }

        .contact-container.form {
            flex-direction: column;
        }


        #wpforms-187,
        .wpforms-container {
            width: 100%;
            /* Parent div o of wpforms */
        }

        #wpforms-form-187 {
            width: 100%;


        }

        .wpforms-field-container {
            width: 100%;
        }

        #wpforms-187 {
            button {
                width: 100%;
            }
        }
    }

    /* Footer */

    .site-footer {
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 3rem;

        .footer-container {
            width: 100%;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3rem;
        }


        .question {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

        button {
            font-size: 1.5rem;
            margin: 0 auto;

            &:hover {
                color: var(--color-accent-base) !important;
                letter-spacing: 1.25px !important;
            }
        }

        .footer-row {
            width: 100%;
            gap: 5rem;
        }

        .credit {
            text-align: center;
        }

        span {
            width: 100%;
            text-align: center;
        }
    }
}

@media screen and (max-width: 600px) {
    .slide-more {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* ------------------------------- EXPERIENCE ------------------------------- */


.exp-card {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 0 2rem 2rem 2rem;

    &::after {
        content: '';
        width: 16px;
        height: 16px;
        background-color: var(--wp--style--global--background);
        border: 2px solid var(--color-words-base-100);
        border-radius: 50%;
        position: absolute;
        left: -0.5rem;
        top: 3%;
        z-index: 99 !important;
    }

    &::before {
        content: '';
        width: 2px;
        height: 100%;
        background-color: var(--color-words-base-100);
        position: absolute;
        left: -1px;
        z-index: 1;

    }

    &:first-child::before {
        top: 3%;
    }

    &:last-child::before {
        bottom: calc(100% - 3% - 16px);
    }
}

.exp-info {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;


}

.exp-position {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;


    h4 {
        font-size: clamp(1.125rem, 1.0263rem + 0.3947vw, 1.5rem);
        font-weight: 600;
        font-family: var(--wp--preset--font-family--heading);
    }

    h5 {
        color: var(--accent-base-500);
    }
}

.exp-date p {
    display: inline-block;
    width: fit-content;
    height: fit-content;
    margin: 0;
}

/* -------------------------------- CAROUSEL -------------------------------- */

.carousel-mrq {
    overflow: hidden;
    position: relative;

    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 0;
        width: 10%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }

    &::before {
        left: 0;
        background: linear-gradient(to right, var(--wp--style--global--background) 0%, transparent 100%);
        opacity: 0.8;
    }

    &::after {
        right: 0;
        background: linear-gradient(to left, var(--wp--style--global--background) 0%, transparent 100%);
        opacity: 0.8;
    }
}

.carousel {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    flex-direction: row;

    >* {
        flex: 0 0 100%;
    }


}

.imgcard {
    height: 35vh;
    color: white;
    border-radius: 1vw;
    box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
    padding: 0;
    overflow: hidden;

    @media screen and (min-width: 1440px) {
        width: 25vw
    }

    @media screen and (min-width: 1024px) and (max-width: 1440px) {
        width: 45vw
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        width: 60vw;
    }

    @media screen and (max-width: 768px) {
        width: 60vw;
    }


    &:nth-child(1) {
        background: #7958ff;
    }

    &:nth-child(2) {
        background: #5d34f2;
    }

    &:nth-child(3) {
        background: #4300da;
    }

    &:nth-child(4) {
        background: #372088;
    }

    &:nth-child(5) {
        background: #4300da;
    }


    img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center center;
    }
}

.group {
    display: flex;
    gap: 20px;
    /* Add padding to the right to create a gap between the last and first card. */
    padding-right: 20px;
    will-change: transform;
    /* We should be nice to the browser - let it know what we're going to animate. */
    animation: scrolling 30s linear infinite;
}

.carousel:hover .group {
    animation-play-state: paused;
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }

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