@import url('landing.css');
@import url('grid.css');
@import url('reservation.css');
@import url('form.css');
@import url('footer.css');
@import url('useful-info.css');

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

:root {
    --primary: #c4b425;
    --secondary: #3da8dc;
    --text-color: #fff;
    --text-secondary: #000;
    --text-tertiary: #396276;
}

/* media queries */
@media (max-width: 768px) {
    .landing .heading h1 {
        font-size: 2rem;
    }

    .landing .heading h2 {
        font-size: 1.5rem;
    }

    .landing .heading p {
        font-size: 1rem;
    }

    .reservation-content {
        padding: 20px;
    }

    .reservation h1 {
        font-size: 1.5em;
    }

    .reservation .form-group label,
    .reservation .form-group input[type="date"],
    .reservation .form-group select {
        font-size: 0.9em;
    }

    .reservation .btn {
        padding: 12px 0;
        font-size: 0.9em;
    }

    .room-gallery {
        flex-direction: column;
        align-items: center;
    }

    .room {
        width: 100%;
        margin-bottom: 20px;
    }

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

    .subscription-form {
        width: 100%;
        max-width: 100%;
    }

    .grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .footer-links {
        flex-direction: column;
        align-items: center;
    }

    .footer-links a {
        margin: 5px 0;
    }
}