/* ------------ GOOGLE FONT (SINGLE SOURCE) ------------ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ------------ GLOBAL FONT ------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* ------------ RESET ------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




/* =========================
   NAVBAR
========================= */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 25px;
    background-color: #fff;
    position: relative;
    z-index: 100;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* =========================
   DESKTOP MENU
========================= */

.nav-menu {
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* =========================
   NAV LINKS (TEXT ONLY)
========================= */

.nav-link {
    font-size: 18px;
    font-weight: 500;
    color: #1E93AB;
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.nav-link:hover {
    color: #E62727;
}

/* =========================
   DROPDOWN
========================= */

.dropdown {
    position: relative;
}

.dropdown > .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Dropdown arrow icon */
.dropdown-icon {
    font-size: 11px;
    transition: transform 0.3s ease;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
}

/* Dropdown menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    padding: 6px 0;
    min-width: 220px;
    background-color: #e4e2e2;
    border-radius: 8px;
    list-style: none;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;

    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown links */
.dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    color: #000;
    text-decoration: none;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

.dropdown-menu li a:hover {
    background-color: #1E93AB;
    color: #fff;
}

/* =========================
   CONTACT BUTTON
========================= */

.my-btn {
    padding: 12px 30px;
    background-color: #1E93AB;
    color: #fff;
    border: 2px solid #1E93AB;
    border-radius: 6px;
    cursor: pointer;
    font-size: medium;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.my-btn:hover {
    background-color: #E62727;
    border-color: #E62727;
}

/* =========================
   FONT AWESOME ICON FIX
========================= */

.fa,
.fas,
.far,
.fab,
i {
    font-family: "Font Awesome 6 Free";
    font-weight: 300;
}



/* ------------ MOBILE MENU ------------ */

/* Hide icon on desktop */
.menu-icon {
    display: none;
    font-size: 22px;
    cursor: pointer;
    color: #1E93AB;
}

/* Mobile View */
@media(max-width: 768px) {

    /* Show menu icon in mobile */
    .menu-icon {
        display: block;
    }

    .desktop-btn {
        display: none;
    }

    .nav-menu {
        position: absolute;
        top: 70px;
        right: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 20px 0;
        display: none;
        box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
    }

    .nav-menu.active {
        display: block;
    }

    .nav-menu li {
        padding: 10px 0;
        text-align: center;
    }

    /* Dropdown inside mobile */
    .dropdown-menu {
        position: relative;
        width: 100%;
        display: none;
        box-shadow: none;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* Extra safety — force hide icon on desktop */
@media (min-width: 769px) {
    .menu-icon {
        display: none !important;
    }
}


/* ------------ COVER BANNER ------------ */
.cover-banner {
    width: 100%;
    min-height: 600px;
    padding: 20px;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url('images/cover.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ------------ BANNER CONTENT ------------ */
.banner-content h1 {
    font-size: 38px;
    color: #5be4ff;
    line-height: 1.3;
    padding-bottom: 20px;
}

.banner-content p {
    color: #ffffff;
    font-size: 18px;
    max-width: 1000px;
    margin-top: 20px;
}

/* ------------ BOOKING FORM ------------ */
.booking-form {
    display: flex;
    gap: 15px;
    margin-top: 45px;
    flex-wrap: wrap;
    justify-content: center;
}

.input-group {
    position: relative;
    width: auto;
}

.icon {
    position: absolute;
    top: 20px;
    left: 14px;
    transform: translateY(0);
    color: #E62727;
    font-size: 18px;
}


.input-field {
    padding: 14px 15px 14px 45px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    min-width: 250px;
    outline: none;
    transition: 0.3s;
    background-color: #fff;
}

.input-field:focus {
    border-color: #1e93ab;
    box-shadow: 0 0 6px rgba(30,147,171,0.4);
}

/* BUTTON */
.book-btn {
    padding: 12px 30px;
    background-color: #1e93ab;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
    width: 250px;
    height: 50px;
    font-weight: 600;
}

.book-btn:hover {
    background-color: #E62727;
}


/* ======================================= */
/* RESPONSIVE DESIGN */
/* ======================================= */


/* -------- TABLETS & MOBILE (Below 768px) -------- */
@media (max-width: 768px) {

    .cover-banner {
        padding: 15px;
        text-align: center;
        align-items: center;
    }

    .banner-content h1 {
        font-size: 32px;
        padding: 0 10px;
    }

    .banner-content p {
        font-size: 22px;
        padding: 0 10px;
    }

    .booking-form {
        flex-direction: column;
        width: 100%;
        gap: 18px;
        padding: 0 10px;
    }

    .input-group,
    .input-field,
    .book-btn {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
}


/* -------- SMALL MOBILE (Below 480px) -------- */
@media (max-width: 480px) {

    .banner-content h1 {
        font-size: 26px;
        padding: 0 10px;
    }

    .banner-content p {
        font-size: 18px;
        padding: 0 10px;
    }

    .cover-banner {
        padding: 10px;
    }
}

/* ===============================
   COMMON SECTION STYLES
================================ */
.section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
}

.section h2 {
    color: #1e93ab;
    font-size: 28px;
    margin: 20px 0 40px;
    text-align: center;
}

/* Default paragraph style (for other sections) */
.section > p {
    max-width: 1000px;
    margin: 20px auto;
    text-align: center;
    line-height: 1.7;
    color: #000102;
}

/* ===============================
   WHY REFRIGERATOR SECTION (70 / 30)
================================ */
.why-fridge .why-content {
    display: grid;
    grid-template-columns: 7fr 3fr; /* 70% text, 30% image */
    gap: 40px;
    align-items: stretch;
}

/* Text column */
.why-fridge .why-text p {
    margin: 0 0 18px 0;
    text-align: left;
    line-height: 1.7;
    font-size: 15px;
    color: #000102;
}

/* Image column */
.why-fridge .why-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.why-fridge .why-image img:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}


/* ===============================
   MOBILE RESPONSIVE
================================ */
@media (max-width: 768px) {

    .why-fridge .why-content {
        grid-template-columns: 1fr;
    }

    .why-fridge .why-text p {
        text-align: center;
    }

    .why-fridge .why-image img {
        height: auto;
        max-width: 350px;
        margin: 25px auto;
        display: block;
    }

/* ===============================
   REFRIGERATOR TYPES GRID (3 + 2)
================================ */
.fridge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    max-width: 1000px;
    margin: 40px auto 0;
}

/* 3 + 2 layout */
.fridge-grid .card:nth-child(4) {
    grid-column: 1 / 2;
}

.fridge-grid .card:nth-child(5) {
    grid-column: 2 / 3;
}

/* Card design */
.card {
    background: #ffffff;
    padding: 28px 24px;
    border-radius: 14px;
    text-align: center;
    border: 1px solid #e6eef2;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
    border-color: #1e93ab;
}

.card h3 {
    color: #E62727;
    margin-bottom: 12px;
    font-size: 20px;
}

.card p {
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
}

/* ===============================
   RESPONSIVE FIX – MOBILE FIRST
================================ */

/* Tablet & below */
@media (max-width: 992px) {
  .service-layout {
    grid-template-columns: 1fr;
  }

  .service-boxes {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Mobile view – ONE BOX PER ROW */
@media (max-width: 576px) {

  .chennai-service-section {
    padding: 50px 15px;
  }

  .section-title {
    font-size: 26px;
  }

  .section-desc {
    font-size: 15px;
    margin-bottom: 40px;
  }

  /* STACK ALL BOXES */
  .service-boxes {
    grid-template-columns: 1fr;   /* ✅ one by one */
    gap: 20px;
  }

  /* CENTER EACH CARD */
  .feature-box {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 25px 18px;
  }

  .feature-box i {
    font-size: 34px;
  }

  .feature-box h4 {
    font-size: 16px;
  }

  .feature-box p {
    font-size: 14px;
  }

  /* AREAS COLUMN STACK */
  .areas-column {
    margin-top: 40px;
  }

  .areas-column h3 {
    text-align: center;
  }
}

    .fridge-grid {
        grid-template-columns: 1fr;
        max-width: 95%;
    }

    .fridge-grid .card:nth-child(4),
    .fridge-grid .card:nth-child(5) {
        grid-column: auto;
    }
}




.common-problems {
  padding: 60px 20px;
}

.problems-container {
  max-width: 1100px;          /* controls content width */
  margin: 0 auto;             /* 🔥 centers the section */
  display: flex;
  align-items: center;        /* vertical center */
  justify-content: center;    /* horizontal center */
  gap: 40px;
}

/* Image */
.problems-image {
  flex: 1;
  display: flex;
  justify-content: center;    /* center image inside */
}

.problems-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.problems-image img:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}

/* Content */
.problems-content {
  flex: 1;
}

/* UL styling */
.problems-content ul {
  max-width: 420px;          /* keeps list compact */
  margin: 0 auto;            /* 🔥 centers UL */
}


/* ===============================
   COMMON PROBLEMS – MOBILE FIX
================================ */
@media (max-width: 768px) {

  .common-problems {
    padding: 40px 15px;
  }

  .problems-container {
    flex-direction: column;     /* ✅ stack vertically */
    gap: 30px;
    text-align: left;
  }

  /* Image full width */
  .problems-image {
    width: 100%;
  }

  .problems-image img {
    max-width: 100%;
  }

  /* Content below image */
  .problems-content {
    width: 100%;
  }

  .problems-content ul {
    max-width: 100%;
    padding-left: 20px;
  }
}


.grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 🔥 3 columns */
  gap: 30px;
}

/* Card Styling */
.card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.card img {
  width: 220px;
  height: 80px;
  object-fit: contain;   /* 🔥 ensures full image is visible */
  border-radius: 10px;
  margin-bottom: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* ===============================
   GRID – MOBILE RESPONSIVE FIX
================================ */
@media (max-width: 768px) {

  .grid {
    grid-template-columns: 1fr;   /* ✅ one card per row */
    gap: 20px;
    padding: 0 15px;
  }

  .card {
    width: 100%;
  }

  .card img {
    width: 180px;                 /* slightly smaller for mobile */
    height: auto;
  }
}




/* SECTION */
.why-choose-section {
    padding: 60px 20px;
    background: transparent;
}

.why-container {
    max-width: 1200px;
    margin: auto;
}

/* FULL WIDTH HEADING */
.why-header h2 {
    text-align: center;
    color: #1e93ab;
    font-size: 32px;
    margin-bottom: 40px;
    animation: fadeDown 1s ease;
}

/* TWO COLUMN AREA */
.why-content {
    display: flex;
    align-items: left;
    gap: 40px;
}

/* LEFT TEXT */
.why-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;        /* ✅ left spacing adjusted */
    text-align: left;          /* ✅ left aligned */
    animation: slideLeft 1s ease;
}

/* STANDARD BULLETS */
.why-text ul {
    list-style: disc;
    list-style-position: outside;
    padding-left: 150px;        /* bullet indentation */
    margin: 0;
}

.why-text ul li {
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.6;
}

/* REMOVE TICK ICON COMPLETELY */
.why-text ul li::before {
    content: none;
}

/* RIGHT IMAGE */
.why-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: slideRight 1s ease;
}

.why-image img {
    max-width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: contain;      /* no cut */
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
    transition: transform 0.4s ease;
}

.why-image img:hover {
    transform: scale(1.05);
}

/* ANIMATIONS */
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .why-content {
        flex-direction: column;
        text-align: center;
    }

    .why-text {
        padding-left: 0;
        text-align: left;
    }

    .why-text ul {
        padding-left: 0;
        list-style-position: inside;
    }
}


/* SECTION */
.maintenance-section {
    padding: 60px 20px;
    background: transparent;
}

.maintenance-container {
    max-width: 1200px;
    margin: auto;
}

/* HEADING */
.maintenance-container h2 {
    text-align: center;
    color: #1e93ab;
    font-size: 32px;
    margin-bottom: 40px;
}

/* TWO COLUMN LAYOUT */
.maintenance-content {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* LEFT IMAGE */
.maintenance-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.maintenance-image img {
    max-width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;   /* no cut */
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.349);
}

.maintenance-image img {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.maintenance-image img:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}


/* RIGHT TEXT */
.maintenance-text {
    flex: 1;
}

.maintenance-text ul {
    list-style: disc;             /* ✅ standard bullets */
    list-style-position: outside;
    padding-left: 20px;
    margin: 0;
}

.maintenance-text ul li {
    font-size: 16px;
    margin-bottom: 14px;
    line-height: 1.6;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .maintenance-content {
        flex-direction: column;
        text-align: left;
    }

    .maintenance-text ul {
        list-style-position: inside;
        padding-left: 0;
    }
}


/* FAQ SECTION */
.faq-section {
  padding: 60px 20px;
}

/* CONTAINER */
.faq-container {
  max-width: 1100px;
  margin: auto;
  display: flex;
  gap: 50px;
  align-items: stretch;
}

/* LEFT IMAGE */
.faq-image {
  flex: 1;
  display: flex;
  align-items: center;
}

.faq-image img {
  width: 100%;
  height: 600px;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.faq-image img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.faq-image img:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}

/* RIGHT CONTENT */
.faq-content {
  flex: 1.2;
}

.faq-content h2 {
  color: #1e93ab;
  font-size: 28px;
  margin-bottom: 25px;
}

/* FAQ ITEM */
.faq-item {
  border-bottom: 1px solid #e0e0e0;
}

/* QUESTION */
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 16px 0;
  cursor: pointer;

  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 16px;
  font-weight: 600;
  text-align: left;
}

/* TEXT */
.faq-text {
  flex: 1;
  padding-right: 15px;
}

/* PLUS / MINUS ICON */
.icon {
  width: 28px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #1e93ab;
  font-family: Arial, Helvetica, sans-serif;
}

/* ANSWER */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-answer p {
  padding: 10px 0 15px;
  font-size: 15px;
  color: #0b6b85;
  line-height: 1.6;
}

/* ACTIVE */
.faq-item.active .faq-answer {
  max-height: 300px;
}

/* MOBILE */
@media (max-width: 768px) {
  .faq-container {
    flex-direction: column;
  }

  .faq-content h2 {
    text-align: center;
  }
}

/* PLUS / MINUS USING CSS */
.faq-question::after {
  content: "+";
  font-size: 28px;
  font-weight: bold;
  color: #1e93ab;
  margin-left: 15px;
  transition: transform 0.3s ease;
}

/* ACTIVE STATE = MINUS */
.faq-item.active .faq-question::after {
  content: "-";
}


.services-areas-section .features-row {
  display: flex;
}


/* HEADING */
.section-heading {
  font-size: 36px;
  color: #0b6b85;
  margin-bottom: 15px;
  padding-top: 40px;
  text-align: center;
}


/* PARAGRAPH */
.section-para {
  max-width: 1100px;
  margin: 0 auto 50px;
  font-size: 16px;
  text-align: center;
  color: #030000;
  line-height: 1.7;
}

/* FEATURE BOXES */
.features-row {
  display: flex;
  justify-content: center;
  gap: 70px;
  flex-wrap: wrap;
  margin-bottom: 70px;
}

.feature-box {
  width: 240px;
  padding: 30px 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.feature-box:hover {
  transform: translateY(-6px);
}

.feature-box i {
  display: flex;              /* 🔥 makes centering work */
  justify-content: center;    /* horizontal center */
  align-items: center;        /* vertical center */
  font-size: 40px;
  color: #E62727;
  margin: 0 auto 15px;        /* ✅ true center */
  width: 100%;
  font-size: 40px;
  color: #E62727;
  margin-bottom: 15px;
}



.feature-box h4 {
  font-size: 17px;
  margin-bottom: 10px;
}

.feature-box p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* AREAS SECTION */
.areas-section h3 {
  font-size: 28px;
  color: #1E93AB;
  margin-bottom: 25px;
}


/* ===============================
   MOBILE RESPONSIVE – FINAL FIX
================================ */
@media (max-width: 576px) {

  /* Section spacing */
  .chennai-service-section {
    padding: 50px 25px;   /* ✅ proper left & right space */
  }

  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Heading */
  .section-title {
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 12px;
    padding: 0 10px;
  }

  /* Paragraph */
  .section-desc {
    font-size: 15px;
    line-height: 1.7;
    padding: 0 10px;
    margin-bottom: 40px;
  }

  /* Layout stack */
  .service-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Feature boxes – one by one */
  .service-boxes {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .feature-box {
    padding: 25px 18px;
  }

  .feature-box i {
    font-size: 32px;
  }

  .feature-box h4 {
    font-size: 16px;
  }

  .feature-box p {
    font-size: 14px;
  }

  /* Areas column */
  .areas-column {
    padding: 25px 18px;
  }

  .areas-column h3 {
    font-size: 20px;
    text-align: center;
  }

  .areas-column ul {
    text-align: center;
  }

  .areas-column li {
    font-size: 14px;
  }
}


/* ==============================
   POPULAR AREAS SECTION
============================== */

.popular-areas-section {
  padding: 30px 0px;
  background: #ffffff;
  margin-top: 0px;
  padding-top: 0px;
}

.areas-heading {
  text-align: center;
  font-size: 32px;
  font-weight: 800;        /* ✅ Bold */
  letter-spacing: 0.5px; /* optional premium look */
  color: #1E93AB;
  margin-bottom: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.areas-heading i {
  color: #E62727;
  font-size: 40px;
}

/* Wrapper */
.areas-wrapper {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-bottom: 30px;
}

/* Column */
.area-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 30px;
  position: relative;
}

/* Vertical line */
.area-column:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: #E62727;
  
}

/* Area names */
.area-column span {
  font-size: 15px;
  color: #0c0000;
}


/* ==============================
   RESPONSIVE
============================== */

/* Tablet */
@media (max-width: 992px) {
  .areas-wrapper {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
  }

  .area-column::after {
    display: none;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .areas-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .area-column {
    padding: 10px 0;
  }
}

/* Mobile – icon above heading */
@media (max-width: 480px) {
  .areas-heading {
    flex-direction: column;   /* 🔥 icon goes on top */
    gap: 8px;
    text-align: center;
  }

  .areas-heading i {
    font-size: 36px;          /* optional: slightly smaller */
  }
}

/* ===== CONTACT ===== */
.contact-3col {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 50px 0;
}

.contact-box {
    width: 100%;
    max-width: 1350px;
    background: #0b6b85;
    border-radius: 12px;
    padding: 30px 70px;
    color: #E62727;
    display: flex;
    gap: 30px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}

/* Column */
.col {
    flex: 1;
}

/* FORM COLUMN */
/* Contact Section Wrapper */
.contact-3col {
    width: 100%;
    padding: 0;         /* No outside gap */
    margin: 0;
}

/* Main Box */
.contact-box {
    width: 100%;
    background: #0b6b85;
    border-radius: 0;                /* Optional */
    padding: 40px 70px;              /* LEFT & RIGHT = 70px */
    color: white;
    display: flex;
    gap: 30px;
}

/* Column layout */
.col {
    flex: 1;
}

/* Form + Info + Map Headings */
.form-col h1,
.info-col h1,
.map-col h1 {
    margin-bottom: 20px;
    font-size: 28px;
    color: white;
}

/* FORM STYLING */
.form-col input,
.form-col textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 1px solid #4c829b;
    background: #eaecf1;
    color: #4c829b;
}

/* Change placeholder color */
.form-col input::placeholder,
.form-col textarea::placeholder,
.form-col select::placeholder {
    color: #4c829b;   /* Change to any color you want */
    opacity: 1;    /* Ensure color is visible */
}

select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 1px solid #3A4253;
    background: #eaecf1;
    color: #4c829b;
}

.form-col textarea {
    height: 120px;
    resize: none;
    color: #4c829b;
}


/* CHANGE PLACEHOLDER COLOR (first option) */
.form-col select option[value=""] {
    color: #4c829b !important;   /* Placeholder color */
}

.form-col button {
    background: #E62727;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-size: 15px;
}

.form-col button:hover {
    background: #790707; /* darker red */
    transform: scale(1.03);
    transition: 0.3s;
}

/* INFO COLUMN */
.contact-title {
    padding-bottom: 20px;
    font-size: 26px;
}

/* Each text block */
.info-item {
    font-size: 18px;
    color: white;
    margin-bottom: 20px;
    line-height: 1.6;
}

.info-col {
    margin-left: 40px;
}
/* ICON STYLING */
.info-icon {
    font-size: 22px;
    margin-right: 10px;
    color: #E62727;
}

/* MAP COLUMN */
.map-col {
  width: 100%;
}

.map-title {
  padding-bottom: 20px;
  text-align: center;
}

.map-col iframe {
  width: 100%;
  height: 450px;
  border: 0;
  border-radius: 12px;
  display: block;        /* 🔥 REQUIRED */
}


/* Responsive */
@media(max-width: 900px) {
    .contact-box {
        flex-direction: column;
    }
}

/* CTA SECTION */
.cta {
  padding: 60px 20px;
  background: #f5fbfd;
}

/* HEADING */
.cta h2 {
  text-align: center;
  font-size: 30px;
  color: #1e93ab;
  margin-bottom: 40px;
}

/* CONTAINER */
.cta-container {
  max-width: 1100px;
  margin: auto;
  display: flex;
  gap: 40px;
  align-items: center;
}

/* IMAGE */
/* CTA IMAGE */
.cta-image {
  flex: 1;
  position: relative;
}

.cta-image img {
  width: 100%;
  border-radius: 18px;

  /* SHADOW */
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);

  /* ANIMATION */
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* HOVER EFFECT */
.cta-image img:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}


/* CONTENT */
.cta-content {
  flex: 1.2;
}

.cta-content p {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 20px;
  padding-left: 30px;
}

/* BUTTON */
.cta .btn {
  display: inline-block;
  padding: 14px 32px;
  background: #1e93ab;
  margin-left: 30px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 15px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.cta .btn:hover {
  background: #E62727;
}

/* MOBILE */
@media (max-width: 768px) {
  .cta-container {
    flex-direction: column;
    text-align: center;
  }

  .cta-content {
    text-align: center;
  }
}


/* ===== FOOTER ===== */
.footer {
  background: #000102;
  color: #d9d9d9;
  padding: 60px 0 20px;
}

/* Layout */
.footer-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* Columns */
.footer-col {
  flex: 1;
  min-width: 160px;
  margin-top: -20px;
}

/* Logo + About */
.footer-logo-img {
  width: 200px;
  margin-top: -10px;
  padding-left: 50px;
}

.footer-about-heading {
  color: #1E93AB;
  font-size: 18px;
  margin: 15px 0;
  padding-left: 50px;
}

.footer-about p {
  padding-left: 50px;
}

/* Headings */
.footer-heading {
  font-size: 18px;
  margin-bottom: 15px;
  color: #E62727;
}

/* Lists */
.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  color: #d9d9d9;
  text-decoration: none;
  transition: 0.3s;
}

.footer-col ul li a:hover {
  color: #1E93AB;
}

/* Quick links spacing */
.footer-col.quick-links {
  margin-left: 60px;
}

/* Contact info */
.contact-info p {
  margin-bottom: 12px;
  line-height: 1.6;
}

.contact-label {
  color: #1E93AB;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Bottom bar */
.footer-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 70px 0;
  margin-top: 30px;
  border-top: 1px solid #2c3e50;
}

.footer-bottom {
  font-size: 14px;
  color: #E62727;
}

/* Social Icons */
.social-icons a {
  margin-left: 10px;
  color: white;
  padding: 6px 8px;
  background: #E62727;
  border-radius: 5px;
  transition: 0.3s;
}

.social-icons a:hover {
  background: #1E93AB;
}

/* ===== MOBILE VIEW – PERFECT CENTER ALIGN ===== */
@media (max-width: 480px) {

  /* Footer base */
  .footer {
    padding: 40px 0 20px;
    text-align: center;
  }

  /* Container */
  .footer-container {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 0 15px;
  }

  /* Columns */
  .footer-col {
    width: 100%;
    min-width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  /* Logo */
  .footer-logo-img {
    width: 150px;
    margin: 0 auto 12px;
    padding: 0;
    display: block;
  }

  /* About heading & text */
  .footer-about-heading {
    padding: 0;
    margin: 10px 0;
    text-align: center;
  }

  .footer-about p {
    padding: 0;
    margin: 0 auto;
    max-width: 300px;
    line-height: 1.6;
  }

  /* Section headings */
  .footer-heading {
    text-align: center;
    margin-bottom: 12px;
  }

  /* Lists */
  .footer-col ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .footer-col ul li {
    margin: 6px 0;
  }

  .footer-col ul li a {
    display: block;
    text-align: center;
  }

  /* Remove desktop offset */
  .footer-col.quick-links {
    margin-left: 0;
  }

  /* Contact info */
  .contact-info p {
    margin-bottom: 10px;
    text-align: center;
  }

  .contact-label {
    justify-content: center;
  }

  /* Bottom bar */
  .footer-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 15px 0 0;
    text-align: center;
  }

  .footer-bottom {
    font-size: 13px;
    line-height: 1.6;
  }

  /* Social icons */
  .social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .social-icons a {
    margin: 0;
    padding: 8px 10px;
    font-size: 16px;
  }
}