*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: poppins,sans-serif;
  text-decoration: none;
}
body{
  overflow-x: hidden;
}
  

/* Basic button styling */

.pulsingButton {
  width: 220px;
  text-align: center;
  white-space: nowrap;
  display: bck;
  margin: 50px auto;
  padding: 10px;
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  border-radius: 10px;
  background-color: #FF0000;
  -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  font-size: 22px;
  font-weight: normal;
  font-family: sans-serif;
  text-decoration: none !important;
  color: #ffffff;
  transition: all 300ms ease-in-out;
          cursor: pointer;

}


@media (max-width: 600px) {
  .pulsingButton{
    top: -41%;
        position: absolute;
        left: 47%;
        padding: 3%;
        margin: -65px;
        width: 39%;
    }


}
  
      
      


/* Comment-out to have the button continue to pulse on mouseover */

a.pulsingButton:hover {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
  color: #ffffff;
}


/* Animation */

@-webkit-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@-moz-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@-ms-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}



.botonplay{
  width:100%;
  height: 100%;

  background: white;
  overflow: hidden;
  height: 200%;
  left: -53px;
  position: relative;
}

@media (max-width: 600px) {
.botonplay{
  top: 114%;
        position: absolute;
        left: 8%;
        padding: 5%;
        width: 117%;
}

    
    }



.hero-header{
  width:100%;
  height: 100%;
  min-height: 274vh;
  background: white;
}
.wrapper{
  width:1280px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0px;
}
header{
  padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 90%;
    top: 0%;
    position: relative;
    left: -10%;


}




@media (max-width: 600px) {

header{
  padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 90%;
    top: 15%;
    position: relative;
    left: -10%;


}
}





.logo{

  left: 32%;
  position: relative;
  width: 12%;
}

.logo i{
  height: 45px;
  width:45px;
  background-color: #007ced;
  border-radius: 50%;
  color:#fff;
  font-weight: 700;
  font-size: 1.5rem;
  padding: 10px;
  margin-right: 5px;
  cursor: pointer;
  text-align: center;
  
}
.logo .logo-text{
  font-size: 24px;
  font-weight: 500;
  color:#fff;

}
nav .navlinks{
  list-style-type: none;
}
nav .navlinks li{
  display: inline-block;
}
nav .navlinks li a{
   color:black;
   margin-right: 1.5rem;
   font-size: 115%;
  transition: color 0.3s;
  text-shadow: 10px;

  }
  nav .navlinks li :hover {
    color: #ffcc00; /* Color al pasar el cursor (puedes cambiarlo) */

}
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top:3rem;
  background: black;
}
.container .hero-pic{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  border: 15px solid #444;
  box-shadow: 5px 7px 25px rgba(0,0,0,0.5);
}
.hero-pic img{
  height: 100%;
  width:100%;
  transition: 0.5s;
}
.hero-pic img:hover{
  transform: scale(1.2);
}
.hero-text{
  max-width: 500px;
  display: flex;
  flex-direction: column;
  top: -32px;
  right: 18%;
  position: absolute;

  height: 46px;
}


.hero-text h5{
  color:#e5e5e5;
  font-size: 14px;
  background-color: black;
}
.hero-text h5 span{
  color:#007ced;
  font-size: 16px;
}
.hero-text h1{
  color: #007ced;
  font-size: 3rem;
}
.hero-text p{
  color:#e5e5e5;

}
.btn-group{
  margin:45px 0;
}
.btn-group .btn{
  border-color: #d5d5d5;
  color:#fff;
  background-color: #333;
  padding: 12px 25px;
  margin: 5px 0px;
  margin-right:7px;
  border-radius: 30px;
  border:2px solid #e5e5e5;
  box-shadow:  0 10px 10px -8px rgb(0 0 0 / 78%);
}
.btn.active{
  border-color: #007ced;
}
.hero-text .social i{
  color: #e5e5e5;
  font-size: 31px;
  margin-right: 53px;
  transition: 0.5s;
}



  .social {
 
position: absolute;
display: flex;
right: 10%;

  }






@media (max-width: 600px) {
.social {

font-size: 31px;
margin-right: 53px;
transition: 0.5s;
width: 10px;
display: flex;
left: -262px;
position: absolute;

}

}

