@font-face {
  font-family: 'retrouvailles';
  src: url('font/retrouvailles-italic.ttf') format('truetype');
}

@import url('http://fonts.cdnfonts.com/css/julia-lauren');

*{
  margin: 0;
  box-sizing: border-box;
  /* outline: 1px red solid; */
}

.body {
  font-family: "Gotham", sans-serif;
  font-size: 1vw;
}

.page-container{
  position: relative;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}

#myBtn {
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  cursor: pointer;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
}

#myBtn:hover {
  background-color: #C1393D;
}

.sec1{
  background: #FEF7EC;
}

nav{
  position: relative;
  z-index: 6;
  border-radius: 0 0 0 25px;
  box-shadow: -2px 2px 10px rgba(0,0,0,0.5);
  letter-spacing: 1.5px;
  font-weight: 500;
  background: #C1393D;
  font-size: 14px;
  float: right;
}

.sec1 ul{
  list-style: none;
  margin-top: 13px;
}

nav li{
  margin: 0 28px 0 28px;
  display: inline;
}

nav a, nav a:hover{
  text-decoration: none;
  color: white;
}

.sec1 nav img{
  margin-left: 80px;
  height: 30px;
  width: 60px;
}

.logo img{
  margin: 30px 0 0 30px;
  width: 100px;
  height: 100px;
}

.isi{
  padding-bottom: 30px;
  margin-left: 120px;
  font-family: "Lora", sans-serif;
}

.kanan{
  float: right;
}

.kanan img{
  position: relative;
  z-index: 2;
  margin-top: -80px;
  width: 530px;
  height: 750px;
}

.kiri{
  width: 55%;
}

.judul{
  display: inline;
}

.judul h1{
  font-size: 70px;
  letter-spacing: 3px;
  line-height: 70px;
  color: #5E5A57;
  display: inline;
}

.judul h2{
  letter-spacing: 1px;
  color: #C1393D;
  display: inline-block;
  font-family: 'Gotham', sans-serif;
  font-size: 18px;
  margin-left: 23px;
}

.judul img{
  margin-left: 20px;
  width: 350px;
}

.rectangle{
  margin-top: 10px;
  height: 3px;
  width: 55%;
  background: #C1393D;
}

.text{
  margin-top: 14px;
  color: #89786A;
  margin-left: 5px;
  width: 54%;
  font-family: "Gotham", sans-serif;
  font-size: 18px;
  line-height: 25px;
}

.text p{
  margin-bottom: 20px;
  font-family: "Gotham", sans-serif;
}

.contact-us img{
  display: inline;
  width: 250px;
  height: 70px;
}

.contact-us{
  display: inline;
}

#rectangle{
  display: inline-block;
  margin-top: 10px;
  height: 3px;
  width: 34%;
  background: #C1393D;
}

.sec2 {
  background: #E9E8E4;
  z-index: 1;
  position: relative;
}

.sertif{
  display: inline-block;
  width: 30%;
  padding-top: 60px;
  margin-left: 130px;
  margin-bottom: 50px;
}

.sec2 h6{
  font-family: "Gotham", sans-serif;
}

h6:nth-child(1){
  color: #C1393D;
}

h6:nth-child(2){
  letter-spacing: 1.7px;
  color: #4A4949;
}

/* .logo-sertif{
  position: relative;
  margin: -30px 0 0 -110px;
  padding-bottom: 190px;
}

.logo-sertif img{
  position: absolute;
  width: 170px;
  height: 170px;
}

.logo-sertif img:nth-child(1){
  margin-top: -20px;
  z-index: 2;
}

.logo-sertif img:nth-child(2){
  margin-left: 120px;
}

.logo-sertif img:nth-child(4){
  z-index: 3;
  margin-top: 100px;
  margin-left: 50px;
}

.logo-sertif img:nth-child(6){
  z-index: 4;
  width: 200px;
  height: 150px;
  margin-top: 90px;
  margin-left: 180px;
} */

.logo-sertif{
  position: relative;
  margin-left: -5px;
}

