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

/*@import url('https://fonts.cdnfonts.com/css/helvetica-neue-9');*/

/* Helvetica Neue */
@font-face {
    font-family: "helvetica-neue";
    src: url("/assets/fonts/helvetica-neue/HelveticaNeue.woff") format("woff");
    font-weight: normal;
}

@font-face {
    font-family: "helvetica-neue-medium";
    src: url("/assets/fonts/helvetica-neue/helvetica_neue_medium_extended-webfont.woff2")
            format("woff2"),
        url("/assets/fonts/helvetica-neue/helvetica_neue_medium_extended-webfont.woff")
            format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "helvetica-neue-bold";
    src: url("/assets/fonts/helvetica-neue/helveticaneue_bold-webfont.woff2")
            format("woff2"),
        url("/assets/fonts/helvetica-neue/helveticaneue_bold-webfont.woff")
            format("woff");
    font-weight: normal;
    font-style: normal;
}

/* Futura */

@font-face {
    font-family: "futura_condensed_pt-500";
    src: url("/assets/fonts/futura/futura-condensed-pt-medium-589e44ed1e3a5-webfont.woff2")
            format("woff2"),
        url("/assets/fonts/futura/futura-condensed-pt-medium-589e44ed1e3a5-webfont.woff")
            format("woff");
    font-weight: normal;
    font-style: normal;
}

/* @font-face {
  font-family: 'futura_condensed_pt-italic-500';
  src: url('/assets/fonts/futura/futura-condensed-pt-medium-oblique-589e4507d391c-webfont.woff2')
      format('woff2'),
    url('/assets/fonts/futura/futura-condensed-pt-medium-oblique-589e4507d391c-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'futura_pt-italic-700';
  src: url('/assets/fonts/futura/futura-pt-bold-oblique-589e453384a18-webfont.woff2')
      format('woff2'),
    url('/assets/fonts/futura/futura-pt-bold-oblique-589e453384a18-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
} */

@font-face {
    font-family: "futura_pt-400";
    src: url("/assets/fonts/futura/futura-pt-book-589a6dec272c3-webfont.woff2")
            format("woff2"),
        url("/assets/fonts/futura/futura-pt-book-589a6dec272c3-webfont.woff")
            format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "futura_pt-italic-400";
    src: url("/assets/fonts/futura/futura-pt-book-oblique-589e44623c7b4-webfont.woff2")
            format("woff2"),
        url("/assets/fonts/futura/futura-pt-book-oblique-589e44623c7b4-webfont.woff")
            format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "futura_pt-500";
    src: url("/assets/fonts/futura/futura-pt-medium-589e45b956de4-webfont.woff2")
            format("woff2"),
        url("/assets/fonts/futura/futura-pt-medium-589e45b956de4-webfont.woff")
            format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "futura_pt-italic-500";
    src: url("/assets/fonts/futura/futura-pt-medium-oblique-589e460871ec2-webfont.woff2")
            format("woff2"),
        url("/assets/fonts/futura/futura-pt-medium-oblique-589e460871ec2-webfont.woff")
            format("woff");
    font-weight: normal;
    font-style: normal;
}

:root {
    /* Style 1 */
    --primary-800-1: #7c1732;
    --primary-700-1: #9a253a;
    --primary-600-1: #b83642;
    --primary-500-1: #d74b4b;
    --primary-400-1: #e77f76;
    --primary-300-1: #f3a494;
    --primary-200-1: #fbcab9;
    --primary-100-1: #fde7dc;

    /* Style 2 */
    --primary-800-2: #8b143b;
    --primary-700-2: #ad2042;
    --primary-600-2: #cf2e47;
    --primary-500-2: #f1404b;
    --primary-400-2: #f6726e;
    --primary-300-2: #fa998c;
    --primary-200-2: #fdc2b3;
    --primary-100-2: #fee4d8;
    --fourth-800-2: #0b1025;
    --dark: #383937;
    --text-500: #000000;
    --text-400: #666666;
    --text-300: #b2b2b2;
    --text-200: #e5e5e5;
    --text-100: #f2f2f2;
}

/* Background Color*/

.bg-secondary {
    background: #f1f3f7 !important;
}

