@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700");

/* Fonts */
:root {
  --default-font: "Poppins", sans-serif;
  --default-size: 18px;
  --heading-font: "Poppins", sans-serif;
  --heading-size: 180%;
  
}
@media only screen and (max-width: 768px){
  :root {
    --default-size: 16px;
  }
}

/* Global */
:root {
  --body-width:1100px;
  --bg-white: #ffffff;
  --bg-color: #008b8b;
  --bg-color2: #f1f3f6;
  --nav-color: #ffffff;
  --bg-nav: #008b8b;
  --bg-nav-hover: #007f80;
  --color-body: #222222;
  --color-heading: #008b8b;
  --color-link: #008b8b;
  --color-hover: #0088ff;
  --border-radius: 12px;
  --padding-default: 15px;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/* General */
body {
  color: var(--color-body);
  background-color: var(--bg-white);
  font-family: var(--default-font);
  font-size: var(--default-size); 
  margin:0 auto;
  padding:0;
}
.container {
  width:100%;
  max-width:var(--body-width);
  margin:0px auto;
}
.container:after{
  content:"";
  display:table;
  clear:both
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
.grid{
  display:flex;
  display:-webkit-flex;
  flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  justify-content: center;	
}
.col-2{
  float:left;
  width:calc(100% / 2);
}
.col-3{
  float:left;
  width:calc(100% / 3);
}
.col-4{
  float:left;
  width:calc(100% / 4);
}
.col-5{
  float:left;
  width:calc(100% / 5);
}
.col-6 {
  float:left;
  width:calc(100% / 6);
}
.col-34{
  float:left;
  width:calc(100% / 4 * 3);
}
.col-23{
  float:left;
  width:calc(100% / 3 * 2);
}
.col-40{
  float:left;
  width:40%;
}
.col-60{
  float:left;
  width:60% ;
}
.col-25{
  float:left;
  width:calc(100% / 5 * 2);
}
.center{
  text-align:center;
}
.centered{
  display:flex;
  justify-content:center;
  align-items:center;
}
.col-container{
  padding:var(--padding-default);
  margin:var(--padding-default);
}
@media only screen and (max-width: 480px){
.col-2,.col-3,.col-4,.col-5,.col-34,.col-23,.col-40,.col-60,.col-6,.col-25{
  width:100%;
}
.centered{
  display:block;
}
}

/* Heading */
.headline,.heading{
  text-align:center;
  padding:0 15px;
}
.headline h2{
  font-size:var(--heading-size);
  line-height:1.5em;
  font-weight:900;	
  text-transform:uppercase;
  text-align:center;
  color:var(--color-heading);
  padding:5px 0;
  margin:0;
}
h1,h2{
  font-size:var(--heading-size);
  padding:5px 0;
  margin:0;
  font-weight:900;
}
h3{
  font-size:130%;
  padding:5px 0;
  margin:0;
  font-weight:600;
  line-height:1.3em;
}
h4{
  font-size:115%;
  padding:5px 0;
  margin:0;
  font-weight:600;
  line-height:1.3em;
}
p{
  padding:5px 0;
  margin:0;
  font-size:var(--default-size);
}

/* link */
a {
  color:var(--color-link);
  transition:all .5s ease 50ms;
  text-decoration:none;
}
a:hover {
  color:var(--color-hover);
  text-decoration:none;
  transition:all .5s ease 50ms;
}  

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

/* Video */
.video {
  position: relative;
  padding-bottom: 56.35%;
  height: 0; overflow: hidden;
  border-radius:var(--border-radius);
  }
  .video iframe,.video object,.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
}

/* Button */
button{
  margin:0 15px;
  background: transparent;
  border:none;
}
.btn {
  font-size:18px;
  border: none;
  margin:3px;
  padding: 6px 20px;
  cursor: pointer;
  display:inline-block;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  font-weight:500;
  border-radius:4px;
}
.btn-orange {
  background: #ff6600;
  border: 2px solid #ff6600;
  color:#ffffff;
}
.btn-orange:hover {
  background: #ffffff;
  color: #ff6600;
}
.btn-darkcyan {
  background: darkcyan;
  border: 2px solid darkcyan;
  color:#ffffff;
}
.btn-darkcyan:hover {
  background: #ffffff;
  color: darkcyan;
}
.btn-menu,.btn-menu:hover {
  margin:0px;
  border: none;
  padding: 0px 10px!important;
  cursor: pointer;
  display:inline-block;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  border-radius:50px;
  background:#f0b300!important;
}

/* ================================ */

/* Nav Menu*/
.headermenu{
  position: fixed;
  top:0; left:0;
  right: 0;
  z-index: 1000;
  background:var(--bg-nav);
  box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0 6%;
  font:normal normal 16px Poppins;
  line-height:2em;
  transition: all .3s ease-out;
}
.headermenu .logos{
  margin: 0;
}
.headermenu .logos img{
  max-height:52px;
}
.headermenu .navbar{
  margin:0;
  padding:1rem 0rem 1rem 2rem;
  transition: all .3s ease-out;
}
.headermenu .navbar a{
  font-size: 1rem;
  color: var(--nav-color);
  padding:1rem;
  border-radius: .5rem;
  transition: all .3s ease-out;
}
.headermenu .navbar a:hover{
  color:var(--nav-color);
  background: var(--bg-nav-hover);
  transition: all .3s ease-out;
}
#menu-btn{
  cursor: pointer;
  font-size: 2rem;
  padding:.3rem .5rem;
  border-radius: .5rem;
  color: var(--nav-color);
  background: rgba(0,0,0,.3);
  display: none;
  transition: all .3s ease-out;
}
#menu-btn:hover{
  color: var(--nav-color);
  background: rgba(0,0,0,.3);
  transition: all .3s ease-out;
}
.headermenu .dropbtn {
  background:var(--bg-nav);
  color:var(--nav-color);
  cursor:pointer;
  width: 200px;
}
.headermenu .dropdown {
  position: relative;
  display: inline-block;
}
.headermenu .dropdown-content {
  display: none;
  position: absolute;
  background:#008b8b;
  width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 5;
  border-radius: .5rem;
  color:var(--nav-color);
  max-height: calc(100vh - 50px);
  overflow-y: auto;
}
.headermenu .dropdown-content a{
  text-decoration: none;
  display: block;
  background:transparent;
  color:var(--nav-color);
}
.headermenu .navbar .dropdown-content a{
  padding:.5rem 1rem;
}
.headermenu .dropdown-content a:hover {
  background: var(--bg-nav-hover);
  border-radius: .5rem;
  color:var(--nav-color);
}
.headermenu .dropdown:hover .dropdown-content {
  display: block;
  border-radius: .5rem;
}
.headermenu .dropdown:hover .dropbtn {
  background:var(--bg-nav);
}
@media (min-width:1600px){
.headermenu{
  padding:0 13%;
  transition: all .3s ease-out;
}
}
@media (min-width:1920px){
.headermenu{
  padding:0 19%;
  transition: all .3s ease-out;
}
}
@media (max-width:1200px){
.headermenu{
  padding:0 2%;
  transition: all .3s ease-out;
}
}
@media (max-width:991px){
#menu-btn{
  display: initial;
}
.headermenu{
  padding:.5rem 2%;
  transition: all .3s ease-out;
}
.headermenu .navbar{
  position: absolute;
  top:110%; right: 1rem;
  background:var(--bg-nav);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
  border:.1rem solid rgba(0,0,0,.1);
  border-radius: .5rem;
  width: 300px;transform: scale(0);
  transform-origin: top right;
  opacity: 0;
  margin-top: 0.5rem;
  padding:0;
  transition: all .3s ease-out;
}
.headermenu .dropdown:hover .dropbtn {
  background:var(--bg-nav-hover);
}
.headermenu .navbar.active{
  transform: scale(1);
  opacity: 1;
  background:var(--bg-nav);
  transition: all .3s ease-out;
}
.headermenu .navbar a{
  font-size: 1rem;
  display: block;
  padding:.7rem 1.2rem;
  margin: 0;
  border-radius: .5rem;
  background:var(--bg-nav);
  color: var(--nav-color);
  transition: all .3s ease-out;
}
.headermenu .navbar a:hover{
  background:var(--bg-nav-hover);
  color:var(--nav-color);
}
.headermenu .logos{
  margin:0;
}
.headermenu .logos img{
  max-height:40px;
}
.dropdown:hover .dropbtn{
  width: 262px;
}
.headermenu .dropdown-content {
  max-height:50vh
}
}

