/* Variabel Warna */
:root {
    --color-ungu: #DF1CFF;
    --color-pink: #EA0070;
    --color-hijau: #1EE0E1;
    --color-biru: #4484FF;
    --color-biru-dongker: #07003E;
}

/* Responsive Styles */
/* Responsive Mobile */




@media (max-width: 768px) {
    .burger {
        display: block; /* Tampilkan burger menu */
    }

    .navigasi {
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: #11075e;
        padding: 20px 0;
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        text-align: center;
    }

    .navigasi ul {
        flex-direction: column;
    }

    .daftar-sekarang {
        margin-top: 20px;
    }

    /* Saat aktif */
    .navigasi.show {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    #home{
        flex-direction: column;
    }

    #home .left{
        order: 2;
    }

    #home .left .top{
        margin-top: 10px;
    }

    #home .left .top p{
        width: 100%;
        text-align: center;
        font-size: 20px;
    }

    #home .left .top h1{
        text-align: center;
        font-size: 40px;
    }

    #home .right{
        margin-top: 20px;
        justify-content: center;
        order: 1;
    }

    #home .right .gambar{
        width: 250px;
        height: 250px;
    }

    #home .right .gambar .gambar-kecil h3{
        font-size: 10px;
    }

    #home .right .gambar img{
        width: 250px;
    }

    #home .left .top .home-daftar-sekarang{
        display: block;
        width: max-content;
        margin: auto;
    }

    #overview{
        margin: 30px auto;
        width: max-content;
    }

    #overview .title img{
        transform: scale(0.9);
    }

    #overview .title h3{
        font-size: 22px;
    }

    #overview .content{
        /* background-color: blue; */
        justify-content: center;
        flex-wrap: wrap;
    }

    #overview .content .card{
        flex:0 0 50%;
        text-align: center;
    }

    #overview .content .card .card-jumlah{
        font-size: 20px;
        margin-bottom: 15px;
    }
    #overview .content .card p{
        font-size: 20px;
    }

    #e-course .content{
        margin-top: 20px;
        justify-content: center;
    }

    #e-book .top{
        width: 100%;
    }

    #team {
        flex-wrap: wrap;
    }

    #team .left{
        flex: 0 0 100%;
        margin-bottom:30px;
        text-align: center;
    }

    #team .right{
        flex: 0 0 100%;
    }

    #team .right .card{
        width: 100%;
        height: 400px;
        text-align: center;
    }

    #team .left img{
        display: none;
    }

    #kontak{
        padding: 0px 40px;
    }

    #kontak input{
        display: block;
        width: 100%;
        background-color: blue;
    }

    #footer .bottom{
        justify-content: center;
        flex-wrap: wrap;
    }

    #footer .left{
        order: 2;
        flex:0 0 100%;
        text-align: center;
    }
    #footer .right{
        margin-bottom: 10px;
        order: 1;
        flex: 0 0 100%;
    }


    #footer .right ul li a{
        font-size: 14px;
    }

    #footer .left p{
        font-size: 14px;
    }

    #footer .top .media-sosial1 .card{
        margin: 0 10px;
    }
    #footer .top .media-sosial1 img{
        width: 35px;
        margin-bottom: 5px;
    }
    #footer .top .media-sosial1 p{
        font-size: 12px;
        margin-bottom: 5px;
    }
    #footer .top .media-sosial1 a{
        font-size: 12px;
    }
    
}

/* Small (Mobile - Landscape & Larger Phones) */
@media (max-width: 576px){  
    #home .left .top h1{
        text-align: center;
        font-size: 35px;
    }

    #home .left .top p{
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    #kontak{
        padding: 0px 40px;
    }

    #kontak input{
        display: block;
        width: 100%;
        background-color: blue;
    }

    #footer .bottom{
        justify-content: center;
        flex-wrap: wrap;
    }

    #footer .left{
        order: 2;
        flex:0 0 100%;
        text-align: center;
    }
    #footer .right{
        margin-bottom: 10px;
        order: 1;
        flex: 0 0 100%;
    }


    #footer .right ul li a{
        font-size: 10px;
    }

    #footer .left p{
        font-size: 10px;
    }

    #footer .top .media-sosial1 .card{
        margin: 0 10px;
    }
    #footer .top .media-sosial1 img{
        width: 35px;
        margin-bottom: 5px;
    }
    #footer .top .media-sosial1 p{
        font-size: 10px;
        margin-bottom: 5px;
    }
    #footer .top .media-sosial1 a{
        font-size: 10px;
    }
    
}

/* end burger menu */

/* Medium (Tablet & Small Laptops) */
@media (min-width: 750px) and (max-width: 991px) {  
    #nav .navigasi ul li a{
        font-size: 12px;
    }

    #nav .navigasi .daftar-sekarang{
        font-size: 12px;
    }

    #home .left .top{
        margin-top: 50px;
    }
    
    #home .left .top p{
        margin-top: 15px;
        margin-bottom: 30px;
    }
    
    #home .right .gambar{
        width: 300px;
        height: 300px;
    }

    #home .right .gambar .gambar-kecil h3{
        font-size: 15px;
    }

    #home .right .gambar img{
        width: 300px;
    }

    #e-book .top{
        width: 80%;
    }
    /* Tambahkan CSS khusus untuk tablet dan laptop kecil */
}

/* Large (Laptop & Small Desktop) */
@media (min-width: 992px) and (max-width: 1199px) {  
/* @media (max-width: 1199px) {   */
    
    #home .right .gambar img{
        width: 400px;
    }
}

/* Extra Large (Large Desktop & Ultra-Wide Screens) */
@media (min-width: 1200px) {  
    /* Tambahkan CSS khusus untuk layar lebar seperti monitor besar */
}

@media (max-width: 420px) {
    #overview{
        margin: 10px auto;
    }

    #overview .title img{
        transform: scale(0.6);
    }

    #overview .title h3{
        font-size: 18px;
    }

    #overview .content .card p{
        font-size: 15px;
    }

    #home .left .top h1{
        font-size: 30px;
        font-weight: 900;
        line-height: 55px;
    }

    #home .left .top p{
        margin-bottom: 20px;
    }

    #home .left .top .home-daftar-sekarang{
        margin-bottom: 20px;
    }

    #e-course .title h1{
        font-size: 25px;
    }

    #e-book .top h1{
        font-size: 25px;
    }
}