/* CSS Variables for Dynamic Theme */
:root {
    --primary-color: #f04e30;
    /* Primary Accent Color */
    --primary-dark: #d84327;
    --secondary-color: #333;
    /* Text and header background */
    --background-light: #f8f8f8;
    --background-dark: #222;
    --text-color-light: #333;
    --text-color-dark: #f8f8f8;
    --font-family: 'Arial', sans-serif;
    --font-size: 16px;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    src: local('Pacifico Regular'), local('Pacifico-Regular'),
        url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
    font-display: swap;
}

/* Smooth Scroll Effect */
html {
    scroll-behavior: smooth;
}

/* Social Media */
.fa-facebook {
    color: #1877F2;
}

.fa-instagram {
    color: #E4405F;
}

.fa-twitter {
    color: #1DA1F2;
}

.fa-google {
    color: #DB4437;
}


/* Other Sections Use Same CSS Properties - Example */
#about,
#destinations,
#contact {
    padding: 40px 20px;
    background: var(--background-light);
    text-align: center;
}

body.dark-mode #about, body.dark-mode #destinations, body.dark-mode #contact {
    background: var(--background-dark);
}

/* General Body Styling */
body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    color: var(--text-color-light);
    background-color: var(--background-light);
    transition: all 0.3s ease-in-out;
    width: 100%;

}

/* Light and Dark Mode Styling */
body.dark-mode {
    background-color: var(--background-dark);
    color: var(--text-color-dark);
}

body.dark-mode header {
    background: var(--primary-color);
}

/* General Heading Styles */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Arial', sans-serif;
    /* Change to your preferred font */
    margin: 0;
    padding: 10px 0;
    text-align: center;
    /* Center align headings */
}

/* H1 Styles */
h1 {
    font-size: 3rem;
    /* Adjust size as needed */
    color: #2c3e50;
    /* Dark color */
    text-transform: uppercase;
    /* Uppercase letters */
    letter-spacing: 2px;
    /* Space between letters */
    position: relative;
    /* For pseudo-element positioning */
}

h1::after {
    content: '';
    display: block;
    width: 50%;
    height: 4px;
    /* Thickness of the underline */
    background: #e74c3c;
    /* Underline color */
    margin: 10px auto;
    /* Center the underline */
}

/* H2 Styles */
h2 {
    font-size: 2.5rem;
    color: #2980b9;
    /* Blue color */
    text-transform: capitalize;
    /* Capitalize first letter of each word */
    position: relative;
}

h2::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0px;
    /* Position below the text */
    width: 60%;
    height: 2px;
    /* Thickness of the line */
    background: #27ae60;
    /* Line color */
    transform: translateX(-50%);
    /* Center the line */
}

/* H3 Styles */
h3 {
    font-size: 2rem;
    color: #8e44ad;
    /* Purple color */
    font-weight: bold;
    /* Bold text */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    /* Subtle shadow */
}

/* H4 Styles */
h4 {
    font-size: 1.5rem;
    color: #d35400;
    /* Orange color */
    font-style: italic;
    /* Italic text */
    border-bottom: 2px dashed #34495e;
    /* Dashed underline */
    padding-bottom: 5px;
    /* Space below the text */
}

/* H5 Styles */
h5 {
    font-size: 1.25rem;
    color: #16a085;
    /* Teal color */
    background: #ecf0f1;
    /* Light background */
    padding: 10px;
    /* Padding around text */
    border-radius: 5px;
    /* Rounded corners */
}

/* H6 Styles */
h6 {
    font-size: 1rem;
    color: #7f8c8d;
    /* Grey color */
    text-transform: uppercase;
    /* Uppercase letters */
    letter-spacing: 1px;
    /* Space between letters */
    border-top: 2px solid #bdc3c7;
    /* Solid top border */
    padding-top: 5px;
    /* Space above the text */
}

h1:hover,
h2:hover,
h3:hover,
h4:hover,
h5:hover,
h6:hover {
    color: #e74c3c;
    /* Change color on hover */
    transition: color 0.3s ease;
    /* Smooth transition */
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;

    /* Or a suitable height */
    overflow: hidden;
}

