.body {
  height: 100vh;
  width: 100vw;
  background-color: rgb(255, 255, 255);
  margin: 0;
  overflow: hidden;
  
  
 
}




.logo{
  
  font-size: 60px;
  font-family: 'Mukta Mahee';
  font-weight: 700;
  width: fit-content;
  padding-top: 0px;
  margin-top: 64px;
 margin-left: 30px;
  color: black;
  transition: color 0.3s ease;
  cursor: pointer;
  user-select: none;
  
 
  
  
}

@media only screen and (max-width: 767px) {
  /* Apply changes only for small screens */
  .body{

  margin: 0;
  padding: 0;



  }
  .logo {
    font-size: 3.5rem; /* Decrease font size for small screens */
    vertical-align: middle;
    margin-top: 63px;
    user-select: none;
    
  }
  .header {
    
    
    user-select: none;
    right: 0;
    left: 0;
    
  }

  .menu-hamburguer {
    height: 0.5em; /* Decrease font size for small screens */
    margin-right: -10px;
    user-select: none;
    
  }
  .logo-menu{
    font-size: 3.5rem;
    padding-left: 35px;
    user-select: none;
    
    

  }


  
  #container{
    padding-left: 35px;
    user-select: none;
    
    
    
    


  }
   .close-button{
    user-select: none;
    
   }
  

  .socialmedia-menu{

    margin-top: 40px;
    margin-left: 40px;
    user-select: none;
    
    
  }
   
  .logos-footer-menu{
    
    user-select: none;
   height: fit-content;
    
    
    
  }
  .legal-menu{
    user-select: none;
    padding-left: 35px;
    margin-top: -30px;
  }
  .text-1-1{

    margin-left: 20px;
  }
  .text-1-2{

    margin-left: 20px;
  }
  

    
    .menu-container {
      /* Adjust the width and height to fit the mobile screen */
      width: 100%;
      height: 100vh;
      /* Center the menu vertically */
      top: 0;
      /* Remove any unnecessary margins or padding */
      margin: 0;
      padding: 0;
      /* Position the menu at the top of the screen */
      bottom: auto;
      /* Remove the animation that slides the menu in */
      user-select: none;
    }
    

  
  


  .main-tittle{
    user-select: none;
    padding-top: 35px;
    line-height: 25px;
    
   
    
    
   
    
  }
  .name1{
    font-size: 13px;
    user-select: none;
    
    
    
    
    
  }
  .name2{
    font-size: 13px;
    user-select: none;
    
  }

  .main-tittle1{
    padding-top: 35px;
    line-height: 25px;
    user-select: none;
    
  }

  .first-row{
    user-select: none;
    display: grid;
    grid-template-columns: 1fr;
    margin-left: 15px;
    margin-right: 15px;
    gap: 23px;
  }
  .final-text{
    font-size: 10px;
    margin-bottom: 20px;
  }

  .today{
    user-select: none;
  }
  .latest{
    user-select: none;
  }
 .footer-page{
  user-select: none;
 }
 .final-text{
  user-select: none;
 }
 .logos-footer-page{
  user-select: none;
 }
 .photocover{
  width: 100vw;
  padding-bottom: 100%;
  object-fit: cover;
  height: 270px;
 }
 
  

}





.header.scrolled .logo {
color: #fb0074
}



.header{
  display: flex;
  flex-direction: row;
  
  justify-content: space-between;
  margin-top: -8px;
  transition: background-color 0.3s ease;
  height: 4.1rem;
  left: 0;
  right: 0;
  align-items: center;
  overflow: hidden;
 margin-top: -8px;
  user-select: none;
  position: fixed;
  z-index: 9999;
 
  
  
}

.header.scrolled {
background-color: white;
}



.photocover{
  max-width: 100vw;
  margin-top: 57px;
  margin-left: -8px;
  margin-right: -8px;
  overflow: hidden;
  
  

  padding: 0;

  
}


 .menu-hamburguer{
 

  height: 15px;

 }

 





 .menu{
  margin-right: 30px;
  transition: color 0.3s ease;
  opacity: 0;
  
  width: fit-content;

 }
  
 .header.scrolled .menu {
opacity: 1;
cursor: pointer;
}

.text1:hover{
  color: white;
  
}
.text2:hover{
  color: white;
  
}
.text3:hover{
  color: white;
  
}
.text4:hover{
  color: white;
  
}





@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translatey(-100%);
  }
  100% {
    opacity: 1;
    transform: translatey(0%);
  }
}
.menu-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  display: none;
  background-color: white;
  height: 720px;
  bottom: 0;
  width: 410px;
  position: fixed;
  overflow: hidden;
  
  z-index: 9999;
 
  animation: slideIn 1s ease;
  overflow-x: none;
  

  
  
  

}
  
 



.menu-container.closed {
transition: opacity 0.3s ease;
opacity: 0;
pointer-events: none;
}

.close-button{

  
  cursor: pointer;
  margin-top: 35px;
  margin-right: 30px;
  text-align: right;
  user-select: none;
  margin-left: 340px;
  display: inline-block;
  transform-origin: center right;
  transition: transform 1s, transition delay 0.5s;
  
  
  
}
.close-button:hover{
  font-weight: 700;
  transform: scaleX(1.3);
  transition-delay: 0s;
  





}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  
  background-color: rgba(0, 0, 0, 0.5);
  
  display: none;
  pointer-events: none;
 
  
}

