/* General styles */
@font-face {
    font-family: 'Didot';
    src: url('GFSDidot-Regular.ttf') format('truetype');
}

body {
    font-family: 'Georgia', 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    text-align: center; /* Center align text by default */
}

header {
    background-color: #fff; /* Change background color to white */
    color: #333; /* Change text color to dark grey for better contrast */
    padding: 60px 20px 40px;
    position: relative;
    padding: 5vw;
    padding-bottom: 40px;
padding-top: 70px;
}


header h1 {
    margin: 0;
    padding-bottom: 5px;
    display: inline-block;
    border-image: linear-gradient(to right, #333, #ccc); /* Adjust border color for better contrast */
    border-image-slice: 1;
    font-family: 'Didot', serif; /* Use Didot for the header */
    margin-top: -10px;
}

nav {
    margin-top: 20px; /* Add space between the heading and the tabs */
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* Center align the navigation */
}

nav ul li a {
    font-family: 'Playfair Display', serif; /* Use Playfair Display for the navigation tabs */
    font-size: 1.2em; /* Increase the font size slightly */
    letter-spacing: 0.05em; /* Spread the letters apart slightly */
    color: #333; /* Change the color to dark grey (black) */
    text-decoration: none;
    padding: 10px 15px;
    transition: background-color 0.3s, color 0.3s;
}

nav ul li a:hover {
    background-color: #555;
    color: #fff;
}

#homepage h2, #homepage h3, #homepage p, #homepage-description, section h2, .tour-option h2, .about-me h2, .contact-box h2, .contact-box h3 {
    font-family: 'Didot', serif; /* Use Didot for headings */
    letter-spacing: 0.07em;
    font-size: 1.3em;
    margin-left: -50px;
}

#homepage-description {
    font-family: 'Didot', serif !important; /* Use Georgia for the specific paragraph */
    font-size: 1.2em !important; /* Adjust the font size as needed */
    margin-top: 20px; /* Add space between the heading and the paragraph */
}

/* Animation for homepage-description */
#homepage-description {
    opacity: 0; /* Initially hidden */
    transform: translateY(20px); /* Start slightly below its final position */
    animation: fadeInUp 1.5s ease-out forwards; /* Apply the animation */
}

/* Keyframes for the fade-in and slide-up effect */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Start below */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at the original position */
    }
}

/* Initial state for elements to animate */
.animate-on-scroll {
    opacity: 0; /* Initially hidden */
    transform: translateY(20px); /* Start slightly below its final position */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Smooth transition */
}

/* Final state when the animation is triggered */
.animate-on-scroll.animated {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to the original position */
}

nav ul li a:hover {
    background-color: #555;
    color: #fff;
}

#homepage {
    padding: 20px;
}
#homepage-title {
    font-family: 'Didot', serif; /* Use Didot for the title */
    letter-spacing: 0.07em;
    font-size: 3.0em; /* Adjust the font size to make it smaller */
}

.homepage-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between; /* Space between text and images */
    gap: 20px;
    margin: 0 auto; /* Center the content horizontally */
    max-width: 1200px; /* Adjust the max-width as needed */
    margin-top: 20px; /* Add space between the grey heading and the content */
    margin-bottom: 40px; /* Add space between the content and the icons */
    padding-left: 30px;
}
#homepage-description {
    font-family: 'Georgia', 'Times New Roman', Times, serif; /* Use Georgia for the specific paragraph */
    text-align: justify;
}

.text-content {
    flex: 1;
    text-align: left;
    padding-right: 20px;
    max-width: 50%;
    margin-right: 0px; /* Add space between the text and the image */
    border-top: 2px solid #333; /* Add a thick line on top */
    border-bottom: 2px solid #333; /* Add a thick line under the body of text */
    margin-top: 20px;
    margin-left: -100px;
    padding-left: 100px;
}

.image-content {
    flex: 1;
    text-align: right;
    padding-left: 70px;
    margin-top: 20px;
}

.homepage-image {
    max-width: 100%; /* Adjust the max-width to make the image smaller */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 10%;
}
.logo-container {
    position: absolute; /* Fix the position relative to the viewport */
    top: 20px; /* Adjust the top position as needed */
    left: 100px; /* Adjust the left position as needed */
    z-index: 1000; /* Ensure the logo stays on top of other elements */
}

.logo {
    width: 160px; /* Adjust the width as needed */
    height: 160px; /* Set the height to match the width for a square shape */
    border-radius: 0; /* Remove the circular border */
    border: none; /* Remove the white border */
    object-fit: cover; /* Ensure the image covers the entire area */
}

.slideshow-container {
    position: relative;
    width: 110%;
    max-width: 500px; /* Adjust to match the size of your images */
    height: auto;
    overflow: hidden;
}

/* Style for the homepage images */
.homepage-image {
    width: 100%;
    height: auto;
    display: none; /* Hide all images by default */
}

.homepage-image:first-child {
    display: block; /* Show the first image by default */
}
.info-section {
    display: flex;
    justify-content: center;
    gap: 70px;
    margin-top: 20px;
    margin-bottom: 50px;
}

.info-box {
    text-align: center;
}

.symbol {
    width: 70px;
    height: auto;
    margin-right: 90px;
   margin-left: 90px;
   
}


/* Dedicated styles for homepage info boxes */
.homepage-info-section {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center-align the info boxes */
    gap: 50px; /* Add spacing between the boxes */
    margin-top: 30px; /* Add space above the section */
    margin-bottom: 50px; /* Add space below the section */
}

.homepage-info-box {
    text-align: center; /* Center-align the text */
    flex: 1; /* Allow equal space for each box */
}

.symbol {
    width: 70px; /* Set the width of the swirl images */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px; /* Add space below the swirl image */
    margin-left: 30px;
}

.homepage-info-box p {
    font-size: 1rem; /* Adjust font size */
    color: #555; /* Set text color */
    line-height: 1.5; /* Improve readability */
    margin: 0; /* Remove default margins */
}






.language-selector {
    position: absolute;
    top: 90px;
    right: 10px;
    background-color: #333; /* Dark background color */
    border: none; /* Remove border */
    border-radius: 25px; /* Rounded corners */
    padding: 5px 10px; /* Padding for the container */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    font-family: 'Playfair Display', serif;
    margin-top: 50px;
}

.language-selector select {
    padding: 5px 15px; /* Padding inside the select element */
    font-size: 14px;
    border: none; /* Remove border */
    background: none; /* Remove background */
    color: #fff; /* White text color */
    font-family: 'Playfair Display', serif;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #444; /* Slightly lighter background color */
    border-radius: 20px; /* Rounded corners */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

.language-selector select:hover {
    background-color: #555; /* Darker background on hover */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); /* Enhanced inner shadow on hover */
}

.language-selector select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); /* White focus ring */
}

#homepage h2 {
    font-size: 2em;
    margin-bottom: 10px;
    margin-top: 20px;
    font-family: 'Playfair Display', serif; /* Use Playfair Display for the headings */
    margin-left: -50px;
}

#homepage p {
    font-size: 1.2em;
    margin-bottom: 40px; /* Add space between the text and the info boxes */
    font-family: 'Playfair Display', serif; /* Use Playfair Display for the paragraphs */
    margin-left: -50px;
}



.horizontal-carousel-section {
    margin: 50px 0;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    text-align: center;
}

.carousel-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: #333;
    position: relative; /* Required for the ::after pseudo-element */
    text-align: center;
}

.carousel-title::after {
    content: ""; /* Empty content for the line */
    display: block;
    width: 120px; /* Adjust the width to match the length of "Our Tour" */
    height: 2px; /* Thin line */
    background-color: #333; /* Line color */
    margin: 30px auto 0; /* Center the line and add spacing */
}

.carousel-container {
    position: relative;
    overflow: hidden; /* Hide overflowing items */
    width: 100%;
}



.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth scrolling */
    width: 100%;
}

