/*---------------------------------------
  CUSTOM PROPERTIES (VARIABLES)             
-----------------------------------------*/
:root {
    --white-color: #ffffff;
    --primary-color: #171382;
    --secondary-color: #EE5007;
    --section-bg-color: #f0f8ff;
    --custom-btn-bg-color: #EE5007;
    --custom-btn-bg-hover-color: #c01f27;
    --dark-color: #000000;
    --p-color: #717275;
    --border-color: #7fffd4;
    --link-hover-color: #B22727;

    --body-font-family: 'Outfit', sans-serif;

    --h1-font-size: 60px;
    --h2-font-size: 46px;
    --h3-font-size: 32px;
    --h4-font-size: 28px;
    --h5-font-size: 24px;
    --h6-font-size: 22px;
    --p-font-size: 20px;
    --btn-font-size: 14px;
    --copyright-font-size: 16px;

    --border-radius-large: 100px;
    --border-radius-medium: 20px;
    --border-radius-small: 10px;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
}

/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
@media screen and (max-width: 991px) {
    h1 {
        font-size: 62px;
    }

    h2 {
        font-size: 36px;
    }

    h3 {
        font-size: 32px;
    }

    h4 {
        font-size: 28px;
    }

    h5 {
        font-size: 20px;
    }

    h6 {
        font-size: 18px;
    }

    .section-padding {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .navbar {
        background-color: var(--dark-color);
    }

    .navbar-expand-lg .navbar-nav {
        padding-bottom: 30px;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 0;
    }

    .hero-section {
        padding-top: 150px;
    }

    .tour-card-horizontal {
        max-width: 20rem;
        margin: 0 auto;
    }

    .carousel-item-content {
        height: 500px;
    }

    .carousel-amenities {
        flex-direction: column;
        align-items: center;
    }

    .btn-tarifas {
        font-size: 0.875rem;
        padding: 0.75rem 1.5rem;
    }
}

@media screen and (max-width: 767px) {
    .custom-btn {
        font-size: 14px;
        padding: 10px 20px;
    }

    .tour-card-wrapper {
        height: auto;
        margin-bottom: 1rem;
    }

    .carousel-img {
        height: 200px;
    }

    .carousel-item-content {
        height: 450px;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 52px;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 26px;
    }

    h4 {
        font-size: 22px;
    }

    h5 {
        font-size: 20px;
    }

    .carousel-item-content {
        height: 400px;
    }

    .btn-tarifas {
        font-size: 0.75rem;
        padding: 0.65rem 1.25rem;
    }
}

/* Responsive text del botón */
@media screen and (max-width: 768px) {
    .btn-carousel-cta {
        padding: 0.65rem 1.25rem;
        font-size: 0.8rem;
    }

    .btn-carousel-cta .btn-text {
        display: inline;
    }
}

@media screen and (max-width: 576px) {
    .btn-carousel-cta {
        padding: 0.6rem 1rem;
        font-size: 0.7rem;
        letter-spacing: 0.3px;
    }

    .btn-carousel-cta .btn-text {
        font-size: 0.7rem;
    }

    .btn-carousel-cta i {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 400px) {
    .btn-carousel-cta {
        padding: 0.5rem 0.75rem;
        font-size: 0.65rem;
    }

    .btn-carousel-cta .btn-text {
        display: none;
    }

    .btn-carousel-cta::after {
        content: "VER TARIFAS";
        font-size: 0.65rem;
    }
}