@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');


* {
    padding: 0;
    margin: 0;
    font-family:'Poppins', sans-serif;
    box-sizing: border-box;
    text-decoration: none;
    outline: none; border: none;
    transition: all .2s linear;
}

.banner {
    display: flex;
}
a {
    color: inherit;
    text-decoration: none;
    
}

.container{
    width: 75%;
    margin:0 auto;
    font-style: initial;
    font-size: 19px;
    font-family: 'source Sans Pro', sans-serif;
    
}
.container:after {
    content: '';
    display: block;
    clear: both;
}
header h1 {
    float: left;
    padding: 15px 0;
    color: #b8b193;
    font-family: 'Poppins', sans-serif;
    
 
}
header ul {  
    float: right;
}
header ul li {
    display: inline-block;
    padding: auto;
}
header ul li a{
    padding: 25px 20px;
    display: inline-block;
} 
header ul li a:hover {
    background-color:  #b8b193;
    color: #fff;
}
.active {
    background-color:  #b8b193;
    color: #fff;
}

.banner img {
   display: block;
   margin: auto;
}

.banner h2{
    color: #fff;
    z-index: 1;
    padding: 20px 25px;
    border: 3px solid #fff;
}
section{
    padding: 50px 0;
    position: center;
}
section h3{
    text-align: center;
    padding: 20px 0;
    color: #b8b193;
    margin-bottom: 20px;
}
.about p{
    color: #666;
    word-spacing: 2px;
    line-height: 25px;
    padding: 20px 0;
}
footer{
    padding: 25px 0;
    background-color: #333;
    color: #fff;
    text-align: center;
}

.bg-loader{
    background-color: #eee;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bg-loader .loader{
    width: 100px;
    height: 100px;
    border: 3px solid #fff;
    border-radius: 50%;
    border-top-color: #b8b193;
    border-right-color: #b8b193;
    border-bottom-color: #b8b193;
    animation: puterin .8s linear infinite;
}

@keyframes puterin {
    100% {
        transform: rotate(360deg);
    }
}
.section h4{ 
        text-align: center;
        color: #b8b193;
        padding: 20px 0;
        float: none;
        align-items: center;

}
.section p {
        text-align: center;
        color: #666;
        padding: 20px 0;
        align-items: center;
}

#about {
    color: #666;
    word-spacing: 7px;
    line-height: 35px;
    padding: 20px 0;
    margin: 20px 0;
}
#tentang {
    color: #666;
    word-spacing: 2px;
    line-height: 35px;
    padding: 20px 0;
    margin: 25px 0;
}
body {
    background-color: #eee;
}
.service {
    background: #e0daba;
    width: 100%;
    margin: auto;
    max-width: 97%;
    border-radius: 4px;
    padding: 55px 30px;
}

.service .container .box {
    display: flex;
    margin: 0 20px 0 20px;
    padding: 0 20px 0 20px;
    letter-spacing: 3px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
}
               

                /* Product */
 .containers {
    padding: 1rem 2rem;
 }

 .containers .title {
    font-size:  2.5rem;
    color: #444;
    margin-bottom:  3rem;
    text-transform: uppercase;
    text-align: center;
 }

 .containers .products-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap:2rem;
 }

 .containers .products-container .products {
    text-align: center;
    padding: 2rem 1rem;
    background: #fff;
    box-shadow: 0 .5rem 1rem rgba(0,0,0.1);
    outline: .1rem solid #ccc;
    outline-offset: -1.5rem;
    cursor: pointer;

 }
 .containers .products-container .products:hover {
    outline: .2rem solid #222;
    outline-offset: 0;
 }

 .containers .products-container .products img {
    height: 21rem;
 }

 .containers .products-container .products:hover img {
    transition: scale(.9);

 }
 
 .containers .products-container  h3 {
    font-size: 14px;
 }


/* Footer */
.container-footer{
    text-align: center;
}

.container-footer img {
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url();
}

/* Table */
table {
        width: 99%;
        border-collapse: collapse;
        margin: 10px 0.7rem;
        font-size: 19px;
        text-align: center;
        align-items: center;
        font-family: 'Poppins', sans-serif;
 }
 th, td {
        padding: 70px;
        border-bottom: 1px solid #ddd;
        width: 20px;
    }
th {
        background-color: #f2f2f2;
    }
tr:hover {
        background-color: #f5f5f5;
    }

table tr ul li {
    width: 100%;
    text-align: center;
    align-items: center;
}

