@import 'https://fonts.googleapis.com/css?family=Lato:400,700,900';

.position-ab {
    position: absolute
}

.position-re {
    position: relative
}

.txt-dec-n {
    text-decoration: none
}

.clear-right {
    clear: right
}

h1,
.h1 {
    font-size: 28px
}

h2,
.h2 {
    font-size: 23px
}

h3,
.h3 {
    font-size: 21px
}

h4,
.h4 {
    font-size: 19px
}

h5,
.h5 {
    font-size: 17px
}

h6,
.h6 {
    font-size: 15px
}

a {
    outline: 0;
    color: #1a1616;
    text-decoration: none
}

a:focus,
a:hover {
    color: #03a961
}

a:link,
a:visited {
    outline: 0;
    text-decoration: none
}

a:active,
a:focus,
a:hover {
    color: #03a961;
    text-decoration: underline
}

body {
    color: #1a1616;
    font-family: 'Marcellus', serif;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.714
}

.icon-reset {
    display: inline;
    color: #4f4f4f;
    font-size: 14px;
    font-family: FontAwesome;
    font-weight: 400;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

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

.list-ul ul {
    margin: 0;
    padding: 0
}

.list-style li {
    list-style: none
}

ul {
    padding-left: 17px
}

ul li {
    margin-bottom: 8px
}

.form-control {
    border-radius: 0;
    box-shadow: none
}

.form-control:hover,
.form-control:focus {
    border-color: #ccc;
    outline: 0;
    box-shadow: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #1f1c1c;
    font-family: 'Marcellus', serif;
    font-weight: 700
}

.header .logo {
    height: 100%;
    margin: 13px 0 !important;
    padding: 0
}

.header .logo img {
    height: 74px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease
}

.header .top-contact {
    padding: 10px 0;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease
}

.header .top-contact ul li {
    display: inline-block;
    color: #232323
}

.header .top-contact ul li:nth-child(1):before,
.header .top-contact ul li:nth-child(2):before {
    display: inline;
    color: #4f4f4f;
    font-size: 14px;
    font-family: 'Marcellus', serif;
    font-weight: 400;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
    padding: 6px;
    border: solid 1px #090909;
    border-radius: 100%
}

.header .top-contact ul li:nth-child(1) {
    margin-right: 20px
}

.header .top-contact ul li:nth-child(1):before {
    content: "\f095";
    font-size: 15px
}

.header .top-contact ul li:nth-child(2):before {
    content: "\f0e0";
    font-size: 14px
}

.header .top-contact ul li a {
    color: #232323
}

.header .main-nav {
    margin: 0;
    background: #fffae5;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5)
}

.header .main-nav .navbar-nav {
    margin: 26px -10px 8px 0;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease
}

.header .main-nav .navbar-nav li {
    margin-bottom: 0;
    font-weight: 700
}

.header .main-nav .navbar-nav li a {
    padding: 0 10px;
    background: transparent;
    color: #da9b4b;
    font-size: 18px
}

.header .main-nav .navbar-nav li a:hover,
.header .main-nav .navbar-nav li a.active,
.header .main-nav .navbar-nav li a:focus {
    background: transparent;
    color: #104A41;
    font-size: 18px
}

.header .main-nav .navbar-nav li .dropdown-menu {
    top: 29px;
    right: auto;
    left: 0;
    border-top: 0;
    border-radius: 0;
    box-shadow: 0 6px 5px rgba(0, 0, 0, 0.175);
    -moz-box-shadow: 0 6px 5px rgba(0, 0, 0, 0.175);
    -webkit-box-shadow: 0 6px 5px rgba(0, 0, 0, 0.175);
    -o-box-shadow: 0 6px 5px rgba(0, 0, 0, 0.175);
    -ms-box-shadow: 0 6px 5px rgba(0, 0, 0, 0.175)
}

.header .main-nav .navbar-nav li .dropdown-menu li {
    text-transform: none;
    margin-bottom: 0
}

.header .main-nav .navbar-nav li .dropdown-menu li a {
    padding: 7px 10px
}

.header .main-nav .navbar-nav li .dropdown-menu.open a {
    background: transparent
}

.header .main-nav.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 5000;
    background: #fff;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease
}

.header .main-nav.sticky .container {
    position: relative
}

.header .main-nav.sticky .top-contact {
    margin-top: -100px
}

.header .main-nav.sticky .navbar-header .logo img,
.header .main-nav.sticky .top-contact,
.header .main-nav.sticky .navbar-nav {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease
}