.carousel-item {
    flex: 0 0 33.33%; /* Show 3 items at a time */
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.carousel-image {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.carousel-caption {
    margin-top: 10px;
    font-size: 1rem;
    color: #555;
}

.carousel-button {
    position: absolute;
    top: 50%; /* Keep the arrows vertically centered */
    transform: translateY(-40%);
    margin-top: -10px; /* Push the arrows down by 20px */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}
.carousel-button.left {
    left: 10px;
}

.carousel-button.right {
    right: 10px;
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Playfair Display', serif;
    overflow-x: hidden;
}

.horizontal-carousel-section {
    position: relative;
    background-color: #ffffff; /* White background */
    z-index: 1;
    padding: 50px 20px;
    text-align: center;
    transform: translateY(0); /* Initial position */
    transition: transform 0.3s ease-out; /* Smooth transition */
    will-change: transform;
    padding-top: 20px; /* Add space above the heading */
    padding-bottom: 40px; /* Add space below the heading */
    margin-right: -190px;
    margin-left: -190px;
}

.carousel-title {
    font-size: 2rem;
    margin-top: 50px; /* Add more space above the title */
    margin-bottom: 20px; /* Keep the spacing below the title */
    color: #333;
    text-align: center;
    letter-spacing: 0.1em; /* Add spacing between letters */
    font-weight: bold; /* Remove bold styling */
}

.carousel-container {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.carousel-item {
    flex: 0 0 33.33%; /* Show 3 items at a time */
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.carousel-image {
    width: 90%;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.carousel-caption {
    margin-top: 10px;
    font-size: 1rem;
    color: #555;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}

.carousel-button.left {
    left: 10px;
}

.carousel-button.right {
    right: 10px;
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Style for the carousel navigation */
.carousel-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    position: relative;
    padding-bottom: 40px;
}

.carousel-button {
    background: none; /* Remove any background color */
    border: none; /* Remove any border */
    padding: 0; /* Remove padding */
    cursor: pointer;
    z-index: 10;
    margin-top: -10px; /* Bring the arrows closer to the progress bar */
}
.carousel-button:hover {
    background-color: rgba(255, 255, 255, 0.8);
}


.arrow-image {
    width: 20px; /* Adjust the size of the arrow */
    height: auto;
    display: block; /* Ensure the image is displayed properly */
    filter: none; /* Ensure no filters are applied */
    transition: transform 0.2s ease;
}

.arrow-image:hover {
    transform: none; /* Slightly enlarge the arrow on hover */
}

.left-arrow {
    transform: rotate(0deg); /* Rotate the left arrow */
}

.right-arrow {
    transform: rotate(0deg); /* Keep the right arrow as is */
}

.carousel-button.left {
    left: 200px; /* Adjust the distance from the left side of the progress bar */
}

.carousel-button.right {
    right: 200px; /* Adjust the distance from the right side of the progress bar */
}
/* Progress bar container */
.progress-bar {
    position: relative;
    width: 30%; /* Adjust the width of the progress bar */
    height: 3px; /* Adjust the height of the progress bar */
    background-color: #ddd; /* Static line color */
    border-radius: 3px;
    margin: 40px auto 20px auto; /* Add 20px of space below the progress bar */
}

/* Progress indicator (moving line) */
.progress-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 20%; /* Default width for the first item */
    background-color: #000000; /* Moving line color */
    transition: width 0.3s ease, left 0.3s ease; /* Smooth movement */
    border-radius: 3px;
}

.carousel-item a {
    text-decoration: none; /* Remove underline from links */
    display: inline-block; /* Ensure the link wraps only the image */
}

.carousel-item a img {
    transition: transform 0.3s ease; /* Add a hover effect */
}

.carousel-item a img:hover {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
}

.image-text-section {
    display: flex; /* Align the image and text side by side */
    align-items: center; /* Vertically center the content */
    justify-content: space-between; /* Add space between the image and text */
    padding: 40px; /* Add padding around the section */
    gap: 20px; /* Add space between the image and text */
}

.image-container {
    max-width: 100%; /* Limit the width of the image container */
    margin-right: -85px; /* Move the image slightly to the left */
    margin-top: -50px;
}

.custom-image {
    width: 850px; /* Reduce the size of the image */
    height: auto; /* Maintain the aspect ratio */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

.contact-button {
    display: inline-block; /* Make the button inline and block-like */
    padding: 10px 20px; /* Add padding inside the button */
    font-size: 1rem; /* Adjust the font size */
    color: #fff; /* White text color */
    background-color: #000000; /* Blue background color */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Add rounded corners */
    margin-top: 20px; /* Add spacing above the button */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
    float: right; /* Align the button to the right */
}

.contact-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}



.text-container {
    flex: 2; /* Allow the text box to take up half the space */
    max-width: 40%; /* Limit the width of the text container */
    background-color: #fff; /* Solid white background */
    padding: 20px; /* Add padding inside the text box */
    border-radius: 0; /* Ensure sharp edges */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    text-align: left; /* Align text to the left */
}

.text-container h2 {
    font-size: 2rem; /* Adjust the font size of the heading */
    margin-bottom: 15px; /* Add spacing below the heading */
    color: #333; /* Dark text color */
}

.text-container p {
    font-size: 1rem; /* Adjust the font size of the paragraph */
    line-height: 1.6; /* Improve readability */
    color: #555; /* Slightly lighter text color */
    margin-bottom: 10px; /* Add spacing between paragraphs */
}
/* Style for the tour gallery */
.tour-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Create 2 columns */
    justify-items: center; /* Center the items horizontally */
    margin-top: 20px; /* Add some spacing above the gallery */
}


section h2 {
    margin-top: 70px; /* Add space on top of the text */
}

.tour-item {
    text-align: center; /* Center-align the content inside each tour item */
    max-width: 300px; /* Optional: Limit the width of each tour item */
    margin: 0; /* Remove any extra margins */
    padding-bottom: 80px; 

}
.tour-item:nth-child(3n+1) {
    margin-right: -270px; /* Move the first column closer to the middle */
}

.tour-item:nth-child(3n) {
    margin-left: -270px; /* Move the last column closer to the middle */
}

.tour-item:nth-child(4),
.tour-item:nth-child(5),
.tour-item:nth-child(6) {
    margin-top: -90px; /* Pull the second row closer to the first row */
}

.tour-item img {
    width: 100%; /* Make the images responsive */
    height: auto;
    border-radius: 10px; /* Optional: Add rounded corners to the images */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

.tour-gallery img {
    max-width: 300px; /* Adjust the max width to make the images smaller */
    width: 100%;
    height: auto;
    border-radius: 10px; /* Optional: adds rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow around the image */
    cursor: pointer; /* Changes cursor to pointer on hover */
    transition: transform 0.3s; /* Smooth transition for hover effect */
    margin-top: 30px;
}

.tour-gallery img:hover {
    transform: scale(1.05); /* Slightly enlarges the image on hover */
}

.image-caption {
    margin-top: 10px;
    font-size: 1em;
    color: #666;
}

.tour-info {
    display: none;
    margin-top: 20px;
    text-align: left;
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 50px;
}

/* Style for the About Me section */
.about-me {
    padding: 20px; /* Add padding to give space inside the section */
    margin-top: -70px; /* Add some margin to push it down from the top */
}

/* Flexbox layout for the content */
.about-me-content {
    display: flex;
    align-items: center; /* Align content vertically */
    justify-content: center; /* Center align the content */
    gap: 30px; /* Increase the gap between text and image */
    flex-direction: row; /* Move the image to the right */
}

/* Style for the text container */
.about-me-text {
    flex: 1; /* Allow text to take up available space */
    text-align: left;
    padding: 0 20px; /* Add padding to the left and right sides */
    padding-top: 10px;
    max-width: 600px; /* Set a maximum width for the text container */
}

/* Style for the image container */
.about-me-image img {
    width: 300px; /* Set the desired width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow */
}
/* Style for the contact information section */
/* Style for the contact section */
/* Style for the contact section */
.contact-section {
    padding: 40px 20px;
    background: linear-gradient(135deg, #f9f9f9, #e0e0e0); /* Gradient background */
    border-radius: 10px; /* Rounded corners for the section */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}



.contact-info {
    flex: 1;
    min-width: 300px; /* Ensure a minimum width for smaller screens */
}

.contact-box {
    background-color: #fff; /* White background */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 30px;
    margin-bottom: 20px;
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
    text-align: center; /* Center align text */
}

.contact-box:hover {
    transform: translateY(-10px); /* Slight lift on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.contact-box h2 {
    margin: 0;
    font-size: 1.8em;
    color: #333;
    font-family: 'Arial', sans-serif; /* Modern font */
}

.contact-box h3 {
    margin: 10px 0 0;
    font-size: 1.4em;
    color: #666;
    font-family: 'Arial', sans-serif; /* Modern font */
}

.contact-image {
    flex: 1;
    text-align: center; /* Center align the image */
    animation: float 6s ease-in-out infinite; /* Subtle floating animation */
    min-width: 300px; /* Ensure a minimum width for smaller screens */
    flex: 1; /* Ensure the image takes up equal space */
    margin-left: 20px;
}



/* Style for the Athens tours section */
.athens-tours {
    padding: 20px;
    padding-bottom: 60px;
    margin-top: 0; /* Remove any extra space above the tour boxes */
    padding-top: 0; /* Ensure no extra padding above the tour boxes */
}

.tour-option {
    display: none;
    margin-top: 20px;
    text-align: left;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding-bottom: 60px;
}

.tour-text {
    margin-bottom: 20px;
}

.tour-text h2 {
    margin-top: 0; /* Remove any top margin */
    padding-top: 0; /* Remove any top padding */
    position: relative; /* Allow precise positioning */
    top: -10px; /* Move the title 20px higher */
}

.tour-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.acropolis-tour h2 {
    display: inline-block;
    position: relative;
    padding-right: 20px; /* Add some padding to the right to make space for the line */
}

.acropolis-tour h2::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: calc(100% + 320px); /* Adjust the width as needed for Acropolis Tour */
    height: 2px; /* Adjust the height of the line */
    background-color: #333; /* Adjust the color of the line */
    transform: translateY(-50%);
}

.philosophical-tour h2 {
    display: inline-block;
    position: relative;
    padding-right: 20px; /* Add some padding to the right to make space for the line */
}

.philosophical-tour h2::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: calc(100% + 250px); /* Adjust the width as needed for Philosophical Tour */
    height: 2px; /* Adjust the height of the line */
    background-color: #333; /* Adjust the color of the line */
    transform: translateY(-50%);
}

.tour-image {
    flex: 1;
    text-align: right;
    padding-left: 10px; /* Reduce padding to bring the image closer to the text */
    margin-right: 120px;
}

.athens-tours h2 {
    margin-top: 50px; /* Add space between the heading and the first text */
}

/* Ensure the body and html take up the full height */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Style for the tour cards */
/* Style for the tour cards */
/* Style for the tour cards container */
/* Style for the tour cards container */
.athens-tours {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center align the tour cards */
    gap: 20px; /* Add space between the tour cards */
    padding: 20px;
}

/* Style for the tour cards */
.tour-card {
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 500px; /* Set a fixed height for the tour cards */
    margin: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    vertical-align: top; /* Ensure cards align at the top */
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit text color */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
}

.tour-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.tour-card img {
    width: 100%;
    height: 300px; /* Set a fixed height for the images to make them square */
    object-fit: cover; /* Ensure the image covers the entire area */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.tour-card h2 {
    font-family: 'Didot', serif;
    font-size: 1.5em;
    margin: 10px 0;
    flex-grow: 1; /* Allow the heading to grow and take up available space */
}

.tour-card p {
    font-family: 'Georgia', serif;
    font-size: 1em;
    color: #666;
    margin: 10px 0;
    flex-grow: 1; /* Allow the paragraph to grow and take up available space */
}

.learn-more-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    color: white;
    background-color: #000000;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, box-shadow 0.3s;
    align-self: center; /* Center the button horizontally */
}

.learn-more-btn:hover {
    background-color: #070707;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Ensure the main content area takes up the remaining space */
main {
    flex: 1;
}

/* Style for the tour details section */
.tour-details {
    padding: 40px 20px; /* Add padding around the section */
    background-color: transparent; /* Ensure the background is transparent */
}

.tour-details h2 {
    font-family: 'Didot', serif;
    font-size: 2em;
    margin-bottom: 20px;
}

.tour-details h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5em;
    margin-top: -5px;
}

.tour-details p {
    font-family: 'Georgia', serif;
    font-size: 1em;
    color: #666;
    margin: 10px 0;
   
}

.tour-details ul {
    list-style-type: disc;
    margin-left: 20px;
}

.tour-details ul li {
    font-family: 'Georgia', serif;
    font-size: 1em;
    color: #666;
    margin: 5px 0;
}

.tour-details {
    padding: 40px 20px; /* Add padding around the section */
    background-color: transparent !important; /* Ensure the background is transparent */
    border: none; /* Remove any borders if present */
    box-shadow: none; /* Remove any shadows if present */
    margin-top: 0;
    padding-top: 0;
}


.tour-details h2 {
    font-family: 'Didot', serif;
    font-size: 2em;
    margin-bottom: 20px;
}

.tour-details h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5em;
    margin-top: 5px;
}

.tour-details p {
    font-family: 'Georgia', serif;
    font-size: 1em;
    color: #666;
    margin: 10px 0;
    
}

.tour-details ul {
    list-style-type: disc;
    margin-left: 20px;
}

.tour-details ul li {
    font-family: 'Georgia', serif;
    font-size: 1em;
    color: #666;
    margin: 5px 0;
}

.tour-content {
    display: flex; /* Create a horizontal layout */
    gap: 20px; /* Reduce the space between text and images */
    align-items: flex-start; /* Align items to the top */
}

/* Left: Text Content */
.tour-text {
    flex: none; /* Disable flex-grow to prevent it from taking extra space */
    width: 60%; /* Set a specific width for the text box */
    max-width: 600px; /* Limit the maximum width of the text box */
    text-align: justify; /* Keep the text justified */
    color: #333; /* Dark grey text color */
    line-height: 1.8; /* Improve readability */
    background-color: transparent; /* Ensure no background color */
    padding: 0; /* Remove any padding if present */
    border: none; /* Remove any borders if present */
    margin-left: 80px; /* Add left margin to move the text box closer to the right */
}
/* Right: Images */
.tour-images {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 50px; /* Add space between the images */
    margin-left: 50px; /* Add space between the images */
}

.tour-images img {
    width: 100%; /* Make the images responsive */
    max-width: 500px; /* Set a maximum width for the images */
    height: auto; /* Maintain the aspect ratio */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}




    .back-button-container {
        text-align: left; /* Align the button to the left */
        margin: 30px 0 20px 120px; 
        margin-bottom: 0px; /* Reduce the space below the back button */
        padding-bottom: 0; /* Ensure no extra padding below the back button */
    }
    
    
    
    .back-button {
        width: 100px; /* Set the width of the button image */
        height: auto; /* Maintain the aspect ratio */
        cursor: pointer; /* Change the cursor to a pointer on hover */
        transition: transform 0.2s ease; /* Add a hover effect */
    }
    
    .back-button:hover {
        transform: scale(1.1); /* Slightly enlarge the button on hover */
    }

    /* Contact Section */
/* Contact Section */
.contact-section {
    text-align: center;
    padding: 40px 20px;
    background-color: #f9f9f9; /* Light background for the section */
}

.contact-section h2 {
    font-size: 2em;
    margin-bottom: 10px;
    color: #333;
}

.contact-section p {
    font-size: 1.2em;
    margin-bottom: 30px;
    color: #666;
}

/* Contact Cards */


.contact-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 20px;
    text-align: center;
    width: 300px; /* Fixed width for each card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

.contact-card h3 {
    font-size: 1.5em;
    margin: 15px 0 10px;
    color: #333;
}

.contact-card p {
    font-size: 1em;
    color: #555;
}

.contact-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 30px; /* Increase padding for more space inside the container */
    text-align: center;
    width: 400px; /* Increase the width of the containers */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

/* Icon Styling */
.icon-container {
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 80px; /* Adjust the width of the container */
    height: 80px; /* Adjust the height of the container */
    margin: 0 auto 15px; /* Center the container and add spacing below */
}

.icon-container img {
    width: 100%; /* Make the icon fill the container */
    height: auto; /* Maintain the aspect ratio */
}

/* Contact Section */
.contact-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    background-color: #f9f9f9; /* Light background for the section */
}

.contact-content {
    display: flex;
    align-items: center; /* Vertically align items (image and cards) */
    justify-content: center; /* Center the content horizontally */
    gap: 40px; /* Space between the image and the containers */
    max-width: 1200px;
    margin: 0 auto; /* Center the content within the page */
}


/* Left: Contact Cards */
.contact-cards {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: repeat(2, 1fr); /* Create 2 columns */
    gap: 20px; /* Add space between the cards */
    flex: 1; /* Allow the cards to take up equal space */
}

.contact-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 10px; /* Reduce padding for smaller containers */
    text-align: center;
    width: 240px; /* Reduce the width of the containers */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

/* Right: Contact Image */
.contact-image {
    flex: 1; /* Allow the image to take up equal space */
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
}

.contact-image img {
    max-width: 100%; /* Increase the size of the image */
    height: auto;
    border-radius: 10px; /* Optional: Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.athens-tours-page .tour-list {
    display: flex;
    flex-direction: column; /* Stack the tour cards vertically */
    align-items: center; /* Center the cards horizontally */
    gap: 20px; /* Add space between the cards */
    padding: 20px; /* Add padding around the section */
    box-sizing: border-box; /* Include padding in width calculations */
}




.image-container {
    flex: 1; /* Reduce the space allocated to the image container */
    height: 100%; /* Ensure the image container fills the height of the card */
    overflow: hidden; /* Prevent the image from overflowing */
}

.text-container {
    flex: 2; /* Increase the space allocated to the text container */
    padding: 30px; /* Add padding inside the text container */
    text-align: left; /* Align text to the left */
    display: flex;
    flex-direction: column; /* Stack text elements vertically */
    justify-content: center; /* Center the text vertically */
    margin-left: 20px; /* Optional: Adjust spacing between the text and image */
}
.tour-image {
    width: 100%; /* Make the image fill the width of the container */
    height: 100%; /* Make the image fill the height of the container */
    object-fit: cover; /* Ensure the image covers the entire container without distortion */
}

.athens-tours-page .tour-card .text-container {
    flex: 1; /* Increase the space allocated to the text container */
    max-width: 60%; /* Allow the text container to take up more space */
    padding: 30px; /* Add padding inside the text container */
    text-align: left; /* Align text to the left */
}

.athens-tours-page .tour-list {
    display: flex;
    flex-direction: column; /* Stack the tour cards vertically */
    align-items: center; /* Center the cards horizontally */
    gap: 20px; /* Add space between the cards */
    padding: 20px; /* Add padding around the section */
    box-sizing: border-box; /* Include padding in width calculations */
}

.athens-tours-page .tour-card {
    display: flex; /* Align image and text side by side */
    flex-direction: row; /* Keep the image on the left and text on the right */
    align-items: stretch; /* Stretch the image and text to fill the container height */
    gap: 0; /* Remove the gap between the image and text */
    background-color: #fff; /* Solid white background */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    padding: 0; /* Remove padding inside the card */
    width: 90%; /* Make the cards wide */
    max-width: 1200px; /* Limit the maximum width of the cards */
    height: auto; /* Let the height adjust dynamically */
    min-height: 200px; /* Set a minimum height for the cards */
    margin: 0 auto; /* Center the cards horizontally */
    overflow: hidden; /* Ensure the image doesn't overflow the container */
}

.athens-tours-page .tour-card .image-container {
    flex: 1; /* Allow the image container to take up the left side */
    height: 100%; /* Ensure the image container fills the height of the card */
    overflow: hidden; /* Prevent the image from overflowing */
    margin-left: 0px; /* Move the image container slightly to the left */
    margin-top: -10px; /* Move the image container slightly down */
    transform: translate(-10px, 10px); /* Fine-tune the position */
}

.athens-tours-page .tour-card .text-container {
    flex: 1; /* Allocate space for the text container */
    max-width: 60%; /* Allow the text container to take up more space */
    padding: 30px; /* Add padding inside the text container */
    text-align: left; /* Align text to the left */
    position: relative; /* Allow positioning of the button */
}

.athens-tours-page .tour-card .text-container p {
    font-size: 1rem; /* Adjust the font size */
    line-height: 1.6; /* Improve readability */
    color: #555; /* Slightly lighter text color */
    margin-bottom: 10px; /* Add spacing between paragraphs */
}

.athens-tours-page .tour-card .thin-line {
    border: none; /* Remove default border styling */
    border-top: 1px solid #ccc; /* Add a thin dashed grey line */
    margin: 20px 0; /* Add spacing above and below the line */
}


.athens-tours-page .tour-card .view-details-button:hover {
    color: #0056b3; /* Darker blue on hover */
}

.athens-tours-page .tour-card .view-details-button {
    display: inline-block; /* Make the button inline and block-like */
    font-size: 1rem; /* Adjust the font size */
    color: #000000; /* Black text color */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the button text bold */
    float: right; /* Align the button to the right */
    margin-top: 10px; /* Add spacing above the button */
    transition: color 0.3s ease; /* Smooth hover effect */
}

.athens-tours-page .tour-card .text-container {
    flex: 1; /* Allocate space for the text container */
    max-width: 60%; /* Allow the text container to take up more space */
    padding: 30px; /* Add padding inside the text container */
    text-align: left; /* Align text to the left */
    display: flex; /* Use Flexbox for layout */
    flex-direction: column; /* Stack text elements vertically */
    justify-content: space-between; /* Distribute space between elements */
    position: relative; /* Allow positioning of the button */
}

.athens-tours-page .tour-card .view-details-button {
    align-self: flex-end; /* Align the button to the right */
    display: inline-block; /* Make the button inline and block-like */
    font-size: 1rem; /* Adjust the font size */
    color: #000000; /* Black text color */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the button text bold */
    margin-top: 10px; /* Add spacing above the button */
    transition: color 0.3s ease; /* Smooth hover effect */
}

.athens-tours-page .tour-card .view-details-button:hover {
    color: #0056b3; /* Darker blue on hover */
}

footer {
    background-color: #fff; /* Change background color to white */
    color: #333; /* Change text color to dark grey for better contrast */
    padding: 50px; /* Increase padding to make the footer bigger */
    padding-top: 40px; /* Increase the space above the footer content */
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between; /* Distribute space between elements */
    align-items: center; /* Center align items vertically */
    position: relative;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -50px;
   

}

#footer-text {
    text-align: right; /* Center align the footer text */
    margin: 10px 0 0 0; /* Add margin to the top */
}

.footer-info {
    font-size: 1.0em;
    color: #333; /* Change text color to dark grey for better contrast */
    text-align: left; /* Align personal information to the left */
    line-height: 0.4; /* Decrease line height to bring lines closer together */
    margin: 0; /* Remove default margin */
}

.footer-logo {
    text-align: center; /* Center align the logo and text */
}

.footer-logo-image {
    width: 100px; /* Set the width of the logo image */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto; /* Center the logo image */
    margin-bottom: 20px;
}

.about-me-section {
    font-family: 'Didot', serif; /* Elegant font */
    color: #333; /* Dark text color */
    background-color: #f9f9f9; /* Light background */
    padding: 40px; /* Add padding around the section */
}

.about-me-header {
    text-align: center;
    margin-bottom: 30px;
}

.about-me-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.about-me-header span {
    font-weight: bold;
    color: #555; /* Slightly darker color for emphasis */
}

.about-me-image {
    width: 48%; /* Adjust image size */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.about-me-footer {
    text-align: center;
}

.about-me-footer h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.about-me-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-me-footer ul li {
    font-size: 1.4rem;
    margin-bottom: 10px;
    margin-top: 60px;
    margin-right: 60px;
    margin-left: 60px;
}



.about-me-footer p {
    font-size: 1rem;
    margin-top: 20px;
    line-height: 1.6;
}



.about-me-image-left {
    width: 100%; /* Make the image responsive */
    max-width: 400px; /* Limit the maximum width of the image */
    margin-top: 20px; /* Add space above the image */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.about-me-content {
    display: flex; /* Use flexbox for layout */
    gap: 10px; /* Reduce the space between the text and the image */
    align-items: flex-start; /* Align items at the top */
}

.about-me-text {
    flex: 2; /* Allow the text section to take more space */
    margin-left: 50px;
}

.about-me-images {
    flex: 1; /* Allow the image section to take less space */
    display: flex;
    justify-content: flex-end; /* Align the image to the right */
}

.about-me-image-right {
    width: 100%; /* Make the image responsive */
    max-width: 400px; /* Limit the maximum width of the image */
    margin-right: 850px; /* Remove any extra margin on the left */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    width: auto; /* Maintain the original width */
    height: auto; /* Maintain the original height */
    max-width: 400px; /* Limit the maximum width */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    display: block; /* Ensure the image is displayed */
    margin: 0 auto; /* 
}

.about-me-header h1 {
    position: relative; /* Set relative positioning for the pseudo-element */
    display: inline-block; /* Ensure the line is aligned with the text */
    font-size: 2.5rem; /* Adjust font size as needed */
    margin-bottom: 20px; /* Add space below the header */
}

.about-me-header h1::after {
    content: ""; /* Add an empty pseudo-element */
    position: absolute; /* Position it relative to the h1 */
    bottom: -5px; /* Position the line slightly below the text */
    left: 20%; /* Start the line slightly further to the right */
    width: 60%; /* Shorten the line to end before the last letter */
    height: 2px; /* Set the thickness of the line */
    background-color: black; /* Set the line color */
}
.about-me-text p {
    font-size: 1.2rem; /* Increase the font size */
    line-height: 1.8; /* Improve readability */
    color: #333; /* Darker text color */
    margin-left: -50px;
    text-align: justify;
}

.about-me-text p strong {
    font-weight: bold; /* Make the names bold */
    color: #000; /* Optional: Make the names slightly darker */
}

.about-me-text h2 {
    font-size: 1.9rem; /* Increase the font size */
    font-family: 'Didot', serif; /* Change the font to Didot */
    font-weight: bold; /* Make the font bold */
    color: #333; /* Set a dark color for the heading */
    text-align: left; /* Align the heading to the left */
    margin-bottom: 20px; /* Add space below the heading */
    padding-bottom: 5px; /* Add some space between the text and the line */
    margin-left: -50px;
}

.image-container {
    display: flex; /* Use flexbox to align the image and text side by side */
    align-items: flex-start; /* Align items at the top */
    gap: 20px; /* Add space between the image and the text */
    position: relative; /* Ensure proper positioning for child elements */
}

.about-me-image-right {
    width: 50%; /* Adjust the width of the image */
    max-width: 400px; /* Limit the maximum width of the image */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    margin-right: 300px;
    margin-left: 140px;
}

.text-next-to-image {
    flex: 1; /* Allow the text to take up the remaining space */
    text-align: left; /* Align the text to the left */
    font-size: 1.2rem; /* Match the font size of the existing text */
    line-height: 1.8; /* Improve readability */
    color: #333; /* Darker text color */
    margin-left: -270px;
    text-align: justify;
    margin-right: 150px;
}

.text-next-to-image h2 {
    font-size: 1.9rem; /* Match the font size of the existing heading */
    font-family: 'Didot', serif; /* Use the same font as the existing heading */
    font-weight: bold; /* Make the heading bold */
    color: #333; /* Set a dark color for the heading */
    margin-bottom: 20px; /* Add space below the heading */
    margin-left: 0px;
   
}

.text-next-to-image p {
    margin-bottom: 15px; /* Add space between paragraphs */
}

/* Animation for images */
.about-me-image-left{
    opacity: 0; /* Initially hidden */
    transform: translateY(20px); /* Start slightly below their final position */
    animation: fadeInUp 1.5s ease-out forwards; /* Apply the fade-in animation */
}

/* Keyframes for the fade-in and slide-up effect */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Start below */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at the original position */
    }
}

/* Initial state for scroll animation */
.scroll-animate {
    opacity: 0; /* Initially hidden */
    transform: translateY(20px); /* Start slightly below its final position */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Smooth transition */
}

/* Final state when the animation is triggered */
.scroll-animate.animated {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to the original position */
}

/* Animation for the first text (on page load) */
.about-me-text {
    opacity: 0; /* Initially hidden */
    transform: translateY(20px); /* Start slightly below its final position */
    animation: fadeInUp 1.5s ease-out forwards; /* Apply the fade-in animation */
}

/* Animation for the second text (on scroll) */
.text-next-to-image {
    opacity: 0; /* Initially hidden */
    transform: translateY(20px); /* Start slightly below its final position */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Smooth transition */
}

/* Final state when the animation is triggered */
.text-next-to-image.animated {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to the original position */
}

/* Keyframes for the fade-in and slide-up effect */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Start below */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at the original position */
    }
}

