/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f9f9f9;
}

header {
    background-color: green;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin: 0 10px;
    position: relative; /* Needed for dropdown positioning */
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: #555;
    border-radius: 5px;
}

nav ul li .dropdown {
    display: none;
    position: absolute;
    background-color: green; /* Match header color */
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

nav ul li:hover .dropdown {
    display: block;
}

nav ul li .dropdown li {
    margin: 0; /* Reset margin for dropdown items */
}

nav ul li .dropdown li a {
    padding: 10px 15px; /* Add padding for dropdown items */
    white-space: nowrap; /* Prevent text wrapping */
}

nav ul li .dropdown li a:hover {
    background-color: #444; /* Darker shade for dropdown hover */
}

/* Additional styles for other sections... */


.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2980b9;; /* Medium slate blue */
    color: #fff;
    padding: 50px 20px;
}

.hero-content {
    max-width: 50%;
}

.hero-content h2 {
    font-size: 2em;
}

.hero-content ul {
    list-style: none;
    padding: 0;
}

.hero-content .pricing {
    font-size: 1.5em;
    margin: 20px 0;
}

.price {
    font-weight: bold;
    color: #FFD700; /* Gold */
}

.offer {
    font-size: 0.8em;
    color: #fff;
}

.cta-button {
    background: #FFD700; /* Gold */
    color: #333;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
}

    /* Styling for the timer */
.timer {
    font-size: 2em;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
}


.money-back {
    font-size: 0.8em;
}

.hero-image {
    max-width: 40%;
}

.hero-image img {
    width: 100%;
    border-radius: 10px;
}

.domain-search {
    background: #333; /* Dark background */
    color: #fff;
    padding: 40px 20px;
    text-align: center;
}

.domain-search h2 {
    margin-bottom: 20px;
}

.domain-input {
    padding: 10px;
    width: 60%;
    margin-right: 10px;
    border: none;
    border-radius: 5px;
}

.search-button {
    padding: 10px 20px;
    background: #4CAF50; /* Green */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.domain-prices {
    margin: 20px 0;
}

.domain-prices span {
    margin: 0 10px;
}

.vat-note {
    font-size: 0.8em;
}

/* Hosting Plans Section */
.hosting-plans, .monthly-hosting-plans {
    padding: 40px 20px;
    background: #fff;
    text-align: center;
}

.packages {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.package {
    background: #f4f4f4;
    padding: 20px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: left;
    width: 24%; /* Adjust width for responsiveness */
    transition: transform 0.3s, box-shadow 0.3s; /* Add transition for smooth effect */
}

.package:hover {
    transform: scale(1.05); /* Scale up on hover */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
}

.package h3 {
    margin-top: 0;
}

.get-started {
    background: #4CAF50; /* Green */
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s; /* Smooth background change */
}

.get-started:hover {
    background: #45a049; /* Darker green on hover */
}



/* Reseller Section */
.reseller-section {
    text-align: center;
    padding: 20px;
    background-color: #f4f4f4;
}

.reseller-section h2 {
    font-size: 2em;
    margin-bottom: 10px;
}

.reseller-section p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.reseller-plans {
    display: flex;
    justify-content: space-around;  /* Ensure even spacing between plans */
    flex-wrap: nowrap;  /* Prevent wrapping */
    align-items: stretch;
}

.plan {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 10px;
    width: 30%;  /* Each plan takes up 30% of the container */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: transform 0.3s;
}

.plan:hover {
    transform: scale(1.05);
}

.plan h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.price {
    font-size: 1.8em;
    color: #2ecc71;  /* Green color for pricing */
    margin-bottom: 10px;
}

.plan button {
    background-color: #2980b9;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-bottom: 20px;
}

.plan button:hover {
    background-color: #3498db;
}

.plan ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.plan ul li {
    margin-bottom: 5px;
    font-size: 0.9em;
    line-height: 1.4em;
}

/* Highlighted Plan Styling */
.plan.best-value {
    background-color: #2c3e50;  /* Darker background for the highlighted plan */
    color: #fff;  /* White text for contrast */
    border: 2px solid #27ae60;  /* Green border to highlight */
}

.best-value h3, .best-value .price {
    color: #fff;  /* Ensure text in the best value plan is white */
}

.best-value .plan button {
    background-color: #27ae60;  /* Green button for the best value plan */
}

.best-value .plan button:hover {
    background-color: #2ecc71;  /* Lighter green on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .reseller-plans {
        flex-direction: column;  /* Stack plans on smaller screens */
    }

    .plan {
        width: 100%;  /* Full width on smaller screens */
    }
}
/* VPS Section */
.vps-section {
    text-align: center;
    padding: 20px;
    background-color: #f4f4f4;
}

