:root{--red:#b91c1c;--red-dark:#991b1b;--bg:#fff;--text:#0f172a;--muted:#6b7280;--maxw:1100px}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,system-ui,Arial,sans-serif;color:var(--text);background:var(--bg)}
.header{position:sticky;top:0;background:var(--red);color:#fff;z-index:1000;box-shadow:0 6px 18px rgba(2,6,23,0.15)}
.container{max-width:var(--maxw);margin:0 auto;padding:1rem}
.header .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.75rem}.brand img{width:56px;height:56px;border-radius:8px}
.brand .title{font-weight:700;font-size:1.05rem}.brand .tag{font-size:.9rem;opacity:.95}
nav a{margin-left:1rem;color:#fff;font-weight:600}nav a:hover{opacity:.9;text-decoration:underline}
.hero{height:70vh;min-height:380px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;position:relative}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.25),rgba(0,0,0,0.45))}.hero .content{position:relative;z-index:2;padding:1rem}
.hero h1{font-size:2.6rem;margin:0} .hero p{font-size:1.25rem;margin:.75rem 0 1.2rem}
.btn{background:var(--red);color:#fff;padding:.7rem 1.2rem;border-radius:8px;font-weight:700;box-shadow:0 8px 20px rgba(185,28,28,0.12);transition:transform .18s}
.btn:hover{transform:translateY(-3px);background:var(--red-dark)}
.section{padding:3rem 1rem}.section .cards{display:grid;gap:1rem;grid-template-columns:1fr}
.card{background:#fff;padding:1.2rem;border-radius:12px;box-shadow:0 12px 30px rgba(2,6,23,0.06);transition:transform .2s}.card h3{margin:0 0 .5rem;color:var(--red);font-size:1.1rem}
.card p{margin:0;color:var(--muted);line-height:1.55}.card:hover{transform:translateY(-6px)}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;justify-content:center}.tab{padding:.5rem .9rem;border-radius:10px;border:1px solid rgba(15,23,42,0.06);background:#fff;cursor:pointer;font-weight:600}.tab.active{background:var(--red);color:#fff}
.policy-card{background:#fff;padding:1.2rem;border-radius:12px;box-shadow:0 12px 30px rgba(2,6,23,0.06);max-width:900px;margin:auto}
.form-row{display:flex;flex-direction:column;margin-bottom:.75rem}.input, textarea{padding:.65rem;border-radius:8px;border:1px solid #e6e6e6;font-size:1rem}textarea{resize:vertical}
.footer{background:var(--red-dark);color:#fff;padding:2rem 1rem;margin-top:2rem}.footer .container{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}.footer .col{flex:1;min-width:220px}.footer a{color:#fff}
#back-to-top{position:fixed;right:1rem;bottom:1rem;background:var(--red);color:#fff;border:none;padding:.6rem .8rem;border-radius:8px;display:none;box-shadow:0 10px 30px rgba(0,0,0,0.15)}
@media(min-width:700px){.section .cards{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:3.2rem}.hero p{font-size:1.35rem}}@media(min-width:1000px){.section .cards{grid-template-columns:repeat(3,1fr)}.brand .title{font-size:1.15rem}}
.modal-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 30px; /* spacing between cards */
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

.modal-overlay {
  background: #fdfdfd;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modal-overlay:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.modal img {
  max-width: 180px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 20px auto;
  border-radius: 10px;        /* rounded edges */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* soft shadow */
  transition: transform 0.3s ease;
}

.modal img:hover {
  transform: scale(1.05); /* zoom effect on hover */
}


.modal h3 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 10px;
  color: #333;
}

.modal p, 
.modal ul {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}

.modal ul {
  list-style: none;
  padding: 0;
}

.modal ul li {
  margin: 8px 0;
}

button.close {
  background: none;
  border: none;
  font-size: 1.5rem;
  float: right;
  cursor: pointer;
  color: #888;
  transition: color 0.3s;
}

button.close:hover {
  color: #e74c3c;
}

.modal-heading {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  color: #222;
  border-bottom: 2px solid #ddd;
  padding-bottom: 5px;
}
/* Existing code stays the same */

/* Mobile Responsive */
@media (max-width: 768px) {
  .modal-container {
    grid-template-columns: 1fr; /* single column on mobile */
    gap: 20px;
    padding: 10px;
  }

  .modal img {
    max-width: 140px; /* slightly smaller images on mobile */
  }

  .modal h3 {
    font-size: 1.3rem;
  }

  .modal p,
  .modal ul {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .modal-heading {
    font-size: 1.4rem;
  }

  .modal img {
    max-width: 120px;
  }
}