:root{--blue-dark:#073f86;--blue:#1478dc;--blue-light:#43a9e8;--turquoise:#35c4c7;--ink:#10233e;--muted:#63738a;--surface:#f5f9fd;--white:#fff;--line:#dce8f4;--shadow:0 24px 70px rgba(7,63,134,.12);--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(220,232,244,.8)}.nav-wrap{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:1.02rem}.brand img{width:46px;height:46px;object-fit:contain}.nav{display:flex;align-items:center;gap:28px}.nav>a{color:#38506c;font-weight:600;font-size:.94rem;transition:color .2s}.nav>a:hover{color:var(--blue)}
.social-icons{display:flex;align-items:center;gap:9px;margin-left:2px;padding-left:18px;border-left:1px solid var(--line)}.social-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:var(--blue-dark);background:#eef7ff;border:1px solid #d7eafa;transition:transform .2s,background .2s,color .2s,box-shadow .2s}.social-icon svg{width:18px;height:18px;fill:currentColor}.social-icon:hover{transform:translateY(-2px);background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(20,120,220,.2)}.social-icon:focus-visible{outline:3px solid rgba(53,196,199,.35);outline-offset:2px}.menu-toggle{display:none;border:0;background:transparent;padding:8px;cursor:pointer}
.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
  z-index: 101; /* Keeps button above open menu overlay */
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--blue-dark); /* Replaced undefined --navy */
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Optional: Transforms hamburger lines into an "X" when open */
.menu-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 90% 15%,rgba(67,169,232,.16),transparent 30%),linear-gradient(135deg,#f9fcff 0%,#eef7ff 100%);padding:90px 0 100px}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}.eyebrow,.section-label{display:inline-block;color:var(--blue);letter-spacing:.13em;font-size:.76rem;font-weight:800}.hero h1{max-width:760px;margin:18px 0 22px;font-size:clamp(2.7rem,6vw,5rem);line-height:1.04;letter-spacing:-.055em}.hero h1 span{background:linear-gradient(90deg,var(--blue-dark),var(--blue),var(--turquoise));-webkit-background-clip:text;background-clip:text;color:transparent}.hero-text{max-width:650px;color:var(--muted);font-size:1.08rem}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}.btn{display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:0 22px;border-radius:14px;font-weight:700;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{color:#fff;background:linear-gradient(135deg,var(--blue-dark),var(--blue));box-shadow:0 12px 28px rgba(20,120,220,.25)}.btn-secondary{color:var(--navy);background:#fff;border:1px solid var(--line)}.hero-note{display:flex;align-items:center;gap:9px;margin-top:25px;color:#718196;font-size:.86rem}.dot{width:8px;height:8px;border-radius:50%;background:var(--turquoise);box-shadow:0 0 0 5px rgba(53,196,199,.13)}.hero-card{position:relative;min-height:460px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:45px;border-radius:38px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);overflow:hidden}.card-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(67,169,232,.25),rgba(53,196,199,.04) 60%,transparent 70%);top:20px;right:0}.hero-logo{position:relative;width:min(310px,70%);filter:drop-shadow(0 18px 18px rgba(7,63,134,.14))}.hero-card-content{position:relative;text-align:center;max-width:360px;margin-top:20px}.hero-card-content strong{font-size:1.08rem}.hero-card-content p{margin:7px 0 0;color:var(--muted);font-size:.92rem}.hero-shape{position:absolute;border-radius:50%;filter:blur(1px);opacity:.55}.hero-shape-one{width:250px;height:250px;background:rgba(67,169,232,.09);left:-120px;top:30%}.hero-shape-two{width:160px;height:160px;background:rgba(53,196,199,.09);right:20%;bottom:-80px}
.intro{padding:100px 0}.intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:start}h2{margin:13px 0 20px;font-size:clamp(2rem,4vw,3.25rem);line-height:1.1;letter-spacing:-.04em}.intro p{margin:0 0 16px;color:var(--muted);font-size:1.03rem}.services{padding:95px 0 110px;background:var(--surface)}.section-heading{max-width:720px}.section-heading p{color:var(--muted)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:45px}.service-card{padding:34px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:0 10px 35px rgba(7,63,134,.05)}.service-card.featured{background:linear-gradient(145deg,#fff,#effaff);border-color:#bfe2f4}.service-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#e9f5ff;color:var(--blue);font-size:.78rem;font-weight:800}.service-card h3{margin:22px 0 10px;font-size:1.2rem}.service-card p{margin:0;color:var(--muted);font-size:.94rem}.impact{padding:90px 0;background:linear-gradient(135deg,var(--blue-dark),#126ec7 58%,var(--turquoise));color:#fff}.impact-box{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.impact h2{margin-bottom:0}.impact p{margin:0;color:rgba(255,255,255,.83);font-size:1.03rem}.section-label.light{color:#aee9ed}.contact{padding:105px 0}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.contact-copy p{max-width:560px;color:var(--muted)}.contact-card{padding:12px;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}.contact-item{display:flex;align-items:center;gap:18px;padding:22px;border-radius:19px;transition:background .2s}.contact-item:hover{background:#f5faff}.contact-icon{flex:0 0 48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#e9f7f8;color:var(--blue-dark);font-weight:800}.contact-item small{display:block;color:#8190a3;margin-bottom:3px}.contact-item strong{display:block;font-size:.96rem;overflow-wrap:anywhere}
footer{background:#071f3e;color:#fff;padding:30px 0}.footer-wrap{display:flex;justify-content:space-between;gap:30px;align-items:center}.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand img{width:42px;height:42px;object-fit:contain}.footer-brand strong,.footer-brand span{display:block}.footer-brand span{color:rgba(255,255,255,.58);font-size:.75rem;margin-top:2px}.footer-right{text-align:right}.footer-right p{margin:0;color:rgba(255,255,255,.55);font-size:.78rem}.designer-credit{margin-top:5px!important}.designer-credit a{color:#8edfe3;font-weight:700}.designer-credit a:hover{text-decoration:underline}.footer-social{display:flex;justify-content:flex-end;align-items:center;gap:9px;margin-bottom:9px}.footer-social .social-icon{background:rgba(255,255,255,.08);color:#aee9ed;border-color:rgba(255,255,255,.14)}.footer-social .social-icon:hover{background:var(--turquoise);color:#071f3e;border-color:var(--turquoise)}
@media(max-width:900px){.hero-grid,.intro-grid,.impact-box,.contact-grid{grid-template-columns:1fr;gap:45px}.hero{padding-top:70px}.hero-card{min-height:380px}.service-grid{grid-template-columns:1fr}.intro,.services,.contact{padding:75px 0}}
@media(max-width:680px){.container{width:min(100% - 28px,1160px)}.nav{display:none;position:absolute;top:78px;left:0;right:0;padding:14px 20px 20px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 25px rgba(7,63,134,.08)}.nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}.nav>a{padding:13px 5px}.social-icons{margin:8px 0 0;padding:14px 0 0;border-left:0;border-top:1px solid var(--line);justify-content:flex-start}.menu-toggle{display:block}.brand span{font-size:.93rem}.hero{padding:55px 0 70px}.hero h1{font-size:clamp(2.45rem,13vw,3.8rem)}.hero-text{font-size:1rem}.hero-actions{flex-direction:column}.btn{width:100%}.hero-card{min-height:330px;padding:28px;border-radius:28px}.hero-logo{width:62%}.service-card{padding:27px}.impact{padding:70px 0}.footer-wrap{flex-direction:column;align-items:flex-start}.footer-right{text-align:left;width:100%}.footer-social{justify-content:flex-start}}

/* =========================
   ABOUT PAGE
========================= */
.about-hero{position:relative;overflow:hidden;padding:95px 0 105px;background:radial-gradient(circle at 85% 20%,rgba(67,169,232,.18),transparent 28%),linear-gradient(135deg,#f9fcff,#edf8ff)}
.about-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}
.about-hero h1{max-width:800px;margin:18px 0 22px;font-size:clamp(2.7rem,6vw,4.8rem);line-height:1.04;letter-spacing:-.055em}
.about-hero h1 span{background:linear-gradient(90deg,var(--blue-dark),var(--blue),var(--turquoise));-webkit-background-clip:text;background-clip:text;color:transparent}
.about-hero p{max-width:700px;color:var(--muted);font-size:1.08rem}
.about-hero-mark{justify-self:end;width:min(390px,100%);padding:45px 35px;border-radius:36px;background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);text-align:center}
.about-hero-mark img{width:min(260px,75%);margin:0 auto 20px;filter:drop-shadow(0 18px 18px rgba(7,63,134,.12))}
.about-hero-mark span{display:block;color:var(--blue-dark);font-weight:800;font-size:.86rem;letter-spacing:.06em}
.about-orb{position:absolute;border-radius:50%;filter:blur(1px);opacity:.6}.about-orb-one{width:280px;height:280px;background:rgba(67,169,232,.10);left:-150px;top:25%}.about-orb-two{width:190px;height:190px;background:rgba(53,196,199,.10);right:7%;bottom:-100px}
.about-story{padding:105px 0}.about-story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:start}.about-copy p{margin:0 0 18px;color:var(--muted);font-size:1.03rem}.about-section-intro h2{max-width:500px}
.vision-mission{padding:100px 0;background:var(--surface)}.centered-heading{max-width:780px;margin:0 auto;text-align:center}.centered-heading p{max-width:680px;margin:0 auto;color:var(--muted)}.vm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:50px}.vm-card{padding:38px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 38px rgba(7,63,134,.06)}.vm-card.mission-card{background:linear-gradient(145deg,#fff,#effaff);border-color:#bfe2f4}.vm-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,var(--blue-dark),var(--blue));color:#fff;font-weight:800;font-size:1.1rem;box-shadow:0 10px 22px rgba(20,120,220,.18)}.vm-label{display:block;margin-top:25px;color:var(--blue);letter-spacing:.12em;font-size:.74rem;font-weight:800}.vm-card h3{margin:10px 0 14px;font-size:1.45rem;line-height:1.25}.vm-card p{margin:0;color:var(--muted)}
.goals-section{padding:105px 0}.goals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:45px}.goal-card{padding:30px 26px;border:1px solid var(--line);border-radius:23px;background:#fff;box-shadow:0 9px 30px rgba(7,63,134,.05)}.goal-number{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#e9f5ff;color:var(--blue);font-size:.76rem;font-weight:800}.goal-card h3{margin:20px 0 10px;font-size:1.08rem;line-height:1.3}.goal-card p{margin:0;color:var(--muted);font-size:.91rem}
.values-section{padding:95px 0;background:linear-gradient(135deg,var(--blue-dark),#126ec7 58%,var(--turquoise));color:#fff}.values-box{display:grid;grid-template-columns:.85fr 1.15fr;gap:75px;align-items:start}.values-box h2{max-width:500px;margin-bottom:0}.values-list{display:grid;grid-template-columns:1fr 1fr;gap:28px}.values-list div{padding:22px 0;border-top:1px solid rgba(255,255,255,.2)}.values-list strong{display:block;color:#aee9ed;font-size:.78rem}.values-list span{display:block;margin:5px 0;font-size:1.05rem;font-weight:800}.values-list p{margin:0;color:rgba(255,255,255,.76);font-size:.9rem}
.future-section{padding:105px 0}.future-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}.future-grid p{margin:0 0 28px;color:var(--muted);font-size:1.03rem}
@media(max-width:900px){.about-hero-inner,.about-story-grid,.values-box,.future-grid{grid-template-columns:1fr;gap:45px}.about-hero-mark{justify-self:start}.vm-grid{grid-template-columns:1fr}.goals-grid{grid-template-columns:repeat(2,1fr)}.about-hero{padding:70px 0 80px}.about-story,.vision-mission,.goals-section,.future-section{padding:75px 0}}
@media(max-width:680px){.goals-grid,.values-list{grid-template-columns:1fr}.about-hero h1{font-size:clamp(2.45rem,13vw,3.8rem)}.about-hero-mark{padding:32px 24px}.vm-card{padding:28px}.future-grid .btn{width:100%}}

/* =========================================================
   BEYOND THE BELL
   SERVICES PAGE
   ========================================================= */


/* =========================================================
   SERVICES HERO
   ========================================================= */

.services-hero {
  position: relative;
  overflow: hidden;

  min-height: 570px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      135deg,
      #f5fbff 0%,
      #eef8ff 50%,
      #f8ffff 100%
    );
}


.services-hero-shape {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(1px);
}


.services-hero-shape-one {
  width: 420px;
  height: 420px;

  right: -180px;
  top: -180px;

  background:
    radial-gradient(
      circle,
      rgba(19, 116, 220, .16),
      transparent 70%
    );
}


.services-hero-shape-two {
  width: 350px;
  height: 350px;

  left: -180px;
  bottom: -200px;

  background:
    radial-gradient(
      circle,
      rgba(36, 193, 199, .15),
      transparent 70%
    );
}


.services-hero-content {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(300px, .9fr);

  align-items: center;

  gap: 70px;

  padding-top: 90px;
  padding-bottom: 90px;
}


.services-hero-text {
  max-width: 700px;
}


.services-hero h1 {
  margin: 18px 0 24px;

  font-size:
    clamp(2.7rem, 6vw, 5rem);

  line-height: 1.02;

  letter-spacing: -2.5px;

  color: #092f69;
}


.services-hero h1 span {
  display: block;

  background:
    linear-gradient(
      90deg,
      #0878df,
      #25bfc4
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


.services-hero-text > p {
  max-width: 650px;

  font-size: 1.08rem;

  line-height: 1.8;

  color: #53677e;
}


.services-hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 32px;
}


/* =========================================================
   HERO LOGO
   ========================================================= */

.services-hero-visual {
  display: flex;

  justify-content: center;
  align-items: center;
}


.services-logo-circle {
  position: relative;

  width: min(390px, 80vw);
  aspect-ratio: 1;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255,255,255,.98),
      rgba(231,246,255,.9)
    );

  box-shadow:
    0 35px 80px rgba(10, 73, 140, .16);

  border: 1px solid rgba(21, 116, 207, .12);
}


.services-logo-circle::before {
  content: "";

  position: absolute;

  inset: 18px;

  border-radius: 50%;

  border: 1px solid rgba(27, 137, 215, .16);
}


.services-logo-ring {
  position: absolute;

  inset: 32px;

  border-radius: 50%;

  border:

    2px solid
    rgba(38, 190, 195, .20);

  border-left-color:
    rgba(9, 99, 197, .5);

  transform: rotate(-25deg);
}


.services-logo-circle img {
  position: relative;

  z-index: 2;

  width: 68%;

  height: 68%;

  object-fit: contain;
}


/* =========================================================
   INTRO
   ========================================================= */

.services-intro {
  padding: 105px 0;

  background: #ffffff;
}


.services-intro-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 80px;

  align-items: start;
}


