:root {
    --primary-color: #F58634;
    /* Orange */
    --primary-hover: #D97529;
    --secondary-color: #1B3B6F;
    /* Dark Blue */
    --text-color: #4a4a4a;
    --light-bg: #f9f9f9;
    --white: #ffffff;
    --footer-bg: #1B3B6F;
    --footer-text: #E0E0E0;
    --transition: all 0.3s ease;
    --font-main: 'Poppins', sans-serif;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 0.9rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(245, 134, 52, 0.4);
}

.btn-secondary {
    background-color: var(--primary-color);
    color: var(--white);
    font-size: 0.85rem;
    padding: 10px 20px;
}

.btn-secondary:hover {
    background-color: var(--primary-hover);
}

/* Top Bar */
#top-bar {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 10px 0;
    font-size: 0.8rem;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info {
    display: flex;
    gap: 20px;
}

.social-top {
    display: flex;
    gap: 10px;
    align-items: center;
}

.contact-info span i {
    margin-right: 5px;
}

/* Social Icons Highlight */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--white);
    transition: var(--transition);
    text-decoration: none;
}

.social-icon:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
    color: var(--white);
}

.social-icon i {
    font-size: 1rem;
}

/* Header */
#header {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 60px;
    /* Adjust based on actual logo */
    object-fit: contain;
}

.navbar .nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
}

.navbar .nav-links li a {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.navbar .nav-links li a:hover {
    color: var(--primary-color);
}

.navbar .nav-links li.btn-highlight a {
    color: var(--primary-color);
    font-weight: 700;
}

.hamburger {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--secondary-color);
}

/* Hero Section */
/* Hero Carousel Styles */
#hero {
    position: relative;
    height: 600px;
    margin-bottom: 0;
    overflow: hidden;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    z-index: 5;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -2;
    transform: scale(1);
}

.hero-slide.active .hero-image {
    animation: zoomIn 20s linear forwards;
}

@keyframes zoomIn {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 100px;
    /* Move text up a bit */
}

.hero-subtitle {
    font-size: 1.1rem;
    font-weight: 300;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 30px;
    max-width: 800px;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    color: #ffffff;
}

.btn-outline {
    border: 2px solid var(--white);
    color: var(--white);
    background: transparent;
    padding: 10px 30px;
}

.btn-outline:hover {
    background: var(--white);
    color: var(--secondary-color);
}

/* Carousel Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--secondary-color);
    color: var(--white);
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 10;
    transition: var(--transition);
}

.carousel-btn:hover {
    background-color: var(--primary-color);
}

.prev-btn {
    left: 0;
    border-radius: 0 50px 50px 0;
    padding-left: 10px;
}

.next-btn {
    right: 0;
    border-radius: 50px 0 0 50px;
    padding-right: 10px;
}

/* Booking Widget */
.booking-widget {
    position: absolute;
    /* Using absolute inside hero relative container? No, maybe better to be at bottom of hero */
    bottom: -60px;
    /* Overlap next section slightly? Or just sit at bottom */
    left: 0;
    width: 100%;
    z-index: 20;
}

