@charset "utf-8";
.card-img-top {
    height: 100%;
    object-fit: cover;
    /* Or 'contain' depending on your preference */
}

.FancyFont {
  font-family: 'Raleway', sans-serif;
}

.FancyFontSmall {
  font-family: 'Raleway', sans-serif;
  font-size: 0.8em;
}

.FancyFontLarge {
  font-family: 'Raleway', sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}



/* --- Custom Styles (load AFTER Bootstrap CSS) --- */

.btn-info {
--bs-btn-color: #000000;
--bs-btn-bg: #f6f6f6;
--bs-btn-border-color: #f6f6f6;
--bs-btn-hover-color: #ffffff;         
--bs-btn-hover-bg: #000000;            
--bs-btn-hover-border-color: #000000; 
--bs-btn-active-color: #ffffff;        
--bs-btn-active-bg: #000000;          
--bs-btn-active-border-color: #000000;
--bs-btn-disabled-color: #6c757d; 
--bs-btn-disabled-bg: #ffffff;   
--bs-btn-disabled-border-color: #adb5bd;

/* --- Focus Shadow (MODIFIED - Optional, but recommended for consistency) --- */
/* Update shadow to match the hover color (danger red rgb is 220, 53, 69) */
--bs-btn-focus-shadow-rgb: 220, 53, 69;
}

    /* Hide the indicators by default */
    #breakpoint-indicator {
        position: fixed;
        top: 0;
        left: 0;
        padding: 5px;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        z-index: 1000;
        /* Ensure it's on top of everything */
      }
  
      /* Make hidden the default */
      .breakpoint {
        display: none;
      }
  
      /* Now show what size */
  
      /* xs */
      .breakpoint.xs {
        display: block;
      }
  
      /* sm */
      @media (min-width: 576px) {
        .breakpoint.sm {
          display: block;
        }
      }
  
      /* md */
      @media (min-width: 768px) {
        .breakpoint.md {
          display: block;
        }
      }
  
      /* lg */
      @media (min-width: 992px) {
        .breakpoint.lg {
          display: block;
        }
      }
  
      /* xl */
      @media (min-width: 1200px) {
        .breakpoint.xl {
          display: block;
        }
      }
  
      /* xxl */
      @media (min-width: 1400px) {
        .breakpoint.xxl {
          display: block;
        }
      }
         /* Container for the image, handles alignment and padding */
        .image-wrapper {
            float: left;
            padding-right: 5px;
            /* Transparent padding to the right of the image */
            max-width: 40%;
            /* Default max width for small/medium screens */

        }
        /* Container for the image, handles alignment and padding */
        .image-wrapper2 {
            float: left;
            padding-right: 5px;
            /* Transparent padding to the right of the image */
            max-width: 40%;
            /* Default max width for small/medium screens */

        }
        
        /* Container for the image, handles alignment and padding */
        .image-wrapper2r {
            float: right;
            padding-left: 5px;
            /* Transparent padding to the right of the image */
            max-width: 40%;
            /* Default max width for small/medium screens */

        }

        /* Define the image styles */
        .responsive-image {
            /* These are not strictly necessary as Bootstrap's classes handle them, 
     but adding them explicitly helps clarity */
            max-width: 100%;
            height: auto;
        }

        /* Media query to adjust max-width for large screens and above */
        @media (min-width: 992px) {

            /* Bootstrap's 'lg' breakpoint */
            .image-wrapper {
                max-width: 50%;
                /* Max width for large and extra-large screens */
            }
            .image-wrapper2 {
                max-width: 35%;
                /* Max width for large and extra-large screens */
            }
        }

.headline {
background-image: linear-gradient(to top, black, rgba(0, 0, 0, 0.331)); /* Black gradient */
color: white;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 1.5em;
padding: 0.1em; /* Add some padding for readability */
text-align: center; /* Center the text */
width: 100%; /* Make the headline fit the width of its container */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
margin: 0;       /* Reset default margin */
}
.headlineSM {
background-image: linear-gradient(to top, black, rgba(0, 0, 0, 0.331)); /* Black gradient */
color: white;
font-family: 'Raleway', sans-serif;
font-weight: bold;
text-align: center; /* Center the text */
width: 100%; /* Make the headline fit the width of its container */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
margin: 0;       /* Reset default margin */
}

.topheadline { /* For Trip Pages */
/* Fading from solid black on the left to transparent on the right */
background: linear-gradient(to right, white, transparent);
color: black;           /* Or #FFFFFF */
text-align: left;     /* Centers the text horizontally */
width: 100%;            /* Ensures it takes the full width of its parent container */
box-sizing: border-box; /* Ensures padding and border don't add to the total width */
font-family: 'Raleway', sans-serif;
font-variant: small-caps; /* Makes the text appear in small caps */
font-size: 2em;       /* Optional: Makes the text a bit larger */
font-weight: bold;      /* Optional: Makes the text bold */
border-radius: 8px;
}