.menu-container.active {
  overflow-y: auto;
  position: fixed;
  top: 0;
  
  right: 0;
  
  background-color: white;
  display: block;
  
  

  
  
  
}

body.menu-container-active {
  overflow: hidden;
  position: relative;
  
}

.menu-container .menu {
  margin-right: 0;
}
.logo-menu{

font-family: 'Mukta Mahee';
font-size: 60px;
margin-left: 30px;
font-weight: 700;
margin-bottom: 10px;
width: fit-content;
margin-top: -40px;
transition: color 2s linear;
height: fit-content;
user-select: none;
}

.logo-menu.gray{
color: rgb(215, 211, 211);
}
#container{
  margin-top: 30px;margin-left: 30px;line-height: 22px;font-style: italic;font-family: 'Mukta Mahee';user-select: none;font-size: 17px;padding-bottom: 20px;
}

.darken-background {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
z-index: 9999;

}

body.menu-container-active .darken-background {
display: block;


}



.ig-logo{

height: 9px;
margin-top: 6px;
cursor: pointer;


}




.linkedin-logo{

height: 10px;
cursor: pointer;


}

.twitter-logo{

height: 10px;
cursor: pointer;
}



.text1-1{
cursor: pointer;
width: fit-content;
}
.text1-1:hover{
color:rgb(143, 137, 137);
}
.text2-1{
cursor: pointer;
width: fit-content;
}
.text2-1:hover{
color:rgb(143, 137, 137);
}
.text3-1{
width: fit-content;
cursor: pointer;
}
.text3-1:hover{
color:rgb(143, 137, 137);
}
.text4-1{
width: fit-content;
cursor: pointer;
}
.text4-1:hover{
color:rgb(143, 137, 137);
}
.text7-1{

margin-top: 20px;
font-size: 12px;
line-height: 20px;
color: rgb(143, 137, 137);
}




.magnify {
position: relative;
display: inline-block;

}

.magnify-text {
position: relative;
display: inline-block;
transition: transform 0.3s ease;
transform-origin: top left;
}

.magnify:hover .magnify-text {
transform: scaleX(1.3);
font-weight: bold;
transform-origin: left center;
}








.content-item1{


margin-right: 310px;
cursor: pointer;

}






.content-item2{

margin-right: 370px;

cursor: pointer;

}
.content-item3{

margin-right: 390px;

cursor: pointer;
}

.content-item4{

margin-right: 355px;

cursor: pointer;
}
.content-item5{

margin-right: 365px;

cursor: pointer;
}

.content-item6{

margin-right: 365px;

cursor: pointer;
}


@media (max-width: 100%) {
  .photocover {
    max-width: 100%;
  }
.final-text{

  font-size: 1%;
}
.text1{
  font-size: 1px;
}



}


.photo1{
width: 100%;
cursor: pointer;
margin-bottom: 14px;
}  
.photo2{
width: 100%;
cursor: pointer;
margin-bottom: 14px;
}  
.photo3{
width: 100%;
cursor: pointer;
margin-bottom: 14px;
}  
.photo4{
width: 100%;
cursor: pointer;
margin-bottom: 14px;
}  
.photo5{
width: 100%;
cursor: pointer;
margin-bottom: 14px;
}  
.photo6{
width: 100%;
cursor: pointer;
margin-bottom: 14px;
}  
.photo7{
width: 100%;
cursor: pointer;
margin-bottom: 14px;
}  
.photo8{
width: 100%;
cursor: pointer;
margin-bottom: 14px;
}  
.subscribe:hover{

border-color: black;



}
.email-subscriber{
font-size: 14px;
font-weight: 700;
background-color: white;
margin-right: 121px;
color: grey;
width: fit-content;
height: 40px;
display: none;

}

