body{
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    font-style: normal;
    margin: 0;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'Poppins', sans-serif;
    font-weight:500 !important;
}

div{
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}

span{
    font-size: 0.8rem;
}
small{
    font-size: 0.7rem;
}

/* Hero Section */
.hero {
    width: 100%;
    background: url(../images/bg.png) no-repeat center bottom -200px;
    background-size: cover;
    position: relative;
    z-index: 1;
    margin-bottom: 50px;

    height: 120px;
}

/* After Overlay */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;

    /* Stylish gradient overlay */
    background: linear-gradient(
        135deg,
        rgba(0, 223, 216, 0.8),
        rgba(1, 106, 204, 0.8)
    );

    z-index: 2;
    pointer-events: none;
}

@media (max-width: 768px) { 
    .hero {
        height: 800px !important;
        background-image: url("../images/mobile-bg.png");
        background-position: center top; 
        background-repeat: no-repeat;
        background-size: cover; 
    }

    .navbar-nav .nav-item .btn-primary{
        margin-bottom: 5px;
    }
}

@media (max-width: 991px){
    
    .navbar-nav .nav-item .btn-primary{
        margin-bottom: 5px;
    }
}

.hero-content {
    position: absolute;
    bottom: -80px;       
    /* left: 50%; */
    /* transform: translateX(-50%); */
    width: 100%;           
    display: flex;
    flex-direction: column; 
    align-items: center;   
    text-align: center;    
    gap: 11px;             
    padding: 20px 30px;
    background: rgba(30, 144, 255, 0.85);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    color: #fff;
    z-index: 5;
}

.hero-content h1 {
    font-family: 'Bubblegum', cursive;
    font-size: 2.5rem; 
    margin: 0;
}

.hero-content p {
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.5;
}

.hero-content .btn {
    font-size: 1rem;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    white-space: nowrap;
}

.navbar {
    z-index: 10; 
    position: relative; 
}


.logo{
    height: 100px;
}


/* mobile adjustments */
/* @media (max-width:768px){

    .hero-section{
        min-height: 400px;
    }

    .hero-overlay{
        min-height: 400px;
        padding: 20px;
    }

    .hero-overlay h1{
        font-size: 28px;
    }

} */

.blue{
    color:#009fc7;
}

.bluedark{
    color:#016acc;
}
.green{
    color:#00b09b;
}
.orange{
    color:#ff5e00;
}
.yellow{
    color:#f1dc16;
}
.cyan{
    color:#0f9b8e;
}

/* Attraction Cards */
.wave-card{
    border-radius:20px;
    padding:20px 20px;
    color:white;
    max-width:420px;
    gap:20px;
    box-shadow:0 10px 20px rgba(0,0,0,0.15);
}


