/* Add custom CSS styles below */ 
body#app {
    box-sizing: border-box !important;
}

body.index .store-header {
    position: sticky !important;
}

.inner{
background: #ffffff !important;
    padding: 1rem !important;
}

section.h-full.z-1.mb-5.relative.big-banner-0 h1 {
    color: #ffffff !important;
    line-height: 1.5 !important;
}

.main-nav-container .mobile-menu ul li a {
    font-size: 16px !important;
}

.main-nav-container .mobile-menu ul li a:hover {
    opacity: 1;
    border-bottom: 1px solid #8e8ec2;
}

img.sal-animate {
    height: 443px;
}

img.z-1.relative.w-full.h-full.sal-animate {
    height: 85% !important;
}

span.leading-14.font-semibold.media_number {
    font-size: 1.5rem !important;
}

span.leading-14.font-medium {
    font-size: 1.5rem !important;
}

.big-banner-0{

}

a.text-\[var\(--m-color\)\].font-semibold {
    color: #ffffff;
}

button.border-\[var\(--m-color\)\].border.rounded-\[1px\].m-auto.py-2.lg\:py-4.lg\:mt-5 , button.border-\[var\(--f-color\)\].border.rounded-\[1px\].m-auto.py-2.lg\:py-4.lg\:mt-5
 {
    border: 1px solid #ffffff;
    background: #00000054;
    border-radius: 1rem;
}

/* .big-banner-0 head_img div div div h1 or  */
section.h-full.z-1.mb-5.relative.big-banner-0 h1 {
color: #ffffff;
}
/* .big-banner-0 head_img div div div p or  */
section.h-full.z-1.mb-5.relative.big-banner-0 p {
color: #ffffff;
}

.private-products{

}

.overlay h1{
color: #ffffff;
}

h1.text-\[var\(--m-color\)\].font-semibold.w-\[80\%\].leading-16 {
    width: 80%;
    color: #ffffff;
}

.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-rtl.swiper-backface-hidden {
    padding-left: 0rem !important;
}

.container.flex.justify-center.lg\:justify-between {
    align-items: center;
    gap: 1rem;
}

.absolute.top-\[5\%\].left-\[10\%\].lg\:left-\[20\%\].w-\[250px\].flex.flex-col.justify-start.items-center.text-center {
    width: 100% !important;
    right: 0 !important;
    top: 30% !important;
}

.s-products-slider-card.swiper-slide {
    width: 100% !important;
}

@media (max-width: 426px) {
h1.text-\[var\(--f-color\)\].font-semibold.w-\[80\%\].leading-16 , h1.text-\[var\(--m-color\)\].font-semibold.w-\[80\%\].leading-16 {
    font-size: 1.3rem !important;
    line-height: 1.8;
}
span {
    margin: 0px 1px;
    font-size: 0.6rem !important;
}
.absolute.top-\[5\%\].left-\[10\%\].lg\:left-\[20\%\].w-\[250px\].flex.flex-col.justify-start.items-center.text-center {
    top: 35% !important;
}
}

@media (max-width: 601px) {
h1.font-bold.lg\:mb-10.leading-10.lg\:leading-18.text-\[var\(--m-color\)\].sal-animate {
    font-size: 0.7rem !important;
}
    .rooms .s-slider-container .s-slider-swiper-wrapper .swiper-slide {
        width: 100% !important;
    }
    .swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-rtl.swiper-backface-hidden {
    padding-left: 0rem !important;
}
    span {
    margin: 0px 10px;
    font-size: 1rem !important;
}

}

@media (min-width: 300px) {
.max-w-\[70\%\].md\:max-w-\[55\%\].text-center.flex.flex-col.items-center.p-3.md\:p-5 {
    max-width: 100% !important;
}
}


@media (min-width: 768px) {
.max-w-\[70\%\].md\:max-w-\[55\%\].text-center.flex.flex-col.items-center.p-3.md\:p-5 {
    max-width: 90% !important;
}
}


@media (min-width: 1024px) {
  .relative.flex.justify-center.items-center.sal-animate {
    width: 70% !important;
}
.max-w-\[70\%\].md\:max-w-\[55\%\].text-center.flex.flex-col.items-center.p-3.md\:p-5 {
    max-width: 70% !important;
}

.absolute.top-\[5\%\].left-\[10\%\].lg\:left-\[20\%\].w-\[250px\].flex.flex-col.justify-start.items-center.text-center {
    width: 100% !important;
    right: 0 !important;
    top: 30% !important;
}
 span {
    margin: 0px 10px;
    font-size: 0.8rem !important;
}
}