/* General styles for the whole page */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #000000;
    color: #eaeaea;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Container that wraps the entire content */
.container {
    width: 100%;
    max-width: 700px;
    padding: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    background-color: #1a1a1a;
    border-radius: 12px;
    margin: 20px;
}

/* Styles for the image container section */
.image-container {
    position: relative;
    background-image: url('images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 400px;
    border-radius: 12px;
}

/* Styles for the text that overlays the image */
.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
}

/* Styles for the h1 heading inside the text overlay */
.text-overlay h1 {
    font-size: 3.3rem;
    margin: 0;
}

/* Styles for the paragraph text inside the text overlay */
.text-overlay h2 {
    font-size: 1.2rem;
    margin-top: 140px;
}

/* Form styles */
.input-form {
    background-color: #2a2a2a;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    max-width: 600px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

label {
    display: block;
    font-size: 1rem;
    color: #ffffff;
    margin-bottom: 7px;
}

input {
    width: 100%;
    max-width: 580px;
    padding: 12px;
    border: 1px solid #444444;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #333333;
    color: #ffffff;
    transition: border-color 0.3s ease;
    margin-bottom: 8px;
}

input:focus {
    border-color: #4CAF50;
    outline: none;
}

button {
    width: 100%;
    padding: 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}

/* Styles for the itinerary section */
.itinerary {
    padding: 20px;
    background-color: #2a2a2a;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Itinerary card */
.itinerary-item {
    background-color: #1a1a1a;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.itinerary-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Styling for the itinerary content */
.itinerary-item h3 {
    font-size: 1.6rem;
    color: #4CAF50;
    margin-bottom: 10px;
}

.itinerary-item p {
    font-size: 1rem;
    margin: 5px 0;
}

.itinerary-item strong {
    font-weight: 600;
}

/* Styling the link buttons */
.itinerary-item a {
    display: inline-block;
    background-color: #4CAF50;
    color: #fff;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.itinerary-item a:hover {
    background-color: #45a049;
}

/* Horizontal rule to separate itinerary items */
.itinerary-item hr {
    margin: 15px 0;
    border: none;
    border-top: 1px solid #444;
}


/* Styles for textarea (preferences) */
textarea {
    width: 100%; /* Full width like the input fields */
    max-width: 580px; /* Ensure consistency with the input fields */
    padding: 12px; /* Add padding to make it look good */
    border: 1px solid #444444; /* Same border as input fields */
    border-radius: 8px; /* Rounded corners like input fields */
    font-size: 1rem; /* Font size consistent with the other fields */
    background-color: #333333; /* Same background color as input fields */
    color: #ffffff; /* White text inside the textarea */
    transition: border-color 0.3s ease; /* Smooth transition for border focus */
    margin-bottom: 15px; /* Space below the textarea */
    resize: vertical; /* Allow vertical resizing but prevent horizontal resizing */
}

textarea:focus {
    border-color: #4CAF50; /* Green border on focus to match input fields */
    outline: none; /* Remove the default focus outline */
}

/* Style the itinerary item box */
.itinerary-item {
    background-color: #1a1a1a;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Align the checkbox and title in the same row */
.title-container {
    display: flex;
    align-items: center; /* Vertically align the checkbox and title */
    margin-bottom: 10px; /* Add space below the title */
}

/* Style the checkbox to be smaller and reduce hitbox */
.title-container input[type="checkbox"] {
    transform: scale(2.5); /* Reduce checkbox size */
    margin-right: 20px;  /* Space between checkbox and title */
    padding: 0;         /* Ensure no padding around the checkbox */
    width: auto;        /* Ensure checkbox doesn’t take up extra width */
    height: auto;       /* Ensure checkbox doesn’t take up extra height */
    accent-color: #4CAF50; /* Customize checkbox color */
    cursor: pointer;
}

/* Remove default margin from the title */
.title-container h3 {
    margin: 0; /* Remove default margin */
    padding: 0; /* Ensure no padding */
    font-size: 1.8rem; /* Optional: adjust title size */
}
/* Page Layout: Flexbox to separate the ads and main content */
.page-layout {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* Main container where the content (form, itinerary) goes */
.container {
    width: 60%; /* Main content takes up the middle 60% */
    padding: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    background-color: #1a1a1a;
    border-radius: 12px;
    margin: 20px;
}

/* Increase the width of the ads container */
.left-ads, .right-ads {
    width: 20%; /* Increase width to give more space for ads */
}

/* Adjust the main content container to fit */
.container {
    width: 55%; /* Adjust to ensure it fits with the ads */
}


/* Style the ad section to ensure it looks good */
.ads {
    background-color: #2a2a2a;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Style the Kaboodle ads within the ads container */
.kaboodle-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.kaboodle-header {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 10px;
}

.kaboodle-item p {
    font-size: 0.9rem;
    color: #fff;
}

.schedule-item {
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 15px;
}

.schedule-item p {
    font-size: 1rem;
    color: #333;
    margin: 5px 0;
}



/* Make the page responsive */
@media (max-width: 768px) {
    .page-layout {
        flex-direction: column;
        align-items: center;
    }

    .container {
        width: 90%;
    }

    .left-ads, .right-ads {
        width: 100%;
        margin-bottom: 20px;
    }
}






/* Media Queries for responsiveness */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }

    h1 {
        font-size: 1.75rem;
    }

    .itinerary-item {
        padding: 15px;
    }

    .itinerary-item h3 {
        font-size: 1.4rem;
    }

    .itinerary-item p {
        font-size: 0.9rem;
    }
}