.vps-section h2 {
    font-size: 2em;
    margin-bottom: 10px;
}

.vps-section p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.vps-plans {
    display: flex;
    justify-content: space-around;  /* Ensure even spacing between plans */
    flex-wrap: nowrap;  /* Prevent wrapping */
    align-items: stretch;
}

.vps-plan {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 10px;
    width: 23%;  /* Each plan takes up 23% of the container */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: transform 0.3s;
}

.vps-plan:hover {
    transform: scale(1.05);
}

.vps-plan h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.vps-price {
    font-size: 1.8em;
    color: #2ecc71;  /* Green color for pricing */
    margin-bottom: 10px;
}

.vps-plan button {
    background-color: #2980b9;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-bottom: 20px;
}

.vps-plan button:hover {
    background-color: #3498db;
}

.vps-plan ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.vps-plan ul li {
    margin-bottom: 5px;
    font-size: 0.9em;
    line-height: 1.4em;
}

/* Highlighted VPS Plan Styling */
.vps-plan.best-value {
    background-color: #2c3e50;  /* Darker background for the highlighted plan */
    color: #fff;  /* White text for contrast */
    border: 2px solid #27ae60;  /* Green border to highlight */
}

.best-value h3, .best-value .vps-price {
    color: #fff;  /* Ensure text in the best value plan is white */
}

.best-value .vps-plan button {
    background-color: #27ae60;  /* Green button for the best value plan */
}

.best-value .vps-plan button:hover {
    background-color: #2ecc71;  /* Lighter green on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .vps-plans {
        flex-direction: column;  /* Stack plans on smaller screens */
    }

    .vps-plan {
        width: 100%;  /* Full width on smaller screens */
    }
}

/* Budget VPS Section */
.budget-vps-section {
    text-align: center;
    padding: 20px;
    background-color: #f4f4f4;
}

.budget-vps-section h2 {
    font-size: 2em;
    margin-bottom: 10px;
}

.budget-vps-section p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.budget-vps-plans {
    display: flex;
    justify-content: space-around;  /* Ensure even spacing between plans */
    flex-wrap: wrap;  /* Allow wrapping */
    align-items: stretch;
}

.plan {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 10px;
    width: 23%;  /* Each plan takes up 23% of the container */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: transform 0.3s;
}

.plan:hover {
    transform: scale(1.05);
}

.plan h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.price {
    font-size: 1.8em;
    color: #2ecc71;  /* Green color for pricing */
    margin-bottom: 10px;
}

.plan button {
    background-color: #2980b9;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-bottom: 20px;
}

.plan button:hover {
    background-color: #3498db;
}

.plan ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.plan ul li {
    margin-bottom: 5px;
    font-size: 0.9em;
    line-height: 1.4em;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .budget-vps-plans {
        flex-direction: column;  /* Stack plans on smaller screens */
    }

    .plan {
        width: 100%;  /* Full width on smaller screens */
    }
}

#why-choose-mawingu-hosting {
    background-color: #f4f4f4; /* Light background for contrast */
    padding: 20px; /* Spacing around the section */
    border-radius: 8px; /* Rounded corners */
    margin: 20px auto; /* Space above and below the section and center it */
    max-width: 800px; /* Set a maximum width for the section */
    text-align: center; /* Center content within the section */
}

#why-choose-mawingu-hosting h2 {
    color: #333; /* Darker color for better readability */
    font-size: 2em; /* Larger font size for the heading */
}

