

:root {
    --gold-dark: #b8860b;
    --gold-light: #ffd700;
    --vanilla-bg: #fffaf0;
    --icecream-pink: #ffd1dc;
    --icecream-mint: #c3f0ca;
    --soft-honey-tint: #fff3c4;
    --accent-coral: #ff6f61;
    --dark-bg: #2b1a0f;
    --text-light: #f5f5f5;
}



/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'poppins', sans-serif; }
body { background: var(--vanilla-bg); color: #333; }

/* Top Bar */
.top-bar {
    width: 100%;
    padding: 0.1rem 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 2000;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(5px);
    font-weight: bold;
    font-size: 16px;
}
/* DESKTOP / LAPTOP DEFAULT */
.top-row {
    display: flex;
    flex-direction: row;   /* ⭐ side by side */
    justify-content: center;
    align-items: center;
    gap: 150px;
}

.top-row img {
    height: 90px;
    width: auto;
    object-fit: contain;
}
.top-bar img {
    height: 90px;
    width: auto;
    filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.5));
}

.contact-info {
    font-weight: bold;
    font-size: 14px;
}
/* ================= FOOTER ================= */
.footer {
  background: linear-gradient(135deg, var(--dark-bg), var(--gold-dark));
  color: var(--text-light);
  padding: 20px 5%;
  margin-top: 0px;
}

/* ================= FOOTER CONTAINER ================= */
.footer-container {
  display: grid;
  /* ⭐ AUTO FIT - no scroll, auto adjust */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 22px;
  align-items: start;
}

/* ================= FOOTER BOX ================= */
.footer-box1 {
  display: flex;
  flex-direction: column;

  margin: 0;
  padding: 0;
}


/* ================= HEADINGS ================= */
.footer-box1 h3 {
  margin: 0 0 10px 0;
  color: var(--gold-light);
  font-size: 16px;
  
}

/* ================= TEXT ================= */
.footer-box1 p,
.footer-box1 li {
  margin: 30px 0 8px 0;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.7;
 
  /* ⭐ wrap text properly */
  word-wrap: break-word;
}


/* ================= FOOTER BOX ================= */
.footer-box2 {
  display: flex;
  flex-direction: column;

  margin: 0;
  padding: 0;
}

/* ================= HEADINGS ================= */
.footer-box2 h3 {
  margin: 0 0 10px 0;
  color: var(--gold-light);
  font-size: 16px;
   
}

/* ================= TEXT ================= */
.footer-box2 p,
.footer-box2 li {
  margin: 30px 0 8px 0;
  font-size: 20px;
  line-height: 0.5;
  /* ⭐ wrap text properly */
  word-wrap: break-word;
 
}

/* ================= LINKS ================= */
.footer-box2 a {
color:white;
text-decoration: none;

  font-weight: bold;
  font-size: 15px;
}

/* ================= FOOTER BOX ================= */
.footer-box3 {
  display: flex;
  flex-direction: column;
color:white;
  margin: 0;
  padding: 0;
}

/* ================= HEADINGS ================= */
.footer-box3 h3 {
  margin: 0 0 10px 0;
  color: var(--gold-light);
  font-size: 16px;
 
}

/* ================= TEXT ================= */
.footer-box3 p,
.footer-box3 li {
  margin: 40px 0 0px 0;
  font-size: 15px;
  font-weight: bold;
  line-height: 0.5;

  /* ⭐ wrap text properly */
  word-wrap: break-word;
}


/* ================= FOOTER BOX ================= */
.footer-box4 {
  display: flex;
  flex-direction: column;
color:white;
  margin: 0;
  padding: 0;
}

/* ================= HEADINGS ================= */
.footer-box4 h3 {
  margin: 0 40px 10px 0;
  color: var(--gold-light);
  font-size: 16px;
   
}