/* Contact Section Header */
.contact-header h1 {
    font-size: 2.5rem;
    font-family: 'Didot', serif;
    font-weight: bold;
    color: #333;
    text-align: left;
    margin-bottom: 700px;
    padding-bottom: 5px;
    margin-left: 470px;
    margin-right: -2230px;
}

/* Contact Section */
.contact-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    background-color: #f9f9f9;
}

.contact-content {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
    gap: 20px;
}

/* Left: Text with Heading */
.contact-text {
    flex: 1;
    max-width: 50%;
    padding: 20px;
}

.contact-text h2 {
    font-size: 2rem;

    color: #333;
    margin-bottom: 200px;
    margin-right: 100px;

    margin-left: 34px;
    text-align: center;
}

.contact-text p {
    font-size: 3.0 rem;
    margin-bottom: 20px;
    color: #555;
}

.contact-text ul {
    list-style: none;
    padding: 0;
    text-align: center;
    margin-top: -100px;
}

.contact-text li {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #555;
    Margin-left: -50px;
}

.contact-text a {
    color: #000000;
    text-decoration: none;
}

.contact-text a:hover {
    text-decoration: underline;
}

/* Right: Larger Image */
.contact-image {
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-image img {
    width: 550%;
    max-width: 550px;
    height: auto;
    border-radius: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Hero Section */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background-color: #f9f9f9;
}

.hero-section {
    border: 0.5px solid rgb(8, 8, 8); /* Add a black border */
    padding: 20px; /* Optional: Add padding inside the border */
    margin: 20px; /* Optional: Add spacing around the hero section */
    margin-right: -100px;
    margin-left: -100px;
}

.hero-content {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
    gap: 20px;
}

.hero-text {
    flex: 1;
    max-width: 50%;
    padding: 20px;
}

.hero-text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}