.header .main-nav.sticky .navbar-header .logo img {
    height: 40px
}

.header .main-nav.sticky .navbar-nav {
    margin: 25px -10px 0 0
}

.header .main-nav.sticky .navbar-nav li .dropdown-menu {
    top: 42px
}

.slider {
    margin: 0 0 50px
}

.slider .slider-img img {
    width: 100%
}

.slider .carousel-box {
    top: 40%;
    width: 100%
}

/*
.slider .carousel-box .carousel-text {
    color: #FDF6E3;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    text-shadow:
        1px 1px 0 #444,
        2px 2px 0 #333,
        3px 3px 5px rgba(0, 0, 0, 0.5);

}*/



#destinationsCarousel {
    /* Existing styles for the carousel go here (if any) */
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 8px;
}


#destinationsCarousel .carousel-control.left {
    border-radius: 5px;
}

#destinationsCarousel .carousel-control.right {
    border-radius: 10px;
}

.slider .carousel-box .carousel-text {
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(145deg, #fdf6e3, #fdfdfc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.6),
    0 0 10px rgba(27, 184, 144, 0.5);
}


.carousel-indicators li {
    width: 13px;
    height: 13px;
    margin: 0 10px;
    border: solid 2px #004449
}

.carousel-indicators .active {
    width: 13px;
    height: 13px;
    margin: 0 10px;
    background-color: #004449
}


.carousel-text small {
    font-family: 'Marcellus', serif;
}

.text-overlay {
    background: rgba(0, 0, 0, 0.4); /* Soft dark background */
    padding: 15px 20px;
    border-radius: 6px;
    display: inline-block;
}

.img-box .top-callout img {
    width: 100%
}

.img-box .top-callout .callout-1 {
    bottom: 0;
    width: 100%;
    padding: 50px 30px;
    color: #fff
}

.img-box .top-callout .callout-1 strong {
    display: block;
    font-size: 36px;
    line-height: 24px
}

.img-box .top-callout .callout-1 span {
    font-size: 26px
}

.img-box .top-callout .callout-1 .btn-box {
    position: relative;
    display: inline-block;
    padding: 16px 55px 4px 12px;
    border: solid 3px #fff;
    transition-property: all;
    transition-duration: 1.0s
}

.img-box .top-callout a:hover .btn-box {
    background: #fff;
    color: #1a1616;
    transition-property: all;
    transition-duration: 1.0s
}

.img-box .top-callout a:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background: rgba(0, 0, 0, 0.1)
}

.img-box .callout-right {
    margin-bottom: 30px
}

.img-box .callout-right:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background: rgba(0, 0, 0, 0.3)
}

.container.itinerary-wrapper {
  max-width: 960px; /* Overrides Bootstrap's default if different */
  margin: auto; /* Centers the container */
  padding: 2rem; /* Adds padding around the content inside */
}

.itinerary-wrapper h1,
.itinerary-wrapper h2 {
  font-family: 'Cinzel Decorative', serif; /* Heading font for itineraries */
  text-align: center;
  color: #4b2e1e; /* Dark brown for headings */
  margin-top: 2rem; /* Space from the element above (e.g., header) */
}

.day { /* Using the original .day class as per your latest HTML snippet */
  background-color: #fff;
  border-left: 6px solid #a67c52; /* Earthy brown border */
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

/* Day Titles (H3 within each day block) */
.day h3 {
  font-family: 'Marcellus', serif; /* A classic, readable serif for day titles */
  margin-top: 0;
  color: #7a4e2d; /* Slightly darker brown for sub-headings */
}

/* List of Highlights within each day block */
.highlights { /* Using the original .highlights class */
  margin: 0.5rem 0;
  padding-left: 1rem;
}
.highlights li {
  margin-bottom: 0.3rem; /* Space between list items */
}

/* Specific styling for the 'icon-list' if it's meant to be different from 'highlights' */
.icon-list { /* As seen in your latest itinerary-4-days.php for Day 1 */
    margin: 0.5rem 0;
    padding-left: 1rem;
    /* Add any specific styles for icon-list if it differs from .highlights */
}
.icon-list li {
    margin-bottom: 0.3rem;
    /* Add any specific styles for icon-list items */
}


/* Call to Action (CTA) section */
.cta { /* Using the original .cta class */
  text-align: center;
  margin-top: 2rem;
}
.cta a {
  background-color: #a67c52;
  color: white;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  font-family: 'Quattrocento', serif; /* Apply to CTA button for consistency */
}

/* Footer section specific to the itinerary (if different from global footer) */
.footer { /* Using the original .footer class */
  text-align: center;
  margin-top: 3rem;
 /* font-style: italic; */
  color: #666;
}

.img-box .callout-right .callout-1 {
    padding: 20px
}

.img-box .callout-right .callout-1 .btn-box strong {
    font-size: 30px
}

.img-box .callout-right .callout-1 .btn-box span {
    font-size: 24px
}

.img-box .callout-right .bottom-callout .btn-box {
    padding: 10px 40px 10px 15px
}

.img-box .callout-right .bottom-callout .btn-box span {
    font-size: 20px
}

/* === Custom Bullet Icon List === */
.icon-list {
  list-style: none;
  padding-left: 0;
}

.icon-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
}