.services-intro h2 {
  margin-top: 16px;

  max-width: 620px;

  font-size:
    clamp(2rem, 4vw, 3.4rem);

  line-height: 1.1;

  letter-spacing: -1.5px;

  color: #092f69;
}


.services-intro-copy {
  padding-top: 8px;
}


.services-intro-copy p {
  margin: 0 0 20px;

  color: #5a6c81;

  font-size: 1rem;

  line-height: 1.85;
}


.services-intro-copy p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   SERVICES SECTION
   ========================================================= */

.main-services {
  padding: 110px 0;

  background:
    linear-gradient(
      180deg,
      #f5faff 0%,
      #ffffff 100%
    );
}


.services-heading {
  max-width: 760px;

  margin-bottom: 65px;
}


.services-heading h2 {
  margin-top: 14px;
}


.services-heading p {
  max-width: 620px;
}


/* =========================================================
   SERVICE CARDS
   ========================================================= */

.services-list {
  display: flex;

  flex-direction: column;

  gap: 30px;
}


.large-service-card {
  position: relative;

  display: grid;

  grid-template-columns:
    80px
    minmax(0, 1fr)
    minmax(260px, .65fr);

  align-items: center;

  gap: 30px;

  min-height: 390px;

  padding: 42px;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid #dcecf8;

  border-radius: 28px;

  box-shadow:
    0 18px 55px
    rgba(11, 83, 145, .07);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.large-service-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 25px 65px
    rgba(11, 83, 145, .11);
}


