.aboutinitial-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 110vh;
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor:progress;
    clip-path: ellipse( 100% 100% at 50% 0%);

}

.Aboutme {
    top: 10%;
    font-size: 48px;
    font-weight: bold;
    color: white;
    animation: fadeInOut 5s ease-out forwards;
}


.Aboutpage {
    height: 60vh; 
    position: relative;
    transition: top 0.5s ease-in-out;

    
  }
    
.background-container {
    background-image: url('aboutmebackground.jpg');
    background-size:cover;
    background-repeat: no-repeat; /* Prevent the image from repeating */
    height: 100%; /* Set the heightf the container to 100% of the viewport height */
    position: relative; /* Required for stacking elements */
    z-index: 1;
    overflow-x: hidden;
}
.abouthorizontalline {
    position: absolute;
    top: 0.5%;
    left: 0%;
    width: 100%;
    height: 9%; /* Adjust the height of the line as needed */
    background-color: rgba(0, 0, 0, 0.57); /* Change the color of the line */
    z-index: 3;
    overflow-x: hidden;

  }
 
.about:hover, .work:hover, .contact:hover {
    color: rgb(255, 255, 255); 
    text-shadow: 5px 12px 10px white;
    animation: shiver 0.1s infinite;
    }
    .work {
      z-index: 3;
  
  }

/* 
______________________________________________________________________________________________ */


