/*==============================
   HEADER / NAVIGATION BAR STYLES
============================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

}

body {
  font-family: "Poppins", sans-serif;
}

/* HEADER BASE */
#site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* NAV CONTAINER */
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 25px;
}

/* LOGO */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.logo .mark {
  background: #007bff;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #222;
}

.brand-tag {
  font-size: 0.75rem;
  color: #666;
}

/* DESKTOP NAV LINKS */
.desktop-nav {
  display: flex;
  gap: 30px;
}

.desktop-nav a {
  position: relative;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: #007bff;
  transition: width 0.3s ease;
}

.desktop-nav a:hover {
  color: #007bff;
}

.desktop-nav a:hover::after {
  width: 100%;
}

/* HAMBURGER ICON */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 32px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger .bar {
  position: relative;
  width: 100%;
  height: 3px;
  background: #333;
  border-radius: 2px;
}

.hamburger .bar::before,
.hamburger .bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger .bar::before {
  top: -8px;
}

.hamburger .bar::after {
  top: 8px;
}

/* HAMBURGER ACTIVE STATE (X animation) */
.hamburger.active .bar {
  background: transparent;
}

.hamburger.active .bar::before {
  transform: rotate(45deg);
  top: 0;
}

.hamburger.active .bar::after {
  transform: rotate(-45deg);
  top: 0;
}

/* MOBILE MENU */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: all 0.4s ease;
}

.mobile-menu a {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #333;
  transition: background 0.3s ease;
}

.mobile-menu a:hover {
  background: #007bff;
  color: #fff;
}

/* MOBILE MENU ACTIVE */
.mobile-menu.active {
  display: flex;
  max-height: 400px;
  opacity: 1;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .desktop-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }
}

/* =========================
   GLOBAL RESET & BASE
========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont;
}

body{
  background:#f8fafc;
  color:#0f172a;
 
}


/* =========================
   PAGE WRAPPER
========================= */
.contact-page{
  max-width:1100px;
  margin:auto;
}

/* =========================
   SECTION TITLES (CENTER)
========================= */
.contact-page h2,
.contact-page h3{
  text-align:center;
  font-weight:700;
  margin-bottom:18px;
}

/* =========================
   HEADER
========================= */
.contact-header{
  padding:60px 20px 30px;
  text-align:center;
}

.contact-header p{
  color:#64748b;
}

/* =========================
   FORM SECTION (PREMIUM CARD)
========================= */
.contact-form-section{
  padding:40px 20px;
}

