/* Itinerary Css */
.itenery {
display: flex;
background-color: rgb(255, 255, 255);
width: fit-content;
height: fit-content;
justify-content: space-around;
gap: 10%;
}
.filter {
background-color: #ffffff;
width: 15rem;
height: 100%;
margin-left: 3%;
display: flex;
flex-direction: column;
gap: 1rem; /* Equal gap between sections */
}
.inner2-filter,
.inner3-filter,
.inner4-filter {
width: 15rem;
height: 12rem; /* Decreased height */
background-color: #ffffff;
display: flex;
flex-direction: column;
padding: 10px;
box-sizing: border-box;
}
.inner-filter {
width: 15rem;
height: fit-content;
}
.scroll-container {
background-color: inherit;
overflow-y: auto; /* Allow scroll when content overflows */
flex-grow: 1; /* Ensures scroll container fills available space */
height: 200px; /* Set a fixed height */
}
/* Custom Scrollbar for WebKit-based browsers */
.scroll-container::-webkit-scrollbar {
width: 8px; /* Scrollbar width */
}
.scroll-container::-webkit-scrollbar-track {
background: #f1f1f1; /* Background of the scrollbar track */
}
.scroll-container::-webkit-scrollbar-thumb {
background: #888; /* Scrollbar thumb color */
border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* General styles */
.filter {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.inner-filter {
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.inner h6 {
font-size: 18px;
margin-bottom: 10px;
font-weight: bold;
color: #333;
}
.inner-filter ul {
list-style: none;
padding: 0;
margin: 0;
}
.inner-filter ul li {
margin: 5px 0;
}
.inner-filter ul li a {
text-decoration: none;
color: #333;
font-size: 16px;
padding: 5px;
display: inline-block;
transition: color 0.3s, background-color 0.3s;
}
.inner-filter ul li a:hover {
color: white;
background-color: orange;
border-radius: 5px;
}
.ITINERARY {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: fit-content;
margin-right: 5%;
width: 80rem;
background-color: rgb(255, 255, 255);
}
.container {
display: flex;
width: 100%;
height: 100%;
background: #ffffff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.scrollspy-container {
width: 150px;
background: rgb(255, 166, 0);
color: #ffffff;
padding: 10px;
margin-right: 20px;
}
.scrollspy-container ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.scrollspy-container a {
color: #000000;
text-decoration: none;
padding: 5px;
display: block;
}
.scrollspy-container a.active {
background: white;
}
.content {
flex: 1;
}
.section {
display: none; /* Hide all sections by default */
padding: 20px;
height: 100%;
border: 1px solid #ffffff;
}
.section.active {
display: block; /* Show the active section */
}
.cardtime-container {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
padding: 20px;
}
.cardtime-text {
flex: 1;
padding-right: 20px;
}
.cardtime-image {
flex: 1;
position: relative;
}
.cardtime-image img {
width: 100%;
height: auto;
display: block;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.itenery {
flex-wrap: wrap; /* Allow wrapping */
gap: 2rem;
}
.filter,
.inner-filter,
.inner2-filter,
.inner3-filter,
.inner4-filter {
width: 100%; /* Full width for filters */
margin: 0 auto;
}
.ITINERARY {
width: 100%; /* Full width for the itinerary */
}
.container {
flex-direction: column; /* Stack vertically */
}
.scrollspy-container {
width: 100%;
margin-right: 0;
margin-bottom: 20px;
}
.cardtime-container {
flex-direction: column; /* Stack text and image */
}
.cardtime-image {
display: block; /* Show image */
}
}
/* Cards */
.packages-card {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #fff;
overflow: hidden; /* Ensure overflow is hidden */
max-width: 100%;
width: 100%;
}
.packages-card .text-section {
flex: 1;
padding: 15px;
order: 2;
text-align: center;
width: 100%;
display: flex; /* Add flex display */
flex-direction: column; /* Stack text and buttons */
justify-content: center; /* Center content vertically */
align-items: center; /* Center content horizontally */
color: #333; /* Ensure text color is visible */
}
.packages-card .image-container {
flex: 0 0 auto;
width: 100%;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
background-color: #eaeaea;
order: 1;
}
.packages-card .image-container img {
width: 100%;
max-width: 350px;
height: 250px;
object-fit: cover;
}
@media (max-width: 768px) {
.packages-card .text-section {
padding: 10px;
font-size: 14px;
width: 100%; /* Full width for medium screens */
}
.packages-card .text-section h2 {
font-size: 18px;
}
.button {
flex-direction: column;
align-items: center;
}
.button .btn,
.button .formbutton {
width: 80%;
max-width: 250px;
margin-bottom: 10px;
}
}
@media (max-width: 480px) {
.packages-card .text-section {
padding: 8px;
font-size: 12px;
width: 100%; /* Ensure full width */
align-self: center;
}
.packages-card .text-section h2 {
font-size: 16px;
}
.packages-card .image-container {
height: 200px;
}
.packages-card .image-container img {
height: 200px;
}
.button {
flex-direction: column;
align-items: center;
}
.button .btn,
.button .formbutton {
width: 90%; /* Increased width for very small screens */
max-width: 280px;
margin-bottom: 10px;
}
}
@media (max-width: 320px) {
.button .btn,
.button .formbutton {
width: 95%; /* Almost full width for the smallest screens */
padding: 8px 12px;
font-size: 14px;
}
}
/*Filter sticky*/
.filter {
position: sticky;
top: 5rem;
}
@media(max-width:600px) {
.filter {
position: relative;
}
}
/*Scrollspy Containner*/
/*Accordion Css */
.accordion {
width: 100%;
max-width: 90%;
margin: auto;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.accordion-header {
padding: 10px;
background-color: #f1f1f1;
cursor: pointer;
text-align: center;
font-size: 20px;
font-weight: bold;
border-bottom: 1px solid #ccc;
transition: background-color 0.3s;
}
.accordion-header:hover {
background-color: #e0e0e0;
}
.accordion-content {
display: none;
padding: 10px;
background-color: #fff;
}
.photo-gallery {
display: flex;
flex-wrap: nowrap;
justify-content: center;
overflow-x: auto;
}
.photo-item {
flex: 0 0 calc(12.5% - 10px);
/* Adjust to fit 8 items per row */
margin: 5px;
text-align: center;
}
.photo-item a {
text-decoration: none;
color: inherit;
}
.photo-item img {
width: 100%;
height: auto;
border: 2px solid #ccc;
border-radius: 8px;
}
.photo-caption {
margin-top: 8px;
font-size: 12px;
/* Reduce caption size for better fit */
color: #555;
}
/* Responsive styles */
@media (max-width: 768px) {
.accordion-header {
font-size: 18px;
}
.photo-item {
flex: 0 0 calc(25% - 10px);
/* 4 items per row for smaller screens */
}
}
@media (max-width: 480px) {
.accordion-header {
font-size: 16px;
}
.photo-item {
flex: 0 0 calc(50% - 10px);
/* 2 items per row for smallest screens */
}
}