:root {
  /*--primary : #0651A7;*/
  --black: #000000;
  --alternategrey: #7d7d7d;
  --alternateprimary: #4c4c6d;
  /* --grey : #A4A4A4;*/
  --pink: #ed5d8e;
  --Dark-Grey: #7d7d7d;
  --White: #fff;
  --Kaero-Brown: #3c2415;
  --Grey: #d9d9d9;
  --Kaero-Gold: #ad976e;
}

@font-face {
  font-family: 'Avenir';
  src: url('../../frontpage/assets/fonts/Avenir/AvenirLTStd-Book.otf')
    format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Avenir';
  src: url('../../frontpage/assets/fonts/Avenir/AvenirLTStd-Roman.otf')
    format('opentype');
  font-weight: medium;
  font-style: normal;
}

@font-face {
  font-family: 'Avenir';
  src: url('../../frontpage/assets/fonts/Avenir/AvenirLTStd-Black.otf')
    format('opentype');
  font-weight: bold;
  font-style: normal;
}

* {
  font-family: 'Poppins', sans-serif;
}

.img,
svg {
  vertical-align: middle;
  position: absolute;
  z-index: -1;
}

.img,
a {
  color: var(--White);
  font-size: 12px;
  text-decoration: none;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 1.2px;
}

.img,
a:hover {
  color: var(--White);
}

ul li.nav-item a {
  color: var(--Dark-Grey) !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 1.2px;
}

ul li.nav-item a:hover {
  color: var(--Dark-Grey) !important;
  text-decoration: none;
}

.hover-item {
  display: inline-block;
  text-decoration: none;
  position: relative;
}

.hover-item::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 1.2em;
  width: 0;
  height: 0.3em;
  background-color: #ad976e;
  transition: width 0.3s ease-out;
}

.hover-item:hover::before {
  width: 100%;
}

/* Main Banner */
#main-banner {
  background-color: var(--Kaero-Brown);
  width: 100%;
  padding-block: 4em;
  display: flex;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  #main-banner {
    background-color: var(--Kaero-Brown);
    width: 100%;
    /*height: 820px;*/
    padding-block: 8em;

    display: flex;
  }
}

@media (min-width: 1024px) {
  #main-banner {
    background-color: var(--Kaero-Brown);
    width: 100%;
    /*height: 820px;*/
    height: 39em;
    display: flex;
    flex-shrink: 0;
  }
}

#main-banner .container-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3em;
}

#main-banner .container-main .svg-main-banner {
  vertical-align: middle;
  position: relative;
  z-index: 0;
  display: inline-flex;
}

#main-banner .container-main .svg-main-banner,
a {
  color: var(--White);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 1.2px;
  margin-right: 1em;
}

#main-banner .container-main .svg-main-banner .about-us {
  color: var(--Grey);
  text-transform: uppercase;
}

#main-banner .text-main-banner {
  color: var(--White);
  font-size: 70px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  width: 8em;
  /*max-width: 580px;*/
}

#main-banner .img-main-banner img {
  width: 25em;
  height: 30em;
  flex-shrink: 0;
  object-fit: contain;
}

@media (max-width: 768px) {
  #main-banner .img-main-banner img {
    width: 10em;
    height: 5em;
    flex-shrink: 0;
    object-fit: contain;
  }
}

/*Line Our Services*/
#line-our-services {
  background-color: #7d7d7d;
  height: 2px;
}

/*Our Services*/
#our-services {
  background-color: var(--White);
  width: 100%;
  height: 620px;
}

#our-services .title-services {
  color: var(--Kaero-Gold);
  font-size: 70px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  width: 10em;
}

#our-services .context-services {
  width: 23em;
  margin: 1em 0em;
}

#our-services .description-services {
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#our-services .read-more-services {
  color: #000;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

#our-services .tls {
  padding: 2em;
}

#our-services .title-list-services {
  color: var(--Kaero-Brown);
  font-family: 'Playfair Display';
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

/*Line Article*/
#line-article {
  background-color: #7d7d7d;
  height: 2px;
}

/*Article*/
#article {
  text-align: center;
  padding: 6em;
}

#article .title {
  color: var(--Dark-Grey);
  font-family: 'Playfair-Display';
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  margin-top: 15px;
  margin-bottom: 1em;
}

#article .read-more {
  color: var(--Kaero-Gold);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
}

/*Line Question*/
#line-question {
  background-color: #7d7d7d;
  height: 2px;
}

