@font-face {
    font-family: 'Leage Spartan';
    src: url('LeagueSpartan-VariableFont_wght.ttf') format('truetype');
    /* Jika ingin mendukung berbagai format font, tambahkan format('woff') dan format('woff2') di sini */
  }




body{
    background-color: black;
    height: 100vh;
    width: 100vh;
    font-family: 'Leage Spartan';
}

.bg img{
    width: 90%;
    margin-top: 5%;
    position: absolute;
    z-index: 0;
}

.custom-col{
    border: 1px solid #FB2024;
    background: #000;
    box-shadow: 20px 20px 36px -10px #FB2024;
    width: 75vh;
    height: 60vh;
    margin-top: 45%;
    margin-left: 50%;
}

.left-content, .right-content{
    height: 60vh;
}

.left-content{
    border: 1px solid #FB2024;
    background: #212F36;
}

.image-container {
    position: relative;
    width: 100%; /* Ganti dengan lebar gambar sesuai kebutuhan */
    margin: 10%;
}

.image {
    width: 10%;
    height: auto;
}

.text {
    position: absolute;
    top: 0;
    left: 20%;
    height: 50%; /* Setengah tinggi gambar */
    color: white; /* Warna teks */
    padding: 5px;
    box-sizing: border-box;
    font-size: 2.5vh;
    font-weight: bolder;
}

.text-bottom {
    position: absolute;
    bottom: 0;
    left: 20%;
    height: 50%; /* Setengah tinggi gambar */ /* Warna latar belakang teks */
    color: white; /* Warna teks */
    padding: 10px;
    box-sizing: border-box;
    font-weight: lighter;
}

.text-bottom a{
    color: white;
}

.right-content h5{
    margin-top: 5%;
}

.right-content form{
    width: 100%;
    padding: 0%;
}

.right-content form input, .right-content form textarea{
    margin: 2%;
    width: 70%;
}

.right-content form button{
    border-radius: 2.5625rem;
    border: 3px solid rgba(255, 255, 255, 0.88);
    background: #C51D20;
    color: white;
    width: 70%;
}

.right-content form button:hover{
    border-radius: 2.5625rem;
    border: 3px solid #C51D20;
    background: white;
    color: #C51D20;
    width: 70%;
}



@media (max-width: 767px) {

    body{
        background-color: black;
        height: 100vh;
        width: 40vh;
    }


    .custom-col{
        border: 1px solid #FB2024;
        background: #000;
        box-shadow: 20px 20px 36px -10px #FB2024;
        width: 150%;
        height: 60vh;
        margin-top: 65%;
        margin-left: 10%;
    }

    .text {
        position: absolute;
        top: 10%;
        left: 20%;
        height: 50%; /* Setengah tinggi gambar */
        color: white; /* Warna teks */
        padding: 5%;
        box-sizing: border-box;
        font-size: 2.5vh;
        font-weight: bolder;
    }

    .text-bottom {
        position: absolute;
        bottom: 0;
        left: 20%;
        height: 50%; /* Setengah tinggi gambar */ /* Warna latar belakang teks */
        color: white; /* Warna teks */
        padding: 10px;
        box-sizing: border-box;
        font-weight: lighter;
        top: 100%;

    }

    .image {
        width: 10%;
        height: auto;
    }

    .image-container{
        margin-top: 15%;
    }
    
}