@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: "Poppins", Arial, sans-serif;
    background-color: #4a90e2;
    transition: none; /* GSAP handles it */
}

.grow {
    display: inline-block;            /* needed so transform scales nicely */
    transition: transform 180ms ease; /* smooth in/out */
    transform-origin: center;
    will-change: transform;
}

.grow:hover,
.grow:focus-visible {
    transform: scale(1.04);
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    a {
      transition: none;
    }
}

/* ====== Gradient Background (DESKTOP) ====== */
.cont {
    position: absolute;
    margin: auto;
    width: calc(100% + 400px);
    height: 100%;
    top: -10px;
    left: -10px;
    filter: blur(30px) contrast(40);
}
.cont .background {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      270deg,
      #ff4e50,
      #fc913a,
      #f9d423,
      #eae374,
      #e1f5c4,
      #7de2d1,
      #4a90e2,
      #9013fe
    );
    background-size: 800% 800%;
}
.cont .background .center-back {
    display: block;
    margin: auto;
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    box-sizing: border-box;
    border: solid 80px gray;
    background-color: white;
    border-radius: 50%;
}
.cont .background .center-circle {
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 125px);
  left: calc(50% - 125px);
  width: 250px;
  height: 250px;
}
.cont .background .horizontal-blob {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
  top: calc(45% - 20px);
  border-radius: 50%;
  animation: horizontalMovement 4s ease-in-out infinite alternate;
  border: solid 40px gray;
  mix-blend-mode: multiply;
}
@keyframes horizontalMovement {
  from {
    left: calc(10% - 90px);
  }
  to {
    left: calc(40% - 90px);
  }
}
.cont .background .bubble-effect {
  mix-blend-mode: multiply;
  position: relative;
  width: 10px;
  height: 10px;
  margin-top: -10px;
  top: 50%;
  left: 50%;
  background-color: red;
  animation: verticalRotation 10s ease-in-out infinite alternate;
}
@keyframes verticalRotation {
  from {
    top: calc(50% - 20px);
    transform: rotate(0deg);
  }
  to {
    top: calc(50% + 20px);
    transform: rotate(360deg);
  }
}
.cont .background .bubble-effect .bub {
  position: absolute;
  width: 100px;
  height: 100px;
  top: -90px;
  left: -90px;
  border: solid 40px #c8c8c8;
  background-color: rgb(255, 254, 254);
  border-radius: 50%;
  animation: innerHorizontal 1s ease-in-out infinite alternate;
}
@keyframes innerHorizontal {
  from {
    left: -50px;
  }
  to {
    left: -130px;
  }
}
.cont .background .bubble-effect:nth-child(3) .bub {
  transform: translate(30px, -49px);
}
.cont .background .bubble-effect:nth-child(4) .bub {
  transform: translate(66px, -21px);
}
.cont .background .bubble-effect:nth-child(5) .bub {
  transform: translate(33px, 30px);
}
.cont .background .bubble-effect:nth-child(6) .bub {
  transform: translate(98px, -63px);
}
.cont .background .bubble-effect:nth-child(7) .bub {
  transform: translate(-55px, -68px);
}
.cont .background .bubble-effect:nth-child(8) .bub {
  transform: translate(-57px, -86px);
}
.cont .background .bubble-effect:nth-child(9) .bub {
  transform: translate(71px, -44px);
}

/* ====== Full-screen Picture Layer ====== */
.picture {
  width: 100%;
  height: calc(100% + 100px);
  background-image: url("/assets/images/background_main.png");
  background-size: cover;
  background-position: center;
  mix-blend-mode: lighten;
  z-index: 1;
  opacity: 0.7;
}

/* ====== Top Bar ====== */
.home {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  padding: 20px 50px;
  box-sizing: border-box;
  align-items: center;
}
.logo {
  font-size: 2rem;
  color: white;
}
.logo-img {
  width: 160px;
}

