@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root{
  font-size: 16px;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Inter;
}

html, body {
  margin: 0;
  padding: 0;
  background: #0C0C1C;
  overflow-x: hidden; 
  scroll-behavior: smooth;
  font-family: 'Inter', sans-serif;
  color: white;
}

#viewer {
  width: 31.25rem; 
  height: 31.25rem; 
  border-radius: 0.5rem; 
  overflow: hidden;
  background-color: transparent;
}

.titleSection{
  font-family: Inter;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
}

.descriptionSection{
  width: 31.25rem; 
  font-size: 1.25rem; 
  font-family: Inter;
  color: #9F9F9F;
  text-align: center;
  margin-top: 0rem;
}

.texto{
  margin-top: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modpackUniverse{
  background-color: #00000B;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -1rem;
}

.derecha img {
  transform-origin: center;
  animation: floatEntity 8s cubic-bezier(0.42, 0, 0.58, 1) infinite,
             glowPulse 5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 0.75rem rgba(127, 90, 240, 0.6)); 
  will-change: transform, filter;
}

@keyframes floatEntity {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate3d(-0.375rem, -0.625rem, 0.3125rem) rotate(-0.8deg) scale(1.02);
  }
  50% {
    transform: translate3d(0.375rem, 0.375rem, 0) rotate(0.6deg) scale(1.01); 
  }
  75% {
    transform: translate3d(-0.25rem, 0.625rem, -0.3125rem) rotate(-0.5deg) scale(1.03); 
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes glowPulse {
  0% {
    filter: drop-shadow(0 0 0.625rem rgba(127, 90, 240, 0.4))
            drop-shadow(0 0 1.25rem rgba(127, 90, 240, 0.3)); 
  }
  100% {
    filter: drop-shadow(0 0 1.5625rem rgba(127, 90, 240, 0.8))
            drop-shadow(0 0 2.5rem rgba(127, 90, 240, 0.6)); 
  }
}

.tweets{
  background-color: #00000B !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -1rem;
}

.latestVideos {
  text-align: center;
  color: white;
  padding: 2rem 1rem;
  background: #00000B;
}

.titleSection {
  font-size: 2rem; 
  margin-bottom: 0.5rem;
}

.descriptionSection {
  color: #bbb;
  margin-bottom: 2rem;
}

.video-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 62.5rem; 
  margin: 0 auto;
}