/* Contact Form */
body {font-family: poppins, sans-serif;}
* {box-sizing: border-box;}

h3 {
    display: flex;
    text-align: center;
    justify-content: center;
    color: #b8b193;
    padding-bottom: 25px;
    
}

.contact-container h4 {
    text-align: center;
    align-items: center;
}

.contact-container h5 {
    text-align: center;
    align-items: center;
}

.contact-container h5 a {
    border-bottom: 1px solid #222;
}

.contact-container h5 a:hover{
    color: #b8b193;
    border-bottom: 1px solid #b8b193;
    cursor: pointer;
}


.peta {
    text-align: center;
    align-items: center;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #ccc;
  color: #333;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

input[type=submit]:hover {
  background-color: #b8b193;
}

.containers {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

input[type=email] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

.products-container button {
    border: 2px solid #696969;
    cursor: pointer;
    margin: 15px 15px;
    padding: 17px 17px;
    border-radius: 10px;
    font-weight: 600;
    background-color: #fff;
    color: #696969;
}

.products-container button:hover {
    background-color: #b8b193;
    color: #ddd;
    border: 2px solid #b8b193;
}

/* back product */
 .table-container button {
    border: 1px solid #333;
    cursor: pointer;
    margin: 15px 15px;
    padding: 17px 17px;
    border-radius: 10px;
    font-weight: 600;
    background-color: #fff;
    color: #b8b193;
    text-align: center;
    align-items: center;
}

.table-container a  button{
    text-align: center;
    align-items: center;
}

.table-container button:hover {
    background-color: #b8b193;
    color: #ddd;
}

/* Search Fitur */
.wrapper {
    width: 95%;
    margin: 0 auto;
}

#search-container {
    margin: 1em 0;
}

#search-container input {
    background-color: transparent;
    width: 50%;
    border-bottom: 2px solid #696969;
    padding: 0.7em 0.3em;
    font-size: 19px;
}

#search-container input:focus {
    border-bottom-color: #b8b193;
}

#search-container button {
    padding: 1em 2em;
    margin-left: 1em;
    background-color: #696969;
    color: #ffffff;
    border-radius: 5px;
    margin-top: 0.5em;
    cursor: pointer;
}


#search-container button:hover {
    background-color: #b8b193;
    color: #fff;
    border: 2px solid #b8b193;
    cursor: pointer;
}

.button-value {
    border: 2px solid #696969;
    padding: 1em 2.2em;
    border-radius: 1em;
    color: #696969;
    cursor: pointer;
}

#buttons button:active {
    background-color: #b8b193; /* Warna latar belakang saat aktif */
    color: white; /* Warna teks saat aktif */
    border: 2px solid #b8b193;
}



