:root, .light{
    --primary-bg-color: #fff;
    --secondary-bg-color: #f6f6f6;
    --highlight-color: #fff;
    --secondary-highlight-color: #f6f6f6;
    --active-color: #f6f6f6;
    --primary-text-color: #282828;
    --secondary-text-color: #fff;
    --header-color: rgba(255, 255, 255, 0.8);
    --button-color: #282828;
    --scrollbar-color: #cccccc;
    --disabled-button: #d3d3d3;
    --disabled-button-text: #8f8f8f;
    --company-logo-color: #d3d3d3;
    --image-bg-color: rgb(0, 0, 0, 0.5);
    --error-message-color: #ff0000;
    --error-message-bg: #ffe8e8;
}
.dark{
    --primary-bg-color: #0f0f0f;
    --secondary-bg-color: #1a1a1a;
    --highlight-color: #1a1a1a;
    --secondary-highlight-color: #242526;
    --active-color: #151515;
    --primary-text-color: #fff;
    --secondary-text-color: #282828;
    --header-color: rgb(15, 15, 15, 0.8);
    --button-color: #fff;
    --scrollbar-color: #242526;
    --disabled-button: #303030;
    --disabled-button-text: #8f8f8f;
    --company-logo-color: #303030;
    --image-bg-color: rgb(15, 15, 15, 0.8);
    --error-message-color: #ffffff;
    --error-message-bg: #4a0106;
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    border: 0;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border-spacing: 0;
}
.is_not_mac > ::-webkit-scrollbar, .is_not_mac .scroll::-webkit-scrollbar{
    width: 7px;
    height: 7px;
}
.is_not_mac > ::-webkit-scrollbar-track{
    border-radius: 6px;
}
.is_not_mac > ::-webkit-scrollbar-thumb, .is_not_mac .scroll::-webkit-scrollbar-thumb{
    border-radius: 5px;
    background-color: var(--scrollbar-color);
}
/* html {
    scroll-behavior: smooth;
} */
.blur-effect {
    backdrop-filter: blur(calc(var(--blur) * 1px)) saturate(var(--saturate, 2.8)) brightness(var(--brightness, 1.25)) contrast(var(--contrast, 1));
    -webkit-backdrop-filter: blur(calc(var(--blur) * 1px)) saturate(var(--saturate, 2.8)) brightness(var(--brightness, 1.25)) contrast(var(--contrast, 1));
    background-clip: padding-box;
    border: calc(var(--border) * 1px) solid light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.2));
}
::selection{
    background-color: var(--primary-text-color);
    color: var(--secondary-text-color);
}
body{
    font-family: Raleway;
    overflow-x: hidden;
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
    font-size: 16px;
}
.search-mobile{
    margin: 0;
    position: relative;
    overflow: auto !important;
    height: 100% !important;
}
html.search-mobile{
    margin-top: 0!important;
    overscroll-behavior: none;
}
a {
    text-decoration: none;
    color: var(--primary-text-color);
    -webkit-tap-highlight-color: transparent;
}
.cursor{
    position: absolute;
    top: 80px;
    height: 20px;
    width: 20px;
    background-color: black;
    border-radius: 50%;
    opacity: .3;
    backdrop-filter: blur(5px);
}
h1 {
    font-size: 60px;
    font-weight: 600;
}
h2 {
    font-size: 25px;
    font-weight: 700;
}
h3 {
    font-size: 20px;
    font-weight: 700;
}
p {
    line-height: 1.5em;
}
button{
    position: relative;
    font-family: Raleway;
    border: none;
    background-color: transparent;
    color: var(--primary-text-color);
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
button:disabled {
    background-color: var(--disabled-button) !important;
    color: var(--disabled-button-text) !important;
    cursor: unset !important;
}
.hover-effect{
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: -1;
    transform: scale(.75);
    transform-origin: center;
    border-radius: 45px 45px 35px 35px;
    transition: .3s ease-in-out;
}
.nav-open{
    overflow: hidden;
}
header{
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 0px 25px;
    width: 100%;
    box-sizing: border-box;
    height: 60px;
    z-index: 10;
    background-color: var(--header-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: .3s ease-in-out box-shadow;
}
header.shadow{
    box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.04);
}
.menu-toggle-section{
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}
.menu-toggle{
    z-index: 9999;
    outline: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* span.menu,
span.menu::after,
span.menu::before{
    position: absolute;
    content: '';
    width: 23px;
    height: 1.5px;
    background-color: var(--primary-text-color);
    border-radius: 20px;
    transition: 500ms cubic-bezier(0.77,0,0.175, 1);
} */
.menu-toggle span {
    display: block;
    width: 23px;
    height: 1.5px;
    background-color: var(--primary-text-color);
    margin: 7px 0;
    border-radius: 20px;
    transition: 500ms cubic-bezier(0.77,0,0.175, 1);
}
.menu-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-6px, 6px);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-6px, -6px);
}
/* span.menu::before{
    margin-top: -8px;
}
span.menu::after{
    margin-top: 8px;
}
.menu-toggle.active > span.menu{
    background: transparent;
}
.menu-toggle.active > span.menu::after,
.menu-toggle.active > span.menu::before{
    margin-top: 0px;
}
.menu-toggle.active > span.menu::before{
    transform: rotate(-225deg);
}
.menu-toggle.active > span.menu::after{
    transform: rotate(225deg);
} */
.bi-logo-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.bi-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    transition: opacity 0.3s ease-in-out;
    -webkit-tap-highlight-color: transparent;
}
.bi-logo:hover{
    opacity: 0.9;
}
.logo-letter{
    fill: var(--primary-text-color);
}
header nav{
    display: flex;
}
header nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
nav ul li {
    list-style: none;
    height: 100%;
    margin: 0px 2px;
    position: relative;
}
nav ul li::after{
    position: absolute;
    bottom: 0px;
    content: "";
    display: block;
    background-color: var(--primary-text-color);
    height: 2px;
    width: 0%;
    border-radius: 20px;
    transition: width 0.3s, opacity 0.3s;
    opacity: 0;
}
nav ul li:hover::after{
    width: 100%;
    opacity: 1;
}
nav ul li a{
    text-decoration: none;
    padding: 0px 20px;
    font-size: 14px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
}
.active-line{
    position: absolute;
    bottom: 0px;
    background-color: var(--primary-text-color);
    height: 2px;
    width: 100%;
    border-radius: 20px;
    transition: transform 0.3s;
}
.transparent{
    background-color: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}
