*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
    padding-top: 70px; /* Atur sesuai dengan tinggi navbar Anda */
    margin: 0;
}

/* Navbar */
.navbar{
    background-color: #fff;
    padding: 0.5rem 2rem;
}
.nav-item{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    margin-left: 45px;
}
.nav-item .nav-link{
    color: black;
    position: relative;
}
.nav-item .nav-link:hover{
    background-color: #0231D0;
    color: #fff;
    border-radius: 15px;
}
.dropdown-menu.show .dropdown-item:hover {
    background-color: #0231D0;
    color: #fff;
    border-radius: 10px;
}

/* Beranda */
/* Section Banner */
.banner-home{
    display: flex;
    align-items: center;
    min-height: 100vh;
}
.banner-home .banner-content{
    position: relative;
    text-align: center;
    padding-top: -50px;
}
.banner-home .banner-content .img{
    height: 300px;
    display: block;
    object-fit: cover;
}
.banner-home .banner-text{
    position: absolute;
    top: 0;
    color: #181616;
    padding: 60px;
    text-align: start;
    margin-top: 100px;
}
.banner-home .banner-text p{
    color: #2C9760; 
    font-size: 14px; 
    font-weight: 500;
}

/* Section Company */
.company-content {
    padding: 45px;
}
.company-title {
    color: white;
    text-align: center;
    background-color: #2C9760;
    margin: 0 auto;
    padding: 9px;
    border-radius: 35px;
    width: 35%;
}
.company-content p{
    text-align: center;
    margin: 10px;
    padding: 20px 110px 20px 110px;
}

/* Section Job */
.job-content{
    background: url(../img/bg-job.png) center center/cover no-repeat;
    padding: 90px;
    text-align: center;
    border-radius: 10px;
    width: 90%;
    height: auto;
    margin: 0 auto;
}
.job-card {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 10px;
}
.job-card .card {
    background-color: #E9F6EF;
    border: none;
    border-radius: 10px;
    width: 200px;
    padding: 10px;
    margin: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Tambahkan transisi untuk efek halus */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan untuk efek kedalaman */
}
.job-card .card:hover {
    transform: translateY(-10px); /* Efek naik saat hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Tambahkan bayangan lebih besar saat hover */
}
.job-card .card img {
    width: 65px;
    height: auto;
    text-align: center;
    padding: 4px;
}
.job-card .card p {
    margin: 5px;
}

/* Section Customer */
.customer{
    margin: 10px;
}
.customer-card{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px; /* Jarak antara kartu */
    padding: 20px;
    max-width: 1000px; /* Atur lebar maksimal container */
    margin: 0 auto; /* Pusatkan container */
    margin-bottom: 50px;
}
.customer-card .card{
    background-color: white;
    border: #181616;
    border-radius: 10px;
    justify-content: center;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan untuk efek kedalaman */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px; /* Tambahkan padding jika diperlukan */
}
.customer-card img {
    width: 100%; /* Ensure the image width fits the card */
    height: auto; /* Maintain aspect ratio */
    display: block;
}

/* Awal Profil */
.profil-banner .banner-card img{
    max-width: 100%;
    height: auto;
}
.profil-banner .banner-text{
    position: absolute;
    top: 35%;
    color: #ffff;
    padding: 20px 14% 20px 14%;
    text-align: center;
    font-size: 18px;
    text-align: justify;
    line-height: 1.5;
}

.visi-misi {
    padding: 20px;
    text-align: center;
    line-height: 20%;
    color: #2E2D2D;
}
.visi-misi p{
    text-align: center;
    padding: 20px;
    padding-left: 25%;
    padding-right: 25%;
    line-height: 1.5
}
.visi-misi hr{
    width: 10%;
    height: 5px;
    background-color: #2C9760;
    opacity: 100%;
    margin: 0 auto;
    border: none;
}
.visi-misi .misi{
    padding: 50px;
    text-align: center;
}
.visi-misi ol{
    padding: 20px;
    line-height: 1.5;
    padding-left: 20%;
    padding-right: 20%;
    text-align: justify;
}
/* Akhir Profil */

/* Awal Kontak */
.container-kontak {
    padding: 20px;
    color: #2E2D2D;
    margin-left: 8%;
}
.contact-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    padding: 20px;
    margin-left: 8%;
    margin-right: 3%;
}
.contact-item {
    display: flex;
    align-items: flex-start;
    width: 45%;
    margin-bottom: 20px;
}
.icon {
    margin-right: 30px;
    margin-top: 10px;
    color: #2E2D2D;
}
.contact-info {
    flex: 1;
}
.contact-info h2 {
    margin: 0;
    font-size: 18px;
    color: #333333;
}
.contact-info p {
    margin: 5px 0 0;
    color: #666666;
}
.contact-container img{
    background-color: #2C9760;
    display: flex;
    border-radius: 10%;
    width: 50px;
    height: 50px;
    padding: 0 auto;
}
.maps-container iframe {
    display: flex;
    margin-left: 10%;
}
/* Akhir Kontak */

