/*

1. Add your custom Css styles below
2. Place the this code in your template:

 <link href="css/custom.css" rel="stylesheet">

*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');


.cormorant-garamond-light {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-style: normal;
}

.cormorant-garamond-regular {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: normal;
}

.cormorant-garamond-medium {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-style: normal;
}

.cormorant-garamond-semibold {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-style: normal;
}

.cormorant-garamond-bold {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-style: normal;
}

.cormorant-garamond-light-italic {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-style: italic;
}

.cormorant-garamond-regular-italic {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: italic;
}

.cormorant-garamond-medium-italic {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-style: italic;
}

.cormorant-garamond-semibold-italic {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-style: italic;
}

.cormorant-garamond-bold-italic {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-style: italic;
}

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

.merriweather-light {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: normal;
}

.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}

.merriweather-black {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: normal;
}

.merriweather-light-italic {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: italic;
}

.merriweather-regular-italic {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: italic;
}

.merriweather-bold-italic {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: italic;
}

.merriweather-black-italic {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: italic;
}

h1 {
  line-height: 1.2em !important;
}

p {
  font-size: 22px;
  color: #0B0A0B;
}

.p-dropdown .p-dropdown-content, .p-dropdown ul.p-dropdown-content {
  background-color: #464847 !important;
  border: 1px solid #464847 !important;
}

.p-dropdown-content a:not(.btn) {
  color: #fff !important;
}



.p-dropdown  {
  color: white !important;
  font-size:14px
}

.p-dropdown a:not(.btn) {
  color: #fff;
}

.p-dropdown a:not(.btn) {
  color: #fff;
}

.p-dropdown-content a:not(.btn) {
  color: #484848;
}

.header-extras > ul > li > a:not(.btn), .header-extras > ul > li > .p-dropdown {
  padding-left: 6px;
  padding-right: 12px;
}

#mainMenu nav {
  float: none;
  margin: 0 auto !important;
  width:auto
}


.dark #header .header-inner, .dark #header #header-wrap, #header.dark .header-inner, #header.dark #header-wrap {
  background-color: #333333;
}

.dark:not(.submenu-light) #mainMenu nav > ul > li .dropdown-menu, #mainMenu.dark nav > ul > li .dropdown-menu {
  background-color: #414141;
  border-color: #272727;
}

button.btn.btn-outline, .btn:not(.close):not(.mfp-close).btn-outline, a.btn:not([href]):not([tabindex]).btn-outline {
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: #000000;
  color: #000000;
}

button.btn.btn-outline:hover, button.btn.btn-outline:focus, button.btn.btn-outline:active, button.btn.btn-outline.active, .btn:not(.close):not(.mfp-close).btn-outline:hover, .btn:not(.close):not(.mfp-close).btn-outline:focus, .btn:not(.close):not(.mfp-close).btn-outline:active, .btn:not(.close):not(.mfp-close).btn-outline.active, a.btn:not([href]):not([tabindex]).btn-outline:hover, a.btn:not([href]):not([tabindex]).btn-outline:focus, a.btn:not([href]):not([tabindex]).btn-outline:active, a.btn:not([href]):not([tabindex]).btn-outline.active {
  background-color: #ededed;
  border-width: 2px;
  border-style: solid;
  border-color: #ededed;
  color: #363636;
}

button.btn.btn-outline:hover, button.btn.btn-outline:focus, button.btn.btn-outline:active, button.btn.btn-outline.active, .btn:not(.close):not(.mfp-close).btn-outline:hover, .btn:not(.close):not(.mfp-close).btn-outline:focus, .btn:not(.close):not(.mfp-close).btn-outline:active, .btn:not(.close):not(.mfp-close).btn-outline.active, a.btn:not([href]):not([tabindex]).btn-outline:hover, a.btn:not([href]):not([tabindex]).btn-outline:focus, a.btn:not([href]):not([tabindex]).btn-outline:active, a.btn:not([href]):not([tabindex]).btn-outline.active {
  background-color: #ededed;
  border-width: 2px;
  border-style: solid;
  border-color: #000000;
  color: #363636;
}

a {
  color: #000;
}

a.dark {
  color: #FFFFFF;
}

.footer  .list li a {
  color:#FFFFFF;
}

a:not(.btn):not(.badge):hover, a:not(.btn):not(.badge):focus, a:not(.btn):not(.badge):active {
  color: #fcc43f!important;
}

a:hover {
  color: #fcc43f !important;
}

.text-orange {
  color: #fcc43f!important;
}

.text-blue {
  color: #6371E2 !important;
}

.img-fluid {
  width: 100%;
  height: auto;
}

.self-video {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 15px;
}

.self-video-mobile {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 15px;
}

.btn-mine {
  border-color: #000 !important;
  color:#000000 !important;
  background-color: transparent !important;
  border-radius: 15px !important;
  text-transform:none !important;
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;

}

.btn-mine:hover {
  border-color: #fcc43f!important;
  color:#fcc43f!important;
}

.text-grey{
  color: #838383 !important;
}

.custom-border{
  border-radius: 15px !important;
}

.greybox {
  background-color: #292829;
  padding: 30px;
  border-radius: 5px;
}

.light-greybox {
  background-color: #ededed;
  padding: 30px;
  border-radius: 5px;
}

.sect-about p{
  font-size: 22px;
  color: #0B0A0B;
}


.bottom-border-input {
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2); /* Change #000 to your desired color */
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}
.bottom-border-input:focus {
  box-shadow: none;
  outline: none;
  border-bottom: 2px solid #fcc43f; /* Change #007bff to your desired focus color */
  background-color: transparent;
}