.large-service-card::after {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: -120px;
  bottom: -150px;

  border-radius: 50%;

  background:
    rgba(33, 184, 195, .07);

  pointer-events: none;
}


/* =========================================================
   SERVICE NUMBER
   ========================================================= */

.service-number {
  align-self: start;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 62px;
  height: 62px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #0878df,
      #25bfc4
    );

  color: #ffffff;

  font-size: 1rem;

  font-weight: 800;

  box-shadow:
    0 12px 25px
    rgba(13, 117, 208, .20);
}


/* =========================================================
   SERVICE CONTENT
   ========================================================= */

.large-service-content {
  position: relative;

  z-index: 2;
}


.service-tag {
  display: inline-block;

  margin-bottom: 12px;

  color: #0785c8;

  font-size: .72rem;

  font-weight: 800;

  letter-spacing: 1.5px;
}


.large-service-content h3 {
  margin: 0 0 18px;

  color: #092f69;

  font-size:
    clamp(1.7rem, 3vw, 2.5rem);

  line-height: 1.15;

  letter-spacing: -1px;
}


.large-service-content p {
  max-width: 650px;

  margin: 0;

  color: #5a6c81;

  line-height: 1.8;
}


/* =========================================================
   SERVICE POINTS
   ========================================================= */

.service-points {
  display: flex;

  flex-direction: column;

  gap: 10px;

  margin: 25px 0 0;

  padding: 0;

  list-style: none;
}