.bg-blue{
background: linear-gradient(135deg,#083b8a,#1f93d6);
}

.bg-bluedark{
background: linear-gradient(135deg,#016acc,#00dfd8);
}

.bg-green{
/* background: linear-gradient(135deg,#00a85e,#066a3c); */
background: linear-gradient(135deg,#00b09b,#96c93d);
}

.bg-orange{
/* background: linear-gradient(135deg,#ffd95a,#b8860b); */
background: linear-gradient(135deg,#ff9a00,#ff5e00);
}

.bg-cyan{
/* background: linear-gradient(135deg,#005f6b,#43cea2); */
background: linear-gradient(135deg,#093637,#0f9b8e);
}

.bg-purple{
background: linear-gradient(135deg,#c31432,#240b36);
}

.wave-content{
    flex:1;
}

.wave-card:hover{
transform:translateY(-8px);
box-shadow:0 25px 45px rgba(0,0,0,0.35);
}
.wave-card{
    height:240px;
    color:white;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,0.25);
    transition:0.3s;
}
.wave-content h4{
font-weight:700;
}

.wave-content p{
    font-size:14px;
    opacity:.9;
}

.wave-icon{
width:55px;
height:55px;
background:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
}

.wave-image img{
width:130px;
height:220px;
object-fit:cover;
border-radius:15px;
}



.highlights-section {
    position: relative;
    background: url('../images/highlight-bg.png') no-repeat bottom center;
    background-size: cover;
    padding: 200px 0;
    color: white;
    text-align: center;
}

/* Dark Overlay */
.highlights-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 31, 63, 0.85); /* Dark blue/navy overlay */
    z-index: 1;
}

/* Ensure content stays above overlay */
.highlights-section .container {
    position: relative;
    z-index: 2;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.9;
}

.contact-info-card {
    background-color: #1e63bd;
    color: white;
    padding: 3rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.ship-card{
    display: flex;
    align-items: center;  
    justify-content: center;
    height:80px;
    color:white;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,0.25);
}

.gallery-item{
  padding:10px;
}

.gallery-item img{
  width:100%;
  border-radius:12px;
  display:block;
  box-shadow:0 8px 25px rgba(0,0,0,0.15);
  transition:0.3s;
}

.gallery-item img:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 35px rgba(0,0,0,0.25);
}

.grid-sizer,
.gallery-item{
  width:33.333%;
}

@media (max-width:768px){
  .grid-sizer,
  .gallery-item{
    width:50%;
  }
}

@media (max-width:576px){
  .grid-sizer,
  .gallery-item{
    width:100%;
  }
}

/* Ticket Page */


.date-card {
    min-width: 85px;
    height: 110px;
    background: #f8f9fa;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6c757d;
    border: 1px solid #57c9e19c;
    text-decoration: none;
}

.date-card.active {
    background-color: #00c2d4;
    color: white;
    box-shadow: 0 8px 15px rgba(81, 22, 133, 0.2);
    border-color: #00c2d4;
}

.day-name { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; }
.day-num { font-size: 1.7rem; font-weight: 800; margin: 2px 0; }
.month-name { font-weight: 700; font-size: 0.75rem; }

/* Dropdown Styling */
.dropdown-toggle::after { display: none; }
.month-selector {
    color: #1e63bd;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}
.date-container{
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: center;
    padding: 20px;
}


/* User detail Card */

.booking-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #8e949a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.input-group-text {
    background-color: #e8ebec;
    border: 1px solid #a2a4a5;
    border-right: none;
    color: #4c4d4e;
    border-radius: 10px 0 0 10px !important;
}

.form-control {
    border: 1px solid #a2a4a5;
    border-left: none;
    padding: 12px;
    font-weight: 600;
    color: #555;
    border-radius: 0 10px 10px 0 !important;
}

.form-control:focus {
    background-color: #fff;
    box-shadow: none;
    border-color: #ddd;
}

.form-control::placeholder {
    color: #adb5bd;
    font-weight: 500;
}

.btn-proceed {
    background-color: #083b8a;
    color: white;
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    font-weight: 700;
    border: none;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.price-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 10px;
    border-radius: 4px;
    margin: 0 15px;
}

.disclaimer {
    font-size: 0.75rem;
    color: #8e949a;
    margin-top: 10px;
}


.ticket-selection{
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.category-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
}

.counter-input {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 4px;
}

.btn-count {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1c0c0;
    border: none;
    color: #7d716c;
    font-size: 1.2rem;
    border-radius: 8px;
    transition: 0.2s;
}

.btn-count.plus {
    background: #a4c3f0;  
    color: #083b8a;      
}

.btn-count:hover {
    background: #ececec;
}

.btn-count.plus:hover {
    background: #e9e1f7;
}


.summary-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0px 10px 30px 20px rgba(14, 13, 13, 0.05);    
}

.secure-checkout-box {
    background-color: #f3f5ff;
    border-radius: 1.5rem;
    border: 1px solid #ebedff;
}

.bg-blue-light { background-color: #bacae4; color: #083b8a; padding: 10px; border-radius: 12px; }

.badge-gray {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #efefef;  
    padding: 5px 12px;
    border-radius: 8px;
}

.total-amount { font-size: 1rem; font-weight: 800; color: #79105f; }
.dotted-line { border-top: 2px dotted #c4c2c2; margin: 25px 0; }


/**/
.payment-card {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.card-header-purple {
    background-color: #083b8a;
    color: white;
    padding: 2rem 1rem;
    text-align: center;
}

.summary-box {
    background-color: #fff9ff;
    border: 1px solid #f3e5f5;
    border-radius: 12px;
    padding: 1.5rem;
}

.secure-alert {
    background-color: #f0fff4;
    border-left: 4px solid #22c55e;
    border-radius: 4px;
    padding: 0.75rem 1rem;
}

.btn-pay {
    background-color: #083b8a;
    border: none;
    border-radius: 8px;
    padding: 0.8rem;
    font-weight: 600;
    transition: 0.3s;
}

.btn-download {
    border: none;
    border-radius: 8px;
    padding: 0.8rem;
    font-weight: 600;
    transition: 0.3s;
}

.btn-pay:hover { background-color: #083b8a; }

.payment-methods span {
    background-color: #f1f3f5;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #495057;
    font-weight: 500;
}

/* Footer Background */

.footer-bg{
    background:url("../images/footer.png");
    background-size:cover;
    background-position:top;
    padding:120px 0 30px;
    position:relative;
    display: block;
}
.footer-logo{
    height: 140px;
}


/* .footer-bg .container{
    position:relative;
    z-index:2;
} */

/* Navigation */
.footer-bg .footer-link{
    font-weight:500;
    margin:0 10px;
}

.footer-bg .footer-link:hover{
    color:#ffd43b;
}


/* Social Icons */
.social-icons a{
  width:50px;
  height:50px;
  background:white;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:5px;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.social-icons img {
  width: 30px;
  height: 30px;
}

/* contact us */

a{
    text-decoration: none !important;
}

.text-orange{
    color: rgb(240 155 14);
    font-weight: 700;
    letter-spacing: 1px;
}

.f08{font-size: 0.8rem;}
.f09{font-size: 0.9rem;}
.f10{font-size: 1.0rem;}
.f11{font-size: 1.1rem;}
.f12{font-size: 1.2rem;}
.f13{font-size: 1.3rem;}
.f14{font-size: 1.4rem;}
.f15{font-size: 1.5rem;}
.f16{font-size: 1.6rem;}
.f17{font-size: 1.7rem;}
.f23{font-size: 2.3rem;}
.f25{font-size: 2.5rem;}
.f27{font-size: 2.7rem;}
.f28{font-size: 2.8rem;}
.f29{font-size: 2.9rem;}
.f30{font-size: 3.0rem;}
.f33{font-size: 3.3rem;}
.f35{font-size: 3.5rem;}
.f37{font-size: 3.7rem;}

/* About us */

.about {
    padding: 80px 0;
}

.about h1 {
    color: #e48a00;
    font-size: 48px;
}

.about p {
    color: #333;
    line-height: 1.8;
    font-size: 16px;
}

.feature-card {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 12px;
    transition: 0.3s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.icon-box {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    background: #fff3e6;
    color: #e48a00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: 0.3s;
}

.feature-card:hover .icon-box {
    background: #e48a00;
    color: #fff;
}

.feature-card h5 {
  font-weight: 600;
  margin-top: 10px;
}

@media (max-width: 768px) {
    .about h1 {
        font-size: 32px;
    }
}


.primary-btn {
    display: inline-block;
    font-size: 13px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    position: relative;
}

.primary-btn::after {
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: #f09b0e;
    content: "";
}


/* ticket page */

.date-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.date-slider {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 10px;
    scrollbar-width: none; 
}

.date-slider::-webkit-scrollbar {
    display: none;
}


.date-wrapper .nav-btn {
    position: absolute;
    z-index: 10;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: #f9f9f9;
    border: 1px solid #57c9e19c;
    color: #00c2d4;
    font-size: 18px;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
}

.date-wrapper .nav-btn.left {
    left: 0;
}

.date-wrapper .nav-btn.right {
    right: 0;
}

.date-wrapper .nav-btn:hover {
    background-color: #00c2d4;
    color: #fff;
    border-color: #00c2d4;
    box-shadow: 0 6px 14px rgba(0, 194, 212, 0.3);
}


.date-wrapper .nav-btn.left {
    left: -10px;
}

.date-wrapper .nav-btn.right {
    right: -10px;
}

.date-wrapper .nav-btn {
    backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
    .date-card {
        width: 60px;
        padding: 8px;
    }
}

.date-wrapper .nav-btn {
    transition: 0.3s;
}

.btn-blue{
    background: #00c2d4;
    border-color: #00c2d4;
}

.text-green {
    color: #2A9D8F;
}

.attraction img {
    transition: transform 0.3s;
}

.attraction img:hover {
    transform: scale(1.1);
}

.attraction h5 {
    font-family: 'Fredoka One', cursive; 
    margin-bottom: 8px;
}

.attraction p {
    font-size: 0.95rem;
    color: #555;
}

/* .home-navbar-toggler-icon {
    background-color: #016acc; 
} */