.menu-div {
  cursor: pointer;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(59, 45, 21, 0.15);
  background: rgba(59, 45, 21, 0.04);
  color: #3b2d15;
  transition: all 0.3s ease;
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
}
.menu-div:hover {
  background: rgba(59, 45, 21, 0.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
  color: #3b2d15;
}

/* ====== Menu Overlay ====== */
.menu {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 50px;
  position: fixed;
  top: -100%;
  align-items: center;
  z-index: 60;
  background: #4a90e2;
  box-sizing: border-box;
  background: rgba(74, 144, 226, 0.75); /* transparency */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari */
  opacity: 0;
  transition: opacity 200ms ease;
}
.menu .background {
  position: absolute;
  font-size: 15rem;
  font-weight: 600;
  color: rgba(235, 235, 235, 0.04);
  user-select: none;
  z-index: 1;
}
.menu .exit {
  cursor: pointer;
  position: absolute;
  right: 130px;
  top: 40px;
  z-index: 10;
}
.menu-container {
  z-index: 3;
}
.options {
  list-style: none;
  padding: 0;
  margin: 0;
}
.options .nav {
  opacity: 0;
  margin-bottom: -20px;
}
.nav-link {
  color: black;
  text-decoration: none;
  font-size: 3rem;
  transition: color 0.2s ease-in-out;
}
.nav-link:hover {
  color: rgba(236, 240, 25, 0.893);
}
.information {
  margin-bottom: 24px;
}
.title {
  font-size: 2rem;
  color: rgb(170, 151, 126);
  margin: 0;
}
.right {
  padding-right: 100px;
}

/* ====== Summary Text (DESKTOP) ====== */
.intro {
  position: absolute;
  bottom: 100px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.summary {
  min-width: 300px;
  padding-left: 50px;
  line-height: 2.5em;
}

.bub h1 {
  margin: 0 0 8px 0;
  font-size: 3rem;
}
.summary p {
  margin: 0;
  font-size: 1.25em;
}

.summary h1 {
  font-size: 3em;
}

/* ====== Social Media (DESKTOP) ====== */
.social-medias {
  padding-right: 50px;
}

.social-medias .row {
  display: flex;
  gap: 20px;
}

.social-medias a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: black;
  font-size: 1.5rem;
  transition: background 0.3s, transform 0.2s;
}

.social-medias a:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-4px);
}

.social-medias .first-row {
  max-width: 180px;
}
.social-medias .second-row {
  max-width: 260px;
}
.social-medias h1 {
  font-size: 1.5em;
}
.social-medias-icons {
  margin-left: -10px;
}
/* ====== About Section (shared) ====== */
#about {
  max-width: 800px;
  margin: 100px auto;
  font-size: 1rem;
  line-height: 1.6;
  color: rgb(0, 0, 0);
  border-radius: 20px;
  text-align: justify;
}

/* === Projects section on yellow background === */

.projects-section {
max-width: 1120px;
margin: 0 auto;
padding: 1rem 1.5rem;
position: relative;
z-index: 2;
}

.projects-title-wrap {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1.5rem;
margin-bottom: 2.5rem;
}

.projects-title {
font-size: 1.5rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #4b3a1a; /* warm dark brown for contrast */
}

.projects-caption {
font-size: 0.9rem;
max-width: 22rem;
opacity: 0.85;
color: #5c4a24;
}

.projects-grid {
display: flex;
flex-direction: column;
gap: 2rem;
}

/* Card styling tuned for yellow background */
.project-item {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr);
gap: 1.75rem;
padding: 1.75rem 1.5rem;
border-radius: 20px;

background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.9);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.06),
0 0 0 1px rgba(255, 255, 255, 0.8);

color: #3b2d15; /* main text color */
}

.project-meta {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #b68a24; /* yellow accent */
margin-bottom: 0.4rem;
}

.project-title {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 0.3rem;
color: #2d200f;
}

.project-role {
font-size: 0.9rem;
color: #6a5734;
margin-bottom: 0.7rem;
}

.project-description {
font-size: 0.9rem;
color: #4e3d1f;
margin-bottom: 0.9rem;
}

.project-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}

.project-tag {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
border-radius: 999px;
padding: 0.25rem 0.7rem;
border: 1px solid rgba(182, 138, 36, 0.35);
background: rgba(255, 255, 255, 0.9);
color: #7b5a14;
}

/* Image side: keep it neutral so it sits on yellow nicely */
.project-image-wrap {
position: relative;
overflow: hidden;
border-radius: 16px;
aspect-ratio: 4 / 3;
background: radial-gradient(circle at center, #f9e3a4, #f2c95b 70%);
}

.project-image {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.9) contrast(1.05);
}