.service-points li {
  display: flex;

  align-items: center;

  gap: 10px;

  color: #39536e;

  font-size: .9rem;

  font-weight: 600;
}


.service-points li span {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 21px;
  height: 21px;

  border-radius: 50%;

  background: #e5f8f8;

  color: #079aa0;

  font-size: .7rem;

  font-weight: 800;
}


/* =========================================================
   SERVICE ART
   ========================================================= */

.service-card-art {
  position: relative;

  width: 100%;

  min-height: 270px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      #edf8ff,
      #e7fbfb
    );
}


.art-circle {
  position: absolute;

  width: 210px;
  height: 210px;

  border-radius: 50%;

  border:
    2px solid
    rgba(8, 120, 223, .10);
}


.art-circle::after {
  content: "";

  position: absolute;

  inset: 20px;

  border-radius: 50%;

  border:
    1px solid
    rgba(36, 193, 199, .20);
}


/* =========================================================
   EDUCATION ART
   ========================================================= */

.book-shape {
  position: relative;

  z-index: 2;

  width: 135px;
  height: 85px;

  display: flex;

  background:
    linear-gradient(
      90deg,
      #0878df 50%,
      #25bfc4 50%
    );

  border-radius:
    10px 10px 18px 18px;

  transform:
    perspective(250px)
    rotateX(12deg);

  box-shadow:
    0 15px 30px
    rgba(8, 120, 223, .20);
}


.book-shape span {
  width: 50%;

  border-top: 7px solid
    rgba(255,255,255,.8);

  margin-top: 18px;
}


.art-star {
  position: absolute;

  top: 45px;
  right: 70px;

  color: #0878df;

  font-size: 1.6rem;
}


/* =========================================================
   MEALS ART
   ========================================================= */

.meals-art {
  background:
    linear-gradient(
      145deg,
      #eefaff,
      #effdfc
    );
}


.bowl-shape {
  position: relative;

  z-index: 2;

  width: 145px;
  height: 70px;

  border-radius:
    0 0 80px 80px;

  background:
    linear-gradient(
      135deg,
      #0878df,
      #25bfc4
    );

  box-shadow:
    0 15px 30px
    rgba(8, 120, 223, .20);
}


.bowl-shape::before {
  content: "";

  position: absolute;

  width: 160px;
  height: 25px;

  left: -7px;
  top: -10px;

  border-radius: 50%;

  background: #ffffff;

  border:
    8px solid #0d81d8;
}


.bowl-shape span {
  position: absolute;

  width: 120px;
  height: 8px;

  left: 12px;
  bottom: 16px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.45);
}


.steam {
  position: absolute;

  z-index: 3;

  width: 12px;
  height: 50px;

  border-radius: 50%;

  border-left:
    3px solid
    rgba(37, 191, 196, .55);

  transform: rotate(10deg);

  top: 55px;
}


.steam-one {
  margin-left: -55px;
}


.steam-two {
  margin-left: 0;

  transform: rotate(-4deg);
}


.steam-three {
  margin-left: 55px;

  transform: rotate(10deg);
}


/* =========================================================
   ACTIVITY ART
   ========================================================= */

.activity-art {
  background:
    linear-gradient(
      145deg,
      #eef8ff,
      #eafbfa
    );
}


.activity-person {
  position: absolute;

  z-index: 2;

  width: 52px;
  height: 85px;

  border-radius:
    50% 50% 45% 45%;

  background:
    linear-gradient(
      180deg,
      #0878df,
      #0955a5
    );

  transform-origin: bottom center;
}


.activity-person::before {
  content: "";

  position: absolute;

  width: 31px;
  height: 31px;

  top: -32px;
  left: 10px;

  border-radius: 50%;

  background: #0878df;
}


.person-one {
  transform:
    rotate(-25deg)
    translate(-50px, 10px);
}


.person-two {
  background:
    linear-gradient(
      180deg,
      #25bfc4,
      #0aa3aa
    );

  transform:
    translateY(-5px);
}


.person-two::before {
  background: #25bfc4;
}


.person-three {
  background:
    linear-gradient(
      180deg,
      #1267c2,
      #092f69
    );

  transform:
    rotate(25deg)
    translate(50px, 10px);
}


.person-three::before {
  background: #1267c2;
}


.activity-star {
  position: absolute;

  top: 45px;

  color: #25bfc4;

  font-size: 1.8rem;

  z-index: 3;
}


/* =========================================================
   APPROACH
   ========================================================= */

.service-approach {
  padding: 100px 0;

  background: #ffffff;
}


.approach-box {
  position: relative;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(280px, .8fr);

  gap: 60px;

  padding: 65px;

  border-radius: 30px;

  background:
    linear-gradient(
      135deg,
      #062f69,
      #075ea9 60%,
      #087eaf
    );

  box-shadow:
    0 30px 70px
    rgba(4, 63, 120, .18);
}


.approach-box::after {
  content: "";

  position: absolute;

  width: 400px;
  height: 400px;

  right: -180px;
  top: -180px;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,.12);

  box-shadow:
    0 0 0 45px
    rgba(255,255,255,.035),
    0 0 0 90px
    rgba(255,255,255,.025);

  pointer-events: none;
}


.approach-content {
  position: relative;

  z-index: 2;
}


.approach-content h2 {
  margin: 14px 0 20px;

  max-width: 650px;

  color: #ffffff;

  font-size:
    clamp(2rem, 4vw, 3.3rem);

  line-height: 1.08;

  letter-spacing: -1.5px;
}


