body{
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    padding-top: 30px;
    background-color: #f8f8f8;
    padding-top: 0;
    font-family: 'Poppins', sans-serif;
    display: block;
  }
  a:hover{
  text-decoration: none;
  }
  
  .logo{
  width: 60%;
  height: auto;
  }
  button:focus{
  outline: none;
  }
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='30' height='30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  .head-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navbar{
    width: 90%;
    height: 70px;
    background-color: #fff;
    margin-top: 30px;
  }
  
  
  .navbar-light .navbar-toggler {
  border-color: transparent;
  }
  
  .colapse-bar-links{
  width: 100%;
  height: 70px;
  border-right: none;
  border-bottom: solid 1px #ebebeb;
  margin-top: 15px;
  font-weight: 300;
  
  
  }
  .colapse-bar-links a{
  font-size: 21px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: left;
  color: #3d3d3d;
  margin-top: 3px;
  }
  .colapse-bar-links p{
  font-size: 17px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.18;
  letter-spacing: normal;
  text-align: left;
  color:#4626e0;
  margin-left: 2px;
  }
  .colapse-bar-links img{
  width: 30px;
  height: 30px;
  }
  
  .boton-flotante{
    border: none; /* Elimina el borde */
    padding: 0; /* Elimina el relleno */
    background: transparent; /* Fondo transparente */ /* Agrega la imagen de fondo */
    background-size: cover; /* Ajusta el tamaño de la imagen */
    position: fixed;
    bottom: 150px;
    right: 50px;
  }
  
  .boton-flotante img {
    width: 70px;
    height: 70px;
    object-fit: cover; /* Para que la imagen cubra completamente el botón */
  }
    /********************************instructor****************************************/
    #instructor-container-big{
      width: 100%;
      height: 450px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
  }
   #instructor-position{
      width: 90%;
      height: 100%;
      background: linear-gradient(121deg, rgba(255,255,255,1) 68%, rgba(70, 38, 224) 68%);
  }
  #instructor-info{
      width: 50%;
      padding: 3%;   
  }
  .instructor-photo{
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
  }
  .pen{
      width: 50px;
      height: auto;
  }
  .h3-instructor{
      font-size: 31px;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.45;
      letter-spacing: normal;
      text-align: left;
      color: #3d3d3d;
  }
  .h2-instructor{
      font-size: 31px;
      font-weight: 300;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.45;
      letter-spacing: normal;
      text-align: left;
      color: #3d3d3d;
  }
  .p1-instructor{
      font-size: 17px;
      font-weight: 300;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.45;
      letter-spacing: normal;
      text-align: left;
      color: #3d3d3d;
  
  }
  .p2-instructor{
    font-size: 21px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: normal;
    text-align: left;
    color: #3d3d3d;
    margin-bottom: 0%;
  }
  .p3-instructor{
    font-size: 21px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: normal;
    text-align: left;
    color: #3d3d3d;
    margin-bottom: 0%;
  }
  .instructor-img{
    width: auto;
    height: 450px;
    padding-top: 20px;
    z-index: 2;
}