.viewport {
  width: calc(100% - 100px); /* Add 50px margin on both left and right sides */
  margin: -10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.carousel-frame {
  background: none;
  border: none;
 
}

.carousel {
  width: 100vw;
  height: 500px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  
}

.scroll {
  margin: 0; /* Remove left and right margin */
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%; /* Use 100% width */
  
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; /* Add smooth scroll behavior */
  white-space: nowrap; /* Prevent images from wrapping into multiple rows */
}

ul.scroll {
  margin: 0;
  padding: 0;
  list-style: none;
}

.scroll-item-outer {
  width: 100%;
  height: auto;
  margin-right: 20px; /* Add 20px right margin to create the gap */
  display: inline-block; /* Display items in a row */
}

.scroll-item {
  width: 260px; /* Adjust the width to the desired original size in pixels */
  height: 500px; /* Adjust the height to the desired original size in pixels */
  display: inline-block; /* Display items in a row */
}

.image-carousel {
  object-fit: cover;
  width: 100%;
  height: 100%;
}








.latest {
  
  text-align: center;
  font-family: 'Mukta Mahee'; font-size: 48px;text-align: center;font-style: italic;margin-bottom: 50px;user-select: none;
  
  
  
  
  
}


.today {
  
  text-align: center;
  font-family: 'Mukta Mahee'; font-size: 48px;text-align: center;font-style: italic;margin-bottom: 150px;overflow-x: hidden;user-select: none;
  
  
}



.main-tittle:hover{

color: rgb(143, 137, 137);
text-decoration: none;




}

.ig-logo-latest{

  height: 11px;
  cursor: pointer;
  margin-top: 4px;
  
}
.linkedin-logo-latest{
cursor: pointer;
height: 11px;

}
.twitter-logo-latest{

cursor: pointer;
height: 13px;
margin-top: 4px;

}


a {
text-decoration: none;

}


img {
user-select: none;
}



.underhover:hover{

color: rgb(143, 137, 137);
}


/* CSS for the text underline and text replacement effect */
/* CSS for the text underline and text replacement effect */



.magnify-text1 {
  display: inline-block;
  transform-origin: center left;
  
  transition: transform 0.4s, transition-delay 0.1s; /* Adjust the transition duration and delay */
}

.magnify-text1.hover {
  transform: scaleX(1.5);
  transition-delay: 0s; /* Reset the transition delay on hover */
  font-weight: bold;
 
}


.main-tittle1:hover{

color: rgb(143, 137, 137);


}

.first-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-between;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 50px;
  margin-top: -200px;
  overflow-x: hidden;
}
.cuadro1{
  flex-basis: 100%;
  font-family: 'Mukta Mahee';
  user-select: none;
}
.container1{
  margin-top: 80px;
  font-size: 12px;
  margin-bottom: 7px;
  user-select: none;
  font-weight: 300;
  font-family: 'Mukta Mahee';
  cursor: pointer;
  width: fit-content;

}
.underphoto-hover{
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  cursor: pointer;
  user-select: none;
  font-family: 'Mukta Mahee'
}

.text1-cuadro1{
  margin-top: 20px;
  font-size: 15px;
  line-height: 25px;
  font-weight: 300;
  user-select: none;font-family: 'Mukta Mahee';color: rgb(125, 116, 116);
}


.main-tittle1{

  font-size: 51px;font-weight: 500;font-family: 'Mukta Mahee';text-align: center;user-select: none;background-color: rgb(242, 242, 242);overflow: hidden;margin-left: -8px;margin-right: -8px;margin-top: -10px;padding-top: 30px;text-decoration: none;
}
.name2{

  text-align: center;font-family: 'Mukta Mahee';user-select: none;background-color: rgb(242, 242, 242);margin-left: -8px;margin-right: -8px;overflow: hidden;margin-top: -50px;padding-top: 30px;padding-bottom: 12px;
}

.name1{

  text-align: center;font-family: 'Mukta Mahee';user-select: none;background-color: rgb(242, 242, 242);margin-left: -8px;margin-right: -8px;overflow: hidden;margin-top: -50px;padding-top: 30px;padding-bottom: 12px;
}
.main-tittle{

  font-size: 51px;font-weight: 500;font-family: 'Mukta Mahee';text-align: center;user-select: none;background-color: rgb(242, 242, 242);overflow: hidden;margin-left: -8px;margin-right: -8px;margin-top: -10px;padding-top: 30px;text-decoration: none;width: fit-content;
}


.thanksforsubscribe{
  width:420px;height: 150px;margin-left: 30px;background-color: white;user-select: none;display: none;
}
.thanks{
  font-size: 20px;margin-top: 40px;font-style: italic;font-weight: 700;background-color: white;margin-bottom: 15px;user-select: none;

}
.wehave{
  font-size: 15px;font-style: italic;margin-right: 0px;width: 400px;height: 30px;background-color: white;user-select: none;
}
.socialmedia-menu{
  display: flex;flex-direction: row;justify-content: center;gap: 25px;margin-top: 35px;align-items: center;
}
.logos-footer-menu{

  height: 255px;width: 100%;background-color: rgb(242, 242, 242);margin-bottom: -100px;overflow: hidden;margin-top: 44px;
}
.subscribe{
 border-color: rgb(147, 145, 145);border-style: solid;border-width: 1px;font-size: 20px;color: rgb(90, 90, 90);cursor: pointer;transition: border-color 0.3s ease;user-select: none;width: 200px;text-align: center;text-align: center;padding-top: 20px;padding-bottom: 20px;
}
.legal-menu{
  font-size: 12px;margin-left: 30px;line-height: 9px;margin-top: 40px;font-family: 'Mukta Mahee';user-select: none;

}
.final-text{

  display: flex;flex-direction: row;justify-content: center;gap: 20px;color: white;overflow-x: hidden;
}
.logos-footer-page{
  display: flex;flex-direction: row;justify-content: center;gap: 35px;margin-top: -10px;margin-bottom: 40px;vertical-align: middle;overflow: hidden;
}
.logo-footer{
  text-align: center;margin-bottom: 15px;font-size: 60px;font-family: 'Mukta Mahee';font-weight: 700;color:#fb0074;overflow: hidden; user-select: none;vertical-align: middle;
}
.footer-page{
  background-color: black;height: 340px;max-width: 100vw;width: 100%;font-size: 14px;overflow: hidden;align-items: center;display: flex;justify-content: center;margin-top: 100px;margin-left: -8px;margin-right: -8px;margin-bottom: -8px;position: absolute;
}

