@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-straight/css/uicons-solid-straight.css');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-chubby/css/uicons-solid-chubby.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-rounded/css/uicons-regular-rounded.css');
body{
    margin: 0;
    background-color: #ffffff;
    font-size: 12px;
    font-family: "Montserrat", Sans-serif,Poppins;
}
a{
    text-decoration: none;
}
html{
    scroll-behavior: smooth;
}








/*/////////////////////////////////////Index.html - Css////////////////////////////////////////*/



.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #f4f4f4;
}

.header-logo img {
    max-width: 270px; /* Adjust based on your logo size */
    height: auto;
}

.header-menu ul {
    list-style-type: none;
    padding: 0;
}

.header-menu li {
    display: flex;
    align-items: center;
    margin: 5px 0;
    font-size: 15px;
}

.header-menu a {
    text-decoration: none;
    color: #333;
}

.uil-phone-alt,.uil-envelope-alt{
    width: 20px; /* Adjust based on your icon size */
    height: 20px;
    margin-right: 8px;
    color: #17aa04;
    font-size: 18px;
}

.header-search-bar {
    max-width: 80%;
    position: relative;
}

.header-search-bar form {
    display: flex;
}

.header-search-bar input {
    padding: 10px;
    border: 1px solid #fff;
    border-radius: 20px 0 0 20px;
    width: 100%;
    outline: none;
}

.header-search-bar button {
    background-color: #a8a8a8;
    border: none;
    border-radius: 0 20px 20px 0;
    padding: 10px;
    cursor: pointer;
}

.header-search-bar button i {
    color: white;
}

.header-search-bar button:hover {
    background-color: #8b8b8b;
}
.fi-rr-search{
    position: relative;
    top: 1px;
    right: 1px;
}

.green-screen-below-header{
    background: #043100;
    padding: 60px;
}
/* Responsive Styles */
@media (max-width: 768px) {
    .header-section {
        flex-direction: column;
    }

    .header-menu ul {
        display: flex;
        flex-direction: column; /* Stack the links vertically */
        place-items: center;
    }
    .header-search-bar {
        max-width: 80%; /* Allow search bar to take full width */
    }
    .header-search-bar input {
        width: 100%;
    }
    .header-menu li{
        font-size: 12px;
    }
    .green-screen-below-header{
        padding: 20px;
    }
}

@media (max-width:500px){
    .span-display{
        display: none;
    }

    .header-menu li{
        margin-right: 22px;
    }
    .uil-phone-alt,.uil-envelope-alt{
        width: 100%;
        height: auto;
        color: #ffffff;
        font-size: 18px;
        font-weight: bold;
        padding: 10px;
        display: inline-block;
        background: #17aa04;
        text-align: center;
    }
    .uil-phone-alt:hover,.uil-envelope-alt:hover{
        background: #043100;
    }
    .header-menu ul {
        display: flex;
        flex-direction: row; /* Stack the links vertically */
        place-items: center;
        justify-content: space-between; /* Evenly space the items */
    }
    .green-screen-below-header{
        padding: 20px;
    }
}






















.menu-icon {
    font-size: 25px;
    cursor: pointer;
    background: #333;
    color: white;
    padding-left: 20px;
}

.navbar {
    display: none; /* Initially hide the navbar */
    width: 100%;
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.navbar ul li {
    padding: 10px;
    text-align: center;
}

.navbar ul li a {
    color: white;
    text-decoration: none;
    display: block;
}

.navbar.show {
    display: block; /* Show the navbar when it has the 'show' class */
}



@media (min-width: 551px){
    .menu-icon{
        display: none;
    }
    #navbar{
        display: none;
    }
}
@media (max-width: 550px){
    #pc-menu{
        display: none;
    }
}















































































/*Menu*/
header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    font-size: 18px;
}
  
header nav ul li{
    float: left;
}
  
header nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 20px;
    text-decoration: none;
}
  
header nav ul li a:hover:not(.active) {
    background-color: #111;
}
  
.active {
    background-color: #17aa04;
}

.active:hover{
    background-color: #333;
}

@media (max-width: 680px ){
    header nav ul li a{
        padding: 20px;
        font-size: 13px;

    }
}
@media (max-width: 600px ){
    header nav ul li a{
        padding: 20px;
        font-size: 10px;

    }
    .navbar-li a{
        padding: 10px;
        font-size: 12px;
    }
    .navbar ul li{
        padding: 0px;
    }
}

@media (max-width: 410px){
    header nav ul li a{
        font-size: 10px;
        padding: 10px;
    }
}








/*linked nav*/
.linked-nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 18px;
}

.linked-nav ul li{
    background: black;
    padding: 10px;
}

.linked-nav ul li:hover{
    background: transparent;
    border-bottom: 1px solid white;
}
.linked-nav ul a{
    display: inline-block;
    color: white;
    text-align: center;
    text-decoration: none;
    padding-right: 20px;
    padding-top: 15px;
}