.hero-text p {
    font-size: 1.2rem;
    color: #555;
}

.hero-image {
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Tour Details Section */
.tour-details {
    padding: 50px;
    background-color: #f9f9f9;
}

.tour-details-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* First Row: Info Boxes */
.info-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.info-box {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 1px solid #ddd;
}

.info-box h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #333;
}

.info-box p {
    font-size: 1.2rem;
    color: #555;
}

/* Second Row: Gallery Images */
.gallery-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: -3%;
    
}

.gallery-image {
    flex: 1;
    max-width: calc(25% - 10px); /* Adjust for spacing */
    height: auto;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .info-row {
        flex-direction: column;
        gap: 20px;
    }

    .gallery-row {
        flex-wrap: wrap;
        gap: 20px;
    }

    .gallery-image {
        max-width: 100%; /* Make images take full width */
    }
}

/* Divider Line */
.divider1 {
    border: none;
    border-top: 1px solid #ccc; /* Thin grey line */
    margin: 20px 0; /* Add spacing above and below the line */
    width: 100%; /* Full width */
}

.fullscreen-container {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark overlay */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.fullscreen-container img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/* Hover Effect: Make images bigger */
.gallery-image {
    flex: 1;
    max-width: calc(25% - 10px); /* Adjust for spacing */
    height: auto;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.gallery-image:hover {
    transform: scale(1.1); /* Slightly enlarge the image on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Add a stronger shadow on hover */
}

/* Scroll Animation: Initially hidden */
.gallery-image {
    opacity: 1; /* Initially hidden */
    transform: translateY(20px); /* Start slightly below its final position */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
}

/* Scroll Animation: Visible state */
.gallery-image.animated {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to the original position */
}

.gallery-heading {
    text-align: left;
    font-size: 1.2irem; /* Reduced font size */
    font-weight: bold;
    margin: 20px 0 10px; /* Adjusted spacing above and below the heading */
    color: #333; /* Dark text color */
}



/* Homepage Info Boxes */


/* Acropolis Info Boxes */
/* Acropolis Info Boxes */
.acropolis-info-box {
    width: 30%; /* Reduce the width of each info box */
    padding: 10px; /* Adjust padding for smaller size */
    margin: 10px; /* Add spacing between boxes */
    background-color: #f9f9f9; /* Optional: Light grey background for distinction */
    border: 1px solid #ddd; /* Optional: Add a border for better visibility */
    border-radius: 5px; /* Optional: Add rounded corners */
    text-align: center; /* Center-align the text */
    font-size: 0.9rem; /* Reduce font size */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    margin-top: -30px;
}

/* Tour Details Section */
.tour-content {
    display: flex;
    gap: 30px; /* Space between the two sides */
    align-items: flex-start; /* Align items at the top */
}

.tour-text {
    flex: 2; /* Left side takes more space */
    max-width: 600px; /* Limit the width of the text */
}

.tour-extra-info {
    flex: 1; /* Right side takes less space */
    padding: 20px;
    border-radius: 10px; /* Optional: Rounded corners */
    text-align: left;
    margin-right: 180px;
}

.tour-extra-info h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #333;
}

.info-item {
    margin-bottom: 15px;
}

.info-item h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #555;
}

.info-item li {
    font-size: 1rem;
    color: #777;
}

/* Thin Grey Line */
.divider {
    width: 1px; /* Thin vertical line */
    background-color: #ccc; /* Grey color */
    height: auto; /* Full height of the content */
    align-self: stretch; /* Ensure it spans the full height */
}

/* Contact Me Section */
.contact-me {
    margin-top: 50px;
    padding: 20px;
    border: 1px solid #000;
    margin-left: -10px;
    text-align: justify;
    margin-right: -30px;
}

.contact-me h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #333;
}

.contact-me p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
}

.contact-me a {
    color: #007BFF; /* Blue color for links */
    text-decoration: none; /* Remove underline */
}

.contact-me a:hover {
    text-decoration: underline; /* Add underline on hover */
}