.icon-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url('../images/icons/itinerary-bullet.png'); /* Adjust path as needed */
  background-size: contain;
  background-repeat: no-repeat;
}

.intro-header {
    font-family: 'Cinzel Decorative', serif;
    text-align: center; /* Centers the header text */
    margin-bottom: 10px; /* Reduces the space below the h1. Adjust as needed. */
    /* You can add other styles here specific to this H1, e.g.: */
    /* font-size: 2.5em; */
    /* color: #0056b3; */
}

.intro-text {
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.6;
    color: #19754a;
    max-width: 1300px;
    padding: 1px 0;
    margin-top: 0;
}

/* CSS for a blank space spacer */
.spacer {
    clear: both; /* Ensures the spacer clears any floated elements above it */
    height: 30px; /* Adjust this value to control the amount of blank space */
    width: 100%;  /* Ensures the spacer takes up the full width, though often not strictly necessary for height */
    /* You could also use padding-top/bottom if you want to apply space to an existing element */
}

/* 3. Ensure the inner .events-box (which contains all the card content) fills the height of its parent column. */
.events-box {
    display: flex; /* Make events-box a flex container */
    flex-direction: column; /* Stack its children (title, image, text, citation) vertically */
    flex-grow: 1; /* This is key: it makes the events-box expand to fill the height of its parent */
    height: 100%; /* Ensure events-box explicitly takes 100% height of its parent .col-sm-4 or .events-callout */
    border-radius: 5px; /* Or match the events-section if you prefer */
}

.trip-callout {
    flex-grow: 1; /* Makes this div expand to take up remaining vertical space within .events-box */
    display: flex; /* Make it a flex container to control its children (.trip-box) */
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-end; /* This pushes the content (including .ramayana-citation) to the bottom */
}

/* Optional: To make the "light yellow boxes" (.ramayana-citation) themselves a consistent minimum height. */
/* If, after the above changes, you find the yellow boxes are still too small or inconsistent in their internal height,
   you can set a minimum height. You'd typically inspect the tallest yellow box and use that value. */

.ramayana-citation {
    font-family: 'Merriweather', serif; /* Consistent font for content /
    font-size: 1.15em;
    line-height: 1.6;
    color: #333;
    background-color: #FDFCEF; / Light parchment/cream background /
    padding: 25px 30px; / Top and side padding /
    padding-bottom: 40px; / ADDED: Bottom padding to prevent overlap /
    margin: 25px auto; / Space above/below and center the box horizontally on the page /
    border: 1px solid #D8C3A5; / Subtle aged border /
    border-radius: 5px; / Rounded corners for the box /
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); / Soft, subtle shadow for depth /
    position: relative; / CRUCIAL for positioning the decorative quote marks (::before and ::after) /
    max-width: 500px; / Optional: adjust maximum width to control box size like in image */
}


.trip-section h1,
.events-section h1,
.trip-section h2,
.events-section h2 {
    font-family: 'Cinzel Decorative', serif;
    font-weight: bold;
    margin-bottom: 40px;
    padding: 0 15px
}

.trip-section {
    margin-bottom: 60px
}

.trip-section h1 {
    font-size: 23px
}

.trip-section .trip-box a:hover {
    text-decoration: none
}

.trip-section .trip-box img {
    width: 100%
}

.trip-section .trip-box .title {
    padding: 5px 15px;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3)
}

.trip-section .trip-box .title:before {
    display: inline;
    color: #4f4f4f;
    font-size: 14px;
    font-family: 'Marcellus', serif;
    font-weight: 400;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f041";
    margin-right: 15px;
    color: #03a961;
    font-size: 30px;
    vertical-align: sub
}