.logo-sertif img{
  width: 150px;
  height: 150px;
}

.logo-sertif img:nth-child(1){
  margin-right: 30px;
}

.desc{
  margin: 68px 0 0 0vw;
  position: absolute;
  display: inline-block;
}

.desc h3{
  font-family: "Lora", sans-serif;
  color: #464646;
}

.desc p{
  color: #89786A;
  font-family: "Gotham", sans-serif;
  font-size: 17px;
  font-weight: 500;
  width: 83%;
  letter-spacing: 0.5px;
}

.desc span{
  color: #C1393D;
}

/*----------------- Panel 3 -----------------*/
.panel3 {
  background-color: #FDF8F1;
  width: 100%;
  min-width: 1300px;
  height: 700px;
  background-size: cover;
  background-repeat:no-repeat;
  background-position: center;
  margin: 0 0 0 0;
  box-sizing:50px;
}

/*------ Kiri ------*/
.kiri2{
  margin-top: 40px;
  width: 50%;
  float: left;
}

.kiri2 .p2 {
  line-height: 1px;
  margin-top: 5vw;
  margin-left: 130px;
  font-size: 36px;
  font-family: 'lora';
  color: #665344;
  font-weight: 490;
}

.kiri2 .p3 {
  margin-left: 133px;
  font-size: 15px;
  font-family: 'lora';
  color: #665344;
  font-weight: 490;
  line-height: 2px;
}

.kiri2 .p4 {
  margin-left: 135px;
  font-size: 12px;
  font-family: 'lora';
  color: #665344;
  font-weight: 490;
  line-height: 2px;
  letter-spacing: 1px;
}

.kiri2 .click{
  margin-top: 50px;
}

.click hr{
  margin-top: 10px;
  margin-left: 135px;
  height: 1px;
  width: 33%;
  background: #C4C4C4;
}

/*----- Kanan -----*/
/* .yangkanan{
  position: relative;
} */

/* PANEL GOJEK DAN GRABFOOD */
.panel3c {
  padding-left: 70%;
  margin-top: -70px;
}

.panel3c img{
  width: 190px;
  height: 50px;
}

.del{
  margin-top: -120px;
}

.del img{
  width: 55px;
  height: 55px;
}

.text_p3b{
  height: 55px;
  width: 200px;
  margin-top: 1%;
}

.tengah{
  margin-left: 170px;
}

.available{
  padding-top: 100px;
  margin-left: 48vw;
  letter-spacing: 0.5px;
}

.available p{
  line-height: 5px;
  font-size: 15px;
  font-family: 'lora', sans-serif;
  font-weight: bold;
  font: 'lora', sans-serif;
  color: #665344;
}

.avail-p{
  display: inline-block;
}

.avail-cart{
  position: absolute;
  margin-top: -5px;
  margin-left: 40px;
  display: inline-block;
}

.available p:nth-child(2){
  font-weight: 100;
}

.table3{
  margin-left: 740px;
}

.vl {
  margin-left: -20px;
  border-left: 3px solid #C1393D;
  height: 120px;
}

table td{
  margin-right: 9px;
}

.del td{
  padding-right: 40px;
}

table img{
  width: 80px;
  height: 80px;
}

.wa_logo{
  padding-top: 4%;
}

.button3{
  background-color: #C7AF8B;
  border: none;
  border-radius: 19px;
  padding: 5px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  font-family: 'lora', sans-serif;
}

.button3 img{
  margin-top: -5px;
  width: 20px;
  height: 20px;
}

.font3{
  font-weight: 900;
  font-size: 15px;
  padding-left: 20px;
  text-decoration: none;
  color: black;
}

.font3-1{
  font-weight: bold;
  font-size: 14px;
  padding-left: 20px;
  text-decoration: none;
  color: black;
}

.buttonpanel3{
  margin-top: -15px;
  padding-left: 43.3%;
}

/*----- hover Panel 3 -----*/
.hover_p3{
  text-align: center;
}

.desc_kopi img{
  margin: 20px;
}

