:root{
    --font-size: 14px;
    --font-family:"Roboto Condensed", sans-serif;
    --backgroundColor: #f5f5f5;
    --timing-function: cubic-bezier(.86, .2, .03, .97);
    --padding: 1.25rem;
    --firstColor: #FEB801;
    --firstColor-lite: #ffeab4;
        --secondColor: #c08a00;
        --thirdColor: #835e00;
        --swiper-theme-color: var(--firstColor);
        --bs-link-color: var(--firstColor);
        --bs-link-hover-color :var(--firstColor);
}

@view-transition {
  navigation: auto;
}

body{
    font-size: var(--font-size);
    font-family: var(--font-family);
}
h1, h2, h3, h4, h5, h6{
    font-family: var(--font-family);
}

.firstColor {
    color: var(--firstColor);
}

.secondColor {
    color: var(--secondColor);
}

.thirdColor {
    color: var(--thirdColor);
}

.bg-firstColor {
    background-color: var(--firstColor);
}

.bg-secondColor {
    background-color: var(--secondColor);
}

.bg-thirdColor {
    background-color: var(--thirdColor);
}
/*------------------- typography -------------------*/
.small-font{
    font-size: calc(1rem - 2px);
}
/*------------ Bootstrap Cutomization ------------*/
.theme-rounded{
    border-radius: 30px;    
}
.scroll-margin{
    margin-top: 80px;
}
/*--------------------- CUSTOM ------------*/
.btn-theme{
        border:1px solid #000;
        background-color: transparent;
        color:#000;
    &:hover{
        background-color: var(--firstColor);
    }
}
.d-flex-m-block{
    display: flex;
    @media (width < 992px) {
     display: block;
    }
}
.cal-icon{
    width: 70px;
    aspect-ratio: 1;
    position: relative;
    overflow: clip;
    border-radius: 5px;
    outline: 1px solid #888;
    & .cal-date{
        font-size: 2.25rem;
        text-align: center;
    }
    & .cal-month{
        position: absolute;
        bottom: 0;
        width: 100%;
        background: var(--firstColor);
        font-size: .8rem;
        text-align: center;
    }
}

.invisible-scrollbar::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}
.categories-wrapper{
    @media (width < 992px) {
        width: 100%;
        overflow-x: scroll;
    }
    
}
.categories{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    @media (width < 992px) {
        justify-content: start;
    width: max-content;
    }
    
}

.w-100-pc-auto-m{
    width: 100%;
    @media (width < 992px) {
        width: auto;
    }
}

.hide-on-pc{
    @media (width > 992px) {
       display: none;
   }
}
.hide-on-mobile{
    @media (width < 992px) {
       display: none;
   }
}
.custom-bg {
    --url:url('/assets/images/gradient-bg.webp');
    background: var(--color, #00000088) var(--url);
    background-size: var(--size, cover);
    background-repeat: var(--repeat, no-repeat);
    background-blend-mode: overlay;
    background-position: var(--position, center);
    background-attachment: var(--attachment, fixed);
}

.bg-yellow {
    background: #FEB801;
    background: radial-gradient(circle, rgba(254, 184, 1, 1) 0%, rgba(189, 135, 0, 1) 100%);
}

/*---------size and centering------------------------------------------*/

.vh100 {
    min-height: 100svh;
    height: auto;
}

.vh50 {
    min-height: 50svh;
    height: auto;
}

.vh40 {
    min-height: 40svh;
    height: auto;
}
.vh20 {
    min-height: 20svh;
    height: auto;
}
.vertical-center {
    align-content: center;
}

.img-circle{
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
    outline: 1px solid #ddd;
}
.square{
    aspect-ratio: 1;
}
.icon{
    width:40px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #dbdbe0;
    color:#000;
    display: grid;
    place-items: center;
    text-decoration: none;
    &:hover{
        background-color: var(--color,'#FEB801');
        color:#fff;
    }
}
.packageTypeItem{
    overflow: clip;
}