.by{
  font-size: 11px;
  font-family: 'Mukta Mahee';
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 350px;margin-right: 350px



}
.text-1-box{



  font-family: 'Mukta Mahee';margin-left: 350px;margin-right: 350px;margin-top: 20px;
 
  }


.text-1-1{
    font-size: 43px;
    margin-top: 20px;
    margin-bottom: 30px;
    font-family: 'Mukta Mahee';
    line-height: 53px;
    margin-left: 350px;margin-right: 350px;
  }
  
  .text-1-2{
    font-size: 25px;
    margin-top: 10px;
    line-height: 28px;
    margin-bottom: 34px;
    font-family: 'Mukta Mahee';
    font-style: italic;
    margin-left: 350px;margin-right: 350px;
  }
  .text-1-3{
    font-size: 11px;
    margin-top: 15px;
    margin-bottom: 32px;
    font-family: 'Raleway';

  }

  .text-1-4{
    font-size: 17px;
    margin-top: 15px;
    line-height: 28px;
    font-family: 'Raleway';

  }
  .text-1-5{
    font-size: 17px;
    margin-top: 30px;
    line-height: 28px;
    font-family: 'Raleway';

  }

  .text-1-6{
    font-size: 17px;
    margin-top: 30px;
    line-height: 28px;
    font-style: italic;
    font-family: 'Raleway';

  }

  .text-under-photo1{
    font-size: 11px;
    font-family: 'Raleway';
  }


  .text-2-box{



margin-left: 350px;
margin-right: 350px;
font-family: 'Raleway';
margin-top: 20px;

}
.question-1{
font-size: 16px;
margin-top: 20px;
line-height: 28px;
font-weight: 700;
margin-bottom: 0px;
font-family: 'Raleway';



}

.answer-question1{
font-size: 17px;
margin-top: 30px;
line-height: 28px;
margin-top: 0px;
margin-bottom: 27px;
font-family: 'Raleway';


}

.question-2{
font-size: 16px;
margin-top: 20px;
line-height: 28px;
font-weight: 700;
margin-bottom: 0px;
margin-top: 15px;
font-family: 'Raleway';



}

.answer-question2{
font-size: 17px;
margin-top: 30px;
line-height: 28px;
margin-top: 0px;
margin-bottom: 27px;
font-family: 'Raleway';


}

.question-3{
font-size: 16px;
margin-top: 20px;
line-height: 28px;
font-weight: 700;
margin-bottom: 0px;
margin-top: 15px;
font-family: 'Raleway';



}

.answer-question3{
font-size: 17px;
margin-top: 30px;
line-height: 28px;
margin-top: 0px;
margin-bottom: 30px;
font-family: 'Raleway';


}
.photo1-image{
  width: 100%;
  height: auto;
  
  }

.photo2-image{
width: 100%;
height: auto;
margin-top: 0px;
}
.text-under-photo2{
    font-size: 11px;
    font-family: 'Raleway';
  }



.photo3-image{
width: 100%;
height: auto;
margin-top: 0px;


}
.photo3-image{
  width: 100%;
  height: auto;
  margin-top: 0px;
  
  
  }


.text-3-box{
    
    
    height: 545px;
    margin-left: 350px;
    margin-right: 350px;
    margin-top: 20px;
    font-family: 'Raleway';


  }

.question-4{

margin-top: 20px;
font-size: 16px;
margin-top: 20px;
line-height: 28px;
font-weight: 700;
margin-bottom: 0px;
margin-top: 15px;
font-family: 'Raleway';




}
.answer-question4{
font-size: 17px;
margin-top: 30px;
line-height: 28px;
margin-top: 0px;
margin-bottom: 30px;
font-family: 'Raleway';
}

.question-5{

margin-top: 20px;
font-size: 16px;
margin-top: 20px;
line-height: 28px;
font-weight: 700;
margin-bottom: 0px;
margin-top: 15px;
font-family: 'Raleway';




}
.answer-question5{
font-size: 17px;
margin-top: 30px;
line-height: 28px;
margin-top: 0px;
margin-bottom: 30px;
font-family: 'Raleway';
}

.question-6{

margin-top: 20px;
font-size: 16px;
margin-top: 20px;
line-height: 28px;
font-weight: 700;
margin-bottom: 0px;
margin-top: 15px;
font-family: 'Raleway';




}
.answer-question6{
font-size: 17px;
margin-top: 30px;
line-height: 28px;
margin-top: 0px;
margin-bottom: 30px;
font-family: 'Raleway';
}