.about-page {
    position: absolute;
    left: 0;
    width: 100%;
    height: 500%;
    text-align: center;  
    background-color: #f5f5f5;
    z-index: 2; /* Set z-index higher than homepage */
    transition: top 0.01s ease-in-out; /* Apply transition to 'top' property */
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    animation: fade-in-slide5 1s linear forwards;
    animation-timeline: view()
    
  } 
  @keyframes fade-in-slide5 {
    from {   clip-path: ellipse( 280% 95% at 50% 0%);
  
    }
    to {  clip-path: ellipse( 100% 95% at 50% 0%);
  
    }
  }
  
  .myself {
    font-size: 2vw; /* Adjust the font size to a reasonable value */
    color: rgb(0, 0, 0);
    font-family: Georgia, 'Times New Roman', Times, serif;
    line-height: 1.5; 
    position: absolute;
    left: 6%;
    top: 3%;
    max-width: 70%;
    text-align: left;
    /* animation: fadeout 1s linear forwards;
    animation-timeline: view() */
  } 

  .myself3 {
    font-size: 6vw; /* Adjust the font size to a reasonable value */
    color: rgba(30, 32, 48);
    font-family: Georgia, 'Times New Roman', Times, serif;
    line-height: 1.7; 
    position: absolute;
    left: 10%;
    top: 13.5%;
    max-width: 59%;
    text-align: center;
    z-index: 3;
  
  }

  @keyframes fadeout {
    from {   opacity: 1;      transform: scale(1);

  
    }
    to {  opacity: 1;      transform: scale(0.9);

  
    }
  }


  
  @media only screen and (max-width: 375px) {
 
  }
  /* Mobile portrait (less than 480px) */
  @media only screen and (min-width: 375px) and (max-width: 479px) {
    .myself {
      font-size:4vw; /* Adjust the font size to a reasonable value */
      max-width: 84%;
      text-align: left;
      left: 1%;
      top: 2.2%;
      animation: fadeout 1s linear forwards;
      animation-timeline: view()
    } 

    .myself3 {
      font-size: 11vw; /* Adjust the font size to a reasonable value */
      left: 5%;
      top: 13.5%;
      max-width: 69%;
    }
    
  }
  /* Mobile landscape (less than 768px) */
  @media only screen and (min-width: 479px) and (max-width: 600px) {
     
  }
  @media only screen and (min-width: 600px) and (max-width: 767px) {
     
  }
  
  /* Tablet portrait (less than 992px) */
  @media only screen and (min-width: 767px) and (max-width: 991px) {
    
  }
  
  /* Tablet landscape (less than 1200px) */
  @media only screen and (min-width: 991px) and (max-width: 1200px) {

    
  }
   @media only screen and (min-width: 1200px) and (max-width: 1400px) {

    
  }
  
   @media only screen and (min-width: 1400px) and (max-width: 1600px) {
        
  .myself {
    font-size: 2vw; /* Adjust the font size to a reasonable value */
    color: rgb(0, 0, 0);
    font-family: Georgia, 'Times New Roman', Times, serif;
    line-height: 1.5; 
    position: absolute;
    left: 6%;
    top: 3%;
    max-width: 70%;
    text-align: left;
    /* animation: fadeout 1s linear forwards;
    animation-timeline: view() */
  } 

  .myself3 {
    font-size: 6vw; /* Adjust the font size to a reasonable value */
    color: rgba(30, 32, 48);
    font-family: Georgia, 'Times New Roman', Times, serif;
    line-height: 1.7; 
    position: absolute;
    left: 10%;
    top: 13.5%;
    max-width: 59%;
    text-align: center;
    z-index: 3;
  
  }
  
  }
  @media only screen and (min-width: 1600px) and (max-width: 2550px) {
  }
  
  /*4K*/
  @media only screen and (min-width: 2550px) and (max-width: 3000px) {
  }

  .aboutcircle0 {
    position: absolute;
    width: 1.3vw;
    height: 1.3vw;
    background-color: rgb(30, 32, 48);
    border-radius: 50%;
    left: 10.45%;
    opacity: 1; /* Start hidden */
    animation: fade-in 1s linear forwards;
   }
  
  .aboutcircle1 {
    top: 24%;
  
  }
  
  .aboutcircle2 {
    top: 33%;
   }
  
  .aboutcircle3 {
    top: 42%;
    }
  .aboutcircle4 {
    top: 51%;
    }
  

  
  @keyframes fade-in {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(2.5);
    }
  }

  .vertical-line {
    position: absolute;
    top: 17.95%; /* Position the line just below the menu container */
    left: 11%;
    width: 0.3vw;
    height: 34%; /* Adjust the height of the line as needed */
    background-color: rgb(30, 32, 48);    
    animation: fade-in1 linear forwards;
    animation-timeline: view();
  }
  
  @keyframes fade-in1{
    from {
      max-height: 0;
    }
    to {
      max-height: 1800px;
    }
  }

  .school0{
    font-size: 2.2vw; /* Adjust the font size to a reasonable value */
    color: rgb(0, 0, 0);
    font-family: Georgia, 'Times New Roman', Times, serif;
    position: absolute;
    left:14%;
    top: 30%;
    font-style: bold;
    max-width: 70%;
    text-align: left;
    animation: slideleft 1s linear forwards;
    animation-timeline: view()
  } 

  @keyframes slideleft {
    from {   opacity: 0.8;      transform: scale(0.92);

  
    }
    to {  opacity: 1;      transform: scale(1);
  
    }
  }

  .asu{
    top:23.5%;
  }
  .ucd{
    top: 32.5%;
  }
  .swami{
    top: 41.5%;
  }
  .ies{
    top: 50.5%;
  }

  .gpa0{
    font-size: 1.5vw; /* Adjust the font size to a reasonable value */
    color: #5f518a;
    font-family: Georgia, 'Times New Roman', Times, serif;
    position: absolute;
    left:15%;
    top: 1%;
    font-style: bold;
    max-width: 70%;
    text-align: left;
  } 

  .asugpa{
    top: 26%;
  }
  .ucdgpa{
    top: 35%;

  }
  .swamigpa{
    top: 43.5%;
  }
  .iesgpa{
    top: 52.5%;
  }

  

  .aboutcircle5 {
    width: 28%;
  height: 14%;
  background-color: rgb(30, 32, 48);
  clip-path: ellipse( 85% 100% at 100% 100%);
  position: absolute;
  top:0%;
  right: 0px;
  overflow: hidden;
  overflow-x: hidden; 
  z-index: 5;
}
.aboutcircle6 {
position: absolute;
background-color: rgba(30, 32, 48, 0.895);
width: 23.8%; 
height: 14%; 
border-bottom-left-radius: 10px;  
border-bottom-right-radius: 10px; 
top:14%;
right: 0px;
overflow: hidden;
overflow-x: hidden; 
z-index: 6;
animation: dance 2s linear infinite alternate; /* Adjusted animation properties */
}


@keyframes dance {
  0%, 100% {
    border-bottom-left-radius: 10px; /* Initial bottom-left corner radius */
    border-bottom-right-radius: 10px; /* Initial bottom-right corner radius */
    height: 53.4px; /* Initial width */
  }
  50% {
    border-bottom-left-radius: 80px; /* Large bottom-left corner radius */
    border-bottom-right-radius: 90px; /* Large bottom-right corner radius */
    height: 120px; /* Stretched width */
  }
}


.container-outer {
  position: absolute;
  display: flex;
  flex-direction: column; /* Ensure this is column to stack elements vertically */
  top: 10%;
  right: 0;
  width: 25%; /* Remove the duplicate width */
  height: 43%;
  padding: 60px;
  box-sizing: border-box;
  overflow: hidden;
}



.right-column{
  position: relative;
  animation: slide 44s linear infinite; /* Adjusted animation duration */
}

.right-column2 {
  animation: slide2 44s linear infinite; /* Adjusted animation duration */
  animation-delay: 22s;

}


