@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

:root{
--app-main:#ee3388;
--app-main-rgba:rgb(238, 51, 136);
--app-orange:#FFAC1C;
--app-main-dark:#921c51;
--app-coral:#FF7F50;
--dark-orange:#8B4000;
--grey:#D3D3D3;
}

#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}

.circle {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
border-style: solid;
border-width: 6px;
transform: translate(-50%, -50%);
}

.circle.inner {
width: 40px;
height: 40px;
border-color: var(--app-main) transparent var(--app-main) transparent; /* Red */
animation: spinClockwise 1s linear infinite;
}

.circle.middle {
width: 70px;
height: 70px;
border-color: var(--app-coral) transparent var(--app-coral) transparent; 
animation: spinCounter 1.5s linear infinite;
}

.circle.outer {
width: 100px;
height: 100px;
border-color: #ee3388 transparent #ee3388 transparent; 
animation: spinClockwise 2s linear infinite;
}

@keyframes spinClockwise {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spinCounter {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(-360deg); }
}


#loader.hidden {
opacity: 0;
visibility: hidden;
}
.tour-price{
    display: flex;
    justify-content: center;
}

.form-check-label-d{
    color: #fff;
    font-weight: bold;
}

.deposit-info{
    margin-top: 50px;
    background-color: var(--app-coral);
    color: #fff;
}

.navbar-brand img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .navbar-collapse {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .nav-item {
        border-bottom: 1px solid #eee;
    }
    .register-login {
        margin-top: 15px;
    }
}

.nir-btn {
    padding: 8px 25px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
}


.inclusions{
    color: #32CD32;
}

.exclusions{
    color:#C41E3A;
}

.tour-price h5{
font-family: "Quicksand", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
font-size: 30px;
}

.tour-price span{
    font-size: 20px;
}




.tour-booking{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.book-btn{
width: 400px;
padding: 10px;
margin-left: 30px;
border-radius: 8px;
margin-right: 30px;
color: #fff;
background-color: var(--app-main);
}

.book-btn:hover{
    background-color: var(--app-orange);
}

.booking-page{
    margin: 80px 0;
}

.booking-form{
border: 1px solid #000;
outline: 1px solid #000;

}

.blgImg{
    width: 1000px;
    height: 500px;
    margin-bottom: 40px;
}

.booking-form:focus {
border: 1px solid var(--app-main);
font-weight: 400;
color: #000;

    }

.participants{
    margin-top: 30px;
}
.book-btn{
    width: 100%;
}
.masonry-grid {
column-count: 3;
column-gap: 1.5rem;
}

@media (min-width: 768px) {
.masonry-grid {
    column-count: 3;
    column-gap: 1.5rem;
}

.mansonry-item {
    display: inline-block;
    width: 100%;
}
}

.mansonry-item{
margin-bottom: 1.5rem;
break-inside: avoid;
}

 @media (max-width: 991px) and (min-width: 768px) {
.masonry-grid {
    column-count: 2;
}
}

 @media (max-width: 767px) {
.masonry-grid {
    column-count: 1;
}
}

.gallery-item {
margin-bottom: 1.5rem;
break-inside: avoid;
}

.booking-container {
background-color: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin: 30px auto;
}

.booking-header {
background: linear-gradient(to right, #3498db, #2c3e50);
color: white;
padding: 30px;
text-align: center;
}
.alert{
    color: #C41E3A;
}
.booking-image {
height: 200px;
background-size: cover;
background-position: center;
border-radius: 10px;
margin-bottom: 20px;
}
.booking .form-section {
padding: 30px;
}

#bookingForm .form-label {
font-weight: 600;
color: #2c3e50;
}

.btn-book {
background: linear-gradient(to right, #3498db, #2c3e50);
border: none;
padding: 12px 30px;
font-weight: 600;
transition: all 0.3s;
}
.btn-book:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.bprice-card {
background-color: #f8f9fa;
border-radius: 10px;
padding: 20px;
margin-top: 20px;
border-left: 5px solid #3498db;
}

.btour-feature {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.btour-feature i {
color: #3498db;
margin-right: 10px;
}
.social-link i{
    font-size: 30px;
}

.dest-link{
    color: #fff;
}

.dest-link:hover{
    color: #ee3388;
}

.coming-soon-icon i{
font-size: 50px;
color: var(--app-coral);
}

.terms .hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.)),
 url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
 /* url(assets/images/bg/terms.jpg); */
background-size: cover;
background-position: center;
color: white;
padding: 100px 0;
margin-bottom: 40px;
}

