/* // header resonsive start -------------------------- */

/* ========================
   RESPONSIVE
   ======================== */
/* ========================
   RESPONSIVE HAMBURGER & MOBILE MENU
   ======================== */
@media screen and (max-width: 992px) {
  .nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--dark-color);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease;
    flex-direction: column;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }

  .nav ul {
    flex-direction: column;
    width: 100%;
  }

  .menu-item {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .menu-item a {
    padding: 15px 20px;
    width: 100%;
    display: block;
  }

  .header-buttons {
    display: none;
  }

  .hamburger {
    display: flex;
    z-index: 1001;
  }

  .nav.active {
    max-height: 800px; /* Increased for mega menu */
  }

  .dropdown-menu {
    position: relative;
    top: 0;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(0);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    box-shadow: none;
    backdrop-filter: none;
    background-color: rgba(0,0,0,0.9);
    transition: all 0.3s ease;
    border-radius: 0;
  }

  /* Mega menu mobile styles */
  .mega-menu {
    width: 100% !important;
    left: 0 !important;
    right: 0;
    background: rgba(0,0,0,0.95);
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .mega-menu-container {
    flex-direction: column;
    min-height: auto;
    width: 100%;
    padding: 0;
  }

  .mega-menu-content {
    flex-direction: column;
    padding: 10px 0;
    width: 100%;
  }

  .mega-menu-section {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 20px;
    opacity: 1;
    transform: none;
    animation: none;
    width: 100%;
  }

  .mega-menu-section:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mega-menu-title {
    font-size: 14px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    color: #fff;
  }

  .mega-menu-list {
    width: 100%;
  }

  .mega-menu-list a {
    padding: 8px 0;
    font-size: 14px;
    display: block;
    width: 100%;
  }

  .mega-menu-image {
    width: 100%;
    padding: 20px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 1;
    transform: none;
    animation: none;
  }

  .mega-menu-image img {
    max-width: 120px;
    height: 70px;
  }

  .image-content h5 {
    font-size: 14px;
  }

  .image-content p {
    font-size: 12px;
  }

  .image-cta {
    padding: 6px 12px;
    font-size: 11px;
  }

  .menu-item.dropdown.active .dropdown-menu {
    opacity: 1;
    max-height: 600px;
    pointer-events: auto;
  }

  .dropdown-menu li a {
    padding: 10px 30px;
  }
}

/* Tablet specific styles for mega menu */
@media screen and (min-width: 768px) and (max-width: 992px) {
  .mega-menu {
    width: 100% !important;
    left: 0 !important;
    right: 0;
    border-radius: 0;
  }

  .mega-menu-content {
    flex-wrap: wrap;
    padding: 15px 0;
  }

  .mega-menu-section {
    flex: 1 1 45%;
    min-width: 200px;
    padding: 12px 15px;
  }

  .mega-menu-image {
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
  }
}

/* Large screens - adjust mega menu positioning */
@media screen and (min-width: 1200px) {
  .mega-menu {
    width: 900px;
    left: -250px;
  }

  .mega-menu-image {
    width: 300px;
  }
}

/* // header resonsive end -------------------------- */





   /* ----------------------------------------------------  hero section responsive start ---------------------------------------------------- */
    @media (max-width: 1024px) {
      .hero-content {
        padding: 15% 5% 2% 5%; 
      }

      .swiper {
        height: clamp(200px, 25vh, 300px);
        padding: 0 10%;
        margin: 0 auto -10px auto; 
      }

      .swiper-slide {
        width: clamp(200px, 35vw, 400px);
      }

      .black-child {
        width: 90%;
        gap: 20px;
      }
    }

    @media (min-width: 821px) and (max-width: 1024px) {
      .hero {
        min-height: 70vh; 
      }

      .hero-content {
        padding: 18% 5% 1% 5%;
      }

      .swiper {
        height: clamp(220px, 28vh, 320px); 
        margin: 0 auto -15px auto; 
        padding: 0 8%;
      }

      .swiper-slide {
        width: clamp(220px, 32vw, 420px); 
      }
    }

    @media (max-width: 768px) {
      .hero {
        min-height: 80vh; 
      }

      .hero-content {
        padding: 20% 5% 5% 5%;
        top: auto;
      }

      .swiper {
        height: clamp(180px, 25vh, 250px); 
        margin-bottom: 10px;
        padding: 0 5%;
      }

      .swiper-slide {
        width: clamp(150px, 50vw, 300px);
        border-radius: 15px; 
      }

      .black-child {
        flex-direction: column;
        gap: 20px;
        width: 95%;
      }

      .black-section {
        padding: clamp(50px, 10vw, 100px) 0;
      }
    }

    @media (max-width: 480px) {
      .hero {
        min-height: 70vh; 
      }

      .hero-content {
        padding: 25% 5% 3% 5%;
      }

      .hero-content h1 {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
      }

      .hero-content p {
        font-size: 0.85rem;
        padding: 0 10px;
      }

      .swiper {
        height: clamp(150px, 20vh, 200px); 
        padding: 0 2%;
      }

      .swiper-slide {
        width: clamp(120px, 60vw, 250px); 
        border-radius: 10px;
      }

      .black-section h2 {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
      }

      .black-section p.bs-h2 {
        font-size: 0.9rem;
        padding: 0 20px;
      }

      .black-child {
        gap: 15px;
        width: 100%;
      }

      .bs-span {
        font-size: 0.5rem;
      }
    }

    /* بهبود برای landscape در موبایل */
    @media (max-height: 500px) and (orientation: landscape) {
      .hero {
        min-height: 100vh;
      }

      .hero-content {
        padding: 10% 5% 2% 5%;
      }

      .swiper {
        height: clamp(120px, 15vh, 150px);
      }
    }


       /* ----------------------------------------------------  hero section responsive end ---------------------------------------------------- */





   /* ----------------------------------------------------  grow section responsive start ---------------------------------------------------- */
  @media (max-width: 768px) {
    .slider-container { 
      width: 100%; 
      max-width: 1200px; 
      height: 400px;
    }
    .slide { 
      flex: 0 0 300px; 
      height: 400px; 
      margin: 0 5px; /* 10px کل فاصله (5px هر طرف) در موبایل */
    }
    .slide.middle { opacity: 1; }
    .slide.small { opacity: 0.4; }
    .slide-content h2 { font-size: 1rem; }
    .slide-content p { font-size: 0.8rem; }
  }
       /* ----------------------------------------------------  grow section responsive end ---------------------------------------------------- */



    /*----------------------------------------------------platform section start   ----------------------------------------------------*/

    /* ====== Responsive ====== */
    @media (max-width: 768px) {
      .platform-header {
        flex-direction: column;
      }
      .platform-header h1 {
        font-size: 1.8rem;
      }
      .platform-header p {
        width: 100%;
      }
    }


    /*----------------------------------------------------platform section end   ----------------------------------------------------*/


    /*---------------------------------------------------Ai section start   ----------------------------------------------------*/

 @media (max-width: 768px) {
      .cards-row-ai{ grid-template-columns: 1fr; }
      .video-box{ width:90%; height:220px; }

      .header-ai .h1-title{
        font-size:20px;
      }
    }


    .header-ai .h1-title{
        font-size: 32px;
        font-weight: 600;
        line-height: 30px;
        color: #000 !important;
    }

    /*---------------------------------------------------Ai section end   ----------------------------------------------------*/


    /*---------------------------------------------------domain section start   ----------------------------------------------------*/

 @media (max-width: 600px) {
      h1 {
        font-size: 2rem;
      }

      .trusted-text {
        font-size: 1.2rem;
      }
    }





    /*---------------------------------------------------domain section end   ----------------------------------------------------*/

     /*----------------------------------------------------accordian section start   ----------------------------------------------*/
    @media (max-width: 600px) {
      .accordion-content.open {
        padding-right: 20px;
      }
      .nested-accordion {
        width: 90%;
      }

          .accordion-header {

            font-size: 1rem;
          }
    }

     /*----------------------------------------------------accordian section end   ----------------------------------------------*/





/* ---------------------------------------------------circle section start   ---------------------------------------------- */
 @media (max-width: 768px) {
      .overlay h1 {
        font-size: 2rem;
      }
      .overlay p {
        font-size: 0.9rem;
      }
      .overlay button {
        padding: 10px 30px;
        font-size: 0.9rem;
      }

      #dotsCircle {
        width: 50%;
        height: 50%;
        display: block;
        border-radius: 50%;
      }
    }
/* ---------------------------------------------------circle section end   ---------------------------------------------- */





/*  =================== template responsive page start ======================== */
@media screen and (max-width: 1024px) {
  .part1-box-container{
    grid-template-columns: repeat(2, 48.5%) !important;
    gap: 20px !important;
  }

  .box-container{
    grid-template-columns: repeat(2, 48.5%) !important;
    gap: 20px !important;
  }

  .sidebar{
    position: relative !important;
    top: 0% !important;
    bottom: 20px !important;
    display: flex !important;
    width: 100% !important;
    height: 200px !important;
    /* background-color: red; */
  }
  .sidebar div{
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  .part1-box-container{
    grid-template-columns: repeat(1, 100%) !important;
    gap: 20px !important;
  }

  .box-container{
    grid-template-columns: repeat(1, 100%) !important;
    gap: 20px !important;
    border: 2px solid blue !important;
  }
}
/*  =================== template responsive page end ======================== */





/* ===================================================
   📱 Responsive footer Layout
=================================================== */

/* Tablet */
@media (max-width: 992px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-social-links {
    justify-content: center;
  }
}