.booking-wrapper {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.booking-header {
    background-color: #3b5998;
    /* A lighter blue as per screenshot? Or secondary color */
    background-color: rgba(59, 89, 152, 0.9);
    /* Trying to match 'Reserve on-line' bar color */
    color: var(--white);
    padding: 15px 30px;
    display: block;
    gap: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.booking-header h3 {
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: none;
    /* Screenshot shows sentence case */
}

.booking-form {
    background: var(--white);
    padding: 20px 30px;
    display: flex;
    gap: 20px;
    align-items: flex-end;
    /* Align inputs and button */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    flex-wrap: wrap;
    /* For mobile */
}

.form-group {
    flex: 1;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
    font-weight: 600;
}

.input-with-icon,
.date-inputs {
    position: relative;
    display: block;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
    height: 45px;
}

.input-with-icon i {
    padding: 0 10px;
    color: #999;
}

.input-with-icon input {
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    outline: none;
    color: #333;
}

.date-inputs {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.date-field {
    display: block;
    gap: 5px;
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
}

.btn-search {
    background-color: var(--secondary-color);
    color: var(--white);
    border: none;
    padding: 0 40px;
    height: 45px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.btn-search:hover {
    background-color: var(--primary-color);
}

/* Animations */
.animate-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

.delay-1 {
    animation-delay: 0.3s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* General Section */
.section {
    padding: 60px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    color: var(--white);
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Icon Divider */
.icon-divider {
    position: relative;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    width: 200px;
    margin: 0 auto 20px;
}

.icon-divider i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    /* In header usually transparent */
    color: var(--white);
    font-size: 1.5rem;
    padding: 0 10px;
}

/* Specific Section Styles */
/* Onde Hospedar - Parallax or Image BG in original? Original has a parallax image behind title. 
   We will mock this with a bg image for the section header part or create a container.
   Actually, let's put the header inside the section but the section bg is white?
   Wait, the screenshot 3 shows "ONDE SE HOSPEDAR" over a background image of pavers/pool? 
   Let's make the section header have a background image.
*/

#hospedagem {
    padding-top: 100px;
    margin-top: 0;
    position: relative;
    background-image: url('../assets/hero_bg.png');
    /* Use hero bg or another pattern */
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

#hospedagem::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

#hospedagem .container {
    position: relative;
    z-index: 1;
}

#hospedagem .section-header p {
    color: var(--white);
    font-size: 1.1rem;
}

/* Category Sections */
.category-section {
    margin-bottom: 50px;
}

.category-title {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    display: inline-block;
}

/* Cards Grid */
.resort-grid,
.park-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: var(--white);
    border-radius: 8px;
    /* Or 0 for polaroid look + padding */
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
    position: relative;
    padding: 10px;
    /* Polaroid frame effect */
}

.card:hover {
    transform: translateY(-10px);
}

.card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    border-radius: 4px;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .card-image img {
    transform: scale(1.1);
}

.card-body {
    padding: 20px 10px;
    text-align: center;
}

.stars {
    color: #FFD700;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.card-body h3 {
    color: var(--secondary-color);
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Parks Section */
#parques {
    background: var(--white);
}

#parques .section-header h2 {
    color: var(--secondary-color);
    text-shadow: none;
}

#parques .icon-divider {
    background: #ccc;
}

#parques .icon-divider i {
    color: var(--secondary-color);
    font-size: 2rem;
    background: var(--white);
}

.park-card .card-body {
    background: var(--secondary-color);
    color: var(--white);
    border-radius: 4px;
    margin-top: -5px;
    /* overlap slightly or connect */
    padding: 15px;
}

.park-card .card-body h3 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 5px;
}

.park-card .stars {
    color: #F58634;
    /* Orange stars on blue */
}

/* Newsletter Section */
.newsletter-section {
    background-color: var(--secondary-color);
    color: var(--white);
    text-align: center;
    padding: 80px 0;
}

.icon-divider-white {
    width: 200px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin: 20px auto;
    position: relative;
}

.icon-divider-white i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--secondary-color);
    padding: 0 10px;
    font-size: 1.5rem;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.newsletter-form input {
    padding: 12px 20px;
    width: 250px;
    border: none;
    border-radius: 4px;
    outline: none;
}

.newsletter-form button {
    width: auto;
    min-width: 150px;
}

/* Footer */
#footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 60px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.footer-col h3 {
    color: #F58634;
    margin-bottom: 20px;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.contact-block h4 {
    color: var(--white);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.contact-block p,
.footer-group p {
    font-size: 0.9rem;
    margin-bottom: 8px;
    opacity: 0.9;
}

.contact-block p i,
.footer-group p i {
    margin-right: 10px;
    color: #F58634;
}

.footer-links-list ul li {
    margin-bottom: 10px;
}

.footer-links-list ul li a {
    color: var(--footer-text);
    font-size: 0.9rem;
}

.footer-links-list ul li a:hover {
    color: #F58634;
    padding-left: 5px;
}

.social-links {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.social-links a {
    color: var(--white);
    font-size: 1.2rem;
    opacity: 0.7;
}

.social-links a:hover {
    opacity: 1;
    color: #F58634;
}

/* Utilities */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    left: 30px;
    /* According to screenshot it's on left */
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: var(--transition);
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #20BA5C;
}

.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--white);
    color: var(--secondary-color);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    /* Hidden by default */
    visibility: hidden;
    transition: var(--transition);
}

.scroll-top.active {
    opacity: 1;
    visibility: visible;
}

/* Responsive Design */
@media (max-width: 992px) {
    .container {
        padding: 0 15px;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }
}

