@import url('https://fonts.googleapis.com/css2?family=Bellefair&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yellowtail&display=swap');

$white: #ffffff;
$black: #000000;
$primary: #000000;
$secondary: #A9891C;
$dark: #2f2f2f;
$bodyColor: #6a6a6a;
$light: #000000;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1400px;

$font-family: "Bellefair", "Yellowtail";

// html, body {
//   overflow-x: hidden;
//   position: relative;
// }

body {
  font-family: $font-family;
  font-weight: 400;
  line-height: 28px;
  color: $white;
  overflow-x: hidden;
}

.nav-link {
  color: $black!important;
  font-size: 20px;
  font-weight: 500;
}

// .custome-navbar {
//   background-image: url('../images/background.png');
//   background-size: cover;
//   min-height: 100%;

 

//   .navbar-toggler {
//     border-color: $black!important;
//     color: $black!important;

//     &:active, &:focus {
//       box-shadow: none;
//       outline: none;
//     }
//   }

//   .custome-navbar-nav {
//     li {
//       a {
//         font-weight: 500;
//         color: $black!important;
//         font-size: 20px;
//         opacity: 3;
//         transition: .3s all ease;
//         position: relative;
//         &:hover {
//           opacity: 1;
//           color: $secondary!important;
//           &::before {
//             width: calc(100% - 16px);
//           }
//         }
//       }
//       &.active {
//         a {
//           color: $secondary!important;
//           opacity: 1;
//           &::before {
//             width: calc(100% - 16px);
//           }
//         }
//       }
//     }
//   }
// }


.custome-social-header {
  li { 
    margin: 2px;
    padding-top: 16px;
    a {
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      display: inline-block;
      background: $black;
      color: $white;
      border-radius: 50%;
      &:hover {
        background: #A9891C;
        color: $white;
      }
    }
  }
}

.hero {
  // background-image: url('../images/background.png');
  background-size: cover;
  padding: calc(4rem - 30px) 0 4rem 0;
  @media (min-width: $lg) {
    padding: calc(8rem - 30px) 0 4rem 0;
    
  }
  .intro-excerpt {
    max-width: 850px;
    position: relative;
    z-index: 4,
  }
  h2 {
    font-weight: 700;
    color: $black;
    margin-bottom: 32px;
    // font-size: 54px;
  }
  p {
    color: $black;
  }

  .button-images {
    img {
      margin-top: 100px;
   
      @media (max-width: $sm) {
        margin-top: 0px;
      }
    }
   
  }

  .our-services {
    background-image: url('../images/layanan.png');
    background-size: cover;
  }
  
  .banner-image {
    background-image: url('../images/home.png');
    background-size: cover;
  }

  .banner-image-artikel {
    background-image: url('../images/home.png');
    background-size: cover;
  }

  .bg-legal {
    background-image: url('../images/bg-legal.png');
   
    background-size: cover;
  }

  .why-choose-us {
    background-image: url('../images/chooseus.png');
    background-size: cover;
  }

  .hero-img-wrap {
    position: relative;
    img {
      position: relative;
      margin-top: 100px;
      margin-left: 0;
      z-index: 2;
      width: 750px;
      @media (min-width: $xxl) {
        position: relative;
        margin-top: 20px;
        margin-left: 50px;
        width: 750px;
      }
      @media (min-width: $lg) {
        position: relative;
        margin-top: 20px;
        margin-left: 50px;
        width: 750px;
      }
      @media (max-width: $md) {
        position: relative;
        margin-top: 20px;
        margin-left: 50px;
        width: 400px;
      }
      @media (max-width: $sm) {
        position: relative;
        margin-top: 20px;
        margin-left: 50px;
        width: 300px;
      }
    }
   
  }
}


.why-choose {
  background-color: #F5F5F5;
}

.font-why-choose {
  font-size: 32px;
  font-weight: 500;
  color: $black;
}

.footer {
  background-image: url('../images/footer2.png');
  background-size: cover;
  padding: 30px 0;
  margin-top: 100px;
  .text-footer-job{
    color: $white;
    line-height: 10px!important;
  }

  .text-footer-address{
    color: $white;
    line-height: 63px!important;
  }

  .text-footer-list-pages {
    line-height: 16px;
  }

  .border-top {
    border-color: $white;
    @media (max-width: $md) {
      width: auto;
    }
    @media (max-width: $sm) {
      width: auto;
    }
  }
  
  .custome-social {
    li { 
      margin: 2px;
      display: inline-block;
      a {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        display: inline-block;
        background: $white;
        color: $black;
        border-radius: 50%;
        &:hover {
          background: #A9891C;
          color: $white;
        }
      }
    }
    @media (max-width: $md) {
      text-align: center;
    }
    @media (max-width: $sm) {
      text-align: center
    }
  }

}