.video-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.video-item {
  min-width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-item iframe {
  width: 100%;
  max-width: 37.5rem; 
  height: 25rem; 
  border-radius: 0.75rem; 
  background: #000;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.carousel-dots button {
  width: 0.625rem; 
  height: 0.625rem; 
  border-radius: 50%;
  border: none;
  background: #555;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.carousel-dots button.active {
  background: #1da1f2;
  transform: scale(1.2);
}

@media (min-width: 48rem) { 
  .video-item {
    min-width: 33.33%;
  }
  .video-item iframe {
    width: 100%;
    height: 17.5rem; 
  }
}

.circle{
  width: 3.125rem; 
  height: 3.125rem; 
  background-color: #30234D;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.2rem;
}
.circle i{
  font-size: 1.125rem; 
  color: #A04EF2;
  margin: 0 !important;
  padding: 0;
}
.logos{
  color: #A04EF2;
}
.itemsHosting{
  display: flex;
  align-items: center;
  padding: 0.2rem;
  font-size: 1.25rem; 
}
.itemsHosting i{
  margin-right: 0.3rem;
}

.bisect{
  width: 28.125rem; 
  height: 23.125rem; 
  background-color: #080426;
  border: 0.0625rem solid #402A65;
  border-radius: 2.5625rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text{
  margin-top: 0rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.text h3{
  font-size: 2rem;
  margin: 0;
  margin-bottom: 1rem;
}
.bisectHostingLogo{
  margin-bottom: 1rem;
}
.text p{
  font-size: 1.25rem; 
  padding: 0;
  margin: 0;
  color: #9F9F9F;
}

.circle2{
  width: 3.125rem; 
  height: 3.125rem; 
  background-color: #3D1E24;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.2rem;
}
.circle2 i{
  margin: 0;
  padding: 0;
  font-size: 1.125rem;
  color: #EF4444;
}
.logos2{
  color: #9F9F9F;
}
.gris{
  color: #9F9F9F;
}
.servers{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.hostings{
  margin-top: -10rem;
  background-color: #00000B;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.botondescuento{
  margin-top: 4rem;
  width: 25rem; 
  height: 3.125rem; 
  background-color: #6700F3;
  border: 0;
  outline: none;
  border-radius: 0.9375rem; 
  color: white;
  font-size: 1.1875rem; 
}
.botondescuento i{
  margin-right: 0.5rem;
}

.theTeam{
  background-color: #00000B;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -1rem;
}
.user{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.user .name{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.name h4{
  font-size: 1.5625rem; 
}
.name p{
  font-size: 1.125rem; 
  color: #9F9F9F;
}
.theteam{
  margin-top: 4rem;
  display: flex;
  gap: 3rem;
}

.contactContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10rem;
  width: 60%;
  height: 43.75rem; 
  background-color: #070222;
  border-radius: 3.75rem; 
  overflow: hidden;
}
.contact{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00000B;
  height: 70rem;
}
.contactContainer img{
  width: 37.5rem; 
  position: relative;
  bottom: -3rem; 
  right: 0;
}

hr{
  background-color: #5d578773;
  border: 0.125rem solid #5d57870c;
}

footer{
  background-color: #070222;
  height: auto;
  color: #FFFFFF;
  padding: 2rem 0;
  justify-content: center;
  text-align: center;
}

.materia{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 5rem;
}
.materia .form{
  display: flex;
  flex-direction: column;
}
.textocontact h2{
  color: #FAF9F6;
  font-size: 3.125rem; 
}
.textocontact p{
  width: 34.375rem; 
  color: #9F9F9F;
  font-size: 1.5625rem;
  margin-bottom: 1.5rem;
  margin-top: 0.8rem;
}
.form input{
  margin-bottom: 1rem;
  width: 32.8125rem; 
  background-color: transparent;
  border: 0.0625rem solid #5D5787;
  border-radius: 1rem; 
  outline: none;
  color: #D4D2E2;
  font-size: 1rem; 
  padding: 1rem;
}
.nombre{
  height: 3.125rem; 
}

.asunto{
  height: 3.125rem; 
}
.mensaje{
  height: 12.5rem; 
  background-color: transparent;
  border: 0.0625rem solid #5D5787; 
  border-radius: 1rem; 
  outline: none;
  color: #D4D2E2;
  font-size: 1rem; 
  padding: 1rem;
  resize: none;
}
.sendButton{
  height: 3.125rem; 
  margin-top: 1rem;
  border-radius: 1rem; 
  border: 0;
  outline: none;
  background-color: #6700F3;
  color: white;
  font-family: Inter;
  font-size: 1.25rem; 
  font-weight: 500;
}
.sendButton i{
  margin-right: 0.5rem;
}
.contenido{
  display: flex;
  flex-direction: column;
}
.superior{
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.logoyname{
  display: flex;
  justify-content: space-between; 
  align-items: center;
  gap: 1.25rem;                    
  width: 80%;                     
  max-width: calc(100% - 2rem);    
  padding: 0 1rem;                 
  box-sizing: border-box;
}

.logoyname img{
  width: 6.25rem; 
}
.contenidoModpacks{
  display: flex;
  gap: 1rem;
}

.tarjeta{
  width: 18.75rem; 
  height: 8.75rem; 
  background-color: #08042680;
  border: 0.125rem solid #5d578754; 
  border-radius: 1rem; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.comunidad{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
.tarjeta .title{
  font-size: 1.25rem; 
  margin-top: 0.1rem;
}
.tarjeta .title i{
  margin-right: 0.2rem;
}
.tarjeta .unirse{
  width: 90%;
  height: 2.8125rem; 
  border-radius: 0.625rem; 
  border: 0;
  outline: none;
  background-color: #6500f3b9;
  color: white;
  font-size: 1rem; 
}
button{
  transition:  0.3s;
}
button:hover{
  box-shadow: #402A65 0 0 1.875rem; 
  cursor: pointer;
}
.modpackinfo:hover{
  box-shadow: #402A65 0 0 1.875rem; 
  cursor: pointer;
}

.infoPatreon, .infoDiscord {
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
  color: #CCCCCC;
  font-weight: 500;
}

.bisectHostingLogo{
  width: 8rem;
}

.media img{
  width: 28px;
  height: 28px;
}

.ulMedia li{
  background-color: white;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  border-radius: 50%;
}

.ulMedia{
  margin-top: 2rem !important;
  display: flex;
  flex-wrap: wrap;         
  gap: 0.5rem;             
  justify-content: center !important;
  align-items: center;
}

.media{
  display: flex;
  align-items: center;
}

.links{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

footer .contenido {
  max-width: 1200px;
  margin: auto;
  padding: 1rem;
}

.logoyname {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logosas {
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.superior ul li {
  margin: 0.35rem 0;
}

.superior a {
  text-decoration: none;
  color: inherit;
  font-weight: 500;
}



@media (min-width: 768px) {
  .logoyname {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .links {
    flex-direction: row;
    gap: 3rem;
    align-items: flex-start;
  }

  .links ul {
    text-align: left;
  }

  .ulMedia {
    justify-content: flex-start;
  }

  .superior {
    display: flex;
    justify-content: space-between;
  }
}
.videos-slider iframe {
  width: 35vw;
  height: 35vh;
  border: none;
  border-radius: 12px;
}

.videos-slider .swiper {
  width: 65%;      
  margin: 0 auto;
}
.swiper-button-next{
  color: white !important;
}
.swiper-button-prev{
  color: white !important;
}



.newsswiper {
  width: 65%;
  padding: 40px 0;
  overflow: hidden;  
}

.testimonials-slider{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.newsswiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.news-prev,
.news-next {
  color: #fff;
  border-radius: 50%;
}

.news-pagination .swiper-pagination-bullet {
  background: #fff !important;
}




@media (max-width: 1282px) {
  .newsswiper {
  width: 70%;
  padding: 40px 0;
  overflow: hidden;  
}
.videos-slider iframe {
  width: 42vw;
  height: 42vh;
  border: none;
  border-radius: 12px;
}

.videos-slider .swiper {
  width: 70%;      
  margin: 0 auto;
}
}

@media (max-width: 1066px) {
  .newsswiper {
  width: 75%;
  padding: 40px 0;
  overflow: hidden;  
}
.videos-slider iframe {
  width: 48vw;
  height: 48vh;
  border: none;
  border-radius: 12px;
}

.videos-slider .swiper {
  width: 75%;      
  margin: 0 auto;
}
}
@media (max-width: 901px) {
  .newsswiper {
  width: 85%;
  padding: 40px 0;
  overflow: hidden;  
}
.videos-slider iframe {
  width: 55vw;
  height: 55vh;
  border: none;
  border-radius: 12px;
}

.videos-slider .swiper {
  width: 85%;     
  margin: 0 auto;
}
}

.copy{
  margin-top: 3.5rem;
  color: #9F9F9F;
}