.conclusion{
font-size: 17px;
margin-top: 30px;
line-height: 28px;
font-family: 'Raleway';



}
.text-under-photo3{
    font-size: 11px;
    font-family: 'Raleway';
  }


  .credits{
  
  height: 30px;
  margin-top: 230px;
  margin-left: 350px;
    margin-right: 350px;
    font-size: 25px;
    font-weight: 700;
    font-family: 'Mukta Mahee';
    margin-bottom: 20px;




 }
 .credits-text{
  height: 300px;
  margin-top: 20px;
  margin-left: 350px;
    margin-right: 350px;
    border-top: 1px solid rgb(219, 214, 214);
   
  

 }

 .credits-1:hover{
 
 color: rgb(143, 137, 137);

 }
 @media screen and (max-width: 767px) {
  .text-1-box,
  .text-2-box,
  .text-3-box,
  .credits,
  .by,
  .credits-text {
      margin: 20px;
  }
  .credits{
    margin-top: 0px;
    margin-bottom: 20px;
  }
  .footer-page{
    margin-top: -210px;
  }
  .photo1-image{
    width: 100%;
    height: auto;
    
    }
  
  .photo2-image{
  width: 100%;
  height: auto;
  }
  .photo3-image{
    width: 100%;
    height: auto;
    
    
    }
   .credits-container{
    margin-bottom: 500px;
   }
   .text-1-1{

    margin-left: 20px;
    margin-right: 20px;
    line-height: 45px;
  }
  .text-1-2{
    margin-right: 20px;
    margin-left: 20px;
  }
  
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .text-1-box,
  .text-2-box,
  .text-3-box,
  .credits,
  .by,
  .credits-text {
      margin: 30px;
  }
  .credits{
    margin-top: 180px;
    margin-bottom: 30px;
  }
  .footer-page{
    margin-top: -210px;
  }
  .text-1-1{
    margin-left: 20px;

  }
  .text-1-2{
    margin-left: 20px;
  }
}

@media screen and (min-width: 1024px) and (min-height: 768px) and (max-width: 1024px) and (max-height: 768px) {
  .credits{

    margin-top: 500px;
  }
  .text-1-1{
    margin-right: 20px;
    margin-left: 20px;
  }
  .text-1-2{
    margin-right: 20px;
    margin-left: 20px;
  }
  .by{
    margin-right: 20px;
    margin-left: 20px;
  }


}
@media screen and (min-width: 1280px) and (min-height: 800px) and (max-width: 1280px) and (max-height: 800px) {
  .text-1-box,
  .text-2-box,
  .text-3-box,
  .credits,
  .by,
  .credits-text {
      margin: 350px;
  }
  .credits{
    margin-top: 1000px;
    margin-bottom: 30px;
  }
  .footer-page{
    margin-top: -210px;
  }
  .photo1-image{
    width: 100%;
    height: auto;
    
    }
  
  .photo2-image{
  width: 100%;
  height: auto;
  }
  .photo3-image{
    width: 100%;
    height: auto;


}



}
@media screen and (min-width: 414px) and (min-height: 896px) and (max-width: 414px) and (max-height: 896px) {

.credits{
  margin-top: 50px;
    margin-bottom: 30px;
}
.menu-container{
width: 100%;
margin-left: 30px;

}

}
@media screen and (min-width: 390px) and (min-height: 844px) and (max-width: 390px) and (max-height: 844px) {

  .credits{
    margin-top:-200px;
      margin-bottom: 30px;
  }
  .menu-container{
  width: 100%;
  
  }
  
  .logo-menu{
    font-size: 3.5rem;
    padding-left: 20px;
    user-select: none;
    
    

  }


  
  #container{
    padding-left: 20px;
    user-select: none;
    
    
    
    


  }
   .close-button{
    user-select: none;
    
   }
  

  .socialmedia-menu{

    
    margin-left: 20px;
    user-select: none;
    
    
  }
   
  .logos-footer-menu{
    
    user-select: none;
   
    
    
    
  }
  .legal-menu{
    user-select: none;
    padding-left: 20px;
    
  }

  }
  @media screen and (min-width: 393px) and (min-height: 851px) and (max-width: 393px) and (max-height: 851px) {

    .credits{
      margin-top: -190px;
        margin-bottom: 30px;
    }

  }
  @media screen and (min-width: 360px) and (min-height: 740px) and (max-width: 360px) and (max-height: 740px) {

    .menu-container{
      width: 100%;
      
      }
      .credits{
        margin-top: 0px;
      }
      .logo-menu{
        font-size: 3.5rem;
        padding-left: 20px;
        user-select: none;
        
        
    
      }
    
    
      
      #container{
        padding-left: 20px;
        user-select: none;
        
        
        
        
    
    
      }
       .close-button{
        user-select: none;
        margin-left: 300px;
        
       }
      
    
      .socialmedia-menu{
    
        
        margin-left: 20px;
        user-select: none;
        
        
      }
       
      .logos-footer-menu{
        
        user-select: none;
       
        
        
        
      }
      .legal-menu{
        user-select: none;
        padding-left: 20px;
        
      }

  }
  @media screen and (min-width: 412px) and (min-height: 914px) and (max-width: 412px) and (max-height: 914px) {
    .credits{
      
    }
    .menu-container{
      width: 100%;
    }
       .logo-menu{
        font-size: 3.5rem;
        padding-left: 20px;
        user-select: none;
        
        
    
      }
    
    
      
      #container{
        padding-left: 20px;
        user-select: none;
        
        
        
        
    
    
      }
       .close-button{
        user-select: none;
        margin-left: 300px;
        
       }
      
    
      .socialmedia-menu{
    
        
        margin-left: 20px;
        user-select: none;
        
        
      }
       
      .logos-footer-menu{
        
        user-select: none;
       
        
        
        
      }
      .legal-menu{
        user-select: none;
        padding-left: 20px;
        
      }
  }


  @media screen and (min-width: 820px) and (min-height: 1180px) and (max-width: 820px) and (max-height: 1180px) {


  .logo-menu{
    font-size: 3.5rem;
    padding-left: 30px;
    user-select: none;
    
    

  }


  
  #container{
    padding-left: 30px;
    user-select: none;
    
    
    
    


  }
   .close-button{
    user-select: none;
   
    
   }
  

  .socialmedia-menu{

    
    margin-left: 30px;
    user-select: none;
    
    
  }
   
  .logos-footer-menu{
    
    user-select: none;
   
    
    
    
  }
  .legal-menu{
    user-select: none;
    padding-left: 30px;
    
  }
  .text-1-1{

    margin-left: 20px;
    margin-right: 20px;
  }
  .text-1-2{
    margin-right: 20px;
    margin-left: 20px;
  }
  .credits{
    margin-top: 600px;
  }
}
@media screen and (min-width: 768px) and (min-height: 1024px) and (max-width: 768px) and (max-height: 1024px) {
  .text-1-1{

    margin-left: 20px;
    margin-right: 20px;
  }
  .text-1-2{
    margin-right: 20px;
    margin-left: 20px;
  }

}

