:root {
  --size: clamp(4rem, 1rem + 15vmin, 10rem); /* Slightly smaller max for mobile */
  --gap: 1rem; 
  --duration: 20s;
  --scroll-start: 0;
  /* Ensure this matches the width of one group */
  --scroll-end: calc(-100% - var(--gap)); 
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: papayawhip;
    --color-bg: rgba(255, 255, 255, 0.11);
    --color-bg-accent: rgba(255, 255, 255, 0.11);
  }
}

* {
  box-sizing: border-box;
}

.marq-total{
    height:35%;
    position: absolute;

}

.marq-total h2{
    text-align: center;
    font-weight: 400;
    font-size:1.1rem;
    margin-bottom:1.5rem;
}

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  /* CHANGE THIS: */

  width: max-content; /* Add this to let it grow with content */
  animation: scroll-x var(--duration) linear infinite;
}

@media (min-width: 720px){
.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  /* CHANGE THIS: */
  min-width: 70%; 
  width: max-content; /* Add this to let it grow with content */
  animation: scroll-x var(--duration) linear infinite;
}

}

@media (max-width: 720px){


}
@media (prefers-reduced-motion: reduce) {
  .marquee__group {
    animation-play-state: paused;
  }
}

.marquee--vertical {
  --mask-direction: to bottom;
}

.marquee--vertical,
.marquee--vertical .marquee__group {
  flex-direction: column;
}

.marquee--vertical .marquee__group {
  animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: -3s;
}

@keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}


/* Element styles */
/* Change .marquee svg to .marquee img */
.marquee img {
  display: grid;
  place-items: center;
  width: var(--size);
  /* Note: 'fill' won't work on <img> tags. 
     Your SVG files will keep their original colors. */
  background: var(--color-bg-accent);
  aspect-ratio: 16/9;
  padding: calc(var(--size) / 10);
  border-radius: 0.5rem;
  object-fit: contain; /* Added to keep logos from stretching */
}


/* Parent wrapper */
.wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: auto;
  max-width: 100vw;
}


@keyframes fade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.home2-wrap{
  height:60%;
  display:flex;
  flex-direction:row;
  justify-content: flex-end;

}

.div1{
  width:60%;
  height:100%;
  padding:1rem 1rem 0rem 4rem;
}

.div1 h1{
  font-size: 3.5rem;
  margin-bottom:1.8rem;
}

.div1 span{
  font-size:2rem;
  margin-left:-0.5rem;
}

.div1 p{
  font-size: 1.1rem;
  margin-top:-1.7rem;
  line-height: 1.8rem;
}

.div3{
  height: 48%;
  width:100%;
  display:flex;
  flex-direction: row;
  gap:2.5%;
  margin-top:1.5rem;
}

.div4{
  width: 30%;
  background-color: white;
  height:100%;
  border-radius:0.7rem;
  position:relative;
  overflow: hidden;
}

.div4 img{
  height: 100%;
  width:100%;
  object-fit: cover;
  
}

.div4 h1{
  margin: 0;
}

.div4 h4{
  font-weight:400;
  margin: 0;
}

.year-text{
  height:100%;
  width:100%;
  color:white;
  position: absolute;
  top:50%;
  text-align: left;
}

.div5{
  border-radius:0.7rem;
  width:67.5%;
  height: 100%;
  background-color:black;
  overflow: hidden;
}

.div5 img {
  height:100%;
  width: 100%;
  object-fit: cover;
}

.div2{
  width: 40%;
  margin-top:5%;
  height:90%;
  display: flex;
  gap:2.5%;
  padding-top: 1rem;
 
}

.div6, .div7{
  width: 45%;
  height:90%;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap:1rem;
}

.div7{
  display:flex;
  
}

.div8{
  
  height: 30%;
  width:100%;
  background-color: white;
  border-radius: 1rem;
}

.div9{
  
  height: 60%;
  width:100%;
  background: linear-gradient(to bottom,#0e3e1b,black);
  border-radius: 1rem;
  position: relative;
}

.div10{
  height: 60%;
  width:100%;
  position: relative;
  border-radius: 1rem;
  background: linear-gradient(to bottom, black,#0e3e1b);
}


.div10 .year-text{
  text-align: left; padding:1rem 1.2rem; top:0%;
}

.div9 .year-text h4{
  font-weight:400; margin:0; margin-top:-0.2rem; font-size:1.2rem;
}

.div10 .year-text h4{
  font-weight:400; margin:0; font-size:1.2rem; padding-bottom: 1rem;
}

@media screen and (max-width: 1150px) {

   .div1 h1{
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
   }

   .div1 span{
    font-size: 1.75rem;
    margin-left:0;
   }

   .div1 p{
    font-size:1.1rem;
    line-height:1.3rem;

   }
    .home, .home2, .home3, .home4, .home6 {
        position: relative !important; 
        height: auto !important;     
        min-height: 100vh;
        top: auto !important;
    }

    .home5{
      height:40rem;
    }

    .home2-wrap {
        flex-direction: column;
        height: auto;
        padding: 2rem 1rem 0rem 1rem; 
        margin-bottom:-3rem;
    }

    
    .div1, .div2 {
        width: 100% !important;
        padding: 1rem !important;
    }

    .div3 {
        flex-direction: column;
        height: auto;
        gap: 1.5rem;
    }

    .div4, .div5 {
        width: 100% !important;
        height: 300px;
    }
    /* 4. FIX STATS BOXES (div6 & div7) */
    .div2 {
        flex-direction: column;
        gap: 1.5rem;
    }

    .div6, .div7 {
        width: 100% !important;
        height: auto !important;
    }

    .div9, .div10 {
        height: 250px; /* Ensure the stat cards have height */
    }

      .year-text{
    height:100%;
    width:100%;
    color:white;
    position: absolute;
    top:50%;

  }

    /* 5. FIX MARQUEE POSITIONING */
    .marq-total {
        position: relative; /* Don't pin it to the bottom of a huge column */
        bottom: 0;
        margin-top: 3rem;
        height: auto;
        padding-bottom: 2rem;
    }

    .div6, .div7 {
        width: 100% !important;
        height: auto !important; /* Let them grow with children */
        display: flex !important;
        flex-direction: column;
        margin-bottom: 2rem;
    }

    .div7{
      flex-direction: column-reverse;
    }

    /* 2. FIX THE WHITE BOXES (.div8) */
    .div8 {
        display: block !important; /* Ensure they aren't hidden */
        height: 120px !important;  /* Give them a fixed height so they appear */
        width: 100% !important;
        background-color: white !important;
        border-radius: 1rem;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 3. ENSURE THE STAT BOXES ATTACHED TO THEM ALSO SHOW */
    .div9, .div10 {
        height: auto !important;
        min-height: 200px;
        padding-bottom: 2rem;
    }

    .div10 .year-text p{
      margin-top:0.7rem;
    }


    .div10{
      height:65%;
      background: linear-gradient(to bottom,#0e3e1b,black);
      
    }

    .div2{
      margin-top:-0.9rem;
    }

    .div10 .year-text{
      padding: 0 1.2rem;
    }

    .grad-line2, .grad-line3{
      display: none;
    }
}

.count-up{
  display: inline-block;
}





.grad-line3{
  width:90%;
    padding:0.5px;
    position:absolute;
    bottom:2rem;
    background:linear-gradient(to right, black, white, black);
}

.grad-line2{
  width:90%;
    padding:0.5px;
    position:absolute;
    top:-3rem;
    background:linear-gradient(to right, black, white, black);
}