.events-section .title {
    position: relative;
    margin: 0 15px 20px;
    text-align: center
}

.events-section .title:before {
    position: absolute;
    top: 11px;
    left: 0;
    right: 0;
    content: "";
    width: 100%;
    height: 3px;
    background: #1f1d1d
}

.events-section .title h2 {
    font-family: 'Cinzel Decorative', serif;
    font-weight: bold;
    position: relative;
    display: inline-block;
    margin-top: 0;
    background: #fff;
    font-size: 18px;
}

.events-section .events-box img {
    width: 100%
}

.events-section .events-box .events-title {
    margin: 15px 0 5px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase
}

.events-section .events-box .date {
    margin-bottom: 15px;
    font-size: 12px;

}

.events-section .events-box .subtitle {
    margin-bottom: 15px;
    font-size: 13px;
    color: rgb(28, 173, 125);
}

.events-section .events-box .teaser {
    line-height: 20px
}

.events-section .events-box .more-btn {
    text-transform: uppercase;
    font-weight: 900
}


.rounded-img {
    border-radius: 10px; /* Adjust this value to control the amount of rounding */
    /* Optional: If the image has elements that might extend beyond the rounded corners,
       this will ensure they are clipped. */
    overflow: hidden;
}

/* --- Google Fonts (Add this to your HTML <head> section) --- */
/* For 'Merriweather' (a classic, readable serif) and 'Old Standard TT' (a more antique serif) */
/* <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Old+Standard+TT:ital@0;1&display=swap" rel="stylesheet"> */

/* Main citation block styling */
/* Main citation box container styling */
.ramayana-citation {
    font-family: 'Merriweather', serif; /* Consistent font for content */
    font-size: 1.15em;
    line-height: 1.6;
    color: #333;
    background-color: #FDFCEF; /* Light parchment/cream background */
    padding: 25px 30px; /* Generous padding inside the box */
    margin: 25px auto; /* Space above/below and center the box horizontally on the page */
    border: 1px solid #D8C3A5; /* Subtle aged border */
    border-radius: 5px; /* Rounded corners for the box */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Soft, subtle shadow for depth */
    position: relative; /* CRUCIAL for positioning the decorative quote marks (::before and ::after) */
    max-width: 500px; /* Optional: adjust maximum width to control box size like in image */
}

/* Style for the main quote text */
.ramayana-citation .quote-text {
    display: block;
    margin-bottom: 20px; /* Provides space between the quote text and the source line */
    font-style: italic; /* Makes the quote text italic, as seen in the image */
    text-align: center; /* Centers the quote text within the box */
}

/* Style for the citation source (e.g., "Sundara Kanda") and its icon */
.ramayana-citation .quote-source {
    display: block; /* Ensures the source text takes its own line */
    text-align: right; /* Aligns the source text and icon to the right */
    font-size: 0.9em; /* Smaller font size for the source */
    color: #6B5E4F; /* Muted, earthy tone */
    font-style: normal; /* Ensures the source text is not italic */
    margin-top: 10px; /* Space between the quote text and the source line */
    /* No need for padding-right here as the ::after is on the main box */
}

/* Decorative large quotation marks using pseudo-elements */
/* Opening decorative quote mark (top-left of the box) */
.ramayana-citation::before {
    content: "\201C"; /* Unicode for a left double quotation mark (looks like the image) */
    font-family: Georgia, serif; /* A font that renders these quotes nicely */
    font-size: 6em; /* Very large size for the decorative quote */
    color: #C0B7A6; /* Muted accent color, matches image */
    position: absolute;
    top: -15px; /* Pulls it slightly up and outside the top border */
    left: 10px; /* Positions it from the left edge of the box */
    line-height: 1; /* Prevents it from affecting surrounding line height */
    opacity: 0.8; /* Makes it slightly transparent for a subtle effect */
    z-index: 1; /* Ensures it's above the box background */
}

/* Closing decorative quote mark (bottom-right of the box) */
.ramayana-citation::after {
    content: "\201D"; /* Unicode for a right double quotation mark */
    font-family: Georgia, serif; /* Consistent font for quotes */
    font-size: 6em;
    color: #C0B7A6;
    position: absolute;
    bottom: -15px; /* Pulls it slightly down and outside the bottom border */
    right: 10px; /* Positions it from the right edge of the box */
    line-height: 1;
    opacity: 0.8;
    z-index: 1;
}

