@font-face {
  font-family: 'FT Polar';
  src: url('{% static "fonts/FTPolarTrial-Regular.otf" %}') format('opentype');
  font-weight: normal;
  font-style: normal;
}


.main-colours {
  color:#490f1c;
  color: #fffff4;
  color: #d0e5ed;
  color: #afe56a;
  color: #f4b6d2;
  color: #178747;
}

.defaultBackground {
  background-color: #fffff4;
}

/* Ensure full-height layout */
html, body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #fffff4;
    transition: 0.3s background-color;
}

html {
  scroll-behavior: smooth;
}

h1, h2, h3 {
  font-family: 'mr-eaves-xl-modern';
}

/* Main content area */
main {
    flex: 1;
}

/* Background color changes */
body.changeColorPink {
  background-color: #f4b6d2;
  transition: background-color 0.5s ease;
}

body.changeColorGreen {
  background-color: #178747;
  transition: background-color 0.5s ease;
}

body.changeColorLightGreen {
  background-color: #afe56a;
  transition: background-color 0.5s ease;
}

body.changeColorBlue {
  background-color: #d0e5ed;
  transition: background-color 0.5s ease;
}

/* Text color changes */
.project-details-first.textColorChangeMoron,
.project-details-fourth.textColorChangeMoron {
  color: #490f1c;
  transition: color 0.5s ease;
}

.project-details-second.textColorChangeBeige {
  color: #fffff4;
  transition: color 0.5s ease;
}

.project-details-third.textColorChangeGreen {
  color: #178747;
  transition: color 0.5s ease;
}

/* --- Logo Positioning --- */
#logoContainer {
  top: 3rem;
  left: 3rem;
  z-index: 1000;
}

#logoContainerHome {
  position: absolute;
  top: 3rem;
  left: 3rem;
  z-index: 1000;
}

#logo {
  width: 250px; 
}

/* --- Navbar Styles --- */
.navbar {
  position: absolute;
  top: 2rem;
  right: 3rem;
  z-index: 999;
  background: none;
}

.navbar .nav-link {
  color: #fffff4;
  font-weight: bold;
  text-transform: uppercase;
  margin-left: 1rem;
}


/* --- Homepage Tags Styling --- */
.homepage-tag-container {
  position: absolute;
  top: 60vh; 
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 80vw; 
  gap: 2rem; 
}

/* Individual Tags */
.homepage-tag {
  background: #fffff4;
  color: #490f1c;
  padding: 1.5rem;
  border-radius: 20px;
  width: 22vw;
  min-width: 200px;
  min-height: 260px;
  text-align: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); 
  clip-path: polygon(
    30% 5%, 70% 5%, 70% 0, 100% 0, 100% 100%, 
    50% 100%, 20% 100%, 0 100%, 0 0, 30% 0
    );
}

/* Tag Headings */
.homepage-tag h1 {
  font-family: 'mr-eaves-xl-modern';
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
}

/* Heading Links */
.homepage-tag a {
  text-decoration: none;
  color: #490f1c;
}

/* Lylo Circle */

.lylo-circle {
  position: absolute;
  top: 90%; 
  left: 95%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px; 
  background-color: #490f1c;
  border-radius: 50%;
}

.lylo-circle-2 {
  position: absolute;
  top: 240%;
  left: 100%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px; 
  background-color: #d0e5ed;
  border-radius: 50%;
}

/* Project Section - First - Pink */

.projects-section {
  position: relative;
  z-index: 20; /* Ensure it's on top */
  padding: 4rem 2rem;
  background: #fffff4; /* your light background */
  text-align: center;
}

.project-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.project-details {
  flex: 1;
  min-width: 300px;
  color: #490f1c;
}

.project-details h1 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 10px;
}

.project-details h2 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}

.project-details p {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 5px;
}

.project-details .description {
  margin-top: 20px;
}

.project-image {
  flex: 1;
  min-width: 300px;
  height: 400px;
  background-color: #fffff4;
  border-radius: 20px;
}

.project-details-first {
  position: absolute;
  top: 150%;
  left: 5%;
  color: #d0e5ed;
  max-width: 40%;
  line-height: 1;
}