.back-button-container1 {
    text-align: left; /* Align the button to the left */
    margin: 30px 0 20px 120px; 
    margin-bottom: 0px; /* Reduce the space below the back button */
    padding-bottom: 0; /* Ensure no extra padding below the back button */
}



.back-button1 {
    width: 100px; /* Set the width of the button image */
    height: auto; /* Maintain the aspect ratio */
    cursor: pointer; /* Change the cursor to a pointer on hover */
    transition: transform 0.2s ease; /* Add a hover effect */
    margin-left: -100px;
}

.back-button1:hover {
    transform: scale(1.1); /* Slightly enlarge the button on hover */
}

/* Quote Slideshow Section */
.quote-slideshow-section {
    padding: 50px;
    background-color: #f9f9f9; /* Light background for contrast */
    text-align: center;
    margin-top: -5px;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-bottom: -300px;
margin-top: 50px;
}

.quote-slideshow-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden; /* Hide overflowing slides */

}

.quote-slide {
    display: none; /* Hide all slides initially */
    padding: 20px;
    font-size: 1.5rem;
    font-style: italic;
    color: #333;
}

.quote-slide.active {
    display: block; /* Show the active slide */
    animation: fadeIn 1s ease-in-out; /* Add fade-in animation */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Circular Progress Indicators */
.quote-progress-circles {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding-bottom: 50px;
}

.circle {
    width: 10px;
    height: 10px;
    border: 2px solid #ccc; /* Grey border for inactive circles */
    border-radius: 50%;
    background-color: none; /* Transparent background for inactive circles */
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.circle.active {
    background-color: #000000; /* Blue background for active circles */
    border-color: #000000; /* Blue border for active circles */
}
/* Swirl Image Container */
.swirl-container {
    text-align: center; /* Center the container */
    margin-bottom: 20px; /* Add spacing below the swirls */
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center the swirls horizontally */
    align-items: center; /* Align swirls vertically */
    gap: 20px; /* Add space between the swirls */
}

.swirl-image {
    width: 50px; /* Set the width of the swirl image */
    height: auto; /* Maintain aspect ratio */
    display: inline-block; /* Ensure proper alignment */
    padding-top: 120px;
    padding-right: 30px;
    margin-bottom: 200px;
    margin-top: -80px;
}

.text-container ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    text-align: left; /* Align text to the left */
}

.text-container ul li {
    font-size: 1rem;
    color: #555; /* Grey text color */
    margin-bottom: 5px;
}

footer {
    background-color: #fff; /* Change background color to white */
    color: #333; /* Change text color to dark grey for better contrast */
    padding: 50px; /* Increase padding to make the footer bigger */
    padding-top: 40px; /* Increase the space above the footer content */
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between; /* Distribute space between elements */
    align-items: center; /* Center align items vertically */
    position: relative;
    margin-left: -20px;
    margin-right: -30px;
    margin-bottom: -50px;
   

}

#footer-text1 {
    text-align: center; /* Center align the footer text */
    margin: 10px 0 0 0; /* Add margin to the top */
    margin-left: -200px;
}

.footer-info1 {
    font-size: 1.0em;
    color: #333; /* Change text color to dark grey for better contrast */
    text-align: left; /* Align personal information to the left */
    line-height: 0.4; /* Decrease line height to bring lines closer together */
    margin: 0; /* Remove default margin */
    padding-right: 400px;
    width: 900px;
}

.footer-logo1 {
    text-align: center; /* Center align the logo and text */
}

.footer-logo1-image {
    width: 100px; /* Set the width of the logo image */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto; /* Center the logo image */
    margin-left: -80%;
}

/* Language Selector */

/* Language Selector */
.language-selector {
    font-size: 1rem;
    color: #555; /* Grey text color */
    display: flex;
    align-items: center;
    gap: 10px; /* Space between options */
    cursor: pointer;
    background-color: #fff; /* White background */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    box-shadow: none; /* Remove shadow */
    margin-right: 80px;
    margin-top: 50px;
}


.language-option {
    text-decoration: none; /* Remove underline by default */
    color: #555; /* Grey text color */
    font-weight: bold;
    position: relative; /* Required for the pseudo-element */
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.language-option:hover {
    color: #333; /* Slightly darker grey on hover */
}

.language-option:hover::after {
    content: ""; /* Empty content for the line */
    position: absolute;
    bottom: -2px; /* Position the line slightly below the text */
    left: 0;
    width: 100%; /* Full width of the text */
    height: 2px; /* Thickness of the line */
    background-color: #333; /* Line color */
}

.language-option.active {
    color: #000; /* Black color for the active language */
}

.language-option.active::after {
    content: ""; /* Empty content for the line */
    position: absolute;
    bottom: -2px; /* Position the line slightly below the text */
    left: 0;
    width: 100%; /* Full width of the text */
    height: 2px; /* Thickness of the line */
    background-color: #000; /* Line color for the active language */
}

/* Why Licensed Guide Section */
.why-licensed-guide {
    padding: 50px 20px;
    background-color: #f4f4f4; /* Light grey background for distinction */
    text-align: center;
    margin-top: -50px;
    padding-bottom: 80px;
}

.why-licensed-guide .section-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.why-guide-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.why-guide-text {
    flex: 1;
    max-width: 530px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    text-align: justify;
    margin-right: 50px;
}

.why-guide-image {
    flex: 1;
    max-width: 400px;
}

.why-guide-img {
    width: 110%;
    height: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Quote Slideshow Section */
.quote-slideshow-section {
    padding: 50px 20px;
    background-color: #ffffff9f; /* Match the background color of section 2 */
    text-align: center;
    margin-right: -200px;
    margin-left: -200px;
}

.quote-slideshow-container {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 300px;
}

.quote-text {
    font-size: 1.2rem;
    font-style: italic;
    color: #333;
    margin-bottom: 20px;
}

.quote-progress-circles {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.circle {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
}

.circle.active {
    background-color: #333;
}

.quote-slideshow-section {
    padding: 50px;
    background-color: #ffffff9f; /* Match the background color of section 2 */
    text-align: center;
    padding-top: 100px;
    padding-bottom: 100px;
}

.main-wrapper {
    max-width: 1100px; /* Limit the width of the content */
    margin: 0 auto; /* Center the wrapper horizontally */
}

html, body {
    overflow-x: hidden; /* Disable horizontal scrolling */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    width: 100%; /* Ensure the body takes up the full width of the viewport */
}

.burger-menu-btn {
    display: none; /* Hide the burger button on larger screens */
}


.burger-menu {
    display: none; /* Hide the menu by default */
}

.burger-menu-btn {
    display: none; /* Hide the burger button on larger screens */
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1000;
}

.burger-icon {
    display: block; /* Show the burger icon by default */
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.close-icon {
    display: none; /* Completely hide the close icon by default */
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.burger-menu-btn {
    display: none; /* Hide the burger button on larger screens */
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1000;
}

.burger-icon {
    display: block; /* Show the burger icon by default */
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.close-icon {
    display: none; /* Completely hide the close icon by default */
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.tour-regions {
    display: none;
}





/* Media Queries for INDEX Screens */
@media only screen and (max-width: 600px) {

    header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000; /* Ensure it is above other elements */
        background-color: #fff; /* Optional: Add a background color */
    }


    .burger-menu-btn {
        display: flex; /* Show the burger button */
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        cursor: pointer; /* Make it look clickable */
        z-index: 1000; /* Ensure it is above other elements */
    }

    .burger-line {
        width: 100%;
        height: 3px;
        background-color: #333;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .burger-menu {
        display: none; /* Hide the menu by default */
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 900;
    }

    .burger-menu.active {
        display: flex; /* Show the menu when active */
    }

    .burger-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
        margin-top: -260px;
        

    }

    .burger-menu ul li {
        margin: 20px 0;
    }

    .burger-menu ul li a {
        text-decoration: none;
        font-size: 1.5rem;
        color: #333;
    }

    /* Burger Button Active State */
    .burger-menu-btn.active .burger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg); /* Top line becomes part of a cross */
    }

    .burger-menu-btn.active .burger-line:nth-child(2) {
        opacity: 0; /* Hide the middle line */
    }

    .burger-menu-btn.active .burger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg); /* Bottom line becomes part of a cross */
    }

    .burger-menu-btn {
        display: flex; /* Show the burger button */
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
        z-index: 1000; /* Ensure it is above other elements */
    }

    .burger-icon,
    .close-icon {
        width: 70%;
        height: 100%;
        object-fit: contain;
        margin-top: -80px;
        margin-right: -620px;
    }

    .burger-menu {
        display: none; /* Hide the menu by default */
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 900;
    }

    .burger-menu.active {
        display: flex; /* Show the menu when active */
    }

    .burger-menu-btn {
        display: flex; /* Show the burger button on smaller screens */
    }


    .burger-menu.active .close-icon {
        display: block; /* Show the close icon when the menu is active */
    }

  .burger-menu-btn {
        display: flex; /* Show the burger button on smaller screens */
    }

    .burger-menu {
        display: none; /* Hide the menu by default */
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 900;
    }

    .burger-menu.active {
        display: flex; /* Show the menu when active */
    }
    
        .burger-menu {
            display: none; /* Hide the menu by default */
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: #fff; /* White background */
            flex-direction: column; /* Stack items vertically */
            align-items: center; /* Center items horizontally */
            justify-content: center; /* Center items vertically */
            z-index: 900;
        }
    
        .burger-menu.active {
            display: flex; /* Show the menu when active */
        }
    
        .burger-menu ul {
            list-style: none; /* Remove bullet points */
            padding: 0;
            margin: 0;
            text-align: center; /* Center-align the text */
            display: flex;
            flex-direction: column; /* Stack items vertically */
            gap: 20px; /* Add spacing between menu items */
            margin-top: -20px;

        }
    
        .burger-menu ul li {
            margin: 0; /* Remove default margins */
        }
    
        .burger-menu ul li a {
            text-decoration: none; /* Remove underline */
            font-size: 1.5rem; /* Adjust font size */
            color: #333; /* Dark text color */
            padding: 10px 20px; /* Add padding for clickable area */
            transition: color 0.3s ease; /* Smooth hover effect */
        }
    
        .burger-menu ul li a:hover {
            color: #555; /* Slightly lighter color on hover */
        }
    
        .text-content {
            border-top: none; /* Remove the top border */
            border-bottom: none; /* Remove the bottom border */
        }

        .language-selector {
            display: none;
        }
    
        /* Show the language selector inside the burger menu */
        .burger-menu .language-selector {
            display: block; /* Make it visible */
            margin-top: 20px; /* Add spacing above */
            text-align: center; /* Center-align the selector */
            font-size: 1.3rem;
            margin-right: 32%;
        }
    
        .burger-menu .language-selector select {
            padding: 5px 15px; /* Add padding inside the select element */
            font-size: 14px; /* Adjust font size */
            border: none; /* Remove border */
            background: none; /* Remove background */
            color: #333; /* Dark text color */
            font-family: 'Playfair Display', serif;
            cursor: pointer;
            background-color: #f4f4f4; /* Light background */
            border-radius: 5px; /* Rounded corners */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        }
    
        .burger-menu .language-selector select:hover {
            background-color: #ddd; /* Slightly darker background on hover */
        }

        .close-icon {

            width:50%;
        }



        


    .main-wrapper {
        max-width: 1100px; /* Limit the width of the content */
        width: 120px; /* Smaller logo size for tablets */
        height: auto; 
    }


    /* Header */
    header {
        padding-top: 45px;
        padding-left: 20px;
        padding-bottom: 0px;
    }


    .logo {
        height: auto; /* Maintain aspect ratio */
        margin-left: -80px;
        width: 70px;
    }

    #header-title {
       
       
    }

    html[lang="en"] #header-title {
        font-size: 1.3rem; /* Adjust font size for English */
        margin-top: 0px;
        margin-right: 30px;
}
    

    /* Header Title for French */
    html[lang="fr"] #header-title {
        font-size: 1.4rem; /* Adjust font size for French */
        margin-top: -60px; /* Adjust spacing */
    }

    /* Header Title for Greek */
    html[lang="el"] #header-title {
        font-size: 1.2rem; /* Adjust font size for Greek */
        margin-top: -70px; /* Adjust spacing */
    }

    

    .language-selector {
        font-size: 0.8rem; /* Reduce font size for language options */
        margin-right: 10px;
    margin-top: 5px;
    margin-right: 190px;
    }

      /* Navigation */
      nav {
      
        display: none;
   

    }

    

    html[lang="en"] nav ul li a {
        font-family: 'Playfair Display', serif; /* Font for English */
        font-size: 1.9rem;
    }

    /* Navigation for French */
    html[lang="fr"] nav ul li a {
        font-family: 'Playfair Display', serif; /* Font for French */
        font-size: 1.1rem; /* Adjust font size for French */
    }

    /* Navigation for Greek */
    html[lang="el"] nav ul li a {
        font-family: 'Georgia', serif; /* Font for Greek */
        font-size: 1rem; /* Adjust font size for Greek */
    }

    nav ul {

       

    }
    
    nav ul li a {
        
    }
    
    nav ul li a:hover {

    }
    
    
    
    
    /* Homepage Section */
    #homepage {

        margin-right: -500px;
        margin-top: 130px;
        margin-left: -90px;
       
    }

    #homepage p {

    margin-left: -26%;
}


