:root {
    --primary: #E41E26;
    --primary-dark: #B81118;
    --black: #000000;
    --white: #FFFFFF;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-800: #0C0C0C;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    height: 200vh; 
}


body.no-scroll {
    overflow: hidden;
}


.main-header {
    background-color: var(--gray-800);
    height: 80px;
    width: 100%;
    color: var(--white);
    display: flex;
    align-items: center;
    /* justify-content: center;  Will be adjusted for mobile */
    justify-content: space-between; /* For logo left, nav/toggle right */
    padding: 0 20px; /* Add some horizontal padding */
    position: fixed;
    left: 0;
    top: 0;
    transition: height 0.4s ease; /* Corrected transition property */
    z-index: 1005; /* Ensure header is above other content, mobile menu below if absolute */
}
.main-header--scrolled {
    height: 45px;
}

/* Original navigation, will be for desktop */
nav#main-navigation {
    align-items: center;
    display: flex;
    justify-content: flex-end; /* Align nav links to the right */
    gap: 30px;
    /* width: 100%; Removed, let it take space as needed */
}

a:visited, a {
    text-decoration: none;
    color: var(--white);
    transition: 0.4s ease;
}

a:hover {
    color: var(--primary);
}

#logo {
    /* padding-left: 5%; Removed, using header padding */
    display: flex;
    justify-content: flex-start;
    align-items: center; /* Vertically align logo image if needed */
    /* width: 100%; Removed, let it be natural width */
    flex-shrink: 0; /* Prevent logo from shrinking too much */
}

.logo {
    width: 180px; /* Slightly reduced for better balance */
    height: auto; /* Maintain aspect ratio */
    transition: width 0.4s ease; /* For smooth resize with header */
}

.main-header--scrolled .logo {
    width: 120px; /* Smaller logo when header is scrolled */
}


/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none; /* Hidden by default, shown on mobile */
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.8rem; /* Adjust size as needed */
    cursor: pointer;
    padding: 10px;
    z-index: 1010; /* Above nav if nav becomes an overlay */
}


#hero {
    margin-top: 80px;
    background: var(--white) url('./assets/img/hero.webp') center/cover  no-repeat;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px;
    position: relative;
    z-index: 0;
}

#hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Escurecimento */
  z-index: 0;
}

#hero > * {
  position: relative;
  z-index: 1;
}

#slogan-1 {
    color: var(--white);
    font-size: 3.5rem;
    font-weight: 700;
}

#slogan-2 {
    color: var(--primary-dark);
    font-size: 3.55rem;
    font-weight: 700;
}

#hero p {
    color: var(--white);
    text-align: center;
    font-size: 1.5rem;
}


.button {
    color: var(--white);
    padding: 15px;
    background-color: var(--primary);
    border-radius: 8px;
    box-shadow: 1px 1px 5px 1px var(--gray-800);
    margin: 5px;
}

.button:hover {
    color: var(--black);
    background-color: var(--primary-dark);
    transition: 0.6s ease;
    box-shadow: 2px 2px 6px 1px var(--gray-800);
}

.cta :nth-child(2) {
    background-color: transparent;
    border: solid 1px var(--white);
}

.cta :nth-child(2):hover {
    background-color: transparent; /* Kept transparent */
    border: solid 1px var(--white); /* Kept white border */
    color: var(--primary); /* Example: change text color on hover */
}

#servicos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    min-height: 60vh; /* Use min-height to allow content to expand */
    padding: 40px 20px; /* Add some padding */
}

#servicos > :nth-child(1) {
    text-align: center;
    margin-bottom: 30px; /* Add space below title/paragraph */
}

#servicos > :nth-child(1) > h2 {
    margin: 15px;
    font-size: 2rem;
    font-weight: 700;
}

#cards {
    display: flex;
    align-items: stretch; /* Make cards same height if in a row */
    justify-content: center; /* Center cards */
    flex-wrap: wrap; /* Allow cards to wrap on smaller screens */
    gap: 20px; /* Add gap between cards */
}

.card {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* margin: 10px; Replaced by gap in #cards */
    background-color: var(--gray-100);
    padding: 40px 20px; /* Adjusted padding */
    border-radius: 8px;
    flex-basis: 300px; /* Base width for cards */
    flex-grow: 1; /* Allow cards to grow */
    max-width: 400px;
}

#sobre {
    background: url('./assets/img/box.jpeg') center/cover no-repeat;
    background-attachment: fixed;
    min-height: 50vh; /* Use min-height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically */
    gap: 10px;
    position: relative;
    padding: 60px 20px; /* Add padding */
    z-index: 0;
}

#sobre::before {
    content: '';
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#sobre > * {
    z-index: 1;
    text-align: center; /* Center text elements */
}

#sobre h3 {
    text-transform:uppercase;
    font-size: 2.3rem;
    font-weight:700;
    color: var(--white);
}

#sobre > h3:nth-child(2) { /* This will now target the second h3 */
    color: var(--primary);
    font-size: 2.5rem;
}

.sobre-text {
    color: var(--white);
    font-size: 18px;
    max-width: 600px; /* Limit width for readability */
    margin-top: 10px; /* Add some space */
}

#contato {
    text-align: center;
    background-color: var(--gray-200);
    padding: 40px 20px; /* Add padding */
}

#contato h3 {
    font-size: 1.8rem;
    margin: 25px auto; /* Center title */
}

#contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Increased gap */
    max-width: 600px; /* Limit form width */
    margin: 0 auto; /* Center form */
}

