.page-content {
    margin-top: 50px; /* Adjust as necessary based on your navbar height */
    margin-left: auto;  /* Center the content */
    margin-right: auto;  /* Center the content */
    max-width: 100%;  /* Allow the content to stretch to the full width */
}

body {
    font-family: Heebo, "Trebuchet MS", "Segoe UI", sans-serif;
}



/* Center Content Styles */
.center-content {
  min-height: 100vh; /* Full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center vertically */
  align-items: center; /* Center horizontally */
  text-align: center; /* Center text */
}

/* Paragraph Styles */
p {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 20px; /* Space below */
}

/* Specific Styles for Logged Out State */
.logged-out .center-content {
  padding: 20px; /* Add padding */
}


.hide-text .hero-buttons {
  position: relative;
  top: -60px;  /* Adjust this value to move the button higher */
}
/* Button Styles */
.btn {
  font-size: 1em;
  padding: 1em 2em;
  text-decoration: none;
  background-color: #dfffd3;
  transition: background-color 0.3s ease, transform 0.2s ease;
  border: 2px solid #343a40;
  color: #000;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  margin: auto;
  margin-top: -80px;  /* Add this line to move the button up */
}

.btn:hover {
  transform: scale(1.05);
  background-color: #a7ff87;
  border-color: #495057;
  color: #000;
}


/* Hero Section Styles */
.hero-section {
  background: url('/static/images/background-image.jpg') no-repeat center center;
  background-size: cover; /* Ensures the image covers the entire container */
  color: #fff;
  padding: 90px 40px;
  text-align: center;
  border-radius: 8px;
  max-width: 100%;
  margin: 0 auto;
}

.hero-section h1 {
  font-size: 3.5rem;
  line-height: 1.2; /* Improve readability */
  margin-bottom: 0;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8);
  padding: 10px;
  color: #fff;
}

.hero-section p {
  font-size: 3rem;
  line-height: 1.2; /* Improve readability */
  word-break: keep-all; /* Prevent words from splitting */
  overflow-wrap: break-word; /* Alternative for wrapping */
  text-align: center; /* Aligns text in the center */
  margin-bottom: 50px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  padding: 10px;
  color: #fff;
}



/* Adjust hero section for mobile */
@media (max-width: 768px) {
  .hero-section {
    padding: 20px;  /* Reduce padding */
    margin-bottom: 0;  /* Remove bottom margin on mobile */
    min-height: 70vh;  /* Reduced from 100vh to 70vh */
    height: 70vh;  /* Match min-height */
    max-height: 80vh;  /* Allow some flexibility */
    background-size: cover;  /* Ensure it covers the area */
    background-position: center;  /* Keep it centered */
    background-attachment: scroll;  /* Prevent parallax effect */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .hero-section h1 {
    font-size: 3.5rem;  /* Slightly reduced heading size */
  }

  .hero-section p {
    font-size: 2.5rem;
  }

  .hide-text .hero-buttons {
    position: static;  /* Remove positioning */
    margin-top: 30px; /* Remove extra margin */
    margin-bottom: 20px; /* Add some space before calendar */
    width: 100%;
    text-align: center;
  }

  .hero-section.hide-text {
    min-height: auto; /* Allow height to adjust to content */
    height: auto; /* Remove fixed height */
    max-height: none; /* Remove max-height constraint */
    padding: 40px; /* Maintain some padding */
  }

  /* Ensure buttons are visible */
  .hero-buttons {
    display: block;
    width: 100%;
    text-align: center;
  }


}


.btn-hero {
    background-color: #6b4f36; /* Warm, rustic brown */
    color: #fff;
    font-size: 1.5em;
    padding: 15px 30px;
    border: 2px solid #3a2a1b; /* Darker brown border for depth */
    border-radius: 4px; /* Slightly rounded for a rugged look */
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Subtle shadow for 3D effect */
}

.btn-hero:hover {
    background-color: #7b5a40; /* Slightly lighter on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.7); /* Increase shadow on hover */
}





.features-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 30px; /* Increased padding */
    background-color: #000;

}

.feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px; /* Increased margin between features */
    width: 100%;
    max-width: 1400px; /* Increased max width */
    padding: 150px; /* Increased padding */
}

.feature .text {
    flex: 1;
    padding: 30px;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.8;
    position: relative;
    text-align: center;

}




.feature .text h3 {
    font-size: 3rem; /* Increased heading size */
    margin-bottom: 20px;
    color: #fff;
    font-weight: 800;
    text-align: left;  /* Keep heading centered */}

.feature .text h3 i {
    display: block;
    margin-bottom: 10px; /* Add some spacing between the icon and text */
    text-align: left; /* Center the icon */
}

.feature .text p {
    font-size: 1.5rem; /* Increased paragraph size */
    text-align: left;  /* Keep paragraph centered */
    color: rgba(160, 170, 186, 1);
}

.feature .image {
    flex: 1;
    padding: 30px; /* Increased padding */
}

.feature img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Increased border-radius slightly */
}

.feature.reverse {
    flex-direction: row-reverse;
}

/* New styles for hover effect on images */
.feature .image img {
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}

.feature .image img:hover {
    transform: scale(1.3); /* Enlarge the image slightly on hover */
}







.custom-calendar {
  background-color: #e9ecef;
  max-width: 100%;
  margin: 0 auto;
  font-size: 14px; /* Base font size */
  height: auto !important; /* Allow the calendar to adjust its height */
}

.custom-calendar .fc-toolbar-title {
  color: #000;
}









/* Responsive layout */
@media (max-width: 768px) {
    .feature {
        flex-direction: column;
        text-align: center;
    }

    .feature.reverse {
        flex-direction: column;
    }


}


/* Responsive styles for the calendar */
@media (max-width: 768px) {
  .custom-calendar {
    font-size: 11px; /* Even smaller font size for mobile */
  }

  .custom-calendar .fc-toolbar {
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5em;
  }

  .custom-calendar .fc-toolbar-title {
    font-size: 1.2em;
    margin-bottom: 0.3em;
  }

  .custom-calendar .fc-button {
    padding: 0.3em 0.5em;
    font-size: 0.9em;
  }

  .custom-calendar .fc-col-header-cell-cushion,
  .custom-calendar .fc-daygrid-day-number {
    padding: 1px;
  }

  .custom-calendar .fc-daygrid-event {
    font-size: 0.75em;
    padding: 0px 1px;
    margin-top: 1px;
  }

  .custom-calendar .fc-daygrid-day-events {
    margin-bottom: 0;
    min-height: 0 !important; /* Reduce minimum height of event containers */
  }

  .custom-calendar .fc-daygrid-body {
    width: 100% !important;
  }

  .custom-calendar .fc-scrollgrid-sync-table {
    width: 100% !important;
  }

  .custom-calendar .fc-dayGridMonth-view .fc-daygrid-body {
    max-height: calc(100vh - 100px); /* Adjust based on your layout */
  }

  .custom-calendar .fc-view-harness {
    height: auto !important;
  }

  .custom-calendar .fc-scroller {
    overflow: hidden !important; /* Prevent scrolling */
  }

  .custom-calendar .fc-daygrid-day {
    min-height: 1.5em; /* Reduce minimum height of day cells */
  }

  .custom-calendar .fc-daygrid-day-frame {
    min-height: 1.5em; /* Reduce minimum height of day frames */
  }

  /* Hide "more" link if there are too many events */
  .custom-calendar .fc-daygrid-more-link {
    display: inline  !important;
  }
}





.calendar-section {
  margin-bottom: 70px; /* Add space below the calendar */
  margin-top: -100px;  /* Add negative top margin to move it up */
}

@media (max-width: 768px) {
  .calendar-section {
    margin-top: 0px; /* Add more top margin to push down */
    margin-bottom: 20px; /* Adjust the bottom margin as needed */
  }
}





/* Testimonials Section Styles */
.testimonials-section {
  margin-top: 100px;
  background-color: #000;
  padding: 40px 20px;
  text-align: center;
}