.contact-form{
  max-width:700px;
  margin:auto;
  background:#ffffff;
  padding:34px;
  border-radius:22px;
  box-shadow:0 30px 60px rgba(0,0,0,0.08);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  padding:15px;
  border-radius:12px;
  border:1px solid #cbd5f5;
  font-size:15px;
  transition:0.25s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.contact-form textarea{
  grid-column:1 / -1;
  resize:none;
}

.contact-form button{
  grid-column:1 / -1;
  padding:15px;
  background:#2563eb;
  color:#fff;
  border:none;
  border-radius:14px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:0.3s ease;
}

.contact-form button:hover{
  background:#1e40af;
}

/* Validation */
input:invalid,
select:invalid,
textarea:invalid{
  border-color:#ef4444;
}

/* Success message */
.form-success{
  display:none;
  margin-top:18px;
  padding:16px;
  background:#dcfce7;
  color:#166534;
  border-radius:14px;
  text-align:center;
  font-weight:600;
  animation:successFade 0.5s ease;
}

@keyframes successFade{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

/* =========================
   INFO CARDS
========================= */
.quick-contact,
.office-location,
.business-hours,
.department-contacts,
.privacy-consent,
.after-submit-info{
  background:#ffffff;
  margin:34px 20px;
  padding:32px;
  border-radius:22px;
  box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

.quick-contact a,
.privacy-consent a{
  color:#2563eb;
  text-decoration:none;
  font-weight:600;
}

.office-location iframe{
  margin-top:18px;
  border-radius:18px;
}

/* =========================
   STICKY WHATSAPP BUTTON
========================= */
.whatsapp-float{
  position:fixed;
  bottom:22px;
  right:22px;
  width:58px;
  height:58px;
  background:#25d366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  text-decoration:none;
  box-shadow:0 15px 30px rgba(0,0,0,0.35);
  z-index:999;
  transition:0.3s ease;
}

.whatsapp-float:hover{
  transform:scale(1.1);
}

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


@media (max-width:768px){

  .contact-form{
    grid-template-columns:1fr;
    padding:26px;
  }
}

/* =========================
   FULL WIDTH HERO SECTION
========================= */
.contact-hero{
  width:100vw;                      /* Full viewport width */
  min-height:300px;                 /* 👈 minimum 300px */
  height:60vh;                      /* Desktop height */
  
  margin-left:calc(-50vw + 50%);    /* Remove side gaps */
  margin-right:calc(-50vw + 50%);

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  display:flex;
  align-items:center;               /* Vertical center */
  justify-content:center;           /* Horizontal center */

  position:relative;
  overflow:hidden;
}

/* Dark overlay for readability */
.contact-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:1;
}

/* =========================
   HERO CONTENT (VERTICAL)
========================= */
.contact-hero-content{
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;            /* 👈 Vertical layout */
  align-items:center;
  justify-content:center;

  text-align:center;
  max-width:900px;
  padding:0 20px;
}

/* =========================
   HERO TEXT
========================= */
.contact-hero h1{
  font-size:42px;
  font-weight:800;
  color:#ffffff;
  margin-bottom:16px;
  line-height:1.2;
}

.contact-hero p{
  font-size:18px;
  color:#e5e7eb;
  margin-bottom:26px;
  max-width:720px;
}

/* =========================
   HERO BUTTON
========================= */
.hero-btn{
  display:inline-block;
  padding:14px 34px;
  background:#2563eb;
  color:#ffffff;
  text-decoration:none;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  transition:0.3s ease;
}

.hero-btn:hover{
  background:#1e40af;
  transform:translateY(-2px);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1024px){
  .contact-hero{
    height:60vh;
    margin-top:25px;
  }

  .contact-hero h1{
    font-size:34px;
  }
}

@media (max-width:768px){
  .contact-hero{
    height:auto;
    padding:60px 0;
  }

  .contact-hero h1{
    font-size:28px;
  }

  .contact-hero p{
    font-size:16px;
  }
}

@media (max-width:480px){
  .contact-hero h1{
    font-size:24px;
  }

  .hero-btn{
    padding:12px 24px;
    font-size:14px;
  }
}




/* =========================
   FOOTER SECTION
========================= */

.footer-section {
  background: #111;
  color: #fff;
  padding: 60px 20px 20px 20px;
  font-family: 'Arial', sans-serif;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: auto;
  align-items: start;
}

.footer-brand .mark {
  font-size: 2rem;
  font-weight: bold;
  color: #007bff;
}

.footer-brand .brand-name {
  font-size: 1.4rem;
  margin-top: 5px;
   color: #aaaaaa38;
}

.footer-brand small {
  color: #aaa;
  display: block;
  margin-top: 3px;
}

.footer-links h4,
.footer-contact h4,
.footer-social h4 {
  font-size: 1.15rem;
  margin-bottom: 15px;
  color: #fff;
}

.footer-links a {
  display: block;
  color: #aaa;
  text-decoration: none;
  margin-bottom: 8px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-links a:hover {
  color: #007bff;
  transform: translateX(3px);
}

.footer-contact p {
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #aaa;
  display: flex;
  align-items: center;
}

.footer-contact i {
  margin-right: 10px;
  color: #007bff;
  min-width: 20px;
  text-align: center;
}

.footer-social .social-icons {
  display: flex;
  align-items: center;
}

.footer-social .social-icons a {
  color: #aaa;
  font-size: 1.3rem;
  margin-right: 15px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social .social-icons a:hover {
  color: #007bff;
  transform: scale(1.2);
}

.footer-bottom {
  text-align: center;
  margin-top: 30px;
  border-top: 1px solid #222;
  padding-top: 15px;
  font-size: 0.9rem;
  color: #777;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-social .social-icons {
    justify-content: center;
    margin-top: 10px;
  }
  .footer-contact p {
    justify-content: center;
  }
}