/*=============== VARIABLES CSS ===============*/
:root{
  --header-height: 3rem;

  /*========== Colors ==========*/
  /* Change favorite color to match images */
  /*Green dark 190 - Green 171 - Grren Blue 200*/
  --hue-color: 190;

  /* HSL color mode */
  --first-color: hsl(var(--hue-color), 64%, 22%);
  --first-color-second: hsl(var(--hue-color), 64%, 22%);
  --first-color-alt: hsl(var(--hue-color), 64%, 15%);
  --title-color: hsl(var(--hue-color), 64%, 18%);
  --text-color: hsl(var(--hue-color), 24%, 35%);
  --text-color-light: hsl(var(--hue-color), 8%, 60%);
  --input-color: hsl(var(--hue-color), 24%, 97%);
  --body-color: hsl(var(--hue-color), 100%, 99%);
  --white-color: #FFF;

  --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 75%);

  /*========== Font and typography ==========*/
  --body-font: 'Open Sans', sans-serif;
  --title-font: 'Raleway', sans-serif;

  --biggest-font-size: 2.5rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  @media screen and (min-width: 968px){
      --biggest-font-size: 4rem;
      --h1-font-size: 2.25rem;
      --h2-font-size: 1.75rem;
      --h3-font-size: 1.25rem;
      --normal-font-size: 1rem;
      --small-font-size: .875rem;
      --smaller-font-size: .813rem;
  }

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Margenes Bottom ==========*/
  --mb-0-25: .25rem;
  --mb-0-5: .5rem;
  --mb-0-75: .75rem;
  --mb-1: 1rem;
  --mb-1-25: 1.25rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;

  /*========== Hover overlay ==========*/
  --img-transition: .3s;
  --img-hidden: hidden;
  --img-scale: scale(1.1);
}

/*========== Variables Dark theme ==========*/
body.dark-theme{
  --first-color-second: hsl(var(--hue-color), 54%, 12%);
  --title-color: hsl(var(--hue-color), 24%, 95%);
  --text-color: hsl(var(--hue-color), 8%, 75%);
  --input-color: hsl(var(--hue-color), 29%, 16%);
  --body-color: hsl(var(--hue-color), 29%, 12%);

  --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
}

/*========== Button Dark/Light ==========*/
.nav__dark{
  display: flex;
  align-items: center;
  column-gap: 2rem;
  position: absolute;
  left: 3rem;
  bottom: 4rem;
}

.change{
  &-theme,
  &-theme-name{
      color: var(--text-color);
  }
  &-theme{
      cursor: pointer;
      font-size: 1rem;
  }
  &-theme-name{
      font-size: var(--small-font-size);
  }
}

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Meie+Script&family=Merriweather:wght@300&family=Montserrat:wght@600&family=Open+Sans&family=Poppins:wght@300&family=Roboto:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat:wght@300&family=Oswald:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Boogaloo&family=Cinzel+Decorative:wght@400;700;900&family=Spicy+Rice&family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap');
* {
font-family: 'Oswald', sans-serif;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
outline: none;
border: none;
text-transform: capitalize;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}



html,body{
width: 100%;
height: 100%;
padding: 0px;
scroll-behavior: smooth;
scroll-padding-top: 9rem;
margin: 0px;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
scroll-padding-top: 9rem;
overflow-x: hidden;
background-color: #1c1b19 ;
}


.alert.alert-success {
  font-size: 16px;
}

section {
padding: 1px 9%;
padding-bottom: 10px;
}

.heading {
padding-top: 50px;
text-align: center;
background-color: #1c1b19;
}

.indexheading {
  text-align: center;
  background-color: #1c1b19;
  margin-top: 5%;
  }

  .indexheading span {
    font-family: 'Outfit', sans-serif;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: 4pt;
    text-align: center;
    color: #ffffff;
    background-color: transparent;
    margin-top: 5%;
    }
.heading2 {
 padding-top: 90px;
 background-color: transparent;
 text-align: center;

 }


 .heading1 {
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
   text-align: center;
   margin: 10px 0px;
   }

.heading1 h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: bold;
  letter-spacing: 3pt;
  text-transform: uppercase;
 font-size: 25px;
 color:#ffffff;
 }

 .heading1 .btn{
  font-family: 'Outfit', sans-serif;
  font-weight: normal;
  text-align: left;
  margin: 10px 0px;
  letter-spacing: 1pt;
 font-size: 13px;
 color:#ffffff;
 padding: .5rem 1.8rem;

 }

 .heading1 .btn:hover {
  background: #f71f1f;
  color: #ffffff;
  }

 .heading1 h2{
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: normal;
  letter-spacing: 3pt;
  line-height: 10pt;
  text-transform: uppercase;
 font-size: 15px;
 color:#ffffff;
 }
 
 .heading1 h1 span{
  font-family: 'Outfit', sans-serif;
  font-weight: normal;
  letter-spacing: 3pt;
  line-height: 10pt;
  text-transform: uppercase;
 font-size: 15px;
 color:#ffffff;
 }

 .heading1 q {
  text-transform: uppercase;
  font-size: 25px;
  color:#ffffff;
  }
 
 .heading1 p {
  font-family: 'Outfit', sans-serif;
  font-weight: normal;
  color:#ffffff;
 padding-top: .7rem;
 font-size: 15px;
 
 }
 
 .heading1 p a {
  font-family: 'Outfit', sans-serif;
  font-weight: normal;
  color:#ffffff;
   font-size: 15px;
 }
 
 .heading1 p a:hover {
 color: #333;
 }

.heading h1 {
font-size: 25px;
color:#ffffff;
}

.indexheading h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 20px;
  margin-top: 2%;
  margin-bottom: -2%;
  text-transform: lowercase;
  color:#ffffff;
  }

.heading p {
 color:#ffffff;
padding-top: .7rem;
font-size: 15px;

}

.indexheading p {
  color:#ffffff;
 padding-top: .7rem;
 font-size: 15px;
 
 }
.heading p a {
 color:#ffffff;
  font-size: 15px;
}

.indexheading p a {
  color:#ffffff;
   font-size: 15px;
 }

.heading p a:hover {
color: #333;
}

.title {
font-size: 3rem;
color: #333;
margin-bottom: 2rem;
text-align: center;
padding: 0 1rem;
}

.btn {
display: inline-block;
margin-top: 1rem;
padding: .8rem 2.8rem;
font-size: 1.7rem;
color: #ffffff;
border: 2pt solid #ffffff;
background:transparent;
cursor: pointer;
margin: 5px;
border-radius: .5rem;
}

.btn:hover {
background: #333;
color: #ffffff;
}

.btn-index {
  display: inline-block;
  margin-top: 1rem;
  padding: .8rem 2.8rem;
  font-size: 20px;
  color: #ffffff;
  border: 2pt solid #ffffff;
  background:transparent;
  cursor: pointer;
  margin: 5px;
  border-radius: .5rem;

  }
.btn-index:hover {
  background: #B69574;
  color: #ffffff;
  }

  .btnsewa1, .btnsewa2 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: rgb(10, 8, 8);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .btnsewa2 {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .btnsewa1, .btnsewa2:hover {
    background-color: rgba(0,0,0,0.8);
  }

.hbbtn {
  display: inline-block;
  margin-top: 1rem;
  padding: .8rem 2.8rem;
  font-size: 20px;
  color: #ffffff;
  border: 2pt solid #ffffff;
  background:transparent;
  cursor: pointer;
  margin: 5px;
  border-radius: .5rem;

  }

  .hbbtn-self {
    display:flex;
    margin-top: 1rem;
    padding: .6rem 2.8rem;
    font-size: 16px;
    color: #ffffff;
    border: 2pt solid #ffffff;
    background:transparent;
    cursor: pointer;
    margin-right: 5px;
    border-radius: .5rem;
  
    }

    .hbbtn-self:hover {
      background: #cc6d0d;
      color: #ffffff;
      }

      .hbbtn-sewa {
        display:inline-block;
        margin-top: 1rem;
        padding: .6rem 2.8rem;
        font-size: 16px;
        color: #ffffff;
        border: 2pt solid #ffffff;
        background:transparent;
        cursor: pointer;
        margin-right: 5px;
        border-radius: .5rem;
      
        }
    
        .hbbtn-sewa:hover {
          background: #B69574;
          color: #ffffff;
          }
  .hbbtn3 {
    display: inline-block;
    margin-top: 1rem;
    padding: .8rem 2.8rem;
    font-size: 20px;
    color: #ffffff;
    border: 2pt solid #ffffff;
    background:transparent;
    cursor: pointer;
    margin: auto;
    border-radius: .2rem;
  
    }

    .hbbtn3:hover {
      background: #B69574;
      color: #ffffff;
      }
  
  .hbbtn:hover {
  background: #B69574;
  color: #ffffff;
  }

  .header {
    background-color: #121211;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
   padding: 0px 10px;
   height: 60px;
   z-index: 1000;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   }


.header-tutup {
  background-color: none;
  width: 100%;
 }
.headerindex {
  background-color: transparent;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 padding: 10px;
 z-index: 1000;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 }

 .headerindex .logo {
  font-size: 2.5rem;
  color: #ffffff;
  font-weight: bolder;
  margin-right: auto;
  width: 20%;
  padding-left: 17.6px;
  }
  
  .headerindex img {
  width: 60%;
  }
  
  
  .headerindex .navbar {
  background-color: transparent;
  }
  
  .headerindex .navbar ul {
  font-weight: 600;
  list-style: none;
  font-family: 'Outfit', sans-serif;
  
  }
  
  .headerindex .navbar ul li {
   color:#ffffff;
  position: relative;
  float: left;
  font-family: 'Outfit', sans-serif;
  
  }
  
  .headerindex .navbar ul li:hover ul {
  display: block;
  }
  
  
  .headerindex .navbar ul li a {
  font-size: 1.7rem;
  color:#ffffff;
  padding: 2rem;
  display: block;
  font-family: 'Outfit', sans-serif;
  
  }
  
  .headerindex .navbar ul li a:hover {
  color: #B69574;
  }
  
  .headerindex .navbar ul li ul {
  position: absolute;
  left: 0;
  width: 20rem;
  display: none;
  
  
  }
  
  .headerindex .navbar ul li ul li {
  width: 100%;
  background-color: #1c1b19;
  }
  .headerindex .navbar ul li ul li a{
  width: 100%;
  color:#ffffff;
  
  }
  

  
  .headerindex .icons div,
  .headerindex .icons a {
  font-size: 2.5rem;
  color: #ffffff;
  cursor: pointer;
  margin-left: 2rem;
  }
  
  .headerindex .icons div:hover,
  .headerindex .icons a:hover {
  color: #697878;
  }
.header .logo {
font-size: 2.5rem;
color: #fff;
font-weight: bolder;
margin-right: auto;
width: 20%;
padding-left: 17.6px;
}

.header img {
width: 60%;
}


.header .navbar {
background-color: transparent;
}

.header .navbar ul {
font-weight: 600;
list-style: none;
font-family: 'Outfit', sans-serif;

}

.header .navbar ul li {
 color:#ffffff;
position: relative;
float: left;
font-family: 'Outfit', sans-serif;

}

.header .navbar ul li:hover ul {
display: block;
}


.header .navbar ul li a {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #f0f0f0;
  padding: 15px;
  display: block;
  font-family: 'Outfit', sans-serif;

}

.header .navbar ul li a:hover {
color: #B69574;
}

.header .navbar ul li ul {
position: absolute;
left: 0;
width: 20rem;
display: none;


}

.header .navbar ul li ul li {
width: 100%;
background-color: #1c1b19;
}
.header .navbar ul li ul li a{
width: 100%;
color:#ffffff;

}

.header .icons div,
.header .icons a {
font-size: 2.5rem;
color: #ffffff;
cursor: pointer;
margin-left: 2rem;
}

.header .icons div:hover,
.header .icons a:hover {
color: #697878;
}



.tentang .icons-container {}

#menu-btn {
display: none;
}

@-webkit-keyframes fadeIn {
0% {
  -webkit-transform: translateY(3rem);
  transform: translateY(3rem);
  opacity: 0;
}
}

@keyframes fadeIn {
0% {
  -webkit-transform: translateY(3rem);
  transform: translateY(3rem);
  opacity: 0;
}
}

/*= Home Picture =*/

.home .box .content .btn{
padding: 2px 10px;
}

.home {
padding: 0;
}

.home .box {
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
background-size: cover !important;
background-position: center !important;
-webkit-box-pack: end;
    -ms-flex-pack: end;
        justify-content: flex-end;
padding: 2rem 9%;
}

/*= Home Sesipotrait Start=*/