.home-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    /* or contain, depending on your preference */
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    /* Smooth transitions */
    display: flex;
    /* Enable flexbox for centering content */
    align-items: center;
    /* Vertically center content */
    justify-content: center;
    /* Horizontally center content */
}

.slide.active {
    opacity: 1;
}

.slide-content {
    text-align: center;
    /* Center text within the content box */
    color: var(--text-color-dark);
    /* Or your preferred text color */
    padding: 20px;
    max-width: 800px;
    /* Adjust as needed */
    margin: 0 auto;
    /* Center the content box */
}

.slide-content h1::after {
    display: none;
}

.slide-content p {
    font-size: 1.2em;
    /* Adjust as needed */
    margin-bottom: 20px;
}

.cta {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--primary-color);
    /* Example color */
    color: var(--text-color-dark);
    text-decoration: none;
    border-radius: 5px;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background */
    color: var(--text-color-dark);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 1;
    /* Ensure buttons are above the slides */
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

/* Dark Mode Button */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 50px;
    color: var(--text-color-dark);
    cursor: pointer;
    font-size: 16px;
    z-index: 999;
}

/* news information */
.news-container {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    font-family: "Roboto", sans-serif;
    box-shadow: 0 0.4rem 0.8rem -0.4rem rgba(0, 0, 0, .3);
    width: 100%;
    overflow: hidden;

}

.news-container .title {
    position: absolute;
    background: #df2020;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 2.4rem;
    color: var(--text-color-dark);
    font-weight: 900;
    font-size: 1.5rem;
    text-transform: uppercase;
    z-index: 200;
}

.news-container ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    animation: scroll 30s infinite linear;
}

.news-container ul li {
    content: "";
    white-space: nowrap;
    font-size: 1.5rem;
    padding: 0.5rem 2.4rem;
    font-weight: 700;
    position: relative;
    display: inline-block;

}

.news-container ul li::after {
    content: "";
    width: 1pax;
    height: 100%;
    background: var(--background-light);
    position: absolute;
    top: 0;
    right: 0;
}

.news-container ul li:last-child::after {
    display: none;
}


