/* =============================================
   Aquagenix Water Dynamics — Responsive CSS
   ============================================= */

/* --- Global responsive image fix (products page) --- */
img {
  max-width: 100%;
  height: auto;
}

.about_section img.img-thumbnail {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Navbar brand: constrain logo size --- */
.navbar-brand img {
  max-width: 45px;
  height: auto;
  vertical-align: middle;
}

.navbar-brand .brand-name {
  color: #007A8C;
  font-weight: 700;
  font-size: 15px;
  vertical-align: middle;
}

/* =============================================
   1300px — Large desktop
   ============================================= */
@media (max-width: 1300px) {
  .navbar-brand .brand-name {
    font-size: 14px;
  }
}

/* =============================================
   1120px — Small desktop / large laptop
   ============================================= */
@media (max-width: 1120px) {
  .navbar-brand .brand-name {
    font-size: 13px;
  }

  .custom_nav-container .navbar-nav .nav-item .nav-link {
    padding: 5px 14px;
  }
}

/* =============================================
   992px — Tablet (landscape)
   ============================================= */
@media (max-width: 992px) {
  .hero_area {
    min-height: auto;
  }

  .custom_nav-container .navbar-nav {
    padding-top: 15px;
    align-items: center;
  }

  .custom_nav-container .navbar-nav .nav-item .nav-link {
    padding: 5px 25px;
    margin: 5px 0;
  }

  .slider_section {
    padding: 75px 0;
  }
}

/* =============================================
   768px — Tablet (portrait) / large phone
   ============================================= */
@media (max-width: 768px) {
  .about_section .img-box {
    margin-top: 45px;
  }

  .contact_section {
    padding-bottom: 0;
  }

  .contact_section .heading_container {
    padding-left: 15px;
  }

  .contact_section .map_container {
    margin-top: 45px;
  }

  .contact_section .form_container {
    padding: 0 15px;
    margin: 0;
  }

  .client_section table {
    font-size: 13px;
  }
}

/* =============================================
   576px — Mobile (medium)
   ============================================= */


  .header_section .header_top .contact_nav a span {
    display: none;
  }

  .client_section table {
    font-size: 12px;
  }

  .client_section table td,
  .client_section table th {
    padding: 6px 4px;
  }

  .client_section .client_container {
    width: 100%;
  }

  .client_section .box {
    margin: 0;
  }

  .owl-nav {
    display: flex;
    justify-content: center;
    margin-top: 45px;
  }

  .client_section .owl-carousel .owl-nav .owl-prev,
  .client_section .owl-carousel .owl-nav .owl-next {
    position: unset;
    margin: 0 2.5px;
  }
}

/* =============================================
   480px — Mobile (small)
   ============================================= */
@media (max-width: 480px) {
  .slider_section .detail-box h1 {
    font-size: 2rem;
  }

  .track_section form {
    flex-direction: column;
    align-items: flex-start;
  }

  .track_section form input {
    width: 100%;
  }

  .track_section form button {
    padding: 10px 60px;
    margin-top: 10px;
  }

  .navbar-brand .brand-name {
    font-size: 11px;
  }

  .navbar-brand img {
    max-width: 36px;
  }
}

/* =============================================
   420px — Extra small phones
   ============================================= */
@media (max-width: 420px) {
  .service_section .box {
    flex-direction: column;
  }

  .service_section .box .img-box {
    justify-content: flex-start;
    margin-bottom: 15px;
  }

  .client_section table {
    font-size: 11px;
  }

  .client_section table td,
  .client_section table th {
    padding: 4px 3px;
  }
}

/* =============================================
   376px — Very small phones (iPhone SE, etc.)
   ============================================= */
@media (max-width: 376px) {
  .slider_section .detail-box h1 {
    font-size: 1.4rem;
  }

  .slider_section {
    padding: 50px 0;
  }

  .navbar-brand .brand-name {
    font-size: 10px;
  }

  .navbar-brand img {
    max-width: 30px;
  }
}

/* =============================================
   Min-width: 1200px — Large container override
   ============================================= */
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

/* =============================================
   Contact map — responsive height
   ============================================= */
@media (max-width: 768px) {
  .contact-map {
    height: 280px;
  }

  .product-img {
    height: 160px;
  }

  .project-img {
    height: 150px;
  }
}

/* =============================================
   Header top — 3 items wrap gracefully on tablet
   ============================================= */
@media (max-width: 768px) {
  .header_section .header_top .contact_nav {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* =============================================
   Header top — phone/email only on small screens
   ============================================= */
@media (max-width: 576px) {
  .header_section .header_top .contact_nav a:last-child {
    display: none;
  }
}

/* =============================================
   Product & project grids on mobile
   ============================================= */
@media (max-width: 576px) {
  .product-card,
  .project-card {
    margin-bottom: 16px;
  }

  .product-img {
    height: 180px;
  }

  .project-img {
    height: 160px;
  }
}

/* ===== Modern UI/UX Improvements ===== */
body{
    font-family: 'Inter', sans-serif;
    line-height:1.6;
}

/* Better container spacing */
.container{
    padding-left:20px;
    padding-right:20px;
}

/* Buttons */
.btn{
    border-radius:8px;
    padding:10px 18px;
    transition:all .3s ease;
}
.btn:hover{
    transform:translateY(-2px);
}

/* Cards */
.card, .service-box, .product-box{
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    transition:all .3s ease;
}
.card:hover, .service-box:hover, .product-box:hover{
    transform:translateY(-6px);
}

/* Images responsive */
img{
    max-width:100%;
    height:auto;
}

/* ===== Mobile Improvements ===== */
@media (max-width: 992px){

    .navbar-nav{
        text-align:center;
    }

    h1{
        font-size:28px;
    }

    h2{
        font-size:24px;
    }

    .hero-section{
        padding:60px 20px;
        text-align:center;
    }

    .hero-section img{
        margin-top:20px;
    }

    .section{
        padding:50px 0;
    }

}

/* Small devices */
@media (max-width: 576px){

    h1{
        font-size:24px;
    }

    h2{
        font-size:20px;
    }

    .btn{
        width:100%;
        margin-bottom:10px;
    }

    .navbar-brand img{
        max-height:40px;
    }

}