.home-sesipotrait {
  width: 100%;
  height: fit-content;
  margin: 60px 0px 0px 0px;
  padding: 0;
}
.boxhome-sesipotrait {
  height: 100vh;
  background: url(../images/Banner-SPTHOME.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.boxhome-sesipotrait img {
  width: 100%;
  height: 100vh;
  background-position: center;
}

.boxspt-pilihan {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;
  justify-content: center;

}

.boxspt-pilihan h1 {
  font-family: "Zain", sans-serif;
font-weight: 600;
font-style: normal;
font-size: 60px;
text-align: center;
text-transform: lowercase;
color: #ffffff;
display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  line-height: 50px;
  z-index: 2;
  text-shadow: 1px 2px 5px rgba(12, 11, 11, 0.2);
}

.isiboxspt-pilihanx {
  height: max-content;
  width: max-content;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 45px;
  
}

.isiboxspt-pilihanx a {
  font-family: 'Outfit', sans-serif;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.4px;
    font-size: 20px;
    line-height: 23px;
    color: #c1b6ae;
    text-align: left;
    width: 280px;
    height: 45px;
    padding: 0px 0px 0px 15px;
    background-color: #272727;
    border-radius: 50px;
    display: grid;
    grid-template-columns: 81% 12%;
    align-content: center;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 2px 10px rgba(12, 11, 11, 0.5);
    
    
}

.isiboxspt-pilihanx a i{
  font-size: 15px;
    background-color: #907b60;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    margin: 0px 0px 0px 0px;
    position: relative;
  
}

.isispt-pilihan {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin: 30px 0px 0px 0px;
  column-gap: 15px;
}


/*= Home Sesipotrait End=*/
/*= Sesiwedding Menu Start=*/

.mybody {
background-color: #272727;
}

/*start banner */
.banner-wedding {
  padding: 0;
  display: grid;
  grid-template-rows: 80% 20%;
  height: 100vh;
  }
.bagian-dua {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px 0px 0px 0px;
  padding: 0;
}
.container-profilswd {
display: flex;
height: fit-content;
background-color: #181715;
width: 97%;
border-radius: 15px;
padding: 30px 0px;
}
.containerx-profilswd {
  width: 15%;
  background-color: none;
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-items: flex-start;
}

.containerx-profilswd img{
  width: 90px;
  border-radius: 50%;
}
.containery-profilswd {
  width: 68%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.containeryz-profilswd {
  width: 17%;
}

.containeryz-box {
  color: #C1B6AE;
  text-align: left;
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0.5px;
  width: 100%;
  height: fit-content;
  display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;


}

.containeryz-box a {
  color: #272727;
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  line-height: 5px;
  letter-spacing: 0.5px;
  background-color: #907b60;
  width: 110px;
  height: 28px;
  padding: 3px;
  margin: 0px 10px 5px 10px;
  display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
cursor: pointer;
}

.containeryz-box a:hover {
  background-color: #c1b6ae;
}


.containeryz-box a span {
letter-spacing: 10px;
}
.containery-isisatu {
width: 100%;
height: 60px;
}

.containery-isidua {
  width: 100%;
  height: 60px;
  line-height: 25px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  color: #f0f0f0;
text-align: left;
font-weight: 200;
font-size: 14px;
letter-spacing: 0.5px;

  }
  
  .containery-isidua h1 {
    color: #f0f0f0;
  text-align: left;
  font-weight: 200;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5px;
  }

  .containery-isidua h2 {
    color: #f0f0f0;
  text-align: left;
  font-weight: 200;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5px;
  }

  .containery-isidua h3 {
    color: #f0f0f0;
  text-align: left;
  font-weight: 200;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5px;
  transfor
  }

  .containery-isiduaspt {
    width: 100%;
    height: 130px;
    line-height: 25px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    color: #f0f0f0;
  text-align: left;
  font-weight: 200;
  font-size: 14px;
  letter-spacing: 0.5px;
  
    }
    
    .containery-isiduaspt h1 {
      color: #f0f0f0;
    text-align: left;
    font-weight: 200;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.5px;
    }
  
    .containery-isiduaspt h2 {
      color: #f0f0f0;
    text-align: left;
    font-weight: 200;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.5px;
    }
  
    .containery-isiduaspt h3 {
      color: #f0f0f0;
    text-align: left;
    font-weight: 200;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.5px;
    margin: 7px 0px 0px 0px;
    text-transform: Normal;
    }

.containery-profilswd p{
  color: #f0f0f0;
  text-align: left;
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0.5px;
}
.containery-profilswd p span{
  font-weight: 200;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 1.5px;
}
.containery-profilswd a{
color: #f0f0f0;
text-align: left;
font-weight: 200;
font-size: 14px;
letter-spacing: 0.5px;
}
.containery-profilswd a span{
margin: 0px 4px;
font-size: 14px;
letter-spacing: 0.5px;
font-weight: 200;
  }

.containery-profilswd h1 {
  width: 100%;
}

.containery-profilswd p {
  width: 100%;
}
.containery-profilswd h3 {
  width: 100%;
}
.containery-profilswd h4 {
  width: 100%;
}

.containery-profilswd h3 {
display: flex;
align-items: flex-end;
text-transform: none;
}
.containery-profilswd h3 p {
  width: 110px;
  height: fit-content;
  padding: 5px 9px;
  font-size: 15px;
  font-weight: 300;
  color: #ffffff;
  background: #B69574;
  cursor: pointer;
  border-radius: .5rem;
  margin-right: 8px;
  display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.containery-profilswd h3 p a span{
margin: 0px 2px;
font-size: 12px;
font-weight: 200;
letter-spacing: 0px;

}

.containery-profilswd h3 p a i{
  font-size: 15px;
  }
  .banner-wedding .wedding-box {
    width: 100%;
    height: 100vh;
    position: absolute;

  display: -webkit-box;
  display: -ms-flexbox;
  display: grid;
  justify-content: center;
  grid-template-rows: 20% 70% 10%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-size: cover !important;
  background-position: center !important;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
      
  }

.bagian-box {
width: 100%;
z-index: 2;
display: grid;
grid-template-rows: 45% 45% 10%;
height: 100vh;
position: absolute;
}

.boxdua h1 {
  font-family: "Zain", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 80px;
  text-transform: lowercase;
  color: #ffffff;
  display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    line-height: 40px;
    z-index: 2;

}

.boxdua h1 span {
  font-family: "Zain", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 20px;
  text-transform: lowercase;
  color: #ffffff;
  letter-spacing: 7px;

}

.boxtiga h1 {
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  text-transform: lowercase;
  color: #ffffff;
  letter-spacing: 0.5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

}


  .banner-wedding .wedding-box2 {
    width: 100%;
    height: 440px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-size: cover !important;
  background-position: center !important;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  }

 .isi-wedding {
padding-left: 2%;
padding-right: 2%;
margin-bottom: 2%;
margin-top: 0%;
background-color: none;

 } 
    /*responsiv hp 450*/
    @media (max-width: 450px) {

      
    .banner-wedding .wedding-box {
    height: 500px;
    }

    .vignategradient-dua {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 500px;
      background: linear-gradient(to top, rgba(39, 39, 39, 1.0) 5%, rgba(39, 39, 39, 0.8) 40%,rgba(39, 39, 39, 0.5) 60%, rgba(39, 39, 39, 0.3) 90%);
      pointer-events: none;
    }

    .bagian-box {
      height: 500px;
    }

    .banner-wedding {
      height: 500px;
    }
    .containeryz-box {
      color: #f0f0f0;
      text-align: left;
      font-weight: 500;
      font-size: 20px;
      line-height: 20px;
      letter-spacing: 0.5px;
      width: 100%;
      height: fit-content;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-content: center;
  }

  .container-profilswd {
    display: flex;
    height: fit-content;
    background-color: #181715;
    width: 95%;
    border-radius: 15px;
    padding: 30px 10px;
    flex-direction: column;
    align-items: flex-start;
}
.containerx-profilswd img {
  width: 60px;
  border-radius: 50%;
  padding: 0;
  margin: 0;
}

.containerx-profilswd {
  width: 100%;
  background-color: none;
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  margin: 0px 0px 15px 0px;
}

.containery-isidua {
  width: 100%;
  height: 70px;
  line-height: 25px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  color: #f0f0f0;
  text-align: left;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.5px;
}


.containeryz-box a {
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  line-height: 5px;
  letter-spacing: 0.5px;
  width: 105px;
  height: 25px;
  padding: 6px 0px;
  margin: 0px 5px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.containeryz-profilswd {
  width: 100%;
  height: fit-content;
  margin: 15px 0px 0px 0px;
  display: flex;
  align-items: flex-end;
  align-content: flex-end;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.containery-profilswd {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-items: center;
  align-items: center;
  margin: 0px;
}

.containery-profilswd p {
  color: white;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  line-height: 14px;
  letter-spacing: 1.5px;
}

.containery-isidua h2 {
  color: #f0f0f0;
  text-align: left;
  font-weight: 200;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.5px;
  width: 300px;
}

.containery-isiduaspt h2 {
  color: #f0f0f0;
  text-align: left;
  font-weight: 200;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.5px;
  width: 300px;
}



.containery-isidua h1 {
  color: #f0f0f0;
  text-align: left;
  font-weight: 200;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.5px;
}

.containery-isiduaspt h1 {
  color: #f0f0f0;
  text-align: left;
  font-weight: 200;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.5px;
}

.containery-isiduaspt h3 {
  color: #f0f0f0;
  text-align: left;
  font-weight: 200;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.5px;
}

.containery-profilswd h3 {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  font-size: 12px;
}


.containery-profilswd p span {
  font-weight: 100;
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: 0.8px;
}

.boxdua h1 {
  font-family: "Zain", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 50px;
  text-transform: lowercase;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  line-height: 40px;
  z-index: 2;
}

.boxdua h1 span {
  font-family: "Zain", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  text-transform: lowercase;
  color: #ffffff;
  letter-spacing: 4px;
  line-height: 15px;
}

.boxtiga h1 {
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  text-transform: lowercase;
  color: #ffffff;
  letter-spacing: 0.5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}




    }

/*end banner*/

/*= Bagian Available Start =*/

.bagian-available {
width: 100%;
height: fit-content;
padding: 45px 20px 0px 20px;
margin: 0;
background-color: #272727;

}
.available-movie-slide {
width: 100%;
padding: 20px;
margin: 20px;
}

.availablemovie-item {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 20px 5px 10px 5px;
  background-color: none;
  border-radius: 5px;
  
}

.isikotak-available h3 {
  position: relative;
}


.availablemovie-item img {
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s linear;
}

.availablemovie-item .movie-item-title h3 {
  font-family: 'Outfit' , sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  color: #FFFFFF;
  
}

.availablemovie-item .movie-item-title h2 {
  font-family: 'Outfit' , sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 13px;
  line-height: 16px;
  color: #FFFFFF;
  
}

.availablemovie-item .movie-item-title p {
  font-family: 'Outfit' , sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 13px;
  padding-top: 20px;
  text-align: left;
  color: #FFFFFF;
  
}


.availablemovie-item.movie-info {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.availablemovie-item .movie-info span {
  margin-left: 5px;
}

.availablemovie-item .movie-info i {
  color: var(--main-color);
}

.availablemovie-item .movie-info ~ .movie-info {
  margin-left: 5px;
}

.availablemovie-item .item-content-description {
  font-size: 1.15rem;
  margin-top: var(--space-top);
  line-height: 1.5rem;
}

.availablemovie-item .movie-item-content {
  padding: 15px ;
  background-color: none;
}


.availablemovie-item .movie-item-title {
  color: #615f5e;
  font-size: 1.5rem;
  position: relative;
  font-weight: 700;
}

.availablemovie-item span {
color: white;
}


/*= Bagian Available End =*/

/*= Bagian Pricelist Start =*/

.bagian-pricelist {
  width: 100%;
  height: fit-content;
  padding: 30px 20px 0px 20px;
  margin: 0;
  background-color: #272727;
  
  }
  .pricelist-movie-slide {
  width: 100%;
  padding: 20px;
  margin: 20px;
  }
  
  .pricelistmovie-item {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin: 20px 5px 10px 5px;
    background-color: none;
    border-radius: 5px;
    
  }
  
  .isikotak-pricelist h3 {
    position: relative;
  }
  
  
  .pricelistmovie-item img {
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s linear;
  }
  
  .pricelistmovie-item .movie-item-title h3 {
    font-family: 'Outfit' , sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 23px;
    color: #FFFFFF;
    
  }
  
  .pricelistmovie-item .movie-item-title h2 {
    font-family: 'Outfit' , sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    
  }
  
  .pricelistmovie-item .movie-item-title p {
    font-family: 'Outfit' , sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    padding-top: 20px;
    text-align: left;
    color: #FFFFFF;
    
  }
  
  
  .pricelistmovie-item.movie-info {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
  }
  
  .pricelistmovie-item .movie-info span {
    margin-left: 5px;
  }
  
  .pricelistmovie-item .movie-info i {
    color: var(--main-color);
  }
  
  .pricelistmovie-item .movie-info ~ .movie-info {
    margin-left: 5px;
  }
  
  .pricelistmovie-item .item-content-description {
    font-size: 1.15rem;
    margin-top: var(--space-top);
    line-height: 1.5rem;
  }
  
  .pricelistmovie-item .movie-item-content {
    padding: 15px ;
    background-color: none;
  }
  
  
  .pricelistmovie-item .movie-item-title {
    color: #615f5e;
    font-size: 1.5rem;
    position: relative;
    font-weight: 700;
  }
  
  .pricelistmovie-item span {
  color: white;
  }




/*= Bagian Pricelist End =*/

/*= Bagian Pricelist Start =*/

.bagian-pricelistdua {
  width: 100%;
  height: fit-content;
  padding: 20px 20px 0px 20px;
  margin: 0;
  background-color: #272727;
  
  }
  .pricelistdua-movie-slide {
  width: 100%;
  padding: 20px;
  margin: 20px;
  }
  
  .pricelistduamovie-item {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin: 20px 5px 10px 5px;
    background-color: none;
    border-radius: 5px;
    
  }
  
  .isikotak-pricelistdua h3 {
    position: relative;
  }
  
  
  .pricelistduamovie-item img {
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s linear;
  }
  
  .pricelistduamovie-item .movie-item-title h3 {
    font-family: 'Outfit' , sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 23px;
    color: #FFFFFF;
    
  }
  
  .pricelistduamovie-item .movie-item-title h2 {
    font-family: 'Outfit' , sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    
  }
  
  .pricelistduamovie-item .movie-item-title p {
    font-family: 'Outfit' , sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    padding-top: 20px;
    text-align: left;
    color: #FFFFFF;
    
  }
  
  
  .pricelistduamovie-item.movie-info {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
  }
  
  .pricelistduamovie-item .movie-info span {
    margin-left: 5px;
  }
  
  .pricelistduamovie-item .movie-info i {
    color: var(--main-color);
  }
  
  .pricelistduamovie-item .movie-info ~ .movie-info {
    margin-left: 5px;
  }
  
  .pricelistduamovie-item .item-content-description {
    font-size: 1.15rem;
    margin-top: var(--space-top);
    line-height: 1.5rem;
  }
  
  .pricelistduamovie-item .movie-item-content {
    padding: 15px ;
    background-color: none;
  }
  
  
  .pricelistduamovie-item .movie-item-title {
    color: #615f5e;
    font-size: 1.5rem;
    position: relative;
    font-weight: 700;
  }
  
  .pricelistduamovie-item span {
  color: white;
  }




/*= Bagian Pricelist End =*/

/*= Bagian Pricelist Start =*/

.bagian-promo {
  width: 100%;
  height: fit-content;
  padding: 30px 20px 0px 20px;
  margin: 0;
  background-color: #272727;
  
  }
  .promo-movie-slide {
  width: 100%;
  padding: 20px;
  margin: 20px;
  }
  
  .promomovie-item {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin: 20px 5px 10px 5px;
    background-color: none;
    border-radius: 5px;
    
  }
  
  .isikotak-promo h3 {
    position: relative;
  }
  
  
  .promomovie-item img {
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s linear;
  }
  
  .promomovie-item .movie-item-title h3 {
    font-family: 'Outfit' , sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 23px;
    color: #FFFFFF;
    
  }
  
  .promomovie-item .movie-item-title h2 {
    font-family: 'Outfit' , sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    
  }
  
  .promomovie-item .movie-item-title p {
    font-family: 'Outfit' , sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    padding-top: 20px;
    text-align: left;
    color: #FFFFFF;
    
  }
  
  
  .promomovie-item.movie-info {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
  }
  
  .promomovie-item .movie-info span {
    margin-left: 5px;
  }
  
  .promomovie-item .movie-info i {
    color: var(--main-color);
  }
  
  .promomovie-item .movie-info ~ .movie-info {
    margin-left: 5px;
  }
  
  .promomovie-item .item-content-description {
    font-size: 1.15rem;
    margin-top: var(--space-top);
    line-height: 1.5rem;
  }
  
  .promomovie-item .movie-item-content {
    padding: 15px ;
    background-color: none;
  }
  
  
  .promomovie-item .movie-item-title {
    color: #615f5e;
    font-size: 1.5rem;
    position: relative;
    font-weight: 700;
  }
  
  .promomovie-item span {
  color: white;
  }




/*= Bagian Pricelist End =*/

/*= Bagian Gallery Start =*/

.bagian-gallery {
  padding: 30px 0px 0px 0px;
  background-color: #272727;
  }

  .vignategradient-gallery {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 480px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0.4) 30%,rgba(0, 0, 0, 0.2) 50%);
    pointer-events: none;
    position: relative;
  }


  
.bagian-gallery .banner-bagian-gallery {
  width: 100%;
  height: 480px;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: grid;
justify-content: center;
grid-template-rows: 20% 70% 10%;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
background-size: cover !important;
background-position: center !important;
-webkit-box-pack: end;
    -ms-flex-pack: end;
    
    
}

.bagian-boxgallery {
  width: 100%;
  z-index: 2;
  display: grid;
  justify-content: flex-start;
  justify-items: start;
  grid-template-rows: 20% 60% 20%;
  height: 450px;
  position: absolute;
  padding: 0px 60px;
  }
.boxdua-gallery {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
  .boxdua-gallery h1 {
    font-family: "Zain", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 80px;
    text-transform: lowercase;
    color: #ffffff;
    display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: flex-start;
      line-height: 60px;
      z-index: 2;
      width: 70%;
  
  }
  
  .boxdua-gallery h3 {
    font-family: 'Outfit' , sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 15px;
    text-transform: lowercase;
    color: #ffffff;
    letter-spacing: 0.3px;
    padding: 5px 0px 0px 0px;
    line-height: 20px;
    width: 65%;
  
  }
  .boxdua-gallery h2 {
    font-family: 'Outfit' , sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    text-transform: lowercase;
    color: #ffffff;
    letter-spacing: 0.3px;
    padding: 35px 0px 0px 0px;
    line-height: 20px;
    width: 65%;

  
  }

  .boxdua-gallery a {
    font-family: 'Outfit' , sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    text-transform: uppercase;
    color: #272727;
    letter-spacing: 0.3px;
    margin: 75px 0px 0px 0px;
    padding: 5px 15px 5px 15px;
    line-height: 20px;
    background-color: #907b60;
    height: fit-content;
    width: fit-content;
    border-radius: 5px;
    cursor: pointer;
  
  }

.boxdua-gallery a:hover {
  background-color: #c1b6ae;
}

  .boxtiga-gallery h1 {
    font-family: "Zain", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    text-transform: lowercase;
    color: #ffffff;
    letter-spacing: 0.5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  
  }



  
  

/*= Bagian Gallery End =*/

/*= Bagian Tentang Yang Lain Start =*/

.bagian-tentanglain {
  width: 100%;
  height: fit-content;
  padding: 30px 0px 70px 0px;
  margin: 0;
  background-color: #1c1b19;
  
  }

.judul-tentanglain {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  margin: 0px 5px 0px 5px;
  padding: 0;
font-family: 'Outfit', sans-serif ;
}

.judul-tentanglain p {

  color: #ffffff;
  margin: 0;
  padding: 0;
font-family: 'Outfit', sans-serif ;
font-weight: 150;
font-size: 12px;
line-height: 20px;
text-transform: none;


}


.judul-tentanglain i {
  margin-right: 7px;
  font-size: 13px;
  
}
.judul-tentanglain span {
  text-transform: uppercase;
  font-family: 'Outfit', sans-serif ;
font-size: 17px;
font-weight: 500;
line-height: 23px;
letter-spacing: 0.7px;
text-align: left;
text-transform: uppercase;
}

.another-kotak {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;


}

.another-kotakisi {
  background-color: #907b60;
  width: 230px;
  height: fit-content;
  margin: 25px 9px 0px 9px;
  padding: 20px 0px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
  text-align: center;
}



.another-kotakisi img {
  width: 70px;
  border-radius: 50%;
  padding: 2px;
  background-color: #272727;
  
}

.kotakluar-availableswd {
  width: 100%;
  height: fit-content;
  background-color: #907b60;
  margin: 20px 0px 15px 0px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  row-gap: 14px;
  column-gap: 14px;
  border-radius: 8px;
  align-content: center;
  justify-content: center;
  padding: 15px 0px 15px 0px;

}

.available-swd {
  background-color: #1c1b19;
  width: fit-content;
  height: fit-content;
  margin: 0px 0px 0px 0px;
  padding: 14px 7px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
  text-align: center;
}

.isiavailable-swdspt {
  width: 170px;
  height: 212.5px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  border-radius: 7px;
}
.isiavailable-swdspt a {
background-color: #907b60;
color: #272727;
width: fit-content;
height: fit-content;
margin: 0px 0px 10px 0px;
padding: 5px 20px;
font-family: 'Outfit', sans-serif;
font-weight: 400;
font-size: 14px;
border-radius: 4px;
box-shadow: 1px 2px 10px rgba(12, 11, 11, 0.582);
cursor: pointer;
}

.isigallery-baglima a:hover {
background-color: #c1b6ae;
}

.available-swd img {
  width: 170px;
  border-radius: 7px;
  
}

.isipricelist-vsr img {
  width: 300px;
  border-radius: 7px;
  
}



.pricelist-vsr {
  background-color: #1c1b19;
  width: 350px;
  height: max-content;
  margin: 0px 0px 0px 0px;
  padding: 14px 7px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
  text-align: center;
}

.text-isiplvsr {
  height: 220px;
  position: relative;
  width: 300px;
}
.isipricelist-vsr {
  width: max-content;
  height: max-content;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  border-radius: 7px;
}
.isipricelist-vsr a {
background-color: #907b60;
color: #272727;
width: fit-content;
height: fit-content;
margin: 0px 0px 10px 0px;
padding: 5px 20px;
font-family: 'Outfit', sans-serif;
font-weight: 400;
font-size: 14px;
border-radius: 4px;
box-shadow: 1px 2px 10px rgba(12, 11, 11, 0.582);
cursor: pointer;
}

.text-isiplvsr h1 {
  font-family: 'Outfit';
  color: #e9d9c7;
  font-size: 16px;
  font-weight: 600;
  line-height: 17px;
  text-transform: none;
  letter-spacing: 1.0px;
  text-align: center;
  margin: 13px 0px 0px 0px;
}

.text-isiplvsr h2 {
  font-family: 'Outfit';
  color: #e9d9c7;
  font-size: 13px;
  font-weight: 300;
  line-height: 17px;
  text-transform: none;
  letter-spacing: 0.5px;
  text-align: center;
}

.text-isiplvsr h3 {
  color: #e9d9c7;
  font-size: 13px;
  font-weight: 500;
  margin: 20px 0px 7px 0px;
  text-align: left;
}

.text-isiplvsr p {
  font-family: 'Outfit';
  color: #e9d9c7;
  font-size: 14px;
  font-weight: 200;
  text-align: left;
  line-height: 17px;
  text-transform: none;
  margin: 0px 0px 20px 0px;
}

.pricelist-vsr a {
  color: #272727;
  font-size: 13px;
  font-weight: 500;
  margin: 7px 0px 7px 0px;
  line-height: 17px;
  text-transform: none;
  background-color: #907b60;
  padding: 3px 10px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;

}

.pricelist-vsr a:hover {
  background-color: #c1b6ae;
}

.bagian-frame {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 15px;
  row-gap: 15px;
  background-color: #1c1b19;
  padding: 25px;
  border-radius: 7px;
  margin: 20px 0px;
}

.frame-option h1 {
  font-family: 'Outfit', sans-serif ;
  font-size: 14px;
  color: #272727;
  padding: 10px 0px 0px 0px;
  font-weight: 500;
}

.frame-option h2 {
  font-family: 'Outfit', sans-serif ;
  font-size: 12px;
  color: #272727;
  padding: 0px 0px;
  font-weight: 200;
}
.frame-option {
 width: 250px;
 height: max-content;
 background-color: #907b60;
 border-radius: 7px;
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 justify-content: center;
    align-items: center;
    padding: 18px 8px;
    margin: 25px 0px 15px 0px;

}

.frame-option img {
  width: 285px;
  border-radius: 7px;
}
.line-another {
  width: 20px;
  height: 1.5px;
  background-color: #272727;
  margin: 15px 0px 4px 0px;

}
.another-kotakisi h1 {
  color: #272727;
  margin: 0;
  padding: 25px 0px 0px 0px;
font-family: 'Outfit', sans-serif ;
font-weight: 800;
font-size: 13px;
line-height: 0px;
text-transform: none;
letter-spacing: 0.8px;
}

.another-kotakisi h1 span {
  color: #1c1b19;
  margin: 0;
  padding: 25px 0px 0px 0px;
font-family: 'Outfit', sans-serif ;
font-weight: 200;
font-size: 13px;
line-height: 25px;
text-transform: none;
letter-spacing: 1.7px;
}

.another-kotakisi h2 {
  color: #1c1b19;
  margin: 0;
  padding: 0;
font-family: 'Outfit', sans-serif ;
font-weight: 200;
font-size: 12px;
line-height: 15px;
text-transform: none;
letter-spacing: 0.8px;
text-align: center;
}

.another-kotakisi a {
  width: fit-content;
  height: fit-content;
  color: #C1B6AE;
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  padding: 5px 10px;
font-family: 'Outfit', sans-serif ;
font-weight: 500;
font-size: 12px;
line-height: 15px;
text-transform: none;
letter-spacing: 0.8px;
text-align: center;
background-color: #272727;
border-radius: 7px;
}

.another-kotakisi a:hover {
  background-color: #404040;
}


/*= Bagian Tentang Yang Lain End =*/

.lihat-selengkapnya {
width: 100%;
height: fit-content;
display: flex;
justify-content: center;

}
.lihat-selengkapnya a:hover {
  color: #907b60;
}

.lihat-selengkapnya a {
  width: fit-content;
  height: fit-content;
  color: #f0f0f0;
  cursor: pointer;
  margin: 5px 0px 5px 0px;
  padding: 0px 5px;
  font-weight: 500;
  font-size: 13px;
  line-height: 15px;
  text-transform: none;
  letter-spacing: 0.8px;
  text-align: center;
  border-radius: 5px;
}

/*= Bagian Footer Start =*/


.footer {
  background-color: #907b60;
  padding: 10px 20px 0px 20px;
  }
  
  .footer .box-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  gap: 1.5rem;
  }
  
  
  .footer .box-container .box h3 {
  font-size: 15px;
  color: #20201a;
  padding: 1rem 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  }
  
  .footer .box-container .box a {
  display: block;
  font-size: 13px;
  color: #20201a;
  padding: 4px 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  }
  
  .footer .box-container .box h1 {
    display: block;
    font-size: 13px;
    text-transform: none;
    color: #20201a;
    padding: 4px 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 200;
    }
  
    .footer .box-container .box h2 {
      display: block;
      font-size: 13px;
      text-transform: none;
      color: #c1b6ae;
      padding: 2px 20px;
      font-family: 'Outfit', sans-serif;
      font-weight: 400;
      background-color: #20201a;
      width: fit-content;
      height: fit-content;
      border-radius: 5px;
      margin: 10px 0px;
      cursor: pointer;
      }
  
  .footer .box-container .box a:hover {
  color: #c1b6ae;
  }
  
  .footer .box-container .box a:hover i {
  padding-right: 2rem;
  
  }
  
  .footer .box-container .box a i {
  color: #20201a;
  padding-right: .5rem;
  }
  
  .footer .box-container .box p {
  font-size: 1.5rem;
  color: #c1b6ae;
  margin-bottom: 1rem;
  }
  
  
  .footer .credit {
  text-align: center;
  padding: 20px 10px;
  margin: 5px;
  font-size: 15px;
  color: #20201a;
  border-top: 0.2rem solid #20201a;
  text-transform: lowercase;
  }
  
  .footer .credit span {
  color: #20201a;
  text-transform: lowercase;
  }
  
  .footer .credit span a {
    color: #20201a;
    }

/*= Bagian Footer End =*/
.dasar-profil{
height: 201.78px;
width: 100%;
background-color: red;
display: grid;
}
 
.isi-profil {
  height: 201.78px;
  display: grid;
  grid-template-columns: 20% 80%;
  margin-bottom: 2%;
  }
.isi-profil .logo-profil{
  background-color:none;
  }

  .isi-profil .logo-profil img {
  align-content: center;
  border-radius: 100%;
  padding: 15%;
    }
  .isi-profil .dek-profil{
    background-color: none ;
    font-family: 'Outfit', sans-serif;
    }


.dek-profil {
display: grid;
align-content: space-evenly;
justify-items: start;
padding-top: 2%;
padding-bottom: 2%;
line-height: 14px;
color: #ffffff;

}
.dek-profil h5 {
font-weight: 500;
font-size: 25px;
padding-bottom: 1%;
}

.dek-profil h5 span {
  font-weight: 300;
  font-size: 20px;
  padding-bottom: 0px;
  }

  .dek-profil .lokasi {
    font-weight: 300;
    font-size: 18px;
    padding-top: 15px;
    line-height: 25px;
    }

.logo-alamat .gambarlogo img {
width: 15.6%;
border-radius: 0px;
}


.dek-profil .alamat {
margin-left: 30px;
height: 200px;
display: flex;
align-items: center;
flex-wrap: wrap;  
margin-left: 5%;
margin-right: 5%;
padding-bottom: 2%;
grid-gap: 20px;
align-items: center;
}

.dek-profil .alamat h2{

  width: 224px;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  /* identical to box height */
  color: #FFFFFF;
}

.dek-profil .alamat h3 {
  /* wedding planner & organizer */
width: 255px;
font-family: 'Outfit', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 18px;
color: #FFFFFF;
}

.dek-profilt .alamat .lokasi {
  display: grid;
}

.dek-profil .alamat .lokasi .j {
  list-style: none;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.dek-profil .alamat .lokasi i {
  width: 12px;
  height: 20px;
  background: transparent;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

.dek-profil .alamat .lokasi span {
width: 493px;
height: 23px;
font-family: 'Outfit', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 15px;
line-height: 23px;
/* identical to box height */
color: #FFFFFF;
}

.dek-profil .tombol .klik {
  font-size: 15px;
  font-weight: 300;
  display: inline-block;
  padding: 7px 17px ;
  color: #ffffff;
  background: #B69574;
  cursor: pointer;
  margin-top: 10px;
  border-radius: .5rem;
  margin-right: 5px;
}

.dek-profil .tombol .klik a {
  font-size: 15px;
  font-weight: 300;
  color: #ffffff;

}
.dek-profil .tombol .klik:hover {
  color: white;
  background-color: #9b7958;
  transition: all ease 0.3s;  
}

.dek-profil .tombol .klik i {
 margin-right: 5px;
}

.profilbanner-short {
  height: 55px;
  background-color: none;
  display: grid;
  align-items: center;
  justify-items: center;
  margin-bottom: 20px;
  }
.profilbanner-short h1 {
height: 55px;
background: url(../images/banner-profilswd2.jpg);
width: 92%;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}

.profilbanner-short h1 a img {
width: 100%;
}
.profilbanner-short h1 p img {
  width: 100%;
  }
.h {
  width: 90%;
  height: 55px;
  background: #B69574;
  border-radius: 8px;
  border: 0 none;
  display: flex;
  justify-items: center;
align-items: center;
margin-bottom: 50px;
margin-top: 0px;
}

/* TEXT BOX HOME/VENUE */


.inbox-homevenue {
  height: fit-content;
  font-family: 'Outfit', sans-serif;
  width: 100%;
  background-image: url(../images/banner-sesiwedding3.jpg);
  text-transform: none;
  font-size: 30px;
  text-align: left;
  padding-top: 20px;
  padding-bottom: 35px;
  }

  .inbox-homevenue h1 {
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  text-transform: none;
  font-weight: lighter;
  font-size: 20px;
  text-align: left;
  margin-left: 35px;
  padding-top: 0px;
  }
  .inbox-homevenue h2 {
    display: flex;
    color: #ffffff;
    margin-top: 20px;
  }
  .inbox-homevenue h2 a{
    font-size: 20px;
    font-weight: 100;
    background-color: #B69574;
    width: fit-content;
    margin-top: 30px;
    margin-left: 35px;
    padding: 5px 30px;
    border-radius: 6px;
    letter-spacing: 5px;
  }

  .inbox-homevenue a {
  color: #ffffff;
  text-transform: none;
  font-weight: 400;
  font-size: 30px;
  text-align: left;
  }

.box-homevenue .boxhome-text {
padding-bottom: 2%;
padding-left: 3%;
padding-right: 3%;
}

.boxhome-text h1 {
font-weight: 400;
font-size: 30px;
color: #ffffff;
text-align: left;
text-transform: none;
}

.boxhomevenue-buttonklik {
height: 45px;
width: 180px;
display: inline-block;
background-color: #272727;
margin-top: 3%;
margin-right: 2%;
border-radius: 10px;
}

.boxhomevenue-buttonklik h1 {
text-align: center;
font-size: 25px;
padding: 3%;
  }

.home .box.second {
-webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
}

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200&display=swap');
.home .box .content {
  width: 100%;
-webkit-box-pack: start;
-ms-flex-pack: start;
    justify-content: flex-start;
    line-height: 30px;
}

.tulisan-selengkapnya p a{
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: #ffffff;
  margin: 10px 0px;
}
.tulisan-selengkapnya p {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: #ffffff;
  margin: 10px 0px;
}
.home .box .content h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #fff;

  text-transform: lowercase;
  padding-bottom: 10px;
  }

.home .box .content h5 {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: none;
  padding-bottom: 10px;
  margin-top: -10px;
  }
  .home .box .content h5 span {
    text-align: center;
    font-family: 'Outfit', sans-serif;
    line-height: 2px;
    color: #ffffff;
    font-size: 50px;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 4px;
    }
    
.home .box .content a {
margin-top: 20px;
}


.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 3rem;
color: #10221b;
}

.boxbysesi {
  width: 100%;
  height: 400px;
  background-color: white;
  align-items: center;
  }
  
  .boxbysesigrid {
  padding: 5%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 20px;
  align-items: center;
  justify-content: center;
  background-color: #B69574;
  }


  .boxbysesigrid2 {
    padding: 5%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 20px;
    align-items: center;
    justify-content: center;
    background-color: #1C1B19;
    }
  
  .partnershipsesi .boxbysesigrid {
    padding: 5%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 30px;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    }

.singlebox-sesigrid {
background-color: #272727;
width: 100%;

;
}

.partnershipsesi .singlebox-sesigrid {
  background-color: transparent;
  width: 100%;
  ;
  }

.singlebox-sesigrid .bysesikonten h2 {
font-family: 'Outfit', sans-serif;
font-weight: normal;
letter-spacing: 2px;
font-size: 16px;
text-align: center;
color: white;
margin-top: 4%;
}

.singlebox-sesigrid .bysesikonten P {
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  text-transform: lowercase;
  font-size: 12px;
  text-align: center;
  color: white;
  margin-top: 2%;
  margin-bottom: 6%;
  padding-left: 12%;
  padding-right: 12%;
  }




.tentang {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 50px;
padding: 50px;
}

.video-container {
flex: 1 1 42rem;

video {
  border-radius: 1rem;
  width: 100%;
}
}



.tentang .video-container {
-webkit-box-flex: 1;
-ms-flex: 1 1 42rem;
flex: 1 1 42rem;
}

.tentang .video-container video {
border-radius: 1rem;
width: 100%;
height: 100%;
}

.tentang .video-container .controls {
text-align: center;
padding: 2rem 0;
}


.tentang .video-container .controls span {
display: inline-block;
height: 2rem;
width: 2rem;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
margin:  2px;
padding:  1px;
}

.tentang .video-container .controls span:hover {
background: #414e4e;
}


/*--why c us--*/

.tentang .content {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 42rem;
  flex: 1 1 42rem;
  text-align: justify;
  overflow-x: hidden;
  }
  
.tentang .content span {
color: #ffffff;
font-weight: 400;
font-size: 23px;
text-transform: lowercase;
}


.tentang .content h4 {
padding: 1rem 0;
font-size: 20px;
color: #ffffff;
line-height: 19pt;
text-transform: lowercase;
font-weight: 200;
text-align: justify;

}

.tentang .content h4 span {
  padding: 1rem 0;
  font-size: 20px;
  line-height: 30pt;
  font-weight: 400;

  
  }

.services .box-container {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(32rem, 1fr))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
gap: 1.5rem;
}

.services .heading span {
  font-family: 'Outfit', sans-serif;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 4pt;
  font-style: inherit;
  color: #ffffff;
  letter-spacing: 9px;
}

.services .indexheading span {
font-family: 'Outfit', sans-serif;
font-size: 25px;
font-style: inherit;
color: #ffffff;
letter-spacing: 9px;
}


.services .indexheading h1 {
font-family: 'Outfit', sans-serif;
font-weight: normal;
color: #ffffff;
font-size: 20px;
padding: 18px 15px 0;
text-transform: lowercase;


}


.services .box-container .box {
background: #494e54;
border-radius: 30px;
padding: 3rem;
text-align: center;
}

.services .box-container .box::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 0.2rem solid #ffffff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: .3s;
border-radius: 32px;
}

.services .box-container .box:hover:before {
opacity: 1;
}


.services .box-container .box h3 {
font-size: 18px;
color: #ffffff;
font-family: 'Lato';
}

.services .box-container .box p {
padding: 1rem 0;
font-size: 1.4rem;
font-weight: 200;
color: #ffffff;
line-height: 2;
font-family: 'Lato';
}

.services .box-container {
padding-bottom: 30px;
}


.tentang .icons-container {
display: -ms-grid;
display: grid;
flex-wrap: wrap;
-ms-grid-columns: (minmax(16rem, 1fr))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.5rem;
margin-top: 2.5rem;
}

.tentang .icons-container .icons {
padding: 3rem 2rem;
border-radius: .5rem;
border: 0.2rem solid #333;
text-align: center;
cursor: pointer;
}

.tentang .icons-container .icons:hover {
background: #333;
}

.services .box-container .icons:hover img {
-webkit-filter: invert(1);
filter: invert(1);
}

.tentang .icons-container .icons:hover h3 {
color: #fff;
}

.services .box-container .icons img {
height: 7rem;
margin-bottom: 1rem;
}

.tentang .icons-container .icons h3 {
font-size: 1.7rem;
color: #333;
}

.contact .row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 2rem;
margin-top: 0 cm;
}


.contact .row form {
-webkit-box-flex: 1;
-ms-flex: 1 1 42rem;
flex: 1 1 42rem;
padding: 2rem;
border-radius: .5rem;
border: 0.2rem solid #333;
}

.contact .row form .box,
.contact .row form textarea {
width: 100%;
border-bottom: 0.2rem solid #333;
margin-bottom: 1rem;
padding: 15 0;
font-size: 1.6rem;
color: #666;
text-transform: none;
}

.contact .row form textarea {
height: 15rem;
resize: none;
}

.contact .row .map {
-webkit-box-flex: 1;
-ms-flex: 1 1 42rem;
flex: 1 1 42rem;
border-radius: .5rem;
width: 100%;
}


  
  .partnershipbox {
  padding: 5%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-items: center;
  justify-content: center;
  background-color: transparent;
  }

.partnershipbox-grid {
background-color: transparent;
width: 80%;
}

.singlebox-sesigrid .bysesikonten h2 {
font-family: 'Outfit', sans-serif;
font-weight: normal;
letter-spacing: 2px;
font-size: 16px;
text-align: center;
color: white;
margin-top: 4%;
}

.singlebox-sesigrid .bysesikonten P {
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  text-transform: lowercase;
  font-size: 12px;
  text-align: center;
  color: white;
  margin-top: 2%;
  margin-bottom: 6%;
  padding-left: 12%;
  padding-right: 12%;
  }








.navbar ul ul li {
background-color: #272121;
}

.header .navbar {
background-color: transparent;
font-family: 'Oswald', sans-serif;
}

.header .navbar  {
background-color: transparent;
}







.home .slide .content h3 {
font-size: 4rem;
}

.shopping-cart .box-container .box {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
}

/*# sourceMappingURL=style.css.map */

.gallery .container{
max-width: 1170px;
margin:auto;
margin-top: 20px;
}
.row{
display: flex;
flex-wrap: wrap;
}
.gallery-item-inner img{
width: 100%;
vertical-align: middle;

}
/*.gallery*/
.gallery{
width: 100%;
display: block;
min-height: 100vh;
background-color: none;
padding: 50px;
margin-top: -20px;
}

.gallery h1 {
font-size: 20px;
padding: 0 3rem;
}
.container h1{
margin-top: 4px;
  font-weight: normal;
      color: #f6e9e9 ;
  font-size: 50px;
  position: relative;
  margin: 40px 0;
  text-align: center;
}

.container h1::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #f6e9e9;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%);
  animation: animate 4s linear infinite;
}
@keyframes animate {
  0%{
      width: 100px;
  }
  30%{
      width: 200px;
  }
  100%{
      width: 100%;
  }
}

.gallery .gallery-filter{
padding: 0 15px;
width: 100%;
text-align: center;
margin-bottom: 10px;
}

.gallery .gallery-filter .filter-item{
font-family: 'Outfit', sans-serif;
color: #ffffff;
font-size: 20px;
padding: 8px 30px 8px 30px;
border-radius: 5px;
text-transform: uppercase;
display: inline-block;
text-align: center;
margin: 2px;
cursor: pointer;
transition: all 0.3s ease;
background-color: #c5a37e;
margin-bottom: 10px;
}
.gallery .gallery-filter .filter-item.active{
color: white;
background-color: #997149;
}


.gallery .gallery-item-inner img{
width: 100%;
border-radius: 10px;

}
.gallery .gallery-item.show{
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn{
0%{
  opacity: 0;
}
100%{
  opacity: 1;
}
}
.gallery .gallery-item.hide{
display: none;
}

/*start kodingbaru*/



.bannervprofil {
width: 100%;
height: 500px;
background-image: url(../images/25BANNER-SVL.jpg);
position: relative;
background-size: cover;
background-position-x: center;
background-position-y: center;
display: grid ;
align-content: center;
padding: 0px;

}

.vignategradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, rgba(39, 39, 39, 0) 0%, rgba(39, 39, 39, 0.7) 70%, rgba(39, 39, 39, 0.9) 100%);
  pointer-events: none;
}

