/* Font Online */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');

/* Font Offline */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../font/Montserrat-Light.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../font/Montserrat-Regular.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../font/Montserrat-Medium.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../font/Montserrat-Bold.ttf');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: transparent;
}

.jumbotron {
    background-image: url(../images/bg-4.jpg);
    background-size: cover;
    height: 770px;
    margin-top: -100px;
    background-attachment: fixed;
}

.jumbotron h1 {
    color: white;
    margin-top: 320px;
    font-weight: 700;
    font-size: 50px;
    text-shadow: 3px 2px 4px black;
}

/*------wisata------*/

#wisata {
    width: 100%;
    padding: 0px;
    margin-top: -30px;
    padding-top: 55px;
}

.wisata-card {
    width: 100%;
    height: 350px;
    border-radius: 5px;
    background-color: #5289dc;
}

.wisata-box {
    width: 100%;
    height: 350px;
    opacity: 0.4;
    border-radius: 5px;
    background-color: #1c1c1c;
    color: white;
}

.wisata-item {
    width: 155px;
    height: 250px;
    border-radius: 5px;
    color: white;
    padding: 25px;
    position: absolute;
    z-index: 1;
    transition: transform .25s;
}

.wisata-item:hover {
    transform: scale(1.1);
    opacity: 1;
}

.item-city {
    height: 100%;
}

.item-name {
    height: 50%;
}

#wisata .item-1 {
    background-image: url(../images/ollon4.jpg);
    background-size: cover;
    margin-bottom: 2px;
}

#wisata .item-2{
    background-size: cover;
    background-image: url(../images/pangopango.jpg);
    margin-bottom: 2px;
}

#wisata .item-3 {
    background-size: cover;
    background-image: url(../images/lolai.jpg);
    margin-bottom: 2px;
}

#wisata .item-4{
    background-size: cover;
    background-image: url(../images/batutumonga2.jpg);
    margin-bottom: 2px;
}

#wisata .item-5 {
    background-image: url(../images/tilanga.jpg);
    background-size: cover;
    margin-bottom: 2px;
}

#wisata .item-6{
    background-size: cover;
    background-image: url(../images/sumalu3.jpg);
    margin-bottom: 2px;
}

#wisata .item-7 {
    background-size: cover;
    background-image: url(../images/mapongka.jpg);
    margin-bottom: 2px;
}

#wisata .item-8{
    background-size: cover;
    background-image: url(../images/air-terjun-marintang.jpg);
    margin-bottom: 2px;
}

#wisata .item-9 {
    background-image: url(../images/buntuburake.jpg);
    background-size: cover;
    margin-bottom: 2px;
}

#wisata .item-10{
    background-size: cover;
    background-image: url(../images/ketekesu3.jpg);
    margin-bottom: 2px;
}

#wisata .item-11 {
    background-size: cover;
    background-image: url(../images/londa2.jpg);
    margin-bottom: 2px;
}

#wisata .item-12{
    background-size: cover;
    background-image: url(../images/lemo.jpg);
    margin-bottom: 2px;
}

#wisata .item-13 {
    background-image: url(../images/lokomata2.jpg);
    background-size: cover;
    margin-bottom: 2px;
}

#wisata .item-14{
    background-size: cover;
    background-image: url(../images/bori2.jpg);
    margin-bottom: 2px;
}

#wisata .item-15 {
    background-size: cover;
    background-image: url(../images/pallawa1.jpg);
    margin-bottom: 2px;
}

#wisata .item-16{
    background-size: cover;
    background-image: url(../images/museum-nekgandeng.jpg);
    margin-bottom: 2px;
}

#wisata .item-17{
    background-size: cover;
    background-image: url(../images/rambu-solo.jpg);
    margin-bottom: 2px;
}

#wisata .item-18{
    background-size: cover;
    background-image: url(../images/rambu-tuka2.jpg);
    margin-bottom: 2px;
}

#wisata .item-19{
    background-size: cover;
    background-image: url(../images/manene.jpg);
    margin-bottom: 2px;
}

#wisata .item-20 {
    background-size: cover;
    background-image: url(../images/mapassilaga-tedong.jpg);
    margin-bottom: 2px;
}

#wisata .item-21{
    background-size: cover;
    background-image: url(../images/matinggoro-tedong.jpg);
    margin-bottom: 2px;
}

#wisata .item-22{
    background-size: cover;
    background-image: url(../images/mabadong3.jpg);
    margin-bottom: 2px;
}

#wisata .item-23{
    background-size: cover;
    background-image: url(../images/tautau4.jpg);
    margin-bottom: 2px;
}

#wisata .item-24{
    background-size: cover;
    background-image: url(../images/sisemba2.jpg);
    margin-bottom: 2px;
}

