@import url('reset.css');

@layer reset;

:root {
    --fh: "Asap", sans-serif;
    --fb: "Asap", -apple-system, blinkmacsystemfont, avenir next, avenir, segoe ui, helvetica neue, helvetica, cantarell, ubuntu, roboto, noto, arial, sans-serif;
    --fs: 16px --c-pearlaqua: hsl(166deg 38% 54%);
    --fs1: 3.8rem;
    --fs2: 2rem;
    --c-white: hsl(0deg 0% 100%);
    --c-black: hsl(0deg 0% 0%);
    --c-mustard: hsl(49.1deg 97.8% 63.5%);
    --c-mustard-90: hsl(49.1deg 97.8% 90%);
    --c-mustard-95: hsl(49.1deg 97.8% 95%);
    --c-yelloworange: hsl(33.8deg 95.2% 59.4%);
    --c-yelloworange-dark: hsl(33.8deg 95.2% 43.9%);
    --c-grey-10: hsl(0deg 0% 10%);
    --c-grey-20: hsl(0deg 0% 20%);
    --c-grey-50: hsl(0deg 0% 50%);
    --c-grey-80: hsl(0deg 0% 80%);
    --c-grey-90: hsl(0deg 0% 90%);
    --c-grey-95: hsl(0deg 0% 95%);
    --c-grey-98: hsl(0deg 0% 98%);
    --c-primary: var(--c-mustard);
    --c-secondary: var(--c-yelloworange);
    --column: 100px;
    --container: calc(16 * var(--column));
    --form-control-color: var(--c-primary);
}

@custom-media --l (max-width: 1024px);
@custom-media --m (max-width: 820px);
@custom-media --sm (max-width: 620px);
@custom-media --s (max-width: 480px);
@custom-media --xs (max-width: 380px);

body {
    font-family: var(--fb);
    font-size: var(--fs);
    color: var(--c-black);
    background-color: var(--c-white);
    margin: 0;
}

.container {
    width: min(var(--container), calc(100% - 20px));
    margin-inline: auto;
}

.site-header {
    border-bottom: 1px solid var(--c-grey-90);
    background: var(--c-white);

    .container {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
    }

    .headerlogo {
        width: 150px;
        position: relative;
        padding: 10px 0;

        img {
            position: absolute;
        }
    }

    .headermenu .menu {
        display: flex;
        list-style: none;
        text-decoration: none;
        height: 100%;
        align-items: center;
        justify-content: center;

        .menu-item {
            margin: 8px;

            a {
                padding: 8px;
                display: block;
                text-decoration: none;
                font-weight: 600;
                color: var(--c-grey-20);
                border-bottom: 3px solid transparent;

                &:hover {
                    border-bottom: 3px solid var(--c-mustard);
                }
            }
        }
    }

    .headersearch {
        background: var(--c-grey-95);
        border: none;
        display: flex;
        align-items: center;
        border-radius: 6px;
        margin: 10px 0;

        .headersearch__icon {
            padding: 10px;
            color: var(--c-grey-80);
        }

        input {
            background: none;
            border: none;
            height: 100%;
            outline: none;
        }
    }

    .headeractions {
        padding: 10px 0;
        display: flex;
        align-items: center;

        .headeractions__button {
            cursor: pointer;
            margin: 0 0 0 10px;
            background: #fff;
            border: 0;
            border-radius: 50%;
            height: 40px;
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
                background: var(--c-grey-95);
            }
        }
    }
}

.site-footer {
    background: #2B4141;
    padding: 80px 0;

    .btnicon {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background: rgba(255, 255, 255, 0.8);
        }
    }

    .footer-container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .footer-title {
        color: rgba(255, 255, 255, 0.95);
        margin-bottom: 20px;
        display: block;
    }

    .footer-about {
        grid-column: 1/3;
        gap: 20px;

        p {
            color: #fff;
        }
    }

    .footer-menu {
        list-style: none;
        color: rgba(255, 255, 255, 0.9);
        padding: 0;
        margin: 0;
    }
}

