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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.spacing {
    width: 65%;
}

nav {
    background-color: rgba(0, 101, 128, 1);    
    font-size: .8vw;
    font-weight: 400;
}

.nav-content {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    font-size: 1vw;
    padding: 2em 0;
}


nav ul {
    text-decoration: none;
}
nav ul li {
    display: inline-block;
    margin-right: 3em;
}
nav ul a {
    text-decoration: none;
    color:white;
}
nav img {
    width: 8vw;
}

.hero-action {
    position: absolute;
    width: 45vw;
    z-index: 1;
    top:15%;
}

.hero-action p{
    font-weight: 800;
    font-size: 3.6vw;
    color:rgba(0, 101, 128, 1)
}

.hero-action button {
    background-color: rgba(0, 101, 128, 1);
    color: white;
    font-weight: 300;
    outline: none;
    border: none;
    padding: .5vw 1vw;
    border-radius: .3vw;
    margin-top: 2em;
    font-size: 1.2vw;
}

.hero {
    position: relative;
    background-color: #E1E2E6;
}
.hero-img img {
    width: 75vw;
    transform: translate(9vw);
}
.hero-img {
    overflow: hidden;
}

.hero .spacing {
}

.m-auto {
    margin: auto;

}

.hero-stat {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: -7vw;
}
.box-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    background-color: #FF9E18;
    width: 20vw;
    padding: 2.5vw 0;
    text-align: center;
}

.box-stat img {
    width: 2.5vw;
}

.box-stat p:nth-child(2){
    font-size: 4vw;
    font-weight: 700;
}
.box-stat p:nth-child(3){
    font-size: 1.5vw;
}

.tentang-kami {
    margin-top: 10vw;
    display: flex;
    background-color: rgba(0, 101, 128, 1);
    margin-bottom: 10vw;
}
.tentang-image {
    flex: 1 1 0px;
    background: url('assets/img/aboutus.png');
    background-size: cover;
}

.tentang-content {
    color: white;
    flex: 1 1 0px;
    padding: 2vw 0;
}

.tentang-content h2 {
    font-weight: 300;
    font-size: 1.2vw;
}

.tentang-content p:nth-child(2) {
    font-weight: 800;
    font-size: 2.5vw;
}
.tentang-content p:nth-child(3) {
    text-align: justify;
    line-height: 2.5vw;
    font-size: 1vw;
    font-weight: 300;
}


.layanan-wrap {
    background-color: rgba(0, 101, 128, 0.15);
}
.tim-wrap {
    background-color: white;
}

.event-wrap {
    background-color: rgba(0, 101, 128, 0.15);
}

.testi-wrap {
    background-color: rgba(0, 101, 128, 0.15);
}
.kontak-wrap {
    background-color: #006580;
}
.sosmed-wrap {
    background-color: #006580;
}

.layanan {
    padding-top: 6vw;
    padding-bottom: 6vw;
}
.tim {
    padding-top: 6vw;
    padding-bottom: 6vw;
}
.event {
    padding-top: 6vw;
    padding-bottom: 6vw;
}
.testi {
    padding-top: 6vw;
    padding-bottom: 6vw;
}

.kontak img {
    width: 100%;
}

.kontak {
    overflow: hidden;
    background-color: #006580;
}