.approach-content p {
  max-width: 650px;

  color: rgba(255,255,255,.76);

  line-height: 1.8;
}


.btn-light {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-top: 20px;

  padding: 13px 22px;

  border-radius: 12px;

  background: #ffffff;

  color: #073c7a;

  font-weight: 800;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.btn-light:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 25px
    rgba(0,0,0,.16);
}


/* =========================================================
   APPROACH VALUES
   ========================================================= */

.approach-values {
  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 18px;
}


.approach-value {
  display: grid;

  grid-template-columns:
    48px 1fr;

  column-gap: 14px;

  padding: 18px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 16px;

  background:
    rgba(255,255,255,.07);

  backdrop-filter: blur(8px);
}


.approach-value span {
  grid-row: span 2;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border-radius: 12px;

  background:
    rgba(255,255,255,.12);

  color: #7ce1e4;

  font-size: .75rem;

  font-weight: 800;
}


.approach-value strong {
  color: #ffffff;

  font-size: 1rem;
}


.approach-value small {
  margin-top: 3px;

  color: rgba(255,255,255,.62);

  line-height: 1.5;
}


/* =========================================================
   CTA
   ========================================================= */

.services-cta {
  padding: 100px 0;

  background:
    linear-gradient(
      180deg,
      #f8fcff,
      #ffffff
    );
}


.services-cta-inner {
  max-width: 820px;

  margin: 0 auto;

  text-align: center;
}


.services-cta-inner h2 {
  margin: 14px 0 18px;

  color: #092f69;

  font-size:
    clamp(2rem, 4vw, 3.3rem);

  line-height: 1.1;

  letter-spacing: -1.5px;
}


.services-cta-inner p {
  max-width: 650px;

  margin: 0 auto;

  color: #5a6c81;

  line-height: 1.8;
}


.services-cta-buttons {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 30px;
}


/* =========================================================
   ACTIVE NAVIGATION
   ========================================================= */

.nav a.active {
  color: #0878df;
}


.nav a.active::after {
  width: 100%;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

  .services-hero-content {
    grid-template-columns: 1fr;

    text-align: center;

    gap: 50px;
  }


  .services-hero-text {
    margin: 0 auto;
  }


  .services-hero-text > p {
    margin-left: auto;
    margin-right: auto;
  }


  .services-hero-actions {
    justify-content: center;
  }


  .services-hero-visual {
    order: -1;
  }


  .services-logo-circle {
    width: 290px;
  }


  .large-service-card {
    grid-template-columns:
      65px
      1fr;
  }


  .service-card-art {
    grid-column: 2;

    min-height: 240px;
  }

}


@media (max-width: 800px) {

  .services-intro-grid {
    grid-template-columns: 1fr;

    gap: 30px;
  }


  .approach-box {
    grid-template-columns: 1fr;

    padding: 45px 30px;

    gap: 35px;
  }


  .approach-values {
    max-width: 600px;
  }

}


@media (max-width: 650px) {

  .services-hero {
    min-height: auto;
  }


  .services-hero-content {
    padding-top: 65px;
    padding-bottom: 70px;
  }


  .services-hero h1 {
    letter-spacing: -1.5px;
  }


  .services-hero-actions {
    flex-direction: column;

    align-items: stretch;
  }


  .services-hero-actions .btn {
    width: 100%;
  }


  .services-intro,
  .main-services,
  .service-approach,
  .services-cta {
    padding-top: 75px;
    padding-bottom: 75px;
  }


  .large-service-card {
    grid-template-columns: 1fr;

    padding: 28px 24px;

    border-radius: 22px;
  }


  .service-number {
    width: 54px;
    height: 54px;
  }


  .service-card-art {
    grid-column: auto;

    min-height: 220px;

    margin-top: 5px;
  }


  .services-list {
    gap: 22px;
  }


  .approach-box {
    padding: 35px 24px;

    border-radius: 24px;
  }


  .services-cta-buttons {
    flex-direction: column;

    align-items: stretch;
  }


  .services-cta-buttons .btn {
    width: 100%;
  }

}


@media (max-width: 450px) {

  .services-logo-circle {
    width: 245px;
  }


  .large-service-content h3 {
    font-size: 1.7rem;
  }


  .service-card-art {
    min-height: 190px;
  }


  .art-circle {
    width: 160px;
    height: 160px;
  }

}

/* =========================================================
   BEYOND THE BELL
   CONTACT PAGE
   ========================================================= */


/* =========================================================
   CONTACT HERO
   ========================================================= */

.contact-hero {
    position: relative;
    overflow: hidden;

    min-height: 450px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            #f4fbff 0%,
            #eef8ff 55%,
            #f5ffff 100%
        );
}


.contact-hero-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.contact-hero-shape-one {
    width: 450px;
    height: 450px;

    right: -180px;
    top: -220px;

    background:
        radial-gradient(
            circle,
            rgba(8, 120, 223, .15),
            transparent 70%
        );
}


.contact-hero-shape-two {
    width: 350px;
    height: 350px;

    left: -190px;
    bottom: -220px;

    background:
        radial-gradient(
            circle,
            rgba(37, 191, 196, .16),
            transparent 70%
        );
}


.contact-hero-content {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    align-items: center;

    gap: 80px;

    padding-top: 80px;
    padding-bottom: 80px;
}


.contact-hero-content h1 {
    max-width: 760px;

    margin: 18px 0 22px;

    color: #092f69;

    font-size:
        clamp(2.6rem, 5.5vw, 4.7rem);

    line-height: 1.02;

    letter-spacing: -2.5px;
}


.contact-hero-content h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #0878df,
            #25bfc4
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.contact-hero-content p {
    max-width: 680px;

    margin: 0;

    color: #53677e;

    font-size: 1.05rem;

    line-height: 1.8;
}


