@font-face {
    font-family: "China Syndrome";
    src: local("China Syndrome"),
        url("../fonts/china-syndrome.otf") format("opentype"); /* Atur format sebagai "opentype" */
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Poppins Bold";
    src: local("Poppins Bold"),
        url("../fonts/Poppins-Bold.ttf") format("truetype"); /* Atur format sebagai "opentype" */
    font-style: normal;
}
@font-face {
    font-family: "Poppins Extra Bold";
    src: local("Poppins Extra Bold"),
        url("../fonts/Poppins-ExtraBold.ttf") format("truetype"); /* Atur format sebagai "opentype" */
    font-style: normal;
}
@font-face {
    font-family: "Poppins Regular";
    src: local("Poppins Regular"),
        url("../fonts/Poppins-Regular.ttf") format("truetype"); /* Atur format sebagai "opentype" */
    font-style: normal;
}
@font-face {
    font-family: "Poppins Light";
    src: local("Poppins Light"),
        url("../fonts/Poppins-Light.ttf") format("truetype"); /* Atur format sebagai "opentype" */
    font-style: normal;
}
@font-face {
    font-family: "Poppins Thins";
    src: local("Poppins Thins"),
        url("../fonts/Poppins-Thin.ttf") format("truetype"); /* Atur format sebagai "opentype" */
    font-style: normal;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --prim: #001e9a;
    --second: #031661;
}
header {
    max-width: 100%;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    position: relative;
}
header:after {
    content: "";
    width: 100%;
    height: 100vh;
    background: #000000;
    opacity: 0.5;
    position: absolute;
    top: 0;
}

#bg-video {
    width: 100%;
    height: 100vh;
    position: absolute;
    object-fit: cover;
}

.video-info {
    z-index: 96;
    position: relative;
    color: #fff;
    text-align: center;
}
.img-infobg {
    z-index: 98;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* Sesuaikan dengan lebar container */
    height: auto; /* Memastikan rasio aspek gambar tetap terjaga */
}