.project-image-first {
  position: absolute;
  top: 15%;
  left: 165%;
  transform: translateX(-50%);
  width: 100%;
  height: 80%;
  background-image: url('/static/images/roku-mockup.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
}

/* Project Section - Second - Green */

.project-details-second {
  position: absolute;
  top: 250%;
  left: 5%;
  color: #490f1c;
  max-width: 40%;
  line-height: 1;
}

.project-image-second {
  position: absolute;
  top: 15%;
  left: 165%;
  transform: translateX(-50%);
  width: 100%;
  height: 80%;
  background-image: url('/static/images/kmc-mockup.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
}


/* Project Section - Third - Light Green */

.project-details-third {
  position: absolute;
  top: 350%;
  left: 5%;
  color: #fffff4;
  max-width: 40%;
  line-height: 1;
}

.project-image-third {
  position: absolute;
  top: 15%;
  left: 165%;
  transform: translateX(-50%);
  width: 100%;
  height: 80%;
  background-image: url('/static/images/rg-mockup.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
}

/* Project Section - Fourth - Blue */

.project-details-fourth {
  position: absolute;
  top: 450%;
  left: 5%;
  color: #178747;
  max-width: 40%;
  line-height: 1;
}

.project-image-fourth {
  position: absolute;
  top: 15%;
  left: 165%;
  transform: translateX(-50%);
  width: 100%;
  height: 80%;
  background-image: url('/static/images/nf-mockup.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
}

/* Homepage Boxes */

/* Shared box styling for centring content */
.light-green-box,
.dark-green-box,
.burgundy-box,
.blue-circle-box,
.pink-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Light Green Box */

.light-green-box {
  position: absolute;
  width: 484.28px;
  height: 519.5px;
  background-color: #afe56a;
  clip-path: polygon( 92.419% 0.413%,3.211% 36.315%,3.211% 36.315%,2.179% 36.86%,1.342% 37.564%,0.703% 38.394%,0.266% 39.315%,0.037% 40.294%,0.018% 41.295%,0.216% 42.285%,0.634% 43.23%,1.276% 44.096%,2.146% 44.849%,80.103% 98.918%,80.103% 98.918%,81.126% 99.479%,82.2% 99.803%,83.291% 99.905%,84.365% 99.796%,85.388% 99.492%,86.327% 99.006%,87.148% 98.351%,87.817% 97.541%,88.3% 96.59%,88.563% 95.511%,99.815% 5.541%,99.815% 5.541%,99.825% 4.435%,99.589% 3.406%,99.138% 2.475%,98.501% 1.662%,97.706% 0.988%,96.785% 0.473%,95.766% 0.137%,94.679% 0.002%,93.554% 0.087%,92.419% 0.413%,94.752% 9.288%,94.752% 9.288%,94.642% 9.649%,94.49% 9.992%,94.297% 10.315%,94.067% 10.615%,93.804% 10.89%,93.51% 11.135%,93.188% 11.349%,92.841% 11.529%,92.473% 11.671%,92.086% 11.773%,92.086% 11.773%,91.317% 11.858%,90.583% 11.797%,89.899% 11.604%,89.28% 11.295%,88.742% 10.882%,88.299% 10.38%,87.967% 9.803%,87.759% 9.164%,87.693% 8.479%,87.782% 7.761%,87.782% 7.761%,87.892% 7.4%,88.044% 7.057%,88.237% 6.734%,88.466% 6.434%,88.73% 6.159%,89.024% 5.914%,89.346% 5.7%,89.693% 5.52%,90.061% 5.378%,90.448% 5.276%,90.448% 5.276%,91.217% 5.191%,91.951% 5.252%,92.635% 5.445%,93.253% 5.754%,93.792% 6.167%,94.235% 6.669%,94.567% 7.246%,94.774% 7.885%,94.841% 8.57%,94.752% 9.288% );
  top: 20vh;
  left: 5%;
}

.light-green-box h1 {
  color: #490f1c;
  text-transform: uppercase;
  font-family: "mr-eaves-xl-sans-narrow", sans-serif;
  font-weight: 900;
  margin: 0;
  font-size: 30px;
  text-align: center;
  margin-left: 10%;
}

/* Dark Green Box */

.dark-green-box {
  position: absolute;
  width: 357px;
  height: 411px;
  background-color: #178747;
  clip-path: polygon( 91.49% 0%,8.51% 0%,8.51% 0%,7.13% 0.085%,5.82% 0.331%,4.599% 0.724%,3.484% 1.251%,2.492% 1.9%,1.642% 2.655%,0.95% 3.505%,0.434% 4.436%,0.111% 5.434%,0% 6.486%,0% 93.514%,0% 93.514%,0.111% 94.566%,0.434% 95.564%,0.95% 96.495%,1.642% 97.345%,2.492% 98.1%,3.484% 98.749%,4.599% 99.276%,5.82% 99.669%,7.13% 99.915%,8.51% 100%,91.49% 100%,91.49% 100%,92.87% 99.915%,94.18% 99.669%,95.401% 99.276%,96.516% 98.749%,97.508% 98.1%,98.358% 97.345%,99.05% 96.495%,99.566% 95.564%,99.889% 94.566%,100% 93.514%,100% 6.486%,100% 6.486%,99.889% 5.434%,99.566% 4.436%,99.05% 3.505%,98.358% 2.655%,97.508% 1.9%,96.516% 1.251%,95.401% 0.724%,94.18% 0.331%,92.87% 0.085%,91.49% 0%,88.528% 12.013%,88.528% 12.013%,88.353% 12.484%,88.109% 12.933%,87.801% 13.356%,87.433% 13.749%,87.012% 14.107%,86.541% 14.429%,86.026% 14.708%,85.471% 14.943%,84.882% 15.129%,84.264% 15.263%,84.264% 15.263%,83.033% 15.373%,81.859% 15.294%,80.765% 15.042%,79.776% 14.637%,78.914% 14.097%,78.206% 13.441%,77.674% 12.686%,77.342% 11.851%,77.236% 10.955%,77.379% 10.015%,77.379% 10.015%,77.554% 9.544%,77.798% 9.095%,78.106% 8.672%,78.473% 8.28%,78.895% 7.921%,79.365% 7.6%,79.881% 7.32%,80.435% 7.085%,81.024% 6.899%,81.643% 6.766%,81.643% 6.766%,82.873% 6.655%,84.047% 6.735%,85.141% 6.986%,86.131% 7.391%,86.992% 7.931%,87.701% 8.588%,88.233% 9.342%,88.564% 10.177%,88.671% 11.074%,88.528% 12.013% );
  top: 10vh;
  left: 41%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark-green-box h1 {
  color: #f4b6d2;
  text-transform: uppercase;
  font-family: "mr-eaves-xl-sans-narrow", sans-serif;
  font-weight: 900;
  margin: 0;
  font-size: 30px;
}

/* Burgundy Box */

.burgundy-box {
  position: absolute;
  width: 300px;
  height: 343px;
  background-color: #490f1c;
  clip-path: polygon( 8.815% 100%,91.185% 100%,91.185% 100%,92.615% 99.885%,93.971% 99.551%,95.236% 99.016%,96.391% 98.299%,97.418% 97.418%,98.299% 96.391%,99.016% 95.236%,99.551% 93.971%,99.885% 92.615%,100% 91.185%,100% 8.815%,100% 8.815%,99.885% 7.385%,99.551% 6.029%,99.016% 4.764%,98.299% 3.609%,97.418% 2.582%,96.391% 1.701%,95.236% 0.984%,93.971% 0.449%,92.615% 0.115%,91.185% 0%,8.815% 0%,8.815% 0%,7.385% 0.115%,6.029% 0.449%,4.764% 0.984%,3.609% 1.701%,2.582% 2.582%,1.701% 3.609%,0.984% 4.764%,0.449% 6.029%,0.115% 7.385%,0% 8.815%,0% 91.185%,0% 91.185%,0.115% 92.615%,0.449% 93.971%,0.984% 95.236%,1.701% 96.391%,2.582% 97.418%,3.609% 98.299%,4.764% 99.016%,6.029% 99.551%,7.385% 99.885%,8.815% 100%,8.29% 83.664%,8.29% 83.664%,8.472% 83.023%,8.724% 82.413%,9.044% 81.838%,9.424% 81.305%,9.861% 80.817%,10.348% 80.381%,10.882% 80%,11.456% 79.681%,12.066% 79.428%,12.707% 79.247%,12.707% 79.247%,13.981% 79.097%,15.198% 79.205%,16.331% 79.547%,17.356% 80.097%,18.248% 80.831%,18.982% 81.723%,19.533% 82.749%,19.877% 83.884%,19.987% 85.102%,19.839% 86.379%,19.839% 86.379%,19.658% 87.02%,19.405% 87.63%,19.086% 88.204%,18.705% 88.738%,18.269% 89.225%,17.781% 89.662%,17.247% 90.042%,16.673% 90.361%,16.063% 90.614%,15.422% 90.795%,15.422% 90.795%,14.148% 90.946%,12.931% 90.837%,11.798% 90.496%,10.773% 89.945%,9.881% 89.212%,9.147% 88.319%,8.596% 87.293%,8.253% 86.159%,8.143% 84.941%,8.29% 83.664% );
  left: 75%;
  top: -10vh;
}

.burgundy-box h1 {
  color: #f4b6d2;
  text-transform: uppercase;
  font-family: "mr-eaves-xl-sans-narrow", sans-serif;
  font-weight: 900;
  margin: 0;
  font-size: 30px;
}

/* Pink Box */

.pink-box {
  position: absolute;
  top: 80vh;
  left: 35%;
  width: 564px;
  height: 313px;
  background-color: #f4b6d2;
  clip-path: polygon( 91.712% 0%,8.288% 0%,8.288% 0%,6.943% 0.231%,5.668% 0.899%,4.479% 1.967%,3.393% 3.401%,2.427% 5.163%,1.599% 7.217%,0.925% 9.527%,0.422% 12.056%,0.108% 14.769%,0% 17.629%,0% 82.371%,0% 82.371%,0.108% 85.231%,0.422% 87.944%,0.925% 90.473%,1.599% 92.783%,2.427% 94.837%,3.393% 96.599%,4.479% 98.033%,5.668% 99.101%,6.943% 99.769%,8.288% 100%,91.712% 100%,91.712% 100%,93.057% 99.769%,94.332% 99.101%,95.521% 98.033%,96.607% 96.599%,97.573% 94.837%,98.401% 92.783%,99.075% 90.473%,99.578% 87.944%,99.892% 85.231%,100% 82.371%,100% 17.629%,100% 17.629%,99.892% 14.769%,99.578% 12.056%,99.075% 9.527%,98.401% 7.217%,97.573% 5.163%,96.607% 3.401%,95.521% 1.967%,94.332% 0.899%,93.057% 0.231%,91.712% 0%,92.197% 32.652%,92.197% 32.652%,92.027% 33.933%,91.789% 35.153%,91.489% 36.302%,91.131% 37.369%,90.721% 38.344%,90.262% 39.217%,89.761% 39.978%,89.221% 40.616%,88.647% 41.122%,88.045% 41.484%,88.045% 41.484%,86.846% 41.785%,85.703% 41.568%,84.637% 40.885%,83.674% 39.784%,82.835% 38.317%,82.145% 36.532%,81.627% 34.48%,81.304% 32.211%,81.2% 29.775%,81.339% 27.222%,81.339% 27.222%,81.51% 25.94%,81.748% 24.72%,82.048% 23.572%,82.405% 22.505%,82.816% 21.529%,83.274% 20.656%,83.776% 19.896%,84.316% 19.257%,84.889% 18.752%,85.492% 18.389%,85.492% 18.389%,86.69% 18.089%,87.834% 18.305%,88.899% 18.989%,89.863% 20.089%,90.702% 21.557%,91.392% 23.341%,91.91% 25.393%,92.233% 27.662%,92.336% 30.098%,92.197% 32.652% );
}

.pink-box h1 {
  color: #490f1c;
  text-transform: uppercase;
  font-family: "mr-eaves-xl-sans-narrow", sans-serif;
  font-weight: 900;
  margin: 0;
  font-size: 30px;
}

/* Blue Box */

.blue-circle-box {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: #d0e5ed;
  clip-path: polygon( 0% 50%,0% 50%,0.654% 58.109%,2.549% 65.802%,5.58% 72.976%,9.646% 79.528%,14.643% 85.354%,20.469% 90.352%,27.021% 94.418%,34.195% 97.451%,41.889% 99.345%,50% 100%,50% 100%,58.111% 99.346%,65.805% 97.451%,72.979% 94.42%,79.531% 90.354%,85.357% 85.357%,90.354% 79.531%,94.42% 72.979%,97.451% 65.805%,99.346% 58.111%,100% 50%,100% 50%,99.346% 41.889%,97.451% 34.195%,94.42% 27.021%,90.354% 20.469%,85.357% 14.643%,79.531% 9.646%,72.979% 5.58%,65.805% 2.549%,58.111% 0.654%,50% 0%,50% 0%,41.889% 0.654%,34.195% 2.549%,27.021% 5.58%,20.469% 9.646%,14.643% 14.643%,9.646% 20.469%,5.58% 27.021%,2.549% 34.195%,0.654% 41.889%,0% 50%,20.189% 24.598%,20.189% 24.598%,20.706% 24.744%,21.199% 24.949%,21.663% 25.206%,22.094% 25.514%,22.488% 25.866%,22.841% 26.26%,23.148% 26.691%,23.406% 27.155%,23.61% 27.648%,23.757% 28.166%,23.757% 28.166%,23.878% 29.196%,23.791% 30.178%,23.515% 31.094%,23.07% 31.922%,22.477% 32.643%,21.756% 33.236%,20.927% 33.681%,20.011% 33.958%,19.027% 34.047%,17.995% 33.928%,17.995% 33.928%,17.477% 33.782%,16.984% 33.577%,16.52% 33.319%,16.089% 33.012%,15.695% 32.659%,15.343% 32.265%,15.035% 31.834%,14.777% 31.37%,14.573% 30.877%,14.427% 30.36%,14.427% 30.36%,14.305% 29.33%,14.393% 28.347%,14.669% 27.432%,15.113% 26.604%,15.706% 25.883%,16.427% 25.29%,17.256% 24.845%,18.173% 24.567%,19.157% 24.478%,20.189% 24.598% );
  top: 50vh;
  left: 75%
}

.blue-circle-box h1 {
  color: #490f1c;
  text-transform: uppercase;
  font-family: "mr-eaves-xl-sans-narrow", sans-serif;
  font-weight: 900;
  margin: 0;
  font-size: 30px;
  text-align: center;
}

.box-sway {
  transition: transform 0.3s ease;
}

.box-sway:hover {
  animation: sway 0.6s ease-in-out infinite alternate;
}

@keyframes sway {
  0% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(4deg);
  }
}

/* Smooth animation on transform, size, and border radius */
/* Apply to all growing boxes */
.light-green-box,
.dark-green-box,
.burgundy-box,
.blue-circle-box,
.pink-box {
  transition: all 0.6s ease-in-out;
  z-index: 10;
}

/* When growing */
.box-grow {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
  z-index: 9999;
  clip-path: none !important;
  transform: none !important;
}

.box-grow h1 {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Back to Top */

#backToTopContainer {
  position: absolute;
  top: 5700px; /* 6000px - 300px semicircle height */
  width: 100%;
  height: 300px;
  overflow: hidden;
  z-index: 10;
}

.semicircle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150vw;
  height: 300px;
  background-color: #490f1c;
  border-top-left-radius: 100% 100%;
  border-top-right-radius: 100% 100%;
  transition: transform 0.6s ease-in-out;
  z-index: 1;
}

#backToTopLink {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #f4b6d2;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  font-family: 'mr-eaves-xl-modern';
  cursor: pointer;
}

/* Grow effect */
#backToTopContainer.expand .semicircle {
  transform: translateX(-50%) scale(10);
}

/** ---------------------- **/
/** SCROLL REVEAL SECTION **/
/** ---------------------- **/

#project-gallery {
  position: relative;
  z-index: 20;
  background: #fffff4;
  padding: 4rem 2rem;
  text-align: center;
  top: 90%;
  margin-bottom: 15%;
}

