footer{
  padding: 99px 0 180px;
  background: linear-gradient(180deg, #DAE1E2 0%, #ECF1F2 8.17%);
  box-shadow: 0 100px 50px -100px rgba(126, 143, 146, 0.2) inset;
  @media screen and (max-width: 1199px) and (min-width: 992px) {
    padding: 50px 0 80px;
  }
  @media screen and (max-width: 991px) and (min-width: 768px) {
    padding: 30px 0 60px;
  }
  @media screen and (max-width: $screen-xs) {
    padding: 48px 0 72px;
  }
  .top-footer{
    padding: 0 0 80px;
    margin-bottom: 15px;
    border-bottom: 1px solid $cool-gray-09;
    @media screen and (max-width: 991px) and (min-width: 768px) {
      padding: 0 0 50px;
    }
    @media screen and (max-width: $screen-xs) {
      margin-bottom: 20px;
      padding: 0 0 48px;
      border-bottom: unset;
    }
    .personal-wrapper{
      .finance-wrapper{
        padding-top: 30px;
        .logo-wrapper{
          a{
            img{
              max-width: 208px;
            }
          }
        }
        h2{
          color: $primary-01;
        }
      }
      .social-wrapper{
        display: flex;
        align-items: center;
        justify-content: right;
        gap: 48px;
        position: relative;
        .company-logo{
          a{
            display: inline-block;
            img{
              max-width: 125px;
              @media screen and (max-width: 991px) and (min-width: 768px) {
                max-width: 105px;
              }
            }
          }
        }
        ul.social-list-01{
          position: absolute;
          right: -136px;
          top: -19px;
          @media screen and (max-width: 1400px) and (min-width: 768px) {
            position: relative;
            right: 0;
            top: 0;
          }
          @media screen and (max-width: $screen-xs) {
            display: none;
          }
        }
      }
    }
    .pages-link{
      .col-md-3{
        &:not(:last-of-type){
          .feature-list-box-01{
            .title{
              @media screen and (max-width: $screen-xs) {
                border-bottom: 1px solid $cool-gray-09;
              }
            }
          }
        }
      }
      .feature-list-box-01{
        .title{
          pointer-events: none;
          @media screen and (max-width: $screen-xs) {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 15px 20px 0;
            margin-bottom: 0;
            pointer-events: auto;
          }
          &.active{
            .icon{
              @media screen and (max-width: $screen-xs) {
                transform: rotate(180deg);
              }
            }
          }
          .icon{
            display: none;
            transition: $transition-01;
            @media screen and (max-width: $screen-xs) {
              display: block;
            }
          }
        }
        ul.feature-list{
          @media screen and (max-width: $screen-xs) {
            display: none;
            padding: 15px 0 20px;
          }
        }
      }
    }
    .footer-social{
      @media screen and (max-width: $screen-xs) {
        margin-top: 48px;
      }
    }
  }
  .middle-footer{
    .col-md-6{
      &:not(:last-of-type){
        @media screen and (max-width: $screen-xs) {
          margin-bottom: 60px;
        }
      }
    }
    .contact-card{
      display: grid;
      align-items: self-end;
      column-gap: 32px;
      &.grid-1{
        grid-template-columns: 80px 1fr;
        @media screen and (max-width: 991px) {
          grid-template-columns: 60px 1fr;
          column-gap: 20px;
          align-items: self-start;
        }
      }
      &.grid-2{
        grid-template-columns: 30px 1fr;
        @media screen and (max-width: 991px) {
          grid-template-columns: 60px 1fr;
          column-gap: 20px;
          align-items: self-start;
        }
      }
      .symbol-wrapper{
        min-height: 103px;
        img{
          width: 100%;
          max-width: 90px;
          max-height: 143px;
        }
      }
      .company-detail{
        display: grid;
        grid-template-columns: 130px 1fr;
        align-items: self-end;
        column-gap: 32px;
        @media screen and (max-width: 991px) {
          grid-template-columns: 1fr;
          column-gap: 0;
          row-gap: 20px;
        }
        .name-wrapper{
          h3{
            margin-bottom: 20px;
          }
          p{
            margin-bottom: 0;
          }
        }
        ul.contact-list{
          li{
            display: grid;
            grid-template-columns: 17px 1fr;
            column-gap: 10px;
            &:not(:last-of-type){
              margin-bottom: 18px;
            }
            .icon{
              width: 100%;
            }
            a{
              &:hover{
                color: $cool-gray-09;
              }
            }
          }
        }
      }
    }
  }
}

.bottom-footer{
  padding: 12px 0;
  background: rgba(191, 207, 207, 0.5);
  ul{
    @media screen and (max-width: 991px) and (min-width: 768px) {
      text-align: center;
    }
    li{
      display: inline-block;
      vertical-align: middle;
      @media screen and (max-width: $screen-xs) {
        display: block;
      }
      &:first-of-type{
        padding: 7px 12px;
        @media screen and (max-width: $screen-xs) {
          display: none;
        }
        a{
          width: 44px;
          height: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
          @media screen and (max-width: 991px) and (min-width: 768px) {
            width: auto;
            height: auto;
          }
        }
      }
      &:last-of-type{
        display: none;
        @media screen and (max-width: $screen-xs) {
          display: block;
        }
      }
      a{
        display: block;
        color: $cool-gray-12;
        font-weight: 500;
        padding: 21px 32px 17px;
        @media screen and (max-width: 1199px) and (min-width: 992px) {
          padding: 21px 25px 17px;
        }
        @media screen and (max-width: 991px) and (min-width: 768px) {
          padding: 0 6px;
        }
        @media screen and (max-width: $screen-xs) {
          padding: 10px 0;
        }
      }
    }
  }
  .company-logo{
    display: none;
    @media screen and (max-width: $screen-xs) {
      display: block;
      margin: -38px 0 0;
      text-align: right;
    }
  }
}