html,
body {
    margin: 0;
    font-size: 100%;
    background: #fff;
    scroll-behavior: smooth;
    overflow-x:hidden;
    padding-right: 0 !important;
}
*{
    user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 -khtml-user-select:none;
 -webkit-user-select:none
}
::-webkit-scrollbar{
    width:8px;
    background:transparent;
}

::-webkit-scrollbar-track{
    border-radius:5px;
    box-shadow:inset 0 0 10px rgba(0,0,0,0.25);
}

::-webkit-scrollbar-thumb{
    border-radius:5px;
    background-color:#0071bc;
}

::-webkit-scrollbar-thumb:hover{
    background-color:#3832a8;
}
body a {
    text-decoration: none;
}

html {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}

a:hover {
    text-decoration: none;
}

input[type="button"]:hover,
input[type="submit"]:hover {
    transition: .5s ease-in;
    -webkit-transition: .5s ease-in;
    -moz-transition: .5s ease-in;
    -o-transition: .5s ease-in;
    -ms-transition: .5s ease-in;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 600;
}

ul {
    margin: 0;
    padding: 0;
}

/* Area Navbar */
.main-top{
    position: fixed;
    z-index: 110;
    width: 100%;
    background: #3190C4;
    border: 1px solid white;
    top:0;
}
a.navbar-brand {
    font-size: 36px;
    letter-spacing: 1px;
    color: #8e43e7;
    text-shadow: 2px 5px 3px rgba(0, 0, 0, 0.06);
}

a.navbar-brand h4{
    font-size:20px;
}

.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
    color: #8e43e7;
}

/* //logo */
/* navigation */
.navbar-light .navbar-nav .nav-link {
    padding: 5px 7px;
    color: white;
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 500;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    margin-top: 10px;
    left: -37px;
}


.navbar-light .navbar-nav .nav-link:hover {
    color:black;
    transition: .5s;
}
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:focus {
    /*color:#3190C4;*/
    padding:5px 7px;
    /*background:white;*/
    border-radius:20px;
    transition: .5s;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: #000;
}

/* fixed nav */
nav.fixed-navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav.fixed-navi ul li {
    float: left;
}

nav.navbar.navbar-expand-lg.navbar-light.fixed-navi{
    box-shadow: 1px 3px 8px 3px rgba(8, 8, 8, 0.08);
    border:1px solid white;
    z-index:1000;
}
.dropbtn {
    background: none;
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
    background:none;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    text-align:left;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
      background-color: #f1f1f1;
    text-decoration:none;
    }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
    background-color: none;
  }
.tombol-menu{
    width: 100%;
    height: 50px;
  }

  .kekiri{
    float: left;
    display: block;
  }
  .kekanan{
    float: right;
    display: block;
  }
.tombol-menu ul a{
  color: white;
  padding:10px;
  align-items:center;
  justify-content:center;
}

.tombol-menu ul a img{
    width:100px;
    margin-right:30px;
  }
  

.tombol-menu ul a:hover{
   padding:10px;
   background:#1475b3;
   border-radius:5px;
   align-items:center;
  }

.kelas-navbar{
    width:100%;
}
.navrow{
    width:100%;
}
.menu-logo{
    border:1px solid white;
    height:140px;
    display:flex;
    align-items:center;
    float: left;
    width: 50%;
    padding: 3em 3.5em;
}
.container-fluid img{
    width:90px;
    height:50px;
}
.menu-logo img{
    width:170px;
    height:100px;
}

.menu-bar{
    border:1px solid white;
    height:140px;
    display:flex;
    align-items:center;
    float: right;
    width: 50%;
    padding: 3em 3.5em;
    justify-content:center;
}

.layar-kiri{
    background:red;
  }
  
  .layar-kanan{
    background:yellow;
  }
/* banner slider */


#homepage-slider {
    position: relative;
    height:55vh;
}

.radio {
    display: none;
}

.images {
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.images-inner {
    width: 500%;
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

.image-slide {
    width: 20%;
    float: left;
}

.image-slide,
.fake-radio,
.radio-btn {
    transition: all 0.5s ease-out;
}

.fake-radio {
    text-align: center;
    position: absolute;
    bottom: 5%;
    right: 2%;
    z-index: 9;
}

/* Move slides overflowed container */
#slide1:checked~.images .images-inner {
    margin-left: 0;
}

#slide2:checked~.images .images-inner {
    margin-left: -100%;
}

#slide3:checked~.images .images-inner {
    margin-left: -200%;
}

/* Color of bullets */
#slide1:checked~div .fake-radio .radio-btn:nth-child(1),
#slide2:checked~div .fake-radio .radio-btn:nth-child(2),
#slide3:checked~div .fake-radio .radio-btn:nth-child(3) {
    background: #feac00;
}

.radio-btn {
    width: 10px;
    height: 10px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #fff;
    display: inline-block !important;
    margin: 0 5px;
    cursor: pointer;
}

/* Color of bullets - END */

/* Text of slides */
#slide1:checked~.labels .label:nth-child(1),
#slide2:checked~.labels .label:nth-child(2),
#slide3:checked~.labels .label:nth-child(3) {
    opacity: 1;
}