.prod_kopi{
  gap: 50px;
  display: flex;
  justify-content: center;
}

.prod_kopi img{
  position: sticky;
  width: 180px;
}

.btn_kopi{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.btn_kopi img{
  cursor: pointer;
}

.closed_wrap{
  width: 1100px;
  overflow: hidden;
}

/* 60% */
@media screen and (min-width : 2801px){
  .available{
    padding-top: 100px;
    margin-left: 36vw;
    letter-spacing: 0.5px;
  }

  .kiri2{
    margin-top: -20px;
    width: 50%;
    float: left;
  }

  .panel3c {
    padding-left: 85%;
    margin-top: -70px;
  }

  .panel3c img:nth-child(3){
    width: 160px;
    height: 50px;
  }

  .table3{
    margin-left: 960px;
  }

  .vl {
    margin-left: -20px;
    border-left: 3px solid #C1393D;
    height: 120px;
  }
}

/* 50% */
@media screen and (min-width : 2080px) and (max-width : 2800px){
  .available{
    padding-top: 100px;
    margin-left: 36vw;
    letter-spacing: 0.5px;
  }

  .kiri2{
    margin-top: -20px;
    width: 50%;
    float: left;
  }

  .panel3c {
    padding-left: 85%;
    margin-top: -70px;
  }

  .panel3c img:nth-child(3){
    width: 160px;
    height: 50px;
  }

  .table3{
    margin-left: 960px;
  }

  .vl {
    margin-left: -20px;
    border-left: 3px solid #C1393D;
    height: 120px;
  }
}

/* 70% */
@media screen and (min-width : 1920px) and (max-width : 2079px){
  .kiri2{
    margin-top: 20px;
    width: 50%;
    float: left;
  }

  .panel3c {
    padding-left: 85%;
    margin-top: -70px;
  }

  .panel3c img:nth-child(3){
    width: 160px;
    height: 50px;
  }

  .table3{
    margin-left: 960px;
  }

  .vl {
    margin-left: -20px;
    border-left: 3px solid #C1393D;
    height: 120px;
  }
}

/* 80% */
@media screen and (min-width : 1760px) and (max-width : 1919px){
  .kiri2{
    margin-top: 20px;
    width: 50%;
    float: left;
  }

  .panel3c {
    padding-left: 77%;
    margin-top: -70px;
  }

  .panel3c img:nth-child(3){
    width: 160px;
    height: 50px;
  }

  .table3{
    margin-left: 850px;
  }

  .vl {
    margin-left: -20px;
    border-left: 3px solid #C1393D;
    height: 120px;
  }
}

/* 90% */
@media screen and (min-width : 1600px) and (max-width : 1759px){
  .kiri2{
    margin-top: 30px;
    width: 50%;
    float: left;
  }

  .panel3c {
    padding-left: 74%;
    margin-top: -70px;
  }

  .table3{
    margin-left: 800px;
  }
}

/* 100% */
@media screen and (min-width : 1440px) and (max-width : 1599px){
  .kiri2{
    margin-top: 30px;
    width: 50%;
    float: left;
  }

  .panel3c {
    padding-left: 74%;
    margin-top: -70px;
  }

  .table3{
    margin-left: 710px;
  }
}

/* 110% */
@media screen and (min-width : 1280px) and (max-width : 1439px){
  .kiri2{
    margin-top: 30px;
    width: 50%;
    float: left;
  }

  .panel3c {
    padding-left: 76%;
    margin-top: -70px;
  }

  .table3{
    margin-left: 630px;
  }
}

/* 120% */
@media screen and (min-width : 1120px) and (max-width : 1279px){
  .kiri2{
    margin-top: 50px;
    width: 50%;
    float: left;
  }

  .panel3c {
    padding-left: 73%;
    margin-top: -70px;
  }

  .panel3c img:nth-child(3){
    width: 160px;
    height: 50px;
  }

  .table3{
    margin-left: 575px;
  }

  .vl {
    margin-left: -20px;
    border-left: 3px solid #C1393D;
    height: 120px;
  }
}

/* 130% */
@media screen and (min-width : 1060px) and (max-width : 1119px){
  .hover_p3{
    margin-top: 13vw;
  }

  .kanan img{
    width: 528px;
    height: 750px;
  }

  .available{
    margin-left: 70vw;
  }
}

/* 140% */
@media screen and (min-width : 800px) and (max-width : 1059px){
  .hover_p3{
    margin-top: 15vw;
  }

  .kanan img{
    width: 528px;
    height: 750px;
  }

  .available{
    margin-left: 83vw;
  }
}




/* ---------------- Panel 2 -------------------- */
.panel2{
  background: #E0D5C4;
  width: 100%;
  min-width: 1300px;
  height: 475px;
  margin: 0 0 0 0;
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
}

.panel2b{
background: #E0D5C4;
width: auto;
min-width: 1300px;
height: 425px;
margin-top: -70px;
margin-bottom: -16px;
display: flex;
justify-content: center;
}

/* gallery display */

/*------------- photos1 ------------- */
.photos {
  padding-top: 50px;
  display: block;
}

.photos img{
  width: 277px;
  height: 350px;
}

.photos img:hover{
    opacity: 0.7;
}

.photos ul {
  list-style: none;
}

.photos ul li { 
    display: inline;
    list-style: none;
    float: left;
    padding: 0 10px 0 0;
    text-align:center; 
    margin-bottom: 25px;
}

.photos ul li a {

  display: block;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  text-decoration: none;
  color: #665344;
  font-size: 24px;
  font-weight: bold;
}
.photos ul li a:hover {
  opacity: 1.0;
}

/*------------- photos2 ------------- */

.photos2 {
  display: block;
}

.photos2 img{
    width: 277px;
    height: 350px;
}

.photos2 img:hover{
    opacity: 0.7;
  }

.photos2 ul {
  list-style: none;
}

.photos2 ul li { 
    display: inline;
    list-style: none;
    float: left;
    padding: 0 10px 0 0;
    text-align:center; 
}

.photos2 ul li a {

  display: block;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  text-decoration: none;
  color: #665344;
  font-size: 24px;
  font-weight: bold;
}

/* ------------------ end ------------------*/



/* ------------ MODAL WINDOWS FOR IMAGE --------------*/
#myImg01, #myImg02, #myImg03, #myImg04, #myImg05, #myImg06, #myImg07, #myImg08 {
  cursor: pointer;
  transition: 0.3s;
}
  
  /* The Modal (background) */
  .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: none; /* Enable scroll if needed */
  background-color: blue (0.4); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content (image) */
  .modal-content {
    margin: -100px auto auto auto;
    display: block;
    width: 100%;
    max-width: 1169px;
  }
  
  /* Add Animation */
  .modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.1s;
  animation-name: zoom;
  animation-duration: 0.1s;
  }
  
  @-webkit-keyframes zoom {
  from {-webkit-transform:scale(0.5)} 
  to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
  from {transform:scale(0.5)} 
  to {transform:scale(1)}
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
  }
  
  .container{  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
  }
  
  /* ------------ MODAL WINDOWS FOR TEXT --------------*/
  .myText1 {
  cursor: pointer;
  transition: 0.3s;
  }
  
  .myText1:hover {opacity: 0.7;}
  
  .myText1 {
  cursor: pointer;
  transition: 0.3s;
  }
  
  .myText:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: none; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content (image) */
  .modal-content {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 100px;
  }

  .modal .container{
    position: relative;
    width: 100%;
    max-width: 32%;
    margin: 0 auto;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
  .modal-content2 {
    width: 100%;
  }
  }