@keyframes slide {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes slide2 {
  0% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(0%);
  }
}



.aboutslide {
  /* font-size: 20px; */
  font-size: 1.2vw;

  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 30px;
}

.aboutslide + .aboutslide {
  margin-top: 50px;
}

.aboutslide.headjourney {
  color: #ff5733;
  font-size: 2vw;
}

.aboutslide.headpassion {
  color: #ffc300;
  font-size: 2vw;
}

.aboutslide.headcommunity {
  color: #00b8d9;
  font-size: 2vw;
}

.aboutslide.headmusic {
  color: #7f5af0;
  font-size: 2vw;
}



  @media only screen and (max-width: 375px) {
    
    .aboutcircle1 {
      top: 20%;    
    }

    .aboutcircle2 {
      top: 27%;
     }
    
    .aboutcircle3 {
      top: 34%;
      }
    .aboutcircle4 {
      top: 41%;
      }
      
  .vertical-line {
    left: 10.8%;
    height: 23%; /* Adjust the height of the line as needed */
  }
    
  .school0{
    font-size: 4vw; /* Adjust the font size to a reasonable value */
    left:15%;
    top: 30%;
    max-width: 60%;
    text-align: left;
  } 

  .asu{
    top:19.8%;
  }
  .ucd{
    top: 26.7%;
  }
  .swami{
    top: 33.7%;
  }
  .ies{
    top: 40.7%;
  }

  .gpa0{
    font-size: 2.7vw; /* Adjust the font size to a reasonable value */
    left:15%;
    top: 1%;
    font-style: bold;
    max-width: 60%;
  } 

  .asugpa{
    top: 21%;
  }
  .ucdgpa{
    top: 28.5%;

  }
  .swamigpa{
    top: 35.5%;
  }
  .iesgpa{
    top: 42.5%;
  }

  .aboutcircle5 {
    width: 28%;
  height: 12%;
}
.aboutcircle6 {
top:12%;
right: 0px;
}


.container-outer {
  position: absolute;
  display: flex;
  flex-direction: column; /* Ensure this is column to stack elements vertically */
  top: 10%;
  right: 2%;
  width: 20%; 
  height: 36%;
  padding: 0%;
  box-sizing: border-box;
  overflow: hidden;
}



.right-column{
  position: relative;
  animation: slide 44s linear infinite; /* Adjusted animation duration */
}

.right-column2 {
  animation: slide2 44s linear infinite; /* Adjusted animation duration */
  animation-delay: 22s;

}

.aboutslide {
  /* font-size: 20px; */
  font-size: 1.7vw;

  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 30px;
} 
     
  }
  /* Mobile portrait (less than 480px) */
  @media only screen and (min-width: 375px) and (max-width: 479px) {
    
    .aboutcircle1 {
      top: 20%;    
    }

    .aboutcircle2 {
      top: 27%;
     }
    
    .aboutcircle3 {
      top: 34%;
      }
    .aboutcircle4 {
      top: 41%;
      }
      
  .vertical-line {
    left: 10.8%;
    height: 23%; /* Adjust the height of the line as needed */
  }
    
  .school0{
    font-size: 4vw; /* Adjust the font size to a reasonable value */
    left:15%;
    top: 30%;
    max-width: 60%;
    text-align: left;
  } 

  .asu{
    top:19.8%;
  }
  .ucd{
    top: 26.7%;
  }
  .swami{
    top: 33.7%;
  }
  .ies{
    top: 40.7%;
  }

  .gpa0{
    font-size: 2.7vw; /* Adjust the font size to a reasonable value */
    left:15%;
    top: 1%;
    font-style: bold;
    max-width: 60%;
  } 

  .asugpa{
    top: 21%;
  }
  .ucdgpa{
    top: 28.5%;

  }
  .swamigpa{
    top: 35.5%;
  }
  .iesgpa{
    top: 42.5%;
  }

  .aboutcircle5 {
    width: 28%;
  height: 12%;
}
.aboutcircle6 {
top:12%;
right: 0px;
}


.container-outer {
  position: absolute;
  display: flex;
  flex-direction: column; /* Ensure this is column to stack elements vertically */
  top: 10%;
  right: 2%;
  width: 20%; 
  height: 36%;
  padding: 0%;
  box-sizing: border-box;
  overflow: hidden;
}



.right-column{
  position: relative;
  animation: slide 44s linear infinite; /* Adjusted animation duration */
}

.right-column2 {
  animation: slide2 44s linear infinite; /* Adjusted animation duration */
  animation-delay: 22s;

}

.aboutslide {
  /* font-size: 20px; */
  font-size: 1.7vw;

  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 30px;
} 
     
  }
  /* Mobile landscape (less than 768px) */
  @media only screen and (min-width: 479px) and (max-width: 600px) {
    
    .aboutcircle1 {
      top: 20%;    
    }

    .aboutcircle2 {
      top: 27%;
     }
    
    .aboutcircle3 {
      top: 34%;
      }
    .aboutcircle4 {
      top: 41%;
      }
      
  .vertical-line {
    left: 10.8%;
    height: 23%; /* Adjust the height of the line as needed */
  }
    
  .school0{
    font-size: 4vw; /* Adjust the font size to a reasonable value */
    left:15%;
    top: 30%;
    max-width: 60%;
    text-align: left;
  } 

  .asu{
    top:19.8%;
  }
  .ucd{
    top: 26.7%;
  }
  .swami{
    top: 33.7%;
  }
  .ies{
    top: 40.7%;
  }

  .gpa0{
    font-size: 2.7vw; /* Adjust the font size to a reasonable value */
    left:15%;
    top: 1%;
    font-style: bold;
    max-width: 60%;
  } 

  .asugpa{
    top: 21%;
  }
  .ucdgpa{
    top: 28.5%;

  }
  .swamigpa{
    top: 35.5%;
  }
  .iesgpa{
    top: 42.5%;
  }

  .aboutcircle5 {
    width: 28%;
  height: 12%;
}
.aboutcircle6 {
top:12%;
right: 0px;
}


.container-outer {
  position: absolute;
  display: flex;
  flex-direction: column; /* Ensure this is column to stack elements vertically */
  top: 10%;
  right: 2%;
  width: 20%; 
  height: 36%;
  padding: 0%;
  box-sizing: border-box;
  overflow: hidden;
}



.right-column{
  position: relative;
  animation: slide 44s linear infinite; /* Adjusted animation duration */
}

.right-column2 {
  animation: slide2 44s linear infinite; /* Adjusted animation duration */
  animation-delay: 22s;

}

.aboutslide {
  /* font-size: 20px; */
  font-size: 1.7vw;

  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 30px;
} 
     
  }
     
  @media only screen and (min-width: 600px) and (max-width: 767px) {
     
  }
  
  /* Tablet portrait (less than 992px) */
  @media only screen and (min-width: 767px) and (max-width: 991px) {
    
  }
  
  /* Tablet landscape (less than 1200px) */
  @media only screen and (min-width: 991px) and (max-width: 1200px) {
    
  }
   @media only screen and (min-width: 1200px) and (max-width: 1400px) {
  }
  
   @media only screen and (min-width: 1400px) and (max-width: 1600px) {
  
  }
  @media only screen and (min-width: 1600px) and (max-width: 2550px) {
  }
  
  /*4K*/
  @media only screen and (min-width: 2550px) and (max-width: 3000px) {
  }