/*Got Question*/
#got-question {
  background-color: var(--White);
  height: 400px;
  display: flex;
}

#got-question .title-question {
  color: var(--Kaero-Gold);
  font-size: 70px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  width: 8em;
}

#got-question .question {
  width: 30em;
  margin-top: 3em;
}

#got-question .text-area-question {
  border-radius: 10px;
}

#got-question .input-email-question {
  border-radius: 10px;
}

#got-question .btn-question {
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 1.2px;
  width: 8em;
  border-radius: 10px;
  background-color: var(--Kaero-Gold);
  color: var(--White);
}

/* footer */
.footer {
  /*background-image: url('../img/pattern_batik.svg');*/
  background-color: var(--Kaero-Gold);
  height: 350px;
}

.footer .logo-footer {
  padding-top: 84px;
  padding-left: 135px;
}

.footer .address-footer {
  padding-top: 84px;
  margin-left: 130px;
  width: 23em;
}

.footer .address-footer .contact {
  margin: auto;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.footer .address-footer .email {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 60px;
}

.footer .address-footer .address {
  margin: auto;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.footer .address-footer .text-address {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.footer .context {
  padding-top: 84px;
  color: var(--White);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  max-width: 22em;
}

.footer .policy {
  padding-top: 84px;
  color: var(--White);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  max-width: 18em;
}

.footer .first-item-footer {
  background-color: white;
}

/*ul li.nav-item a:before, a:after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -2px;
    background: #000000;
}

ul li.nav-item a:before {
    left: 0;
}

ul li.nav-item a:after {
    right: 0;
    background: #000000;
    transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

ul li.nav-item a:hover:before {
    background: #000000;
    width: 100%;
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

ul li.nav-item a:hover:after {
    background: transparent;
    width: 100%;
    transition: 0s;
}*/

/*ul li.nav-item a:hover {
    border-bottom: 5px solid var(--Dark-Grey);
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}*/

.txt-justify {
  text-align: justify;
  text-justify: inter-word;
}
.hyperlink {
  text-decoration: none;
  color: inherit;
}
/* typografi */
.text-bold {
  font-weight: 700;
}
.text-bold-title {
  font-weight: 700;
  font-size: x-large !important;
  width: 50vw;
}
.text-bold-small {
  font-weight: 700;
  font-size: 0.6em;
}
.text-smaller {
  font-size: 0.7em;
}

.text-small {
  font-size: 0.85em;
}

.text-blue {
  color: var(--primary);
}
.text-white {
  color: white;
}
.text-pink {
  color: var(--pink);
}

.text-grey {
  color: var(--grey);
}

.text-alternate-grey {
  color: var(--alternategrey);
}

.text-alternate-primary {
  color: var(--alternateprimary);
}

.text-bold-primary {
  font-weight: 700;
  color: var(--primary);
}

.text-bold-alternate-primary {
  font-weight: 700;
  color: var(--alternateprimary);
}
.text-bold-grey {
  font-weight: 700;
  color: var(--grey);
}

.text-bold-grey-small {
  font-weight: 700;
  font-size: small;
  color: var(--grey);
}
.text-bold-grey {
  font-weight: 700;
  color: var(--grey);
}
/* component */
.button-pink {
  background-color: var(--pink);
  padding: 1vh 1vh;
  border-radius: 20px;
  font-weight: 700;
  color: white;
  border: none;
}
.button-pink-2 {
  background-color: var(--pink);
  padding: 1em 2em;
  border-radius: 30px;
  font-weight: 400;
  color: white;
  border: none;
  width: auto;
}
.button-pink-3 {
  background-color: var(--pink);
  padding: 2vh 1vw;
  border-radius: 40px;
  font-weight: 400;
  color: white;
  border: none;
}
.button-pink-4 {
  background-color: var(--pink);
  padding: 0.5em;
  border-radius: 15px;
  font-weight: 400;
  color: white;
  border: none;
}

.list-badge {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.badge {
  min-width: 20em;
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 20px;
  padding: 10px;
  padding: 3em;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.badge:nth-child(2) {
  margin: 0 5vw;
}
.badge img {
  object-fit: contain;
}
.testimoni {
  background-image: url('../img/pattern_batik.svg');
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 90vh;
}
.testimoni .badge-testimoni {
  font-weight: 700;
  color: var(--primary);
  background-color: white;
  padding: 0em 1em 1em 1em;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  text-align: center;
}

.testimoni .list-testimoni {
  margin: 0 0vw;
}

.testimoni .list-testimoni .card-testimoni {
  background-color: white;
  align-self: center;
  display: flex;
  height: 40vh;
  flex-direction: column;
  align-items: center;
  border-radius: 30px;
  position: relative;
  /* margin-top: 10vh; */
}

.testimoni .list-testimoni .card-testimoni .avatar {
  width: 17vh;
  height: 17vh;
  position: absolute;
  top: -5em;
  align-self: center;
  border-radius: 100%;
  border: 1vh solid var(--primary);
}

.testimoni .list-testimoni .card-testimoni .text-testimoni {
  font-weight: 700;
  color: black;
  margin-top: 8vh;
}

.testimoni .list-testimoni .card-testimoni .list-star {
  display: flex;
  flex-direction: row;
  gap: 0px 10px;
}

/* list produk */
.container-produk {
  margin-top: 100px;
}
.card-produk {
  align-self: center;
  padding: 2em;
  width: 25vw;
  background-color: white;
  border-radius: 10px;
  height: 30em;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px,
    rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}

.card-produk img {
  position: absolute;
  top: -10vh;
  width: 80%;
  min-width: 10vh;
  max-width: 20vh;
}

.card-produk p {
  margin-top: 12vh;
}

/* component nasabah */
.produk-unggulan {
  width: 8vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.produk-unggulan img {
  width: 50;
  aspect-ratio: 3/4;
  object-fit: contain;
}
.produk-unggulan p {
  text-align: center;
}

/* artikel */
.artikel {
  display: flex;
  flex-direction: row;
}
.artikel .text-artikel {
  display: flex;
  flex-direction: column;
}

/* card artikel */
.card-artikel {
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  height: 40em;
}
.card-artikel img {
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* navbar + owl carousel */
#portofolio input[type='text'] {
  outline: 1px solid black;
  border: 1px solid black;
  border-radius: 30px;
}

#portofolio input[type='text']:focus {
  outline: 1px solid var(--primary);
  border: 1px solid var(--primary);
}

.form {
  position: relative;
}

.form .fa-search {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #9ca3af;
}

.form span {
  position: absolute;
  right: 17px;
  top: 13px;
  padding: 2px;
  border-left: 1px solid #d1d5db;
}

.left-pan {
  padding-left: 7px;
}

.left-pan i {
  padding-left: 10px;
}

.form-input {
  height: 55px;
  text-indent: 33px;
  border-radius: 10px;
  border: 1px solid #727272;
}

.form-input:focus {
  box-shadow: none;
  border: none;
}

.owl-item > div[id='card'] {
  cursor: pointer;
  transition: height 1s ease;
  margin: 10%;
}
/*
.owl-item:not(.center) .card-testimoni {
    margin-top: 15vh;

} */
.owl-item:not(.center) .card-testimoni .text-testimoni {
  font-weight: 700;
  margin-top: 10vh;
  width: 75%;
  color: red;
  font-size: 0.8em;
  /*background-color: red;*/
}

.owl-item.center .card-testimoni {
  transition: 0.4s ease-in-out;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: auto;
  height: 50vh;
  margin-top: 0vh;
  padding: 2em;
}
.owl-item.center .card-testimoni .text-testimoni {
  font-weight: 700;
  font-size: 1.2em;
  margin-top: 0px;
}

.owl-testimoni {
  height: 100%;
  padding-top: 5em;
}

.line {
  border-top: 3px solid white;
  display: flex;
}
.line-black {
  border-top: 3px solid black;
}
.btn-artikel {
  border: 2px solid var(--primary);
  padding: 5px 15px;
  background-color: white;
  color: var(--primary);
}

.btn-artikel {
  border: 1.5px solid var(--primary);
  padding: 5px 15px;
  background-color: white;
  color: var(--primary);
}
.btn-artikel:hover {
  border: 1.5px solid white;
  padding: 5px 15px;
  background-color: var(--primary);
  color: white;
  transition: 0.3s ease-in-out;
}
.card-peduli-1 {
  background-color: white;
  box-shadow: 0px 7px 29px rgba(0, 0, 0, 0.2);
  min-height: 30em;
  padding: 1vh;
  border-radius: 15px;
  border-bottom: 10px solid #ed7d31;
  box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2);
  transition: 0.5s ease-in-out;
}
.card-peduli-1:hover {
  transition: 0.5s ease-in-out;
  box-shadow: 0px 7px 29px #ffd4b6;
}

.card-peduli-2 {
  background-color: white;
  box-shadow: 0px 7px 29px rgba(0, 0, 0, 0.2);
  min-height: 30em;
  padding: 1vh;
  border-radius: 15px;
  border-bottom: 10px solid #a5a5a5;
}

.card-peduli-2:hover {
  transition: 0.5s ease-in-out;
  box-shadow: 0px 7px 29px #959595;
}

.card-peduli-3 {
  background-color: white;
  box-shadow: 0px 7px 29px rgba(0, 0, 0, 0.2);
  min-height: 30em;
  padding: 1vh;
  border-radius: 15px;
  border-bottom: 10px solid #ffc000;
}
.card-peduli-3:hover {
  transition: 0.5s ease-in-out;
  box-shadow: 0px 7px 29px #fff2cb;
}
.card-peduli-4 {
  background-color: white;
  box-shadow: 0px 7px 29px rgba(0, 0, 0, 0.2);
  min-height: 30em;
  padding: 1vh;
  border-radius: 15px;
  border-bottom: 10px solid #5b9bd5;
}
.card-peduli-4:hover {
  transition: 0.5s ease-in-out;
  box-shadow: 0px 7px 29px #5b9bd5;
}

.card-peduli-5 {
  background-color: white;
  box-shadow: 0px 7px 29px rgba(0, 0, 0, 0.2);
  min-height: 30em;
  padding: 1vh;
  border-radius: 15px;
  border-bottom: 10px solid #70ad47;
}
.card-peduli-5:hover {
  transition: 0.5s ease-in-out;
  box-shadow: 0px 7px 29px #94c573;
}
.card-peduli-6 {
  background-color: white;
  box-shadow: 0px 7px 29px rgba(0, 0, 0, 0.2);
  min-height: 30em;
  padding: 1vh;
  border-radius: 15px;
  border-bottom: 10px solid #ed7d31;
}
.card-peduli-6:hover {
  transition: 0.5s ease-in-out;
  box-shadow: 0px 7px 29px #ffd4b6;
}

/* component about */
.P1 {
  font-size: 2em;
  position: relative;
  background-color: #f6ccbe;
  outline: 1em solid #ffefe9;
  border-radius: 100%;
  width: 3em;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin: 0 auto;
  top: -5vh;
  box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2);
}

.P2 {
  font-size: 2em;
  position: relative;
  background-color: #d8d8d8;
  outline: 1em solid #f7f7f7;
  border-radius: 100%;
  width: 3em;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin: 0 auto;
  top: -5vh;
  box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2);
}
.P3 {
  font-size: 2em;
  position: relative;
  background-color: #ffe2bc;
  outline: 1em solid #fff3e3;
  border-radius: 100%;
  width: 3em;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin: 0 auto;
  top: -5vh;
  box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2);
}
.P4 {
  font-size: 2em;
  position: relative;
  background-color: #c4d5eb;
  outline: 1em solid #f3f8ff;
  border-radius: 100%;
  width: 3em;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin: 0 auto;
  top: -5vh;
  box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2);
}
.P5 {
  font-size: 2em;
  position: relative;
  background-color: #c9dbc1;
  outline: 1em solid #f4ffee;
  border-radius: 100%;
  width: 3em;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin: 0 auto;
  top: -5vh;
  box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2);
}
.P6 {
  font-size: 2em;
  position: relative;
  background-color: #f6ccbe;
  outline: 1em solid #ffefe9;
  border-radius: 100%;
  width: 3em;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin: 0 auto;
  top: -5vh;
  box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2);
}
/* section sejarah */
.section-sejarah {
  background-image: url('../img/pattern_batik.svg');
}
.img-shadow {
  filter: drop-shadow(0px 7px 29px rgba(100, 100, 111, 0.2));
  position: relative;
  bottom: 50px;
  border-radius: 24px;
}
/* section jajaran pengurus */
.card-pengurus {
  padding: 1.5em;
  background-color: white;
  border-radius: 24px;
  box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2);
  margin-bottom: 2rem;
}