/* ------------ MODAL2 WINDOWS FOR IMAGE --------------*/
#myImg01 {
cursor: pointer;
transition: 0.3s;
}

/* The Modal (background) */
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: none; /* Enable scroll if needed */
background-color: blue (0.4); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content2 {
margin: -70px auto auto auto;
display: block;
width: 100%;
max-width: 1169px;
border-radius: 10px;
}

/* Add Animation */
.modal-content2, #caption2 {  
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.1s;
animation-name: zoom;
animation-duration: 0.1s;
}

@-webkit-keyframes zoom {
from {-webkit-transform:scale(0.5)} 
to {-webkit-transform:scale(1)}
}

@keyframes zoom {
from {transform:scale(0.5)} 
to {transform:scale(1)}
}

/* The Close Button */
.close2 {
position: absolute;
top: 15px;
right: 35px;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close2:hover,
.close2:focus {
text-decoration: none;
cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content2 {
  width: 100%;
}
}

.container2{
position: relative;
height: 100%;
margin: 0 auto;
max-width: max-content;
max-height: max-content;
}

.container2{  
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)} 
to {-webkit-transform:scale(1)}
}

@keyframes zoom {
from {transform:scale(0)} 
to {transform:scale(1)}
}

/* ------------ MODAL WINDOWS FOR TEXT --------------*/
.myText1 {
cursor: pointer;
transition: 0.3s;
}