/*Website title*/
.responsive-section-web-title {
    max-width: 100%; /* Limit the width of the section */
    margin: 0 auto; /* Center the section */
    padding: 20px; /* Add padding */
}

.title-web-title h1 {
    font-size: 40px;
    margin: 0;
    color: white;
    font-weight: 600;
}

.description-web-title h3 {
    font-size: 1.75em;
    margin: 10px 0;
    color: white;
    text-transform: uppercase;
    font-weight: 300;
    line-height: 2;
}

.icon-list-web-title,
.link-list-web-title {
    margin: 0px 0;
}


.link-list-web-title{
    margin: 50px 0 0 0;
}
.icon-list-web-title{
    margin: 20px 0;
}



.icon-list-web-title ul,
.link-list-web-title ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Evenly space the items */
}

.link-list-web-title ul{
    background-color: transparent;
    width: 50%;
    max-width: 450px;
}

.icon-list-web-title li,
.link-list-web-title li {
    text-align: left;
    font-size: 20px;
    color: white;
}


.link-list-web-title li{
    background: rgb(235, 235, 235);
    width: 100%;
    text-align: center;
}


.icon-list-web-title img {
    width: 30px; /* Set icon size */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Center the icon */
    margin: 0 auto 5px; /* Add margin below icon */
}

.link-list-web-title a {
    text-decoration: none;
    color: #043100;
    display: inline-block;
    width: 100%;
    padding-block: 20px;
}

.link-list-web-title a:hover {
    background: #043100;
    color: white;
}

.fa-users,.fi-bs-shuttle-van,.uil-bed,.fi-ss-gas-pump-alt{
    color: white;
    margin-right: 5px;
}

/* Responsive styles */
@media (max-width: 1000px){
    .icon-list-web-title li{
        font-size: 15px;

    }
    .title-web-title h1{
        font-size: 44px;
    }
    .link-list-web-title li{
        width: 60%;
    }
    .link-list-web-title ul{
        width: 60%;
    }
}

@media (max-width: 768px){
    .icon-list-web-title li{
        font-size: 11px;
    }
    .title-web-title h1{
        font-size: 32px;
    }
    .link-list-web-title ul{
        display: flex;
        flex-direction: row;
        width: 70%;
    }
    .link-list-web-title li{
        width: 60%;
    }
    .link-list-web-title a{
        font-size: 15px;
    }
    
}

@media (max-width: 600px) {
    .link-list-web-title ul {
        flex-direction: row; /* Stack items vertically on small screens */
        display: flex;
    }
    .icon-list-web-title ul{
        display: block;
    }
    .description-web-title h3{
        font-size: 1.25em;
    }
    .under-link{
        opacity: 1;
    }

    .link-list-web-title li{
        width: 80%;
    }
    .link-list-web-title a{
        font-size: 12px;
    }
}



























/* carousel */