.transparent nav ul li a, .transparent .dots{
    color: #fff;
}
.transparent .active-line, .transparent .menu-toggle span, .transparent nav ul li::after{
    background-color: #fff;
}
.list-company-button-section{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 15px;
}
.list-company-button{
    font-size: 12px;
    color: var(--secondary-text-color);
    background-color: var(--button-color);
    font-weight: 700;
    text-decoration: none;
    border-radius: 99999px;
    padding: 12px 25px;
}
header.active .list-company-button{
    color: var(--secondary-text-color);
    background-color: var(--button-color);
}
.options-wrapper{
    display: flex;
    position: relative;
    margin: 8px 0px;
}
.dots{
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 12px;
    -webkit-tap-highlight-color: transparent;
}
.options-wrapper .hover-effect {
    border-radius: 10px;
}
.dots:hover + .hover-effect {
    transform: scale(1);
    background-color: var(--secondary-bg-color);
}
header.transparent .dots:hover + .hover-effect{
    background-color: rgba(40, 40, 40, .55) !important;
}
header.transparent .logo-letter{
    fill: #fff !important;
}
.main-content {
    padding-top: 110px;
    padding-bottom: 25px;
}
.theme-switch-wrapper{
    position: fixed;
    width: 300px;
    border-radius: 30px;
    top: 65px;
    right: 25px;
    background-color: var(--highlight-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.04);
    transform-origin: top right;
    z-index: 1;
}
.theme-switch-section {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.theme-switch-section h3 {
    padding-left: 10px;
    margin-top: 10px;
}
.appearance-wrapper {
    width: 100%;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
    font-weight: 500;
    position: relative;
}
.appearance-wrapper .hover-effect {
    border-radius: 15px;
    background-color: var(--secondary-highlight-color);
    opacity: 0;
    transition: 0.3s ease-in-out opacity, 0.3s ease-in-out transform;
}
.appearance-wrapper:hover .hover-effect{
    transform: scale(1);
    opacity: 1;
}
.appearance-section {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
}
.backdrop-background{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 5;
}
footer{
    padding: 40px 80px;
}
.footer-content{
    display: flex;
    align-items: center;
}
.copyright-text-section{
    display: flex;
    align-items: center;
    gap: 5px;
}
.privacy-policy-text:hover{
    text-decoration: underline;
}
.social-media-section{
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    -webkit-box-flex: 1;
    flex-grow: 1;
}
.social-media{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.social-media-url{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    -webkit-tap-highlight-color: transparent;
}
.social-media .hover-effect {
    border-radius: 10px;
}
.social-media-url:hover + .hover-effect{
    transform: scale(1);
    background-color: var(--secondary-bg-color);
}
.social-media-url.fb, .social-media-url.ig{
    font-size: 20px;
}
.social-media-url.x{
    height: 20px;
}
.x-color{
    fill: var(--primary-text-color);
}
.left-button{
    position: absolute;
    left: -35px;
    top: 35%;
    padding: 0px;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    background: transparent;
}
.right-button{
    position: absolute;
    right: -35px;
    top: 35%;
    padding: 0px;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    background: transparent;
}
@keyframes loading-content {
    0%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes loading-content {
    0%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
.loading-icon{
    height: 40px;
    width: 40px;
    animation: loading-content .75s linear infinite;
    -webkit-animation: loading-content .75s linear infinite;
}
.search-bar-wrapper{
    position: absolute;
    top: 0px;
    height: 85vh;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 25px;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.search-bar-wrapper h1{
    color: #fff;
    font-size: 55px;
    font-weight: 600;
    margin-bottom: 55px;
    text-align: center;
}
.search-bar-section{
    background-color: #fff;
    border: 2px solid #f6f6f6;
    border-radius: 25px;
    width: 100%;
    /* max-width: 600px; */
}
.search-bar form {
    padding: 0px 15px;
    display: flex;
}
.close-search-bar-button-section{
    display: flex;
    justify-content: center;
    align-items: center;
}
.close-search-bar-button{
    height: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.search-button{
    background: none;
    border: 0;
    box-sizing: content-box;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    overflow: visible;
    padding: 0;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
}
.search-icon{
    display: block;
    height: 24px;
    width: 24px;
}
.icon {
    fill: #282828;
}
.search-form-control{
    border: none;
    outline: none;
    padding: 10px;
    height: 28px;
    font-size: 15px;
    background-color: transparent;
    font-family: Raleway;
    font-weight: 500;
    color: #282828;
    width: 100%;
    display: inline-block;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.clear-button-section{
    display: flex;
    justify-content: center;
    align-items: center;
}
.clear-button{
    height: 22px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.modal-overlay-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-overlay-section {
    display: flex;
    flex-direction: column;
    margin: 40px;
    background: var(--primary-bg-color);
    border-radius: 30px;
    overflow-y: hidden;
    max-height: 85%;
    border: 2px solid var(--secondary-bg-color);
    width: 530px;
}
.modal-overlay-content {
    padding: 40px;
    height: 100vh;
    max-height: 550px;
}
.modal-overlay-header {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    gap: 15px;
}
.scroll {
    overflow-y: scroll;
}
.modal-overlay-content h2{
    font-size: 30px;
    font-weight: 700;
}
.modal-overlay-content .close-button-wrapper {
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    -webkit-box-flex: 1;
    flex-grow: 1;
}
.modal-overlay-content .close-button-section {
    background-color: var(--secondary-bg-color) !important;
}
.no-result-text{
    font-weight: 600;
}
.choose-category-content, .filter-options{
    display: flex;
    flex-direction: column;
}
.choose-category-content {
    padding-top: 5px;
}
.categories-options-content, .hours-options-content, .edit-options-content, .filter-option-content{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;
}
.hours-options-content, .edit-options-content {
    width: 100%;
    font-size: 16px;
    margin-bottom: 10px !important;
    cursor: pointer;
    position: relative;
}
.choose-categories-wrapper, .filter-option-wrapper{
    margin-top: 15px;
}
.opening-hours-content {
    padding-top: 15px;
}
.choose-categories-section, .filter-option-section{
    width: 100%;
    font-size: 16px;
    cursor: pointer;
}
.categories-options-content, .filter-option-content{
    margin-bottom: 0px !important;
    position: relative;
}
.categories-options-text, .hours-options-text, .edit-options-text, .filter-option-text{
    font-weight: 600;
}
.categories-error{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}
.categories-error-text{
    font-weight: 600;
    text-align: center;
}
.modal-overlay-footer{
    display: flex;
    gap: 15px;
    padding-bottom: 30px;
    margin: 0px 30px;
}
.modal-overlay-wrapper.modal-filter .action-button {
    padding: 10px 30px !important;
}
.modal-overlay-wrapper .action-button.clear {
    background-color: transparent !important;
    border: 2px solid var(--button-color);
    color: var(--primary-text-color);
}
.modal-overlay-wrapper .action-button, .delete-button-section .action-button{
    width: 100%;
    font-size: 16px;
    padding: 12px 30px;
    background: var(--button-color);
    border-radius: 30px;
    font-weight: 600;
    color: var(--secondary-text-color);
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.edit-custom-hours-section{
    padding-bottom: 15px;
}
.edit-custom-hours-text{
    font-weight: 700;
    font-size: 20px;
}
.days-wrapper{
    display: flex;
    margin-bottom: 15px;
}
.day{
    width: 120px;
    font-weight: 600;
}
.days-content{
    display: flex;
    flex-direction: column;
}
.days-section, .add-hours-text-wrapper{
    display: flex;
    align-items: center;
    text-align: left;
}
.select-hours{
    font-family: Raleway;
    border: 2px solid var(--secondary-bg-color);
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
    outline: none;
    border-radius: 15px;
    padding: 15px;
    margin: 5px;
    width: 120px;
    font-size: 15px;
    -webkit-appearance: none;
}
.check-in-out-section .days-wrapper, .check-in-out-section .days-content, .check-in-out-section .days-section, .check-in-out-section .time, .check-in-out-section .select-hours{
    width: 100%;
}
.check-in-out-section .days-section{
    gap: 15px;
}
.add-hours-text{
    font-weight: 600;
    text-align: left;
    font-size: 16px;
    padding-left: 5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.clear-hours-wrapper{
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.clear-hours-icon{
    height: 22px;
}
.retry-button-section {
    padding-top: 25px;
}
.retry-button {
    display: flex;
    gap: 5px;
    font-size: 15px;
    align-items: center;
    border: 2px solid var(--button-color);
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
}
.retry-button svg {
    width: 20px;
    height: 20px;
}
.retry-icon {
    display: flex;
    transition: 0.5s ease-in-out transform;
    transition-delay: .1s;
}
.retry-button:hover .retry-icon {
    transform: rotate(360deg);
}
.retry-text {
    font-weight: 600;
}
.arrow {
    position: absolute;
    height: 100%;
    top: 0;
    right: 15px;
    display: flex;
    align-items: center;
}
/*INDEX*/
.main-background-wrapper{
    position: relative;
    height: 85vh;
    background-color: #000;
    border-radius: 0px 0px 35px 35px;
    margin-bottom: 25px;
    overflow: hidden;
}
.main-background-section{
    height: 100%;
    opacity: .7;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}
.bg-1{
    background-image: url('https://bi-cdn-images.bonaireinfo.org/background-image-1.webp');
    background-position: center;
}
.bg-2{
    background-image: url('https://bi-cdn-images.bonaireinfo.org/background-image-2.webp');
    background-position: center;
}
.bg-3{
    background-image: url('https://bi-cdn-images.bonaireinfo.org/background-image-5.webp');
    background-position: center;
}
.bg-4{
    background-image: url('https://bi-cdn-images.bonaireinfo.org/background-image-4.webp');
    background-position: center;
}
.bg-5{
    background-image: url('https://bi-cdn-images.bonaireinfo.org/background-image-6.webp');
    background-position: center;
}
.bg-6{
    background-image: url('https://bi-cdn-images.bonaireinfo.org/background-image-3.webp');
    background-position: center;
}
.bg-7{
    background-image: url('https://bi-cdn-images.bonaireinfo.org/background-image-7.webp');
    background-position: center;
}
.bg-8{
    background-image: url('https://bi-cdn-images.bonaireinfo.org/background-6.webp');
    background-position: center;
}
.bg-9{
    background-image: url('https://bi-cdn-images.bonaireinfo.org/b-background.jpg');
    background-position: center;
}
.background-gradient{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.73%, rgba(0, 0, 0, 0.38) 88.02%);
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100%;
}
.icon-color{
    fill: var(--primary-text-color);
}
.icon-color-stroke{
    stroke: var(--primary-text-color);
}
.icon-color.home{
    fill: #282828 !important;
}
.search-suggestions-wrapper{
    position: absolute;
    max-width: 600px;
    width: calc(100% - 50px);
}
.search-suggestions-section{
    background-color: #fff;
    padding: 15px;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.04)
}
.search-suggestions-section.hidden{
    display: none;
}
.search-bar-wrapper.mobile{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border-radius: 0px;
    z-index: 10;
    padding: 0px;
    display: flex;
}
.search-bar-wrapper.mobile .search-bar-section{
    height: 100%;
    width: 100%;
    border-radius: 0px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: unset;
    background-color: var(--primary-bg-color);
    border: 2px solid var(--primary-bg-color);
}
.search-bar-wrapper.mobile .search-suggestions-wrapper{
    height: 100%;
    width: 100%;
    position: unset;
    overflow-y: scroll;
    max-width: unset;
}
.search-bar-wrapper.mobile .search-suggestions-section{
    box-shadow: unset;
    background-color: transparent;
    padding: 0px 20px;
    margin-top: 15px;
}
.search-bar-wrapper.mobile .search-bar{
    margin: 10px;
    background-color: var(--secondary-bg-color);
    border: 2px solid transparent;
    border-radius: 999px;
}
.search-bar-wrapper.mobile .search-form-control{
    color: var(--color-text);
}
.search-bar-wrapper.mobile .icon-color{
    fill: var(--primary-text-color) !important;
}
.items-wrapper{
    position: relative;
    display: flex;
    align-items: center;
}
.items-section {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    cursor: pointer;
}
.items-section + .hover-effect{
    border-radius: 15px;
}
.items-wrapper.selected > .items-section + .hover-effect{
    transform: scale(1);
    background-color: #f6f6f6;
}
.search-bar-wrapper.mobile .items-wrapper.selected > .items-section + .hover-effect{
    background-color: var(--secondary-bg-color);
}
.search-icon-suggestions {
    width: 25px;
    height: 25px;
    min-width: 25px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.search-icon-suggestions svg {
    height: 20px;
    width: 20px;
    fill: #929292 !important;
}
.building-icon{
    color: #929292;
}
.items {
    color: #282828;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
}
.search-bar-wrapper.mobile .items{
    color: var(--primary-text-color);
}
.items-text {
    font-weight: 600;
}
.suggestion-icon{
    height: 24px;
    margin-right: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.category-search-suggestion{
    font-size: 12px;
    color: #929292;
}
.ligt-text{
    font-weight: normal;
}
.sunrise-sunset-wrapper{
    padding-top: 25px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0px 25px;
}
.sunrise-sunset-section{
    max-width: 1025px;
    width: 100%;
}
.todays-date{
    text-align: center;
    padding-top: 30px;
    margin-bottom: 10px;
}
.loading-todays-date{
    max-width: 220px;
    height: 30px;
    margin: auto;
    background: var(--active-color);
    border-radius: 8px;
    animation: loading 1.5s ease-in-out infinite;
    -webkit-animation: loading 1.5s ease-in-out infinite;
}
.todays-text {
    font-weight: 700;
    font-size: 20px;
}
.arrow-color, .check-color{
    fill: var(--primary-text-color);
}
.sunrise-sunset{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
}
.sunrise-wrapper, .sunset-wrapper{
    padding: 0px 50px;
}
.sunrise-time, .sunset-time {
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading-sunrise-time, .loading-sunset-time{
    height: 20px;
    margin: auto;
    background: var(--active-color);
    border-radius: 8px;
    animation: loading 1.5s ease-in-out infinite;
    -webkit-animation: loading 1.5s ease-in-out infinite;
}
.info-column-wrapper{
    padding-top: 25px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0px 35px;
}
.info-column-wrapper:first-child {
    padding-top: 50px;
}
.info-column-section{
    max-width: 1025px;
    border-radius: 30px;
    width: 100%;
}
.info-column {
    /*padding: 35px;*/
}
.info-column-subtitle {
    padding-top: 5px;
    color: #929292;
}
.info-column.list-company{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    background-color: var(--secondary-bg-color);
    border-radius: 30px;
}
.info-column p{
    padding-top: 20px;
    max-width: 850px;
    line-height: 1.5rem;
}
.page-link-wrapper{
    margin-top: 60px;
}
.page-link{
    color: var(--secondary-text-color);
    background-color: var(--button-color);
    border-radius: 99999px;
    padding: 10px 0px;
    width: 170px;
    text-align: center;
    font-size: 15px;
    display: inline-block;
    font-weight: 600;
    animation: jelly 6s ease-in-out infinite;
    -webkit-animation: jelly 6s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}
.company-info-content-wrapper{
    position: relative;
    margin-top: 5px;
}
.company-info-content{
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    grid-template-columns: repeat(4,1fr);
    padding: 0;
    /*grid-gap: 20px;*/
    margin: auto;
    scroll-snap-type: x mandatory;
}
.company-info-wrapper, .loading-company-info-wrapper{
    vertical-align: top;
    scroll-snap-align: start;
}
.company-info-wrapper{
    display: inline-flex;
    position: relative;
    height: fit-content;
}
.loading-company-info-wrapper{
    padding: 15px;
    animation: loading 1.5s ease-in-out infinite;
    -webkit-animation: loading 1.5s ease-in-out infinite;
}
.loading-company-info{
    width: 250px;
    height: 250px;
    border-radius: 30px;
    background-color: var(--secondary-bg-color);
}
.loading-company-info-content {
    background-color: var(--secondary-bg-color);
    height: 22px;
    width: 200px;
    margin-top: 15px;
    border-radius: 6px;
}
.loading-company-info-content:nth-child(3) {
    width: 120px;
    margin-top: 5px;
}
.company-info-content::-webkit-scrollbar{
    display: none;
}
.company-info-section{
    position: relative;
    padding: 15px;
    -webkit-tap-highlight-color: transparent;
}
.company-info-section:hover + .hover-effect{
    transform: scale(1);
    opacity: 1 !important;
    background-color: var(--secondary-bg-color);
}
.company-profile-image-section{
    position: relative;
    display: flex;
}
.company-profile-image{
    object-fit: cover;
    -webkit-touch-callout: none;
}
.loading-photo{
    position: absolute;
    top: 0px;
}
.no-profile-image-section{
    background-color: var(--primary-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
}
.no-profile-image-section svg, .map-company-no-profile-image svg {
    fill: var(--secondary-bg-color);
}
.company-profile-image, .loading-photo, .no-profile-image-section{
    width: 250px;
    height: 250px;
    border: 2px solid var(--secondary-bg-color);
    border-radius: 30px;
}
.company-info-wrapper.pfp:hover .company-profile-image {
    border: 2px solid transparent;
}
.search-icon-suggestions .company-profile-image, .search-icon-suggestions .loading-photo {
    border-radius: 5px;
    border: none;
}
.search-icon-suggestions .company-profile-image{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.search-icon-suggestions .loading-photo {
    height: 25px;
    width: 25px;
    box-sizing: border-box;
}
.more-location-text-section{
    position: absolute;
    top: 0px;
    margin: 15px;
    right: 0px;
}
.more-location-text{
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background-color: var(--secondary-bg-color);
}
.more-location-text-section.blur .more-location-text {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.04);
    color: #282828;
}
.loading-photo.map-view {
    width: 100%;
    height: 180px;
    border: none;
    border-radius: 30px 30px 0px 0px;
}
.company-info{
    padding-top: 10px;
    padding-bottom: 5px;
    text-align: left;
}
.company-name{
    font-size: 18px;
    margin: 0px;
    font-weight: 700;
    text-decoration: none;
}
.company-category-wrapper{
    padding-top: 5px;
    display: flex;
    align-items: center;
}
.company-category-section {
    width: 100%;
    display: flex;
}
.company-category{
    color: #929292;
    font-size: 15px;
    font-weight: 500;
    transition: 0.3s ease-in-out color;
}
.content-wrapper{
    margin-top: 10px;
}
.visit-profile-wrapper{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.visit-profile{
    color: var(--tx-color);
    background-color: var(--button-color);
    border-radius: 999px;
    padding: 8px 15px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 600;
    width: unset;
    -webkit-tap-highlight-color: transparent;
}
.contact-us-wrapper{
    margin-top: 25px;
}
.contact-us-section{
    padding-top: 50px;
}
.contact-us-section h2{
    font-weight: 700;
    text-align: center;
    font-size: 45px;
    padding-bottom: 50px;
}
.contact-us{
    display: flex;
    align-items: center;
    margin: auto;
    max-width: 1450px;
    padding: 0px 80px;
}
.contact-information-section{
    flex: 0 0 50%;
}
.contact-information{
    display: flex;
    flex-direction: column;
    font-size: 22px;
    line-height: 1.5em;
}
.contact-information-url{
    text-decoration: none;
}
.contact-information-url:hover{
    text-decoration: underline;
}
.contact-form-section{
    width: 100%;
    position: relative;
}
.contact-form-section form {
    float: right;
    position: relative;
}
.form-textbox {
    display: flex;
    flex-direction: column;
}
.form-control{
    font-family: Raleway;
    border: 2.5px solid var(--active-color);
    background: transparent;
    color: var(--primary-text-color) !important;
    outline: none;
    border-radius: 15px;
    padding: 16px;
    margin: 5px 0px;
    width: 340px;
    font-size: 15px;
    -webkit-appearance: none;
}
.empty-field {
    border: 2px solid red;
}
.empty-text {
    color: red;
    font-size: 14px;
    text-align: left;
}
.send-button{
    color: var(--secondary-text-color);
    background-color: var(--button-color);
    border-radius: 9999px;
    padding: 12px 0px;
    margin-top: 15px;
    width: 140px;
    font-size: 16px;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    font-family: Raleway;
}
.contact-form-section .submitting-form{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--header-color);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}
.error-message-text{
    display: block;
    max-width: 345px;
    font-size: 14px;
    color: var(--error-message-color);
    font-weight: 500;
    margin-bottom: 10px;
    background: var(--error-message-bg);
    padding: 12px 15px;
    border-radius: 15px;
}
.message{
    color: #188038;
    font-weight: 500;
}
.loading-icon-color{
    fill: var(--primary-text-color);
}
.location-map{
    margin-top: 30px;
}
@keyframes loading {
    0%{
        opacity: .5;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: .5;
    }
}
@-webkit-keyframes loading {
    0%{
        opacity: .5;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: .5;
    }
}

/*LISTINGS*/
.map-view {
    padding: 0px;
}
.listings-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hours-differ-warning-wrapper {
    position: fixed;
    top: 60px;
    width: 100%;
    z-index: 1;
}
.hours-differ-warning-section {
    background-color: rgb(245, 99, 0, .8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px;
}
.hours-differ-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.listings {
    padding-top: 25px;
    width: 100%;
}
.listing .icon, .form .icon  {
    fill: var(--primary-text-color);
}
.listing .search-bar-wrapper{
    position: unset;
    height: 100%;
}
.listing .search-bar-wrapper.mobile{
    position: fixed;
}
.listing .search-bar-section, .form .search-bar-section{
    background-color: transparent;
    border: 2px solid var(--secondary-bg-color);
}
.listing .search-suggestions-section{
    background-color: var(--highlight-color);
}
.listing .items{
    color: var(--primary-text-color);
}
.listing .search-form-control, .form .search-form-control{
    color: var(--primary-text-color);
}
.listing .items-wrapper.selected > .items-section + .hover-effect{
    transform: scale(1);
    background-color: var(--secondary-highlight-color);
}
.map-content-wrapper{
    position: absolute;
    width: 500px;
    z-index: 999;
}
.map-view .search-bar-wrapper {
    height: unset;
    margin: 20px 0px;
}
.map-wrapper {
    display: none;
}
.map-view .map-wrapper{
    display: block;
}
.map{
    height: 100vh;
    max-height: 100%;
}
.map-view .search-bar-section {
    background-color: var(--primary-bg-color);
    border: 2px solid transparent;
    box-shadow: rgba(0 0 0 / 7%) 0px 4px 14px 6px;
}
.map-no-result-wrapper {
    margin: 0px 25px;
    background-color: var(--primary-bg-color);
    border-radius: 15px;
    box-shadow: rgba(0 0 0 / 7%) 0px 4px 14px 6px;
}
.map-no-result {
    padding: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}
.map-company-profile-image-section{
    display: flex;
}
.map-company-profile-image{
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-bottom: 2px solid var(--secondary-bg-color);
}
.map-company-no-profile-image {
    width: 100%;
    display: flex;
    min-height: 200px;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid var(--secondary-bg-color);
}
.map-company-info{
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: space-between;
    font-family: Raleway !important;
}
.change-view-button-wrapper{
    position: fixed;
    bottom: 0px;
    margin-bottom: 20px;
    left: 50%;
    transform: translate(-50%);
    z-index: 12;
}
.search-mobile .change-view-button-wrapper{
    display: none;
}
.change-view-button-wrapper.top{
    top: 0px;
    bottom: unset;
    margin-top: 80px;
    transform: translate(-50%);
}
.change-view-button-section{
    display: flex;
    justify-content: center;
    align-items: center;
}
.change-view-button{
    height: 42px;
    width: 110px;
    background-color: var(--button-color);
    color: var(--secondary-bg-color);
    border-radius: 9999px;
    display: block;
    box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.04);
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
body.dark .change-view-button.map-view {
    background-color: #282828;
    color: #fff;
}
.change-view-button-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.filter-button-section {
    padding-left: 10px;
    position: relative;
}
.filter-button-section, .filter-button {
    display: flex;
    align-items: center;
    justify-content: center;
}
.filter-button.has-filter:after {
    content: '';
    position: absolute;
    top: -3px;
    right: -2px;
    height: 8px;
    width: 8px;
    background: #0866FF;
    border-radius: 50%;
    border: 2px solid var(--primary-bg-color);
}
.filter-button {
    cursor: pointer;
}
.categories-wrapper{
    display: flex;
    text-align: center;
    padding-top: 20px;
}
.categories-section{
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    display: inline-block;
    width: 100%;
    padding: 0;
}
.categories-section::-webkit-scrollbar {
    display: none;
}
.categories{
    display: inline-flex;
    padding: 0px 5px;
}
.categories:first-child {
    margin-left: 20px;
}
.categories:last-child {
    margin-right: 20px;
}
.category-url-section {
    display: flex;
    align-items: center;
}
.category-divider {
    height: 80%;
    width: 2px;
    border-radius: 999px;
    background-color: var(--primary-text-color);
    margin-left: 15px;
    margin-right: 5px;
}
.category-url{
    text-decoration: none;
    background-color: var(--secondary-bg-color);
    border-radius: 20px;
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}
.category-url.filter {
    cursor: pointer;
}
.category-url:hover, .category-url.category-active {
    background-color: var(--button-color) !important;
    color: var(--secondary-text-color) !important;
}
.listings-info-wrapper{
    padding-top: 15px;
}
.top-results{
    text-align: center;
    padding-bottom: 10px;
}
.listings-info{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0px 30px;
    max-width: 1600px;
    margin: auto;
}
.no-result-wrapper{
    height: calc(100vh - 510px);
}
.no-result{
    font-size: 20px;
    margin-top: 50px;
    text-align: center;
    padding: 0px 20px;
}
.company-info-section{
    width: min-content;
}
.loading-photo{
    position: absolute;
    top: 0px;
}
.new-text-section{
    /* color: #f56300;
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    bottom: 5px;
    left: 2px;
    padding: 6px 15px;
    background-color: var(--primary-bg-color);
    border-radius: 0px 8px 0px 18px; */
    color: #f56300;
    position: absolute;
    bottom: 0px;
    margin: 15px;
    left: 0px;
}
.new-text.info-content {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    background-color: var(--secondary-bg-color);
}
.new-text-section.blur .new-text.info-content {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.04);
}
.open{
    font-weight: 600;
    color: green;
}
.closed{
    font-weight: 600;
    color: #d93025;
}
.closes-opens-soon{
    font-weight: 600;
    color: #f56300;
}
.spacer {
    padding: 0px 5px;
}
@keyframes loading {
    0%{
        opacity: .5;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: .5;
    }
}
@-webkit-keyframes loading {
    0%{
        opacity: .5;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: .5;
    }
}
.loading-company-info-content {
    background-color: var(--secondary-bg-color);
    height: 22px;
    width: 200px;
    margin-top: 15px;
    border-radius: 6px;
}
.loading-company-info-content:nth-child(3) {
    width: 120px;
    margin-top: 5px;
}
.next-previous-button-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 15px;
}
.next-previous-button-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}
.next-previous-button{
    position: relative;
}
.next-previous-button svg{
    fill: var(--secondary-text-color);
    background-color: var(--button-color);
    padding: 10px;
    border-radius: 99999px;
    -webkit-tap-highlight-color: transparent;
}
.next-button, .previous-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    /* background-color: var(--button-color);
    padding: 10px;
    border-radius: 99999px;
    -webkit-tap-highlight-color: transparent; */
}
.next-previous-button .hover-effect {
    border-radius: 15px;
}
.next-button:hover + .hover-effect, .previous-button:hover + .hover-effect {
    transform: scale(1);
    background-color: var(--secondary-bg-color);
}
.next-button svg{
    transform: rotate(180deg);
}
.pagination-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 25px;
}
.pagination-section {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.pagination-button {
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-text-color);
    background-color: var(--secondary-bg-color);
    border-radius: 50%;
    font-weight: 600;
}
.pagination-button.color {
    background-color: var(--button-color);
    color: var(--secondary-text-color);
}
.pagination-button.no-color {
    background-color: transparent !important;
}
.pagination-button:disabled svg {
    fill: var(--disabled-button) !important;
}
.total-items-wrapper{
    width: 100%;
}
.total-items{
    padding: 0px 100px;
    margin-top: 15px;
}
.search-button-bottom {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 0px;
    height: 0px;
    padding-bottom: 25px;
    padding-right: 25px;
    opacity: 0;
    transition: 0.3s ease;
    visibility: hidden;
}
.search-button-icon {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--button-color);
    border-radius: 9999px;
    box-shadow: 0px 4px 10px 4px rgb(0 0 0 / 4%);
    cursor: pointer;
}
.search-button-icon svg {
    width: 28px;
    height: 28px;
    fill: var(--secondary-text-color);
    transform: scale(0);
    transition: 0.3s transform ease;
}
.search-button-bottom.show {
    width: 50px;
    height: 50px;
    opacity: 1;
    visibility: visible;
}
.search-button-bottom.show > .search-button-icon svg {
    transform: scale(1);
}
.filter-options-wrapper{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/*PROFILE*/
.content-loading{
    width: 100%; 
    height: calc(100vh - 215px); 
    display: flex; 
    justify-content: center; 
    align-items: center;
}
.profile-error-wrapper{
    width: 100%; 
    height: calc(100vh - 215px); 
    display: flex; 
    justify-content: center; 
    align-items: center;
}
.profile-error{
    margin: 0px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.profile-wrapper{
    padding-bottom: 30px;
}
.profile{
    padding: 0px 30px;
    max-width: 1050px;
    margin: auto;
}
.profile .info-column-wrapper{
    margin: 0px !important;
}
.profile .info-column-section {
    max-width: unset;
}
.company-photos-gallery-wrapper{
    position: relative;
    overflow: hidden;
}
.company-photos-gallery-section {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
    width: 100%;
    height: 400px;
}
.company-photos-gallery {
    overflow: hidden;
    background-color: var(--secondary-bg-color);
    border: .5px solid var(--secondary-bg-color);
}
.large {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    border-radius: 30px 5px 5px 30px;
}
.no-photos > .large {
    border-radius: 30px;
}
.small {
    border-radius: 5px;
}
.small:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.small:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    border-top-right-radius: 30px;
}
.small:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.small:nth-child(5) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    border-bottom-right-radius: 30px;
}
.no-photos{
    height: 300px;
}
.company-photos-gallery-section.ph-1, .company-photos-gallery-section.ph-0{
    grid-template-columns: 1fr;
}
.company-photos-gallery-section.ph-2 > .small {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.company-photos-gallery-section.ph-3 > .small:nth-child(2) {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    border-top-right-radius: 30px;
}
.company-photos-gallery-section.ph-3 > .small:nth-child(2)::after {
    content: "";
    right: 0px;
    position: absolute;
}
.company-photos-gallery-section.ph-3 > .small:nth-child(3) {
    grid-column: 2 / 4;
    grid-row: 2 / 2;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 5px !important;
}
.company-photos-gallery-section.ph-4 > .small:nth-child(4) {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
    border-bottom-right-radius: 30px;
}
.view-all-photos-wrapper{
    position: absolute;
    bottom: 0px;
    right: 0px;
    margin: 20px;
    z-index: 1;
}
.view-all-photos-section{
    background-color: var(--primary-bg-color);
    padding: 12px 20px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.04);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.photos-wrapper{
    height: 100%;
}
.photos-section{
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    cursor: pointer;
}
.photos {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.gallery .loading-photo{
    height: 100%;
    width: 100%;
    border: none !important;
    border-radius: unset !important;
}
.upload-photo-button-wrapper{
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.upload-photo-button-section{
    font-size: 18px;
    display: flex;
    align-items: center;
}
.add-icon-section{
    height: 20px;
}
.upload-text{
    font-weight: 600;
    padding-left: 5px;
}
.photo-larger-wrapper{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999999;
}
.close-button-wrapper.photo-larger-view{
    position: absolute;
    z-index: 1;
    right: 0px;
    padding-top: 15px;
    padding-right: 15px;
}
.close-button-section{
    padding: 8px;
    background-color: var(--primary-bg-color);
    border-radius: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.map-company-info-wrapper .close-button-wrapper {
    position: absolute;
    top: 0px;
    right: 0px;
    padding-top: 20px;
    padding-right: 20px;
    z-index: 999999;
    transition: unset;
}
.map-company-info-wrapper .close-button-section {
    padding: 6px;
    background-color: var(--secondary-bg-color);
}
.map-company-info-wrapper .close-button-wrapper svg {
    height: 20px;
    width: 20px;
}
.search-mobile .map-company-info-wrapper {
    display: none;
}
.map-company-info-section{
    background-color: var(--primary-bg-color);
    border-radius: 30px;
    box-shadow: rgba(0 0 0 / 7%) 0px 4px 14px 6px;
    overflow: hidden;
    display: block;
}
.photo-larger-nav {
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
    grid-template-columns: repeat(4, 1fr);
    padding: 0;
    /* grid-gap: 20px; */
    margin: auto;
    scroll-snap-type: x mandatory;
    height: 100%;
}
.photo-larger-section{
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100vw;
    scroll-snap-align: start;
}
.photo-larger{
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    -webkit-tap-highlight-color: transparent;
    transition: .2s ease-in-out background-color;
}
.photo-larger-wrapper.hide .photo-larger{
    background-color: rgba(0, 0, 0, 1);
}
.photo{
    -webkit-touch-callout: none;
    max-width: 100%;
    max-height: 90vh;
    object-fit: cover;
    transition: .2s ease-in-out max-height;
}
.photo.radius{
    border-radius: 15px;
}
.photo-larger-wrapper.hide .photo{
    max-height: 100vh;
    border-radius: 0px !important;
}
.loading-icon{
    fill: #fff;
}
.all-company-photos-wrapper{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 99;
    background-color: var(--primary-bg-color);
    overflow-y: hidden;
}
.all-company-photos-section{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.all-company-photos{
    display: flex;
    align-items: center;
    padding: 0px 40px;
    margin: 20px 0px;
}
.close-button-wrapper-all-photos{
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    -webkit-box-flex: 1;
    flex-grow: 1;
}
.close-button-wrapper-all-photos > .close-button-section{
    background-color: var(--active-color);
}
.content-loading.all-photos{
    height: calc(100vh - 115px);
}
.all-photos-content-wrapper{
    padding-bottom: 40px;
    height: 100vh;
}
.all-photos-content-wrapper .error-message{
    color: var(--primary-text-color);
}
.all-photos-content{
    display: grid;
    gap: 5px;
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    max-width: 800px;
    margin: auto;

}
/* .all-photos-content .photos-wrapper:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
} */
.all-photos-content .loading-photo{
    width: 100% !important;
}
.photos-content-wrapper, .info-column-content{
    position: relative;
    overflow: hidden;
    margin-top: 15px;
}
.photos-content, .info-column-content-section{
    margin: auto;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    overflow-y: auto;
    scroll-behavior: smooth;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 20px;
    scroll-snap-type: X mandatory;
}
.photos-content::-webkit-scrollbar, .info-column-content-section::-webkit-scrollbar{
    display: none;
}
.all-company-photos-wrapper .photos-wrapper {
    aspect-ratio: 1 / 1.2;
    border-radius: 5px;
    border: .5px solid var(--secondary-bg-color);
    overflow: hidden;
}
.all-company-photos-wrapper .photos-section{
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    display: flex;
}
.all-company-photos-wrapper .photos{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
    -webkit-touch-callout: none;
}
.all-company-photos-wrapper .loading-photo{
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0px;
    border: none;
}
.all-company-photos-wrapper .loading-photo.suggested{
    height: 150px !important;
    width: 250px !important;
    border-radius: 20px 20px 0px 0px !important;
}
.error-message-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.error-message-section {
    width: 500px;
}
.error-message {
    color: #fff;
    font-weight: 600;
    font-size: 25px;
}
.company-content-wrapper{
    padding-top: 25px;
}
.company-content-section{
    display: flex;
    position: relative;
    /* gap: 15px; */
}
.company-content, .action-buttons-wrapper, .tiles-section.contact > .tiles {
    flex: 0 0 50%;
}
.company-content {
    transform: translateY(-5px);
}
.company-content h1{
    font-size: 35px;
    font-weight: 700;
}
.new-text{
    color: #f56300;
    font-weight: 700;
}
.spacer{
    padding: 0px 5px;
}
.category{
    font-size: 17px;
    color: #929292;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.category:hover{
    text-decoration: underline;
}
.map-view .action-buttons-wrapper {
    padding: 0px;
    flex: none;
}
.action-buttons-section{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.map-view .action-buttons-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18%, 1fr));
    justify-content: unset;
}
.action-button-content-section{
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 12px;
    width: 52px;
    height: 58px;
    border-radius: 15px;
    font-size: 14px;
    background-color: var(--secondary-bg-color);
    -webkit-tap-highlight-color: transparent;
}
.map-view .action-button-content-section{
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    height: 52px;
}
.action-button-icon svg{
    width: 20px;
}
.map-view .action-button-icon svg {
    width: 18px;
}
.action-button-text{
    width: 100%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.share-sheet-wrapper{
    position: absolute;
    bottom: -155px;
    right: 0px;
    z-index: 1;
    transform: scale(0.6);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s opacity cubic-bezier(0.4, 0, 0.2, 1), 0.2s transform cubic-bezier(0.4, 0, 0.2, 1), 0.2s visibility cubic-bezier(0.4, 0, 0.2, 1);
}
.share-sheet-section{
    padding: 15px;
    width: 170px;
    border-radius: 15px;
    background-color: var(--highlight-color);
    box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.04);
}
.share-sheet-content-section{
    position: relative;
    z-index: 1;
}
.share-sheet-content-section > .hover-effect {
    border-radius: 8px;
}
.share-sheet-content-section:hover > .hover-effect {
    transform: scale(1);
    background-color: var(--secondary-highlight-color);
}
.share-sheet-content{
    display: flex;
    padding: 10px;
    font-size: 16px;
    gap: 10px;
    font-weight: 500;
}
.share-sheet-content-icon{
    display: flex;
    justify-content: center;
    align-items: center;
}
.share-sheet-content-url{
    padding-left: 10px;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.share-sheet-content.button{
    border: none;
    outline: none;
    cursor: pointer;
    width: 100%;
    background-color: transparent;
    color: var(--primary-text-color);
    font-family: Raleway;
    padding-left: 10px;
    -webkit-tap-highlight-color: transparent;
}
.tiles-wrapper, .info-column-wrapper.nearby, .info-column-wrapper.suggested{
    padding-top: 20px;
}
.tiles-section.contact{
    display: flex;
    position: relative;
    width: 100%;
}
.company-location{
    /* margin-top: 5px; */
    border-radius: 30px;
    overflow: hidden;
    width: 380px;
    border: 2px solid var(--secondary-bg-color);
    box-sizing: border-box;
}
.snapshot{
    display: block;
    height: 160px;
    background-color: var(--secondary-bg-color);
}
.snapshot img{
    object-fit: cover;
}
.snapshot.not-available {
    background: #91daee;
}
.address-icon-not-available-section{
    height: 100%;
    justify-content: flex-end;
    align-items: center;
    display: flex;
    /* padding-right: 30px; */
    overflow: hidden;
}
/* .icon-address{
    color: rgba(245, 243, 243, .5);
    font-size: 320px;
    padding-top: 50px;
} */
.icon-address svg{
    height: 300px;
    width: 300px;
}
.icon-address .icon-color{
    fill: rgba(245, 243, 243, .5)
}
.company-location-wrapper{
    width: 100%;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    -webkit-box-flex: 1;
    /* position: absolute;
    right: 0; */
}
.company-address-section{
    padding: 15px;
    display: flex;
    align-items: center;
}
.company-address{
    display: flex;
    align-items: center;
    width: 100%;
}
.address-icon{
    height: 22px;
}
.address-content{
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 10px;
}
.located-section{
    display: flex;
    align-items: center;
}
.located {
    font-size: 15px;
    text-decoration: none;
    color: #929292;
    display: block;
}
.located.url{
    text-decoration: none;
    display: block;
    -webkit-tap-highlight-color: transparent;
}
.located.url:hover{
    text-decoration: underline;
}
.view-in-maps-wrapper{
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    -webkit-box-flex: 1;
    width: 100%;
}
.view-in-maps{
    font-weight: 600;
}
.view-in-maps:hover{
    text-decoration: underline;
}
.contact-info{
    padding: 5px 0px;
    display: flex;
    align-items: center;
}
.contact-info-icon{
    font-size: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fa-envelope{
    font-size: 18px;
}
.fa-instagram{
    font-size: 22px;
}
.contact-info-text{
    padding-left: 10px;
}
.contact-info-url{
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    word-break: break-all;
    display: block;
}
.contact-info-url:hover{
    text-decoration: underline;
}
.open-link-icon-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-icon.phone, .contact-icon.email{
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-icon.phone{
    height: 20px;
}
.contact-icon.phone > svg{
    height: 20px;
    width: 20px;
}
.contact-icon.email{
    height: 17px;
}
.contact-icon.email > svg{
    height: 17px;
    width: 20px;
}
.profile .open-closed-wrapper{
    padding: 10px 0px;
}
.important-message{
    display: flex;
    padding-bottom: 10px;
    color: #c01717; 
}
.important-message span{
    font-weight: 600;
    padding-left: 10px;
}
.profile .open{
    font-size: 18px;
    font-weight: 600;
}
.profile .closed{
    font-size: 18px;
    font-weight: 600;
}
.profile .closes-opens-soon{
    font-size: 18px;
    font-weight: 600;
}
.opening-hours {
    border-radius: 15px;
    padding: 15px;
    max-width: 350px;
    background-color: var(--active-color);
}
.opening-hours:nth-child(odd) {
    background-color: transparent;
}
.days-section, .check-in-out-section {
    display: flex;
}
.days-section.today {
    font-weight: 700;
}
.hours{
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    -webkit-box-flex: 1;
    flex-grow: 1;
    align-items: center;
    text-align: right;
}
.hours-differ-section{
    display: flex;
    padding-top: 10px;
    gap: 5px;
    font-size: 15px;
}
.hours-differ-reason{
    font-weight: 600;
}
.hours-differ-message{
    font-weight: 600;
    color: #f56300;
}
.opening-hours-not-available {
    max-width: 400px;
    background: var(--active-color);
    border-radius: 20px;
    padding: 25px;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
}
.hotel-agency{
    display: flex;
    text-align: center;
    align-items: center;
}
.hotel-agency-logo-section{
    display: flex;
    justify-content: center;
    align-items: center;
}
.hotel-agency span, .hotel-agency-logo{
    height: 35px;
}
.hotel-agency-url{
    padding-left: 10px;
    text-decoration: none;
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent;
}
.hotel-agency-url:hover{
    text-decoration: underline;
}
.description, .description-not-available, .photos-not-available-section {
    background-color: var(--active-color);
    border-radius: 30px;
    padding: 25px;
    margin-top: 5px;
}
.description-not-available{
    display: flex;
    flex-direction: column;
}
.description p {
    display: contents;
}
.description p, .opening-hours-not-available p, .description-not-available p, .photos-not-available-section p {
    margin: 0px;
}
.more-section {
    font-weight: 700;
    font-size: 16px;
    margin-left: 5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.more-section:hover{
    text-decoration: underline;
}
.add-button{
    display: flex;
    align-items: center;
    gap: 5px;
    border: 2px solid var(--button-color);
    width: fit-content;
    padding: 12px 25px;
    border-radius: 30px;
    color: var(--primary-text-color);
    text-decoration: none;
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}
.add-button.upload {
    background-color: var(--button-color);
    color: var(--secondary-text-color);
}

.add-button.upload .icon-color {
    fill: var(--secondary-text-color);
}

.add {
    padding-right: 5px;
}
.improve-listing{
    display: flex;
    gap: 15px;
}
.edit{
    padding-right: 2px;
}
.modal-full-description .modal-overlay-section {
    width: 650px;
}
.modal-read-more-about-us .modal-overlay-section {
    width: 800px;
}
.modal-full-description .modal-overlay-content, .modal-read-more-about-us .modal-overlay-content, .modal-delete-photo .modal-overlay-content {
    height: auto;
}
.close-button{
    padding: 12px 30px;
    background-color: var(--button-color);
    border-radius: 30px;
    color: var(--secondary-text-color);
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.upload-photo-content-wrapper {
    margin-top: 20px;
}
.upload-photo-content {
    display: flex;
    width: 100%;
    height: 250px;
    border: 2px dashed var(--secondary-bg-color);
    border-radius: 30px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}
.upload-photo-content.drop{
    /* border: 2px dashed rgb(29, 155, 240); */
    border: 2px dashed #0866FF;
}
.upload-photo-icon-section {
    padding-bottom: 5px;
}
.upload-photo-icon {
    font-size: 40px;
}
.choose-photo-text-section {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}
.drag-drop{
    font-size: 18px !important;
    padding-top: 5px;
}
.personal-info-wrapper, .photo-description-section{
    padding-top: 15px;
}
.form-textbox-upload {
    display: flex;
    flex-wrap: wrap;
}
.first-last-name-section{
    display: flex;
    width: 100%;
    gap: 10px;
}
.first-last-name-section > .form-textbox{
    width: 100%;
}
.first-last-name-section > .form-textbox > .form-control{
    width: 100%;
    box-sizing: border-box;
}
.uploademail{
    width: 100% !important;
    box-sizing: border-box;
}
.photo-description-text, .personal-info-text{
    font-weight: 600;
}
.form-textbox{
    display: flex;
    flex-direction: column;
}
.form-control.description {
    background: transparent;
    border-radius: 15px;
    padding: 15px;
    /* font-family: Raleway;
    border: 2px solid var(--active-color);
    background-color: transparent;
    color: var(--primary-text-color);
    outline: none;
    border-radius: 10px;
    padding: 15px;
    margin: 5px 0px;
    width: 300px;
    font-size: 15px;
    -webkit-appearance: none; */
}
.empty-field {
    border: 2px solid red;
}
.form-control.description {
    width: 100%;
}
.message-wrapper{
    display: flex;
    flex-wrap: wrap;
    flex-direction: unset;
}
.message{
    width: 100%;
}
.empty-text {
    color: red;
    font-size: 14px;
    text-align: left;
}
.checkbox-section{
    position: relative;
}
.input-checkbox{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    top: 1px;
    -webkit-tap-highlight-color: transparent;
}
.checkbox{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 16px;
    width: 16px;
    border: 2px solid var(--primary-text-color);
    border-radius: 50%;
}
.checkbox::after {
    content: "";
    position: absolute;
    opacity: 0;
    transition: .3s ease-in-out opacity;
}
.checkbox.checked::after{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-text-color);
    display: block;
    opacity: 1;
    transition: .3s ease-in-out opacity;
}
.important-note-section {
    display: flex;
    margin-top: 10px;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.important-note {
    font-size: 14px;
    padding-top: 2px;
    text-align: left;
}
.guidelines-section{
    padding-top: 15px;
}
.guidelines-link{
    color: #929292 !important;
    text-decoration: underline !important;
}
.upload-button-section {
    padding-top: 15px
}
.upload-button {
    width: 100%;
    color: var(--secondary-text-color);
    background-color: var(--button-color);
    border-radius: 9999px;
    padding: 12px 30px;
    font-size: 15px;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: Raleway;
    font-weight: 600;
}
.image-preview-section {
    position: relative;
    display: flex;
    border-radius: 30px;
    border: 1px solid var(--secondary-bg-color);
    overflow: hidden;
}
.image-preview {
    width: 100%;
    height: 100%;
}
.close-button-section-preview {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 15px;
    z-index: 1;
}
.close-button-section-preview > .close-button-section {
    padding: 5px;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.close-button-section-preview .icon-color{
    fill: #fff !important;
}
.upload-progress-wrapper{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.6);
    display: flex;
}
.upload-progress-section{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0px 20px;
    padding-top: 20px;
}
.uploading-text{
    color: #fff;
    font-weight: 600;
    padding-top: 25px;
    font-size: 16px;
}
.upload-progress-bar-section{
    width: 100%;
    height: 3px;
    margin: 0px 20px;
}
.upload-progress-bar{
    height: 3px;
    width: 0px;
    border-radius: 9999px;
    background-color: #fff;
    transition: 0.3s ease-in-out
}
.upload-photo-content-section .error-message-text {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: unset !important;
}
.form-textbox-section{
    padding-top: 15px;
    position: relative;
}
.send-button-wrapper{
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    -webkit-box-flex: 1;
    flex-grow: 1;
    padding-top: 15px;
}
.send {
    color: var(--secondary-text-color);
    background-color: var(--button-color);
    border-radius: 20px;
    padding: 11px 30px;
    font-size: 15px;
    border: none;
    outline: none;
    cursor: pointer;
    margin-left: 15px;
    font-family: Raleway;
}
.send:disabled {
    background-color: var(--disabled-button);
    color: var(--disabled-button-text);
    cursor: unset;
}
.changes-saved-wrapper{
    position: fixed;
    bottom: 0px;
    float: left;
    z-index: 2;
}
.changes-saved-section{
    background-color: var(--highlight-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0px 4px 10px 4px rgb(0 0 0 / 4%);
    border-radius: 15px;
    margin-left: 30px;
    margin-bottom: 30px;
}
.changes-saved-message{
    display: flex;
    padding: 25px;
    color: #34a777;
}
.check-icon{
    padding-right: 10px;
}
/*ABOUT US*/
.aboutus-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.aboutus{
    padding: 25px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
}
.aboutus-info{
    padding-left: 50px;
}
.aboutus-info h2{
    padding-bottom: 15px;
}
.aboutus-info p{
    font-size: 18px;
    margin: auto;
}
.read-more-button-wrapper{
    padding-top: 20px;
}
.read-more-button{
    background: var(--button-color);
    color: var(--secondary-text-color);
    text-decoration: none;
    padding: 11px 25px;
    display: inline-block;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.read-more{
    padding: 0px 30px;
    overflow-y: scroll;
    border-radius: 25px;
}
.more-info{
    margin-bottom: 30px;
}
.more-info:last-child {
    margin-bottom: 0px;
}
.more-info h3{
    padding-bottom: 5px;
}
.more-info p{
    font-size: 16px;
}
.image-section{
    display: flex;
    justify-content: center;
    align-items: center;
}
.image{
    height: 380px;
    -webkit-user-drag: none;
}
.website-version-wrapper{
    width: 100%;
    padding-top: 15px;
}
.website-version-section{
    padding: 0px 100px;
}
.version{
    font-size: 16px;
    cursor: pointer;
}
/*LIST COMPANY*/
.form .search-bar-wrapper{
    position: unset;
    display: block;
    height: unset;
    padding: 0px;
    margin-top: 20px;
}
.form .search-bar{
    display: flex;
    padding: 0 15px;
}
.form-section{
    display: flex;
    max-width: 1650px;
    margin: auto;
    padding: 0px 50px;
}
.form-information-section{
    flex: 0 0 45%;
}
.form-information{
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
}
.form-information h1, .received-submission-message-wrapper h1{
    font-size: 60px;
    font-weight: 600;
}
.form-information p{
    padding-top: 15px;
    font-size: 18px;
}
.form-wrapper{
    width: 100%;
}
.list-company-form-section h2, .suggest-edit-form-section h2 {
    text-align: center;
    font-weight: 600;
    font-size: 35px;
}
.list-company-form{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.form-content-section{
    padding-top: 25px;
}
.form-content-text{
    font-weight: bold;
    font-size: 20px;
}
.content-name{
    font-weight: 600;
    padding-top: 10px;
}
.form .personal-info-wrapper{
    padding: 35px 0px;
}
.form .personal-info-section{
    text-align: center;
}
.personal-info-section h2{
    padding-bottom: 15px;
}
.submit-button{
    color: var(--secondary-text-color);
    background-color: var(--button-color);
    border-radius: 9999px;
    padding: 12px 0px;
    width: 140px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    outline: none;
    cursor: pointer;
    margin-top: 8px;
    -webkit-appearance: none;
    font-family: Raleway;
}
.form .form-control{
    width: 320px;
}
.form .form-control.form-category{
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.form .form-control.add-hours{
    width: 355px;
    text-align: left;
    cursor: pointer;
}
.form-control.form-category.empty, .form-control.add-hours.empty{
    color: #929292 !important;
}
.form .form-control::placeholder{
    color: #929292;
}
.choose-category-content .loading-icon{
    height: 35px;
    width: 35px;
}
.submitting-form{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    background-color: var(--header-color);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99999;
}
.error-message-text-section {
    max-width: 355px;
    margin: auto;
}
.received-submission-message-wrapper{
    max-width: 1000px;
    margin: auto;
    height: calc(100vh - 215px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.received-submission-message-section h1{
    text-align: center;
}
.received-submission-message-section h2{
    text-align: center;
    font-size: 35px;
    font-weight: 500;
    padding-top: 10px;
}
.received-submission-message{
    padding-top: 25px;
}
.received-submission-message p{
    font-size: 18px;
    text-align: left;
}
.return-home-button-wrapper{
    text-align: center;
    height: 100%;
    margin: 50px 0px;
}
.return-home-button{
    background: var(--button-color);
    color: var(--secondary-text-color);
    text-decoration: none;
    padding: 12px 35px;
    display: inline-block;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}
/*SUGGEST EDIT*/
.suggest-edit-company-name{
    font-size: 45px;
    font-weight: 500;
    text-decoration: none;
}
.suggest-edit-company-name:hover{
    text-decoration: underline;
}
.suggest-edit-options-wrapper{
    max-width: 345px;
    margin: auto;
    border-bottom: 1px solid var(--active-color);
}
.suggest-edit-options-section{
    padding-bottom: 25px;
}
.suggest-edit-options-section p {
    padding-bottom: 20px;
}
.suggest-edit-form-section{
    margin-top: 25px;
}
.suggest-edit-form-content{
    padding-top: 25px;
}
.suggest-edit-form{
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*PRIVACY POLICY*/
h3{
    font-size: 20px;
    font-weight: 700;
}
.privacy-policy-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.privacy-policy-section h1{
    font-size: 60px;
    font-weight: 600;
    text-align: center;
}
.privacy-policy{
    padding: 25px 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 1000px;
}
.last-updated-section{
    padding-bottom: 25px;
}
.privacy-policy-info{
    padding-top: 25px;
}
.privacy-policy-info p{
    padding-top: 10px;
}
.privacy-policy-info ul{
    padding-left: 20px;
}
.privacy-policy-info ul li{
    padding: 5px 0px;
    list-style: square;
}
.strong{
    font-weight: 700;
}
.link{
    text-decoration: underline !important;
}
/*GUIDELINES*/
.guidelines-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.guidelines-section h1{
    font-size: 60px;
    font-weight: 600;
    text-align: center;
}
.guidelines{
    padding: 25px 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 1000px;
}
.last-updated-section{
    padding-bottom: 25px;
}
.guidelines-info{
    padding-top: 25px;
}
.guidelines-info p{
    padding-top: 10px;
}
.additional-guidelines-info ul{
    padding-left: 20px;
}
.additional-guidelines-info ul li{
    padding: 5px 0px;
    list-style: square;
}
/*404 PAGE*/
.page-not-found-wrapper{
    padding: 0px 50px;
}
.page-not-found-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    margin: auto;
}
.page-not-found-section h1{
    font-size: 145px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.page-not-found-section h2{
    font-size: 50px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
}
.page-not-found{
    text-align: center;
}
.page-not-found h3{
    font-size: 30px;
    font-weight: 500;
    padding-top: 20px;
}
.page-not-found p{
    font-size: 20px;
    padding-top: 25px;
}
.return-home-wrapper{
    padding-top: 30px;
}
.return-home-link{
    background: var(--button-color);
    color: var(--secondary-text-color);
    text-decoration: none;
    padding: 12px 35px;
    display: inline-block;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}
/*DELETE PHOTO*/
.delete-photo-wrapper{
    height: calc(100vh - 215px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.delete-photo-content{
    padding: 0px 25px;
}
.photo-content{
    position: relative;
    height: 100%;
    width: 415px;
}
.photo-content .loading-photo {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.photo-content img{
    height: 280px;
    width: 100%;
    object-fit: cover;
    border-radius: 30px;
    border: 2px solid var(--secondary-bg-color);
    box-sizing: border-box;
}
.delete-button-section{
    padding-top: 15px;
}
.confirm-delete-photo-section{
    width: 450px;
    padding: 35px;
    gap: 10px;
}
.confirm-delete-photo-header{
    display: flex;
    align-items: center;
}
.confirm-delete-photo-header{
    padding-bottom: 10px;
}
.confirm-delete-photo p{
    line-height: 1.5rem;
}
.delete .form-control{
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 1200px) {
    .listings-info {
        padding: 0px 15px;
    }
}
@media(max-width: 1100px) {
    /*ABOUT US*/
    .website-version-section{
        padding: 0px 50px;
    }
}
@media(max-width: 920px) {
    .contact-us {
        flex-direction: column;
        padding: 0px 25px;
    }
    .contact-form-section {
        margin-top: 25px;
    }
    .contact-form-section form{
        float: unset;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .contact-information{
        text-align: center;
    }
}
@media (max-width: 860px) {
    .tiles-section.contact > .tiles{
        flex: 0 0 35%;
    }
}
@media (max-width: 850px) {
    /*LIST COMPANY*/
    .form-section{
        display: block;
    }
    .form-information{
        position: unset;
        transform: unset;
    }
    .form-information h1{
        text-align: center;
    }
    .form-information p{
        padding-top: 25px;
    }
    .form-wrapper{
        padding-top: 25px;
    }
    /*SUGGEST EDIT*/
    .suggest-edit-company-name {
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}
@media(max-width: 840px) {
    /*ABOUT US*/
    .aboutus{
        flex-direction: column-reverse;
    }
    .aboutus-info{
        padding: 0px;
    }
    .aboutus-info h2{
        text-align: center;
    }
    .more-info h2{
        text-align: unset;
    }
    .read-more-button-wrapper{
        padding-bottom: 30px;
    }
    .read-more-button-section{
        display: flex;
        justify-content: center;
    }
}
@media (max-width: 790px) {
    .company-location{
        width: 330px;
    }
    .snapshot {
        height: 140px;
    }
    /* .icon-address{
        font-size: 250px;
    } */
    .icon-address svg{
        height: 200px;
        width: 200px;
    }
}
@media (max-width: 730px) {
    .company-photos-gallery-section {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        height: 70vw;
    }
    .no-photos{
        height: 50vw;
    }
    .large {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        border-radius: 30px;
    }
    .small {
        display: none;
    }
    .upload-photo-button-section{
        font-size: 16px;
    }
    .company-content-section{
        display: block;
    }
    .action-buttons-section{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18%, 1fr));
        justify-content: unset;
    }
    .action-buttons-wrapper{
        padding-top: 15px;
    }
    .action-button-content-section{
        width: 100%;
        box-sizing: border-box;
    }
    .tiles-section.contact{
        display: block;
    }
    .company-location-wrapper{
        position: unset;
    }
    .tiles-section.contact{
        display: block;
    }
    .company-location-wrapper{
        display: block;
    }
    .company-location-wrapper{
        padding-top: 10px;
    }
    .company-location{
        width: 100%;
    }
    .snapshot{
        height: 30vw;
    }
}
@media(max-width: 700px) {
    .list-company-button-section{
        display: none;
    }
}
@media (max-width: 610px) {
    .add-opening-hours-section {
        width: 495px;
    }
}
@media(max-width: 600px){
    .touch .hover-effect {
        display: none !important;
    }
    h1 {
        font-size: 45px;
    }
    header{
        height: 50px;
        padding: 0px 20px;
        justify-content: unset;
    }
    .menu-toggle-section{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .menu-toggle.active span {
        background: var(--primary-text-color);
    }
    .bi-logo-wrapper{
        margin-left: 5px;
    }
    .logo{
        height: 42px;
        width: 42px;
    }
    header nav{
        display: block;
        position: absolute;
        width: 100%;
        height: 0px;
        background-color: var(--primary-bg-color);
        top: 0px;
        left: 0px;
        transition: 0.5s;
        text-align: left;
        overflow: hidden;
    }
    header nav.active{
        height: calc(100vh - 0px);
    }
    header nav ul{
        display: block;
        padding-top: 70px;
        margin: 0px 25px;
        /* transform: translateY(40px);
        -webkit-transform: translateY(40px);
        opacity: 0;
        transition: transform 1s, opacity 1s;
        transition-delay: 0.15s; */
    }
    header nav.active ul{
        /* transform: translate(0px);
        -webkit-transform: translateY(0px);
        opacity: 1; */
    }
    header nav ul li,
    .list-company-button-section {
        opacity: 0;
        transform: translateY(-25px);
    }
    .animate {
        animation: slideUpFadeTransform 0.4s forwards,
                slideUpFadeOpacity 0.7s forwards;
        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    @keyframes slideUpFadeTransform {
        0% {
            transform: translateY(-25px);
        }
        100% {
            transform: translateY(0);
        }
    }
    @keyframes slideUpFadeOpacity {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    header nav ul li::after{
        display: none;
        content: "";
    }
    header nav ul li a{
        padding: 15px 20px;
        justify-content: left;
        font-size: 16px;
    }
    header nav ul li a.active{
        background-color: var(--secondary-bg-color);
        border-radius: 15px;
    }
    .transparent nav ul li a {
        color: var(--primary-text-color);
    }
    .active-line{
        display: none;
    }
    .list-company-button-section{
        display: flex;
        padding: 0px 10px;
        margin-top: 15px;
    }
    .list-company-button{
        width: 100%;
        text-align: center;
        font-size: 14px;
        border: 2px solid var(--button-color);
    }
    .options-wrapper {
        display: flex;
        -webkit-box-pack: end;
        justify-content: flex-end;
        -webkit-box-flex: 1;
        flex-grow: 1;
    }
    .options-wrapper .hover-effect{
        display: none;
    }
    .dots{
        padding: 0px 10px;
    }
    .theme-switch-wrapper{
        top: 60px;
        width: 250px;
    }
    .appearance-wrapper:hover{
        background-color: transparent;
    }
    .left-button, .right-button {
        display: none;
    }
    footer{
        padding: 30px 25px;
    }
    .footer-content{
        flex-direction: column-reverse;
    }
    .copyright-text-section{
        padding-top: 15px;
        text-align: center;
        flex-direction: column-reverse;
    }
    .copyright-text-section > .spacer{
        display: none;
    }
    .copyright-text{
        text-align: center;
    }
    .day{
        width: 85px;
    }
    .check-in-out-section .day{
        width: 100%;
    }
    /*INDEX*/
    .search-bar-wrapper h1{
        font-size: 40px;
    }
    .info-column-wrapper{
        margin: 0px;
    }
    .info-column-wrapper.list-company-section{
        margin: 0px 25px;
    }
    .info-column-header {
        margin: 0px 25px;
    }
    .info-column h2{
        font-size: 22px;
    }
    .info-column-wrapper.list-company-section .info-column h2{
        margin: 0px;
    }
    .company-info-wrapper, .loading-company-info-wrapper{
        scroll-snap-align: unset;
    }
    .company-info-wrapper:first-child, .loading-company-info-wrapper:first-child {
        margin-left: 25px;
    }
    .company-info-wrapper:last-child, .loading-company-info-wrapper:last-child {
        margin-right: 25px;
    }
    .touch .company-info-wrapper:first-child, .touch .loading-company-info-wrapper:first-child {
        margin-left: 10px;
    }
    .touch .company-info-wrapper:last-child, .touch .loading-company-info-wrapper:last-child {
        margin-right: 10px;
    }
    .touch .company-info {
        padding-bottom: 0px !important;
    }
    .company-profile-image, .loading-photo, .no-profile-image-section, .loading-company-info {
        height: 220px;
        width: 220px;
    }
    .listings .loading-company-info {
        height: 250px;
        width: 250px;
    }
    .loading-photo.map-view{
        width: inherit;
        height: 100%;
        border-radius: 30px 0px 0px 30px;
    }
    .contact-us-section{
        padding-top: 40px;
    }
    .contact-us-section h2{
        font-size: 35px;
        padding-bottom: 40px;
    }
    .contact-information {
        font-size: 18px;
    }
    .form-control {
        width: 280px;
    }
    /*LISTINGS*/
    /* .map{
        height: calc(100vh - 50px);
    }
    .map-view {
        padding-top: 50px;
    } */
    .hours-differ-warning-wrapper {
        top: 50px;
    }
    .map-company-info-wrapper{
        width: 100% !important;
        max-width: 450px;
    }
    .map-company-info-section{
        display: flex;
        margin: 0px 20px;
    }
    .map-company-info{
        width: 100%;
    }
    .map-company-info .company-name {
        font-size: 16px;
    }
    .map-company-info .company-category, .map-company-info .open-closed-section {
        font-size: 14px;
    }
    .map-company-profile-image-section{
        width: 140px;
        min-width: 140px;
    }
    .map-company-profile-image, .map-company-no-profile-image {
        border-right: 2px solid var(--secondary-bg-color);
        border-bottom: 0px;
    }
    .map-company-no-profile-image {
        min-height: auto;
    }
    .map-company-no-profile-image svg {
        height: 60px;
        width: 60px;
    }
    .map-company-info-wrapper .close-button-wrapper {
        left: 0px;
        padding-left: 40px;
        padding-top: 20px;
        padding-right: 0px;
        width: 32px;
    }
    .top-results h2 {
        font-size: 20px;
    }
    .no-result {
        font-size: 16px;
    }
    .listings .company-info-wrapper {
        margin: 0px !important;
    }
    .listings .loading-company-info-wrapper {
        margin: 15px !important;
    }
    .listings .company-profile-image, .listings .loading-photo, .listings .no-profile-image-section{
        height: 250px;
        width: 250px;
    }
    .total-items {
        padding: 0px 25px;
    }
    .map-content-wrapper {
        width: 100%;
    }
    .map-view .search-bar-wrapper.mobile{
        margin: 0px;
    }
    /*PROFILE*/
    .main-content.p {
        padding-top: 50px !important;
    }
    .profile-top-gradient {
        position: absolute;
        bottom: -5px;
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 10%) 100%);
    }
    .profile-top {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30px;
        background-color: var(--primary-bg-color);
        border-radius: 100px 100px 0px 0px;
        box-sizing: border-box;
    }
    .profile{
        padding: 0px;
    }
    .company-photos-gallery-wrapper{
        border: unset;
        border-radius: 0px;
    }
    .company-photos-gallery {
        border-radius: 0px;
        border: none;
    }
    .no-photos > .large {
        border-radius: 0px;
    }
    .view-all-photos-wrapper {
        bottom: 25px;
    }
    .view-all-photos-section{
        padding: 10px 20px;
    }
    .company-content-wrapper, .tiles-wrapper {
        margin: 0px 25px;
    }
    .company-content-wrapper {
        padding-top: 0px;
    }
    .tiles-wrapper.location{
        margin: 0px;
    }
    .all-company-photos {
        padding: 0 25px;
    }
    .all-photos-content {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    /* .all-company-photos-wrapper .photos-wrapper {
        height: 150px;
    } */
    .company-content h1 {
        font-size: 30px;
    }
    .snapshot{
        height: 33vw;
    }
    .tiles-wrapper.location{
        margin: 0px;
    }
    .tiles-wrapper.location h2{
        margin: 0px 25px;
    }
    .changes-saved-wrapper{
        width: 100%;
    }
    .changes-saved-section{
        margin: 0px 25px 25px 25px;
    }
    .error-message-section {
        width: auto;
        padding: 0px 25px;
    }
    .error-message {
        font-size: 20px;
    }
    .profile .info-column h2{
        font-size: 25px;
    }
    /*ABOUT US*/
    .aboutus{
        padding: 25px;
    }
    .aboutus-info p{
        font-size: 16px;
    }
    .website-version-section {
        padding: 0px 25px;
    }
    /*LIST COMPANY*/
    .form-section{
        padding: 0px 25px;
    }
    .form-information h1, .received-submission-message-wrapper h1{
        font-size: 45px;
    }
    .add-hours-text {
        font-size: 14px;
    }
    .received-submission-message p{
        font-size: 16px;
    }
    .received-submission-message-section h2{
        font-size: 25px;
    }
    .form .form-control{
        width: 280px;
    }
    .form .form-control.add-hours {
        width: 320px;
    }
    /*SUGGEST EDIT*/
    .suggest-edit-company-name{
        font-size: 35px;
        padding-top: 10px;
    }
    .suggest-edit-options-wrapper {
        max-width: 315px;
    }
    /*PRIVACY POLICY / GUIDELINES*/
    .privacy-policy-section h1, .guidelines-section h1{
        font-size: 45px;
        padding: 0px 10px;
    }
    .privacy-policy, .guidelines{
        padding: 25px;
    }
    /*404 PAGE*/
    .page-not-found-wrapper{
        padding: 0px 25px;
    }
    .page-not-found-section h1{
        font-size: 120px;
    }
    .page-not-found-section h2 {
        font-size: 35px;
    }
    .page-not-found-section h3 {
        font-size: 25px;
    }
    .page-not-found-section p {
        font-size: 16px;
    }
    /*DELTE PHOTO*/
    .confirm-delete-photo-section{
        margin: 15px;
    }
    .photo-content{
        width: 100%;
    }
    .photo-content img{
        height: 70vw;
        max-height: 280px;
    }
    .search-icon-suggestions .company-profile-image{
        height: 100% !important;
        width: 100% !important;
    }
    .search-icon-suggestions .loading-photo {
        height: 25px !important;;
        width: 25px !important;;
    }
}
@media (max-height: 580px) {
    /*LIST COMPANY*/
    .received-submission-message-wrapper{
        height: auto;
    }
}
@media (max-width: 550px) {
    .modal-overlay-section {
        max-height: 100%;
        width: 100%;
        border-radius: 0px;
        margin: 0px;
        height: 100%;
        border: none;
    }
    .modal-overlay-content {
        max-height: unset;
    }
    .modal-delete-photo .modal-overlay-section {
        max-height: auto;
        width: auto;
        border-radius: 30px;
        margin: 15px;
        height: auto;
        border: 2px solid var(--secondary-bg-color);
    }
    .modal-overlay-content h2 {
        font-size: 25px;
    }
    .pagination-section {
        gap: 20px;
    }
    .pagination-button.mobile-color {
        background-color: var(--button-color);
    }
    .pagination-button.mobile-color .icon-color {
        fill: var(--secondary-text-color);
    }
    .pagination-button:disabled {
        background-color: var(--disabled-button);
    }
    .pagination-button:disabled .icon-color {
        fill: var(--primary-text-color) !important;
    }
    /*ABOUT US*/
    .image-section{
        height: unset;
    }
    .image{
        width: 85%;
        height: 85%;
    }
}
@media (max-width: 460px) {
    .days-wrapper {
        display: block;
    }
    .hours {
        width: 33vw;
        min-width: 95px;
    }
}
@media (max-width: 455px) {
    .improve-listing {
        gap: 0px;
        flex-direction: column;
    }
    .improve-listing > .add-button{
        width: auto;
        justify-content: center;
    }
}
@media (max-width: 420px) {
    .listings .company-profile-image, .listings .loading-photo, .listings .no-profile-image-section, .listings .loading-company-info {
        height: 78vw;
        width: 78vw;
    }
    .listing .loading-company-info-content {
        width: 50vw;
    }
    .listing .loading-company-info-content:nth-child(3) {
        width: 30vw;
    }
}
@media (max-width: 350px) {
    .form-control {
        width: 240px;
    }
}