/* ==========================================================================
   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: 768px) {
  .form-control{
    width: 100%!important;
  }
  .form-check-label{
    font-size: 0.8rem!important;
  }
    .hour-slider h5{
        font-size: 2.8rem!important;
    }
    .hour-card{
        height: 600px!important;
    }

    .slide-title{
             font-size: 2rem!important;
   
    }
    .slide-description, .slide-description-two{
        font-size: 2rem!important;
    }
    .slide-img {
    top: 50% !important;
    left: 10% !important;
    position: relative !important;
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    transition: all 1s 
ease !important;
}
    footer .text-end{
        text-align: unset!important;
    }
    
    footer .col-md-5{
        padding-top: 2rem;
        
    }
  
    .ps-5{
        padding-left: 1rem!important;
    }
    .contact h1{
        padding-top: 2rem!important;
    }
    .contact{
        padding-bottom: 1rem!important;
    }
    .hour-swiper .swiper-scrollbar-drag{
        width: 100px!important;
    }
 
    .trinity-slider h2{
        font-size: 2rem!important;
    }
    .coming-btn{
            transform: translate(4px, -26px);
    position: relative;
    }
    .down-broch{
        margin: 2rem 1rem!important;
    }
  .container {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}
 .coming .heading h1{
    font-size:5rem!important ;
  }
  .trinity-slider{
    overflow: hidden!important;
  }
  .coming .heading h4{
    transform: unset!important;
    position: relative!important;
    left: 0!important;
}
.coming .row{
    padding: 0 1rem!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;
  }
 

}

/* ==========================================================================
   EXTRA LARGE DEVICES (Large Desktops, 1200px and up)
   ========================================================================== */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    padding: 0 40px;
  }
  

}

/* ==========================================================================
   EXTRA EXTRA LARGE DEVICES (Large Desktops, 1400px and up)
   ========================================================================== */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
    padding: 0 48px;
  }
     .slide-img {
    top: 40%!important;
    max-width: 500px!important;
   }
  .trinity-slider{
    overflow: hidden!important;
  }
 
}

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

/* Ultra-wide screens (1600px+) */
@media (min-width: 1600px) {
  .container {
    max-width: 1500px;
  }
  
  .ultra-wide-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* ==========================================================================
   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) {
    .tri-icon-group .col-md-4{
        width: 100%;
    }
    .contact .ps5{
        padding-left: 1rem!important;
    }
    .form-control::placeholder{
        font-size: 1rem!important;
    }
    .trinity-slider h2{
        font-size: 2rem!important;
    }
   .trinity-slider{
    overflow: hidden!important;
   }
  .coming .heading h1{
    font-size:5rem!important ;
  }
.coming .heading h4{
    transform: unset!important;
    position: relative!important;
    left: 0!important;
}
.down-broch{
    margin: 4rem 2rem!important;
}
 .trinity-slider::after{
    right: 0!important;
  }
}
/* Mobile landscape */
@media (max-width: 767px) {

}


/* ==========================================================================
   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;
  }
}