.carousel{
    height: 105vh;
    margin-top: -50px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.carousel .list .item{
    width: 100%;
    height: 100%;
    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: #fff;
    text-shadow: 0 5px 10px #0004;
}
.carousel .list .item .author{
    font-weight: bold;
}
.carousel .list .item .title,
.carousel .list .item .topic{
    font-size: 5em;
    font-weight: bold;
    line-height: 1.3em;
    text-shadow: 1px 1px 6px #00000042;
}
.carousel .list .item .topic{
    color: #98ffa5;
}
.carousel .list .item .buttons{
    display: grid;
    grid-template-columns: repeat(2, 130px);
    grid-template-rows: 40px;
    gap: 5px;
    margin-top: 20px;
}
.carousel .list .item .buttons button{
    border: none;
    background-color: #eee;
    letter-spacing: 3px;
    font-family: Poppins;
    font-weight: 500;
}
.carousel .list .item .buttons button:nth-child(2){
    background-color: transparent;
    border: 1px solid #fff;
    color: #eee;
}
/* thumbail */
.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{
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: #00000057;
    border-radius: 20px;
    padding: 5px;
}
.thumbnail .item .content .title{
    font-weight: 500;
}
.thumbnail .item .content .description{
    font-weight: 300;
}
/* arrows */
.arrows{
    position: absolute;
    top: 80%;
    right: 52%;
    z-index: 100;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}
.arrows button{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #00000070;
    border: none;
    color: #fff;
    font-family: monospace;
    font-weight: bold;
    transition: .5s;
    text-shadow: 1px 1px 1px black;
}
.arrows button:hover{
    background-color: #fff;
    color: #000;
    text-shadow: none;
}

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

/* animation text in first item */

.carousel .list .item:nth-child(1) .content .author,
.carousel .list .item:nth-child(1) .content .title,
.carousel .list .item:nth-child(1) .content .topic,
.carousel .list .item:nth-child(1) .content .des,
.carousel .list .item:nth-child(1) .content .buttons
{
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s 1s linear 1 forwards;
}
@keyframes showContent{
    to{
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
.carousel .list .item:nth-child(1) .content .title{
    animation-delay: 1.2s!important;
}
.carousel .list .item:nth-child(1) .content .topic{
    animation-delay: 1.4s!important;
}
.carousel .list .item:nth-child(1) .content .des{
    animation-delay: 1.6s!important;
}
.carousel .list .item:nth-child(1) .content .buttons{
    animation-delay: 1.8s!important;
}
/* create animation when next click */
.carousel.next .list .item:nth-child(1) img{
    width: 150px;
    height: 220px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    border-radius: 30px;
    animation: showImage .5s linear 1 forwards;
}
@keyframes showImage{
    to{
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

.carousel.next .thumbnail .item:nth-last-child(1){
    overflow: hidden;
    animation: showThumbnail .5s linear 1 forwards;
}
.carousel.prev .list .item img{
    z-index: 100;
}
@keyframes showThumbnail{
    from{
        width: 0;
        opacity: 0;
    }
}
.carousel.next .thumbnail{
    animation: effectNext .5s linear 1 forwards;
}

@keyframes effectNext{
    from{
        transform: translateX(150px);
    }
}

/* running time */

.carousel .time{
    position: absolute;
    z-index: 1000;
    width: 0%;
    height: 3px;
    background-color: #ffffff;
    left: 0;
    top: 0;
}

.carousel.next .time,
.carousel.prev .time{
    animation: runningTime 3s linear 1 forwards;
}
@keyframes runningTime{
    from{ width: 100%}
    to{width: 0}
}
.carousel .list .item .des{
    text-shadow: 1px 1px 5px #0000009e;
}

/* prev click */

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

.carousel.prev .list .item:nth-child(2) img{
    animation: outFrame 0.5s linear 1 forwards;
    position: absolute;
    bottom: 0;
    left: 0;
}
@keyframes outFrame{
    to{
        width: 150px;
        height: 220px;
        bottom: 50px;
        left: 50%;
        border-radius: 20px;
    }
}

.carousel.prev .thumbnail .item:nth-child(1){
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail .5s linear 1 forwards;
}
.carousel.next .arrows button,
.carousel.prev .arrows button{
    pointer-events: none;
}
.carousel.prev .list .item:nth-child(2) .content .author,
.carousel.prev .list .item:nth-child(2) .content .title,
.carousel.prev .list .item:nth-child(2) .content .topic,
.carousel.prev .list .item:nth-child(2) .content .des,
.carousel.prev .list .item:nth-child(2) .content .buttons
{
    animation: contentOut 1.5s linear 1 forwards!important;
}

@keyframes contentOut{
    to{
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
    }
}
@media screen and (max-width: 678px) {
    .carousel .list .item .content{
        padding-right: 0;
    }
}

@media (max-width:768px){
    .carousel{
        height: 45vh;
    }
    .carousel .list .item .content{
        top: 6%;
        left: 45%;
    }

    .thumbnail .item{
        height: 100px;
    }
    @keyframes outFrame{
        to{
        height: 0px;
     }
    }

    .carousel .list .item .author{
        font-size: 15px;
    }
    .carousel .list .item .title{
        font-size: 25px;
    }
    .carousel .list .item .topic{
        font-size: 25px;
    }
    .carousel .list .item .des{
        font-size: 13px;
    }
}

@media (max-width:650px){
    .carousel{
        height: 35vh;
    }
    .carousel .list .item .content{
        top: 6%;
        left: 45%;
    }
    .thumbnail .item{
        height: 70px;
        width: 100px;
    }
   
    .carousel .list .item .author{
        font-size: 14px;
    }
    .carousel .list .item .title{
        font-size: 25px;
    }
    .carousel .list .item .topic{
        font-size: 20px;
    }
    .carousel .list .item .des{
        font-size: 12px;
    }
}

@media (max-width:450px){
    .carousel{
        height: 30vh;
    }
    .thumbnail .item{
        height: 70px;
        width: 100px;
    }
    .carousel .list .item .author{
        font-size: 12px;
    }
    .carousel .list .item .title{
        font-size: 20px;
    }
    .carousel .list .item .topic{
        font-size: 18px;
    }
    .carousel .list .item .des{
        display: none;

    }
    
}













.day-night-responsive-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.day-night-top-div {
    display: flex;
    justify-content: center;
    gap: 10%; /* space between the two top divs */
    margin-bottom: 20px; /* space between top divs and bottom div */
}

.day-night-item {
    text-align: center;
    width: 40%; /* fixed width for items */
}

.uil-sun,.uil-moon{
    font-size: 25px;
    color: #17aa04;
    margin-right: 10px;
}

.day-night-item h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-family: "Montserrat", Sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1em;
    color: #777;
}

.day-night-item img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* optional styling */
}

.day-night-bottom-div ul {
    list-style-type: none;
    padding: 0;
    display: grid;
    place-items: center;
}

.day-night-bottom-div li {
    margin: 10px 0; /* space between list items */
}

.day-night-bottom-div a {
    text-decoration: none;
    color: #464646;
    background: transparent;
    padding: 20px;
    font-weight: bold;
    font-size: 15px;
}
.day-night-bottom-div{
    background: #e1e1e1;
}
.day-night-bottom-div a:hover,.day-night-bottom-div:hover  {
    background: #888;
    color: white;
    
}

/* Responsive Styles */
@media (max-width:1000px){
    .day-night-item h3{
        font-size: 18px;
    }
    .uil-sun,.uil-moon{
        font-size: 20px;
        margin-right: 8px;
    }
}
@media (max-width: 768px){
    .day-night-item h3{
        font-size: 16px;

    }
    .uil-sun,.uil-moon{
        font-size: 15px;
        margin-right: 5px;
    }
}
@media (max-width: 620px) {
    .day-night-top-div {
        flex-direction: column; /* stack items on smaller screens */
        align-items: center; /* center align */
    }

    .day-night-item {
        width: 100%; /* full width on small screens */
    }
    .day-night-item img{
        max-width: 70%;
    }
}































.motorhome-list-responsive-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.motorhome-list-title-div {
    text-align: center;
    margin-bottom: 20px;
}

.motorhome-list-list-div {
    display: flex;
    justify-content: center;
}

.motorhome-list-icon-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 90%;
}

.motorhome-list-icon-list li {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #f4f4f4;
    border-radius: 5px;
    cursor: default;
}







.motorhome-list-resize-title-description{
    width: 86%; 
    font-family: 'Muli', sans-serif;
    text-align: justify;
    line-height: 1.5;
}
.motorhome-list-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    max-width: 1140px;
    margin: 0 auto;
    background:#fff;
}

.motorhome-list-text-section {
    flex: 1;
}


/* Responsive Design */
@media (min-width:1001px){
    .fa-door-open-class{
        width: auto;
        grid-column: span 2;
    }
}
@media (max-width: 1000px){
    .fa-id-card-class,.fa-gas-pump-class{
        width: auto;
        grid-column: span 2;
    }
    .fa-door-open-class{
        width: auto;
        grid-column: span 2;
    }
  
}


@media (max-width: 870px) {
    .motorhome-list-icon-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .fa-id-card-class,.fa-gas-pump-class{
        width: auto;
    }
    .fa-door-open-class{
        width: auto;
        grid-column: span 2;
    }
}
@media (max-width: 670px) {
    .fa-door-open-class{
        width: auto;
        grid-column: span 2;
    }
    .motorhome-list-hr-display{
        display: none;
    }
}
@media (max-width: 600px) {
    .motorhome-list-icon-list {
        grid-template-columns: 1fr;
    }
    .fa-door-open-class{
        width: auto;
    }
}

























.resize-title-description{
    width: 86%; 
    font-family: 'Muli', sans-serif;
    text-align: justify;
    line-height: 1.5;
}

.title-1{
    font-size: 30px; 
    font-weight: 450; 
    color: green;
}

.p2{
    color: #6c6c6c;
  font-size: 15px;
}
@media (max-width: 768px){
    .resize-title-description{
        width: 100%;
    }
}



















.parent-first {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh; /* Full viewport height */
    overflow: hidden;
}

.child-first {
    width: 80%;
    padding: 20px;
    box-sizing: border-box;
    color: black; /* Text color inside the black background */
}

.child-first-h1 {
    margin: 0 0 10px 0; /* margin adjustments */
}

.ul-list-first {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    display: grid; /* Use grid for layout */
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 10px; /* Space between items */
}

.li-list-first {
    display: flex; /* Flexbox for icon and text alignment */
    align-items: center; /* Center items vertically */
}

.li-list-first img {
    width: 20px; /* Adjust icon size */
    height: 20px; /* Adjust icon size */
    margin-right: 10px; /* Space between icon and text */
}

@media (max-width: 768px) {
    .parent-first{
        height: 50vh; /* Full viewport height */
    }
    /* Responsive adjustments for smaller screens */
    .child-first {
        width: 90%; /* Increase width on smaller screens */
    }

    .ul-list-first {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
    }
}

@media (max-width: 480px) {
    .parent-first{
        height: 70vh; /* Full viewport height */
    }
    /* Responsive adjustments for mobile screens */
    .ul-list-first {
        grid-template-columns: 1fr; /* 1 column on mobile screens */
    }
}































.container-last-container{
    background-image: url('/images/000.jpg');
    height: 650px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
}

.container-last {
    max-width: 800px;
    margin: 20px auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.title-last {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.description-last {
    font-size: 16px;
    margin-bottom: 20px;
}

.content-last {
    display: flex;
    flex-wrap: wrap;
}

.large-text-last {
    flex: 0.62;
    padding: 20px;
    background-color: #233140;
    border-radius: 8px;
    margin-right: 10px;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.item-list-last {
    flex: 1;
}

.item-list-last ul {
    list-style-type: none;
    padding: 0;
}

.item-list-last li {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.icon-last {
    margin-right: 10px;
    color: #233140;
}
.price-per-night1{
    color: #FFFFFF;
    font-family: "Quattrocento Sans", Sans-serif;
    font-size: 110px;
    font-weight: 600;
    padding: 0;
    margin: 0;
    flex: 1;
}
.from-night1{
    color: #FFFFFF;
    font-family: "Quattrocento Sans", Sans-serif;
    font-size: 40px;
    font-weight: 600;
    padding: 0;
    margin: 0 10px 0 0;
    flex: 1;
}
.price-per-night2{
    color: #FFFFFF;
    font-family: "Quattrocento Sans", Sans-serif;
    font-size: 60px;
    font-weight: 600;
    padding: 0;
    margin: 0;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .container-last-container{
        background-image: url('/images/000.jpg');
        background-attachment: scroll;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100%;
        width: auto;
    }
    .content-last {
        flex-direction: column; /* Stack vertically on smaller screens */
        grid-template-columns: repeat(2, 1fr);
    }
    
    .large-text-last {
        margin-right: 0; /* Remove right margin */
    }
}




@media (max-width: 500px){
    .container-last-container{
        height: 800px;
    }
    .price-per-night1{
        font-size: 70px;
    }
    .price-per-night2{
        font-size: 35px;

    }
    .from-night1{
        font-size: 25px;
    }
}

































.container-6-icons {
    background-color: #043100;
    padding: 20px;
    text-align: center;
}

.title-6-icons {
    color: #FFFFFF;
    font-family: "Montserrat", Sans-serif;
    font-size: 42px;
    font-weight: 600;
    padding: 50px 0 20px 0;
}

.icon-grid-6-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.icon-item-6-icons {
    border-radius: 8px;
    margin: 10px;
    padding: 10px;
    width: 30%;
    text-align: center;
}


.icon-item-6-icons:hover {
    background: #0000001f;
    cursor: default;
    .h1-6-icons{
        color: white;
    }
    .h3-6-icons{
        color: wheat;
    }
}


.icon-6-icons {
    font-size: 40px; /* Size of the icon */
    color: white;
}

.h1-6-icons {
    font-size: 24px;
    margin: 10px 0 5px;
    font-family: "Muli", Sans-serif;
    color: wheat;
    text-transform: uppercase;
    font-weight: 500;
}

.h3-6-icons {
    font-size: 16px;
    margin: 5px 0;
    color: white;
    font-family: var( --e-global-typography-text-font-family ), Sans-serif;
    font-weight: var( --e-global-typography-text-font-weight );

}

@media (max-width: 768px) {
    .icon-item-6-icons {
        width: calc(50% - 20px); /* 2 items per row on smaller screens */
    }
}

@media (max-width: 480px) {
    .icon-item-6-icons {
        width: calc(100% - 20px); /* 1 item per row on very small screens */
    }
}




























.contain-nBox nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    font-size: 18px;
}
  
.contain-nBox nav ul li{
    max-width: 100%;
    display: flex;
    place-items: center;
}
  
.contain-nBox div nav ul li a {
    color: white;
    text-align: center;
    width: 20%;
}
  
.contain-nBox nav ul li a:hover:not(.active) {
    background-color: #424242;

}












.contain-nBox nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    font-size: 18px;
}
  
.contain-nBox nav ul li{
    max-width: 100%;
    display: flex;
    place-items: center;
}
  
.contain-nBox div nav ul li a {
    color: white;
    text-align: center;
    width: 20%;
}
  
.contain-nBox nav ul li a:hover:not(.active) {
    background-color: #424242;

}





































.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    max-width: 1140px;
    margin: 0 auto;
    background:#f9f9f9;
    margin-top: 20px;
    margin-bottom: 20px;
}

.text-section {
    flex: 1;
    margin-right: 20px; /* Space between text and images */
}

.image-section {
    flex: 0 0 420px; /* Set a fixed width for the image section */
}

.image {
    width: 100%; /* Make images responsive */
}
@media (max-width: 1180px){
    .container{
        margin-top: 0px;
        margin-bottom: 0px;
    }
}
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack elements on smaller screens */
    }

    .text-section {
        margin-right: 0; /* Remove right margin in column layout */
        margin-bottom: 20px; /* Add space below text section */
    }

    .image-section {
        flex: 1; /* Allow image section to take full width */
    }
}



