.list-item-partner {
  display: flex;
  gap: 5vw 5vw;
  max-width: 60vw;
  justify-content: center;
  flex-wrap: wrap;
}
.list-item-partner .item-partner {
  background-color: white;
  border-radius: 10px;
  width: 10em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 5px solid var(--primary);
  box-shadow: 0px 7px 29px rgba(6, 81, 167, 0.2);
}

.section-product {
  background-image: url('../img/pattern_batik.svg');
}
.section-product-1 {
  background-image: url('../img/pattern_batik.svg');
  height: 50vh;
}
/* product */
.card-product {
  background-color: white;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2);
}
.product-icon {
  padding: 1em;
}

.card-product .icon-bank {
  /* background-color: #C6D7EB; */
  padding: 3px;
  /* border-radius: 100%; */
  outline: 6px solid #f9f5ff;
  margin-right: 6px;
}

.arrow {
  background-color: white;
  border-radius: 100%;
}

.arrow:hover {
  transition: 0.5s ease-in-out;
  background-color: var(--pink);
  border-radius: 100%;
}
.btn-blue {
  background-color: var(--primary);
  color: white;
  border: none;
  font-size: 1em;
  padding: 0.5em 1em;
  margin: 0.5em;
  border-radius: 10px;
  border: 2px solid var(--primary);
}
.btn-blue-invert {
  background-color: #f4f9ff;
  color: var(--primary);
  border: none;
  font-size: 1em;
  padding: 0.5em 1em;
  border-radius: 10px;
  border: 2px solid var(--primary);
}

