/* Reset default styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; padding: 20px; background: #ecf0f1; /* Background color for contrast */ text-align: center; /* Default text alignment for the whole page */ } .container { width: 100%; /* Full width of the containing element (likely ) */ max-width: 800px; /* Maximum width of the container */ margin: auto; /* Center the container horizontally */ background: #f0f0f0; /* Light grey background for the container */ padding: 20px; /* Padding inside the container */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow around the container */ margin-bottom: 20px; /* Space below the container */ text-align: left; /* Align text to the left within the container */ } .container img { width: 100%; height: auto; } .container p { margin-top: 20px; } .container li { margin-bottom: 10px; margin-top: 10px; } /* Additional specific center-aligned elements if necessary */ header, .hero, .cta-button, .learn-more, footer { text-align: center; } header { background-color: #333; padding: 20px; text-align: center; } nav ul { list-style-type: none; padding: 0; margin: 0; /* Reset margin to center the list */ display: block; /* Changed from inline-block to block for proper centering */ background } nav ul li { display: inline-block; margin-right: 20px; background-color: #ecf0f1; transition: background-color 0.3s; /* Smooth transition for hover effect */ } nav ul li a { display: inline-block; background-color: #fff; color: #333; padding: 8px 16px; text-decoration: none; border-radius: 5px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1; } .dropdown:hover .dropdown-content { display: block; } .dropbtn { background-color: inherit; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } footer { background-color: #333; color: #fff; padding: 20px; } .hero { background-color: #f4f4f4; padding: 100px 20px; /* Adjust padding for smaller screens */ } .hero h1 { font-size: 36px; margin-bottom: 20px; } .hero p { font-size: 18px; margin-bottom: 40px; } .cta-button { display: inline-block; background-color: #333; color: #fff; padding: 10px 20px; text-decoration: none; font-weight: bold; border-radius: 5px; transition: background-color 0.3s; /* Smooth transition for hover effect */ } .button { display: inline-block; background-color: #007BFF; /* Primary button color */ color: white; /* Text color */ padding: 10px 20px; /* Top & Bottom, Left & Right padding */ text-decoration: none; /* Remove underline from link */ font-weight: bold; /* Make text bold */ border-radius: 5px; /* Rounded corners */ transition: background-color 0.3s; /* Smooth transition for hover effect */ /* Add more styling as needed */ } .nav-button { display: inline-block; background-color: #fff; /* Primary button color */ color: #333; /* Text color */ padding: 10px 20px; /* Top & Bottom, Left & Right padding */ text-decoration: none; /* Remove underline from link */ font-weight: bold; /* Make text bold */ border-radius: 5px; /* Rounded corners */ transition: background-color 0.3s; /* Smooth transition for hover effect */ } .button:hover, .button:focus { background-color: #0056b3; /* Darker shade for hover state */ color: white; text-decoration: none; /* Ensure text remains without underline on hover */ } .nav-button:hover, .nav-button:focus { background-color: #e7e7e7; /* Lighter shade for hover state */ color: #333; text-decoration: none; /* Ensure text remains without underline on hover */ } .features { padding: 80px 20px; /* Adjust padding for smaller screens */ } .features h2 { font-size: 30px; margin-bottom: 40px; } .features ul { list-style-type: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; } .features li { background-color: #f4f4f4; padding: 40px; border-radius: 5px; } .features h3 { font-size: 24px; margin-bottom: 20px; } .features p { font-size: 16px; margin-bottom: 20px; } .learn-more { display: inline-block; background-color: #333; color: #fff; padding: 8px 16px; text-decoration: none; border-radius: 5px; } footer { background-color: #333; color: #fff; padding: 20px; }