.container-2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    max-width: 1140px;
    margin: 0 auto;
    background:#fff;
}

.text-section-2 {
    flex: 1;
    margin-right: 20px; /* Space between text and images */
}

.image-section-2 {
    flex: 0 0 420px; /* Set a fixed width for the image section */
}

.image-2 {
    width: 100%; /* Make images responsive */
}
.amenities-layer-padding{
    padding-left: 50px;
    position: relative;
    top: -20px;
}
@media (max-width: 890px) {
    .container-2 {
        flex-direction: column; /* Stack elements on smaller screens */
    }
    
    .text-section-2 {
        margin-right: 0; /* Remove right margin in column layout */
        margin-bottom: 20px; /* Add space below text section */
    }

    .image-section-2 {
        flex: 1; /* Allow image section to take full width */
    }
    .amenities-layer-padding{
        padding-left: 0px;
        top: 0;
    }
}



.title-amenities{
    font-size: 30px; 
    font-weight: 450; 
    color: green;
}

.fa-check{
    padding-right: 5px;
    color: green;
}

.icon-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 columns */
    gap: 16px; /* Space between items */
    list-style-type: none; /* Remove default bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.icon-list li {
    display: flex;
    align-items: center; /* Center items vertically */
    padding: 8px;
    border: 1px solid #ddd; /* Add a border */
    border-radius: 6px; /* Rounded corners */
    transition: background-color 0.3s;
    cursor: default;
}