/* =========================================================
   HERO LOGO
   ========================================================= */

.contact-hero-logo {
    position: relative;

    width: 280px;
    height: 280px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto;

    border-radius: 50%;

    background:
        rgba(255,255,255,.78);

    border:
        1px solid
        rgba(9, 99, 197, .12);

    box-shadow:
        0 30px 70px
        rgba(10, 73, 140, .13);
}


.contact-hero-logo::before {
    content: "";

    position: absolute;

    inset: 18px;

    border-radius: 50%;

    border:
        1px solid
        rgba(37, 191, 196, .20);
}


.contact-logo-ring {
    position: absolute;

    inset: 30px;

    border-radius: 50%;

    border:
        2px solid
        rgba(8, 120, 223, .15);

    border-top-color:
        rgba(8, 120, 223, .55);

    border-bottom-color:
        rgba(37, 191, 196, .55);

    transform: rotate(25deg);
}


.contact-hero-logo img {
    position: relative;

    z-index: 2;

    width: 67%;
    height: 67%;

    object-fit: contain;
}


/* =========================================================
   MAIN CONTACT SECTION
   ========================================================= */

.contact-main {
    padding: 105px 0;

    background: #ffffff;
}


.contact-main-grid {
    display: grid;

    grid-template-columns:
        minmax(280px, .8fr)
        minmax(400px, 1.2fr);

    gap: 75px;

    align-items: start;
}


/* =========================================================
   CONTACT INFORMATION
   ========================================================= */

.contact-information {
    padding-top: 10px;
}


.contact-information h2 {
    max-width: 500px;

    margin: 15px 0 18px;

    color: #092f69;

    font-size:
        clamp(2rem, 4vw, 3rem);

    line-height: 1.1;

    letter-spacing: -1.3px;
}


.contact-intro {
    max-width: 550px;

    margin: 0 0 35px;

    color: #5a6c81;

    line-height: 1.85;
}


/* =========================================================
   CONTACT DETAILS
   ========================================================= */

.contact-detail {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 17px;

    padding: 18px;

    border:
        1px solid
        #e0edf7;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f7fcff
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


a.contact-detail:hover {
    transform: translateY(-3px);

    border-color:
        rgba(8, 120, 223, .25);

    box-shadow:
        0 12px 30px
        rgba(8, 100, 170, .08);
}


.contact-detail-icon {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #0878df,
            #25bfc4
        );

    color: #ffffff;

    font-size: 1.1rem;

    font-weight: 800;
}


.contact-detail span:last-child {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.contact-detail small {
    color: #75879a;

    font-size: .75rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.contact-detail strong {
    color: #153d67;

    font-size: .95rem;

    line-height: 1.5;
}


/* =========================================================
   CONTACT SOCIAL BOX
   ========================================================= */

.contact-social-box {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 28px;

    padding-top: 25px;

    border-top:
        1px solid
        #e5eef6;
}


.contact-social-box > span {
    color: #526a82;

    font-size: .88rem;

    font-weight: 700;
}


.contact-social-icons {
    display: flex;

    gap: 10px;
}


.contact-social-icons a {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #edf7ff;

    color: #0878df;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}


.contact-social-icons a:hover {
    transform: translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #0878df,
            #25bfc4
        );

    color: #ffffff;
}


.contact-social-icons svg {
    width: 19px;
    height: 19px;

    fill: currentColor;
}


/* =========================================================
   FORM WRAPPER
   ========================================================= */

.contact-form-wrapper {
    position: relative;

    padding: 42px;

    border:
        1px solid
        #dcecf8;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fcff
        );

    box-shadow:
        0 25px 65px
        rgba(10, 83, 145, .09);
}


.form-header h2 {
    margin: 13px 0 10px;

    color: #092f69;

    font-size:
        clamp(1.8rem, 3vw, 2.5rem);

    line-height: 1.1;

    letter-spacing: -1px;
}


.form-header p {
    margin: 0 0 30px;

    color: #66798d;

    line-height: 1.7;
}


/* =========================================================
   FORM ALERTS
   ========================================================= */

.form-alert {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 25px;

    padding: 15px 17px;

    border-radius: 14px;

    font-size: .9rem;

    line-height: 1.6;
}


.success-alert {
    background: #eafaf8;

    border:
        1px solid
        #bde9e4;

    color: #08786f;
}


.error-alert {
    background: #fff3f2;

    border:
        1px solid
        #f2cccc;

    color: #a43a35;
}


.alert-icon {
    flex: 0 0 auto;

    width: 24px;
    height: 24px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        currentColor;

    color: #ffffff;

    font-size: .75rem;

    font-weight: 800;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.contact-form {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 21px;
}


.form-group {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.form-group-full {
    grid-column: 1 / -1;
}


.form-group label {
    color: #294a68;

    font-size: .82rem;

    font-weight: 800;
}


.form-group label span {
    color: #0878df;
}


.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    border:
        1px solid
        #d7e6f2;

    border-radius: 12px;

    outline: none;

    background: #ffffff;

    color: #203f5d;

    font-family: inherit;

    font-size: .92rem;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.form-group input,
.form-group select {
    height: 49px;
}


.form-group textarea {
    min-height: 150px;

    resize: vertical;

    line-height: 1.6;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9aabba;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #0878df;

    box-shadow:
        0 0 0 4px
        rgba(8, 120, 223, .08);
}


/* =========================================================
   FORM SUBMIT
   ========================================================= */

.form-submit {
    grid-column: 1 / -1;

    margin-top: 5px;
}


.form-submit .btn {
    border: 0;

    cursor: pointer;

    font-family: inherit;
}


.submit-arrow {
    margin-left: 8px;

    font-size: 1.1rem;
}


.form-note {
    grid-column: 1 / -1;

    margin: -7px 0 0;

    color: #8495a5;

    font-size: .75rem;

    line-height: 1.6;
}


.form-note strong {
    color: #557089;
}


/* =========================================================
   LOCATION SECTION
   ========================================================= */

.contact-location {
    padding: 0 0 105px;

    background: #ffffff;
}


.location-box {
    display: flex;

    align-items: center;

    gap: 25px;

    padding: 42px 48px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #eef9ff,
            #eafafa
        );

    border:
        1px solid
        #d9edf7;
}


.location-icon {
    flex: 0 0 auto;

    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #0878df,
            #25bfc4
        );

    color: #ffffff;

    font-size: 1.5rem;

    box-shadow:
        0 12px 25px
        rgba(8, 120, 223, .18);
}


.location-box h2 {
    margin: 9px 0 10px;

    color: #092f69;

    font-size:
        clamp(1.6rem, 3vw, 2.3rem);

    letter-spacing: -1px;
}


.location-box p {
    max-width: 750px;

    margin: 0;

    color: #5c7187;

    line-height: 1.7;
}


/* =========================================================
   ACTIVE NAVIGATION
   ========================================================= */

.nav a.active {
    color: #0878df;
}


.nav a.active::after {
    width: 100%;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .contact-hero-content {
        grid-template-columns: 1fr;

        text-align: center;

        gap: 45px;
    }


    .contact-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }


    .contact-hero-logo {
        width: 230px;
        height: 230px;
    }


    .contact-main-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .contact-information {
        max-width: 750px;
    }

}


