*, ::before, ::after{
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-border-opacity: 1;
        border-color: rgb(229 231 235 / var(--tw-border-opacity));
        --tw-blur: var(--tw-empty,/*!*/ /*!*/);
        --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
        --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
        --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
        --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
        --tw-invert: var(--tw-empty,/*!*/ /*!*/);
        --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
        --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
        --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
        --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
.container{
        width: 100%}
@media (min-width: 640px){
        .container{
                max-width: 640px}}
@media (min-width: 768px){
        .container{
                max-width: 768px}}
@media (min-width: 1024px){
        .container{
                max-width: 1024px}}
@media (min-width: 1280px){
        .container{
                max-width: 1280px}}
@media (min-width: 1536px){
        .container{
                max-width: 1536px}}
@media (min-width: 1024px){
        .container:not(.w-full){
                max-width: 80rem}}
ul.title{
        list-style-position: inside;
        font-family: montserrat;
        font-size: 0.9rem}
.title{
        font-family: montserrat;
        font-size: 1.875rem;
        line-height: 2.25rem;
        text-transform: uppercase;
        --tw-text-opacity: 1;
        color: rgb(227 6 19 / var(--tw-text-opacity))}
.blue-container .title{
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))}
h2.heading{
        font-size: 1.5rem;
        line-height: 2rem}
.policy-container p{
        margin-top: 0.25rem;
        margin-bottom: 0.25rem}
.policy-container h1{
        letter-spacing: -1px}
ul.policy-container h1{
        list-style-position: inside;
        font-family: montserrat;
        font-size: 0.9rem}
.policy-container h1{
        font-family: montserrat;
        --tw-text-opacity: 1;
        color: rgb(227 6 19 / var(--tw-text-opacity))}
.policy-container h2{
        letter-spacing: -1px}
ul.policy-container h2{
        list-style-position: inside;
        font-family: montserrat;
        font-size: 0.9rem}
.policy-container h2{
        margin-top: 1.5rem;
        margin-bottom: 0.25rem;
        font-family: montserrat;
        --tw-text-opacity: 1;
        color: rgb(227 6 19 / var(--tw-text-opacity))}
.policy-container h3{
        letter-spacing: -1px}
ul.policy-container h3{
        list-style-position: inside;
        font-family: montserrat;
        font-size: 0.9rem}
.policy-container h3{
        margin-bottom: 0.25rem;
        margin-top: 0.75rem;
        font-family: montserrat;
        --tw-text-opacity: 1;
        color: rgb(227 6 19 / var(--tw-text-opacity))}
ul.heading{
        list-style-position: inside;
        font-family: montserrat;
        font-size: 0.9rem}
.heading{
        position: relative;
        margin: auto;
        margin-bottom: 1.25rem;
        display: inline-block;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        padding: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
        font-family: montserrat;
        text-transform: uppercase;
        --tw-text-opacity: 1;
        color: rgb(227 6 19 / var(--tw-text-opacity))}
.heading::after, .heading::before{
        top: 40%;
        z-index: -10;
        --tw-bg-opacity: 1;
        background-color: rgb(227 6 19 / var(--tw-bg-opacity))}
@media (min-width: 768px){
        .heading::after, .heading::before{
                top: 50%}}
@media (min-width: 1024px){
        .container:not(.heading::after){
                max-width: 80rem}}
.heading::after{
        position: absolute;
        height: 0.25rem;
        width: 100%;
        max-width: 20rem;
        content:''}
@media (min-width: 1024px){
        .container:not(.heading::before){
                max-width: 80rem}}
.heading::before{
        position: absolute;
        right: 100%;
        height: 0.25rem;
        width: 100%;
        max-width: 20rem;
        content:''}
#qualifoodlogo{
        margin: auto;
        margin-bottom: 0.75rem;
        width: 66.666667%;
        max-width: 20rem}
#content>*, .top-bar{
        opacity: 0}
