/* trip and activity styling */
.trip {
  background-color: #E9E2D8;
}

.activity {
  background-color: #9cb691;
}

/* Styling for trip and activity titles */
.trip-title, .activity-title {
  color: #363636;
  text-decoration: none;
  font-weight: bold;
}

.trip-time, .activity-time {
  color: #5c5c5c;
}

/* Calendar container styling */
.calendar {
  background-color: #DACCB1;
  padding: 10px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Hover effects for trip/activity boxes */
.trip:hover, .activity:hover {
  transform: scale(1.05);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

/* Today link styling */
.today-link {
  position: relative;
  top: -10px;
  color: #40402e;
  text-decoration: none;

  display: block;
  text-align: center;
  transition: color 0.3s ease;
}

.today-link:hover {
  color: #928c73;
}

/* Styling for the today calendar container */
.calendar-today-container {
  text-align: center;
  margin-top: 10px;
}

.calendar-heading {
  display: flex;
  align-items: center; /* Vertically center the items */
  justify-content: center; /* Horizontally center the items */
}

.prev-link-container, .next-link-container {
  display: flex;
  align-items: center; /* Vertically center the arrows */
}
footer.footer-custom {
  background-color: #403f2b;
  color: #E9E2D8;
  text-align: center;
  padding: 1rem;
  margin-top: auto;
}

.footer-custom a[href^="mailto:"] {
  color: #E9E2D8 !important; 
  text-decoration: none; 
}
.footer-custom a[href^="mailto:"]:hover {
  text-decoration: underline; /* Underline email on hover */
}

.footer-custom i {
  color: #E9E2D8;
}


.become-member {
  color: #E9E2D8 !important;
  border-color:  #E9E2D8 !important;
  background-color: transparent !important;
}

.become-member:hover {
  background-color: transparent !important;
  border-color: #daccb1 !important;
  color: #daccb1 !important;
}
/* Navbar Styles */
.navbar {
  --main-color: #403f2b; /* Dark color for logo and text */
  --accent-color: #daccb1; /* Light color for contrast */
  background-color: var(--accent-color) !important; /* Lighter background for navbar */
}

.navbar .nav-item .nav-link {
  color: var(--main-color) !important;
  margin-right: 1rem; /* Add space between links */
  white-space: nowrap;
}

/* Font Definition */
@font-face {
    font-family: 'phosphateinline';
   src: url(/assets/phosphateinline-61624d66d8ebd7eff196bd3bf759bafc4b17479a2b628ce99b36c916e4ae9ab9.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.navbar-brand {
  font-family: 'phosphateinline', sans-serif; 
  font-size: clamp(1.5rem, 3vw, 4rem)!important;
  color: var(--main-color) !important;
}


.navbar-brand img {
   height: calc(3vw + 15px); /* 10% of the viewport width */
}

/* Navbar Toggler */
.navbar-toggler {
  border-color: var(--main-color) !important;
  display: block;
  margin: 0 auto; /* Centers it horizontally */
}

.navbar-toggler-icon {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"%3E%3Cpath stroke="%23403F2B" stroke-width="1" d="M4 7h22M4 15h22M4 23h22" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') !important;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  border: none !important; /* Optional: Customize the border here */
  box-shadow: none !important; /* Removes the thick shadow effect */
}

/* Dropdown Menu */

.dropdown-menu {
  position: absolute !important;
  top: 100% !important;  /* Ensures it appears below the button */
  left: 0;
  z-index: 1050; /* Ensures it appears above other elements */
  display: none; /* Keeps it hidden by default */
}

.dropdown-item {
  color: var(--main-color) !important;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (max-width: 768px) { /* Adjust breakpoint if needed */
  .dropdown-menu {
    right: auto !important; /* Resets the end alignment */
    left: 0 !important; /* Aligns it normally */
  }
}

.dropdown-toggle:focus, .dropdown-toggle:active {
  outline: none !important;
  box-shadow: none !important;
}

.dropdown-item:hover,
.dropdown-item.active {
  background-color: var(--accent-color) !important;
  color: var(--main-color) !important; /* Light text on hover */
}

/* Donate Button */
#donate {
  font-size: inherit; /* Match .lead font size */
  color: #daccb1 !important;
  background-color: #57573f !important;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}
/* Media Query for Large Screens */
@media (min-width: 1400px) {
  .container {
    max-width: 1400px; /* Limit container width for very large screens */
  }
}

/* Custom Danger Button */
.custom-danger-btn {
  background-color: red;
  color: white;
  padding: 6px 12px;
  border: none;
  margin-top: 5px;
  font-size: 14px;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: center;
}
.testimonial-card-container {
    display: flex;
    justify-content: center;
}

.testimonial-card {
    background-color: #c6c3a3;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-content {
    height: 200px; 
  }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */


/* Ensure full height layout */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: #e9e2d8 !important;
    color: #403f2b !important;
    overflow-y: auto;
  }
  
  /* Main content should expand to push the footer down */
  .main-content {
    flex: 1;
  }
  
  /* Primary button styling */
  .btn-primary {
    background-color: #403f2b !important; /* Dark Brown */
    color: #e9e2d8 !important; /* Light Beige */
    border: none !important;
  }
  
  #galleryCarousel .carousel-inner {
    width: 100%; /* Set the width of the carousel container */
    height: 1000px; /* Set the desired height for the carousel */
    overflow: hidden; /* Ensure the overflow is hidden */
  }
  
  #galleryCarousel .carousel-item {
    width: 100%;
    height: 100%;
  }
  
  #galleryCarousel .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container without distortion */
  }
  
  @media (max-width: 767.98px) {
    #galleryCarousel .carousel-inner {
      height: 300px; /* Adjust height for mobile screens */
    }
  }

  /* Trip and Activity image styling */
  .item-image-preview {
    height: 500px;
    display: block;
    margin: 0 auto; /* Centers the image */
    object-fit: cover; /* Ensures consistent sizing without distortion */
  }
  
  /* Devise login page background */
  .devise-login-page {
    background-color: #ffffff !important;
    min-height: 100vh; 
    height: auto;
  }
  
  .btn-outline-primary{
    border-color: #090804 !important;
    color: #403F2B !important;
  }

  .about p {
    margin-bottom: 30px;
    line-height: 2;
    text-align: center;
}
  h4.card-title a {
    color: #403F2B;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  h4.card-title a:hover {
    color: #57573F;
  }

  .card-text,
  .card-title,
  .card-body .fa-calendar-alt, 
  .card-body .fa-map-marker-alt, 
  .card-body .fa-money-bill {
    color: #403f2b !important;
  }
  
  .custom-accordion .accordion-button {
    background-color: #daccb1; 
    color:#403f2b;
  }
  
  .custom-accordion .accordion-button:not(.collapsed) {
    background-color: #daccb1; 
    color:#403f2b;
  }
  
  .custom-accordion .accordion-body {
    background-color: #fff; 
  }

  /* Remove blue color for inactive tabs under #activity-tabs */
  #trip-tabs .nav-link,
  #activity-tabs .nav-link,
  #event-tabs .nav-link {
  color: #403f2b !important; /* Set your preferred color for inactive tabs */
}

