:root {

  --primary: #0077cc; /* water brand blue */

  --primary-dark: #005a9a;

  --accent: #00c0ff;

  --text: #0b2140;

  --text-light: #5b6b7a;

  --bg: #f6fbff;

  --card: #ffffff;

  --glass: rgba(255, 255, 255, 0.85);

  --border: rgba(0, 119, 204, 0.10);

  --shadow: 0 12px 34px rgba(3, 20, 45, 0.08);

  --radius: 16px;

  --transition: all 0.32s cubic-bezier(.2,.9,.2,1);

  --max-width: 1400px;

}

/* RESET */

* { box-sizing: border-box; margin: 0; padding: 0; }

html,body { height: 100%; width: 100%; }

body {

  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

  background: var(--bg);

  color: var(--text);

  -webkit-font-smoothing:antialiased;

  -moz-osx-font-smoothing:grayscale;

  line-height: 1.6;

  transition: background .35s, color .35s;

}

a { color: inherit; text-decoration: none; }

/* === TOP UTILITY BAR === */

.top-utility {
  background: var(--primary-dark);
  color: #e8f6ff;
  padding: 10px 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1200;
  transition: transform 0.35s ease;
}

.top-utility .top-contact a { color: #e8f6ff; text-decoration:none; margin-right:18px; display:inline-flex; gap:8px; align-items:center; }

.top-utility .social-links a { color:#e8f6ff; margin-left:14px; font-size:1.05rem; transition:var(--transition); }

.top-utility .social-links a:hover { transform:translateY(-3px); color:var(--accent); }

/* === FIXED HEADER - SIMPLIFIED VERSION === */

header {

  position: sticky;

  top: 0;

  left: 0;

  width: 100%;

  background: rgba(255, 255, 255, 0.98);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--border);

  padding: 15px 6%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  z-index: 1300;

  transition: all 0.3s ease;

  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);

}

header.scrolled {

  padding: 8px 6%;

  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);

}

/* Enhanced Logo */

.logo {

  display: flex;

  align-items: center;

  gap: 12px;

  font-weight: 800;

  font-size: 1.8rem;

  color: var(--primary);

  margin-right: auto;

  padding: 6px 12px;

  border-radius: 12px;

  transition: all 0.3s ease;

}

.logo:hover {

  background: rgba(0, 119, 204, 0.08);

  transform: translateY(-1px);

}

.logo img {

  height: 85px;

  width: auto;

  border-radius: 10px;

  object-fit: cover;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  border: 0px solid rgba(0, 119, 204, 0.1);

  transition: height 0.3s ease;

}

/* When scrolled, logo is slightly smaller but still visible */

header.scrolled .logo img {

  height: 70px;

}

/* Navigation container */

nav {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-left: auto;

}

/* NAV LIST */

.nav-wrap {

  display: flex;

  align-items: center;

  gap: 20px;

}

.nav-links {

  display:flex; list-style:none; gap:24px; align-items:center;

  margin: 0;

  padding: 0;

}

.nav-links > li {

  position: relative;

}

.nav-links a {

  color:var(--text);

  font-weight:600;

  font-size:0.95rem;

  padding:8px 12px;

  border-radius:8px;

  transition:var(--transition);

  display: inline-block;

  white-space: nowrap;

  text-align: center;

}

.nav-links a:focus { outline: 3px solid rgba(0,119,204,0.12); outline-offset:3px; }

.nav-links a:hover, .nav-links a.active { color:var(--primary); background: rgba(0,119,204,0.04); }

/* Dropdown base (desktop) */

.dropdown { position:relative; }

.dropdown > button, .dropdown > a {

  display:inline-flex;

  align-items:center;

  gap:6px;

  background:none;

  border:0;

  cursor:pointer;

  font-weight:600;

  color:var(--text);

  font-size:0.95rem;

  padding:8px 12px;

  white-space: nowrap;

}

.dropdown > button .caret, .dropdown > a .caret {

  font-size:0.7rem;

  opacity:.75;

  transition: transform 0.3s ease;

}

