@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body,
header,
main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body {
  font-family: "Poppins", sans-serif;
  color: white;
  background: linear-gradient(to right, #30cfd0, #330867);
  margin: 0;
  height: 100vh;
  justify-content: center;
  gap: 20px;

  figure {
    overflow: hidden;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin-bottom: 10px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.3);
      object-position: top 13px right -73px;
    }
  }

  h1 {
    margin: 0;
    font-size: 24px;
  }

  h2 {
    font-size: 18px;
    margin: 0 0 5px 0;
    font-weight: 400;
  }

  main {
    gap: 20px;

    button {
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-size: 16px;
      width: 200px;
      height: 50px;
      background-color: #ffffff;
      color: #333;
      border: none;
      border-radius: 10px;

      &:hover {
        cursor: pointer;
        background-color: #ffffff00;
        border: 1px solid white;
        color: white;
      }
    }
  }
}

.footer-col{
  width: 100%;
  padding: 0 15px;
}
.footer-col h4{
 font-size: 18px;
 color: #ffffff;
 text-transform: capitalize;
 margin-bottom: 35px;
 font-weight: 500;
 position: relative;
}
.footer-col h4::before{
 content: '';
 position: absolute;
 left:0;
 bottom: -10px;
 background-color: #e91e63;
 height: 2px;
 box-sizing: border-box;
 width: 50px;
}
.footer-col ul li:not(:last-child){
 margin-bottom: 10px;
}
.footer-col ul li a{
 font-size: 16px;
 text-transform: capitalize;
 color: #ffffff;
 text-decoration: none;
 font-weight: 300;
 color: #bbbbbb;
 display: block;
 transition: all 0.3s ease;
}
.footer-col ul li a:hover{
 color: #ffffff;
 padding-left: 8px;
}
.footer-col .social-links a{
 display: inline-block;
 height: 40px;
 width: 40px;
 background-color: rgba(255,255,255,0.2);
 margin:0 10px 10px 0;
 text-align: center;
 line-height: 40px;
 border-radius: 50%;
 color: #ffffff;
 transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
 color: #24262b;
 background-color: #ffffff;
}

/*responsive*/
@media(max-width: 767px){
 .footer-col{
   width: 100%;
   /* margin-bottom: 30px; */
}
}
@media(max-width: 574px){
 .footer-col{
   width: 100%;
}
}

.center {
  justify-content: center;
}