/* General structure (applies from 320px and above) */
@media (min-width: 320px) {
    #site-header .container {
      display: block !important;
    }
  }
  
  /* Large screens (min-width 991px) */
  @media (min-width: 991px) {
    .contact-form-wrap {
      padding: 0 5% !important;
    }
  }
  
  /* Screens below 991px */
  @media (max-width: 991px) {
    .team_grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
  
    .modal-content-section {
      margin-left: 25px !important;
      margin-top: 10px !important;
      width: 100% !important;
    }
  
    .modal-img {
      width: 50% !important;
    }
  }
  
  /* Screens below 800px */
  @media (max-width: 800px) {
    .team_grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
  
    /* .modal-content {
      display: block !important;
    } */
  
    .modal-content-section {
      margin-left: 0 !important;
      margin-top: 10px !important;
      width: 100% !important;
    }
    .modal-content-inner-section
    {
    overflow-y: scroll !important;
    width: 100% ;
    display: block;
    height: 100%;
  }
  
    .modal-img {
      width: 50% !important;
    }
  }
  
  /* Screens below 768px (Tablet and smaller) */
  @media (max-width: 768px) {
    .case-studies .category-posts {
      border-right: none !important;
      padding-right: 0 !important;
    }
  
    .case-studies.content-wrapper {
      flex-direction: column !important;
    }
  
    .category-posts, 
    .sidebar {
      flex: 1 1 100% !important;
    }
  
    .sidebar {
      order: 2 !important;
    }
  
    .content-area, 
    .content-left-sidebar .content-area {
      width: 100% !important;
    }
  
    .grid-container {
      display: block !important;
      grid-template-columns: repeat(1, 1fr) !important;
    }
  }
  
  /* Screens below 500px */
  @media (max-width: 500px) {
    .team_grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 20px;
    }
  }
  
  /* Screens below 480px (Mobile smallest screens) */
  @media (max-width: 480px) {
    .team_grid {
      grid-template-columns: repeat(1, 1fr) !important;
      gap: 20px;
    }
  
    .modal-content {
      display: block !important;
    }
  
    .modal-content-section {
      margin-top: 10px !important;
      margin-left: 0 !important;
      width: 100% !important;
    }
  
    .modal-img {
      height: 350px !important;
      border-radius: 20px;
      overflow: hidden;
      width: 100% !important;
    }
  }