#homepage h2{
    font-size: 1.7rem;
margin-left: -150px;
margin-right: -10px;
padding-left: 70px;
margin-top: 290px;

}

#homepage h3{
    font-size: 1.4rem;
margin-left: -145px;
margin-right: -10px;
padding-left: 70px;
}

.slideshow-container {
    width: 170%;
    max-width: 170%;
    height: auto;
    overflow: hidden;
    margin: 20px auto;
    padding: 10px;
    margin-top: 550px;
    margin-left: -500px;
}

.slideshow-container img {
    width: 100%; /* Make images responsive */
  
}

/* Slideshow Caption */
.slideshow-caption {
    font-size: 0.9rem; /* Reduce font size for captions */
    text-align: center; /* Center-align captions */
    margin-top: 10px; /* Add spacing above captions */
}

/* Navigation Buttons */
.slideshow-navigation {
    display: flex; /* Use flexbox for navigation */
    justify-content: center; /* Center-align navigation buttons */
    gap: 10px; /* Add spacing between buttons */
    margin-top: 10px; /* Add spacing above navigation */
}

.slideshow-button {
    width: 30px; /* Adjust button size */
    height: 30px; /* Maintain aspect ratio */
    background-color: #333; /* Dark background for buttons */
    color: #fff; /* White text color */
    border: none; /* Remove border */
    border-radius: 50%; /* Make buttons circular */
    cursor: pointer; /* Change cursor to pointer */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.slideshow-button:hover {
    background-color: #555; /* Slightly lighter background on hover */
}




.homepage-image {

    max-width: 170%;
    height: auto;
    border-radius: 0px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0);
}





    .homepage-content {

        margin-bottom: -50px;
       
        
    }
    

    .text-content {
        margin-bottom: -10px;
      
    }

    .text-content h2 {
      
    }

    .text-content h3 {
      
    }

    .text-content p {
  
    }

    .image-content {
        margin-top: -610px;
        flex: 1;
        text-align: right;
        padding-left: 10%;
    }

    .slideshow-container img {
        margin-top: -1%;
    }

    /* Info Section */
    .info-section {
        flex-direction: row; /* Stack info boxes vertically */
        gap: 10px; /* Reduce spacing between info boxes */
        font-size: 0.7rem;
    }

    #info-box-2 {
        font-size: 1rem; /* Adjust font size */
        padding: 10px; /* Add padding */
        text-align: center; /* Center-align text */
    }

    #info-box-2 img {
        width: 60px; /* Adjust image size */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 10px; /* Add spacing below the image */
    }

    .homepage-info-section {

    margin-bottom: 10px;
    margin-right: 50%;
    margin-top: 11%;
    display: block;
    }
    .homepage-info-box {
        max-width: 100%; /* Allow full width */
        text-align: center; /* Center-align info box content */
    }

    .homepage-info-box img {
        width: 50px; /* Reduce symbol size */
        height: auto; /* Maintain aspect ratio */
    }

    .homepage-info-box p {
        font-size: 0.9rem; /* Reduce font size for info box text */
    }

    /* Carousel Section */

        /* Hide the carousel for smaller screens */
        .carousel-container {
            display: none;
        }

        .carousel-navigation {

            display: none;
        }


    
        /* Style the tour regions for media */
        .tour-regions {
            display: flex;
            flex-direction: column; /* Stack items vertically */
            gap: 20px; /* Add spacing between regions */
            margin: 20px auto; /* Center the section horizontally */
            padding: 10px; /* Add padding around the section */
            text-align: center; /* Center-align the text */
            margin-bottom: 100px;
        }
    
        .tour-region {
            display: flex;
            flex-direction: column; /* Stack image and text vertically */
            align-items: center; /* Center-align content */
            gap: 10px; /* Add spacing between image and text */
            text-decoration: none; /* Remove underline from links */
            margin-left: -3%;
        }
    
        .tour-region a {
            text-decoration: none; /* Remove underline from links */
            color: inherit; /* Inherit text color */
        }
    
        .region-image {
            width: 100%; /* Make images responsive */
            max-width: 300px; /* Limit the maximum width */
            height: auto; /* Maintain aspect ratio */
            border-radius: 10px; /* Add rounded corners */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        }
    
        .tour-region p {
            font-size: 1.2rem; /* Adjust font size for readability */
            font-family: 'Playfair Display', serif; /* Use a consistent font */
            color: #333; /* Dark text color */
            margin: 0; /* Remove default margin */
        }
    
        .tour-region:hover .region-image {
            transform: scale(1.05); /* Slight zoom effect on hover */
            transition: transform 0.3s ease; /* Smooth hover effect */
        }

     
            /* Hide the carousel for smaller screens */
            .carousel-container {
                display: none; /* Hide the carousel */
            }
        
            .carousel-navigation {
                display: none; /* Hide the carousel navigation */
            }
        
            /* Show the tour regions in the same section */
            .horizontal-carousel-section {
                display: flex;
                flex-direction: column; /* Stack items vertically */
                align-items: center; /* Center-align content */
                gap: 20px; /* Add spacing between elements */
                padding: 20px; /* Add padding around the section */
                background-color: #f9f9f9; /* Match the carousel background */
                border-radius: 10px; /* Optional: Add rounded corners */
            }
        
            .tour-regions {
                display: flex; /* Show the tour regions */
                flex-direction: column; /* Stack items vertically */
                gap: 20px; /* Add spacing between regions */
                width: 100%; /* Make it take the full width of the section */
                text-align: center; /* Center-align the text */
            }
        
            .tour-region {
                display: flex;
                flex-direction: column; /* Stack image and text vertically */
                align-items: center; /* Center-align content */
                gap: 10px; /* Add spacing between image and text */
                text-decoration: none; /* Remove underline from links */
            }
        
            .region-image {
                width: 100%; /* Make images responsive */
                max-width: 300px; /* Limit the maximum width */
                height: auto; /* Maintain aspect ratio */
                border-radius: 10px; /* Add rounded corners */
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
            }
        
            .tour-region p {
                font-size: 1.2rem; /* Adjust font size for readability */
                font-family: 'Playfair Display', serif; /* Use a consistent font */
                color: #333; /* Dark text color */
                margin: 0; /* Remove default margin */
            }
        

        
 /* Adjust layout for the "Why Licensed Guide" section */
        .why-guide-content {
            display: flex;
            flex-direction: column; /* Stack items vertically */
            align-items: center; /* Center-align content */
            text-align: center; /* Center-align text */
            gap: 20px; /* Add spacing between text and image */
        }
    
        .why-guide-text {
            margin: 0; /* Remove margins */
            max-width: 100%; /* Allow full width */
            text-align: justify;
        }
    
        .why-guide-image {
            margin: 0; /* Remove margins */
            max-width: 100%; /* Allow full width */
            text-align: center; /* Center-align image */
        }
    
        .why-guide-img {
            width: 100%; /* Make the image responsive */
            max-width: 300px; /* Limit the maximum width */
            height: auto; /* Maintain aspect ratio */
            border-radius: 0px; /* Optional: Add rounded corners */
            box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0); /* Optional: Add a subtle shadow */
        }

        .why-licensed-guide {

            margin-right: -100%;
            margin-left: -100%;
        }

        .why-licensed-guide .section-title {
            font-size: 1.7rem;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
            margin-left: 10px;
            margin-top: 10px;
        }















    /* Quote Slideshow Section */
    .quote-slideshow-section {
        padding: 10px; /* Reduce padding */
        text-align: justify; /* Center-align quotes */
        padding-left: 120%;
        padding-bottom: 10%;
        
    }

    .quote-slideshow-container {

        
        
    }

 


    .quote-text {
        font-size: 0.9rem; /* Reduce font size for quotes */
        line-height: 1.4; /* Adjust line height */
        margin-top: 20%;
    }

    .quote-progress-circles .circle {
        width: 10px; /* Reduce circle size */
        height: 10px; /* Maintain aspect ratio */
    }

    /* Footer */
    footer {
        padding: 10px; /* Reduce padding */
        text-align: center; /* Center-align footer content */
    }

    .footer-info p {
        font-size: 0.7rem; /* Reduce font size for footer text */
   
        margin-left: 10%;
     margin-right: -100%;
    }

    .footer-logo img {
        width: 80px; /* Reduce logo size */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: -4%;
    }

    #footer-text {
        font-size: 0.7rem; /* Reduce font size for footer copyright text */
        margin-bottom: 10%;
        margin-right: 15%;
    }