.button{
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-family: montserrat}
.button, .splide__arrow{
        --tw-bg-opacity: 1;
        background-color: rgb(227 6 19 / var(--tw-bg-opacity));
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms}
.button:hover, .splide__arrow:hover{
        --tw-bg-opacity: 1;
        background-color: rgb(202 5 20 / var(--tw-bg-opacity));
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))}
.splide__arrow svg{
    fill:white !important
    }
.side-content .button{
        margin-top: 1rem;
        display: inline-block}
/* .product-container:nth-child(even) .product-caption {
        order: 2;
    }
    .product-container:nth-child(even) .product-cover {
        order: 1;
    }

    .product-container:nth-child(odd) .product-cover {
        order: 1;
    } */
.product-container{
        flex-direction: column}
@media (min-width: 768px){
        .product-container{
                flex-direction: row}
        .product-container:nth-child(odd) .product-caption{
                order: -1}}
.product-caption{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center}
.product-caption > :not([hidden]) ~ :not([hidden]){
        --tw-space-y-reverse: 0;
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))}
.product-caption{
        padding: 1.5rem;
        text-align: center;
        --tw-text-opacity: 1;
        color: rgb(107 114 128 / var(--tw-text-opacity))}
.product-caption p{
        width: 83.333333%;
        max-width: 32rem}
@media (min-width: 1024px){
        .container:not(.animated-logo){
                max-width: 80rem}}
.animated-logo{
        position: relative;
        margin-bottom: 5rem;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center}
.animated-black, .animated-red{
        position: absolute;
        margin: auto;
        width: 66.666667%;
        max-width: 100px;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: var(--tw-transform);
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 200ms}
.animated-black{
        z-index: 20}
.animated-red{
        z-index: 10}
.product-caption:hover .animated-red{
        --tw-scale-x: 165%;
        --tw-scale-y: 165%;
        transform: var(--tw-transform)}
.product-caption .button{
        margin-top: 2rem !important}
.product-caption .button:hover{
        --tw-bg-opacity: 1;
        background-color: rgb(202 5 20 / var(--tw-bg-opacity))}
.product-container{
        margin-top: 3rem;
        margin-bottom: 3rem}
@media (min-width: 768px){
        .product-container{
                margin-top: 0px;
                margin-bottom: 0px}}
.container{
        padding-top: 0.75rem;
        padding-bottom: 0.75rem}
.product-caption{
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity))}
ul.product-caption h3{
        list-style-position: inside;
        font-family: montserrat;
        font-size: 0.9rem}
.product-caption h3{
        font-weight: 700;
        text-transform: uppercase;
        --tw-text-opacity: 1;
        color: rgb(227 6 19 / var(--tw-text-opacity))}
#content{
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px}
.themecontainer{
        padding-top: 2rem;
        padding-bottom: 2rem
        /*  overflow-x-hidden */}
@media (min-width: 1024px){
        .container:not(.themecontainer img){
                max-width: 80rem}}
.themecontainer img{
        width: 100%;
        max-width: none}
.homecontainer{
        margin-top: 2rem;
        margin-bottom: 2rem}
.homecontainer > :not([hidden]) ~ :not([hidden]){
        --tw-space-y-reverse: 0;
        margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(2rem * var(--tw-space-y-reverse))}
.homecontainer .side-content{
        width: 83.333333%}
.top-bar{
        position: relative;
        z-index: 1;
        background-color: transparent;
        padding-left: 1.5rem;
        padding-right: 0px}
.top-bar .socialcontainer{
        padding-left: 0.75rem;
        padding-right: 0.75rem}
@media (min-width: 1024px){
        .top-bar .socialcontainer{
                order: 2}}
.top-bar .menucontainer{
        position: relative;
        top: 1rem;
        justify-content: center}
@media (min-width: 1024px){
        .top-bar .menucontainer{
                top: -2.5rem}
        .top-bar .menucontainer{
                justify-content: flex-end}}
.top-bar .navcontainer{
        margin-top: 1.25rem;
        border-top-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(156 163 175 / var(--tw-border-opacity));
        padding-left: 0.75rem;
        padding-top: 0.5rem}
