body {
         font-family: 'Roboto', sans-serif;
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         background-color: #f5f5f5;
     }
     header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 20px;
         background-color: #fff;
         border-bottom: 1px solid #ddd;
     }
     header h1 {
         font-size: 24px;
         font-weight: 700;
         margin: 0;
     }
     nav {
         display: flex;
         gap: 10px;
     }
     nav a {
         text-decoration: none;
         padding: 10px 20px;
         border-radius: 20px;
         font-size: 16px;
         font-weight: 500;
     }
     .btn-black {
         background-color: #000;
         color: #fff;
     }
     .btn-gray {
         background-color: #d3d3d3;
         color: #000;
     }
     .btn-light-gray {
         background-color: #f0f0f0;
         color: #000;
     }
     .container {
         padding: 20px;
         margin: 0 40px;
     }
     .contact-section {
         display: flex;
         justify-content: center;
         gap: 20px;
         margin-bottom: 20px;
     }
     .contact-form {
         display: flex;
         flex-direction: column;
         gap: 10px;
         max-width: 640px;
         width: 100%;
     }
     .contact-form input, .contact-form textarea {
         padding: 10px;
         border: 1px solid #ddd;
         border-radius: 5px;
         font-size: 16px;
         width: 100%;
     }
     .contact-form button {
         padding: 10px;
         border: none;
         border-radius: 5px;
         background-color: #000;
         color: #fff;
         font-size: 16px;
         cursor: pointer;
     }
     .promo {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 10px;
     }
     .promo-button:hover {
        transform: scale(1.05);
    }
     .promo .promo-text {
         background-color: #d3d3d3;
         padding: 20px;
         border-radius: 10px;
         text-align: center;
         font-size: 18px;
         font-weight: 500;
     }
     .promo .promo-button {
         background-color: #000;
         color: #fff;
         padding: 10px 20px;
         border-radius: 5px;
         text-align: center;
         cursor: pointer;
     }
     .promo img {
         max-width: 100%;
         border-radius: 10px;
     }
     .about-us {
         background-color: #fff;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         text-align: center;
         width: 70%;
         margin: 0 auto;
     }
     .about-us img {
         max-width: 100%;
         border-radius: 10px;
         margin: 0 auto;
     }
     .about-us .text {
         margin-top: 10px;
     }
     .footer {
         display: flex;
         justify-content: center;
         gap: 10px;
         padding: 20px;
         background-color: #fff;
         border-top: 1px solid #ddd;
     }
     .footer button {
         padding: 10px 20px;
         border: none;
         border-radius: 5px;
         background-color: #000;
         color: #fff;
         font-size: 16px;
         cursor: pointer;
     }
     .welcome-button:hover {
        transform: scale(1.05);
    }
    .howto-button:hover {
        transform: scale(1.05);
    }
     @media (max-width: 768px) {
         .contact-section {
             flex-direction: column;
             gap: 20px;
         }
         .container {
             margin: 0 20px;
         }
         .about-us {
             width: 100%;
         }
     }