.abouthorizontalline2 {
  position: absolute;
  top: 65%;
  left: 0%;
  width: 100%;
  height: 2.4px; /* Adjust the height of the line as needed */
  background-color: rgba(0, 0, 0, 0.726); /* Change the color of the line */
  z-index: 3;
  overflow-x: hidden;
  animation: fade-in2 linear forwards;
 }

.abouthorizontalline3 {
  position: absolute;
  top: 68%;
  right: 0%;
  width: 100%;
  height: 2.4px; /* Adjust the height of the line as needed */
  background-color: rgba(0, 0, 0, 0.714); /* Change the color of the line */
  z-index: 3;
  overflow-x: hidden;
  animation: fade-in3 linear forwards;
 
}

@keyframes fade-in2{
  from {
   width: 0px;
  }
  to {
    width: 1800px;
   }
}

@keyframes fade-in3{
  from {
    width: 0px;
   }
   to {
     width: 1800px;
    }
 }
 

.technicalskill{
  position: absolute;
  font-size: 4vw;
  top: 61%;
  text-align: center;
  width: 100%;
  z-index: 30;
  color: rgba(30, 32, 48);
  font-family: Georgia, 'Times New Roman', Times, serif;

}


.text-animation {
  position: absolute;
  top: 66%;
  overflow: hidden;
  user-select: none;
  width: 200%;
  height: 15%;
  z-index: 20;
}

.text-container {
  font-size: 1.3vw;
  font-family:Georgia, 'Times New Roman', Times, serif;
  color: rgb(0, 0, 0);
  display: flex;
  letter-spacing: 10px;
   width: 200%;
  height: 15%;
  

  
}

.text{
  animation: slideAnimation 200s linear infinite;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 150%;
  /* width: 100%; */ 


}

