.bimg{
--w:100%;
--h:240px;
--bg1:#f2f2f2;
--bg2:#e1e1e1;
--bg3:#ededed;
--line:rgba(0,0,0,.06);
--text-color:rgba(0,0,0,.55);
--text-size:22px;
position:relative;
width:var(--w);
height:var(--h);
overflow:hidden;
border-radius:10px;
background:linear-gradient(130deg,var(--bg1),var(--bg2),var(--bg3),var(--bg1));
background-size:300% 300%;
animation:bimg-bg 7s ease-in-out infinite
}
.bimg img{display:none}
.bimg::before{
content:'';
position:absolute;
inset:-50%;
background:repeating-linear-gradient(135deg,transparent 0,transparent 22px,var(--line) 23px,transparent 26px);
animation:bimg-lines 17s linear infinite
}
.bimg::after{
content:attr(data-text);
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-family:"Spectral SC",serif;
font-style:italic;
font-weight:400;
font-size:var(--text-size);
background:linear-gradient(180deg,rgba(255,255,255,.85),var(--text-color));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:0 1px 2px rgba(0,0,0,.25),0 0 12px rgba(255,255,255,.15);
animation:bimg-text 7s ease-in-out infinite
}
.bimg:hover,
.bimg:hover::before,
.bimg:hover::after{animation-play-state:paused}
@keyframes bimg-bg{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes bimg-lines{
from{transform:translate(0,0)}
to{transform:translate(80px,80px)}
}
@keyframes bimg-text{
0%,100%{transform:translateY(0);opacity:.75}
50%{transform:translateY(-6px);opacity:1}
}
    :root {
      --primary: #334856;
      --accent: #93c6e0;
      --background: #f7fafd;
      --box-bg: #ffffff;
      --box-shadow: 0 2px 12px rgba(51, 72, 86, 0.05);
      --radius: 14px;
    }




 .gallery-carousel {      width: 760px;      height: 320px;      margin: 32px auto 36px auto;      border-radius: 32px;      overflow: hidden;      box-shadow: 0 4px 28px rgba(51,72,86,0.11);      position: relative;      background: #eaf3f9;      display: flex;      align-items: center;      justify-content: center;      max-width: 99vw;    }    .gallery-carousel img {      width: 100%;      height: 100%;      object-fit: cover;      display: block;      transition: opacity 0.6s;      position: absolute;      top: 0; left: 0;      border-radius: 32px;    }    .carousel-dots {      position: absolute;      bottom: 16px;      left: 50%;      transform: translateX(-50%);      display: flex;      gap: 9px;      z-index: 2;    }    .carousel-dot {      width: 13px;      height: 13px;      border-radius: 50%;      background: #c2dded;      border: 2px solid #93c6e0;      opacity: 0.8;      cursor: pointer;      transition: background 0.2s, opacity 0.2s;    }    .carousel-dot.active {      background: #93c6e0;      opacity: 1;    }    @media (max-width: 850px) {      .gallery-carousel { width: 98vw; height: 220px; border-radius: 18px; }      .gallery-carousel img { border-radius: 18px; }    }    @media (max-width: 600px) {      .gallery-carousel { width: 98vw; height: 120px; border-radius: 14px; }      .gallery-carousel img { border-radius: 14px; }    }



    body {
      margin: 0;
      font-family: 'Inter', Arial, sans-serif;
      background: var(--background);
      color: var(--primary);
      min-height: 100vh;
    }
    header {
     background: #334856;
     box-shadow: var(--box-shadow);
     padding: 34px 0 16px 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: sticky;
     top: 0;
     z-index: 10;
    }
    .logo {
     width: 177px;  
     margin: -10% 0% 4% 17%;
    }
    nav ul {
      list-style: none;
      display: flex;
      gap: 34px;
      margin: 0 36px 0 0;
      padding: 0;
    }
    nav ul li a {
      text-decoration: none;
      color: #fff;
      font-weight: 500;
      font-size: 1.05rem;
      transition: color 0.2s;
      padding: 14px 17px;
      border-radius: 7px;
    }
    nav ul li a:hover, nav ul li a.active {
      background: var(--accent);
      color: #fff;
    }
   .banner {  width: 64%;
  margin: -6% auto 0% auto;}@media (max-width: 760px) {  .banner {    border-radius: 34px;  }  .banner svg {    border-radius: 34px;    height: 90px;  }}
    main {
      max-width: 980px;
      margin: 30px auto 0 auto;
      padding: 0 18px 36px 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 36px;
      justify-content: space-between;
    }
    .intro {
      flex: 2 1 340px;
      min-width: 320px;
    }
    .intro h1 {
      color: var(--primary);
      font-size: 2.3rem;
      margin-top: 0;
      margin-bottom: 16px;
      letter-spacing: 1px;
      font-family: "Spectral SC",serif;
    }
    .intro p {
      font-size: 1.13rem;
      line-height: 1.7;
      margin-bottom: 23px;
      color: #415a6b;
    }
    .cta-btn {
      background: var(--accent);
      color: #fff;
      border: none;
      padding: 13px 38px;
      border-radius: var(--radius);
      font-size: 1.09rem;
      box-shadow: 0 2px 6px rgba(51,72,86,0.09);
      cursor: pointer;
      font-weight: 600;
      transition: background 0.2s;
      text-decoration: none;
      display: inline-block;
    }
    .cta-btn:hover {
      background: #5ea8d5;
    }
    .recent-posts {
      flex: 1 1 260px;
      min-width: 260px;
      background: var(--box-bg);
      border-radius: var(--radius);
      box-shadow: var(--box-shadow);
      padding: 26px 20px 18px 20px;
      margin-top: 14px;
      align-self: flex-start;
    }
    .recent-posts h2 {
      color: var(--primary);
      font-size: 1.25rem;
      margin-top: 0;
      margin-bottom: 18px;
      font-family:"Spectral SC",serif;
    }
    .recent-posts ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .recent-posts ul li {
      margin-bottom: 12px;
      font-size: 1.04rem;
      border-left: 3px solid var(--accent);
      padding-left: 12px;
      transition: background 0.14s;
    }
    .recent-posts ul li:last-child {
      margin-bottom: 0;
    }
    .recent-posts ul li a {
      color: var(--primary);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }
    .recent-posts ul li a:hover {
      color: var(--accent);
      text-decoration: underline;
    }
    .highlights {
      width: 100%;
      margin: 40px auto 18px auto;
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      justify-content: space-between;
    }
    .highlight-card {
      flex: 1 1 210px;
      min-width: 210px;
      background: var(--box-bg);
      border-radius: var(--radius);
      box-shadow: var(--box-shadow);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 22px 18px 18px 18px;
      transition: transform 0.13s;
    }
    .highlight-card:hover {
      transform: translateY(-5px) scale(1.025);
      box-shadow: 0 6px 24px rgba(51,72,86,0.09);
    }
    .highlight-img {
      width: 100%;
      height: 110px;
      margin-bottom: 15px;
      border-radius: 8px;
      background: linear-gradient(120deg, #e7f0f7 0%, #cfe2ef 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.1rem;
      color: #aac6d8;
    }
    .highlight-card h3 {
      color: var(--primary);
      font-size: 1.1rem;
      margin: 0 0 8px 0;
      font-weight: 600;
      letter-spacing: 0.5px;
      font-family:"Spectral SC",serif;
      text-align:center;
    }
    .highlight-card p {
      color: #4b5d6c;
      font-size: 1rem;
      margin: 0 0 6px 0;
      text-align: center;
    }
    .featured-event {
      background: linear-gradient(115deg, #93c6e0 0%, #c2dded 100%);
      color: #334856;
      border-radius: var(--radius);
      box-shadow: var(--box-shadow);
      padding: 24px 28px 20px 28px;
      margin: 7% auto 7% auto;
      max-width: 650px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }
    .featured-event::before {
      content: "";
      position: absolute;
      right: -26px;
      bottom: -36px;
      width: 90px;
      height: 90px;
      background: rgba(51, 72, 86, 0.08);
      border-radius: 50%;
      z-index: 0;
    }
    .featured-event h3 {
      margin: 0 0 8px 0;
      font-size: 1.2rem;
      color: var(--primary);
      font-weight: 700;
      z-index: 1;
      font-family:"Spectral SC",serif;

    }
    .featured-event p {
      margin: 0 0 10px 0;
      font-size: 1.04rem;
      color: #36526a;
      z-index: 1;
    }
    .featured-event .event-date {
      font-size: 0.96rem;
      font-weight: 500;
      background: #fff;
      color: #334856;
      padding: 4px 13px;
      border-radius: 6px;
      display: inline-block;
      margin-top: 4px;
      z-index: 1;
    }
    .discover-more {
      display: flex;
      gap: 18px;
      margin: 40px 0 0 0;
      flex-wrap: wrap;
    }
    .discover-card {
      flex: 1 1 150px;
      min-width: 150px;
      background: var(--box-bg);
      border-radius: var(--radius);
      box-shadow: var(--box-shadow);
      padding: 18px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: box-shadow 0.14s, transform 0.14s;
    }
    .discover-card:hover {
      box-shadow: 0 6px 24px rgba(51,72,86,0.10);
      transform: translateY(-3px) scale(1.03);
    }
    .discover-icon {
      font-size: 2.2rem;
      color: var(--accent);
      margin-bottom: 10px;
    }
    .discover-card h4 {
      color: var(--primary);
      font-size: 1.05rem;
      margin: 0 0 6px 0;
      font-family:"Spectral SC",serif;
    }
    .discover-card p {
      font-size: 0.97rem;
      color: #53697e;
      margin: 0;
    }
    footer {
      text-align: center;
      font-size: 0.98rem;
      color: #6d8596;
      padding: 32px 0 18px 0;
      margin-top: 54px;
      border-top: 1px solid #e5ecf1;
    }
    @media (max-width: 760px) {
      header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
      }
      .banner svg {
        height: 90px;
      }
      main {
        flex-direction: column;
        gap: 24px;
        max-width: 98vw;
      }
      .highlights {
        flex-direction: column;
      }
      .discover-more {
        flex-direction: column;
      }
      .recent-posts {
        margin-top: 0;
      }
    }