@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    /*-------------------------------------
    ----------------- GLOBAL --------------
    -------------------------------------*/
    body {
        @apply font-roboto overflow-x-hidden transition-all duration-300 w-full;
    }

    a:focus,
    button:focus {
        outline: none !important;
    }

    body.mono *:not(i):not(svg) {
        font-family: "Roboto Mono", monospace !important;
    }
    body.mono .font-roboto {
        font-family: "Roboto", sans-serif !important;
    }
    body.mono .headline-roboto {
        font-family: "Roboto", sans-serif !important;
        font-weight: 400;
    }

    .bido-container {
        @apply w-full max-w-1200 mx-auto;
    }

    .show-lg {
        @apply lg:flex hidden;
    }

    .row-reverse {
        @apply flex-row-reverse;
    }
    .row-reverse > div:nth-child(1) {
        @apply order-3;
    }
    .row-reverse > div:nth-child(2) {
        @apply order-2;
    }
    .row-reverse > div:nth-child(3) {
        @apply order-1;
    }

    .hr {
        width: 100% !important;
        @apply border-t border-color-brown;
    }

    [data-content-name] {
        @apply transition-all duration-300 opacity-100;
    }
    [data-content-name]:not(.active) {
        @apply opacity-0;
    }
    [data-tab-name] {
        @apply cursor-pointer;
    }
    .hidden-area {
        display: none !important;
    }

    /* Fonts */
    /* Headlines */
    .headline {
        @apply lg:text-[46.5px] text-[35px] text-color-soft-black font-roboto-slab font-medium tracking-[2px] leading-[1.2];
    }
    .headline-center {
        @apply headline text-center;
    }
    .headline-white {
        @apply headline text-color-white;
    }
    .headline-white-center {
        @apply headline-center text-color-white;
    }
    .headline-2 {
        @apply headline lg:text-[37.5px] text-[30px];
    }
    .headline-2-center {
        @apply headline-2 text-center;
    }
    .headline-3 {
        @apply headline lg:text-[33.5px] text-[25px];
    }
    .headline-3-center {
        @apply headline-3 text-center;
    }

    /* Sub Headlines */
    .sub-headline {
        @apply lg:text-[19.5px] text-[16px] leading-[1.8] text-color-brown font-roboto-slab;
    }
    .sub-headline-center {
        @apply sub-headline text-center;
    }
    .sub-headline-white {
        @apply sub-headline text-color-white;
    }
    .sub-headline-white-center {
        @apply sub-headline-center text-color-white;
    }
    .headline-center + .sub-headline-center {
        @apply mt-5;
    }
    .sub-headline-2 {
        @apply sub-headline lg:text-[17.2px] text-[14.5px] leading-[1.8];
    }
    .sub-headline-2-center {
        @apply sub-headline-2 text-center;
    }
    .headline-2 + .sub-headline-2 {
        @apply mt-7;
    }

    .sub-headline-3 {
        @apply lg:text-[16.5px] text-15 text-color-brown font-roboto-slab tracking-[1px] leading-[1.8] font-normal;
    }
    .sub-headline-3-center {
        @apply sub-headline-3 text-center;
    }

    .sub-headline-4 {
        @apply lg:text-[16.5px] text-base text-color-soft-black font-roboto-slab leading-[1.8] font-normal;
    }

    /* Super Headline */
    .super-headline {
        @apply lg:text-2xl text-lg text-color-brown font-roboto-slab tracking-[1px];
    }
    .super-headline-center {
        @apply super-headline text-center;
    }

    .super-headline-2 {
        @apply lg:text-lg text-base font-medium text-color-soft-black font-roboto-slab tracking-[1px];
    }
    .super-headline-2-center {
        @apply super-headline-2 text-center;
    }

    .super-headline-3 {
        @apply lg:text-[27px] text-2xl font-medium text-color-soft-black font-roboto-slab tracking-[1px];
    }
    .super-headline-3-center {
        @apply super-headline-3 text-center;
    }

    .super-headline-4 {
        @apply lg:text-[19.5px] text-[18px] leading-[1.8] tracking-[2px] text-color-soft-black font-roboto-slab font-medium;
    }

    .super-headline-5 {
        @apply lg:text-[21px] text-[19px] tracking-[1px] text-color-soft-black font-roboto-slab;
    }

    .super-headline-6 {
        @apply lg:text-[34px] text-[28px] leading-[1.3] text-color-soft-black font-roboto-slab italic;
    }
    .super-headline-6-center {
        @apply super-headline-6 text-center;
    }

    .super-headline-6-black {
        @apply text-color-soft-black;
    }
    .super-headline-6-black-center {
        @apply super-headline-6-black text-center;
    }

    .super-headline-7 {
        @apply lg:text-[21px] text-[19px] tracking-[2px] font-medium text-color-soft-black font-roboto-slab;
    }

    /* Super Sub Headline */
    .super-sub-headline {
        @apply lg:text-[13.5px] text-[13.5px] font-normal text-color-soft-black font-roboto-slab;
    }
    .super-sub-headline-center {
        @apply super-sub-headline;
    }

    .super-sub-headline-big {
        @apply super-sub-headline lg:text-15 text-sm;
    }

    .super-sub-headline-2 {
        @apply lg:text-lg text-base text-color-soft-black font-roboto-slab;
    }
    .super-sub-headline-2-center {
        @apply super-sub-headline-2 text-center;
    }

    .super-sub-headline-3 {
        @apply lg:text-[13.1px] text-13 font-normal text-color-soft-black font-roboto-slab;
    }

    /* Paragraph */
    .paragraph {
        @apply lg:text-15 text-13 leading-[1.8] text-color-soft-black font-normal;
    }
    .paragraph-brown {
        @apply paragraph text-color-brown;
    }
    .paragraph-brown-hover {
        @apply paragraph-brown hover:text-color-soft-black t-all;
    }
    .paragraph-fix {
        @apply text-15 text-sm leading-[1.8] text-color-soft-black font-normal;
    }
    .paragraph-2 {
        @apply lg:text-[16.5px] text-sm leading-[2] text-color-soft-black;
    }
    .paragraph-3 {
        @apply lg:text-15 text-sm leading-[1.4] font-medium tracking-[1px] text-color-soft-black;
    }
    .paragraph-4 {
        @apply lg:text-15 text-sm leading-[1.4] font-semibold text-color-soft-black;
    }
    .paragraph-center {
        @apply paragraph text-center;
    }
    .sub-headline-2 + .paragraph {
        @apply mt-8;
    }

    .paragraph-small {
        @apply lg:text-xs text-11 leading-[1.5] text-color-soft-black;
    }
    .paragraph-small-2 {
        @apply paragraph-small tracking-[1px] font-medium;
    }
    .paragraph-small-3 {
        @apply lg:text-[10.5px] text-[10px] leading-[1.5] text-color-soft-black font-medium;
    }

    /* Prices */
    .product-price {
        @apply lg:text-2xl text-xl font-normal font-roboto-slab text-color-soft-black;
    }
    .product-headline {
        @apply lg:text-2xl text-xl font-normal font-roboto-slab text-color-soft-black;
    }
    .product-sub-headline {
        @apply lg:text-15 text-13 leading-[1.8] text-color-soft-black;
    }
    .product-sub-headline-2 {
        @apply lg:text-15 leading-[1.4] tracking-[1px] text-color-soft-black font-medium;
    }
    .product-sub-headline-3 {
        @apply lg:text-[13.45px] text-13 leading-[1.8] tracking-[1px] text-color-soft-black;
    }

    .product-btn {
        @apply flex text-[13.5px] font-medium text-color-brown hover:text-color-black t-all;
    }

    /* IMG */
    .img {
        @apply relative;
    }
    .img img {
        @apply w-full h-full object-cover;
    }

    .iframe {
        @apply w-full;
    }
    .iframe.video iframe {
        @apply w-full aspect-video;
    }
    .iframe.audio iframe {
        @apply w-full aspect-square max-h-[500px];
    }

    /* Transition */
    .t-all {
        @apply transition-all duration-200;
    }

    /* Parallax */
    .parallax-img {
        @apply relative bg-cover bg-center bg-no-repeat;
    }

    /*-----------------------------------------------------------------
    ----------------------------- Templates ---------------------------
    -----------------------------------------------------------------*/

    /*-------------------------------------
    ------------ CONTENT TEMPLATE ---------
    -------------------------------------*/
    /* Content Template 1 – feature cards (structure: div > a[icon] + div > a[title] + p) */
    .content-template-1 {
        @apply flex flex-wrap lg:flex-row flex-col gap-10;
    }
    .content-template-1 > div {
        @apply w-full flex flex-shrink-0 gap-5 items-start;
    }
    @media (min-width: 1024px) {
        .content-template-1 > div {
            @apply flex-1 min-w-0;
        }
    }
    .content-template-1 > div > a {
        @apply w-32 lg:max-w-none max-w-[60px] flex-shrink-0 block;
    }
    .content-template-1 > div > a svg,
    .content-template-1 > div > a iconify-icon,
    .content-template-1 > div > a img {
        @apply stroke-color-soft-black fill-color-soft-black transition-all duration-300;
    }
    .content-template-1 > div:nth-child(1) > a svg,
    .content-template-1 > div:nth-child(1) > a iconify-icon {
        @apply stroke-color-brown fill-color-brown;
    }
    .content-template-1 > div:nth-child(1):hover > a svg,
    .content-template-1 > div:nth-child(1):hover > a iconify-icon {
        @apply stroke-color-soft-black fill-color-soft-black;
    }
    .content-template-1 > div > div {
        @apply min-w-0 flex-1;
    }
    .content-template-1 > div > div > a {
        @apply sub-headline text-color-soft-black font-medium tracking-[2px] transition-all duration-300 block;
    }
    .content-template-1 > div:hover > div > a {
        @apply text-color-brown;
    }
    .content-template-1 > div > div > p {
        @apply paragraph mt-3;
    }

    /* Feature cards: icon above text variant */
    .content-template-1--above > div {
        @apply flex-col items-center text-center;
    }
    .content-template-1--above > div > a {
        @apply max-w-none;
    }
    .content-template-1--above > div > div {
        @apply text-center;
    }
    .content-template-1--above > div > div > a,
    .content-template-1--above > div > div > p {
        @apply text-center;
    }

    /* Feature cards: icon size modifiers (block-level) */
    .content-template-1--icon-small > div > a,
    .content-template-1--icon-small > div > a iconify-icon,
    .content-template-1--icon-small > div > a img {
        width: 2rem;
        height: 2rem;
        max-width: 2rem;
    }
    .content-template-1--icon-medium > div > a,
    .content-template-1--icon-medium > div > a iconify-icon,
    .content-template-1--icon-medium > div > a img {
        width: 3rem;
        height: 3rem;
        max-width: 3rem;
    }
    .content-template-1--icon-large > div > a,
    .content-template-1--icon-large > div > a iconify-icon,
    .content-template-1--icon-large > div > a img {
        width: 4rem;
        height: 4rem;
        max-width: 4rem;
    }

    /* Content Template 2 */
    .content-template-2 {
        @apply relative;
    }
    .content-template-2 .img {
    }
    .content-template-2 .img img {
    }
    .content-template-2 .txt-area {
        @apply absolute z-10 inset-0 flex flex-col items-center justify-center bg-color-gray bg-opacity-80 opacity-0 hover:opacity-100 transition-all duration-500;
    }
    .content-template-2 .txt-area strong {
        @apply super-headline-2;
    }
    .content-template-2 .txt-area p {
        @apply paragraph-center mt-6 mb-5;
    }
    .content-template-2 .txt-area a {
        /* @apply */
    }
    .content-template-2 .txt-area a :where(svg, svg path) {
        @apply stroke-color-soft-black w-12 t-all;
    }
    .content-template-2 .txt-area a:hover :where(svg, svg path) {
        @apply stroke-color-brown;
    }

    /* Content Template 3 */
    .content-template-3 {
        @apply relative flex flex-col items-center px-3;
    }
    .content-template-3 .img {
        @apply w-[200px];
    }
    .content-template-3 .img img {
    }
    .content-template-3 .txt-area {
        @apply flex flex-col items-center mt-9;
    }
    .content-template-3 .txt-area strong {
        @apply headline-center;
    }
    .content-template-3 .txt-area span {
        @apply sub-headline-center mt-5;
    }
    .content-template-3 .txt-area p {
        @apply paragraph-center mt-7;
    }

    /* Content Template 4 */
    .content-template-4 {
        @apply lg:grid flex flex-col grid-cols-12 lg:gap-0 gap-12;
    }
    .content-template-4 > div {
        @apply col-span-4 flex flex-col items-center;
    }
    .content-template-4 > div > a {
        @apply h-24 flex items-center justify-center;
    }
    .content-template-4 > div > a img {
        @apply w-24 -rotate-12;
    }
    .content-template-4 > div > a svg {
        @apply w-24;
    }
    .content-template-4 > div strong {
        @apply super-headline-3-center mt-7 max-w-[290px];
    }
    .content-template-4 > div p {
        @apply paragraph-center mt-6 max-w-[290px];
    }

    /* Content Template 5 */
    .content-template-5 {
        @apply bg-color-white border border-color-brown;
    }
    .content-template-5 .top {
        @apply py-7 px-7.5;
    }
    .content-template-5 .top h2 {
        @apply headline-2;
    }
    .content-template-5 .top h3 {
        @apply sub-headline-2 mt-7.5;
    }
    .content-template-5 .top p {
        @apply paragraph mt-7.5;
    }
    .content-template-5 .bottom {
        @apply footer-template-1 mt-0 p-7.5;
    }

    /* Content Template 6 */
    .content-template-6 {
    }
    .content-template-6 .top {
        @apply border-b border-color-brown pb-7.5 relative;
    }
    .content-template-6 .top h4 {
        @apply super-headline-2 text-color-brown;
    }
    .content-template-6 .top p {
        @apply paragraph mt-px;
    }
    .content-template-6 .top svg {
        @apply w-5 absolute right-0 top-0;
    }
    .content-template-6 .top svg g {
        @apply w-10 absolute fill-color-brown;
    }
    .content-template-6 .bottom {
        @apply flex gap-5 pt-7.5;
    }
    .content-template-6 .bottom .info {
        @apply flex flex-col w-full;
    }
    .content-template-6 .bottom .info strong {
        @apply super-headline-2 text-color-brown;
    }
    .content-template-6 .bottom .info span {
        @apply paragraph-small mt-4;
    }
    .content-template-6 .bottom .img-area {
        @apply w-20 min-w-[5rem] aspect-square;
    }
    .content-template-6 .bottom .img-area img {
    }

    /* Content Template 7 */
    .content-template-7 {
    }
    .content-template-7 .img {
    }
    .content-template-7 .detail {
        @apply p-7.5;
    }
    .content-template-7 .detail strong {
        @apply super-headline-3 text-color-brown;
    }
    .content-template-7 .detail p {
        @apply paragraph mt-4;
    }

    /* Content Template 8 */
    .content-template-8 {
        @apply flex gap-2.5 items-center py-3 border-b border-color-black border-opacity-10;
    }
    .content-template-8 .img {
        @apply w-[74px] min-w-[74px];
    }
    .content-template-8 .detail {
        @apply flex flex-col;
    }
    .content-template-8 .detail b {
        @apply product-sub-headline-3 text-opacity-60;
    }
    .content-template-8 .detail a {
        @apply product-sub-headline-2;
    }

    /* Content Template 9 */
    .content-template-9 {
        @apply md:grid flex flex-col grid-cols-12 gap-7.5 items-center;
    }
    .content-template-9 > div {
        @apply col-span-6 w-full;
    }
    .content-template-9-2 {
        @apply content-template-9 md:flex md:flex-row;
    }
    .content-template-9-2.start {
        @apply items-start;
    }
    .content-template-9-2 > div:nth-child(1) {
        width: calc(100% - (340px + 30px));
        /* @apply w-full */
    }
    .content-template-9-2 > div:nth-child(2) {
        @apply w-[340px] min-w-[340px];
    }
    @media screen and (max-width: 768px) {
        .content-template-9.row-reverse > div:nth-child(1) {
            @apply order-1;
        }
        .content-template-9.row-reverse > div:nth-child(2) {
            @apply order-2;
        }
    }

    .column .content-template-9 {
        @apply gap-7.5;
    }
    .column .content-template-9 > div {
        @apply col-span-12;
    }

    /* Content Template 10 */
    .content-template-10 {
        @apply md:grid flex flex-col grid-cols-12 md:gap-0 gap-5;
    }
    .content-template-10 > a {
        @apply flex items-start gap-4 col-span-6;
    }
    .content-template-10 > a:nth-child(even) .img {
        @apply order-2;
    }
    .content-template-10 > a:nth-child(even) > .txt {
        @apply order-1;
    }
    .content-template-10 > a:nth-child(even) > .txt > span {
        @apply text-end;
    }
    .content-template-10 > a:nth-child(even) > .txt > strong {
        @apply text-end;
    }
    .content-template-10 > a .img {
        @apply w-[90px] min-w-[90px] aspect-square flex items-center justify-center;
    }
    .content-template-10 > a .txt {
        @apply flex flex-col pt-1.5 w-full;
    }
    .content-template-10 > a .txt > span {
        @apply super-sub-headline;
    }
    .content-template-10 > a .txt > strong {
        @apply sub-headline-4 line-clamp-2 t-all;
    }
    .content-template-10 > a:hover .txt > strong {
        @apply text-color-brown;
    }

    /* Content Template 11 */
    .content-template-11 {
        @apply md:grid flex flex-col grid-cols-12 md:gap-0 gap-5;
    }
    .content-template-11 > div {
        @apply flex flex-col items-center;
    }
    .content-template-11 > div svg {
        @apply w-22 mb-5 fill-color-white stroke-color-white;
    }
    .content-template-11 > div img {
        /* @apply mb-5 */
    }
    .content-template-11 > div strong {
        @apply mb-5 sub-headline-3-center text-color-white;
    }
    .content-template-11 > div p {
        @apply paragraph-center text-color-white;
    }

    .content-template-11-2 {
        @apply content-template-11;
    }
    .content-template-11-2 > div strong {
        @apply text-color-brown;
    }
    .content-template-11-2 > div p {
        @apply text-color-soft-black;
    }

    /*-------------------------------------
    -------------- TEXT TEMPLATE -----<----
    -------------------------------------*/
    /* Text Template 1 */
    .text-template-1 {
        @apply flex flex-col items-center mx-auto;
    }
    .text-template-1 svg {
        @apply w-8 mb-7;
    }
    .text-template-1 svg g {
        @apply fill-color-brown;
    }
    .text-template-1 h3 {
        @apply super-headline-center mb-7.5;
    }
    .text-template-1 p {
        @apply text-center paragraph;
    }
    .text-template-1 .line {
        @apply text-center w-full max-w-[90px] h-px bg-color-brown bg-opacity-50 my-7;
    }
    .text-template-1 strong {
        @apply super-headline-2-center text-color-brown;
    }
    .text-template-1 span {
        @apply text-center text-[12.7px] font-roboto-slab text-color-soft-black mt-3 inline-block;
    }
    .text-template-1 img {
        @apply mb-5 mt-1;
    }

    .text-template-1-white {
        @apply text-template-1;
    }
    .text-template-1-white p {
        @apply text-color-white;
    }
    .text-template-1-white span {
        @apply text-color-white;
    }

    /* Text Template 2 */
    .text-template-2 {
        @apply flex gap-[15px];
    }
    .text-template-2 .icon {
    }
    .text-template-2 .icon svg {
        @apply w-[54px];
    }
    .text-template-2 .txt-area {
        @apply flex flex-col gap-2.5;
    }
    .text-template-2 .txt-area > a {
        @apply super-headline-4 t-all;
    }
    .text-template-2:hover .txt-area > a {
        @apply text-color-brown;
    }
    .text-template-2 .txt-area > p {
        @apply paragraph;
    }

    .text-template-2-reverse {
        @apply text-template-2 flex-row-reverse;
    }
    .text-template-2-reverse .txt-area {
        @apply items-end;
    }
    .text-template-2-reverse .txt-area > a {
        @apply text-right;
    }
    .text-template-2-reverse .txt-area > p {
        @apply text-right;
    }

    /* Text Template 3 */
    .text-template-3 {
    }
    .text-template-3 h3 {
        @apply super-headline-3 mt-6;
    }
    .text-template-3-light {
        @apply text-template-3;
    }
    .text-template-3-light h3 {
        @apply super-headline font-normal text-color-soft-black;
    }
    .text-template-3 p {
        @apply paragraph mt-7.5;
    }

    /* Text Template 4 */
    .text-template-4 {
        @apply flex flex-col items-center;
    }
    .text-template-4 h2 {
        @apply headline-center;
    }
    .text-template-4 span {
        @apply sub-headline-center mt-7.5;
    }
    .text-template-4 p {
        @apply paragraph-center mt-7.5;
    }
    .text-template-4 img {
        @apply mt-7.5;
    }

    /* Text Template 5 */
    .text-template-5 {
        @apply flex flex-col;
    }
    .text-template-5 > div {
        @apply py-3 border-b border-color-black border-opacity-10;
    }
    .text-template-5 > div a {
        @apply paragraph hover:text-color-brown t-all;
    }

    /* Text Template 6 */
    .text-template-6 {
        @apply w-full;
    }
    .text-template-6 > h2 {
        @apply headline-2 md:mt-12 mt-6;
    }
    .text-template-6 > h2 a {
    }
    .text-template-6 > h3 {
        @apply text-template-9;
    }
    .text-template-6 > p {
        @apply paragraph mt-5;
    }
    .text-template-6 .bottom {
        @apply footer-template-2 mt-6;
    }
    .text-template-6 .icons {
        @apply mt-6 icons-template-1-black;
    }
    .text-template-6 .icons-brown {
        @apply mt-6 icons-template-1;
    }
    .text-template-6 .table-template-1 {
        @apply mt-5;
    }

    /* Text Template 7 */
    .text-template-7 {
        @apply relative;
    }
    .text-template-7 > img {
        @apply absolute left-0 top-0 w-full h-full object-cover -z-10;
    }
    .text-template-7 > div {
        @apply bg-color-brown bg-opacity-60 flex flex-col items-center justify-center p-15;
    }
    .text-template-7.bg > div {
        @apply bg-opacity-100;
    }
    .text-template-7 > div .icon {
        @apply fill-color-soft-black flex w-17;
    }
    .text-template-7 > div > h3 {
        @apply text-center mt-5;
    }
    .text-template-7 > div > h3 > a {
        @apply super-headline-6-center text-color-white hover:text-opacity-60 t-all;
    }
    .text-template-7 > div .link {
        @apply super-sub-headline-2-center text-color-white text-opacity-60 hover:text-opacity-40 t-all border-t border-color-white border-opacity-50 mt-7 pt-7;
    }

    /* Text Template 8 */
    .text-template-8 {
        @apply relative;
    }
    .text-template-8 > img {
        @apply absolute left-0 top-0 w-full h-full object-cover -z-10;
    }
    .text-template-8 > div {
        @apply bg-color-brown bg-opacity-60 flex flex-col items-center justify-center p-15;
    }
    .text-template-8.bg > div {
        @apply bg-opacity-100;
    }
    .text-template-8 > div .icon {
        @apply fill-color-soft-black flex w-17;
    }
    .text-template-8 > div > h3 {
        @apply text-center mt-5;
    }
    .text-template-8 > div > h3 > a {
        @apply super-headline-6-center text-color-white hover:text-opacity-60 t-all;
    }
    .text-template-8 > div > h3 > a.black {
        @apply text-color-soft-black;
    }
    .text-template-8 > div .link {
        @apply super-sub-headline-2-center text-color-white text-opacity-60 hover:text-opacity-40 t-all border-t border-color-white border-opacity-50 mt-7 pt-7;
    }
    .text-template-8 > div .link.black {
        @apply text-color-soft-black text-opacity-60;
    }

    /* Text Template 9 */
    .text-template-9 {
        @apply flex items-center;
    }
    .text-template-9 > a {
        @apply super-headline-5 text-color-brown hover:text-color-soft-black t-all;
    }
    .text-template-9 > a:not(:nth-child(1))::before {
        @apply content-['·'] font-black pointer-events-none mx-1 text-color-brown;
    }

    .text-template-9-2 {
        @apply text-template-9;
    }
    .text-template-9-2 > a {
        @apply sub-headline-3 hover:text-color-white;
    }
    .text-template-9-2.black > a {
        @apply hover:text-color-black;
    }
    .text-template-9 > a:not(:nth-child(1))::before {
        @apply content-['·'] font-black pointer-events-none mx-2 text-color-brown scale-150 inline-block;
    }

    /* Text Template 10 */
    .text-template-10 {
        /* @apply  */
    }
    .text-template-10 h1 {
        @apply headline;
    }
    .text-template-10 h2 {
        @apply text-template-9 mb-7;
    }
    .text-template-10 h2 a {
        @apply sub-headline;
    }

    /* Text Template 11 */
    .text-template-11 {
        @apply w-full h-full flex flex-col items-center justify-center pb-14;
    }
    .text-template-11 span {
        @apply sub-headline-3 text-color-soft-black;
    }
    .text-template-11 strong {
        @apply headline-center;
    }
    .text-template-11 a {
        @apply btn-5;
    }

    /* QUOTE TEMPLATE */
    .quote-template {
        @apply pl-14 paragraph-2 italic relative;
    }
    .quote-template svg {
        @apply absolute left-1 h-18 rotate-180 -z-10 -skew-x-12 opacity-10;
    }
    .quote-template svg g {
        @apply fill-color-black stroke-color-black;
    }

    /*-------------------------------------
    ------------- PRODUCT TEMPLATE --------
    -------------------------------------*/
    .img-bg {
        @apply bg-color-gray;
    }

    /* Product Template 1 */
    .product-template-1 {
        @apply px-5;
    }
    .product-template-1 > div {
        @apply md:grid flex flex-col grid-cols-12 gap-10 bido-container;
    }
    .product-template-1 > div .img {
        @apply img-bg;
    }
    .product-template-1 > div .detail {
        @apply px-10 pt-14 flex flex-col gap-10;
    }
    .product-template-1 > div .detail h2 {
        @apply headline mb-4;
    }
    .product-template-1 > div .detail strong {
        @apply super-headline-3;
    }
    .product-template-1 > div .detail .list {
        @apply flex gap-2 mt-5;
    }
    .product-template-1 > div .detail .list span {
        @apply super-sub-headline;
    }
    .product-template-1 > div .detail .btn-1-big {
        @apply mt-5;
    }

    /* Product Template 2 */
    .product-template-2 {
        @apply px-5;
    }
    .product-template-2 > div {
        @apply flex md:flex-row flex-col gap-10 bido-container;
    }
    .product-template-2 > div .img-area {
        @apply w-full;
    }
    .product-template-2 > div .img {
        @apply img-bg;
    }
    .product-template-2 > div .detail {
        @apply md:w-[370px] w-full md:min-w-[370px] md:px-10 px-8 md:pt-7 flex flex-col gap-5;
    }
    .product-template-2 > div .detail .img {
        @apply mb-20;
    }
    .product-template-2 > div .detail h2 {
        @apply super-headline-3;
    }
    .product-template-2 > div .detail .list {
        @apply flex flex-col gap-5 mt-5;
    }
    .product-template-2 > div .detail .list span {
        @apply super-sub-headline-big;
    }
    .product-template-2 > div .detail .btn-1-big {
        @apply mt-5;
    }

    /* Product Template 3 */
    .product-template-3 {
        @apply border border-color-brown;
    }
    .product-template-3 .img {
    }
    .product-template-3 .top {
        @apply p-7.5 flex flex-col;
    }
    .product-template-3 .top strong {
        @apply super-headline-3;
    }
    .product-template-3 .top span {
        @apply super-sub-headline mt-6;
    }
    .product-template-3 .bottom {
        @apply footer-template-1 mt-0 p-7.5;
    }

    /* Product Template 4 */
    .product-template-4 {
        @apply flex flex-col;
    }
    .product-template-4 .img-area {
    }
    .product-template-4 .img-area img {
    }
    .product-template-4 .detail {
        @apply mt-6;
    }
    .product-template-4 .detail strong {
        @apply super-headline-3;
    }
    .product-template-4 .detail strong span {
        @apply text-color-brown;
    }
    .product-template-4 .detail p {
        @apply paragraph mt-5;
    }

    .product-template-4-center {
        @apply product-template-4 items-center;
    }
    .product-template-4-center .detail {
        @apply text-center;
    }
    .product-template-4-center .detail strong {
        @apply super-headline-3-center;
    }
    .product-template-4-center .detail p {
        @apply super-sub-headline-center max-w-[280px];
    }

    /* Product Template 5 */
    .product-template-5 {
        /* @apply  */
    }
    .product-template-5 .img-area {
        @apply flex items-center justify-center relative overflow-hidden;
    }
    .product-template-5 .img-area img {
        @apply w-full h-full  object-cover transition-all duration-400;
    }
    .product-template-5 .img-area:hover img {
        @apply scale-110;
    }
    .product-template-5 .img-area .filter {
        @apply absolute inset-0 bg-color-black bg-opacity-0 flex items-center justify-center pointer-events-none transition-all duration-400;
    }
    .product-template-5 .img-area:hover .filter {
        @apply bg-opacity-50;
    }
    .product-template-5 .img-area .filter svg {
        @apply w-16 stroke-color-white -translate-y-20 rotate-180 opacity-0 transition-all duration-400;
    }
    .product-template-5 .img-area:hover .filter svg {
        @apply -translate-y-0 opacity-100;
    }
    .product-template-5 .detail {
        @apply bg-color-black bg-opacity-5 py-7 px-7.5;
    }
    .product-template-5 .detail > a {
        @apply mt-4 tracking-[2px] super-headline-5 text-color-brown hover:text-color-soft-black t-all font-medium line-clamp-2 break-words leading-[1.5];
    }
    .product-template-5 .detail > p {
        @apply paragraph line-clamp-4;
    }
    .product-template-5 .detail .icons {
        @apply icons-template-1 mt-6;
    }

    /* Product Template 6 */
    .product-template-6 {
        @apply flex gap-2.5 relative;
    }
    .product-template-6 .img-area {
        @apply w-17 min-w-[4.25rem] aspect-square flex items-center justify-center border border-color-black border-opacity-10;
    }
    .product-template-6 .img-area img {
        @apply w-full;
    }
    .product-template-6 .txt {
        @apply flex flex-col justify-between w-full py-1.5;
    }
    .product-template-6 .txt strong {
        @apply paragraph-3 line-clamp-2;
    }
    .product-template-6 .txt span {
        @apply paragraph-small-3 flex items-center gap-1.5;
    }
    .product-template-6 .remove {
        @apply absolute right-0 top-0 flex items-center justify-center w-3.75 h-3.75 aspect-square bg-color-brown hover:bg-color-orange;
    }
    .product-template-6 .remove::before {
        @apply content-['\f00d'] font-awesome font-black text-[9px] text-color-white leading-none;
    }

    /* Product Template 7 */
    .product-template-7 {
        @apply product-template-6 border-b border-color-black border-opacity-10 py-3;
    }
    .product-template-7 .img-area {
        @apply w-[74px] min-w-[74px];
    }
    .product-template-7 .txt {
        @apply flex flex-col justify-center w-full gap-px;
    }
    .product-template-6 .txt span {
        @apply paragraph-small-2 font-semibold tracking-[0px] mt-px;
    }

    /* Product Template 8 */
    .product-template-8 {
        /* @apply  */
    }
    .product-template-8 .img-area {
        /* @apply  */
    }
    .product-template-8 .img-area img {
        @apply w-full;
    }
    .product-template-8 .detail {
        @apply detail-template-black;
    }
    .product-template-8 .detail.bigger {
        @apply detail-template-black-bigger;
    }

    /* Product Template 9 */
    .product-template-9 {
        @apply flex items-center justify-center flex-col h-full;
    }
    .product-template-9 .img-area {
    }
    .product-template-9 .img-area img {
    }
    .product-template-9 strong {
        @apply mt-7.5 sub-headline-3-center;
    }
    .product-template-9 p {
        @apply paragraph-center mt-5 max-w-[280px];
    }
    .product-template-9 a {
        @apply btn-1-small mt-15;
    }

    /* TOP LEFT */
    div:has(.top-left) {
        @apply relative;
    }

    .circle {
        @apply bg-color-brown rounded-full paragraph absolute opacity-90 flex items-center justify-center text-color-white border border-color-brown t-all;
    }
    .circle.hover:hover {
        @apply hover:bg-color-white hover:text-color-brown;
    }

    .circle-md {
        @apply circle w-15 h-15;
    }
    .circle-sm {
        @apply circle w-10 h-10;
    }
    .circle-xs {
        @apply circle w-7.5 h-7.5;
    }
    .circle-2xs {
        @apply circle w-5 h-5;
    }

    .top-left {
        @apply circle-md left-4 top-4;
    }
    .top-left-sm {
        @apply circle-sm left-4 top-4;
    }

    .top-right {
        @apply circle-md right-4 top-4;
    }
    .top-right-sm {
        @apply circle-sm right-4 top-4;
    }
    .top-right-xs {
        @apply circle-xs right-4 top-4;
    }

    /*-------------------------------------
    --------------- IMG TEMPLATE ----------
    -------------------------------------*/
    /* Img Template 1 */
    .img-template-1 {
        @apply px-5;
    }
    .img-template-1 > div {
        @apply md:grid flex flex-col grid-cols-12 gap-10 bido-container items-center;
    }
    .img-template-1 > div .img {
        @apply img-bg;
    }

    /*-------------------------------------
    --------------- GRID TEMPLATE ---------
    -------------------------------------*/
    .grid-template_3 {
        @apply md:grid flex flex-col lg:grid-cols-12 grid-cols-8;
    }
    .grid-template_3 > div {
        @apply col-span-4;
    }

    .grid-template_4 {
        @apply md:grid flex flex-col lg:grid-cols-12 grid-cols-6 gap-3;
    }
    .grid-template_4 > div {
        @apply col-span-3;
    }

    .flex-template_3 {
        @apply flex flex-wrap;
    }
    .flex-template_3 > * {
        @apply lg:w-[var(--w)] md:w-[var(--w2)] w-full;
    }

    /* Grid Gallery 1 */
    .grid-gallery-1 {
        /* @apply */
    }
    .grid-gallery-1 > img {
        aspect-ratio: 1.6;
        @apply cursor-pointer object-cover;
    }

    /*-------------------------------------
    -------------- COUNT TEMPLATE ---------
    -------------------------------------*/
    .count-template {
        @apply 368:grid flex flex-col lg:grid-cols-12 grid-cols-6 py-16 lg:gap-0 md:gap-12 gap-y-12 gap-x-8;
    }
    .count-template > div {
        @apply col-span-3 flex flex-col items-center justify-start;
    }
    .count-template > div svg {
        @apply w-22 fill-color-brown t-all;
    }
    .count-template > div a:hover svg {
        @apply fill-color-soft-black;
    }
    .count-template > div .count-area {
        @apply flex mt-5 mb-5;
    }
    .count-template > div .count-area .counts {
        @apply flex h-[45px] overflow-hidden;
    }
    .count-template > div .count-area .counts > div {
        @apply flex flex-col transition-all duration-1000;
    }
    .count-template > div .count-area .counts > div > span {
        @apply text-[45px] leading-none;
    }
    .count-template > div .count-area .symbol {
    }
    .count-template > div > strong {
        @apply sub-headline-3-center;
    }

    /*-------------------------------------
    -------------- FORM TEMPLATE ----------
    -------------------------------------*/

    /* Form Template 1 */
    .form-template-1 {
        @apply flex flex-col gap-7;
    }
    .form-template-1 .input-wrapper {
        @apply sm:grid flex flex-col w-full grid-cols-12 items-center sm:gap-0 gap-2;
    }
    .form-template-1 .input-wrapper > div {
        @apply w-full;
    }
    .form-template-1 .input-wrapper > div:nth-child(1) {
        @apply col-span-4;
    }
    .form-template-1 .input-wrapper > div:nth-child(2) {
        @apply col-span-8;
    }
    .form-template-1 .input-wrapper > div {
    }

    /* Form Template 2 */
    .form-template-2 {
    }
    .form-template-2 h3 {
        @apply super-headline-7 mb-5;
    }
    .form-template-2 p {
        @apply paragraph mb-4;
    }
    .form-template-2 form {
    }
    .form-template-2 form > div {
        @apply input-template-3;
    }
    .form-template-2 form > button {
        @apply btn-3 mt-3;
    }

    /* Form Template 3 */
    .form-template-3 {
        @apply grid grid-cols-12 border border-color-brown;
    }
    .form-template-3 > div {
        @apply border-color-brown h-14;
    }
    .form-template-3 > div :is(input, textarea) {
        @apply h-full w-full p-3 resize-none outline-none paragraph bg-color-transparent;
    }
    .form-template-3 .textarea {
        @apply h-60 bg-color-transparent;
    }
    .form-template-3 button {
        @apply h-full w-full px-9 btn-txt tracking-[1px] text-start;
    }

    /*-------------------------------------
    -------------- PRICE TEMPLATE ---------
    -------------------------------------*/
    .price-template-1 {
        @apply h-13 bg-color-brown flex;
    }
    .price-template-1 > div {
        @apply flex h-full items-center px-6;
    }
    .price-template-1 .txt {
        @apply w-full justify-end;
    }
    .price-template-1 .txt b {
        @apply paragraph text-color-white;
    }
    .price-template-1 .price {
        @apply bg-color-black bg-opacity-25;
    }
    .price-template-1 .price strong {
        @apply flex gap-1 lg:text-[22px] text-lg text-color-white;
    }
    .price-template-1 .price strong span {
    }

    /*-------------------------------------
    ------------- FOOTER TEMPLATE ---------
    -------------------------------------*/
    /* Footer Template 1 */
    .footer-template-1 {
        @apply border-t border-color-brown py-6 mt-7.5 flex items-center justify-between;
    }
    .footer-template-1 .txt {
        @apply paragraph-small-2;
    }
    .footer-template-1 .icons {
        @apply icons-template-1;
    }

    /* Footer Template 2 */
    .footer-template-2 {
        @apply flex flex-col;
    }
    .footer-template-2 .info {
        @apply info-template-1;
    }
    .footer-template-2 .icons {
        @apply icons-template-1-black mt-8;
    }

    /*-------------------------------------
    ------------- ICONS TEMPLATE ----------
    -------------------------------------*/
    /* Icons Template 1 */
    .icons-template-1 {
        @apply flex gap-2 items-center translate-y-px;
    }
    .icons-template-1 > a {
        @apply text-15 text-color-brown hover:text-color-soft-black t-all;
    }

    .icons-template-1-black {
        @apply icons-template-1 gap-4;
    }
    .icons-template-1-black > a {
        @apply text-color-soft-black hover:text-color-brown;
    }

    /*-------------------------------------
    ------------- INFO TEMPLATE -----------
    -------------------------------------*/
    /* Info Template 1 */
    .info-template-1 {
        @apply flex gap-4 items-center text-color-brown;
    }
    .info-template-1 a {
        @apply sub-headline-2 flex items-center gap-1;
    }
    .info-template-1 a i {
        @apply scale-95;
    }

    .info-template-1-2 {
        @apply info-template-1;
    }
    .info-template-1-2 :is(a, span) {
        @apply sub-headline;
    }
    .info-template-1-2 .white {
        @apply text-color-white hover:text-color-brown t-all;
    }
    .info-template-1-2 .white i {
        @apply text-color-brown;
    }

    /* Info Template 2 */
    .info-template-2 {
        @apply flex gap-4 items-center text-color-brown;
    }
    .info-template-2 span {
        @apply super-sub-headline-3 flex items-center gap-2;
    }
    .info-template-2 span svg {
        @apply w-3 fill-color-soft-black stroke-color-soft-black;
    }
    .info-template-2 span a {
        @apply text-color-brown hover:text-color-soft-black t-all;
    }

    /*-------------------------------------
    ------------- TAB TEMPLATE -----------
    -------------------------------------*/
    .tab-template-1 {
        @apply flex gap-px items-center justify-center flex-wrap;
    }
    .tab-template-1 > a {
        @apply h-14 px-8 flex items-center paragraph hover:bg-color-black hover:bg-opacity-5 t-all;
    }
    .tab-template-1 > a.active {
        @apply bg-color-black bg-opacity-5;
    }

    /*-------------------------------------
    ------------- TABLE TEMPLATE ----------
    -------------------------------------*/
    /* Table Template 1 */
    .table-template-1 {
        @apply paragraph;
    }
    .table-template-1 > div {
        @apply grid grid-cols-12;
    }
    .table-template-1 > div > div {
        @apply col-span-6;
    }

    /* Table Template 2 */
    .table-template-2 {
        @apply paragraph-fix;
    }
    .table-template-2 .h,
    .table-template-2 .b > div {
        @apply grid md:grid-cols-table-template-2;
    }
    .table-template-2 .h {
        @apply bg-color-brown md:grid hidden;
    }
    .table-template-2 .h > div {
        @apply font-semibold text-color-white;
    }
    .table-template-2 .b {
    }
    .table-template-2 .b > div {
        @apply md:border-b md:border-0 border border-color-black border-opacity-10;
    }
    /* .table-template-2 .b > div:not(:last-child){
        @apply md:border-b border-b-0
    } */
    .table-template-2 .b > div > div {
    }
    .table-template-2 .h > div,
    .table-template-2 .b > div > div {
        @apply p-3.75;
    }
    .table-template-2 .h > div:last-child,
    .table-template-2 .b > div > div:last-child {
        @apply text-end md:justify-end justify-center;
    }
    .table-template-2 .h > div:is(:nth-last-child(2), :nth-last-child(3)),
    .table-template-2
        .b
        > div
        > div:is(:nth-last-child(2), :nth-last-child(3)) {
        @apply text-center justify-center;
    }

    .table-template-2 .b > div > div {
        @apply flex items-center md:justify-start justify-center;
    }
    .table-template-2 .b > div > div > button {
        @apply text-11 border border-color-brown text-color-brown rounded-full w-[23px] h-[23px] leading-none hover:bg-color-brown hover:text-color-white t-all;
    }
    .table-template-2 .b > div > div > button i {
        @apply translate-y-px;
    }
    .table-template-2 .b > div > div > .img {
        @apply h-18 w-18 inline-block;
    }
    .table-template-2 .b > div > div > .img img {
        @apply h-full w-full object-cover;
    }
    .table-template-2 .b > div > div > .name {
        @apply text-color-brown;
    }
    .table-template-2 .b > div > div > .price {
        /* @apply */
    }
    .table-template-2 .b > div > div input {
        @apply border border-color-black border-opacity-10 h-12 p-3 w-18 outline-none;
    }

    @media screen and (max-width: 768px) {
        .table-template-2 .b > div > div::before {
            @apply font-bold mr-2.5;
        }
        .table-template-2 .b > div > div:nth-child(3)::before {
            @apply content-['Product:'];
        }
        .table-template-2 .b > div > div:nth-child(4)::before {
            @apply content-['Price:'];
        }
        .table-template-2 .b > div > div:nth-child(5)::before {
            @apply content-['Quantity:'];
        }
        .table-template-2 .b > div > div:nth-child(6)::before {
            @apply content-['Subtotal:'];
        }
    }

    /* Table Template 3 */
    .table-template-3 {
        @apply paragraph border-y-2 border-color-black;
    }
    .table-template-3 > div {
        @apply grid grid-cols-12;
    }
    .table-template-3 > div:not(:last-child) {
        @apply border-b border-color-black border-opacity-5;
    }
    .table-template-3 > div > div {
        @apply col-span-6 p-3.75;
    }
    .table-template-3 > div > div:nth-child(even) {
        @apply text-end;
    }

    /* Table Template 4 */
    .table-template-4 {
        @apply paragraph-fix;
    }
    .table-template-4 .h {
        @apply flex items-center justify-between bg-color-brown;
    }
    .table-template-4 .h > div {
        @apply font-semibold text-color-white;
    }
    .table-template-4 .b {
    }
    .table-template-4 .b > div {
        @apply border-b border-color-black border-opacity-10 flex items-center justify-between;
    }
    .table-template-4 .h > div,
    .table-template-4 .b > div > div {
        @apply p-3.75;
    }

    /* @media screen and (max-width: 768px) {
        .table-template-4 .b > div > div::before{
            @apply font-bold mr-2.5
        }
        .table-template-4 .b > div > div:nth-child(3)::before{
            @apply content-['Product:']
        }
        .table-template-4 .b > div > div:nth-child(4)::before{
            @apply content-['Price:']
        }
        .table-template-4 .b > div > div:nth-child(5)::before{
            @apply content-['Quantity:']
        }
        .table-template-4 .b > div > div:nth-child(6)::before{
            @apply content-['Subtotal:']
        }
    } */

    /*-------------------------------------
    ------------- CART TEMPLATE -----------
    -------------------------------------*/
    .cart-template-1 {
    }
    .cart-template-1 h3 {
        @apply super-headline-4;
    }
    .cart-template-1 > p {
        @apply paragraph;
    }
    .cart-template-1 .products {
        @apply flex flex-col gap-4;
    }
    .cart-template-1 .products > div {
        @apply product-template-6;
    }
    .cart-template-1 .products-2 > div {
        @apply product-template-7;
    }

    .cart-template-1 .total {
        @apply flex items-center justify-between py-3 mt-4 border-t-2 border-color-black;
    }
    .cart-template-1 .total b {
        @apply paragraph-4;
    }
    .cart-template-1 .total strong {
        @apply paragraph;
    }
    .cart-template-1 .btns {
        @apply grid grid-cols-12 gap-2.5;
    }
    .cart-template-1 .btns a {
        @apply btn-1-brown-2 col-span-6 px-0 py-3 flex w-full justify-center;
    }

    /*-------------------------------------
    ------------- TOP TEMPLATE ------------
    -------------------------------------*/
    .top-template-1 {
        @apply flex items-center justify-between gap-10;
    }
    .top-template-1 p {
        @apply paragraph;
    }
    .top-template-1 select {
        @apply w-full max-w-[420px] h-12 border border-color-black border-opacity-10 paragraph px-3 outline-none;
    }

    /*-------------------------------------
    ---------- PAGINATION TEMPLATE --------
    -------------------------------------*/
    .pagination-template-1 {
        @apply flex items-center justify-center gap-2 mt-16 mb-8;
    }
    .pagination-template-1 > a {
        @apply text-sm h-7.5 w-7.5 border border-color-brown text-color-brown flex items-center justify-center t-all hover:bg-color-brown hover:text-color-white;
    }
    .pagination-template-1 > a.active {
        @apply bg-color-brown text-color-white;
    }
    .pagination-template-1 > a svg {
        @apply w-3;
    }
    .pagination-template-1 > a svg g {
        @apply stroke-color-brown;
    }
    .pagination-template-1 > a.active svg g {
        @apply stroke-color-white;
    }

    /*-------------------------------------
    ------------ COUPON TEMPLATE ----------
    -------------------------------------*/
    .coupon-template {
        @apply p-3.75 border-b border-color-black border-opacity-10 flex md:flex-row flex-col items-center gap-2;
    }
    .coupon-template .coupon {
        @apply flex items-center;
    }
    .coupon-template .coupon span {
        @apply paragraph;
    }
    .coupon-template .coupon input {
        @apply w-44 paragraph px-3.75 py-1 outline-none border-none text-color-brown;
    }
    .coupon-template .btns {
        @apply flex gap-2;
    }
    .coupon-template .btns > a {
        @apply btn-1-brown-2;
    }

    /*---------------------------------------------------------
    --------------------------- BLOGS -------------------------
    ---------------------------------------------------------*/
    /* Blog Container 1 */
    .blog-container-1 {
        @apply bido-container md:grid flex flex-col md:gap-10 gap-30 grid-cols-blog-container-1;
    }
    .blog-container-1 > div {
    }
    .blog-container-1 .left {
    }
    .blog-container-1 .right {
    }

    /* Blog Container 2 */
    .blog-container-2 {
        @apply bido-container;
    }
    .blog-container-2 .double {
        @apply md:grid flex flex-col md:gap-8 gap-5 grid-cols-2;
    }
    .blog-container-2 .double-2 {
        @apply flex md:flex-row flex-col md:gap-14 gap-5;
    }
    .blog-container-2 .double-2 > div:nth-child(1) {
        @apply w-full;
    }
    .blog-container-2 .double-2 > div:nth-child(2) {
        @apply w-[330px] min-w-[330px];
    }

    .content-container {
    }
    .content-container .content {
        @apply paragraph;
    }
    .content-container .content p {
        @apply mb-4;
    }
    .content-container .content > :is(.img, div) {
        @apply mb-10;
    }
    .content-container .content iframe {
        @apply w-full;
    }

    .content-container .icons {
        @apply icons-template-1-black ml-auto w-fit mt-10;
    }
    .content-container .icons.left {
        @apply ml-0;
    }

    /* FREE AREA CONTROL */
    .free-control {
    }
    .free-control:not(.free) .free-area {
        @apply hidden;
    }
    .free-control.free .full-area {
        @apply hidden;
    }

    /*-------------------------------------
    ----------------- HEADER --------------
    -------------------------------------*/
    header {
        @apply top-0 relative z-30 w-full px-3 bg-color-white;
    }
    .fixnav {
        @apply fixed -translate-y-full bg-color-white shadow-1;
    }
    .fixnav.shownav {
        @apply translate-y-0 transition-all duration-500;
    }
    header.hidenav {
        @apply -translate-y-full transition-all duration-300;
    }
    header > div {
        @apply max-w-1200 mx-auto h-[90px] flex items-center justify-between gap-10;
    }
    header.fixnav > div {
        @apply h-[80px];
    }
    header > div > div {
        @apply h-full;
    }
    header > div .left {
        @apply flex items-center;
    }
    header > div .left .nav-img {
        @apply lg:h-full h-10 max-h-[4rem] flex;
    }
    header.col {
        @apply lg:pt-[90px];
    }
    header.col > div {
        @apply h-[50px];
    }
    header.col > div .right nav {
        @apply lg:absolute left-2/4 lg:-translate-x-2/4 lg:h-[50px];
    }
    header.col > div .left .nav-img {
        @apply lg:absolute lg:left-2/4 lg:-translate-x-2/4 lg:top-5;
    }
    header.col > div .right nav > div > a {
        @apply font-roboto-mono;
    }
    .col.fixnav.shownav {
        @apply pt-0;
    }
    .col.fixnav.shownav > div .left .nav-img {
        @apply -translate-x-0 static h-full items-center;
    }
    header > div .left img {
        @apply lg:h-full h-10 max-h-[4rem] object-scale-down;
    }
    header.white:not(.fixnav) > div .left img {
        @apply lg:invert;
    }
    header.fixnav > div .left img {
        @apply h-10;
    }
    header > div .left .toggle-btn {
        @apply h-8 aspect-square mr-5 flex flex-col justify-between;
    }
    header > div .left .toggle-btn span {
        @apply w-full h-px bg-color-black inline-block;
    }
    header > div .right {
        @apply flex gap-12 lg:static fixed;
    }
    header > div .right {
        @apply flex gap-12 lg:static fixed text-color-soft-black;
    }
    header > div .right nav {
        @apply flex font-roboto-slab;
    }
    header > div .right nav > div {
        /* first link wrapper */
        @apply text-sm relative;
    }
    header > div .right nav > div > a {
        /* first link */
        @apply text-15 flex lg:h-full items-center lg:pr-12 hover:text-color-brown transition-all duration-200;
    }
    header.white:not(.fixnav) > div .right nav > div > a {
        @apply lg:text-color-white;
    }
    header > div .right nav > div:last-child > a {
        /* first link */
        @apply pr-0;
    }
    header > div .right nav > div > a > span {
        /* first link span */
        @apply flex h-full w-fit items-center relative whitespace-nowrap;
    }
    header > div .right nav > div > a > span::before {
        /* first link span ::before line */
        @apply content-[''] absolute left-2/4 -translate-x-2/4 bottom-0 h-0 w-full bg-color-brown lg:inline-block hidden z-10;
    }
    header > div .right nav > div > a.active > span::before {
        /* first link active span ::before line */
        @apply h-1;
    }
    header > div .right .icons {
        @apply flex items-center gap-4;
    }
    header > div .right .icons > a {
        @apply text-sm hover:text-color-brown transition-all duration-200 relative;
    }
    header.white:not(.fixnav) > div .right .icons > a {
        @apply lg:text-color-white;
    }
    header > div .right .icons > a.cart {
        @apply translate-y-px;
    }
    header > div .right .icons > a span {
        /* @apply */
    }
    header > div .right .icons > a small {
        @apply absolute -right-2 -top-2 -translate-x-px translate-y-px bg-color-orange text-color-white text-3xs flex items-center h-3 pt-px px-1 leading-none rounded-sm;
    }
    header > div .right .icons > a span i {
    }

    @media screen and (max-width: 1024px) {
        html.active {
            @apply overflow-hidden;
        }
        body.transition > * {
            @apply transition-all duration-500;
        }
        html.active body {
            @apply relative;
        }
        html.active body > * {
            @apply translate-x-72;
        }
        header > div .right {
            @apply bg-color-white left-0 top-0 h-[100dvh] max-h-[100dvh] overflow-y-auto flex-col w-full max-w-[18rem] py-7 px-7 -translate-x-full transition-all duration-300;
        }
        html.active header > div .right {
            @apply shadow-2;
        }
        header > div .right nav {
            @apply flex-col;
        }
        header > div .right nav a.more {
            @apply relative flex items-center justify-between;
        }
        header > div .right nav a.more::after {
            @apply content-['\f107'] font-awesome font-black text-xs transition-all duration-200;
        }
        header > div .right nav a.more.open {
            @apply text-color-brown;
        }
        header > div .right nav a.more.open::after {
            @apply rotate-180;
        }
        header > div .right nav > div > a {
            /* first link */
            @apply py-3;
        }
        header > div .right nav > div a.active {
            /* first link active */
            @apply font-semibold;
        }
        header > div .right nav > div .dropdown-container {
            @apply pl-5 hidden;
        }
        header > div .right nav > div .dropdown-container > div {
            @apply h-fit;
        }
        header > div .right nav > div .dropdown-container > div a {
            @apply py-1 flex;
        }
    }

    @media screen and (min-width: 1024px) {
        header > div .right nav > div .dropdown-container {
            /* second link container */
            @apply w-56 opacity-0 pointer-events-none transition-all duration-200 absolute bg-color-white shadow-2 translate-y-10;
        }
        header > div .right nav > div:last-child .dropdown-container {
            /* second link container */
            @apply right-0;
        }
        header > div .right nav div:hover > a + .dropdown-container {
            /* second link hovered container */
            @apply opacity-100 pointer-events-auto translate-y-0;
        }
        header > div .right nav > div .dropdown-container > div {
            /* second link wrapper */
            @apply w-full relative;
        }
        header > div .right nav > div .dropdown-container > div > a {
            /* second link */
            @apply px-6 flex w-full text-sm transition-all duration-200 hover:text-color-brown relative overflow-hidden;
        }
        header > div .right nav > div .dropdown-container > div > a.active {
            /* second link active */
            @apply text-color-brown;
        }
        header > div .right nav > div .dropdown-container > div > a::before {
            /* second link ::before line */
            @apply content-[''] absolute left-0 h-full w-1 -translate-x-full bg-color-brown transition-all duration-200;
        }
        header
            > div
            .right
            nav
            > div
            .dropdown-container
            > div
            > a:hover::before {
            /* second link :hover ::before line */
            @apply translate-x-0;
        }
        header > div .right nav > div .dropdown-container > div > a > span {
            /* second link span */
            @apply py-4 w-full;
        }
        header
            > div
            .right
            nav
            > div
            .dropdown-container
            > div:not(:last-child)
            > a
            > span {
            /* second link span */
            @apply border-b border-color-black border-opacity-15;
        }
        header > div .right nav > div .dropdown-container .dropdown-container {
            /* thrid container */
            @apply left-full top-0;
        }
    }

    /* Burger Menu */
    .burger-menu {
        width: 20px;
        height: 17px;
        transform: scale(1.1) translateX(5px);
        -webkit-transition: transform 330ms ease-out;
        -moz-transition: transform 330ms ease-out;
        -o-transition: transform 330ms ease-out;
        transition: transform 330ms ease-out;
        @apply lg:hidden flex mr-5 flex-col justify-between cursor-pointer;
    }
    .burger-menu.active {
        @apply -rotate-45 translate-x-1;
    }
    .line-menu {
        @apply bg-color-soft-black rounded-sm h-[3px] w-full;
    }
    .line-menu.line-half {
        @apply w-full;
    }
    .burger-menu.active .line-menu.line-half {
        @apply w-2/4;
    }
    .line-menu.first-line {
        transition:
            transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57),
            width 0.33s;
        transform-origin: right;
    }
    .burger-menu.active .line-menu.first-line {
        -webkit-transform: rotate(-90deg) translateX(3px);
        -moz-transform: rotate(-90deg) translateX(3px);
        -o-transform: rotate(-90deg) translateX(3px);
        transform: rotate(-90deg) translateX(3px);
    }
    .line-menu.last-line {
        align-self: flex-end;
        transition:
            transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57),
            width 0.33s;
        transform-origin: left;
    }
    .burger-menu.active .line-menu.last-line {
        -webkit-transform: rotate(-90deg) translateX(-3px);
        -moz-transform: rotate(-90deg) translateX(-3px);
        -o-transform: rotate(-90deg) translateX(-3px);
        transform: rotate(-90deg) translateX(-3px);
    }

    /*-------------------------------------
    ----------------- FOOTER --------------
    -------------------------------------*/
    footer {
    }
    footer > div {
    }
    footer .top {
        @apply pt-28 pb-12 px-5;
    }
    footer .top h3 {
        @apply headline-3-center font-normal;
    }
    footer .top h3.big {
        @apply lg:text-[42px] text-[38px] font-medium;
    }
    footer .top p {
        @apply paragraph-center text-[13.5px] mt-7;
    }
    footer .top .social {
        @apply flex items-center justify-center gap-7 mt-10;
    }
    footer .top .social > a {
        @apply text-color-brown text-2.5xl hover:text-color-soft-black t-all;
    }
    footer .bottom {
        @apply parallax-img mx-auto w-full;
    }
    footer .bottom img {
        @apply mx-auto;
    }

    /* Footer 2 */
    .footer-2 {
        background: url(https://manufactura.bold-themes.com/main-demo/wp-content/uploads/sites/2/2017/05/hero_footer.jpg);
        @apply banner px-5 parallax-img;
    }
    .footer-2 > div {
        @apply bido-container flex flex-col items-center;
    }
    .footer-2 > div .footer-img {
        @apply flex w-fit mx-auto;
    }
    .footer-2 > div .footer-img img {
        @apply h-20 w-auto invert;
    }
    .footer-2 > div .contact {
        @apply flex md:flex-row flex-col md:items-start items-center justify-between w-full md:gap-5 gap-7 md:my-28 mt-24 mb-20 max-w-[1100px];
    }
    .footer-2 > div .contact > div {
        @apply flex items-start gap-3;
    }
    .footer-2 > div .contact > div > a {
        @apply text-color-white;
    }
    .footer-2 > div .contact > div > a svg {
        @apply w-12 stroke-color-white t-all;
    }
    .footer-2 > div .contact > div:hover > a svg {
        @apply stroke-color-brown;
    }
    .footer-2 > div .contact > div > a:where(.phone, .location) svg {
        @apply w-10 fill-color-white;
    }
    .footer-2 > div .contact > div:hover > a:where(.phone, .location) svg {
        @apply fill-color-brown;
    }
    .footer-2 > div .contact > div > div {
        @apply text-color-white super-sub-headline leading-[1.8];
    }
    .footer-2 > div nav {
        @apply w-full flex items-center md:justify-start justify-center gap-7;
    }
    .footer-2 > div nav a {
        @apply text-color-white text-sm font-light t-all hover:text-color-brown;
    }

    /*-------------------------------------
    ----------------- PRODUCT -------------
    -------------------------------------*/

    /* Img Hover Detail */
    .img-hover-detail {
        @apply px-5 absolute inset-0 bg-color-soft-black-2 bg-opacity-60 flex items-center justify-center opacity-0 hover:opacity-100 transition-all duration-500;
    }
    .img-hover-detail > div {
        @apply detail-template;
    }

    .detail-template {
        @apply border border-color-brown w-full grid grid-cols-12;
    }
    .detail-template > div {
        @apply flex items-center justify-center min-h-[51px] p-3 text-center;
    }
    .detail-template > div:nth-child(1) {
        @apply col-span-12 border-b border-color-brown min-h-[53px];
    }
    .detail-template > div:nth-child(2) {
        @apply col-span-6 border-r border-color-brown;
    }
    .detail-template > div:nth-child(3) {
        @apply col-span-6;
    }
    .detail-template > div:nth-child(4) {
        @apply col-span-12 border-t border-color-brown min-h-[53px];
    }
    .detail-template > div strong {
        @apply text-color-white font-roboto-slab text-[16.5px] font-medium tracking-[1px];
    }
    .detail-template > div p {
        @apply paragraph-center text-color-white font-roboto-slab tracking-[1px];
    }
    .detail-template > div span {
        @apply text-color-white text-15 font-semibold;
    }
    .detail-template > div del {
        @apply opacity-50 mr-2;
    }
    .detail-template > div a {
        @apply flex items-center justify-center w-full h-full text-color-brown hover:text-color-white text-[13.5px] font-semibold t-all;
    }

    .detail-template-black {
        @apply detail-template;
    }
    .detail-template-black > div :is(strong, span) {
        @apply text-color-black;
    }
    .detail-template-black > div a {
        @apply hover:text-color-black;
    }

    .detail-template-black-bigger {
        @apply detail-template-black;
    }
    .detail-template-black-bigger > div strong {
        @apply super-headline-2;
    }

    /* Slider Product Detail */
    .slider-product-detail {
        @apply md:w-[300px] w-full min-w-[300px] border border-color-brown;
    }
    .slider-product-detail .price {
        @apply p-[30px] flex items-center border-b border-color-brown;
    }
    .slider-product-detail .price span {
        @apply product-price;
    }
    .slider-product-detail .explanation {
        @apply p-[30px];
    }
    .slider-product-detail .explanation strong {
        @apply product-headline;
    }
    .slider-product-detail .explanation p {
        @apply product-sub-headline mt-10;
    }
    .slider-product-detail .btn-area a {
        @apply product-btn px-[30px] py-7 border-t border-color-brown;
    }

    /*-------------------------------------
    ----------------- SLIDER --------------
    -------------------------------------*/
    .swiper-slider.diff {
        @apply lg:mt-44 mt-22 mx-10;
    }

    /* Product Slider 1 */
    .product-slider-1 {
    }
    .product-slider-1 .swiper {
        @apply relative;
    }
    .product-slider-1 .swiper .swiper-wrapper {
    }
    .product-slider-1 .swiper .swiper-wrapper .swiper-slide {
    }
    .product-slider-1 .swiper .swiper-wrapper .swiper-slide > div {
        @apply h-full max-w-1200 mx-auto flex md:flex-row flex-col gap-4 justify-between items-center px-5 pb-px;
    }
    .product-slider-1 .swiper .swiper-wrapper .swiper-slide > div .img {
        @apply md:w-auto w-full;
    }

    /* Slider Pagination */
    .swiper-slider {
        @apply relative;
    }
    .swiper-slider .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-slider .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-slider .swiper-pagination-custom,
    .swiper-pagination-fraction {
        @apply -bottom-14;
    }
    .swiper-slider.inset .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-slider.inset
        .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-slider.inset .swiper-pagination-custom,
    .swiper-pagination-fraction {
        @apply bottom-2;
    }
    .swiper-slider.inset_2 .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-slider.inset_2
        .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-slider.inset_2 .swiper-pagination-custom,
    .swiper-pagination-fraction {
        @apply bottom-10;
    }
    .swiper-slider
        .swiper-horizontal
        > .swiper-pagination-bullets
        .swiper-pagination-bullet,
    .swiper-slider
        .swiper-pagination-horizontal.swiper-pagination-bullets
        .swiper-pagination-bullet {
        @apply bg-color-transparent opacity-100 border-2 border-color-soft-black w-2.5 h-2.5;
    }
    .swiper-slider
        .swiper-horizontal
        > .swiper-pagination-bullets
        .swiper-pagination-bullet-active,
    .swiper-slider
        .swiper-pagination-horizontal.swiper-pagination-bullets
        .swiper-pagination-bullet-active {
        @apply bg-color-soft-black;
    }

    .swiper-slider.white
        .swiper-horizontal
        > .swiper-pagination-bullets
        .swiper-pagination-bullet,
    .swiper-slider.white
        .swiper-pagination-horizontal.swiper-pagination-bullets
        .swiper-pagination-bullet {
        @apply border-color-white;
    }
    .swiper-slider.white
        .swiper-horizontal
        > .swiper-pagination-bullets
        .swiper-pagination-bullet-active,
    .swiper-slider.white
        .swiper-pagination-horizontal.swiper-pagination-bullets
        .swiper-pagination-bullet-active {
        @apply bg-color-white;
    }

    /* Slider Arrows */
    .slider-arr {
        @apply absolute top-2/4 -translate-y-2/4 h-10 w-10 border-color-soft-black border-l-3 border-b-3 z-10;
    }
    .slider-prev {
        @apply left-16 rotate-45;
    }
    .slider-next {
        @apply right-16 -rotate-[135deg];
    }

    .slider-prev.near {
        @apply left-8;
    }
    .slider-next.near {
        @apply right-8;
    }

    .slider-arr.small {
        @apply w-5 h-5;
    }
    .white .slider-arr {
        @apply border-color-white;
    }

    /*-------------------------------------
    ----------------- BANNER --------------
    -------------------------------------*/
    .banner {
        @apply px-5 py-32 parallax-img;
    }
    .banner-short {
        @apply banner pt-30 pb-15;
    }

    .banner .tall {
        @apply md:my-30 my-24;
    }

    /* First Banner */
    .first-banner {
        @apply banner;
    }
    .first-banner h2 {
        @apply font-medium mt-14 leading-[1.2];
    }
    .first-banner h3 {
        @apply sub-headline-white mt-5 leading-[1.8] max-w-[580px];
    }

    /* Second Banner */
    .second-banner {
        @apply first-banner;
    }
    .second-banner::before {
        @apply content-[''] inset-0 bg-color-black bg-opacity-50 absolute;
    }
    .second-banner > * {
        @apply relative z-10;
    }
    .second-banner h2 {
        @apply mt-5 max-w-[768px];
    }
    .second-banner h4 {
        @apply text-template-9-2 mt-14;
    }
    .second-banner .info {
        @apply info-template-1-2 mt-5;
    }
    .thrid-banner {
        @apply first-banner py-[90px];
    }

    /*-------------------------------------
    ---------------- BUTTONS --------------
    -------------------------------------*/
    .square {
        @apply aspect-square flex items-center justify-center p-0;
    }

    .btn-txt {
        @apply text-xs font-semibold text-color-soft-black leading-[1.8] t-all hover:text-color-brown;
    }
    .btn {
        @apply md:py-3.5 py-3 md:px-7 px-6 border font-medium md:text-[13.5px] text-13 font-roboto-slab text-color-soft-black flex w-fit leading-none tracking-[1px] t-all;
    }
    .btn-white {
        @apply btn border-color-white text-color-white hover:text-color-brown hover:border-color-brown;
    }

    .btn-1 {
        @apply btn border-color-brown hover:border-color-soft-black;
    }
    .btn-1-brown {
        @apply btn-1 text-color-brown hover:text-color-soft-black;
    }
    .btn-1-brown-2 {
        @apply btn-1-brown tracking-[0px] font-semibold;
    }
    .btn-1-small {
        @apply btn border-color-brown hover:border-color-soft-black text-xs py-2 px-5;
    }

    .btn-1-big {
        @apply btn border-color-brown hover:border-color-soft-black text-lg py-3;
    }

    .btn-white-outlined {
        @apply btn border-color-white text-color-white hover:border-color-brown hover:text-color-brown;
    }

    .btn-2 {
        @apply text-15 text-color-soft-black flex items-center gap-3 t-all;
    }
    .btn-2 span {
        @apply border border-color-soft-black square w-[38px] t-all;
    }
    .btn-2 span svg {
        @apply w-4 stroke-color-soft-black t-all;
    }
    .btn-2:hover {
        @apply text-color-brown;
    }
    .btn-2:hover span {
        @apply border-color-brown;
    }
    .btn-2:hover span svg {
        @apply stroke-color-brown;
    }

    .btn-3 {
        @apply paragraph text-15 border border-color-black py-1.5 px-4;
    }

    .btn-4 {
        @apply btn border-color-brown hover:text-color-brown tracking-[0px] font-bold;
    }

    .btn-5 {
        @apply btn-3 border-color-soft-black-2 text-color-soft-black-2 px-7 py-3 font-medium text-sm tracking-[1px] hover:text-color-brown hover:border-color-brown t-all;
    }

    /* .btn-5{
        @apply text-[13.5px] border tracking-[1px] font-medium py-2 px-5
    }
    .btn-5-white{
        @apply btn-5 text-color-white border-color-white
    } */

    /*-------------------------------------
    ---------------- SPACING --------------
    -------------------------------------*/
    .spacing-1 {
        @apply mt-4;
    }
    .spacing-2 {
        @apply mt-8;
    }
    .spacing-3 {
        @apply mt-12;
    }
    .spacing-4 {
        @apply mt-16;
    }
    .spacing-5 {
        @apply mt-20;
    }
    .spacing-6 {
        @apply mt-24;
    }
    .spacing-7 {
        @apply mt-28;
    }
    .spacing-8 {
        @apply mt-32;
    }
    .spacing-9 {
        @apply mt-36;
    }
    .spacing-10 {
        @apply mt-40;
    }
    .spacing-11 {
        @apply mt-44;
    }
    .spacing-12 {
        @apply mt-48;
    }

    /*-------------------------------------
    ------------------ MAIN ---------------
    -------------------------------------*/
    .map-contact {
        @apply flex flex-col gap-2;
    }
    .map-contact > a {
        @apply flex items-center text-color-brown hover:text-color-soft-black t-all;
    }
    .map-contact > a i {
        @apply w-4 flex items-center justify-center text-clip mr-3;
    }
    .map-contact > a span {
        @apply text-13;
    }

    /*-------------------------------------
    ------------------ FORM ---------------
    -------------------------------------*/
    .c-input {
        @apply paragraph w-full min-h-[44px] bg-color-transparent border border-color-soft-black border-opacity-20 text-color-black px-3 py-2 outline-none hover:shadow-input t-all select-none cursor-pointer flex flex-col justify-center pr-10;
    }
    .c-input.null {
        @apply text-opacity-50;
    }
    .c-input small {
        @apply paragraph-small text-opacity-60;
    }

    .c-input-2 {
        @apply paragraph h-12 border border-color-black border-opacity-10 text-color-soft-black w-full outline-none focus:border-opacity-20 t-all p-3 min-h-[48px] max-h-[300px];
    }
    .c-input-2.short {
        @apply h-20;
    }
    .c-input-2.red {
        @apply border-opacity-100 border-color-input-red;
    }
    .c-input-2.green {
        @apply border-opacity-100 border-color-input-green;
    }

    .custom-dropdown {
        @apply relative;
    }
    .custom-dropdown .dropdown {
        @apply absolute top-full bg-color-white w-full hidden flex-col shadow-xl z-20 max-h-[300px] overflow-y-auto;
    }
    .custom-dropdown.active .c-input {
        @apply hover:shadow-none border-opacity-100;
    }
    .custom-dropdown.active .dropdown {
        @apply flex border-t border border-color-soft-black border-opacity-40 -translate-y-px;
    }
    .custom-dropdown svg {
        @apply absolute right-5 top-2/4 -translate-y-2/4 fill-color-black opacity-40 pointer-events-none;
    }
    .custom-dropdown.active svg {
        @apply rotate-180;
    }
    .custom-dropdown .dropdown span {
        @apply paragraph text-color-soft-black px-3 py-2 hover:bg-color-soft-black hover:bg-opacity-5 cursor-pointer flex flex-col;
    }
    .custom-dropdown .dropdown span small {
        @apply paragraph-small text-opacity-60;
    }
    .custom-dropdown .dropdown span.null {
        @apply text-opacity-50;
    }
    .custom-dropdown .dropdown span:not(:last-child) {
        @apply border-b border-color-soft-black border-opacity-5;
    }

    .custom-range {
        @apply relative h-5 w-full bg-color-transparent;
    }
    .custom-range .custom-range-track {
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0)
        );
        @apply absolute top-2/4 -translate-y-2/4 h-5 w-full bg-color-transparent border border-color-black border-opacity-10 t-all;
    }
    .custom-range:hover .custom-range-track {
        @apply shadow-smooth;
    }
    .custom-range-thumb {
        cursor: e-resize;
        @apply absolute left-0 top-2/4 -translate-y-2/4 -translate-x-2/4 h-9 w-9 bg-color-brown text-color-white rounded-full flex items-center justify-center select-none text-11 font-bold t-all;
    }
    .custom-range-thumb:hover {
        box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.2);
    }

    /* Input Template 1 */
    .input-template-1 {
        @apply h-14 max-w-[540px] mt-15 border border-color-brown flex;
    }
    .input-template-1 input {
        @apply h-full w-full px-4 paragraph outline-none bg-color-transparent;
    }
    .input-template-1 button {
        @apply btn-txt flex items-center justify-center px-9 border-l border-color-brown;
    }

    .input-template-1-white {
        @apply input-template-1;
    }
    .input-template-1-white input {
        @apply text-color-white;
    }
    .input-template-1-white button {
        @apply text-color-white;
    }

    /* Input Template 2 */
    .input-template-2 {
        @apply h-10 max-w-[540px] border border-color-black border-opacity-10 flex;
    }
    .input-template-2 input {
        @apply h-full w-full px-3 paragraph outline-none bg-color-transparent;
    }
    .input-template-2 button {
        @apply btn-txt flex items-center justify-center px-4 border-l border-color-black border-opacity-10;
    }
    .input-template-2 button.square {
        @apply p-0 aspect-square;
    }
    .input-template-2 button i {
        @apply text-15;
    }

    /* Input Template 3 */
    .input-template-3 {
        @apply mb-3.5;
    }
    .input-template-3 label {
        @apply paragraph;
    }
    .input-template-3 label span {
        text-decoration: underline dotted;
        @apply text-color-red font-semibold;
    }
    .input-template-3 > div {
    }
    .input-template-3 > div:not(:nth-of-type(1)) {
        @apply mt-4;
    }
    .input-template-3 > div :is(input, select, textarea) {
        @apply c-input-2;
    }
    .input-template-3 > div textarea {
        @apply h-60;
    }

    .input-template-3-s {
        @apply input-template-3;
    }
    .input-template-3-s label {
        @apply mb-2 inline-block;
    }

    /* CHECKBOXWS */
    .cb {
    }
    .cb input {
        @apply translate-y-px;
    }
    .cb label {
        @apply paragraph;
    }
    .cb label a {
        @apply text-color-brown;
    }
    .cb label span {
        @apply text-color-red;
    }

    /*-------------------------------------
    ---------------- MODALS ---------------
    -------------------------------------*/
    body:has(.modalx-container.active) {
        @apply overflow-hidden;
    }
    .modalx-container {
        @apply px-2.5 flex items-center justify-center fixed inset-0 z-50 bg-color-black bg-opacity-70 overflow-hidden opacity-0 pointer-events-none transition-all duration-400;
    }
    .modalx-container.active {
        @apply opacity-100 pointer-events-auto;
    }
    .modalx-container .img-wrapper {
    }
    .modalx-container .img-wrapper .img-area {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
        @apply mx-auto w-full max-w-[1080px] bg-color-white relative translate-y-20 transition-all duration-400;
    }
    .modalx-container.active .img-wrapper .img-area {
        @apply flex flex-col translate-y-0;
    }
    .modalx-container .img-wrapper .img-area .close-btn {
        @apply top-right-xs text-xl hover:bg-color-white hover:text-color-brown;
    }
    .modalx-container .img-wrapper .img-area .close-btn span {
        @apply -translate-y-px;
    }
    .modalx-container .img-wrapper .img-area img {
        @apply w-full max-h-[87vh];
    }
    .modalx-container .img-wrapper .txt-area {
        @apply ml-auto absolute right-0 top-full text-xs text-color-ccc leading-6;
    }
    .modalx-container .arr {
        @apply absolute top-2/4 -translate-y-2/4 text-4xl text-color-white text-opacity-50 hover:text-opacity-100 t-all;
    }
    .modalx-container .arr.left-arr {
        @apply md:left-15 left-5;
    }
    .modalx-container .arr.right-arr {
        @apply md:right-15 right-5;
    }
    .modalx-container .close-btn {
        @apply absolute right-0 top-0 text-color-white leading-none w-11 h-11 text-2xl opacity-80 hover:opacity-100 t-all;
    }

    /*-------------------------------------
    ------------- NOTIFICATIONS -----------
    -------------------------------------*/
    .notification {
        @apply flex p-3.75 mb-7.5 gap-3 items-start bg-color-black bg-opacity-[0.07] border-t-4 border-color-black;
    }
    .notification span {
        @apply translate-y-0.5 relative text-13 w-[22.5px] min-w-[22.5px] h-[22.5px] flex items-center justify-center border border-color-brown rounded-full text-color-brown;
    }
    .notification p {
        @apply paragraph;
    }
    .notification p a {
        @apply text-color-brown hover:text-color-soft-black t-all;
    }

    .notification-error {
        @apply notification border-color-notification-red;
    }
    .notification-error span::before,
    .notification-error span::after {
        @apply content-[''] w-0 h-0 border-solid absolute left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 -z-10;
    }
    .notification-error span::before {
        border-width: 0 11.5px 19.9px 11.5px;
        border-color: transparent transparent #ededed transparent;
    }
    .notification-error span::after {
        border-width: 0 12.5px 21.7px 12.5px;
        border-color: transparent transparent #b28564 transparent;
        @apply -z-20 -translate-y-0 top-0;
    }
    .notification-error span {
        @apply border-none;
    }

    .range-slide {
        position: relative;
        margin: 40px 0;
        height: 4px;
        width: 100%;
    }
    .range-slide .slide {
        position: absolute;
        top: 0;
        height: 4px;
        background: #ccc;
        left: 9px;
        right: 9px;
    }
    .range-slide .line {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 4px;
        background-color: #ccc;
    }
    .range-slide .thumb {
        position: absolute;
        z-index: 2;
        text-align: left;
        border-radius: 50%;
        outline: none;
        top: -7px;
        height: 18px;
        width: 18px;
        margin-left: -9px;
        @apply bg-color-brown;
    }
    .range-slide input {
        -webkit-appearance: none;
        appearance: none;
        position: absolute;
        pointer-events: none;
        z-index: 3;
        height: 3px;
        top: 0;
        width: 100%;
        opacity: 0;
        margin: 0;
    }
    .range-slide input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        pointer-events: all;
        border-radius: 50%;
        cursor: pointer;
        width: 18px;
        height: 18px;
    }
    .range-slide .display {
        margin: 40px;
        width: 240px;
        display: flex;
        justify-content: space-between;
    }
}