@media (max-width: 900px) {

    /* Navigation */
    .navbar .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 0;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        z-index: 1001;
        border-top: 1px solid #eee;
    }

    .navbar .nav-links.active {
        display: flex;
    }

    .navbar .nav-links li {
        width: 100%;
    }

    .navbar .nav-links li a {
        padding: 15px 20px;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        justify-content: space-between;
    }

    .navbar .nav-links li.btn-highlight {
        margin: 10px 20px 20px;
        text-align: center;
        width: auto;
    }

    .navbar .nav-links li.btn-highlight a {
        background-color: var(--primary-color);
        color: var(--white);
        justify-content: center;
        border-radius: 5px;
    }

    .hamburger {
        display: block;
    }

    /* Top Bar */
    .top-bar-content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .contact-info {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    /* Hero Section */
    #hero {
        height: 600px;
        min-height: 550px;
        flex-direction: column;
        justify-content: center;
        padding-top: 40px;
        padding-bottom: 60px;
        text-align: center;
        /* Center text on mobile usually looks better */
    }

    /* Revert left align for mobile usually or keep logic if layout permits. 
       The user wanted specific HERO style. Let's keep left align but ensure padding. */
    #hero {
        justify-content: flex-start;
        text-align: left;
    }

    .hero-content {
        padding-bottom: 20px;
        margin-bottom: 0;
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }

    /* Carousel Buttons - Make smaller or hide label */
    .carousel-btn {
        padding: 10px;
        font-size: 0.8rem;
    }

    .carousel-btn i {
        display: block;
        font-size: 1.2rem;
    }

    /* Booking Widget */
    .booking-widget {
        position: relative;
        bottom: 0;
        margin-top: 20px;
        margin-bottom: -30px;
        /* Pull it slightly up or reset */
        z-index: 5;
    }

    .booking-form {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
    }

    .form-group {
        width: 100%;
        margin-bottom: 15px;
    }

    .btn-search {
        width: 100%;
        margin-top: 10px;
    }

    .date-inputs {
        /* On very small screen, stack dates? */
    }

    /* Sections */
    #hospedagem,
    #parques,
    .newsletter-section {
        padding: 50px 0;
    }

    .newsletter-form input {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .contact-info {
        font-size: 0.75rem;
        flex-direction: column;
        gap: 5px;
    }

    .carousel-btn {
        display: none;
        /* Hide arrows on small mobile to avoid overlap text */
    }

    .hero-content h1 {
        font-size: 1.6rem;
    }

    .date-inputs {
        flex-direction: column;
        height: 600px;
        padding: 10px;
    }

    .date-field {
        padding: 5px 0;
        justify-content: space-between;
        width: 100%;
    }

    .footer-col {
        text-align: center;
    }

    .footer-col h3::after {
        /* Centered underscore if strictly needed, but simple is fine */
    }

    .contact-block p,
    .footer-group p {
        justify-content: center;
    }

    .social-links {
        justify-content: center;
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 28px;
        bottom: 20px;
        left: 20px;
    }
}

/* Carousel Styles for Parks */
.carousel-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0 50px;
}

.carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.carousel-slide {
    min-width: 33.333%;
    box-sizing: border-box;
    padding: 15px;
    flex-shrink: 0;
}

/* Nav Buttons */
.park-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(27, 59, 111, 0.8);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: block;
    justify-content: center;
    transition: all 0.3s ease;
}

.park-prev {
    left: 0;
}

.park-next {
    right: 0;
}

.park-nav:hover {
    background: #F58634;
}

/* Responsive adjustments for Carousel */
@media (max-width: 900px) {
    .carousel-slide {
        min-width: 50%;
    }
}

@media (max-width: 600px) {
    .carousel-slide {
        min-width: 100%;
    }

    .carousel-wrapper {
        padding: 0 40px;
    }
}

/* Accommodation Gallery Styles */
.accommodation-gallery {
    margin-bottom: 40px;
}

