/* Color Scheme Variables */

:root {

    --primary-color: #008080; /* Deep Teal */

    --secondary-color: #FF7F50; /* Bright Coral */

    --accent-color: #ADD8E6; /* Light Sky Blue */

    --text-color: #2F4F4F; /* Dark Slate Gray */

    --bg-light: #F8F9FA;

    --white: #FFFFFF;

    --dark-footer-bg: #2c3e50; /* Darker shade for footer */

}



body {

    font-family: 'Open Sans', sans-serif; /* A clean, modern sans-serif font */

    color: var(--text-color);

    line-height: 1.7;

}



h1, h2, h3, h4, h5, h6 {

    font-family: 'Montserrat', sans-serif; /* A slightly more stylized font for headings */

    font-weight: 700;

    color: var(--primary-color);

}

h2 {

    margin-bottom: 0.8rem;

}



/* Navbar Styling */

.navbar {

    background-color: var(--primary-color);

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}



.navbar-brand {

    font-weight: bold;

    font-size: 1.5rem;

    color: var(--white) !important;

}

.navbar-brand i {

    color: var(--secondary-color);

}



.navbar-nav .nav-link {

    color: rgba(255, 255, 255, 0.85) !important;

    font-weight: 500;

    padding: 0.8rem 1rem;

    transition: color 0.3s ease;

}



.navbar-nav .nav-link:hover,

.navbar-nav .nav-link.active {

    color: var(--white) !important;

    background-color: rgba(255, 255, 255, 0.1);

    border-radius: 5px;

}

.navbar-toggler {

    border-color: rgba(255,255,255,0.3);

}

.navbar-toggler-icon {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}





/* Hero Section Styling */

.hero-section {

    background: linear-gradient(rgba(0, 128, 128, 0.7), rgba(47, 79, 79, 0.8)), url('https://via.placeholder.com/1920x1080/cccccc/969696?Text=Inspiring+Travel+Background') no-repeat center center;

    background-size: cover;

    min-height: 80vh; /* Adjusted for better viewing */

    padding: 6rem 0;

    color: var(--white);

}

.hero-section h1 {

    color: var(--white);

    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

}

.hero-section .lead {

    font-size: 1.4rem;

    font-weight: 300;

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

}



/* Page Header (for other pages) */

.page-header-sm {

    background: linear-gradient(rgba(0, 128, 128, 0.75), rgba(47, 79, 79, 0.85)), url('https://via.placeholder.com/1920x600/cccccc/969696?Text=Page+Header+Background') no-repeat center center;

    background-size: cover;

    min-height: 40vh;

    padding: 4rem 0;

    color: var(--white);

}

.page-header-sm h1 {

    color: var(--white);

    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);

}



/* Button Styling */

.btn-primary-custom {

    background-color: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--white);

    padding: 0.6rem 1.2rem;

    font-weight: 500;

    transition: all 0.3s ease;

}

.btn-primary-custom:hover {

    background-color: #006666; /* Darker teal */

    border-color: #006666;

    color: var(--white);

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0,0,0,0.15);

}



.btn-secondary-custom {

    background-color: var(--secondary-color);

    border-color: var(--secondary-color);

    color: var(--white);

    padding: 0.6rem 1.2rem;

    font-weight: 500;

    transition: all 0.3s ease;

}

.btn-secondary-custom:hover {

    background-color: #E5673C; /* Darker coral */

    border-color: #E5673C;

    color: var(--white);

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0,0,0,0.15);

}



.btn-outline-light {

    border-color: var(--white);

    color: var(--white);

}

.btn-outline-light:hover {

    background-color: var(--white);

    color: var(--primary-color);

}

.btn-outline-primary-custom {

    border-color: var(--primary-color);

    color: var(--primary-color);

}

.btn-outline-primary-custom:hover {

    background-color: var(--primary-color);

    color: var(--white);

}





/* Section Styling */

.section-bg-light {

    background-color: var(--bg-light);

}



/* Card Styling */

.card {

    border: none;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;

}

.card-title {

    color: var(--primary-color);

}



.feature-card .feature-icon {

    width: 70px;

    height: 70px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1rem; /* Added margin */

}

.feature-card .feature-icon i {

    color: var(--white); /* Default icon color */

}

.bg-primary-custom .feature-icon i {

    color: var(--white); /* Ensure white for primary bg */

}

.bg-secondary-custom .feature-icon i {

    color: var(--white); /* Ensure white for secondary bg */

}



.destination-card img {

    height: 200px;

    object-fit: cover;

}

.destination-card .card-body {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.testimonial-card {

    border-left: 5px solid var(--secondary-color);

}

.testimonial-card .card-body p {

    font-size: 1.05rem;

}

.text-secondary-custom {

    color: var(--secondary-color) !important;

}



.info-card .info-icon i {

    color: var(--primary-color); /* Default icon color for info cards */

}

.info-card .info-icon.text-secondary-custom i {

    color: var(--secondary-color); /* If icon specifically needs secondary */

}





/* Accordion Styling */

.accordion-button {

    color: var(--text-color);

    background-color: var(--bg-light);

}

.accordion-button:not(.collapsed) {

    color: var(--primary-color);

    background-color: #e7f3f3; /* Lighter shade of primary for active accordion */

    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);

}

.accordion-button:focus {

    box-shadow: 0 0 0 0.25rem rgba(0, 128, 128, 0.25); /* Focus ring with primary color */

}

.accordion-button.fw-semibold {

    font-weight: 600 !important;

}



/* Contact Page Specific */

.contact-card {

    border-top: 5px solid var(--primary-color);

}