.project-image-overlay {
position: absolute;
inset: 0;
background: radial-gradient(
circle at top left,
rgba(255, 255, 255, 0.65),
transparent 60%
);
mix-blend-mode: screen;
opacity: 0.8;
pointer-events: none;
}

/* Responsive */

@media (max-width: 900px) {
.projects-title-wrap {
flex-direction: column;
align-items: flex-start;
}

.project-item {
grid-template-columns: minmax(0, 1fr);
}
}

@media (max-width: 640px) {
.projects-section {
padding: 3rem 1.25rem;
}

.project-item {
padding: 1.5rem 1.25rem;
}
}

/* === Quote styling === */

.quote {
max-width: 600px;
margin: 3rem auto;
padding: 1.8rem 2rem;
background: rgba(255, 255, 255, 0.85);
border-left: 6px solid #d7a019; /* warm accent that fits yellow */
border-radius: 12px;

box-shadow:
0 12px 30px rgba(0, 0, 0, 0.06),
0 0 0 1px rgba(255, 255, 255, 0.7);
}

.quote blockquote {
margin: 0;
padding: 0;
}

.quote p {
font-size: 1.15rem;
line-height: 1.55;
color: #3b2d15; /* deep warm brown */
}

.quote figcaption {
margin-top: 0.75rem;
font-size: 0.9rem;
color: #6a5530;
text-align: right;
font-style: italic;
}

/* Base description container */
.solo-description {
display: flex;
flex-direction: column;
gap: 0.9rem;
}

.solo-description p {
font-size: 0.9rem;
line-height: 1.6;
color: #4e3d1f;
}

/* Links inside the description */
.solo-description a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}

.solo-description a:hover {
text-decoration-thickness: 2px;
}

/* Recording projects heading */
.recording-heading {
margin-top: 0.8rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #7b5a14;
}

/* Recording list */
.recording-list {
list-style: none;
margin: 0.4rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}

.recording-list li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3rem;
font-size: 0.88rem;
color: #4e3d1f;
}

/* Small accent bullet bar on the left */
.recording-list li::before {
content: "";
width: 6px;
height: 6px;
border-radius: 999px;
background: #d7a019;
margin-right: 0.4rem;
}

/* Meta text after each recording title */
.recording-meta {
font-size: 0.8rem;
color: #7a663c;
}

/* =========================================================
   MOBILE LAYOUT
   Completely different layout on small screens:
   - Remove gradient animation
   - Make photo the main hero
   - Summary + social + about in vertical flow
   ========================================================= */