.text-container:hover .text{
  cursor: -webkit-grabbing;
  /* animation-direction: reverse; */
  animation-play-state: paused;
  opacity: 1;



}

.text-container:not(:hover) .text  {
  cursor: -webkit-grabbing;
  /* animation-direction: reverse; */
  animation-play-state: running;

}


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



.button6 {
  position: absolute;
  display: flex;
  height: 100%;
  width: 50%;
  bottom: 40%;
  background-color: rgb(30, 32, 48);
  opacity: 0;  
  transition: 0.3s;
  overflow: visible;
  justify-content: center;
  align-items: center;
  padding-top:25px ;
  z-index: 0;
}



.button6:hover{
  opacity: 0.9;
  cursor: pointer;
}

.button6 h1{
  font-size: 2.5vw;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: #f5f5f5;
}
@media only screen and (max-width: 375px) {
  

  .abouthorizontalline2 {
    top: 49%;
    width: 100%;
    height: 2px; /* Adjust the height of the line as needed */
   }
  
  .abouthorizontalline3 {
    top: 51%;
    height: 2px; /* Adjust the height of the line as needed */
  }
  
  .technicalskill{
    position: absolute;
    font-size: 6vw;
    top: 47%;
  }
  
  .text-animation {
    top: 49.8%;
  }
  
  .text-container {
    font-size: 2vw;
    letter-spacing: 5px;
     width: 200%;
    height: 5%;
  }  
  }
/* Mobile portrait (less than 480px) */
@media only screen and (min-width: 375px) and (max-width: 479px) {
  

.abouthorizontalline2 {
  top: 49%;
  width: 100%;
  height: 2px; /* Adjust the height of the line as needed */
 }

.abouthorizontalline3 {
  top: 51%;
  height: 2px; /* Adjust the height of the line as needed */
}

.technicalskill{
  position: absolute;
  font-size: 6vw;
  top: 47%;
}

.text-animation {
  top: 49.8%;
}

.text-container {
  font-size: 2vw;
  letter-spacing: 5px;
   width: 200%;
  height: 5%;
}  
}
/* Mobile landscape (less than 768px) */
@media only screen and (min-width: 479px) and (max-width: 600px) {
  

  .abouthorizontalline2 {
    top: 49%;
    width: 100%;
    height: 2px; /* Adjust the height of the line as needed */
   }
  
  .abouthorizontalline3 {
    top: 51%;
    height: 2px; /* Adjust the height of the line as needed */
  }
  
  .technicalskill{
    position: absolute;
    font-size: 4vw;
    top: 47%;
  }
  
  .text-animation {
    top: 49.8%;
  }
  
  .text-container {
    font-size: 2vw;
    letter-spacing: 5px;
     width: 200%;
    height: 5%;
  }  
  }
@media only screen and (min-width: 600px) and (max-width: 767px) {
   
}

/* Tablet portrait (less than 992px) */
@media only screen and (min-width: 767px) and (max-width: 991px) {
  
}

/* Tablet landscape (less than 1200px) */
@media only screen and (min-width: 991px) and (max-width: 1200px) {
  
}
 @media only screen and (min-width: 1200px) and (max-width: 1400px) {
}

 @media only screen and (min-width: 1400px) and (max-width: 1600px) {

}
@media only screen and (min-width: 1600px) and (max-width: 2550px) {
}

/*4K*/
@media only screen and (min-width: 2550px) and (max-width: 3000px) {
}


/* ACTIVITIES IN 6 RECTANGULAR BOXES, EACH BOXES WILL DISPLAY SMALL PHOTO ON RIGHT AND TEXT ON LEFT, WHEN HOVER ON A BOX, TH BOX WILL ZOOM OUT IN SQUARE SAME AND THE IMG WILL OCCUPY WHOLE BOX WITH THE 2 SENTENCES TEXT ON IT AND IS CLICKABLE(REDIRECT TO A WEBSITE), WHEN CURSOR IS REMOVED FROM THAT BOX , IT AGAIN ZOOM IN TO ITS ORIGINAL SHAPE AND CONTENT.*/
.activity{
  position: absolute;
  font-size: 4vw;
  top: 70%;
  text-align: center;
  width: 100%;
  z-index: 3;
  color: rgba(30, 32, 48);
  font-family: Georgia, 'Times New Roman', Times, serif;
  
}

.activity-container {
  position: absolute;
  top: 74%;
  padding-left: 0%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 2;
  
}
.activity-box {
  position: relative;
  width: 300px;
  height: 150px;
  border: 1px solid #000000;
  display: flex;
  align-items: center; 
  margin: 10px;
  overflow: hidden;
  transition: transform 0.5s;
  background-color: #f5f5f5;
  z-index: 1;
}