button.btn, .btn:not(.close):not(.mfp-close), a.btn:not([href]):not([tabindex]) {
  text-transform: none;
  background-color: #fcc43f;
  border-color: #fcc43f;

}

.no-border {
  border: 1px solid transparent !important;
}

/* milestone */
.milestone {
  margin-bottom: 20px;
}

.five-row{
  width: 20%;
}

.milestone-content {
  padding: 15px;
}

.milestone-content  p {
  font-size: 16px !important;
}

.milestone-line {
  position: relative;
}
.hr-black {
  border: 1px solid black;
  margin: 0;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
}

.orange-circle {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: orange;
}

.border-top-line {
  border-top: 1px solid #3D3D3D;
}

.bg-orange-gelap {
  background-color: rgb(248,186,99);
}

.bg-orange-terang {
  background-color: rgba(248,186,99, 0.4);
}

.bg-light-gray {
  background-color: rgba(164,164,164, 0.4);
}

.bg-orange-gelap, .bg-orange-terang {
  border-radius: 15px;
  padding: 15px;
  min-height: 340px;
}

.bg-light-gray {
    border-radius: 15px;
    padding: 15px;
    min-height: 715px;
  }

.bg-orange-gelap p, .bg-orange-terang p{
  font-size: 22px;
  line-height: 26px;
  color: #0B0A0B;
}

button.btn.btn-dark.btn-outline, .btn:not(.close):not(.mfp-close).btn-dark.btn-outline, a.btn:not([href]):not([tabindex]).btn-dark.btn-outline {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

button.btn.btn-dark.btn-outline:hover, button.btn.btn-dark.btn-outline:focus, button.btn.btn-dark.btn-outline:active, button.btn.btn-dark.btn-outline.active, .btn:not(.close):not(.mfp-close).btn-dark.btn-outline:hover, .btn:not(.close):not(.mfp-close).btn-dark.btn-outline:focus, .btn:not(.close):not(.mfp-close).btn-dark.btn-outline:active, .btn:not(.close):not(.mfp-close).btn-dark.btn-outline.active, a.btn:not([href]):not([tabindex]).btn-dark.btn-outline:hover, a.btn:not([href]):not([tabindex]).btn-dark.btn-outline:focus, a.btn:not([href]):not([tabindex]).btn-dark.btn-outline:active, a.btn:not([href]):not([tabindex]).btn-dark.btn-outline.active {
  background-color: #000000;
  border-color: #ffffff;
  color: #ffffff;
}

.bg-overlay[data-style="25"] {
  background-color: rgba(0,0,0, 0.7);
  opacity: 1;
}

.custom-nav-pills .nav-link {
  background: none;
  border: none;
  color: #007bff;
  font-weight: normal;
  padding: 10px 15px;
  cursor: pointer;
  text-align: left; /* Rata kiri */
  color: black;
  font-weight: 700;
  font-size: 22px;
  font-family: "Merriweather", serif;
  line-height: 30px;

}

.custom-nav-pills .nav-link:hover {
  color: #fcc43f; /* warna kuning saat di-hover */
  text-decoration: underline;
}

.custom-nav-pills .nav-link.active {
  color: #000; /* warna hitam saat aktif */
  font-weight: bold;
  text-decoration: underline;
  background: none; /* menghapus background */
}

.custom-nav-pills .nav-link:focus {
  outline: none;
}

.custom-nav-pills .sub-menu {
  list-style: none;
  padding-left: 20px;
  margin: 0;
}

.custom-nav-pills .sub-menu li {
  margin-bottom: 10px;
}

.custom-nav-pills .sub-menu .nav-link {
  padding: 5px 0;
}

.custom-nav-pills .sp {
  margin-left: 20px;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.pr-btn {
  display: block;
    width: 200px;
    color: black;
    border: 2px solid;
    border-radius: 25px;
    font-size: 20px;
    text-align: center;
    padding: 6px;
    font-weight: bold;
    font-family: 'Merriweather', serif;
    margin-top: 100px;
}

.pr-btn:hover {
  display: block;
  background-color: black;
  color: white ;
}

button.btn:hover, button.btn:focus, button.btn:not(:disabled):not(.disabled):active, button.btn:not(:disabled):not(.disabled).active, .btn:not(.close):not(.mfp-close):hover, .btn:not(.close):not(.mfp-close):focus, .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled):active, .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled).active, a.btn:not([href]):not([tabindex]):hover, a.btn:not([href]):not([tabindex]):focus, a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled):active, a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled).active {
  background-color: #fcc43f;
  border-color: #fcc43f;
  color: #ffffff;
  text-decoration: none;
}

