/* ==========================================================================
   MODERN RESPONSIVE CSS MEDIA QUERIES
   ========================================================================== */

/* Base styles (Mobile First - 320px+) */

/* ==========================================================================
   BREAKPOINT VARIABLES (for reference)
   ========================================================================== */
/*
  xs: 0px (default - mobile first)
  sm: 576px (small devices)
  md: 768px (tablets)
  lg: 992px (laptops)
  xl: 1200px (desktops)
  xxl: 1400px (large desktops)
*/

/* ==========================================================================
   SMALL DEVICES (Landscape phones, 576px and up)
   ========================================================================== */
@media (max-width: 576px) {
  .container {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}
.icon-circle{
    width: 80px!important;
    height: 80px!important;
}
 
}

/* ==========================================================================
   MEDIUM DEVICES (Tablets, 768px and up)
   ========================================================================== */
@media (min-width: 768px) {
 
}

/* ==========================================================================
   LARGE DEVICES (Laptops/Desktops, 992px and up)
   ========================================================================== */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
    padding: 0 32px;
  }
  
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  

}

/* ==========================================================================
   EXTRA LARGE DEVICES (Large Desktops, 1200px and up)
   ========================================================================== */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    padding: 0 40px;
  }
  
  .grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 2.5rem;
  }
  

}

/* ==========================================================================
   EXTRA EXTRA LARGE DEVICES (Large Desktops, 1400px and up)
   ========================================================================== */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
    padding: 0 48px;
  }
  
  .grid {
    gap: 3rem;
  }
  
  .text-xxl-4xl {
    font-size: 2.25rem;
  }
}

/* ==========================================================================
   CUSTOM BREAKPOINTS
   ========================================================================== */

/* Ultra-wide screens (1600px+) */
@media (min-width: 1600px) {
  .container {
    max-width: 1500px;
  }

}

/* ==========================================================================
   DEVICE-SPECIFIC QUERIES
   ========================================================================== */

/* Tablets in portrait mode */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {


}

/* Tablets in landscape mode */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
   .bg_white.left_20{
    top:50%!important;
  }
   .requester-tag{
    font-size: 0.8rem!important;
  }
     .life-uae.section .space_overlay {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
  }
  .app-fea-list{
    width: 100%!important;
  }
  .bg_white.left_20{
    top:50%!important;
  }
  .service-requester-image img{
    weight: 100%!important;
  }
  .requester-tag4{
    bottom: 15%!important;
  }
  .requester-tag3{
    top: 60%!important;
  }
  .requester-tag1{
    top: 50%!important;
  }
  .requester-tag2{
    top: 36%!important;
    right: 0%!important;
  }
  .bg_white.left_20{
    top:35%!important;
  }
      .mob-hive {
        padding: 0 0 22rem !important;
    }
}

/* Mobile landscape */
@media (max-width: 767px) {
    .why-citybees p{
        font-size: 1.4rem !important;
        font-weight: 600 !important;
        letter-spacing:1px;
    }
    .why-grid h4{
        min-height:unset!important;
    }
    .core-values{
        padding:1rem 0!important;
    }
    .our-story-about-us .swiper{
        overflow:hidden!important;
    }
    .play_button_popup{
        margin-top:1rem;
    }
 .banner-item{
    margin-top: 3rem;
 }
 
 /* Main banner responsive fixes */
 .main-banner {
    height: 100vh;
 }
 
 .banner-wrapper {
    flex-direction: column;
 }
 
 .banner-item {
    flex: none;
    height: 33.33%;
    margin-top: 0;
 }
 
 .banner-content {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
 }
 
 .banner-content h2 {
    font-size: 1.5rem !important;
 }
 
 .middle_content_home {
    font-size: 1rem;
    padding: 0 15px;
 }
 .mob_content_home{
    text-align: center;
    align-content: center;
    padding-bottom: 1rem;
 }
  .app_buttons_home .apps{
    display: flex;
    padding-bottom: 3rem;
    padding-top: 1rem;
  }
 .app_buttons_home img{
    width: 50%;
 }
 .life-uae{
    padding: 3rem 0!important;
 }
 .life-uae.section .space_overlay{
    position: unset!important;
    padding-top: 3rem;
 }
 .app-features{
    background-position: right center!important;
 }
 .illustration-row .butterfly{
    display: none;
 }
 .features-badges{
    grid-template-columns: 1fr 1fr!important;
    margin-top: 0!important;
 }
 .features-badges{
    max-width: 100%;
    margin-bottom: 0!important;
 }
 .illustration-row{
    padding-top: 1rem;
    margin-bottom: unset!important;
 }
 .illustration-row .side-note{
    top: unset!important;
 }
 .home_partner, .home_requester{
    max-width: unset!important;
 }
 .hive-works{
    padding-top: 0!important;
    padding: 0 1rem!important;
 }
 .service-requester-section{
    padding: 3rem 0 0 !important;
 }
 .service-requester-text{
    padding: 1rem 0!important;
 }
 .join-hive .hive_bottom{
    top: 0;
 }
 .overlay_content_top{
    bottom: 10%!important;
 }
 .play_button_popup{
    top:80%!important;
 }
 .our-story-about-us h2.eyebrow{
    top: unset!important;
    padding-bottom: 1rem;
    position: relative!important;
    text-align: center!important;
 }
.mob-hive{
    padding: 0 0 20rem!important;
}
.jobs-kind-properties .card-content p{
    padding-left: 3rem;
}

}

/* ==========================================================================
   HIGH DPI / RETINA DISPLAYS
   ========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .retina-image {
    background-image: url('image@2x.jpg');
    background-size: contain;
  }
}

/* ==========================================================================
   PREFER REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}




/* ==========================================================================
   CONTAINER QUERIES (Modern browsers)
   ========================================================================== */
@container (min-width: 400px) {
  .card-responsive {
    display: flex;
    flex-direction: row;
  }
}

@container (min-width: 600px) {
  .card-responsive .content {
    flex: 1;
    padding: 2rem;
  }
}