/* cruise.css */

#scrollToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
}
#scrollToTop i {
    font-size: 24px; /* Adjust icon size */
}

#scrollToTop:hover {
    background-color: #f9f6ee; /* Change color on hover */
    color: #d6032f; /* Change text color on hover */
}

.hero .section-title {
    font-size: 2.5rem;      /* Example size */
    font-weight: bold;      /* Example weight */
    color: #333;            /* Example color */
    margin-bottom: 3rem;    /* This corresponds to .mb-5 */
    text-align: center;      /* Example alignment */
}

.deals .card-title {
    font-size: 2.5rem;      /* Match this with the .section-title */
    font-weight: bold;      /* Match this with the .section-title */
    color: #333;            /* Match this with the .section-title */
    margin-bottom: 3rem;    /* Match this with the .mb-5 */
    text-align: center;      /* Match this with the .section-title */
}

#exploreDealsButton {
    background-color: #d6032f; /* Desired background color */
    color: #f9f6ee; /* Text color */
    border: 2px solid #d6032f; /* Border color and width */
  }

#exploreDealsButton:hover {
background-color: #f9f6ee; /* Hover background color */
color: #d6032f; /* Hover text color */
border-color: #d6032f; /* Hover border color */
}

.cruiseDeals .card-title {
    font-size: 2.5rem;      /* Match this with the .section-title */
    font-weight: bold;      /* Match this with the .section-title */
    color: #333;            /* Match this with the .section-title */
    margin-top: 5rem;
    margin-bottom: 2rem;    /* Match this with the .mb-5 */
    text-align: left;      /* Match this with the .section-title */
  }

.heroImages img {
    border-radius: 5px; /* Adds rounded corners */    
}

html {
    scroll-behavior: smooth;
}

  
/* Video Cards Styles */
.videoCards .card {
    border: none; /* Removes border from video cards */
}

/* Responsive Video Embedding */
.embedResponsive {
    position: relative; /* Establishes positioning context for the video */
    display: block; /* Ensures it's treated as a block element */
    height: 0; /* Starts with a height of 0 for responsive sizing */
    padding-bottom: 56.25%; /* Maintains a 16:9 aspect ratio */
    overflow: hidden; /* Hides any overflow */
    width: 100%; /* Make the container take the full width */
}

.embedResponsiveItem {
    position: absolute; /* Positions the video absolutely within the container */
    top: 0; /* Aligns video to the top of the container */
    left: 0; /* Aligns video to the left of the container */
    width: 100%; /* Sets width to 100% of the container */
    height: 100%; /* Sets height to 100% of the container */
    border: 0; /* Removes border from video */
    object-fit: cover; /* Ensures the video covers the entire area without distortion */
}

.service-card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.service-card {
    height: 400px; /* You can keep or adjust this as needed */
    overflow: hidden; /* Ensures content does not overflow the card */
    max-width: 80%; /* Set the desired max width for the video cards */
    margin: 0 auto; /* Center the video cards */
}

.custom-bg-1 {
    background-color: #eff5f5; /* Light blue background color */    
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.4s ease; /* Smooth transition effect */
}
.custom-bg-2 {
    background-color: #eff1e8; /* Light blue background color */    
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.4s ease; /* Smooth transition effect */
}

.custom-bg-3 {
    background-color: #eee8ee; /* Light blue background color */    
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.4s ease; /* Smooth transition effect */
}

.pdf-card {
    background-color: #fff; /* White background for the card */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin: 20px auto; /* Center the card and add vertical margin */
    max-width: 100%; /* Limit the width on larger screens */
    padding: 15px; /* Add padding inside the card */
    display: flex; /* Use flexbox layout */
    flex-direction: row; /* Stack child elements horizontally */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */
}

.pdf-viewer-container {
    user-select: none; /* Prevent text selection, but not scrolling */
    height: 750px; /* Ensure the viewer has a defined height */
    overflow-y: auto; /* Enable scrolling if content overflows */
    border: none; /* Remove any border */
    flex: 1; /* Allow this to take the available space */
}

.page-sidebar {
    border-right: 2px solid #f0e9eb; /* Border to separate from the PDF viewer */
    padding: 10px; /* Padding around the sidebar */
    background-color: #fff; /* White background for the sidebar */
    height: 750px; /* Match the height of the PDF viewer */
    max-width: 250px; /* Set a max width for the sidebar */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Hide horizontal overflow */
}

.page-thumbnail {
    width: 200px; /* Width of the thumbnail */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover;      /* Ensures the thumbnail covers the area without distortion */
    margin-bottom: 5px;     /* Space between thumbnails */
    cursor: pointer;        /* Pointer on hover */
    border: 2px solid transparent; /* Initial border */
    transition: border-color 0.3s; /* Smooth border color change */
    border-radius: 5px;    /* Optional: adds rounded corners to thumbnails */
}

.page-thumbnail:hover {
    border-color: #eff0e5; /* Highlight border on hover */
}