/* Default form styles */
.form-container {
  border: 2px solid #808080;
  padding: 15px;
  border-radius: 5px;
  width: 100%; /* Full width by default */
}

/* Medium screens (Tablets, 768px and up) */
@media (min-width: 768px) {
  .form-container {
    max-width: 500px; /* Slightly larger */
    padding: 20px;
  }
}

/* Large screens (Desktops, 992px and up) */
@media (min-width: 992px) {
  .form-container {
    max-width: 600px; /* More width on bigger screens */
    padding: 25px;
  }
}

/* Extra large screens (1200px and up) */
@media (min-width: 1200px) {
  .form-container {
    max-width: 650px; /* Even wider for large screens */
    padding: 30px;
  }
}

.input-group{
  flex-wrap: wrap;
}
.country-code-select {
  max-width: 90px; 
}
.media-image-preview,
#leader-image{
  height: 500px; /* Fixed height for all images */
  object-fit: cover;
}
.simple-calendar {
  table {
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgb(221, 221, 221);
    border-collapse: collapse;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }

  tr {
    border-collapse: collapse;
  }

  th {
    padding: 6px;
    border-bottom: 2px solid rgb(221, 221, 221);
    border-collapse: collapse;
    border-left: 1px solid rgb(221, 221, 221);
    border-right: 1px solid rgb(221, 221, 221);
    border-top: 0px none rgb(51, 51, 51);
    box-sizing: border-box;
    text-align: left;
  }

  td {
    padding: 6px;
    vertical-align: top;
    width: 14%;

    border: 1px solid #ddd;
    border-top-color: rgb(221, 221, 221);
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: rgb(221, 221, 221);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgb(221, 221, 221);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgb(221, 221, 221);
    border-left-style: solid;
    border-left-width: 1px;
  }

  .calendar-heading nav {
    display: inline-block;
  }

  .day {
    height: 80px;
  }

  .wday-0 {}
  .wday-1 {}
  .wday-2 {}
  .wday-3 {}
  .wday-4 {}
  .wday-5 {}
  .wday-6 {}

  .today {
    background: #FFFFC0
  }

  .past {}
  .future {}

  .start-date {}

  .prev-month {
    background: #DDD;
  }
  .next-month {
    background: #DDD;
  }
  .current-month {}

  .has-events {}
}