.accommodation-gallery h3 {
    margin-bottom: 20px;
    color: #1B3B6F;
    font-size: 1.5rem;
    border-left: 5px solid #F58634;
    padding-left: 15px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.gallery-placeholder {
    height: 180px;
    background-color: #f0f0f0;
    border: 2px dashed #ccc;
    border-radius: 8px;
    display: block;
    justify-content: center;
    color: #999;
    font-weight: 500;
}

/* UNIVERSAL MOBILE OPTIMIZATION */
@media screen and (max-width: 768px) {

    /* 1. Typography Scaling */
    html {
        font-size: 14px;
        /* Slightly smaller base font */
    }

    h1 {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.5rem !important;
        margin-bottom: 15px;
    }

    h3 {
        font-size: 1.2rem !important;
    }

    p {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* 2. Container & Layout */
    .container {
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
    }

    .section {
        padding: 40px 0;
        /* Reduce vertical padding */
    }

    /* 3. Hero Section Adjustment */
    #hero {
        height: 600px;
        min-height: 500px;
        padding-top: 120px;
        /* Space for fixed header */
        margin-bottom: 40px;
        text-align: center;
        display: block;
    }

    .hero-content {
        padding-bottom: 40px;
        text-align: center !important;
        /* Force center on mobile */
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .hero-slide .hero-image {
        /* Ensure background covers effectively */
        background-position: center;
    }

    /* 4. Navbar & Header */
    .logo img {
        height: 40px;
        /* Smaller logo */
    }

    .logo span {
        font-size: 0.75rem !important;
        /* Smaller brand name */
        max-width: 150px;
        line-height: 1.2;
        display: inline-block;
    }

    .navbar .nav-links {
        top: 70px;
        /* Adjust based on header height */
        background-color: var(--white);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding: 20px;
        height: calc(100vh - 70px);
        /* Full height drawer */
        overflow-y: auto;
    }

    /* 5. Forms & Inputs (Universal Touch Targets) */
    input,
    select,
    textarea,
    button {
        font-size: 16px;
        /* Prevent iOS zoom */
    }

    .input-with-icon,
    .date-inputs,
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'] {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    .booking-form {
        flex-direction: column;
        padding: 20px;
    }

    .booking-form-container form>div {
        display: block !important;
        /* Stack grid items */
        grid-template-columns: 1fr !important;
    }

    .booking-form-container form>div>div {
        margin-bottom: 15px;
    }

    /* 6. Buttons */
    .btn,
    .whatsapp-btn-large {
        width: 100%;
        display: block;
        text-align: center;
        padding: 15px;
    }

    /* 7. Footer */
    #footer {
        padding: 40px 0 20px;
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-col {
        margin-bottom: 20px;
    }

    /* 8. Utility & visibility */
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}

/* Specific fix for the booking inputs container that was using grid */
@media screen and (max-width: 600px) {
    div[style*='grid-template-columns: 1fr 1fr'] {
        grid-template-columns: 1fr !important;
    }
}

/* MOBILE HERO GAP FIX */
@media screen and (max-width: 768px) {
    #hero {
        display: block !important;
        position: relative !important;
        height: 600px !important;
        padding-top: 120px !important;
        /* Push text down */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        background-color: #eee;
        /* Fallback */
    }

    #hero .hero-slider {
        position: absolute !important;
        /* Take out of flow to ignore padding */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0;
        /* Behind text */
    }

    .hero-content {
        position: relative !important;
        z-index: 10 !important;
        /* Above slider */
    }
}


/* MOBILE HERO CENTERING FIX */
@media screen and (max-width: 768px) {
    #hero {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        height: 600px !important;
        padding-top: 0 !important;
        /* Flex centering handles the offset typically, but if nav is overlay? Nav is sticky. */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        text-align: center !important;
    }

    /* Adjust content position if needed to not be protected by navbar if centering puts it too high?
       600px height. Middle is 300px. Navbar is approx 90px. 
       Content is likely safe in the middle. */

    #hero .hero-slider {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0;
    }

    .hero-content {
        position: relative !important;
        z-index: 10 !important;
        width: 100%;
        /* Ensure full width for centering text */
        padding-bottom: 0 !important;
        /* Remove desktop padding */
    }

    /* Also ensure headings are centered */
    .hero-content h1,
    .hero-subtitle {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Professional Transitions */
.section {
    position: relative;
    padding: 80px 0;
    /* Standardize */
}

/* Remove margins that might cause gaps */
#hospedagem,
#parques,
#newsletter {
    margin-top: 0;
    margin-bottom: 0;
}

/* Wave divider example style */
.custom-shape-divider-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 70px;
}

.custom-shape-divider-bottom .shape-fill {
    fill: #FFFFFF;
}

/* Specific background handling to merge sections visually */
#parques {
    background-color: var(--light-bg);
    /* Ensure it has color */
    padding-top: 100px;
    /* Space for wave overlap if needed */
}

/* Premium Bottom Gradient for Hero */
.hero-slide::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
    z-index: 1;
    /* Below text (z:2) but above img */
}

/* TRANSITION FIX - REMOVE GAP AND OVERLAP BOOKING WIDGET */
#hero {
    margin-bottom: 0 !important;
}

/* Ensure Booking Widget overlaps the next section professionally */
.booking-widget {
    bottom: -40px !important;
    /* Half inside hero, half outside */
    z-index: 50 !important;
}