/* Galeri */
#galeri {
    padding-top: 55px;
    background-color: #f0ebeb;
    margin-left: -25px;
}

figure {
  width: 450px;
  height: 300px;
  cursor: pointer;
  position: relative;
  margin-left: -35px;
  margin-bottom: -30px;
}

figure img {
  width: 100%;
  height: 100%;
  transform: scale(0.75);
  transition: all 0.4s ease;
}

figcaption{
  color: white;
  font-size: 15px;
  text-align: center;
  transition: all 0.6s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
}

figure:hover img{
  filter: blur(4px) brightness(70%);
}

figure:hover figcaption{
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* .popup-gallery img {
    width:100%;
    height:100%;
    opacity: 1;
}

.popup-gallery img:hover {
    opacity: 0.7;
} */

/* Lokasi */
#lokasi {
    padding-top: 55px;
    /* background-color: #c0c4cc; */
    background-image: url(../images/bg-2.jpg);
    background-size: cover;
    /* color: #424242; */
    background-attachment: fixed;
    height: 655px;
}

#lokasi h2, h5 {
    color: black;
    font-weight: 500;
    text-shadow: 2px 1px 2px white;
}

/* Kontak */
#kontak {
    padding-top: 55px;
    background-color: #9c9595;
}

#kontak #tentang a {
    color: white;
}

#kontak #tentang a:hover {
    text-decoration: none;
    font-weight: bold;
}

#kontak #sosmed a {
    opacity: 0.5;
    margin-right: -6px;
}

#kontak #sosmed a:hover {
    opacity: 1;
}

#kontak .fa-facebook {
    color: #2d44c4;
}

#kontak .fa-twitter {
    color: #2d7bc4;
}

#kontak .fa-youtube {
    color: red;
}

#kontak .fa-whatsapp {
    color: #0d7531;
}

#kontak .fa-line {
    color: #06c94a;
}

#kontak .fa-telegram {
    color: #33679c;
}

#kontak .fa-envelope {
    color: red;
}

#kontak .fa-instagram {
    color: #f731cc;
}

/* Smoth Scrool */
html {scroll-behavior:smooth;}

/* Back to Top */
#backtotop {
    z-index:999; 
    display:inline-block; 
    position:fixed; 
    visibility:hidden; 
    bottom:20px; 
    right:20px; 
    width:36px; 
    height:36px; 
    line-height:36px; 
    font-size:16px; 
    text-align:center; 
    opacity:.2;
}

#backtotop img {
    display:block; 
    width:100%; 
    height:100%; 
    line-height:inherit;
}

#backtotop.visible {
    visibility:visible; 
    opacity:.5;
}

#backtotop:hover {
    opacity:1;
}

#backtotop {
    border-radius:50%;
}

#backtotop {
    color:#FFFFFF; 
    background-color:#8BAAD6;
}


/* Responsive untuk Smartphone dan layar maximal 400px*/
@media (max-width: 800px) {

    .jumbotron {
        height: 480px;
    }

    .jumbotron h1 {
        font-weight: 500;
        font-size: 42px;
        margin-top: 180px;
    }

    #wisata, #galeri, #lokasi, #kontak {
        padding-top: 10px;
    }

    figure{
        margin-left: 35px;
        margin-bottom: 0px;
    }

    figcaption{
        opacity: 1;
        position: absolute;
    }

    #galeri h3 {
        text-shadow: 2px 1px 2px black;
    }

    /* .popup-gallery img {
        opacity: 1;
    } */

    #lokasi h2, h5 {
        color: white;
        text-shadow: 2px 1px 2px black;
    }

    #lokasi iframe {
        width: 300px;
        height: 225px;
    }

    #kontak {
        text-align: center;
    }

}


/* Responsive untuk Smartphone dan layar maximal 400px*/
@media screen and (max-width: 480px) {

    .jumbotron {
        /* background-size: 100%; */
        height: 750px;
    }

    .jumbotron h1 {
        font-weight: 500;
        font-size: 36px;
        margin-top: 280px;
    }

    #wisata, #galeri, #lokasi, #kontak {
        padding-top: 10px;
    }

    figure {
      width: 370px;
      height: 250px;
      cursor: pointer;
      position: relative;
      margin-left: -5px;
      margin-bottom: -30px;
    }

    figcaption{
        opacity: 1;
        position: absolute;
    }

    /* .popup-gallery img {
        margin: 2px;
        opacity: 1;
    } */

    #galeri h3 {
        text-shadow: 2px 1px 2px black;
    }

    #lokasi h2, h5 {
        color: white;
        text-shadow: 2px 1px 2px black;
    }

    #lokasi iframe {
        width: 300px;
        height: 225px;
    }

    #kontak {
        text-align: center;
    }

    #kontak #sosmed a {
        opacity: 1;
        margin-left: : 2px;
    }
}