.hero-text .social i:hover{
  color:#007ced;
  transform: rotate(360deg);
}


@media (max-width: 600px) {
nav .navlinks {
  height: 5%;
        top: 87%;
        position: relative;
        left: 34%;
        padding: 4%;
        margin: 8px;
        width: 130%;

}
}





@media(max-width: 600px)

  .container{
      flex-direction: column;
      padding-top:2rem
  }
  .hero-text{
      padding:40px 0px;
  }



/* Wrapper */
:root{
  --white-c: #fff;
  --black-c: #000;
  --body-background-c: #FD7AC0;
  --wrapper-background
  --wrapper-shadow-c: rgba(0, 0, 0, 0.219);
  --buttons-background-c: rgba(255, 255, 255, 0.219);
  --buttons-active-background-c: rgba(135, 207, 235, 0.493);
}
.wrapper{
  width: 100%;
  height: 73%;
  position: absolute;
  background-color: var(--wrapper-background-c);
  box-shadow: 0 0 80px var(--wrapper-shadow-c);
}


@media (max-width: 600px) {
.wrapper{
  font-size: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;

     
      
  }
}







/* Images Area */
.images-area{
  width: 100%;
  height: 84%;
  position: relative;
  display: flex;
  overflow: hidden;
  top: -6%;
  
}




@media (max-width: 600px) {

.logo {
  width: 42%;
        left: 17%;
        top: -160%;
        position: absolute;
    
    



}
  }



@media (max-width: 600px) {
  .images-area{
    display: hidden;
    background-size: 132%;
    width: 235%;
    left: -63%;
    height: 33%;
    top: 0%;

  
}
      
      
  }




.images-area img{
  width: 100%;
  transition: 0.3s cubic-bezier(.79,.03,0,.99);
  
}















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

body {
  font-family: Arial, sans-serif;
}

.slider-container {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  background-image: url('fondo.png');
  height: auto;
}


@media (max-width: 600px) {

.slider-container {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  top: 16%;
  background-image: url('fondo.png');
  height: auto%;

}
}





.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  
}


@media (max-width: 600px) {
.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 234%;
  left: -63%;
  position: relative;

}
}




.slide {
  min-width: 100%;
}


img {
  width: 100%;
  height: 102%;
}




b {
  position: absolute;
  top: 50%;
  padding: 16px;
  color: white;
  font-size: 24px;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
}

.prev {
  left: 0;
  transform: translateY(-50%);
}

.next {
  right: 0;
  transform: translateY(-50%);
}





































.banner1{
  width: 49%;
  position: absolute;
  top: 120%;
  left: 10%;
  transform: translateY(-50%);
  display: flex
;
  justify-content: space-between;


}



.banner2{
  width: 20%;
    position: absolute;
    top: 121%;
    left: 61%;
    transform: translateY(-50%);
    display: flex
;
    justify-content: space-between;
    overflow: hidden;
}



@media (max-width: 600px) {
  .banner1{
  
    font-size: 14px;
        width: 96%;
        height: 44%;
        display: flex
;
        left: 7px;
        top: 46%;

  }
      
      }

      @media (max-width: 600px) {
        .banner2{
        
          font-size: 14px;
        width: 94%;
        height: 35%;
        display: flex
;
        left: 11px;
        top: 73%;
      }
        
            }
  









.app-container{
width: 100%;
    position: relative;
    top: 0%;
    left: 0;
    display: flex;
    justify-content: space-between;


}





 @media (max-width: 600px) {
.app-container{

  font-size: 14px;
  width: 283%;
  height: 6%;
  display: flex;
  left: -89%;


  top: 100px;
  

  
  
}

}


            .solapa{
              width: 62%;
              position: relative;
              top: 23px;
              left: 47px;
              display: flex;
              justify-content: space-between;
            }
            
            
            
            .solapaa{
              width: 322px;
    position: relative;
    top: -96px;
    left: 912px;
    display: flex
;
    justify-content: space-between;
    height: 70px;
          
}
            
            
            
            @media (max-width: 600px) {
              .solapa{
              
             font-size: 14px;
        width: 95%;
        height: 51px;
        display: flex;
        left: 7px;
        top: 18%;
            
              }
                  
                  }
            
            
            
                  @media (max-width: 600px) {
                    .solapaa{
                    
                      font-size: 14px;
        width: 75%;
        height: 9%;
        display: flex
;
        left: 54px;
        top: 10%;
                  }
                    
                        }
              
            




































      .programas{
        overflow: hidden;
  width: 49%;
  height: 37%;
  position: relative;
  background-color: #fff;
  left: 26%;
  top: 80%;

}

