/* ========================================================================== */
/* 1. Loading screen                                                          */
/* ========================================================================== */
/* Handles the initial visit counter overlay and circular progress indicator. */
/* -------------------------------------------------------------------------- */
/* Loading Screen Styles */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  text-align: center;
  background-color: #121212;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1); /* smoother easing */
}

#loading-counter {
  font-size: 20rem;
  font-family: "Archivo Black", sans-serif;
  font-weight: bold;
  color: #f1f1f1;
  letter-spacing: -0.05em;
}

.slide-up {
  transform: translateY(-100vh); /* Move it up by 100% of the viewport height */
}

/* Circle container in the top-right corner */
#loading-circle {
  position: absolute;
  top: 40px;
  right: 40px;
}

/* The circle itself */
#loading-circle svg {
  transform: rotate(-90deg); /* start at the top */
}

#loading-circle circle {
  fill: none;
  stroke: #f1f1f1;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.03s linear;
}


/* ========================================================================== */
/* 2. Global base styles (html, body, links)                                  */
/* ========================================================================== */
/* General Styles */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Host Grotesk", sans-serif;
  background-color: #121212;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

a {
  text-decoration: underline;
  color: #CF0;
  font-weight: normal;
}

a:hover {
  text-decoration: line-through;
}

/* ========================================================================== */
/* 3. Header and navigation                                                   */
/* ========================================================================== */
/* Base Header Styles */
header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  background-color: #121212;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.3s ease;
}

header.scroll-reveal-header {
  transform: translateY(-100%);
}

header.visible {
  transform: translateY(0);
}

/* Logo Container */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/* Logo Image */
.logo img {
  transition: all 0.3s ease;
}

/* Glitch Logo (text version) */
#glitch-logo {
  transition: all 0.3s ease;
  color: #121212;
  font-size: 1rem;
  font-family: "Archivo Black", sans-serif;
  letter-spacing: -0.05em;
  background-color: #f1f1f1;
  padding: 2px;
}

/* Left and Right Links */
.left-link,
.right-link {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #f1f1f1;
  text-decoration: none;
  font-size: 1rem;
  font-weight: normal;
}

.left-link {
  left: 40px;
}

.right-link {
  right: 40px;
}

.left-link:hover{
  text-decoration: none;
}
.right-link:hover{
  text-decoration: none;
}

.glitch {
  animation: glitch 0.3s infinite;
}

@keyframes glitch {
  0% {
    transform: translate(0, 0);
    clip: rect(0, 9999px, 0, 0);
  }
  10% {
    transform: translate(-2px, 2px);
    clip: rect(20px, 9999px, 50px, 0);
  }
  20% {
    transform: translate(3px, -3px);
    clip: rect(10px, 9999px, 30px, 0);
  }
  30% {
    transform: translate(2px, 2px);
    clip: rect(0, 9999px, 10px, 0);
  }
  40% {
    transform: translate(-2px, -2px);
    clip: rect(0, 9999px, 40px, 0);
  }
  50% {
    transform: translate(3px, -2px);
    clip: rect(10px, 9999px, 20px, 0);
  }
  100% {
    transform: translate(0, 0);
    clip: rect(0, 9999px, 9999px, 0);
  }
}

/* ========================================================================== */
/* 4. Hero section and main titles                                            */
/* ========================================================================== */
.full-viewport-paragraph {
  position: relative;
  /* Use svh (small viewport height) to account for mobile browser bars */
  height: 100svh; 
  width: 100%;
  display: flex;
  flex-direction: column; /* Stack H1 and Slogan */
  align-items: center;
  justify-content: center;
  padding: 0 5vw; /* Responsive padding */
  box-sizing: border-box;
  text-align: center;
  
  /* DYNAMIC FONT SIZE: 
     Stops it from being too small on iPhone or too big on a 4K monitor.
     Min: 2rem, Scaler: 8vw, Max: 12rem */
  font-size: clamp(2rem, 8vw, 12rem); 
  
  font-weight: bold;
  color: #121212;
  line-height: 0.9; /* Tighter for that 'Design' look */
  letter-spacing: -0.05em;
  font-family: "Archivo Black", sans-serif;
  
  /* Your visual effects */
  filter: invert(1);
  mix-blend-mode: difference;
  z-index: 10;                 
  transition: transform 0.5s ease;
  will-change: transform;
  overflow: hidden; /* Prevents unwanted scrollbars if text scales wide */
}