.view {
  position: absolute;
  align-items: center;
  left: 5%;
  transform: translate(-50%, -50%);
  background-image: radial-gradient(farthest-corner at 50% 50%, rgba(50, 169, 255, 0.5) 10%, transparent 30%);
  background-color: transparent;
  border: none;
  color: #fff;
  border-radius: 50%;
  height: 270px;
  width: 270px;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.4s;
}
.view span{
  position: absolute;  
  font-size: 16px;
  align-items: center;
  color: #000000;
  font-family:Georgia, 'Times New Roman', Times, serif ;
  
}

.activity-box:hover .view {
  opacity: 1;
  z-index: 20;
  cursor: pointer;
}


.activity-box:hover {
  height: 200px;
  transform: scale(1.5);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
  z-index: 10;
}


.activity-box img {
  position: absolute;
  width: 100px;
  height: 50px;
  margin-left: 5px;
  transition: width 0.5s, height 0.5s;
  right: 10px;
}

.activity-box:hover img {
  width: 93%;
  height: 90%;
  border-radius: 10px;
  right: 10px;  
}


.activity-box p {
  margin-right: 110px;
  margin-left: 5px;
  font-size: 14px;
  color: #333;
  transition: width 0.5s, height 0.5s;
  z-index: 1;
}

.activity-box:hover p {
  display: none;
}

.activity-box a {
  text-decoration: none;
  color: #337ab7;
  visibility:hidden;
}

.activity-box a:hover {
  color: #23527c;
  visibility: visible;
}

.activity-container.first-row {
  margin-bottom: 200px;
  z-index: 10;
}

.activity-container.second-row {
  margin-top: 200px;
}

.activity-box:nth-child(3n+1) {
  margin-right: 20px;
}

.activity-box:nth-child(3n) {
  margin-left: 20px;
}
@media only screen and (max-width: 375px) {
  .activity{
    position: absolute;
    font-size: 6vw;
    top:55%;
  }
  
  .activity-container {
    position: absolute;
    top: 57%;
  }
  .activity-box {
    position: relative;
    width: 275px;
    height: 125px;
  }

  .activity-box img {
    position: absolute;
    width: 100px;
    height: 50px;
    margin-left: 5px;
    transition: width 0.5s, height 0.5s;
    right: 10px;
  }
  
  .activity-box:hover img {
    width: 93%;
    height: 90%;
    border-radius: 10px;
    right: 10px;  
  }
  
  .activity-box p {
    margin-right: 110px;
    margin-left: 5px;
    font-size: 2vw;
    color: #333;
    transition: width 0.5s, height 0.5s;
    z-index: 1;
  }
  
  .activity-container.first-row {
    margin-bottom: 200px;
    z-index: 10;
  }
  
  .activity-container.second-row {
    margin-top: 430px;
  }
  
  .activity-box:nth-child(3n+1) {
    margin-right: 10px;
  }
  
  .activity-box:nth-child(3n) {
    margin-left: 10px;
  }
   
}
 
/* Mobile portrait (less than 480px) */
@media only screen and (min-width: 375px) and (max-width: 479px) {
  .activity{
    position: absolute;
    font-size: 6vw;
    top:55%;
  }
  
  .activity-container {
    position: absolute;
    top: 57%;
  }
  .activity-box {
    position: relative;
    width: 275px;
    height: 125px;
  }

  .activity-box img {
    position: absolute;
    width: 100px;
    height: 50px;
    margin-left: 5px;
    transition: width 0.5s, height 0.5s;
    right: 10px;
  }
  
  .activity-box:hover img {
    width: 93%;
    height: 90%;
    border-radius: 10px;
    right: 10px;  
  }
  
  .activity-box p {
    margin-right: 110px;
    margin-left: 5px;
    font-size: 2vw;
    color: #333;
    transition: width 0.5s, height 0.5s;
    z-index: 1;
  }
  
  .activity-container.first-row {
    margin-bottom: 200px;
    z-index: 10;
  }
  
  .activity-container.second-row {
    margin-top: 430px;
  }
  
  .activity-box:nth-child(3n+1) {
    margin-right: 10px;
  }
  
  .activity-box:nth-child(3n) {
    margin-left: 10px;
  }
   
}
/* Mobile landscape (less than 768px) */
@media only screen and (min-width: 479px) and (max-width: 600px) {
   
  .activity{
    position: absolute;
    font-size: 6vw;
    top:55%;
  }
  
  .activity-container {
    position: absolute;
    top: 57%;
  }
  .activity-box {
    position: relative;
    width: 275px;
    height: 125px;
  }

  .activity-box img {
    position: absolute;
    width: 100px;
    height: 50px;
    margin-left: 5px;
    transition: width 0.5s, height 0.5s;
    right: 10px;
  }
  
  .activity-box:hover img {
    width: 93%;
    height: 90%;
    border-radius: 10px;
    right: 10px;  
  }
  
  .activity-box p {
    margin-right: 110px;
    margin-left: 5px;
    font-size: 2vw;
    color: #333;
    transition: width 0.5s, height 0.5s;
    z-index: 1;
  }
  
  .activity-container.first-row {
    margin-bottom: 200px;
    z-index: 10;
  }
  
  .activity-container.second-row {
    margin-top: 430px;
  }
  
  .activity-box:nth-child(3n+1) {
    margin-right: 10px;
  }
  
  .activity-box:nth-child(3n) {
    margin-left: 10px;
  }
   
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
   
}