.font-title {
    font-family: "China Syndrome" !important;
    position: relative;
    padding: 10px 0;
    text-shadow: 1px 3px 4px rgba(11, 89, 68, 0.2);
}
.titleclass {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.titleclass .h3title {
    font-family: "Poppins Bold" !important;
    position: absolute;
    text-shadow: 1px 3px 4px rgba(11, 89, 68, 0.2);
    border-bottom: 2px solid #001e9a;
}
.parent-background {
    position: relative; /* Pastikan parent memiliki posisi relatif */
}

.font-body {
    color: #fff;
    font-size: 18px;
    font-family: "Poppins Regular" !important;
    position: relative;
    padding: 10px 0;
    text-shadow: 1px 3px 4px rgba(11, 89, 68, 0.2);
}
.font-body-black {
    color: #000000;
    font-size: 18px;
    font-family: "Poppins Regular" !important;
    position: relative;
    padding: 10px 0;
    text-shadow: 0px 0px 3px rgb(255, 255, 255);
}
.shape {
    padding: 30px;
    margin: 0;
    text-align: center;
    border: none;
    background: url("../images/brush-shape.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-family: "Poppins Bold" !important;
    color: #fff;
    font-size: 18px;
}
.button-custom {
    padding: 10px 20px;
    margin: 0;
    text-align: center;
    border: none;
    background: url("../images/brush-shape.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-family: "Poppins Bold" !important;
    color: #fff;
    font-size: 18px;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Aspect ratio 16:9 */
    height: 0;
    overflow: hidden;
    width: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.section-custom {
    padding-top: 90px !important;
    position: relative;
}

.section-custom .bg-image {
    margin-top: 3rem;
    position: relative;
    padding: 0 0 130px;
    background-image: url("../images/splash.png");
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 9;
}

.sectiontl {
    box-sizing: border-box;
}
/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: "";
    position: absolute;
    width: 6px;
    background-color: #001e9a;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

/* Container around content */
.containertl {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* The circles on the timeline */
.containertl::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    right: -13px;
    background-color: white;
    border: 4px solid #ff9f55;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

/* Place the container to the left */
.left {
    left: 0;
}

/* Place the container to the right */
.right {
    left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
    left: -12px;
}

/* The actual content */
.contenttl {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
}
.divisi-bg {
    position: relative;
    padding: 0 20px 80px;
    background-image: linear-gradient(
        to bottom,
        #7b75d800,
        rgba(180, 162, 243, 0.315) 35%
    );
    margin-top: 40px;
    overflow: hidden;
}

.divisi-bg .cardslid {
    margin: 20px 2px;
    height: 300px;
    border: 1px solid #a8a8a8;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease,
        background-color 0.3s ease;
}
.divisi-bg .cardslid:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.438);
    background-color: #7795e7cb;
}

.divisi-bg .cardslid h6 {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 5px 20px;
    font-family: "Poppins Bold";
    font-size: 20px;
}
.divisi-bg .cardslid p {
    overflow: hidden; /* Sembunyikan teks yang melebihi batas */
    display: block;
    text-overflow: ellipsis; /* Tambahkan elipsis */
    max-height: 3em; /* Batas tinggi: 2 baris (1.5em per baris) */
    line-height: 1.5; /* Tinggi setiap baris */
    white-space: normal; /* Izinkan teks membungkus */
    margin: 10px 20px;
}
.divisi-bg .cardslid img {
    width: 100%; /* Sesuaikan dengan kebutuhan */
    height: 150px; /* Sesuaikan dengan kebutuhan */
    overflow: hidden;
    position: relative;
    align-content: center;
}
.divisi-bg .testi-row {
    overflow: hidden;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media (min-width: 200px) and (max-width: 768px) {
    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }

    /* Full-width containers */
    .containertl {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
    .containertl::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    /* Make sure all circles are at the same spot */
    .left::after,
    .right::after {
        left: 15px;
    }

    /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }

    .section-divisi .container-divisi .about-divisi {
        padding: 10px 30px !important;
    }
    .section-divisi .container-divisi .about-divisi .aboutdivisi .img-div {
        max-width: 200px;
        height: auto;
        display: flex; /* Memastikan gambar diatur sebagai elemen blok */
        margin: 0 auto; /* Memusatkan secara horizontal */
    }

    .section-karir .container-karir .karir-img {
        order: 2;
        margin-top: 40px;
    }
    .section-karir .container-karir .karir-info {
        order: 1;
    }
    .section-karir .container-karir .karir-info p {
        order: 1;
        text-align: justify;
    }

    .section .listkarir {
        margin-top: 10px;
        padding: 20px;
        background-image: linear-gradient(
            to bottom,
            #7b75d800,
            rgba(180, 162, 243, 0.315) 35%
        );
    }

    .section-about .imghead {
        margin-top: 130px;
        width: 100%;
        z-index: -2; /* Di belakang container-about */
        overflow-x: hidden;
        position: fixed;
    }

    .section-full .body-section .canvateks {
        padding: 150px 20px 40px !important;
        margin: 0 !important;
    }
}

/********* Responsive *********/
@media (min-width: 200px) and (max-width: 991px) {
    .section-custom .bg-image {
        margin-top: 3rem;
        position: relative;
        padding: 20px 50px;
        background-image: url("../images/splashmini.png");
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 9;
    }
}
.cardcus {
    margin: 20px auto;
    border: 1px solid #430baa;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #fff;
}

.section-divisi {
    position: relative;
    width: 100%;
    overflow-x: hidden;
}
.section-divisi .container-divisi {
    margin-top: 20px;
    position: relative;
    text-align: center; /* Pusatkan teks */
    min-height: 100vh;
    padding-top: 30px;
    background-image: linear-gradient(
        to bottom,
        #7b75d800,
        rgba(180, 162, 243, 0.541) 30%
    );
}
.section-divisi .container-divisi .about-divisi {
    padding: 10px 130px;
}
.section-divisi .container-divisi .about-divisi .aboutdivisi {
    margin-top: 10px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
}
.section-divisi .container-divisi .about-divisi .aboutdivisi .img-div {
    width: 300px; /* Set lebar gambar */
    height: auto; /* Agar proporsi tetap */
    display: block; /* Memastikan gambar diatur sebagai elemen blok */
    margin: 0 auto; /* Memusatkan secara horizontal */
}
.section-divisi .container-divisi .about-divisi .aboutdivisi h4 {
    font-family: "Poppins Bold";
    color: #494949;
}
.section-divisi .container-divisi .about-divisi .aboutdivisi p {
    font-family: "Poppins Regular";
    color: #727070;
}
.section-divisi .container-divisi .about-divisi .aboutdivisi .line {
    width: 100%;
    height: 7px;
    background-color: yellow;
    margin: 0 auto;
}

/* ABOUT */
.section-about {
    position: relative;
    width: 100%;
    overflow-x: hidden;
}
.section-about .container-about {
    margin-top: 300px;
    position: relative;
    z-index: -1; /* Berada di atas imghead */
    text-align: center; /* Pusatkan teks */
    background-color: #e1eeff;
    padding-top: 30px;
}
.section-about .container-about .about-div {
    padding: 10px 130px;
}
.section-about .container-about .about-div .aboutdiv {
    margin-top: 10px;
    padding: 20px;
}

.section-about .myline {
    text-align: center; /* Menyusun teks di tengah */
}
.section-about .myline h3 {
    color: #000;
    font-family: "Poppins Bold" !important;
    text-shadow: 1px 3px 4px rgba(11, 89, 68, 0.2);
    text-align: center;
    display: inline-block; /* Membatasi lebar sesuai konten */
    border-bottom: 2px solid #000; /* Menambahkan garis bawah */
    padding-bottom: 5px; /* Jarak antara teks dan garis bawah */
}
.section-about .imghead {
    top: 0;
    left: 0;
    width: 100%;
    z-index: -2; /* Di belakang container-about */
    overflow-x: hidden;
    position: fixed;
}
.section-about img {
    height: 100%; /* Menjaga rasio aspek gambar */
    display: block; /* Menghapus jarak bawah default (jika ada) */
}

.section-about .teks {
    margin-top: 20px;
    text-align: justify;
    padding: 20px 40px;
}

/* CSR */
.section-csr {
    min-height: 100vh;
    padding: 20px;
    position: relative;
    background-color: rgb(88, 173, 252);
    background-image: url("../images/splashtrans.png");
    background-size: cover;
    background-repeat: no-repeat;
}
.container-csr {
    margin: 30px;
    position: relative;
    padding-bottom: 50px;
    overflow: hidden;
}
.csr-info {
    background-color: transparent;
    justify-items: center;
    padding: 30px;
}
.csr-info .judul {
    font-family: "China Syndrome";
    font-size: 60px;
    color: rgb(48, 46, 46);
}
.csr-info p {
    font-family: "Poppins Regular";
    font-size: 16px;
    margin-top: 20px;
}
.csr-slide {
    overflow: hidden;
    padding: 30px;
}
.csr-slide .cardcsr {
    background-color: #e1eeff;
    border-radius: 5px;
    padding: 0;
    overflow: hidden;
}
.csr-slide .imgcsr {
    width: 100%;
    overflow: hidden;
}
.csr-slide h6 {
    align-items: center;
    margin-top: 20px;
    margin-left: 10px;
    display: inline-block;
    background-color: rgb(88, 173, 252);
    color: #fff;
    padding: 2px 12px;
    border-radius: 50px; /* Opsional untuk membuat sudut melengkung */
}
.csr-slide p {
    margin: 10px;
    text-align: justify;
    font-family: "Poppins Regular";
    font-size: 16px;
}

.listcsr .cardlistcsr {
    margin: 20px 2px;
    height: 300px;

    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease,
        background-color 0.3s ease;
}
.listcsr .cardlistcsr:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.438);
}

.listcsr .cardlistcsr h6 {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 5px 20px;
    font-family: "Poppins Bold";
    font-size: 20px;
}
.listcsr .cardlistcsr p {
    overflow: hidden; /* Sembunyikan teks yang melebihi batas */
    display: block;
    text-overflow: ellipsis; /* Tambahkan elipsis */
    max-height: 3em; /* Batas tinggi: 2 baris (1.5em per baris) */
    line-height: 1.5; /* Tinggi setiap baris */
    white-space: normal; /* Izinkan teks membungkus */
    margin: 10px 20px;
}
.listcsr .cardlistcsr img {
    width: 100%; /* Sesuaikan dengan kebutuhan */
    height: 150px; /* Sesuaikan dengan kebutuhan */
    overflow: hidden;
    position: relative;
    align-content: center;
}

/* KARIR */
.section-karir {
    display: flex;
    justify-content: center; /* Memusatkan secara horizontal */
    align-items: center; /* Memusatkan secara vertikal */
    min-height: 100vh;
    padding: 20px;
    position: relative;
    background-color: rgb(233, 146, 48);
    background-image: url("../images/bgbormart.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.section-karir .container-karir {
    overflow: hidden;
    justify-items: center;
}
.section-karir .container-karir .imgkarir {
    max-width: 100%;
    height: auto;
    display: flex; /* Memastikan gambar diatur sebagai elemen blok */
    margin: 0 auto; /* Memusatkan secara horizontal */
}
.karir-info {
    background-color: transparent;
}
.karir-info .judul {
    font-family: "Poppins Bold";
    font-size: 32px;
    color: rgb(48, 46, 46);
    text-align: center;
}
.karir-info p {
    font-family: "Poppins Regular";
    font-size: 16px;
    margin-top: 20px;
}
.listkarir {
    margin-top: 40px;
    padding: 40px;
    background-image: linear-gradient(
        to bottom,
        #7b75d800,
        rgba(180, 162, 243, 0.315) 35%
    );
}
.listkarir .cardkarir {
    padding: 0;
    margin-top: 20px;
    border: 1px solid #b4b4b4;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    cursor: pointer;
    transition: transform 0.2s;
}
.listkarir .cardkarir:hover {
    margin-top: 20px;
    border: 1px solid #1c35c0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: scale(1.05); /* Efek zoom saat hover */
}
.listkarir .cardkarir .imgkarir {
    height: 50px;
    padding-left: 10px;
    display: flex;
    background-color: var(--prim);
    align-items: center;
    /*
    background-image: linear-gradient(
        to bottom,
        #7b75d800,
        rgba(180, 162, 243, 0.521) 75%
    ); 
    display: flex;  
    justify-content: center;  
    align-items: center;   */
}
.listkarir .cardkarir .imgkarir img {
    width: 100px;
}
.listkarir .cardkarir .posisi {
    align-items: center;
    margin: 0;
    padding: 5px 20px 0;
    font-family: "Poppins Bold";
    font-size: 20px;
    font-weight: 900;
}
.listkarir .cardkarir .lokasi {
    margin: 0;
    font-family: "Poppins Regular";
    padding: 0 20px;
    font-size: 16px;
    font-weight: 500;
}
.listkarir .cardkarir .time {
    margin-top: 10px;
    text-align: end;
    margin-right: 10px;
    font-family: "Poppins Regular";
    font-size: 12px;
    color: #727070;
}
.listkarir .cardkarir .info {
    display: flex;
    justify-content: space-around; /* Menyejajarkan teks di sepanjang sumbu horisontal */
    align-items: center; /* Menyejajarkan teks vertikal agar sejajar */
    margin-top: 10px;
    font-family: "Poppins Regular";
    font-size: 12px;
    color: #727070;
}
.section-full {
    display: flex;
    min-height: 100vh;
}

.section-full .body-section {
    width: 100%;
    background-color: rgb(230, 226, 252);
}
.section-full .body-section .canvateks {
    padding: 150px 150px 40px;
}
.section-full .body-canvas {
    width: 100%;
    padding: 10px 60px 60px;
}
.section-full .body-section .posisi {
    text-transform: uppercase;
    font-family: "Poppins Bold";
    color: #000;
    font-size: 28px;
}

.section-full .body-section .lokasi {
    font-family: "Poppins Regular";
    font-size: 16px;
}

.carddiv {
    width: 100%;
    max-width: 100%;
    background-color: white;
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden; 
}
.carddiv h6 {
    align-items: center;
    margin-top: 20px;
    margin-left: 20px;
    display: inline-block;
    color: #000000;
    font-family: "Poppins Bold";
    font-size: 26px;
}
.carddiv .visitor {
    align-items: center;
    margin-top: 20px;
    margin-right: 20px;
    display: inline-block;
    padding: 2px 12px;
}
.carddiv .konten {
    margin: 30px;
}
.carddiv .imgdiv { 
    margin: 10px;
    width: calc(100% - 20px); /* Mengurangi margin kiri dan kanan */ 
    height: auto; /* Sesuaikan dengan kebutuhan */
    background-color: white; 
    overflow: hidden; /* Potong bagian gambar yang keluar */
    position: relative; /* Konteks posisi untuk gambar */
}
.carddiv .imgdiv img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Agar gambar tetap proporsional */
    transition: transform 0.3s ease; /* Animasi halus */
    border-radius: 8px;
}
.carddiv .imgdiv img:hover {
    transform: scale(1.7);
}
.carddiv .imgnews {
    width: 100%; /* Sesuaikan dengan kebutuhan */
    height: 150px; /* Sesuaikan dengan kebutuhan */
    overflow: hidden;
    position: relative;
    align-content: center;
}
.carddiv .imgnews img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Agar gambar tetap proporsional */
}
.carddiv .divinfo {
    padding: 10px;
}
/* LOGIN */
.login-clean {
    background: #c5e3fd;
    min-height: 100vh;
    padding: 80px 0;
}
.login-clean .info {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: white;
    background-color: green;
    border-radius: 4px;
}
.login-clean form {
    max-width: 320px;
    width: 90%;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    color: #505e6c;
    box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.3);
}
.login-clean h2 {
    font-family: "Poppins Bold";
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
    color: #000;
}
.login-clean .illustration {
    text-align: center;
    font-size: 80px;
    color: var(--prim);
}

