/* JP Skill — Simple Responsive CSS */


:root{
  --brand:#e9eff1;
  --accent:#b5651d;
  --muted:#0f0f0f;
  --max-width:1100px;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin:0;color:#0f0e0e;line-height:1.5;background:#fff;
}
.container{width:90%;max-width:var(--max-width);margin:0 auto;padding:40px 0}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  justify-items: center;
  align-items: center;
  padding: 20px;
}

.gallery-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  background-color: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.gallery-grid img:hover {
  transform: scale(1.15);
}

/* Header */
.site-header{background:#0b5d7a;border-bottom:1px solid #eee;position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}

.brand-text h1{font-size:18px;margin:0}
.small{font-size:20px;color:var(--muted);margin:0}


/* Logo text style */
.logo-text h1 {
  color: #ffffff; /* white for main title */
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.logo-text p {
  color: #f2f2f2; /* slightly softer white for subtitle */
  font-size: 0.9rem;
  margin: 0;
}



.logo-section {
  display: flex;
  align-items: center;
  gap: 10px; /* space between logo and text */
}

.logo {
  width: 170px; /* adjust for compact look */
  height: 170px;
}




/* Nav */
.site-nav{display:flex;gap:18px;align-items:center}
.site-nav a{color:var(--brand);text-decoration:none;font-weight:600}
.site-nav a.active{color:var(--accent)}

/* Mobile nav toggle */
#nav-toggle{display:none;background:transparent;border:0;font-size:22px}

/* Hero */
.hero{background:#f3ebeb;padding:40px 0;border-bottom:1px solid #eee}
.hero-inner{display:flex;gap:30px;align-items:center;justify-content:space-between}
.hero-text h2{font-size:28px;margin:0 0 10px}
.hero-text p{color:var(--muted);margin:0 0 18px}
.hero-image{width:320px;max-width:40%;border-radius:12px}

/* Cards & grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{background:#fff;padding:18px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.card.small{padding:20px;text-align:center}
.course-card,img.course-image{width:100%}
.course-card img{height:160px;object-fit:cover;border-radius:8px}

/* Buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:700}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent)}

/* Testimonials & quotes */
.quote{background:#fff;padding:18px;border-radius:8px;border-left:4px solid var(--brand)}

/* Accordion */
.accordion .q{margin-bottom:12px}
.q-head{width:100%;text-align:left;padding:12px;border-radius:8px;border:1px solid #eee;background:#fff;cursor:pointer;font-weight:700}
.q-body{padding:12px;border-left:3px solid var(--accent);background:#fafafa;margin-top:6px;display:none}

/* Contact form */
.contact-grid label{display:block;margin-bottom:10px}
.contact-grid input,.contact-grid textarea,.contact-grid select{width:100%;padding:10px;border-radius:6px;border:1px solid #ddd}
.map-placeholder{height:220px;background:#eee;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* Footer */
.site-footer{background:#0b5d7a;color:#fff;padding:18px 0;margin-top:30px}
.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}
.footer-links a{color:#fff;text-decoration:none;margin-left:10px}
.copyright{text-align:center;color:rgba(255,255,255,0.9);padding:12px 0;font-size:14px}

.social-links a {
  color: #ffffff;         /* white text on blue footer */
  margin-right: 15px;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: #ffcc66;         /* golden hover effect */
}

/* Responsive */
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .hero-inner{flex-direction:column;text-align:center}
  .hero-image{max-width:60%}
}
@media (max-width:650px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .site-nav{display:none;flex-direction:column;background:#fff;padding:12px;border-radius:8px;position:absolute;right:18px;top:72px;box-shadow:0 10px 30px rgba(0,0,0,0.08)}
  #nav-toggle{display:block}
  .container{padding:20px 0}
  .hero-image{max-width:90%}
}

/* For the course grid layout */
#courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* Each course card */
.course-list {
  background-color: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

/* Uniform image size */
.course-list img {
  width: 100%;
  height: 200px;        /* same height for all */
  object-fit: cover;    /* keeps proportion while filling space */
  display: block;
}

/* Text styling */
.course-list h3 {
  margin: 15px 0 5px;
  color: #333;
  font-size: 1.2rem;
}

.course-list p {
  padding: 0 10px 10px;
  color: #555;
}

.course-list a.btn {
  display: inline-block;
  margin-bottom: 15px;
  padding: 8px 16px;
  background-color: #ec5413;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}

.course-list a.btn:hover {
  background-color: #7361e3;
}

/* Hover animation */

.course-list:hover {
  transform: scale(1.15);
}

/* Trainer Section */
.trainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  justify-items: center;
  align-items: start;
  padding: 40px 0;
}

.trainer-card {
  text-align: center;
  padding: 25px;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: 300px;
}

/* Hover effect */
.trainer-card:hover {
  transform: translateY(-8px) scale(1.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Trainer image — fixed uniform size */
.trainer-card img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 15px;
  border: 3px solid #0b5d7a; /* matches your header color */
}

/* Trainer name & title */
.trainer-card h3 {
  font-size: 1.1rem;
  margin: 10px 0 4px;
  color: #0b5d7a;
}

.trainer-card p {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
}

.map iframe {
  width: 100%;
  height: 350px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}