:root {
    --primary-color: #ff6900;
    --primary-color-800: #bc5e04;
    --secondary-color: #80ff00;
}


.glass-effect {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    will-change: transform, opacity;
}

.glass-effect::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
    transform: rotate(45deg);
    animation: shine 3.5s cubic-bezier(0.76, 0, 0.24, 1) infinite, light-move 5s linear infinite;
}

.glass-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%);
    mix-blend-mode: overlay;
    animation: soft-glow 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shine {
    0% {
        top: -100%;
        left: -100%;
        opacity: 0.2;
    }
    50% {
        top: 50%;
        left: 50%;
        opacity: 0.6;
    }
    100% {
        top: 150%;
        left: 150%;
        opacity: 0.2;
    }
}

@keyframes light-move {
    0% {
        transform: rotate(45deg);
    }
    50% {
        transform: rotate(50deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@keyframes soft-glow {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.2;
    }
}





@keyframes slideDown {
    0% {
        max-height: 0;
        opacity: 0;
    }
    100% {
        max-height: 500px; /* مقدار بیشتر از ارتفاع واقعی div باشد */
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        max-height: 500px;
        opacity: 1;
    }
    100% {
        max-height: 0;
        opacity: 0;
    }
}

.slide-down {
    animation: slideDown 0.5s ease-out forwards;
    overflow: hidden;
}

.slide-up {
    animation: slideUp 0.5s ease-out forwards;
    overflow: hidden;
}



.dark\:text-gl-500 {
    --tw-text-opacity: 1;
    color: #E91E63;
}


.text-blue-700{
    color:  var(--primary-color) !important;

}


.dark\:.text-blue-700{
    color:  var(--primary-color)  !important;
}
.dark\:.group-hover.text-blue-700{
    color:  var(--primary-color)  !important;
}

@media (prefers-color-scheme: dark) {
    .group:hover .dark\:group-hover\:text-blue-700 {
        --tw-text-opacity: 1;
        color:  var(--primary-color)  !important;
    }
}


.border-blue-700{
    border-color:  var(--primary-color)  !important;


}


.dark\:.border-blue-700{
    border-color:  var(--primary-color)  !important;

}



.bg-blue-700{
    background:  var(--primary-color) !important;
    background-color:  var(--primary-color)  !important;
}


.dark\:.bg-blue-700{
    background:  var(--primary-color)  !important;
    background-color:  var(--primary-color)  !important;
}




.bg-blue-800{
    background:  var(--primary-color-800) !important;
    background-color:  var(--primary-color-800)  !important;
}


.dark\:.bg-blue-800{
    background:  var(--primary-color-800)  !important;
    background-color:  var(--primary-color-800)  !important;
}

@media (prefers-color-scheme: dark) {
    .dark\:text-gl-500 {
        --tw-text-opacity: 1;
        color: var(--primary-color) ;
    }
}



.desktop-menu li button , .desktop-menu li a {
    font-weight: 500;
font-size: 16px;
}


.hover-image-1 {
    transition: transform 0.3s ease-in-out;
}

.hover-image-1:hover {
    transform: translateY(-10px);
}


.hover-image-2 {
    transition: transform 0.9s ease-in-out;
}

.hover-image-2:hover {
    transform: scale(1.04); /* تصویر 10 درصد بزرگ‌تر می‌شود */
}




@media (min-width: 768px) {
    .md\:hover\:text-blue-600:hover {
        color:  var(--primary-color) !important;
    }
}



/* برای خط کلی pagination */
/* تغییرات به خط */
.swiper-pagination-bullet {
    width: 40px; /* طول خط */
    height: 4px; /* ضخامت خط */
    background-color: #e0e0e0; /* رنگ پس‌زمینه خط */
    border-radius: 0; /* حذف گردی */
    margin: 0 5px; /* فاصله بین خطوط */
    display: inline-block;
    transition: background-color 0.3s ease; /* برای انیمیشن رنگ */
}

/* وقتی اسلاید فعال است */
.swiper-pagination-bullet-active {
    background-color: #FF5733; /* رنگ خط فعال */
}