/* Shared site stylesheet */
:root{
  --brand-blue: #0b3d91;
  --accent-red: #c42b2b;
  --bg-start: #eaf4ff;
  --bg-end: #f7fbff;
  --card-bg: rgba(255,255,255,0.85);
}

html,body{
  height:100%;
}

body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:#222;
  background: radial-gradient(circle at 10% 10%, rgba(11,61,145,0.06), transparent 20%), linear-gradient(180deg,var(--bg-start) 0%, var(--bg-end) 100%);
  background-attachment: fixed;
}

header{
  background: var(--brand-blue);
  color: #fff;
  padding: 18px 0;
  text-align:center;
}

header .logo img{
  max-width:80px;
  height:auto;
  border-radius:8px;
}
header .hero-title{
  font-size:38px;
  color:#fff;
  margin:0;
  font-weight:700;
  letter-spacing:0.5px;
}

nav{ margin-top:12px; }
nav a{ color:#fff; text-decoration:none; margin:0 10px; font-size:16px; }
nav a:hover{ text-decoration:underline; }

.marquee-wrapper, .marquee{ background:#f8f8ff; text-align:center; padding:12px 0; }

.content{ max-width:1100px; margin:24px auto; padding:20px; background: var(--card-bg); border-radius:10px; box-shadow: 0 8px 20px rgba(11,61,145,0.06); }

h1.hero{ color: var(--accent-red); font-size:48px; margin:10px 0; }
h2.section{ color: var(--accent-red); text-align:center; font-size:30px; margin-bottom:18px; }

/* Make images responsive and limit large visuals */
img{ max-width:100%; height:auto; }
.slides img{ max-height:420px; object-fit:cover; }

/* Utility */
.container, .content{ box-sizing:border-box; }

@media (max-width:768px){
  header .hero-title{ font-size:28px; }
  h1.hero{ font-size:36px; }
  nav a{ display:inline-block; margin:6px 6px; font-size:15px; }
  .slides img{ max-height:260px; }
}

/* Site-wide responsive layout improvements */
header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 24px; }
header .logo{ display:flex; align-items:center; gap:12px; }
header nav{ order:2; }
header h1.hero{ order:1; margin:0; font-size:22px; color:var(--card-bg); display:none; }

.nav-inline{ display:flex; gap:12px; align-items:center; }

.slideshow-container{ width:100%; max-width:1200px; margin:0 auto; border-radius:8px; overflow:hidden; }
.slides{ display:none; }
.slides img{ width:100%; height:auto; display:block; }

.dot-container{ text-align:center; margin-top:8px; }
.dot{ width:12px; height:12px; display:inline-block; border-radius:50%; background:#bbb; margin:0 6px; cursor:pointer; }
.dot.active{ background:#444; }

.product-section{ display:flex; gap:24px; align-items:flex-start; }
.product-section .text{ flex:1 1 60%; }
.product-section .thumb{ flex:1 1 40%; max-width:420px; }

.service-images{ display:flex; gap:20px; }

.contact-section{ max-width:700px; margin:0 auto; }

/* Make header stack on small screens */
@media (max-width:900px){
  header{ flex-direction:column; align-items:center; padding:18px 12px; }
  header h1.hero{ display:block; font-size:34px; color:var(--accent-red); }
  .nav-inline{ flex-wrap:wrap; justify-content:center; }
  .product-section{ flex-direction:column-reverse; }
  .product-section .thumb{ max-width:100%; }
  .content{ padding:16px; }
}

/* Utility helper */
.center{ text-align:center; }