.dropdown.open .caret {

  transform: rotate(180deg);

}

.dropdown-menu {

  position:absolute;

  top:110%;

  left:50%;

  transform:translateX(-50%) translateY(6px);

  min-width:220px;

  background:var(--card);

  border-radius:14px;

  box-shadow:var(--shadow);

  border:1px solid var(--border);

  padding:12px 8px;

  opacity:0;

  visibility:hidden;

  transition:opacity .24s ease, transform .28s ease, visibility .24s;

  z-index:1400;

}

.dropdown.open > .dropdown-menu,

.dropdown:focus-within > .dropdown-menu,

.dropdown:hover > .dropdown-menu {

  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);

}

.dropdown-menu li { list-style:none; }

.dropdown-menu a {

  display:block;

  padding:12px 14px;

  color:var(--text-light);

  border-radius:10px;

  font-weight:500;

  transition:var(--transition);

  font-size:0.9rem;

}

.dropdown-menu a:hover,

.dropdown-menu a:focus { background:linear-gradient(90deg,var(--primary),var(--primary-dark)); color:#fff; transform:translateX(6px); }

/* Hamburger */

.hamburger {

  background:none; border:0; cursor:pointer; font-size:1.05rem; color:var(--text); padding:8px; border-radius:8px;

  display:none; flex-direction:column; gap:6px;

  z-index: 1301;

}

.hamburger:focus { outline: 3px solid rgba(0,119,204,0.12); outline-offset:3px; }

.hamburger span { width:26px; height:3px; border-radius:3px; background:var(--text); transition:transform .3s, opacity .3s; }

/* FADE CAROUSEL - REMOVED NEGATIVE MARGINS */

.carousel {

  position: relative;

  width: 100%;

  height: 100vh;

  min-height: 600px;

  overflow: hidden;

}

.carousel-track {

  position: relative;

  width: 100%;

  height: 100%;

}

.carousel-slide {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);

  display: flex;

  align-items: center;

  justify-content: center;

}

.carousel-slide.active {

  opacity: 1;

  z-index: 2;

}

.carousel-slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

}

.slide-content {

  position: relative;

  z-index: 3;

  max-width: 980px;

  padding: 24px;

  text-align: center;

  color: #fff;

  opacity: 0;

  transform: translateY(30px);

  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;

}

.carousel-slide.active .slide-content {

  opacity: 1;

  transform: translateY(0);

}

.slide-content h1 {

  font-size: clamp(2.4rem, 5.5vw, 4.6rem);

  line-height: 1.01;

  font-weight: 800;

  margin-bottom: 18px;

  text-shadow: 0 10px 30px rgba(0,0,0,0.35);

}

.slide-content p {

  font-size: clamp(1rem, 1.8vw, 1.3rem);

  margin-bottom: 26px;

  opacity: 0.98;

  max-width: 800px;

  margin-left: auto;

  margin-right: auto;

}

.slide-overlay {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, rgba(0,102,204,0.4), rgba(0,170,255,0.3));

  z-index: 1;

}

/* Carousel Navigation */

.carousel-nav {

  position: absolute;

  bottom: 40px;

  left: 0;

  right: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 20px;

  z-index: 10;

}

.carousel-dots {

  display: flex;

  gap: 12px;

}

.carousel-dot {

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: rgba(255,255,255,0.4);

  border: none;

  cursor: pointer;

  transition: all 0.3s ease;

}

.carousel-dot.active {

  background: white;

  transform: scale(1.2);

}

.carousel-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: rgba(255,255,255,0.9);

  border: none;

  color: var(--primary);

  font-size: 1.5rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

  z-index: 10;

  box-shadow: 0 8px 25px rgba(0,0,0,0.15);

  opacity: 0.8;

}

.carousel-btn:hover {

  background: white;

  transform: translateY(-50%) scale(1.1);

  box-shadow: 0 12px 35px rgba(0,0,0,0.2);

  opacity: 1;

}