.terms .section-title {
position: relative;
padding-bottom: 15px;
margin-bottom: 30px;
font-weight: 600;
}

.price-card {
color: white;
border-radius: 15px;
padding: 30px;
}

.terms .section-title:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 60px;
height: 3px;
background-color: var(--travel-teal);
}

.terms-content {
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
padding: 40px;
margin-bottom: 40px;
}

.terms-section {
margin-bottom: 40px;
}

.terms-section h3 {
color: #ee3388;
margin-bottom: 20px;
font-size: 1.4rem;
}

.highlight-box {
background-color: #e7f3ff;
border-left: 4px solid #FFAC1C;
padding: 20px;
margin: 25px 0;
border-radius: 0 5px 5px 0;
}

.c-input{
    outline: 1px solid black;
}

.c-input:focus{
    border: 1px solid #ee3388;
}

.hotel-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.crise-icon{
    width: 60px;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--app-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cruise-date{
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}

.crise-icon i{
    font-size: 40px;
    color: #fff;
}

.booking-card {
background-color: var(--app-coral);
border-radius: 10px;
padding: 30px;
position: sticky;
top: 20px;
}

@media (max-width: 768px) {
.booking-card {
position: static;
margin-top: 30px;
}
}

.hero-section.cruise{

background-position: center;

height: 400px;
color: white;
padding: 100px 0;
margin-bottom: 40px;
}

@media (max-width: 768px) {
.hero-section.cruise {
    padding: 60px 0;
}
}
            

.hotel-header {
padding: 20px;
background: var(--app-main);
color: white;
}

.hotel-name {
font-size: 1.5rem;
margin-bottom: 5px;
color: #fff;
}

.hotel-location {
display: flex;
align-items: center;
font-size: 0.9rem;
opacity: 0.9;
}

.hotel-location i {
margin-right: 5px;
}

.hotel-rating {
display: flex;
margin-top: 10px;
}

.hotel-rating .stars {
color: #FFD700;
margin-right: 10px;
}

.hotel-rating .rating-value {
font-weight: bold;
}

.owl-carousel {
position: relative;
}

.hotel-image {
height: 300px;
background-size: cover;
background-position: center;
}

.hotel-details {
padding: 20px;
}

.hotel-description {
margin-bottom: 15px;
color: #555;
font-size: 0.95rem;
}

.hotel-features {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 15px;
}

.cabin-room .gallery{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
padding: 1rem;
}

.cabin-room .gallery img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 12px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}

.glightbox .gnext,
.glightbox .gprev,
.glightbox .gclose { 
    position: absolute;
    display: block;
    z-index: 9999;
}


.cabin-room .gallery img:hover {
    transform: scale(1.03);
}

.feature {
background: #f0f8ff;
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
color: #2c3e50;
}

.hotel-price {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #eee;
}

.price {
font-size: 1.4rem;
font-weight: bold;
color: #e74c3c;
}

.price span {
font-size: 0.9rem;
color: #777;
font-weight: normal;
}