.icon-list li img {
    width: 24px; /* Set a fixed width for icons */
    height: 24px; /* Set a fixed height for icons */
    margin-right: 8px; /* Space between icon and text */
}

.icon-list li:hover {
    background-color: #f0f0f0; /* Background change on hover */
}

/* Responsive */
@media (max-width: 1000px){
    .icon-list{
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
}
@media (max-width: 890px){
    .icon-list {
        grid-template-columns: repeat(4, 1fr); /* 5columns */

    }
}

@media (max-width: 680px) {
    .icon-list {
        grid-template-columns: repeat(3, 1fr); /* 4 columns on medium screens */
    }
    
}
@media (max-width: 600px) {
    .icon-list {
        grid-template-columns: repeat(2, 1fr); /* 3 columns on medium screens */
    }
    .text-section-2{
        margin: auto;
    }
}

@media (max-width: 480px) {
    .icon-list {
        grid-template-columns: repeat(2, 1fr); /*2 columns on medium screens */
    }
}

















/*Below the Amenities Menu*/
.amenities-menu nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f9f9f9;
    font-size: 18px;
    text-align: center;
}
  
.amenities-menu nav ul li{
    display: inline-block;
    background: #808080;
    margin: 10px;
    border-radius: 10px;
    width: 150px;
}
  