.myText1:hover {opacity: 0.7;}

.myText2 {
cursor: pointer;
transition: 0.3s;
}

.myText2:hover {opacity: 0.7;}

/* The Modal (background) */
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: none; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content2 {
display: block;
max-width: 100%;
max-height: 100%;
z-index: 10;
}

/* Caption of Modal Image */
#caption2 {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
padding: 10px 0;
}

/* Add Animation
.modal-content, #caption {  
-webkit-animation-name: zoom;
-webkit-animation-duration: 2s;
animation-name: zoom;
animation-duration: 2s;
} */

/* @-webkit-keyframes zoom {
from {-webkit-transform:scale(0)} 
to {-webkit-transform:scale(1)}
} */

/* @keyframes zoom {
from {transform:scale(0)} 
to {transform:scale(1)}
} */

/* The Close Button */
.close2 {
position: absolute;
top: 15px;
right: 35px;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close2:hover,
.close2:focus {
text-decoration: none;
cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content2 {
  width: 100%;
}
}


/* ------------ MODAL3 WINDOWS FOR IMAGE --------------*/
#myImgA1, #myImgA3 {
  cursor: pointer;
  transition: 0.3s;
  }
  
  /* The Modal (background) */
  .modal3 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: none; /* Enable scroll if needed */
  background-color: blue (0.4); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content (image) */
  .modal-content3 {
  margin: -70px auto auto auto;
  display: block;
  width: 100%;
  max-width: 1169px;
  border-radius: 10px;
  }
  
  /* Add Animation */
  .modal-content3, #caption3 {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.1s;
  animation-name: zoom;
  animation-duration: 0.1s;
  }
  
  @-webkit-keyframes zoom {
  from {-webkit-transform:scale(0.5)} 
  to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
  from {transform:scale(0.5)} 
  to {transform:scale(1)}
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
  .modal-content3 {
    width: 100%;
  }
  }
  
  .container3{
  position: relative;
  height: 100%;
  margin: 0 auto;
  max-width: max-content;
  max-height: max-content;
  }
  
  .container3{  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
  }
  
  /* ------------ MODAL WINDOWS FOR TEXT --------------*/
  .myText1 {
  cursor: pointer;
  transition: 0.3s;
  }
  
  .myText1:hover {opacity: 0.7;}
  
  .myText3 {
  cursor: pointer;
  transition: 0.3s;
  }
  
  .myText3:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  .modal3 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: none; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content (image) */
  .modal-content3 {
  display: block;
  max-width: 100%;
  max-height: 100%;
  }
  
  /* Caption of Modal Image */
  #caption3{
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  padding: 10px 0;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
  .modal-content2 {
    width: 100%;
  }
  }


/* ------------------------ Panel 5 --------------------------- */

.sec5{
  background: #F4F4F4;
  display: grid;
  position: relative;
  margin: auto;
  gap: 10px;
  grid-template-areas:  "alamat map";
  grid-template-columns: 1fr 1fr;
}