@media screen and (min-width: 768px) and (min-height: 1040px) and (max-width: 768px) and (max-height: 1040px) {




}
@media screen and (min-width: 768px) and (min-height: 1040px) and (max-width: 768px) and (max-height: 1040px) {


  .logo-menu{
    font-size: 3.5rem;
    padding-left: 40px;
    user-select: none;
    
    

  }


  
  #container{
    padding-left: 40px;
    user-select: none;
    
    
    
    


  }
   .close-button{
    user-select: none;
   
    
   }
  

  .socialmedia-menu{

    
    margin-left: 40px;
    user-select: none;
    
    
  }
   
  .logos-footer-menu{
    
    user-select: none;
   
    
    
    
  }
  .legal-menu{
    user-select: none;
    padding-left: 40px;
    
  }
  
}

@media screen and (min-width: 912px) and (min-height: 1368px) and (max-width: 912px) and (max-height: 1368px) {

  .credits{
    margin-top: 440px;
  }
  .text-1-1{

    margin-left: 20px;
    margin-right: 20px;
  }
  .text-1-2{
    margin-right: 20px;
    margin-left: 20px;
  }

}

@media screen and (min-width: 540px) and (min-height: 720px) and (max-width: 540px) and (max-height: 720px) {

  .credits{
    margin-top: 0px;
  }

}

@media screen and (min-width: 720px) and (min-height: 1114px) and (max-width: 720px) and (max-height: 1114px) {

  .credits{
    margin-top: 200px;
  }

}
@media screen and (min-width: 720px) and (min-height: 540px) and (max-width: 720px) and (max-height: 540px) {

  .credits{
    margin-top: 180px;
  }

}
@media screen and (min-width: 280px) and (min-height: 653px) and (max-width: 280px) and (max-height: 653px) {

  .credits{
    margin-top: -180px;
  }
  .logo-container{
    margin-top: 10px;
    width:30%;
    
  }
  .ig-logo-latest{
    height: 10px;
  }
  .menu-container{

    width: 100%;
    margin-left: 20px;
  }

}
@media screen and (min-width: 653px) and (min-height: 280px) and (max-width: 653px) and (max-height: 280px) {
  .credits{
    margin-top: 350px;
  }
  .menu-container{
    overflow: scroll;
  }

}
@media screen and (min-width: 512px) and (min-height: 717px) and (max-width: 512px) and (max-height: 717px) {
  .credits{
    margin-top: -50px;
  }
  .menu-container{
    overflow: scroll;
  }

}
@media screen and (min-width: 412px) and (min-height: 914px) and (max-width: 412px) and (max-height: 914px) {
  .credits{
    margin-top: -200px;
  }
  .menu-container{
    overflow: scroll;
  }

}

@media screen and (min-width: 1040px) and (min-height: 600px) and (max-width: 1040px) and (max-height: 600px) {
  .text-1-box,
  .text-2-box,
  .text-3-box,
  .credits,
  .by,
  .credits-text {
      margin: 20px;
  }
  .credits{
    margin-top: 3000px;
    margin-bottom: 30px;
  }
  .footer-page{
    margin-top: -210px;
  }
  .photo1-image{
    width: 100%;
    height: auto;
    
    }
  
  .photo2-image{
  width: 100%;
  height: auto;
  }
  .photo3-image{
    width: 100%;
    height: auto;


}

}
@media screen and (min-width: 1040px) and (min-height: 600px) and (max-width: 1040px) and (max-height: 600px) {

  .credits {
    margin-top: 10px;
}


}


