/* same CSS can be shared by all pages */

:root {
  --primary:#0a3a7a;
  --accent:#c89b2b;
  --bg-light:#f8f5ef;
  --text-main:#222;
  --text-muted:#666;
  --max-width:1200px;
  --radius:6px;
}

*,
*::before,
*::after{box-sizing:border-box;}

body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text-main);
  background:#fff;
  line-height:1.6;
}

img{max-width:100%;height:auto;display:block;}

.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 1rem;
  font-size:20px;
  text-align:justify;
}

/* Header */

.site-headerchanged{
  background:#fff;
  border-bottom:1px solid #e1e1e1;
  position:sticky;
  top:0;
  z-index:50;
}

.site-header {
    background: linear-gradient(90deg, #0b3a7f, #1456c2);
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.header-innerchanged{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem 0;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;          /* allow wrapping */
    gap: 0.5rem;
}
.logo-area{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.logo-area img{
  width:64px;
  border-radius:50%;
}

.logo-text h1changed{
  margin:0;
  font-size:1.2rem;
  color:var(--primary);
}
.logo-text h1 {
    color: #ffffff;
}
.logo-text pchanged{
  margin:0;
  font-size:.85rem;
  color:var(--accent);
  font-weight:600;
}
.logo-text p {
    color: #ffe08a;
}
.main-nav ulchanged{
  list-style:none;
  display:flex;
  gap:1rem;
  margin:0;
  padding:0;
}
.main-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;          /* wrap to next line if needed */
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.main-nav achanged{
  text-decoration:none;
  color:var(--text-main);
  font-size:.9rem;
  font-weight:500;
}
.main-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;          /* equal button width */
    height: 32px;              /* equal height */
    padding: 0 0.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffffff, #e4f0ff);
    color: #0b3a7f;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    white-space: nowrap;       /* keep label on one line */
}
.main-nav a:hoverchanged{color:var(--accent);}
.main-nav a:hover {
    background: linear-gradient(135deg, #ffe08a, #ffffff);
    color: #0b3a7f;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
/* Hero and ticker */

.herochanged {
    background: var(--bg-light);
    padding: 2.5rem 0 3rem; /* optional, for more white space */
}
.hero {
    background: var(--bg-light);
    padding: 1.5rem 0 2rem;
    margin-top: 0.5rem;        /* extra space below header */
}
.hero-inner{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:1.5rem;
}

.hero-slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    height: 380px;          /* add or increase this */
}
.hero-slide {
    position: absolute;
    inset: 0;
    display: none;
}

.hero-slide.active {
    display: block;
}

.hero-slide img {
    width: 100%;
    height: 100%;           /* make it follow the slider height */
    object-fit: cover;
}

.hero-caption{
  position:absolute;
  inset:auto 0 0 0;
  padding:1rem 1.25rem;
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
  color:#fff;
}

.hero-caption h2{margin:0 0 .25rem;font-size:1.4rem;}
.hero-caption p{margin:0;font-size:.9rem;}

.news-ticker{
  background:#fff;
  border-radius:var(--radius);
  border:1px solid #e1e1e1;
  padding:.75rem 1rem;
}

.news-ticker-header{
  font-weight:600;
  font-size:.95rem;
  color:var(--primary);
  margin-bottom:.5rem;
}

.news-items{
  overflow:hidden;
  height:60px;
  position:relative;
}

.news-item{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  font-size:.9rem;
}

/* Sections */

.section{padding:2rem 0;}

.section-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:1rem;
}

.section-title{
  font-size:1.3rem;
  color:var(--primary);
  margin:0;
  border-left:4px solid var(--accent);
  padding-left:.5rem;
}

.section-header a{
  font-size:.9rem;
  text-decoration:none;
  color:var(--accent);
}

/* Cards and grids */

.card-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.card{
  border-radius:var(--radius);
  border:1px solid #e1e1e1;
  padding:1rem;
  background:#fff;
  text-align: justify;
}

.card h3{
  margin-top:0;
  font-size:1.05rem;
  color:var(--primary);
}

/* Contact */

.contact-grid{
  display:grid;
  grid-template-columns:1.1fr 1.3fr;
  gap:1.5rem;
}

.contact-form label{
  display:block;
  font-size:.9rem;
  margin-bottom:.25rem;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:.55rem .6rem;
  border-radius:var(--radius);
  border:1px solid #ccc;
  font-family:inherit;
  font-size:.9rem;
}

.contact-form textarea{min-height:140px;}

.btn-primary{
  display:inline-block;
  padding:.55rem 1.2rem;
  background:var(--primary);
  color:#fff;
  border-radius:var(--radius);
  border:none;
  cursor:pointer;
  font-size:.9rem;
}

.btn-primary:hover{background:#062653;}

/* Gallery */

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75rem;
}

.gallery-item img{border-radius:var(--radius);}

/* Footer */

.site-footer{
  background:#111827;
  color:#9ca3af;
  padding:1rem 0;
  margin-top:2rem;
  font-size:.85rem;
}

/* Responsive */

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .contact-grid{grid-template-columns:1fr;}
}

@media(max-width:640px){
  .header-inner{flex-direction:column;align-items:flex-start;gap:.5rem;}
  .main-nav ul{flex-wrap:wrap;row-gap:.5rem;}
  .card-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}