:root{
  --brand:#0b4f8a;
  --brand-dark:#093d6a;
  --bg:#f6f9fc;
  --text:#1f2937;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:sans-serif}
body{background:var(--bg);color:var(--text);line-height:1.6}
img{max-width:100%;display:block}

/* Header */
.header{
  position:fixed;top:0;left:0;right:0;height:60px;
  background:var(--brand);color:#fff;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 16px;z-index:999;
}
.header .logo{display:flex;align-items:center;text-decoration:none;color:#fff;gap:8px}
.header .logo img{width:38px;height:38px;border-radius:6px}
.header .currency{display:flex;align-items:center;gap:6px}
.header .currency img{width:22px;height:16px}
body{padding-top:70px}

/* Hero */
.hero{background:linear-gradient(135deg,#eaf4ff,#f9fbff);padding:60px 20px;text-align:center}
.hero h1{font-size:28px;color:var(--brand);margin-bottom:10px}
.hero p{max-width:700px;margin:0 auto}

/* Section */
.section{padding:40px 20px;max-width:1000px;margin:auto}
.section h2{text-align:center;margin-bottom:20px;color:var(--brand)}
.section p{text-align:center}

/* Grid 2 */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.card h3{margin-bottom:8px;color:var(--brand)}

/* ===== Team Section Style ===== */
.team-section {
  text-align: center;
  padding: 50px 20px;
  background: #f9f9f9;
}

.team-section h2 {
  font-size: 30px;
  margin-bottom: 30px;
  color: #0b4f8a;
  font-weight: 600;
}

.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  justify-items: center;
}

.team-member {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.team-member:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.team-member img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

/* Team Info */
.team-info {
  padding: 15px;
}

.team-info h4 {
  margin: 10px 0 5px;
  color: #0b4f8a;
  font-size: 18px;
}

.team-info p {
  color: #555;
  font-size: 14px;
  margin: 0;
}

/* Overlay for Social Links */
.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(11, 79, 138, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.team-member:hover .overlay {
  opacity: 1;
}

/* Social Icons */
.overlay a {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0b4f8a;
  font-size: 18px;
  text-decoration: none;
  transition: 0.3s;
}

.overlay a:hover {
  background: #083b66;
  color: #fff;
}



/* Quick Contact */
.quick-contact{background:#fff;padding:40px 20px;margin:20px auto;max-width:1000px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,0.06)}
.quick-contact h2{text-align:center;margin-bottom:20px;color:var(--brand)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-info p{margin:8px 0;font-size:15px}
.contact-form{display:flex;flex-direction:column;gap:12px}
.contact-form input,.contact-form textarea{padding:12px;border:1px solid #ccc;border-radius:8px;font-size:14px}
.contact-form button{padding:12px;background:var(--brand);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer}
.contact-form button:hover{background:var(--brand-dark)}

/* Footer */
.footer{background:var(--brand);color:#fff;text-align:center;padding:20px;margin-top:20px}

/* Responsive */
@media(max-width:768px){
  .grid-2{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero h1{font-size:22px}
}
/* Responsive */
@media (max-width: 600px) {
  .team-member img {
    height: 220px;
  }
  }