.page-home {
    .home-welcome {
        background: var(--c-mustard-95);
        padding: 80px 0;
    }

    .home-welcomecols {
        margin: 0 auto;
        width: min(var(--container), calc(100% - 20px));
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 80px;
    }

    .text-head {
        color: rgb(0 0 0 / 80%);
    }

    .home-welcomeactions {
        display: flex;
        gap: 20px;
    }

    .home-welcomeimage {
        position: relative;
    }

    .example {
        width: 80%;
        aspect-ratio: 1.65;
        background: #ccc;
        border-radius: 4px;
        position: absolute;
    }

    .example_1 {
        transform: rotate(10deg);
        right: 0;
    }

    .example_2 {
        transform: translate(-40px, 40px) rotate(-5deg);
    }

    .home-ai-wrap {
        background: var(--c-grey-98);
        padding: 80px 0;
    }

    .home-themes {
        margin: 80px auto;
        width: min(var(--container), calc(100% - 20px));
    }

    .home-themeshead {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .home-categories {
        width: min(var(--container), calc(100% - 20px));
        margin: 0 auto;
    }

    .home-categories-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 20px;
    }

    .home-categorygrid-item {
        background: var(--c-grey-90);
        height: 250px;
        border-radius: 10px;
    }

    .home-categorygrid-item-a {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
    }

    .home-categorygrid-item-b {
        grid-column: 4 / 7;
        grid-row: 1 / 2;
    }

    .home-categorygrid-item-c {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }

    .home-categorygrid-item-d {
        grid-column: 3 / 5;
        grid-row: 2 / 3;
    }

    .home-categorygrid-item-e {
        grid-column: 5 / 7;
        grid-row: 2 / 3;
    }

    .home-social {
        margin: 0 auto;
        width: min(var(--container), calc(100% - 20px));
        padding: 80px 0;
    }

    .home-social-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .home-categories-wrap {
        background: var(--c-grey-98);
        padding: 80px 0;
    }

    .home-social-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 20px;

        .social-grid-item {
            background: var(--c-grey-95);
            border-radius: 8px;
            padding: 20px;
        }

        .social-grid-item-review {
            grid-column: 1 / 3;
            grid-row: 1 / 3;
        }

        .social-grid-item-designers {
            grid-column: 1 / 2;
            grid-row: 3 / 5;
        }

        .social-grid-item-contact {
            grid-column: 2 / 3;
            grid-row: 3 / 4;
        }

        .social-grid-item-faq {
            grid-column: 3 / 4;
            grid-row: 1 / 4;
        }

        .social-grid-item-sponserships {
            grid-column: 2 / 4;
            grid-row: 4 / 5;
        }
    }

    .home-themes-catlist {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(4, 1fr);
        padding: 40px 0;
    }

    .home-catlist-item {
        text-decoration: none;
        color: var(--c-black);

        img {
            border-radius: 10px;
            width: 100%;
        }

        strong,
        span {
            display: block;
            padding: 0 20px;
        }

        strong {
            padding-top: 20px;
        }

        span {
            padding-top: 10px;
            font-size: .9rem;
            color: rgba(0, 0, 0, 0.8);
        }
    }
}

.okai-widget {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
    border-radius: 10px;

    .okai-widget-form {
        background: #fff;
        border: 1px solid var(--c-grey-95);
        padding: 20px;
        border-radius: 8px;
    }
}

.insta-reel-wrap {
    background: var(--c-mustard-95);
    padding: 80px 0;

    .insta-reel-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto 20px auto;
        width: min(var(--container), calc(100% - 20px));
    }

    .instagram-carousel {
        display: flex;
        gap: 20px;
        overflow: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        max-width: 100%;
    }

    .insta-pic {
        width: 120px;
        height: 120px;
        border-radius: 8px;
        background: var(--c-grey-90);
    }
}

/* COMP */
.pretitle {
    background: var(--c-primary);
    padding: 5px 15px;
    border-radius: 5px;
    display: inline-block;
    height: 34px;
    margin-bottom: 16px;
}

.title {
    font-size: var(--fs1);
    line-height: 1em;
    margin-bottom: 16px;
}

.title-2 {
    font-size: var(--fs2);
    line-height: 1em;
    margin-bottom: 16px;
}

.text-head {
    margin-bottom: 16px;
}

.btn {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    text-decoration: none;
}

.btn-primary {
    background: var(--c-mustard);
    color: var(--c-black);
}

.btn-secondary {
    background: rgb(0 0 0 / 10%);
}

.btn-text {
    border-bottom: 2px solid var(--c-primary);
    border-radius: 0;
    color: var(--c-black);
}