body {
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: "Roboto", sans-serif;
  line-height: 1.5;
  background-color:rgb(255, 255, 255);
  font-size: medium;
  text-align: justify;
}

header {
  display: inline-block;
  position: relative;
  color: #000000; /* Base color of your text */
  overflow: hidden;
}

h4 {
  font-weight: normal;
  font-size: medium;
}

header:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  animation: shimmer 1s linear;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.sectionheader header {
  display: flex;
  justify-content: space-between; /* Evenly spread across the row */
  align-items: center;            /* Vertically align text */
  gap: 20px;                      /* Optional spacing between items */
}

.sectionheader h4,
.sectionheader p {
  margin: 0; /* Remove default spacing so layout is clean */
}

.shoreel {
  width: 50%;
  display: block;
}

.showreel-banner {
  width: 100vw;
  height: 300px; /* adjust this value to control thickness (try 150px / 250px etc.) */
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
}

.showreel-banner video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This crops to fit while keeping video centered */
  display: block;
}

.line {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;              /* Full browser width */
  height: 1px;
  background: #000;
}

.section {
  padding-top: 20px;
  padding-bottom: 20px;
}

.showreel-link {
  font-size: large;
  font-weight: bold;
  color: #000000; /* Change to any color */
  text-decoration: none; /* Remove underline */
  cursor: pointer;
}

.showreel-link:hover {
  color: #00000087;
}

.p1 {
  font-size: small;
  text-align: justify;
}

.p1 a {
  color: #2335ff;
  text-decoration: none;
}

.p1 a:hover {
  color: #a1a2a7;
  }

div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

div.gallery-item {
  margin: 5px;
  width: 200px;
}

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

div.gallery-item div.desc {
  padding: 20px;
  text-align: center;
}

.wiggle-letter {
  display: inline-block;
  transition: transform 0.1s ease-out;
  pointer-events: none; /* ensures mouse events target the container, not letters */
}

.colour-section {
  position: relative;
}

.colour-squares {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 4px;
  overflow: hidden;
  padding: 2px;
  position: relative;
}

/* Each square cycles between bright and muted tones */
.colour-squares span {
  width: 12px;
  height: 12px;
  display: inline-block;
  animation: colourPulse 6s infinite ease-in-out;
}

/* Base colours (start in vibrant tones) */
.colour-squares span:nth-child(1) { background: #ff595e; }
.colour-squares span:nth-child(2) { background: #ffca3a; }
.colour-squares span:nth-child(3) { background: #8ac926; }
.colour-squares span:nth-child(4) { background: #1982c4; }
.colour-squares span:nth-child(5) { background: #6a4c93; }

/* Silver shimmer overlay */
.colour-squares::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: shimmer 4s infinite linear;
}

/* Keyframes for shimmer */
@keyframes shimmer {
  0% { left: -60%; }
  100% { left: 120%; }
}

/* Keyframes to swap between bright and muted */
@keyframes colourPulse {
  0%, 100% { filter: saturate(1); }      /* Full colour */
  50% { filter: saturate(0.5); }         /* Softer tone, not darker */
}


.work-with {
  display: flex;
  align-items: stretch;
  gap: 20px; /* Space between text and image */
}

.work-with .text-content {
  flex: 1 1 50%; /* Take exactly 50% */
}

.work-with .sidepics {
  flex: 1 1 50%; /* Take exactly 50% */
}

.work-with .sidepics img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill space nicely and crop if needed */
  display: block;
    filter: grayscale(60%); /* <-- This makes it black & white */
}

.work-with .sidepics img:hover {
  filter: grayscale(0%);
  transition: filter 0.5s ease;
}