.login-clean form .form-control {
    background: #f7f9fc;
    border: none;
    border-bottom: 1px solid #80868d;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    color: inherit;
    text-indent: 8px;
    height: 42px;
}

.login-clean form .btn-primary {
    background: var(--prim);
    width: 100%;
    border: none;
    border-radius: 4px;
    padding: 11px;
    box-shadow: none;
    margin-top: 26px;
    text-shadow: none;
    outline: none !important;
    transform: scale(1); /* Efek zoom saat hover */
}

.login-clean form .btn-primary:hover,
.login-clean form .btn-primary:active {
    background: var(--second);
    transform: scale(1.05); /* Efek zoom saat hover */
}

.login-clean form .btn-primary:active {
    transform: translateY(1px);
}

.login-clean form .forgot {
    font-family: "Poppins Regular";
    display: block;
    text-align: center;
    font-size: 16px;
    color: #6d6f70;
    margin-top: 15px;
    text-decoration: none;
    transform: scale(1); /* Efek zoom saat hover */
}

.login-clean form .forgot:hover,
.login-clean form .forgot:active {
    opacity: 1;
    text-decoration: none;
    color: #1c35c0;
    transform: scale(1.05); /* Efek zoom saat hover */
}

.carddiv .imgcer {
    margin: 10px;
    width: auto; /* Sesuaikan dengan kebutuhan */
    height: auto; /* Sesuaikan dengan kebutuhan */
    overflow: hidden; /* Potong bagian gambar yang keluar */
    position: relative; /* Konteks posisi untuk gambar */
}
.carddiv .imgcer img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Agar gambar tetap proporsional */
    transition: transform 0.3s ease; /* Animasi halus */
    border-radius: 8px;
}
.carddiv .imgcer img:hover {
    transform: scale(1.7);
}