@media (max-width: 700px) {

    .contact-hero-content {
        padding-top: 65px;
        padding-bottom: 65px;
    }


    .contact-hero-content h1 {
        letter-spacing: -1.5px;
    }


    .contact-main {
        padding: 75px 0;
    }


    .contact-form-wrapper {
        padding: 30px 24px;

        border-radius: 22px;
    }


    .contact-form {
        grid-template-columns: 1fr;
    }


    .form-group-full,
    .form-submit,
    .form-note {
        grid-column: auto;
    }


    .location-box {
        align-items: flex-start;

        padding: 30px 24px;

        border-radius: 22px;
    }

}


@media (max-width: 500px) {

    .contact-hero-logo {
        width: 200px;
        height: 200px;
    }


    .contact-detail {
        padding: 15px;
    }


    .contact-detail-icon {
        width: 44px;
        height: 44px;

        border-radius: 12px;
    }


    .contact-social-box {
        align-items: flex-start;

        flex-direction: column;
    }


    .contact-form-wrapper {
        padding: 25px 18px;
    }


    .location-icon {
        width: 55px;
        height: 55px;

        border-radius: 16px;
    }

}


@media (max-width: 400px) {

    .contact-hero-content h1 {
        font-size: 2.35rem;
    }


    .contact-detail strong {
        font-size: .87rem;
    }


    .contact-form-wrapper {
        padding: 22px 15px;
    }

}

/* =========================================================
   BEYOND THE BELL
   GALLERY PAGE
========================================================= */


/* =========================================================
   GALLERY HERO
========================================================= */

.gallery-hero {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f4fbff 0%,
            #eef8ff 55%,
            #f5ffff 100%
        );
}


.gallery-hero-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.gallery-shape-one {
    width: 500px;
    height: 500px;

    top: -270px;
    right: -180px;

    background:
        radial-gradient(
            circle,
            rgba(8,120,223,.14),
            transparent 70%
        );
}


.gallery-shape-two {
    width: 400px;
    height: 400px;

    bottom: -260px;
    left: -220px;

    background:
        radial-gradient(
            circle,
            rgba(37,191,196,.14),
            transparent 70%
        );
}


.gallery-hero-content {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        280px;

    align-items: center;

    gap: 80px;

    padding-top: 80px;
    padding-bottom: 80px;
}


.gallery-hero-content h1 {
    max-width: 760px;

    margin: 18px 0 22px;

    color: #092f69;

    font-size:
        clamp(2.6rem,5.5vw,4.7rem);

    line-height: 1.02;

    letter-spacing: -2.5px;
}


.gallery-hero-content h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #0878df,
            #25bfc4
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.gallery-hero-content p {
    max-width: 680px;

    margin: 0;

    color: #53677e;

    font-size: 1.05rem;

    line-height: 1.8;
}


/* =========================================================
   HERO LOGO
========================================================= */

.gallery-hero-logo {
    position: relative;

    width: 260px;
    height: 260px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: auto;

    border-radius: 50%;

    background:
        rgba(255,255,255,.8);

    border:
        1px solid
        rgba(9,99,197,.12);

    box-shadow:
        0 30px 70px
        rgba(10,73,140,.13);
}


.gallery-hero-logo::before {
    content: "";

    position: absolute;

    inset: 17px;

    border-radius: 50%;

    border:
        1px solid
        rgba(37,191,196,.2);
}


.gallery-logo-ring {
    position: absolute;

    inset: 30px;

    border-radius: 50%;

    border:
        2px solid
        rgba(8,120,223,.14);

    border-top-color:
        rgba(8,120,223,.6);

    border-bottom-color:
        rgba(37,191,196,.6);

    transform: rotate(25deg);
}


.gallery-hero-logo img {
    position: relative;

    z-index: 2;

    width: 68%;
    height: 68%;

    object-fit: contain;
}


/* =========================================================
   GALLERY SECTION
========================================================= */

.gallery-section {
    padding: 105px 0;

    background: #ffffff;
}


.gallery-heading {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}


.gallery-heading h2 {
    margin: 15px 0;

    color: #092f69;

    font-size:
        clamp(2rem,4vw,3rem);

    line-height: 1.1;

    letter-spacing: -1.3px;
}


.gallery-heading p {
    margin: 0 auto;

    max-width: 680px;

    color: #65798d;

    line-height: 1.8;
}


/* =========================================================
   GALLERY GRID
========================================================= */

.gallery-grid {
    display: grid;

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

    grid-auto-rows: 240px;

    gap: 18px;
}