.icon-box.small > h1 {
    font-size: 22x;
    margin: 0 12px 4px 60px;
}

.icon-box.small > p {
    font-size: 16px;
}

.icon-box {
    margin-bottom: 30px;
}

.card-img-border {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.custom-list > li {
  font-size: 22px !important;
}
.custom-size{
  font-size: 22px !important;
}
.footer p{
  font-size: 16px !important;
}

.media-brand p{
  font-size: 13px !important;
}

/**
 * Bootstrap 4 all media queries #wMQ
 * https://getbootstrap.com/docs/4.5/layout/overview/
 * up       >     sm, md, lg, xl
 * down     <     sm, md, lg
 * only     =     xs, sm, lg, xl
 * between  <>    sm-lg, sm-xl, md-xl
 */

 .background-dark {
  background-color: #2f2f2f !important;
}

/* .xs = | Extra Small devices only (portrait phones) less than 576px */
@media (max-width: 575.98px) {
  .five-row{
    width: 100%;
  }
}



/* .sm > | Small devices and up (landscape, phones) 576px and up */
@media (min-width: 576px) {
  .five-row{
    width: 100%;
  }
}
/* .sm < | Small devices and down (landscape, phones) less than 768px */
@media (max-width: 767.98px) {
  .five-row{
    width: 100%;
  }
}
/* .sm = | Small devices only (landscape, phones) upper 576px and less than 768px */
@media (min-width: 576px) and (max-width: 767.98px) {
  .five-row{
    width: 100%;
  }
}



/* .md > | Medium devices and up (tablets) 768px and up */
@media (min-width: 768px) {
  .five-row{
    width: 100%;
  }
}
/* .md < | Medium devices and down (tablets) less than 992px */
@media (max-width: 991.98px) {
  .five-row{
    width: 100%;
  }
}
/* .md = | Medium devices only (tablets) upper 768px and less than 992px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .five-row{
    width: 20%;
  }
}



/* .lg > | Large devices and up (desktops) 992px and up */
@media (min-width: 992px) {
  .five-row{
    width: 20%;
  }
}
/* .lg < | Large devices and down (desktops) less than 1200px */
@media (min-width: 1199.98px) {
  .five-row{
    width: 20%;
  }
}
/* .lg = | Large devices only (desktops) upper 992px and less than 1200px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .five-row{
    width: 20%;
  }
}



/* .xl = | Large devices only (desktops, TV) 1200px and up */
@media (min-width: 1200px) {
  .five-row{
    width: 20%;
  }

  .sect-about p{
    font-size: 22px;
  }
}


/* Between <> .sm-lg, .sm-xl, .md-xl */
/* .sm <> .lg | From Small to Large devices only (landscape, phones, tablet, desktops) upper 576px and less than 1200px */
@media (min-width: 576px) and (max-width: 991.98px) {
  .five-row{
    width: 100%;
  }

  .sect-about p{
    font-size: 16px;
  }
}
/* .sm <> .xl | From Small to Extra Large devices only (landscape, phones, tablet, desktops, TV) upper 576px and less than 1200px */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .five-row{
    width: 100%;
  }
  .sect-about p{
    font-size: 16px;
  }
}
/* .md <> .xl | From Medium to Extra Large devices only (tablet, desktops, TV) upper 768px and less than 1200px */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .five-row{
    width: 100%;
  }

  .sect-about p{
    font-size: 18px;
  }
}