@charset "UTF-8";
/* -------------------------------	
	Theme: Coffetheme
	Version : 1.0.0

	-------------------------------
	Table Of contents
	-------------------------------
	1. Google Fonts
	2. Base Styles
	3. Navbar 
	4. Button Order Menu
	5. Social Icons 
	6. Button Menu
	7. Section number 
	8. Section heading
	9. Pricing table
	10. Order Types
	11. Midpage banners 
	12. Service sections
	13. Table booking
	14. Online store
	15. Testimonials
	16. Events 
	17. Contact 
	18. Footer 
	19. Buttons 
	20. Loader 
	21. Wordpress specific classes 
	22. Form validation
	23. Home Page 
	24. Menu Page 5
	25. Blog list 
	26. Blog Details 
	27. Gallery
	28. Store 
	29. Cart 
	30. Contact 
	

------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Old+Standard+TT:400,700|Great+Vibes|Oswald:400,300,700);
/*
Base CSS
 */
 
 
a:focus {
  color: inherit; }

.form-control, textarea {
  border: 1px solid #acacac;
  box-shadow: none; }

img {
  max-width: 100%;
  height: auto; }

p {
  line-height: 1.7; }

blockquote {
  line-height: 1.8;
  border-color: #dc8068; }

.selectbox {
  background: #fff;
  position: relative;
  z-index: 15; }

.selectbox.open .selectbox_itemlist {
  display: block;
  border: 1px solid #ddd; }

.selectbox_toggle {
  padding: 8px 12px;
  border: 1px solid #acacac; }
  .selectbox_toggle.selectbox_toggle__active {
    border-color: #66afe9; }

.selectbox__arrow {
  position: absolute;
  right: 15px;
  top: 17px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 6px 0 6px;
  border-color: #727578 transparent transparent transparent;
  -webkit-transform: rotate(360deg); }

.selectbox_itemlist {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%; }

.selectbox__item {
  display: block;
  padding: 5px 5px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  cursor: pointer; }
  .selectbox__item:hover {
    background: #dc8068;
    color: #fff; }

.selectbox__item:first-child {
  border-bottom: 1px solid #ddd; }

.selectbox__input {
  display: none; }

/* 

====== Zoom effect ======

*/
.mfp-zoom-in {
  /* start state */
  /* animate in */
  /* animate out */ }
  .mfp-zoom-in .mfp-with-anim {
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8); }
  .mfp-zoom-in.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out; }
  .mfp-zoom-in.mfp-ready .mfp-with-anim {
    opacity: 1;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1); }
  .mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.8; }
  .mfp-zoom-in.mfp-removing .mfp-with-anim {
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0; }
  .mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0; }

/*
Navbar 
 */
.navbar {
  margin-bottom: 0; }
  .navbar-default {
    border: 0;
    z-index: 15; }
    @media (min-width: 1025px) and (max-width: 1440px) {
      .navbar-default {
        width: 930px;
        margin: 0 auto;
      }
    }   
    @media (min-width: 1040px)  and (max-width: 1052px) {
      .navbar-default {
        width: 740px;
        margin: 0 auto;
      }
    } 

    @media (min-width: 995px)  and (max-width: 1152px) {
      .navbar-default {
        width: 740px;
        margin: 0 auto;
      }
    } 
  .navbar-collapse.collapsing,
  .navbar-collapse.collapse {
    width: 100%;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: absolute;
    background: #fff; }
    @media (min-width: 768px) {
      .navbar-collapse.collapsing,
      .navbar-collapse.collapse {
        float: left;
        width: 100%; } }
    .navbar-collapse.collapsing ul,
    .navbar-collapse.collapse ul {
      margin-top: 0; }
  .navbar li > a {
    text-transform: uppercase;
    font-weight: 600; }
  .navbar-header {
    position: relative;
    min-height: 1px;
    padding-left: 1px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 16; }
    @media (min-width: 768px) {
      .navbar-header {
        float: left;
        width: 41.6666666667%; } }
    @media (min-width: 992px) {
      .navbar-header {
        float: left;
        width: 100%; } }
  @media (min-width: 992px) {
    .navbar li > a {
      padding-top: 35px;
      padding-bottom: 20px; } }

@media screen and (min-width: 992px) {
  .navbar-header {
    float: right; }
  .navbar-collapse.collapsing,
  .navbar-collapse.collapse {
    float: right;
    position: relative;
    background: transparent; } }

@media (min-width: 992px) {
  .navbar li:hover > ul {
    visibility: visible;
    display: block; } }

@media (min-width: 1200px) {
  .navbar-collapse.collapsing,
  .navbar-collapse.collapse {
    width: 100%; } }

.submenu {
  display: none;
  list-style-type: none;
  white-space: nowrap;
  -webkit-transition: max-height 0.4s ease, visibility 0.4s ease;
          transition: max-height 0.4s ease, visibility 0.4s ease;
  padding: 0px;
  text-align: left;
  z-index: 2; }
  .submenu li {
    width: 100%;
    position: relative; }
    @media screen and (min-width: 992px) {
      .submenu li {
        -webkit-transition: background 0.4s ease;
                transition: background 0.4s ease; }
        .submenu li:hover {
          background: #362e29; } }
    .submenu li a {
      color: #362e29;
      font-size: 13px;
      padding: 15px 25px;
      display: block; }
    .submenu li .submenu {
      top: 100%;
      left: 0; }
    .submenu li li a {
      padding: 15px 35px; }
  .submenu li .submenu {
    left: 100%;
    top: 0; }
  @media (min-width: 992px) {
    .submenu {
      top: 80%;
      height: auto;
      left: 0;
      visibility: hidden;
      position: absolute;
      background: #6e5c50; }
      .submenu li a {
        color: #000000; } }

/*
Button order
 */
.button-order-now {
  position: relative;
  background: #362e29; }
  .button-order-now a {
    color: #fff !important; }
    .button-order-now a:hover {
      color: #fff !important; }
      .button-order-now a:hover:before {
        color: #fff !important; }

@media screen and (min-width: 992px) {
  .button-order-now {
    max-width: 70px;
    margin-right: 15px;
    margin-left: 15px; }
    .button-order-now a {
      text-align: center;
      padding-top: 40px !important;
      padding-bottom: 5px !important;
      padding-left: 0 !important;
      padding-right: 0 !important; }
    .button-order-now:before {
      position: absolute;
      top: 12px;
      left: 0;
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      width: 100%;
      font-size: 22px;
      color: #fff;
      text-align: center;
      content: "";
      -webkit-transition: top 0.4s ease-in-out;
              transition: top 0.4s ease-in-out; }
    .button-order-now:hover:before {
      top: 10px; } }

/*
Social Icons
 */
.social-icons {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 60px;
  z-index: 50; }
  .social-icons [class^="icon-"] {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 50px;
    text-align: center; }
    .social-icons [class^="icon-"]:before {
      display: inline-block;
      font-size: 2em;
      padding: 5px;
      margin: 5px 0;
      width: 1.3em;
      height: 1.3em;
      text-align: center;
      color: #fff;
      border-radius: 50%; }
  .social-icons .icon-facebook {
    background: #3b5998; }
    .social-icons .icon-facebook:before {
      content: ""; }
  .social-icons .icon-twitter {
    background: #55acee; }
    .social-icons .icon-twitter:before {
      content: ""; }
  .social-icons .icon-googleplus {
    background: #dd4b39; }
    .social-icons .icon-googleplus:before {
      content: ""; }
  .social-icons .icon-dribble {
    background: #ea4c89; }
    .social-icons .icon-dribble:before {
      content: ""; }

@media screen and (min-width: 768px) {
  .social-icons {
    display: block; } }

@media screen and (min-width: 992px) {
  .social-icons .icon-facebook,
  .social-icons .icon-twitter,
  .social-icons .icon-googleplus,
  .social-icons .icon-dribble {
    -webkit-transition: background 0.4s ease-in-out;
            transition: background 0.4s ease-in-out; }
    .social-icons .icon-facebook:hover,
    .social-icons .icon-twitter:hover,
    .social-icons .icon-googleplus:hover,
    .social-icons .icon-dribble:hover {
      background: #718dc8; }
  .social-icons .icon-twitter:hover {
    background: #b2d9f7; }
  .social-icons .icon-googleplus:hover {
    background: #ec9a90; }
  .social-icons .icon-dribble:hover {
    background: #f5a7c5; } }

/*
Button Menu
 */
.button-menu {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  width: 84px;
  height: 118px;
  background: #362e29 url("../images/banner/button-menu.gif") no-repeat center;
  font-size: 16px;
  text-align: center;
  line-height: 118px;
  color: #fff;
  text-transform: uppercase; }
  .button-menu:before {
    content: '';
    position: absolute;
    top: 30%;
    left: 30%;
    width: 40%;
    height: 40%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
            transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
  .button-menu:hover {
    color: #fff; }
    .button-menu:hover:before {
      top: 10%;
      left: 10%;
      width: 80%;
      height: 80%;
      opacity: 1; }

@media screen and (min-width: 768px) {
  .button-menu {
    display: block; } }

.fa-shopping-cart {
  font-size: 20px;
  vertical-align: text-bottom;
  position: relative; }
  .fa-shopping-cart span {
    font-family: "Open Sans", sans-serif;
    position: absolute;
    bottom: 60%;
    font-size: 14px;
    background-color: #362e29;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    padding: 3px 0;
    right: -11px;
    color: #fff; }

/*
Section number
 */
 .section-number {
  position: relative;
  display: block;
  margin: 0 auto;
  padding-top: 70px; /* Padding to move the number down */
  width: 75px; /* Set a fixed width */
  height: 118px; /* Set a fixed height */
  background: #ffcc00; /* Yellow background color */
  text-align: center;
  font-family: "Old Standard TT", serif;
  font-size: 16px; /* Font size for the number */
  color: #fff; /* White text color */
  border-radius: 0px; /* Rounded corners for the section number */
}

/* Styling for the pseudo-element (before) that adds the beans image */
.section-number:before {
  content: '';
  position: absolute;
  width: 100%; /* Ensure it covers the full width of the container */
  top: 30px; /* Position the beans image below the number */
  left: 0;
  height: 23px; /* Set height for the beans image */
  background: url("../images/beans.gif") no-repeat center; /* Background image */
  background-size: contain; /* Ensure the image scales appropriately */
}

/* Responsive adjustments for smaller screen sizes */
@media screen and (max-width: 768px) {
  .section-number {
    width: 60px; /* Reduce the width for mobile */
    height: 100px; /* Reduce the height for mobile */
    font-size: 14px; /* Smaller font size for mobile */
    margin: 0 1px;/* Change to absolute for custom positioning */
    top: 20px; /* Move the section number down */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure it is perfectly centered */
  }

  .section-number:before {
    height: 20px; /* Adjust the height of the image for mobile */
  }
}

@media screen and (max-width: 480px) {
  .section-number {
    width: 50px; /* Further reduce the width on very small screens */
    height: 80px; /* Further reduce the height */
    font-size: 12px; /* Make the font size smaller */
    padding-top: 40px; /* Adjust top padding */
    top: 10px; /* Further adjust the vertical position */
    transform: translateX(-50%); /* Ensure it is centered */
    margin-left: 3px;
    margin-top: 20px;
  }

  .section-number:before {
    height: 18px; /* Further adjust the height of the image */
  }
}



/*
Section heading
 */
.section-heading {
  position: relative;
  text-align: center;
  color: #664d42; }
  .section-heading h1 {
    position: relative;
    font-family: "Old Standard TT", serif;
    font-size: 51px; }
    .section-heading h1 span {
      position: relative;
      background: #fff;
      padding: 0 18px;
      z-index: 2; }
    .section-heading h1:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0%;
      width: 100%;
      height: 50%;
      height: calc(50% - 1px);
      border-bottom: 1px dashed #b4462a;
      z-index: 1; }
  .section-heading h2 {
    font-family: "Great Vibes", cursive;
    font-size: 80px; }
  .section-heading.with-gray h1 span {
    background-color: #F7F7F7; }

/*------------------------------------*/
@media screen and (min-width: 480px) {
  .section-heading h1:before {
    left: 10%;
    width: 80%; 
    
  } }

  @media screen and (max-width: 480px) {
    .section-heading h1 {
      font-size: 30px; /* Ukuran font lebih kecil untuk "Our Special" */
      margin-bottom: 8px; /* Kurangi jarak bawah */
    }
  
    .section-heading h1 span {
      padding: 0 6px; /* Kurangi padding agar lebih pas */
    }
  
    .section-heading h2 {
      font-size: 36px; /* Ukuran font lebih kecil untuk "Menu" */
      margin-top: 8px; /* Kurangi jarak atas */
    }
  }

  @media screen and (min-width: 481px) and (max-width: 1023px) {
    .section-heading h1 {
      font-size: 36px; /* ukuran sedang untuk tablet */
    }
  
    .section-heading h1 span {
      padding: 0 10px; /* sedikit lebih longgar dari mobile */
    }
  
    .section-heading h2 {
      font-size: 48px; /* lebih kecil dari desktop */
    }
  }
  

/*------------------------------------*/
.section-heading-type2 h2 {
  font-family: "Old Standard TT", serif;
  font-size: 50px; /* Default untuk desktop */
  color: #3f3530;
}

.section-heading-type2 h5 {
  color: #7a7a7a;
}

.section-heading-type2 p {
  color: #7a6c66;
}

/* Gaya untuk tampilan mobile */
@media (max-width: 768px) {
  .section-heading-type2 h2 {
    font-size: 28px; /* Ukuran lebih kecil untuk layar mobile */
    line-height: 1.4; /* Menambahkan jarak antar baris untuk keterbacaan */
  }

  .section-heading-type2 h5 {
    font-size: 16px; /* Ukuran lebih kecil untuk subheading */
  }

  .section-heading-type2 p {
    font-size: 14px; /* Ukuran lebih kecil untuk paragraf */
    line-height: 1.6; /* Jarak antar baris */
  }
}

/*
Pricing Table
 */
.pricing-table {
  background: #f1c152;
  margin: 0 -15px;
  margin-top: 80px; }
  .pricing-table.type-2, .pricing-table.type-2 .pricing-detail {
    background-color: #68cfaf; }
  .pricing-table.type-3, .pricing-table.type-3 .pricing-detail {
    background-color: #d2d86f; }
  .pricing-table.type-4, .pricing-table.type-4 .pricing-detail {
    background-color: #83bed7; }
  .pricing-table.type-5, .pricing-table.type-5 .pricing-detail {
      background-color: #f895c7; }
    
    

.pricing-detail {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding: 25px 15px;
  background: #f1c152;
  color: #362e29;
  margin-top: 15px; 
}
  .pricing-detail:before,
  .pricing-detail:after {
    content: " ";
    display: table; }
  .pricing-detail:after {
    clear: both; }
  @media (min-width: 992px) {
    .pricing-detail {
      float: left;
      width: 33.3333333333%; } }
  .pricing-detail figure {
    text-align: left; }
    .pricing-detail figure .image {
      text-align: center;
      position: relative;
      float: left;
      width: 50%;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px; }
      @media (min-width: 768px) {
        .pricing-detail figure .image {
          float: left;
          width: 33.3333333333%; } }
      @media (min-width: 992px) {
        .pricing-detail figure .image {
          float: left;
          width: 100%; } }
    .pricing-detail figure img {
      max-height: 200px; }
  .pricing-detail figcaption {
    position: relative;
    float: left;
    width: 50%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    /*width: 80%;*/
    margin: 0 auto; }
    @media (min-width: 768px) {
      .pricing-detail figcaption {
        float: left;
        width: 66.6666666667%; } }
    @media (min-width: 992px) {
      .pricing-detail figcaption {
        float: left;
        width: 100%; } }

        
  .pricing-detail h3 {
    font-family: "Old Standard TT", serif;
    font-size: 30px; }
  .pricing-detail p {
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-style: italic; }
/*------------------------------------*/
/* Gaya untuk tampilan mobile (layar lebih kecil dari 768px) */
@media screen and (max-width: 767px) {
  .pricing-detail h3,
  .pricing-detail p {
    text-align: center; /* Teks menjadi rata tengah */
  }
}


.pricing-carte {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #3f3530;
  color: #b9a39a;
  overflow-y: scroll; }
  @media (min-width: 992px) {
    .pricing-carte {
      float: left;
      width: 66.6666666667%; } }
  .pricing-carte .cuisine-wrapper {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px; }
    @media (min-width: 768px) {
      .pricing-carte .cuisine-wrapper {
        float: left;
        width: 50%; } }
  .pricing-carte .cuisine {
    border-bottom: 1px dotted #56453f;
    padding: 22px 0; }
    .pricing-carte .cuisine-name, .pricing-carte .cuisine-price {
      font-family: "Old Standard TT", serif;
      font-size: 15px;
      font-weight: 600; }
    .pricing-carte .cuisine-heart, .pricing-carte .cuisine-detail {
      font-family: "Open Sans", sans-serif;
      font-size: 13px;
      font-style: italic;
      margin-top: 10px; }
    .pricing-carte .cuisine-heart {
      color: #dc8068;
      text-align: center;
      padding: 10px 0; }
      .pricing-carte .cuisine-heart i {
        font-size: 22px;
        margin-right: 5px;
        vertical-align: sub; }
    .pricing-carte .cuisine-detail {
      color: #9a847b; }
  .pricing-carte .card-left {
    width: calc(100% - 115px);
    float: left; }
  .pricing-carte .card-right {
    float: right;
    width: 100px; }


    

.pricing-table .slimScrollDiv,
.pricing-carte {
  height: 300px !important; }

@media screen and (min-width: 768px) {
  .cuisine-wrapper:nth-of-type(odd) {
    clear: left; } }

@media screen and (min-width: 992px) {
  .pricing-table {
    margin-left: -15px;
    margin-right: -15px;
    height: 400px; }
    .pricing-table:before,
    .pricing-table:after {
      content: " ";
      display: table; }
    .pricing-table:after {
      clear: both; }
  .pricing-detail {
    padding-top: 0;
    padding-bottom: 0; }
    .pricing-detail figure {
      margin-top: -50px;
      text-align: center; }
      .pricing-detail figure img {
        max-height: none;
        padding: 10px; }
  .pricing-carte {
    overflow-y: scroll; }
  .pricing-table .slimScrollDiv,
  .pricing-carte {
    height: 100% !important; } }

@media screen and (max-width: 479px) {
  .pricing-carte .cuisine-wrapper {
    padding: 0; }
  .pricing-carte .cuisine {
    padding: 15px 0; }
  .pricing-carte .card-left, .pricing-carte .card-right {
    width: 100%; }
  .pricing-carte .card-right {
    margin-top: 10px; }
  .pricing-carte .cuisine-price {
    float: left; }
  .pricing-carte .cuisine-heart {
    float: right;
    margin: 0;
    padding: 5px 0; }
  .pricing-detail figure img {
    max-height: 200px; }
  .pricing-detail figcaption, .pricing-detail figure .image {
    width: 100%; } }

@media screen and (max-width: 767px) {
  .pricing-table {
    margin: 0; } }

@media screen and (min-width: 992px) {
  .pricing-detail figcaption {
    margin-top: -40px; }
  .image-not-overlap figure {
    margin-top: 0px; }
  .image-not-overlap figcaption {
    margin-top: -20px; } }

/* PICK BUTTONS */
.menu-btn-holder {
  text-align: right; }
  .menu-btn-holder a {
    display: inline-block;
    margin: 10px 0 0 10px;
    padding: 10px 5px;
    width: 100px;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid #3f3530;
    color: #3f3530; }
    .menu-btn-holder a.active {
      color: #fff;
      background-color: #82ca9c;
      border: 1px solid #82ca9c; }
      .menu-btn-holder a.active i {
        margin-right: 10px; }

/*
Order Types
 */
.order-types-available .order-type-wrapper {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 768px) {
    .order-types-available .order-type-wrapper {
      float: left;
      width: 33.3333333333%; } }

.order-types-available .type-one {
  background-color: #68d0af; }

.order-types-available .type-two {
  background-color: #d2d86f; }

.order-types-available .type-three {
  background-color: #83bed7; }

  

.order-types-available .order-type {
  text-align: center;
  padding: 20px 10px; }
  .order-types-available .order-type h3 {
    font-family: "Old Standard TT", serif;
    font-size: 30px; }
    .order-types-available .order-type h3 span {
      display: block;
      font-family: "Great Vibes", cursive;
      font-size: 60px; }
      @media (max-width: 767px) {
        .order-types-available .order-type h3 {
          font-size: 24px; /* Sesuaikan ukuran teks untuk judul */
          text-align: center; /* Rata tengah judul */
          margin-bottom: 10px; /* Tambahkan jarak bawah */
        }
      
        .order-types-available .order-type h3 span {
          font-size: 40px; /* Sesuaikan ukuran teks untuk teks besar */
          text-align: center; /* Rata tengah teks */
          display: block; /* Pastikan teks tampil sebagai blok */
          margin-top: 5px; /* Tambahkan jarak atas */
        }
      }
      
  .order-types-available .order-type figure {
    text-align: center; }
    .order-types-available .order-type figure:before,
    .order-types-available .order-type figure:after {
      content: " ";
      display: table; }
    .order-types-available .order-type figure:after {
      clear: both; }
    .order-types-available .order-type figure .img-holder {
      position: relative;
      float: left;
      width: 33.3333333333%;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px; }
      @media (min-width: 768px) {
        .order-types-available .order-type figure .img-holder {
          float: left;
          width: 100%; } }
      .order-types-available .order-type figure .img-holder img {
        max-height: 220px;
        width: auto;
        max-width: 100%; }
    .order-types-available .order-type figure figcaption {
      position: relative;
      float: left;
      width: 66.6666666667%;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
      float: right; }
      @media (min-width: 768px) {
        .order-types-available .order-type figure figcaption {
          float: left;
          width: 100%; } }
      @media (min-width: 992px) {
        .order-types-available .order-type figure figcaption {
          float: left;
          width: 100%; } }

/*----------------------------------------------*/
@media screen and (max-width: 767px) {
  .order-types-available {
    margin: 60px 0; } }

/*----------------------------------------------*/
@media screen and (min-width: 768px) {
  .order-types-available {
    margin-top: 50px;
    margin-bottom: 50px; }
    .order-types-available .order-type figure img {
      float: none;
      width: auto;
      padding: 0;
      height: 220px;
      -webkit-transition: -webkit-transform 0.4s ease-in-out;
              transition: transform 0.4s ease-in-out; }
    .order-types-available .order-type figure .img-holder {
      padding: 0; }
    .order-types-available .order-type h3 {
      margin-top: 0; }
    .order-types-available figcaption {
      margin-top: 30px;
      padding-top: 0;
      padding-bottom: 0; } }

/*----------------------------------------------*/
@media screen and (max-width: 479px) {
  .order-types-available .order-type figure figcaption {
    width: 100%; }
  .order-types-available .order-type figure img {
    max-width: 100%;
    width: auto;
    float: none; }
  .order-types-available .order-type figure .img-holder {
    width: 100%; } }

/*----------------------------------------------*/
@media screen and (min-width: 480px) {
  .order-types-available .order-type h3 {
    margin-top: 0; }
  .order-types-available .order-type figure figcaption {
    padding-top: 30px;
    padding-bottom: 30px; } }

/*----------------------------------------------*/
@media screen and (min-width: 992px) {
  .order-types-available .order-type figure:hover img {
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2); } }

.book-order {
  border: 1px solid #000;
  padding: 15px 0; }
  .book-order .book-details {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center; }
    @media (min-width: 768px) {
      .book-order .book-details {
        float: left;
        width: 50%; } }
    @media (min-width: 992px) {
      .book-order .book-details {
        float: left;
        width: 41.6666666667%; } }
    .book-order .book-details h3 {
      font-family: "Old Standard TT", serif;
      font-size: 35px;
      margin: 10px 0 0; }
    .book-order .book-details h5 {
      font-family: "Open Sans", sans-serif;
      font-size: 12px;
      font-style: italic;
      margin: 0 0 20px; }
  .book-order .order-number {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center; }
    @media (min-width: 768px) {
      .book-order .order-number {
        float: left;
        width: 50%; } }
    @media (min-width: 992px) {
      .book-order .order-number {
        margin-left: 8.3333333333%; } }
    @media (min-width: 992px) {
      .book-order .order-number {
        float: left;
        width: 50%; } }
    .book-order .order-number h2 {
      font-family: "Old Standard TT", serif;
      font-size: 25px; }

/*----------------------------------------------*/
@media screen and (min-width: 992px) {
  .book-order .book-details {
    text-align: right; } }

/*----------------------------------------------*/
@media screen and (min-width: 768px) {
  .book-order {
    padding: 30px 0; }
    .book-order .order-number {
      position: relative; }
      .book-order .order-number:before {
        content: '';
        position: absolute;
        left: 0;
        height: 100%;
        width: 1px;
        background-color: #000;
        top: 5px;
        -webkit-transform: rotate(20deg);
            -ms-transform: rotate(20deg);
                transform: rotate(20deg); }
      .book-order .order-number h2 {
        font-size: 45px; } }

/*----------------------------------------------*/
@media screen and (min-width: 1200px) {
  .book-order .book-details h3 {
    font-size: 40px; } }

/*
Midpage banners 
 */



 
.banner-section {
  padding: 25px 0;
  background-color: #362e29; }
  .banner-section p {
    color: #c7a298;
    font-size: 14px;
    margin: 30px auto; }
  .banner-section h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 40px; }

/*-----------------------------------------*/
.midpage-banner1 {
  background: url("../images/mid-banner1-bg.jpg") center no-repeat;
  background-size: cover;
  text-align: center;
   }
  .midpage-banner1 .container {
    position: relative; }
  .midpage-banner1 img {
    height: 370px; }

    @media screen and (max-width: 768px) {
      .midpage-banner1 img {
        height: auto; /* Biarkan tinggi menyesuaikan proporsi */
        max-height: 400px; /* Batasi tinggi agar tidak terlalu panjang */
        width: 100%; /* Pastikan gambar memenuhi lebar layar */
        object-fit: cover; /* Pastikan gambar tetap rapi */
      }
    }
    
  .midpage-banner1 .img-holder {
    position: relative;
    
  }
  .midpage-banner1 .cup, .midpage-banner1 .milk, .midpage-banner1 .milk-drop {
    position: absolute;
    opacity: 0;
    display: none; }
  .midpage-banner1 .cup {
    bottom: 5%;
    max-width: 81%;
    left: 0; }
  .midpage-banner1 .milk {
    top: 0;
    left: 5%;
    max-width: 100%; }
  .midpage-banner1 .milk-drop {
    top: 46%;
    left: 40%; }
  .midpage-banner1 .banner1-details {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding: 50px 0; }

@media (max-width: 767px) {
  .banner1-details {
    text-align: center; /* Pusatkan semua teks dan elemen dalam div */
    padding: 20px; /* Tambahkan padding untuk ruang yang nyaman */
    background-color: #f9f9f9; /* Tambahkan latar belakang terang untuk kontras */
    border-radius: 10px; /* Berikan sudut melengkung */
    margin: 15px; /* Tambahkan jarak di sekitar elemen untuk spasi */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan halus untuk kesan modern */
  }

  .banner1-details h3 {
    font-size: 18px; /* Ukuran font yang nyaman di layar kecil */
    color: black; /* Warna teks tetap hitam */
    margin-bottom: 10px; /* Jarak antar elemen h3 */
    line-height: 1.5; /* Tinggi baris untuk keterbacaan */
  }

  .banner1-details p {
    font-size: 16px; /* Ukuran font sedikit lebih kecil untuk deskripsi */
    color: #555; /* Warna abu-abu gelap untuk deskripsi */
    margin-bottom: 15px; /* Jarak bawah untuk elemen p */
    
  }

  .banner1-details .button-type-three {
    display: inline-block; /* Tampilkan tombol sebagai elemen blok inline */
    background-color: #3f3530; /* Warna latar tombol */
    color: #fff; /* Warna teks tombol */
    font-size: 16px; /* Ukuran font tombol */
    padding: 10px 20px; /* Spasi dalam tombol */
    border-radius: 5px; /* Sudut melengkung pada tombol */
    text-decoration: none; /* Hilangkan garis bawah */
    margin-top: 10px; /* Jarak atas untuk tombol */
  }

  .banner1-details .button-type-three:hover {
    background-color: #fff; /* Warna latar tombol saat dihover */
  }
}



    @media (min-width: 768px) {
      .midpage-banner1 .banner1-details {
        margin-left: 50%; } }
    @media (min-width: 768px) {
      .midpage-banner1 .banner1-details {
        float: left;
        width: 50%; } }
  .midpage-banner1 h3 {
    margin: 0; }
  .midpage-banner1 p {
    margin: 30px 0;
    font-style: italic; }
  .midpage-banner1 .button-primary {
    background-color: #dc8068;
    color: #fff; }
  @media screen and (min-width: 768px) {
    .midpage-banner1 {
      text-align: center; }
      .midpage-banner1 > .container {
        height: 700px; }
      .midpage-banner1 .img-holder {
        position: absolute;
        left: 0;
        top: 0;
        height: 70%; }
      .midpage-banner1 .milk-cup {
        opacity: 0; }
      .midpage-banner1 .cup, .midpage-banner1 .milk, .midpage-banner1 .milk-drop {
        display: block; }
      .midpage-banner1 .milk {
        max-height: 0%;
        overflow: hidden;
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 100%;
        -webkit-transition: all 1.5s ease-out;
                transition: all 1.5s ease-out;
        opacity: 1 !important; }
        .midpage-banner1 .milk.animate {
          max-height: 57%; }
      .midpage-banner1 .milk-drop {
        -webkit-transition: opacity 0.3s ease;
                transition: opacity 0.3s ease; }
        .midpage-banner1 .milk-drop.appear {
          opacity: 1; }
      .midpage-banner1 img {
        max-height: 100%;
        height: auto; }
      .midpage-banner1 .banner1-details {
        text-align: right;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%); } }
  @media screen and (min-width: 1200px) {
    .midpage-banner1 .button-type-three {
      position: relative;
      top: 30px; } }

.midpage-banner2 {
  background: url("../images/mid-banner2-bg.jpg") center no-repeat;
  background-size: cover;
  text-align: center; }
  .midpage-banner2 h3 {
    margin: 0; }
    .midpage-banner2 h3 span {
      text-transform: initial;
      font-family: "Great Vibes", cursive;
      font-size: 80px;
      color: #362e29; }
  .midpage-banner2 p {
    font-style: italic; }
  .midpage-banner2 a {
    background-color: #362e29;
    color: #fff; }
  @media screen and (min-width: 992px) {
    .midpage-banner2 p {
      width: 80%; } }
  @media screen and (min-width: 1200px) {
    .midpage-banner2 {
      padding: 100px 0; }
      .midpage-banner2 .button-type-three {
        margin-top: 20px;
        display: inline-table; } }

.midpage-banner3 {
  text-align: center; }
  .midpage-banner3 h3 {
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-size: 40px;
    margin: 0; }
  .midpage-banner3 p {
    margin: 5px 0; }

.offer-detail {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 992px) {
    .offer-detail {
      float: left;
      width: 66.6666666667%; } }
  .offer-detail figcaption {
    margin: 30px 0; }

.coupon-code {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 992px) {
    .coupon-code {
      float: left;
      width: 33.3333333333%; } }

.code-wrapper {
  padding: 15px;
  text-align: center; }

.coupon {
  display: block;
  border: 1px dashed #000;
  display: inline-block; }
  .coupon img {
    display: none; }
  .coupon span {
    display: block;
    color: #3f3530;
    font-size: 20px; }

/*----------------------------------------------*/
@media screen and (min-width: 768px) {
  .midpage-banner3 {
    text-align: left;
    padding: 25px 0; }
  .offer-detail img {
    display: inline-block;
    margin-right: 30px; }
  .offer-detail figcaption {
    display: inline-block;
    vertical-align: middle;
    width: 65%; } }

/*----------------------------------------------*/
@media screen and (min-width: 992px) {
  .coupon {
    background-color: transparent !important;
    display: block; }
    .coupon img {
      display: block;
      margin: 15px auto; }
    .coupon span {
      margin-bottom: 20px; }
  .offer-detail figcaption {
    margin: 0; }
  .code-wrapper {
    background-color: #fff; } }

/*----------------------------------------------*/
@media screen and (max-width: 992px) {
  .midpage-banner3 p {
    margin: 0; }
  .midpage-banner3 h3 {
    margin: 15px 0; } }

/*----------------------------------------------*/
@media screen and (min-width: 1200px) {
  .offer-detail {
    margin-top: 25px; } }

.midpage-banner4 {
  text-align: center;
  background-color: #f7f7f7; }
  .midpage-banner4 .container {
    position: relative; }
  .midpage-banner4 img {
    max-width: 100%; }
  .midpage-banner4 .cap {
    position: absolute;
    left: 60%;
    top: auto;
    bottom: 0;
    max-width: 40%; }
  .midpage-banner4 .banner4-img-holder {
    position: relative;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    display: inline-block; }
    @media (min-width: 992px) {
      .midpage-banner4 .banner4-img-holder {
        float: left;
        width: 58.3333333333%; } }

.banner4-details {
  text-align: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  .banner4-details h3 {
    font-family: "Oswald", sans-serif;
    font-size: 40px;
    color: #664d42;
    font-weight: 400; }
  .banner4-details p {
    font-style: italic;
    color: #664d42;
    line-height: 1.7; }
  @media (min-width: 992px) {
    .banner4-details {
      float: left;
      width: 41.6666666667%; } }

/*----------------------------------------------*/
@-webkit-keyframes ipadanimate {
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1; } }
@keyframes ipadanimate {
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1; } }

@-webkit-keyframes capanimate {
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1; } }

@keyframes capanimate {
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1; } }

@media screen and (min-width: 992px) {
  .midpage-banner4 {
    overflow: hidden; }
  .midpage-banner4 img {
    top: 0;
    left: 0; }
  .midpage-banner4 .ipad {
    top: -50px;
    left: 0;
    -webkit-transform: translate(0, -100px);
        -ms-transform: translate(0, -100px);
            transform: translate(0, -100px);
    opacity: 0; }
    .midpage-banner4 .ipad.animated {
      -webkit-animation: ipadanimate 1s forwards;
              animation: ipadanimate 1s forwards; }
  .midpage-banner4 .cap {
    top: auto;
    bottom: 0;
    -webkit-transform: translate(150px, 0);
        -ms-transform: translate(150px, 0);
            transform: translate(150px, 0);
    opacity: 0; }
    .midpage-banner4 .cap.animated {
      -webkit-animation: capanimate 1s forwards 1s;
              animation: capanimate 1s forwards 1s; }
  .banner4-details {
    text-align: right; } }

/*----------------------------------------------*/
@media screen and (min-width: 1200px) {
  .midpage-banner4 {
    padding: 100px 0; } }

/*----------------------------------------------*/
/*
Service section
 */
.service-section {
  padding-bottom: 0; }
  .service-section .service-side-img {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    display: none;
    width: 500px;
    height: 800px;
 }



    @media (min-width: 768px) {
      .service-section .service-side-img {
        float: left;
        width: 41.6666666667%; } }
    @media (min-width: 992px) {
      .service-section .service-side-img {
        float: left;
        width: 40%; } }
  .service-section .service-details {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: right !important;
    margin-bottom: 30px; }
    @media (min-width: 768px) {
      .service-section .service-details {
        float: left;
        width: 58.3333333333%; } }
    @media (min-width: 992px) {
      .service-section .service-details {
        float: left;
        width: 50%; } }
    .service-section .service-details p {
      margin: 30px 0;
      line-height: 1.8;
      color: #7a6c66; }
  .service-section .service-wrapper {
    position: relative;
    float: left;
    width: 33.3333333333%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 15px 0;
    text-align: center;
    
  }
    @media (min-width: 992px) {
      .service-section .service-wrapper {
        float: left;
        width: 33.3333333333%; } }
  .service-section h3 {
    font-family: "Old Standard TT", serif;
    font-size: 40px;
    color: #362e29; }

.service-item {
  background: url("../images/service-item-bg.png") center no-repeat;
  background-size: contain;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  position: relative;
  color: #664d42;
  font-family: "Old Standard TT", serif;
  font-size: 26px;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.2s ease-out, color 0.4s ease-in-out;
          transition: transform 0.2s ease-out, color 0.4s ease-in-out; }
  .service-item span {
    position: absolute;
    top: 50%;
    width: 100%;
    left: 0;
    padding: 0 5px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); }
  .service-item:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    box-sizing: content-box;
    top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    opacity: 0;
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9); }
  .service-item:hover {
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
    color: #fff; }
    .service-item:hover:after {
      -webkit-animation: sonarEffect 0.5s ease-out 55ms;
      animation: sonarEffect 0.5s ease-out 55ms; }

@-webkit-keyframes sonarEffect {
  0% {
    opacity: 0.3; }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #372727, 0 0 0 10px rgba(255, 255, 255, 0.5); }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #372727, 0 0 0 10px rgba(255, 255, 255, 0.5);
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 0; } }

@keyframes sonarEffect {
  0% {
    opacity: 0.3; }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #372727, 0 0 0 10px rgba(255, 255, 255, 0.5); }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #372727, 0 0 0 10px rgba(255, 255, 255, 0.5);
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 0; } }

/*----------------------------------------------*/
@media screen and (min-width: 768px) {
  .service-section .service-side-img {
    display: inline-block; }
  .service-section .service-details {
    margin-bottom: 0; } }

/*----------------------------------------------*/
@media screen and (min-width: 992px) {
  .service-item {
    width: 150px;
    height: 150px; }
    .service-item:hover {
      color: #dc8068; } }

/*----------------------------------------------*/
@media screen and (max-width: 479px) {
  .service-section .service-wrapper {
    width: 50%;
    margin: 5px 0; } }

/*----------------------------------------------*/
/*
Table Booking
 */
.reservation-form {
  margin: 80px 0 0;
  background-color: #f7f7f7; }
  .reservation-form .imgLiquid {
    height: 300px; }
  .reservation-form .imgLiquid, .reservation-form form {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px; }
    @media (min-width: 992px) {
      .reservation-form .imgLiquid, .reservation-form form {
        float: left;
        width: 50%; } }
  .reservation-form form {
    background: #f7f7f7;
    padding: 30px 20px; }
  .reservation-form h3 {
    margin-bottom: 40px;
    font-family: "Old Standard TT", serif;
    font-size: 40px;
    color: #4e3b32; }
    .reservation-form h3 span {
      display: block; }
  .reservation-form label {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #4e3b32;
    margin: 15px 0; }
  .reservation-form button {
    float: right; }
  .reservation-form img {
    padding: 0; }
  .reservation-form .name-sectn, .reservation-form .mail-sectn {
    position: relative;
    float: left;
    width: 50%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px; }
  .reservation-form .form-control {
    height: 40px;
    border-radius: 0px; }
  .reservation-form textarea.form-control {
    resize: none;
    width: 100%;
    padding: 10px;
    height: 100px; }
  .reservation-form .reservation-for, .reservation-form .occassion {
    position: relative;
    float: left;
    width: 50%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px; }
    @media (min-width: 992px) {
      .reservation-form .reservation-for, .reservation-form .occassion {
        float: left;
        width: 100%; } }
  .reservation-form button {
    outline: none;
    box-shadow: 0 0 0 0;
    border-color: #362e29; }
    .reservation-form button:focus,
    .reservation-form button:hover {
      outline: 0;
      box-shadow: 0 0 0 0;
      border-color: #362e29; }

@media screen and (min-width: 992px) {
  .reservation-form form {
    padding: 30px 45px; }
  .reservation-form .imgLiquid {
    height: 100%; }
  .reservation-form button {
    -webkit-transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
            transition: background 0.4s ease-in-out, color 0.4s ease-in-out; }
    .reservation-form button:hover {
      background: #fff;
      color: #362e29; } }

/*------------------------------------*/
@media screen and (max-width: 479px) {
  .reservation-form .reservation-for,
  .reservation-form .occassion,
  .reservation-form .name-sectn,
  .reservation-form .mail-sectn {
    width: 100%; } }

/*------------------------------------*/
@media screen and (min-width: 1200px) {
  .reservation-form form {
    padding: 30px 65px; } }

/*
Online store
 */
.categories {
  padding: 0; }
  .categories li {
    position: relative;
    float: left;
    width: 33.3333333333%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
    text-align: center;
    list-style: none; }
    @media (min-width: 992px) {
      .categories li {
        float: left;
        width: 16.6666666667%; } }
  .categories button, .categories a {
    display: block;
    padding: 15px 5px;
    border: 1px solid #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
    background: transparent; }
  .categories button.selected {
    background: #362e29;
    color: #fff;
    border-color: #362e29;
    letter-spacing: 4px; }
  .categories button:focus {
    box-shadow: 0 0 0 0;
    outline: 0; }

.store-product-list {
  margin-top: 60px;
  margin-bottom: 60px;
  
 }
 /*//////////////////KEPOTONG//////////////////////////////  */

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

.store-product .add-cart {
  background-color: #5c4543;
  -webkit-transition: background, color 0.5s ease;
          transition: background, color 0.5s ease; }
  .store-product .add-cart:hover, .store-product .add-cart:focus {
    background-color: #886663; }
  .store-product .add-cart.cart-added {
    position: relative;
    color: transparent;
    font-size: 0; }
    .store-product .add-cart.cart-added:before,
    .store-product .add-cart.cart-added:after {
      display: inline-block;
      vertical-align: middle;
      color: #e6a391;
      -webkit-animation: moveUp 0.5s;
              animation: moveUp 0.5s; }
    .store-product .add-cart.cart-added:before {
      content: "";
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 18px; }
    .store-product .add-cart.cart-added:after {
      content: 'Added';
      margin-left: 10px;
      font-size: 14px; }

.store-product .buy-btn {
  background-color: #dc8068;
  color: #fff;
  -webkit-transition: background 0.3s ease;
          transition: background 0.3s ease; }
  .store-product .buy-btn:hover, .store-product .buy-btn:focus {
    background-color: #c94f2f;
    color: #fff; }

.store-product a {
  text-align: center;
  padding: 15px 5px; }
  .store-product a:hover, .store-product a:focus {
    color: #e6a391;
    text-decoration: none; }

.store-product-wrapper {
  width: 100%;
  padding: 0 10px; }
  .store-product-wrapper .product-rate {
    position: absolute;
    top: -30px;
    left: 15px;
    height: 60px;
    line-height: 60px;
    width: 80px;
    border-radius: 50%;
    /* background-color: #dc8068; */
    text-align: center;
    z-index: 2;
    font-family: "Open Sans", sans-serif;
    color: #000000;
    font-weight: 600;
    font-size: 20px; }

.store-product .imgLiquid {
  height: 300px;
  position: relative;
  overflow: hidden; }
  @media screen and (min-width: 992px) { 
    .store-product .imgLiquid {
      background-size: contain !important; /* Pastikan seluruh gambar terlihat */
      background-repeat: no-repeat;
      background-position: center;
      width: 97%; /* Isi lebar container */
      height: auto; /* Biarkan tinggi menyesuaikan */
      min-height: 300px; /* Pastikan gambar cukup besar */
      max-height: 500px; /* Hindari gambar terlalu besar */
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden; /* Hindari bagian gambar keluar */
    }
}

  
  .store-product .imgLiquid:after {
    content: '';
    position: absolute;
    top: 34%;
    left: 31%;
    cursor: pointer;
    border-radius: 50px;
    border-width: 50px;
    display: inline-block;
    height: 100px;
    width: 100px;
    border: 0px solid rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
    opacity: 0.7;
    visibility: visible;
    -webkit-transform: scale(4);
    -ms-transform: scale(4);
    transform: scale(4);
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out; }

.store-product:hover .imgLiquid:after {
  opacity: 0;
  border: 50px solid rgba(255, 255, 255, 0.7);
  visibility: hidden; }

.add-buy a {
  display: block;
  width: 50%;
  float: left; }

.add-cart {
  color: #e6a391; }

.product-detail {
  border-radius: 16px; /* tambahkan ini */
  background-color: #3f3530;
  padding: 40px 15px;
  position: relative; }
  .product-detail h3 {
    color: #fff;
    margin-top: 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
    font-size: 11px; }
    .product-detail p {
      color: #e6a391;
      margin: 0;
      /* line-height: 1,2;  */
  }
  
  
  

@media screen and (max-width: 479px) {
  .categories li {
    width: 50%; } }

/*----------------------------------------------*/
@media screen and (min-width: 480px) {
  .store-product-wrapper {
    width: 50%; } }

/*----------------------------------------------*/
@media screen and (min-width: 768px) {
  .store-product-wrapper {
    width: 33.33%;
  
  } }


/* ..............,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,..MOBILEEE PRODUK.......................................................................... */
@media screen and (max-width: 767px) {
  .store-product-wrapper {
      display: flex;
      align-items: center;
      gap: 14px; /* Jarak antara gambar dan teks */
      padding: 10px 0; /* Mengurangi jarak atas & bawah */
      background: none !important; /* Hapus background */
  }

  .store-product {
      display: flex;
      align-items: center;
      gap: -50px;
      width: 100%;
      padding-left: 10px;
      margin-bottom: -30px; /* Atur jarak antar produk */
      margin-top: -20px;
  }

  .item-image {
    width: 94px; /* Ukuran gambar di mobile */
    height: auto; /* Biarkan tinggi mengikuti proporsi gambar */
    max-height: 92px; /* Batasi tinggi gambar agar tetap proporsional */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


  .item-image img {
      width: 100%;
      height: auto;
      object-fit: contain; /* Pastikan gambar tidak terpotong */
  }

  .product-detail {
      flex: 1;
      padding-right: 8px;
      padding-left: -50px;
      background: none !important; /* Hapus background */
  }

  .product-detail h3 {
      font-size: 16px;
      font-weight: bold;
      margin: 0 0 3px;
      color: #333;
  }

  .product-detail p {
      font-size: 12px;
      color: #666;
      margin: 0;
      line-height: 1.3;
  }
}

/* //////////////////////////////////////POP UP PRODUK //////////////////////////////////////////////////////////*/

/* Default: Sembunyikan tombol panah di desktop */
.mobile-arrow-button {
    position: absolute;
    right: 30px; /* Geser ke kanan */
    bottom: 0; /* Geser ke bawah */
    font-size: 18px;
    color: #4CAF50; /* Warna hitam */
}

.mobile-arrow-button i {
  transition: transform 0.3s ease;
}

.mobile-arrow-button:hover i {
  transform: translateX(5px);
}

/* Hanya tampilkan tombol panah di tampilan mobile */
@media screen and (max-width: 767px) {
  .mobile-arrow-button {
      display: inline-flex;
  }
}


/*////////////////////////////////// Styling khusus untuk popup produk //////////////////////////////////////////////*/
.popup-product {
  display: none; /* Default: tersembunyi */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-product-content {
  background: white;
  padding: 20px;
  width: 80%;
  max-width: 350px;
  border-radius: 10px;
  text-align: center;
  position: relative;
}

.popup-product-content img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

.popup-product-content h3 {
  font-size: 18px;
  margin-bottom: 5px;
}

.popup-product-content p {
  font-size: 14px;
  color: #666;
}

.popup-product-close-btn {
  position: absolute;
  top: -15px;
  right: 1px;
  font-size: 35px;
  cursor: pointer;
}

/* Hanya tampil di mobile */
@media screen and (max-width: 767px) {
  

  .mobile-arrow-button {
      display: inline-flex;
  }
}

/* Sembunyikan di desktop */
@media screen and (min-width: 768px) {
  .popup-product {
      display: none !important;
  }

  .mobile-arrow-button {
      display: none;
  }
}


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


/*----------------------------------------------*/
@media screen and (min-width: 992px) {
  .store-product-wrapper {
    width: 25%; }
  .categories button {
    -webkit-transition-property: background, letter-spacing, color, border-color;
            transition-property: background, letter-spacing, color, border-color;
    -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out; }
    .categories button:hover {
      background: #362e29;
      letter-spacing: 4px;
      color: #fff;
      border-color: #362e29; } }

/*----------------------------------------------*/
.productPage .categories {
  margin-top: 50px; }

@-webkit-keyframes moveUp {
  0% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    opacity: 0; }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes moveUp {
  0% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    opacity: 0; }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

/*
Testimonials
 */
.testimonial-sectn {
  background: url("../images/testimonial-bg.jpg") center bottom no-repeat;
  background-size: cover; }

.testimonial {
  margin-top: 60px;
  margin-bottom: 60px; }
  .testimonial ul {
    padding: 0; }
  .testimonial li {
    padding: 0 15px;
    list-style: none; }

.testimonial-owl {
  overflow: hidden; }
  .testimonial-owl .owl-item {
    display: inline-block; }

.testimonial-text {
  text-align: center; }
  .testimonial-text h3 {
    font-family: "Oswald", sans-serif;
    font-size: 40px;
    font-weight: 300;
    color: #664d42; }
  .testimonial-text P {
    color: #664d42; }

.testimonial-item .imgLiquid {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  margin: 0 auto; }

.testimonial-item .name-text {
  text-align: center; }
  .testimonial-item .name-text h3 {
    font-family: "Old Standard TT", serif;
    font-size: 25px;
    color: #664d42;
    font-weight: 400;
    text-transform: capitalize; }
  .testimonial-item .name-text p {
    font-style: italic;
    color: #856456;
    line-height: 1.7; }

@media screen and (min-width: 768px) {
  .testimonial-item .imgLiquid {
    float: left; }
  .testimonial-item .name-text {
    width: calc(100% - 180px);
    float: right;
    text-align: left; }
  .testimonial-text {
    text-align: left; }
    .testimonial-text img {
      width: 160px;
      margin-right: 15px;
      height: auto;
      display: inline-block; }
    .testimonial-text figcaption {
      display: inline-block;
      width: calc(100% - 180px);
      vertical-align: middle; } }

@media screen and (min-width: 992px) {
  .testimonial-text {
    width: 100%;
    text-align: center; }
    .testimonial-text h3 {
      margin-bottom: 20px; } }
@media screen and (max-width: 767px) {
  .testimonial-text img {
    width: 110px; /* Lebih kecil untuk mobile */
    margin-right: 0; /* Hapus margin agar sejajar */
    display: block;
    margin: 0 auto; /* Pusatkan gambar */
  }

  .testimonial-text {
    text-align: center; /* Pusatkan teks di mobile */
  }
}

/*
Events
 */
.testimonial .owl-carousel, .testimonial .testimonial-item {
  display: none; }

.testimonial .owl-item .testimonial-item {
  display: block; }

.event-single {
  position: relative;
  background-color: #f7f7f7; }
  .event-single h3 {
    font-family: "Old Standard TT", serif;
    font-size: 40px;
    color: #4e3b32;
    font-weight: 400; }
    /* Tambahkan ini untuk tampilan mobile (layar kecil) */
@media (max-width: 767.98px) {
  .event-single h3 {
    font-size: 24px; /* Atau sesuaikan dengan ukuran yang kamu inginkan */
  }
}
  .event-single .star-mark {
    position: absolute;
    top: 0;
    right: 15px;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    z-index: 2; }
    /* event gambar tinggi lebar */
    .event-img {
      height: 300px;
      overflow: hidden;
    }
    
    .event-img img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* atau pakai cover kalau ingin gambar penuh tapi bisa terpotong */
      display: block;
    }
    /* ///////////////////////////////// */
  .event-single .event-img {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    height: 300px; }
    @media (min-width: 992px) {
      .event-single .event-img {
        float: left;
        width: 41.6666666667%; } }
    @media (min-width: 1200px) {
      .event-single .event-img {
        float: left;
        width: 50%; } }
  .event-single .event-desc {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding: 30px 15px; }
    @media (min-width: 992px) {
      .event-single .event-desc {
        float: left;
        width: 58.3333333333%; } }
    @media (min-width: 1200px) {
      .event-single .event-desc {
        float: left;
        width: 50%; } }
    .event-single .event-desc > h3 {
      margin-top: 0; }
    .event-single .event-desc p {
      margin-bottom: 15px;
      color: #664d42; }

.event-timer {
  margin-top: 30px; }
  .event-timer h3 {
    font-size: 25px;
    font-family: "Open Sans", sans-serif; }

.time-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  display: inline-block;
  background-color: #ffcc00;
  padding: 18px 0;
  margin-right: 10px; }
  .time-circle h3, .time-circle h5 {
    margin: 0;
    color: #fff; }

#event-owl {
  overflow: hidden; }
  #event-owl .owl-item {
    display: inline-block; }

.owl-pagination {
  text-align: center;
  padding: 20px 0; }

.owl-page {
  background: #ddd;
  height: 10px;
  width: 10px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  cursor: pointer; }
  .owl-page.active {
    background: #dc8068; }

@media screen and (min-width: 992px) {
  .event-single .event-desc {
    padding: 60px; }
    .event-single .event-desc > h3 {
      margin: 30px 0; }
    .event-single .event-desc p {
      margin: 25px 0; }
  .event-single .event-img {
    height: 600px; }
  .time-circle {
    width: 90px;
    height: 90px;
    padding: 23px 0; } }

@media screen and (min-width: 1200px) {
  .event-single .event-desc {
    padding: 60px 70px; } }

/*
Contact
 */
.contact-sectn {
  padding-bottom: 0; }

  .promo-sectn {
    padding-bottom: 0; }

.contact-us .add {
  background: url("../images/contact-bg.jpg") top left no-repeat;
  background-size: cover;
  height: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 992px) {
    .contact-us .add {
      float: left;
      width: 50%; } }

.contact-us h2 {
  font-family: "Open Sans", sans-serif;
  font-size: 38px;
  font-weight: 600; }

.contact-us h3 {
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 300; }
  .contact-us h3 span {
    font-weight: 700; }

.contact-us h2, .contact-us h3, .contact-us p {
  text-transform: uppercase; }

#map-canvas {
  position: relative;
  min-height: 500px;
  padding-left: 15px;
  padding-right: 15px;
  height: 300px; /* Default height */
  background-color: #f5f5f5; /* Light background for better contrast */
  border-radius: 0px; /* Soft rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
  @media (min-width: 992px) {
    #map-canvas {
      float: left;
      width: 110%; } }


.add-inner-wrapper {
  padding: 40px 0;
  text-align: center; }

/*-------------------------------------------*/
@media screen and (min-width: 992px) {
  .add-inner-wrapper {
    width: 320px;
    margin: 40px auto;
    padding: 0; }
  .contact-us {
    margin-top: 100px;
    height: 500px; }
    .contact-us h2 {
      font-size: 58px;
      color: #3f3430; }
      .contact-us h2 img {
        float: left;
        display: inline;
        margin: 40px 15px 30px 0; }
    .contact-us h3 {
      font-size: 40px; }
    .contact-us .add {
      background-position: center left; }
  #map-canvas {
    height: 100%; } }

/*-------------------------------------------*/
@media screen and (min-width: 1200px) {
  .contact-us {
    height: 700px; }
  .add-inner-wrapper {
    margin-top: 110px;
    text-align: left; } }

/*
Footer
 */
footer {
  text-align: center; }
  footer .upper {
    background: url("../images/footer-bg.jpg") center no-repeat;
    background-size: cover;
    padding: 40px 0; }
  footer h2 {
    font-family: "Open Sans", sans-serif;
    font-size: 25px;
    text-transform: uppercase; }
  footer h3 {
    font-family: "Great Vibes", cursive;
    font-size: 50px; }
  footer .lower {
    background-color: #ebebeb; }
  footer small {
    color: #988e89;
    display: block;
    margin-bottom: 35px; }
  footer .order-btn {
    margin: 40px 0;
    text-transform: uppercase;
    padding: 15px 30px;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    background-color: #f0e0a2;;
    color: #fff;
    display: inline-block;
    float: none;
    width: auto;
    -webkit-transition: background 0.3s ease;
            transition: background 0.3s ease; }
    footer .order-btn:hover {
      background-color: #ffcc00; }

.footer-nav {
  display: inline-block;
  list-style: none;
  padding: 0; }
  .footer-nav li {
    float: left; }
  .footer-nav a {
    padding: 10px 5px;
    color: #3f3530;
    text-transform: uppercase; }
    .footer-nav a:hover {
      color: #877267; }

.back-to-top {
  color: #fff;
  background-color: #ffcc00;
  border-radius: 50%;
  display: inline-block;
  margin: 0 auto;
  width: 50px;
  height: 50px;
  font-size: 30px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 2px solid #fff; }

/*-------------------------------------------*/
@media screen and (min-width: 768px) {
  .footer-nav a {
    padding: 10px 15px; }
  footer h3 {
    font-size: 80px; }
  footer h2 {
    font-size: 40px;
    color: #664d42; }
  footer .order-btn {
    padding: 30px 45px;
    margin: 60px 0; }
  footer .upper {
    padding: 60px 0; }
    footer .upper img {
      margin-top: -30px; 
    padding-top: 40px;
    padding-bottom: 50px;
    } }

/*-------------------------------------------*/
/*
Buttons
 */
.button-primary {
  color: #000;
  background-color: transparent;
  border-color: #000;
  text-transform: uppercase;
  font-size: 13px;
  border-radius: 0px; }
  .button-primary:focus,
  .button-primary.focus {
    color: #fff;
    background-color: #dc8068;
    border-color: #dc8068; }
  .button-primary:hover {
    color: #fff;
    background-color: #3f3530;
    border-color: #3f3530; }
  .button-primary:active,
  .button-primary.active,
  .open > .button-primary.dropdown-toggle {
    color: #fff;
    background-color: #b4462a;
    border-color: #b4462a; }
    .button-primary:active:hover,
    .button-primary:active:focus,
    .button-primary:active.focus,
    .button-primary.active:hover,
    .button-primary.active:focus,
    .button-primary.active.focus,
    .open > .button-primary.dropdown-toggle:hover,
    .open > .button-primary.dropdown-toggle:focus,
    .open > .button-primary.dropdown-toggle.focus {
      color: #fff;
      background-color: #b4462a;
      border-color: #b4462a; }
  .button-primary:active,
  .button-primary.active,
  .open > .button-primary.dropdown-toggle {
    background-image: none; }
  .button-primary.disabled,
  .button-primary.disabled:hover,
  .button-primary.disabled:focus,
  .button-primary.disabled.focus,
  .button-primary.disabled:active,
  .button-primary.disabled.active,
  .button-primary[disabled],
  .button-primary[disabled]:hover,
  .button-primary[disabled]:focus,
  .button-primary[disabled].focus,
  .button-primary[disabled]:active,
  .button-primary[disabled].active,
  fieldset[disabled] .button-primary,
  fieldset[disabled] .button-primary:hover,
  fieldset[disabled] .button-primary:focus,
  fieldset[disabled] .button-primary.focus,
  fieldset[disabled] .button-primary:active,
  fieldset[disabled] .button-primary.active {
    background-color: transparent;
    border-color: #000; }
  .button-primary .badge {
    color: transparent;
    background-color: #000; }

.button-primary.type2 {
  background-color: #dc8068;
  color: #fff; }

.button-type-three {
  padding: 10px 20px;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  border: 1px solid #362e29;
  color: #fff;
  background: #362e29;
  text-transform: uppercase;
  -webkit-transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
          transition: background 0.4s ease-in-out, color 0.4s ease-in-out; }
  .button-type-three:hover {
    background: #fff;
    color: #362e29; }

@media screen and (min-width: 992px) {
  .download {
    position: relative;
    width: 200px;
    height: 50px;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    overflow: hidden; }
    .download:after {
      position: absolute;
      content: "\f063";
      font-family: 'FontAwesome';
      color: #fff;
      width: 100%;
      height: 100%;
      top: -60px;
      left: 0;
      -webkit-transition: top 0.4s ease-in-out;
              transition: top 0.4s ease-in-out; }
    .download span {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      left: 0;
      -webkit-transition: top 0.4s ease-in-out;
              transition: top 0.4s ease-in-out; }
    .download:hover {
      background: #362e29 ; }
      .download:hover:after {
        top: 0; }
      .download:hover span {
        color: #fff;
        top: 60px; } }

@media screen and (min-width: 992px) {
  .button-primary {
    -webkit-transition: background 0.4s ease-in-out, color 0.4s ease-in-out, border 0.4s ease-in-out;
            transition: background 0.4s ease-in-out, color 0.4s ease-in-out, border 0.4s ease-in-out; } }

.button-secondary {
  text-transform: uppercase;
  padding: 15px 30px;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  background-color: #362e29;
  color: #fff;
  border: 1px solid #362e29;
  display: inline-block;
  float: none;
  width: auto;
  -webkit-transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
  transition: background 0.4s ease-in-out, color 0.4s ease-in-out; 
}
  .button-secondary:hover {
    background-color: #fff;
    color: #362e29; }

/*
Loader Css
 */
.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: 160px auto;
  /*
   * Spinner positions
   * 1 2 3
   * 4 5 6
   * 7 8 9
   */ }
  .sk-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: #dc8068;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
            animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
  .sk-cube-grid .sk-cube1 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
  .sk-cube-grid .sk-cube2 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s; }
  .sk-cube-grid .sk-cube3 {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s; }
  .sk-cube-grid .sk-cube4 {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s; }
  .sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
  .sk-cube-grid .sk-cube6 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s; }
  .sk-cube-grid .sk-cube7 {
    -webkit-animation-delay: 0.0s;
            animation-delay: 0.0s; }
  .sk-cube-grid .sk-cube8 {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s; }
  .sk-cube-grid .sk-cube9 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1); }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); } }

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1); }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); } }

/*
Wordpress Class
 */
.alignleft {
  float: left; }

.alignright {
  float: right; }

/*
Validaton
 */
.parsley-errors-list {
  margin: 0;
  padding: 0;
  list-style: none; }
  .parsley-errors-list .parsley-required, .parsley-errors-list .parsley-type {
    padding: 5px 0;
    color: #dc8068; }

/*!
Animate.css - http://daneden.me/animate
Version - 3.4.0
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/
.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite; }

.animated.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s; }

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
          animation-duration: .75s; }

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
          animation-duration: .75s; }

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0); } }

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0); } }

.bounce {
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom; }

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

@keyframes flash {
  from, 50%, to {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

.flash {
  -webkit-animation-name: flash;
          animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

.pulse {
  -webkit-animation-name: pulse;
          animation-name: pulse; }

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

.rubberBand {
  -webkit-animation-name: rubberBand;
          animation-name: rubberBand; }

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0); } }

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0); } }

.shake {
  -webkit-animation-name: shake;
          animation-name: shake; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg); } }

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg); } }

.swing {
  -webkit-transform-origin: top center;
      -ms-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation-name: swing;
          animation-name: swing; }

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

.tada {
  -webkit-animation-name: tada;
          animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: none;
            transform: none; }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to {
    -webkit-transform: none;
            transform: none; } }
@keyframes wobble {
  from {
    -webkit-transform: none;
            transform: none; }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to {
    -webkit-transform: none;
            transform: none; } }

.wobble {
  -webkit-animation-name: wobble;
          animation-name: wobble; }

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
            transform: none; }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
            transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
            transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
            transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
            transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
            transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
            transform: skewX(0.390625deg) skewY(0.390625deg); }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
            transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } }

@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
            transform: none; }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
            transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
            transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
            transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
            transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
            transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
            transform: skewX(0.390625deg) skewY(0.390625deg); }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
            transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } }

.jello {
  -webkit-animation-name: jello;
          animation-name: jello;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center; }

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97); }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97); }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

.bounceIn {
  -webkit-animation-name: bounceIn;
          animation-name: bounceIn; }

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0); }
  to {
    -webkit-transform: none;
            transform: none; } }

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0); }
  to {
    -webkit-transform: none;
            transform: none; } }

.bounceInDown {
  -webkit-animation-name: bounceInDown;
          animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0); }
  to {
    -webkit-transform: none;
            transform: none; } }

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0); }
  to {
    -webkit-transform: none;
            transform: none; } }

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
          animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0); }
  to {
    -webkit-transform: none;
            transform: none; } }

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0); }
  to {
    -webkit-transform: none;
            transform: none; } }

.bounceInRight {
  -webkit-animation-name: bounceInRight;
          animation-name: bounceInRight; }

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

.bounceInUp {
  -webkit-animation-name: bounceInUp;
          animation-name: bounceInUp; }

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); } }

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); } }

.bounceOut {
  -webkit-animation-name: bounceOut;
          animation-name: bounceOut; }

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0); } }

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0); } }

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
          animation-name: bounceOutDown; }

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0); } }

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0); } }

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
          animation-name: bounceOutLeft; }

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0); } }

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0); } }

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
          animation-name: bounceOutRight; }

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0); } }

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0); } }

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
          animation-name: bounceOutUp; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn; }

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown; }

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
          animation-name: fadeInDownBig; }

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft; }

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
          animation-name: fadeInLeftBig; }

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

.fadeInRight {
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight; }

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
          animation-name: fadeInRightBig; }

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
            transform: translate3d(0, 50%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
            transform: translate3d(0, 50%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp; }

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
          animation-name: fadeInUpBig; }

@-webkit-keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.fadeOut {
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut; }

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0); } }

@keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0); } }

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
          animation-name: fadeOutDown; }

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0); } }

@keyframes fadeOutDownBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0); } }

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
          animation-name: fadeOutDownBig; }

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0); } }

@keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0); } }

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
          animation-name: fadeOutLeft; }

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0); } }

@keyframes fadeOutLeftBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0); } }

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
          animation-name: fadeOutLeftBig; }

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); } }

@keyframes fadeOutRight {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); } }

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
          animation-name: fadeOutRight; }

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0); } }

@keyframes fadeOutRightBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0); } }

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
          animation-name: fadeOutRightBig; }

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); } }

@keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); } }

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp; }

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0); } }

@keyframes fadeOutUpBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0); } }

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
          animation-name: fadeOutUpBig; }

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
            transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
  to {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; } }

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
            transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
  to {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; } }

.animated.flip {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  -webkit-animation-name: flip;
          animation-name: flip; }

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
            transform: perspective(400px); } }

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
            transform: perspective(400px); } }

.flipInX {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
          animation-name: flipInX; }

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
            transform: perspective(400px); } }

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
            transform: perspective(400px); } }

.flipInY {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
          animation-name: flipInY; }

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
            transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
            transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

.flipOutX {
  -webkit-animation-name: flipOutX;
          animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important; }

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
            transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
            transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }

.flipOutY {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
          animation-name: flipOutY; }

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
            transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
    opacity: 1; }
  80% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    opacity: 1; }
  to {
    -webkit-transform: none;
            transform: none;
    opacity: 1; } }

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
            transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
    opacity: 1; }
  80% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    opacity: 1; }
  to {
    -webkit-transform: none;
            transform: none;
    opacity: 1; } }

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
          animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out; }

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1; }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
            transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0; } }

@keyframes lightSpeedOut {
  from {
    opacity: 1; }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
            transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0; } }

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
          animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in; }

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
            transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: none;
            transform: none;
    opacity: 1; } }

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
            transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: none;
            transform: none;
    opacity: 1; } }

.rotateIn {
  -webkit-animation-name: rotateIn;
          animation-name: rotateIn; }

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1; } }

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1; } }

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
          animation-name: rotateInDownLeft; }

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1; } }

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1; } }

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
          animation-name: rotateInDownRight; }

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1; } }

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1; } }

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
          animation-name: rotateInUpLeft; }

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
            transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1; } }

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
            transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1; } }

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
          animation-name: rotateInUpRight; }

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
            transform-origin: center;
    opacity: 1; }
  to {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
            transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
            transform-origin: center;
    opacity: 1; }
  to {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
            transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }

.rotateOut {
  -webkit-animation-name: rotateOut;
          animation-name: rotateOut; }

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; } }

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; } }

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
          animation-name: rotateOutDownLeft; }

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
          animation-name: rotateOutDownRight; }

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
          animation-name: rotateOutUpLeft; }

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
            transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0; } }

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
            transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0; } }

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
          animation-name: rotateOutUpRight; }

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
            transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
            transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    opacity: 1; }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
            transform: translate3d(0, 700px, 0);
    opacity: 0; } }

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
            transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
            transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    opacity: 1; }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
            transform: translate3d(0, 700px, 0);
    opacity: 0; } }

.hinge {
  -webkit-animation-name: hinge;
          animation-name: hinge; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

.rollIn {
  -webkit-animation-name: rollIn;
          animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
            transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
@keyframes rollOut {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
            transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }

.rollOut {
  -webkit-animation-name: rollOut;
          animation-name: rollOut; }

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn; }

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInDown {
  -webkit-animation-name: zoomInDown;
          animation-name: zoomInDown; }

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
          animation-name: zoomInLeft; }

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInRight {
  -webkit-animation-name: zoomInRight;
          animation-name: zoomInRight; }

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInUp {
  -webkit-animation-name: zoomInUp;
          animation-name: zoomInUp; }

@-webkit-keyframes zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

@keyframes zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

.zoomOut {
  -webkit-animation-name: zoomOut;
          animation-name: zoomOut; }

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
          animation-name: zoomOutDown; }

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
            transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
            transform-origin: left center; } }

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
            transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
            transform-origin: left center; } }

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
          animation-name: zoomOutLeft; }

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
            transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
            transform-origin: right center; } }

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
            transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
            transform-origin: right center; } }

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
          animation-name: zoomOutRight; }

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
          animation-name: zoomOutUp; }

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

.slideInDown {
  -webkit-animation-name: slideInDown;
          animation-name: slideInDown; }

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

.slideInLeft {
  -webkit-animation-name: slideInLeft;
          animation-name: slideInLeft; }

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

.slideInRight {
  -webkit-animation-name: slideInRight;
          animation-name: slideInRight; }

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

.slideInUp {
  -webkit-animation-name: slideInUp;
          animation-name: slideInUp; }

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0); } }

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0); } }

.slideOutDown {
  -webkit-animation-name: slideOutDown;
          animation-name: slideOutDown; }

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0); } }

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0); } }

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
          animation-name: slideOutLeft; }

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); } }

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); } }

.slideOutRight {
  -webkit-animation-name: slideOutRight;
          animation-name: slideOutRight; }

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); } }

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); } }

.slideOutUp {
  -webkit-animation-name: slideOutUp;
          animation-name: slideOutUp; }

/*
Home Page
 */
header {
  border-bottom: 20px ; }
  header .header-body {
    position: relative;
    background: #fff; }

@media screen and (min-width: 992px) {
  header {
    padding: 20px;
    /* background: #f2f2f2; */
    border-bottom: 0; } }
    

@media screen and (min-width: 1600px) {
  header {
    padding: 40px; } }

.brand {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  margin-top: 15px; }
  @media (min-width: 768px) {
    .brand {
      float: left;
      width: 25%; } }
  @media (min-width: 768px) {
    .brand {
      margin-left: 33.3333333333%; } }
  @media (min-width: 992px) {
    .brand {
      margin-left: 33.3333333333%; } }
  .brand a:hover {
    text-decoration: none; }
  .brand p {
    color: #362e29; }
  .brand img {
    max-width: 100%; }

    /* ------------------------------------ */

.banner {
  position: relative; }
  .banner-image {
    padding-top: 10px;
    width: 100%;
    text-align: center; }
    .banner-image img {
      max-width: 100%; }

.banner-img-holder {
  display: inline-block;
  position: relative;
  max-width: 300px; }
  .banner-img-holder .coffee-drop {
    position: absolute;
    left: 37.6%;
    top: 15.4%;
    overflow: hidden;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 100%;
    height: 0%;
    -webkit-transition: height 4s ease-in-out;
            transition: height 4s ease-in-out;
    max-width: 36%; }
    .banner-img-holder .coffee-drop.poured {
      height: 100%; }
  .banner-img-holder .logo, .banner-img-holder .cup, .banner-img-holder .premium-text, .banner-img-holder .coffee-text {
    position: absolute; }
  .banner-img-holder .logo {
    top: 0;
    left: 37.7%;
    max-width: 36%; }
  .banner-img-holder .cup {
    bottom: 0;
    left: 0; 
    padding-left: 10%;
  }
  .banner-img-holder .premium-text {
    top: 25%;
    left: 25%;
    z-index: 2;
    max-width: 55%; }
  .banner-img-holder .coffee-text {
    top: 37%;
    z-index: 2;
    left: 20%;
    max-width: 75%;
    padding-left:17%;
  }
  .banner-img-holder .logo-cup {
    opacity: 0; }

.home-page .brand,
.home-page .header-logo {
  display: none; }

.home-page .banner-image p {
  padding-left: 40px; }


 
/* Media Queries for Mobile and Tablet */
@media screen and (max-width: 768px) {
  .banner-img-holder {
    max-width: 100%; /* Allow image holder to fill available space */
    padding: 10px; /* Reduced padding for mobile */
  }

  /* Mobile: Adjust Logo Size */
  .banner-img-holder .logo {
    max-width: 45%; /* Reduce logo size further */
  }

  /* Mobile: Adjust Cup Size */
  .banner-img-holder .cup {
    padding-left: 0;
    width: 60%; /* Reduce cup size */
    bottom: 10%; /* Move cup up */
  }

  /* Mobile: Adjust Premium Text */
  .banner-img-holder .premium-text {
    top: 29%; /* Move the premium text down */
    left: 50%;
    transform: translateX(-50%);
    max-width: 70%; /* Smaller premium text */
  }

  /* Mobile: Adjust Coffee Text */
  .banner-img-holder .coffee-text {
    top: 45%; /* Move coffee text further down */
    left: 50%;
    transform: translateX(-50%);
    max-width: 75%; /* Smaller coffee text */
  }

  /* Adjust Coffee Drop on Mobile */
  .banner-img-holder .coffee-drop {
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    max-width: 35%; /* Smaller coffee drop */
  }
}

@media screen and (max-width: 480px) {
  /* Mobile: Adjust Logo Size */
  .banner-img-holder .logo {
    max-width: 26%; /* Further decrease logo size for small screens */
  }

  /* Mobile: Adjust Premium and Coffee Text */
  .banner-img-holder .premium-text,
  .banner-img-holder .coffee-text {
    max-width: 80%; /* Allow text to take up more space */

  }

  /* Mobile: Adjust Coffee Drop */
  .banner-img-holder .coffee-drop {
    max-width: 30%; /* Reduce coffee drop size even further */
  }

  /* Mobile: Adjust Cup Image */
  .banner-img-holder .cup {
    width: 90%; /* Reduce cup size on small screens */
    bottom: 10%;
    padding-left: 10%; /* Create more space below the cup */
    top: 60%;
  }
}

/* Media Query for Large Screens (min-width: 1400px) */
@media screen and (min-width: 1400px) {
  .banner-img-holder {
    max-width: none; /* No max-width limit on large screens */
  }
}
/* --------------------------------------------------- */


/*
Menu Page
 */
.menu-sectn {
  padding: 0px 0 0; }

.menu-page header .banner {
  margin: 30px 0; }
  .menu-page header .banner > div {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px; }
    @media (min-width: 992px) {
      .menu-page header .banner > div {
        float: left;
        width: 50%; } }

.menu-page .pricing-carte {
  background-color: #fff;
  border: 1px dashed #3f3530; }

.menu-page .pricing-table {
  margin-left: 0;
  margin-right: 0; }

/*------------------------------------*/
@media screen and (min-width: 992px) {
  .menu-page header .banner {
    margin: 60px 0; } }

/*------------------------------------*/
.order-box {
  padding: 15px;
  border: 1px solid rgb(0, 0, 0);
  margin-top: 60px;
  margin-bottom: 60px; 
  }
  .order-box h2 {
    font-family: "Old Standard TT", serif;
    font-size: 45px;
    margin: 10px 0; }
  .order-box h5 {
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: 100; }

.complete-order {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding: 0 5px;
  text-align: center;
 }
  @media (min-width: 768px) {
    .complete-order {
      float: left;
      width: 100%; } }
  @media (min-width: 992px) {
    .complete-order {
      float: left;
      width: 50%; } }

.selected-item-no {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding: 20px 5px;
  text-align: center; }
  @media (min-width: 768px) {
    .selected-item-no {
      float: left;
      width: 50%; } }
  @media (min-width: 992px) {
    .selected-item-no {
      float: left;
      width: 25%; } }
  .selected-item-no p {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    margin: 0; }
    .selected-item-no p span {
      background-color: #82ca9c;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      color: #fff;
      vertical-align: middle;
      text-align: center;
      display: inline-block;
      margin: 0 2px;
      font-size: 20px;
      line-height: 40px; }

.order-btn {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  padding: 0 5px; }
  @media (min-width: 768px) {
    .order-btn {
      float: left;
      width: 50%; } }
  @media (min-width: 992px) {
    .order-btn {
      float: left;
      width: 25%; } }
  .order-btn a {
    margin: 10px 0 30px; }

/*------------------------------------*/
@media screen and (min-width: 768px) {
  .order-btn a {
    margin: 30px 0; }
  .selected-item-no {
    padding: 32px 5px; } }

/*------------------------------------*/
@media screen and (min-width: 992px) {
  .order-box {
    padding: 30px; }
  .complete-order {
    text-align: left; } }

/*------------------------------------*/
.menu-list-page .cuisine-price {
  color: #664d42; }

.menu-list-page .pricing-detail {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 992px) {
    .menu-list-page .pricing-detail {
      float: left;
      width: 33.3333333333%; } }

.menu-list-page .pricing-carte {
  border-color: #d3d3d3;
  border-style: solid; }

.menu-list-page .pricing-detail .image {
  padding: 10px 25px 0; }

/* ///////////////////////////////////////////BLOG SLIDE//////////////////// */
  /*
Blog list
 */
.author-blog-sectn {
  position: relative;
  margin: 100px 0;
  min-height: 250px; }
  .author-blog-sectn .feature-img {
    width: 100%;
    height: auto; }

.blog-details-holder {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  padding: 15px 30px; }
  .blog-details-holder h2 {
    font-family: "Old Standard TT", serif;
    font-size: 45px;
    color: #fff;
    margin-top: 10px; }
  .blog-details-holder h6 {
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    color: #dc8068;
    margin: 0; }

    @media screen and (min-width: 992px) {
      .blog-details-holder {
        bottom: -10px;
        padding: 30px 40px; } }

    .author-details .auth-icon {
      border-radius: 50%;
      overflow: hidden;
      height: 50px;
      width: 50px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px; }

    .author-details h5 {
      display: inline-block;
      vertical-align: middle;
      font-family: "Open Sans", sans-serif;
      font-size: 15px;
      font-weight: 300;
      color: #fff; }
      .author-details h5 span {
        font-weight: 600; }

        @media screen and (min-width: 992px) {
          /* Pastikan Swiper Container penuh */
          .swiper-container {
              width: 100%;
              max-width: 100%;
              overflow: hidden;
              position: relative;
          }
      
          /* Pastikan slide tidak terpotong */
          .swiper-slide {
              flex-shrink: 0;
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: left;
              position: relative; /* Pastikan konten tetap di dalam slide */
          }
      
          /* Pastikan gambar mengisi slide dengan baik */
          .swiper-slide img {
              width: 100%;
              height: auto;
              display: block;
              object-fit: cover; /* Mengisi slide dengan baik */
          }
      
          /* Styling tombol navigasi Swiper */
          .swiper-button-next,
          .swiper-button-prev {
              color: black !important; /* Warna hitam */
              width: 40px;
              height: 40px;
          }
      
          /* Pastikan ikon panah juga hitam */
          .swiper-button-next::after,
          .swiper-button-prev::after {
              font-size: 20px;
              color: black !important;
          }
      
          /* Styling untuk Link KLIK DISINI */
          .custom-link {
              display: inline-block;
              font-weight: bold;
              font-size: 14px;
              color: #ffffff; /* Warna teks putih */
              background-color: #76c776; /* Warna background */
              padding: 8px 15px;
              border-radius: 5px;
              text-decoration: none;
              transition: 0.3s ease-in-out;
              box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Tambahkan efek bayangan */
              margin-left: 10px; /* Geser ke kanan */
          }
      
          .custom-link:hover {
              background-color: #76c776; /* Warna lebih gelap saat hover */
              transform: scale(1.05); /* Efek sedikit membesar */
          }
      }
      
        
        /* /////////////////////////tampilan mobile blog slide////////////////// */
        @media screen and (max-width: 768px) {
          /* Swiper Container agar tetap responsif */
          .swiper-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            margin-bottom: -20%; /* Sedikit dikurangi agar tidak terlalu menumpuk */
            margin-top: -15%;
          }
        
          /* Perbaiki tampilan slide agar lebih rapi */
          .swiper-slide {
            flex-shrink: 0;
            width: 100%;
            display: flex;
            justify-content: flex-start; /* Rata kiri */
            align-items: flex-start; /* Rata kiri */
            text-align: left; /* Rata kiri */
            flex-direction: column;
            position: relative;
            gap: 5px; /* Jarak antar elemen lebih rapat */
          }
        
          /* Gambar agar tidak hilang dan menyesuaikan */
          .swiper-slide img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            max-height: 260px; /* Sedikit dikurangi */
          }
        
          /* Styling untuk bagian informasi */
          .blog-details-holder {
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            padding: 6px 12px; /* Padding dikurangi agar lebih compact */
            text-align: left; /* Rata kiri */
          }
        
          /* Ukuran judul lebih kecil dan lebih padat */
          .blog-details-holder h2 {
            font-family: "Old Standard TT", serif;
            font-size: 17px; /* Sedikit lebih kecil */
            color: #fff;
            margin: 2px 0; /* Margin lebih kecil */
            line-height: 1.1;
            text-align: left; /* Rata kiri */
          }
        
          /* Ukuran tanggal lebih kecil dan lebih padat */
          .blog-details-holder h6 {
            font-size: 10px;
            color: #dc8068;
            margin: 2px 0;
            text-align: left; /* Rata kiri */
          }
        
          /* Avatar dan nama author lebih kecil */
          .author-details {
            display: flex;
            align-items: center;
            gap: 4px; /* Kurangi jarak */
          }
        
          .author-details .auth-icon {
            width: 32px; /* Ukuran lebih kecil */
            height: 32px;
            margin-right: 3px;
          }
        
          .author-details h5 {
            font-size: 10px;
            margin: 0;
          }
        
          /* Perbaiki ukuran tombol navigasi swiper */
          .swiper-button-next,
          .swiper-button-prev {
            color: black !important;
            width: 22px;
            height: 22px;
          }
        
          .swiper-button-next::after,
          .swiper-button-prev::after {
            font-size: 8px;
            color: black !important;
          }

          .custom-link {
              display: inline-block;
              font-weight: bold;
              font-size: 12px;
              color: #ffffff; /* Warna teks putih */
              background-color: #76c776; /* Warna hijau tua */
              padding: 7px 14px;
              border-radius: 5px;
              text-decoration: none;
              transition: 0.3s ease-in-out;
              box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Tambahkan efek bayangan */
              margin-left: 10px; /* Geser ke kanan */
          }
      
          .custom-link:hover {
            background-color: #76c776; /* Warna hijau lebih gelap saat hover */
              transform: scale(1.05); /* Efek sedikit membesar */
          }
          
        }

        
        
        

    
    /* /////////////////////////////////////////////////BLOG SLIDE/////////////////////////// */
.blog-item {
  margin-top: 60px; 
  overflow: hidden;
}



.blog-img {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  height: 500px; }
    @media (min-width: 992px) {
      .blog-img {
          float: left;
          width: 33.333333%;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: visible; /* Pastikan tidak ada pemotongan */
          max-height: none; /* Pastikan tidak ada batasan tinggi */
      }

      .blog-img img {
          width: auto; /* Jaga aspek rasio */
          height: auto; /* Sesuaikan tinggi */
          max-width: 100%; /* Pastikan tidak lebih dari kontainer */
          max-height: 100vh; /* Batas maksimal tinggi sesuai viewport */
          object-fit: contain; /* Pastikan gambar tetap utuh tanpa pemotongan */
      }
  }





.blog-excerpt {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 992px) {
    .blog-excerpt {
      float: left;
      width: 66.6666666667%; } }
  .blog-excerpt h5 {
    color: #77625a; }
  .blog-excerpt .author-details h5 {
    color: #666; }
  .blog-excerpt h2 {
    font-family: "Old Standard TT", serif;
    font-size: 25px; 
    color: #000;
  }
  .blog-excerpt p {
    line-height: 1.8;
    margin: 30px 0;
    color: #77625a; }
  .blog-excerpt .button-primary {
    float: right; }
  @media (min-width: 992px) {
    .blog-excerpt {
      padding-left: 30px; } }

/*///////////////////////////////////// TAMPILAN MOBILE BLOG CONTENT/////////////////////// */
@media screen and (max-width: 991px) {
  .blog-excerpt {
    width: 100%;
    padding: 20px; /* Tambah padding agar tidak terlalu dekat dengan gambar */
  }

  .blog-excerpt h2 {
    font-size: 22px; /* Perbesar agar lebih terbaca */
    text-align: center;
    margin-bottom: 10px; /* Tambahkan jarak bawah */
  }

  .blog-excerpt p {
    font-size: 16px;
    line-height: 1.6; /* Perbesar line-height agar lebih nyaman dibaca */
    text-align: justify;
    margin-bottom: 15px; /* Tambahkan jarak antar paragraf */
  }

  .blog-excerpt .button-primary {
    float: none;
    display: block;
    margin: 20px auto;
    text-align: center;
  }

  /* Pastikan gambar tetap tampil dan tidak terlalu dekat dengan teks */
  .blog-img {
    display: block !important; /* Memastikan elemen tetap muncul */
    width: 100% !important; /* Mengisi seluruh lebar layar */
    max-height: 500px; /* Batasi tinggi agar tidak terlalu besar */
    object-fit: cover; /* Menjaga proporsi gambar */
    margin-bottom: 20px; /* Tambahkan jarak antara gambar dan teks */
  }

  .blog-excerpt .author-details {
    text-align: center;
    margin-top: 15px; /* Tambahkan jarak atas */
  }
}


/*
Blog details
 */
.blog-details-sectn .section-heading-type2 {
  margin-top: 50px; }
  @media (min-width: 992px) {
    .blog-details-sectn .section-heading-type2 {
      margin-top: 100px; } }

.blog-details-sectn .author-details h5 {
  color: #939392; }

.blog-details-sectn .blog-img {
  width: 100%; }

.blog-details-sectn .blog-img-wrap {
  overflow: hidden; }
  @media screen and (min-width: 992px) {
    .blog-details-sectn .blog-img-wrap {
      height: 350px; } }
  .blog-details-sectn .blog-img-wrap .left {
    position: relative;
    float: left;
    width: 33.3333333333%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding: 0; }
  .blog-details-sectn .blog-img-wrap .right {
    position: relative;
    float: left;
    width: 66.6666666667%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding: 0; }

.blog-details-wrap {
  padding: 60px 0; }
  .blog-details-wrap p {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    color: #77625a;
    font-weight: 400; }
  .blog-details-wrap > p {
    padding: 10px 0; }

.tag-line {
  padding: 20px 0 40px;
  font-size: 13px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  color: #939392; }
  .tag-line p, .tag-line a {
    color: #939392; }
  .tag-line a:hover {
    color: #7a7a78; }
  .tag-line span {
    color: #000;
    text-transform: capitalize; }
  .tag-line .tag-code {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px; }
    @media (min-width: 992px) {
      .tag-line .tag-code {
        float: left;
        width: 25%; } }
  .tag-line ul {
    list-style-type: none;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px; }
    @media (min-width: 992px) {
      .tag-line ul {
        float: left;
        width: 75%; } }
    .tag-line ul li {
      display: inline-block;
      border-left: 1px solid #939392;
      padding: 0 10px; }
    .tag-line ul i {
      color: #000; }
    .tag-line ul span,
    .tag-line ul i {
      padding: 0 5px; }

.backquote {
  padding: 20px 0; }
  .backquote p {
    font-style: italic;
    width: 95%;
    float: right;
    text-align: justify;
    padding: 0 20px;
    border-left: 5px solid #dc8068; }

.blog-information {
  margin: 30px 0; }
  .blog-information .blog-info-img {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
    padding: 0; }
    @media (min-width: 768px) {
      .blog-information .blog-info-img {
        float: left;
        width: 41.6666666667%; } }
  .blog-information .blog-info-cont {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: justify;
    padding: 30px 0; }
    @media (min-width: 768px) {
      .blog-information .blog-info-cont {
        float: left;
        width: 58.3333333333%; } }
    @media screen and (min-width: 768px) {
      .blog-information .blog-info-cont {
        padding: 0 30px; } }

.form-control,
textarea {
  -webkit-transition: border 0.4s ease-in-out;
          transition: border 0.4s ease-in-out; }
  .form-control:hover,
  .form-control:focus,
  textarea:hover,
  textarea:focus {
    box-shadow: 0 0 0 0;
    outline: none; }

/* Comment Form */
.leave-comment h4 {
  border-top: 1px dashed #acacac;
  padding-top: 30px;
  margin-top: -200px;
}

.leave-comment .form-group {
  width: 100%;
  float: left;
  position: relative;
  margin: 30px 0 0; }
  @media screen and (min-width: 992px) {
    .leave-comment .form-group {
      width: 33.33%;
      padding: 0 15px; }
      .leave-comment .form-group:first-of-type {
        padding-left: 0; }
      .leave-comment .form-group:last-of-type {
        padding-right: 0; } }

.leave-comment .form-control {
  height: 40px; }

.leave-comment .textarea {
  width: 100%;
  height: 150px;
  resize: none;
  margin: 30px 0;
  padding: 10px 15px;
  border-radius: 4px; }

.leave-comment button {
  float: right;
  padding: 15px 30px;
  outline: none;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #362e29;
  background: #362e29;
margin-right: 40px;
margin-top: -80px;
}

@media screen and (max-width: 767px) {
  .leave-comment button {
    float: none; /* Hapus float agar tidak berantakan */
    display: block; /* Agar tombol menjadi elemen blok */
    width: 70%; /* Lebar penuh */
    text-align: center; /* Pusatkan teks */
    margin: 20px auto 0; /* Tambah margin agar lebih rapi */
    padding: 12px 20px; /* Sedikit lebih kecil untuk layar kecil */
    font-size: 13px; /* Ukuran font lebih kecil */
  }
}


  @media screen and (min-width: 992px) {
    .leave-comment button {
      -webkit-transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
              transition: background 0.4s ease-in-out, color 0.4s ease-in-out; }
      .leave-comment button:hover {
        background: #fff;
        color: #dc8068; } }

blockquote {
  font-size: 14px;
  font-style: italic; }

img.alignleft {
  margin: 15px 0; }
  @media (min-width: 768px) {
    img.alignleft {
      margin-right: 30px; } }

/* Content Entry */
.content-entry {
  color: #77625a; }
  .content-entry p {
    margin: 0 0 30px; }
  @media (min-width: 992px) {
    .content-entry blockquote {
      margin: 40px 0 40px 50px; } }

/*
Gallery Page
 */
.gallery {
  padding: 100px 0; }
  .gallery h2 {
    font-family: "Old Standard TT", serif;
    font-size: 50px;
    color: #664d42;
    text-transform: capitalize; }
  .gallery p {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    color: #856456; }

/*------------ direction hover effect-----------*/
.gallery-type-one {
  list-style-type: none;
  margin: 80px 0;
  padding: 0; }
  .gallery-type-one li {
    position: relative;
    float: left;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px; }
    @media (min-width: 992px) {
      .gallery-type-one li {
        float: left;
        width: 33.3333333333%; } }
    @media screen and (min-width: 480px) and (max-width: 992px) {
      .gallery-type-one li {
        width: 50%;
        float: left; } }
  .gallery-type-one a {
    display: block;
    position: relative;
    overflow: hidden; }
  .gallery-type-one .gallery-info {
    position: absolute;
    background: rgba(220, 128, 104, 0.9);
    width: 100%;
    height: 100%; }
    .gallery-type-one .gallery-info img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }

/*------------ isotope layout -----------*/
.grid {
  margin: 70px 0; }

.grid-item {
  width: 100%;
  margin-bottom: 15px; }
  .grid-item img {
    display: block;
    max-width: 100%; }

.gallery-item {
  position: relative;
  display: block;
  overflow: hidden; }
  .gallery-item .gallery-item__hovericon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -47px;
    margin-top: -47px;
    background: #dc8068;
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
            transition: opacity 0.5s ease; }
  .gallery-item:hover .gallery-item__hovericon {
    opacity: 1; }

@media screen and (min-width: 480px) {
  .grid-item {
    width: 50%; } }

@media screen and (min-width: 992px) {
  .grid-item {
    width: 25%;
    float: left; }
    .grid-item.gallery-item-width2 {
      width: 50%; } }

/*----- single gallery page------*/
.single-page-wrap p {
  text-align: justify; }

.single-page-wrap .gallery-wrapper {
  margin: 50px 0 0; }

.single-page-wrap .gallery-info {
  padding: 20px 30px;
  background: #EFEFEF; }
  .single-page-wrap .gallery-info p {
    color: #828282;
    font-weight: 400;
    line-height: 25px; }

.single-page-wrap .gallery-img {
  overflow: hidden; }

.gallery-footer {
  padding: 40px 0; }
  .gallery-footer .social-element {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px; }
    @media (min-width: 992px) {
      .gallery-footer .social-element {
        float: left;
        width: 58.3333333333%; } }
    @media screen and (min-width: 992px) {
      .gallery-footer .social-element {
        padding: 0; } }
  .gallery-footer .time {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: right;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    color: #828282;
    font-weight: 400; }
    @media (min-width: 992px) {
      .gallery-footer .time {
        float: left;
        width: 41.6666666667%; } }
    .gallery-footer .time span {
      font-weight: 600;
      padding: 0 5px;
      text-transform: uppercase; }
    @media screen and (min-width: 992px) {
      .gallery-footer .time {
        padding: 0; } }

/* -------- social element------*/
.social-element a {
  height: 40px;
  width: 40px;
  border: 1px solid #dc8068;
  display: inline-block;
  color: #dc8068;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  margin-right: 5px; }

/*------------ gallery isotope ----------*/
.isotope-gallerypage {
  padding: 80px 0; }

.gallery-isotope-button {
  list-style-type: none;
  padding: 0 15px; }
  .gallery-isotope-button li {
    display: inline-block;
    width: auto;
    float: none; }
  .gallery-isotope-button button {
    background: transparent;
    box-shadow: 0 0 0 0;
    outline: none;
    border: none;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    color: #939392;
    letter-spacing: 1px;
    text-transform: capitalize; }
    .gallery-isotope-button button.selected {
      background: transparent;
      color: #dc8068;
      letter-spacing: 5px; }
    @media screen and (min-width: 992px) {
      .gallery-isotope-button button {
        -webkit-transition: letter-spacing 0.4s ease-in-out;
                transition: letter-spacing 0.4s ease-in-out; }
        .gallery-isotope-button button:hover,
        .gallery-isotope-button button:focus {
          background: transparent;
          color: #dc8068;
          letter-spacing: 5px; } }

/*
Store Page
 */
/*
Cart Page
 */
.cartpage {
  padding: 100px 0; }
  .cartpage p {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #939392; }
  .cartpage .cartHeader {
    background: white;
    border-bottom: 1px solid #939392; }
  .cartpage .logo, .cartpage .orderId {
    width: 100%;
    float: left;
    position: relative;
    text-align: center; }
  .cartpage .orderId p {
    text-transform: capitalize; }
    .cartpage .orderId p:first-of-type {
      text-transform: uppercase; }
      .cartpage .orderId p:first-of-type span {
        color: #000; }
  .cartpage .productQuantity {
    max-width: 100px;
    display: block;
    margin: 0 auto; }
    @media (min-width: 768px) {
      .cartpage .productQuantity {
        margin: 20px 0 0; } }
  .cartpage .heading {
    padding: 20px 0; }
    .cartpage .heading h5 {
      width: 100%;
      float: left;
      position: relative;
      font-family: "Open Sans", sans-serif;
      font-size: 36px;
      font-weight: 400;
      color: #939392;
      text-transform: uppercase; }
    .cartpage .heading p {
      width: 100%;
      float: left;
      position: relative;
      color: #000;
      font-style: italic; }
  .cartpage .cartBody {
    padding: 40px 0; }
  .cartpage .salectedProduct {
    padding: 50px 15px; }
    .cartpage .salectedProduct li {
      overflow: hidden;
      display: block;
      position: relative;
      background: #f3f3f4;
      margin-bottom: 15px; }
  .cartpage .cart-meta {
    background: rgba(0, 0, 0, 0.7); }
    .cartpage .cart-meta h4 {
      font-family: "Open Sans", sans-serif;
      font-size: 22px;
      font-weight: 300;
      color: #fff; }
    .cartpage .cart-meta .item-content {
      padding: 0 50px; }
      .cartpage .cart-meta .item-content > div {
        display: inline-block; }
      .cartpage .cart-meta .item-content p {
        text-transform: capitalize;
        font-size: 16px;
        font-weight: 300; }
    .cartpage .cart-meta .item-price {
      height: 200px;
      padding: 0;
      line-height: 200px;
      background: rgba(0, 0, 0, 0.9);
      border: none; }
      .cartpage .cart-meta .item-price span {
        color: white; }
  .cartpage .item-content, .cartpage .item-price, .cartpage .item-details, .cartpage .item-image {
    width: 100%;
    float: left;
    position: relative; }
  .cartpage .item-image img {
    width: 100%; }
  .cartpage .removeProduct {
    background-color: #fff;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 24px;
    color: #dc8068;
    position: absolute;
    top: 5px;
    right: 5px; }
    @media (min-width: 768px) {
      .cartpage .removeProduct {
        background-color: transparent; } }
  .cartpage .item-details {
    padding: 15px;
    text-align: center; }
    .cartpage .item-details h6 {
      font-family: "Open Sans", sans-serif;
      font-size: 30px;
      font-weight: 700;
      color: #dc8068;
      text-transform: capitalize; }
    .cartpage .item-details p {
      width: 70%;
      padding: 20px 0; }
    .cartpage .item-details > div i {
      color: #dc8068; }
    .cartpage .item-details > div span {
      font-family: "Open Sans", sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: #939392; }
  .cartpage .item-price {
    text-align: center;
    vertical-align: middle;
    padding-bottom: 15px; }
    .cartpage .item-price span {
      font-family: "Open Sans", sans-serif;
      font-size: 30px;
      font-weight: 700;
      color: #dc8068;
      display: inline-block; }
    @media (min-width: 768px) {
      .cartpage .item-price {
        padding: 50px 0 0; } }

@media screen and (min-width: 480px) {
  .cartpage .logo, .cartpage .orderId {
    width: 50%; }
  .cartpage .logo {
    text-align: left; }
  .cartpage .orderId {
    text-align: right; }
  .cartpage .salectedProduct {
    padding: 50px 0; }
    .cartpage .salectedProduct li {
      height: 200px; }
  .cartpage .heading h5 {
    width: 50%; }
  .cartpage .heading p {
    text-align: right;
    width: 50%; }
  .cartpage .item-content {
    width: 80%; }
  .cartpage .item-price {
    width: 20%; }
  .cartpage .item-image {
    width: 30%;
    height: 200px; }
    .cartpage .item-image img {
      max-height: 100%;
      max-width: 100%; }
  .cartpage .item-details {
    width: 60%;
    text-align: left; } }

@media screen and (min-width: 992px) {
  .cartpage .cart-meta .item-content {
    padding: 60px 50px; } }

.mail-cart {
  border-top: 1px solid #939392;
  padding: 40px 0; }
  .mail-cart h3 {
    font-family: "Open Sans", sans-serif;
    font-size: 36px;
    font-weight: 300;
    color: #939392;
    text-transform: uppercase; }
    .mail-cart h3 span {
      color: #000; }
  .mail-cart form {
    padding: 50px 0; }
  .mail-cart .checkbox {
    float: right;
    margin-right: 40px; }
    .mail-cart .checkbox label {
      font-family: "Open Sans", sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: #939392; }
  .mail-cart button {
    background: #dc8068;
    border: 1px solid #dc8068;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    margin-right: 15px;
    float: right;
    font-weight: 400;
    color: #fff;
    -webkit-transition: color, background 0.4s ease-in-out;
            transition: color, background 0.4s ease-in-out;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 4px; }
    .mail-cart button:hover {
      color: #dc8068;
      background: #fff; }

/*---------- contact form ------------*/
.formcontact .form-group {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 992px) {
    .formcontact .form-group {
      float: left;
      width: 50%; } }

.formcontact .form-control {
  height: 50px;
  border-radius: 0px; }

/*
Contact Page
 */
.contactpage {
  margin-top: -50px;
  margin-bottom: 20px;
  padding: 50px 100px;
  position: relative;
  overflow: hidden; }
  .contactpage h2 {
    font-family: "Old Standard TT", serif;
    font-size: 40px;
    color: #664d42; }
  .contactpage p {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    color: #856456; }
  .contactpage .cont-wrap {
    margin: 50px 0; }
    @media screen and (min-width: 992px) {
      .contactpage .cont-wrap {
        height: 450px; } }
  .contactpage .leave-comment {
    padding: 40px 0; }

    @media screen and (max-width: 768px) {
      .contactpage {
        padding: 30px 20px; /* Kurangi padding agar lebih pas */
        text-align: center; /* Pusatkan teks */
      }
      
      .contactpage h2 {
        font-size: 28px; /* Kurangi ukuran font */
      }
    
      .contactpage p {
        font-size: 12px; /* Kurangi ukuran font agar lebih enak dibaca */
      }
    
      .contactpage .cont-wrap {
        margin: 30px 0;
        height: auto !important; /* Hindari tinggi tetap agar responsif */
      }
    
      .contactpage .leave-comment {
        padding: 20px 0;
      }
    }
    

.addressbar {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 992px) {
    .addressbar {
      float: left;
      width: 41.6666666667%; } }
  .addressbar .marker,
  .addressbar .support-mail {
    margin-bottom: 40px; }
    .addressbar .marker a,
    .addressbar .support-mail a {
      position: relative;
      float: left;
      width: 25%;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px; }
      @media (min-width: 768px) {
        .addressbar .marker a,
        .addressbar .support-mail a {
          float: left;
          width: 16.6666666667%; } }
    .addressbar .marker i,
    .addressbar .support-mail i {
      color: #362e29;
      font-size: 50px;
      line-height: 70px; }
    .addressbar .marker .cont,
    .addressbar .support-mail .cont {
      position: relative;
      float: left;
      width: 75%;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px; }
      @media (min-width: 768px) {
        .addressbar .marker .cont,
        .addressbar .support-mail .cont {
          float: left;
          width: 83.3333333333%; } }
    .addressbar .marker h4,
    .addressbar .support-mail h4 {
      font-family: "Old Standard TT", serif;
      font-size: 25px;
      color: #664d42;
      font-weight: 400;
      word-break: break-all; }
    .addressbar .marker p,
    .addressbar .support-mail p {
      font-size: 13px; }

.mapwrapper {
   width: 80%;
   height: 600px; 
   margin-top: -100px;
   
}
  @media screen and (min-width: 992px) {
    .mapwrapper {
      padding: 100px;
      padding-top: 100px;
      left: 10%;
      position: absolute;
      width: 100px;
    } }

    @media screen and (max-width: 767px) {
      .mapwrapper {
        width: 108%;
        height: 200px;
        margin-top: 0;
        position: static;
      }
    }

.headingcontact {
  font-family: "Old Standard TT", serif;
  font-size: 50px;
  color: #664d42;
  margin-bottom: 40px;
  text-transform: capitalize; }

.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
  text-align: center; }

a {
  cursor: pointer; }
  @media screen and (min-width: 992px) {
    a:hover,
    a:focus {
      text-decoration: none;
      box-shadow: 0 0 0 0;
      outline: 0; } }

section {
  padding-bottom: 50px; }

  .header-logo {
    display: flex; /* Use flexbox to align text and image horizontally */
    align-items: center; /* Vertically center the logo text and image */
    text-decoration: none; /* Remove underline from the link */
    color: #333; /* Default text color */
    font-family: 'Arial', sans-serif; /* Font for the text */
    font-size: 24px; /* Default font size for desktop */
    font-weight: bold;
    margin: 15px; /* Margin around the logo */
    position: relative; /* Allows positioning the logo */
  }
  
  /* Styling for the logo image */
  .header-logo img {
    max-height: 85px;
    max-width: 150px; /* Default height of the logo */
    margin-left: 10px; /* Space between the text and the logo */
    width: auto; /* Maintain aspect ratio */
  }
  
  /* Responsive adjustments for tablet and mobile screens */
  @media screen and (max-width: 768px) {
    .header-logo {
      font-size: 20px; /* Adjust the font size for tablets */
      padding: 10px; /* Adjust padding for smaller screens */
    }
  
    .header-logo img {
      height: 70px; /* Reduce logo size for tablets */
    }
  }
  
  @media screen and (max-width: 480px) {
    .header-logo {
      font-size: 18px; /* Adjust the font size for mobile */
      padding: 8px; /* Reduce padding for smaller screens */
    }
  
    .header-logo img {
      /* height: 70px;  */
      max-height: 55px;
      width: auto;
      height: auto;
      margin-top: -5px;
      display: block;
  
    }
  }
  
  /* For larger screens (992px and above) */
  @media (min-width: 992px) {
    .header-logo {
      position: absolute; /* Position logo at top left */
      left: 0; /* Align to the left side */
      top: 0; /* Align to the top */
    }
  }

.inner-page header {
  padding: 0; }

.banner-text,
.banner-img {
  text-align: center; }

.banner-img img {
  max-width: 100%; }

.banner-text img {
  max-width: 100%; }

.banner-text h2 {
  font-family: "Old Standard TT", serif;
  font-size: 25px; }
  .banner-text h2 span {
    display: block;
    text-transform: capitalize;
    font-family: "Great Vibes", cursive;
    font-size: 100px;
    color: #362e29;
    margin: 25px 15px 0 0; }



    
    

/*------------------------------------*/
/* Gaya untuk layar dengan lebar minimal 480px */
@media screen and (min-width: 480px) {
  .banner-text h2 span {
    font-size: 140px; /* Ukuran font lebih besar untuk tablet kecil */
  }
}

/*------------------------------------*/
/* Gaya untuk layar dengan lebar minimal 992px (desktop) */
@media screen and (min-width: 992px) {
  .banner-text {
    text-align: right; /* Teks di kanan untuk layar lebar */
  }

  .banner-text h2 span {
    font-size: 180px; /* Font lebih besar di layar lebar */
  }

  .banner-img {
    text-align: left; /* Gambar di kiri untuk layar lebar */
  }
}

/*------------------------------------*/
/* Gaya tambahan untuk layar yang lebih kecil dari 480px (ponsel kecil) */
@media screen and (max-width: 479px) {
  .banner-text h2 span {
    font-size: 80px; /* Ukuran font lebih kecil untuk ponsel kecil */
  }

  .banner-text {
    padding: 10px; /* Tambahkan ruang di sekitar teks */
  }

  .banner-img {
    margin-top: 15px; /* Tambahkan jarak antara teks dan gambar */
  }
}
/*------------------------------------*/
/* WAYPOINT INITIAL STYLES */
@media screen and (min-width: 768px) {
  .section-heading h1 span {
    -webkit-transform: scale3d(0, 0, 0);
            transform: scale3d(0, 0, 0);
    opacity: 0;
    -webkit-transition: all 1s ease;
            transition: all 1s ease; }
    .section-heading h1 span.animate {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
      opacity: 1; }
  .section-heading h2 {
    opacity: 0; }
  .order-type-wrapper,
  .service-details .service-wrapper,
  .banner-img-holder .cup,
  .reservation-form,
  .premium-text,
  .coffee-text,
  .inner-page .pricing-table,
  .banner-text h2 span,
  .banner-img img,
  ul.categories li {
    opacity: 0; }
  .service-details .service-wrapper.animated,
  .reservation-form.animated {
    opacity: 1; } }

section, .inner-page header {
  overflow: hidden; }



  #loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  /* Animasi spinner */
  .spinner {
    width: 80px;
    height: 80px;
    border: 10px solid #f3f3f3; /* Warna border luar */
    border-top: 10px solid #ffcc00; /* Warna bagian atas (animasi) */
    border-radius: 50%; /* Membuat lingkaran */
    animation: spin 1s linear infinite; /* Animasi berputar */
  }
  
  /* Keyframes untuk animasi berputar */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }



/* //////////////////////////////////////////////////////////////SOSIAL MEDIA CSS //////////////////////////////////////////////////////////////////////////*/
.gallery-container {
  max-width: 1170px;
  margin: 20px auto;
  background: #fff;
  padding: 20px;
}

.gallery-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.gallery-header h2 {
  font-size: 40px;
  color: #362e29;
  margin-bottom: 10px;
  font-weight: bold;
  padding-bottom: 20px;
}

.follow-button {
  background-color: #fff;
  border: 2px solid #362e29;
  color: #362e29;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.3s, color 0.3s, transform 0.2s;
}

.follow-button:hover {
  background-color: #644e40;
  color: #fff;
  transform: scale(1.05);
}

.follow-button img {
  width: 20px;
  height: 20px;
  transition: filter 0.3s;
}

.follow-button:hover img {
  filter: brightness(0) invert(1);
}

/* =================== GRID UTAMA =================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.gallery-itemmm {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5; /* ✅ Proporsional */
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-itemmm img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-itemmm:hover img {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* =================== VIDEO =================== */
.video-wrapper {
  position: relative;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 54px;
  padding: 10px;
}

/* =================== RESPONSIVE =================== */

/* ≤ 480px (Mobile kecil) */
@media screen and (max-width: 480px) {
  .gallery-header h2 {
    font-size: 28px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    text-align: center;
    font-family: "Stensil";
  }

  .gallery-header {
    align-items: center;
  }

  .follow-button {
    font-size: 14px;
    padding: 8px 12px;
  }

  .follow-button img {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
}

/* ≤ 767px (Mobile & Phablet) */
@media screen and (max-width: 767px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .gallery-itemmm {
    aspect-ratio: 4 / 5;
  }
}

/* 768px – 1023px (Tablet) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .gallery-itemmm {
    aspect-ratio: 4 / 5; /* Sama dengan mobile */
  }
}

/* 1024px – 1279px (Desktop medium) */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .gallery-itemmm {
    aspect-ratio: 4 / 5;
  }
}

/* ≥ 1280px (Desktop besar) */
@media screen and (min-width: 1280px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .gallery-itemmm {
    aspect-ratio: 4 / 5;
  }
}



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





/* FOOTTERRRR */
/* Existing Styles (No changes) */

/* Footer Container */
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Left Section: Logo and Copyright */
.footer-left {
  flex: 1;
}

.footer-left .logo {
  max-width: 110px;
  margin-bottom: 20px;
  font-family: "Open Sans", sans-serif;
}

.footer-left p {
  font-size: 14px;
  color: #333;
}

/* Middle Section: Customer Info */
.footer-middle {
  flex: 2;
  padding-left: 20px;
}

.footer-middle h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #333;
  font-family: "Open Sans", sans-serif;
}

.footer-middle p {
  font-size: 14px;
  color: #666;
}

.footer-middle i {
  color: #2c7b4f; /* Green color for icons */
  margin-right: 10px; /* Space between icon and text */
  font-size: 16px;
}

/* Right Section: Complaints Info and Social Icons */
.footer-right {
  flex: 2;
  padding-left: 20px;
}

.footer-right h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #333;
  font-family: "Open Sans", sans-serif;
}

.footer-right p {
  font-size: 14px;
  color: #666;
}

.footer-right i {
  color: #2c7b4f; /* Green color for icons */
  margin-right: 10px; /* Space between icon and text */
  font-size: 16px;
}

.social-iconsss a {
  display: inline-block;
  margin: 10px;
  font-size: 30px;  /* Larger icon size */
  color: #2c7b4f;  /* Icon color */
  text-decoration: none;
}

.social-iconsss a:hover {
  color: #0077b5;  /* Change color on hover */
  text-decoration: none;
}

/* Mobile Responsiveness */

/* When the screen width is 768px or smaller (for tablets and mobile phones) */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
  }

  .footer-left, .footer-middle, .footer-right {
    flex: none;
    width: 100%;
    text-align: center;  /* Ensure text is centered */
    margin-bottom: 20px;
    margin-right: 20px;
  }

  .footer-left .logo {
    max-width: 120px;
    margin-bottom: 10px;
    margin-left: 22px;
  }
  
  .footer-left p {
    margin-left: 30px;
  }

  .footer-middle h3, .footer-right h3 {
    font-size: 18px;
    margin-bottom: 5px;
    text-align: center;  /* Ensure headings are centered */
  }

  .footer-middle p, .footer-right p {
    font-size: 13px;
    color: #666;
    text-align: center;  /* Ensure paragraphs are centered */
    margin-left: auto;
    margin-right: auto;
  }

  .footer-middle i, .footer-right i {
    font-size: 18px;  /* Slightly larger icons for mobile */
  }

  .social-iconsss a {
    font-size: 25px;  /* Smaller icons for mobile */
    margin: 5px;
  }
}

/* For smaller screens (like smartphones) */
@media (max-width: 480px) {
  .footer-middle p, .footer-right p {
    font-size: 12px;  /* Even smaller font size */
  }

  .footer-middle i, .footer-right i {
    font-size: 14px;  /* Smaller icons */
  }

  .social-iconsss a {
    font-size: 22px;  /* Even smaller icons for smaller screens */
  }
}

/* //////////////////////////MENU TEMPAT////////////////////// */
/* Tombol wrapper */
.button-wrapper {
  width: 100%;
  max-width: 1200px; /* Biar tetap tengah dan stabil */
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}

/* Tombolnya */
#filterNearby {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: linear-gradient(145deg, #34c38f, #2eb67d);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 12px;
  box-shadow: 0 4px 8px rgba(46, 182, 125, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
}

#filterNearby:hover {
  background: linear-gradient(145deg, #2eb67d, #28a745);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(46, 182, 125, 0.5);
}


@media (max-width: 768px) {
  #filterNearby {
    margin: 16px 16px 0 auto; /* pojok kanan atas */
    display: block;
    font-size: 11px;
    padding: 6px 14px;
    border-radius: 30px;
    width: auto;
    text-align: center;
    margin-bottom: 5px;
  }
}

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



/*  */
.filter-btn {
  margin: 5px;
  padding: 8px 16px;
  border: none;
  background-color: #ddd;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s; /* Efek transisi untuk perubahan background dan warna */
}

.filter-btn:hover {
  background-color: #bbb; /* Warna latar belakang saat hover */
}

.filter-btn.active {
  background-color: #3f3530;
  color: white;
}

.filter-btn.active:hover {
  background-color:rgb(73, 59, 53); /* Warna latar belakang saat hover untuk tombol aktif */
}

@media (max-width: 768px) {
  .filter-btn-container {
    white-space: nowrap; /* Menjaga tombol tetap dalam satu baris */
    overflow-x: auto; /* Menambahkan scroll horizontal */
    width: 100%; /* Memastikan lebar wadah tombol maksimal */
    padding-bottom: 10px; /* Menambahkan padding bawah jika diperlukan untuk scroll */
  }
}

/* STORE CSS */
.store-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  padding: 20px;
}

.store-card {
  display: grid;
  grid-template-columns: 250px 1fr auto; /* gambar | info | panah */
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  background: white;
  gap: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.store-card:hover {
  transform: translateY(-5px);
}

/* Saat tidak ada gambar, alokasikan hanya info + panah */
.store-card.no-image {
  grid-template-columns: 1fr auto;
}

/* Saat tidak ada panah, alokasikan hanya gambar + info */
.store-card.no-arrow {
  grid-template-columns: 250px 1fr;
}

/* Kalau tidak ada gambar dan panah, full info */
.store-card.no-image.no-arrow {
  grid-template-columns: 1fr;
}

.store-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.store-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.store-info p {
  margin: 5px 0;
  color: #555;
}

.google-maps {
  color: green;
  font-weight: bold;
  text-decoration: none;
}

.store-arrow a {
  font-size: 20px;
  color: black;
  text-decoration: none;
}




/* Modal Styles */
/* .modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  border-radius: 10px;
  text-align: center;
  position: relative;
} */


.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  padding-top: 40px; /* Jarak dari atas saat scroll */
  box-sizing: border-box;
}

.modal-content {
  background-color: white;
  margin: auto;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}


.close {
  position: absolute;
  top: 1px;
  right: 7px;
  font-size: 40px;
  cursor: pointer;
}

.modal-body img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

/* Responsive Mobile */
@media (max-width: 768px) {
  .store-container {
    grid-template-columns: 1fr; /* Hanya 1 kolom */
    padding: 10px;
  }

  .store-card {
    flex-direction: column; /* Elemen diatur vertikal */
    text-align: center;
    padding: 10px;
    gap: 10px;
  }

  .store-image img {
    width: 100%; /* Full width */
    height: auto; /* Menyesuaikan proporsi */
    max-height: 180px; /* Batasi tinggi gambar */
  }

  .store-info h3 {
    font-size: 16px;
  }

  .store-info p {
    font-size: 14px;
  }

  .store-arrow a {
    font-size: 18px;
  }

  /* Modal Adjustments */
  .modal-content {
    width: 95%;
    padding: 15px;
  }

  .modal-body img {
    max-height: 200px; /* Gambar modal lebih kecil di mobile */
  }

  .close {
    font-size: 40px; /* Ukuran lebih besar */
    top: -8px; /* Jarak dari atas */
    right: -8px; /* Jarak dari kanan */
    width: 50px; /* Lebar tombol */
    height: 50px; /* Tinggi tombol */
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(5, 0, 0);
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Tambahkan bayangan agar terlihat */
    z-index: 1001; /* Pastikan di atas modal */
  }
}

.container.mt-5 {
  margin-top: 20px !important; /* Kurangi jarak */
}




/* /////////////////////////////////////////////////////////////////////////BANNER PROMO////////////////////////////////////////////////////////////////////////////////// */

.container_promo-slider {
  height: 67vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.promo-slider__buttons {
  position: absolute;
  top: 50%;
  width: 100%;
  max-width: 1600px;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  left: 50%;
  right: auto;
  z-index: 10;
  padding: 0 20px;
  transform: translateX(-50%);
}

.promo-slider__buttons .promo-slider-button {
  z-index: 1001;
  pointer-events: auto;
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(50, 50, 50, 0.8));
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.promo-slider__buttons .prev {
  left: 20px;
}

.promo-slider__buttons .next {
  right: 20px;
}

.promo-slider__buttons .promo-slider-button:hover {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(50, 50, 50, 1));
  transform: scale(1.2);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.promo-slider__buttons .promo-slider-button:active {
  transform: scale(1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.promo-slider__buttons .promo-slider-button:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.promo-slider__buttons .promo-slider-button {
  background-color: rgba(255, 255, 255, 0.9);
}

.promo-slider {
  position: relative;
  width: 90%;
  max-width: 1600px;
  overflow: hidden;
}

.promo-slider-wrapper {
  display: flex;
  transition: transform 0.6s ease-in-out;
  width: 100%;
}

.promo-slider .promo-slider__item {
  width: 100%;
  height: auto;
}

.promo-slider .promo-slider__item img {
  max-height: 67vh;
  width: 100%;
  height: auto;
  object-fit: contain;
}





@media (min-width: 1200px) {
  .promo-slider__buttons .prev {
    left: calc(5% + 10px);
  }

  .promo-slider__buttons .next {
    right: calc(5% + 10px);
  }
}

@media screen and (max-width: 768px) {
  .container_promo-slider {
    height: auto;
  }

  .promo-slider {
    width: 100%;
    overflow: hidden;
  }

  .promo-slider .promo-slider__item {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .promo-slider .promo-slider__item img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .promo-slider__buttons {
    padding: 0 10px;
  }

  .promo-slider__buttons .promo-slider-button {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .promo-slider__buttons .prev {
    margin-top: -20px;
    left: 10px;
  }

  .promo-slider__buttons .next {
    margin-top: -20px;
    right: 10px;
  }
}

@media screen and (max-width: 480px) {
  .container_promo-slider {
    height: auto;
    overflow: hidden;
  }

  .promo-slider {
    width: 100%;
    overflow: hidden;
  }

  .promo-slider .promo-slider__item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .promo-slider .promo-slider__item img {
    width: auto;               /* penting! */
    max-width: 100%;           /* batasi supaya nggak overflow */
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }
}



/* ////////////////////////////////////////// */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  z-index: 1000;
}

.whatsapp-float img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out;
}

.whatsapp-float:hover img {
  transform: scale(1.1);
}


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

.karirpage {
  margin-bottom: 15%;
  margin-top: 80px;
}

.title {
  font-family: 'plus jakarta sans', cursive; /* Menggunakan font Plus Jakarta Sans */
  font-size: 40px; /* Memperbesar ukuran font title */
  font-weight: 700; /* Membuat title menjadi bold */
  color: #ffffff;
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 2px;
}
/* Animasi Muncul */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Table Styling */
.roles-table {
  margin: 30px auto 0 auto;
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background-color: #ffffff; /* ✅ Tidak transparan */
  font-size: 1em;

  opacity: 0;
  animation: fadeSlideIn 0.6s ease forwards;
  animation-delay: 0.4s;
}

/* Table Header */
.roles-table th {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #f5f5f5; /* ✅ Latar belakang untuk header */
  color: #000000;
  padding: 15px;
  text-align: center  ;
  font-size: 1.3em;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Table Body Cells */
.roles-table td {
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
  font-size: 1em;
  background-color: #ffffff; /* ✅ Tetap putih di hover */
  color: #444;
  transition: background-color 0.3s ease;
}

/* Hover Effect */
.roles-table tbody tr:hover td {
  background-color: #f9f9f9; /* ✅ Efek hover ringan tapi tidak transparan */
}


@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 15px 4px rgba(0, 123, 255, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

/* DESKTOP */
/* Desktop style (≥ 768px) */
@media (min-width: 769px) {
  #jobSection {
    margin-top: -100px;         /* Ubah dari -100px ke nilai positif */
    margin-left: 90px;        /* Center horizontal */
    margin-right: auto;
    width: 90%;               /* Atur lebar agar tidak terlalu mepet */
    padding: 0;
  }

  .roles-table {
    width: 100%;
    margin: 0 auto;
  }
}


@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.title {
  font-family: 'plus jakarta sans', cursive;
  font-size: 40px;
  font-weight: bold;
  color: #3f3530;
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 2px;
  opacity: 0;
  animation: fadeSlideUp 1s ease-out forwards;
  animation-delay: 0.2s; /* Sedikit jeda agar terlihat elegan */
}




/* /////////////////////TOMBOL KARIR//////////////////////// */
.arrow-button {
  cursor: pointer;
  font-size: 14px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-weight: 500;
  animation: pulse 2s infinite;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.arrow-button:hover {
  background-color: #0056b3;
  transform: scale(1.1);
  color: white;
}


/* Mobile Responsive Styling */
@media (max-width: 600px) {
  .arrow-button {
    font-size: 11px;
    padding: 6px 10px;
    max-width: 180px;      /* batasi lebar maksimum tombol */
    width: auto;           /* tombol menyesuaikan isi */
    text-align: center;
    display: block;
    margin: 0 auto;        /* posisikan tombol ke tengah */
    border-radius: 6px;
  }

  .arrow-button:hover {
    transform: none;       /* tetap hilangkan efek hover di mobile */
  }
}

/* RESPONSIVE UNTUK MOBILE */
@media (max-width: 768px) {

  .karirpage {
    margin-bottom: 100px;
    margin-top: 80px;
 }

  #jobSection {
    margin-top: -100px;
    padding: 0 10px;
  }

  .roles-table {
    font-size: 0.85em;
    margin: 0 auto;
    display: block;
    overflow-x: auto;
    width: 100%;
    min-width: 450px; /* Paksa tabel lebih lebar agar scroll muncul di wrapper */
  }
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .roles-table th,
  .roles-table td {
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;       /* Hindari teks pecah */
  }

  .arrow-button {
    font-size: 11px;
    padding: 6px 10px;
    display: inline-block;
    max-width: 100%;
    margin: 0 auto;
  }
}


@media (min-width: 346px)and (max-width: 963px) {
  .karirpage {
    margin-bottom: 100px;
    margin-top: 80px;
 }

  #jobSection {
    margin-top: -100px;
    padding: 0 10px;
  }

  .roles-table {
    font-size: 0.85em;
    margin: 0;
    width: max-content; /* Gunakan ini agar tabel bisa scroll horizontal */
    min-width: unset;   /* Hapus min-width agar tidak memaksa ukuran */
    display: table;
  }
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .roles-table th,
  .roles-table td {
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;       /* Hindari teks pecah */
  }

  .arrow-button {
    font-size: 11px;
    padding: 6px 10px;
    display: inline-block;
    max-width: 100%;
    margin: 0 auto;
  }
}
/* ///////////////////////////////////////////////////////////////////////// */


/* Gaya pop-up */
/* Gaya pop-up */
/* Gaya pop-up */
.popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 700px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	z-index: 9999;
  display: none;
}

body.popup-open {
	overflow: hidden; /* Cegah scroll halaman belakang */
}

/* Efek untuk judul utama */
.popup h3 {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Efek untuk subjudul */
.popup h4 {
  font-size: 20px;
  font-weight: 500;
  color: #2c3e50;
  margin-top: 30px;
  margin-bottom: 10px;
  text-transform: capitalize;
}

/* Gaya untuk paragraf teks */
.popup p {
  line-height: 1.6;
  margin-bottom: 15px;
  font-size: 16px;
  color: #555;
}

/* Gaya untuk list di dalam pop-up */
.popup ul {
  list-style-type: disc;
  margin-left: 20px;
  font-size: 16px;
  color: #555;
}

.popup li {
  margin-bottom: 10px;
}

/* Gaya untuk tombol tutup */
.close-btn {
  cursor: pointer;
  background-color: #ff6b6b;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 30px;
  font-size: 14px;
  margin-top: 25px;
  margin-left: 43%;
  transition: background-color 0.3s ease, transform 0.2s ease;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}

.close-btn:hover {
  background-color: #ff4040;
  transform: scale(1.1);
}

.close-btn:focus {
  outline: none;
  box-shadow: 0 0 8px 3px rgba(255, 107, 107, 0.6);
}

/* Responsif untuk tampilan mobile */
@media (max-width: 768px) {
  .popup {
    width: 90%;
    padding: 30px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .popup {
    width: 90%;
    padding: 25px;
    font-size: 14px;
  }
}

/* Menambahkan scroll horizontal jika diperlukan */
.popup-content {
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
}

.popup-content p {
  flex: 1;
  margin-right: 10px;
  white-space: nowrap;
}


/* Responsive Design untuk tampilan mobile */
@media (max-width: 768px) {
  .popup {
    width: 80%;
    padding: 30px;
    font-size: 16px; /* Mengurangi ukuran font untuk mobile */

    /* Tambahan agar popup bisa di-scroll */
    max-height: 80vh; /* Batasi tinggi maksimal agar tidak keluar layar */
    overflow-y: auto; /* Tambahkan scroll vertikal saat konten melebihi max-height */
    text-align: left !important;
  }

  .close-btn {
    margin-left: auto;
    display: block;
    padding: 10px 18px;
    font-size: 15px;
    margin-left: 120px;
  }
}


@media (max-width: 480px) {
  .popup {
    width: 90%;
    padding: 25px;
    font-size: 14px; /* Mengurangi ukuran font lebih kecil */
  }

  .close-btn {
    padding: 8px 16px;
    font-size: 14px;
  }
}

/* ///////////////////////////////////INI KARIR JUGA/////////////////////////////////////////// */

/* Tabel styling untuk mobile */
.roles-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f5f5f5;
  font-size: 1em; /* Ukuran font lebih kecil di perangkat mobile */
}

.roles-table th, .roles-table td {
  padding: 12px; /* Padding disesuaikan untuk mobile */
  font-size: 1.1em; /* Ukuran font lebih kecil */
}

/* Tabel Header */
.roles-table th {
  font-family: 'plus jakarta sans', cursive;
  background-color: #f5f5f5;
  color: #000000;
  padding: 15px;
  text-align: center;
  font-size: 1.1em;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Responsif untuk tabel */
@media (max-width: 768px) {
  .roles-table th, .roles-table td {
    padding: 10px;
    font-size: 0.9em; /* Ukuran font untuk ponsel lebih kecil */
  }
}

@media (max-width: 480px) {
  .roles-table th, .roles-table td {
    padding: 8px; /* Mengurangi padding */
    font-size: 0.8em; /* Ukuran font lebih kecil */
  }
}


/* /////////////////////////////////////////////////////////////////CONTACT US/////////////////////////////////////////////////// */
.contact-wrapper {
  background: rgb(255, 255, 255);
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  max-width: 800px;
  width: 100%;
  margin-left: 180px;
}

.contact-wrapper h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.input-group {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  width: 100%;
}

input, textarea{
  width: 90%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid;
  font-size: 16px;
}

input:focus, textarea:focus {
  border-color: #764ba2;
  outline: none;
}

contact-btn{
  margin-right: 34px;
  margin-top: -80px;
  width: 30%;
  border: none;
  padding: 12px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

contact-btn :hover {
  background: #ffffff;
  color: #000000;
}

.g-recaptcha {
  display: flex;
  justify-content: left;
  margin-bottom: 15px;
  margin-left: 40px;
}

select {
  width: 90%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid;
  font-size: 16px;
}

select:focus {
  border-color: #764ba2;
  outline: none;
}

@media (max-width: 768px) {
  .contact-wrapper {
      margin: 70px auto;
      padding: 20px;
      max-width: 90%;
  }

  .input-group {
      flex-direction: column;
      align-items: center;
      width: 100%;
  }

  input, textarea, select {
      margin-top: 10px;
      width: 100%;
      max-width: 100%;
  }

  contact-btn{
      width: 100%;
      margin-right: 0;
      margin-top: 10px;
  }

  .g-recaptcha {
      justify-content: center;
      margin-left: 0;
      
  }
  
}

/* //////////////////////////////////////////////////////////////////VIDEO/////////////////////////////////////////////////////////////////////////////////////// */
.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  overflow: hidden;
 
}

.video-box {
  width: 95vw;         /* perkecil dari 100vw */
  max-width: 1200px;    /* batas maksimum lebar */
  aspect-ratio: 16 / 9;
  position: relative;
  
}

video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* agar tidak kepotong */
  display: block; 
}

/* Responsive: Mobile */
@media screen and (max-width: 768px) {
  .video-box {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  video {
    object-fit: contain;
  }
}



/* ///////////////////////////////////HEADER HOME//////////////////////////////////////////// */
/* Desktop view tetap pakai ini */
.language-switch-home {
  position: absolute;
  top: 35px;
  right: 250px; /* default */
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Roboto', sans-serif;
  z-index: 999;
}

@media (min-width: 1317px) and (max-width:1484px) {
  .language-switch-home {
    position: absolute;
    top: 35px;
    right: -30px; /* sesuaikan posisinya */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    z-index: 999;
  }

  .language-switch-home .lang-btn {
    padding: 5px 10px;
    font-size: 14px;
  }

  .language-switch-home .separator {
    margin: 0 4px;
    font-size: 14px;
  }
}

@media (min-width: 1025px) and (max-width : 1316px ) {
  .language-switch-home {
    position: absolute;
    top: 35px;
    right: -30px; /* sesuaikan posisinya */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    z-index: 999;
  }

  .language-switch-home .lang-btn {
    padding: 5px 10px;
    font-size: 14px;
  }

  .language-switch-home .separator {
    margin: 0 4px;
    font-size: 14px;
  }
}

@media (min-width: 1441px) and (max-width:1784px){
  .language-switch-home {
    position: absolute;
    top: 35px;
    right: 115px; /* sesuaikan posisinya */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    z-index: 999;
  }

  .language-switch-home .lang-btn {
    padding: 5px 10px;
    font-size: 14px;
  }

  .language-switch-home .separator {
    margin: 0 4px;
    font-size: 14px;
  }
}


@media (max-width: 1024px) {
  .language-switch-home {
    position: static;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 5px 30px 10px 0;
    margin-top: -5px;
    margin-left: -5px;
  }
}





@media (min-width: 992px) and (max-width:994px) {
  .language-switch-home {
    position: static;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 5px 30px 10px 0;
    margin-top: -1px;
    margin-left: 20px;
  }
}

@media (min-width: 1025px) and (max-width:1152px) {
  .language-switch-home {
    position: absolute;
    top: 27px;
    right: -65px; /* sesuaikan posisinya */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    z-index: 999;
  }

  .language-switch-home .lang-btn {
    padding: 5px 10px;
    font-size: 14px;
  }

  .language-switch-home .separator {
    margin: 0 4px;
    font-size: 14px;
  }
}


@media (min-width: 995px) and (max-width:1024px) {
  .language-switch-home {
    position: absolute;
    top: 27px;
    right: -120px; /* sesuaikan posisinya */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    z-index: 999;
  }

  .language-switch-home .lang-btn {
    padding: 5px 10px;
    font-size: 14px;
  }

  .language-switch-home .separator {
    margin: 0 4px;
    font-size: 14px;
  }
}

.language-switch-home .lang-btn {
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 500;
  color: #333;
  background-color: #f0f0f0;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.language-switch-home .lang-btn:hover {
  background-color: #b4462a;
  color: #fff;
  border-color: #b4462a;
}

.language-switch-home .active-lang {
  background-color: #3f3530;
  color: #fff;
  border-color: #3f3530;
}

.language-switch-home .separator {
  color: #999;
  font-weight: bold;
}

/* ✅ MOBILE VIEW (untuk layar <= 768px) */
@media (max-width: 768px) {
  .language-switch-home {
    position: static;
    justify-content: flex-start; /* Ganti dari center jadi flex-start */
    flex-wrap: wrap;
    padding: 5px 30px 10px 0; /* atas:5px, kanan:15px, bawah:0, kiri:0 */
    margin-top: -5px; /* geser ke atas */
    margin-left: -5px;
  }

  .language-switch-home .lang-btn {
    padding: 5px 10px;
    font-size: 14px;
  }

  .language-switch-home .separator {
    margin: 0 4px;
    font-size: 14px;
  }
}


/* //////////////////////////////navbar home//////////////////////////////// */
.custom-navbar .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 0 15px;
  position: relative;
}

.custom-navbar .navbar-header {
  display: flex;
  align-items: center;
  width: auto; /* penting supaya gak stretch */
  flex-shrink: 0;
  position: relative;
  z-index: 15;
  /* sementara debug: */
  /* background: rgba(255,0,0,0.2); */
}

.custom-navbar .navbar-toggle {
  margin-left: auto;
  border: 1px solid #ddd;
  padding: 6px 10px;
  border-radius: 6px;
  background-color: #fff;
  z-index: 20;
  position: relative;
}

/* Navbar collapse default desktop */
.custom-navbar .navbar-collapse {
  position: static;
  background-color: transparent;
  box-shadow: none;
  width: auto;
  z-index: 10;
}

.custom-navbar .home-header-logo {
  max-width: 150px;
  overflow: hidden;
}

.custom-navbar .home-header-logo img {
  max-height: 85px;
  max-width: 150px;
  height: auto;
  width: auto;
  display: block;
  margin-top: -30px;
}
@media (max-width: 768px) {
  .custom-navbar .navbar-header {
    display: flex;
    justify-content: space-between; /* logo di kiri, toggle di kanan */
    align-items: center;
    width: 100%;
    padding: 0 10px;
    position: relative;
    z-index: 10;
  }

  .custom-navbar .navbar-toggle {
    margin-left: auto;
    z-index: 20;
    position: relative;
  }

  .custom-navbar .navbar-collapse {
    background-color: #fff;
    position: absolute;
    top: 100%;
    left: 1%;
    width: 110%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 9999;
  }

  .custom-navbar .navbar-nav > li > a {
    padding: 10px 15px;
  }

  .custom-navbar .home-header-logo img {
    max-height: 55px;
    width: auto;
    height: auto;
    margin-top: -13px;
    display: block;
  }

  .custom-navbar .home-header-logo {
    max-width: 120px;
    margin-top: -10px;
  }
  
}


@media (min-width: 769px) and (max-width: 991px) {
  .custom-navbar .navbar-header {
    display: flex;
    justify-content: space-between; /* logo di kiri, toggle di kanan */
    align-items: center;
    width: 100%;
    padding: 0 10px;
    position: relative;
    z-index: 10;
  }

  .custom-navbar .navbar-toggle {
    margin-left: auto;
    z-index: 20;
    position: relative;
  }

  .custom-navbar .navbar-collapse {
    background-color: #fff;
    position: absolute;
    top: 100%;
    left: 1%;
    width: 110%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 9999;
  }

  .custom-navbar .navbar-nav > li > a {
    padding: 10px 15px;
  }

  .custom-navbar .home-header-logo img {
    max-height: 55px;
    width: auto;
    height: auto;
    margin-top: -13px;
    display: block;
  }

  .custom-navbar .home-header-logo {
    max-width: 120px;
    margin-top: -10px;
  }
}




@media (min-width: 992px) and (max-width: 1024px) {
  .custom-navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* Jangan wrap */
    padding: 0 20px;
  }

  .custom-navbar .navbar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
  }

  .custom-navbar .navbar-toggle {
    display: none; /* Sembunyikan toggle */
  }

  .custom-navbar .home-header-logo {
    max-width: 120px;
    margin-left: 0;
  }

  .custom-navbar .home-header-logo img {
    max-height: 60px;
    margin-top: -15px;
    display: block;
  }

  .custom-navbar .navbar-collapse {
    position: static;
    background: transparent;
    box-shadow: none;
    width: auto;
    margin-top: 0;
    justify-content: flex-end;
    display: flex !important; /* Paksa tampil */
  }

  .custom-navbar .navbar-nav > li > a {
    padding: 10px 14px;
    font-size: 13px;
  }
}





@media (min-width: 992px) and (max-width: 1152px) {
  .custom-navbar .container-fluid {
    flex-wrap: nowrap; /* <- JANGAN wrap */
    padding: 0 15px;
  }

  .custom-navbar .home-header-logo img {
    max-height: 60px;
    margin-top: -20px;
  }

  .custom-navbar .navbar-nav > li > a {
    font-size: 13px;
    padding: 10px 12px;
  }

  .custom-navbar .navbar-collapse {
    width: auto;
    margin-top: 0;
    justify-content: flex-end;
  }

  .custom-navbar .navbar-header {
    width: auto;
    justify-content: flex-start;
  }

  .custom-navbar .navbar-toggle {
    display: none; /* Sembunyikan toggle button jika tidak dipakai */
  }
}



@media (min-width: 992px) and (max-width: 1024px) {
  .custom-navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0 10px;
    gap: 10px;
  }

  .custom-navbar .navbar-header {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .custom-navbar .home-header-logo {
    max-width: 120px;
    margin-left: 0;
  }

  .custom-navbar .home-header-logo img {
    max-height: 55px;
    margin-top: -15px;
  }

  .custom-navbar .navbar-collapse {
    flex: 1 1 auto;
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    background: transparent;
    box-shadow: none;
    position: static;
    width: auto;
    margin-top: 0;
  }

  .custom-navbar .navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
  }

  .custom-navbar .navbar-nav > li {
    margin: 0 5px;
  }

  .custom-navbar .navbar-nav > li > a {
    font-size: 13px;
    padding: 8px 10px;
  }

  .custom-navbar .navbar-toggle {
    display: none;
  }
}







/* ////////////////////ABOUT TAMPILAN///////////////////// */
.about-section {
  width: 100%;
  background-color: #fff;
  margin: 60px 0;
}

.about-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* space-between biar natural saat dua kolom */
  flex-wrap: wrap;
}

/* Gambar sisi kiri dengan efek gradasi */
.about-image {
  width: 50%;
  min-height: 500px;
  background: url('/assets/images/ourstory.jpg') no-repeat center center;
  background-size: cover;
  position: relative;
}

.about-image::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0) 60%, #ffffff 90%);
}


/* Teks sisi kanan */
.about-text {
  width: 50%;
  padding: 60px 60px 60px 80px;
  box-sizing: border-box;
}

.about-subtitle {
  font-size: 16px;
  color: #3f3530;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.about-subtitle span {
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: #3f3530;
  margin-right: 10px;
}

.about-title {
  font-size: 56px;
  font-weight: 700;
  color: #3f3530;
  margin: 0 0 20px;
}

.about-desc {
  font-size: 22px;
  line-height: 1.5;
  color: #3f3530;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .about-container {
    flex-direction: column-reverse; /* ⬅️ gambar di bawah */
    align-items: left;
  }

  .about-image,
  .about-text {
    width: 100%;
  }

  .about-image {
    min-height: 280px;
  }

  .about-text {
    padding: 40px 30px;
    text-align: left;
  }

  .about-title {
    font-size: 36px;
  }

  .about-desc {
    font-size: 18px;
  }
}



@media (max-width: 768px) {
  .about-container {
    flex-direction: column;
    margin-top: -8%; /* tambahkan jika perlu mengontrol jarak dari atas */
  }

  .about-text {
    order: 1;
    width: 100%;
    padding: 10px 16px; /* makin kecil supaya lebih dekat */
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  .about-image {
    order: 2;
    width: 100%;
    min-height: 220px;
    background-position: center;
    margin: 0; /* pastikan tidak ada margin atas/bawah */
  }

  .about-title {
    font-size: 26px;
    margin: 0 0 10px 0;
  }

  .about-subtitle {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .about-subtitle span {
    width: 20px;
  }

  .about-desc {
    font-size: 15px;
    line-height: 1.4;
    margin: 0;
  }

  .about-image::after {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 60%, #ffffff 100%);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-on-load {
  animation: fadeInUp 1s ease-out forwards;
  opacity: 0; /* Supaya transisi terlihat */
}

.about-image.animate-on-load {
  animation-delay: 0.2s;
}

.about-text.animate-on-load {
  animation-delay: 0.4s;
}


/* /////////////////////////////////////////// */
.vision-mission-section {
  width: 100%;
  background-color: #fff;
  padding: 60px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #3f3530;
}

.vision-mission-container {
  display: flex;
  justify-content: flex-start; /* supaya item mulai dari kiri */
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px; /* jarak antar kiri dan kanan */
  flex-wrap: wrap;
  margin-left: 500px;
  margin-top: 3%;
}

@media (min-width: 1025px) and (max-width: 1440px) {
  .vision-mission-container {
    margin-left: 300px; /* atur sesuai kebutuhan */
    margin-right: 20px;
  }
}

@media (min-width: 1441px) and (max-width: 1600px) {
  .vision-mission-container {
    margin-left: 300px; /* atur sesuai kebutuhan */
    margin-right: 20px;
  }
}

/* ✅ Mobile tetap aman */
@media (max-width: 768px) {
  .vision-mission-container {
    flex-direction: column;
    margin: 20px auto;
    padding: 0 10px;
    gap: 20px;
  }
}

@media (max-width: 915px) and (min-height: 1000px) {
  .vision-mission-container {
    margin: 20px;
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 1024px) and (min-height: 1000px) {
  .vision-mission-container {
    margin: 30px;
    flex-direction: column;
    gap: 24px;
  }
}

@media (max-width: 800px) and (min-height: 1000px) {
  .vision-mission-container {
    margin: 15px;
    flex-direction: column;
    gap: 18px;
  }
}

@media (max-width: 900px) and (min-height: 1000px) {
  .vision-mission-container {
    margin: 25px;
    flex-direction: column;
    gap: 20px;
  }
}
  @media (min-width: 1012px) and (max-width: 1159px) {
    .vision-mission-container {
      margin: 25px;
      flex-direction: column;
      gap: 20px;
    }
}






/* //////////////////////////////////////////////////////////////// */
.vm-left {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  
}

.vm-right {
  width: 65%;
}

.vm-title {
  font-size: 56px;
  font-weight: 700;
  margin: 0;
  position: relative;
  padding-top: 20px; /* kasih ruang di atas untuk garis */
  line-height: 1.2;
  text-align: left;
}

.vm-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px; /* kamu bisa sesuaikan panjang garis */
  height: 4px;
  background-color: #3f3530;
  border-radius: 2px;
}


.vm-text {
  font-size: 22px;
  line-height: 1.6;
  margin-bottom: 30px;
  white-space: pre-line;
}

.vm-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vm-list li {
  font-size: 22px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.vm-list li strong {
  font-weight: 700;
  color: #3f3530;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-on-load {
  animation: fadeInUp 1s ease-out forwards;
  opacity: 0; /* awalnya disembunyikan */
}
/* ////////////////////////////////////////////////////////////////////////////////// */
@media (min-width: 769px) and (max-width: 1024px) {
  .vm-left,
  .vm-right {
    margin-top: -30px;
    width: 100% !important;
  }

  .vm-left {
    justify-content: left;
    margin-bottom: 20px;
  }

  .vm-title {
    font-size: 32px;
    text-align: left;
  }

  .vm-title::before {
    left: 14%;
    transform: translateX(-50%);
  }

  .vm-text,
  .vm-list li {
    font-size: 18px;
    text-align: left;
  }

  .vm-list {
    padding-left: 0;
    text-align: left;
  }
}

@media (min-width: 1025px) and (max-width: 1159px) {
  .vm-left,
  .vm-right {
    margin-top: -30px;
    width: 100% !important;
  }

  .vm-left {
    justify-content: left;
    margin-bottom: 20px;
  }

  .vm-title {
    font-size: 32px;
    text-align: left;
  }

  .vm-title::before {
    left: 14%;
    transform: translateX(-50%);
  }

  .vm-text,
  .vm-list li {
    font-size: 18px;
    text-align: left;
  }

  .vm-list {
    padding-left: 0;
    text-align: left;
  }
}




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

/* Mobile styles */
@media (max-width: 768px) {
  .vision-mission-container {
    flex-direction: column;
    margin-left: 0;
    gap: 20px;
    padding-top: 10px;
  }

  .vm-left,
  .vm-right {
    width: 100%;
    margin-bottom: 5px; /* dikurangi dari 20px */
  }

  .vm-title {
    position: relative;
    font-size: 28px;
    /* padding-left: 30px; */
    margin-bottom: -10px; /* dikurangi dari 15px */
    font-weight: bold;
  }

  .vm-title::before {
    content: "";
    position: absolute;
    top: 0.6em; /* disesuaikan agar sejajar teks */
    left: 0;
    width: 20px;
    height: 3px;
    background-color: #3a2e28;
    border-radius: 2px;
  }

  .vm-text {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .vm-list li {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
}


@media (min-width: 769px) and (max-width:1012px) {
  .vision-mission-container {
    flex-direction: column;
    margin-left: 0;
    gap: 20px;
    padding-top: 10px;
  }

  .vm-left,
  .vm-right {
    width: 100%;
    margin-bottom: 30px; /* dikurangi dari 20px */
  }

  .vm-title {
    position: relative;
    font-size: 28px;
    /* padding-left: 30px; */
    margin-bottom: -10px; /* dikurangi dari 15px */
    font-weight: bold;
  }

  .vm-title::before {
    content: "";
    position: absolute;
    top: 0.6em; /* disesuaikan agar sejajar teks */
    left: 0;
    width: 20px;
    height: 3px;
    background-color: #3a2e28;
    border-radius: 2px;
  }

  .vm-text {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .vm-list li {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
}




/* /////////////////// */
.story-section {
  width: 100%;
  background-color: #fff;
  padding: 60px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #3f3530;
}

.story-container {
  display: flex;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
  flex-wrap: wrap;
  margin-left: 500px;
}

@media (min-width: 1280px) and (max-width: 1600px) {
  .story-container {
    margin-left: 300px;
    margin-right: 20px;
  }
}

@media (min-width: 1160px) and (max-width: 1280px) {
  .story-container {
    margin-left: 300px;
    margin-right: 20px;
  }
}

/* ✅ Untuk mobile dan tablet tetap aman */
@media (max-width: 768px) {
  .story-container {
    flex-direction: column;
    margin: 20px auto;
    padding: 0 10px;
    gap: 20px;
  }
}


@media (max-width: 915px) and (min-height: 1000px) {
  .story-container {
    margin: 20px;
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 1024px) and (min-height: 1000px) {
  .story-container {
    margin: 30px;
    flex-direction: column;
    gap: 24px;
  }
}

@media (max-width: 800px) and (min-height: 1000px) {
  .story-container {
    margin: 15px;
    flex-direction: column;
    gap: 18px;
  }
}

@media (max-width: 900px) and (min-height: 1000px) {
  .story-container {
    margin: 25px;
    flex-direction: column;
    gap: 20px;
  }
}

@media (min-width: 1012px) and (max-width: 1159px) {
  .story-container {
    margin: 25px;
    flex-direction: column;
    gap: 20px;
  }
}




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

.story-left {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.story-right {
  width: 65%;
}

.story-title {
  font-size: 56px;
  font-weight: 700;
  margin: 0;
  position: relative;
  padding-top: 10px; /* ruang untuk garis di atas */
  line-height: 1.2;
  text-align: left;
}

.story-title span {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: #3f3530;
  border-radius: 2px;
  display: inline-block;
}


.story-text {
  font-size: 22px;
  line-height: 1.6;
  margin-bottom: 20px;
  white-space: pre-line;
}


/* ////////////////////////////////////////////// */
@media (min-width: 769px) and (max-width: 1159px) {
  .story-left,
  .story-right {
    width: 100% !important;
  }

  .story-left {
    justify-content: left;
    margin-bottom: 20px;
  }

  .story-title {
    font-size: 32px;
    text-align: left;
  }

  .story-title span {
    left: 19%;
    transform: translateX(-50%);
  }

  .story-text {
    margin-top: -40px;
    font-size: 18px;
    text-align: left;
  }
}


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

/* Responsive mobile */
@media (max-width: 768px) {
  .story-container {
    flex-direction: column;
    margin-left: 0;
    gap: 20px;
    padding-top: 10px;
  }

  .story-left,
  .story-right {
    width: 100%;
  }

  .story-title {
    display: flex;
    align-items: center; /* membuat garis dan teks sejajar vertikal */
    font-size: 28px;
    margin-bottom: -10px;
    font-weight: bold;
    gap: 6px; /* JARAK antara garis dan teks, bisa dikurangi */
  }

  .story-title span {
    display: inline-block;
    width: 20px;
    height: 3px;
    background-color: #3a2e28;
    border-radius: 2px;
    margin-top: 2px; /* bisa disesuaikan agar posisi vertikal pas */
  }

  .story-text {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
}

@media (min-width: 769px) and (max-width :1011px) {
  .story-container {
    flex-direction: column;
    margin-left: 0;
    gap: 20px;
    padding-top: 10px;
  }

  .story-left,
  .story-right {
    width: 100%;
  }

  .story-title {
    display: flex;
    align-items: center; /* membuat garis dan teks sejajar vertikal */
    font-size: 28px;
    margin-bottom: -10px;
    font-weight: bold;
    gap: 6px; /* JARAK antara garis dan teks, bisa dikurangi */
  }

  .story-title span {
    display: inline-block;
    width: 20px;
    height: 3px;
    background-color: #3a2e28;
    border-radius: 2px;
    margin-top: 2px; /* bisa disesuaikan agar posisi vertikal pas */
  }

  .story-text {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
}




/* //////////////////// */
.about-operation {
  padding: 60px 20px;
  background: #fff;
  color: #000;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.operation-heading {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 40px;
}

.operation-layout {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: auto;
}

.operation-item {
  text-align: center;
}

.operation-item img {
  width: 100%;
  height: 450px; /* Atur tinggi tetap */
  border-radius: 8px;
  object-fit: cover; /* Biar gambar tetap proporsional dan rapi */
}


.operation-item h3 {
  font-size: 14px;
  font-weight: bold;
  margin-top: 12px;
}

.operation-item p {
  font-size: 13px;
  line-height: 1.4;
  margin-top: 4px;
}

/* Layout khusus untuk 5 item */
.item1 { grid-column: span 2; }
.item2 { grid-column: span 2; }
.item3 { grid-column: span 2; }
.item4 { grid-column: span 3; }
.item5 { grid-column: span 3; }

/* Responsive Mobile */
@media (max-width: 768px) {
  .operation-layout {
    grid-template-columns: 1fr;
  }

  .operation-item img {
    width: 100%;
    height: auto;
  }
}

/* Animasi dasar */
@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.operation-item {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeSlideUp 0.8s ease-out forwards;
}

/* Animasi delay berurutan */
.operation-item:nth-child(1) { animation-delay: 0.1s; }
.operation-item:nth-child(2) { animation-delay: 0.2s; }
.operation-item:nth-child(3) { animation-delay: 0.3s; }
.operation-item:nth-child(4) { animation-delay: 0.4s; }
.operation-item:nth-child(5) { animation-delay: 0.5s; }

/* //////////////////////////////////////////////////////MENU NEW///////////////////// */
.hero-banner {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #fff; /* Warna putih (bukan hitam) */
  padding: 0;
  margin-top: -12%;        /* Hindari jarak dari atas */
  margin-bottom: 0;     /* Hindari jarak ke bawah */
}

.hero-slider-wrapper {
  display: flex;
  width: 100%;
  transition: transform 0.6s ease-in-out;
}

.hero-slide {
  min-width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ✅ Gambar muat seluruh tanpa potong */
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
  margin: 0;
  padding: 0;
}


/* Tombol navigasi */
.slider-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 20px;
  z-index: 10;
}

.slider-nav button {
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  font-size: 28px;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.slider-nav button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

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

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-slide {
    aspect-ratio: 16 / 9;
  }

  .hero-slide img {
    object-fit: contain;
    object-position: center;
  }

  .slider-nav button {
    font-size: 24px;
    padding: 8px 14px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero-slide {
    aspect-ratio: 16 / 9;
  }

  .hero-slide img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
  }

  .slider-nav {
    padding: 0 10px;
  }

  .slider-nav button {
    font-size: 20px;
    padding: 6px 10px;
    background-color: rgba(0, 0, 0, 0.5);
  }
}


/* //////////////////////////////////////////////////////////////// */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-promo {
  padding: 80px 40px;
  background-color: #fff;
  text-align: center;
  animation: fadeUp 1s ease forwards;
}

.content-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.product-promo h2 {
  font-size: 36px;
  font-weight: 800;
  color: transparent;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.2;
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(90deg, #d5a467, #a65b37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(165, 91, 55, 0.5);
  display: inline-block;
  animation: fadeUp 1s ease forwards;
  animation-delay: 0.2s;
  animation-fill-mode: both;
}

.product-promo h2 .highlight {
  background: #a65b37 !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 30px;
  display: inline-block;
  margin-top: 15px;
  font-size: 24px;
  letter-spacing: 3px;
  box-shadow: 0 4px 8px rgba(165, 91, 55, 0.7);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.product-promo .highlight:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(165, 91, 55, 0.9);
}

.product-promo .subtext {
  font-size: 20px;
  color: #803c1c;
  margin-top: 25px;
  margin-bottom: 50px;
  font-weight: 700;
  font-style: italic;
  font-family: 'Georgia', serif;
  text-shadow: 1px 1px 3px rgba(128, 60, 28, 0.4);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
  animation: fadeUp 1s ease forwards;
  animation-delay: 0.4s;
  animation-fill-mode: both;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 50px;
  justify-items: center;
}

.product-item {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease forwards;
  animation-delay: 0.5s;
  animation-fill-mode: both;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 20px rgba(165, 91, 55, 0.2);
}

.product-item img {
  width: 200px;
  height: auto;
  margin-bottom: 15px;
}

.product-item h3 {
  font-size: 19px;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(135deg, #d5a467, #a65b37);
  padding: 12px 24px;
  border-radius: 16px;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  width: 260px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.7),
    0 0 5px rgba(255, 255, 255, 0.4);
  transition: text-shadow 0.3s ease;
}

.product-item h3:hover {
  text-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(255, 255, 255, 0.7);
}

.product-item p {
  font-size: 16px;
  color: #7a4b3d;
  margin: 0;
  line-height: 1.6;
  max-width: 260px;
}


/* Responsif untuk layar mobile kecil (≤ 600px) */
@media (max-width: 600px) {
  .product-promo {
    padding: 40px 15px;
    animation: fadeUp 0.8s ease forwards;
  }

  .content-wrapper {
    max-width: 100%;
    padding: 0 10px;
  }

  .product-promo h2 {
    font-size: 28px;
    letter-spacing: 1.5px;
    line-height: 1.3;
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 0.2s;
    animation-fill-mode: both;
  }

  .product-promo h2 .highlight {
    font-size: 18px;
    padding: 8px 18px;
    letter-spacing: 2px;
    margin-top: 10px;
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 0.3s;
    animation-fill-mode: both;
  }

  .product-promo .highlight:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 14px rgba(165, 91, 55, 0.9);
  }

  .product-promo .subtext {
    font-size: 16px;
    max-width: 100%;
    margin-bottom: 30px;
    line-height: 1.5;
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 0.4s;
    animation-fill-mode: both;
  }

  .product-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 10px;
  }

  .product-item {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 0.5s;
    animation-fill-mode: both;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 18px rgba(165, 91, 55, 0.2);
  }

  .product-item img {
    width: 140px;
    margin-bottom: 12px;
  }

  .product-item h3 {
    width: 100%;
    font-size: 18px;
    padding: 10px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: text-shadow 0.3s ease;
    text-shadow:
      1px 1px 2px rgba(0, 0, 0, 0.7),
      0 0 5px rgba(255, 255, 255, 0.4);
  }

  .product-item h3:hover {
    text-shadow:
      2px 2px 5px rgba(0, 0, 0, 0.8),
      0 0 8px rgba(255, 255, 255, 0.7);
  }

  .product-item p {
    font-size: 14px;
    max-width: 100%;
    line-height: 1.5;
  }
}

/* Animasi fadeUp */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ////////////////////////////tampilan home yang our online menu///////// */
.aboutv2-section {
  width: 100%;
  background-color: #fff;
  padding: -60px 0;
}

.aboutv2-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 10px;
}

.aboutv2-image {
  width: 45%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutv2-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.aboutv2-text {
  width: 50%;
  padding: 40px;
  box-sizing: border-box;
  color: #3f3530;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.aboutv2-subtitle {
  font-size: 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.aboutv2-subtitle span {
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: #3f3530;
  margin-right: 10px;
}

.aboutv2-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 10px;
}

.aboutv2-subheading {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}

.aboutv2-desc {
  font-size: 18px;
  line-height: 1.6;
  text-align: justify;
  white-space: pre-line;
}

/* Responsive */
@media (max-width: 768px) {
  .aboutv2-container {
    flex-direction: column;
  }

  .aboutv2-image,
  .aboutv2-text {
    width: 100%;
    padding: 12px 16px; /* padding lebih kecil dan simetris */
    box-sizing: border-box;
  }

  .aboutv2-title {
    font-size: 26px;
    margin-bottom: 12px;
  }

  .aboutv2-subheading {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .aboutv2-desc {
    font-size: 16px;
    margin-bottom: 16px;
    line-height: 1.5;
  }
}



/* TRANSALTE INDONESIA */
.language-switch {
  position: absolute;
  top: 26px;
  right: -150px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Roboto', sans-serif;
  z-index: 999;
}


@media (max-width: 1440px) {
  .language-switch {
    right: -110px;
  }
}

.lang-btn {
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 500;
  color: #333;
  background-color: #f0f0f0;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.lang-btn:hover {
  background-color: #b4462a;
  color: #fff;
  border-color: #b4462a;
}

.active-lang {
  background-color: #3f3530;
  color: #fff;
  border-color: #3f3530;
}

.separator {
  color: #999;
  font-weight: bold;
}
/* ✅ MOBILE VIEW untuk .language-switch (<= 768px) */
@media (max-width: 768px) {
  .language-switch {
    position: static;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 0 10px 4px; /* Kiri hanya 4px */
    margin-top: -10px;
    z-index: 999;
    margin-left: -15px;
  }

  .lang-btn {
    padding: 5px 10px;
    font-size: 14px;
    color: #333;
    background-color: #f0f0f0;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: all 0.3s ease;
  }

  .lang-btn:hover {
    background-color: #b4462a;
    color: #fff;
    border-color: #b4462a;
  }

  .active-lang {
    background-color: #3f3530;
    color: #fff;
    border-color: #3f3530;
  }

  .separator {
    margin: 0 4px;
    font-size: 14px;
    color: #999;
    font-weight: bold;
  }
}


/* ////////////////////////store page deskripsi/////////////////////////////  */
/* Default: disembunyikan (untuk desktop) */
.mobile-only {
  display: none;
}

/* Hanya tampil di mobile (≤768px) */
@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }
}
/* //////////////////////////////////////////////////////////////////////////// */
/* NEWS TAMPILAN BARU */
.news-section {
  padding: 40px 20px;
  padding-top: 60px; /* ✅ dikurangi untuk mobile feel */
}

.news-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start; /* ✅ agar urutan konten tidak loncat */
}

.news-card {
  width: calc(33.333% - 10px);
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
  overflow: hidden;
}

.news-card:hover {
  transform: translateY(-5px);
}

.news-img {
  width: 100%;
  aspect-ratio: 16 / 9; /* ✅ menggantikan height fixed */
  overflow: hidden;
}

.news-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-content {
  padding: 20px;
}

.news-content p.date {
  font-size: 1.5rem;
  color: #444;
  font-weight: 600;
  margin-bottom: 12px;
}

.news-content h4 {
  font-size: 2.1rem;
  color: #111;
  font-weight: 700;
  line-height: 1.6;
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.news-card {
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.news-card.animate-visible {
  animation: fadeSlideUp 0.6s ease forwards;
}


/* TABLET RESPONSIVE */
@media (max-width: 1024px) {
  .news-card {
    width: calc(50% - 10px);
  }

  .news-section {
    padding-top: 40px; /* ✅ untuk tablet lebih rapat */
  }
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .news-card {
    width: 100%;
  }

  .news-img {
    height: auto;
  }

  .news-content {
    padding: 16px;
  }

  .news-content p.date {
    font-size: 1.3rem;
  }

  .news-content h4 {
    font-size: 1.7rem;
  }

  .news-section {
    padding-top: 30px; /* ✅ lebih dekat di HP */
  }
}



/* /////////////////////////////////////////NEWS DETAIL /////////////////////////////////*/
.news-detail {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
}

.news-detail h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.news-detail-content {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  text-align: justify;
  margin-bottom: 30px;
}

.news-detail-img {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .news-detail {
    padding: 15px;
  }

  .news-detail h2 {
    font-size: 22px;
  }

  .news-detail-content {
    font-size: 15px;
  }

  .news-detail-img {
    max-height: 300px;
  }
}



/* STORE HIDEN */
.hidden-store-detail {
  display: none !important;
}
/*  */







/* CARRER NEW PAGE */
.filter-bar {
  display: flex;
  justify-content: center; /* center semua item secara horizontal */
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.filter-bar label {
  color: black;
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  text-align: center; /* supaya label sejajar di tengah */
  width: 250px; /* samakan dengan input supaya rata */
}

.filter-bar .form-control {
  width: 250px;
}

.filter-bar button {
  width: 120px;      /* ukuran kecil */
  height: 35px;      /* sedikit lebih tinggi supaya tulisan muat */
  cursor: pointer;
  margin-top: 20%;     /* hilangkan margin top besar */
  padding: 0 10px;   /* beri padding kiri-kanan supaya tulisan nggak mepet */
  font-size: 14px;   /* ukuran font agar tulisan pas dan enak dibaca */
  font-weight: 600;  /* biar tulisan agak tebal */
  line-height: 35px; /* supaya teks vertikal center */
  text-align: center;
  border-radius: 4px; /* buat tombol lebih smooth */
}

#searchButton {
  margin-bottom: 100%;
  background-color: #3f3530;
  border: 1px solid #3f3530;
  color: white;
  font-weight: 600;
  font-size: 14px;
  height: 30px;    
  width: 130px;          /* tinggi tetap */
  line-height: 30px;         /* supaya teks rata tengah vertikal */
  padding: 0 16px;           /* padding kiri-kanan */
  border-radius: 4px;
  transition: background-color 0.3s, border-color 0.3s;
  cursor: pointer;
  text-align: center;
}
#searchButton:hover {
  background-color: #b4462a;
  border-color: #b4462a;
  color: white;
}


@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.filter-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
  margin-top: 50px;
  opacity: 0;
  animation: fadeSlideUp 0.6s ease-out forwards;
  animation-delay: 0.2s;
}

.filter-bar label,
.filter-bar .form-control,
#searchButton {
  opacity: 0;
  animation: fadeSlideUp 0.6s ease-out forwards;
}

/* Tambahkan delay berbeda untuk efek bertahap */
.filter-bar label {
  animation-delay: 0.3s;
}

.filter-bar .form-control {
  animation-delay: 0.4s;
}

#searchButton {
  animation-delay: 0.5s;
}


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


#pagination {
  margin-top: 20px;
  text-align: center;
}

#pagination button {
  margin: 0 5px;
  padding: 6px 12px;
  border: 1px solid #3f3530;
  background-color: white;
  color: #3f3530;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.3s, color 0.3s;
}

#pagination button:hover:not(:disabled) {
  background-color: #b4462a;
  color: white;
  border-color: #b4462a;
}

#pagination button:disabled {
  background-color: #3f3530;
  color: white;
  cursor: default;
  border-color: #3f3530;
}


@media (min-width: 769px) {
  #pagination {
    text-align: right;
    margin-right: auto;
    margin-left: auto;
    max-width: 1140px; /* sesuaikan dengan layout container kamu */
    padding-right: 80px;
  }
}

.fade-slide {
  animation: fadeSlide 0.4s ease-in-out;
}

@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ///////////////////////////////KARIR KONTEN 1/////////////////////////// */
.career-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* Biar selalu tengah */
  padding: 80px 20px;
  background-color: white;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}


.career-text {
  max-width: 550px;
  flex: 1;
}

.subtitle {
  display: flex;
  align-items: center; /* Posisikan span secara vertikal di tengah teks */
  font-size: 30px;
  color: #3f3530;
  margin-bottom: 10px;
}

.subtitle span {
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: #3f3530;
  margin-right: 10px;
}


.career-text h1 {
  color: #3f3530;
    font-family: 'Plus Jakarta Sans';
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 67px;
    letter-spacing: -1.92px;
}

.description {
  font-size: 20px;
  line-height: 1.6;
  color: #3f3530;
}

.career-carousel {
  flex: 1;
  width: 700px;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  width: max-content;
}

/* Jika ada lebih dari 1 gambar, tambahkan animasi */
.carousel-track:has(img:nth-child(2)) {
  animation: slide 12s infinite ease-in-out;
}

.carousel-track img {
  width: 517;
  height: 600px;
  object-fit: cover;
  border-radius: 15px;
  flex-shrink: 0;
  margin-left: 0%;
}

/* Animasi hanya akan aktif jika ada lebih dari 1 gambar */
@keyframes slide {
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(-710px); } /* 700px + 10px margin */
  50%, 70% { transform: translateX(-1420px); } /* 2x (700px + 10px margin) */
  75%, 100% { transform: translateX(0); }
}

.subtitle span {
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: #3f3530;
  margin-right: 10px;
}

/* tampilan mobilenya */
@media (max-width: 1200px) {
  .career-section {
    padding: 60px 100px;
  }

  .career-carousel {
    width: 100%;
  }

  .carousel-track img {
    width: 100%;
    max-height: 450px;
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .career-section {
    flex-direction: column;
    padding: 40px 30px;
    gap: 30px;
  }

  .career-text h1 {
    font-size: 42px;
    line-height: 1.2;
  }

  .description {
    font-size: 18px;
  }

  .carousel-track img {
    width: 100%;
    max-height: 300px;
  }
}

@media (min-width: 346px)and (max-width: 963px) {
  .subtitle {
    font-size: 22px;
  }

  .career-text h1 {
    font-size: 34px;
  }

  .description {
    font-size: 16px;
  }

  .career-carousel {
    width: 100%;
  }

  .carousel-track {
    width: 100%;
  }

  .carousel-track img {
    width: 100%;
    height: auto;
    max-height: 600px; /* atau nilai yang lebih kecil */
    border-radius: 10px;
    object-fit: cover;
    margin-left: 0; /* pastikan tidak terdorong */
  }
}





@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.career-section {
  opacity: 0;
  animation: fadeSlideUp 1s ease forwards;
}
.career-text,
.career-carousel {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeSlideUp 1s ease forwards;
}


/* /////////////////////////////////////////CARRER KONTEN KE 2////////////////////////////////////////// */
.values-section {
  text-align: center;
  padding: 30px 40px;
  background: #fff;
}

.values-title {
  font-size: 40px;
  color: #3f3530;
  font-weight: bold;
  display: inline-block;
  position: relative;
  padding: 10px 25px;
  border-radius: 50px;
  margin-bottom: 40px;
}

/* ////////////////////////////////////ANIMASI///////////////////////////////////// */
.values-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 3px;
  background-color: #3f3530;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.6s ease 0.4s;
}

.values-title.animate::after {
  transform: translateX(-50%) scaleX(1);
}
/*////////////////////////////////// ANIMASI////////////////////////////// */


.carousel-wrapper {
  overflow: hidden;
  max-width: 1280px; /* atau 100% jika ingin full */
  margin: 0 auto;
}

.values-carousel {
  display: flex;
  transition: transform 1s ease;
  will-change: transform;
}

.value-card {
  box-sizing: border-box;
  flex: 0 0 25%; /* 100% / 4 kartu */
  max-width: 25%;
  padding: 30px;
  margin-right: 0; /* jangan pakai margin kanan kalau pakai flex */
  background: #fff;
  border-radius: 20px;
  text-align: left;
  transition: transform 0.3s ease;
}

.value-card img {
  width: 150px;
  height: 150px;
  margin-bottom: 20px;
}

.value-card h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #222;
}

.value-card p {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
}
/* === MOBILE (max 768px) === */
@media (max-width: 768px) {
  .values-title {
    font-size: 24px;
    padding: 8px 16px;
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.4;
    font-weight: bold;
  }

  .values-title::after {
    width: 50%;
    bottom: -6px;
    height: 2px;
  }

  .carousel-wrapper {
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .values-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    transition: none;
  }

  .value-card {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    scroll-snap-align: center;
    padding: 30px 20px;
    text-align: center;
    min-height: 400px;
  }

  .value-card img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    margin-bottom: 15px;
  }

  .value-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .value-card p {
    font-size: 14px;
    padding: 0 10px;
    color: #666;
  }
}


@media (max-width: 768px) {
  .carousel-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .carousel-dot {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    transition: background-color 0.3s ease;
  }

  .carousel-dot.active {
    background-color: #333;
  }
}


.value-card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* //////////////////////////karir detail/////////////////////// */

/* CSS untuk job detail content */
/* ===== Job Detail Container ===== */
.job-detail-container {
  padding: 40px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  margin: 50px auto 200px;
}

.job-detail-container .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}

/* ===== Title ===== */
.job-title h1 {
  font-size: 28px;
  color: #222;
  margin-bottom: 20px;
  border-left: 4px solid #ffb400;
  padding-left: 12px;
}

/* ===== Job Info ===== */
.job-info p {
  margin: 6px 0;
  font-size: 16px;
}

.job-info strong {
  color: #555;
  margin-right: 5px;
}

/* ===== Job Description & Details ===== */
.job-description,
.job-details {
  margin-top: 40px;
  line-height: 1.8;
  font-size: 16px;
  color: #444;
}

.job-description h4,
.job-details h4 {
  margin-bottom: 10px;
  font-weight: 600;
  color: #222;
}

/* Konten di dalam description/detail */
.job-description-content,
.job-details-content {
  white-space: normal;
  word-wrap: break-word;
}

.job-description-content p,
.job-details-content p {
  margin-bottom: 10px;
}

.job-description-content ul,
.job-details-content ul {
  margin: 10px 0 10px 25px;
  list-style-type: disc;
}

.job-description-content ol,
.job-details-content ol {
  margin: 10px 0 10px 25px;
  list-style-type: decimal;
}

.job-description-content li,
.job-details-content li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* ===== Apply Button ===== */
.apply-button-inline {
  margin-top: 30px;
  text-align: left;
}

.apply-now-btn {
  display: inline-block;
  background-color: #28a745;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 6px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 15px;
  animation: bounce 2s infinite;
}

.apply-now-btn:hover {
  background-color: #218838;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  color: #fff;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* ===== Responsive ===== */
@media (min-width: 1200px) {
  .job-detail-container .container {
    max-width: 1000px;
    padding: 40px;
  }

  .job-title h1 {
    font-size: 32px;
  }
}

@media (max-width: 991px) {
  .job-detail-container {
    padding: 30px 15px;
  }

  .job-detail-container .container {
    padding: 25px;
  }

  .job-title h1 {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .job-detail-container {
    padding: 20px 10px;
  }

  .job-detail-container .container {
    padding: 20px;
  }

  .job-title h1 {
    font-size: 20px;
  }

  .job-info p,
  .job-description,
  .job-details {
    font-size: 14px;
  }

  .apply-now-btn {
    width: 100%;
    text-align: center;
    display: block;
    font-size: 14px;
    padding: 12px;
    margin-top: 20px;
  }
}



/* //////////////HEADING CONTACT BARU///////////////////// */
.contact-heading-section {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 20px 30px;
  animation: fadeIn 1s ease-in-out;
  margin-top: 80px;
}

.contact-heading-section h2 {
  font-family: "Old Standard TT", serif;
  font-size: 25px;
  color: #3f3530;
  margin-bottom: 10px;
}

.contact-heading-section span {
  display: block;
  font-family: "Great Vibes", cursive;
  font-size: 100px;
  color: #3f3530;
  margin-top: 15px;
  animation: slideUp 1.2s ease-in-out;
  opacity: 0;
  animation-fill-mode: forwards;
}
.contact-heading-section lord-icon {
  margin-bottom: 10px;
}

/* Animasi opsional */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .contact-heading-section {
    margin-top: -5px;
  }
  .contact-heading-section span {
    font-size: 50px;
  }

  .contact-heading-section h2 {
    font-size: 18px;
  }
}

/* /////////////////////////////////////////////////////////////////////// */
/* CSS: Scoped styles for Contact Form with _contact suffix */
.center_contact {
  margin-top: 40px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container_contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(min-content, 35rem));
  grid-template-rows: repeat(5, min-content);
  justify-items: space-between;
  align-items: center;
  background: #fff;
  border-radius: 0.4rem;
  /* box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25); */
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1deg); }
  50% { transform: rotate(-1deg); }
  75% { transform: rotate(1deg); }
}

.title_contact {
  animation: wiggle 2s ease-in-out infinite;
}

.title_contact {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
  padding: 2.8rem 4rem;
  margin-bottom: 1.4rem;
  font-size: 3.2rem;
  color: #373737;
  border-radius: 0.4rem 0.4rem 0 0;
  background: #f2f2f2;
  font-weight: 700;
  text-align: center; /* Ini bagian yang ditambahkan */
}

.form_contact {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  margin: 2rem 0 0.8rem 4rem;
  position: relative;
}

.form_contact.active_contact label {
  transform: translateY(-2.2rem);
  visibility: visible;
  font-size: 1.3rem;
  color: #3f3530;
}

.form__input_contact {
  font-size: 1.6rem;
  padding: 1rem 0;
  border: none;
  background: transparent;
  border-bottom: 2px solid #c1c1c1;
}

.form__input_contact:focus {
  outline: none;
  border-bottom: 2px solid #c1c1c1;
}

.form__input_contact:focus:invalid {
  border-bottom: 2px solid #3f3530;
}

.form__label_contact {
  font-size: 1.6rem;
  color: #c1c1c1;
  position: absolute;
  top: 1rem;
  pointer-events: none;
  transition: all 0.3s;
}

.form__btn_contact {
  grid-column: 1 / 2;
  grid-row: 5 / 6;
  background: #3f3530;
  color: #fff;
  border: none;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 1.1rem 0;
  margin: 2.8rem 0 4rem 4rem;
  cursor: pointer;
  border-radius: 0.4rem;
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  transition: all 0.2s;
}

.form__btn_contact:focus {
  outline: 0;
}

.form__btn_contact:hover {
  background-color: #b4462a;
}

.form__btn_contact > * {
  transition: all 0.4s;
  transition-delay: 1s;
  display: inline-block;
}

.form__btn--invisible_contact {
  position: absolute;
  width: 100%;
  left: 0;
  top: -100%;
}

.form__btn--invisible_contact.visible_contact {
  top: 11px;
}

.form__btn--visible_contact {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form__btn--visible_contact.invisible_contact {
  transform: translateY(200%);
}

.container-mail_contact {
  grid-column: 2 / 3;
  grid-row: 2 / 6;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 31rem;
  height: 28rem;
  margin-bottom: -25rem;
}

.mail_contact {
  position: relative;
  top: -4rem;
  left: -6rem;
}

.mail__top_contact {
  position: absolute;
  top: -5.7rem;
  width: 0;
  height: 0;
  border-right: 8rem solid transparent;
  border-left: 8rem solid transparent;
  border-bottom: 5.8rem solid #ffab17;
  z-index: 0;
}

.mail__top_contact.closed_contact {
  transition: transform 0.6s 0.8s, z-index 0.2s 0.4s;
  z-index: 2;
  transform-origin: bottom left;
  transform: rotate3d(1, 0, 0, 180deg);
}

.mail__back_contact {
  position: absolute;
  background: #ffab17;
  width: 16rem;
  height: 10rem;
  box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.3);
}

.mail__left_contact {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8rem solid #ffc867;
  border-top: 5rem solid transparent;
  border-bottom: 5rem solid transparent;
}

.mail__right_contact {
  position: absolute;
  left: 8rem;
  width: 0;
  height: 0;
  border-right: 8rem solid #ffc867;
  border-top: 5rem solid transparent;
  border-bottom: 5rem solid transparent;
}

.mail__bottom_contact {
  position: absolute;
  top: 4.92rem;
  width: 0;
  height: 0;
  border-right: 8rem solid transparent;
  border-left: 8rem solid transparent;
  border-bottom: 5.08rem solid #ffbb43;
}

.mail__letter_contact {
  position: absolute;
  top: -4rem;
  left: 2rem;
  width: 12rem;
  height: 9rem;
  background: #fff;
  box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: all 0.8s ease;
}

.mail__letter_contact.move_contact {
  transform: translateY(45px);
}

.mail__letter_contact * {
  background: #e0e0e0;
}

.mail__letter-square_contact {
  position: absolute;
  top: 3rem;
  left: 1rem;
  width: 3.8rem;
  height: 4rem;
}

.mail__letter-square_contact::before {
  content: "";
  position: absolute;
  top: -2rem;
  width: 10rem;
  height: 1.5rem;
  background: inherit;
}

.mail__letter-lines_contact {
  top: 4.9rem;
  left: 5.8rem;
  position: absolute;
  width: 5rem;
  height: 0.3rem;
  background: #e0e0e0;
}

.mail__letter-lines_contact::before,
.mail__letter-lines_contact::after {
  content: "";
  position: absolute;
  width: 5rem;
  height: 0.3rem;
  background: #e0e0e0;
}

.mail__letter-lines_contact::before {
  top: -1rem;
}

.mail__letter-lines_contact::after {
  top: 1rem;
}

.move_contact {
  transform: translateY(45px);
  transition: all 0.5s ease;
}

.closed_contact {
  transform: rotate3d(1, 0, 0, 180deg);
  transition: transform 0.6s ease;
}

.visible_contact {
  top: 11px;
}

.invisible_contact {
  transform: translateY(200%);
}


.form_contact:last-of-type {
  grid-column: 1 / 2;
}

.form__btn_contact {
  margin-left: 0;
}


@media screen and (max-width: 768px) {
  .center_contact {
    margin-top: -60px;
    height: auto;
    padding: 2rem 1rem;
    align-items: flex-start;
  }

  .container_contact {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 95vw;
    box-sizing: border-box;
    padding: 2rem 1rem;
  }

  .title_contact {
    padding: 2rem 1rem;
    font-size: 2.2rem;
    margin-bottom: 2rem;
    text-align: center;
  }

  .form_contact {
    margin: 1.2rem 0;
    width: 100%;
  }

  /* Hilangkan animasi mail di mobile */
  .container-mail_contact {
    display: none !important;
  }

  /* Tombol submit sejajar tengah */
  .form__btn_contact {
    width: 100%;
   
    align-self: flex-start; /* supaya patuh ke margin kiri */
    margin-left: 0px;
  }
  
}