/* TOUR.HTMLt */

.athens-tours{

    margin-top: 30%;
    width: 110%;
    margin-left: -3%;
}
    .tour-card {
        width: 100%; /* Reduce the width of the cards */
        height: auto; /* Let the height adjust dynamically */
        padding: 10px; /* Reduce padding inside the cards */
        margin: 10px auto; /* Center the cards and reduce spacing */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
    }

    .tour-card img {
        height: 200px; /* Reduce the height of the images */
        object-fit: cover; /* Ensure the images cover the area without distortion */
        flex: 1;
        
    }

    .tour-card h2 {
        font-size: 1.2rem; /* Reduce the font size of the headings */
        margin: 10px 0; /* Adjust spacing above and below the heading */
    }

    .tour-card p {
        font-size: 0.9rem; /* Reduce the font size of the text */
        margin: 5px 0; /* Adjust spacing between paragraphs */
    }

    .learn-more-btn {
        padding: 8px 15px; /* Reduce button padding */
        font-size: 0.9rem; /* Reduce button font size */
    }

    .tour-card ul { 
display: none;


    }

    .athens-tours-page .tour-card .image-container {
        flex: 2;
        height: 100%;
        overflow: hidden;
        margin-left: 0px;
        margin-top: -10px;
        transform: translate(-10px, 10px);
        }

        .tour-card h2 {
            font-size: 1.1rem;
            margin: 10px 0;
            text-align: center;
        }
     



        footer {
            padding: 10px; /* Reduce padding */
            text-align: center; /* Center-align footer content */
        }
    
        .footer-info1 p {
            font-size: 0.7rem; /* Reduce font size for footer text */
       
            margin-left: 10%;
         margin-right: -100%;
        }
    
        .footer-logo1 img {
            width: 80px; /* Reduce logo size */
            height: auto; /* Maintain aspect ratio */
            margin-bottom: -4%;
        }
    
        #footer-text1 {
            font-size: 0.7rem; /* Reduce font size for footer copyright text */
            margin-bottom: 10%;
            margin-right: 15%;
        }

/* Media Query for Screens Smaller than 768px */
    /* General Section Styling */


    header h1 {
        font-size: 1.5rem; /* Reduce the font size of the header title */
    }

    nav ul {
        flex-direction: column; /* Stack navigation links vertically */
        gap: 10px; /* Add spacing between links */
    }

    nav ul li a {
        font-size: 1rem; /* Adjust font size for navigation links */
        padding: 5px 10px; /* Reduce padding for links */
    }

    /* Hero Section */
    .hero-section {
        
        flex-direction: column;
        padding: 0px;
        margin-bottom: 20%;
        margin-right: -50%;
        border: 1.5px solid rgb(8, 8, 8);
    }

    .hero-content {

        margin-right: -50%;
    }

    .hero-text {
        text-align: center; /* Center-align the text */
        margin-bottom: 20px; /* Add spacing below the text */
        margin-left: -6%;
    }

    .hero-text h2 {
       
        font-size: 1.9rem;
        
        margin-top: 40%;
margin-bottom: 10%;
    }

    .hero-text p {
        font-size: 1rem; /* Adjust font size for the paragraph */
        margin-left: -12%;
    }

    .hero-image {
        display: none;
    }

  

    /* Tour Details Section */
    .tour-details {
        padding: 20px; /* Add padding around the section */



        margin-right: -50%;
margin-left: 10%;
margin-top: -10%;
    }


    .info-row {
        display: flex; /* Use Flexbox for layout */
        flex-wrap: wrap; /* Allow wrapping for smaller screens */
        justify-content: space-between; /* Distribute items evenly */
        align-items: center; /* Align items vertically in the center */
        gap: 30px;
        margin: -20px auto;
        padding: 10px;
        margin-left: -65%;
        margin-right: 25%;
        width: 180%;
    }

  
    .acropolis-info-box {
        text-align: center; /* Center-align the text inside each box */
        padding: 10px; /* Add padding inside the boxes */
        background-color: #fff; /* Optional: Add a white background */
        border: 1px solid #ddd; /* Optional: Add a border for better visibility */
        border-radius: 5px; /* Optional: Add rounded corners */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    }

    .acropolis-info-box h3 {
        font-size: 1.2rem; /* Adjust font size for headings */
        margin-bottom: 10px; /* Add spacing below the heading */
        color: #333; /* Dark text color */
    }

    .acropolis-info-box p {
        font-size: 1rem; /* Adjust font size for paragraphs */
        color: #555; /* Slightly lighter text color */
    }

    .info-box {
        width: 100%; /* Make info boxes take full width */
        text-align: center; /* Center-align the text */
    }

    .info-box h3 {
        font-size: 1.2rem; /* Adjust font size for headings */
    }

    .info-box p {
        font-size: 1rem; /* Adjust font size for paragraphs */
    }

    /* Gallery Section */
    .gallery-row {
        flex-wrap: wrap;
        gap: 10px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        justify-items: center;
        margin: 2px 20px;
        padding: 10px;
        margin-right: 35%;
        margin-left: -12%;
        margin-top: -5%;

        }
    

    .gallery-image {
        max-width: 85%; /* Make images take full width */
        height: auto; /* Maintain aspect ratio */
    }

    /* Contact Section */
    .contact-section {
        padding: 20px; /* Add padding around the section */
    }

    .contact-box {
        width: 100%; /* Make contact boxes take full width */
        margin-bottom: 20px; /* Add spacing below each box */
    }

    .contact-box h2 {
        font-size: 1.5rem; /* Adjust font size for headings */
    }

    .contact-box p {
        font-size: 1rem; /* Adjust font size for paragraphs */
    }

   

    .back-button-container1 {

        display: none;
    }

  .divider1 {

        display: none;

  }

  .tour-content {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 20px; /* Add spacing between the description and additional information */
    align-items: center; /* Center-align the content */
    text-align: center; /* Center-align text for smaller screens */
}

.tour-text {
    width: 100%;
    max-width: 600px;
    text-align: justify;
    margin: 0 auto;
    margin-right: 10%;
    margin-left: -10%;
    margin-top: 10%;
}

.tour-extra-info {
    width: 100%; /* Make the additional information take full width */
    max-width: 600px; /* Limit the maximum width */
    text-align: justify; /* Keep the text justified */
    margin: 0 auto; /* Center the additional information */
    margin-right: 10%;
    margin-left: -10%;
    margin-top: -10%;
}

.tour-details p{

    margin-right: 25%;
}
  

.info-item {

    margin-right: 30%;
}
  
.gallery-heading {
    font-size: 1.5rem; /* Adjust font size for smaller screens */
    text-align: center; /* Center-align the heading */
    margin-top: 20px; /* Add spacing above the heading */
    margin-bottom: 10px; /* Add spacing below the heading */
    color: #333; /* Optional: Change the color */
    margin-right: 50%;
    margin-left: -20%;

}

.contact-me {

    margin-right: 25%;
}







/* Athens Tours */

/* Tour Cards Section */


.tour-card {
    width: 70%; /* Make cards take full width */
    max-width: 400px; /* Limit the maximum width */
    margin: 0 auto; /* Center the cards */
    padding: 15px; /* Add padding inside the cards */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
    text-align: center; /* Center-align the text inside the cards */
    margin-left: 5%;
}

.tour-card img {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Add rounded corners */
    margin-bottom: 10px; /* Add spacing below the image */
}

.tour-card h2 {
    font-size: 1.2rem; /* Adjust font size for headings */
    margin: 10px 0; /* Add spacing above and below the heading */
}

.tour-card p {
    font-size: 1rem; /* Adjust font size for paragraphs */
    text-align: justify; /* Justify the text */
}

.back-button-container {

    Display: none;
}


/* Footer */
footer {
    padding: 20px; /* Reduce padding for the footer */
    text-align: center; /* Center-align footer content */
}

.footer-info p {
    font-size: 0.8rem; /* Reduce font size for footer text */
    margin: 5px 0; /* Add spacing between footer items */
}

.footer-logo img {
    width: 60px; /* Reduce logo size */
    height: auto; /* Maintain aspect ratio */
    margin: 10px 0; /* Add spacing around the logo */
}

#footer-text {
    font-size: 0.8rem; /* Adjust font size for footer copyright text */
}

.carousel {

    display:none;
}


.tour-card p {

    display: none;
}


footer {
    display: flex; /* Use Flexbox for layout */
    flex-direction: column; /* Arrange items in a column */
    align-items: center; /* Center-align items horizontally */
    text-align: center; /* Center-align text */
    gap: 20px; /* Add spacing between footer sections */
    padding: 20px; /* Add padding around the footer */
}

.footer-info {
    text-align: center; /* Center-align the footer info */
    margin: 0; /* Remove extra margins */
    text-align: left;
margin: 0;
line-height: 1.2rem;
margin-right: 25%;
margin-top: 5%;
}

.footer-info p {

    font-size: 1.1rem;
}

.footer-logo {
    margin: 0 auto; /* Center the logo */
}

.footer-logo img {
    width: 60px; /* Adjust the size of the logo */
    height: auto; /* Maintain aspect ratio */
    margin-left: 40%;
}
    



#footer-text {
    font-size: 0.9rem; /* Adjust font size for copyright text */
    margin: 0; /* Remove extra margins */
}



.about-me-content, .about-me-vision {
    flex-direction: column;
    text-align: center;
}

.about-me-header {
    margin-top: 35%;
    
}
.about-me-text {
    max-width: 100%;
}

.about-me-image {
    max-width: 300px;
}

.about-me-text h2 {
 margin-top: 10%;



}

.about-me-image-right {
    max-width: 100%; /* Make the image responsive */
    margin: 20px auto; /* Add spacing above and below the image */
}

.text-next-to-image {
    margin: 20px auto; /* Add spacing above and below the text */
    text-align: justify; /* Justify the text */
}

.about-me-content, .about-me-vision {
    flex-direction: column; /* Stack items vertically */
    text-align: center; /* Center-align the content */
    margin-right: -5%;
margin-left: -5%;
}

.about-me-images, .text-next-to-image {
    margin: 0 auto; /* Center the content */
}

.text-next-to-image p {

    margin-right: 0%;
margin-left: 0%;


}

.text-next-to-image h2{

    margin-left: 0%;
    margin-top: 10%;

}

.about-me-image-right {


   display:none;
}

.about-me-footer ul li {
    margin-right: -3%;
    margin-left: -3%;

}