.contenedor-imagenes {
  display: flex; /* Permite que las im谩genes se alineen en fila */
  animation: mover 20s infinite; /* Duraci贸n y repetici贸n */
}

.imagen {
  width: 300px; /* Ancho de cada imagen */
  height: 106px; /* Alto de cada imagen */
}

@keyframes mover {
  0% {
      transform: translateX(0);
  }
  20% {
      transform: translateX(-300px); /* Mueve la primera imagen fuera de vista */
  }
  40% {
      transform: translateX(-600px); /* Mueve la segunda imagen fuera de vista */
  }
  60% {
      transform: translateX(-900px); /* Mueve la tercera imagen fuera de vista */
  }
  80% {
      transform: translateX(-1200px); /* Mueve la cuarta imagen fuera de vista */
  }
  100% {
      transform: translateX(0); /* Regresa a la posici贸n inicial */
  }
}







    
    
      @media (max-width: 600px) {
        .programas{
          top: 80%;
          left: 100%;
        }
            
            }
        
    


           
















            @import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");

* {
font-family: 
}

.row {
width: 95%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-column-gap: 20px;
}



&__content {
  padding: 10px 15px;
  overflow: hidden;
}

&__heading-container {
  width: 95%;
}

&__heading {
  overflow: hidden;
  padding-right: 3px;
}

&__description {
  font-size: 14px;
  line-height: 24px;
}

&__hashtag {
  color: red;
}

.btn btn2 {
  padding: 20px 40px;
  letter-spacing: 1px;
  transition: all 0.5s;
  background: transparent;
  position: relative;
  border: none;
  margin-left: auto;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  border-radius: 5px;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    transform: scaleY(0);
    transform-origin: center;
    border-radius: 5px;
    z-index: -1;
    transition: 0.4s;
  }

  &:hover {
    color: #fff;

    &::before {
      transform: scaleY(1);
    }
  }
}














.newssection-container {
  width: 100%;
display: flex
;
/* justify-content: space-between; */
gap: 49px;
padding: 269px;
POSITION: absolute;
top: 219px;
background: #80808045;
  
   
}
@media (max-width: 600px) {


  .newssection-container {
  
      width: 100%;
      display: flex;
      /* justify-content: space-between; */
      /* gap: 48px; */
      padding: 9px;
      POSITION: absolute;
      TOP: 37%;
      background: #80808045;
      flex-direction: column;
    
     
  }
     
  }
















    .news-container {
      width: 100%;
    display: flex
;
    /* justify-content: space-between; */
    gap: 49px;
    padding: 269px;
    POSITION: absolute;
    TOP: 920px;
    background: #80808045;
      
       
    }
    
     @media (max-width: 600px) {
      .news-container {
        width: 100%;
        display: flex;
        /* justify-content: space-between; */
        /* gap: 48px; */
        padding: 9px;
        POSITION: absolute;
        TOP: 993px;
        background: #80808045;
        flex-direction: column;
      }
    }
    

    .news-container h5 {
      text-align: center;
      /* margin-top: 10px; */
      text-align: left;
      font-size: 42px;
      text-align: center;
      /* padding: 11px; */
      top: 10%;
      position: absolute;
      left: 46%;

  }