.alamat{
  margin-top: -30px;
  padding-top: 30px;
  border-radius: 0 25px 25px 0;
  background: #C1393D;
  z-index: 3;
  height: 410px;
  font-family: "Lora", sans-serif;
}

.alamat-group{
  margin: 40px 0 0 120px;
}

.alamat h3{
  font-family: "Lora", sans-serif;
  color: #f2f2f2;
}

.alamat h1{
  font-family: 'Gotham Black', sans-serif;
  letter-spacing: 2px;
  color: #FFF84D;
}

.alamat p{
  margin-top: 25px;
  font-size: 20px;
  font-family: "Gotham", sans-serif;
  color: #F2F2F2;
  width: 70%;
}

.rectangle2{
  margin-top: 10px;
  height: 3px;
  width: 55%;
  background: #FFF84D;
}

.map{
  padding: 30px 70px 30px 70px;
}

.map-group{
  width: 500px;
  border-radius: 14px;
  background: #FFFFFF;
}

.map-group iframe{
  padding: 30px 0 30px 0;
  width: 500px;
  height: 300px;
}


/* --------------------Panel 6 ---------------------- */

/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

.panel4{
  margin-top: -10px;
  position: relative;
  background-color: #F8F2EA;
  border-radius: 25px 25px 0 0;
  height: 280px;
  width: 100%;
  box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.20);
  display: grid;
  grid-template-areas:  "grid1 grid2 grid3 grid4";
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* ---------------- grid 1 ------------------- */

.grid1{
  position: relative;
}