/* Tablet portrait (less than 992px) */
@media only screen and (min-width: 767px) and (max-width: 991px) {
  
}

/* Tablet landscape (less than 1200px) */
@media only screen and (min-width: 991px) and (max-width: 1200px) {
  
}
 @media only screen and (min-width: 1200px) and (max-width: 1400px) {
}

 @media only screen and (min-width: 1400px) and (max-width: 1600px) {

}
@media only screen and (min-width: 1600px) and (max-width: 2550px) {
}

/*4K*/
@media only screen and (min-width: 2550px) and (max-width: 3000px) {
}


/*footer________________________________________________________________________________________________________________________________________________________*/
footer {
  position: absolute;
  left: 0;
  top: 250%; /* Initially, position it outside the viewport */
  width: 100%;
  height: 150%;
  text-align: center;
  background-color: rgba(30, 32, 48);
  z-index: 2; /* Set z-index higher than homepage */
  transition: top 0.01s ease-in-out; /* Apply transition to 'top' property */
  display: flex;
  justify-content: center;
  align-items: center; 
  z-index: 0;
  overflow-x: hidden;
}

b {
  position: absolute;
  top: 45%;
  left: 8%;
  font-size: 6.2vw;
  width: 80%;
  font-weight: bold;
  color: #ffffff;
  animation: fade-in-slide0 1s linear forwards;
  animation-timeline: view()
}

@keyframes fade-in-slide0 {
  from {
    opacity: 0.7;
    transform: translateX(30%);
  }
  to {
    opacity: 1;
    transform: translateX(-10%);
  }
}

b1 {
  position: absolute;
  top: 55%;
  left: 0%;
  font-size: 6.2vw;
  width: 50%;
  font-weight: bold;
  color: #ffffff;
  animation: fade-iN 1s linear forwards;
  animation-timeline: view()
}

@keyframes fade-iN {
  from {   left: 0%;

  }
  to {  left: 0%;
  
  }
}


.horizontalline {
  position: absolute;
  bottom: 30%;
  left: 10%;
  width: 80%;
  height: 2px; /* Adjust the height of the line as needed */
  background-color: rgba(255, 255, 255, 0.574); /* Change the color of the line */
}

.footerimg{
  position:absolute;
  width: 9vw;
  height: 9vw;
  border-radius: 50%;
  left: 11%;
  top: 45%;
  animation: fade-in-slide1 1s linear forwards;
  animation-timeline: view()
}

@keyframes fade-in-slide1 {
  from {
     transform: translateX(100%);
  }
  to {
     transform: translateX(-10%);
  }
}


.button2 {
  position: absolute;
  /* font-size: 24px; */
  font-size: 1.4vw;
  color: rgb(255, 255, 255);
  font-family: Georgia, 'Times New Roman', Times, serif;
  background-color: transparent;
  border: 1.2px solid rgb(255, 255, 255);
  border-radius: 50px;
  bottom: 20%;
  left: 10%;
  width: 18vw; 
  height: 3.5vw;
  overflow: hidden;
  cursor: pointer;
  transition:  1s ease-out

}


.button2 .button2-text {
  position: relative;
  z-index: 1;
}
.button2:hover .button2-bg{
  color: white;

  background-position: center;
}

.button2 .button2-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
  background-repeat: repeat-x;
  background-position: 0% -100%;
  transition: background-position 0.5s ease;
  z-index: 0;
}


.button3 {
  position: absolute;
  bottom: 20%;
  left: 30%;
}
.button4 {
  position: absolute;
  bottom: 24%;
  left: 70%;
  border-radius: 50%;
  height: 10vw;
  width: 10vw;
  z-index: 3;
  background-color: rgba(30, 32, 48);
}
.button4 .button2-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
  background-repeat: repeat-x;
  background-position: 0% 1800%;
  transition: background-position 0.8s ease;
  z-index: 0;
}


