@charset "UTF-8";
/* Write your code here */
.c-price {
    font-weight: bold !important;
    font-size: 21px !important;
}

a {
    text-decoration: none;
    font-weight: bold;
    color: #016a68;
}

.c-f-color {
    color: #016a68;
}

.c-b-color {
    background-color: #016a68;
}

.all-filters-box {
    display: none;
}

.filter-labels {
    width: fit-content;
}

.fixed-height {
    min-height: 45px;
}

.f-bolder {
    font-weight: bolder;
}

.thumb-img {
    width: 20px;
}

/*.remodal-is-opened {*/
/*    z-index: 999999;*/
/*}*/
.copy-code-btn::before {
    content: "\ecd4";
    font-family: remixicon;
    margin-left: 5px;
}

/* fixed header */
.page-header--middle.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.page-header-r-top {
    padding-top: 10px;
    padding-bottom: 10px;
}

.page-header-r-top.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: white;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/*start circles-----------------*/
.outer-circle {
    width: 84px;
    height: 84px;
    border: 3px #016a68 solid;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px; /* فاصله 1 پیکسلی */
}

.inner-circle {
    background: white;
    width: 100%;
    height: 100%;
    border: 1px rgb(1, 106, 104) solid;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/*end of circles---------------------*/
/* Preloader */
/* Hide scrollbar when preloader is active */
/* --- Preloader Styles --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The spinning circle */
.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.83);
    border-top-color: #016a68; /* Color of the spinning part */
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
    z-index: 100;
    transition: opacity 0.5s ease;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Curtain halves */
.curtain {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    /* Gradient from top (#1a3460) to bottom (#016a60) */
    background: linear-gradient(to bottom, #1a3460, #016a60);
    transition: transform 1.2s cubic-bezier(0.86, 0, 0.07, 1);
}

#left-curtain {
    left: 0;
}

#right-curtain {
    right: 0;
}

/* --- Hide/Reveal Animations --- */
/* This class will be added by JS when the page is loaded */
#preloader.loaded .spinner,
#preloader.loaded .loading-text { /* متن هم به این قانون اضافه شد */
    opacity: 0;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

.loading-text {
    color: rgba(252, 253, 253, 0.93);
    margin-top: 150px; /* فاصله از مرکز برای قرارگیری زیر اسپینر */
    position: absolute; /* موقعیت‌دهی نسبت به preloader */
    direction: rtl;
    font-size: 18px;
    letter-spacing: 1px;
    transition: opacity 0.5s ease; /* برای انیمیشن محو شدن */
    animation: pulse 2s infinite ease-in-out; /* انیمیشن چشمک‌زن ملایم */
}

#preloader.loaded #left-curtain {
    transform: translateX(-100%); /* Move left curtain off-screen */
}

#preloader.loaded #right-curtain {
    transform: translateX(100%); /* Move right curtain off-screen */
}

/* Hide preloader completely after animations */
#preloader.hidden {
    display: none;
}

/*end of preloader*/
/*credi ipgs*/
.card-input-element:checked + .card-input {
    box-shadow: 0 0 1px 1px #016a68;
}

@media (max-width: 768px) {
    .z-index-max {
        z-index: 99999;
    }
}

.remodal-wrapper.remodal-is-opened {
    background-color: rgba(0, 0, 0, 0.29) !important;
    z-index: 99999;
}

a.nav-link.custom-link-active {
    border-bottom: 5px #016a68 solid;
}

.custom-mobile-slide {
    height: 30vh !important;
}

.text-primary {
    color: #24b02a !important;
}

a:hover {
    color: #5f5c6b !important;
}

a.btn-primary {
    color: #fff !important;
}

.badge {
    background-color: #016a68 !important;
}

.main-swiper-slider .main-swiper-slide a {
    background-size: cover !important;
}

.swiper main-swiper-slider {
    max-width: 1920px !important;
}

.c-param-title {
    background-color: rgba(108, 117, 125, 0.0509803922);
    padding-right: 20px;
    border-radius: 8px;
}

@media (max-width: 992px) {
    .c-search-box-responsive {
        width: 100% !important;
    }
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* این کلاس را به تگ <a> بدهید */
.category-thumbnail-link {
    display: flex !important; /* با !important اولویت را به این استایل می‌دهیم */
    flex-direction: column;
    justify-content: center; /* محتوا را در مرکز عمودی قرار می‌دهد */
    align-items: center;
    text-decoration: none;
    color: #fff; /* یک رنگ مشخص برای متن که مخفی نشود */
    min-height: 130px; /* یک ارتفاع حداقلی برای جلوگیری از به هم ریختگی */
    text-align: center;
    margin: 0 5px;
    box-sizing: border-box;
    background-color: #f8f8f8;
    border-radius: 8px;
}

/* این کلاس را به تگ <img> بدهید */
.category-thumbnail-image {
    width: 80px; /* کمی اندازه را کوچکتر کردم تا بهتر جا شود */
    height: 80px;
    margin-bottom: 8px;
    object-fit: contain; /* برای اینکه تصویر در کادر فیت شود */
}

/* Define the new color palette for clarity */
:root {
    --primary-color: #016a68;
    --accent-color: #1b335f;
}

/* Common styles for floating icons */
.floating-icon {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.floating-icon i {
    color: #fff;
    font-size: 32px;
}

.floating-icon:hover {
    transform: scale(1.1);
    animation-play-state: paused;
}

/* Instagram Icon Specific Styles */
.floating-instagram-icon {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    animation: instagram-pulse 2s infinite;
}

/* WhatsApp Icon Specific Styles */
.floating-whatsapp-icon {
    background-color: #25D366;
    animation: whatsapp-pulse 2s infinite;
    animation-delay: 0.5s; /* Delay to start out of sync with Instagram */
}

/* Instagram Animation Keyframes */
@keyframes instagram-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(214, 36, 159, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(214, 36, 159, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(214, 36, 159, 0);
    }
}

/* WhatsApp Animation Keyframes */
@keyframes whatsapp-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Desktop styles (screens wider than 767px) */
@media (min-width: 768px) {
    .floating-icon {
        left: 30px;
        right: auto;
    }

    .floating-instagram-icon {
        bottom: 110px;
    }

    .floating-whatsapp-icon {
        bottom: 180px;
    }
}

/* Mobile styles (screens 767px and narrower) */
@media (max-width: 767px) {
    .floating-icon {
        left: 12px;
        right: auto;
    }

    .floating-instagram-icon {
        bottom: 140px;
    }

    .floating-whatsapp-icon {
        bottom: 210px;
    }
}