@media (min-width: 1024px){
        .top-bar .navcontainer{
                order: 1}
        .top-bar .navcontainer{
                margin-top: 0px}
        .top-bar .navcontainer{
                border-width: 0px}}
ul.top-bar .active a{
        list-style-position: inside;
        font-family: montserrat;
        font-size: 0.9rem}
.top-bar .active a{
        --tw-text-opacity: 1 !important;
        color: rgb(227 6 19 / var(--tw-text-opacity)) !important}
.top-bar .dropdown, .top-bar .dropdown .menu{
        background-color: transparent}
.top-bar .has-dropdown .nested{
        display: none;
        --tw-bg-opacity: 1 !important;
        background-color: rgb(227 6 19 / var(--tw-bg-opacity)) !important;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))}
.top-bar .nested a{
        white-space: nowrap;
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
        --tw-text-opacity: 1 !important;
        color: rgb(255 255 255 / var(--tw-text-opacity)) !important}
#offcanvas  .has-dropdown .nested{
        display: none}
.has-dropdown{
        position: relative}
.has-dropdown::after{
        content:'\f0d7';
        font-family: "Font Awesome 5 Free"; font-weight: 900}
ul.has-dropdown::after{
        list-style-position: inside;
        font-family: montserrat;
        font-size: 0.9rem}
.has-dropdown::after{
        position: absolute;
        top: 0px;
        right: 0px;
        display: flex;
        height: 100%;
        width: 0.5rem;
        align-items: center;
        justify-content: center;
        --tw-text-opacity: 1;
        color: rgb(227 6 19 / var(--tw-text-opacity))}
.top-bar .has-dropdown:hover .nested{
        display: block}
ul#offcanvas .menu a{
        list-style-position: inside;
        font-family: montserrat;
        font-size: 0.9rem}
#offcanvas .menu a{
        padding-top: 0.6rem;
        font-family: montserrat;
        font-size: 1rem;
        line-height: 1.5rem;
        text-transform: uppercase;
        --tw-text-opacity: 1;
        color: rgb(227 6 19 / var(--tw-text-opacity))}
.top-bar .menu a{
        padding-top: 0.6rem;
        font-family: montserrat;
        text-transform: uppercase;
        --tw-text-opacity: 1;
        color: rgb(75 85 99 / var(--tw-text-opacity))}
@media (min-width: 768px){
        .top-bar .menu a{
                font-size: 0.75rem;
                line-height: 1rem}}
@media (min-width: 1024px){
        .top-bar .menu a{
                margin-left: 0.5rem;
                margin-right: 0.5rem}}
@media (min-width: 1280px){
        .top-bar .menu a{
                font-size: 1rem;
                line-height: 1.5rem}}
#mainlogo{
        display: block;
        width: 15rem}
@media (min-width: 1024px){
        #mainlogo{
                width: 300px}}
@media (min-width: 1280px){
        #mainlogo{
                width: 350px}}
#menu{
        padding-top: 2rem;
        padding-bottom: 2rem}
.copyright{
        text-align: center;
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase}
footer{
        margin-top: 1rem;
        background-color: transparent}
footer .menu{
        flex-direction: column}
@media (min-width: 768px){
        footer .menu{
                flex-direction: row}}
footer .menu a{
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase}
hr{
        --tw-border-opacity: 1;
        border-color: rgb(229 231 235 / var(--tw-border-opacity))}
.socialcontainer{
        display: flex}
.socialcontainer > :not([hidden]) ~ :not([hidden]){
        --tw-space-x-reverse: 0;
        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}
.socialcontainer .socials{
        display: flex;
        height: 2rem;
        width: 2rem;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        --tw-bg-opacity: 1;
        background-color: rgb(227 6 19 / var(--tw-bg-opacity));
        padding: 0.5rem;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms}
.socialcontainer .socials:hover{
        --tw-bg-opacity: 1;
        background-color: rgb(202 5 20 / var(--tw-bg-opacity))}
.top-bar .socialcontainer{
        margin-left: auto;
        justify-self: end}
.top-bar .socialcontainer i{
        font-size: 1.125rem;
        line-height: 1.75rem;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms}
