/* Gaya Default */
body {
    background-image: url("/assets/img/frontend/bg.jpg");
    background-size: cover;
    /* Mengisi seluruh layar */
    background-repeat: repeat;
    background-position: center;
    font-family: 'Poppins', sans-serif;
    height: 100%;
    /* Tinggi background mengikuti tinggi layar */
    margin: 0;
    padding: 0;
}

p {
    font-weight: 400;
    font-size: 1rem;
    /* Ukuran font default */
}

.form-container {
    max-width: 600px;
    margin: 200px;
    background: #fff;
    border-radius: 10px;
    padding: 200px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    /* Efek shadow */
}

.form-control{
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.form-labelinput{
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.form-select{
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    background: #fff url('/assets/img/frontend/downwards.svg') no-repeat right 10px center; /* Gambar ikon */
    cursor: pointer;
}

.form-label {
    font-weight: 500;
}

.btn-upload {
    background-color: #f1f1f1;
    border-radius: 20px;
    padding: 10px 20px;
}

.btn-upload:hover {
    background-color: #ddd;
}

.btn-daftar {
    background-color: #DB2681; /* Warna pink untuk tombol */
    color: #fff; /* Warna teks putih */
    font-size: 18px; /* Ukuran font */
    font-weight: bold;
    padding: 10px 30px;
    border: none;
    border-radius: 23px; /* Membuat sudut melengkung */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Efek bayangan */
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .btn-daftar:hover {
    background-color: #d81b60; /* Warna lebih gelap saat hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Tambahkan intensitas bayangan */
  }
  
  .btn-daftar:active {
    transform: scale(0.95); /* Efek klik */
  }

.responsive-img {
    width: 100%; /* Default, gambar akan memenuhi div kontainernya */
    max-width: 300px; /* Lebar maksimum pada layar besar */
    height: auto; /* Menjaga proporsi gambar */
}
/* Media Queries untuk Layar Kecil (ponsel) */
@media (max-width: 768px) {
    body {
        background-size: contain;
        /* Menyesuaikan ukuran gambar agar tidak terlalu besar */
    }

    p {
        font-size: 1.25rem;
        /* Mengurangi ukuran font untuk layar kecil */
        text-align: center;
        /* Menyatukan teks ke tengah */
    }

    h2 {
        font-size: 1.25rem;
        /* Mengurangi ukuran font untuk layar kecil */
        text-align: center;
        /* Menyatukan teks ke tengah */
    }

    h3 {
        font-size: 0.9rem;
        /* Mengurangi ukuran font untuk layar kecil */
        text-align: center;
        /* Menyatukan teks ke tengah */
    }

    .responsive-img {
        max-width: 200px; /* Lebar maksimum lebih kecil pada layar menengah */
    }
}

/* Media Queries untuk Layar Lebih Kecil (ponsel kecil) */
@media (max-width: 480px) {
    body {
        background-size: contain;
        background-position: top;
        /* Gambar latar lebih fokus di atas */
}
    p {
        font-size: 0.8rem;
        /* Font lebih kecil */
    }

    h2 {
        font-size: 1.25rem;
        /* Mengurangi ukuran font untuk layar kecil */
        text-align: center;
        /* Menyatukan teks ke tengah */
    }

    h3 {
        font-size: 0.9rem;
        /* Mengurangi ukuran font untuk layar kecil */
        text-align: center;
        /* Menyatukan teks ke tengah */
    }
    .responsive-img {
        max-width: 150px; /* Lebar maksimum lebih kecil lagi pada layar kecil */
    }
}