@use "../../assets/scss/customVariables.scss" as *;

.container {
  width: 100%;
  background: #010001;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .footerPolygon1 {
      position: absolute;
      left: 37px;
      bottom: -1px;
    }
  .footerPolygon2 {
      position: absolute;
      left: 50%;
      bottom: -1px;
    }
  .footerPolygon3 {
      position: absolute;
      left: 26%;
      top: 0;
    }
  .footerPolygon4 {
      position: absolute;
      right: 30px;
      top: 57px;
    }
  
  .upButton {
    position: absolute;
    right: 30px;
    bottom: 112px;
    background-color: #fff;
    
    &:hover {
      background-color: #e7e7e7;

    }
  }

  .maxContainer {
    width: 100%;
    max-width: $max-width-layout;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    column-gap: 30px;

    @media screen and (max-width: calc($max-width-layout + 60px)) {
      padding: 0 30px;
    }

    @media screen and (max-width: 542px) {
      padding: 80px 30px;
    }

    
    
    .item {
      flex: 1;
      // min-width: 200px;
      min-height: 353px;
      padding-top: 65px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;

      @media screen and (max-width: 837px) {
        min-width: 120px;
      }
      
      @media screen and (max-width: 438px) {
        min-width: 100%;
        min-height: fit-content;
        padding: 40px 0;
      }

      .title {
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        line-height: 28.15px;
      }


      .links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        
        .link {
          font-size: 16px;
          font-weight: 400;
          color: #999999;
          line-height: 26.72px;
          max-width: 316px;
        }
      }
      

      .socials {
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 15px;
    
          .socialButton {
            width: 43px;
            height: 43px;
            max-width: 43px;
            max-height: 43px;
            min-width: 43px;
            min-height: 43px;
            position: relative;
            border-radius: 50%;
    
            .content {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              border: 1px solid #fff;
  
              & > img {
                width: 50%;
                height: 50%;
                background-color: #fff;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            
          }
        }
    }
  }

  .secondPart {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 17px;
    border-top: 1px solid #999999;

     & > p {
      font-size: 16px;
      font-weight: 400;
      color: #999999;
      line-height: 26.72px;
      text-align: center;
    }
  }
}