:root{

    --ambient-font: #fbf0c2;
    --purple-font: #741bd4;

}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #333;
  height: 100px;
  display: flex;
  align-items: center;
  font-family: "Protest Strike", sans-serif;
}

.marquee-content {
  display: flex;
  justify-content: space-around;
  white-space: nowrap;
  gap:20%;
  animation: marquee 15s linear infinite;
}

.marquee-content span {
  margin-right: 50px;
  font-size: 3.5rem;
  color: var(--ambient-font);
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.cover{
  background-image: url(space.png);
  background-repeat: no-repeat;
  background-position-x: 5vh;
  background-position-y: 35vh ; 
  background-size: contain;
    height:100%;
    width: 100%;
    background-color:#0e0e0e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow-y: scroll;
}
body{
    height:100%;
    width:100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(to bottom, #0e0e0e, #1b1a1b 50%, #252425);
    position:relative;
    overflow-x: hidden;
}
.page2{
  height: 100vh;
    width: 100vw;
    background-color:none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}
.page3{
  height: 100vh;
    width: 95vw;
    background-color:transparent;
    display: grid;
  grid-template-columns: repeat(6, 1fr); /* 4 columns per row */
  gap: 5px; /* Space between the divs */
  align-content: start;
  margin: 0 auto;
}
.box {
  height:25vh;
  width: 25vh;
  background-color: #0e0e0e;
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 5px;
  margin-top: 30px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in-out;
}
.box h3{
  display:none;
}

.box:hover{
  transform: scale(1.1);
}

.box:nth-child(1){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg');
}
.box:nth-child(2){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg');
}
.box:nth-child(3){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg');
}
.box:nth-child(4){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg');
}
.box:nth-child(5){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-05.jpg');
}
.box:nth-child(6){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-06.jpg');
}
.box:nth-child(7){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-07.jpg');
}
.box:nth-child(8){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-08.jpg');
}
.box:nth-child(9){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-09.jpg');
}
.box:nth-child(10){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-10.jpg');
}
.box:nth-child(11){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-11.jpg');
}
.box:nth-child(12){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-12.jpg');
}
.box:nth-child(13){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-13.jpg');
}
.box:nth-child(14){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-14.jpg');
}
.box:nth-child(15){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-15.jpg');
}
.box:nth-child(16){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-16.jpg');
}
.box:nth-child(17){
  background-image: url('https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-17.jpg');
}
/* Optional: Styling for responsiveness */
@media (max-width: 600px) {
  .page3 {
    grid-template-columns: repeat(2, 1fr); /* Only 2 columns on small screens */
  }
}
.page4{
    height: 100vh;
    width: 100vw;
    background-color:none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}   
#model{
    height:60vh;
    width:60vw;
    position:absolute;
    z-index: 9999;
}
.navbar{
    height:8vh;
    width:98vw;
    display:flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top:0;
    left: 0;
    z-index: 99;
}
.navbar h1{
    margin-left: 3rem;
    font-size: 2.2em;
    color:#fff;
        font-family:"Bebas Neue", sans-serif;
        font-weight: 500;
        font-style: normal;
      
}
.navbar ul{
    display: flex;
    align-items: center;
    justify-content: center;
}
.navbar ul li{
    margin:3rem;
    list-style: none;
    
}
.navbar ul li a{
    color:#fff;
    text-decoration: none;
    cursor:pointer;
    font-size: 1.2em;
}
#search-icon{
    margin:3rem;
}
#search {
    display: none; 
    height: 2.5rem;
    width: 25vw;
    background-color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px;
    font-size: 1em;
    outline: none;
    animation: animateSearch .3s ease-out;
    
    display:none;
}

@keyframes animateSearch{
0%{
    width:0vw;
}

100%{
    width:25vw;
}
}


  .ani-links {
    width: 95.02px;
  height: 42.66px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    border: none;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
  }
  
  .ani-links .span-mother {
    display: flex;
    overflow: hidden;
  }
  
.ani-links:hover .span-mother {
    position: absolute;
  }
  
  .ani-links:hover .span-mother span {
    transform: translateY(1.2em);
  }
  
  .ani-links .span-mother span:nth-child(1) {
    transition: 0.2s;
  }
  
  .ani-links .span-mother span:nth-child(2) {
    transition: 0.3s;
  }
  
  .ani-links .span-mother span:nth-child(3) {
    transition: 0.4s;
  }
  
  .ani-links .span-mother span:nth-child(4) {
    transition: 0.5s;
  }
  .ani-links .span-mother span:nth-child(5) {
    transition: 0.6s;
  }
  
  .ani-links .span-mother span:nth-child(6) {
    transition: 0.7s;
  }
  
  .ani-links .span-mother span:nth-child(7) {
    transition: 0.8s;
  }
  .ani-links .span-mother2 {
    display: flex;
    position: absolute;
    overflow: hidden;
  }
  
  .ani-links .span-mother2 span {
    transform: translateY(-1.2em);
  }
  
  .ani-links:hover .span-mother2 span {
    transform: translateY(0);
  }
  
 .ani-links .span-mother2 span {
    transition: 0.2s;
  }
  
  .ani-links .span-mother2 span:nth-child(2) {
    transition: 0.3s;
  }
  
  .ani-links .span-mother2 span:nth-child(3) {
    transition: 0.4s;
  }
  
  .ani-links .span-mother span:nth-child(4) {
    transition: 0.5s;
  }
  .ani-links .span-mother span:nth-child(5) {
    transition: 0.6s;
  }
  
  .ani-links .span-mother span:nth-child(6) {
    transition: 0.7s;
  }
  
  .ani-links .span-mother span:nth-child(7) {
    transition: 0.8s;
  }



  .main{
    height:100vh;
    width:100vw;
    background-color: transparent;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

#glow{
position: absolute;
z-index: 1;
top:12%;
left:50%;
height:2px;
width: 2px;
border-radius: 50%;
border:none;
background-color:rgba(255, 255, 255),0.5;
color: #ffd000;
-webkit-box-shadow:0px 0px 300px 200px rgba(255,239,173,0.4);
-moz-box-shadow: 0px 0px 300px 200px rgba(255,239,173,0.4);
box-shadow: 0px 0px 300px 200px rgba(255,239,173,0.4);
}
.textWrapper{
  position: relative;
  z-index: 999;
  width: 35vw;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  top:15%;
  right:7%;
  transform: translate(-50%,-50%);
  background-color: none;
}
#bigText{
    color:var(--ambient-font);
    font-size: 12rem;
    padding-left: 20px;
    font-family: "Protest Strike", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 80%;
}
.textWrapperSm{
  position: absolute;
  z-index: 999;
  width: 35vw;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  top:18%;
  left:78%;
  transform: translate(-50%,-50%);
  background-color: none;
}
#smallText{
  color:var(--ambient-font);
  font-size: 12rem;
  padding-right: 20px;
  font-family: "Protest Strike", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 80%;
}
.smallWrapper{
  position: absolute;
  z-index: 999;
  width: 35vw;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  top:16%;
  left:78%;
  transform: translate(-50%,-50%);
  background-color: none;
}
#verySmall{
  color:var(--purple-font);
  font-size: 4.5rem;
  padding-right: 20px;
  font-family:"Homemade Apple", cursive;