.carousel-btn.prev {

  left: 30px;

}

.carousel-btn.next {

  right: 30px;

}

/* Buttons */

.btn {

  background: #fff;

  color: var(--primary);

  padding:14px 36px;

  border-radius:999px;

  font-weight:700;

  box-shadow:0 12px 30px rgba(0,30,60,0.18);

  transition:var(--transition);

  display:inline-block;

}

.btn:hover { transform:translateY(-6px); box-shadow:0 26px 50px rgba(0,30,60,0.22); }

/* ENHANCED QUICK LINKS - REMOVED NEGATIVE MARGINS */

.quick-links {

  padding:64px 6% 48px;

  max-width:var(--max-width);

  margin: 0 auto;

  display:grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap:22px;

  align-items:stretch;

  position: relative;

  z-index: 5;

}

.ql {

  background:var(--card);

  border-radius:14px;

  padding:28px;

  box-shadow:var(--shadow);

  border:1px solid var(--border);

  transition:var(--transition);

  position:relative;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

}

.ql img {

  width:72px;

  margin-bottom:14px;

  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  align-self:flex-start;

}

.ql h4 {

  margin-bottom:8px;

  color:var(--text);

  font-size:1.05rem;

  text-align:left;

  width:100%;

}

.ql p {

  color:var(--text-light);

  font-size:0.95rem;

  text-align:left;

  flex-grow:1;

  margin-bottom:20px;

}

/* Link positioned on the right */

.ql-link {

  align-self:flex-end;

  color:var(--primary);

  font-weight:600;

  display:inline-flex;

  align-items:center;

  gap:6px;

  transition:var(--transition);

  position:relative;

  padding:8px 12px;

  border-radius:8px;

  background:rgba(0, 119, 204, 0.05);

  margin-top:auto;

}

.ql-link i {

  transition:transform 0.3s ease;

}

/* Enhanced hover effects */

.ql:hover {

  transform:translateY(-8px);

  box-shadow:0 30px 70px rgba(0,102,204,0.12);

  z-index:10;

}

.ql:hover img {

  transform:scale(1.15) rotate(5deg);

}

.ql:hover .ql-link {

  color:var(--primary-dark);

  background:rgba(0, 119, 204, 0.1);

  transform:translateX(5px);

}

.ql:hover .ql-link i {

  transform:translateX(3px);

}

/* ENHANCED MAIN CONTENT CARDS */

.main-content {

  padding:64px 6% 96px;

  max-width:var(--max-width);

  margin: 0 auto;

  display:grid;

  grid-template-columns: 2fr 1fr;

  gap:38px;

  align-items:start;

}

.glass-card {

  background:var(--glass);

  border-radius:14px;

  padding:24px;

  box-shadow:var(--shadow);

  border:1px solid var(--border);

  transition:var(--transition);

  position:relative;

  overflow:visible;

}

.director-card img {

  width:100%;

  border-radius:12px;

  margin-bottom:18px;

  display:block;

  transition:transform 0.5s ease;

}

.glass-card:hover img {

  transform:scale(1.02);

}

.glass-card h3, .glass-card h4 {

  transition:color 0.3s ease;

}

.glass-card:hover h3,

.glass-card:hover h4 {

  color:var(--primary);

}

/* Simple hover lift effect */

.glass-card:hover {

  transform:translateY(-5px);

  box-shadow:0 20px 60px rgba(0, 119, 204, 0.15);

  z-index:10;

}

/* Enhanced news items */

.news-item {

  display:flex;

  flex-direction:column;

  position:relative;

}

.news-link {

  align-self:flex-end;

  margin-top:15px;

  color:var(--primary);

  font-weight:600;

  display:inline-flex;

  align-items:center;

  gap:6px;

  transition:var(--transition);

  padding:8px 12px;

  border-radius:8px;

  background:rgba(0, 119, 204, 0.05);

}

.news-link i {

  transition:transform 0.3s ease;

}