.top-bar .socialcontainer i:hover{
        opacity: 1}
footer .socialcontainer{
        margin-top: 1rem}
.socials{
        font-size: 1.5rem;
        line-height: 2rem}
.blue-container{
        position: relative;
        --tw-bg-opacity: 1;
        background-color: rgb(227 6 19 / var(--tw-bg-opacity));
        padding: 2rem;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))}
.blue-container::after, .blue-container::before{
        position: absolute;
        top: 0px;
        z-index: -10;
        height: 100%;
        width: 100vw;
        --tw-bg-opacity: 1;
        background-color: rgb(227 6 19 / var(--tw-bg-opacity))}
.blue-container::after,.blue-container::before{
        content:'';
    }
.blue-container::after{
        left: 100%}
.blue-container::before{
        left: -200%}
.text-container>p, .text-container .title, .text-container>ul{
        margin-top: 2rem;
        margin-bottom: 2rem;
        margin-left: auto;
        margin-right: auto;
        width: 75%}
@media (min-width: 1024px){
        .text-container>p, .text-container .title, .text-container>ul{
                max-width: 72rem}}
/*  .text-container:not(.blue-container)>p:first-child{
        @apply mt-0;
    } */
.text-container>.button{
        margin-left: auto;
        margin-right: auto}
.side-content{
        padding: 2rem}
@media (min-width: 1024px){
        .side-content{
                max-width: 48rem}
        .side-content{
                padding-left: 1.5rem;
                padding-right: 1.5rem}}
.side-container h2{
        font-size: 1rem;
        line-height: 1.5rem}
p{
        line-height: 1.7rem}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after, .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after{
        --tw-bg-opacity: 1;
        background-color: rgb(227 6 19 / var(--tw-bg-opacity))}
.side-container{
        flex-direction: column}
@media (min-width: 768px){
        .side-container{
                flex-direction: row}}
.side-container>*{
        display: flex;
        align-items: center;
        justify-content: center}
.slogan-container{
        position: relative}
.slogan{
        font-family: montserrat}
.slogan span{
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 700}
@media (min-width: 1024px){
        .slogan span{
                font-size: 1.5rem;
                line-height: 2rem}}
.slogan-container .slogan{
        position: absolute;
        bottom: 1.5rem;
        left: 0px;
        right: 0px;
        margin: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        text-align: center;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))}
@media (min-width: 768px){
        .slogan-container .slogan{
                bottom: 2rem}}
@media (min-width: 1024px){
        .slogan-container .slogan{
                bottom: 3rem}
        .container:not(.slogan-container img){
                max-width: 80rem}}
.slogan-container img{
        width: 100%;
        max-width: none}
.slogan-container .slogan h1{
        margin-bottom: 0.25rem;
        font-family: montserrat;
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 700;
        text-transform: uppercase;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))}
@media (min-width: 768px){
        .slogan-container .slogan h1{
                font-size: 3rem;
                line-height: 1}}
@media (min-width: 1024px){
        .slogan-container .slogan h1{
                font-size: 2.25rem;
                line-height: 2.5rem}}
@media (min-width: 1280px){
        .slogan-container .slogan h1{
                font-size: 3rem;
                line-height: 1}}
ul.slogan-container .slogan h3{
        list-style-position: inside;
        font-family: montserrat;
        font-size: 0.9rem}
.slogan-container .slogan h3{
        margin: auto;
        width: 83.333333%;
        font-size: 1.25rem;
        line-height: 1.75rem;
        font-weight: 700;
        text-transform: lowercase;
        font-style: italic;
        --tw-text-opacity: 1;
        color: rgb(227 6 19 / var(--tw-text-opacity))}
@media (min-width: 768px){
        .slogan-container .slogan h3{
                font-size: 1.5rem;
                line-height: 2rem}}
@media (min-width: 1024px){
        .slogan-container .slogan h3{
                font-size: 1.5rem;
                line-height: 2rem}}
@media (min-width: 1280px){
        .slogan-container .slogan h3{
                font-size: 1.875rem;
                line-height: 2.25rem}}