.btn-blue-invert:hover {
  background-color: var(--primary);
  color: white;
  border: none;
  font-size: 1em;
  padding: 0.5em 1em;
  border-radius: 10px;
  border: 2px solid var(--primary);
  transition: 0.5s ease-in-out;
}

.btn-blue-secondary {
  background-color: #6faaee;
  color: white;
  border: none;
  font-size: 1em;
  padding: 0.5em 1em;
  border-radius: 10px;
  border: 2px solid #6faaee;
}

.btn-blue-inactive {
  background-color: white;
  border: none;
  font-size: 1em;
  padding: 0.5em 1em;
  border-radius: 10px;
  border: 2px solid var(--primary);
}

.btn-blue-inactive:hover {
  transition: 0.5s ease-in-out;
  background-color: var(--primary);
  border: none;
  color: white;
  font-size: 1em;
  padding: 0.5em 1em;
  border-radius: 10px;
  border: 2px solid var(--primary);
}
.card-contact {
  background-color: white;
  box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2);
  border-radius: 10px;
  padding: 2em;
}
.persen {
  background-color: #c4d5eb;
  width: 60px;
  height: 60px;
  padding: 15px 10px;
  font-weight: 700;
  border-radius: 100%;
  align-self: center;
  outline: 0.5em solid #f3f8ff;
  box-sizing: border-box;
}
.line-vertical {
  border-right: 2px solid red;
  height: 100%;
}