/* Awal Pengalaman Projek */
/* Section Card Pengalaman Proyek */
.carousel-project {
    background-color: #E9F6EF;
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: -15px;
}
.carousel-content {
    margin: 40px;
    display: flex;
    transition: transform 0.8s ease-in-out;
}
.carousel-content .card {
    margin: 0 8px;
    flex-shrink: 0;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); /* Tambahkan bayangan lebih besar saat hover */
    width: 150px; /* Atur ukuran lebar kartu sesuai kebutuhan */
    background-color: white;
    border-radius: 15px;
    padding: 6px;
}
.carousel-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.carousel-control {
    cursor: pointer;
    background-color: #2C9760;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-control.prev {
    margin-left: 10px;
}
.carousel-control.next {
    margin-right: 10px;
}

/* Section Implementasi ATM & CRM Cardless */
.atm-content{
    display: flex;
    justify-content: space-between;
    position: relative;
}
.atm-content img{
    width: 90%;
    height: 90%;
    padding: 40px;
    max-width: 200%;
}
.atm-content .atm-text{
    flex: 1;
    min-width: 300px;
    max-width: 50%;
    padding: 25px;
    box-sizing: border-box;
}
.atm-content .atm-text h5{
    padding: 50px auto;
}
/* Section Konfiguration ATM */
.atm-configuration{
    background-color: #E9F6EF;
}
/* Akhir Pengalaman Produk */

/* Produk */
.produk-card {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 100px;
    margin-top: 20px;
}
.produk-card .card {
    padding-top: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    border: none;
    border-radius: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Tambahkan transisi untuk efek halus */
}
.produk-card .card:hover {
    transform: translateY(-5px); /* Efek naik saat hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Tambahkan bayangan lebih besar saat hover */
}
.produk-card .card img {
    width: 100%;
    height: 320px;
    text-align: center;
    padding: 25px;
    margin-top: 0 auto;
}
.produk-card .card p {
    font-size: 14px;
    background-color: #0231D0;
    height: 40px;
    width: 200px;
    border-radius: 5px;
    color: white;
    text-align: center;
    align-items: center;
    padding: 7px;
}
.container-bn img{
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    padding: 70px;
    margin-top: -70px;
}
.container-bn {
    width: 100%;
    max-width: 100%;
    height: auto;
    align-items: center;
    position: relative;
}

/* Footer */
footer {
    background-color: #ffffff; /* Warna latar belakang putih */
}
footer .container {
    padding: 10px 0;
    text-align: center; /* Pusatkan konten dalam footer */
}
footer img {
    max-width: 150px; /* Sesuaikan dengan ukuran logo */
    height: auto; /* Menjaga rasio gambar */
}
footer p {
    margin: 0;
    color: #000000; /* Warna teks hitam */
}
footer .contact-icons {
    display: flex;
    justify-content: center; /* Pusatkan ikon dalam baris */
    flex-wrap: wrap; /* Membungkus ikon jika diperlukan */
    padding: 10px 0;
}
footer .contact-icons a {
    margin: 2px; /* Jarak antara ikon */
}
footer .contact-icons img {
    width: 40px; /* Sesuaikan dengan ukuran ikon */
    height: 40px; /* Sesuaikan dengan ukuran ikon */
}
/* Bottom Footer */
.bottom-footer {
    background-color: #0231D0; /* Warna biru sesuai permintaan */
    padding: 10px;
    height: auto;
    text-align: center; /* Pusatkan teks jika ada */
}

/* footer */