/* The small script icon within the quote-source span */
.inline-script-icon {
    height: 1em !important; /* Makes the image height match the font-size of the text */
    width: auto !important; /* Maintains the image's aspect ratio */
    vertical-align: middle; /* Aligns the image vertically with the text baseline */
    margin-right: 5px; /* Adds a small space between the icon and the text */
    /* Optional: Add a border-radius if you want the image itself to have rounded corners */
    /* border-radius: 3px; */
    /* Optional: Adjust opacity if you want the icon to be more subtle */
    /* opacity: 0.8; */
}

.footer {
    margin-top: 40px;
    padding: 30px 0;
    background: #232323;
    color: #fff
}

.footer .footer-box .footer-heading {
    margin-bottom: 20px;
    color: #03a961;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase
}

.footer .footer-box ul li {
    margin-bottom: 0
}

.footer .footer-box ul li a {
    color: #fff
}

.footer .footer-box ul li a:hover {
    color: #03a961
}

.footer .contact-box ul li {
    line-height: 22px
}

.footer .social-network ul li {
    display: inline-block;
    margin-right: 3px
}

.footer .copyrights {
    margin-top: 60px
}

.inner-banner {
    margin-bottom: 50px
}

.inner-banner img {
    width: 100%
}

.inner-holder h1 {
    margin-bottom: 30px;
    padding: 0 15px
}

.section-1,
.section-2 {
    margin-bottom: 40px
}

.section-1 h1,
.section-2 h1,
.section-1 h2,
.section-2 h2,
.section-1 h3,
.section-2 h3,
.section-1 h4,
.section-2 h4,
.section-1 h5,
.section-2 h5,
.section-1 h6,
.section-2 h6 {
    clear: both;
    margin-bottom: 30px;
    padding: 0 15px
}

.section-4 {
    margin-top: 30px
}

.book-btn {
    position: relative;
    display: inline-block;
    margin-top: 40px;
    font-size: 16px;
    font-weight: 900;
    line-height: 26px;
    text-transform: uppercase;
    overflow: hidden
}

.book-btn a {
    display: block;
    padding: 8px 40px;
    border: solid 3px #1f1c1c
}

.book-btn a:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 3px;
    background-color: #1f1c1c;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform: translate(-100%, -600%) rotate(30deg);
    transform: translate(-100%, -600%) rotate(30deg);
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1)
}