.amenities-menu nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 15px;
    text-decoration: none;
}
  
.amenities-menu nav ul li a:hover:not(.active) {
    background-color: #5c5c5c;
    border-radius: 10px;

}

.amenities-menu{
    padding: 30px 0 30px 0;
}













.responsive-section {
    text-align: center; /* Center align text and image */
    padding: 20px; /* Add some padding */
    display: grid;
    place-items: center;
    background: #f9f9f9;
    max-height: 900px;
}

.responsive-image {
    width: 80%; /* Set width to 80% of the section */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Prevent overflow on smaller screens */
}

  















.motorhome-list-title{
    font-size: 30px; 
    font-weight: 450; 
    color: green;
}
@media (max-width:768px){
    .motorhome-list-title{
        font-size: 20px;
    }
}

@media (max-width: 500px){
    .motorhome-list-title{
        font-size: 15px;
    }
}















@media (min-width: 551px) {
    .small-container {
        display: none;
    }
 }

@media (max-width: 550px) {
    .big-container {
        display: none;
    }
 }
 /* Responsive iFrame */
 .responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
 }
 .responsive-iframe-container iframe,   
 .responsive-iframe-container object,  
 .responsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
 }





























 .last-section-responsive-section {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    height: 300px;
}

.last-section-left-div, .last-section-right-div {
    width: 50%;
    padding: 20px;
}

.last-section-title {
    font-size: 25px;
    margin-bottom: 10px;
    font-weight: 600;
}

.last-section-description {
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 500;
}

.last-section-logo img {
    max-width: 40%; /* Ensures logo is responsive */
    height: auto;
    padding: 15px 0px 30px 0px;
}

.last-section-icon-list {
    display: flex;
    width: 80%;
    flex-direction: row;
}

.uil-instagram,.uil-facebook-f,.uil-twitter-alt{
    font-size: 15px;
    font-weight: 400;
}

.last-section-icon {
    width: 40%;
    text-align: center;
    background-color: #00000042;
    color: white;
    padding: 10px;
    transition: background-color 0.5s;
    transition: color 0.5s;
    margin-right: 20px;
    border-radius: 5px;

}

