/* =========================
   1. GLOBAL RESET & BASE
   ========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

body {
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

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

/* =========================
   2. HEADER
   ========================= */
header {
  background-color: #004080;
  color: white;
  padding: 20px;
  text-align: center;
}

header h1 {
  font-size: 2rem;
  margin-bottom: 5px;
}

header p {
  font-size: 1rem;
  opacity: 0.9;
}

/* =========================
   3. NAVIGATION BAR
   ========================= */
nav {
  background-color: #003366;
  padding: 10px;
  text-align: center;
}

nav .nav-link {
  color: white;
  padding: 14px 20px;
  font-size: 1rem;
  margin: 0 10px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.3s, border-bottom 0.3s;
  font-weight: bold;
}

nav .nav-link.active {
  border-bottom: 3px solid #0077cc;
  color: #0077cc;
}

nav .nav-link:hover {
  color: red;
}

/* =========================
   4. HOMEPAGE / INTRO SECTION
   ========================= */
.intro {
  padding: 40px 20px;
  text-align: left;
  background: linear-gradient(135deg, #ffffff, #e0f7fa);
  border-radius: 15px;
  margin: 20px auto;
  max-width: 1000px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.intro h2 {
  color: #004080;
  font-size: 2rem;
  margin-bottom: 10px;
}

.intro p {
  font-size: 1.1rem;
}

/* =========================
   4.1 ABOUT SECTION
   ========================= */

.about-section {
  background: linear-gradient(135deg, #ffffff, #e0f7fa);
  padding: 40px;
  border-radius: 15px;
  margin: 40px auto;
  max-width: 1000px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.about-section:hover {
  transform: scale(1.01);
}

.about-section h2 {
  font-size: 2rem;
  color: #004080;
  margin-bottom: 15px;
}

.about-section p {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.6;
}

/* =========================
   4.2 CONTACT SECTION
   ========================= */
.contact-section {
  background: linear-gradient(135deg, #ffffff, #e0f7fa);
  padding: 40px;
  border-radius: 15px;
  margin: 40px auto;
  max-width: 1000px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.form-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.form-group-inline {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 220px;
}

.contact-section h2 {
  font-size: 2rem;
  color: #004080;
  margin-bottom: 15px;
}

.small-email input {
  width: 300%; /* You can set it to 200px, 50%, etc. */
  max-width: 300px; /* Optional: limit the maximum width */
  margin-right: 10px; /* Optional: space between inputs */
  flex: 1; /* Allow it to grow and shrink */
  box-sizing: border-box; /* Ensure padding and border are included in the width */
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
  height: 35px;
  padding: 5px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
   height: auto;
}

.iti {
  width: 100%;
}

.iti__selected-flag {
  background-color: #f3f3f3;
  border-radius: 5px;
}

/* =========================
   4.3 whyus SECTION
   ========================= */

   .whyus-section {
  background: linear-gradient(135deg, #ffffff, #e0f7fa);
  padding: 40px;
  border-radius: 15px;
  margin: 40px auto;
  max-width: 1000px;
  min-height: 200px; /* ✅ force it to have height */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.whyus-section:hover {
  transform: scale(1.01);
}

.whyus-section h2 {
  font-size: 2rem;
  color: #004080;
  margin-bottom: 15px;
}

.whyus-section p {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.6;
}

/* =========================
   5. PRODUCT LISTING GRID
   ========================= */
 .product {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
        }

.product-grid {
  display: grid;
  /* 3 cards ≥1000 px, 2 cards ≥600 px, 1 card below */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, background-color 0.2s;
}

.product-card:hover {
  transform: scale(1.03);
  background-color: #f9f9f9;
}

.product-card img {
  width: 100%;
  height: 180px;            /* same height for all thumbnails */
  object-fit: contain;      /* show entire image, no crop   */
  background: #fff;         /* nice backdrop in case of padding */
}

.product-card .product-details {
  padding: 15px;
}

.product-card .product-details h3 {
  color: #004080;
  margin-bottom: 8px;
  font-size: 1.15rem;
}

.product-card .product-details p {
  font-size: 0.95rem;
  opacity: 0.85;
}

/* =========================
   6. FOOTER
   ========================= */
footer {
  background-color: #004080;
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

/* =========================
   7. PRODUCT‐DETAILS PAGES
   (Any page with <body class="product-details">)
   ========================= */

/* Container adjustments */
body.product-details {
  padding: 20px;
  background-color: #f4f4f4;
}

/* The following empty ruleset was removed as it is not needed:
body.product-details header,
body.product-details nav,
body.product-details footer {
  // Keep same as global, no change needed
}
*/

/* Main product detail container */
body.product-details .product {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
  max-width: 800px;
  margin: 20px auto;
}

body.product-details .product h1 {
  color: #004080;
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-align: center;
}

body.product-details .product img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 5px;
}

/* Text paragraphs inside product details */
body.product-details .product p {
  font-size: 1rem;
  margin-bottom: 10px;
}

/* Back link styling */
body.product-details .product a {
  display: inline-block;
  margin-top: 15px;
  color: #0077cc;
  font-weight: bold;
  transition: color 0.2s;
}

body.product-details .product a:hover {
  color: #004080;
}

/* =========================
   8. RESPONSIVE TWEAKS
   ========================= */
@media (max-width: 480px) {
  header h1 {
    font-size: 1.6rem;
  }
  .intro h2 {
    font-size: 1.6rem;
  }
  .product-card img,
  body.product-details .product img {
    height: 150px;
  }
  body.product-details .product h1 {
    font-size: 1.5rem;
  }
   .product-grid {
    grid-template-columns: 1fr;
  }
  nav {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-link {
  display: block;
  margin: 5px 0;
  width: 100%;
}
}

textarea {
  width: 100%;
  /* auto height based on rows, but you can override: */
  height: 120px; /* for example */
  resize: vertical; /* allow user to drag-resize vertically */
}

/* Phone tweaks (≤600 px) */
/* @media (max-width: 600px) {
  header h1 { font-size: 1.6rem; }
  .intro h2 { font-size: 1.6rem; }
  /* Make thumbnails a bit shorter on very small screens */
/*   .product-card img { height: 140px; }
}  */ */

/* filter bar */
.product-filter {
  display: flex;
  gap: 14px;
  padding: 0 20px 10px;
  justify-content: flex-start;
}

.product-filter select {
  padding: 6px 10px;
  font-size: 0.95rem;
}

/* =========================
   9. LOGO
   ========================= */
.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.logo {
  width: 80px;      /* Adjust size as needed */
  height: auto;
}

.header-text h1,
.header-text p {
  text-align: left;
}