/* General Styles for the Package Section */
.package--home {
    display: grid; /* Using grid layout for organizing columns */
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    gap: 35px; /* Spacing between columns */
}

.package-col {
    position: relative; /* Enables positioning of child elements relative to this container */
}

/* Styling the Image Container */
.package-image {
    width: 100%; /* Full width of the parent container */
    background: url() 50% 50% no-repeat; /* Centered background image */
    background-size: cover; /* Scale image to cover entire container */
    background-clip: content-box; /* Clipping to content box */
    position: relative; /* Allows for pseudo-elements positioning */
}

/* Maintaining Aspect Ratio for Images */
.package-image:before {
    display: block; /* Creates a block for aspect ratio */
    content: ""; /* Empty content for the pseudo-element */
    padding-top: 135%; /* Aspect ratio based on height (e.g., 135% of width) */
}

/* Styling the Content Overlay */
.package-content {
    z-index: 2; /* Places content above background */
    position: absolute; /* Positioned relative to the parent container */
    width: 100%; /* Full width */
    bottom: 0; /* Positioned at the bottom */
    left: 0; /* Positioned on the left */
}

/* Inner Content Padding */
.package-content-inner {
    padding: 30px; /* Padding inside the content container */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.5s ease-in-out; /* Smooth fade-in effect */
}

/* Styling the Package Name */
.package-name {
    font-weight: 600; /* Bold text */
    color: #fff; /* White text color */
    font-size: 22px; /* Font size */
    margin-bottom: 8px; /* Spacing below the name */
}

/* Styling the Package Day Information */
.package-day {
    color: #fff; /* White text color */
    font-size: 19px; /* Font size */
}

/* Styling the Package Button */
.package-button {
    margin-top: 15px; /* Space above the button */
}

/* Background Gradient for Overlay */
.package-bg {
    width: 100%; /* Full width of parent */
    height: 100%; /* Full height of parent */
    position: absolute; /* Positioned relative to the parent container */
    top: 0; /* Positioned at the top */
    z-index: 1; /* Layered below the content */
    background-image: linear-gradient(180deg, #00000000, #00000026, #0000003d, #00000069, #000000f0); /* Gradient effect */
}

/* Responsive Design for Different Screen Sizes */
@media screen and (max-width: 1200px) {
    /* Add any specific styles here for screens below 1200px width */
}

@media screen and (max-width: 1100px) {
    /* Add any specific styles here for screens below 1100px width */
}

@media screen and (max-width: 990px) {
    .package--home {
        grid-template-columns: 1fr 1fr; /* Two columns for medium screens */
        gap: 35px;
    }
}

@media screen and (max-width: 560px) {
    .package--home {
        grid-template-columns: 1fr; /* Single column for small screens */
        gap: 35px;
    }
}

/* Hover Effects */
.package-main-name {
    opacity: 1; /* Initially visible */
    transition: opacity 0.5s ease-in-out; /* Smooth fade-out effect */
    position: absolute; /* Positioned relative to the parent container */
    bottom: 0; /* Positioned at the bottom */
    width: 100%; /* Full width */
    font-weight: 600; /* Bold text */
    color: #fff; /* White text color */
    font-size: 22px; /* Font size */
    padding: 25px; /* Padding inside the container */
}

/* Hide the Main Name and Show Inner Content on Hover */
.package-col:hover .package-main-name {
    opacity: 0; /* Fade out main name */
    display: none; /* Hide element */
}

.package-col:hover .package-content-inner {
    opacity: 1; /* Fade in inner content */
}