.last-section-icon:hover{
    background-color: #f0f0f0;
    color: black;
}
.last-section-item-list .last-section-item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    font-size: 15px;
}

.last-section-item-link{
    color:black;
    transition: color 0.3s;
}
.last-section-item-link:hover{
    color: #17aa04;

}
@media (max-width: 768px) {
    .last-section-responsive-section {
        flex-direction: column; /* Stack divs on smaller screens */
    }
    
    .last-section-left-div, .last-section-right-div {
        width: auto; /* Make divs full width on mobile */
    }
    .last-section-responsive-section{
        height: auto;
    }
}












.scroll-up-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block; /* Hidden by default */
    background-color: #949494;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.116);
    transition: background-color 0.3s ease;
    width: 30px;
    height: 30px;
}

.scroll-up-btn:hover {
    background-color: #575757;
}















/* Footer styles */
.footer-class {
    background-color: #f4f4f4;
    color: white;
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
    height: auto;
    border-top: 1px solid #e2e2e2;
}

/* Responsive text size */
.footer-class p {
    font-size: 15px;
    margin: 0;
    color: #515151;
    text-align: left;
    width: 80%;
    padding: 20px;
}

/* Media query for smaller screens */
@media (max-width: 600px) {
    .footer-class p {
        font-size: 0.875rem; /* Smaller font size on small screens */
    }
}





























/*/////////////////////////////////////Contact-Us.html - Css////////////////////////////////////////*/



.contact-us-header {
    position: relative;
    width: 100%;
    height: 440px; /* Adjust height as needed */
    overflow: hidden;
}

.contact-us-header-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire area */
}

.contact-us-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.589); /* Semi-transparent overlay */
}

.contact-us-title-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the title */
    text-align: center;
    color: white; /* Change text color for visibility */
    width: 100%;
}

.contact-us-title {
    color: #FFFFFF;
    letter-spacing: -1px;
    font-size: 70px;
    font-weight: 500;
    text-transform: none;
}

/* Responsive styles */
@media (max-width: 600px) {
    .contact-us-header {
        height: 200px; /* Adjust height for smaller screens */
    }
}
@media (max-width: 500px){
    .contact-us-title{
        font-size:50px
        
    }
}




col{
    margin: 20px 0; /* Add spacing around the input container */
}
label {
    display: block;
    font-weight: 500;
    text-align: left;
}
input {
    width: 100%; /* Make the input take full width */
    padding: 10px; /* Add padding for better appearance */
    border: 1px solid #ccc; /* Border style */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}





























.contact-us-parallax {
    /* The image used */
    background-image: url('/images/wp12288201.jpg'); /* Replace with your image URL */

    /* Height of the parallax section */
    height: 500px;

    /* Create a parallax effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.above-contact-form-responsive-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 42px 65px 20px 65px;
}

.above-contact-form-left-div, .above-contact-form-right-div {
    flex: 1;
    box-sizing: border-box;

}

.above-contact-form-left-div {
    text-align: justify;
}


.above-contact-form-right-div h1 {
    margin-top: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .above-contact-form-left-div, .above-contact-form-right-div {
        flex: 100%; /* Stack vertically on smaller screens */
        margin: 0;
        padding: 0;
    }
    .contact-us-parallax {
        /* remove a parallax effect */
        background-image: url('/images/wp12288201');
        background-attachment: scroll;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;

    }
}

@media (max-width: 550px){
    .above-contact-form-right-div{
        padding-left: 0px;
    
    }
   
}
















.contact-us-container{
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.contact-contact-section-center{
    display: flex;
    flex-direction: column;

}
.contact-name{
    padding: 10px 15px 10px 20px;
    margin-bottom: 15px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    width: 100%;
    font-family: sans-serif;
    font-size: 15px;
}
.contact-email{
    padding: 10px 15px 10px 20px;
    margin-bottom: 15px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    width: 100%;
    font-family: sans-serif;
    font-size: 15px;

}
.contact-phone{
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    width: 100%;
    font-family: sans-serif;
    font-size: 15px;

}
.error-message {
    color: rgb(65, 0, 0);
    margin-bottom: 15px;

}
.contact-textarea{
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    font-family: sans-serif;
    font-size: 15px;
    resize: none;

}

.contact-name:focus{
    border-color: #00b900;
    outline: none;
}
.contact-email:focus{
    border-color: #00b900;
    outline: none;
}
.contact-phone:focus{
    border-color: #00b900;
    outline: none;
}
.contact-textarea:focus{
    border-color: #00b900;
    outline: none;
}


.contact-us-title-div {
    margin-bottom: 20px; /* Space between title and content */
}

.contact-us-content-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center; /* Center text */
    width: auto;
}

.contact-us-h1 {
    font-size: 2.5em; /* Responsive font size */
    text-align: center;
}

