
/*======================= HEADER =======================*/

.topbar {background-color: #0a5c36;color: var(--white);font-size: 14px;padding: 8px 0;}
.top-left {display: flex;align-items: center;gap: 15px;}
.top-left a, .top-left i{font-size:12px;color: var(--white);}
.top-right{display:flex;align-items:center;justify-content:end;gap:8px;}
.top-right a {font-size:12px;color: var(--white);}

.navbar {position: sticky;top: 0;z-index: 999;background-color: #fff;padding:20px 0 !important;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
.logo {font-size: 20px;font-weight: bold;color: #0a5c36;}
.menu {list-style: none;display: flex;justify-content:center;gap: 25px;margin: 0;}
.menu li a {text-decoration: none;color: #333;font-weight: 500;transition: 0.3s;}
.menu li a:hover {color: #0a5c36;}
.header-contact{display:flex;align-items:center;justify-content:end;}

.menu-toggle {display: none;font-size: 26px;cursor: pointer;}
.sidebar {position: fixed;top: 0;right: -300px;width: 300px;height: 100%;background: #fff;padding: 20px;
    z-index: 9999;transition: 0.3s;box-shadow: -5px 0 20px rgba(0,0,0,0.1);}
.sidebar.active {right: 0;}
.sidebar-header {display: flex;justify-content: space-between;margin-bottom: 20px;}
.sidebar-menu {list-style: none;padding: 0;}
.sidebar-menu li {margin-bottom: 15px;}
.sidebar-menu a {text-decoration: none;color: #333;font-size: 16px;}
.sidebar-btn {display: block;margin-top: 20px;text-align: center;}
.overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);opacity: 0;
    visibility: hidden;transition: 0.3s;z-index: 999;}
.overlay.active {opacity: 1;visibility: visible;}

/*======================= HERO SECTION =======================*/

.hero-section {position: relative;overflow: hidden;}
.heroSwiper .swiper-slide {position: relative;height: 100vh;min-height: 700px;display: flex;align-items: center;justify-content: center;}
.hero-bg {position: absolute;inset: 0;z-index: 1;}
.hero-bg img {width: 100%;height: 100%;object-fit: cover;}
.hero-overlay {position: absolute;inset: 0;background: rgba(0,0,0,0.45);z-index: 2;}
.hero-text {position: relative;z-index: 3;text-align: center;max-width: 1100px;margin: auto;}
.hero-subtitle {display: inline-block;font-size: 80px;color: #fff;margin-bottom: 10px;font-family: "Dancing Script", cursive;line-height: 1;}
.hero-text .big-heading {font-size: 90px;line-height: 0.95;color: #fff;font-weight: 700;margin-bottom: 25px;letter-spacing: -3px;}
.hero-text .big-paragraph,.hero-text p {font-size: 25px;line-height: 1.5;color: rgba(255,255,255,0.9);max-width: 1000px;margin: auto auto 35px;color: #fff;}
.hero-text{color: #fff;font-size:24px;}
.hero-text .action-btn {display: inline-flex;align-items: center;justify-content: center;padding: 14px 35px;background: #fff;color: #111;
    border-radius: 50px;text-decoration: none;font-size: 15px;font-weight: 600;transition: 0.3s;}
.hero-text .action-btn:hover {transform: translateY(-3px);background: #ff7a00;color: #fff;}

.hero-prev,.hero-next {position: absolute;top: 50%;transform: translateY(-50%);width: 55px;height: 55px;border-radius: 50%;
    background: rgba(255,255,255,0.95);z-index: 10;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: 0.3s;}
.hero-prev {left: 40px;}
.hero-next {right: 40px;}
.hero-prev i,.hero-next i {font-size: 20px;color: #00bcd4;}
.hero-prev:hover,
.hero-next:hover {transform: translateY(-50%) scale(1.08);}

/*======================= ABOUT SECTION =======================*/

.about-section {background: #f9fbf8;}
.about-image-wrapper {position: relative;max-width: 500px;}
.image-frame {position: absolute;top: -15px;left: -15px;width: 100%;height: 100%;border: 3px solid #ff7a00;border-radius: 20px;}
.about-image {position: relative;overflow: hidden;border-radius: 20px;height: 400px;}
.about-image img {width: 100%;height: auto;display: block;transition: 0.5s;}
.about-image:hover img {transform: scale(1.08);}

.about-features {display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 20px;}
.feature-box-mini {padding: 8px 14px;background: #fff;border-radius: 6px;box-shadow: 0 5px 15px rgba(0,0,0,0.08);}

/*======================= FEATURE SECTION =======================*/

.features-section {
  /*background:linear-gradient(rgba(6,40,30,0.8), rgba(0,0,0,0.9)),*/
  /*  url('https://sundarbanmahakaltravels.in/wp-content/uploads/2026/05/WhatsApp-Image-2026-05-05-at-10.33.50-PM.jpeg');*/}
.feature-box {position: relative;background: linear-gradient(135deg, #ff6b1a, #ff7f32);border-radius: 18px;padding: 40px 25px 30px;text-align: center;
    overflow: hidden;z-index: 1;transition: 0.4s ease;height:100%;}
.feature-box::before {content: "";position: absolute;inset: 0;
    background:repeating-linear-gradient(-45deg,rgba(255,255,255,0.04) 0px,rgba(255,255,255,0.04) 35px,transparent 35px,transparent 70px);z-index: -1;}
.feature-box:hover {transform: translateY(-10px);box-shadow: 0 20px 40px rgba(0,0,0,0.15);}
.feature-icon-wrap {position: relative;width: 120px;height: 120px;margin: 0 auto 20px;}
.feature-icon {width: 100px;height: 100px;border-radius: 50%;background: #fff;display: flex;align-items: center;justify-content: center;margin: auto;}
.feature-icon img {width: 48px;height: 48px;object-fit: contain;}
.dot {position: absolute;width: 26px;height: 26px;background: #ff7628;border-radius: 50%;}
.dot-1 {top: 0;left: 10px;}
.dot-2 {right: 7px;bottom: 25px;}
.feature-box .title {font-size: 20px;line-height: 1.2;font-weight: 700;margin-bottom: 15px;color: #fff;}
.feature-box .paragraph,.feature-box p {color: #eee;font-size: 15px;line-height: 1.5;margin: 0;}

/*======================= PACKAGE SECTION =======================*/

.package-card {background: #fff;border-radius: 18px;overflow: hidden;transition: 0.4s ease;box-shadow: 0 10px 35px rgba(0,0,0,0.08);height: 100%;}
.package-card:hover {transform: translateY(-10px);box-shadow: 0 18px 45px rgba(0,0,0,0.15);}
.package-image {position: relative;overflow: hidden;}
.package-image img {width: 100%;height: 280px;object-fit: cover;transition: 0.5s ease;}
.package-card:hover .package-image img {transform: scale(1.08);}
.package-price-tag {position: absolute;left: 0;bottom: 0;background: #2f63ff;color: #fff;font-size: 18px;font-weight: 700;padding: 10px 30px;
    border-top-right-radius: 10px;}
.package-content {padding: 35px 30px;}
.package-title {font-size: 20px;line-height: 1.2;font-weight: 700;margin-bottom: 12px;color: #111;}
.package-content .paragraph {color: #666;font-size: 15px;line-height: 1.7;margin-bottom: 14px;}
.package-meta {display: flex;gap: 10px;align-items: center;margin-bottom: 12px;}
.package-rating {color: #2f63ff;font-size: 26px;letter-spacing: 2px;}
.package-duration {display: flex;align-items: center;gap: 8px;font-size: 12px;font-weight: 600;color: #222;}
.package-review {font-size: 12px;font-weight: 600;color: #111;margin-bottom: 16px;}


.package-details-image img {width: 100%;height: 200px;object-fit: cover;border-radius: 3px;}
.package-meta span {margin-right: 15px;font-size: 14px;}
.package-detail-box {background: #fff;padding: 25px;margin-bottom: 20px;border-radius: 10px;box-shadow: 0 10px 25px rgba(0,0,0,0.08);}
.package-detail-box h2,.package-detail-box h3{font-size:22px;font-weight:500;}

.booking-card {background: #fff;padding: 25px;border-radius: 10px;box-shadow: 0 10px 25px rgba(0,0,0,0.08);position: sticky;top: 50px;}
.booking-card h3 {color: #ff7a00;font-size: 28px;}
.booking-card ul {margin: 0;padding:0;}
.booking-card li {margin-bottom: 8px;list-style:none;}

/*======================= HIGHLIGHT SECTION =======================*/

.highlight-section {position: relative;
    background: url('https://sundarbanmahakaltravels.in/wp-content/uploads/2026/04/beautiful-tropical-nature-scaled.jpg');
    background-size: cover;background-position: center;}
.highlight-section::before {content: "";position: absolute;inset: 0;background: rgb(46 40 40 / 55%);}
.highlight-section .container {position: relative;z-index: 2;}
.highlight-item {background: #f8f8f8;border-radius: 30px;padding: 25px;min-height: 100%;transition: 0.4s ease;}
.highlight-item:hover {transform: translateY(-10px);box-shadow: 0 20px 40px rgba(0,0,0,0.1);}
.highlight-top {display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 30px;}
.highlight-number {font-size: 14px;font-weight: 500;color: #666;}
.highlight-icon {width: 120px;height: 60px;background: #d4f053;clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 20% 100%, 0% 50%);
    display: flex;align-items: center;justify-content: center;}
.highlight-icon i {font-size: 36px;color: #111;}
.highlight-content h4 {font-size: 22px;line-height: 1.3;font-weight: 700;color: #111;margin-bottom: 15px;}
.highlight-content p {font-size: 15px;line-height: 1.8;color: #666;margin: 0;}

/*======================= FACTS SECTION =======================*/

.fact-section {background: #f7f7f7;overflow: hidden;}
.fact-card .mid-heading {font-size: 18px;line-height: 1.3;margin-bottom: 25px;color: #111;}
.fact-list {display: grid;grid-template-columns: repeat(2, 1fr);gap: 25px 35px;}
.fact-item {display: flex;align-items: flex-start;gap: 15px;}
.fact-item span {min-width: 38px;height: 38px;background: #c9ea4f;color: #111;border-radius: 50%;display: flex;align-items: center;justify-content: center;
    font-weight: 700;font-size: 18px;}
.fact-image-card {position: relative;background:#ececec;border-radius: 30px;overflow: hidden;padding: 25px;}
.fact-image-card img {width: 100%;border-radius: 22px;display: block;}
.fact-image-content {display: flex;align-items: center;gap: 12px;padding: 25px 10px 10px;}
.fact-dot {width: 12px;height: 12px;background: #c9ea4f;border-radius: 50%;}
.fact-image-content h4 {font-size: 24px;color: #333;margin: 0;}

/*======================= FOOD SECTION =======================*/

.food-section {background: linear-gradient(135deg, #ececec, #ffffff);}
.food-card {position: relative;overflow: hidden;border-radius: 22px;height: 100%;background: #000;}
.food-card img {width: 100%;height: 100%;object-fit: cover;transition: 0.6s ease;}
.food-card::before {content: "";position: absolute;inset: 22px;border: 1px solid rgba(255,255,255,0.7);border-radius: 18px;z-index: 3;pointer-events: none;}
.food-card:hover img {transform: scale(1.08);}
.food-tilt-overlay {position: absolute;left: 0;right: 0;bottom: 0;background: #68b542;padding: 40px 20px 20px;z-index: 5;text-align: center;
    clip-path: polygon( 0 18%, 15% 10%, 30% 16%, 45% 8%, 60% 14%, 75% 7%, 100% 0, 100% 100%, 0 100%);}
.food-overlay-content {position: relative;z-index: 2;}
.food-tilt-overlay h3 {font-size: 18px;line-height: 1.2;color: #fff;font-weight: 700;margin-bottom: 8px;}
.food-tilt-overlay p {font-size: 15px;line-height: 1.6;color: rgba(255,255,255,0.9);margin: 0;}
.food-tilt-overlay::before {content: "";position: absolute;top: -35px;left: 0;width: 100%;height: 80px;
    background:
        radial-gradient(circle at 10% 100%, transparent 20px, #68b542 22px),
        radial-gradient(circle at 30% 100%, transparent 25px, #68b542 27px),
        radial-gradient(circle at 50% 100%, transparent 22px, #68b542 24px),
        radial-gradient(circle at 70% 100%, transparent 28px, #68b542 30px),
        radial-gradient(circle at 90% 100%, transparent 24px, #68b542 26px);
    background-size: 20% 100%;
    background-repeat: repeat-x;
}

/*======================= GALLERY SECTION =======================*/

.gallery-section {}
.gallery-grid {display: grid;gap: 18px;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
.gallery-item {position: relative;overflow: hidden;border-radius: 14px;cursor: zoom-in;border: 2px solid transparent;
    transition: border-color 0.3s ease, transform 0.3s ease;box-shadow: 0 6px 16px rgba(0,70,160,0.10);}
.gallery-item img {width: 100%;height: 260px;object-fit: cover;transition: transform 0.4s ease;}
.gallery-item:hover img {transform: scale(1.12);}
.gallery-item:hover {border-color: #8ab6ff;}
.gallery-overlay {position: absolute;inset: 0;background: rgba(10, 40, 90, 0.45);opacity: 0;display: flex;align-items: flex-end;
    padding: 20px;transition: 0.35s ease;}
.gallery-item:hover .gallery-overlay {opacity: 1;}
.gallery-overlay span {color: #fff;font-weight: 600;font-size: 17px;letter-spacing: 0.5px;text-shadow: 0 0 8px rgba(0,0,0,0.5);}

/*======================= PROCESS SECTION =======================*/

.process-section {background: #f7f7f7;}
.process-item {text-align: center;}
.process-image-wrap {position: relative;width: 200px;height: 200px;margin: 0 auto 35px;}
.process-image {width: 180px;height: 180px;border-radius: 50%;background: #ececec;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.process-image img {width: 130px;height: 130px;object-fit: contain;}
.process-number {position: absolute;left: 50%;bottom: -10px;transform: translateX(-50%);background: #2d7df4;color: #fff;padding: 10px 24px;
    border-radius: 50px;font-size: 15px;font-weight: 600;white-space:nowrap;}
.process-content h4 {font-size: 22px;font-weight: 600;margin-bottom: 18px;color: #111;}
.process-content p {font-size: 15px;line-height: 1.6;color: #666;margin: 0 auto;max-width: 420px;}

/*======================= TESTIMONIAL SECTION =======================*/

.testimonial-section{background: linear-gradient(135deg,#eef3f1,#dfe9e5);text-align:center;}
.testimonial-slide {position:relative;max-width:700px;margin:auto;text-align:center;}
.testimonial-slide p {font-size:18px;color:#333;margin-bottom:25px;font-style:italic;}
.testimonial-user h4 {font-size: 18px;margin-bottom: 10px;font-weight:500;}
.testimonial-user h5 {font-size: 13px;color: #888;}

/*======================= CONTACT SECTION =======================*/

.contact-section {background: #f8f8f8;}
.contact-details {display: flex;flex-direction: column;gap: 20px;}
.contact-item {display: flex;gap: 15px;align-items: flex-start;}
.contact-icon {width: 45px;height: 45px;background: rgba(212,175,55,0.1);color: var(--gold);display: flex;align-items: center;
    justify-content: center;border-radius: 50%;font-size: 16px;}
.contact-text h4 {font-size: 15px;margin-bottom: 3px;color: #222;font-weight: 700;}
.contact-text p {font-size: 14px;color: var(--gray);}

.contact-form-wrap {background: #fff;padding: 30px;border-radius: 10px;border: 1px solid #eee;}
.contact-form-wrap input,
.contact-form-wrap textarea {width: 100%;padding: 12px;border: 1px solid #ddd;font-size: 14px;outline: none;transition: 0.2s;}
.contact-form-wrap input:focus,.contact-form-wrap textarea:focus {border-color: var(--gold);}
.contact-map iframe{width: 100%;height: 450px;}

/*======================= FOOTER SECTION =======================*/

.footer {background: #0a5c36;color: #fff;padding-top: 70px;position: relative;}
.footer-box ul {margin:0;padding:0;}
.footer-box ul li {margin-bottom: 8px;list-style:none;}
.footer-box ul li a {color: #ddd;text-decoration: none;transition: 0.3s;font-size:15px;}
.footer-box ul li a:hover {color: #fff;padding-left: 5px;}

.footer-social {margin-top: 10px;}
.footer-social i {display: inline-block;margin-right: 10px;font-size: 18px;color: #fff;transition: 0.3s;}
.footer-social i:hover {transform: translateY(-3px);}

.footer-bottom {display: flex;align-items: center;justify-content: center;margin-top: 40px;padding: 15px;background: #084d2e;font-size: 14px;}

.whatsapp-btn {position: fixed;bottom: 20px;right: 20px;width: 55px;height: 55px;background: #25D366;color: #fff;border-radius: 50%;
    display: flex;align-items: center;justify-content: center;font-size: 26px;text-decoration: none;z-index: 9999;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);transition: 0.3s ease;}
.whatsapp-btn:hover {transform: scale(1.1);box-shadow: 0 12px 30px rgba(0,0,0,0.3);}

/*======================= OTHER SECTION =======================*/

.banner {position: relative;height: 380px;overflow: hidden;}
.banner img {width: 100%;height: 100%;object-fit: cover;}
.banner-overlay {position: absolute;inset: 0;background: rgba(0,0,0,0.55);}
.banner-content {position: absolute;top: 50%;transform: translateY(-50%);color: #fff;}
.banner-content p {font-size: 15px;}

.booking-modal {position: fixed;inset: 0;background: rgba(0,0,0,0.6);display: none;align-items: center;justify-content: center;z-index: 9999;}
.booking-modal.active {display: flex;}
.booking-content {background: #fff;padding: 30px;border-radius: 12px;width: 45%;max-width: 90%;position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);}
.close-modal {position: absolute;right: 15px;top: 12px;font-size: 20px;cursor: pointer;}
.booking-content h3 {margin-bottom: 20px;font-size: 22px;font-weight:500;}
#bookingForm .form-group {margin-bottom: 15px;}
#bookingForm .form-group label {display: block;font-size: 13px;margin-bottom: 5px;color: #555;}
#bookingForm .form-group input {width: 100%;padding: 10px 12px;border-radius: 6px;border: 1px solid #ddd;font-size: 14px;transition: 0.3s;}
#bookingForm .form-group input:focus {border-color: #ff7a00;outline: none;box-shadow: 0 0 0 2px rgba(255,122,0,0.1);}
#packageName {background: #f5f5f5;font-weight: 600;}
.submit-btn {width: 100%;padding: 12px;background: #ff7a00;color: #fff;border: none;border-radius: 6px;cursor: pointer;
    font-size: 15px;transition: 0.3s;}
.submit-btn:hover {background: #e56d00;}
.form-message {margin-top: 10px;font-size: 14px;color: green;}

/*======================= RESPONSIVE =======================*/

@media (max-width: 768px) {
.topbar,.menu-wrap,.header-contact,.hero-prev,.hero-next {display: none;}
.menu-toggle {display: block;}
.big-heading{font-size:40px;}
.mb-50{margin-bottom:30px;}

.heroSwiper .swiper-slide {height: 500px !important;}
.hero-text .big-heading {font-size: 42px;}
.hero-text .big-paragraph, .hero-text p {font-size: 15px;}
.hero-subtitle {font-size: 30px;}


.about-image{margin-bottom:20px;}
.heading,.sub-heading {font-size: 24px;}
.section {padding: 50px 0;}
.section-header-wrap {flex-direction: column;align-items: start;}
.package-card {margin-bottom: 20px;}

.highlight-wrapper {flex-direction: column;}
.highlight-item {min-height: auto;}

.fact-card {padding: 0px;}
.fact-list {grid-template-columns: repeat(1, 1fr);margin-bottom: 30px;}

.process-item {margin-bottom: 30px;}

.food-card {height: auto;margin-bottom: 20px;}

.contact-form-wrap {margin-top:20px;}

.footer-box{margin-bottom:20px;}
.banner {height: 200px;}



}