.gallery-item {
    position: relative;

    min-width: 0;
    min-height: 0;

    padding: 0;

    overflow: hidden;

    border: 0;

    border-radius: 20px;

    background: #edf7fc;

    cursor: pointer;

    font-family: inherit;

    box-shadow:
        0 8px 25px
        rgba(10,70,120,.07);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.gallery-item:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px
        rgba(10,80,140,.15);
}


.gallery-item-large {
    grid-row: span 2;
}


.gallery-item-wide {
    grid-column: span 2;
}


.gallery-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s cubic-bezier(.2,.7,.2,1);
}


.gallery-item:hover img {
    transform: scale(1.07);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    padding: 20px;

    background:
        linear-gradient(
            to top,
            rgba(5,34,72,.72),
            rgba(5,34,72,.05) 55%,
            transparent
        );

    opacity: 0;

    transition:
        opacity .3s ease;
}


.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay {
    opacity: 1;
}


.gallery-number {
    color: #ffffff;

    font-size: .75rem;

    font-weight: 800;

    letter-spacing: 1px;
}


.gallery-view {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #ffffff;

    font-size: .75rem;

    font-weight: 700;
}


.gallery-view strong {
    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0878df,
            #25bfc4
        );

    font-size: 1rem;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 30px;

    box-sizing: border-box;
}


.gallery-lightbox.is-open {
    display: flex;
}


.lightbox-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(3,22,45,.94);

    backdrop-filter:
        blur(12px);
}


.lightbox-content {
    position: relative;

    z-index: 2;

    width: min(1100px, 100%);

    height: min(90vh, 850px);

    display: flex;

    align-items: center;
    justify-content: center;
}


.lightbox-image-wrapper {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 55px 75px 90px;

    box-sizing: border-box;
}


.lightbox-image-wrapper img {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 12px;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.45);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.lightbox-close {
    position: absolute;

    z-index: 5;

    top: 10px;
    right: 10px;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid
        rgba(255,255,255,.2);

    border-radius: 50%;

    background:
        rgba(255,255,255,.1);

    color: #ffffff;

    font-size: 2rem;

    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.lightbox-close:hover {
    background:
        linear-gradient(
            135deg,
            #0878df,
            #25bfc4
        );

    transform: rotate(90deg);
}


/* =========================================================
   PREVIOUS / NEXT
========================================================= */

.lightbox-arrow {
    position: absolute;

    z-index: 5;

    top: 50%;

    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    border:
        1px solid
        rgba(255,255,255,.2);

    border-radius: 50%;

    background:
        rgba(255,255,255,.1);

    color: #ffffff;

    font-size: 2.8rem;

    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.lightbox-arrow:hover {
    background:
        linear-gradient(
            135deg,
            #0878df,
            #25bfc4
        );
}


.lightbox-prev {
    left: 5px;
}


.lightbox-next {
    right: 5px;
}


.lightbox-prev:hover {
    transform:
        translate(-3px,-50%);
}


.lightbox-next:hover {
    transform:
        translate(3px,-50%);
}


/* =========================================================
   LIGHTBOX CONTROLS
========================================================= */

.lightbox-controls {
    position: absolute;

    z-index: 5;

    bottom: 15px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 20px;
}


.lightbox-counter {
    color: rgba(255,255,255,.85);

    font-size: .8rem;

    font-weight: 700;

    letter-spacing: 1px;
}


.slideshow-button {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 15px;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius: 50px;

    background:
        rgba(255,255,255,.1);

    color: #ffffff;

    font-family: inherit;

    font-size: .78rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease;
}


.slideshow-button:hover {
    background:
        linear-gradient(
            135deg,
            #0878df,
            #25bfc4
        );
}


/* =========================================================
   NAV ACTIVE
========================================================= */

.nav a.active {
    color: #0878df;
}


.nav a.active::after {
    width: 100%;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .gallery-hero-content {
        grid-template-columns: 1fr;

        text-align: center;

        gap: 45px;
    }


    .gallery-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }


    .gallery-hero-logo {
        width: 220px;
        height: 220px;
    }


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

        grid-auto-rows: 250px;
    }

}


@media (max-width: 700px) {

    .gallery-hero-content {
        padding-top: 65px;
        padding-bottom: 65px;
    }


    .gallery-hero-content h1 {
        letter-spacing: -1.5px;
    }


    .gallery-section {
        padding: 75px 0;
    }


    .gallery-heading {
        margin-bottom: 35px;
    }


    .gallery-grid {
        grid-template-columns: 1fr;

        grid-auto-rows: 260px;

        gap: 14px;
    }


    .gallery-item-large {
        grid-row: span 1;
    }


    .gallery-item-wide {
        grid-column: span 1;
    }


    .gallery-overlay {
        opacity: 1;

        padding: 16px;
    }


    .gallery-lightbox {
        padding: 12px;
    }


    .lightbox-image-wrapper {
        padding: 55px 45px 80px;
    }


    .lightbox-arrow {
        width: 44px;
        height: 44px;

        font-size: 2.2rem;
    }


    .lightbox-prev {
        left: 2px;
    }


    .lightbox-next {
        right: 2px;
    }

}


@media (max-width: 500px) {

    .gallery-hero-logo {
        width: 190px;
        height: 190px;
    }


    .gallery-hero-content h1 {
        font-size: 2.4rem;
    }


    .gallery-grid {
        grid-auto-rows: 235px;
    }


    .lightbox-image-wrapper {
        padding-left: 35px;
        padding-right: 35px;
    }


    .lightbox-close {
        top: 5px;
        right: 5px;

        width: 42px;
        height: 42px;
    }


    .lightbox-arrow {
        width: 40px;
        height: 40px;

        font-size: 2rem;
    }


    .lightbox-controls {
        bottom: 10px;

        gap: 12px;
    }

}