/* Modern Blog Section Styling */
.blog-preview{
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.blog-articles{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.blog-article {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.blog-article:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.blog-article::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(240, 78, 48, 0.1) 0%, rgba(240, 78, 48, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blog-article:hover::after {
    opacity: 1;
}

.article-image {
    height: 200px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-article:hover .article-image img {
    transform: scale(1.1);
}

.article-content {
    padding: 1.5rem;
}

.article-content h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
    transition: color 0.3s ease;
}

.article-content h2 a {
    color: inherit;
    text-decoration: none;
}

.blog-article:hover .article-content h2 {
    color: var(--primary-color);
}

.article-content p {
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.blog-preview .btn {
    display: inline-block;
    margin: 2rem auto;
    padding: 1rem 2rem;
    background: var(--primary-color);
    color: white;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(240, 78, 48, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.blog-preview .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(240, 78, 48, 0.4);
}

.article-image {
    height: 200px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-article:hover .article-image img {
    transform: scale(1.1);
}

.article-content {
    padding: 1.5rem;
}

.article-content h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
    transition: color 0.3s ease;
}

.article-content h2 a {
    color: inherit;
    text-decoration: none;
}

.blog-article:hover .article-content h2 {
    color: var(--primary-color);
}

.article-content p {
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.blog-preview .btn {
    display: inline-block;
    margin: 2rem auto;
    padding: 1rem 2rem;
    background: var(--primary-color);
    color: white;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(240, 78, 48, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.blog-preview .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(240, 78, 48, 0.4);
}

/* About us */

.about {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    /* Center the section horizontally */
}

.about .video-container {
    flex: 1 1 42rem;
    /* Maintain original flex basis */
    max-width: 500px;
    /* Set a maximum width for the video container */
    margin: 0 auto;
    /* Center the video container */
}

.about .video-container video {
    border-radius: 1rem;
    width: 100%;
    height: 425px;
    object-fit: cover;
}

.about .video-container .controls {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 1;
    /* Ensure controls are above the video */
    display: flex;
    /* Arrange buttons horizontally */
}

.about .video-container .control-btn {
    width: 20px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black */
    border-radius: 50%;
    /* Make them round */
    margin-right: 10px;
    cursor: pointer;
}

.about .video-container .controls span:hover {
    background: var(--background-light);
}

.about .content {
    flex: 1 1 42rem;
}

.about .content span {
    color: blue;
    font-size: 2rem;
    font-weight: 600;
    font-family: 'Times New Roman', Times, serif;
}

.about .content h3 {
    font-size: 3rem;
    font-family: monospace;
}

.about .content p {
    font-size: 1.5rem;
    padding: 1rem 1rem;
    line-height: 2;
    font-family: 'Times New Roman', Times, serif;
}

.about .content button {
    padding: 10px 20px;
    background-color: #f04e30;
    color: var(--text-color-dark);
    border: none;
    cursor: pointer;
    text-decoration: none;
}

/* Destinations Section */

.destinations {
    padding: 5rem 0;
}

.destination-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.destination-cards .card {
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    display: none;
}

#destinations .destination-cards .card:nth-child(1),
#destinations .destination-cards .card:nth-child(2),
#destinations .destination-cards .card:nth-child(3) {
    display: inline-block;
}

.destination-cards .card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.loadmore-container {
    margin-top: 2rem;
}

.loadmore-container button {
    padding: 10px 20px;
    background-color: #f04e30;
    color: var(--text-color-dark);
    border: none;
    cursor: pointer;
}

/* Best Bhutan Selling Packages */

.packages {
    padding: 5rem 0;
}

.packages-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    margin: 0 auto;
}

.package-box {
    background-color: var(--background-light);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 300px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.package-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    margin-bottom: 15px;
}

.package-box h2 {
    font-size: 24px;
    color: var(--text-color-light);
    margin-bottom: 15px;
}

.package-box p {
    font-size: 14px;
    color: var(--text-color-light);
    margin-bottom: 20px;
}

.package-box ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.package-box ul li {
    font-size: 14px;
    color: var(--text-color-light);
    margin-bottom: 10px;
}

.btn {
    display: inline-block;
    background-color: #ff6f61;
    color: var(--text-color-dark);
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #e65a50;
}

/* Most Attraction Places */

#Top-Attraction-Places {
    padding: 5rem 0;
}

.carousel {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.carousel .list .item {
    position: absolute;
    inset: 0 0 0 0;
}

.carousel .list .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel .list .item .content {
    position: absolute;
    top: 20%;
    width: 1140px;
    max-width: 80%;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 30%;
    box-sizing: border-box;
    color: var(--text-color-dark);
    text-shadow: 0 5px 10px #0004;
}

.carousel .list .item .content .topic {
    font-weight: bold;
    font-size: 3em;
    line-height: 1.3em;
    color: var(--primary-color);
}

.carousel .list .item .content .des {
    font-size: 1.5rem;
    padding: 0px, 10px;
}

.carousel .list .item .content button {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--text-color-dark);
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
}

/*thumbnail*/
.thumbnail {
    position: absolute;
    bottom: 50px;
    left: 50%;
    width: max-content;
    z-index: 100;
    display: flex;
    gap: 20px;
}

.thumbnail .item {
    width: 150px;
    height: 220px;
    flex-shrink: 0;
    position: relative;
}

.thumbnail .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;

}

.thumbnail .item .content {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

.thumbnail .item .content .title {
    font-weight: bold;
}

/*Arrows*/
.arrows {
    position: absolute;
    top: 80%;
    right: 52%;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}

.arrows button {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-color: var(--text-color-light);
    border: none;
    font-family: monospace;
    color: var(--text-color-dark);
    font-weight: bold;
    font-size: large;
    transition: .5s;
    z-index: 100;
}

.arrows button:hover {
    background: var(--background-light);
    color: var(--secondary-color);
}

.carousel .list .item:nth-child(1) {
    z-index: 1;
}

.carousel .list .item:nth-child(1) .topic,
.carousel .list .item:nth-child(1) .title,
.carousel .list .item:nth-child(1) .des,
.carousel .list .item:nth-child(1) .buttons {
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent 0.5s linear 1 forwards;
}

@keyframes showContent {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);

    }
}

.carousel .list .item:nth-child(1) .topic {
    animation-delay: 1.2s;
}

.carousel .list .item:nth-child(1) .title {
    animation-delay: 1.4s;
}

.carousel .list .item:nth-child(1) .des {
    animation-delay: 1.6s;
}

.carousel .list .item:nth-child(1) .buttons {
    animation-delay: 1.8s;
}

/*effect next click*/
.carousel.next .list .item:nth-child(1) img {
    width: 150px;
    height: 220px;
    position: absolute;
    left: 50%;
    bottom: 50%;
    border-radius: 20px;
    animation: showImage 0.5s linear 1 forwards;
}

@keyframes showImage {
    to {
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: 0;
    }
}

.carousel.next .thumbnail .item:nth-last-child(1) {
    width: 0;
    overflow: hidden;
    animation: showThumbnail .5s linear 1 forwards;
}

@keyframes showThumbnail {
    to {
        width: 150px;
    }
}

.carousel.next .thumbnail {
    transform: translateX(150px);
    animation: transformThumbnail .5s linear 1 forwards;
}

@keyframes transformThumbnail {
    to {
        transform: translateX(0);
    }
}

/*effect prev click*/
.carousel.prev .list .item:nth-child(2) {
    z-index: 2;
}

.carousel.prev .list .item:nth-child(2) img {
    position: absolute;
    bottom: 0;
    left: 0;
    animation: outImage 0.5s linear 1 forwards;
}

@keyframes outImage {
    to {
        width: 150px;
        height: 220px;
        border-radius: 20px;
        left: 50%;
        bottom: 50px;
    }
}

.carousel.prev .thumbnail .item:nth-last-child(1) {
    width: 0;
    overflow: hidden;
    animation: showThumbnail 0.5s linear 1 forwards;
}

.carousel.prev .list .item:nth-child(2) .topic,
.carousel.prev .list .item:nth-child(2) .title,
.carousel.prev .list .item:nth-child(2) .des,
.carousel.prev .list .item:nth-child(2) .buttons {
    animation: contentOut 1.5s linear 1 forwards;
}

@keyframes contentOut {
    to {
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
    }
}

.carousel.next .arrows button,
.carousel.prev .arrows button {
    pointer-events: none;
}

/*time*/
.time {
    width: 0;
    height: 5px;
    background-color: var(--primary-color);
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
}

.carousel.next .time,
.carousel.prev .time {
    width: 100%;
    animation: timeRunning 2s linear 1 forwards;
}

@keyframes timeRunning {
    to {
        width: 0;
    }
}

/* Booking Procedure */

.booking-procedure {
    padding: 5rem 0;
}

.booking-procedure .procedure {
    text-align: left;
    text-transform: capitalize;
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    flex-wrap: wrap;
    background-image: url(../photoes/imagess.jpg);
}

.booking-procedure .procedure .wrapper {
    width: 50%;
    text-align: center;
}

.booking-procedure .procedure .wrapper h1 {
    font-size: 4rem;
}

.booking-procedure .procedure .wrapper h1::after {
    display: none;
}

.booking-procedure .procedure .wrapper span {
    color: blue;
}

.booking-procedure .procedure .sub-heading {
    width: 50%;
    text-align: center;

}

.booking-procedure .procedure .sub-heading h2 {
    font-size: 3rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.booking-procedure .procedure .sub-heading h2::before {
    display: none;
}

.booking-procedure .procedure .sub-heading p {
    font-size: 2rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.booking-procedure .booking-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1rem;
}

.booking-procedure .booking-steps .steps {
    flex: 1 30rem;
    border-radius: .5rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
    margin: 2rem 2rem;
    height: auto;
}

.booking-procedure .booking-steps .steps i {
    font-size: 8rem;
    padding-left: 18rem;

}

.booking-procedure .booking-steps .steps h2 {
    font-size: 2rem;
    text-align: center;
    padding: 1rem 2rem;
}

.booking-procedure .booking-steps .steps p {
    font-size: 1.2rem;
    text-align: center;
    padding-bottom: 2rem;
}


/* Gallery Section */
.gallery {
    padding: 2rem;
    text-align: center;
}

.gallery a {
    color: #3498db;
    text-decoration: none;
}

.gallery a:hover {
    text-decoration: underline;
}

.gallery h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .overlay {
    opacity: 1;
}

.gallery-item .overlay i {
    font-size: 2rem;
}




/* Lightbox Styles */
.lightbox img {
    max-width: 100%;
    height: auto;
}


/* Testimonials Section Styling */
#testimonials {
    padding: 40px 20px;
    text-align: center;
}

.testimonials-container {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.testimonial {
    width: 30%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.testimonial p {
    font-style: italic;
    margin-bottom: 10px;
}

.testimonial h4 {
    font-weight: bold;
    color: #f04e30;
}

/* Brand-slider */
.brand-container {
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-container .swiper-container {
    width: 80%;
    overflow: hidden;
}

.brand-container .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-container .swiper-slide img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
    /* Adjust based on logo size */
}

/* Chat Button */
.chat-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--primary-color);
    color: white;
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 999;
    transition: var(--transition);
}

.chat-button:hover {
    background-color: var(--primary-dark);
    transform: translateY(-3px);
}

/* Chat Popup */
.chat-popup {
    display: none;
    position: fixed;
    bottom: 140px;
    right: 20px;
    width: 350px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.chat-header {
    padding: 15px 20px;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.close-chat {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
}

.chat-body {
    height: 300px;
    display: flex;
    flex-direction: column;
}

.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
}

.chat-message {
    margin-bottom: 15px;
    max-width: 80%;
}

.chat-message.agent {
    align-self: flex-start;
}

.chat-message.user {
    align-self: flex-end;
}

.message-content {
    padding: 10px 15px;
    border-radius: 18px;
    background-color: #f1f1f1;
    display: inline-block;
}

.chat-message.agent .message-content {
    background-color: #e3f2fd;
    border-top-left-radius: 5px;
}

.chat-message.user .message-content {
    background-color: var(--primary-color);
    color: white;
    border-top-right-radius: 5px;
}

.message-time {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 5px;
    text-align: right;
}

.chat-input {
    padding: 15px;
    border-top: 1px solid var(--border-color);
}

.chat-input textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    resize: none;
    height: 60px;
    margin-bottom: 10px;
    font-family: inherit;
}

.chat-input button {
    width: 100%;
    padding: 10px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: var(--transition);
}

.chat-input button:hover {
    background-color: var(--primary-dark);
}

.chat-footer {
    padding: 10px 15px;
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.chat-footer a {
    color: var(--primary-color);
    text-decoration: none;
}

/* Map Section Styling */

.map-container {
    margin: 30px auto;
    width: 90%;
    max-width: 800px;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* Newsletter Section Styling */
#newsletter {
    padding: 40px 20px;
    text-align: center;
}

#newsletter input {
    padding: 10px;
    width: 70%;
    margin-bottom: 10px;
    border-radius: 5px;
}

#newsletter button {
    padding: 10px 20px;
    background-color: #f04e30;
    color: var(--text-color-dark);
    border: none;
    cursor: pointer;
}




/* Contact Section */
#contact {
    padding: 40px 20px;
    background: rgb(48, 47, 47);
    color: var(--text-color-dark);
    text-align: center;
}

#contact input,
#contact textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#contact .sendmessage {
    background-color: #f04e30;
    color: var(--text-color-dark);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

/* Scroll-to-Top Button */
.scroll-top {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 10px;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    box-shadow: var(--shadow);
    z-index: 999;
    transition: var(--transition);
}

.scroll-top:hover {
    background-color: var(--primary-color);
    transform: translateY(-3px);
}


/* Fade-in Animation */
.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.fade-in.visible {
    opacity: 1;
}

/* WhatsApp Button */
.whatsapp-button {
    position: fixed;
    bottom: 195px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    z-index: 999;
    transition: var(--transition)
}
.whatsapp-button:hover {
    background-color: #128C7E;
    transform: translateY(-3px);
}


/* Hover Effects for Buttons and Cards */
button,
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

button:hover,
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* FAQ Section Styling */
.FAQs {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--background-light);
}

