/* Base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Poppins',sans-serif; line-height:1.6; color:#1e293b; background:#fff; }
a { text-decoration:none; color:inherit; }

/* Utilities */
.container { max-width:1200px; margin:auto; padding:0 1rem; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.center { text-align:center; }
.mt { margin-top:2rem; }
.small { font-size:0.8rem; color:#ccc; }
.grid { display:grid; gap:2rem; grid-template-columns:1fr 1fr; align-items:center; }
.grid-2 { display:grid; gap:2rem; grid-template-columns:1fr 1fr; align-items:center; }
.grid-3 { display:grid; gap:2rem; grid-template-columns:repeat(3,1fr); }
.grid-4 { display:grid; gap:2rem; grid-template-columns:repeat(4,1fr); }
.img-center { text-align:center; }
.section { padding:4rem 0; }
.teal { background:#0f766e; color:#fff; }

/* Header */
.header { position:sticky; top:0; background:#fff; color:#1e3a8a; padding:1rem; box-shadow:0 2px 6px rgba(0,0,0,.1); z-index:1000; }
.header .logo { display:flex; align-items:center; gap:0.5rem; font-weight:bold; font-size:1.2rem; }
.header .logo img { height:40px; }
.nav { display:flex; gap:1rem; }
.nav a { font-size:0.9rem; font-weight:500; color:#1d4ed8; }
.nav a:hover { color:#1e3a8a; }

/* Hamburger */
.hamburger { display:none; font-size:1.5rem; cursor:pointer; }

/* Hero */
.hero { background:#0f766e; color:#fff; padding:5rem 0; }
.hero h1 { font-size:2.5rem; font-weight:800; margin-top:1rem; }
.hero p { margin:1rem 0 2rem; }
.badge { background:rgba(255,255,255,.2); padding:0.3rem 0.8rem; border-radius:20px; font-size:0.7rem; }
.buttons .btn { padding:0.7rem 1.2rem; border-radius:10px; margin-right:0.5rem; font-weight:600; }
.btn.primary { background:#fff; color:#0f766e; }
.btn.primary:hover { background:#f3f3f3; }
.btn.secondary { border:1px solid rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.1); }
.btn.secondary:hover { background:rgba(255,255,255,.2); }
.hero-img img { width:100%; max-width:440px; height:auto; }

/* Cards */
.card { background:#fff; color:#0f766e; padding:1.5rem; border-radius:1rem; }
.card h3 { margin-bottom:0.5rem; }
.card p { font-size:0.9rem; color:#475569; }
.card.light { background:rgba(255,255,255,0.2); color:#fff; text-align:center; }

/* Industry blocks */
.industry { background:#134e4a; color:#fff; padding:2rem; text-align:center; font-weight:600; border-radius:1rem; }

/* Features */
.feature { background:rgba(255,255,255,0.2); padding:0.8rem 1rem; border-radius:0.5rem; margin-bottom:1rem; }

/* Footer */
.footer { background:#0f766e; color:#fff; padding:2rem 0; }
.footer .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.footer a { display:inline-block; margin-top:0.5rem; color:#fff; }

/* ========================= */
/* Responsive Styles */
/* ========================= */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  .grid, .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .nav { display:none; flex-direction:column; background:#fff; position:absolute; top:70px; right:20px; padding:1rem; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,0.1); }
  .nav.show { display:flex; }
  .hamburger { display:block; }
  .hero { text-align:center; }
  .hero-img { order:-1; }
}

@media (max-width: 480px) {
  .hero h1 { font-size:1.8rem; }
  .header .logo span { font-size:1rem; }
}

/* Flip Card */
.flip-card {
  background: transparent;
  width: 100%;
  height: 350px;
  perspective: 1000px; /* creates 3D effect */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 1rem;
  overflow: hidden;
 
}

/* Front: image */
.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Back: your existing card content */
.flip-card-back {
  background: #fff;
  color: #0f766e;
  transform: rotateY(180deg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flip-card-back h3 {
  margin-bottom: 0.5rem;
}
.flip-card-back p {
  font-size: 0.9rem;
  color: #475569;
}

/* About Us Section */
#about-us {
  background: #0f766e; /* same as hero */
  color: #ffffff;
  padding: 5rem 0;
  text-align: center; /* center heading and text on large screens */
}

#about-us .head {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: #ffffff;
}

#about-us .about-text {
  max-width: 900px;
  margin: 0 auto; /* center text */
  
  font-size: 1rem;
  text-align: justify;
}

/* Image adjustments */
#about-us .hero-img {
  margin-top: 2rem; /* spacing below heading and text */
}

#about-us .hero-img img {
  width: 100%;
  max-width: 440px;

  border-radius: 10px;
}

.hero-img{
  border-radius: 20px;
 width: 600px;
}

/* Make all images responsive */
img {
  max-width: 100%;  /* scales image down to fit container */
  height: auto;     /* maintain aspect ratio */
  display: block;   /* remove inline spacing issues */
  border-radius: inherit; /* inherit border-radius if set on parent */
}

/* Specific adjustments for hero and About Us images */
.hero-img img {
  width: 100%;
  max-width: 440px; /* optional: cap size on large screens */
  height: auto;
  border-radius: 10px; /* rounded corners for Hero & About Us */
}

/* Remove fixed width that breaks responsiveness */
.hero-img {
  width: 100%; /* allow container to control width */
  max-width: 100%;
  margin: 0 auto; /* center image */
}

.solution-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background-size: cover; /* rounded corners for solution images */
}

/* Industries List */
/* Subheading below main heading */
#industries .subheading {
  font-size: 1.1rem;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  color: #ffffff;
  font-weight: 500;
}

/* Grid cards already exist with .industry class */
.industry {
  background:#134e4a; 
  color:#fff; 
  padding:2rem; 
  text-align:center; 
  font-weight:600; 
  border-radius:1rem; 
}