:root {
    --f-12: clamp(0.8rem, 2.5vw, 0.9rem);
    --f-14: clamp(0.875rem, 2.5vw, 1rem);
    --f-16: clamp(1.05rem, 3.5vw, 1.05rem);
    --f-18: clamp(1.135rem, 3.75vw, 1.5rem);
    --f-20: clamp(1.3rem, 4vw, 1.75rem);
    --f-22: clamp(1.5rem, 5vw, 2rem);
    --f-24: clamp(1.7rem, 5vw, 2.25rem);
    --f-26: clamp(1.625rem, 5vw, 2.5rem);
    --f-28: clamp(1.75rem, 7vw, 2.75rem);
    --f-30: clamp(1.875rem, 5vw, 3rem);
    --f-32: clamp(2rem, 5vw, 3.25rem);
    --f-34: clamp(2.125rem, 5vw, 3.5rem);
    --f-36: clamp(2.25rem, 5vw, 3.75rem);
    --f-38: clamp(2.375rem, 5vw, 4rem);
    --f-40: clamp(2.5rem, 5vw, 4.25rem);
    --f-42: clamp(2.625rem, 5vw, 4.5rem);
    --f-44: clamp(2.75rem, 5vw, 4.75rem);
    --f-46: clamp(2.875rem, 5vw, 5rem);
    --f-48: clamp(3rem, 5vw, 5.25rem);
    --f-50: clamp(3.125rem, 5vw, 5.5rem);
    --f-52: clamp(3.25rem, 5vw, 5.75rem);
    --f-54: clamp(3.375rem, 5vw, 6rem);
    --f-56: clamp(3.5rem, 5vw, 6.25rem);
    --f-58: clamp(3.625rem, 5vw, 6.5rem);
}

.amenity .owl-nav {
    text-align: right;
}


.amenity .owl-dots {
    display: none;
}

.amenity p {
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
}


.eq_button_product::before {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    background: #FFFFFF;
    height: 0.3em;
    right: 20%;
    top: -0.21em;
    transform: skewX(-45deg);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);

}

.eq_button_product::after {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    background: #FFFFFF;
    height: 0.3em;
    left: 20%;
    bottom: -0.25em;
    transform: skewX(45deg);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}

.eq_button_product:hover::before {
    right: 80%;
}

.eq_button_product:hover::after {
    left: 80%;
}

.eq_button_product img {
    width: 30px !important;
}



.eq_button_product {
    position: relative;
    background: none;
    color: #23806B;
    text-transform: uppercase;
    text-decoration: none;
    border: 0.18em solid #23806B;
    padding: 0.3em 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 20px;
}



.eq_button_product_white::before {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    background: #23806B;
    height: 0.3em;
    right: 20%;
    top: -0.21em;
    transform: skewX(-45deg);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);

}

.eq_button_product_white::after {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    background: #23806B;
    height: 0.3em;
    left: 20%;
    bottom: -0.25em;
    transform: skewX(45deg);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}

.eq_button_product_white:hover::before {
    right: 80%;
}

.eq_button_product_white:hover::after {
    left: 80%;
}

.eq_button_product_white img {
    width: 30px !important;
}

.eq_button_product_white {
    position: relative;
    background: none;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    border: 0.18em solid #fff;
    padding: 0.3em 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.item a {
    text-decoration: none;
}

.amenity .border_123 {
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    margin-bottom: 16px;
}


/* Category page css */

.cover-image {

    border-radius: 10px;
}

.cover-image img {
    border-radius: 7px;
    user-select: none;
    pointer-events: none;
    margin-bottom: 20px;
}

.cover-image h3 {
    font-size: 3rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.custom-list {
    list-style-type: circle;
    padding-left: 20px !important;
}

.custom-list li {
    position: relative;
    margin-bottom: 10px;
    list-style: circle;
}

/*.custom-list li::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*    width: 25px;*/
    /* Adjust the width as needed */
/*    height: 25px;*/
    /* Adjust the height as needed */
/*    background-image: url("../images/icons/checkmark.png");*/
/*    background-size: contain;*/
/*    background-repeat: no-repeat;*/
/*}*/

.other-categories {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

.product-card {
    transition: transform 0.3s ease-in-out;
}

.product-card:hover {
    transform: translateY(-10px);
}

.card-body {
    padding: 1.25rem;
}

@media (max-width: 992px) {
    .other-categories {
        position: -webkit-static;
        position: static;
    }
}



#simpleToast {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    top: 110px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    font-family: monospace;
    display: inline-flex;
    line-height: 12px;
    visibility: visible;
    opacity: 1;
    animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;
    transition: visibility 0s 3s, opacity 0.5s ease-in-out;
}

#simpleToast.error {
    background-color: #cb5c67;
    color: #FFF !important;
}

#simpleToast.success {
    background-color: #bfead6;
    color: #198754;
}

@keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 110px;
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        top: 110px;
        opacity: 1;
    }

    to {
        top: 110px;
        opacity: 0;
        visibility: hidden;
        display: none;
    }
}


/* Responsive classes */

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */
.f-12 {
    font-size: var(--f-12);
}

.f-14 {
    font-size: var(--f-14);
}

.f-16 {
    font-size: var(--f-16);
}

.f-18 {
    font-size: var(--f-18);
}

.f-20 {
    font-size: var(--f-20);
}

.f-22 {
    font-size: var(--f-22);
}

.f-24 {
    font-size: var(--f-24);
    font-weight: 500;
}

.f-26 {
    font-size: var(--f-26);
}

.f-28 {
    font-size: var(--f-28);
}

.f-30 {
    font-size: var(--f-30);
}

.f-32 {
    font-size: var(--f-32);
}

.f-34 {
    font-size: var(--f-34);
}

.f-36 {
    font-size: var(--f-36);
    font-weight: 800;
}

.f-38 {
    font-size: var(--f-38);
}

.f-40 {
    font-size: var(--f-40);
}

.f-42 {
    font-size: var(--f-42);
}

.f-44 {
    font-size: var(--f-44);
}

.f-46 {
    font-size: var(--f-46);
}

.f-48 {
    font-size: var(--f-48);
}

.f-50 {
    font-size: var(--f-50);
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.color-dark {
    color: #000;
}


/* Responsive css */
#navbar.navbar {
    background: #FFF;
}

.nav-logo {
    width: 75%;
}

.navbar #hamburger-menu {
    color: #000000 !important;
}

#happy_section {
    height: fit-content;
    position: relative;
    overflow: hidden;
}

#happy_overlay {
    background-color: #f1f1f1;
    width: 100%;
    height: 100%;
    z-index: 10;
}


#happy_overlay .container .row .col-lg-7 p {
    color: #000;
}

#happy_overlay .container .row .col-lg-7 h2 {
    font-size: var(--f-34);
}

#happy_overlay .container .row .col-lg-7 h3 {
    font-size: var(--f-22);
}

#below_counter .text.container {
    position: relative;
    justify-content: center;
    align-items: center;
}

#below_counter .text.container p {
    width: 100%;
    text-align: center;
}

#below_counter .text.container .text_div {
    width: 100%;
    display: contents;
}

#below_counter .text.container .text_div .word {
    position: absolute;
    top: 50px;
    opacity: 0;
    width: 100%;
    inline-size: fit-content;
}

.companies .marquee-item {
    width: 242px;
    height: 100%;
    display: inline-block;
    margin: 0 -50px;
    float: left;
    transition: all .2s ease-out;
}

.amenity .owl-nav {
    text-align: center;
    margin-top: 40px;
}

.showcase .carousel-nav {
    position: absolute;
    bottom: 0px;
}

.testimonial_slider.owl-carousel .owl-nav {
    /* background: #000; */
    margin-top: -78px;
    padding: 0;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    #navbar.navbar .container {
        max-width: 90% !important;
    }

    #below_counter .content-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    #below_counter .text.container {
        position: relative;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
    }

    #below_counter .text.container p {
        width: 52%;
        text-align: end;
    }

    #below_counter .text.container .text_div {
        display: block;
        width: 50%;
    }

    #below_counter .text.container .text_div .word {
        position: absolute;
        top: inherit;
        left: inherit;
        opacity: 0;
        /* inline-size: fit-content; */
    }

    .companies .marquee-item {
        width: 350px;
    }


    .testimonial_slider.owl-carousel .owl-nav {
        margin-top: 0px;
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #navbar.navbar {
        background: initial;
    }

    #navbar.navbar.sticky {
        background: #fff;
    }

    #navbar.navbar h1,
    #navbar.navbar .nav-items>ul>li>a,
    #navbar.navbar h6 {
        color: #000000;
    }

    .navbar.sticky h1,
    .navbar.sticky .nav-items>ul>li>a,
    .navbar.sticky h6 {
        color: #404040 !important;
    }

    .navbar {
        box-shadow: none;
    }

    .navbar #hamburger-menu {
        color: #FFFFFF !important;
    }

    .navbar.sticky #hamburger-menu {
        color: #000000 !important;
    }

    #happy_section {
        height: 100vh;
    }

    #happy_overlay {
        background-color: #0000006b;
        position: absolute;
        top: 0;
        left: 0;
    }

    #happy_overlay .container .row .col-lg-7 h2,
    #happy_overlay .container .row .col-lg-7 h3,
    #happy_overlay .container .row .col-lg-7 p {
        color: #ffffff;
    }

    .nav-logo {
        width: initial;
    }

    .amenity .owl-nav {
        text-align: right;
    }

    .showcase .carousel-nav {
        position: static;
        /* bottom: 0px; */
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}