/* Yükləmə ekranının dizaynı */
#loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  z-index: 9999;
}

#loading-gif {
  width: 100%;
  height: auto; /* Hündürlük nisbətini qoruyaraq eni tam doldur */
  max-height: 100%; /* Hündürlük ekrana uyğun olmalıdır */
  object-fit: contain; /* Şəkli ekranın içində tam göstər */
}

@media (max-width: 768px) {
  #loading-gif {
    width: 95%; /* Mobil cihazlarda bir az kiçildin */
    height: auto;
  }
}

.hidden {
  display: none;
}


body {
  overflow: hidden; /* Saytın məzmununu gizlət */
}

/* GIF tam ekran üçün */
#main-gif {
  transition: opacity 0.5s ease-in-out;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes slide-in-left {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-in-left {
  animation: slide-in-left 1s ease-out forwards;
}

.animate-slide-in-right {
  animation: slide-in-right 1s ease-out forwards;
}

.animate-slide-in-bottom {
  animation: slide-in-bottom 1s ease-out forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 2s ease-out forwards;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}
@keyframes slowBounceIn {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  30% {
    opacity: 0.5;
    transform: translateY(-20%);
  }
  60% {
    opacity: 0.8;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-slowBounceIn {
  animation: slowBounceIn 2s ease-in-out forwards;
}

html, body {
  margin: 0; /* Default boşluqları silir */
  padding: 0; /* Default boşluqları silir */
  width: 100%; /* Ekran eninə tam uyğunlaşdırır */
  overflow-x: hidden; /* Sağ tərəfə skroll problemini həll edir */
}

/* Mobil menyunun görünüşü */
#mobile-menu {
  transition: all 0.3s ease-in-out;
}
@media (max-width: 768px) {
  .problematic-class {
    width: 100%; /* Tam ekran genişliyi */
    overflow-x: hidden; /* Sağ tərəfə skrollu bağlayır */
  }
}
@media (max-width: 768px) {
  #services .grid {
    grid-template-columns: repeat(2, 1fr); /* Mobil: 2 konteynır yan-yana */
  }

  #services h2 {
    font-size: 1.5rem; /* Mobil üçün başlıq ölçüsü */
    display: block; /* Başlıq mobil cihazlarda görünür */
    text-align: center; /* Başlıq mərkəzdə yerləşir */
  }

  #services .group img {
    width: 6rem; /* Mobil: İkon ölçüsü kiçilir */
    height: 6rem;
  }

  #services .group h3 {
    font-size: 1rem; /* Mobil: Başlıq ölçüsü */
  }

  #services .group p {
    font-size: 0.875rem; /* Mobil: Qısa məlumat ölçüsü */
  }

  #services .group:nth-child(3) {
    border-bottom: 0; /* Üçüncü konteynırın alt sərhədi silinir */
  }

  #services .group:nth-child(1),
  #services .group:nth-child(3) {
    border-right: 1px solid black; /* Birinci və üçüncü konteynıra sağ sərhəd əlavə edilir */
  }
}
@media (max-width: 768px) {
  #services h1 {
    font-size: 1.5rem; /* Başlığın ölçüsünü mobilə uyğunlaşdırır */
    display: block; /* Tam görünür etmək üçün */
    text-align: center; /* Mərkəzləşdirir */
    margin: 1rem 0; /* Yuxarı və aşağı boşluq */
    visibility: visible; /* Görünürlük təmin edilir */
    opacity: 1; /* Şəffaflıq təmin edilir */
    z-index: 10; /* Ön planda görünür */
    position: relative; /* Digər elementlərə görə yerləşim */
    overflow: visible; /* Hər hansı bir parent təsiri aradan qaldırılır */
  }

  #services {
    padding-top: 2rem; /* Başlıqla grid arasında boşluq */
  }

  .flex {
    overflow: visible; /* Üst parent overflow-u təsir etməsin */
  }
}

@media (max-width: 768px) {
  #portfolio h1 {
    font-size: 1.2rem; /* Mobil: Başlıq ölçüsü kiçilir */
  }

  #portfolio .grid {
    grid-template-columns: repeat(2, 1fr); /* Mobil: 2 sütunlu grid */
    gap: 1rem; /* Mobil: Aralarında boşluq */
  }

  #portfolio .group {
    height: 4rem; /* Mobil: Loqolar üçün hündürlük */
    width: 4rem; /* Mobil: Loqolar üçün eni */
    margin: 0 auto; /* Mobil: Loqolar mərkəzləşdirilir */
  }

  #portfolio .group img {
    max-width: 100%; /* Loqo şəkillərinin eni konteynırı aşmasın */
    max-height: 100%;
  }
}
@media (max-width: 768px) {
  footer {
    padding: 2rem 1rem; /* Mobil: Yuxarı və yanlardan boşluq */
  }

  footer .grid {
    grid-template-columns: 1fr; /* Mobil: Tək sütunlu grid */
    gap: 2rem; /* Elementlər arasında boşluq */
    text-align: center; /* Məzmun mərkəzləşdirilir */
  }

  footer .my-auto {
    text-align: center; /* Loqo mərkəzləşdirilir */
    margin-bottom: 1.5rem; /* Loqo ilə digər elementlər arasında boşluq */
  }

  footer img {
    margin: 0 auto; /* Loqo mərkəzləşdirilir */
    max-width: 60%; /* Loqo ölçüsü uyğunlaşdırılır */
  }

  footer ul {
    padding: 0;
    margin: 0;
    list-style: none; /* List markerlərini silir */
    text-align: center; /* Ünvanlar və digər məlumatlar mərkəzləşdirilir */
  }

  footer h3 {
    font-size: 1.25rem; /* Başlıqların ölçüsü mobil üçün uyğunlaşdırılır */
    margin-bottom: 1rem; /* Başlıq altına boşluq */
  }

  footer li {
    font-size: 0.875rem; /* Mətn ölçüsü kiçilir */
    margin: 0.5rem 0; /* Ünvan və digər elementlər arasında boşluq */
    text-align: center; /* Ünvan daxil olmaqla bütün məzmun mərkəzləşdirilir */
    display: flex; /* Ünvanı mərkəzləşdirmək üçün */
    justify-content: center; /* Mətn və ikonların mərkəzləşdirilməsi */
    align-items: center; /* Dikey mərkəzləşdirmə */
  }

  footer li i {
    margin-right: 0.5rem; /* İkon və mətn arasında boşluq */
  }
}




#mobile-menu {
  z-index: 40; /* Menyu pəncərəsinin z-index dəyəri daha aşağıdır */
}
.main-container.no-scroll {
  overflow: hidden !important;
  height: 100%; /* Hündürlüyü də məhdudlaşdır */
}
.no-scroll {
  overflow: hidden !important; /* Skroll tamamilə deaktiv edilir */
  height: 100%; /* Hündürlüyü sabitləyir */
}

img {
  pointer-events: none;
  user-select: none;
}