.slogan-container .slogan img{
        display: none}
@media (min-width: 768px){
        .slogan-container .slogan img{
                margin-bottom: -2rem}
        .slogan-container .slogan img{
                display: block}}
@media (min-width: 1024px){
        .slogan-container .slogan img{
                margin-bottom: -2.75rem}
        .slogan-container .slogan img{
                max-width: 420px}}
/*
       .slogan-container{
     @apply mb-8
    }*/
.contact-container{
        display: flex;
        flex-direction: column;
        justify-content: center}
.contact-container .contact{
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
        line-height: 2rem}
@media screen and (min-width: 40em) {
        .contact-container .contact{
            direction: rtl;
        }
        .contact-container .contact i{
            margin-left: 15px;
        }
    }
#contactform #policy{
        margin-right: 0.25rem}
.contact-container .contact a{
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))}
.contact i{
        margin-right: 0.75rem;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))}
footer .contact i{
        margin-right: 0.25rem;
        margin-left: 0.5rem;
        --tw-text-opacity: 1 !important;
        color: rgb(0 0 0 / var(--tw-text-opacity)) !important}
.form-container{
        margin: 0.75rem;
        margin-top: 1.5rem;
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(229 231 235 / var(--tw-border-opacity));
        --tw-bg-opacity: 1;
        background-color: rgb(249 250 251 / var(--tw-bg-opacity));
        padding: 1.5rem}
@media (min-width: 768px){
        .form-container{
                margin-top: 0px}
        .map-container{
                margin-top: 1.75rem}}
.fixed{
        position: fixed}
.absolute{
        position: absolute}
.relative{
        position: relative}
.top-2{
        top: 0.5rem}
.right-2{
        right: 0.5rem}
.top-0{
        top: 0px}
.left-0{
        left: 0px}
.right-0{
        right: 0px}
.top-3{
        top: 0.75rem}
.right-3{
        right: 0.75rem}
.z-10{
        z-index: 10}
.m-auto{
        margin: auto}
.\!mb-0{
        margin-bottom: 0px !important}
.\!mt-\[10px\]{
        margin-top: 10px !important}
.ml-2{
        margin-left: 0.5rem}
.flex{
        display: flex}
.hidden{
        display: none}
.h-auto{
        height: auto}
.h-screen{
        height: 100vh}
.h-24{
        height: 6rem}
.h-12{
        height: 3rem}
.max-h-full{
        max-height: 100%}
.w-full{
        width: 100%}
.w-9\/12{
        width: 75%}
.w-10\/12{
        width: 83.333333%}
.w-28{
        width: 7rem}
.w-auto{
        width: auto}
.w-screen{
        width: 100vw}
.w-12{
        width: 3rem}
.w-72{
        width: 18rem}
.max-w-3xl{
        max-width: 48rem}
.max-w-\[250px\]{
        max-width: 250px}
.max-w-\[320px\]{
        max-width: 320px}
.max-w-\[500px\]{
        max-width: 500px}
.\!max-w-\[500px\]{
        max-width: 500px !important}
.max-w-xs{
        max-width: 20rem}
.\!max-w-xs{
        max-width: 20rem !important}
.max-w-full{
        max-width: 100%}
.transform{
        transform: var(--tw-transform)}
@-webkit-keyframes spin{
        to{
                transform: rotate(360deg)}}
@keyframes spin{
        to{
                transform: rotate(360deg)}}
.animate-spin{
        -webkit-animation: spin 1s linear infinite;
                animation: spin 1s linear infinite}
.cursor-pointer{
        cursor: pointer}
.list-disc{
        list-style-type: disc}
.flex-row{
        flex-direction: row}
.flex-col{
        flex-direction: column}
.items-end{
        align-items: flex-end}
.items-center{
        align-items: center}
.justify-center{
        justify-content: center}
.justify-between{
        justify-content: space-between}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
        --tw-space-y-reverse: 0;
        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1rem * var(--tw-space-y-reverse))}