.FAQs h1 { 
    text-align: center;
    padding-top: 5rem;
}

.FAQs h1::after {
    display: none;
}

.FAQs span {
    color: blue;
}

.FAQs .box-list {
    width: 70%;
    height: 100%;
    background-color: var(--background-light);
}


.FAQs .box-list .List-FAQs {
    border: 0.2rem solid #111010;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    width: 80%;
    background-color: #fff;
}

.FAQs .box-list .List-FAQs h3 {
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
}

.FAQs .box-list .List-FAQs .details {
    margin-top: 1rem;
}

.box-list .List-FAQs .details p {
    font-size: 1rem;
    text-align: start;
    text-decoration: none;
}

@keyframes scroll {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-270%);
    }
}

/* Floating 3D Brochure Tab */
.brochure-download-float.left-side {
    position: fixed;
    left: -180px; /* Hidden by default, slides in on hover */
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

.brochure-download-float:hover {
    left: 0; /* Slides in fully on hover */
}

/* Fade-out effect when at top of page */
.brochure-download-float.fade-on-scroll {
    transition: all 0.5s ease, opacity 0.3s ease;
}

.brochure-download-float.fade-at-top {
    opacity: 0.3;
    pointer-events: none; /* Disables clicks when faded */
}

.brochure-download-float.fade-at-top .brochure-tab {
    transform: translateY(-50%) rotate(90deg) scale(0.9);
}


/* Tab Handle (Looks like a folded paper corner) */
.brochure-tab {
    position: absolute;
    right: -49px;
    left: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    color: white;
    padding: 12px 20px;
    border-radius: 8px 0 8px 8px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 1;
    transition: all 0.3s ease;
}

.brochure-tab:hover {
    background: linear-gradient(135deg, #feb47b, #ff7e5f);
    transform: translateY(-50%) rotate(-90deg) scale(1.05);
}

/* Content Panel (Looks like a sticky note or file) */
.brochure-content {
    background: white;
    padding: 20px;
    border-radius: 8px 0 8px 8px;
    width: 200px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-right: 5px solid #ff7e5f;
    border-left: none;
}

.brochure-content h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 18px;
}

.brochure-content p {
    margin: 0 0 15px 0;
    color: #666;
    font-size: 14px;
}

/* Animated Download Button */
.download-btn-pulse {
    display: inline-block;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    animation: pulse 2s infinite;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.download-btn-pulse:hover {
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    animation: none;
    transform: translateY(-3px);
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(110, 142, 251, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(110, 142, 251, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(110, 142, 251, 0);
    }
}


/* Media Queries for Responsiveness */
@media screen and (max-width: 768px) {
    body {
        font-size: 14px; /* Smaller font size for mobile */
    }

    h1 {
        font-size: 2.5rem; /* Adjust heading size */
    }

    h2 {
        font-size: 2rem; /* Adjust heading size */
    }

    h3 {
        font-size: 1.5rem; /* Adjust heading size */
    }

    #home .controls .vid-btn {
        height: 1rem;
        width: 1rem;
    }

    .news-container .title {
        font-size: 1.2rem; /* Adjust title size */
    }

    .news-container ul li {
        font-size: 1.2rem; /* Adjust news item size */
    }

    .about,
    .destinations,
    .contact {
        padding: 20px 10px; /* Reduce padding */
    }

    /* About us */

    .about_container {
        display: block;
    }

    .about_image {
        text-align: center;
        justify-content: center;
    }

    .destination-cards {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust grid for smaller screens */
    }

    .package-box {
        width: 90%; /* Make packages full width */
    }

    .testimonial {
        width: 100%; /* Make testimonials full width */
    }

    /* Booking-procedure */

    #booking-procedure .procedure {
        text-align: left;
        text-transform: capitalize;
        font-family: 'Times New Roman', Times, serif;
        display: flex;
        flex-wrap: wrap;
        background-image: url(../photoes/imagess.jpg);
        height: auto;
    }

    #booking-procedure .procedure .wrapper {
        width: 50%;
        text-align: center;
    }

    #booking-procedure .procedure .wrapper h1 {
        font-size: 2rem;
    }

    #booking-procedure .procedure .wrapper span {
        color: blue;
    }

    #booking-procedure .procedure .sub-heading {
        width: 50%;
        text-align: center;

    }

    #booking-procedure .procedure .sub-heading h2 {
        font-size: 1.8rem;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    #booking-procedure .procedure .sub-heading p {
        font-size: 1.2rem;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }




    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    /* FAQ Section Styling */
    .FAQs {
        display: block;
        width: 100%;
        height: 100%;
        background-color: #ece8e0;
    }

    .FAQs .box-list {
        width: 100%;
        height: 100%;
        background-color: #ece8e0;
    }

    /*Top Attraction Places*/
    .carousel .list .item .content {
        padding-right: 10%; /* Adjust padding */
    }

    .dark-mode-toggle {
        font-size: 14px; /* Adjust button size */
    }

    .brochure-download-float.left-side {
        left: -160px; /* Slightly smaller slide-out */
        top: 60%; /* Lower position for thumb reach */
    }
    
    .brochure-tab {
        padding: 10px 15px; /* Smaller tab */
        right: -40px;
    }
    
    .brochure-content {
        width: 180px; /* Slightly narrower */
        padding: 15px;
    }

}