/* Header Hero*/
.hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 1;
}

.hero:before {
  content: "";
  background: rgba(0,0,0, 0.5);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
  text-align:center;
  text-transform:uppercase;
  color:white;
  padding: 20px;
}

.hero h1{
  font-size:34px;
  line-height:1.5em;
  font-weight:900;
  padding:5px 0;
  margin:5px 0;
}
.hero h1 span{
  font-size:56px;
  color:#f8ce26
}
.hero p{
  padding:5px 0;
  margin:5px 0;
}
.hero p.description{
  font-size:22px;
  font-weight:900;
}
@media only screen and (max-width: 480px){
  .hero h1{
	font-size:24px;
	line-height:1.3em;
	}
  .hero h1 span{
	font-size:30px;
  }	
  .hero p.description{
	font-size:16px;
  }
}

/* Menus*/
.menus {
  width:100%;
  position: relative;
  margin-top: -100px;
  z-index: 4;
}
.menus .container {
  text-align:center;
  width:calc(100% - 60px);
  background:var(--bg-white);
  border-radius:var(--border-radius);
  box-shadow:0px 0px 8px 0px #c5c6c7;
  padding: 14px;
}
.menus .col-container{
  border:1px solid #ff6600;
  border-radius:8px;
  text-transform:uppercase;
  color:var(--color-heading);
  font-weight:600;
}
.menus p{
  padding:5px 0 0;
  margin:5px 0 0;
  font-size:16px;
}
.menus img{
  width:60%;
}
@media only screen and (max-width: 768px){
.col-6 {
  width:calc(100% / 3);
}	
}
@media only screen and (max-width: 480px){
.menus .container{
  padding: 5px;
  width:calc(100% - 40px);
}
.menus .col-container{
  padding:5px;
  margin: 5px;
}
.menus p{
  font-size:12px;
}
}