.grid1 a{
  margin: auto;
  text-decoration: none;
  color: #89786A;
  font-family: 'Gotham', sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.grid1 a:hover{
  color: #A4282A;
}

.grid1 ul{
  margin: 40px 0 0 85px;
  width: fit-content;
}

.grid1 li{
  margin: 7px 0;
  list-style: none;
  width: fit-content;
}

/* ---------------- grid 2 ------------------- */

.grid2{
  position: relative;
  font-family: 'Montserrat', sans-serif;
}

.grid2 .grid2-contact{
  margin-top: 40px;
}

.grid2-contact h4, span{
  color: #A4282A;
  font-weight: bold;
}

.grid2 span{
  font-weight: bold;
}

.grid2 p{
  font-size: 14px;
  color: #95897F;
}

.grid2-contact p:nth-child(2){
  margin-top: 20px;
}

.grid2-contact{
  width: fit-content;
  margin-left: 30px;
}

.grid2-contact a{
  text-decoration: none;
  color: #95897F;
}

/* ---------------- grid 3 ------------------- */

.grid3{
  position: relative;
  font-family: 'Montserrat', sans-serif;
}

.grid3 .grid3-social{
  margin-top: 40px;
}

.grid3-social h4, span{
  color: #A4282A;
  font-weight: bold;
}

.grid3 span{
  font-weight: bold;
}

.grid3 p{
  font-size: 14px;
  color: #95897F;
}

.grid3-social p:nth-child(2){
  margin-top: 20px;
}

.grid3-social{
  width: fit-content;
  margin-left: 0px;
}

.grid3-social a{
  text-decoration: none;
  color: #95897F;
}

/* ---------------- grid 4 ------------------- */

.grid4{
  position: relative;
  font-family: 'Montserrat', sans-serif;
}

.grid4 .grid4-product{
  margin-top: 40px;
}

.grid4-product{
  margin-left: -20px;
}

.flex {
  display:flex;
  margin-top: 30px;
  /* margin-left: 320px; */
}

.flex div{
  padding-right: 50px;
}

.flex img {
  width:50px;
  height: 50px;
}

.flex img:hover{
  transform: translateY(-10px);
}

/* .producted {
  margin-left: 3px;
} */

.producted h4{
  color: #A4282A;
  font-weight: bold;
}

.producted p{
  color: #656565;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.producted span{
  font-weight: normal;
  color: #656565;
}

/*----- footer 5 -----*/
footer{
  display: flex;
  justify-content: center;
  background-color: #A4282A;
  height: 49px;
  width: 100%;
}

.logo_good {
  display: flex;
  align-items: center;
}

.logo_good p{
  font-size: 15px;
  margin-top: 30px;
  margin-left: 15px;
  color: white;
  font-family: 'Gotham', sans-serif;
}

span{
  font-weight: 500;
}

.logo_good hr {
  color: white;
  margin-top: 40px;
  flex:1;
  width: 645px;
}

.rectangle_foot {
  height: 9px;
  width: 100%;
  min-width: 1300px;
  background-color: #4A4949;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.20);
}

.rectangle_product {
  height: 2px;
  width: 270px;
  background-color: #656565;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.20);
}


/* ----------dropdown-------------- */
.dropbtn {
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #C1393D;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: #FFFFFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show {display: block;}

button{
  border: none;
  color: white;
}

.hidden-text p{
  color: transparent;
  font-size: 0.1px;
}

.sidebar{
  position: absolute;
  margin-top: 50px;
  left: 0;
  writing-mode: vertical-rl;
  background: #C1393D;
  border-radius: 0 25px 25px 0;
}

.sidebar p{
  padding: 0 0 15px 0;
  color: #F5F5F5;
  font-size: 25px;
  transform: rotate(180deg);
  font-family: "Gotham", sans-serif;
}



/* ----------------- hover opacity product ------------------- */

.wrapper {
        padding: 50px 50px;
        max-width: 1200px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
      }
      .containers {
        background-color: #FFFFFF;
        width: 45%;
        margin: 20px;
        height: 280px;
        width: 180px;
        border-radius: 53px;
        outline: none;
        border: none;
        overflow: hidden;
        position: relative;
        float: left;
        display: inline-block;
        cursor: pointer;
        box-shadow: -8px 8px 0px rgba(224, 213, 196, 1);
      }

      .child {
        height: 107%;
        width: 110%;
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
      }
      .bg-one {
        background-image: url(../assets/ulubelu\ original.png);
      }
      .bg-two {
        background-image: url(../assets/ulubelu\ special.png);
      }
      .bg-three{
        background-image: url(../assets/Ulubelu\ Lanang\ 1.png);
      }
      .bg-four{
        background-image: url(../assets/ulubelu\ gold\ 1.png);
      }
      .bg-five{
        background-image: url(../assets/ulubelu\ limited\ 1.png);
      }

      span.first {
        display: none;
        text-align: center;
        margin: auto 0;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 200px;
        cursor: pointer;
        text-decoration: none;
      }

      span.first img{
        width: 90%;
        height: auto;
      }

      .desc-prod{
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #AD254E;
      }

      .desc-prod2{
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #C1393D;
      }

      .desc-prod3{
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #985A30;
      }

      .desc-prod4{
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #B18441;
      }

      .desc-prod5{
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #3C3B3B;
      }

      .desc-prod p{
        color: white;
        font-size: 20px;
        font-family: "Gotham", sans-serif;
        font-weight: 500;
      }

      .desc-prod2 p{
        color: white;
        font-size: 20px;
        font-family: "Gotham", sans-serif;
        font-weight: 500;
      }

      .desc-prod3 p{
        color: white;
        font-size: 20px;
        font-family: "Gotham", sans-serif;
        font-weight: 500;
      }

      .desc-prod4 p{
        color: white;
        font-size: 20px;
        font-family: "Gotham", sans-serif;
        font-weight: 500;
      }

      .desc-prod5 p{
        color: white;
        font-size: 20px;
        font-family: "Gotham", sans-serif;
        font-weight: 500;
      }

      .containers:hover .child,
      .containers:focus .child {
        -ms-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
      }

      .containers:hover .desc-prod,
      .containers:focus .desc-prod {
        display: none;
      }

      .containers:hover .child:before,
      .containers:focus .child:before {
        display: block;
      }
      .containers:hover span,
      .containers:focus span {
        display: block;
      }
      .child:before {
        content: "";
        display: none;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(244, 244, 244, 0.85);
      }