.book-btn {
background: linear-gradient(to right, #e74c3c, #c0392b);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
}

.book-btn:hover {
background: linear-gradient(to right, #c0392b, #a93226);
transform: scale(1.05);
}

.owl-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
padding: 0 15px;
}

.owl-prev, .owl-next {
background: rgba(0, 0, 0, 0.5) !important;
color: white !important;
width: 40px;
height: 40px;
border-radius: 50% !important;
display: flex !important;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.owl-prev:hover, .owl-next:hover {
background: rgba(0, 0, 0, 0.8) !important;
}

.owl-dots {
text-align: center;
margin-top: 10px;
}

.owl-dot span {
width: 10px;
height: 10px;
margin: 5px;
background: #ddd !important;
}

.owl-dot.active span {
background: #3498db !important;
}

footer {
text-align: center;
margin-top: 50px;
padding: 20px;
color: #777;
font-size: 0.9rem;
}

@media (max-width: 768px) {
.hotel-list {
    grid-template-columns: 1fr;
}

h1 {
    font-size: 2.2rem;
}
}

.pagination .page-item .page-link{
border-radius: 50% !important;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1; 
}
.pagination .page-item.active .page-link {
background-color: #ff69b4 !important; 
border-color: #ff69b4 !important;
color: white !important;
border-radius: 50% !important;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
}

.pagination .page-link {
min-width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
margin: 0 0.2rem;
border-radius: 0.5rem; 
transition: all 0.2s ease-in-out;
color: #6c757d; 
}

.pagination .page-link:hover {
background-color: #e9ecef;
border-color: #dee2e6;
}
@media only screen and (max-width: 767px) {
    .footer-img{
        background-image: none;
    }
}

.price-option {
display: none;
}
.price-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180px;
height: 150px;
border: 2px solid #dee2e6;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
padding: 15px;
}
.price-label:hover {
border-color: #0d6efd;
background-color: #f8f9fa;
}
.price-option:checked + .price-label {
border-color: #0d6efd;
background-color: #e7f1ff;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
.price-amount {
font-size: 1.3rem;
font-weight: bold;
color: #0d6efd;
}
.price-description {
font-size: 0.9rem;
color: #6c757d;
margin-top: 5px;
}

.price-options-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px;
}
@media (max-width: 768px) {
.price-options-container {
    justify-content: center;
}
}

.testimonial-card {
background: #ffffff;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 1.25rem;
box-shadow: 0 6px 18px rgba(0,0,0,0.03);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.testimonial-body {
display: flex;
gap: 1rem;
align-items: flex-start;
}

.testimonial-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 64px;
border: 2px solid #f1f1f1;
}

.testimonial-quote {
font-size: 0.98rem;
line-height: 1.5;
color: #333;
margin-bottom: 0.75rem;
}

.testimonial-meta {
margin-top: 0.5rem;
font-size: 0.9rem;
color: #6c757d;
}

.testimonial-stars {
color: #f6c84c;
font-size: 0.95rem;
}

/* Make avatar and quote stack on small screens */
@media (max-width: 575.98px) {
.testimonial-body {
flex-direction: column;
align-items: center;
text-align: center;
}
.testimonial-avatar {
margin-bottom: 0.5rem;
}
}

.filter-btn.active{
    background-color: var(--app-main);
    color: #fff;
}

.filter-btn{
    border: 1px solid var(--app-main);
    color: #000;
}

.filter-btn:hover{
    background-color: var(--app-main);
    color: #fff;
    border: none;
}

.filter-btn:focus{
outline: none;
box-shadow: none;
}

.theme-btn{
    background-color: var(--app-main);
    color: #fff;
}

.form-control{
    outline: 1px solid #818589;
}


.price-summary {
background: linear-gradient(135deg, var(--app-coral), var(--dark-orange));
color: white;
border-radius: 15px;
padding: 25px;
}

.book-info{
color: #000;
background-color: #fff;
opacity: 0.9;
}

/*.itinerary-day {*/
/*border-left: 4px solid var(--app-main); */
/*padding-left: 1rem; */
/*margin-bottom: 2.5rem;*/
/*}*/

.cabin-rooms{
    margin-top: 100px;
}

.cruise-itinerary{
    margin-top: 100px;
}

.bg-pink{
background-color:var(--app-main);
color: #fff;
}

.border-orange{
border: 1px solid var(--app-coral);
}
.title-select{
    color: var(--app-coral);
}

.bg-grey{
background-color: var(--grey);
}

.border-main{
    border: 1px solid var(--app-main);
}
.border-main:focus{
    border: 1px solid var(--app-coral);
}

.btn:focus,
.btn:active,
.btn:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}
.btn:focus,
.btn:active,
.btn:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

.page-item:focus,
.page-item:active,
.page-item:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

.adBar{
margin-top: 80px;
}

.extra-header{

background-color: var(--app-main);

   
}
.text-orange{
    color: var(--app-coral);
}

.text-main{
    color: var(--app-main);
}

.extra-header h3,i{
    color: white;
}

.dev{
    color: #000;
}

.dev:hover{
    color: var(--app-main-dark);
}

.social-btn:hover i{
    color: #fff;
}

.pink-alert{
background-color: #ee338746;
width: fit-content;
display: flex;
align-items: center;
height: 30px;
padding: 8px;
border-radius: 10px;
color: #000;
margin-left: auto;
margin-right: auto;

}


.btn-pink-outline{
    border: 1px solid var(--app-main);
    color: var(--app-main);
}

.btn-pink-outline:hover{
    background-color: var(--app-main);
    color: #fff;
}



.payment-option .form-check-input:checked {
border: 3px solid #ee3388;
background-color: #fff;
box-shadow: 0 0 0 0.25rem rgba(238, 51, 136, 0.35);
}

.payment-option .form-check-input:checked ~ .form-check-label {
font-weight: 600;
color: #ee3388;
}

.payment-option {
padding: 12px;
border-radius: 8px;
transition: all 0.2s ease-in-out;
}

.pagination {
    font-size: 0.85rem;  /* smaller text */
}

.pagination .page-link {
    padding: 0.25rem 0.5rem; /* smaller buttons */
}