@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');



/*General Styles*/
footer {
   font-family: 'Lato', sans-serif;
}

.footer {
   width: 100%;
   background: linear-gradient(135deg, #ffffff, #ffffff);
   color: #474747;
   font-size: 12px;
   line-height: 15px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   padding: 20px;
   box-sizing: border-box;
   position: relative;
   bottom: 0;
   margin-top: auto;
   height: 45;
}

.row1-footer,
.row-footer {
   width: 85%;
   margin: auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-content: center;
}

.row-footer {
   justify-content: space-between;
   align-items: flex-start;
}

.col-footer {
   flex-basis: 15%;
   padding: 5px;
}

.col-footer:nth-child(2),
.col-footer:nth-child(3) {
   flex-basis: 22%;
}

.col-footer .header-footer {
   width: fit-content;
   margin-bottom: 30px;
   position: relative;
   font-weight: 600;
   color: #474747;
}


.col-footer p {
   text-align: justify;
}

.footer-paragraph {
   color: #474747;
   font-weight: 500;
}

.email-footer {
   width: fit-content;
   margin: 20px 0;
}

.ul-footer .li-footer {
   list-style: none;
   margin-bottom: 12px;
}

.li-footer {
   padding-bottom: 8px;
}

.ul-footer .li-footer a {
   text-decoration: none;
   color: #474747;
   position: relative;
   transition: color 0.3s ease;
}

.ul-footer .li-footer a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -3px;
   width: 0;
   height: 2px;
   background-color: #474747;
   transition: width 0.3s ease;
}

.ul-footer .li-footer a:hover {
   color: #474747;
}

.ul-footer .li-footer a:hover::after {
   width: 100%;
}

.form-footer {
   padding-bottom: 15px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid #474747;
   margin-bottom: 20px;
}

.form-footer .correo_footer {
   font-size: 20px;
   margin-right: 30px;
}

.form-footer input {
   width: 100%;
   background: transparent;
   color: #474747;
   border: 0;
   outline: none;
}

.form-footer button {
   background: transparent;
   border: 0;
   outline: none;
   cursor: pointer;
}

.form-footer button .fa-arrow-right {
   font-size: 18px;
   color: #474747;
}

.redes-sociales {
   display: flex;
   justify-content: center;
}

.social-icons-footer .social-media-footer {
   width: 10px;
   height: 5px;
   border: 2px solid #474747;
   border-radius: 50%;
   text-align: center;
   line-height: 40px;
   font-size: 20px;
   color: #474747;
   margin-right: 10px;
   cursor: pointer;
   align-items: center;
}

.social-media-footer {
   position: relative;
   display: inline-block;
   padding: 20px;
   font-size: 40px;
   color: #ffffff;
   border-radius: 50%;
   background-color: trahnsparent;
   transition: transform 0.4s ease, background-image 0.4s ease;
}

.social-media-footer::before {
   content: '';
   position: absolute;
   inset: 0;
   background-color: #ffffff;
   opacity: 1;
   transition: background-image 0.4s ease, opacity 0.4s ease;
   border-radius: inherit;
}

.social-media-footer:hover::before {
   background-image: radial-gradient(#dbebe3, #dbebe3);
   background-color: transparent;
}

.social-media-footer:hover {
   transform: scale(1.1);
}

.copyright-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 10px;
   width: 90%;
}

.footer-align-left {
   text-align: left;
   color: #474747;
}

.footer-align-right {
   text-align: right;
   color: #474747;
}

.underline-footer {
   width: 100%;
   height: 3px;
   background: #dbebe3;
   border-radius: 3px;
   position: absolute;
   top: 25px;
   left: 0;
   overflow: hidden;
   padding-bottom: 5px;
}

.underline-footer span {
   width: 15px;
   height: 100%;
   background: rgb(47, 44, 44);
   border-radius: 3px;
   position: absolute;
   top: 0;
   left: 10px;
   animation: moving 2s linear infinite;
}

.line-separation-footer {
   margin-top: 3vh;
   width: 90%;
   height: 2px;
   background: linear-gradient(90deg, rgb(47, 44, 44) 0%, rgb(47, 44, 44) 100%);
   box-shadow: 0 0 15px rgba(107, 107, 107, 0.8), 0 0 30px rgba(245, 245, 245, 0.6);
   transition: opacity 0.3s ease;
}

.signature-codiseo {
   color: #474747;
   text-shadow: 0 0 1px #0ead63, 0 0 4px #0ead63;
   font-weight: 700;
   text-decoration: none;

}

@keyframes moving {
   0% {
      left: 0;
   }

   100% {
      left: 100%;
   }
}

@media (min-width: 425px) and (max-width: 823px) {

   .col-footer .header-footer {
      width: fit-content;
      margin-bottom: 30px;
      position: relative;
      font-weight: 600;
      color: #474747;
      font-size: .7rem;
   }

   .ul-footer .li-footer a {
      text-decoration: none;
      color: #474747;
      position: relative;
      transition: color 0.3s ease;
      font-size: .6rem;
   }

   .footer-paragraph {
      color: #474747;
      font-weight: 500;
      font-size: .6rem
   }

   .social-icons-footer .social-media-footer {
      width: 2px;
      height: 3px;
      border: 2px solid #474747;
      border-radius: 50%;
      text-align: center;
      line-height: 22px;
      font-size: 15px;
      color: #474747;
      margin-right: 10px;
      cursor: pointer;
      align-items: center;
      display: grid;
      margin-bottom: 5px;
   }

   .social-media-footer {
      position: relative;
      display: inline-block;
      padding: 10px;
      font-size: 50px;
      color: #ffffff;
      border-radius: 50%;
      background-color: trahnsparent;
      transition: transform 0.4s ease, background-image 0.4s ease;
   }

   .form-footer {
      padding-bottom: 15px;
      display: grid;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #474747;
      margin-bottom: 20px;
   }

   .form-footer input {
      width: 100%;
      background: transparent;
      color: #474747;
      border: 0;
      outline: none;
      font-size: .6rem;
   }

}

@media (max-width: 424px) {

   .col-footer .header-footer {
      width: fit-content;
      margin-bottom: 30px;
      position: relative;
      font-weight: 600;
      color: #474747;
      font-size: 1rem;
   }

   .ul-footer .li-footer a {
      text-decoration: none;
      color: #474747;
      position: relative;
      transition: color 0.3s ease;
      font-size: .8rem;
   }

   .footer-paragraph {
      color: #474747;
      font-weight: 500;
      font-size: .8rem
   }

   .form-footer input {
      width: 100%;
      background: transparent;
      color: #474747;
      border: 0;
      outline: none;
      font-size: .4rem;
   }
}