@media screen and (max-width: 768px) {

  /* hide animated gradient + blobs */
  .cont {
    display: none;
  }

  .logo-img {
    width: 100px;
  }

  /* ====== Gradient Background (MOBILE) ====== */
  .cont-mobile {
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    opacity: 0.65;
    filter: blur(20px) contrast(40);
  }

  .menu {
    top: 0;              /* stop using top to hide it on mobile */
    right: -100%;        /* hide off-canvas */
    left: auto;
    height: 100vh;
    width: 100%;
  }

  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }

  .cont-mobile .background-mobile {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(
      0deg,
      #ff4e50,
      #fc913a,
      #f9d423,
      #f3e200,
      #dc4606,
      #055e50,
      #4a90e2,
      #9013fe
    );
    background-size: 100% 800%;
  }

  .cont-mobile .background-mobile .center-back-mobile {
    display: block;
    margin: auto;
    width: 50px;
    height: 50px;
    position: absolute;
    top: calc(40% - 120px);
    left: calc(40% - 120px);
    box-sizing: border-box;
    border: solid 80px gray;
    background-color: white;
    border-radius: 50%;
  }

  .cont-mobile .background-mobile .center-circle-mobile {
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: calc(90% - 150px);
    left: calc(50% - 25px);
    width: 210px;
    height: 210px;
  }

  .cont-mobile .background-mobile .horizontal-blob-mobile {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: black;
    top: calc(10% - 10px);
    left: calc(15% + 140px);
    border-radius: 50%;
    animation: verticalMovementMobile 4s ease-in-out infinite alternate;
    border: solid 25px gray;
    mix-blend-mode: multiply;
  }

  @keyframes verticalMovementMobile {
    from {
      top: calc(10% - 10px);
    }
    to {
      top: calc(90% - 190px);
    }
  }

  .cont-mobile .background-mobile .bubble-effect-mobile {
    mix-blend-mode: multiply;
    position: relative;
    width: 10px;
    height: 10px;
    margin-top: -10px;
    top: 50%;
    left: 50%;
    background-color: red;
    animation: verticalRotationMobile 10s ease-in-out infinite alternate;
  }

  @keyframes verticalRotationMobile {
    from {
      top: calc(50% - 20px);
      transform: rotate(0deg);
    }
    to {
      top: calc(50% + 20px);
      transform: rotate(360deg);
    }
  }

  .cont-mobile .background-mobile .bubble-effect-mobile .bub-mobile {
    position: absolute;
    width: 50px;
    height: 50px;
    top: -90px;
    left: -90px;
    border: solid 10px #c8c8c8;
    background-color: rgb(255, 254, 254);
    border-radius: 50%;
    animation: innerHorizontalMobile 3s ease-in-out infinite alternate;
  }

  @keyframes innerHorizontalMobile {
    from {
      left: -50px;
    }
    to {
      left: -130px;
    }
  }

  /* nth-child mappings */
  .cont-mobile .background-mobile .bubble-effect-mobile:nth-child(3) .bub-mobile {
    transform: translate(30px, -49px);
  }

  .cont-mobile .background-mobile .bubble-effect-mobile:nth-child(5) .bub-mobile {
    transform: translate(33px, 30px);
  }

  /* picture becomes main hero */
  .picture {
    margin-top: 0;
    height: 100vh;
    opacity: 1;
    mix-blend-mode: normal;
    background-position: center top;
    background-image: url("/assets/images/new_mobile_3.png");
    width: 100%;
    mix-blend-mode: lighten;
    opacity: 0.7;
  }

  /* top bar tighter */
  .home {
    padding: 12px 16px;
  }

  .logo {
    font-size: 1.4rem;
  }

  .menu-div {
    font-size: 0.85rem;
    padding: 0.65rem 1.25rem;
  }

  /* summary & socials now in normal document flow */
  .intro {
    display: flex;
    flex-direction: column;
    position: relative;
    bottom: 0;
  }

  .summary {
    padding: 16px 16px 0 16px;
    text-align: left;
  }

  .summary h1 {
    font-size: 2.5rem;
  }
  
  .summary p {
    font-size: 0.95rem;
    margin-top: 4px;
  }

  .social-medias {
    padding: 8px 16px 24px 16px;
  }
  .social-medias-icons {
    display: flex;
  }
  .social-medias h1 {
    font-size: 1.2rem;
    margin-bottom: 8px;
  }
  .social-medias .row {
    gap: 12px;
  }
  .social-medias a {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  /* about section closer and more compact */
  #about {
    margin: 20px 16px 60px 16px;
    font-size: 0.95rem;
  }
  #about h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  /* menu overlay: mobile-optimized */
  .menu {
    padding: 0 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .menu .background {
    font-size: 8rem;
    left: 10px;
    top: 10px;
  }
  .menu .exit {
    right: 24px;
    top: 24px;
  }
  .nav-link {
    font-size: 2.2rem;
  }
  .blob-effect {
    position: absolute;
    top: calc(50% - 200px);
    z-index: 100;
    width: 200px;
    height: 200px;
    display: grid;
    place-items: center;
  }

  .blob-effect span:nth-child(1) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2px solid #a9ff68;
      border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
      transition: 0.5s;
      animation: rotate-blob 5s linear infinite;
  }

  .blob-effect span:nth-child(2) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2px solid #a9ff68;
      border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
      transition: 0.5s;
      animation: rotate-blob 4s linear infinite;
  }

  .blob-effect span:nth-child(3) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2px solid #a9ff68;
      border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
      transition: 0.5s;
      animation: rotate-blob2 10s linear infinite;
  }

  @keyframes rotate-blob {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(360deg);
      }
  }

  @keyframes rotate-blob2 {
      0% {
          transform: rotate(360deg);
      }
      100% {
          transform: rotate(0deg);
      }
  }
  
}

/* small tweak: very narrow screens */
@media screen and (max-width: 480px) {
  .summary h1 {
    font-size: 1.9rem;
  }
  .nav-link {
    font-size: 1.9rem;
  }
}