font-weight: 600;
font-style: normal;
line-height: 80%;
}
.Hero-Wrapper{
  height:100%;
  width:100%;
  background-color: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.line-One{
  margin-top: 5%;
  height:48vh;
  width:100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
}
.line-Two{
  height:25vh;
  width:100%;
  background-color:transparent;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
}
.cards{
  height:46vh;
  width: 38.5vh;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: transparent;
  border-radius: 20px;
  border:1px solid #fff;
  position: relative;
    overflow: hidden;

}
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Prevent interaction with the video */
  object-fit: cover; /* Ensure the video covers the entire div */
  z-index: -1; /* Make sure video stays in the background */
  aspect-ratio: 16/9;
}
/* button */
.arrow-btn{
  position: absolute;
  bottom:2%;
  right:2%;
}
.button {
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0;
  overflow: hidden;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  border: 0;
}

.button:before,
.button:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 7px;
}

.button:before {
  border: 4px solid #f0eeef;
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

.button:after {
  border: 4px solid #96daf0;
  transform: scale(1.3);
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
}

.button:hover:before,
.button:focus:before {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.button:hover:after,
.button:focus:after {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

.button-box {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.button-elem {
  display: block;
  width: 15px;
  height: 15px;
  margin: 17px 18px 0 18px;
  transform: rotate(180deg);
  fill: #ffffff;
}

.button:hover .button-box,
.button:focus .button-box {
  transition: 0.4s;
  transform: translateX(-56px);
}
.cardSmText{
  width:80%;
  height:60%;
  overflow: scroll;
  color:#fff;
  font-size: 1.5rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  position: absolute;
  top: 5%;
  left:5%;
  z-index: 1;
  display: none;
}
.cardText{
  color:#fff;
  font-size: 3.5rem;
  font-family: "Protest Strike", sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: 80%;
  position: absolute;
  bottom: 5%;
  left:5%;
  z-index: 1;
}

.cards:hover .cardText{
  animation: animateText 0.5s ease-in forwards; 
}

@keyframes animateText {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(-20px);
    opacity: 1;
  }
}

.heroTextContainer {
  height: 25vw;
  width: 50vw;
  margin-left: 25%;
  margin-top:10%;
  position: relative !important;
  overflow: hidden; /* Ensures text stays inside */
}


#heroText {
  color: rgba(0, 0, 0, 0.3);
  font-size: 7rem;
  font-family: "Protest Strike", sans-serif;
  font-weight: 600;
  line-height: 95%;
  position: relative;
  top: 5%;
  left: 1%;
  z-index: 10;
  padding-left: 5px;
  white-space: nowrap !important;
}

#heroText-hover {
  color: var(--purple-font);
  font-size: 7rem;
  font-family: "Protest Strike", sans-serif;
  font-weight: 600;
  line-height: 95%;
  position: absolute;
  top: 5%;
  left: 1%;
  z-index: 10;
  padding-left: 5px;
  width: 0; /* Start width for animation */
  white-space: nowrap; /* Prevent breaking lines */
  overflow: hidden; /* Hide overflowing text */
}


.vital-signs-container {
  text-align: center;
  width: 90%;
  max-width: 100vw;
}

/* Title */
.title {
  font-size: 2rem;
  margin-bottom: 20px;
  letter-spacing: 2px;
}

/* Vital Signs Grid */
.vital-signs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Vital Card */
.vital-card {
  background-color: #1e1e1e;
  color:#fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  text-align: left;
}

.vital-card h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.vital-data {
  display: flex;
  align-items: baseline;
}

.arrow-up {
  color: red;
  font-size: 1.5rem;
  margin-right: 5px;
}

.arrow-down {
  color: #00f;
  font-size: 1.5rem;
  margin-right: 5px;
}

.data-value {
  font-size: 2.5rem;
  margin-right: 10px;
}

.unit {
  font-size: 0.9rem;
}

/* Show All Button */
.show-all-btn {
  margin-top: 20px;
  background-color: #f00;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

.show-all-btn:hover {
  background-color: #e00;
}