:root {
  --primary-color: #6c26c8;
  --secondary-color: #e74c3c;
  --accent-color: #cfe148;
  --dark-color: #2c3e50;
  --light-color: #ecf0f1;
  --success-color: #27ae60;
  --warning-color: #f39c12;
  --info-color: #3498db;
}
.main-menu {
  background-color: rgb(0, 255, 128);
  padding: 10px 5px;
  border-radius: 15px;

  color: #000;
}
.mobile-nav{
  background:green;
}
.gallery-area {
  padding: 100px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.gallery-area .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}

/* کارت عکس */
.single-imgs {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: #fff;
  aspect-ratio: 4 / 3;          
  margin: 5px;
}

.single-imgs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.single-imgs:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 50px rgba(108, 38, 200, 0.18); /* سایه بنفش تم سایت */
  margin: 2px;
}

.single-imgs:hover img {
  transform: scale(1.15) rotate(2deg); /* کمی چرخش + زوم نرم */
}

/* Overlay با گرادیانت و متن */
.single-imgs::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(108, 38, 200, 0.65) 80%,
    rgba(108, 38, 200, 0.85) 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

.single-imgs:hover::before {
  opacity: 1;
}

/* عنوان روی عکس (اختیاری - اگر خواستی نمایش بده) */
.single-imgs::after {
  content: attr(data-title);   /* از data-title استفاده کن */
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
  z-index: 2;
  pointer-events: none;
}

.single-imgs:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* آیکون بزرگ وسط برای حس lightbox */
.single-imgs .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 3;
  pointer-events: none;
}

.single-imgs:hover .play-icon {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(1.15);
}

/* موبایل - تنظیمات responsive */
@media (max-width: 768px) {
  .single-imgs {
    aspect-ratio: 16 / 10;
  }

  .single-imgs::after {
    font-size: 1rem;
    bottom: 15px;
    left: 15px;
    right: 15px;
  }

  .single-imgs .play-icon {
    font-size: 3rem;
  }
}
.back-to-top {
  background: rgb(0, 255, 128);
  padding: 15px;
}
.back-to-top:hover{
  color: green;
}
.floating-button {
  background: rgb(0, 255, 128);
  color: #000;
}
.floating-button:hover{
  color:rgb(0, 255, 128) ;
}
.nav-menu {
  margin-top: 0;
  display: flex;
  gap: 25px;
}

.nav-menu li {
  position: relative;
}

.nav-menu a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 5px;
  transition: 0.3s;
}

.nav-menu a:hover {
  color: #e74c3c;
}

.nav-menu a::after {
  display: block;
  height: 2px;
  background: #e74c3c;
  transform: scaleX(0);
  transition: transform 0.3s;
}

.nav-menu a:hover::after {
  transform: scaleX(1);
}
.about-content {
  height: 450px;
}
.about-content h1 {
  color: #fff;
}
.banner {
  background-size: cover;
  position: relative;
}
.gallery-area {
  background: #f9fafc;
}

.single-imgs {
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
}

.single-imgs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.single-imgs .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0.15),
    transparent
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}
.single-imgs:hover img {
  transform: scale(1.08);
}

.single-imgs:hover .overlay {
  opacity: 1;
}
 .banner-area {
  background: url(../img/top-banner.jpg) right no-repeat;
  background-size: cover;
}
.banner-area {
  position: relative; /* ضروری برای اینکه overlay رویش قرار بگیرد */
  width: 100%;
  height: 100vh; /* یا ارتفاع دلخواه بنر */
  background-size: cover;
}
.banner-area .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* رنگ مشکی با شفافیت 50% */
  z-index: 1;
}

.cta-two-area {
  padding: 80px 0;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: #fff;
  position: relative;
}

.cta-two-area .cta-left h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 15px;
}

.cta-two-area .cta-left .highlight {
  color: #ffd700; /* طلایی برای اسم درسینو */
}

.cta-two-area .cta-left p.lead {
  font-size: 1.2rem;
  opacity: 0.85;
  margin-bottom: 0;
}

.cta-two-area .cta-btn {
  display: inline-block;
  background-color: #fff;
  color: #2575fc;
  font-weight: 700;
  padding: 12px 30px;
  font-size: 1.1rem;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: all 0.3s;
}

.cta-two-area .cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

@media (prefers-color-scheme: dark) {
  .gallery-area {
    background: var(--bg-color);
  }
  .single-imgs {
    background: var(--card-bg);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  }
  .overlay.overlay-bg {
    background: rgba(0,0,0,0.65); /* تیره‌تر برای کنتراست */
  }
  .cta-two-area {
    background: var(--card-bg);
    color: var(--text-color);
  }
  .cta-btn {
    background: var(--primary-color);
  }
}
@media (max-width: 768px) {
  .gallery-area {
    background: #f9fafc;
  }
}