.gallery-heading {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #490F1C;
}

/** Grid Layout for Cards **/
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(760px, 1fr));
  gap: 2rem;
}

/** Individual Cards **/
.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.project-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/** Image Container **/
.image-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

/** Hover Overlay **/
.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.4s ease;
}

.image-container:hover img {
  transform: scale(1.05);
}

.image-container:hover .overlay {
  opacity: 1;
}


/* Mobile Adjustments */

@media (max-width: 768px) {
  #logo {
    width: 70%;
    margin: 2rem auto;
    display: block;
  }

  #logoContainer {
    position: static;
    text-align: center;
    margin-top: 1rem;
  }

  .light-green-box,
  .dark-green-box,
  .burgundy-box,
  .blue-circle-box,
  .pink-box {
    width: 90%;
    height: auto;
    min-height: 100px;
    border-radius: 20px;
    margin: 1rem auto;
    clip-path: none !important;
    position: static !important;
  }

  .light-green-box {
    background-color: #afe56a;
  }

  .dark-green-box {
    background-color: #178747;
  }

  .burgundy-box {
    background-color: #490f1c;
  }

  .blue-circle-box {
    background-color: #d0e5ed;
  }

  .pink-box {
    background-color: #f4b6d2;
  }

  .light-green-box h1,
  .dark-green-box h1,
  .burgundy-box h1,
  .blue-circle-box h1,
  .pink-box h1 {
    font-size: 1.2rem;
    margin: 1rem 0;
    text-align: center;
  }

  .light-green-box h1,
  .blue-circle-box h1,
  .pink-box h1 {
    color: #490f1c;
  }

  .dark-green-box h1 {
    color: #f4b6d2;
  }

  .nav-link {
    padding: 0px;
  }

  .lylo-circle {
    visibility: hidden;
  }
}