.feature {
    background: #fff; /* White background for feature boxes */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners for feature boxes */
    padding: 15px; /* Spacing inside the feature boxes */
    margin: 10px 0; /* Space between feature boxes */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.feature h3 {
    color: #4CAF50; /* Green color for feature headings */
    margin-bottom: 10px; /* Space below feature headings */
}

.feature p {
    color: #555; /* Slightly lighter text color for paragraphs */
    line-height: 1.6; /* Improved line spacing for readability */
}

#contact-us {
    background-color: #ffffff; /* White background for a clean look */
    padding: 40px; /* Generous padding for spacing */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin: 20px auto; /* Center the section */
    max-width: 800px; /* Limit the width for better readability */
    text-align: center; /* Center content */
}

#contact-us h2 {
    color: #333; /* Dark color for the heading */
    font-size: 2.5em; /* Larger font size for prominence */
    margin-bottom: 20px; /* Space below the heading */
}

#contact-us p {
    color: #555; /* Slightly lighter text color */
    font-size: 1.1em; /* Slightly larger font for readability */
    line-height: 1.6; /* Improved line spacing */
    margin-bottom: 15px; /* Space below paragraphs */
}

.contact-info {
    background-color: #f9f9f9; /* Light gray background for contact info */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Spacing inside the contact info box */
    margin: 20px 0; /* Margin above and below the contact info */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

.contact-info p {
    margin: 10px 0; /* Space between lines */
}

.call-button {
    background-color: #4CAF50; /* Green background for the button */
    color: white; /* White text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    padding: 12px 20px; /* Padding inside the button */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 1.2em; /* Font size for the button */
    margin: 15px 0; /* Space above and below the button */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.call-button:hover {
    background-color: #45a049; /* Darker green on hover */
}

.lady-image {
    width: 100%; /* Responsive image */
    max-width: 300px; /* Maximum width for the image */
    border-radius: 8px; /* Rounded corners for the image */
    margin-top: 20px; /* Space above the image */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for the image */
}
#faq {
    background-color: #f9f9f9; /* Light gray background for the section */
    padding: 40px; /* Generous padding around the section */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin: 20px auto; /* Center the section */
    max-width: 800px; /* Limit the width for better readability */
    text-align: left; /* Left-align text for readability */
}

#faq h2 {
    color: #333; /* Dark color for the heading */
    font-size: 2.5em; /* Larger font size for prominence */
    margin-bottom: 30px; /* Space below the heading */
    text-align: center; /* Center the heading */
}

.faq-item {
    background-color: #ffffff; /* White background for each FAQ item */
    border-radius: 8px; /* Rounded corners for items */
    padding: 20px; /* Padding inside each item */
    margin-bottom: 20px; /* Space between items */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow for items */
    transition: transform 0.2s; /* Smooth transition for hover effect */
}

.faq-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

.faq-item h3 {
    color: #4CAF50; /* Green color for subheadings */
    font-size: 1.5em; /* Font size for subheadings */
    margin-bottom: 10px; /* Space below subheadings */
}

.faq-item p {
    color: #555; /* Darker gray for paragraph text */
    line-height: 1.6; /* Improved line spacing */
    margin: 0; /* Remove default margin */
}

footer {
    background-color: #b88600; /* Dark yellow background */
    color: white; /* White text color for contrast */
    text-align: center; /* Center the text */
    padding: 20px; /* Padding for spacing */
    position: relative; /* Positioning for any future adjustments */
    bottom: 0; /* Align at the bottom */
    width: 100%; /* Full width */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow on top */
}

footer p {
    margin: 0; /* Remove default margin */
    font-size: 1em; /* Font size for the text */
}

footer {
    background-color: #b88600; /* Dark yellow background */
    color: white; /* White text color for contrast */
    text-align: center; /* Center the text */
    padding: 20px; /* Padding for spacing */
    position: relative; /* Positioning for any future adjustments */
    bottom: 0; /* Align at the bottom */
    width: 100%; /* Full width */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow on top */
}

footer p {
    margin: 0; /* Remove default margin */
    font-size: 1em; /* Font size for the text */
}