/* responsive.css - جميع الأكواد الخاصة بتوافق الموقع مع جميع الأجهزة */

/* الهواتف الصغيرة (أقل من 600px) */
@media (max-width: 600px) {
  body {
    font-size: 15px;
  }
  header, nav, .side-nav, .cards, .card, section, .container, .list, .benifits, .faq, .accordion-item {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .cards {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .card {
    flex-basis: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }
  .text-slider .list {
    font-size: 1.1em !important;
  }
  .benifits {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .faq .accordion-item .accordion-header {
    font-size: 1em !important;
  }
  .faq .accordion-body p {
    font-size: 0.95em !important;
  }
  footer {
    font-size: 0.9em !important;
    padding: 10px 0 !important;
  }
  footer .cols div {
    max-width: 100%;
  }
}

/* التابلت (600px إلى 900px) */
@media (min-width: 601px) and (max-width: 900px) {
  .cards {
    flex-wrap: wrap !important;
    gap: 25px !important;
  }
  .card {
    flex-basis: 48% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }
  footer .cols div {
    max-width: 100%;
  }
  .benifits {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
  }
}

/* الشاشات المتوسطة (900px إلى 1200px) */
@media (min-width: 901px) and (max-width: 1200px) {
  .cards {
    gap: 30px !important;
  }
  .card {
    flex-basis: 31% !important;
    min-width: 0 !important;
  }
}

/* الشاشات الكبيرة (أكبر من 1200px) */
@media (min-width: 1201px) {
  .cards {
    gap: 40px !important;
  }
  .card {
    flex-basis: 23% !important;
    min-width: 0 !important;
  }
}

/* عناصر إضافية */
@media (max-width: 900px) {
  nav ul {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .side-nav {
    width: 100% !important;
    padding: 60px 10px !important;
  }
  .text-slider .list {
    gap: 10px !important;
  }
  section.why::before,
  section.how::before,
  section.testimonials::after,
  section.collaborate::after {
    left: 0 !important;
    right: auto !important;
    width: 140px !important;
    height: 140px !important;
    opacity: 0.15 !important;
  }
  section.why,
  section.how,
  section.testimonials,
  section.collaborate {
    overflow-x: hidden !important;
  }
}
@media (max-width: 600px) {
  h1, h2, h3, h4 {
    font-size: 1.1em !important;
  }
  .logo img {
    max-width: 120px !important;
  }
  
}


.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 2002;
  position: absolute;
  top: 25px;
  right: 25px;
}
.hamburger span {
  display: block;
  width: 30px;
  height: 4px;
  margin: 4px 0;
  background: var(--main-color, #222);
  border-radius: 2px;
  transition: 0.4s;
}
@media (max-width: 900px) {
  .hamburger { display: flex; }
  nav ul, .quick-links { display: none !important; }
  .side-nav { width: 80vw !important; right: 0; left: unset; }
  .side-nav.active { transform: translateX(0); }
  
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }


/* General responsive adjustments for remaining pages */
@media (max-width: 900px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  section { padding: 40px 0 !important; }
  .title { margin-bottom: 40px !important; }
  .title .head { font-size: 1.8em !important; text-align: center; }
  .text { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  img, video, iframe { max-width: 100% !important; height: auto !important; display: block !important; }
  .cols { display: flex !important; flex-direction: column !important; gap: 20px !important; }
  footer .cols { flex-direction: column !important; gap: 20px !important; text-align: center !important; }
  nav ul { flex-direction: column !important; gap: 10px !important; }
  .portfolio .cards, .services .boxes, .benifits .cards, .cards { flex-direction: column !important; gap: 20px !important; }
  .side-nav { width: 100% !important; left: 0 !important; right: auto !important; }
  .welcome, .welcoming, .hero { padding: 120px 16px 60px !important; }
  .video, .hero video { max-height: 50vh !important; object-fit: cover !important; }
}

@media (max-width: 600px) {
  h1, h2, h3, h4 { font-size: 1.4em !important; }
  .btn span { padding: 10px 16px !important; display: flex;
        justify-content: center;
        align-items: center; font-size: 14px !important; }
  .logo img { max-width: 100px !important; }
  .card { padding: 20px !important; }
  .text .part { gap: 12px !important; }
  .title { margin-bottom: 30px !important; }
  .adds, .info { padding-left: 0 !important; padding-right: 0 !important; }
  .side-nav { padding: 40px 12px !important; }
}