/* ================= TEXT ================= */
.footer-box4 p
 {
  margin: 30px 0 0px 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
 
  /* ⭐ wrap text properly */
  word-wrap: break-word;
}
.footer-box4 li {
  margin-top: 60px;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
}
/* ================= EMAIL ================= */
.footer-box4 .email-link {
  color: var(--gold-light);
font-size: 13px;
}

/* ================= FOOTER BOX ================= */
.footer-box5 {
  display: block;
  flex-direction: column;

  padding: 0;
}

/* ================= LIST ================= */
.footer-box5 ul {
  padding-left: 18px;
  margin: 0;
}

/* ================= EMAIL ================= */
.email-link {
  color: var(--gold-light);
  font-size: 14px;
}

/* ================= IFRAME ================= */
.footer-box5 iframe {
  width: 220px;
  height: 200px;
margin-right: auto;  

  margin-top:10px;
  border: 0;
  border-radius: 10px;
  display: block;
  right: -50px;
}

/* ================= HEADINGS ================= */
.footer-box5 h3 {
  margin: 0 0 10px 0;
  color: var(--gold-light);
  font-size: 16px;
 
}

/* ================= TEXT ================= */
.footer-box5 p,
.footer-box5 li {
margin-top: 10px;

  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  /* ⭐ wrap text properly */
  word-wrap: break-word;
  
}


/* ================= FOOTER BOX ================= */
.footer-box5 {
  display: flex;
  flex-direction: column;

  margin-bottom: 30px;
  padding: 0;
}

 /*================= LINKS ================= */
.footer-box5 a {
  text-decoration: none;
 color: var(--text-light);
  font-size: 15px;
  font-weight: bold;


}
.footer-box5 a:hover {
  color:var(--accent-coral);
}


/* ================= FOOTER BOX ================= */
.footer-box6 {
  display: flex;
  flex-direction: column;

  margin: 0;
  padding: 0;
}
 /*================= LINKS ================= */
.footer-box6 a {
 
text-decoration: none;
 color: var(--text-light);
  font-size: 15px;
  font-weight: bold;


}

.footer-box6 a:hover {
  color:var(--accent-coral);
}
/* ================= HEADINGS ================= */
.footer-box6 h3 {
  margin: 0 0 10px 0;
  color: var(--gold-light);
  font-size: 16px;
  
}

/* ================= TEXT ================= */
.footer-box6 p,
.footer-box6 li {
margin-top: 30px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
margin-left: auto;  /* RIGHT PUSH */
 
  /* ⭐ wrap text properly */
  word-wrap: break-word;
}

/* ================= IFRAME ================= */
.footer-box6 iframe {
  width: 220px;
  height: 200px;

  margin-top:10px;
  border: 0;
  border-radius: 10px;
  display: block;
}
.footer-box:nth-child(6){
  margin-left: 60px;
}


/* ================= HEADINGS ================= */
.footer-box h3 {
  margin: 0 0 10px 0;
  color: var(--gold-light);
  font-size: 16px;
  
}

/* ================= TEXT ================= */
.footer-box p,
.footer-box li {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
 
  /* ⭐ wrap text properly */
  word-wrap: break-word;
}
/* ================= SOCIAL ================= */
.social-icons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;   /* ⭐ prevents overflow */
}

.social-icons img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
    display: inline-block;
align-items: center;
}

/* ================= SOCIAL ================= */
.social-icons:hover {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;   /* ⭐ prevents overflow */
  transform-origin: center;   /* IMPORTANT */

}

.social-icons img:hover {
  width: 30px;
  height: 30px;
  border-radius: 50%;

    transform: scale(1.4);

}