/* === Events section === */

.events-section {
  max-width: 1120px;
  margin: 0 auto 1.5rem auto;
  padding: 1rem 1.5rem;
  position: relative;
  z-index: 2;
}

/* subtle vertical timeline line */
.events-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  margin-top: 2.5rem;
}

.events-list::before {
  content: "";
  position: absolute;
  inset-block: 0.5rem 0;
  left: 18px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(215, 160, 25, 0.85),
    rgba(215, 160, 25, 0.15)
  );
}

/* header */
.events-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1.5rem;
}

.events-title {
font-size: 1.4rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #4b3a1a;
}

.events-caption {
font-size: 0.9rem;
max-width: 22rem;
color: #5c4a24;
opacity: 0.9;
}

/* event card */
.event-item {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1.5fr) auto;
gap: 1.25rem;
padding: 1.3rem 1.5rem 1.3rem 1.75rem;
border-radius: 20px;

background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.9);
box-shadow:
0 10px 26px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(255, 255, 255, 0.85);

color: #3b2d15;
}

/* small circle on the timeline */
.event-item::before {
content: "";
position: absolute;
left: 18px;
top: 1.4rem;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #4a90e2;
background: #d7a019;
transform: translateX(-50%);
}

/* date pill */
.event-date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 60px;
padding: 0.35rem 0.4rem;
border-radius: 999px;
background: rgba(215, 160, 25, 0.09);
border: 1px solid rgba(215, 160, 25, 0.4);
}

.event-day {
font-size: 1.15rem;
font-weight: 600;
line-height: 1;
}

.event-month {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.14em;
}

.event-year {
margin-top: 0.15rem;
font-size: 0.65rem;
opacity: 0.75;
}

/* main body */
.event-body {
display: flex;
flex-direction: column;
gap: 0.2rem;
}

.event-title {
font-size: 1rem;
font-weight: 600;
margin: 0;
color: #2d200f;
}

.event-meta {
font-size: 0.85rem;
color: #7a663c;
}

.event-role {
font-size: 0.85rem;
color: #4e3d1f;
}

.event-extra {
font-size: 0.8rem;
color: #7a663c;
}

/* tags */
.event-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.3rem;
}

.event-tag {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
border-radius: 999px;
padding: 0.18rem 0.6rem;
border: 1px solid rgba(182, 138, 36, 0.35);
background: rgba(255, 255, 255, 0.9);
color: #7b5a14;
}

/* CTA */
.event-cta {
display: flex;
align-items: center;
}

.event-link {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.16em;
padding: 0.45rem 0.95rem;
border-radius: 999px;
border: 1px solid rgba(59, 45, 21, 0.15);
background: rgba(59, 45, 21, 0.04);
color: #3b2d15;
text-decoration: none;
white-space: nowrap;
transition: all 0.3s ease;
opacity: 0;
transform: translateY(30px);
}

.event-link:hover {
background: rgba(59, 45, 21, 0.08);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}

/* Responsive tweaks */
@media (max-width: 900px) {
.events-header {
flex-direction: column;
align-items: flex-start;
}

.event-item {
grid-template-columns: auto minmax(0, 1fr);
}

.event-cta {
grid-column: 2 / -1;
justify-content: flex-start;
margin-top: 0.5rem;
}
}

@media (max-width: 640px) {
    .events-section {
    padding: 3rem 1.25rem 4rem;
    }

    .event-item {
    padding: 1.2rem 1.2rem 1.2rem 1.7rem;
    }

    .events-list::before {
    left: 16px;
    }

    .event-item::before {
    left: 16px;
    }
}

/* ===== Reviews carousel (CodePen-based) ===== */
/* Reviews section spacing */
.reviews-section {
    padding: 80px 20px;
  }
  
  /* Shared width container */
  .reviews-inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
  }
  
  /* Header stays aligned with carousel */
  .reviews-header {
    width: 100%;
    max-width: 1120px;
    margin-bottom: 24px;
  }
  
  /* Counter follows same grid */
  .reviews-counter {
    max-width: 1120px;
    margin: 10px auto 0;
    text-align: center;
  }
  