/* Add padding to next section so overlap doesn't hide content */
#hospedagem {
    padding-top: 100px !important;
    /* Compensate for widget overlap */
    margin-top: 0 !important;
    position: relative;
    z-index: 10;
    /* Below widget */
}

/* Add a gradient fade at bottom of hero for smoothness */
#hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
    z-index: 3;
    pointer-events: none;
}

/* Ensure mobile stacking is correct */
@media screen and (max-width: 768px) {
    .booking-widget {
        position: relative !important;
        bottom: auto !important;
        margin-top: -20px !important;
        /* Pull up slightly into hero */
        margin-bottom: 20px !important;
        z-index: 20 !important;
        padding: 0 20px;
    }

    #hospedagem {
        padding-top: 60px !important;
    }

    /* Remove white bg fallback if any */
    #hero {
        background-color: transparent !important;
    }
}

#parques {
    position: relative;
    padding-bottom: 100px;
    /* Space for divider */
}

/* Ensure overlap fix from previous step didn't hide Hero divider */
.custom-shape-divider-bottom-hero {
    bottom: 0px;
    z-index: 10;
    pointer-events: none;
}

/* WHITE SPACE SEPARATOR FIX */
#hero {
    margin-bottom: 120px !important;
    /* Enough space for widget (overlaps ~40px) + White Gap (~80px) */
    background-color: transparent !important;
    /* Ensure no bg color leak */
}

/* Ensure next section respects this */
#hospedagem {
    margin-top: 0 !important;
    padding-top: 60px !important;
}

/* Mobile adjustment */
@media screen and (max-width: 768px) {
    #hero {
        margin-bottom: 60px !important;
        /* Smaller gap on mobile */
    }
}

/* MOBILE HERO VISUAL CENTERING FIX */
@media screen and (max-width: 768px) {
    #hero {
        /* Add padding to top to offset the fixed Header height (~80px) so 'center' looks centered in the visible area */
        padding-top: 90px !important;

        /* Ensure Flex is still active for centering */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Ensure content doesn't have extra padding throwing it off */
    .hero-content {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: transparent;
    margin: 5% auto;
    padding: 0;
    width: 90%;
    max-width: 600px;
    animation: slideDown 0.4s ease-out;
    position: relative;
    border-radius: 8px;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close-modal {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: -30px;
    top: -10px;
    transition: 0.3s;
}

.close-modal:hover,
.close-modal:focus {
    color: #F58634;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .close-modal {
        right: 0;
        top: -35px;
    }
}

/* Updated Footer Logo - Round */
.logo-footer img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin: 0 auto;
    /* Center if needed */
    display: block;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

/* Updated Social Links - Above Logo & Highlighted */
.social-links {
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 0;
    /* Override previous margin-top */
}

.social-links a {
    font-size: 1.5rem;
    /* Larger but not huge */
    opacity: 1;
    background: #fff;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.3s ease;
    color: #333;
    /* default color if not matched */
}

.social-links a:hover {
    transform: translateY(-5px);
}

/* Social Icon Colors */
.social-links a i.fa-instagram {
    color: #E1306C;
}

.social-links a i.fa-whatsapp {
    color: #25D366;
}

.social-links a i.fa-facebook {
    color: #1877F2;
}

.social-links a i.fa-facebook-f {
    color: #1877F2;
}

/* Handle both classes */
.social-links a i.fa-envelope {
    color: #F58634;
}

/* Responsive Map */
.map-container {
    position: relative;
    overflow: hidden;
    padding-top: 75%;
    /* 4:3 Aspect Ratio roughly */
    height: 0;
    /* padding trick */
    margin-top: 15px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Force Center Alignment for First Column */
.footer-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-col-center h3 {
    width: 100%;
    /* Ensure title container spans width */
    text-align: center;
    /* Explicitly center title text */
}

/* Only remove icon margin if we are centering, to make it perfectly centered visually? 
   No, keep margin, it's fine. */
/* Weather Widget */
.weather-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--white);
    background: var(--primary-color);
    padding: 8px 16px;
    border-radius: 25px;
    margin-left: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(245, 134, 52, 0.4);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.weather-widget:hover {
    background: var(--primary-hover);
    color: var(--white);
    font-weight: bold;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(245, 134, 52, 0.6);
}

.weather-widget i {
    font-size: 1rem;
    color: var(--white);
    margin-right: 5px;
}

.weather-widget:hover i {
    color: var(--white);
}

@media (max-width: 992px) {
    .weather-widget {
        margin: 10px 0;
        justify-content: center;
        width: fit-content;
        align-self: flex-start;
    }
}