/* Project Section */ 

@media (max-width: 768px) {
  .project-section,
  .project-section-second,
  .project-section-third,
  .project-section-fourth {
    position: static;
    padding: 2rem 1rem;
    margin-bottom: 3rem;
    background-color: inherit;
  }

  .project-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  /* Reset project text styles */
  .project-details-first,
  .project-details-second,
  .project-details-third,
  .project-details-fourth {
    position: static !important;
    max-width: 100%;
    width: 100%;
    padding: 0 1rem;
    color: #fffff4;
    text-align: left;
    line-height: 1.6;
  }

  .project-details h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .project-details h2 {
    font-size: 1.1rem;
    margin-top: 1.2rem;
    font-weight: bold;
  }

  .project-details p {
    font-size: 1rem;
    margin-top: 0.3rem;
  }

  .project-details .description {
    margin-top: 1rem;
  }

  /* Reset project image containers */
  .project-images-first,
  .project-images-second,
  .project-images-third,
  .project-images-fourth {
    width: 100%;
    padding: 0 1rem;
  }
  .project-images-first,
  .project-images-second,
  .project-images-third,
  .project-images-fourth {
    width: 100%;
    padding: 0 1rem;
    margin-top: 1rem;
    position: static !important;
  }
  
  .project-image-first,
  .project-image-second,
  .project-image-third,
  .project-image-fourth {
    position: relative !important;         /* overrides absolute */
    left: 0 !important;                    /* removes left offset */
    top: 0 !important;                     /* removes top offset */
    transform: none !important;           /* disables translate */
    width: 100% !important;
    display: block;
    aspect-ratio: 16 / 9;
    min-height: 180px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    margin: 0 auto;
  }  

  /* Optional: Hide floating decorative elements */
  .lylo-circle,
  .lylo-circle-2 {
    display: none;
  }
}