/* If you add an actual <svg> or <img> tag inside this div later */
.full-viewport-paragraph svg, 
.full-viewport-paragraph img {
  max-width: 80vw;
  max-height: 70svh;
  height: auto;
  width: auto;
  object-fit: contain;
}

#changing-slogan {
  color: #f1f1f1;
  font-weight: bold;
  transition: color 0.3s ease-in-out; /* Smooth transition when changing word */
  font-family: "Archivo Black", sans-serif;
  font-size: 10vw;
  letter-spacing: -0.05em;
  margin-left: -5px;
}

h2 {
  font-size: 3.2rem;
  color: #121212; /* Text color */
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  margin-bottom: -25px;
  font-family: "Archivo Black", sans-serif;
  letter-spacing: -0.05em;
  background-color: #f1f1f1
}

h3 {
  font-size: 1.3rem;
  color: #f1f1f1; /* Text color */
  font-weight: normal;
  line-height: 1.2;
}

h4 {
  font-weight: normal;
  font-size: 1rem;
  margin-top: -50px;
  color: #f1f1f1; /* Text color */
}

#changing-word {
  color: #121212;
  font-weight: 700;
  transition: color 0.3s ease-in-out; /* Smooth transition when changing word */
  font-size: 8vw;
  font-family: "Archivo Black", sans-serif;
  letter-spacing: -0.05em;
  background-color: #f1f1f1;
  padding: 3px;
  margin-left: 5px;
}

.responsive-text-block {
  color: #f1f1f1;
  padding: 40px;
  padding-top: 20px;
  text-align: justify;
}

.responsive-text-block-2 {
  color: #f1f1f1;
  padding: 40px;
  padding-top: 120px;
  text-align: left;
}

.responsive-text-block h1 {
  font-size: 5.4rem;
  margin-bottom: 20px;
  font-weight: bold;
  line-height: 1.4;
  font-family: "Archivo Black", sans-serif;
  letter-spacing: -0.05em;
  margin-left: -4px;
}

.responsive-text-block-2 h1 {
  font-size: 5.4rem;
  margin-bottom: 20px;
  font-weight: bold;
  line-height: 1.3;
  font-family: "Archivo Black", sans-serif;
  letter-spacing: -0.05em;
  margin-left: -4px;
}

/* ========================================================================== */
/* 5. Footer                                                                  */
/* ========================================================================== */
/* Footer and Carousel Styles */
footer ul {
  background-color: #121212;
  color: #f1f1f1;
  display: flex;
  flex-direction: column;
  margin: 0px;
  padding: 40px;
  list-style: none;
  font-family: "Archivo Black", sans-serif;
  font-size: 3.2rem; /* Large text size */
  line-height: 1;
  letter-spacing: -0.05em;
  border-top: solid 2px #f1f1f1;
}

footer ul li a {
  display: inline-block; /* needed so transform works properly */
  transition: transform 0.3s ease;
}

.footer-text {
  font-family: "Archivo Black", sans-serif;
  color: #f1f1f1;
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
  margin: 0;
  line-height: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  letter-spacing: -0.05em;
  font-size: 10.9vw;
  filter: none;
  transition: transform 0.5s ease, filter 0.5s ease;
  transform: scaleY(1.5) translateX(-0.025em); /* Shift left to counter negative letter-spacing drift */
}

.top-text {
  font-family: "Archivo Black", sans-serif;
  color: #f1f1f1;
  width: 100%;
  padding: 40px 40px 0;
  box-sizing: border-box;
  margin: 0;
  line-height: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  letter-spacing: -0.05em;
  font-size: 10.9vw;
  transform: scaleY(1.5) translateX(-0.025em); /* Shift left to counter negative letter-spacing drift */
  mix-blend-mode: difference;
  position: relative;
  z-index: 1001;
  padding-bottom: 20px;
}

.static-header-links {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  box-sizing: border-box;
  margin-top: -5px; /* Pull closer to the text above */
  position: relative;
  z-index: 1002;
  mix-blend-mode: difference;
}

.static-link {
  font-weight: normal;
  text-decoration: none;
  font-size: 1rem;
  color: #f1f1f1; /* Base color for blending */
  font-family: "Host Grotesk", sans-serif;
}

.static-link:hover {
  text-decoration: none;
  
}

