* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
 
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      color: #333;
      line-height: 1.6;
      background: #f8f9fa;
    }
  
     /* ================= contact-hero SECTION ================= */
.contact-hero{
  position:relative;
  height:320px;
  border-radius:20px;
  margin:10px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  margin-bottom: 25px;
  background:url('../images/factory_machinery.png') center/cover no-repeat;
}

.contact-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.55) 40%,
    rgba(0,0,0,0.2) 100%
  );
}

.contact-hero-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:none;
  padding:0 40px;
  display:flex;
  align-items:flex-end;
  gap:40px;
}

.contact-hero h1{
  font-size:84px;
  font-weight:800;
  color:#fff;
  font-style: italic;
  margin-bottom: 10px;
  letter-spacing:1px;
  white-space:nowrap;
}

.contact-hero p{
  font-size:18px;
  color:rgba(255,255,255,0.85);
  line-height:1.4;
  max-width:420px;
  margin-bottom:40px;
}
    /* ================= MAIN CONTENT ================= */
    .main-content {
      max-width: 1400px;
      margin: -50px auto 0;
      padding: 0 40px 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      position: relative;
      z-index: 2;
    }
 
    /* ================= CONTACT FORM ================= */
    .contact-form-section {
      background: white;
      padding: 50px;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
 
    .contact-form-section h2 {
      font-size: 32px;
      margin-bottom: 35px;
      color: #076FD2;
      font-style: italic;
    }
 
    .form-group {
      margin-bottom: 25px;
    }
 
    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #076FD2;
      font-style: italic;
    }
 
    .form-group label .required {
      color: #e53e3e;
      margin-left: 3px;
    }
 
.form-group input,
.form-group select,
.form-group textarea{
width: 100%;
      padding: 14px 16px;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      font-size: 15px;
      font-family: inherit;
      transition: all 0.3s;
      background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:#076FD2;
  font-style: italic;
  box-shadow:0 0 0 3px rgba(7,111,210,0.15);
}
 
    .form-group textarea {
      resize: vertical;
      min-height: 140px;
    }
 
    .submit-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 9px 7px 20px;
  border-radius:40px;
  background:#076FD2;
  color:white;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  overflow:hidden;
  border:none;
  transition:background 0.3s, gap 0.3s;
}

/* HOVER */
.submit-btn:hover{
  background:#0658A9;
  gap:16px;
  font-style: italic;
}

/* TEXT WRAPPER */
.submit-btn .btn-text{
  position:relative;
  overflow:hidden;
  height:1.2em;
  display:flex;
  flex-direction:column;
}

/* BOTH TEXTS */
.submit-btn .btn-text span{
  display:block;
  line-height:1.2em;
  transition:transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* SECOND TEXT (hidden below) */
.submit-btn .btn-text span:last-child{
  position:absolute;
  top:100%;
  left:0;
}

/* HOVER ANIMATION */
.submit-btn:hover .btn-text span:first-child{
  transform:translateY(-100%);
}

.submit-btn:hover .btn-text span:last-child{
  transform:translateY(-100%);
}

/* ICON */


/* ICON HOVER */
.submit-btn:hover i{
  transform:rotate(0deg);

}
 
    .submit-btn i {
      width:64px;
  height:34px;
 
  
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  flex-shrink:0;
  transform:rotate(-45deg);
  transition:transform 0.3s ease, background 0.3s;
    }
 
    
 .success-message{
  display:none;
  background:#e6f4ea;
  color:#1e7e34;
  padding:12px 16px;
  border-radius:10px;
  margin-bottom:10px;
   margin-top:20px; 
  font-size:14px;
  align-items:center;
  gap:8px;
}

.success-message.show{
  display:flex;
  
}


    /* ================= CORPORATE OFFICES ================= */
    .corporate-offices {
      background: white;
      padding: 50px;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
 
    .corporate-offices h2 {
      font-size: 32px;
      margin-bottom: 35px;
      color: #076fd2;
      font-style: italic;
    }
 
    .office-card {
      margin-bottom: 40px;
    }
 
    .office-card:last-child {
      margin-bottom: 0;
    }
 
    .office-card h3 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 5px;
      color: #076fd2;
      font-style: italic;
    }
 
    .office-card .subtitle {
      font-size: 13px;
      color: #666;
      margin-bottom: 20px;
    }
 
    .office-card h4 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #333;
    }
 
    .office-card p {
      font-size: 14px;
      color: #555;
      margin-bottom: 5px;
      line-height: 1.7;
    }
 
    .map-container {
      margin-top: 15px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #e2e8f0;
      height: 280px;
      position: relative;
      background: #f0f0f0;
    }
 
    .map-container iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
 
    .open-maps-btn {
      position: absolute;
      top: 12px;
      left: 12px;
      background: white;
      border: none;
      padding: 8px 14px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 600;
      color: #0066cc;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      z-index: 10;
      transition: all 0.3s;
    }
 
    .open-maps-btn:hover {
      background: #0066cc;
      color: white;
    }
 
    /* ================= REGISTERED OFFICE ================= */
    .registered-office {
      max-width: 1400px;
      margin: 0 auto 80px;
      padding: 0 40px;
    }
 
    .registered-office-card {
      background: white;
      padding: 40px 50px;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
 
    .registered-office h2 {
      font-size: 28px;
      margin-bottom: 20px;
      color: #076fd2;
      font-style: italic;
    }
 
    .registered-office h3 {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 15px;
      color: #333;
    }
 
    .registered-office p {
      font-size: 14px;
      color: #555;
      margin-bottom: 8px;
      line-height: 1.7;
    }