@media screen and (max-width: 450px) {
    .navbar {
        flex-direction: column;
        text-align: left;
        padding: 10px;
    }

    .nav-links {
        top: 306px;
    }

    .nav-links li {
        margin: 10px 5px;
    }

    .sub-menu {
        margin-left: 20px;
    }

    body {
        font-size: 12px; /* Further reduce font size */
    }

    h1 {
        font-size: 2rem; /* Further adjust heading size */
    }

    h2 {
        font-size: 1.5rem; /* Further adjust heading size */
    }

    h3 {
        font-size: 1.2rem; /* Further adjust heading size */
    }

    .about .video-container video {
        height: 300px; /* Adjust video height */
    }



    .carousel .list .item .content {
        padding-right: 5%; /* Adjust padding */
    }

    .news-container .title {
        font-size: 1rem; /* Adjust title size */
        padding: 0 0.2rem;
    }

    .news-container ul li {
        font-size: 1rem;
        /* Adjust news item size */
    }

    .btn {
        padding: 8px 15px; /* Adjust button size */
    }

    .loadmore-container button {
        padding: 8px 15px; /* Adjust button size */
    }

    .chat-button, .whatsapp-button {
        font-size: 12px; /* Adjust button size */
        padding: 8px 10px; /* Adjust button size */
    }

    .booking-procedure .booking-steps .steps i {
        font-size: 8rem;
        padding-left: 10rem;
        
    }

    .brochure-download-float {
        left: -120px;
        top: auto; /* Remove vertical centering */
        bottom: 20px; /* Stick to bottom */
        transform: none;/* Reset transform */
    }
    
    .brochure-download-float:hover {
        left: 0;
        bottom: 20px; /* Keep bottom alignment */
    }
    
    .brochure-download-float.fade-at-top {
        opacity: -1; /* Slightly more visible on mobile */
        bottom: 10px; /* Raise slightly when faded */
    }
    
    .brochure-tab {
        transform: rotate(0deg); /* Horizontal tab */
        right: 0;
        left: auto;
        top: -35px; /* Position above content */
        padding: 12px 8px;
        border-radius: 8px 0 8px 8px;
    }
    
    .brochure-content {
        width: 190px; /* Compact size */
        padding: 12px;
    }
    
    .brochure-content h3 {
        margin: 0;
        font-size: 10px;
    }
    
    .brochure-content p {
        margin: 0 0 5px 0;
        font-size: 10px;
    }
    
    .download-btn-pulse {
        padding: 5px 8px;/* Smaller button */
        font-size: 10px;
    }
    
    .brochure-download-float.mobile-expanded {
        left: 0 !important;
    }
    .whatsapp-button{
        width: 30px;
        height: 30px;
    }

    /* FAQ Section Styling */
    .FAQs {
        display: block;
        width: 100%;
        height: 100%;
        background-color: #ece8e0;
    }

    .FAQs .box-list {
        width: 100%;
        height: 100%;
        background-color: #ece8e0;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}