/* CONTACT */
.contact {
    font-family: Arial, sans-serif;
    margin: 20px;
    padding: 0;
}

/* Contact section */
#contact {
    padding: 10px;
    margin-top: 100px;
}

.container-contact {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: repeat(2, auto);
    gap: 20px 110px; /*tambahan: 110px*/
    max-width: 1150px; /*asli: 1000px*/
    margin: 0 auto;
}

/* Align text and logo to the left on desktop */
.container-contact div {
    text-align: left;
}

/* Align logo to the left */
#logo {
    text-align: left;
}

/* Adjust logo size */
#logo img {
    max-width:300px;
    height: auto;
}

/* Style headings with icons */

/*.container-contact {
  width: 70%
  margin: 0 auto;
}*/
.container-contact h3 {
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2em;
    margin-bottom: 15px;
    margin-top: 20px;
}

/* Icon styles */
.container-contact h3 i {
    color: #007BFF;
    font-size: 1.2em;
}

/* List styling */
.container-contact ul {
    list-style: none;
    padding: 0;
}

.container-contact ul li {
    margin: 5px 0;
    list-style: none;
}

.address {
   font-size: 0.8em;
}

.contact-number {
   font-size: 0.8em;
}

.email {
   font-size: 0.8em;
}

#copyright footer {
  font-size: 0.8em;
  text-align: center;
  padding: 30px;
}

.logo-footer p {
        max-width: 500px; /* Optional */
}
/* GENERAL RESPONSIVE STYLES */
@media (max-width: 768px) {



    .container-contact {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        text-align: left;
    }

    .container-contact div {
        text-align: left;
    }

    /* Center icons with text in mobile view */
    .container-contact h3 {
        justify-content: left;
    }

    .container-contact p {
       text-align: left;
    }

    /* Center logo on mobile */
    #logo {
        text-align: center;
    }
    .logo-footer,.address, .contact-number, .email {
        margin: 0 10px;
        text-align: left;
    }
    .logo-footer p {
       margin-right: 50px;

    }
  .logo-footer img {
     max-width: 300px;
      display: block;
  text-align: left;
  }

  .logo-footer p {
        max-width: 1000px; /* Optional */
}

      .services-footer,.products-footer {
        margin: 0 50px;
        text-align: center;
    }
  .copyright footer {
    text-align: left;
  }
}