@font-face {
    font-family: 'B Yekan';
    src: url('/FrontAssets/fonts/yekan/Yekan.woff') format('woff') ,
}

.iziToast {
    font-family: 'B Yekan', sans-serif !important;
}

.swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevents slides from overflowing */
}
.swiper-container-5 {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevents slides from overflowing */
}
.swiper-container-4 {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevents slides from overflowing */
}
.swiper-container-7 {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevents slides from overflowing */
}

@media (max-width: 576px) {
    .d-sm-none {
        display: none !important;
    }
}

.special-nav-tabs {
    margin-right: 20px;
    justify-content: right;
}
.special-nav-item {
    text-align: right;
}

body {
    font-family: 'B Yekan', sans-serif !important;
    font-size: 16px;
    direction: rtl;
    overflow-x: hidden;
}

.bg-primary-2 {
    background-color: #20C5FF;
}

a {
    text-decoration: none !important;
}

.inner-box-shadow {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.border-shadow {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.07); /* Start with no shadow */
    transition: box-shadow 0.3s ease; /* Add transition for smooth animation */
}

.border-shadow:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Shadow on hover */
}

.background-div {
    background-size: 100% 100%;

    background-position: center;
    background-repeat: no-repeat;
}

.border-radius-high {
    border-radius: 20px;
}

.border-radius {
    border-radius: 5px;
}

.rounded-full {
    border-radius: 30px;
}

.svg-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 180px;
    border-radius: 20px;
}

@media (max-width: 767px) {
    .svg-waves {
        height: 80px;
    }
}

.svg-waves__parallax > use {
    -webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.svg-waves__parallax > use:nth-child(1) {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    fill: rgba(255, 255, 255, 0.7);
}

.svg-waves__parallax > use:nth-child(2) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    fill: rgba(255, 255, 255, 0.5);
}

.svg-waves__parallax > use:nth-child(3) {
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    -webkit-animation-duration: 13s;
    animation-duration: 13s;
    fill: rgba(255, 255, 255, 0.3);
}

.svg-waves__parallax > use:nth-child(4) {
    -webkit-animation-delay: -5s;
    animation-delay: -5s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    fill: white;
}

@-webkit-keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

.product-container {
    position: relative;
    transition: all 0.3s ease;
}

.product-container:hover .heart-btn {
    animation: fadeInFromBottom 0.5s ease forwards;
}

.product-container:hover .reserve-btn {
    animation: fadeInFromBottomReserve 0.5s ease forwards;
}

@keyframes fadeInFromBottom {
    from {
        opacity: 0;
        transform: translate(-50%, 250%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 200%);
    }
}

@keyframes fadeInFromBottomReserve {
    from {
        opacity: 0;
        transform: translate(-50%, 100%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 50%);
    }
}

.heart-btn {

    opacity: 0; /* Start with 0 opacity */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 200%);
    border: none;
    cursor: pointer;
    transition: opacity 0.5s ease; /* Apply transition for opacity */
}

.reserve-btn {

    opacity: 0; /* Start with 0 opacity */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 200%);
    border: none;
    cursor: pointer;
    transition: opacity 0.5s ease; /* Apply transition for opacity */
}

.special-btn {

    opacity: 1; /* Start with 0 opacity */
    position: absolute;
    top: 10%;
    left: 10%;
    border: none;
    cursor: pointer;
    transition: opacity 0.5s ease; /* Apply transition for opacity */
}

.open-btn {

    opacity: 1; /* Start with 0 opacity */
    position: absolute;
    top: 10%;
    right: 10%;
    border: none;
    cursor: pointer;
    transition: opacity 0.5s ease; /* Apply transition for opacity */
}

.heart-btn:hover {
    color: red;
}

@media screen and (max-width: 768px) {
    .heart-btn {
        opacity: 1;
        transform: translate(-50%, 200%);
    }
}

.custom-checkbox {
    position: relative;
    display: inline-block;
}

.custom-checkbox input[type="checkbox"] {
    display: none;
}

.custom-checkbox label {
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #aaa;
    display: block;
}

.green-checkbox input[type="checkbox"]:checked + label {
    background-color: darkgreen; /* Fill color when checked */
}

.blue-checkbox input[type="checkbox"]:checked + label {
    background-color: darkblue; /* Fill color when checked */
}

.pink-checkbox input[type="checkbox"]:checked + label {
    background-color: darkviolet; /* Fill color when checked */
}

.yellow-checkbox input[type="checkbox"]:checked + label {
    background-color: darkgoldenrod; /* Fill color when checked */
}

.gray-checkbox input[type="checkbox"]:checked + label {
    background-color: darkgray; /* Fill color when checked */
}

hr {
    border: solid 2px;
    height: 3px; /* Adjust as needed */
    background-color: black; /* Change the color if needed */
    font-weight: bold; /* Make the line bold */
}

@keyframes fade-in {
    from {
        opacity: 0; /* Start with opacity 0 */
        transform: translateY(-20px); /* Move up by 20px */
    }
    to {
        opacity: 1; /* End with opacity 1 */
        transform: translateY(0); /* End at original position */
    }
}

@keyframes fade-out {
    from {
        opacity: 1; /* Start with opacity 1 */
        transform: translateY(0); /* Start from original position */
    }
    to {
        opacity: 0; /* End with opacity 0 */
        transform: translateY(-20px); /* Move up by 20px */
    }
}

/* Apply the fade-in animation to your divs */
.fade-in-div {
    animation: fade-in 0.5s ease-out; /* Use the animation with 0.5s duration */
    display: block;
}

.fade-out-div {
    animation: fade-out 0.5s ease-in; /* Use the fade-out animation */
    display: none;
}

.bold-black-border {
    border: 4px solid #20C5FF;
    font-weight: bold;
}

.bold-primary-border {
    border: 4px solid darkblue;
    font-weight: bold;
}

.modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.modal-lg {
    max-width: 100%; /* Adjust this value as needed */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

.blog-content img {
    border-radius: 25px;
    margin: 10px;
    padding: 10px;
}