.label {
    opacity: 0;
    position: absolute;
}

/* Text of slides - END */

/* Calculate AUTOPLAY for BULLETS */
@keyframes bullet {

    0%,
    33.32333333333334% {
        background: #feac00;
    }

    33.333333333333336%,
    100% {
        background: #fff;
    }
}

#play1:checked~div .fake-radio .radio-btn:nth-child(1) {
    animation: bullet 12300ms infinite -1000ms;
}

#play1:checked~div .fake-radio .radio-btn:nth-child(2) {
    animation: bullet 12300ms infinite 3100ms;
}

#play1:checked~div .fake-radio .radio-btn:nth-child(3) {
    animation: bullet 12300ms infinite 7200ms;
}

/* Calculate AUTOPLAY for BULLETS - END */

/* Calculate AUTOPLAY for SLIDES */
@keyframes slide {

    0%,
    25.203252032520325% {
        margin-left: 0;
    }

    33.333333333333336%,
    58.53658536585366% {
        margin-left: -100%;
    }

    66.66666666666667%,
    91.869918699187% {
        margin-left: -200%;
    }
}

.st-slider>#play1:checked~.images .images-inner {
    animation: slide 12300ms infinite;
}

/* Calculate AUTOPLAY for SLIDES - END */
/* //banner slider */

/* background images for banner */
.banner-w3pvt-1 {
    background: url(../images/bg1.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 100vh;
}

.overlay-w3ls {
    background: rgba(0, 0, 0, 0.55);
    min-height: 100vh;
}
.overlay-w3ls2 {
    background: rgba(0, 0, 0, 0.55);
    min-height: 700px;
}
.todown{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: scrollanimation 1.2s infinite;
}
@keyframes scrollanimation{
    0%{
        opacity:0;
        transform:translate(0,-30px);
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:translate(0px,0px);
    }
  }
.todown img{
    width:100px;
    height:100px;
}
.images-inner {
    position: relative;
}

.banner-hny-info h1 {
    font-size:50px;
    color: #fff;
    font-weight:700;
}
.banner-hny-info2{
    text-align: center;
    padding:0 180px;
}
.banner-hny-info2 h1 {
    font-size:50px;
    color:#fff;
    font-weight: 700;
}
.banner-hny-info2 p{
    font-size:20px;
    color:#fff;
    line-height:27px;
}
.banner-hny-info h3 {
    font-size:20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    text-align: center;
    color: #fff;
}

.btn {
    border: 2px solid #fff;
    padding: 11px 30px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: capitalize;
    display: inline-block;

}
.btnhov{
    border-radius: 4px;
  background-color: transparent;
  border: 1px solid white;
  color: #FFFFFF;
  text-align: center;
  font-size: 16px;
  padding:15px 20px ;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  border-radius:10px;
}
.btnhov span{
    cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.btnhov span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }

  .btnhov:hover{
    background:white;
    color:black;
  }
  
  .btnhov:hover span {
    padding-right: 25px;
  }
  
  .btnhov:hover span:after {
    opacity: 1;
    right: 0;
  }
  .btnhov2{
    border-radius: 4px;
  background-color: transparent;
  border: 1px solid #3190C4;
  color: #3190C4;
  text-align: center;
  font-size: 16px;
  padding:  15px 20px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  border-radius:10px;
}
.btnhov2 span{
    cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.btnhov2 span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }

  .btnhov2:hover{
    background:#3190C4;
    color:white;
  }
  
  .btnhov2:hover span {
    padding-right: 25px;
  }
  
  .btnhov2:hover span:after {
    opacity: 1;
    right: 0;
  }
.btn:hover {
    color: #333;
    transition: .5s ease-in;
    -webkit-transition: .5s ease-in;
    -moz-transition: .5s ease-in;
    -o-transition: .5s ease-in;
    -ms-transition: .5s ease-in;
}

.btn.more {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 10px;
    padding: 0.5rem 2rem;
}

.btn.more.black:hover {
    background: #67b7f5;
    border: 2px solid #67b7f5;
    color: white;
}

.btn.more2 {
    background: transparent;
    border: 1px solid #3190C4;
    color:#3190C4;
    border-radius: 10px;
}

.btn.more2.black:hover {
    background: #3190C4;
    border: 1px solid #3190C4;
    color: white;
    transition: .5s ease !important;
}

.wthree-w3ls {
    border-bottom: 1px solid rgba(221, 221, 221, 0.25);
    padding-bottom: 1em;
}

.banner-hny-info{
    padding: 0 100px;

}

/* Color Variables */
/* Social Icon Mixin */
/* Social Icons */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* width: 80px; */
    /* height: 80px; */
    /* margin: 0 0.5rem; */
    /* border-radius: 50%; */
    cursor: pointer;
    /* font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; */
    /* font-size: 2.5rem; */
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
}

.social-icon:hover {
    color: #fff;
}

.social-icon:hover .tooltip {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(-50%, -150%);
    transform: translate(-50%, -150%);
}

.social-icon:active {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
}

