/* Responsive fixes layered above current theme styles */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap");

:root {
  --site-font-ar: "Cairo", "Droid Arabic Kufi", "Segoe UI", Tahoma, sans-serif;
  --site-radius-md: 12px;
  --site-ease: 220ms ease;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--site-font-ar) !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Enforce Cairo on content elements while preserving icon fonts */
body :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    li,
    span,
    label,
    small,
    strong,
    em,
    button,
    input,
    textarea,
    select,
    option
  ) {
  font-family: var(--site-font-ar) !important;
}

a,
button,
.card,
.card1,
.theme-btn,
.card-btn {
  transition: all var(--site-ease);
}

.card,
.card1 {
  border-radius: var(--site-radius-md);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.theme-btn,
.card-btn {
  border-radius: 999px;
  letter-spacing: 0.2px;
}

.theme-btn:hover,
.card-btn:hover {
  transform: translateY(-1px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.35;
}

/* About Us cards: fully-justified Arabic text */
.studio-about-area .carddd {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

.studio-about-area .carddd .contentdd {
  align-items: stretch;
  gap: 14px;
}

.studio-about-area .carddd .contentdd h2 {
  width: 100%;
  margin: 0;
  text-align: right;
}

.studio-about-area .carddd .contentdd h5 {
  width: 100%;
  margin: 0;
  direction: rtl;
  text-align: justify;
  text-align-last: right;
  line-height: 1.9;
}

img,
video,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

/* Keep custom container variants from causing horizontal overflow on small devices */
[class*="container-"] {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 991.98px) {
  [class*="container-"] {
    padding-right: 12px;
    padding-left: 12px;
  }

  h1 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    line-height: 1.25;
  }

  h2 {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    line-height: 1.3;
  }

  p,
  li {
    line-height: 1.7;
  }

  .packages-container,
  .packages-wrapper,
  .card,
  .card1,
  .swiper,
  .swiper-container,
  .swiper-wrapper,
  .swiper-slide {
    width: 100%;
    max-width: 100%;
  }

  .nav-btn {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .packages-container {
    margin: 24px auto;
    padding: 0 8px;
  }

  .packages-wrapper {
    overflow: hidden;
  }

  .packages-container .nav-btn {
    top: 40%;
    z-index: 10;
    opacity: 0.95;
  }

  .packages-container .nav-btn.left {
    left: 6px;
  }

  .packages-container .nav-btn.right {
    right: 6px;
  }

  .creative-blog-area .card.card1 {
    padding: 0;
    border-radius: 14px;
  }

  .creative-blog-area .slider-images {
    height: 220px;
  }

  .creative-blog-area .card-content {
    padding: 16px;
  }

  .creative-blog-area .card-title {
    margin-bottom: 10px;
  }

  .creative-blog-area .plan-features li {
    margin-bottom: 8px;
    padding-right: 18px;
  }

  .creative-blog-area .plan-features li p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
  }

  .creative-blog-area .swiper-slide {
    height: auto;
    display: flex;
  }

  .creative-blog-area .swiper-slide .card {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 575.98px) {
  .studio-about-area .carddd .contentdd {
    padding: 24px;
  }

  .creative-blog-area {
    padding-top: 80px !important;
    padding-bottom: 50px !important;
  }

  .creative-blog-area .slider-images {
    height: 190px;
  }

  .packages-container .nav-btn {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}