label {
    margin-top: 10px;
    font-weight: bold; /* Make labels bolder */
}

input, textarea {
    width: 100%; /* Make inputs full width of their container */
    max-width: 500px; /* Max width for larger inputs */
    height: 40px;
    border-radius: 5px;
    font-size: 16px;
    padding: 8px 12px; /* Add padding inside inputs */
    border: 1px solid var(--gray-200); /* Softer border */
}

textarea {
    height: 150px; /* Adjusted height */
    /* width: 600px; /* Controlled by form's max-width now */
}

input::placeholder, textarea::placeholder {
    padding: 5px; /* This is often controlled by input's padding */
    font-size: 16px;
    color: #999; /* Softer placeholder color */
}

.submit {
    padding: 12px 30px; /* Larger padding */
    border-radius: 6px;
    background-color: var(--primary); /* Use primary color */
    color: var(--white); /* White text */
    font-size: 16px;
    border: none; /* Remove border if background is colored */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit:hover {
    background-color: var(--primary-dark); /* Darken on hover */
    box-shadow: 1px 1px 4px 0 var(--gray-800);
}

footer {
    background-color: var(--black);
    color: var(--white);
    /* height: 100px; Let height be auto */
    text-align: center;
    padding: 40px 20px; /* Increased padding */
}

footer span {
    color: var(--primary);
}

#social {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;
    flex-direction: column;
    gap: 30px; /* Adjusted gap */
    padding: 60px 20px; /* Add padding */
}

#social h3 {
    font-size: 2rem;
    text-transform: uppercase;
    text-align: center;
}

ul { /* This general ul might affect other uls if any; be specific if needed */
    display: flex;
    list-style: none;
    gap: 15px;
    margin:0;
    padding:0;
}

/* Specific to social links for styling */
#social ul li a {
    position: relative;
    width:60px;
    height:60px;
    display:block;
    text-align:center;
    /* margin:0 10px; /* Replaced by gap in ul */
    border-radius: 50%;
    padding: 6px;
    box-sizing: border-box;
    text-decoration:none;
    box-shadow: 0 10px 15px rgba(0,0,0,0.3);
    background: linear-gradient(0deg, #ddd, #fff);
    transition: .5s;
}

#social ul li a:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  text-decoration:none;
}

#social ul li a .fab,
#social ul li a .fas { /* Added .fas for the 'at' icon */
  width: 100%;
  height:100%;
  display:block;
  background: linear-gradient(0deg, #fff, #ddd);
  border-radius: 50%;
  line-height: calc(60px - 12px); /* 60px height - 2*6px padding */
  font-size:24px;
  color: #262626;
  transition: .5s;
}

#social ul li:nth-child(1) a:hover .fab { /* Facebook */
  color: #3b5998;
}

#social ul li:nth-child(2) a:hover .fab { /* Instagram */
  color: #e4405f; /* Updated Instagram color */
}

#social ul li:nth-child(3) a:hover .fab { /* Whatsapp */
  color: #25D366; /* Updated Whatsapp color */
}

#social ul li:nth-child(4) a:hover .fas { /* Email (at icon) */
  color: #dd4b39; /* Google/Email red */
}

/* Media Query for Mobile Menu */
@media (max-width: 768px) {
    .main-header {
        padding: 0 15px; /* Slightly reduce padding for smaller screens */
    }

    .logo {
        width: 150px; /* Default smaller logo on mobile */
    }
    .main-header--scrolled .logo {
        width: 100px; /* Even smaller when scrolled on mobile */
    }

    nav#main-navigation {
        display: none; /* Hide by default on mobile */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Position it right below the header */
        left: 0;
        width: 100%;
        background-color: var(--gray-800); /* Or a slightly different bg */
        padding: 10px 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        border-top: 1px solid var(--primary-dark); /* Optional separator */
        align-items: center; /* Center items */
        gap: 0; /* Reset gap, control with padding on links */
    }

    nav#main-navigation.nav--open {
        display: flex; /* Show when active */
    }

    nav#main-navigation a {
        color: var(--white);
        padding: 15px 20px; /* Make links taller and full width for tapping */
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--gray-200); /* Separator for links */
    }
    nav#main-navigation a:last-child {
        border-bottom: none;
    }

    nav#main-navigation a:hover {
        background-color: var(--primary-dark);
        color: var(--white);
    }

    .mobile-menu-toggle {
        display: block; /* Show the hamburger button */
    }

    #hero {
        gap: 50px; /* Reduce gap on smaller screens */
    }
    #slogan-1, #slogan-2 {
        font-size: 2.5rem; /* Adjust slogan size for mobile */
    }
    #hero p {
        font-size: 1.2rem;
    }

    .cta {
        flex-direction: column; /* Stack CTA buttons */
        gap: 15px;
    }
    .cta .button {
        width: 80%;
        max-width: 280px;
        text-align: center;
    }

    #cards {
        flex-direction: column; /* Stack cards on mobile */
        align-items: center; /* Center cards when stacked */
    }
    .card {
        flex-basis: auto; /* Allow cards to take full width available */
        width: 90%;
        max-width: 350px; /* Max width for cards on mobile */
    }

    #sobre h3 {
        font-size: 1.8rem;
    }
    #sobre > h3:nth-child(2) {
        font-size: 2rem;
    }

    textarea {
        /* width: 90%; /* Adjust if needed, but form is max-width 600px */
        height: 120px;
    }
}