/* you can add your own custom css here if you don't want to worry about SASS/SCSS */

/* General Styles */
:root {
        /* Original Colors */
        --teal: #47baa8;
        --lime-green: #bde885;
        --pink-red: #fa4a70;
        --white: #ffffff;
        --pale-yellow: #fafc9c;
        --dark-gray: #050517;

        /* Lighter Variants */
        --off-white: #f9f9f9;
        /* Off White */
        --teal-light: #a3dcd3;
        /* Lighter teal */
        --green-light: #A6F2CC;
        --lime-green-light: #e4f7c2;
        /* Lighter lime green */
        --pink-red-light: #fcb2bf;
        /* Lighter pink-red */
        --pale-yellow-light: #fdfdd0;
        /* Lighter pale yellow */
        --dark-gray-light: #3c3c42;
        /* Lighter dark gray */
    }

.cta-button {
        padding: 10px 20px;
        font-size: 18px;
        background-color: var(--teal);
        border: none;
        border-radius: 0px;
        text-transform: uppercase;
        font-weight: bolder;
        margin: 20px;
    }

.cta-button:hover {
        background-color: var(--teal-light);
    }


/* Navbar Styles */
.navbar img {
    max-height: 72px;
    margin: 20px 0px;
}

.navbar a.nav-link {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
    transition: color 0.3s ease; /* Smooth hover effect */
}

.navbar a.nav-link:hover {
    color: var(--lime-green);
}

.navbar li.current a.nav-link {
    color: var(--teal);
}

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

/* Footer Styles */
footer {
    color: var(--pale-yellow);
    font-weight: bold;
    background-color: var(--teal);
}

.footer-links {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Display items inline */
    flex-wrap: wrap; /* Allow wrapping to the next line */
    justify-content: center; /* Center the links */
    gap: 10px; /* Add spacing between links */
}

.footer-links li {
    margin: 0; /* Remove default margin */
}

.footer-links a {
    text-decoration: none; /* Remove underline from links */
    color: var(--dark-gray);
    padding: 5px 10px; /* Add some padding for better clickability */
    transition: color 0.3s ease; /* Smooth hover effect */
}

.footer-links a:hover {
    color: var(--pale-yellow-light);
}

div#footerLogo {
    padding: 20px 60px;
}

footer .footerPrivacyPolicyLink {
    color: var(--pale-yellow);
}

/* Experiences Pages */
.experiencesTopText {
      padding: 50px 0;
      background-color: #f8f9fa; /* Light gray background */
      text-align: center;
      padding:40px;
    }
    .experiencesTopText .cta-preheadline {
        font-size: 20px;
        color: var(--pink-red);
        text-transform: uppercase;
        margin: 20px;
        font-weight: bold;
    }
    .experiencesTopText .cta-headline {
        font-size: 46px;
        font-weight: bold;
        margin: 20px;
        font-family: "Arima";
        font-size: 52px;
    }
    .experiencesTopText .cta-image img {
      max-width: 100%;
    }
    .experiencesDescription {
        margin:100px 0;
    }
    .experiencesDescription h2 {
        text-align: center;
        text-transform: uppercase;
        margin: 40px;
    }
    .experiencesDescriptionText {
        font-weight: bold;
        font-size: 18px;
    }
    .experiencesFlowChart h3 {
        font-size: 22px;
        text-transform: uppercase;
        margin: 20px 0px;
    }
    section.experiencesTestimonials {
        margin:100px 0;
    }
    section.experiencesExploreOtherEvents {
        margin:100px 0;
    }
    .experiencesExploreOtherEvents h2 {
        font-size: 20px;
        margin-bottom: 40px;
    }
    .experiencesExploreOtherEventsEvent {
        padding:20px 50px;
    }
    .experiencesExploreOtherEventsEvent p {
        margin: 20px 0px;
    }
    .experiencesPhotoCollage .collage-img {
        height: 360px; /* Set a consistent height for all images */
        object-fit: cover; /* Ensures the image scales proportionally and fills the height */
        width: 100%; /* Ensures the image spans the full width of its column */
    }
    section.experiencesLatestInfoCTA {
        background-color: var(--teal);
        text-align: center;
        color: var(--white);
        padding: 100px 0px;
    }
    section.experiencesLatestInfoCTA > h2 {
        font-family: 'Arima';
        font-size: 52px;
    }
    section.experiencesWhatExpect {
        margin:100px 0px;
    }
    .experiencesWhatExpect h3 {
        font-size: 24px;
    }
    .experiencesWhatExpect h1 {
        font-family: 'Arima';
        font-size: 52px;
        margin-bottom: 40px;
    }
    .experiencesBecomeGuide {
        padding: 50px 0; /* Add vertical padding to the section */
    }
    .experiencesBecomeGuide img {
        max-width: 100%; /* Ensure the image is responsive */
        height: auto; /* Maintain aspect ratio */
    }
    .experiencesBecomeGuide h1 {
        font-family: 'Arima';
        font-size: 52px;
    }