/* assets/css/style.css - Main styles */
:root{--accent:#0b67d0;--dark:#0b1320;--muted:#64748b;--bg:#f8fafc}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; margin:0; color:var(--dark); background:var(--bg); -webkit-font-smoothing:antialiased}
a{color:inherit}
.header{display:flex;justify-content:space-between;align-items:center;padding:12px 28px;background:#fff;position:sticky;top:0;z-index:60;box-shadow:0 6px 18px rgba(12,20,30,0.06)}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:200px;height:auto;object-fit:contain}
.nav{display:flex;gap:18px;align-items:center}
.nav-item > a,
.nav-item a {font-weight: bold}
.nav-item{position:relative;padding:8px 10px;border-radius:6px}
.nav-item:hover{background:#f2f7ff}
.dropdown{position:absolute;left:0;top:44px;background:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(11,18,32,0.08);padding:8px;display:none;min-width:240px}
.nav-item:hover>.dropdown{display:block}
.nav-item a {text-decoration: none;}
.dropdown a{display:block;padding:8px 10px;border-radius:6px;color:var(--dark);font-size:15px}
.dropdown a:hover{background:#f2f9ff}
.dropdown a {text-decoration: none;}
.menu-toggle{display:none;cursor:pointer}
.menu-toggle span{display:block;width:24px;height:3px;background:var(--dark);margin:4px 0;border-radius:2px}

/* Container to keep content within a reasonable width, center it, and add vertical padding */
.container {
  max-width: 1200px; /* Adjust as needed */
  margin: 0 auto;
  padding: 40px 20px;
}

/* hero section: Set up text alignment */
.hero {
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center; /* Centers all inline/inline-block children, including text */
  background: #f7f9fc; /* Add a light background for context */
}

/* Main Heading (First Line) */
.hero h1 {
  /* Removed absolute positioning */
  font-size: 40px;
  color: #1e3a8a; /* Dark blue or your primary brand color */
  margin: 0 0 8px 0; /* Add bottom margin to separate from the lead text */
}

/* Lead Paragraph (Second Line) */
.hero p.lead {
  /* Removed absolute positioning */
  color: #333;
  font-size: 20px;
  margin: 0 0 30px 0; /* Add margin to separate from the image below */
}

/* Image Wrapper */
.MainImage {
  margin: 0 auto; /* Center the image container itself */
  max-width: 900px; /* Optional: Constrain the image width for better presentation */
}

/* Image */
.hero img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

/* Muted Paragraph (Third Line) */
.hero p.muted {
  /* Removed absolute positioning */
  color: #666;
  font-size: 16px;
  margin-top: 30px; /* Increased top margin for separation from the image above */
  font-style: italic;
}

/* Optional: for smaller screens */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 28px;
  }
  .hero p.lead {
    font-size: 16px;
  }
}

/* sections */
.section{padding:1px 6vw;background:transparent; margin: 1px 0;}
.container{max-width:1100px;margin:0 auto}
.section h2{font-size:22px;margin-bottom:2px; margin-top: 0px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:12px}
.tile{background:#fff;padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.04);min-height:120px;display:flex;flex-direction:column;justify-content:center}
.tile h3{margin:0 0 6px;font-size:16px}
.tile p{margin:0;color:var(--muted);font-size:14px}
.tile h3 {
    margin-top: 0;
    text-align: left;
}
.tile {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* contact/about split */
.split{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
.split .left,.split .right{flex:1 1 320px;background:#fff;padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.04)}
form input, form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef8;margin-bottom:10px;font-size:15px}
form button{background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;border:0;cursor:pointer;font-weight:600}

/* Styling for form elements, assume you have these */
.contact-container {
    /* Add styling for your form container */
    padding: 20px;
    border: 1px solid #ddd;
}

#status {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    display: block; 
}

/* Success Message Styling */
.success {
    background-color: #d4edda; /* Light green background */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb;
}

/* Error Message Styling */
.error {
    background-color: #f8d7da; /* Light red background */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb;
}

.submit-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* footer */
footer{background:#0a0b0c;color:#eff6fe;padding:18px 6vw;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
footer .left{font-size:14px}
footer a{color:#187aeb;margin-left:10px}

/* responsive */
@media (max-width:900px){
  .nav{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;flex-direction:column;padding:12px;border-top:1px solid #eef3ff}
  .nav.show{display:flex}
  .menu-toggle{display:block}
  .brand img{width:160px}
  .hero h1{font-size:22px}
  .three-steps{flex-direction:column;align-items:center}
}
/* About US */
/* Ensure the image is responsive */
.AboutUs img {
    /* 1. Make the image take up 100% of its parent container's width */
    width: 100%;
    
    /* 2. Prevent the image from ever exceeding its parent's width, 
          which is crucial for mobile devices. */
    max-width: 100%;
    
    /* 3. Maintain the image's original aspect ratio */
    height: auto; 
}