/* =========================
   VARIABLES
   ========================= */
:root{
  --blue-light: #7fc9ee;
  --blue-main:  #24a5e5;
  --blue-dark:  #1b6f97;

  --text: #333;
  --muted: #666;
  --border: #d9d9d9;
}

/* =========================
   RESET
   ========================= */
*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background:#fff;
}

/* =========================
   HEADER (NO WHITE CARD)
   ========================= */
.site-header{
  background: linear-gradient(to bottom, var(--blue-light) 0%, var(--blue-main) 60%, var(--blue-dark) 100%);
  padding: 22px 24px 14px;
}

.header-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.logo img{
  height:195px;
  width:auto;
  display:block;
}

/* =========================
   NAV
   ========================= */
.main-nav{
  margin-top: 22px;
}

.menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:26px;
  align-items:center;
}

.main-nav a,
.dropdown-toggle{
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  background:none;
  border:none;
  cursor:pointer;
  padding: 6px 0;
}

.has-dropdown{ position:relative; }

.dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  border:1px solid var(--border);
  min-width:180px;
  padding:6px 0;
  z-index:999;
}

.dropdown li a{
  display:block;
  padding:10px 16px;
  color:#222;
  font-weight:500;
}

.dropdown li a:hover{
  background:#f2f2f2;
}

/* hover open (desktop) */
.has-dropdown:hover .dropdown{
  display:block;
}

/* =========================
   INTRO + SCROLL LAYOUT
   ========================= */
.intro-and-scroll{
  max-width:1200px;
  margin:40px auto 0;
  padding:0 24px;

  display:grid;
  grid-template-columns: 1fr 260px;
  gap:34px;
  align-items:start;
}

/* Slightly lower intro content */
.intro-section{
  padding-top: 18px;
}

.intro-section h1{
  margin:0 0 6px;
  font-size:30px;
  font-weight:700;
}

.intro-section h2{
  margin:0 0 10px;
  font-size:16px;
  color:var(--muted);
  font-weight:600;
}

/* Full-width accent line */
.intro-divider{
  width:100%;
  border:0;
  border-top:3px solid var(--blue-main);
  margin:10px 0 16px;
}

.intro-tagline{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.55;
}

.intro-location{
  margin:0;
  font-size:13px;
}

.intro-location a{
  color: var(--blue-dark);
}

/* =========================
   SCROLL BOX (SMALLER)
   ========================= */
.scroll-display{
  width:230px;
  height:190px;

  /* IMPORTANT: do NOT use background: shorthand here */
  background-color:#ffffff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  border-radius:4px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 3px 6px rgba(0,0,0,0.12);
}

/* =========================
   SERVICE TABS
   ========================= */
.service-tabs{
  max-width:1200px;
  margin:55px auto 0;
  padding:0 24px;

  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:40px;
}

.service-tab{
  border:none;
  background:none;
  text-align:center;
  cursor:pointer;
  padding: 0;
}

.service-tab h3{
  color: var(--blue-main);
  margin:0 0 10px;
  font: 22px;
  font-weight:700;
}



.service-tab p{
  margin:0;
  font-size:16px;
  color:#555;
  line-height:1.45;
}
.service-tab {
  text-decoration: none;
}



/* =========================
   FOOTER (HORIZONTAL + GRADIENT)
   ========================= */
.site-footer{
  margin-top:70px;
  color:#fff;
}

.footer-band{
  background: linear-gradient(to bottom, var(--blue-main) 0%, var(--blue-dark) 100%);
}

.footer-columns{
  max-width:1200px;
  margin:0 auto;
  padding:26px 24px;

  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:40px;
}
.footer-columns > * {
  min-width: 0;
}
.footer-col h3{
  margin:0 0 10px;
  font-size:16px;
  font-weight:700;
  color:#0f0000;
}

.footer-col p{
  margin:4px 0;
  font-size:13px;
  color:#eaf6fc;
}

.footer-bottom{
  background: var(--blue-dark);
  text-align:center;
  padding:10px 12px;
  font-size:13px;
}
/* =========================
   FOOTER ICON LINKS (FIXED)
   ========================= */
.footer-icons{
  display: flex;
  gap: 14px;
  margin-top: 10px;
  align-items: center;
}

/* Explicit sizing for SVG + images */
.footer-icon{
  width: 32px;
  height: 32px;
  display: block;
  fill: #ffffff;
}

/* Make links behave like icons */
.footer-icon-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

/* Slight hover feedback */
.footer-icon-link:hover{
  transform: translateY(-1px);
}
/* =========================
   SERVICE PAGE IMAGE GRID
   ========================= */

.service-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* Force large images to behave */
.service-gallery img {
  width: 100%;
  max-width: 100%;
  height: 200px;

  object-fit: contain;
  background-color: #fff;
  display: block;

  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}