.floating-1{
  width: 80px;
  height: auto;
  position: absolute;
  top: 8%;
  left: 65%;
  z-index: 1;
}
.floating-2{
  width: 100px;
  height: auto;
  position: absolute;
  top: 70%;
  left: 60%;
  z-index: 3;
  
}
.floating-3{
  width: 100px;
  height: auto;
  position: absolute;
  top: 30%;
  left: 35%;
  z-index: 2;
  
}
.floating-4{
  width: 80px;
  height: auto;
  position: absolute;
  top: 60%;
  left: 27%;
  z-index: 1s;
  
}
  /********************************class details****************************************/
  .class-detail-box{
      width: 100%;
      height: auto;
      background-color: #fff;
      margin-top: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .class-detail-box p{
      font-size: 18px;
    font-weight: 200;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.94;
    letter-spacing: normal;
    text-align: left;
    color: #222;
  }
  .class-detail-box h3{
      font-size: 31px;
      font-weight: 200;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.61;
      letter-spacing: normal;
      text-align: left;
      color: #222;
  }
  #class-detail-position{
      max-width: 90%;
      padding: 3%;
  }
  #class-detail-info{
      padding: 0;
  }
  #row2-details{
      margin-top: 20px;
  }
   /********************************course description****************************************/
   .course-description-container{
      margin-top: 40px;
      width: 100%;
      height: auto;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .course-description-container h3{
      font-size: 31px;
    font-weight: 200;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #4626e0;
   }
   .course-description-container p{
      font-size: 17px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: normal;
    text-align: left;
    color: #3d3d3d;
   }
   #course-description-position{
      width: 90%;
      height: auto;
      padding: 5.5%;
   }
  
   /********************************course question****************************************/
   .question-container{
      margin-top: 40px;
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   #question-position{
      max-width: 90%;
      height: fit-content;
   }
   .col-md-6 {
      background-color: #fff;
      max-width: calc(50% - 20px); /* 50% del ancho - el doble del margen */
      margin: 0 10px; /* Margen entre las cajas */
      box-sizing: border-box; /* Incluir el margen en el ancho total */
      padding: 5%;
  }
  
  .question-container h3{
      font-size: 31px;
    font-weight: 200;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #4626e0;
  }
  
  .question-container p{
      font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: normal;
    text-align: left;
    color: #3d3d3d;
  }
  
  /*******************************info divs shapes*****************************************/
  .rectangle-info-1 {
      width: 100%;
      height: 400px;
      display: flex;
      margin-bottom: 20px;
      margin-top: 30px;
  }
  
  .rectangle-info-2 {
      width: 100%;
      height: 400px;
      display: flex;
      margin-bottom: 20px;
  }
  
  .rectangle-info-3 {
      width: 100%;
      height: 400px;
      display: flex;
      margin-bottom: 20px;
  }
  
  .left-item-1 {
      flex-grow:1; /* Hace que el elemento ocupe todo el espacio disponible */
      height: 100%;
      background-color: #fff;
      margin-right: -170px;
      clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
      display: flex;
      text-align: left;
      flex-direction: column;
      justify-content: center;
      align-items:center;     
  }
  
  .right-item-2 {
      flex-grow: 1; /* Hace que el elemento ocupe todo el espacio disponible */
      height: 100%; /* Ajustado a 100% para que coincida con el valor de altura de .left-item-1 */
      background-color: #fff;
      clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
     
      background-size: cover; /* Ajustar la imagen para cubrir completamente el div */
      background-position: center;
  }
  
  .left-item-center {
      flex-grow: 1; /* Hace que el elemento ocupe todo el espacio disponible */
      height: 100%;
      background-color: #fff;
      margin-right: -170px;
      clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);

      background-size: cover; /* Ajustar la imagen para cubrir completamente el div */
      background-position: center;
  }
  .right-item-3 {
      flex-grow: 1; /* Hace que el elemento ocupe todo el espacio disponible */
      height: 100%; /* Ajustado a 100% para que coincida con el valor de altura de .left-item-1 */
      background-color: #fff;
      clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
      background-size: cover; /* Ajustar la imagen para cubrir completamente el div */
      background-position: center;
  }
  
  .right-item-center {
      flex-grow: 1; /* Hace que el elemento ocupe todo el espacio disponible */
      height: 100%; /* Ajustado a 100% para que coincida con el valor de altura de .left-item-1 */
      background-color: #fff;
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%);
      display: flex;
      text-align: left;
      flex-direction: column;
      justify-content: center;
      align-items:center; 
      
  }
  .item-center-left{
      position: absolute;
      width: 30%;
      height: 70%;
      display: flex;
      text-align: left;
      flex-direction: column;
      justify-content: center;
      align-items:center; 
      margin-right: 10px;
  }
  .item-center-right{
      position: absolute;
      width: 30%;
      height: 70%;
      display: flex;
      text-align: left;
      flex-direction: column;
      justify-content: center;
      align-items:center; 
  }
  .item-title{
      width: 100%;
      font-size: 31px;
      font-weight: 300;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.45;
      letter-spacing: normal;
      text-align: left;
      color: #3d3d3d;
      margin: 0;
  }
  .item-subtitle{
      width: 100%;
      font-size: 17px;
      font-weight: 300;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.45;
      letter-spacing: normal;
      text-align: left;
      color: #3d3d3d;
      margin-top: 20px;
  }
    /********************************our courses****************************************/
    .our-courses{
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      height: 50px;
      margin-top: 35px;
      font-size: 31px;
       font-weight: 300;
       font-stretch: normal;
       font-style: normal;
       line-height: 1.45;
       letter-spacing: normal;
     }
  
  
     #img1{
      background-image: url(../src/coding-classes-data-analytics-courses-1.jpg);
     }
     #img2{
      background-image: url(../src/coding-classes-data-analytics-courses-2.jpg);
     }
     #img3{
      background-image: url(../src/coding-classes-data-analytics-courses-3.jpg);
     }
     #img4{
      background-image: url(../src/coding-classes-data-analytics-courses-4.jpg);
     }
     #img5{
      background-image: url(../src/coding-classes-data-analytics-courses-5.jpg);
     }
  
  /********************************carussel****************************************/
  .cont-main {
      width: 100%; /* Ancho total del carrusel */
      margin-top: 10px;
      overflow: hidden; /* Para ocultar los elementos que se desplazarán */
      background-color: #f8f8f8;
     
    }
    
   .carrousel-container {
       display: flex;
       justify-content: center;
     }
     
     .carousel {
       margin: 0;
     }
   
    .item1,.item2, .item3, .item4, .item5 {
      flex: 0 0 auto; /* Para que los elementos no se estiren */
      width: 490px; /* Ancho de cada elemento */
      height: 320px; /* Altura de cada elemento */
      background-color: #fff; /* Color de fondo de cada elemento */
      margin-right: 10px; /* Espacio entre elementos */
      padding: 3%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin-bottom: 5px;
    }
    .item1{
      border: solid 1px #ffb143;
    }
    .item2{
      border: solid 1px #2bf8f2;
    }
    .item3{
      border: solid 1px #f327ff;
    }
    .item4{
      border: solid 1px #ffb143;
    }
    .item5{
      border: solid 1px #ffb143;
    }
   
    .header-course {
      width: 100%;
      height: 10%;
      display: flex;
      align-items: center;
    }
    .img-courses {
      width: fit-content;
      height: 100%;
    }
    .title-course-info{
      width: fit-content;
      height: fit-content;
      font-size: 21px;
      font-weight: 300;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.19;
      letter-spacing: normal;
      text-align: left;
      color: #3d3d3d;
      margin: 0;
      margin-left: 3px;
    }
    .subtitles-courses{
      width: 100%;
      height: 10%;
      padding: 2px;
    }
    .info-courses{
      width: 100%;
      height: 50%;
    }
    .learn-more{
      width: 100%;
      height: 20%;
      padding: 5px;
      display: flex;
      align-items: center;  
      margin-top: 10px;
    }
    .subtitle-course-info{
      font-size: 17px;
      font-weight: 300;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.18;
      letter-spacing: normal;
      text-align: left;
      color: #3d3d3d;
      margin: 0;
    }
    .card-course-info{
      font-size: 17px;
      font-weight: 200;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.45;
      letter-spacing: normal;
      text-align: left;
      color: #3d3d3d;
      margin: 0;
    }
    .learn-more-button{
       border: none; /* Elimina el borde */
       padding: 0; /* Elimina el relleno */
       background: transparent; /* Fondo transparente */
       background-image: url('learn-more.svg'); /* Agrega la imagen de fondo */
       background-size: cover; /* Ajusta el tamaño de la imagen */
    }
  
    .carousel-control-prev,.carousel-control-next{
      width: fit-content;
      
   }
   .btn-carrousel{
          border: none; /* Quita el borde */
          padding: 0; /* Quita el relleno */
          background: url('ruta/a/la/imagen.jpg') no-repeat center center; /* Establece la imagen de fondo */
          width: 100px; /* Ajusta el ancho de acuerdo a tu imagen */
          height: 100px; /* Ajusta la altura de acuerdo a tu imagen */
          background-size: contain; /* Ajusta el tamaño de la imagen */
          cursor: default; /* Cambia el cursor para que no parezca un botón */
   
   }
   .btn-carrousel:focus {
      outline: none; /* Quita el borde al enfocar */
  }

  .carousel-item {
    transition-duration: 2s; /* Cambia la duración de la transición a 2 segundos */
  
  }
  
  
   /********************************footer****************************************/
   .down{
    width: 100%;
    height: 70px;
    background-color: #f8f8f8;
    border-top: rgba(176, 176, 176, 0.5) solid 1px;
    border-bottom: rgba(176, 176, 176, 0.5) solid 1px;
    margin-top: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
  }
  .down-positionate{
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
  
  }
  .logo-down{
    width: 25%;
    height: 100%;
    display:flex;
    align-items:center;
    justify-content: flex-start;
    
  }
  .links-down{
    width: 75%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items:center;
    
  }
  
  .footer2{
    width: 100%;
    height: 70px;
    display: flex;
    position: absolute;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .logo-down-positionate{
    width: 90%;
    height: auto;
    display: flex;
    align-items: center;
  }
  .company-name{
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 200;
  }
  .company-name p{
    margin: 0;
  }
  .media-logos{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end; /* Esto alinea los elementos al final del contenedor (a la derecha en el caso de flex-direction: row) */
  }
  .logo-down p{
    margin: 0;
  }
  .media-logos img{
    margin: 5px;
    padding: 15px;
  }
  /************************************************************************/
  a {
    text-decoration: none; /* Quitar subrayado */
    color: #3d3d3d;
    font-weight: 200;
  }
  .link1{
    border-right: #ebebeb solid 1px;
    padding-right: 5px;
    padding-left: 5px; 
  }
  .link2{
    border-right: #ebebeb solid 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
  .link3{
    border-right: #ebebeb solid 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
  .link4{
    border-right: #ebebeb solid 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
  .link5{
    border-right: #ebebeb solid 1px;
    margin-right: 5px;
    padding-left: 5px;
  }
  .link6{
    margin-right: 5px;
    padding-left: 5px;
  }
  
  /*******hover links copy***********/
    
  .link1,.link2,.link3,.link4,.link5, .link6 {
    text-decoration: none;
    display: inline-block;
    position: relative;
    padding: 15px;
    font-weight: 300;
    }
    .link1:after, .link2:after, .link3:after, .link4:after, .link5:after, .link6:after  {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 0; /* Cambiado de 50% a 0 para comenzar desde la izquierda */
    position: absolute;
    background: #4626e0;
    transition: width 0.3s ease 0s, left 0.3s ease 0s; /* También necesitas ajustar la transición */
    width: 0;
    }
    .link4:after{    
      background: none repeat scroll 0 0 transparent;
      bottom: 0;
      content: "";
      display: block;
      height: 2px;
      left: 0; /* Cambiado de 50% a 0 para comenzar desde la izquierda */
      position: absolute;
      background: #4626e0;
      width: 100%;
      }
    .link1:hover:after, .link2:hover:after, .link3:hover:after, .link4:hover:after, .link5:hover:after, .link6:hover:after { 
    width: 100%; 
    left: 0; /* Manteniendo el izquierdo en 0 para expandirse desde la izquierda */
    } 
  @media only screen and (min-width: 1000px) { 
    #more-info-little{
      display: none;
   }
     
  }
  
  @media only screen and (max-width: 1000px) {
  
       /*******carrousel***********/
       .carrousel-container {
          display: flex;
          flex-direction: column; /* Cambiar a disposición de columnas */
          align-items: center; /* Centrar horizontalmente los elementos */
        }
        
        .carousel-inner {
          width: 100%; /* Ajustar el ancho al 100% */
        }
      
        .carousel-item {
          width: 80%; /* Ancho del elemento del carrusel */
          margin: 20px 0; /* Agregar espacio entre los elementos */
        }
        
        .carousel-control-prev,
        .carousel-control-next {
          display: none; /* Ocultar los controles de desplazamiento */
        }
  
      .carrousel-container{
          display: none;
      }
      .item1, .item2, .item3, .item4, .item5{
          width: 100%;
          margin-top: 10px;
          height: auto;
  
      }
      
  }
  @media only screen and (min-width: 1000px) {
      /**********instructor box**********/
      #instructor-container-small{
          display: none;
      }
      #more-info-little{
          display: none;
       }
       .colapse-bar-links {
          display: none; /* Oculta el elemento con la clase colapse-bar-links */
      }
       
  }
  @media only screen and (max-width: 1000px) {
  
      /**********header**********/
      .navbar{
        background-color:#fff;
        width: 100%;
        height: auto;
        margin-top: 0;
    }
    
  
    .header3-purple {
      display: none;
  }
  
    .navbar.expanded {
      background-color: #ffff; /* Color cuando se expande */
    }
  
    .navbar.expanded .navbar-brand {
      color:#3d3d3d ; /* Color cuando se expande */
    }
  
    .navbar-light .navbar-brand {
        color: white;
    }
    .navbar.navbar-light.collapsed {
      background-color: white;
    }
    .link1, .link2, .link3, .link4, .link5, .link6{
      display: none;
    }
      /**********instructor box**********/
      #instructor-container-big{
          display: none;
      }
      #instructor-container-small{
          width: 100%;
          height: auto;
          background-color: transparent;
      }
      #instructor-position{
          width: 100%;
          height: auto;
          background-color: transparent;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 0;
      }
      .instructor-img{
          width: 250px;
          height: auto;
      }
      #instructor-small-orange{
          background-color: #4626e0;
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          
      }
      .h3-instructor, .h2-instructor{
          color: #fff;
          text-align: center;
      }
      .h3-instructor{
        font-weight: 300;
      } 
      .h2-instructor{
        font-weight: 200;
      }
      #instructor-info-small{
          background-color: #f8f8f8;
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 5%;
      }
      .floating-1{
        width: 60px;
        top: 40%;
        left: 65%;
        
        }
        .floating-2{
        top: 75%;
        left: 67%;
        
        }
        .floating-3{
        top: 30%;
        left: 30%;
        }
        .floating-4{
        top: 65%;
        left: 18%;
        }
  
      /**********class details**********/
      .col-md-4{
          margin-bottom: 25px;
      }
      #row2-details{
          margin-top: 0;
      }
      .class-detail-box{
          margin-top: 0;
      }
      /**********ccourse description**********/
      .description {
          max-height: 200px; /* Tamaño inicial */
          overflow: hidden;
          transition: max-height 0.5s ease-in-out; /* Transición suave */
      }
      #show-more-btn {
          background: none;
          border: none;
          padding: 0;
          font-size: inherit;
          text-decoration: underline;
          color:#4626e0;;
          margin: 15px 0;
          font-weight: 200;
          font-size: 17px;
      }
      /**********course question**********/
      #question-position{
          max-width: 100%;
          height: auto;
      }
      .col-md-6 {
          width: 100%; /* Cambia el ancho al 100% en dispositivos más pequeños */
          max-width: none;
          margin-bottom: 15px; /* Elimina el máximo ancho en dispositivos más pequeños */
      }
      .question-container{
          padding: 20px;
      }
       /**************info box***********/
       .rectangle-info-1{
          flex-direction: column;
          clip-path: none;
          align-items: center;
          justify-content: center;
          height: 600px;
  
      }
      .rectangle-info-2{
          flex-direction: column;
          clip-path: none;
          align-items: center;
          justify-content: center;
          height: 600px;
      }
      .rectangle-info-3{
          flex-direction: column;
          clip-path: none;
          align-items: center;
          justify-content: center;
          height: 600px;
      }
      .left-item-1,
      .right-item-2,
      .left-item-center,
      .right-item-center,
      .right-item-3{
          clip-path: none;
          margin: 0;
      }
      .right-item-center{
          order: 1;
      }
      .left-item-center{
          order: 2;
          width: 90%;
      }
      .right-item-2{
          width: 90%;
      }
      .right-item-3{
          width: 90%;
      }
      .item-center-left,
      .item-center-right{
          height: auto;
          width: 90%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
      }
      .item-title,.item-subtitle{
          align-items: center;
          justify-content: center;
          text-align: center;
      }
      .img-courses {
        width: 25px;
        height: 100%;
    }
    #img1, #img2, #img3, #img4, #img5{
      margin-top: 20px;
     }
      
      /**********footer**********/
      .down{
          display: none;
      }
      .footer2{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
      }
      .logo-down-positionate{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .company-name{
          order: 2;
          width: fit-content;
          height: fit-content;
          margin: 0;
          padding: 0;
          color: #4626e0;
          
      }
      .media-logos{
          order: 1;
          width: fit-content;
          height: fit-content;
      }
      .tithome{
        display: none;
      }
      /*************floating button***********/
  .boton-flotante {
    bottom: 65px;
    right: 20px;
  }
  .boton-flotante img {
    width: 60px;
    height: 60px;
    object-fit: cover;
  }
  }