.bg-breadcrumb {
    background-color: #252c41;
}

.bg-primary-400 {
    background-color: #e77f76;
}

.bg-secondary-600 {
    background-color: #334a66;
}

/* Text Color */

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

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

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

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

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

/* custom */

.mt-n170px {
    margin-top: -170px;
}

.pb-140px {
    padding-bottom: 140px;
}

.box-shadow {
    box-shadow: 0px 2px 15px 10px rgba(0, 0, 0, 0.05);
}

.rounded-10 {
    border-radius: 10px;
}

/* font size */
p {
    margin: 0;
}

h1 {
    font-size: 48px;
    line-height: 64px;
    font-family: "futura_pt-500";
}

h2 {
    font-size: 48px;
    line-height: 72px;
    font-family: "futura_pt-500";
}

h3 {
    font-size: 42px;
    line-height: 60px;
    font-family: "futura_pt-500";
}

h4 {
    font-size: 24px;
    line-height: 48px;
    font-family: "helvetica-neue-bold";
}

h5 {
    font-size: 20px;
    line-height: 36px;
}

.body-char {
    font: 16px;
    line-height: 30px;
}

.body {
    font-size: 16px;
    line-height: 26px;
    font-family: "helvetica-neue";
}

.body-lato {
    font-size: 16px;
    line-height: 26px;
    font-family: "Lato", sans-serif;
}

.body-em {
    font-size: 16px;
    font-style: italic;
    line-height: 26px;
    font-family: "helvetica-neue";
}

.body-sm {
    font-size: 14px;
    line-height: 26px;
    font-family: "helvetica-neue";
}

.description {
    white-space: pre-wrap;
}

.caption {
    font-size: 12px;
    line-height: 24px;
}

.caption-lato {
    font-size: 12px;
    line-height: 24px;
    font-family: "Lato", sans-serif;
}

.body-semibold {
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
    font-family: "Lato", sans-serif;
}

.body-em-semibold {
    font-size: 16px;
    font-style: italic;
    line-height: 30px;
    font-weight: 600;
    font-family: "helvetica-neue-medium";
}

.body-sm-semibold {
    font-size: 14px;
    line-height: 26px;
    font-family: "Lato", sans-serif;
}

.caption-semibold {
    font-size: 12px;
    line-height: 24px;
    font-weight: 600;
}

.body-bold {
    font-size: 16px;
    line-height: 30px;
    font-family: "helvetica-neue-bold";
}

.body-em-bold {
    font-size: 16px;
    font-style: italic;
    line-height: 30px;
    font-family: "helvetica-neue-bold";
}

.body-sm-bold {
    font-size: 14px;
    line-height: 26px;
    font-family: "helvetica-neue-bold";
}

.caption-bold {
    font-size: 12px;
    line-height: 24px;
    font-weight: 700;
}

.blog .body-bold {
    font-size: 16px;
    line-height: 30px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
}

/* Button */

.primary-button--standard {
    background: var(--primary-500-2);
    border-radius: 5px;
    padding: 9px 18px;
}

.primary-button--standard::after {
    content: url("/assets/img/icons/icon-caret-right.svg");
    padding-left: 8px;
}

.primary-button--medium {
    background: var(--primary-500-1);
    border-radius: 5px;
    padding: 12px 24px;
    font-weight: 600;
}

.primary-button--large {
    background: var(--primary-500-1);
    border-radius: 5px;
    padding: 20px 30px;
    font-weight: 700;
}

.primary-button--standard:hover,
.primary-button--medium:hover,
.primary-button--large:hover {
    background: var(--primary-600-2);
}

.primary-button--standard:active,
.primary-button--medium:active,
.primary-button--large:active {
    background: var(--primary-800-2);
}