.newssection-container h5 {

   text-align: center;
      /* margin-top: 10px; */
      text-align: left;
      font-size: 42px;
      text-align: center;
      /* padding: 11px; */
      top: 10%;
      position: absolute;
      left: 46%;
}
}







 .news-large {
      width: 500px; /* Ocupa 60% del ancho total */
      background-color: white;
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      height: 100%;
      
}



   

  
  
  .news-large {
      width: 74%; /* Ocupa 60% del ancho total */
      background-color: white;
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      height: 100%;
      
}

  @media (max-width: 600px) {


  .news-large {
    width: 99%; /* Ocupa 60% del ancho total */
    background-color: white;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    height: 39%;
    
    
}

}

  
  .news-large img {
      width: 100%;
      height: auto;
      border-radius: px;
      position: relative;
    top: 0%;
    -webkit-transition: all 0.5s ease-in-out;
  }

  .news-large img:hover {
    transform: scale(1.05); /* Aumenta ligeramente la imagen */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra al pasar el cursor */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .news-large h2 {
      text-align: center;
      margin-top: 10px;
      text-align: left;
      font-size: 31px;
      text-align: left;
      padding: 11px;
     color: black;
  }

  @media (max-width: 600px) {
  .news-large h2 {
    text-align: center;
    margin-top: 10px;
    text-align: left;
    font-size: 21px;
    text-align: left;
    color: black;
}
}
  
  
  .news-large h4 {
    text-align: center;
    margin-top: 10px;
    font-weight: normal;  
    text-align: left;
    font-size: 17px;
    padding: 10px;
    color: black;
}

@media (max-width: 600px) {
.news-large h4 {
  text-align: center;
  margin-top: 10px;
  font-weight: normal;  
  text-align: left;
  font-size: 17px;
  color: black;
  
}
}

  .news-small {
      width: 100%; /* Ocupa 35% del ancho total */
      
  }
  
  @media (max-width: 600px) {
  .news-small {
    width: 76%;

  
}
}

  .news-item {
      margin-bottom: 20px;
      
    background-color: white;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    width: 313px;
  }
  

  
  .news-item img {
      width: 100%;
      height: auto;
      border-radius: px;
      top: 2%;
      -webkit-transition: all 0.5s ease-in-out;
  }

  .news-item img:hover {
    transform: scale(1.05); /* Aumenta ligeramente la imagen */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra al pasar el cursor */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .news-item h3 {
      text-align: center;
      margin-top: 12px;
      text-align: left;
      padding: 13px;
       color: black;
  
  }
  





/* Estilo general */
body {
  font-family: Arial, sans-serif;
  background-color: #f7f7f7;
  margin: 0;
  padding: 0;
}

/* Título principal */
h1 {
  text-align: center;
  margin-top: 20px;
  color: #333;
  font-size: 2.5rem;
}

/* Contenedor principal de la programación */
.radio-schedule {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 8px;
  top: 90%;
  position: absolute;
  left: 0%;
}
  @media (max-width: 600px) {


.radio-schedule {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 8px;
  top: 500px;
  position: absolute;
  left: 0%;
}

}

/* Contenedor de la grilla de la programación */
.schedule {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 7 columnas para los días de la semana */
  gap: 20px;
}

/* Estilos para cada día */
.day {
  padding: 15px;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.day h2 {
  text-align: center;
  font-size: 1.5rem;
  color: #007bff;
  margin-bottom: 10px;
}

/* Estilos para cada programa */
.program {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 8px;
  background-color: #e9ecef;
  border-radius: 6px;
}

.program:hover {
  background-color: #dfe2e6;
  cursor: pointer;
}

/* Estilo de la hora y nombre del programa */
.time {
  font-weight: bold;
  color: #333;
}

.program-name {
  color: #555;
  font-style: italic;
}

/* Asegurar que la grilla se vea bien en pantallas pequeñas */
@media (max-width: 768px) {
  .schedule {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .schedule {
    grid-template-columns: 1fr;
  }
}






  
  .news-individual {
      width: 60%; /* Ocupa 60% del ancho total */
      background-color: white;
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      height: 93%;
      left:21%;
      position: absolute;
      top: 850px;
  }

  @media (max-width: 600px) {


  .news-individual {
   width: 96%;
        background-color: white;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
        height: 234%;
        left: 1%;
        top: 525px;
    
    
}

}

  
  .news-individual img {
      width: 100%;
      height: auto;
      border-radius: px;
      position: relative;
    top: 0%;
    -webkit-transition: all 0.5s ease-in-out;
  }

  .news-individual img:hover {
    transform: scale(1.05); /* Aumenta ligeramente la imagen */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra al pasar el cursor */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .news-individual h2 {
      text-align: center;
      margin-top: 10px;
      text-align: left;
      font-size: 31px;
      text-align: left;
      padding: 11px;

  }

  @media (max-width: 600px) {
  .news-individual h2 {
    text-align: center;
    margin-top: 10px;
    text-align: left;
    font-size: 21px;
    text-align: left;
}
}
  
  
  .news-individual h4 {
    text-align: center;
    margin-top: 10px;
    font-weight: normal;  
    text-align: left;
    font-size: 17px;
    padding: 10px;
    
}

@media (max-width: 600px) {
.news-individual h4 {
  text-align: center;
  margin-top: 10px;
  font-weight: normal;  
  text-align: left;
  font-size: 17px;
  
}
}




.carrusel {
  width: 600px;
  height: 400px;
  overflow: hidden;
  margin: auto;
  top: 2214px;
  position: absolute;
  left: 52%;
}

@media (max-width: 600px) {
  .carrusel {
  
  width: 364px;
        height: 276px;
        overflow: hidden;
        margin: auto;
        top: 2439px;
        position: absolute;
        left: 6px;


}
}





.imagenes {
  display: flex;
  animation: mover 20s infinite;
}

.imagenes img {
  width: 600px;
  height: 400px;
  object-fit: cover;
}






@keyframes mover {
  0% {
      transform: translateX(0);
  }
  25% {
      transform: translateX(-600px);
  }
  50% {
      transform: translateX(-1200px);
  }
  75% {
      transform: translateX(-1800px);
  }
  100% {
      transform: translateX(0);
  }
}
 



  




.container2 {
  display: flex
  ;
      justify-content: space-around;
      align-items: center;
      padding-top: 3rem;
      background: black;
      top: 3000px;
      position: absolute;
      width: 100%;
  }

  
.container2 h7{
  color: white;
    font-size: 14px;
    background-color: black;
    top: -20px;
    position: relative;
  }


  @media (max-width: 600px) {
  .container2 {
    display: flex;
        justify-content: space-around;
        align-items: center;
        padding-top: 3rem;
        background: black;
        top: 1200px;
        position: relative;
    }
  
    
  .container2 h7{
    color: white;
      font-size: 14px;
      background-color: black;
      top: -20px;
      position: relative;
    }
  
  }







  

  .container3 {
    width: 18%;
    top: 2280px;
    position: absolute;
    left: 15%;

  }


  @media (max-width: 600px) {

  .container3 {
    width: 18%;
    top: 2684px;
    position: absolute;
    left: -137px;


  }
}










  .contacto {
    top: 2762px;
    position: absolute;
    left: 15%;
    margin-bottom: 30px;
    background-color: white;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    width: 471px;
    border-radius: 7%;


}



.icono {
  width: 28%;
  position: relative;
  left: 2%;
  
}

.contacto h8{
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 5px;
    left: 111%;
    position: absolute;
    top: 9%;
  
}

.contacto h9{
 font-size: 17px;
    font-weight: 500;
    margin-bottom: 5px;
    left: 111%;
    position: absolute;
    top: 53%;

  
}















.contacto2 {
  top: 2762px;
  position: absolute;
  right: 15%;
  margin-bottom: 30px;
  background-color: white;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  width: 471px;
  border-radius: 7%;


}


.icono2 {
width: 28%;
position: relative;
left: 2%;

}

.contacto2 h10{
font-size: 28px;
  font-weight: 500;
  margin-bottom: 5px;
  left: 111%;
  position: absolute;
  top: 9%;

}

.contacto2 h11{
font-size: 15px;
font-weight: 500;
margin-bottom: 5px;
left: 111%;
position: absolute;
top: 53%;

width: 260px;
}







@media (max-width: 600px) {
.contacto {
top: 2762px;
        position: absolute;
        left: 0px;
        margin-bottom: 30px;
        background-color: white;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
        width: 333px;
        border-radius: 7%;


}
}


@media (max-width: 600px) {
  .contacto2 {
    top: 2962px;
    position: absolute;
    left: 0px;
    margin-bottom: 30px;
    background-color: white;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    width: 345px;
    border-radius: 7%;
  
  
  }
  }