@media (max-width: 768px) {
    * {
        padding: 0;
        margin: 0;
        font-family:'Poppins', sans-serif;
        box-sizing: border-box;
        text-decoration: none;
        outline: none; border: none;
        transition: all .2s linear;
    }
    
    .banner {
        display: flex;
    }
    a {
        color: inherit;
        text-decoration: none;
        
    }
    
    .container{
        width:100%;
        margin: 0;
        padding: 15px 15px;
        font-style: initial;
        font-size: 14px;
        font-family: 'source Sans Pro', sans-serif;
        
    }
    .container img {
        width: 250px;
        display: flex;
    }

    .container:after {
        content: '';
        display: block;
        clear: both;
    }
    header h1 {
        float: left;
        padding: 12px 0;
        color: #b8b193;
        font-family: 'Poppins', sans-serif;
        
     
    }
    header ul {  
        float: right;
    }
    header ul li {
        display: inline-block;
        padding: auto;
    }
    header ul li a{
        padding: 20px 15px;
        display: inline-block;
    } 
    header ul li a:hover {
        background-color:  #b8b193;
        color: #fff;
    }
    .active {
        background-color:  #b8b193;
        color: #fff;
    }
    
    .banner img {
       display: block;
       margin: auto;
    }
    
    .banner h2{
        color: #fff;
        z-index: 1;
        padding: 15px 20px;
        border: 3px solid #fff;
    }
    section{
        padding: 30px 0;
        position: center;
    }
    section h3{
        text-align: center;
        padding: 15px 0;
        color: #b8b193;
        margin-bottom: 15px;
    }
    .about p{
        color: #666;
        word-spacing: 2px;
        line-height: 25px;
        padding: 13px 0;
    }
    footer{
        padding: 25px 0;
        background-color: #333;
        color: #fff;
        text-align: center;
    }
    
    .bg-loader{
        background-color: #eee;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .bg-loader .loader{
        width: 100px;
        height: 100px;
        border: 3px solid #fff;
        border-radius: 50%;
        border-top-color: #b8b193;
        border-right-color: #b8b193;
        border-bottom-color: #b8b193;
        animation: puterin .8s linear infinite;
    }
    
    @keyframes puterin {
        100% {
            transform: rotate(360deg);
        }
    }
    .section h4{ 
            text-align: center;
            color: #b8b193;
            padding: 15px 0;
            float: none;
            align-items: center;
    
    }
    .section p {
            text-align: center;
            color: #666;
            padding: 15px 0;
            align-items: center;
    }
    
    #about {
        color: #666;
        word-spacing: 7px;
        line-height: 35px;
        padding: 20px 0;
        margin: 20px 0;
    }
    #tentang {
        color: #666;
        word-spacing: 2px;
        line-height: 35px;
        padding: 20px 0;
        margin: 25px 0;
    }
    body {
        background-color: #eee;
    }
    .service {
        background: #e0daba;
        width: 100%;
        margin: auto;
        max-width: 97%;
        border-radius: 4px;
        padding: 55px 30px;
    }
    
    .service .container .box {
        display: flex;
        margin: 0 20px 0 20px;
        padding: 0 20px 0 20px;
        letter-spacing: 3px;
        font-size: 13px;
        font-family: 'Poppins', sans-serif;
    }
                   
    
                    /* Product */
     .containers {
        padding: 1rem 2rem;
     }
    
     .containers .title {
        font-size:  1rem;
        color: #444;
        margin-bottom:  3rem;
        text-transform: uppercase;
        text-align: center;
     }
    
     .containers .products-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap:2rem;
     }
    
     .containers .products-container .products {
        text-align: center;
        padding: 2rem 1rem;
        background: #fff;
        box-shadow: 0 .5rem 1rem rgba(0,0,0.1);
        outline: .1rem solid #ccc;
        outline-offset: -1.5rem;
        cursor: pointer;
    
     }
     .containers .products-container .products:hover {
        outline: .2rem solid #222;
        outline-offset: 0;
     }
    
     .containers .products-container .products img {
        height:12rem;
     }
    
     .containers .products-container .products:hover img {
        transition: scale(.9);
    
     }
    
    /* Footer */
    .container-footer{
        text-align: center;
    }
    
    .container-footer img {
        width: 20px;
        background-size: cover;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url();
    }
    
    /* Table */
    table {
            width: 99%;
            border-collapse: collapse;
            margin: 8px 0.7rem;
            font-size: 13px;
            text-align: center;
            align-items: center;
            font-family: 'Poppins', sans-serif;
     }
     th, td {
            padding: 25px;
            border-bottom: 1px solid #ddd;
            width: 10px;
        }
    th {
            background-color: #f2f2f2;
        }
    tr:hover {
            background-color: #f5f5f5;
        }
    
    table tr ul li {
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .table-container img {
        width: 250px;
    }
    
    /* Contact Form */
    body {font-family: poppins, sans-serif;}
    * {box-sizing: border-box;}
    
    h3 {
        display: flex;
        text-align: center;
        justify-content: center;
        color: #b8b193;
        padding-bottom: 25px;
        
    }
    
    input[type=text], select, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 6px;
      margin-bottom: 16px;
      resize: vertical;
    }
    
    input[type=submit] {
      background-color: #ccc;
      color: #333;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
    }
    
    input[type=submit]:hover {
      background-color: #b8b193;
    }
    
    .containers {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;
    }
    
    input[type=email] {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-top: 6px;
        margin-bottom: 16px;
        resize: vertical;
    }
    
    .products-container button {
        border: 1px solid #333;
        cursor: pointer;
        margin: 15px 15px;
        padding: 17px 17px;
        border-radius: 10px;
        font-weight: 600;
        background-color: #fff;
        color: #b8b193;
    }
    
    .products-container button:hover {
        background-color: #b8b193;
        color: #ddd;
    }
    
    /* back product */
    .table-container button {
        border: 1px solid #333;
        cursor: pointer;
        margin: 15px 15px;
        padding: 17px 17px;
        border-radius: 10px;
        font-weight: 600;
        background-color: #fff;
        color: #b8b193;
    }
    
    .table-container button:hover {
        background-color: #b8b193;
        color: #ddd;
    }
    
}