.testimonials-section h2 {
  color: #fff;
  font-size: 3rem;
  margin-bottom: 60px;
  margin-top: 80px;
  font-weight: 800;
}

.testimonials-container {
  position: relative;
  overflow: hidden;
  height: auto; /* Adjust height to fit your content */
  margin-bottom: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 300px;

}

.testimonial {
  position: absolute;
  opacity: 0;
  transform: translateX(100%);
  width: 100%;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* The active testimonial */
.testimonial.active {
  opacity: 1;
  transform: translateX(0);
  position: relative; /* Make sure active testimonials are in the flow */
}

/* Styling for testimonial text */
.testimonial p {
  font-size: 1.2rem;
  color: #fff;
}

.testimonial p:last-child {
  font-style: italic;
  color: #fff;
}



.testimonial-nav {
  position: absolute;
  bottom: 10px; /* Position buttons at the bottom */
  font-size: 2rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.testimonial-nav.left {
  left: 10px; /* Position left button */
}

.testimonial-nav.right {
  right: 10px; /* Position right button */
}

.testimonial-nav:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: #21cf99; /* Using your green brand color */
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(33, 207, 153, 0.5);
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}






/* Hide Text Styles for Logged In Users */
.hide-text h1,
.hide-text p {
  display: none;
}

/* No Background for Logged In Users */
.no-background {
  background: #000; /* No background image */
}

/* Ensure buttons are visible even when text is hidden */
.hide-text .hero-buttons {
  display: block; /* Ensure buttons are visible */
}






.notes-section {
    margin: 20px;
}

.notes-list {
    list-style-type: none; /* Removes the default bullet points */
    padding: 0; /* Removes default padding */
}

.note-item {
    margin-bottom: 10px; /* Space between notes */
    position: relative;
    padding: 10px;
    border: 1px solid #ddd; /* Optional: adds a border around each note */
    border-radius: 4px; /* Optional: rounds the corners of the border */
    background-color: #f9f9f9; /* Optional: background color for the note */
}

.note-item a {
    margin-left: 10px; /* Space between the note text and the links */
    text-decoration: none; /* Removes underline from links */
    color: #007bff; /* Link color */
}

.note-item a:hover {
    text-decoration: underline; /* Underline on hover */
}


.text p {
    white-space: normal; /* Allows line wrapping */
    word-break: keep-all; /* Prevents breaking words at hyphens */
}

@media (max-width: 768px) {
    .text {
        max-width: 100%; /* Prevent it from overflowing */
        margin: 0 auto; /* Center-align within its parent */
    }
}

.cta-content {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Vertically center items */
    justify-content: center; /* Center items horizontally */
    gap: 20px; /* Space between items */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    max-width: 100%;
    }

.cta-content h2 {
    white-space: nowrap; /* Prevents the text from wrapping to the next line */
    font-size: 1.8rem; /* Adjust as necessary */
    line-height: 1.2; /* Tighter line spacing */
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: center;
    margin: 0 auto; /* Center within parent */
}




.cta {
    margin-top: 8rem; /* Add top margin to create more space */
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.9), rgba(0, 0, 0, 0.9)); /* Added gradient for depth */    color: #fff; /* White text for readability */
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); /* Deeper shadow for depth */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle light border for definition */
    border-radius: 30px; /* Adjust the value for more or less roundness */
    text-align: center; /* Centered content */
    width: 100%; /* Ensure full width */
    max-width: 100%; /* Prevent horizontal overflow */
    box-sizing: border-box; /* Include padding in width calculations */
    word-wrap: break-word; /* Allow long words to break */
    overflow-wrap: break-word; /* Modern alternative to word-wrap */
    hyphens: auto; /* Enable hyphenation for better text fitting */
}



.cta h2 {

    font-size: 2.2rem; /* Increase font size for the heading */
    margin-bottom: 20px; /* Space below the heading */
    font-weight: bold; /* Make the heading bold */
    line-height: 1.5; /* Improved readability */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%; /* Ensure heading doesn't overflow */
    width: 100%;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Added space between the buttons */
}

