@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    color: #333; /* Default text color */
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 10%;
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white for header */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.logo {
    position: relative;
    font-size: 22px; /* Smaller logo font size */
    color: #333; /* Dark gray for logo */
    text-decoration: none;
    font-weight: 600;
}

.navbar {
    font-size: 16px; /* Smaller font size for navbar */
    display: flex;
    list-style: none;
}

.navbar a {
    margin-right: 15px; /* Reduced space between navbar items */
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}

.navbar a:hover {
    color: #A10332; /* Match with your theme color on hover */
}

.about {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background: url('nmsu.png') no-repeat center center; /* Use your image */
    background-size: 200px 200px; /* Fixed size for the image */
    padding: 60px 10%;
    color: #333; /* Dark text color */
}

.about-content {
    background-color: rgba(255, 255, 255, 0.8); /* Similar to home content */
    max-width: 1200px; /* Increased width */
    width: 100%; /* Allow full width */
    padding: 20px; /* Consistent padding */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    margin-top: 40px; /* Adjust this value to lower the section */
}

.heading {
    text-align: center;
    font-size: 4.5rem;
    color: #A10332; /* Crimson color for the heading */
}

.about-content h2 {
    text-align: left;
    font-size: 3.6rem;
    line-height: 1.2;
    color: #A10332; /* Crimson color for the section title */
}

.about-content h3 {
    font-size: 2.6rem;
    color: #333; /* Darker gray for the subheading */
}

.about-content p {
    font-size: 1.6rem;
    margin: 2rem 0 3rem;
    color: #666; /* Lighter gray for the paragraph text */
}

.about-content strong {
    color: #A10332; /* Crimson color for bold text emphasis */
}

/* Hide 'Aldo Mata' logo text on mobile screens */
@media (max-width: 768px) {
    .logo {
        display: none; /* Hide the logo text on small screens */
    }

    .about {
        flex-direction: column;
        padding: 20px; /* Adjust padding for smaller screens */
    }

    .about-content {
        max-width: 100%;
    }

    /* Center the content on mobile */
    .about-content h2, .about-content h3, .about-content p, .about-content strong {
        text-align: center;
    }
}