.reviews-carousel.carousel {
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    width: 1120px;
    max-width: 100%;
    height: clamp(220px, 28vw, 320px);
    margin-left: auto;
    margin-right: auto;
  }
  
  .reviews-slides.slides {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    transition: 0.8s ease-in-out all;
  }
  
  /* each slide takes full viewport width */
  .reviews-slides .slide {
    min-width: 100%;
    height: 100%;
    display: flex;
  }
  
  /* your card */
  .review-card {
    width: 100%;
    height: 100%;
    padding-left: 70px;
    padding-right: 70px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .review-title {
    margin: 0 0 12px;
    font-size: clamp(16px, 2vw, 20px);
  }
  
  .review-text {
    margin: 0 0 14px;
    line-height: 1.65;
    opacity: 0.92;
    font-size: clamp(14px, 1.6vw, 16px);
  }
  
  .review-source {
    margin: 0;
    opacity: 0.7;
    font-size: 14px;
  }
  
  /* Controls: same behavior as CodePen */
  .reviews-carousel.carousel:hover .controls {
    opacity: 1;
  }
  
  .reviews-carousel .controls {
    opacity: 0;
    display: flex;
    position: absolute;
    top: 50%;
    left: 0;
    justify-content: space-between;
    width: 100%;
    z-index: 10;
    transform: translateY(-50%);
    transition: all ease 0.35s;
  }
  
  .reviews-carousel .control {
    display: grid;
    place-items: center;
    height: 44px;
    width: 44px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  
  .reviews-carousel .control:active {
    transform: scale(0.96);
  }
  
  /* Counter */
  .reviews-counter {
    max-width: 980px;
    margin: 8px auto 0;
    text-align: center;
    opacity: 0.8;
    font-size: 14px;
  }
  
  /* Mobile: always show controls (since hover doesn't exist) */
  @media (max-width: 640px) {
    .reviews-carousel .controls {
      opacity: 1;
    }
  }
  
  /* ===== Contact Section ===== */
.contact-section {
  padding: 90px 20px 110px;
}

.contact-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.contact-header {
  margin-bottom: 26px;
}

.contact-title {
  margin: 0 0 10px;
}

.contact-caption {
  margin: 0;
  opacity: 0.85;
  max-width: 70ch;
}

/* Glass card form */
.contact-form {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 22px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.contact-field {
  display: grid;
  gap: 8px;
}

.contact-field--full {
  grid-column: 1 / -1;
}

.contact-label {
  font-size: 14px;
  opacity: 0.8;
}

.contact-input,
.contact-textarea {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(215, 160, 25, 0.09);
  color: #000;
  padding: 12px 14px;
  outline: none;
}

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

.contact-input::placeholder,
.contact-textarea::placeholder {
  opacity: 0.55;
}

.contact-input:focus,
.contact-textarea:focus {
  border-color: rgba(255, 255, 255, 0.28);
}

.contact-actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.contact-button {
  border: 1px solid rgba(59, 45, 21, 0.15);
  background: rgba(59, 45, 21, 0.04);
  color: #3b2d15;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
}

.contact-button:hover {
  background: rgba(59, 45, 21, 0.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.contact-button:active {
  transform: translateY(0) scale(0.98);
}

.contact-note {
  margin: 0;
  font-size: 13px;
  opacity: 0.65;
}

/* Responsive */
@media (max-width: 740px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.events-toggle { 
  margin-top: 18px; 
  display: flex; 
  justify-content: center; 
}
.events-toggle-btn {
  border: 1px solid rgba(59, 45, 21, 0.15);
  background: rgba(59, 45, 21, 0.04);
  color: #3b2d15;
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
}
.events-toggle-btn:hover {
  background: rgba(59, 45, 21, 0.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.site-footer {
  width: 100%;
  padding: 28px 0;
  margin-top: 80px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer__copy {
  font-size: 14px;
  opacity: 0.8;
}

.site-footer__nav {
  display: flex;
  gap: 16px;
}

.site-footer__link {
  font-size: 14px;
  text-decoration: none;
  color: inherit;
  opacity: 0.85;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.site-footer__link:hover {
  opacity: 1;
  transform: scale(1.03);
}

@media (max-width: 640px) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

#termsfeed-com---nb {
  max-width: 35%;
  opacity: 0.8;
}

.termsfeed-com---nb .cc-nb-main-container {
  padding: 1em;
}