/* Akhir Beranda */
@media (max-width: 768px) {
    /* Header  */
    .navbar {
        padding: 0.5rem 1rem; 
    }
    .nav-item {
        margin-left: 0; 
        display: block; 
        text-align: center; 
    }
    .nav-link {
        display: block; /* Tampilkan link dalam format blok untuk perangkat mobile */
        padding: 0.5rem; /* Tambahkan padding untuk link di perangkat mobile */
        border-radius: 10px; /* Radius border agar sesuai dengan gaya */
    }

    /* Dropdown Menu */
    .dropdown-menu {
        background-color: #fff; /* Warna latar belakang default dropdown */
        border-radius: 10px; /* Sesuaikan dengan radius border */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        padding: 0;
        margin: 0;
        position: static; /* Posisi dropdown menu untuk perangkat mobile */
        width: 100%; /* Lebar dropdown menu sama dengan lebar kontainer */
    }

    .dropdown-item {
        color: black; /* Warna teks default item dropdown */
        padding: 0.5rem 1rem; /* Padding item dropdown */
    }

    .dropdown-item:hover {
        background-color: #0231D0; /* Warna latar belakang saat dihover */
        color: #fff; /* Warna teks saat dihover */
    }
    /* Home */
    /* Section Banner */
    .banner-home {
        flex-direction: column; /* Stack items vertically on smaller screens */
    }
    .banner-home .banner-content {
        align-items: center;
    }
    .banner-home .banner-text {
        padding: 20px 20px 20px 20px;
        margin-top: 30px; /* Adjust margin-top for smaller tablets */
        text-align: start;
        align-items: center;
        position: absolute;
    }
    .banner-home .banner-text h1{
        font-size: 17px;
    }
    .banner-home .banner-text p{
        font-size: 0.7rem; /* Mengurangi ukuran font untuk teks yang lebih kecil, Anda bisa menyesuaikan sesuai kebutuhan */
        max-width: 80%; 
        word-wrap: break-word; 
        overflow: hidden; /* Sembunyikan teks yang meluas */
        text-align: start;
        line-height: 1.6; /* Menambah jarak antar baris */
        padding: 0 1rem 2rem; /* Tambahkan padding untuk memberi ruang di sisi, gunakan unit rem untuk konsistensi */
        margin-right: -2rem; /* Mengatur margin di sisi kanan */
        margin-left: -1rem; /* Mengatur margin di sisi kiri */
    }
    .company{
        padding-top: -20rem;
        margin-top: -44rem;
    }
    .company-title {
        width: 90%; /* Adjust width for smaller tablets */
        font-size: 1.1em; /* Adjust font size for smaller tablets */
    }
    .company-content p {
        padding: 10px 5px; /* Adjust padding for smaller tablets */
        width: 100%;
    }
    .job-content {
        padding: 20px; /* Adjust padding for smaller tablets */
    }
    .customer-card {
        grid-template-columns: repeat(3, 1fr); /* Show 3 cards per row on smaller tablets */
    }

    /* Profil */
    .profil-banner .banner-card img {
        height: 355px; /* Menyesuaikan tinggi gambar untuk tablet */
        width: 100%;
    }
    .profil-banner .banner-text {
        top: 14%; /* Sesuaikan posisi teks */
        padding: -50px;
        font-size: 10px;
    }
    .visi-misi {
        margin-top: 40px;
        padding: 5px;
    }
    .visi-misi p {
        padding-left: 3%;
        padding-right: 3%;
    }
    .visi-misi ol {
        padding-left: 3%;
        padding-right: 3%;
    }
    .visi-misi hr {
        width: 20%;
    }

/* Kontak */
    .container-kontak {
        margin-left: 4%;
    }
    .contact-container {
        margin-left: 4%;
        margin-right: 4%;
        margin-top: -15px;
    }
    .contact-item {
        width: 100%; /* Lebar item kontak penuh pada tablet */
    }
    .icon {
        margin-right: 15px; /* Mengurangi margin kanan pada tablet */
    }
    .contact-info h2 {
        font-size: 16px; /* Mengurangi ukuran font pada tablet */
    }
    .contact-info p {
        font-size: 14px; /* Mengurangi ukuran font pada tablet */
    }
    .maps-container iframe {
        height: 300px; /* Mengurangi tinggi iframe pada tablet */
        width: 80%;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    /* Pengalaman Projek */
    .carousel-content {
        margin: 20px; /* Mengurangi margin pada tablet */
    }
    .carousel-content .card {
        width: 120px; /* Mengurangi lebar kartu pada tablet */
        margin: 0 5px; /* Mengurangi margin antar kartu */
    }
    .carousel-control {
        width: 35px;
        height: 35px;
    }
    .atm-content {
        flex-direction: column; /* Menumpuk gambar dan teks secara vertikal pada tablet */
        align-items: center; /* Pusatkan konten secara horizontal */
        margin-top: 15px;
    }
    .atm-content img {
        max-width: 100%; /* Mengatur gambar agar pas di dalam kontainer */
        padding: 20px; /* Mengurangi padding pada tablet */
        height: 250px;
    }
    .atm-content .atm-text {
        max-width: 100%; /* Teks mengambil lebar penuh pada tablet */
        text-align: start; /* Pusatkan teks pada tablet */
        padding: 10px;
    }
    .atm-content .atm-text h5 {
        padding: 10px 0; /* Mengurangi padding atas dan bawah pada tablet */
    }

    /* Produk */
    .container-produk .pc-tittle p {
        font-size: 24px; /* Ukuran font lebih kecil pada tablet */
        padding-top: 30px;
        padding-bottom: 10px;
    }
    .produk-card {
        margin: 20px; /* Mengurangi margin pada tablet */
    }
    .produk-card .card {
        max-width: 90%; /* Membatasi lebar maksimum card pada tablet */
    }
    .produk-card .card img {
        height: auto; /* Menjaga rasio gambar pada tablet */
        max-height: 200px; /* Membatasi tinggi gambar */
        width: 90%;
        padding: 15px; /* Mengurangi padding pada tablet */
    }
    .produk-card .card p {
        font-size: 12px; /* Ukuran font lebih kecil pada tablet */
        width: 170px;
        height: 45px;
        padding: 13px;
    }
    .container-bn img {
        padding: 20px; /* Mengurangi padding pada tablet */
        margin-top: 30px; /* Mengurangi margin pada tablet */
    }

    /* Footer */
    footer .container {
        padding: 10px ;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top: 18px;
    }
    footer img {
        max-width: 130px; /* Ukuran logo lebih kecil pada tablet */
    }
    footer .contact-icons img {
        width: 40px; /* Ukuran ikon lebih kecil pada tablet */
        height: 40px; /* Ukuran ikon lebih kecil pada tablet */
    }
    footer p {
        margin-bottom: 9px;
        color: #000000; /* Warna teks hitam */
        text-align: center;
    }
    
}