/* Media Query for Contact Page (Screens Smaller than 768px) */
    /* Contact Section */
    .contact-section {
        padding: 20px; /* Reduce padding for smaller screens */
    }

    .contact-container {
        flex-direction: column; /* Stack items vertically */
        text-align: center; /* Center-align the content */
        gap: 20px; /* Add spacing between items */
    }

    .contact-info {
        max-width: 100%; /* Allow full width for the text */
        text-align: center; /* Center-align the text */
    }

    .contact-info ul {
        padding: 0; /* Remove padding */
        text-align: center; /* Center-align the list */
    }

    .contact-info ul li {
        font-size: 1rem; /* Adjust font size for smaller screens */
        margin-bottom: 10px; /* Add spacing between list items */
    }

    .contact-info ul li a {
        font-size: 1rem; /* Adjust font size for links */
    }

    .contact-image {
        max-width: 100%; /* Allow full width for the image */
        margin: 0 auto; /* Center the image */
    }

    .contact-image img {
        max-width: 350px;
        height: auto;
        border-radius: 10px;
        margin-bottom: 10%;
        
        
    }

 .contact-text h2 {

    margin-right: -20%;
margin-left: -20%;
margin-top: 60%;
 }

 .contact-text ul {

    margin-right: -15%;
 }




.attica-tour .image-container img {
    content: url('attica1.jpg'); /* Replace with the Attica image */
}

 

}


/* Prevent horizontal scrolling */


/* Ensure all sections fit within the viewport *


    /* Ensure all sections fit within the viewport */

    /* Adjust padding and margins to avoid overflow */
    .toggle-button {
        display: block;
        margin: 20px auto;
        padding: 10px 20px;
        font-size: 1rem;
        background-color: #333;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    
    .toggle-button:hover {
        background-color: #555;
    }
    
    .map-container {
        margin-top: 20px;
        border: 2px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .carousel-container,
.map-container {
    width: 100%;
    margin: 0 auto;
}

.carousel-container {
    display: block; /* Ensure the carousel is visible by default */
}

.map-container {
    display: none; /* Ensure the map is hidden by default */
}

.toggle-button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.toggle-button:hover {
    background-color: #555;
}


/* Itinerary Section */
.itinerary {
    display: flex;
    flex-direction: column; /* Stack steps vertically */
    gap: 20px; /* Add spacing between steps */
    margin-top: 10px;
}

.itinerary-step {
    display: flex;
    align-items: flex-start; /* Align icons and content at the top */
    gap: 15px; /* Add spacing between the icon and content */
    position: relative;
}

.step-icon {
    width: 40px; /* Set the width of the icon */
    height: 40px; /* Set the height of the icon */
    background-image: url('swirl1.png'); /* Use swirl1.png as the background */
    background-size: cover; /* Ensure the image covers the entire icon area */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    flex-shrink: 0; /* Prevent the icon from shrinking */
}

.step-content {
    flex: 1; /* Allow the content to take up remaining space */
}

.step-content h5 {
    font-size: 1.1rem;
    margin: 0 0 5px; /* Add spacing below the heading */
    color: #333; /* Dark text color */
}

.step-content p {
    font-size: 0.9rem;
    margin: 0; /* Remove default margins */
    color: #555; /* Slightly lighter text color */
}

.itinerary-step::before {
    content: "";
    position: absolute;
    width: 2px;
    height: calc(100% + 20px); /* Extend the line between steps */
    background-color: #ddd; /* Light gray line */
    left: 20px; /* Align with the center of the icon */
    top: 40px; /* Start below the icon */
    z-index: -1; /* Place the line behind the content */
}

.itinerary-step:last-child::before {
    display: none; /* Remove the line for the last step */
}

.acropolis-info-box {
    display: flex; /* Use Flexbox for layout */
    align-items: center; /* Center the icon and text vertically */
    gap: 15px; /* Add spacing between the icon and text */
    padding: 10px 0; /* Add vertical padding */
    text-align: left; /* Align text to the left */
    border-bottom: 1px solid #ddd; /* Optional: Add a subtle bottom border */
    background-color: transparent; /* Remove the background color */
    box-shadow: none; /* Remove any shadow */
    border: none; /* Remove any border */
}

.acropolis-info-box h3 {
    font-size: 1.2rem; /* Adjust font size for headings */
    margin: 0; /* Remove default margins */
    color: #333; /* Dark text color */
}

.acropolis-info-box p {
    font-size: 1rem; /* Adjust font size for text */
    margin: 0; /* Remove default margins */
    color: #555; /* Slightly lighter text color */
}

/* Icon Styling */
.acropolis-info-box::before {
    content: ''; /* Add an empty content for the icon */
    display: inline-block; /* Make it inline with the text */
    width: 40px; /* Set the width of the icon */
    height: 40px; /* Set the height of the icon */
    background-image: url('swirl1.png'); /* Replace with your icon's path */
    background-size: cover; /* Ensure the icon covers the area */
    background-position: center; /* Center the icon */
    background-repeat: no-repeat; /* Prevent the icon from repeating */
    flex-shrink: 0; /* Prevent the icon from shrinking */
    border-radius: 50%; /* Optional: Make the icon circular */
}



.footer-sitemap {
    margin-top: 20px;
    text-align: left; /* Align text to the left */
    padding: 20px; /* Add padding around the site map */

}

.footer-sitemap h4 {
    font-size: 1.1rem; /* Slightly larger font size for the heading */
    margin-bottom: 15px; /* Add spacing below the heading */
    color: #333; /* Dark text color */
    font-weight: bold; /* Make the heading bold */
    text-transform: uppercase; /* Capitalize the heading */
    border-bottom: 2px solid #ddd; /* Add a subtle underline */
    padding-bottom: 5px; /* Add spacing below the underline */
    text-align: center;
}

.footer-sitemap ul {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.footer-sitemap ul li {
    margin-bottom: 10px; /* Add spacing between links */
    display: flex; /* Use Flexbox for alignment */
    align-items: center; /* Center-align icons and text */
    gap: 10px; /* Add spacing between the icon and text */
}

.footer-sitemap ul li a {
    text-decoration: none; /* Remove underline from links */
    color: #555; /* Slightly lighter text color */
    font-size: 1rem;
    transition: color 0.3s ease, transform 0.3s ease; /* Add a hover effect */
}

.footer-sitemap ul li a:hover {
    color: #000000; /* Change color on hover */
    transform: translateX(5px); /* Slightly move the link on hover */
}

/* Styling for nested lists */
.footer-sitemap ul li ul {
    margin-left: 20px; /* Indent the sub-list */
    padding-left: 10px; /* Add padding for better spacing */
    border-left: 2px solid #ddd; /* Add a subtle vertical line */
}

.footer-sitemap ul li ul li {
    margin-bottom: 5px; /* Add spacing between sub-links */
    display: flex; /* Use Flexbox for alignment */
    align-items: center; /* Center-align icons and text */
    gap: 10px; /* Add spacing between the icon and text */
}

.footer-sitemap ul li ul li a {
    font-size: 0.9rem; /* Slightly smaller font for sub-links */
    color: #666; /* Slightly lighter color for sub-links */
}

.footer-sitemap ul li ul li a:hover {
    color: #000000; /* Darker hover color for sub-links */
}

/* Icon Styling */
.footer-sitemap ul li::before {
    content: '•'; /* Add a bullet point as the icon */
    color: #000000; /* Blue color for the bullet */
    font-size: 1.2rem; /* Adjust the size of the bullet */
}

.footer-sitemap ul li ul li::before {
    content: '›'; /* Add an arrow for sub-links */
    color: #666; /* Grey color for the arrow */
    font-size: 1rem; /* Adjust the size of the arrow */
}


/* Recommended Tours Section */
.recommended-tours {
    padding: 70px 120px;
    background-color: #f9f9f9; /* Light grey background */
    text-align: center;
  
}

.recommended-tours h3 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #333;
    font-weight: bold;
}

.recommended-tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 20px;
    justify-items: center; /* Center-align the grid items */
}

.recommended-tour-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    width: 100%; /* Ensure the box takes full width of the grid column */
    max-width: 350px; /* Limit the maximum width */
}

.recommended-tour-box:hover {
    transform: translateY(-10px); /* Lift the card on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a stronger shadow on hover */
}

.recommended-tour-box img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Ensure the image covers the area */
    border-bottom: 1px solid #ddd;
}

.tour-box-content {
    padding: 15px;
}

.tour-box-content h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #000000;
    
}

.tour-box-content h4 a {
    text-decoration: none;
    text-align: center;
    color: inherit;
}

.tour-box-content h4 a:hover {
    text-decoration: underline;
}

.tour-box-content p {
    font-size: 0.9rem;
    color: #555;
    margin: 0;
}

.custom-underline {
    text-decoration: none; /* Remove default underline */
    border-bottom: 2px solid #c1c1c1;
    padding-bottom: 0px; /* Add spacing between text and underline */
    transition: border-color 0.3s ease; /* Smooth transition for hover effect */
}

.custom-underline:hover {
    border-bottom-color: #000000; /* Change underline color on hover */
}



/* Default Images for Larger Screens */
.attica-image {
    content: url('attica.jpg');
}

.peloponnese-image {
    content: url('acorinth.jpeg');
}

.central-greece-image {
    content: url('central.jpg');
}

.saronic-gulf-image {
    content: url('spetses1.jpg');
}

.cyclades-image {
    content: url('cyc1.jpg');
}



/* Media Query for Smaller Screens */
@media (max-width: 768px) {
    .attica-image {
        content: url('attica.jpg'); /* Replace with the smaller image for Attica */
    }

    .peloponnese-image {
        content: url('acorinth-phone.jpg'); /* Replace with the smaller image for Peloponnese */

    }

    .central-greece-image {
        content: url('central-phone.jpg'); /* Replace with the smaller image for Central Greece */
    }

    .saronic-gulf-image {
        content: url('spetses1-phone.jpg'); /* Replace with the smaller image for Saronic Gulf */
    }

    .cyclades-image {
        content: url('cyc1-phone.jpg'); /* Replace with the smaller image for Cyclades */
    }

    .tour-card img {
        width: 90%;
        height: auto;
        border-radius: 10px;
        margin-bottom: 0px;
        }

        .tour-card h2 {
            font-size: 1.1rem; /* Adjust font size for smaller screens */
            margin: 10px 0; /* Add spacing above and below the heading */
        }


        .footer-info1 {

            margin-left: 57%;
    

        }

        .footer-info1 p {

            font-size: 1.0rem;
        }

        #footer-text1 {

            font-size: 1.0rem;
            margin-bottom: 10%;
            margin-right: -210%;
        }

    .footer-logo1 img {
         
            margin-left: 0%;
        }
        
}