.email-highlight a {

    font-weight: bold;

    color: var(--secondary-color) !important;

    text-decoration: none;

    border-bottom: 2px dotted var(--secondary-color);

    transition: color 0.3s ease, border-bottom-color 0.3s ease;

}

.email-highlight a:hover {

    color: var(--primary-color) !important;

    border-bottom-color: var(--primary-color);

}



/* Partner Page Specific */

.link-primary-custom {

    color: var(--primary-color);

    font-weight: 500;

}

.link-primary-custom:hover {

    color: #006666; /* Darker teal */

}



/* Footer Styling */

.footer-bg {

    background-color: var(--dark-footer-bg); /* Using a darker shade for distinction */

    color: rgba(255, 255, 255, 0.8);

}

.footer-bg h5 {

    color: var(--white);

    margin-bottom: 1rem;

}

.footer-link {

    color: rgba(255, 255, 255, 0.7);

    text-decoration: none;

    transition: color 0.3s ease;

}

.footer-link:hover {

    color: var(--secondary-color);

}

.footer-link i.bi {

    transition: color 0.3s ease;

}

.footer-link:hover i.bi {

    color: var(--secondary-color);

}

.footer-bg hr {

    border-top: 1px solid rgba(255,255,255,0.2);

}



/* Utility Classes */

.text-primary-custom {

    color: var(--primary-color) !important;

}



.bg-primary-custom {

    background-color: var(--primary-color) !important;

}

.bg-secondary-custom {

    background-color: var(--secondary-color) !important;

}





/* Benefit Card (Why Travel Page) Specifics */

.benefit-card img {

    object-fit: cover;

    height: 100%; /* Ensure image covers the height of its column */

}

@media (max-width: 767.98px) { /* On smaller screens, stack image on top */

    .benefit-card .row > div[class^="col-md-"] {

        flex-basis: 100%; /* Make columns full width */

    }

    .benefit-card img {

        height: 250px; /* Fixed height for stacked image */

        width: 100%;

        border-radius: 0.375rem 0.375rem 0 0 !important; /* Adjust rounding for top image */

    }

     .benefit-card .card-body {

        border-radius: 0 0 0.375rem 0.375rem;

    }

}



/* Ensure Bootstrap icons are vertically aligned well with text */

.bi {

    vertical-align: -0.125em; /* Default Bootstrap alignment, adjust if needed */

}



/* Responsive iframe for maps if you add them */

.map-responsive {

    overflow: hidden;

    padding-bottom: 56.25%; /* 16:9 aspect ratio */

    position: relative;

    height: 0;

    border-radius: 0.375rem;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}

.map-responsive iframe {

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    position: absolute;

    border: 0;

}



/* Index Page - Mountain Photo Section */

.mountain-photo-section img {

    max-width: 100%;

    height: auto;

    border-radius: 0.5rem;

    box-shadow: 0 4px 15px rgba(0,0,0,0.2);

}



.mountain-photo-section .content-column {

    display: flex;

    flex-direction: column;

    justify-content: center;

}



/* Past Trips Page - Thumbnail Gallery */

.trip-gallery-section h3 {

    color: var(--primary-color);

    margin-bottom: 1.5rem;

    border-bottom: 2px solid var(--secondary-color);

    padding-bottom: 0.5rem;

    display: inline-block;

}



.thumbnail-gallery .col {

    margin-bottom: 1rem; /* Add some space below each thumbnail column */

}



.thumbnail-link {

    display: block;

    width: 100%;

    padding-top: 100%; /* Creates a square aspect ratio container */

    position: relative;

    overflow: hidden;

    border-radius: 0.375rem;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.thumbnail-link:hover {

    transform: scale(1.05);

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

}



.thumbnail-link img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover; /* Ensures the image covers the square, cropping if necessary */

}



.modal-lg-custom {

    max-width: 80%; /* Adjust as needed for larger image display */

}

@media (min-width: 992px) { /* For lg breakpoints and up */

    .modal-lg-custom {

        max-width: 70%;

    }

}

@media (min-width: 1200px) { /* For xl breakpoints and up */

     .modal-lg-custom {

        max-width: 900px; /* A fixed max-width for very large screens */

    }

}



.modal-body img {

    max-width: 100%;

    height: auto;

    display: block;

    margin: 0 auto;

    border-radius: 0.375rem;

}

.modal-header .btn-close {

    filter: invert(1) grayscale(100%) brightness(200%); /* Makes close button white for dark headers */

}





/* About Me Page */

.about-me-header {

    background: linear-gradient(rgba(0, 128, 128, 0.7), rgba(47, 79, 79, 0.8)), url('https://via.placeholder.com/1920x500/cccccc/969696?Text=Guelph+Scenic+Background') no-repeat center center;

    background-size: cover;

    min-height: 40vh;

    color: var(--white);

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}

.about-me-header h1, .about-me-header p {

    color: var(--white);

}

.profile-image-wrapper {

    max-width: 250px; /* Control max size of profile image */

    margin: 0 auto 1.5rem auto; /* Center and add space below */

}

.profile-image-wrapper img {

    border-radius: 50%; /* Circular profile image */

    border: 5px solid var(--secondary-color);

    box-shadow: 0 4px 10px rgba(0,0,0,0.15);

}

.about-content blockquote {

    border-left: 4px solid var(--accent-color);

    padding-left: 1rem;

    font-style: italic;

    color: #555;

    margin: 1.5rem 0;

}



/* Adding Google Fonts links in CSS (alternative to HTML head) */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Open+Sans:wght@300;400;600;700&display=swap');