/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}

.nav-item.active .nav-link {
    font-weight: bold;
    color: #5a5a5a;
}

.image-container {
    width: 100%;
    max-height: 800px; /* Tinggi yang dibatasi */
    overflow: hidden; /* Untuk memastikan gambar yang lebih besar dari div akan terpotong */
}

.footer-basic {
    padding-bottom: 20px;
    background-color:#ffffff;
    color:#4b4c4d;
  }

  .footer-basic ul {
    padding:0;
    list-style:none;
    text-align:center;
    font-size:18px;
    line-height:1.6;
    margin-bottom:0;
  }

  .footer-basic li {
    padding:0 10px;
  }

  .footer-basic ul a {
    color:inherit;
    text-decoration:none;
    opacity:0.8;
  }

  .footer-basic ul a:hover {
    opacity:1;
  }

  .footer-basic .social {
    text-align:center;
    padding-bottom:30px;
  }

  .footer-basic .social > a {
    font-size:24px;
    width:40px;
    height:40px;
    line-height:40px;
    display:inline-block;
    text-align:center;
    border-radius:50%;
    border:1px solid #ccc;
    margin:0 8px;
    color:inherit;
    opacity:0.75;
  }

  .footer-basic .social > a:hover {
    opacity:0.9;
  }

  .footer-basic .copyright {
    margin-top:15px;
    text-align:center;
    font-size:13px;
    color:#aaa;
    margin-bottom:0;
  }


/* Btn Go top
------------------------- */

#btn-back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: none;
}


/* GMaps
------------------------- */

.google-map {
    padding-bottom: 50%;
    position: relative;
}

.google-map iframe {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

/* Declare heights because of positioning of img element */



/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Counter
------------------------- */

.counter-section i { display:block; margin:0 0 10px}
.counter-section span.counter { font-size:40px; color: #5a5a5a; line-height:60px; display:block; font-family: "Oswald",sans-serif; letter-spacing: 2px}
.counter-title{ font-size:12px; letter-spacing:2px; text-transform: uppercase}
.counter-icon {top:25px; position:relative}
.counter-style2 .counter-title {letter-spacing: 0.55px; float: left;}
.counter-style2 span.counter {letter-spacing: 0.55px; float: left; margin-right: 10px;}
.counter-style2 i {float: right; line-height: 26px; margin: 0 10px 0 0}
.counter-subheadline span {float: right;}

.medium-icon {
    font-size: 40px !important;
    margin-bottom: 15px !important;
}

/* Progress bar
------------------------- */
.timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

.timeline-steps .timeline-content {
    width: 10rem;
    text-align: center
}

.timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #419c45;
}

.timeline-steps .timeline-content .inner-circle:before {
    content: "";
    background-color: #419c45;
    display: inline-block;
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    border-radius: 6.25rem;
    opacity: .5
}

/* GALLERY
-------------------------------------------------- */

.photo-gallery {
    color:#313437;
    background-color:#fff;
}

@media (max-width:767px) {
    .photo-gallery h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
    }
}

.photo-gallery .intro {
    font-size:16px;
    max-width:500px;
    margin:0 auto 40px;
}

.photo-gallery .intro p {
    margin-bottom:0;
}

.photo-gallery .photos {
    padding-bottom:20px;
}

.photo-gallery .item {
    padding-bottom:30px;
}


/* Comment
-------------------------------------------------- */

.social-icon {
        color: #419c45;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    margin-bottom: 4rem;
}
  /* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 3rem;
    z-index: 10;
}
.carousel-item {
    height: 25rem;
}
.carousel-item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 25rem;
}

.carousel-item h1 {
    font-size: 22px;
}

.carousel-item p {
    font-size: 14px;
}



/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 7rem;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .this {
        height: 80px;
    }
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }

    .timeline-steps .timeline-step {
        align-items: center;
        display: flex;
        flex-direction: column;
        position: relative;
        margin: 0.2rem
    }
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #419c45;
        width: 2.46rem;
        position: absolute;
        left: 7.5rem;
        top: .3125rem
    }
    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #419c45;
        width: 2.8125rem;
        position: absolute;
        right: 7.5rem;
        top: .3125rem
    }
    .carousel-item {
        height: 45rem;
    }
    .carousel-item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        height: 45rem;
    }


}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .timeline-steps .timeline-step {
        align-items: center;
        display: flex;
        flex-direction: column;
        position: relative;
        margin: 2rem
    }
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #419c45;
        width: 3.95rem;
        position: absolute;
        left: 7.5rem;
        top: .3125rem
    }
    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #419c45;
        width: 4.812rem;
        position: absolute;
        right: 7.5rem;
        top: .3125rem
    }

    .carousel-item {
        height: 40rem;
    }
    .carousel-item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        height: 40rem;
    }

    .carousel-item h1 {
        font-size: 34px;
    }

    .carousel-item p {
        font-size: 22px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .timeline-steps .timeline-step {
        align-items: center;
        display: flex;
        flex-direction: column;
        position: relative;
        margin: 3rem
    }
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #419c45;
        width: 5.46rem;
        position: absolute;
        left: 7.5rem;
        top: .3125rem
    }
    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #419c45;
        width: 5.8125rem;
        position: absolute;
        right: 7.5rem;
        top: .3125rem
    }

    .carousel-item {
        height: 59rem;
    }
    .carousel-item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        height: 59rem;
    }

    .carousel-item h1 {
        font-size: 40px;
    }

    .carousel-item p {
        font-size: 26px;
    }
}