.float {
  position: fixed !important;
  width: 80px;
  height: 80px;
  bottom: 40px;
  right: 40px;
  text-align: center;
  z-index: 10;
}
.float a::after {
  content: none !important;
}
.float img {
  width: 80px;
}
.float ul {
  background: none !important;
  border: none;
}
.float ul li {
  height: 79px;
  margin-top: 15px;
}
.float ul li a:focus {
  color: #212529;
}
.float ul li a {
  width: 274px;
  padding: 22px 40px;
  text-align: center;
  background: linear-gradient(90deg, #fdfbfb 0%, #ebedee 100%);
  border-radius: 12px;
  margin: 5px 0;
  font-family: 'Poppins-Medium';
  font-size: 18px;
  font-weight: 700;
}
.float ul li img {
  position: relative;
  left: 50px;
  top: -8px;
  width: 100px;
  height: 100px;
}

#list_image_peserta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#title {
  font-size: 3em;
}

#subtitle {
  font-size: 2em;
}
.error {
  color: red;
}
.text-description > * {
  text-align: justify;
  text-justify: inter-word;
  color: var(--alternategrey);
}

.text-description > * > * {
  text-align: justify;
  text-justify: inter-word;
  color: var(--alternategrey);
}
.text-description > * > * > * {
  text-align: justify;
  text-justify: inter-word;
  color: var(--alternategrey);
}
.text-description-small > * {
  text-align: justify;
  text-justify: inter-word;
  color: var(--alternategrey);
  font-size: 0.85em;
}

.text-description-small > * > * {
  text-align: justify;
  text-justify: inter-word;
  color: var(--alternategrey);
  font-size: 0.85em;
}

#search-left {
  margin-left: 20em;
  width: 26em;
}

#banner_home {
  top: 15vh;
}
/* #gmap_canvas {
  width: 45vw;
  object-fit: cover;
} */

.titik_dua::before {
  content: ':';
  margin-right: 10px;
  font-weight: 700;
}