.social-icon {
    background: linear-gradient(tint(#000, 5%), shade(#000, 5%));
    border-bottom: 1px solid shade(#000, 20%);
    color: tint(#000, 50%);
}

.social-icon:hover {
    color: tint(#000, 80%);
    text-shadow: 0px 1px 0px shade(#000, 20%);
}

.social-icon .tooltip {
    background: #fff;
    background: linear-gradient(tint(#000, 15%), #000);
    color: tint(#000, 80%);
}

.social-icon .tooltip:after {
    border-top-color: #fff;
}

.social-icon span {
    position: relative;
    top: 1px;
}

/* Tooltips */
.tooltip {
    display: block;
    position: absolute;
    top: 45%;
    left: 50%;
    padding: 0.2rem 1rem;
    border-radius: 0px;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    transition: all 0.3s ease;
    z-index: 1;
    color: #000;
    letter-spacing: 1px;
}

.tooltip:after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    content: "";
    border: solid;
    border-width: 6px 6px 0 6px;
    border-color: transparent;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
}

/* //background images for banner */

/* /stats */
h5.counter {
    color: #fff;
    font-size: 2em;
    font-weight: 700;
    margin: 0;
}

p.para-w3pvt {
    color: #fff;
    font-size: 1.4em;
    margin-left: 1em;
    font-weight: 300;
}

.hny-stats-inf {
    margin: 7em auto 0;
    width: 50%;
    text-align: center;
}

/* //stats */
/* //banner text */

.banner_bottom {
    background: #f7f7f7;
}


p.sub-tittle {
    font-size: 1.1em;
    font-weight: 400;
    color: #555;
}

.pink {
    color: #feac00;
}

h3.tittle-w3ls,
h3.tittle-w3ls.two {
    color: #1b1b1b;
    font-size: 2.5em;
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

h3.tittle-w3ls.two {
    color: #fff;
}
/* search */
li.search {
    margin-left: 13em;
}

.search i {
    color: #8c8b8b;
    font-size: 20px;
}

a.reqe-button {
    background: none;
    color: #fff;
    padding: 15px 15px;
    border-radius: 5px;
    font-size: 15px;
    letter-spacing: 2px;
    border-radius: 10px;
    font-size: 12px;
    border:1px solid white;
    text-decoration:none;
}
a.reqe-button:hover {
    opacity: .9;
    background: #fff;
    color: #3190C4;
    transition:.5s;
    text-decoration:none;
}
.navbar-toggler {
    outline: none !important;
}

/* Banner Slider */
.carousel-inner .carousel-item{
	height: 100vh !important;
}
.banner1{
	background: url(../images/bg3.jpeg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 100vh;
  
}
.banner2{
	background: url(../images/bg1.jpeg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 100vh;
  
}
.banner3{
	background: url(../images/bg4.jpeg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 100vh;
  
}
.banner4{
	background: url(../images/bg2.jpeg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 100vh;
  
}
.overlay{
    background: rgba(0, 0, 0, 0.55);
    height: 100vh;
}
.overlay2{
    background: rgba(0, 0, 0, 0.55);
    height: 100%;
}
.carousel-indicators li{
    width:15px !important;
    height:15px !important;
    border-radius:100%;
    background: white !important;
    border: none !important;
    opacity: inherit !important;
    cursor:pointer;
}
.carousel-indicators .active{
    background:#353d50 !important;
    width:15px !important;
    height:15px !important;
}

.carousel-control-prev-icon {
    background-image: url(../images/left.png) !important;
  }
  
.carousel-control-next-icon {
    background-image: url(../images/right.png) !important;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 80px !important;
  height: 80px !important;
}
.carousel-indicators{
    bottom: 20px !important;
}
.areacari{
    position: absolute;
    z-index: 100;
    right: 50px;
    top: 170px;
}
.formcari{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 1s;
    width: 50px;
    height: 50px;
    background: white;
    box-sizing: border-box;
    border-radius: 25px;
    border: 4px solid white;
    padding: 5px;
}
.inputcari{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;;
    height: 42.5px;
    line-height: 30px;
    outline: 0;
    border: 0;
    display: none;
    font-size: 1em;
    border-radius: 20px;
    padding: 0 20px;
}

.ikoncari{
    box-sizing: border-box;
    padding: 10px;
    width: 42.5px;
    height: 42.5px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    color: #0071bc;
    text-align: center;
    font-size: 1.2em;
    transition: all 1s;
}
.formcari:hover{
    width: 300px;
    cursor: pointer;
}

.formcari:hover .inputcari{
    display: block;
}

.formcari:hover .ikoncari{
    background: #0071bc;
    color: white;
}

/* area ikon */
.foricon{
    display:flex;
    margin: 50px 0;
}
.box-produk{
    height:420px;
    width:280px;
    background:white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    border-radius:20px;
    margin:0 20px;
}
.box-produk:hover{
    transform: scale(1.2);
    transition: .5s;
}
.miniicon{
    width: 50px;
    height: 50px;
    background: white;
    align-items: center;
    position: absolute;
    border-radius: 50%;
    display: flex;
    right: 10px;
    bottom: -25px;
    padding:10px;
}
.miniicon img{
    border-radius:0 !important;
}
.areaikon{
    background:#f2f2f2;
    width:100%;
    height:100%;
    padding: 80px 150px;
}
.detailfoto{
    height:200px;
}
.detailfoto img{
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}
.up:hover, .up:focus {
    box-shadow: inset 0 -3.25em 0 0 var(--hover);
  }
.up {
--color: #0071bc;
--hover: #0071bc;
}
.btn2 {
color: var(--color);
transition: 0.25s;
border: 2px solid #0071bc;
padding: 11px 30px;
color: #0071bc;
background:transparent;
font-size: 16px;
letter-spacing: 1px;
text-transform: capitalize;
display: inline-block;
outline:none;
border-radius:20px;
cursor:pointer;
}
.btn2:hover, .btn2:focus {
color: #fff;
}
.imgcard{
    text-align:center;
    height: 200px;
    padding:50px 0;
}
.iconcard{
    width:250px;
    height:100%;
    margin: 0 15px;
    text-align: center;
}
.iconbox{
    background: white;
    width: 100%;
    padding:5px 0;
    border-radius: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height:100px;
    color:#0071bc;
    font-weight: 600;
    font-size:20px;
    line-height:27px;
    cursor:pointer;
}
.iconbox p{
    margin-bottom: 0 !important;
    display:block;
}
.iconbox:hover{
    background:#0071bc;
    transition:.5s;
    color:white;
}

/* area profil */
.areaprofil{
    padding: 80px 150px;
    background:white;
    display:flex;
}
.profil1{
    height:500px;;
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    overflow: hidden;
}
.scrolldown{
    width:100px;
    height:100px;
    position:absolute;
    bottom:0;
    left:50%;
    background:white;
    transform:translate(-50%, 50%);
    border-radius:50px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.scroll1{
    width:40px;
    height:70px;
    background:#979797;
    border-radius:50px;
    display:flex;
    justify-content:center;
}
.scroll2{
    color:white;
    border-radius:50px;
    animation:animate 2s ease-in-out infinite;
}
.scroll2 span{
    font-size:30px;
}
.scroll3{
    width:60px;
    height:60px;
    border-radius:50px;
    border:1px solid white;
    color:white;
}
.scroll4{
    width:60px;
    height:60px;
    border-radius:50px;
    border:1px solid rgb(56, 56, 56);
    color:rgb(56, 56, 56);
}
.scroll3 span, .scroll4 span{
    font-size:60px;
    animation:animate2 2s ease-in-out infinite;
}
@keyframes animate{
    0%,100%{
        transform: translateY(0px)
    }
    50%{
        transform: translateY(40px)
    }
}
@keyframes animate2{
    0%,100%{
        opacity:0;
    }
    50%{
        opacity:1;
    }
}
.thumb-gradient, .thumb-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius:50px;
}
.profil2{
    height:500px;
    padding: 10px 40px;
    position: relative;
}
.profil2 h1, .profil3 h1{
    font-size: 70px;
    font-weight: 700;
    color: #4d4d4d;
}
.profil2 h6{
    font-size: 20px;
    color: #3190C4;
    line-height: 27px;
}
.areaslider{
    width:100%;
    position:absolute;
    bottom:0;
    text-align:center;
    display:flex;
}
.areaslider img{
    width:11%;
    cursor:pointer;
}
.areaslider img:hover{
    filter: grayscale(100%);
    transition:.5s;
}
.perahu1{
    position: relative;
    top: -70px;
    animation: ombak 3.5s infinite;
}
.perahu2{
    position: relative;
    bottom:0;
    animation: ombak 4s infinite;
}
.perahu3{
    position: relative;
    top: -100px;
    animation: ombak 4.5s infinite;
}
.pathg{
    position: absolute;
    width: 70% !important;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
}
@keyframes ombak{
    0%{
        transform:translate(0,-20px);
    }
    50%{
        transform:translate(0px,0px);
    }
    100%{
        transform:translate(0px,-20px);
    }
}
.slidez .prev_arrow{
    color: #979797;
    font-size: 40px;
    text-align: center;
    display: inline-block;
    position: absolute;
    cursor:pointer;
    top: calc(40%);
    left: -5%;
}
.slidez .next_arrow{
    color: #979797;
    font-size: 40px;
    text-align: center;
    display: inline-block;
    position: absolute;
    cursor:pointer;
    top: calc(40%);
    right: -5%;
}
.historycard{
    width:600px;
    display:flex !important;
    cursor:grab;
}
.perahu{
    width:200px;
    color:#3190C4;
    font-weight:600;
}
.teksperahu{
    display: flex;
    align-items: center;
    margin-left:20px;
}

/* area perahu */
.areavisi{
    height: 100%;
    width:100%;
    background:#3190c4;
}
.areasertifikat{
    height: 100%;
    width:100%;
    padding: 0 180px;
}
.pils{
    width:100%;
    margin:0px auto;
    align-items:center;
    display:flex;
    justify-content: center;
}
.pilstengah{
    margin:auto;
    margin-bottom:50px;
}
.about {
    text-align: center;
    padding: 0 180px;
}
.areavisi h3, .areavisi p{
    color:white;
}
.fsertif h4{
    color: black;
}
.about p, .areasertifikat p {
    font-size: 20px;
    line-height: 27px;
}
.areavisi li{
    color:white;
}
.sertifikat {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}
.sertifikat img {
    margin: 20px 10px 10px 10px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}
.sertifikat img:hover{
    transform: scale(1.1);
    transition: .3s ease-in;
    -webkit-box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* area produksi */
.areaproduksi{
    width:100%;
    padding:80px 0;
}
.thumb {
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    overflow: hidden;
    width: 100%;
    color: #fff;
    height:400px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.thumb-gradient2,
.thumb-img2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.thumb-gradient2 {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.56) 100%);
}

.thumb-anim {
margin-top: auto;  /* pushes all content to bottom */
position: relative;
transition: 0.5s;
transform: translateY(100%);
background:#3190C4;
border-radius: 20px 20px 0 0;
height: 80px;
display: flex;
}

.thumb-description {
padding: 10px 20px;
transition: 0.5s;
opacity: 0;
flex: 1;
color: white;
font-size: 25px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
}
.thumb:hover .thumb-anim {
    transform: translateY(0);
}
  
.thumb:hover .thumb-title {
transform: translateY(0%);
}

.thumb:hover .thumb-description {
opacity: 1;
}
.areaproduksi h1, .areaikon h1 {
    font-size: 70px;
    font-weight: 700;
    color: #4d4d4d;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: white;
    color: currentColor;
    text-decoration: none;
    overflow: hidden;
    transition-property: color;
    transition-delay: 0.15s;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .1);
    border-radius:20px !important;
}
.card__head {
    position: relative;
    height:500px;
}
.card__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: left;
    transform-origin: top left;
    transition-property: transform;
    transition-delay: 0.15s;
}
.card__body {
    position: relative;
    padding: 2em;
    transition-property: transform;
    transition-delay: 0.15s;
}
.card__headline {
    font-weight: 400;
    margin: 0 0 0.8em;
}
.card__text {
    line-height: 1.5;
    margin: 0;
    opacity: 0.8;
}
.card__border {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    background: #4ba5d1;
    transform: scaleY(0);
    transition-property: transform;
}
.author {
    display: flex;
    align-items: center;
}
.author__image {
    flex-shrink: 0;
    margin-right: 1em;
    width: 56px;
    height: 56px;
    border-radius: 100%;
    overflow: hidden;
}
.author__content {
    display: grid;
    grid-gap: 0.4em;
    font-size: 0.9em;
}
.author__header {
    margin: 0;
    font-weight: 600;
}
.author__subheader {
    margin: 0;
    opacity: 0.8;
}
/* area kontak */
.footerpic{
    height:400px;
    background: url(../images/ikan.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
}

footer,
.copy_right {
    background: #4ba5d1;
}
.copy_right{
    padding: 20px 0;
}
.footer-grids h4 {
    color: #fff;
    font-size: 1.2em;
}

.footer-grids h5 {
    color: white;
}
.footer-grids h4 {
    color: white;
    font-weight:normal;
}
.logo-footer img{
    width:50%;
}
.footer-grids h5 span {
    color: #feac00;
}

.footer-grids p,
.footer-grids p a,
.copyright p,
.copyright p a {
    font-size: 15px;
    color: white;
    font-weight: normal;
    letter-spacing: .5px;
}

.footer-grids ul li a {
    font-size: 15px;
    color: white;
    font-weight: normal;
    letter-spacing: 1px;
}

.footer-grids ul li {
    list-style-type: none;
}

.footer-grids input[type="email"] {
    background: #fff;
    box-shadow: none !important;
    padding: 12px 15px;
    color: #777;
    font-size: 14px;
    border: none;
    letter-spacing: 1px;
    outline: none;
}

h2 a.navbar-brand {
    color: #fff;
}

.icon-social a {
    color: #fff;
    margin-right: 0.5em;
}

ul.list-info-wthree li a {
    display: block;
    margin: 1em 0;
}

ul.list-info-wthree li a:hover {
    color: #555;

}

.ad-info p {
    display: block;
    margin: .3em 0;
}

.ad-info p span {
    margin-right: 0.5em;
}

.copy_right {
    border-top: 1px solid rgba(221, 221, 221, 0.12);
}

.copy_right p a {
    color: #fff;
}

.copy_right p a:hover {
    opacity: .8;
}

.copy_right p {
    letter-spacing: 1px;
    font-size: 16px;
    margin: 0;
    color: #fff;
    margin-top: 0.5em;
}
a.move-top span {
    color: #ddd;
    width: 36px;
    height: 36px;
    border: transparent;
    background: transparent;
}
form.contact-wthree .form-control {
    border-radius: 0;
    background: #eee;
    border: none;
    font-size: 15px;
    letter-spacing: 1px;
    border-radius: 0 20px 20px 0;
}

form.contact-wthree label {
    width: 45px;
    height: 45px;
    text-align: center;
    background: #67b7f5;
    line-height: 45px;
    color: #eee;
    border-radius: 20px 0 0 20px;
    margin-bottom: 0;
}
/*--responsive--*/
@media (max-width: 1780px){
    a.navbar-brand h4 {
    font-size: 15px;
    }
    .iconbox h6, .profil2 h6, .about p, .nav2>li>a, .fsertif h4, .areasertifikat p{
        font-size:16px !important;
        line-height: 23px !important;
    }
    .perahu h2{
        font-size:18px;
    }
    .box-produk {
        height: 300px;
        width: 200px;
    }
    .detailfoto {
        height: 140px;
    }
    .produk-konten h5{
        font-size: 15px !important;
        line-height: 22px !important;
        margin-bottom: 7px !important;
    }
    .produk-konten h6{
        font-size: 10px !important;
        line-height: 17px !important;
    }
    .miniicon {
        width: 30px;
        height: 30px;
        bottom: -15px;
        padding: 5px;
    }
}
@media (max-width:1366px){
    .card__headline{
        font-size:25px;
    }
    .perahu img{
        width: 120px;
    }
    .profil2{
        height:400px;
    }
    .profil1{
        width:400px;
        height:400px;
    }
    .profil2 h1, .areaproduksi h1, .profil3 h1, .areaikon h1{
        font-size:50px;
    }
    .about, .areasertifikat {
        padding: 0 80px;
    }
    .areaprofil{
        padding: 80px;
    }
    .carousel-control-prev, .carousel-control-next{
        width: 10% !important;
    }
    .carousel-control-prev-icon, .carousel-control-next-icon {
        width: 60px !important;
        height: 60px !important;
    }
    .areacari{
        right:40px;
    }
    .imgcard {
        height: 180px;
    }
    .iconcard{
        width:220px;
    }
    .iconbox{
        height:80px;
    }
    .areaslider{
        width:90%;
    }
    .sertifikat img {
        width: 130px;
        height: 130px;
    }
    .areavisi li p{
        margin-bottom:0;
    }
    .perahu{
        width:auto;
    }
    .pathg{
        bottom: 20px;
    }
    .perahu1{
        top: -40px;
    }
    .perahu2{
        bottom: -12px;
    }
    .perahu3{
        top: -46px;
    }
    .card__head {
        height: 300px;
    }
    .areaproduksi, .areaikon{
        padding: 50px 0;
    }
    .footerpic{
        height:300px;
    }
}
@media(max-width:1280px) {
    .card__head {
        height: 300px;
    }
    .areaslider {
        width: 89%;
      }
    .areaslider img {
    width: 9%;
    }
    .pathg {
        bottom: 4px;
    }
    .areaikon{
        padding:80px;
    }
    .iconcard {
        width: 195px;
    }
    .iconbox h6, .profil2 h6, .about p, .nav2>li>a, .fsertif h4, .navbar-light .navbar-nav .nav-link, .areasertifikat p{
        font-size:15px !important;
        line-height: 22px !important;
        letter-spacing: 0px;
    }
    .profil1 {
        width: 350px;
        height: 350px;
    }
    .profil2 {
        height: 350px;
    }
    .sertifikat img {
        width: 100px;
        height: 100px;
    }
    .areaproduksi {
        width: 100%;
        padding: 50px 0;
    }
    .formcari:hover {
        width: 250px;
        cursor: pointer;
      }
}
@media(max-width:1150px) {
    .card__body{
        padding: 1em;
    }
    .card__headline{
        font-size:20px;
    }
    .areacari {
        right: 30px;
    }
    .imgcard img {
        height: 100%;
    }
    .iconcard {
        width: 150px;
    }
    .imgcard {
        height: 140px;
    }
    .areaikon {
        padding: 50px 80px;
    }
    .iconbox h6{
        font-size: 12px !important;
        line-height: 16px !important;
    }
    .iconbox {
        height: 60px;
    }
    .profil1 {
        width: 300px;
        height: 300px;
    }
    .profil2 {
        height: 300px;
        padding: 10px 0;
    }
    .profil2 h6, .about p, .nav2 > li > a, .fsertif h4, .navbar-light .navbar-nav .nav-link, .card__text , .areasertifikat p{
        font-size: 14px !important;
        line-height: 21px !important;
        letter-spacing: 0px;
    }
    .profil2 h1, .areaproduksi h1, .profil3 h1, .areaikon h1{
        font-size: 40px;
    }
    .perahu img {
        width: 70px;
    }
    .areaslider {
        width: 100%;
    }
    .slidez .next_arrow, .slidez .prev_arrow{
    font-size: 40px;
    top: calc(100% - 80px);
    }
    a.reqe-button {
        font-size: 11.5px;
        padding: 9px 9px;
        letter-spacing: 0px;
    }
    .thumb{
        height:300px;
    }
    .slidez .next_arrow{
        right:-50px;
    }
    .slidez .prev_arrow{
        left:-50px;
    }
    .box-produk{
        margin: 0 10px;
    }
    .box-produk:hover{
        transform: scale(1.1);
        transition: .5s;
    }
    .detailfoto {
        height: 110px;
    }
    .box-produk {
        height: 260px;
        width: 170px;
    }
    .produk-konten.px-3{
        padding: 0 0.5rem !important;
    }
    .produk-konten h5 {
        font-size: 12px !important;
        line-height: 19px !important;
        margin-bottom: 5px !important;
    }
    .text-info {
        font-size: 10px !important;
    }
    .text-info.mx-2{
        margin: 0 2px!important;
    }
}
@media(max-width:1080px) {
    .card__head {
        height: 210px;
    }
    .profil2 h6, .about p, .areasertifikat p, .nav2 > li > a, .fsertif h4, .navbar-light .navbar-nav .nav-link,a.navbar-brand h4, .ad-info p, .modal-body p,form.contact-wthree .form-control, .card__text {
        font-size: 13px !important;
        line-height: 20px !important;
    }
    .carousel-control-prev-icon, .carousel-control-next-icon {
        width: 50px !important;
        height: 50px !important;
    }
    .profil1 {
        width: 280px;
        height: 280px;
    }
    .profil2 {
        height: 290px;
        padding: 10px 0;
        font-weight: normal;
    }
    .teksperahu h6{
        font-weight:normal;
    }
}
@media(max-width:991px) {
    .areaprofil {
        padding: 80px 80px;
    }
    .about, .areasertifikat {
        padding: 0 50px;
    }
    .profil1 {
        width: 100%;
        height: 300px;
    }
    .profil2 h6, .card__text, .about p, .areasertifikat p, .nav2 > li > a, .fsertif h4, .navbar-light .navbar-nav .nav-link, a.navbar-brand h4, .ad-info p, .modal-body p, form.contact-wthree .form-control{
        font-size: 15px !important;
        line-height: 22px !important;
    }
    .profil2{
        height:350px;;
    }
    a.navbar-brand h4 {
        font-size: 20px !important;
        font-weight:normal;
    }
    .iconcard {
        width: 120px;
    }
    .iconbox h6 {
        font-size: 12px !important;
        line-height: 14px !important;
    }
    .overlay, .banner1, .banner2, .banner3, .banner4, .carousel-inner .carousel-item {
        height: 50vh !important;
    }

}
@media(max-width:780px) {
    .iconcard {
        width: 100px;
    }
    .iconbox h6 {
        font-size: 10px !important;
        line-height: 12px !important;
    }
    .sertifikat img {
        width: 80px;
        height: 80px;
    }
    .about, .areasertifikat {
        padding: 0 20px;
    }
    .fsertif h4{
        font-size: 12px !important;
        line-height: 19px !important;
    }
    .perahu img {
        width: 80px;
    }
    .areaslider img {
        width: 11%;
    }
    .foricon {
        display: grid;
        margin: 0;
    }
    .detailfoto {
        height: 250px;
    }
    .box-produk {
        height: 380px;
        width: 100%;
        margin: 20px 0;
    }
    .produk-konten h6 {
        font-size: 15px !important;
        line-height: 22px !important;
    }
    .text-info.mx-2 {
        margin: 0 10px!important;
    }
    .produk-konten h5 {
        font-size: 18px !important;
        line-height: 25px !important;
        margin-bottom: 7px !important;
    }
    .miniicon {
        width: 70px;
        height: 70px;
        bottom: -35px;
        padding: 10px;
    }
}
@media(max-width:768px) {
    .profil2 {
        height: 370px;
    }
    .areaprofil {
        padding: 80px 50px;
    }
    .sertifikat img {
        width: 70px;
        height: 70px;
    }
    .pathg {
        bottom: 6px;
    }
    .box-produk{
        height:400px;
    }
}
@media(max-width:667px) {
    .card__head {
        height: 610px;
    }
    .overlay, .banner1, .banner2, .banner3, .banner4, .carousel-inner .carousel-item {
        height: 100vh !important;
    }
    .perahu img {
        width: 100px;
    }
    .iconcard {
        width: 100px;
        margin: 0 9px;
    }
    .slidez .next_arrow, .slidez .prev_arrow {
        top: calc(100% - 100px);
    }
    .sertifikat {
        display: inline-block;
    }
    .sertifikat img {
        width: 100px;
        height: 100px;
    }
    .pathg {
        bottom: 12px;
    }
}
@media(max-width:640px) {
    .profil2 h6, .card__text, .about p, .areasertifikat p, .nav2 > li > a, .fsertif h4, .navbar-light .navbar-nav .nav-link, a.navbar-brand h4, .ad-info p, .modal-body p, form.contact-wthree .form-control {
        font-size: 12px !important;
        line-height: 19px !important;
    }
    .profil2 {
        height: 330px;
    }
    .areaikon {
        padding: 20px 80px;
    }
    .imgcard {
        height: 130px;
    }
    .iconbox h6 {
        font-size: 9px !important;
        line-height: 11px !important;
    }
    .detailfoto {
        height: 180px;
    }
    .modal-body2 h5{
        font-size:15px;
        margin:0;
    }
    .modal-body2 h6{
        font-size:13px;
    }
    .btn2{
        font-size:13px;
        padding: 8px 20px;
    }
    .detailfoto {
        height: 240px;
    }
}
@media(max-width:414px) {
    .collapse.show {
        height: 100%;
        overflow-y: inherit;
    }
    .overlay, .banner1, .banner2, .banner3, .banner4, .carousel-inner .carousel-item {
        height: 50vh !important;
    }
    .carousel-control-prev, .carousel-control-next {
        width: 15% !important;
    }
    .carousel-control-prev-icon, .carousel-control-next-icon {
        width: 40px !important;
        height: 40px !important;
    }
    .produk-konten h5 {
        font-size: 17px !important;
        line-height: 24px !important;
        margin-bottom: 5px !important;
    }
    .profil2 h6,.produk-konten h6, .card__text, .about p, .areasertifikat p, .nav2 > li > a, .fsertif h4, .navbar-light .navbar-nav .nav-link, a.navbar-brand h4, .ad-info p, .modal-body p, form.contact-wthree .form-control {
        font-size: 15px !important;
        line-height: 22px !important;
    }
    .profil2 {
        height: 470px;
    }
    .perahu3 {
        top: -20px;
    }
    .historycard {
        width: 600px;
        display: inline-block !important;
    }
    .perahu img {
        width: 50%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -5%);
    }
    .slidez .next_arrow, .slidez .prev_arrow {
        top: calc(100% - 150px);
    }
    .nav2>li>a{
        padding: 10px 10px !important;
    }
    .areaprofil {
        padding: 50px;
    }
    .iconcard {
        width: 60px;
        margin: 0 5px;
    }
    .imgcard {
        height: 70px;
        padding: 20px 0;
    }
    .imgcard img {
        height: auto;
        width: 70%;
    }
    .iconbox h6 {
        font-size: 9px !important;
        line-height: 11px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .iconbox p{
        display:none;
    }
    .iconbox {
        height: 30px;
        padding: 0 10px;
    }
    .thumb-description{
        font-size:19px;
        font-weight:600;
    }
    .container-fluid img {
        width: 60px;
        height: 38px;
    }
    .areaslider img {
        width: 15%;
    }
    .pathg {
        bottom: 6px;
        width: 100% !important;
    }
    .areaikon {
        padding: 20px 15px;
    }
    .card__head {
        height: 400px;
    }
    .footerpic {
        height: 200px;
    }
}
@media(max-width:384px) {
    .overlay, .banner1, .banner2, .banner3, .banner4, .carousel-inner .carousel-item {
        height: 50vh !important;
    }
    .profil2 {
        height: 490px;
    }
    .profil1 {
        width: 100%;
        height: 230px;
    }
    .teksperahu {
        margin-top: 20px;
        margin-left:0;
    }
    .nav2>li>a {
        padding: 7px 90px !important;
        margin: 0 2px !important;
        font-size: 16px !important;
    }
    .profil2 h1, .areaproduksi h1, .profil3 h1, .areaikon h1 {
        font-size: 35px;
    }
    .areaslider img {
        width: 18%;
    }
    .nav-pills2>li {
        float: none !important;
        list-style-type: none;
        margin-bottom: 20px;
    }
}
@media(max-width:375px) {
    .container-fluid img {
        width: 45px;
        height: 30px;
    }
    a.navbar-brand h4 {
        font-size: 12px !important;
    }
    .profil1 {
        height: 180px;
    }
    .areaprofil {
        padding: 20px 30px;
    }
    .carousel-indicators li, .carousel-indicators .active {
        width: 10px !important;
        height: 10px !important;
    }
    .carousel-indicators {
        bottom: 0px !important;
    }
    .carousel-indicators {
    bottom: 0px !important;
    }
    .carousel-control-prev, .carousel-control-next{
        top:70px !important;
    }
    .iconcard {
        width: 55px;
    }
    .produk-konten h6{
        font-size: 13px !important;
        line-height: 20px !important;
    }
    .detailfoto {
        height: 200px;
    }
    .box-produk {
        height: 370px;
    }
}
@media(max-width:320px) {
    .card__head {
        height: 300px;
    }
    a.navbar-brand h4 {
        font-size: 11px !important;
    }
    .carousel-control-prev, .carousel-control-next {
        top: 50px !important;
    }
    .produk-konten h5 {
        font-size: 14px !important;
        line-height: 21px !important;
        margin-bottom: 3px !important;
    }
    .profil2 h6,.produk-konten h6, .about p,.areasertifikat p, .nav2 > li > a, .fsertif h4, .navbar-light .navbar-nav .nav-link, .ad-info p, .modal-body p, form.contact-wthree .form-control, .copy_right p,.card__text, .btn.more {
        font-size: 12px !important;
        line-height: 19px !important;
    }
    .logo-footer img {
        width: 40%;
    }
    .nav2>li>a{
        margin: 0 1px !important;
    }
    .profil2 h1, .areaproduksi h1, .profil3 h1, .areaikon h1 {
        font-size: 30px;
    }
    .profil2 h1, .profil3 h1{
        text-align:center;
    }
    .profil2 {
        height: 430px;
    }
}

/*--//responsive--*/