/* ================= FOOTER BOTTOM ================= */
.footer-bottom {
  text-align: center;
  margin-top: 30px;
  border-top: 1px solid var(--gold-dark);
  padding-top: 15px;
  font-size: 0.85rem;
  color: var(--soft-honey-tint);
  font-weight: bold;
}
.footer-bottom a {
  color: var(--soft-honey-tint);

}
.footer-bottom .company-name:hover
{
    color: var(--accent-coral);

}
/* =====================================================
   SAFE RESPONSIVE OVERRIDES (DO NOT EDIT ORIGINAL CSS)
   Paste ONLY at the END of your CSS file
===================================================== */
@media (max-width: 600px) {

  /* ================= TOP BAR ================= */
  .top-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 2%;
    gap: 6px;
  }

  /* 🔥 LINE 1: LOGOS HORIZONTAL */
  .top-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 6px;
    width: 100%;

    flex-wrap: nowrap;
  }

  .top-row img {
    height: 32px;
    width: auto;
    max-width: 100%;
  }

  /* 🔥 LINE 2: CONTACT FULL WIDTH */
  .contact-info {
    width: 100%;
    text-align: center;
    font-size: 10px;
    line-height: 1.3;
    margin-top: 4px;

    word-break: break-word;
  }

  /* ================= FOOTER ================= */
  .footer-container {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .footer-box1,
  .footer-box2,
  .footer-box3,
  .footer-box4,
  .footer-box5,
  .footer-box6 {
    align-items: center;
  }

  .footer-box5 iframe,
  .footer-box6 iframe {
    width: 100%;
    max-width: 240px;
    height: 160px;
    text-align: center;
  }
}

/* ================= 600px - 899px (TABLET) ================= */
@media (min-width: 600px) and (max-width: 899px) {

  .top-bar {
    flex-direction: column !important;
    text-align: center !important;
  }

  .top-row {
    flex-direction: row !important;
    gap: 15px !important;
  }

  .top-row img {
    height: 55px !important;
  }

  .contact-info {
    font-size: 12px !important;
  }

}


/* ================= 900px - 1199px (SMALL LAPTOP / TABLET LANDSCAPE) ================= */
@media (min-width: 900px) and (max-width: 1199px) {

  .top-row {
    gap: 40px !important;
  }

  .top-bar img {
    height: 65px !important;
  }

}


/* ================= 1200px - 1365px (LAPTOP FIX LAYER) ================= */
@media (min-width: 1200px) and (max-width: 1365px) {

  .top-row {
    gap: 80px !important;
  }

  .top-bar img {
    height: 80px !important;
  }

  .contact-info {
    font-size: 13px !important;
    white-space: nowrap !important;
  }

}


/* ================= 1366px+ (DESKTOP FINAL SAFETY) ================= */
@media (min-width: 1366px) {

  .top-row {
    gap: 150px !important;
  }

  .top-bar img {
    height: 90px !important;
  }

}



/* ================= 900 - 1366px CLEAN FIX (BOX 5 & 6 MAP PERFECT INLINE) ================= */
@media (min-width: 900px) and (max-width: 1366px) {

  .footer-container {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px;
    align-items: start;
  }

  /* ================= TEXT FIX ================= */
  .footer-box1 p,
  .footer-box2 p,
  .footer-box3 p,
  .footer-box4 p,
  .footer-box5 p,
  .footer-box6 p,
  .footer-box1 li,
  .footer-box2 li,
  .footer-box3 li,
  .footer-box4 li,
  .footer-box5 li,
  .footer-box6 li {
    font-size: 13px;
    line-height: 1.6 !important;
  }

  /* ================= MAP INLINE FIX (IMPORTANT PART) ================= */
  .footer-box5 iframe,
  .footer-box6 iframe {
    width: 100% !important;
    max-width: 200px;   /* balanced like original */
    height: 170px;      /* clean single-line look */
    display: block;
    margin: 10px auto 0 auto;
    border-radius: 10px;
  }

  /* prevent stretching issues */
  .footer-box5,
  .footer-box6 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* prevent overflow */
  .footer-box1,
  .footer-box2,
  .footer-box3,
  .footer-box4,
  .footer-box5,
  .footer-box6 {
    min-width: 0;
  }
}