.kontak button {
    background-color: rgb(244, 116, 88);
    color: white;
    font-weight: 500;
    outline: none;
    border: none;
    padding: .5vw 1vw;
    border-radius: .5vw;
    margin-left: 4em;
    font-size: 1.2vw;
    position: absolute;
    top: 80%;
    left: 11%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.sosmed {
    padding-top: 6vw;
    padding-bottom: 6vw;
}


.btn-slider img {
    width: 2vw;
    cursor: pointer;
}

.layanan-top{
    display: flex;
    align-items:flex-end;
    justify-content: space-between;
}
.tim-top{
    display: flex;
    align-items:flex-end;
    justify-content: space-between;
}
.event-top{
    display: flex;
    align-items:flex-end;
    justify-content: space-between;
}
.testi-top{
    display: flex;
    align-items:flex-end;
    justify-content: space-between;
}
.kontak-top{
    display: flex;
    align-items:flex-end;
    justify-content: space-between;
}
.layanan-top .top-text h2{
    font-weight: 300;
    font-size: 1.3vw;
}
.tim-top .top-text h2{
    font-weight: 300;
    font-size: 1.3vw;
}
.event-top .top-text h2{
    font-weight: 300;
    font-size: 1.3vw;
}
.testi-top .top-text h2{
    font-weight: 300;
    font-size: 1.3vw;
}
.kontak-top .top-text h2{
    font-weight: 300;
    font-size: 1.3vw;
}
.layanan-top .top-text p{
    font-weight: 800;
    font-size: 2.2vw;
}
.tim-top .top-text p{
    font-weight: 800;
    font-size: 2.2vw;
}

.testi-top .top-text p{
    font-weight: 800;
    font-size: 2.2vw;
}
.kontak-top .top-text p{
    font-weight: 800;
    font-size: 2.2vw;
}

.layanan-main {
    margin-top: 3vw;
}
.tim-main {
    margin-top: 3vw;
}

.event-main {
    margin-top: 3vw;
}
.event-main .top-text p{
    font-weight: 800;
    font-size: 2.2vw;
}


.testi-main {
    margin-top: 3vw;
}
.kontak-main {
    margin-top: 3vw;
    box-shadow:  0px 0px 50px rgba(0, 0, 0, 0.3);
}

.layanan-box-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2vw;
}
.tim-box-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* gap: 5vw; */
    padding: 5vw 1vw;
}

.layanan-box {
    background: white;
    padding: 1vw .5vw;
  
}
.layanan-box img{
    width: 3vw ;
}

.layanan-box p:nth-child(2) {
    font-weight: 800;
    font-size: 1.2vw;
}
.layanan-box ul li {
    margin: 0 0 0 1vw;
    font-weight: 300;
    font-size: 1vw;
    text-align: justify;
}
.layanan-box p:nth-child(3) {
    font-weight: 300;
    font-size: 1vw;
    text-align: justify;
}

.tim-box {
    text-align: center;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    position: relative;
    width: 17vw;
}

.tim-box p:nth-child(3) {
    color: rgba(0, 101, 128, 1);
    font-size: 1.15vw;
    font-weight: 700;
    height: 2vw;
    overflow: visible;
}

.tim-box p:nth-child(4) {
    margin-top: 1vw;
    color: rgba(0, 101, 128, 1);
    font-size: 1vw;
    font-weight: 400;
    font-style: italic;
}

.tim-box img {
    width: 11vw;
    transform: translate(-50%, -3vw);
    position: absolute;
}
.tim-box button {
   outline: 0;
   border:0;
   background-color: rgba(0, 101, 128, 1);
   color: white;
   padding: .8vw 1.5vw;
   font-size: 1vw;
   border-radius: .5vw;
   transform: translate(0, 1vw);
   cursor: pointer;
}

.tim-box .gap {
    height: 10vw;
}