.vignategradient-dua {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to top, rgba(39, 39, 39, 1.0) 5%, rgba(39, 39, 39, 0.8) 40%,rgba(39, 39, 39, 0.5) 60%, rgba(39, 39, 39, 0.3) 90%);
  pointer-events: none;
}

.kotakvprofil {
height: 350px;
display: flex;
justify-content: center;
align-items: center;

}

.kotakvbprofil {
  height: 150px;
  z-index: 2;
  display: grid ;
  align-content: center;
  grid-template-columns: 15% 70% 15%;
}
  .isikotakvprofil {
    height: 120px;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    }

  .isikotakvbprofil h1 {
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 25px;
    font-weight: bold;
    line-height: 20px;
    letter-spacing: 9px;
  }

  .isikotakvbprofil h1 span {
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 1px;
   
  }
  .isikotakvbprofil p {
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 150;
    line-height: 15px;
    letter-spacing: 0.5px;
  }

  .isikotakvbprofil a {
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 100;
    line-height: 5px;
    letter-spacing: 0.5px;
  }
    .logoisikotakprofil {
      height: 80px;
      width: 80px;
      background-image: url(../images/logo-sesivisual.jpg);
      background-size: cover;
      border-radius: 50%;
      display: flex;
    }
  
    .isikotakvbprofil {
      height: 120px;
   
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: flex-start;
    
      }

      .isikotakvcprofil {
        height: 120px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;
  
        }
        .isikotakvcprofil a {
          color: #ffffff;
          font-family: 'Outfit', sans-serif;
          font-size: 15px;
          font-weight: 600;
          line-height: 5px;
          letter-spacing: 0.5px; 
        

        }

        .isikotakvcprofil a span {
          color: #ffffff;
          font-family: 'Outfit', sans-serif;
          font-size: 15px;
          font-weight: 600;
          line-height: 5px;
          letter-spacing: 0.5px; 
          margin: 5px;
        

        }