.button5 {
  position: absolute;
  font-size: 1.4vw;
  color: #ffffff;
  bottom: 1.5%;
  left: 79%;
  transition: background-color 0.3s ease;
  border-color: rgba(30, 32, 48);
}



a {
  position: absolute;  
  margin-top: 10px;
  font-size: 1vw;
  color: #ffffff;
  left: 10%;
  bottom: 3%;
  
}


@media only screen and (max-width: 375px) {
  
  footer {
    top: 280%; /* Initially, position it outside the viewport */
  }
  b {
    top: 40%;
    left: 0%;
    font-size: 8vw;
    width: 92%;
  }
  b1 {
    top: 48%;
    left: 0%;
    font-size: 8vw;
    width: 56%;
  }
  
  .horizontalline {
    bottom: 35%;
  }
  
  .footerimg{
    position:absolute;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    left: 66.5%;
    top: 45.6%;
    opacity: 1;
  }

  .button2 {
    font-size: 3.5vw;
    bottom: 28%;
    left: 10%;
    width: 48vw; 
    height: 8vw;
  }
  
  .button3 {
     bottom: 21%;
    left: 10%;
  }
  .button4 {
     bottom: 20.5%;
    left: 65%;
    height: 30vw;
    width: 30vw;
    z-index: 3;
  }

  
  .button5 {
    font-size: 4vw;
    bottom: 3%;
    left: 57%;
  }
  
  
  
  a {
    position: absolute;  
    margin-top: 10px;
    font-size: 2vw;
    left: 10%;
    bottom: 3.8%;
    
  }
  
  

   
}
/* Mobile portrait (less than 480px) */
@media only screen and (min-width: 375px) and (max-width: 479px) {
  
  footer {
    top: 280%; /* Initially, position it outside the viewport */
  }
  b {
    top: 40%;
    left: 0%;
    font-size: 8vw;
    width: 92%;
  }
  b1 {
    top: 48%;
    left: 0%;
    font-size: 8vw;
    width: 56%;
  }
  
  .horizontalline {
    bottom: 35%;
  }
  
  .footerimg{
    position:absolute;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    left: 66.5%;
    top: 45.6%;
    opacity: 1;
  }

  .button2 {
    font-size: 3.5vw;
    bottom: 28%;
    left: 10%;
    width: 48vw; 
    height: 8vw;
  }
  
  .button3 {
     bottom: 21%;
    left: 10%;
  }
  .button4 {
     bottom: 20.5%;
    left: 65%;
    height: 30vw;
    width: 30vw;
    z-index: 3;
  }

  
  .button5 {
    font-size: 4vw;
    bottom: 3%;
    left: 57%;
  }
  
  
  
  a {
    position: absolute;  
    margin-top: 10px;
    font-size: 2vw;
    left: 10%;
    bottom: 3.8%;
    
  }
  
  

   
}
/* Mobile landscape (less than 768px) */
@media only screen and (min-width: 479px) and (max-width: 600px) {
  
  footer {
    top: 280%; /* Initially, position it outside the viewport */
  }
  b {
    top: 40%;
    left: 0%;
    font-size: 8vw;
    width: 92%;
  }
  b1 {
    top: 48%;
    left: 0%;
    font-size: 8vw;
    width: 56%;
  }
  
  .horizontalline {
    bottom: 35%;
  }
  
  .footerimg{
    position:absolute;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    left: 66.5%;
    top: 45.6%;
    opacity: 1;
  }

  .button2 {
    font-size: 3.5vw;
    bottom: 28%;
    left: 10%;
    width: 48vw; 
    height: 8vw;
  }
  
  .button3 {
     bottom: 21%;
    left: 10%;
  }
  .button4 {
     bottom: 20.5%;
    left: 65%;
    height: 30vw;
    width: 30vw;
    z-index: 3;
  }

  
  .button5 {
    font-size: 4vw;
    bottom: 3%;
    left: 57%;
  }
  
  
  
  a {
    position: absolute;  
    margin-top: 10px;
    font-size: 2vw;
    left: 10%;
    bottom: 3.8%;
    
  }
  
  

   
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
   
}

/* Tablet portrait (less than 992px) */
@media only screen and (min-width: 767px) and (max-width: 991px) {
  
}

/* Tablet landscape (less than 1200px) */
@media only screen and (min-width: 991px) and (max-width: 1200px) {
  
}
 @media only screen and (min-width: 1200px) and (max-width: 1400px) {
}

 @media only screen and (min-width: 1400px) and (max-width: 1600px) {

}
@media only screen and (min-width: 1600px) and (max-width: 2550px) {
}

/*4K*/
@media only screen and (min-width: 2550px) and (max-width: 3000px) {
}