@media screen and (min-width: 667px) and (min-height: 375px) and (max-width: 667px) and (max-height: 375px) {

  .menu-container{
  height: auto;
    overflow-y: scroll;
  }
  .logo-container{
    left: 0;
  }
  .credits{
    margin-top: 120px;
  }
  
  }

  @media screen and (min-width: 375px) and (min-height: 667px) and (max-width: 375px) and (max-height: 667px) {

    .credits{
      margin-top: -200px;
    }


  }


  @media screen and (min-width: 896px) and (min-height: 414px) and (max-width: 896px) and (max-height: 414px) {
  .credits{
   margin-top: 350px;
  }
  .menu-container{
    height: auto;
    overflow-y: scroll;
  }
  .text-1-1{
    margin-right: 20px;
    margin-left: 20px;
  }
  .text-1-2{
    margin-right: 20px;
    margin-left: 20px;
  }
  .by{
    margin-right: 20px;
    margin-left: 20px;
  }


  }


  @media screen and (min-width: 414px) and (min-height: 896px) and (max-width: 414px) and (max-height: 896px) {
  
    .menu-container{
      width: 100%;
      overflow-y: scroll;
    }
    .credits{
      margin-top: -160px;
    }
    
    }
    @media screen and (min-width: 896px) and (min-height: 414px) and (max-width: 896px) and (max-height: 414px) {
  
      .menu-container{
        
        overflow-y: scroll;
      }
      
      }
  
    @media screen and (min-width: 844px) and (min-height: 390px) and (max-width: 844px) and (max-height: 390px) {
  
        .menu-container{
          height: auto;
          overflow-y: scroll;
        }
        .credits{
          margin-top: 280px;
        }
        .text-1-1{
          
          margin-right: 20px;

        }
        
        }
        @media screen and (min-width: 851px) and (min-height: 393px) and (max-width: 851px) and (max-height: 393px) {
  
          .menu-container{
            height: auto;
            overflow-y: scroll;
          }
          .credits{
            margin-top: 280px;
          }
          .text-1-1{
            margin-right: 20px;
            margin-left: 20px;
          }
          .text-1-2{
            margin-right: 20px;
            margin-left: 20px;
          }
          .by{
            margin-right: 20px;
            margin-left: 20px;
          }
          
          }

          @media screen and (min-width: 740px) and (min-height: 360px) and (max-width: 740px) and (max-height: 360px) {
          .credits{
           
            margin-top: 180px;
          }


          }


          @media screen and (min-width: 360px) and (min-height: 740px) and (max-width: 360px) and (max-height: 740px) {
  
            .menu-container{
              width: 100%;
              overflow-y: scroll;
              margin-left: 0px;
              
            }
            .logo-menu{
              margin-left: 0px;
            }
            #container{
              margin-left: 0px;
            }
            .legal-menu{
              margin-left: 0px;
  
            }
            .close-button{
              margin-left: 290px;
            }
            .credits{
              margin-top: -180px;
            }
  
          }
  
  
          @media screen and (min-width: 740px) and (min-height: 360px) and (max-width: 740px) and (max-height: 360px) {
  
            .menu-container{
height: auto;
              overflow-y: scroll;
            }
            .credits{

              
            }
          }

  
          @media screen and (min-width: 412px) and (min-height: 915px) and (max-width: 412px) and (max-height: 915px) {
            .menu-container{
              width: 100%;
              overflow-y: scroll;
              margin-left: 10px;
              
            }
            .logo-menu{
              margin-left: 10px;
            }
            #container{
              margin-left: 10px;
            }
            .legal-menu{
              margin-left: 10px;
  
            }
            .credits{
              margin-top: -150px;
            }
          }
          @media screen and (min-width: 915px) and (min-height: 412px) and (max-width: 915px) and (max-height: 412px) {
  
            .menu-container{
              height: auto;
              overflow-y: scroll;
            }
            .credits{

              margin-top: 350px;
            }
            .text-1-1{
              margin-right: 20px;
              margin-left: 20px;
            }
            .text-1-2{
              margin-right: 20px;
              margin-left: 20px;
            }
            .by{
              margin-right: 20px;
              margin-left: 20px;
            }
          }

          @media screen and (min-width: 1114px) and (min-height: 720px) and (max-width: 1114px) and (max-height: 720px) {
  
            .credits{
              
              margin-top: -100px;
            }
          }
          @media screen and (min-width: 820px) and (min-height: 1180px) and (max-width: 820px) and (max-height: 1180px) {
            .menu-container{
              
              overflow-y: scroll;
              margin-left: 40px;
              
            }
            .logo-menu{
              margin-left: 40px;
            }
            #container{
              margin-left: 40px;
            }
            .legal-menu{
              margin-left: 40px;
  
            }
            .credits{
              margin-top: 250px;
            }

          }
          @media screen and (min-width: 1180px) and (min-height: 820px) and (max-width: 1180px) and (max-height: 820px) {

         .credits{
          margin-top: 0px;
         }


          }
          @media screen and (min-width: 912px) and (min-height: 1368px) and (max-width: 912px) and (max-height: 1368px) {
            .menu-container{
              
              overflow-y: scroll;
              margin-left: 40px;
              
            }
            .logo-menu{
              margin-left: 40px;
            }
            #container{
              margin-left: 40px;
            }
            .legal-menu{
              margin-left: 40px;
  
            }
          }
          @media screen and (min-width: 720px) and (min-height: 540px) and (max-width: 720px) and (max-height: 540px) {

.menu-container{
  height: auto;
  overflow-y: scroll;
}

          }
          @media screen and (min-width: 540px) and (min-height: 720px) and (max-width: 540px) and (max-height: 720px) {
            .menu-container{
              
              overflow-y: scroll;
              margin-left: 10px;
              
            }
            .logo-menu{
              margin-left: 10px;
            }
            #container{
              margin-left: 10px;
            }
            .legal-menu{
              margin-left: 10px;
  
            }
          }
          @media screen and (min-width: 720px) and (min-height: 540px) and (max-width: 720px) and (max-height: 540px) {
            .menu-container{
              
              overflow-y: scroll;
              
              
            }
          }
  
  
          @media screen and (min-width: 280px) and (min-height: 653px) and (max-width: 280px) and (max-height: 653px) {
            .menu-container{
              width: 100%;
              overflow-y: scroll;
              margin-left: 0px;
              
            }
            .logo-menu{
              margin-left: 0px;
            }
            #container{
              margin-left: 0px;
            }
            .legal-menu{
              margin-left: 0px;
  
            }
            .close-button{
              margin-left: 220px;
            }
            .text1{
              font-size: 8px;
              
            }
            .final-text{
              margin-left: 10px;
              margin-right: 10px;
            }
            .text2{
              font-size: 8px;
              
            }
            .text3{
              font-size: 8px;
              
            }
            .text4{
              font-size: 8px;
              
            }
            .credits{
              margin-top: -300px;
            }
          }
  
          @media screen and (min-width: 653px) and (min-height: 280px) and (max-width: 653px) and (max-height: 280px) {
            .menu-container{
              height: auto;
              overflow-y: scroll;
              
              
            }
            .credits{
              margin-top: 100px;
            }
          }
          @media screen and (min-width: 717px) and (min-height: 512px) and (max-width: 717px) and (max-height: 512px) {
            .menu-container{
              height: auto;
              overflow-y: scroll;
              
              
            }
            .credits{
              margin-top: 150px;
            }
          }
  
          @media screen and (min-width: 412px) and (min-height: 914px) and (max-width: 412px) and (max-height: 914px) {
            .menu-container{
              
              overflow-y: scroll;
              margin-left: 10px;
              
            }
            .logo-menu{
              margin-left: 10px;
            }
            #container{
              margin-left: 10px;
            }
            .legal-menu{
              margin-left: 10px;
  
            }
            .credits{
              margin-top: 0px;
            }
          }
          @media screen and (min-width: 914px) and (min-height: 412px) and (max-width: 914px) and (max-height: 412px) {
            .menu-container{
              height: auto;
              overflow-y: scroll;
              
              
            }
            .credits{
              margin-top: 350px;
            }
            .text-1-1{

              margin-left: 20px;
              margin-right: 20px;
            }
            .text-1-2{
              margin-right: 20px;
              margin-left: 20px;
            }
          }
  
          @media screen and (min-width: 1024px) and (min-height: 600px) and (max-width: 1024px) and (max-height: 600px) {
            .menu-container{
              height: auto;
              overflow-y: scroll;
              
              
            }
            .main-tittle, .main-tittle1{
              line-height: 40px;
              padding-left: 20px;
              padding-right: 20px;
            }
            .logo-menu{
              margin-left: 40px;
            }
            #container{
              margin-left: 40px;
            }
            .legal-menu{
              margin-left: 40px;
  
            }
            .credits{

              margin-top: 450px;
            }
            .text-1-1{

              margin-left: 20px;
              margin-right: 20px;
            }
            .text-1-2{
              margin-right: 20px;
              margin-left: 20px;
            }
          }
  
          @media screen and (min-width: 1280px) and (min-height: 800px) and (max-width: 1280px) and (max-height: 800px) {
            .menu-container{
              
              overflow-y: scroll;
              
              
            }
            .logo-menu{
              margin-left: 40px;
            }
            #container{
              margin-left: 40px;
            }
            .legal-menu{
              margin-left: 40px;
  
            }
            .by{

              margin-top: 20px;
            }
            .text-1-1{

              margin-top: -320px;
            }
            .text-1-box{

              margin-top: 0px;
            }
            .text-2-box{
              margin-top: -320px;
              
            }
            .text-3-box{
             margin-top: -300px;
            }
            .credits{
              margin-top: -200px;
            }
            .credits-text{

              margin-top: 0px;
            }
            .footer-page{
              margin-top: -430px;
            }
  
  
          }

  
  
          @media screen and (min-width: 412px) and (min-height: 892px) and (max-width: 412px) and (max-height: 892px) {
            .menu-container{
              
              overflow-y: scroll;
              
              
            }
            .logo-menu{
              margin-left: 20px;
            }
            #container{
              margin-left: 20px;
            }
            .legal-menu{
              margin-left: 20px;
  
            }
            .credits{
              margin-top: -130px;
            }
  
  
          }
  
          @media screen and (min-width: 892px) and (min-height: 412px) and (max-width: 892px) and (max-height: 412px) {
            .menu-container{
              height: auto;
              overflow-y: scroll;
              
            }
            .credits{
              margin-top: 350px;
            }
            .text-1-1{

              margin-left: 20px;
              margin-right: 20px;
            }
            .text-1-2{
              margin-right: 20px;
              margin-left: 20px;
            }
          }


          @media screen and (min-width: 938px)  {
            .footer-page{
              margin-top: 100px;
            }

          }
          @media screen and (min-width: 460px)  {
            .footer-page{
              margin-top: 100px;
            }

          }
          @media screen and (min-width: 375px)  {
            .footer-page{
              margin-top: 50px;
            }

          }