/* Profile*/
.profile {
  width:100%;
  padding: 40px 0;
}
.profile .container {
  background:var(--bg-white);
  text-align:center;
}
.profile .col-container {
  padding: 0;
}
.profile p.arabic{
  font-size:22px;
}
.profile hr.hitam{
  border-top: 3px solid #222222;
  width:125px;
  margin-top:-5px;
  clear:both;
}
@media only screen and (max-width: 768px){
.profile .col-2 {
  width:100%;
}
}
/* Benefits*/
.benefits .col-container{
  background:var(--bg-color2);
  border-radius:var(--border-radius);
}
.benefits .icon{
  float:left;
  text-align:left;
  width:100px;
  height:100px;
  padding:0 15px 0 0;
  margin:0;
  font-size:100px;
  background:linear-gradient(to top left, rgba(250,200,0,1), rgba(237,4,51,1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display:block;
}
.benefits .text {
  overflow:hidden;
}
.benefits p{
  font-size:90%;
}
@media only screen and (max-width: 768px){
.benefits .icon {
  width:72px;
  height:72px;
  font-size:72px;
}
}

/* Register*/
.register {
  width:100%;
  padding: 40px 0 0;
}
.register .container {
  width:calc(100% - 60px);
  background:var(--bg-color);
  color:#ffffff;
  border-radius:var(--border-radius);
  box-shadow:0px 0px 8px 0px #c5c6c7;
  display:flex;
  justify-content:center;
  align-items:center;
}
.register .col-container{
  padding:30px;
}
.register .col-4,.register .col-34{
  padding:0;
}
.register .col-4 .col-container{
  text-align:center;
}
@media (max-width: 768px) {
.register .container {
  width:calc(100% - 30px);
  text-align:center;
  display:block;
}
.register .col-container{
  padding:20px;
  margin:0;
}
.register .col-34,.register .col-4{
  width:100%
}
}

/* Info*/
.info {
  width:100%;
  padding: 20px 0 40px;
}
.info .col-container{
  padding:0;
}
.info img{
  width:100%;
  height:auto;
  aspect-ratio:9/6;
  object-fit:cover;
  margin:0;
  padding:0;
  border-radius:var(--border-radius);
}
.info h2{
  text-transform:uppercase;
  color:var(--color-heading);
}
.info h4{
  font-size:100%;
}
.info p{
  font-size:85%;
}
.info .images{
  float:left;
  text-align:left;
  width:100px;
  height:auto;
  padding:0 15px 0 0;
  margin:0;
}
.info .images img{
  aspect-ratio:3/4;
  margin-top:10px;
}
.info .text {
  overflow:hidden;
}
.info .group{
  padding: 15px 0;
}
@media (max-width: 768px) {
.info .col-60,.info .col-40{
  width:100%
}
.info .images img{
  aspect-ratio:4/3;
}
.info h2{
  text-align:center;
}
}
@media (max-width: 480px) {
.info .images{
  width:72px;
}	
.info .images img{
  aspect-ratio:3/4;
}
}

/* Banner*/
.banner {
  width:100%;
  padding: 20px 0 40px;
}
.banner .col-container{
  padding:0;
}
.banner h2{
  text-transform:uppercase;
  color:var(--color-heading);
}
.banner .owl-banner img{
  border-radius:var(--border-radius);
}
.banner details{
  margin-top:15px;
  border-radius:4px;
  border:1px solid var(--bg-color2);
}
.banner details summary{
  background:var(--bg-color);
  padding: 10px;
  border-radius:4px;
  color:#ffffff;
  font-weight:600;
  font-size:110%;
  cursor:pointer;
}
.banner details p{
  font-size:85%;
  padding:var(--padding-default);
}
@media (max-width: 480px) {
.banner h2{
  text-align:center;
}
}

/* Fasilitas*/
.fasilitas {
  width:100%;
  padding: 40px 0;
  background:var(--bg-color); 
}
.fasilitas .headline h2,.fasilitas .headline p{
  color:white;
}
.fasilitas .col-container{
  background:var(--bg-white);
  border-radius:var(--border-radius);
}
.fasilitas h3{
  font-size:100%;
}
.fasilitas p{
  font-size:85%;
}
.fasilitas img{
  width:100%;
  height:auto;
  aspect-ratio:9/6;
  object-fit:cover;
  margin:0;
  padding:0;
  border-radius:4px;
}
@media (max-width: 768px) and (min-width: 481px){
.fasilitas .col-4{
  width:50%
}
}

/* Testimoni*/
.testimoni {
  width:100%;
  padding: 40px 0;
}
.testimoni .col-container{
  background: var(--bg-color2);
  padding:var(--padding-default);
  border-radius:var(--border-radius);
}
.testimoni i{
  color: var(--color-heading);
  font-size:250%;
}
.testimoni .testimoni-container p{
  font-size:85%;
  padding:30px 0;
}
.testimoni .photo{
  float:left;
  width:60px;
  height:60px;
  padding-right:15px;
}
.testimoni .photo img{
  width:60px;
  height:60px;
  border-radius:50%;
}
.testimoni .name{
  overflow:hidden;
  font-size:85%;
  color:#ff6600;
}
.testimoni .name span{
  font-weight:900;
  font-size:110%;
  color:black;
}

/* Kerjasama*/
.kerjasama {
  width:100%;
  padding: 40px 0;
  background:var(--bg-color2);
}
.kerjasama .container .inner-container{
  margin: 15px;
}

/* Map*/
.map {
  width:100%;
  padding: 40px 0;
}
.map .map-container{
  padding:var(--padding-default);
}
.map .google-map{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
  border-radius:var(--border-radius);
}
.google-map iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}

/* Footer*/
.footer {
  width:100%;
  padding: 40px 0;
  background:var(--bg-color);
}
.footer .col-container{
  padding:0;
}
.footer a,.footer p{
  color:#ffffff;
}
.footer p{
  font-size:85%;
}
.footer p.judul{
  font-size:110%;
  font-weight:600;
}
.footer a.sosmed{
  background-color:#ffffff;
  color:var(--bg-color);
  padding:4px 8px;
  margin:0 5px 0 0;
  font-size:18px;
  line-height:1.4em;
  border-radius:50%;
}
.footer .list-menu{
  transition:all .5s ease 50ms;
}
.footer .list-menu:hover{
  margin-left:5px;
  transition:all .5s ease 50ms;
}
@media (max-width: 768px) and (min-width: 481px){
.footer .col-25{
  width:100%;
}
.footer .col-5{
  width:calc(100% / 3);
}
}

/* Copyright*/
.copyright {
  max-width:100%;
  background:#004d4d;
}
.copyright .container{
  color:white;
  text-align:center;
}
.copyright p{
  padding:25px 15px 15px;
  font-size:85%;
}
.copyright a{
  color:white;
}
@media (max-width: 481px) {
.copyright{
  margin-bottom:55px;
}
}

/* Back to top*/
.to-top{
  max-width:100%;
  background:var(--bg-color);
}	
#back-to-top{
  background:#004d4d;
  opacity:1;
  color:#ffffff;
  padding:10px 14px;
  font-size:20px;
  border-radius:50%;
  transition:all .5s ease 50ms;
}
#back-to-top:hover{
  background:#ffffff;
  color:#004d4d;
  transition:all .5s ease 50ms;
}
.back-to-top{
  position:relative!important;
  bottom:-15px;
  z-index:10;
  text-align:center;
}

/* Footer Menu*/
.footer-menu{
  line-height:0;
  height:55px;
  position:fixed;
  bottom:0px;
  width:100%;
  z-index:1000;
  display:none;
}
.footer-menu .container{
  position:relative;
  text-align:center;
  background:#ffffff;
  box-shadow:0px 0px 5px 0px #c5c6c7;
}
.footer-menu a{
  color:var(--color-body);
}
.footer-menu a:hover{
  color:var(--bg-color);
}
.footer-menu .main a{
  color:#ffffff;
}
.footer-menu .item{
  float:left;
  width:20%;
  padding:10px 0 10px;
  font-size:23px;
}
.footer-menu p{
  font-size:10px;
  padding-top:10px
}
.footer-menu .main{
  float:center;
  position:relative;
  border:1px solid white;
  border-radius:50%;
  max-width:65px;
  max-height:65px;
  margin:-25px auto 0;
  aspect-ratio:1/1;
  background:var(--bg-color);
}
.footer-menu .item-container{
  font-size:28px!important;
  padding-top:15px;
}
@media (max-width: 481px) {
.footer-menu{
  display:block;
}
}