/** Mobile-only CSS **/
@media screen and (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
	
	.ccc-top-plus-three .three-column-section {
		display: block;
	}
	
	.ccc-top-plus-three .three-column-section .colu {
        flex: 0 0 100%;
        max-width: 100%;
    }
	
	.booking-idx .ananke-list section.cf {
        flex-direction: column; /* Stack items vertically */
    }
    .booking-idx .ananke-list section.cf p a {
        width: auto; /* Adjust width for mobile */
        height: auto; /* Adjust height for mobile */
    }
}

@media screen and (max-width: 650px) {
	.top-nav {
		padding: 5px;
	}
	
    .menu-header ul.pl0 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Center items horizontally */
        list-style: none; /* Remove default list styling */
        padding: 0; /* Remove default padding */
    }

    .menu-header ul.pl0 > li.list {
        flex: 0 0 45%;
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
        padding: 10px; /* Add some padding inside the border */
        text-align: center; /* Center the text */
        border: 1px solid #000; /* 1px solid black border */
        border-radius: 5px; /* Rounded corners */
        margin: 5px; /* Add some space between the items */
    }

    /* Hide dropdowns */
    .menu-header ul.pl0 > li.list .dropdown-content {
        display: none;
    }
	
	.ccc-baseof .ananke-list {
		padding: 5px;
	}
	
	.cruise-types {
		flex-wrap: wrap;
	}
	
	.cruise-types .present-4-column {
		flex-basis: 50%;
	}
	
	.cruise-types .column-2 {
		border: none !important;
	}
	
	.cruise-types .column-1, .cruise-types .column-2 {
		border-bottom: solid black 2px;
	}
}

/** Smallest Screens **/
@media screen and (max-width: 440px) {
	header.bg-top {
		background-size: cover;
		max-height: 10vh;
		min-height: 0;
	}
}

/** Medium Screens **/
@media screen and (min-width: 441px) and (max-width: 749px) {
	header.bg-top {
		background-size: cover;
		max-height: 20vh;
		min-height: 0;
	}
}

/** Larger Screens **/
@media screen and (min-width: 750px) {
	header.bg-top {
		background-size: cover;
	}
}

/** tc1 override for present-4-column **/
@media screen and (max-width: 60em) {
	.cruise-types h1, .cruise-types .content p a, .cruise-types .content p small {
		text-align: center;
	}
}