@media (hover: hover) and (pointer: fine) {
  footer ul li a:hover {
    transform: translateX(20px);
  }
  .footer-text:hover {
  filter: blur(2px); /* tiny blur gives a distorted vibe */
}
}

/* Mobile adjustments for screens <= 768px */
@media (max-width: 768px) {
  .footer-text {
    font-size: 10.6vw;
    padding: 20px 15px 25px;
    width: 100%;
    margin: 0;
    filter: none;
  }

  .top-text {
    padding: 15px 15px 10px;
    font-size: 10.6vw;
  }

  .static-header-links {
    padding: 0 15px;
    margin-top: 0;
  }

  .static-link {
    font-size: 0.9rem;
  }

  #loading-circle {
  position: absolute;
  top: 15px;
  right: 15px;
}

#changing-slogan {
  padding-right: 10px;
}
}

/* ========================================================================== */
/* 6. Background logo                                                         */
/* ========================================================================== */
/* Background Image */
.background-image {
  position: fixed;
  bottom: -21px;   /* 40px from bottom */
  right: -11px;    /* 40px from right */
  width: 200px;
  height: 120px;
  background-image: url("/blom-logo.gif");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* Make the logo “white ink”… */
  filter: brightness(0) invert(1) blur(5px);
  /* …then blend as the inverse of whatever is behind it */
  mix-blend-mode: difference;
  z-index: 10;                 
  transition: transform 0.5s ease;
  will-change: transform;
}

/* Line Styles */
.line {
  position: absolute;
  top: 225px;
  margin-top: 100px;
  right: 0; /* Start the line at the right side of the screen */
  height: 2px; /* Height of the line */
  background-color: #f1f1f1; /* Color of the line */
  animation: expandLine 2s ease forwards; /* Animation applied */
}

.line-2 {
  position: absolute;
  top: auto;
  margin-top: auto;
  right: 0; /* Start the line at the right side of the screen */
  height: 2px; /* Height of the line */
  background-color: #f1f1f1; /* Color of the line */
  animation: expandLine 2s ease forwards; /* Animation applied */
  animation-play-state: paused; /* Pause the animation initially */
}

.line-4 {
  position: absolute;
  top: auto;
  margin-top: auto;
  left: 0; /* Start the line at the right side of the screen */
  height: 2px; /* Height of the line */
  background-color: #f1f1f1; /* Color of the line */
  animation: expandLine4 2s ease forwards; /* Animation applied */
  animation-play-state: paused; /* Pause the animation initially */
}


@keyframes expandLine {
  0% {
    width: 0; /* Line starts with zero width */
    right: 0;
  }
  100% {
    width: 100vw; /* Line expands to the full width of the viewport */
    right: 0;
  }
}

@keyframes expandLine4 {
  0% {
    width: 0; /* Line starts with zero width */
    left: 0;
  }
  100% {
    width: 100vw; /* Line expands to the full width of the viewport */
    left: 0;
  }
}

/* ========================================================================== */
/* 7. Buttons                                                                 */
/* ========================================================================== */
/* Button Styles */
.button {
  text-align: center;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  text-decoration: underline;
  color: #CF0;
}

/* ========================================================================== */
/* 8. Color splash / shrinking blob                                           */
/* ========================================================================== */
/* Color Section Styles */
.color-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f1f1f1; /* Replace with your desired color */
  z-index: -1; /* Send it behind other content */
  transition: width 0.4s ease, height 0.4s ease, top 0.4s ease, left 0.4s ease,
    transform 0.4s ease, border-radius 0.4s ease;
}

.shrink {
  width: 0px;
  height: 0px;
  top: 70px;
  left: 10px;
}

/* ========================================================================== */
/* 9. About / viewport-design section                                         */
/* ========================================================================== */
/* Viewport Design Styles */
.viewport-design {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Allows content to extend beyond viewport on mobile */
  background-color: #121212;
  font-family: "Host Grotesk", sans-serif;
  color: #f1f1f1;
}

.viewport-design__top-section {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 30px;
  padding-bottom: 10px;
}

.viewport-design__header-texts {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: normal;
  flex-wrap: wrap;
  background-color: #121212;
  margin-bottom: 30px;
}

.viewport-design__text-lines div {
  font-size: 12px;
  font-weight: normal;
  margin: 5px 0;
}

.viewport-design__text-lines hr {
  border: 0;
  height: 2px;
  background: #f1f1f1;
  margin: 5px 0;
}