.space-y-8 > :not([hidden]) ~ :not([hidden]){
        --tw-space-y-reverse: 0;
        margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(2rem * var(--tw-space-y-reverse))}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
        --tw-space-y-reverse: 0;
        margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
        --tw-space-y-reverse: 0;
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
        --tw-space-x-reverse: 0;
        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}
.rounded-full{
        border-radius: 9999px}
.border-4{
        border-width: 4px}
.border-solid{
        border-style: solid}
.border-zinc-400{
        --tw-border-opacity: 1;
        border-color: rgb(161 161 170 / var(--tw-border-opacity))}
.bg-transparent{
        background-color: transparent}
.bg-black{
        --tw-bg-opacity: 1;
        background-color: rgb(0 0 0 / var(--tw-bg-opacity))}
.bg-white{
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity))}
.bg-opacity-50{
        --tw-bg-opacity: 0.5}
.p-2{
        padding: 0.5rem}
.px-2{
        padding-left: 0.5rem;
        padding-right: 0.5rem}
.pr-8{
        padding-right: 2rem}
.text-left{
        text-align: left}
.text-center{
        text-align: center}
.font-catamaran{
        font-family: catamaran}
.text-base{
        font-size: 1rem;
        line-height: 1.5rem}
.text-sm{
        font-size: 0.875rem;
        line-height: 1.25rem}
.font-bold{
        font-weight: 700}
.uppercase{
        text-transform: uppercase}
.lowercase{
        text-transform: lowercase}
.text-white{
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))}
.brightness-100{
        --tw-brightness: brightness(1);
        filter: var(--tw-filter)}
.brightness-\[100\]{
        --tw-brightness: brightness(100);
        filter: var(--tw-filter)}

html, body{
        overflow-x: hidden;
        font-family: montserrat}
ula{
        list-style-position: inside;
        font-family: montserrat;
        font-size: 0.9rem}
a{
        --tw-text-opacity: 1;
        color: rgb(227 6 19 / var(--tw-text-opacity))}
a:hover{
        --tw-text-opacity: 1;
        color: rgb(177 5 19 / var(--tw-text-opacity))}
h1.heading{
        margin-top: 2rem}

@font-face {
    font-family: 'montserrat';
    src: url(/fonts/Montserrat-Regular.otf?65bc44fbf8204991497c838486ec83e2) format('opentype');
}
@font-face {
    font-family: 'montserrat';
    font-weight: 700;
    src: url(/fonts/Montserrat-Bold.otf?a6bc51efd33e2f7f1b95d90fcb6d5991) format('opentype');
}
@media (min-width: 768px){
        .md\:w-6\/12{
                width: 50%}
        .md\:w-4\/12{
                width: 33.333333%}
        .md\:w-8\/12{
                width: 66.666667%}
        .md\:w-5\/12{
                width: 41.666667%}
        .md\:w-7\/12{
                width: 58.333333%}
        .md\:w-9\/12{
                width: 75%}
        .md\:w-1\/3{
                width: 33.333333%}
        .md\:flex-row{
                flex-direction: row}
        .md\:space-y-0 > :not([hidden]) ~ :not([hidden]){
                --tw-space-y-reverse: 0;
                margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0px * var(--tw-space-y-reverse))}
        .md\:space-x-2 > :not([hidden]) ~ :not([hidden]){
                --tw-space-x-reverse: 0;
                margin-right: calc(0.5rem * var(--tw-space-x-reverse));
                margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}
        .md\:text-left{
                text-align: left}
        .md\:text-right{
                text-align: right}}
@media (min-width: 1024px){
        .lg\:mr-8{
                margin-right: 2rem}
        .lg\:w-96{
                width: 24rem}
        .lg\:flex-row{
                flex-direction: row}
        .lg\:border-t{
                border-top-width: 1px}
        .lg\:border-gray-400{
                --tw-border-opacity: 1;
                border-color: rgb(156 163 175 / var(--tw-border-opacity))}
        .lg\:pr-0{
                padding-right: 0px}
        .lg\:pt-2{
                padding-top: 0.5rem}}