/* ==========================================================================
   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: 280px !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;
  }

  .section-headline {
    font-size: 8vw;
  }
}

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

@media (max-width: 576px) {
  .hour-card {
    height: 240px !important;
  }
}