.contact-submit{
    padding: 10px;
    background-color: #00b900;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 30px;
    width: 100%;
}
.contact-submit:hover{
    background-color: #008800;
    transition: background-color 0.4s ease-in-out

}

/* Media query for smaller screens */
@media (max-width: 600px) {
    .contact-us-container {
        padding: 15px;
    }

    .contact-submit {
        font-size: 14px;
    }
}


















/* RECEIVED.HTML */
.received-section{
    place-content: center;
    text-align: center;
    display: grid;
    place-items: center;
}
.received-responsive-section {
    background: #f4f4f4;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0px 3px 6px #00000057;
    margin-top: 20px;
    width: 100%;
}

.received-icon {
    margin-right: 10px; /* Space between icon and text */
    font-size: 24px; /* Icon size */
    color: #007bff; /* Icon color */
}
.go-back-contact{
    color: white;
    background-color: green;
    padding: 10px;
    width: 20%;
    display: inline-block;
}
.go-back-contact:hover{
    background-color: #043100;
    transition: background-color 0.3s ease-in-out;
}






















































































/*/////////////////////////////////////FAQS.html - Css////////////////////////////////////////*/
.faqs-parallax {
    /* The image used */
    background-image: url('/images/isle-of-skye-1140x752.jpg'); /* Replace with your image URL */

    /* Height of the parallax section */
    height: 500px;

    /* Create a parallax effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media (max-width: 768px){
    .faqs-parallax {
        /* remove a parallax effect */
        background-image: url('/images/isle-of-skye-1140x752.jpg'); 
        background-attachment: scroll;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;

    }
}




.card-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card {
    background: white;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 500px;
    box-shadow: 0px 5px 8px #00000012;
}

.card-header {
    padding: 10px 25px 10px 10px;
    background: #4CAF50;
    color: white;
    font-size: 1.2em;
    display: block;
}

.card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    line-height: 1.9;
    letter-spacing: 0.03em;
    color: #606060;
    cursor: auto;
    text-align: justify;
    width: 85%;
}

.card.open .card-content {
    max-height: 600px;
    line-height: 1.9;
    color: #606060;
    cursor: auto;
    text-align: justify;
    width: 85%;
    height: 100%;
    max-height: 1000px;
}









.full-width-div {
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
}

.centered-text {
    text-align: center;
    color: #717171;
    margin: 0;
    width: 80%;
    font-size: 15px;
    font-weight: 400;
}






@media (max-width: 550px){
    .card.open .card-content{
        line-height: 1.5;
        color: #606060;
        cursor: auto;
        text-align: justify;
        font-size: 10px;
    }
}










/* --------------------------Terms & Conditions-------------------------------- */

.terms-parallax {
    /* The image used */
    background-image: url('/images/forest-road-mist-avenue-trees-plants-green-spring-foggy-3440x1440-184.jpg'); /* Replace with your image URL */

    /* Height of the parallax section */
    height: 500px;

    /* Create a parallax effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.terms-strong{
    font-size: 25px;
    color: #585858;
}

@media (max-width: 768px){
    .terms-parallax {
        /* remove a parallax effect */
        background-image: url('/images/forest-road-mist-avenue-trees-plants-green-spring-foggy-3440x1440-184.jpg'); 
        background-attachment: scroll; /* Removes parallax effect */
        background-attachment: scroll;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;

    }
    .terms-condition-title-list{
        font-size: 20px;
    }
    .terms-strong{
        font-size: 20px;
    }
    .terms-p2{
        font-size: 12px;
        margin: 0px 0px 0px 20px;
    }
}












@media (max-width: 768px){
    .contact-us-title{
        font-size: 50px;
    }
}



@media (max-width: 550px){
    .contact-us-title{
        font-size: 35px;
    }
}































/* --------------------------About-Us-------------------------------- */
.about-parallax {
    /* The image used */
    background-image: url('/images/4610-wallpaper-roads.webp'); /* Replace with your image URL */
    /* Height of the parallax section */
    height: 500px;
    /* Create a parallax effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 768px){
    .about-parallax {
        /* remove a parallax effect */
        background-image: url('/images/4610-wallpaper-roads.webp'); 
        background-attachment: scroll;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;



    }
   
}














.phone-input {
    border: 1px solid #ccc;
    height: 40px;
    font-size: 16px;
}
.country-code {
    position: absolute;
    left: 4px;
    top: 26px;
    pointer-events: none;
    color: #000;
    font-size: 16px;
    font-family: sans-serif;
}





.t-about-terms{
    font-size: 25px;
    color: #585858;
}
.p2-about-terms{
    margin:10px 0px 0px 20px;
    font-size: 15px;
    color: #4a4a4a;
}
@media (max-width: 768px){
    .t-about-terms{
        font-size: 18px;
    }
    .p2-about-terms{
        font-size: 12px;
    }
}