/*end kodingbaru*/

/*responsive*/






.shadow {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
display: none;
background: rgba(0, 0, 0, 0.45);
}


.gallery .gallery-item {
padding: 7px;
width: calc(100% / 3) ;

}





form .formU {
width: 100%;

}

form .title {
font-size: 25px;
font-weight: 500;
position: relative;
}

form .title::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
border-radius: 5px;
background: linear-gradient(135deg, #e4d444, #e16428);
}

h2 {
text-align: left;
color: #e16428 solid;
}

p {
font-size: 12px;
text-align: center;
color: red;
}

form {
max-width: 700px;
width: 100%;
padding: 25px 30px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
margin: 4% auto;
}


.hero .details {
 color: #414e4e;
 width: 100%;
 padding: 10px 0;
 margin: 10px 0;
 outline: none;
 background: transparent;
 
}
.details {
display: block;
margin-bottom: 5px;
font-size: 15px;
/*nama lengkap dkk*/
}

.details i {
color: #999;
font-size: 80%;
}

form .user-details {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}

form .user-details .input-box {
margin-bottom: 15px;
width: calc(100% / 2 - 20px);
}

input,
select {
border: 1px solid #ccc;
padding: 15px;
font-size: 15px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 5px;
background-color: #fdfdfd4a;
}

.input-box {
padding-bottom: 10px;
}

input[type=text] {
outline: none;
}

input[type="submit"] {
font-family: 'Outfit', sans-serif;
font-size: 18px;
font-weight: 200;
background: #c5a37e;
border-color: #fff;
color: #fff;
margin-top: 10px;
cursor: pointer;
}

input[type="submit"]:hover {
background: #1c1b19;
border-color: #1c1b19;
}

.input-1 {
background-image: url(../images/check.png);
background-repeat: no-repeat;
background-position: right 10px center;
border: 1px solid #01cc40;
}

.input-2 {
background-image: url(../images/cancel.png);
background-repeat: no-repeat;
background-position: right 10px center;
border: 1px solid red;
}

.input-3 {
border: 1px solid #01cc40 !important;
}

select {
outline: none !important;
}

.input-4 {
border: 1px solid red;
}





* {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

a {
text-decoration: none;
font-size: 18px;
}

.box2 {
width: 300px;
/* height: auto; */
box-shadow: 2px 2px 20px rgba(12, 11, 11, 0.582);
border-radius: 10px;
overflow: hidden;
background-color: white;
/* position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%); */
margin: 25px;
}

.slide-img {
height: 450px;
position: relative;
}

.slide-img img {
width: 100%;
height: 100%;
object-fit: cover;
box-sizing: border-box;
}

.detail-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
box-sizing: border-box;
}

.type {
display: flex;
flex-direction: column;
}

.type a {
color: #222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;

}


.type span {
color: rgba(26, 26, 26, 0.5);
font-size: 12px;
}

.price {
color: #333333;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.5px;
font-size: 18px;
}

.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgba(56, 119, 145, 0.6);
display: flex;
justify-content: center;
align-items: center;
}

.buy-btn {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: whitesmoke;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, .2);
}

.buy-btn:hover {
color: white;
background-color: palevioletred;
transition: all ease 0.3s;
}

.overlay {
visibility: hidden;
}

.slide-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}

@keyframes fade {
0% {
  opacity: 0;
}

100% {
  opacity: 1;
}
}

/* Default Whatsapp Form CSS by www.idblanter.com */


.hero {
height: 100%;
width: 100%;
padding-top: 0px;
background-position: center;
position: relative;
}


.form-box {
width: 680px;
height: 580px;
position: relative;
margin-top: -70px;
margin-left: auto;
margin-right: auto;
background: whitesmoke;
padding: 6% auto;
overflow: hidden;
background-color: transparent;

}

.button-box {
padding: 30px 10px;
width: 100%;
text-align: center;
margin-bottom: 10px;
background-color: transparent;
}

.button-box :hover {
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
transition: .3s;
background-color: rgb(227, 227, 227);
}


.hero .button-box .toggle-btn {
color: #414e4e;
font-size: 20px;
padding: 8px 30px 8px 30px;
border-radius: 5px;
text-transform: uppercase;
display: inline-block;
text-align: center;
margin: 2px;
cursor: pointer;
transition: all 0.3s ease;
}


.hero .button-box .toggle-btn.active {
color: white;
border-color:#1d2424;
background-color: #414e4e;
}


.input-group {
top: 80px;
background-color: #fff;
position: absolute;
width: 100%;
transition: .5s;
border-radius: 10px;

}

.input-field {
width: 100%;
color: #414e4e;
margin: 10px 0;
border-left: 0;
border-top: 0;
border-right: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}

.hero .form-box .submit-btn{
width: 50%;
padding: 10px 30px;
cursor: pointer;
display: flex;
margin: 20px auto;
background-color: #c5a37e;
color: #ffffff
}
.hero .form-box .submit-btn:hover {
box-shadow: 0 0 0px rgba(0, 0, 0, .3);
transition: .2s;
background-color: #363333;
}

#kebaya {
left: 0%;
}

#sesi {
left: 120%;
}



/*responsive*/




.hero .button-box .toggle-btn {
  font-size: 20px;
  padding: 8px 30px 8px 30px;
  border-radius: 10px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  margin: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #333333;
  
}





.submit-btn {
  width: 50%;
  padding: 10px 8px;
  cursor: pointer;
  display: block;
  margin: auto;
  background-color: #5f1a1a;
  color: white;
  text-align: center;
  justify-content: center;
}