.viewport-design__main-content {
  display: flex;
  flex: 1;
}

.viewport-design__left-section {
  flex: 2;
  padding: 40px;
  min-width: 0;
}

.viewport-design__right-section {
  flex: 1;
  padding: 40px;
  min-width: 0;
}

.viewport-design__label {
  font-size: 3.2rem;
  font-weight: bold;
  margin-bottom: 20px;
  font-family: "Archivo Black", sans-serif;
  letter-spacing: -0.05em;
  margin-left: -2px;
}

.viewport-design__large-text {
  font-size: 8vw; /* Reduced from 20vw to fit within viewport */
  line-height: 1.1;
  text-align: left;
  font-weight: bold;
  margin: -6px;
  margin-left: -8px;
  margin-top: -5px;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  font-family: "Archivo Black", sans-serif;
}

.viewport-design__small-text {
  font-size: 1.3rem;
  color: #f1f1f1; /* Text color */
  font-weight: normal;
  line-height: 1.2;
  text-align: justify;
  margin: 0;
  margin-top: 35px;
}

.image-container-2 { 
  width: 770px; /* Default width for desktop */ 
  max-width: 100%; /* Ensure it scales down if needed */ 
  margin-left: 40px; 
  margin-bottom: 50px; 
  position: relative; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  overflow: hidden; /* Hide any overflowing content */ } 

 .image-container img,
.image-container-2 img {
  width: 100%;   /* Make image fill the container's width */
  height: auto;  /* Maintain the image's aspect ratio */
  display: block; /* Remove inline spacing (if any) */
}


/* Responsive Styles */
/* Responsive Styles */
@media (max-width: 768px) {
  header {
    height: 40px;
  }

  .left-link,
  .right-link {
    font-size: 0.9rem;
  }

  .left-link {
    left: 15px;
  }

  .right-link {
    right: 15px;
  }

  #glitch-logo {
    transition: all 0.3s ease;
    color: #121212;
    font-size: 0.9rem;
  }

  .logo img {
    height: 150px;
    padding-top: 15%;
    transition: all 0.3s ease;
    padding-bottom: 10%;
  }

  #changing-word {
    font-weight: bold;
    transition: color 0.3s ease-in-out; /* Smooth transition when changing word */
    font-size: 50px;
    margin-left: 3px;
  }

   .image-container-2 {
    width: calc(100% - 30px); /* full width minus 15px left + 15px right */
    margin-left: 15px;
    margin-right: 15px;
  }

  .full-viewport-paragraph {
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.7rem;
    line-height: 1.1;
    color: #121212;
  }

  .full-viewport-paragraph img {
    max-width: 60vw;
    max-height: none;
  }

  .responsive-text-block {
    padding: 15px;
    padding-top: 30px;
    
  }

  .responsive-text-block h1 {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-left: -1px;
  }

  .responsive-text-block-2 {
    padding: 15px;
    padding-top: 90px;
    padding-bottom: 10px;
  }

  .responsive-text-block-2 h1 {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-left: -1px;
  }

  p {
    font-size: 0.9rem;
  }

  h2 {
    font-size: 1.1rem;
    margin-bottom: 1px;
  }

  h3 {
    font-size: 0.9rem;
    text-align: justify;
    line-height: 1.3;
  }

  h4 {
    font-size: 0.9rem;
    text-align: justify;
  }

  .background-image {
    display: none; /* Hide the image */
  }

  .line {
    display: none;
  }

  .line-3 {
    position: absolute;
    top: 80px;
    margin-top: 100px;
    right: 0; /* Start the line at the right side of the screen */
    height: 2px; /* Height of the line */
    background-color: #f1f1f1; /* Color of the line */
    animation: expandLine 2s ease forwards; /* Animation applied */
  }

  #loading-counter {
    font-size: 8rem;
  }

  .button {
    font-size: 0.9rem;
  }

  /* Viewport Design Responsive Styles */
  .viewport-design__main-content {
    flex-direction: column; /* Stack sections vertically */
  }

  .viewport-design__left-section,
  .viewport-design__right-section {
    padding: 15px;
  }

  .viewport-design__top-section {
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .viewport-design__label {
    font-size: 1.6rem; /* Fixed size for mobile */
    margin-bottom: 15px;
    margin-left: -1px;
  }

  .viewport-design__large-text {
    font-size: 50px; /* Fixed size for mobile */
    margin: 0;
    margin-left: -3px;
    margin-top: -7px;
    line-height: 1.2;
  }

 .viewport-design__small-text {
  font-size: 0.9rem;
  margin-top: 15px;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  filter: blur(6px);
  transition: 
    opacity 0.9s ease-out,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s ease-out;
}

.viewport-design__small-text.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

  .viewport-design__header-texts{
    font-size: 0.9rem; /* Fixed size for mobile */
    margin-bottom: 20px;
  }
  .full-width-bar {
    width: 100%;
    height: 45px;
    background-color: #121212;
  }
  footer ul {
    font-size: 1.6rem; /* Smaller text size */
    line-height: 1.2;
    padding: 15px;
    margin-left: -1px;
  }

  #changing-slogan {
  margin-left: -1px;
}

}

