@media (max-width: 1231px) {
    main .caption-main{
        z-index:10;
    }
    header{
        height:850px;
    }
    nav{
        justify-content:space-between;
    }
    nav ul{
        margin-right:20px;
        column-gap:25px;
    }
    #s2 .gambar{
        column-gap:20px;
        flex-direction:column;
        row-gap:40px;
    }
    #s2 .gambar .gmbr{
        width:450px;
    }
    #s3 .harga{
        flex-direction:column;
        row-gap:40px;
    }
    #s3 .harga .kotak{
        width:450px;
    }
    #s3 .harga .kotak::before{
        width:70%;
    }
    #hubungi .form{
        flex-direction:column-reverse;
        padding:50px 0;
        padding-top:20px;
    }
    #hubungi .form form{
        width:80%;
    }
}
@media (max-width:952px){
    
    main{
    width:100%;
    justify-content:center;
    align-items:start;
    text-align:center;
    }
    main .caption-main{
        margin:0;
        margin-top:150px;
        justify-content:center;
        align-items:center;
    }
    .logo{
        margin-left:30px;
    }
    nav ul{
        display:none;
    }
    .bi-list{
        margin-right:50px;
        font-size:40px;
        cursor:pointer;
        z-index:13;
    }
    .bi-list:hover{
        filter:drop-shadow(0px 5px 10px #633190);
    }
    nav ul{
        width:100%;
        position:absolute;
        left:0;
        top:0;
        height:500px;
        background-color:#fff;
        flex-direction:column;
        justify-content:start;
        align-items:start;
        row-gap:50px;
        padding:30px 30px;
        z-index:11;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }
}

@media (min-width:952px){
    .bi-list{
        display:none;
    }
    
    
}
@media (max-width:867px){
    footer{
        flex-direction:column;
        align-items:start;
        row-gap:30px;
        padding:0 80px;
        padding-top:30px;
        padding-bottom:50px;
        height:300px;
    }
    footer .syarat{
        flex-direction:column;
        row-gap:20px;
    }
    footer .logo{
        margin-left:-20px;
    }
}
@media (max-width:752px){
    header{
        height:650px;
    }
main img{
    display:none;
}

main::after{
    display:none;
}
main{
    align-items:center;
}
main .caption-main{
    margin-top:0;
}
main .caption-main h4{
    font-size:7vmin;
}
main .caption-main p{
    font-size:3vmin;
}
#s1 .judul h4,
#s2 .judul h4,
#s3 .judul h4{
    font-size:6vmin;
}
#s1 .gambar img{
    width:340px;
}
#s2 .gambar .gmbr{
    width:300px;
}
#s3 .harga .kotak{
    width:400px;
}
#s3 .harga .kotak::before{
    width:250px;
}
#hubungi .form img{
    width:240px;
}
#hubungi .form{
    width:400px;
}
main{
    width:100%;
}
#s1 .caption-s2 .tandai{
    font-size:8px;
}

}
.active{
    display:flex;
}

@media (max-width:415px){
    #s2 .gambar .gmbr{
        width:270px;
    }
    #s3 .harga .kotak{
        width:330px;
    }
    #s3 .harga .kotak::before{
        width:200px;
    }
    #hubungi .form{
        width:300px;
    }
    #s1 .gambar img{
        width:300px;
    }
    #s1 .caption-s2{
        width:300px;
    }
}