.blogs {
margin: 30px 0px;
}

.blogs .slide {
  text-align: center;
  padding: 3rem;
  padding-top: 10rem;
  margin-bottom: 20px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  background-color: #B69574;
}

.blogs h1 {
  color: white;
  font-size: 25px;
}
.blogs .slide img {
  width: 90%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}

.blogs .slide .icons {
  background: #10221b;
  border-radius: .5rem;
  padding: 1rem;
  position: relative;
  top: -2rem;
  display: inline-block;
}

.blogs .slide .icons a {
  font-size: 1.4rem;
  color: #fff;
  margin: 0 1rem;
}

.blogs .slide .icons a:hover {
  color: #219150;
}

.blogs .slide .icons a i {
  padding-right: .5rem;
  color: #219150;
}

.blogs .slide h3 {
  font-size: 2rem;
  color: #fff;
}

.blogs .slide p {
  font-size: 1.4rem;
  padding: 1rem 0;
  line-height: 2;
  color: #f6e9e9;
}

.blogs .slide a {
  margin-top: 2rem;
  display: inline-block;
  padding:1rem 3rem;
  font-size: 2rem;
  color:#ffffff;
  border:0.1rem solid #272727 ;
  background-color: #272727;
  border-radius: 5rem;
  cursor: pointer;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
  .blogs .slide a:hover{
      background-color: #1C1B19;
      color: #fff;
}










.img-area {
  background-color: #1c1b19 ;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px;
  padding-bottom: 50px;
}

.wrapper {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 25px;
  width: 100%;
}
.single-box {
  position: relative;

}
.single-box a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}
.single-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s;
  user-select: none;
}

.single-box a:hover img {
  transform: scale(1.1);
}





.reviews .reviews-slider .box{
  border:.1rem solid rgba(255, 255, 255, 0.898);
  padding:2rem;
  text-align: center;
  margin:2rem 0;
  background-color: #ffffff;
}

.reviews .reviews-slider .box:hover{
  border:.1rem solid white;

}

.reviews .reviews-slider .box img{
  height:7rem;
  width:7rem;
  border-radius: 50%;
  object-fit: cover;
}

.reviews .reviews-slider .box h3{
  color:#1d2424;
  font-size: 2.2rem;
  padding:.5rem 0;
}

.reviews .reviews-slider .box p{
  color:#1d2424;
  font-size: 1.4rem;
  padding:1rem 0;
  text-transform: none;
  line-height: 2;
  
}

.reviews .reviews-slider .box .stars{
  padding-top: .5rem;
}

.reviews .reviews-slider .box .stars i{
  font-size: 1.7rem;
  color:#c22727;
}

.reviews h1 {
color: #1d2424;
}

.reviews .heading{
text-align: center;
margin-bottom: 2rem;
position: relative;
}

.reviews .heading::before{
content: '';
position: absolute;
top:50%; left:0;
transform: translateY(-50%);
width: 100%;
height:.01rem;
background: #f6e9e9;
z-index: -1;
}


.homebanner {
  height: 800px;
  background:url(../images/homebanner\ image\ -\ 1.jpg) ;
  padding: 6rem 2rem;
  text-align: left;
  text-transform: none;
  padding-left: 10%;
  text-shadow: 1px 1px 10px none;
  }
  
  .homebanner .content h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14pt;
    line-height: normal;
    letter-spacing: 1pt;
    text-transform: uppercase ;
    color: white;
    }
  
  
  .homebanner .content h1 span {
  font-family: 'Outfit', sans-serif;
  font-weight: normal;
  font-size: 17pt;
  line-height: normal;
  letter-spacing: 4pt;
  text-transform: uppercase ;
  color: white;
  }
  
  
  .homebanner .content h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: normal;
  font-size: 60pt;
  line-height: normal;
  color: #fff;
  margin-bottom: 3%;
  text-transform: none;
  text-align: left;
  padding-top: 20%;
  }


  .homebanner2 {
    background:url(../images/homebanner2\ img.jpg) no-repeat;
    background-size: cover;
    background-position-y: -40px;

    padding: 4rem 2rem;
    text-align: center;
    text-transform: none;
    margin-bottom: 50px;
    margin-top: 20px;
    }

      .homebanner2 .content h2 {
      font-family: 'Outfit', sans-serif;
      font-weight: normal;
      letter-spacing: 3pt;
      font-size: 20px;
      align-items: center;
      text-align: center;
      color: #fff;
      text-transform: uppercase;
      margin-top: 1rem;
      font-family: 'Lato';
      margin-bottom: 10px;
      }



.swiper-slide{
text-align: center;
}


.destination {
background-color: none;
}

.destination .box-container {
padding-top: 50px;

padding-bottom: 50px;
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(27rem, 1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
gap: 1.5rem;
}

.destination .box-container .box {
border-radius: 1rem;
overflow: hidden;
background: #ffffff;
}

.destination .box-container .box:hover img {
-webkit-transform: scale(1.1);
        transform: scale(1.1);
}

.destination .box-container .box .image {
height: 20rem;
overflow: hidden;
width: 100%;
}

.destination .box-container .box .image img {
height: 100%;
width: 100%;
-o-object-fit: cover;
   object-fit: cover;
}

.destination .box-container .box .content {
padding: 2rem;
text-align: center;
}

.destination .box-container .box .content h3 {
font-size: 2rem;
color:#1a1e22;
}

.destination .box-container .box .content p {
padding: 1rem 0;
font-size: 1.4rem;
color:#1a1e22;
line-height: 2;
}

.destination .box-container .box .content a {
font-size: 1.7rem bold;
color:#1a1e22;

}

.destination .box-container .box .content a:hover {
color: #df703d;
}

.destination .box-container .box .content a:hover i {
padding-left: 1rem;
color: #df703d;
}

.destination .box-container .box .content a i {
padding-right: .5rem;

}

.destination2 .title h2{
   text-align: center;
  color: #ffffff;
}
.destination-content{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(340px, auto));
   grid-gap: 2rem;
   align-items: center;
   margin-top: 5rem;
}
.col-content{
   position: relative;
}
.col-content img{
   width: 100%;
   height: 500px;
   object-fit: cover;
   border-radius: 15px;
   filter: brightness(75%);
   transition: all .3s cubic-bezier(.495,.05,.55,.95);
   will-change: filter;
}
.col-content h5{
   position: absolute;
   font-size: 22px;
   font-weight: 500;
   color: #ffffff;
   left: 15px;
   bottom: 60px;
}
.col-content p{
   position: absolute;
   font-size: 15px;
   color: #ffffff;
   left: 15px;
   bottom: 30px;
   letter-spacing: 2px;
}
.col-content img:hover{
   filter: brightness(100%) ;
   transform: scale(1.04);
   cursor: pointer;
}



input[type=text], textarea {
 width: 100%;
 padding: 12px;
 border-bottom: 1px solid #ccc;
 border-radius: 4px;
 box-sizing: border-box;
 resize: vertical;
}

/* Style the label to display next to the inputs */
.containers label {
 padding: 12px 12px 12px 0;
 display: inline-block;
}

/* Style the submit button */
.containers .rowe .button {
 background-color: #414e4e;
color: white;
 padding: 12px 20px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 float: right;
}

 .containers .rowe .button:hover {
 background: #2d2b2a;
 }
/* Style the container */
.containers {
 border-radius: 5px;
 background-color: #1c1b19;
 padding: 20px;
}


/* Floating column for inputs: 75% width */
.containers .col-100 {
 float: left;
 width: 100%;
 margin-top: 6px;
}

/* Clear floats after the columns */
.containers .rowe:after {
 content: "";
 display: table;
 clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */


.containers .rowe p {
 text-align: left;
 font-size: 15px;
 color: #615f5e;
 left: 15px;
 bottom: 30px;
 padding-bottom: 5px;
 padding-top: 7px;
}

.containers .rowe .radio{
 display: inline-block;
 float: left;
}
.containers .rowe .checkbox {
 margin-right: 0.5rem;
 min-height: 1.2rem;
 min-width: 1.2rem;
 padding: 30px;

}


input[type="checkbox"] {
cursor: pointer;
opacity: 0;
position:absolute;
}
input[type="checkbox"] + label {
 font-size: 13px;
 color:#333333;
 display: flex;
}


input[type="checkbox"] + label::before {
content: '';
width: 1.5em;
height: 1.5em;
border: .07em solid black;
margin-right: .5em;
border-radius: .15em;
}

input[type="checkbox"] + label:hover::before, input[type="checkbox"]:hover + label::before {
 background-color: #fff;
}


input[type="checkbox"]:checked + label::before{
 content: '\002714';
 display: flex;
 justify-content: center;
 align-items: center;
 color: #1d2424;
}

.jumlahtamu {
 color: #414e4e;
 border-bottom: 1px solid #999;
 outline: none;
 background: transparent;
}

/* about us */
.light {
 width: 100%;
 padding: 5%;
 display: grid;
 border-radius: 10px;
 margin: 10px;
background-color: #353430;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.50)

}

.light .depan1 {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
 column-gap: 30px;
}

.boxnew {
 background-color:  #1C1B19;
}
.dark {
 width: 100%;
 padding: 5%;
 display: grid;
 border-radius: 10px;
 margin: 10px;
 background-color:  #c5a37e;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.50)
}
.dark .depan1 {
 display: grid;
 grid-template-columns: repeat(2,1fr);
 column-gap: 30px;
}


.depan1 .image{
 height: fit-content;
 flex: 1 1 40rem;
}


.depan1 .image video{
 width: 100%;
 height: 100%;
 box-shadow: 1px 2px 10px rgba(12, 11, 11, 0.582);
border-radius: 10px;
overflow: hidden;

}
.depan1 .image img{
 width: 100%;
 height: 100%;
 box-shadow: 1px 2px 10px rgba(12, 11, 11, 0.582);
border-radius: 10px;

}



.depan1 .konten{
 flex: 1 1 40rem;
 width: fit-content;


}

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200&display=swap');
.light .depan1 .konten h3{
 font-family: 'Outfit', sans-serif;
 color: #fff;
 font-size: 18pt;
 line-height: 1.3;
 text-transform: uppercase;
 font-weight: 500;
 letter-spacing: 4pt;
}

.light .depan1 .konten h2{
 font-family: 'Outfit', sans-serif;
 font-size: 12pt;
 color: #fff;
 text-align: left;
 font-weight: 200;
 text-transform: none;
 text-transform: uppercase;
 line-height: 1;
 letter-spacing: 1pt;

}

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200&display=swap');
.depan1 .konten h3{
  font-family: 'Outfit', sans-serif;
  color: #1a1e22;
  font-size: 18pt;
  line-height: 1.3;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 4pt;
}



.depan1 .konten h6{
  font-family: 'Outfit', sans-serif;
  color: #ffffff;
  font-size: 10pt;
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: 1pt;
}

.konten h4{
  font-family: 'Outfit', sans-serif;
  color: #1a1e22;
  font-size: 15pt;
  padding-top: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 4pt;
}

.konten h5{
  font-family: 'Outfit', sans-serif;
  color: #1a1e22;
  font-size: 12pt;
  padding-top: 5px;
  text-transform:lowercase;
  font-weight: 400;
  letter-spacing: 1pt;
}

.depan1 .konten h2{
  font-family: 'Outfit', sans-serif;
  font-size: 12pt;
  color: #1a1e22;
  text-align: left;
  font-weight: 200;
  text-transform: none;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 1pt;

}

.light .depan1 .konten p{
 font-family: 'Outfit', sans-serif;
 font-weight: 100;
 font-size: 1.5rem;
 color: #fff;
 padding: 1rem 0;
 line-height: 1.4;
 text-align: justify;
 text-transform: none;
}

.dark .depan1 .konten h5{
  font-family: 'Outfit', sans-serif;
  font-size: 10pt;
  color: #000000;
  text-align: left;
  font-weight: 200;
  text-transform: none;
  line-height: 1;
  letter-spacing: 1pt;
 }
 .depan1 .konten h5{
  font-family: 'Outfit', sans-serif;
  font-size: 10pt;
  color: #ffffff;
  text-align: left;
  font-weight: 200;
  text-transform: none;
  line-height: 1;
  letter-spacing: 1pt;
 }
.light .depan1 .konten .link {
 line-height: 2;
 font-family: 'Outfit', sans-serif;
 font-size: 15px;
 font-weight: 450;
 color: #fff;
}

.light .depan1 .konten .link:hover {
 color: #c5c5c5;
 text-decoration: wavy;
}


.depan1 .konten p{
 font-family: 'Outfit', sans-serif;
 font-weight: 300;
 font-size: 1.5rem;
 color: #1a1e22;
 padding: 1rem 0;
 line-height: 1.4;
 text-align: left;
 text-transform: none;
 text-align: justify;
}



.depan1 .konten .link {
 line-height: 2;
 font-family: 'Outfit', sans-serif;
 font-size: 15px;
 font-weight: 450;
 color: #1a1e22;
 
 
}

.depan1 .konten .link:hover {
 color: #a09f9f;
 text-decoration: wavy;
}
/* about end */
.depan1 .image .btn{
 position: absolute;
 transform: translate(30%, -120%);
 padding: 1rem 1.2rem;
 border-radius: 5px;
 border: none;
 outline: none;
 cursor: pointer;
 opacity: 0.5;
 transition: .3s;
 margin: 0 -5px;
 color: #1c1b19;
 background-color: #ffffff;
}




#next{
 right: 85.5%;
}



























 
/****************/



.gap {
  width: 90vw;
  margin: 0 auto;
  padding: 40px 0;
  padding-bottom: 50px;
}
.gapp {
  margin: 0 auto;


}
.main-container{
 width: 100%;
 padding: 40px 0;
 padding-bottom: 50px;
}
.main-container > h2{
 text-align: center;
 padding: 10px 0;
 font-size: 32px;
}
.main-container > p{
 font-weight: 300;
 padding: 10px 0;
 opacity: 0.7;
 text-align: center;
}

.boxcategory-head {
  width: 100%;
  height: 100px;
  background-color: #272727;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.category-head{
 margin: 30px 0;
 text-align: center;
 background-color: #D1A578;
 width: 90%;
 border-radius: 7px;
}
.category-head ul{
 list-style-type: none;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
.category-title{
flex: 0 0 calc(13% - 10px);
justify-content:space-evenly;
padding: 2px;
text-transform: uppercase;
color: #272727;
margin: 5px 2px;
cursor: pointer;
transition: all 0.4s ease;
display: flex;
text-align: center;
align-items: center;
font-size: 14px;
border-radius: 4px;
}

.active {
 background-color:  #997149;
 color: #272727;
}
.category-title:hover{
 color: #272727;
  background-color:  #717171;
}
.category-title li{
 padding: 0 2px;
}
.category-title span{
 color: #222;
}

.container-afterfilter {
  width: 100%;
  padding: 10px 5px 70px 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: #272727;
}

.service-item img {
 position: relative;
 margin-top: 40px;
 transition: .5s;
}

.service-item .service-text {
 position: absolute;
 width: 100%;
 height: calc(100% + 86px);
 top: 0;
 left: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-end;
 background: rgba(33, 30, 28, 0.5);
 transition: .5s;
 z-index: 1;
}

.service-item:hover img {
 margin-top: 0px;
}

.service-item:hover .service-text {
 height: calc(100% + 40px);
}



.products-preview{
  position: fixed;
  top:0; left:0;
  min-height: 100vh;
  width: 100%;
  background: rgba(0,0,0,.8);
  display: none;
  align-items: center;
  justify-content: center;
}


.products-preview .preview.active{
  display: inline-block;
}

.products-preview .preview img{
 width:  100%;
 height: 90%;

}


.products-preview .preview .fa-times:hover{
  transform: rotate(90deg);
}

.products-preview .preview h3{
  color:#444;
  padding:.5rem 0;
  font-size: 2.5rem;
}

.products-preview .preview .stars{
  padding:1rem 0;
  font-size: 1.7rem;
}

.products-preview .preview .stars i{
  color:#27ae60;
}

.products-preview .preview .stars span{
  color:#999;
}

.products-preview .preview p{
  line-height: 1.5;
  padding:1rem 0;
  font-size: 1.6rem;
  color:#777;
}

.products-preview .preview .price{
  padding:1rem 0;
  font-size: 2.5rem;
  color:#ffffff;
}

.products-preview .preview .buttons{
  display: flex;
  gap:1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.products-preview .preview .buttons a{
  flex:1 1 16rem;
  padding:1rem;
  font-size: 1.8rem;
  color:#444;
  border:.1rem solid #444;
}

.products-preview .preview .buttons a.cart{
  background: #444;
  color:#fff;
}

.products-preview .preview .buttons a.cart:hover{
  background: #111;
}

.products-preview .preview .buttons a.buy:hover{
  background: #444;
  color:#fff;
}





*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: 'Outfit', sans-serif;
}


.products-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 100px;
  background-color: none;
  padding-top: 30px;
 padding-bottom: 30px;
  /* border: 2px solid; */
}
.single-card {
  flex-basis: calc(100% / 3);
  padding: 20px;
 width: 100%;
  /* border: 2px solid red; */
}