/* ========================================================================== */
/* 10. Reusable text sections & phrases                                       */
/* ========================================================================== */
/* General styles for all sections */
.section {
  padding: 40px;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: auto; /* Fixed height for consistency */
}

/* First Section Styles */
.section-two {
  color: #f1f1f1; /* #f1f1f1 text */
  background-color: #121212; /* Solid orange */
}

/* Text Styles */
.primary-text{
  font-size: 1.3rem; /* Large text size */
  margin: 0; /* Remove default margins */
  line-height: 1;
  font-weight: bold;
  text-align: left;
  font-family: "Archivo Black", sans-serif;
  letter-spacing: -0.05em;
}

.phrase {
  font-size: 3.2rem; /* Large text size */
  margin: 0; /* Remove default margins */
  line-height: 1.2;
  font-family: "Archivo Black", sans-serif;
  letter-spacing: -0.05em;
  margin-left: -2px;
}

   .phrase2 {
    font-size: 3.2rem;
    margin: 0;
    line-height: 1.2;
    font-family: "Archivo Black", sans-serif;
    letter-spacing: -0.05em;
    color: #121212;
    white-space: nowrap;
    overflow: hidden;
    border-right: 0.15em solid #121212; /* cursor */
    width: 0;
    background-color: #f1f1f1;
    text-align: right;
  }

  .phrase2.animate {
    animation: typing 2s steps(36, end) forwards,
               blink 0.75s step-end infinite;
  }

  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }

  @keyframes blink {
    0%, 100% { border-color: transparent }
    50% { border-color: #121212 }
  }

/* Hover Effects */

/* Responsive Design */
@media (max-width: 768px) {
  .section {
    padding: 15px; /* Reduced padding for smaller screens */
    height: auto; /* Height adjusts to content */
  }

  .phrase {
    font-size: 1.6rem; /* Smaller text size */
    line-height: 1.2;
    margin-left: -1px;
  }
  .phrase2 {
    font-size: 1.6rem;}
    
  .primary-text{
    font-size: 0.9rem; /* Smaller text size */
    line-height: 1.2;
  }

}

/* ========================================================================== */
/* 11. Eye section component                                                  */
/* ========================================================================== */
.eye-section {
  width: 100vw;
  height: 80vh;
  background-color: #121212;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.eye {
  width: 20vw;
  height: 20vw;
  background-color: #1500ff;
  border-radius: 1%;
  position: relative;
}

.pupil {
  width: 15vw;
  height: 15vw;
  background-color: #f1f1f1;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease-out;
}

/* Mobile adjustments for screens up to 768px */
@media (max-width: 768px) {
  .eye-section {
    height: 80vh;
  }

  .eye {
    width: 50vw;
    height: 50vw;
  }

  .pupil {
    width: 37vw;
    height: 37vw;
  }
}

/* ========================================================================== */
/* 12. Project image containers & overlay                                     */
/* ========================================================================== */
/* Shared container style */
.image-container {
  width: 770px; /* Desktop default */
  max-width: 100%;
  margin-left: 40px;
  margin-bottom: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

@media (max-width: 768px) {
   .image-container {
    width: calc(100% - 30px); /* full width minus 15px each side */
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px; /* a bit tighter on mobile */
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
  color: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* allows click on the link */
  font-family: "Archivo Black", sans-serif;
  letter-spacing: -0.05em;
  font-size: 3.2rem;
}

@media (min-width: 768px) {
  .image-container:hover .overlay {
    opacity: 1;
  }
}

/* ========================================================================== */
/* 13. "Design beliefs" / experience / education lines                        */
/* ========================================================================== */
.unique-lines-container {
  margin: 40px;              /* Overall 40px margin on sides */
  margin-bottom: 120px;
  margin-top: 20px;
}

.section-title {
  font-size: 3.2rem;
  letter-spacing: -0.05em;
  margin-bottom: 35px;       /* Space below title */
  margin-left: -3px;
  text-align: left;          /* Align to left, adjust as needed */
  font-family: "Archivo Black", sans-serif;
  color: #f1f1f1;
}

.hoverable-line-row {
  margin-bottom: 10px;        /* Space between lines */
}

.hover-arrow {
  width: 1rem; /* Use rem for better scaling with font-size */
  height: 1rem; /* Use rem for better scaling with font-size */
  margin-left: 5px;
  display: none; /* Hidden by default */
  vertical-align: text-bottom;
}

@media (hover: hover) and (pointer: fine) {
  .hoverable-line-row:hover .left-side-text  {
    transform: translateX(20px);
    background-color: #CF0;
    color: #121212;
    padding-left: 2px;
    padding-right: 2px;
  }

  .hoverable-line-row:hover img.hover-arrow {
    display: inline-block;
  }
}

.text-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;        /* Small space between text and line */
  font-weight: normal;
}

.left-side-text {
  text-align: left;
  font-size: 1rem;
  white-space: wrap;       /* Prevent text wrapping */
  text-transform: uppercase;
  transition: transform 0.3s ease, filter 0.3s ease;
  color: #f1f1f1;
}

.right-side-text {
  text-align: right;
  font-size: 1rem;
  white-space: wrap;       /* Prevent text wrapping */
  text-transform: uppercase;
  color: #f1f1f1;
}

.connecting-line {
  height: 2px;
  background-color: #f1f1f1;   /* #f1f1f1 line, adjust as needed */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .unique-lines-container {
    margin: 15px;            /* Overall margin on sides */
    margin-bottom: 40px;
  }

  .section-title {
    font-size: 1.6rem;
    margin-bottom: 15px;     /* Space below title */
    margin-left: -1px;
  }

   .text-container {
    flex-direction: column; /* Stack text vertically */
    align-items: flex-start; /* Align to left */
  }

  .right-side-text {
    text-align: left;
    text-transform: uppercase;
    white-space: normal;       /* Prevent text wrapping */
    font-size: 12px;
  }

  .left-side-text {
    text-align: left;
    text-transform: uppercase;
    white-space: normal;     /* Allow wrapping */
    font-size: 12px;
  }
}

/* ========================================================================== */
/* 14. Bottom marquee banner                                                  */
/* ========================================================================== */
 .banner {
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      width: 100%;
      background: #f1f1f1;
      color: #121212;
      font-weight: bold;
      font-size: 3.2rem;
      font-family: "Archivo Black", sans-serif;
      letter-spacing: -0.05em;
      padding-bottom: 10px;
      padding-top: 10px;
      margin-bottom: 120px;

    }

    .banner-track {
      display: inline-block;
      padding-left: 100%; /* start off-screen */
      animation: scroll-left 6s linear infinite;
    }

    @keyframes scroll-left {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }

    /* Responsive font size */
    @media (max-width: 768px) {
      .banner {
        font-size: 1rem;
        margin-bottom: 40px;
        padding-bottom: 5px;
        padding-top: 5px;
      }
    }

/* ========================================================================== */
/* 15. Project View Toggles                                                   */
/* ========================================================================== */
.projects-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.view-toggles {
  display: flex;
  position: relative;
  z-index: 20;
}

.toggle-btn {
  background: none;
  border: none;
  color: #f1f1f1;
  font-family: "Host Grotesk", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
  margin-left: 10px;
}

.toggle-btn.active {
  opacity: 1;
  text-decoration: line-through;
  color: #CF0;
}

.project-list-image-reveal {
  position: fixed;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
  width: 40vw;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-list-image-reveal.active {
  opacity: 1;
}

.project-list-image-reveal img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
  .projects-header-container {
    flex-direction: column;
    align-items: stretch; /* Allow children to fill the width */
  }

  .view-toggles {
    justify-content: flex-end; /* Align buttons to the right */
    margin-right: 0px;
  }

  .toggle-btn {
    margin-left: 20px;
    margin-right: 0;
    font-size: 0.9rem;
  }
}