/* Apply a universal reset to remove margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(41, 121, 39); /* Sets the background color of the entire screen */
    color: rgb(253, 253, 255); /* Sets the text color for better readability */
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes default padding */
    font-family: Arial, sans-serif; /* Sets a default font for better readability */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

h1 {
    text-align: center;
    margin: 10px 0;
    margin-bottom: 60px;
}

.square1 {
    width: 100vw; /* Ensures the square takes the full width of the screen */
    height: 100px;
    background-color: rgb(22, 22, 105);
    position: relative; /* Enable absolute positioning for the text */
    display: flex;
    justify-content: center;
    align-items: center;
}

.square1 p {
    color: rgb(41, 121, 39); /* Text color for the square */
    text-align: center; /* Center the text */
    font-size: 1.3em; /* Adjust the size as needed */
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    margin-top: 50px;
}

.modern-button {
    padding: 10px 20px;
    font-size: 1em;
    color: white;
    background-color: rgb(22, 22, 105);
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.modern-button:hover {
    background-color: #1a1a6b;
    transform: translateY(-2px);
}



.bigg, .big7 {
    max-width: 800px; /* Set a maximum width for the container */
    margin: 0 auto; /* Center the container horizontally */
    padding: 40px; /* Add padding around the text */
    background-color: #050000; /* Add a light background color */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    line-height: 2; /* Improve line spacing for readability */
    margin-top: 15px; /* Adjust as needed for spacing */
}

.looksgood1 {
    max-width: 800px; /* Set a maximum width for the container */
    margin: 0 auto; /* Center the container horizontally */
    padding: 20px; /* Add padding around the text */
    background-color: #050000; /* Add a light background color */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    line-height: 1.6; /* Improve line spacing for readability */
    margin-top: 15px; /* Adjust as needed for spacing */ 
}

.looksgood2 {
    max-width: 800px; /* Set a maximum width for the container */
    margin: 0 auto; /* Center the container horizontally */
    padding: 20px; /* Add padding around the text */
    background-color: #050000; /* Add a light background color */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    line-height: 1.6; /* Improve line spacing for readability */
    margin-top: 15px; /* Adjust as needed for spacing */ 
}



.responsive-image {
    max-width: 14%; /* Make the image responsive */
    height: auto; /* Maintain the aspect ratio */
    border-radius: 50px; /* Optional: Add rounded corners to the image */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    margin-top:45px;
}

.cleanedlook1 {
    margin-top: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px; /* Adjust the height as needed */
    width: 150px; /* Adjust the width as needed */
    background-color: rgb(151, 87, 44); /* Background color for the box */
    border: 1px solid black; /* Optional: border for the box */
    box-sizing: border-box; /* Ensure padding is included in the height/width */
    font-size: 20px; /* Adjust the font size as needed */
    border-radius: 20px;
}

.cleanedlook2 {
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px; /* Adjust the height as needed */
    width: 260px; /* Adjust the width as needed */
    background-color: rgb(151, 87, 44); /* Background color for the box */
    border: 1px solid black; /* Optional: border for the box */
    box-sizing: border-box; /* Ensure padding is included in the height/width */
    font-size: 20px; /* Adjust the font size as needed */
    border-radius: 20px;
}

.cleanedlook3, .big8 {
    margin-top: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px; /* Adjust the height as needed */
    width: 300px; /* Adjust the width as needed */
    background-color: rgb(151, 87, 44); /* Background color for the box */
    border: 1px solid black; /* Optional: border for the box */
    box-sizing: border-box; /* Ensure padding is included in the height/width */
    font-size: 20px; /* Adjust the font size as needed */
    border-radius: 20px;
}

.title10000 {
    margin-top: 150px;
}


.footer-text {
    font-size: 0.5em; /* Adjust the size as needed */
    color: rgb(22, 22, 105);
    margin-top: 120px;
}