.single-card .wrapper1 {
  background-color: #353430;
  color: #ffffff;
  height: 100%;
  padding: 30px;
  box-shadow: 3px 5px 10px rgba(0,0,0,0.1);
  transition: .3s;
}



.single-card .wrapper1:hover {
  transform: translateY(-5px);
}
.single-card h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: normal;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1pt;
}

.single-card h2{
  font-family: 'Outfit', sans-serif;
  text-align: center;
  font-weight: 200;
  font-size: 17px;


}

.single-card h2 span{
  font-family: 'Outfit', sans-serif;
  font-weight: normal;
  text-align: center;
  color: #ffffff;
  letter-spacing: 1pt;
  font-weight: 100;
  font-size: 17px;


}
.single-card h5{
  font-family: 'Outfit', sans-serif;
  text-align: center;
  font-weight: 200;
  font-size: 11px;
  margin-top: 1%;
  padding-left: 2%;
  padding-right: 2%;
}

.single-card h5 span{
  font-family: 'Outfit', sans-serif;
  font-weight: normal;
  text-align: center;
  color: #ffffff;
  letter-spacing: 1pt;
  font-weight: 100;
  font-size: 11px;
  margin-top: 1%;
  padding-left: 2%;
  padding-right: 2%;
}


.single-card h1 {
  margin: 20px 0px;
  font-size: 30px;
}
.single-card li {
  list-style: none;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.single-card i.fas {
  height: 15px;
  width: 15px;
  background: transparent;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: #ffffff;
  font-size: 10px;
  margin-right: 10px;
}
.single-card span {
  font-size: 12px;
  font-weight: 500;
}
.single-card button {
  height: 40px;
  width: 100%;
  background-color: #1c1b19;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 20px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: .5px;
  margin-top: 30px;
  transition: 0.3s;
}

.single-card button:hover {
  background: black;
}

.single-card a {
  color: #ffffff;
}
.single-card .exclusive {
  position: relative;
}


.exclusive.wrapper1 i {
  color: #1c1b19;
  background: transparent;
}
.exclusive.wrapper1 button:hover {

  color: white;
  background: black;
}
















.single-card .popular {
  position: relative;
}
.single-card .popular::before {
  content: 'Recommended';
  position: absolute;
  top: 30px;
  right: -45px;
  background: #ed5e1c;
  transform: rotate(45deg);
  font-size: 9px;
  padding: 0px 50px;
}
.popular.wrapper1 {
  color: #1c1b19;
  background: #c5a37e;
  overflow: hidden;
}

.exclusive.wrapper1 {
  color: #1c1b19;
  background: #c5a37e;
  overflow: hidden;
}

.popular.wrapper1 i {
  color: #1c1b19;
  background: transparent;
}


.popular.wrapper1 button :hover {
  color: white;
  background: black;
}
.disable span {
  color: #ffffff;
  font-weight: lighter;
}

.disables span {
  color: #ffffff (230, 220, 220);
  font-weight: 300;
}
.disable i.fas {
  background: #7b7e81;
}


.products-preview{
 padding-top: 10px;
 padding-bottom: 10px;
  position: fixed;
  top:0; left:0;
  min-height: 100vh;
  width: 100%;
  background: rgba(0,0,0,.8);
  display: none;
  align-items: center;
  justify-content: center;
}

.products-preview .preview{
  display: none;
  padding:2rem;
  text-align: center;
  background: #ffffff;
  position: relative;
  margin:2rem;
  width: 40rem;
  scale: 85%;
  
}

.products-preview .preview.active{
  display: inline-block;
}


.products-preview .preview .fa-times{
  position: absolute;
  top:2.5rem; right:3rem;
  cursor: pointer;
  color:#f6e9e9;
  font-size: 3rem;
}

.products-preview .preview .fa-times:hover{
  transform: rotate(90deg);
}

.products-preview .preview h3{
  color:#444;
  padding:.5rem 0;
  font-size: 2rem;
}

.products-preview .preview .stars{
  padding:1rem 0;
  font-size: 1.7rem;
}

.products-preview .preview .stars i{
  color:#ed5e1c;
}



.products-preview .preview .price{
  padding:1rem 0;
  font-size: 2.5rem;
  color:#272d33;
}

.products-preview .preview .buttons{
  display: flex;
  gap:1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.products-preview .preview .buttons a{
  flex:1 1 16rem;
  padding:1rem;
  font-size: 1.8rem;
  color:#444;
  border:.1rem solid #444;
}

.products-preview .preview .buttons a.cart{
  background: #444;
  color:#fff;
}

.products-preview .preview .buttons a.cart:hover{
  background: #111;
}

.products-preview .preview .buttons a.buy:hover{
  background: #444;
  color:#fff;
}


.preview .wrapper2 {

  margin-top: 1rem;
  font-size: 14px;
  text-align: left;

}



input[type=text], select, textarea {
 width: 100%;
 padding: 12px;
 border-bottom: 1px solid #ccc;
 border-radius: 4px;
 box-sizing: border-box;
 resize: vertical;
}

/* Style the label to display next to the inputs */
.containers label {
 padding: 12px 12px 12px 0;
 display: inline-block;
}

/* Style the submit button */
.containers .rowe .button {
 background-color: #414e4e;
color: white;
 padding: 12px 20px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 float: right;
}

 .containers .rowe .button:hover {
 background: #2d2b2a;
 }
/* Style the container */
.containers {
 border-radius: 5px;
 background-color: #272727;
 padding: 20px;
}


/* Floating column for inputs: 75% width */
.containers .col-100 {
 float: left;
 width: 100%;
 margin-top: 6px;
}

/* Clear floats after the columns */
.containers .rowe:after {
 content: "";
 display: table;
 clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */



.containers .rowe p {
 text-align: left;
 font-size: 15px;
 color: #615f5e;
 left: 15px;
 bottom: 30px;
}

.containers .rowe .radio{
 display: inline-block;
 float: left;
 padding: 10px;
}
.containers .rowe .checkbox {

 min-height: 1.2rem ;
 min-width: 1.2rem;
 padding: 30px;

}


/* judul pricelist */
.judul-pricelist {
  display: inline-block;
  color: #ffffff;
  margin: 0px 5px 0px 5px;
  padding: 0;
font-family: 'Outfit', sans-serif ;
}

.judul-pricelist p {

  color: #ffffff;
  margin: 0;
  padding: 0;
font-family: 'Outfit', sans-serif ;
font-weight: 150;
font-size: 13px;
line-height: 20px;
text-transform: none;


}


.judul-pricelist2 {
  display: inline-block;
  color: #363333;
  cursor: pointer;
  margin-left: 10px;
  margin-bottom: 15px;
margin-top: 10px;
font-family: 'Outfit', sans-serif ;
}

.judul-pricelist i {
  margin-right: 7px;
  font-size: 13px;
  cursor: pointer;
  
}
.judul-pricelist span {
  text-transform: uppercase;
  font-family: 'Outfit', sans-serif ;
font-size: 17px;
font-weight: 500;
line-height: 23px;
letter-spacing: 0.7px;
text-align: left;
text-transform: uppercase;
cursor: pointer;
}

/* slider kotak sesiwedding */
/*---------global------*/
.luas-kotak {
  max-width: 100%;
  margin: 3% 10%;
 
}

/*---------popular------*/
.owl-item {
  background-color: transparent;
l
}

.owl-item img {
 width: 120%;

}

.new {
background-color: transparent;

}
/*---------image_hover------*/
.new .profil {

  padding: 0px;
  position: relative;
  cursor: pointer;
  background: #1C1B19;
 
  box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
  border-radius: 7px;
  overflow: hidden;
  width: 215px;
  height: 275px;
  margin: 0% 5%;
}

.new .profil .imgprofil {
  background-color: #565353;
  height: 161px;
  position: relative;
  overflow: hidden;
}

.new .box .imgprofil img {

  height: 100%;
  object-fit: cover;
  width: 150%;
}

.new .profil:hover .imgprofil img {
  opacity: .6;
  transform: scale(1.2);
}


/*----text------*/
.new .text {
  padding: 10px 20px;
}
.movie-item .movie-item-title h3 {
  font-family: 'Outfit' , sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  color: #FFFFFF;
  
}

.movie-item .movie-item-title h2 {
  font-family: 'Outfit' , sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 13px;
  line-height: 16px;
  color: #FFFFFF;
  
}

.movie-item .movie-item-title p {
  font-family: 'Outfit' , sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 13px;
  padding-top: 20px;
  text-align: left;
  color: #FFFFFF;
  
}
.owl-s .dots span {
  font-size: 20px;
  color: white;
}

.owl-nav span {
  font-size: 50px;
  color: white;
}

.owl-prev, .owl-next {
  position: absolute;
  top: 25%;
}

.owl-prev {
  left: -20px;
}

.owl-next {
  right: -20px;
}

/*---------popular------*/





/*RESPONSIVE PC*/
@media (max-width: 1200px) {
  html {
    font-size: 55%;
  }
  .home .box .content h5 {
  
    }
  
    .header .logo {

      width: 25%;
      padding-left: 17.6px;
      }
      .headerindex .logo {

        width: 25%;
        padding-left: 17.6px;
        }

    .banner .content h3 {
  
    font-size: 10pt;
  
    }
  
    .tentang .content {
      font-family: 'Outfit', sans-serif;
      font-weight: 300;
      -webkit-box-flex: 1;
      -ms-flex: 1 1 42rem;
      flex: 1 1 42rem;
      text-align: justify;
      overflow-x: hidden;
      }
      
    .tentang .content span {
    color: #ffffff;
    font-size: 23px;
    }
    
    
    .tentang .content h4 {
    font-size: 19px;
    line-height: 17pt;

    
    }
    
    .tentang .content h4 span {
      padding: 1rem 0;
      font-size: 21px;
    
      
      }

  
  section {
    padding: 2rem;
  }
  .gallery .image {
    width: calc(100% / 2);
  }
  .single-card .space {
    margin-bottom: 79%;
  }
  .single-card .space2 {
    margin-bottom:59%;
 }
 .single-card .space3 {
    margin-bottom:39%;
 }
 .single-card .space5 {
    margin-bottom:39%;
 }
 .single-card {
 flex-basis: calc(100% / 3);
 padding: 20px;
width: 100%;
 }
 .products-preview .preview img{

  width:  100%;
  height: 90%;
}
.single-card {
  flex-basis: calc(100% / 2);
}  

 .swiper-slide{
   text-align: center;
 }
 
 .banner {
   background: linear-gradient(rgba(34, 32, 32, 0.518), rgba(95, 91, 91, 0.468)), url(../Wedding/Weddiing\ Putri\ -\ 03.jpg) no-repeat;
   background-size: cover;
   background-position: center;
   padding: 3rem 2rem;
   background-attachment: fixed;
   text-align: center;
   margin-top: 50px;
 }
 
 .banner2 {
   background: linear-gradient(rgba(34, 32, 32, 0.518), rgba(95, 91, 91, 0.468)), url(../Wedding/Weddiing\ Putri\ -\ 03.jpg) no-repeat;
  
   background-size: cover;
   background-position: center;
   padding: 3rem 2rem;
   text-align: center;
   margin-top: 50px;
 }
 .home .box {
   padding: 2rem;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
 .home .box.second {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
 
 .home .box .content h3 span {
   font-size: 30px;
 
 }
 .home .box .content h3 {
   font-size: 10px;
 }
 .home .box .content h2{
   line-height: 20px;
 }
 .home .box .content a {
   margin-top: 10px;
   }

  .submit-btn {
    text-align: center;
  }

  html{
    font-size: 55%;
 }
 html{
  font-size: 55%;
}
.products-preview .preview{
  scale: 100%;
}
.single-card .space {
  margin-bottom: 0%;
}
.single-card {
  flex-basis: calc(100% / 2);
}  
.products-container {
   padding: 0px 20px;
}    
.single-card .wrapper1 ul {
  margin-bottom: 0%;
}  

.depan1 .konten{
  padding-bottom: 23%;
 }
 .depan1 .image .btn{
  position: absolute;
  transform: translate(30%, -120%);
  padding: 1rem 1.2rem;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
  opacity: 0.5;
  transition: .3s;
  margin: 0;
 }

 
 #next{
  right: 85%;
 }

 .konten h4{
  font-family: 'Outfit', sans-serif;
  color: #1a1e22;
  font-size: 11pt;
  padding-top: 10px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1pt;
}

.konten h5{
  font-family: 'Outfit', sans-serif;
  color: #1a1e22;
  font-size: 8pt;
  padding-top: 5px;
  text-transform:lowercase;
  font-weight: 350;
  letter-spacing: 0.5pt;
}
  }

  @media (min-width:1500px){
    .products-preview .preview img{
    
     width:  100%;
     height: 90%;
    }
    }


/*RESPONSIVE TABLET*/


@media (max-width: 850px) {
  .controls {
    width: 100%;
    height: 100%;
  }
  .singlebox-sesigrid .bysesikonten h2 {
    font-size: 14px;
    text-align: center;
    color: white;
    margin-top: 4%;
    }

    .available-swd img {
      width: 150px;
      border-radius: 7px;
      
    }
    
    .singlebox-sesigrid .bysesikonten P {
      font-size: 10px;
      text-align: center;
      color: white;
      margin-top: 2%;
      margin-bottom: 6%;
      padding-left: 12%;
      padding-right: 12%;
      }

  .services .heading h1{
    font-size: 14px;
  }
  .header .logo {

    width: 30%;
    padding-left: 0px;
    }
    .headerindex .logo {

      width: 30%;
      padding-left: 0px;
      }
  
      .tentang .content span {
        font-size: 22px;
      }
      
      
      .tentang .content h4 {
        font-size: 16px;
        line-height: 17pt;
        
        }
        
        .tentang .content h4 span {
          font-size: 19px;
          line-height: 30pt;
          }
      .homebanner {
        height: 700px;
        background:url(../images/homebanner\ image\ -\ 1.jpg) ;
        background-position-x:-350px ;
        padding: 6rem 2rem;
        padding-left: 5%;
  
        }
  
          .homebanner .content h1{
            font-size: 13pt;
            text-align: left;
            }
            .homebanner .content h1 span{
              font-size: 18pt;
            }
            .homebanner .content h3{
              padding-top: 35%;
              padding-bottom: 3%;
              font-size: 45pt;
            }
            .hbbtn {
              font-size: 13pt;
        
              } 
              .hbbtn-self {
                font-size: 10pt;
              }  
              .hbbtn3 {
                font-size: 13pt;
              
                } 


  .footer .credit {
    font-size: 12px;
  }
  .footer .credit span a{
    font-size: 12px;
  }
  .gallery .image {
    width: 100%;
    padding: 4px;
  }
  .gallery .gallery-filter{
    padding: 0 10px;
  }
  .banner {
    background: linear-gradient(rgba(34, 32, 32, 0.518), rgba(95, 91, 91, 0.468)), url(../Wedding/Weddiing\ Putri\ -\ 03.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 3rem 2rem;
    text-align: center;
    margin-top: 50px;
  }
  #menu-btn {
    display: inline-block;
  }
  
  .heading1 .btn{
    font-family: 'Outfit', sans-serif;
    font-weight: normal;
    letter-spacing: 1pt;
   font-size: 10px;
   padding: .5rem 1.8rem;
   color:#ffffff;
   }

   .heading1 .btn:hover {
    background: #f71f1f;
    color: #ffffff;
    }
  .heading1 h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: bold;
    letter-spacing: 3pt;
    text-transform: uppercase;
   font-size: 18px;
   color:#ffffff;
   }
  
   .heading1 h2{
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-weight: normal;
    letter-spacing: 3pt;
    line-height: 10pt;
    text-transform: uppercase;
   font-size: 12px;
   color:#ffffff;
   }
   .heading1 h6{
    padding-top: 5px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-weight: normal;
    letter-spacing: 2pt;
    line-height: 10pt;
    text-transform: uppercase;
   font-size: 7px;
   color:#ffffff;
   }

.boxnew .containers .catatan b{
    text-align:justify;
    font-family: 'Outfit', sans-serif;
    font-weight: normal;
    letter-spacing: 1pt;
    line-height: 10pt;
    text-transform:lowercase;
   font-size: 16px;
   color:#000000;
   }

   .boxnew .containers .catatan b span {
    text-align:justify;
    font-family: 'Outfit', sans-serif;
    font-weight: normal;
    letter-spacing: 1pt;
    line-height: 10pt;
    text-transform:lowercase;
   font-size: 12px;
   color:#000000;
   }

   .services .indexheading h1 {
    padding: 20px 0;
  
    
    
    }
   .heading1 h1 span{
    font-family: 'Outfit', sans-serif;
    font-weight: normal;
    letter-spacing: 3pt;
    line-height: 10pt;
    text-transform: uppercase;
   font-size: 12px;
   color:#ffffff;
   }
   .heading1 p {
    font-family: 'Outfit', sans-serif;
    font-weight: normal;
    color:#ffffff;
   padding-top: .7rem;
   font-size: 12px;
   
   }
   
   .heading1 p a {
    font-family: 'Outfit', sans-serif;
    font-weight: normal;
    color:#ffffff;
     font-size: 12px;
   }
  .header {
    padding: 20px;
  }
  .headerindex {
    padding: 20px;
  }
  
content h5 span {
    font-size: 12px;

  }
  .home .box .content {
    padding-bottom: 30%;
  }
  .home .box .content h4 {
      font-size: 25px;
 
      }
    
    .home .box .content h5 {
      font-size: 17px;
    
      }
      .home .box .content h5 span {
        font-size: 50px;

        }

  
  .header .navbar {
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  
  .header .navbar.active {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    background-color: #1c1b19;
  }
  
  .header .navbar ul li {
    width: 100%;
  }
  
  .header .navbar ul li ul {
    position: relative;
    width: 100%;
  }
  
  .header .navbar ul li ul li a {
    padding-left: 4rem;
  }

  
  
  .headerindex .navbar {
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  
  .headerindex .navbar.active {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    background-color: #1c1b19;
  }
  
  .headerindex .navbar ul li {
    width: 100%;
  }
  
  .headerindex .navbar ul li ul {
    position: relative;
    width: 100%;
  }
  
  .headerindex .navbar ul li ul li a {
    padding-left: 4rem;
  }
  .gallery{
    padding-top: 50px;
  }
    .gallery .gallery-item{
    width: 100%;
  }	
  .gallery .gallery-filter .filter-item{
    margin-bottom: 8px;
  }
  .submit-btn {
    text-align: center;
  }
  .hero .form-box {
    width: 100%;
  }
  .hero .form-box {
    width: 100%;
  }
  .blogs .slide img  {
    width: 100%;
  }
  .blogs .slide a {
    font-size: 1.5rem;
  }
  .blogs .slide {
    padding: 15px;
  }
  .img-area {
    padding: 0;
  }
  .wrapper {
    max-width: 80%;
    padding: 0;
  }
  .depan1 .konten{
    padding-bottom: 5px;
    padding-top: 15px;
  }

  .depan1 .konten h3{
    padding-top: 0px;
    font-size: 12pt;
 
  }
 
  .light .depan1 .konten h3{
   padding-top: 0px;
   font-size: 12pt;
 
 }
  .depan1 .konten h2{
 
    font-size: 8pt;
 
  }
 
  .light .depan1 .konten h2{
 
   font-size: 8pt;
 
 }
  .depan1 .konten p{
 
    font-size: 10pt;
 
  }
 .depan1 .konten link{
    padding-top: 0px;
    font-size: 10pt;
 
  }
 .depan1 .btn {
  padding: 6px 6px; 
 }

 .light .depan1 {
 
  grid-template-columns: 1fr;
 
 }
 
 .dark .depan1 {
 
  grid-template-columns: 1fr;
 }
 
 
 
 .heading2 {
  padding-top: 40px;
 
 
 }

 
 .depan1 .image .btn{
  position: initial;
  transform: translate(20%, -140%);
  padding: 4px 7px;
  border-radius: 2px;
  border: none;
  outline: none;
  cursor: pointer;
  opacity: 0.5;
  transition: .3s;
 margin-top: 5px;
 }
 
 #next{
  right: 85%;
 }

 .products-preview .preview{
  scale: 100%;
}
.products-preview .preview{
  scale: 100%;
}
.single-card .space {
  margin-bottom: 0%;
}
.single-card {
  flex-basis: calc(100% / 2);
}  
.single-card .wrapper1 ul {
 margin-bottom: 0%;
}    

.new .luas-kotak .owl-item {
margin-left: 20px;
}
}


/*RESPONSIVE TABLET 750*/


@media (max-width: 800px) {
  .isiavailable-swdspt  {
    width: 150px;
    height: 187.5px;
  
}

}

/*RESPONSIVE HP 450 ALL*/

@media (max-width: 450px) {

  .frame-option {
    width: 280px;
}
.home-sesipotrait {
  margin: 0px 0px 0px 0px;
}

.boxspt-pilihan h1 {
  font-weight: 500;
  font-size: 28px;
  line-height: 27px;
}

.isiboxspt-pilihanx a {
  font-weight: 300;
  letter-spacing: 0.4px;
  font-size: 12px;
  line-height: 23px;
  width: 160px;
  height: 26px;
  padding: 0px 0px 0px 5px;
  display: grid;
  grid-template-columns: 81% 10%;
}

.isiboxspt-pilihanx a i {
  font-size: 10px;
  width: 18px;
  height: 18px;
  margin: 0px 0px 0px 0px;
  position: relative;
}

.boxhome-sesipotrait {
  background-position-x: -440px; 
}
  .isiavailable-swdspt {
    width: 140px;
    height: 175px;
  }

  .header .navbar ul li a {
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 0.6px;
    padding: 2rem;
    display: block;
    font-family: 'Outfit', sans-serif;
}

.available-swd img {
  width: 140px;
  border-radius: 7px;
  
}
  .lihat-selengkapnya {
    width: 100%;
    height: fit-content;
    display: flex;
    
    }
    .lihat-selengkapnya a {
      width: fit-content;
      height: fit-content;
      color: #f0f0f0;
      cursor: pointer;
      margin: 0px 0px 0px 0px;
      padding: 0px 5px;
      font-weight: 500;
      font-size: 11.5px;
      line-height: 15px;
      text-transform: none;
      letter-spacing: 0.8px;
      text-align: center;
      border-radius: 5px;
    }

    
  
  
  .judul-tentanglain span {
    font-size: 14px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0.7px;
}

.judul-tentanglain p {
  margin: 0;
  padding: 0;
  font-weight: 200;
  font-size: 12px;
  line-height: 20px;
  text-transform: none;
}

.another-kotakisi {
  width: 250px;
  height: fit-content;
  margin: 25px 9px 0px 9px;
  padding: 20px 0px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
  text-align: center;
}
.another-kotakisi img {
  width: 60px;
  border-radius: 50%;
  padding: 2px;
}

.another-kotakisi h1 {
  margin: 0;
  padding: 15px 0px 0px 0px;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 0px;
  text-transform: none;
  letter-spacing: 0.8px;
}

.another-kotakisi h1 span {
  margin: 0;
  padding: 25px 0px 0px 0px;
  font-weight: 300;
  font-size: 12px;
  line-height: 25px;
  text-transform: none;
  letter-spacing: 1.7px;
}

.another-kotakisi h2 {
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-size: 12px;
  line-height: 13px;
  text-transform: none;
  letter-spacing: 0.8px;
  text-align: center;
}

.another-kotakisi a {
  width: fit-content;
  height: fit-content;
  color: #f0f0f0;
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  padding: 5px 10px;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  text-transform: none;
  letter-spacing: 0.8px;
  text-align: center;
  border-radius: 5px;
}
/*judul-pricelist hp start*/
  .judul-pricelist p {
    color: #ffffff;
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 200;
    font-size: 11.5px;
    line-height: 14px;
    text-transform: none;
    width: 250px;
    text-align: left;
    letter-spacing: 0.4px;
}

.judul-pricelist i {
  font-size: 13px;  
}
.judul-pricelist span {
  font-size: 13px;
}

/*judul-pricelist hp end*/

.availablemovie-item {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 15px 2.5px 10px 2.5px;
  background-color: none;
  border-radius: 5px;
  
}

.pricelistmovie-item {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 15px 2.5px 10px 2.5px;
  background-color: none;
  border-radius: 5px;
  
}

.promomovie-item {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 15px 2.5px 10px 2.5px;
  background-color: none;
  border-radius: 5px;
  
}

.bagian-available {
  padding: 25px 15px 0px 15px;
}

.bagian-pricelist {
  padding: 20px 15px 0px 15px;
}

.bagian-promo {
  padding: 20px 15px 0px 15px;
}


element.style {
  background: url(images/banner-sesivisual.jpg) no-repeat;
}
.bagian-gallery .banner-bagian-gallery {
  width: 100%;
  height: 300px;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: grid
;
  justify-content: center;
  grid-template-rows: 20% 70% 10%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-size: cover !important;
  background-position: center !important;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}
.bagian-boxgallery {
  width: 100%;
  z-index: 2;
  display: grid;
  justify-content: flex-start;
  justify-items: start;
  grid-template-rows: 20% 60% 20%;
  height: 300px;
  position: absolute;
  padding: 0px 0px 0px 15px;
}
.vignategradient-gallery {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.2) 50%);
  pointer-events: none;
  position: relative;
}


.boxdua-gallery h1 {
  font-family: "Zain", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 45px;
  text-transform: lowercase;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  line-height: 35px;
  z-index: 2;
  width: 60%;
  height: fit-content;
}

.boxdua-gallery h3 {
  font-family: 'Outfit' , sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 12px;
  text-transform: lowercase;
  color: #ffffff;
  letter-spacing: 0.3px;
  padding: 5px 0px 0px 0px;
  line-height: 15px;
  width: 65%;

}
.boxdua-gallery h2 {
  font-family: 'Outfit' , sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  text-transform: lowercase;
  color: #ffffff;
  letter-spacing: 0.3px;
  padding: 15px 0px 0px 0px;
  line-height: 15px;
  width: 65%;


}

.boxdua-gallery a {
  font-family: 'Outfit' , sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  color: #272727;
  letter-spacing: 0.3px;
  margin: 15px 0px 0px 0px;
  padding: 5px 15px 5px 15px;
  line-height: 20px;
  background-color: #907b60;
  height: fit-content;
  width: fit-content;
  border-radius: 5px;
  cursor: pointer;

}




  .vignategradient-dua {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: linear-gradient(to top, rgba(39, 39, 39, 1.0) 5%, rgba(39, 39, 39, 0.8) 40%,rgba(39, 39, 39, 0.5) 60%, rgba(39, 39, 39, 0.3) 90%);
    pointer-events: none;
  }
  .category-title{
    flex: 0 0 calc(13% - 10px);
    justify-content:space-evenly;
    padding: 2px;
    text-transform: uppercase;
    color: #272727;
    margin: 5px 2px;
    cursor: pointer;
    transition: all 0.4s ease;
    display: flex;
    text-align: center;
    align-items: center;
    font-size: 12px;
    border-radius: 4px;
    }

    .category-title li{
      padding: 0 3px;
     }
     .boxcategory-head {
      width: 100%;
      height: 50px;
    }
    .active {
        color: #272727;
       }
    .category-title:hover{
        color: #272727;
         background-color:  #997149;
       }
    .bannervprofil {
        width: 100%;
        height: 500px;
        background-image: url(../images/25BANNER-SVLHP.jpg);
        position: relative;
        background-size: cover;
        background-position-x: center;
        background-position-y: center;
        display: grid ;
        align-content: center;
        padding: 0px;
        
        }
    .kotakvbprofil {
      height: 90px;
      z-index: 2;
      display: grid ;
      align-content: center;
      grid-template-columns: 15% 62% 23%;
    }
    .kotakvprofil {
      height: 410px;
      }
    .isikotakvprofil {
      height: 90px;
      display: flex;
      align-content: flex-start;
      justify-content: center;
      }
    .isikotakvbprofil h1 {

      font-size: 14px;
      font-weight: bold;
      line-height: 13px;
      letter-spacing: 3px;
    }
  
    .isikotakvbprofil h1 span {

      font-size: 11px;
      font-weight: 200;
      letter-spacing: 1px;
     
    }
    .isikotakvbprofil p {

      font-size: 11px;
      font-weight: 200;
      line-height: 2px;
      letter-spacing: 0.5px;
    }
  
    .isikotakvbprofil a {

      font-size: 11px;
      font-weight: 200;
      line-height: 5px;
      letter-spacing: 0.5px;
    }
      .logoisikotakprofil {
        height: 40px;
        width: 40px;
        background-size: cover;
        border-radius: 50%;
        display: flex;
      }

      .isikotakvbprofil {
        height: 90px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
      
        }
  
        .isikotakvcprofil {
          height: 90px;
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;
          justify-content: center;
    
          }
          .isikotakvcprofil a {

            font-size: 11px;
            font-weight: 600;
            line-height: 5px;
            letter-spacing: 0.5px; 
          
  
          }
  
          .isikotakvcprofil a span {

            font-size: 11px;
            font-weight: 400;
            line-height: 5px;
            letter-spacing: 0.9px; 
            margin: 5px;
          
  
          }
  element {
  width: 1400px;
  }

  .header {
    padding: 15px 20px;
    height: 52px;
  }
  .banner-wedding .offer-box {
    height: 100px;

  }
  .header-tutup {
    background-color: none;
    width: 100%;
    height: 52px;
   }
  .logo-alamat .gambarlogo {
    height: 50px;
    width: 50px;
  }
  .new .profil {

    padding: 0px;
    position: relative;
    cursor: pointer;
    background: #1C1B19;
    width: 99px;
    height: 126px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
    border-radius: 7px;
    overflow: hidden;
    margin: 0% 5%;
  }
  
  .main-container {
    width: 100%;
    margin: 0 auto;
    padding: 0px 0;
    padding-bottom: 50px;
}
  .new .profil .imgprofil {
    background-color: #565353;
    height: 74px;
    position: relative;
    overflow: hidden;
  }
  .destination .box-container {
    padding-top: 0px;

}

.boxnew .containers .catatan b{
  top: 10px;
  text-align:justify;
  font-family: 'Outfit', sans-serif;
  font-weight: normal;
  letter-spacing: 1pt;
  line-height: 10pt;
  text-transform:uppercase;
 font-size: 12px;
 color:#000000;
 }

 .boxnew .containers .catatan b span {
  text-align:justify;
  font-family: 'Outfit', sans-serif;
  font-weight: normal;
  line-height: 8pt;
  text-transform:lowercase;
 font-size: 10px;
 color:#000000;
 }
  .movie-item .movie-item-title h3 {
    font-family: 'Outfit' , sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: normal;
    color: #FFFFFF;
    
  }

  .movie-item .movie-item-title h2 {
    font-family: 'Outfit' , sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 7px;
    line-height: normal;
    color: #FFFFFF;
    
  }

  .movie-item .movie-item-title p {
    font-family: 'Outfit' , sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 8px;
    padding-top: 10px;
    text-align: left;
    color: #FFFFFF;
    
  }

  .new .text {
    padding: 2px 7px;
  }
  .logo-alamat .gambarlogo img {
    height: 50px;
    width: 50px;
  }
  .h {
    margin-top: 50px;
    height: 4px;
  }
  .logo-alamat{
    padding-left: 0%;
  }
  .logo-alamat .alamat {
    margin-left: 0%;
  }
  .logo-alamat .alamat h2 {
    font-size: 13px;
    height: 23px;
  }
  .logo-alamat .alamat h3 {
    font-size: 13px;
    height: 23px;
  }
  .logo-alamat .alamat .lokasi span {
    font-size: 10px;
  }

  .logo-alamat .tombol {
    display: -webkit-box;
  }

  .logo-alamat .tombol .klik {
    padding: 0px 7px;
    display: block;
}
/* MENU SWD MEDIA 450 */


.banner-wedding .wedding-box2 {
  height: 160px;
}





.containery-profilswd p a span {
  margin: 0px 4px;
  font-size: 10px;
}

.containery-profilswd h3 p a span {
  margin: 0px 2px;
  font-size: 8px;
}

.containery-profilswd h3 p a i {
  font-size: 8px;
}
.containery-profilswd h3 p {
  width: fit-content;
  height: fit-content;
  padding: 3px 5px;
  font-size: 15px;
  font-weight: 300;
  color: #ffffff;
  background: #B69574;
  cursor: pointer;
  border-radius: .5rem;
  margin-bottom: 8px;
}


.profilbanner-short h1 {
  height: 50px;
  background: url(../images/banner-profilswd2.jpg);
  background-size: cover;
  width: 92%;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  margin: 30px 0px;
  align-items: center;
  padding: 0px 0px;
}
.tulisan-selengkapnya p a {
  font-size: 12px;
}
.tulisan-selengkapnya p {
  margin: 5px 0px;
}
.inbox-homevenue h1 {
  font-size: 13px;
  text-align: left;
  margin-left: 10px;
  padding-top: 0px;
}

element.style {
}
.fa, .fas {
    font-size: 10px;
}

.inbox-homevenue h2 {
  font-size: 13px;
}

.inbox-homevenue h2 p a {
  font-size: 13px;
  margin-top: 12px;
  margin-left: 10px;
  padding: 5px 13px;
  border-radius: 6px;
  letter-spacing: 2px;
}

.inbox-homevenue {
  padding-top: 20px;
  padding-bottom: 25px;
  background-size: cover;
  background-position-x: -90px;
}
.logo-alamat .tombol .klik a {
  font-size: 8px;
}



  .new .luas-kotak .item {
    width: 20%;
    }

  .header .logo {

    width: 50%;
    padding-left: 0px;
    }

    .headerindex .logo {

      width: 50%;
      padding-left: 0px;
      }
  .gallery .gallery-item {
    width: 100% ;
    }
    .boxbysesigrid {
      padding: 12%;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(1,1fr);
      grid-gap: 20px;
      align-items: center;
      justify-content: center;
      background-color: #B69574;
      }
      .boxbysesigrid2 {
        padding: 12%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-gap: 20px;
        align-items: center;
        justify-content: center;
        background-color: #1C1B19;
        }
  
  .banner2 {
    background: url(images/Banner\ web.jpg) no-repeat;
  
    background-size: cover;
    background-position: center;
    padding: 3rem 2rem;
    text-align: center;
  }
    .banner {
      background: url(../Wedding/Weddiing\ Putri\ -\ 03.jpg);
      background-size: cover;
      background-position: center;
      padding: 3rem 2rem;
      text-align: center;
      margin-top: 50px;
    }
    

    .hbbtn-self {
      font-size: 10pt;
    
      } 

    .homebanner {
      height: 700px;
      background:url(../images/homebanner\ image\ -\ 1.jpg) ;
      background-position-x:-650px ;
      padding: 6rem 2rem;
      padding-left: 5%;

      }

        .homebanner .content h1{
          font-size: 10pt;
          padding: 0;
          text-align: center;
          }
          .homebanner .content h1 span{
            font-size: 13pt;
          }
          .homebanner .content h3{
            padding-top: 85%;
            padding-bottom: 8%;
            font-size: 30pt;
          }
          .hbbtn {
            font-size: 13pt;
          
            } 
            .hbbtn3 {
              font-size: 13pt;
            
              } 
      

    .home .box {
      padding: 2rem;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    .home .box.second {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    .home .box .content {
      margin-bottom: 50%;
      padding: 0 10%;
    }
    .home .box .content h4 {
      font-size: 18px;
 
      }
    
    .home .box .content h5 {
      font-size: 16px;
    
      }
      .home .box .content h5 span {
        font-size: 30px;

        }


    .home .box .content span {
      font-size: 3rem;
    
    
    }
    .home .box .content h3 {
      margin-bottom: 0;
      font-size: 4rem;
    
    }
    
    .indexheading span {
      font-size: 17px;
      }
    
      .indexheading h1 {
        font-size: 14px;
        }

    .services .box-container .box h3{
      font-size: 20px;
    }
    .services .box-container .box p{
      font-size: 13px;
    }
    .services .heading span {
      font-size: 15px;
    }
  
    .partnershipsesi .boxbysesigrid {
      padding: 15%;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(1,1fr);
      grid-gap: 20px;
      align-items: center;
      justify-content: center;
      background-color: transparent;
      margin-top: -8%;
    }
    
    .services .heading h1{
      font-size: 12px;
    }
    .footer .credit {
      font-size: 10px;
    }
    
    .footer .credit span a {
      font-size: 10px;
    }
    .tentang .content span {
      font-size: 24px;
    }
    
    
    .tentang .content h4 {
      font-size: 18px;
      line-height: 17pt;
      
      }
      
      .tentang .content h4 span {
        font-size: 21px;
        line-height: 30pt;
        }

    .home .box.second {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }

    
    .home .box .content h3 span {
      font-size: 35px;
      
     
    
    }
    .home .box .content h3 {
      font-size: 20px;
      padding-bottom: 20px;
      
    
    
    }
    .home .box .content .btn{
      padding: 3px 10px;
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
    }
    html {
      font-size: 50%;
    }
    
    .home .box .content h5 {
      text-align: center;
      font-size: 9pt;
      line-height: 20px;

    
      }
      form .user-details .input-box {
        width: 100%;
      }
      .gallery{
        padding-top: 50px;
      }
      .newbtn .toggle-btn {
        max-width: 20%;
        padding-bottom: 50px;
      }
      .img-area {
        padding: 20px;
      }
      .wrapper {
        max-width: 90%;
        padding: 0;
      }
      .single-box img{
        width: 100%;
      }

      html{
        font-size: 50%;
     }
     .products-preview .preview{
        scale: 100%;
     }

     html{
      font-size: 50%;
   }
   .products-preview .preview{
      scale: 100%;
   }
   .single-card .space {
      margin-bottom: 0%;
   }
   .gallery {
    width: 100%;
    padding : 12px;
    }	

    .preview-box.show {
    width: 100%;
    }	
    .submit-btn {
    text-align: center;
    }
    .hero .button-box .toggle-btn {
      font-size: 15px;
    }
    .submit-btn {
      text-align: center;
    }
    .gallery .gallery-filter .filter-item {
      font-size: 12px;
    }
    .gallery .gallery-filter{
      padding: 0 15px;
    }
    .formU {
      max-width: 100%;
    }
    
    form .user-details .input-box {
      margin-bottom: 15px;
      width: 100%;
    }
    
    .user-details::-webkit-scrollbar {
      width: 5px;
    }
    
    .single-card {
      flex-basis: calc(100%);
  } 
  .single-card .wrapper1 ul {
     margin-bottom: 0%;
  }   
  .containers .col-100, input[type=submit] {
    width: 100%;
    margin-top: 10px;
  }
  .containers .col-100, input[type=submit] {
    width: 100%;
    margin-top: 10px;
  }

    }

@media screen and (max-width : 360px) {
  .banner {
    background: linear-gradient(rgba(34, 32, 32, 0.518), rgba(95, 91, 91, 0.468)), url(../Wedding/Weddiing\ Putri\ -\ 03.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 3rem 2rem;
    text-align: center;
    margin-top: 50px;
  }
  
  .banner2 {
    background: linear-gradient(rgba(34, 32, 32, 0.518), rgba(95, 91, 91, 0.468)), url(../Wedding/Weddiing\ Putri\ -\ 03.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 3rem 2rem;
    text-align: center;
    margin-top: 50px;
  }
  .services .heading span {
    font-size: 15px;
  }
  
  .services .heading h1{
    font-size: 12px;
  }
  .footer .credit {
    font-size: 10px;
  }
  
  .footer .credit span a {
    font-size: 10px;
  }
  .submit-btn {
    width: 80&;
  }


  .button-box {
    display: flex;
    padding: 30px 10px;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;    
    justify-content: center;
  }
  .hero .button-box .toggle-btn {
    font-size: 18px;
    padding: 8px 12px 8px 12px;
  }
  .submit-btn {
    text-align: center;
  }
  .hero .button-box .toggle-btn {
    padding: 8px 10px 8px 10px;
    width: 100%;
    font-size: 15px;
  }
  .blogs .slide img  {
    width: 100%;
  }
  .blogs .slide a {
    font-size: 1.5rem;
  }
  .blogs .slide {
    padding: 15px;
  }
  .blogs .slide img  {
    width: 100%;
  }
  .blogs .slide a {
    font-size: 1.5rem;
  }


  .img-area {
    padding: 20px;
  }
  .wrapper {
    max-width: 100%;
    padding: 0;
  }
  .single-box img{
    width: 100%;
  }
}

/*RESPONSIVE HP 400*/

@media (max-width: 400px) {

  .frame-option {
    width: 235px;
 
}

.containeryz-box a {
  font-size: 11px;
  width: 95px;

}

.text-isiplvsr {
  height: 220px;
  position: relative;
  width: 270px;
}

.pricelist-vsr {
  width: 290px;
}

.isipricelist-vsr img {
  width: 270px;
  border-radius: 7px;
}

.isiavailable-swdspt  {
  width: 135px;
  height: 168.75px;

}

}

.hero-section {
  margin: 0% 3%;
}

.ruang {
  padding-top: 20px;
  margin: 0% 3%;
   
    }


.hero-slide-item {
  padding-top: 40%;
  position: relative;
  overflow: hidden;
}

.hero-slide-item img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-slide-item-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--text-color);
  display: flex;
}

.item-content-wraper {
  padding-left: 5rem;
  width: 40%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.item-content-wraper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.item-content-title {
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 900;
}



.movie-item.movie-info {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.movie-item .movie-info span {
  margin-left: 5px;
}

.movie-item .movie-info i {
  color: var(--main-color);
}

.movie-item .movie-info ~ .movie-info {
  margin-left: 5px;
}

.movie-item .item-content-description {
  font-size: 1.15rem;
  margin-top: var(--space-top);
  line-height: 1.5rem;
}

.item-action {
  margin-top: var(--space-top);
}

.carousel-nav-center {
  position: relative;
}

.carousel-nav-center .owl-nav button i {
  font-size: 3rem;
}

.carousel-nav-center .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.carousel-nav-center .owl-nav .owl-prev {
  position: absolute;
  margin-left: 10px;
}

.carousel-nav-center .owl-nav .owl-next {
  position: absolute;
  margin-right: 10px;
}

.owl-nav button {
  border: none;
  outline: none;
}

.owl-nav button i {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  color: #f6e9e9;
}

.owl-nav button:hover i {
  color: #9c9c9c;
}

.top-down {
  transform: translateY(-50px);
  visibility: hidden;
  opacity: 0;
  transition: 0.5s ease-in-out;
}

.delay-2 {
  transition-delay: 0.2s;
}

.delay-4 {
  transition-delay: 0.4s;
}

.delay-6 {
  transition-delay: 0.6s;
}

.delay-8 {
  transition-delay: 0.8s;
}

.owl-item.active .top-down {
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}
.hero-section {
  margin: 0% 3%;
}

.low-movies-slide {
  padding-top: 20px;
  padding-bottom: 5%;
}

.movie-item {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 0px 5px 0px 5px;
  background-color: #10221b;
  border-radius: 5px;
}


.movie-item img {
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s linear;
}


.movie-item2 {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 0% 2%;
  background-color: #10221b;
  border-radius: 5px;
}


.movie-item2 img {
  top: 0;
  left: 0;
  padding: ;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s linear;
}


.movie-item .movie-item-content {
  padding: 15px ;
  background-color: #000000;
}


.movie-item .movie-item-title {
  color: #615f5e;
  font-size: 1.5rem;
  position: relative;
  font-weight: 700;
}

.movie-item span {
color: white;
}


.section {
  padding-top: 80px;
}

.movie-itemku {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 25% 40%;
  cursor: pointer;
  margin: 0% 2%;
  background-color: #10221b;
  border-radius: 8px;
}


.movie-itemku img {
  position: absolute;
  border-radius: 8px;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s linear;
}




.movie-itemku :hover img {
  transform: scale(1.1);
}

.movie-itemku .movie-item-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.8);
}

.movie-itemku .movie-item-content::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 0px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.movie-itemku .movie-item-title {
  color: #615f5e;
  font-size: 1.5rem;
  position: relative;
  font-weight: 700;
}

.movie-itemku span {
color: white;
}





/* RESPONSIVE */

@media only screen and (max-width: 1280px) {


@media only screen and (max-width: 850px) {
 
  .hero-slide-item {
      height: max-content;
      padding-top: unset;
  }

  .item-content-wraper {
      width: 100%;
      height: 100%;
      padding-bottom: 20px;
      padding-right: 5rem;
      background-color: rgba(0, 0, 0, 0.2);
  }

  .hero-slide-item-content {
      position: relative;
  }

  .hero-slide-item img {
      height: 100%;
  }

  .item-content-title {
      font-size: 3rem;
  }

  .hamburger-menu {
      display: grid;
  }

  .nav-menu {
      /* display: none; */
      position: absolute;
      top: 100%;
      left: -100%;
      background-color: #000000;
      flex-direction: column;
      width: 80%;
      height: 100vh;
      padding: 20px;
      transition: 0.3s ease-in-out;
  }

  .nav-menu li {
      margin: 10px 30px;
  }

  .nav-menu.active {
      left: 0;
  }
}
}

.list-button {
  background-color:transparent;
  align-items: center;
  position: relative;
  display:grid;
  table-layout: fixed;
  text-align: center;
  margin-bottom: 5%;
  margin-top: 2%;
  margin-left: 5%;
  margin-right: 5%;
  vertical-align: middle;
}
.list-button-sub {
  vertical-align: middle;
  text-align: center;
  display: inline-block;
  margin-top: 1rem;
  padding: .8rem 2.8rem;
  font-size: 1.7rem;
  color: #fff;
  background:#9b7958;
  cursor: pointer;
  margin: 10px;
  border-radius: 1rem;
  }
  
  .list-button-sub:hover {
  background: #575757;
  color: #ffffff;
  }
  .jarak {
    margin: 5%;
  }

  .rowgalery {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .columngalery {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }
  
  .columngalery img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .columngalery {
      -ms-flex: 50%;
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .columngalery {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }

  }