.event-vidbox {
    position: relative;
    padding-bottom: 44%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.event-vidbox iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

.event-box img{
    width: 100%;
}

.event-text {
    background-color: rgba(0, 101, 128, 1);
    color: white;
    font-weight: 300;
    font-size: 1vw;
    padding: 1vw 2vw 3.5vw 2vw;
    text-align: justify;
}

.event-text p:first-child {
    line-height: 3vw;
}
.event-text p:nth-child(2) {
    margin-top: 3vw;
    font-weight: 700;
    font-size: 1.4vw;
}

.testi-text {
    background-color: rgba(0, 101, 128, 1);
    color: white;
    font-weight: 300;
    font-size: 1vw;
    padding: 1vw 2vw 3.5vw 2vw;
    text-align: justify;
}

.testi-text p:first-child {
    line-height: 3vw;
}
.testi-text p:nth-child(2) {
    margin-top: 3vw;
    font-weight: 700;
    font-size: 1.4vw;
}

.testi-img-wrapper {
    display: grid;
    margin-top: 3vw;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
}

.testi-img-wrapper img {
    width: 100%;
}

.kontak-box {
    position: relative;
}

.kontak-box img {
    width: 100%;
}

.kontak-box button {
    background-color: rgb(244, 116, 88);
    color: white;
    font-weight: 500;
    outline: none;
    border: none;
    padding: .5vw 1vw;
    border-radius: .5vw;
    margin-left: 4em;
    font-size: 1.2vw;
    position: absolute;
    top: 80%;
    left: 11%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.kontak-text {
    background-color: rgba(0, 101, 128, 1);
    color: white;
    font-weight: 300;
    font-size: 1vw;
    padding:.8vw 1.5vw;
    width: 14vw;
}

.kontak-form {
    padding: 2vw;
    flex: 1 1 0px;
}

.form-area {
    display: flex;
    gap: 2vw;
}

.form-area div:first-child {
    flex: 1 1 0px;
}
.form-area div:nth-child(2) {
    flex: 1 1 0px;
}
.form-field * {
    display: block;
}

.form-field input {
    border: .1vw solid #006580;
    outline: .1vw solid #006580;
    font-size: 1vw;
    padding: .7vw ;
    width: 100%;
    margin-bottom: 2.26vw;
}
.form-field textarea {
    border: .1vw solid #006580;
    outline: .1vw solid #006580;
    font-size: 1vw;
    padding: .7vw ;
    width: 100%;
    resize: none;
}

.form-field label {
    margin-bottom: 1vw;
    font-size: 1vw;
    font-weight: 500;
}

.kontak-form form button {
    outline: 0;
    border: 0;
    display: block;
    background-color: rgba(0, 101, 128, 1);
    color: white;
    padding: 0.8vw 1.5vw;
    font-size: 1vw;
    border-radius: .5vw;
    margin: auto;
}

.sosmed-img img{
    width: 2vw;
    margin-right: 1vw;
}

.sosmed-img {
    display: flex;
    text-align: center;
}

.sosmed p {
    font-weight: 800;
    font-size: 1vw;
    text-align: center;
    width: 6vw;
}

.content {
    min-height: 74vh;
}

.copyright {
    color: white;
    text-align: center;
    background-color: #003E4F;
    font-size:1vw;
    padding: 1em 0;
}

.footer-top {
    display: flex;
    color: white;
}

.footer-top div:first-child {
    display: flex;
    gap: 2vw
}

.footer-top div:first-child img {
    width: 11vw;
}
.footer-top div:first-child p {
    font-size: .74vw;
    line-height: 2vw;
    font-weight: 300;
    margin-top: 4.5vw;
}

.footer-top .sosmed {
    display: flex;
    align-items: center;
    gap:1vw;
}

.sosmed-wrap hr{
    border: none;
    border-top: 1px solid white;
}

.nav-footer {
    margin-left: 13vw;
    font-size: 0.8vw;
}

.accordion {
    background-color: rgba(0, 101, 128, 1);
    color: white;
    cursor: pointer;
    padding: 1.3vw;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1vw;
    transition: 0.4s;
  }
  
.active, .accordion:hover {
  background-color: rgb(0, 73, 94);
}

.accordion:after {
  content: '\002B';
  font-weight: bold;
  float: right;
  margin-left: .5vw;
}

.active:after {
  content: "\2212";
}

.panel {
    display: flex;
    font-size: 1vw;
    padding: 0 2vw;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel > div:first-child {
    display: flex;
    gap: 2vw;
    padding: 6vw 0;
}

.panel img {
    width: 14vw;
}

.hero-tim img{
    width: 100%;
}

@media only screen and (max-width: 600px) {
    .spacing {
        width: 80%;
    }
    .hero-img img {
        width: 97vw;
    }
    .nav-content {
        font-size: 1.4vw;
    }
    .hero-action p {
        font-size: 4.5vw;
    }
    .hero-action button {
        padding: 1vw 2vw;
        border-radius: .3vw;
        margin-top: 2vw;
        font-size: 2vw;
    }
    .box-stat {
        width: 25vw;
    }
    .box-stat img {
        width: 3.5vw;
    }
    
    .box-stat p:nth-child(2){
        font-size: 4vw;
        font-weight: 700;
    }
    .box-stat p:nth-child(3){
        font-size: 2vw;
    }
    .tentang-content h2 {
        font-weight: 300;
        font-size: 2vw;
    }
    
    .tentang-content p:nth-child(2) {
        font-weight: 800;
        font-size: 4vw;
    }
    .tentang-content p:nth-child(3) {
        text-align: justify;
        line-height: 2.5vw;
        font-size: 2vw;
        font-weight: 300;
    }
    .layanan-top .top-text h2{
        font-weight: 300;
        font-size: 3vw;
    }
    .tim-top .top-text h2{
        font-weight: 300;
        font-size: 3vw;
    }
    .event-top .top-text h2{
        font-weight: 300;
        font-size: 3vw;
    }
    .testi-top .top-text h2{
        font-weight: 300;
        font-size: 3vw;
    }
    .kontak-top .top-text h2{
        font-weight: 300;
        font-size: 3vw;
    }
    .layanan-top .top-text p{
        font-weight: 800;
        font-size: 4vw;
    }
    .tim-top .top-text p{
        font-weight: 800;
        font-size: 4vw;
    }

    .event-main .top-text p{
        font-weight: 800;
        font-size: 3vw;
    }

    .testi-top .top-text p{
        font-weight: 800;
        font-size: 3vw;
    }
    .kontak-top .top-text p{
        font-weight: 800;
        font-size: 4vw;
    }
    .layanan-box img {
        width: 5vw;
    }
    .layanan-box p:nth-child(2) {
        font-weight: 800;
        font-size: 2vw;
    }
    .layanan-box ul li {
        margin: 0 0 0 1vw;
        font-weight: 300;
        font-size: 1.5vw;
        text-align: justify;
    }
    .layanan-box p:nth-child(3) {
        font-weight: 300;
        font-size: 1.5vw;
        text-align: justify;
    }
    
    .tim-box p:nth-child(3) {
        font-size: 2vw;
        height: 2vw;
    }

    .tim-box p:nth-child(4) {
        margin-top: 7vw;
        color: rgba(0, 101, 128, 1);
        font-size: 1.5vw;
        font-weight: 400;
        font-style: italic;
    }

    .tim-box img {
        width: 11vw;
        transform: translate(-50%, -3vw);
        position: absolute;
    }
    .tim-box button {
       padding: .8vw 1.5vw;
       font-size: 2vw;
       border-radius: .5vw;
       transform: translate(0, 1vw);
    }
    .tim-box {
        width: 22vw;
    }

    .event-text {
        font-size: 2vw;
        padding: 1vw 2vw 3.5vw 2vw;
        text-align: justify;
    }
    
    .event-text p:first-child {
        line-height: 3vw;
    }
    .event-text p:nth-child(2) {
        margin-top: 3vw;
        font-weight: 700;
        font-size: 3vw;
    }
    .testi-text {
        font-size: 2vw;
        padding: 1vw 2vw 3.5vw 2vw;
        text-align: justify;
    }
    
    .testi-text p:first-child {
        line-height: 3vw;
    }
    .testi-text p:nth-child(2) {
        margin-top: 3vw;
        font-weight: 700;
        font-size: 3vw;
    }
    .kontak-text {
        background-color: rgba(0, 101, 128, 1);
        color: white;
        font-weight: 300;
        font-size: 1.3vw;
        width: 16vw;
        padding:.8vw 1.5vw;
    }
    .form-field input {
        font-size: 2vw;
        padding: .7vw ;
        margin-bottom: 4vw;
    }
    .form-field textarea {
        font-size: 1.7vw;
        padding: .7vw ;
        resize: none;
    }
    
    .form-field label {
        margin-bottom: 1.4vw;
        font-size: 1.7vw;
        font-weight: 500;
    }
    .kontak-form form button {
        font-size: 1.5vw;
    }
    .sosmed-img img{
        width: 6vw;
        margin-right: 1vw;
    }
    
    .sosmed p {
        font-size: 1vw;
    }
    .copyright {
        font-size: 2vw;
    }
    .btn-slider img {
        width: 4vw;
    }
    .accordion {
        font-size: 2vw;
    }
    .panel {
        font-size: 2vw;
    }
    .panel img {
        width: 20vw;
    }
    .footer-top div:first-child p {
        font-size: 1.5vw;
    }
    .sosmed-img img {
        width: 4vw;
    }
}