.cta p {
    font-size: 1.2rem; /* Font size for paragraph text */
    line-height: 1.5; /* Line height for readability */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%; /* Prevent paragraph from overflowing */
    width: 100%;
}

.cta a {
    text-decoration: none; /* Ensure no underline */
}

.cta a:hover {
}

.btn-cta {
    background-color: #ff5733; /* Change to your desired background color */
    color: white; /* Change text color */
    border: none; /* Remove default border */
    border-radius: 8px; /* Add rounded corners */
    padding: 15px 30px; /* Adjust padding */
    font-size: 18px; /* Change font size */
    cursor: pointer; /* Show pointer on hover */
    transition: all 0.3s ease; /* Smooth transition */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

.btn-cta:hover {
    background-color: #c0392b; /* Darker shade on hover */
    transform: scale(1.05); /* Slight scaling effect on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); /* Stronger shadow on hover */
}


@media (max-width: 768px) {

    .cta p {
        font-size: 1.5rem; /* Smaller paragraph text */
        line-height: 1.4;
    }



    .btn-cta {
        padding: 10px 15px; /* Smaller button size */
        font-size: 14px; /* Smaller button text */
    }

    /* Additional adjustments to other sections as necessary */
    .page-content {
        margin-top: 40px; /* Reduce the margin-top if needed */
    }

    .feature .text h3 {
    font-size: 2.5rem; /* Increased heading size */
    }

    .feature {
    padding: 10px; /* Increased padding */
    }
}

/* MAKE SURE NAV IS IN MIDDLE ON MOBILE */
@media (max-width: 768px) {
    .page-content {
        box-sizing: border-box;
        overflow-x: hidden; /* Prevent horizontal scrolling */
        width: 100%; /* Ensure full width */
        margin: 0; /* Remove any side margins */
        padding: 0 10px; /* Add some light side padding */
    }

    .cta {
        height: auto;
        margin-top: 0; /* Add top margin to create more space */
        padding: 40px 20px; /* Less padding on mobile */
        width: 100%; /* Full width */
        max-width: 100%; /* No overflow */
        box-sizing: border-box; /* Include padding in width calculation */
        word-wrap: break-word; /* Allow long words to break */
        overflow-wrap: break-word;
    }

    .cta h2 {
        font-size: 1.5rem; /* Smaller font size */
        word-wrap: break-word; /* Allow long words to break */
        overflow-wrap: break-word;
        max-width: 100%; /* Ensure full width */
        hyphens: auto; /* Enable hyphenation */
    }

    .cta-content {
        display: flex; /* Use flexbox for alignment */
        flex-direction: column; /* Stack items vertically */
        justify-content: center; /* Center vertically */
        align-items: center; /* Center horizontally */
        text-align: center; /* Center text */
        padding: 0; /* Remove extra padding if present */
        gap: 10px; /* Optional: Adjust spacing between elements */
        width: 100%; /* Ensure full width */
    }

    .cta-content h2 {
        white-space: normal; /* Allow wrapping on mobile */
        font-size: 1.5rem; /* Smaller font size */
        line-height: 1.4; /* Slightly looser line spacing */
        word-wrap: break-word; /* Break long words */
        overflow-wrap: break-word;
    }


}



.value-box {
    color: rgba(160, 170, 186, 1);
    padding: 5px;
    text-align: center;
    margin-bottom: 20px;
    min-width: 0;
}

.about-philosophy h2 {
    font-size: 2.2rem !important;
    margin-bottom: 40px;
    padding-bottom: 10px;
}

.value-box h3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 2rem;
}

.value-box h3 i {
    margin-bottom: 10px;
    font-size: 2rem; /* Adjust size as needed */
}


.value-box p {
    font-size: 1.2em;
    color: rgba(160, 170, 186, 1);

}

.philosophy-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px; /* Space between boxes */
}

.value-box {
    flex-basis: calc(50% - 20px); /* Two boxes per row with gap */
    max-width: 400px; /* Optional: limit maximum width */
}

@media (max-width: 768px) {
    .value-box {
        flex-basis: 100%; /* Full width on smaller screens */
    }
    .philosophy-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Space between boxes */
}
}