.news-item:hover .news-link {

  color:var(--primary-dark);

  background:rgba(0, 119, 204, 0.1);

  transform:translateX(5px);

}

.news-item:hover .news-link i {

  transform:translateX(3px);

}

.news-item + .news-item { margin-top:18px; }

/* small elements moved from inline to classes */

.latest-news-title {

  margin-bottom:18px;

  color:var(--primary);

  font-size:1.6rem;

}

.news-date {

  color:var(--accent);

  font-weight:600;

}

.news-excerpt {

  margin-top:10px;

  color:var(--text-light);

}

/* Watercolor contact card moved styles */

.watercolor-contact-card {

  max-width: 520px;

  margin: 40px auto;

  padding: 40px 32px;

  border-radius: 28px;

  position: relative;

  overflow: hidden;

  background: linear-gradient(135deg, rgba(173,216,230,0.25), rgba(135,206,235,0.18), rgba(176,224,230,0.22));

  backdrop-filter: blur(16px);

  border: 1.5px solid rgba(173,216,230,0.4);

  box-shadow: 0 15px 35px rgba(64,149,191,0.15);

}

/* decorative blurred circles */

.wc-circle {

  position:absolute;

  border-radius:50%;

  filter:blur(40px);

  pointer-events: none;

  z-index: 0;

}

.wc-circle--1 {

  width:280px;

  height:280px;

  background:rgba(135,206,250,0.25);

  top:-100px;

  right:-80px;

  filter: blur(40px);

}

.wc-circle--2 {

  width:220px;

  height:220px;

  background:rgba(173,216,230,0.3);

  bottom:-70px;

  left:-60px;

  filter: blur(35px);

}

/* contact title/subtitle */

.contact-title {

  margin:0 0 10px;

  font-size:30px;

  color:#2c7ab8;

  font-weight:700;

  text-align:center;

  position: relative;

  z-index: 2;

}

.contact-subtitle {

  margin:0 0 28px;

  color:#4a90b3;

  text-align:center;

  font-size:16px;

  position: relative;

  z-index: 2;

}

/* contact form inputs */

.contact-form {

  position: relative;

  z-index: 2;

}

.wc-input,

.wc-textarea {

  width:100%;

  padding:16px 20px;

  border-radius:16px;

  border:none;

  margin-bottom:16px;

  background:rgba(255,255,255,0.75);

  color:#2c5f87;

  font-size:18px;

  box-shadow:0 4px 15px rgba(64,149,191,0.12);

  transition:all 0.3s;

  outline: none;

  resize: vertical;

}

.wc-textarea { margin-bottom:20px; }

.wc-input:focus,

.wc-textarea:focus {

  background:rgba(255,255,255,0.95);

  box-shadow:0 0 0 4px rgba(135,206,235,0.4);

}

/* submit button */