.btn-selengkapnya-white {
    color: white;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.btn-selengkapnya {
    color: var(--primary-500-2);
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.btn-selengkapnya:hover {
    color: var(--primary-600-2);
    text-decoration: underline;
}

.btn-selengkapnya:active {
    color: var(--primary-800-2);
    text-decoration: underline;
}

/* Header */

.bg-header {
    background: url("/assets/img/bg-home-new.jpg");
}

.bg-header-solusi {
    background: url("/assets/img/bg-solusi-new.jpg");
}

.bg-header-solusi--finance {
    background: url("/assets/img/bg-solusi-finance-new.jpg");
}

.bg-header-perusahaan--tentang-adr {
    background: url("/assets/img/bg-tentang-adr-new.jpg");
}

.bg-header-usecase {
    background: url("/assets/img/bg-usecase-new.jpg");
}

.bg-header,
.bg-header-solusi,
.bg-header-solusi--finance,
.bg-header-tentang-adr,
.bg-header-perusahaan,
.bg-header-perusahaan--tentang-adr,
.bg-header-usecase {
    background-repeat: no-repeat;
    background-size: cover;
}

header,
footer,
footer a,
header a,
footer p {
    font-family: "Lato", sans-serif !important;
}

.lato {
    font-family: "Lato", sans-serif !important;
}

.futura-500 {
    font-family: "futura_pt-500";
}

.helvetica-neue-700 {
    font-family: "helvetica-neue-bold";
}

/* Body */
a{
    color: unset;
}

a:hover{
    color: unset;
}

body {
    position: relative;
    font-family: "helvetica-neue", sans-serif;
}

.item-checklist {
    display: flex;
    margin-top: 24px;
    background-color: white;
    padding: 10px;
    border-radius: 3px;
    align-items: center;
    gap: 10px;
}

.usecase-item {
    margin-top: 24px;
    padding: 14px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    background-color: white;
    display: flex;
    gap: 20px;
}

.usecase-item img {
    object-fit: cover;
}

.usecase-item .body-sm-bold {
    color: var(--primary-700-2);
}

.usecase-lainnya{
    display: block;
    background: #fee4d8;
    border: 1px solid #fa998c;
    border-radius: 10px;
    text-align: center;
    height: 100%;
    padding: 29px;
    align-items: center;
}

.text-main-blog {
    position: absolute;
    bottom: 0;
    color: white;
    padding: 22px;
    width: 100%;
}

.img-main-blog {
    width: 100%;
    object-fit: cover;
    max-height: 314px;
}

.card-blog img{
    height: 139px;
    object-fit: cover;
}

.side-blog {
    display: flex;
    gap: 14px;
}

.side-blog img{
    object-fit: cover;
    border-radius: 4px;
}

.line {
    width: 100%;
    margin: 18px 15px;
}

.gray-line {
    content: "";
    height: 1px;
    width: 100%;
    background-color: #a6b0b4;
}

.card-detail-solusi {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
    height: 100%;
}

.card-detail-usecase,
.card-detail-blog {
    background: #fee4d8;
    border: 1px solid #fa998c;
    border-radius: 10px;
    padding: 40px !important;
    text-align: center;
    height: 100%;
}

.card-detail-blog {
    padding: 40px 50px !important;
}

.card-blog {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    background: #ffffff;
    padding: 10px;
}

.card-dokumentasi {
    border: 1px solid #dcddd8;
    background: #fafafd;
    border-radius: 5px;
    padding: 24px;
}

.card-dokumentasi h4 {
    color: var(--primary-700-1);
}

.form-container {
    background: #ffffff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
}

.arrow-slider {
    width: 34px;
    height: 34px;
}

.keyword {
    background: var(--primary-500-2);
    border-radius: 5px;
    padding: 9px 10px;
    font-family: "helvetica-neue-bold";
    color: white;
}

.keyword-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.blog-populer > .title {
    font-family: "futura_condensed_pt-500";
    font-size: 24px;
    line-height: 48px;
    border-bottom: 1px solid #000000;
}

.blog-populer .text-card {
    font-family: "futura_condensed_pt-500";
    font-size: 20px;
    line-height: 36px;
    font-weight: 500;
}

.searchbar-dokumentasi {
    border-radius: 5px;
    border: 1px solid #000000;
    height: 46px;
    max-width: 270px;
    display: flex;
}

.searchbar-dokumentasi input {
    width: 100%;
    height: 100%;
    padding: 10px;
    background: #fafafd;
    font-weight: 500;
    font-family: "helvetica-neue";
    line-height: 26px;
    border: none;
    border-radius: 5px;
}

.searchbar-dokumentasi input:focus,
.searchbar-dokumentasi input:focus-visible {
    outline: none;
}

.searchbar-dokumentasi button {
    background: none;
    border: none;
    background: #fafafd;
    border-radius: 5px;
}

.active-page-link{
    color: var(--primary-500-2) !important;
}

/* Login */

.login-section {
    padding-top: 7rem;
    height: 100vh;
}

.login-wrap {
    position: relative;
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0px 10px 34px -15px rgb(0 0 0 / 24%);
    -moz-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 10px 34px -15px rgb(0 0 0 / 24%);
}

/* Footer */

footer {
    background-color: var(--fourth-800-2);
    color: white;
}

footer .footer-logo {
    margin-top: 40px;
    margin-bottom: 20px;
}

footer a {
    color: white;
}

footer a:hover {
    text-decoration: none;
    color: white;
}

footer ul {
    list-style: none;
    padding: 0;
}

/* Bootsrap */

@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}

.vh-100 {
    height: 100vh;
}

.navbar-frontsite .navbar {
    padding: 0;
}

.navbar-frontsite .nav-item {
    padding: 36px 18px 28px !important;
}

.navbar-nav .nav-link {
    padding-bottom: 1rem;
    padding: 0 0 0.5rem 0 !important;
}

.navbar-transparent-nav .nav-link {
    color: white !important;
}

.navbar-white-nav .nav-link {
    color: #000000 !important;
}

.navbar-nav .dropdown-menu {
    top: auto !important;
}

.navbar-nav .active .nav-link {
    border-bottom: 3px solid var(--primary-500-2);
}

.breadcrumb {
    background: transparent;
    margin-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    color: white;
}

.breadcrumb a {
    color: white;
}

.breadcrumb a:hover {
    color: white;
}

.form-control {
    background: #f3f6f8;
    border: 1px solid #a6b0b4;
    border-radius: 5px;
}

.page-link {
    border: none;
    font-family: "helvetica-neue-bold";
    color: #000000;
}

.pagination {
    gap: 36px;
}

.accordion-faq > .card,
.accordion-dokumentasi > .card {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
    border: none;
}

.accordion-faq > .first-card {
    border-top: 1px solid rgba(0, 0, 0, 0.125) !important;
}

.accordion-faq .card .card-header,
.accordion-dokumentasi .card .card-header {
    background-color: white;
    border: none;
    position: relative;
}

.accordion-faq .card .card-header {
    padding-left: 0;
    padding-right: 0;
}

.accordion-faq .card .card-header > button > img {
    position: absolute;
    right: 10px;
}

.accordion-faq .card .card-body {
    background-color: #f4f5f9;
    padding: 20px;
    color: black;
    margin-bottom: 20px;
}

.accordion-faq .card h5 {
    color: black;
    font-family: "helvetica-neue-bold", sans-serif;
}

.accordion-faq .card button {
    white-space: normal;
    text-align: left;
    padding-right: 60px;
}

.accordion-faq .card button:focus,
.accordion-faq .card button:hover {
    text-decoration: none;
}

.accordion-dokumentasi {
    border: 1px solid #dcddd8;
    border-radius: 5px;
}

.accordion-dokumentasi .btn-link {
    color: black;
}

.accordion-dokumentasi ul li a {
    color: black;
}

.accordion-dokumentasi ul {
    background-color: #fafafd;
    padding: 10px;
    font-family: "helvetica-neue";
    font-size: 14px;
}

.accordion-dokumentasi ul li {
    padding: 10px 0;
}

.accordion-dokumentasi .card-body {
    padding-top: 0px;
}

.accordion-dokumentasi .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

@media (max-width: 991.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 15px;
        padding-left: 15px;
    }

    .nav-item {
        padding: 10px 0 !important;
    }
}

/* Slick */
.slick-dots {
    bottom: -50px;
}

.slick-dots li button:before {
    font-size: 16px;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--primary-500-2);
}

/* admin */
.sidebar-admin {
    padding-top: 88px;
}

.sidebar-admin .active {
    background-color: #7895ad;
}

.grecaptcha-badge { visibility: hidden !important; }

.select2-container--default .select2-selection--multiple .select2-selection__choice{color:black;}