.book-btn a:hover {
    color: #1f1c1c;
    text-decoration: none;
    border: solid 3px transparent;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.book-btn a:hover:before {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.booking-from .col-sm-2 {
    padding-right: 7px
}

.booking-from .col-sm-10 {
    padding-left: 0
}

.gallery .gallery-box {
    margin-bottom: 30px
}

.gallery .gallery-box .title {
    padding: 15px;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3)
}

.gallery .gallery-box a:hover {
    text-decoration: none
}

.gallery .fancybox {
    margin-bottom: 30px
}

.contact-page .contact-form .submit-btn {
    padding: 10px 40px;
    background: 0;
    color: #1a1616;
    font-size: 16px;
    font-weight: 900;
    line-height: 26px;
    text-transform: uppercase;
    border: 3px solid #1f1c1c;
    border-radius: 0
}

.contact-page .contact-form .submit-btn:hover {
    background: #1f1c1c;
    color: #fff
}

@media(max-width:1199px) {
    .img-box .top-callout .callout-1 strong {
        font-size: 28px;
        line-height: 24px
    }

    .img-box .top-callout .callout-1 span {
        font-size: 20px
    }

    .img-box .callout-right .callout-1 .btn-box {
        padding: 12px 37px 4px 12px
    }

    .img-box .callout-right .callout-1 .btn-box strong {
        font-size: 25px
    }

    .img-box .callout-right .callout-1 .btn-box span {
        font-size: 19px
    }

    .img-box .callout-right .bottom-callout .btn-box {
        padding: 4px 37px 4px 12px
    }

    .footer .social-network ul li {
        width: 20%
    }
}

@media(max-width:991px) {
    .header .main-nav .navbar-nav li {
        font-size: 13px
    }

    .header .main-nav .navbar-nav li a {
        padding: 0 7px
    }

    .header .main-nav.sticky .navbar-nav li .dropdown-menu {
        top: 40px
    }

    .slider .carousel-box .carousel-text {
        font-size: 23px
    }

    .carousel-indicators {
        bottom: 0
    }

    .img-box .top-callout .callout-1 {
        padding: 20px
    }

    .img-box .callout-right .callout-1 .btn-box {
        padding: 5px 30px 4px 12px
    }

    .img-box .callout-right .callout-1 .btn-box strong {
        font-size: 20px
    }

    .img-box .callout-right .callout-1 .btn-box span {
        font-size: 16px
    }

    .img-box .callout-right .bottom-callout .btn-box {
        padding: 4px 17px 4px 12px
    }

    .img-box .callout-right .bottom-callout .btn-box span {
        font-size: 15px
    }

    .events-section .events-box .events-title {
        font-size: 16px;
        line-height: 20px
    }
}

@media(max-width:767px) {
    .header .top-contact {
        float: none !important;
        text-align: center
    }

    .header .top-contact ul li {
        margin-bottom: 20px
    }

    .header .logo {
        margin: 0 15px 15px 15px !important
    }

    .header .main-nav .navbar-toggle {
        background: #03a961;
        border-radius: 0
    }

    .header .main-nav .navbar-toggle .icon-bar {
        background: #fff
    }

    .header .main-nav .navbar-nav li a {
        padding: 10px 0
    }

    .header .main-nav .navbar-nav li .dropdown-menu {
        box-shadow: none
    }

    .header .main-nav.sticky .navbar-header {
        margin: 0
    }

    .header .main-nav.sticky .logo {
        margin-left: 0 !important
    }

    .header .main-nav.sticky .navbar-toggle {
        margin-top: 5px;
        margin-right: 0
    }

    .carousel-indicators li,
    .carousel-indicators .active {
        margin: 0 3px
    }

    .img-box {
        margin-bottom: 0
    }

    .img-box .top-callout {
        margin-bottom: 20px
    }

    .img-box .top-callout .callout-1 {
        padding: 20px 19px
    }

    .img-box .top-callout .callout-1 .btn-box {
        padding: 11px 60px 4px 12px
    }

    .img-box .top-callout .callout-1 strong {
        font-size: 22px;
        line-height: 22px
    }

    .img-box .top-callout .callout-1 span {
        font-size: 17px
    }

    .img-box .callout-right .callout-1 .btn-box {
        padding: 8px 80px 4px 12px
    }

    .img-box .callout-right .callout-1 .btn-box strong {
        font-size: 18px
    }

    .img-box .callout-right .callout-1 .btn-box span {
        font-size: 15px
    }

    .img-box .callout-right .bottom-callout .btn-box {
        padding: 4px 40px 4px 12px
    }

    .trip-section {
        margin-bottom: 30px
    }

    .trip-section .trip-box {
        margin-bottom: 30px
    }

    .events-section .events-box {
        margin-bottom: 30px
    }

    .footer .footer-box {
        margin-bottom: 30px
    }

    .footer .copyrights {
        margin-top: 20px
    }

    .footer .social-network ul li {
        width: auto
    }

    .section-4 .col-sm-4 {
        margin-bottom: 30px
    }

    .booking-from .col-sm-10 {
        margin-top: 15px;
        padding-left: 15px
    }
}

/* --- Floating CTA Button Styles --- */
.floating-cta-wrapper {
    position: fixed; /* Makes the element float relative to the viewport */
    bottom: 20px; /* Distance from the bottom of the screen */
    right: 20px; /* Distance from the right of the screen */
    z-index: 1000; /* Ensures it stays on top of other content */
    /* Add a subtle shadow to make it pop out, if desired */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border-radius: 8px; /* Slightly more rounded wrapper if needed */
}

.floating-cta-button {
    /* Reuse and enhance styles from your previous .cta a */
    display: block; /* Ensures the padding and width are applied correctly */
    background-color: #a67c52; /* Earthy brown from your existing styles */
    color: white;
    padding: 0.85rem 1.75rem; /* Slightly more padding for a prominent button */
    text-decoration: none;
    border-radius: 50px; /* Very rounded (pill shape) for a modern look */
    font-weight: bold;
    font-size: 1.1rem; /* Slightly larger text */
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effects */
}

.floating-cta-button:hover {
    background-color: #8c6740; /* Darker shade on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Optional: Hide on very small screens if it obstructs content */
@media (max-width: 600px) {
    .floating-cta-wrapper {
        bottom: 15px;
        right: 15px;
    }
    .floating-cta-button {
        padding: 0.7rem 1.4rem;
        font-size: 1rem;
    }
}

@media all and (max-width:767px) and (min-width:364px) {
    .header .main-nav.sticky .navbar-header {
        margin-top: 45px
    }
}