* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
}

body {
          font-family: Arial, sans-serif;
          background-color: #f4f4f4;
          color: #333;
}


/* HEADER */

header {
          background-color: #0a192f;
          color: white;
          padding: 20px;
          text-align: center;
}

header h1 {
          margin-bottom: 15px;
}


/* NAVIGATION */

nav {
          display: flex;
          justify-content: center;
          gap: 25px;
}

nav a {
          color: white;
          text-decoration: none;
          font-weight: bold;
}

nav a:hover {
          color: #00bcd4;
}


/* HERO SECTION */

.hero {
          min-height: 400px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          background-color: #123456;
          color: white;
          padding: 30px;
}

.hero h2 {
          font-size: 40px;
          margin-bottom: 20px;
}

.hero p {
          font-size: 20px;
          margin-bottom: 25px;
}

.hero button {
          background-color: #00bcd4;
          color: white;
          border: none;
          padding: 14px 30px;
          font-size: 17px;
          cursor: pointer;
          border-radius: 5px;
}

.hero button:hover {
          background-color: #0097a7;
}


/* PRODUCTS */

.products {
          padding: 50px 20px;
          text-align: center;
}

.products h2 {
          margin-bottom: 30px;
}

.product-container {
          display: flex;
          justify-content: center;
          gap: 20px;
          flex-wrap: wrap;
}

.product-card {
          background-color: white;
          width: 250px;
          padding: 25px;
          border-radius: 10px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.product-card h3 {
          margin-bottom: 15px;
          color: #123456;
}

.product-card p {
          line-height: 1.6;
}

.price {
          color: green;
          font-weight: bold;
          margin-top: 15px;
}


/* ABOUT AND OTHER PAGES */

.page-section {
          max-width: 1000px;
          margin: auto;
          padding: 60px 30px;
          min-height: 500px;
}

.page-section h2 {
          text-align: center;
          color: #123456;
          margin-bottom: 30px;
}

.page-section h3 {
          margin-top: 25px;
          margin-bottom: 10px;
}

.page-section p {
          line-height: 1.8;
}


/* SERVICES */

.service-container {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
          justify-content: center;
}

.service-card {
          background-color: white;
          width: 300px;
          padding: 25px;
          border-radius: 10px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.service-card h3 {
          color: #123456;
          margin-bottom: 15px;
}


/* CONTACT */

.contact-section {
          max-width: 700px;
          margin: auto;
          padding: 50px 20px;
}

.contact-section h2 {
          text-align: center;
          margin-bottom: 10px;
          color: #123456;
}

.contact-section>p {
          text-align: center;
          margin-bottom: 30px;
}

form {
          background-color: white;
          padding: 30px;
          border-radius: 10px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

form label {
          display: block;
          margin-top: 15px;
          margin-bottom: 5px;
          font-weight: bold;
}

form input,
form textarea {
          width: 100%;
          padding: 12px;
          border: 1px solid #ccc;
          border-radius: 5px;
}

form textarea {
          height: 130px;
          resize: vertical;
}

form button {
          width: 100%;
          padding: 14px;
          background-color: #123456;
          color: white;
          border: none;
          margin-top: 20px;
          border-radius: 5px;
          cursor: pointer;
}

form button:hover {
          background-color: #00bcd4;
}

.contact-info {
          margin-top: 30px;
          background-color: white;
          padding: 25px;
          border-radius: 10px;
}

.contact-info h3 {
          margin-bottom: 15px;
}


/* FOOTER */

footer {
          background-color: #0a192f;
          color: white;
          text-align: center;
          padding: 20px;
}


/* MOBILE RESPONSIVE */

@media (max-width: 768px) {

          nav {
                    flex-direction: column;
                    gap: 10px;
          }

          .hero h2 {
                    font-size: 30px;
          }

          .product-container,
          .service-container {
                    flex-direction: column;
                    align-items: center;
          }

}