@media screen and (max-width: 900px) {
    * {
        font-size: 2.5vw;
        padding: 0px;
        margin: 0px;
    }

    aside {
        display: none;
     }

    .allconts {
        margin: 0;
        justify-content: center;
     }

     .contgallery {
        margin-top: 10px;
        margin-left: 0;
        margin-right : 0;
        margin-bottom :0;
     }
     .contbiografi {
        margin : 0 !important;
     }
    .heading9 {
        margin-top : 30px;
    }
    main {
        margin-top: 40px;
     }
     .header {
        height: 40px;
        display: block;
        padding: 3px
     }
    .container {
        background-size: contain;
        background-position: center center;
        min-width : 100vh;
        min-height : 70vh;
    }
    html, body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    main {
        flex-grow: 1; /* Mendorong footer ke bawah */
    }

    footer {
        min-width : 1500px;
    }

    .main-footer {
        text-align: center;
    }

    .social-media {
        justify-content: center;
        gap: 10px;
       align-items: center;
    }

    .info-center {
        font-size: 14px;
        padding: 10px;
      align-items: center;
    }
    .latbel p {
        text-align: left ;
        min-width: 600px;
    }
    .mainh2 {
        text-align: center;
    }
    .h1main {
        flex-wrap : wrap;
        min-width : 600px;
    }
    .h1main img {
       width : 700px;
    }
    .riko {
        height : 215px;
    }
}

header {
        width: 100%;
}

.header {
    background-color: #d6d6d6;
    padding-left: 10px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 50px;
    font-family : 'Saira',sans-serif;  
}

.bjierlah a {
    padding: 0;
    text-decoration: none;
    color: rgb(43, 43, 43);
}

body {
    margin : 0; 
    background-color : #d6d6d6;
}

nav {
    position : absolute;
    right : 0;
    display : flex;
    font-family : 'Saira',sans-serif;
}

.menu {
    text-decoration: none;
    color:  rgb(43, 43, 43);
    float: left;
    padding : 15px;
}

.menu:hover {
    color : rgba(81, 82, 81, 0.651)
}

.welcome {
    
    padding : 50px;
}

.anjig {
    font-family : 'Saira',sans-serif;

}

.container::before {
    content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
}

.container {
    display : flex;
    padding-top : 50px;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)),url(assets/background.jpg);
    background-size: cover;
    background-position: center;
    box-shadow :rgba(0, 0, 0, 0.5);

}

.contgallery {
    background-color: rgb(74, 78, 82)
}

.contgallery-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 kolom */
    grid-template-rows: repeat(2, auto); /* 2 baris */
    gap: 30px; /* Jarak antar gambar */
    justify-content: center;
    align-items: center;
    padding: 20px;
    max-width: 900px;
    margin: auto;
}
.contgallery h2 {
 
    text-align: center;
}

.contgallery img {
    width: 100%; /* Gambar memenuhi grid */
    height: 100%;
    border-radius: 8px; /
}

.contgallery-2 img {
    border-radius: 3px;
}

.container img {
   padding : 25px;
   border-radius : 8px;
   max-width: 70%;
   margin: auto;
   text-align: center;
}

.btn-1 {
  background-color: #2f3030;
  border: none;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius : 15px;
  color : #C9DABF
}

.btn-1 {
    color : rgba(217, 234, 236, 0.651)
}
.bjierlah {
    text-align: left;
    color: #C9DABF;
    padding: 0px;
    margin: 14px;
    position: absolute;
    left: 0px;
}

.latbel {
    color : #d6d6d6;
    display : flex;
    padding : 15px;
    max-width : 1000px;
}

.latbel p {
    font-family : 'Saira',sans-serif;
    margin-left: 40px; 
    text-align : justify;
    margin-top : 0;
    font-size : 17px;
    color :#3d3939;
}

.latbel img {
    margin-left : 40px;
    border-radius: 5px;
    background-color: #3d3939;
}

.containerlatbel {
    display : flex;
    flex-direction: column;
    align-items: flex-start;
}

footer {

    background-color: #d6d6d6;
    margin-bottom : 0px;
    margin-top: 5px;
}
.center-footer {
    margin: 0 20px;
}
.main-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.info-top {
    text-align: center;
    width: 100%;
    padding-top: 5px;
    color: rgb(43, 43, 43);
    font-family : 'Saira', sans-serif;
    margin : 0px;
}
.info-center h3 {
    text-align: center;
    width: 100%;
    padding-top: 5px;
    color: rgb(43, 43, 43);
    font-family : 'Saira', sans-serif;
}

.info-center {
    text-align: center;
    width: 100%;
    padding-top: 5px;
    border-top: 1px solid rgb(77, 77, 77);
    color: rgb(43, 43, 43);
    font-family : 'Saira', sans-serif;
    margin : 5px;
}

.social-media {
    display: flex;
    justify-content: center;
}
.fa-instagram-square, .fa-envelope {
    padding: 5px;
    font-size: 30px;
    color: rgb(36, 36, 36);
}

.contbiografi {
    background-color :#C9DABF;
    margin-top : 15px;
    margin-left : 30px;
    border-radius: 10px;
}  

.contbiografi img {
  width : 200px;
  height: auto;
  display : block;
}

.contbiografi p {
    padding : 10px;
    text-align: justify;
    font-size : 17px;
}

aside {
     max-width: 18%;
    max-height: 800px;
    border-radius: 10px;
    box-shadow: 0px 0px 30px gainsboro;
    padding: 20px;
    text-align: center;
    margin-top: 15px;
    background-color: snow;
}

.aside-title {
    margin-top: 20px;
    font-size: 25px;
    border-top: 5px solid rgb(38, 70, 83);
    border-radius: 5px;
}

.main-content {
    display: flex;
    justify-content: flex-start;
    margin: 15px 20px;
    
}

.div-indv {
    background-color: #f8f8f8;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-width : 370px;
}

.div-indv img {
    width: 100%;
    border-radius: 8px;
}

.indv-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolom */
    grid-template-rows: repeat(2, auto);  /* 2 baris */
    gap: 20px; /* Jarak antar div */
    max-width: 900px; /* Sesuaikan lebar */
    margin: auto;
    text-align: center;
}

.tentangkamih1 {
    text-align :center;
    margin : 60px;
}

.tentangkamih1 h3 {
    border-top : 5px cadetblue
}

.heading9 {
    padding-top : 40px;
     text-align : center;
}