.wc-submit {

  width:100%;

  padding:16px;

  border:none;

  border-radius:16px;

  cursor:pointer;

  background: linear-gradient(90deg, #4facfe, #00f2fe);

  color:white;

  font-size:17px;

  font-weight:600;

  box-shadow:0 8px 25px rgba(79,172,254,0.35);

  transition:all 0.3s;

}

.wc-submit:hover {

  transform: translateY(-3px);

  box-shadow:0 12px 30px rgba(79,172,254,0.45);

}

/* contact info block */

.wc-contact-info {

  margin-top:32px;

  padding-top:24px;

  border-top:1px solid rgba(173,216,230,0.5);

  text-align:center;

  color:#3a8ab3;

  position: relative;

  z-index: 2;

}

.wc-contact-info p {

  margin:10px 0;

  font-size:15px;

}

.wc-contact-info a {

  color:#4facfe;

  text-decoration:none;

}

.reply-time { margin-top:14px; font-size:14px; color:#5fa8c9; }

.reply-time-highlight { font-weight:600; color:#2c7ab8; }

/* read message button (replacing inline style) */

.read-message-btn {

  display:inline-block;

  margin-top:18px;

  padding:10px 26px;

  font-size:0.95rem;

}

/* Newsletter form enhancements */

.newsletter input[type="email"] {

  transition:var(--transition);

  border:2px solid transparent;

}

.newsletter input[type="email"]:focus {

  border-color:var(--primary);

  outline:none;

  box-shadow:0 0 0 3px rgba(0,119,204,0.1);

}

.newsletter .btn {

  transition:all 0.3s ease;

}

.newsletter .btn:hover {

  background:var(--primary-dark);

  color:#fff;

}

/* FOOTER */

.main-footer {

  background: linear-gradient(180deg, var(--primary-dark), var(--primary));

  color:#e8f8ff;

  padding:72px 6% 48px;

  margin-top:48px;

}

.footer-top {

  max-width:var(--max-width);

  margin:0 auto 30px;

  display:grid;

  grid-template-columns: 1.7fr 1fr 1fr 1fr;

  gap:28px;

}

.footer-logo img { height:56px; margin-bottom:14px; }

.footer-col h4 { color:#fff; margin-bottom:14px; font-size:1.05rem; }

.footer-col a { color:rgba(255,255,255,0.9); display:block; margin-bottom:10px; text-decoration:none; font-size:0.95rem; }

.footer-bottom { text-align:center; color:rgba(255,255,255,0.85); padding-top:18px; font-size:0.95rem; border-top:1px solid rgba(255,255,255,0.06); }

/* ENHANCED ANIMATIONS */

@keyframes fadeInUp {

  from { opacity:0; transform:translateY(22px); }

  to { opacity:1; transform:translateY(0); }

}

.animate-up { opacity:0; transform:translateY(18px); will-change:transform,opacity; }

.animate-up.visible { animation:fadeInUp .84s cubic-bezier(.2,.9,.3,1) forwards; }

/* small delay utility classes that replace inline animation-delay values */

.delay-0    { animation-delay: 0s; }

.delay-08   { animation-delay: 0.08s; }

.delay-12   { animation-delay: 0.12s; }

.delay-16   { animation-delay: 0.16s; }

.delay-24   { animation-delay: 0.24s; }

/* =================

   ENHANCED RESPONSIVENESS WITH LOGO ADJUSTMENTS

   ================= */

@media (max-width: 1200px) {

  .quick-links {

    grid-template-columns: repeat(2, 1fr);

  }

  .main-content {

    gap:28px;

  }

  .footer-top {

    grid-template-columns: 1.5fr 1fr 1fr;

  }

  .carousel {

    height: 85vh;

  }

  .carousel-btn {

    width: 50px;

    height: 50px;

    font-size: 1.2rem;

  }

  .carousel-btn.prev {

    left: 20px;

  }

  .carousel-btn.next {

    right: 20px;

  }

  /* Adjust header spacing for larger logo */

  .nav-links {

    gap: 18px;

  }

  .nav-links a {

    padding: 8px 10px;

    font-size: 0.9rem;

  }

  /* Logo adjustments */

  .logo img {

    height: 75px; /* Slightly smaller on medium screens */

  }

  header.scrolled .logo img {

    height: 65px;

  }

}

@media (max-width: 1100px) {

  .footer-top { grid-template-columns: 1fr 1fr; }

  .main-content {

    grid-template-columns: 1fr;

    gap:32px;

  }

  .right {

    display:grid;

    grid-template-columns: repeat(2, 1fr);

    gap:20px;

  }

  .right h3 {

    grid-column:1/-1;

  }

  .newsletter {

    grid-column:1/-1;

  }

}

@media (max-width: 900px) {

  .top-utility {

    padding:10px 5%;

    font-size:0.92rem;

    flex-wrap:wrap;

    justify-content:center;

  }

  .top-utility .top-contact {

    width:100%;

    text-align:center;

    margin-bottom:5px;

  }

  .top-utility .social-links {

    width:100%;

    text-align:center;

  }

  .top-utility .social-links a {

    margin:0 7px;

  }

  header {

    padding:12px 5%;

  }

  /* Logo adjustments for tablet */

  .logo img {

    height: 70px;

  }

  header.scrolled .logo img {

    height: 60px;

  }

  .nav-links {

    gap:14px;

  }

  .nav-links a {

    font-size: 0.88rem;

    padding: 8px 8px;

  }

  .carousel {

    height: 75vh;

    min-height: 500px;

  }

  .carousel-btn {

    width: 45px;

    height: 45px;

    font-size: 1rem;

  }

  .carousel-btn.prev {

    left: 15px;

  }

  .carousel-btn.next {

    right: 15px;

  }

  .quick-links {

    padding:48px 5% 36px;

  }

  .main-content {

    padding:48px 5% 64px;

  }

}

@media (max-width: 768px) {

  .hamburger {

    display:flex;

  }

  /* Logo adjustments for mobile */

  .logo {

    gap: 8px;

    padding: 4px 8px;

  }

  .logo img {

    height: 65px; /* Still visible on mobile */

    border-radius: 6px;

  }

  header.scrolled .logo img {

    height: 55px;

  }

  .nav-links {

    position: fixed;

    top: 0;

    right: -100%;

    width: 86%;

    height: 100vh;

    background: var(--card);

    flex-direction: column;

    padding: 110px 20px 36px;

    gap: 8px;

    overflow-y: auto;

    transition: right .36s cubic-bezier(.2,.9,.2,1);

    box-shadow: -20px 6px 60px rgba(3,20,45,0.18);

    z-index:1250;

  }

  .nav-links.show { right: 0; }

  .nav-links a {

    padding:14px 12px;

    width:100%;

    display:block;

    border-radius:10px;

    color:var(--text);

    background:transparent;

    font-size:1.1rem;

    text-align: left;

  }

  .dropdown > button, .dropdown > a {

    width: 100%;

    text-align: left;

    padding: 14px 12px;

    font-size: 1.1rem;

  }

  /* make dropdown menus full-width blocks */

  .dropdown-menu {

    position: static;

    transform:none;

    opacity:1;

    visibility:visible;

    background: var(--primary);

    color: #fff;

    border-radius:12px;

    padding:6px;

    box-shadow:none;

    border:0;

    margin:8px 0 18px 0;

    width: 100%;

    min-width: auto;

  }

  .dropdown-menu a {

    color:#fff;

    padding:12px 14px;

    display:block;

    font-weight:600;

    font-size:1rem;

  }

  .dropdown-menu a:hover {

    background:rgba(255,255,255,0.06);

    color:#fff;

    transform:none;

  }

  /* carousel adjustments */

  .carousel {

    height: 70vh;

    min-height: 450px;

  }

  .carousel-btn {

    display: none;

  }

  .carousel-nav {

    bottom: 20px;

  }

  .slide-content h1 {

    font-size:2rem;

  }

  .slide-content p {

    font-size:1.1rem;

    margin-bottom:20px;

  }

  .quick-links {

    padding:32px 5% 24px;

    grid-template-columns: 1fr;

    gap:16px;

  }

  .quick-links .ql {

    text-align:left;

    display:flex;

    gap:14px;

    align-items:center;

    flex-direction:row;

  }

  .ql img {

    width:58px;

    margin-bottom:0;

    flex-shrink:0;

  }

  .ql-content {

    flex-grow:1;

  }

  .ql h4 {

    margin:0 0 4px 0;

  }

  .ql-link {

    align-self:center;

    margin-top:0;

  }

  /* Adjust main content for mobile */

  .main-content {

    padding:32px 5% 48px;

  }

  .right {

    grid-template-columns: 1fr;

    gap:16px;

  }

  .glass-card {

    padding:20px;

  }

  .footer-top {

    grid-template-columns: 1fr;

    gap:24px;

  }

  .footer-col {

    text-align:center;

  }

  .footer-col .social-links {

    justify-content:center;

  }

  .btn {

    padding:12px 28px;

    font-size:0.95rem;

  }

}

@media (max-width: 480px) {

  /* Logo adjustments for small mobile */

  .logo {

    gap: 6px;

    padding: 3px 6px;

  }

  .logo img {

    height: 60px; /* Still clearly visible on small screens */

  }

  header.scrolled .logo img {

    height: 50px;

  }

  .top-utility {

    padding:8px 4%;

    font-size:0.88rem;

  }

  .carousel {

    height: 65vh;

    min-height: 400px;

  }

  .slide-content h1 {

    font-size:1.8rem;

  }

  .slide-content p {

    font-size:1rem;

    line-height:1.5;

  }

  .quick-links {

    padding:24px 4% 20px;

  }

  .quick-links .ql {

    padding:20px;

    flex-direction:column;

    align-items:flex-start;

  }

  .ql img {

    align-self:flex-start;

    margin-bottom:12px;

  }

  .ql-link {

    align-self:flex-end;

    margin-top:12px;

  }

  .main-content {

    padding:24px 4% 32px;

  }

  .glass-card {

    padding:16px;

  }

  .footer-top {

    padding:0 4%;

  }

  .main-footer {

    padding:48px 4% 32px;

  }

  .btn {

    padding:10px 24px;

    font-size:0.9rem;

  }

}

@media (max-width: 360px) {

  /* Logo adjustments for very small screens */

  .logo img {

    height: 55px; /* Minimum height for visibility */

  }

  header.scrolled .logo img {

    height: 48px;

  }

  .carousel {

    height: 60vh;

    min-height: 350px;

  }

  .slide-content h1 {

    font-size:1.6rem;

  }

  .slide-content p {

    font-size:0.95rem;

  }

  .quick-links .ql {

    padding:16px;

  }

  .ql img {

    width:50px;

  }

  .ql h4 {

    font-size:1rem;

  }

  .ql p {

    font-size:0.9rem;

  }

}

/* small focus improvements for keyboard users */

a:focus, button:focus, input:focus {

  outline: 3px solid rgba(0,119,204,0.12);

  outline-offset:3px;

  border-radius:8px;

}

/* Smooth scrolling */

html {

  scroll-behavior: smooth;

}

/* ===== Back-to-top styles moved from inline <style> ===== */

#back-to-top {

  position: fixed;

  bottom: 30px;

  right: 30px;

  z-index: 999;

  width: 54px;

  height: 54px;

  border-radius: 50%;

  background: linear-gradient(135deg, #4facfe, #00f2fe);

  border: none;

  color: white;

  font-size: 24px;

  cursor: pointer;

  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);

  opacity: 0;

  visibility: hidden;

  transition: all 0.4s ease;

  backdrop-filter: blur(10px);

}

#back-to-top:hover {

  transform: translateY(-6px);

  box-shadow: 0 15px 35px rgba(79, 172, 254, 0.6);

}

#back-to-top.show {

  opacity: 1;

  visibility: visible;

  animation: pulse 2s infinite;

}

@keyframes pulse {

  0%, 100% { box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4); }

  50% { box-shadow: 0 8px 35px rgba(79, 172, 254, 0.7); }

}
/* ===== LOGIN MODAL ===== */
.login-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}

.login-modal-content {
  background: #ffffff;
  width: 350px;
  max-width: 90%;
  margin: 8% auto;
  padding: 25px;
  border-radius: 12px;
  position: relative;
  animation: popScale 0.3s ease;
}

@keyframes popScale {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.close-login {
  position: absolute;
  right: 18px;
  top: 10px;
  font-size: 28px;
  cursor: pointer;
  color: #444;
}

.login-modal-content h2 {
  margin-bottom: 15px;
  font-size: 22px;
  color: #0077cc;
  text-align: center;
}

.login-modal-content input,
.login-modal-content button {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 15px;
}

.login-modal-content button {
  background: #0077cc;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: 0.3s ease;
}

.login-modal-content button:hover {
  background: #005a99;
}