:root{
	/* OLD COLOR B9977B */
    --theme-color: #6D5336;

    /* FONT SIZE */

    --h1_font: 84px;
    --h2_font: 42px;
    --h3_font: 42px;
    --h4_font: 26px;
    --h5_font: 24px;
    --h6_font: 18px;
    --body_font: 16px;

    /* FONT WEIGHT */

    --bold_font: 700;
    --medium_font: 500;
    --regular_font: 400;
    --light_font: 300;

    /* FONT FAMAILY */

    --body_font_family: 'Philosopher', sans-serif;
    --secondery_font_family: 'Poppins', sans-serif;
    --font_family: 'Marcellus', serif;
   
}

/*............................Typography And Global Setting............................*/
.container{width: 100%; max-width: 1366px;}

h1{font-size: var(--h1_font); font-weight: var(--regular_font); font-family: var(--font_family); line-height: 105px; color: #fff; max-width: 1811px; margin: 0 auto 12px auto; text-transform: uppercase;}
h2{font-size: var(--h2_font); font-weight: var(--regular_font); font-family: var(--body_font_family); line-height: 47px;}
h3{font-size: var(--h3_font); font-weight: var(--medium_font); font-family: var(--body_font_family); line-height: 47px;}
h4{font-size: var(--h4_font); font-weight: var(--regular_font); font-family: var(--body_font_family); line-height: 29px;}
h5{font-size: var(--h5_font); font-weight: var(--regular_font); font-family: var(--body_font_family); line-height: 27px;}
h6{font-size: var(--h6_font); font-weight: var(--medium_font); font-family: var(--secondery_font_family); line-height: 27px;}
p{font-size: var(--body_font); font-weight: var(--light_font); font-family: var(--secondery_font_family); line-height: 27px; color: #000;}
a{text-decoration: none;}

/* PREFIX CSS START */
.prefix{margin-bottom: 10px;}
.prefix span{position: relative; font-size: 18px; font-weight: var(--regular_font); font-family: var(--body_font_family); line-height: 20px;}
.prefix span::before{content: ''; position: absolute; width: 53px; height: 1px; background-color: #000; left: -24%; bottom: 0; top: 0; margin: auto;}
.prefix span::after{content: ''; position: absolute; width: 53px; height: 1px; background-color: #000; right: -24%; bottom: 0; top: 0; margin: auto;}

/* HEADING CONTENT CSS */
.heading-content{font-size: var(--h3_font); font-weight: var(--medium_font); font-family: var(--body_font_family); line-height: 47px; margin-bottom: 50px;}

/* THEME_BTN CSS START */
.theme-btn{padding: 14px 31px; background-color: var(--theme-color); color: #fff; font-size: var(--h6_font); font-family: var(--body_font_family); border: 1px solid var(--theme-color); transition: 0.3s all linear; display: inline-block;}
.theme-btn:hover{background-color: #ffffff21; border: 1px solid #fff; color: #fff;}

/* PLAY VIDEO CSS START */
.play-video{margin-top: 50px;}
.play-video a{animation: loader 1s linear infinite; transition: .5s ease; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; color: var(--theme-color); display: flex; justify-content: center; align-items: center; font-size: 16px; padding-left: 5px;}
@keyframes loader {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 7px rgba(255,255,255, 0.3), 0 0 0 15px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 7px rgba(255, 255, 255, 0.3), 0 0 0 15px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.3), 0 0 0 15px rgba(255, 255, 255, 0.3), 0 0 0 25px rgba(255, 255, 255, 0)
    }
}
.modal{  --bs-modal-padding: 20px 0px 0px;}
iframe{width: 100%; height: 600px;}
.modal-content{background-color: transparent; border: none;}
.btn-close{position: absolute; top: 0; right: 2%; color: #000; background-color: #fff; line-height: 1; padding: 5px; border-radius: 50%; font-size: 10px; opacity: 1;}
.btn-close:hover{opacity: 1;}

/* box CSS START #7E7B7B */
.box-content{padding: 22px 0px 0px 0px;}
.box-img img{transition: 0.6s all ease-in-out;}
.box-img img:hover{transform: scale(1.2);}
.box-content a h5{color: #000; border: none; font-size: var(--h5_font); font-weight: var(--medium_font); transition: 0.3s all linear;}
.box-content a h5:hover{color: var(--theme-color);}
.box-content p{font-weight: var(--light_font); margin: 10px 0px; color:  var(--theme-color);}
.box-content a{font-size: var(--h6_font); font-weight: var(--bold_font); color: var(--theme-color); font-family: var(--body_font_family); border-bottom: 1px solid var(--theme-color); transition: 0.3s all linear;}
.box-content a:hover{color: #000; border-color: #000;}

/* HEADER CSS START */
header{position: fixed; left:0; top:0; right:0; z-index:9; background-color:transparent; padding: 27px 0px; transition: 0.4s all ease;}
.active{background-color: var(--theme-color); border: 0; padding: 17px 0px;}
.active a:hover{color: #000;}
.active .header-btn a{padding: 10px 33px;}
header{border-bottom: 0.5px solid #ffffff3b;}
header .header-logo a{outline: none;}
header .navbar{padding: 0px;}
header ul li a{font-size:var(--h6_font); font-weight:var(--regular_font); font-family:var(--body_font_family); color:#fff; padding-right:50px; opacity: 1; transition: 0.3s all linear; outline: none;}
header ul li a:hover{color: var(--theme-color);}
header .header-btn a{padding:15px 33px; background-color: transparent; border:1px solid #fff; color: #fff; font-family: var(--body_font_family); font-weight: var(--regular_font); font-size: var(--h6_font); transition: 0.3s all linear;  display: inline-block;}
header .header-btn a:hover{background-color: #fff; color: #733E00;}
header .navbar-toggler {font-size: 30px; color: #fff; padding: 0px;}
header .navbar-toggler-icon{width: auto;}
header .navbar-toggler-icon i{vertical-align: sub;}

/* BANNER CSS START */
.banner-section{background-image: url("../images/webp/cover/max-1600px/Sunset-beach-Kralendijk-Bonaire.webp"); width:100%; background-size:cover; padding: 280px 0px 190px 0px; justify-content: center; align-items: center; display: flex; text-align: center; background-position: center; background-repeat: no-repeat;}
.banner-section .prefix span::before{background-color: #fff; left: -40%;}
.banner-section .prefix span::after{background-color: #fff; right: -40%;}
.banner-section p{font-size: var(--h6_font); text-transform: capitalize; max-width: 992px; margin: 0 auto 24px auto;}
.banner-section .social-link{position: absolute; bottom: 60%; left: 0; transform: rotate(180deg); writing-mode: tb;}
.banner-section .social-link a{padding-bottom: 80px; color: #fff; font-size: var(--h6_font); font-family: var(--secondery_font_family); font-weight: var(--light_font); letter-spacing: 1px; transition: 0.3s all linear;}
.banner-section .social-link a:hover{color: var(--theme-color);}

/* ABOUT US CSS START */
.about-us{padding: 120px 0px;}
.about-us .prefix span::before{display: none;}
.about-us .prefix span::after{right: -90%;}
.about-us .about-content h2{max-width: 506px; margin-bottom: 20px;}
.about-us .about-content h6{max-width: 572px; margin-bottom: 10px;}
.about-us .about-content p{font-weight: var(--regular_font); max-width: 646px; line-height: 24px; margin-bottom: 25px;}
.about-us .about-content a:hover{background-color: transparent; border: 1px solid var(--theme-color); color: var(--theme-color);}
.about-us .about-btn{clip-path: polygon(12% 0, 100% 0, 100% 20%, 100% 100%, 80% 100%, 0 100%, 0% 80%, 0 29%); background-color: var(--theme-color); position: absolute; bottom: 0; right: 0; padding: 20px 30px;}
.about-us .about-btn a{color: #fff; font-size: var(--h6_font); font-weight: var(--regular_font); text-transform: uppercase; word-break: break-all;}
.about-us img{max-width: 100%;}

/* PLANNING CSS START */
.planning-section .prefix span::before{left: -84%;}
.planning-section .prefix span::after{right: -84%;}
.planning-section .planning-inner{width: 20%}
.planning-section .planning-content{clip-path: polygon(25% 0, 100% 0, 100% 20%, 100% 100%, 80% 100%, 0 100%, 0% 80%, 0 28%); background-color: #b9977b2e; text-align: center; padding: 33px 50px;}
.planning-section .planning-content img{margin-bottom: 35px;}
.planning-section .planning-content h4{margin-bottom: 15px;}
.planning-section .planning-content a{font-size: var(--h6_font); color: #000; font-weight: var(--regular_font); font-family: var(--body_font_family);}
.planning-section .planning-content a:hover{color: #733E00;}

/* FESTIVAL CSS START */
.festival-section{padding: 120px 0px;}
.festival-section .festival-inner{overflow: hidden;}
.festival-section .festival-box{row-gap: 40px;}
.festival-section .festival-inner img{height: 287px; width: 100%; max-width: 431px;}
.festival-section .festival-content{padding: 22px 0px 10px 0px;}

/* INTRO CSS START */
.intro-section{padding: 110px 0px;  background-repeat: no-repeat;  background-position: center left 49%;}
.intro-section .prefix span::before{background-color: #fff; left: -37%;}
.intro-section .prefix span::after{background-color: #fff; right: -37%;}
.intro-section .intro-content h3{margin-bottom: 15px;}
.intro-section .intro-content p{color: #212529; max-width: 90%; margin: 20 auto;}
.intro-section .play-video{margin-top: 40px;}

/* HOLIDAY CSS START */
.holiday-section{padding: 110px 0px;  background-repeat: no-repeat;  background-position: center left 49%;}
.holiday-section .prefix span::before{background-color: #fff; left: -37%;}
.holiday-section .prefix span::after{background-color: #fff; right: -37%;}
.holiday-section .holiday-content h3{margin-bottom: 15px;}
.holiday-section .holiday-content p{color: #fff; max-width: 694px; margin: 0 auto;}
.holiday-section .play-video{margin-top: 40px;}

.holiday-section {background-image: url("../images/webp/cover/max-1600px/Best-Beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 432px; background-position: center; background-repeat: no-repeat; background-size: cover;}

/* BLOG CSS START */
.blog-section{padding: 120px 0px;}
.blog-section .prefix span::before{left: -88%;}
.blog-section .prefix span::after{right: -88%;}
.blog-section .blog-box{row-gap: 40px;}
.blog-section .blog-inner img{width: 100%; max-width: 449px;}
.blog-section .blog-inner h5{max-width: 413px; line-height: 32px;}

/* RESERVATION CSS START */
.reservation{background: rgba(185, 151, 123, 0.15); padding: 100px 0px;}
.reservation .prefix span::before{left: -94%;}
.reservation .prefix span::after{right: -94%;}
.reservation form{max-width: 615px; margin: 0 auto;}
.reservation form input{margin-bottom: 20px;}
.reservation form select{margin-bottom: 20px;}
.reservation .form-control:focus {box-shadow: none; outline: none;}
.reservation .form-control{background-color: transparent; border: 0.1px solid #733e006b; border-radius: 0; padding: 12px 18px; color: #8E8E8E; font-size: 14px; font-family: var(--secondery_font_family); font-weight: var(--light_font);}
.reservation .form-select:focus {box-shadow: none; outline: none;}
.reservation .form-select{background-color: transparent; border: 0.3px solid #733e006b; border-radius: 0; padding: 12px 18px; color: #8E8E8E; font-size: 14px; font-family: var(--secondery_font_family); font-weight: var(--light_font); background-image: url(../images/dropdown.svg); background-size: 18px;}
.reservation .form-btn{margin-top: 20px;}
.reservation .form-btn .theme-btn{padding: 10px 40px;}
.reservation .form-btn .theme-btn:hover{background-color: transparent; border: 1px solid var(--theme-color); color: var(--theme-color);}
.reservation textarea{resize: none;}

/* TESTIMONIAL CSS START */
.testimonial{padding: 120px 0px; overflow: hidden;}
.testimonial .prefix span::before{left: -90%;}
.testimonial .prefix span::after{right: -90%;}
.testimonial .testimonial-content img{margin: 0px auto 30px auto; border-radius: 50%;}
.testimonial .testimonial-content p{margin: 0 auto 35px auto; max-width: 763px; font-size: 20px; font-weight: var(--regular_font); line-height: 30px;}
.testimonial .testimonial-content h5 a{color: #234076;}
.testimonial .testimonial-content h5 a:hover{color: #733E00;}
.testimonial .testimonial-content h6{font-size: var(--body_font); font-weight: var(--light_font);}
.testimonial button{font-weight: 900;}
/* .testimonial .slick-prev {left: 27px; z-index: 9;}
.testimonial .slick-next {right: 27px;}
.testimonial .slick-prev , .slick-next {width: 46px; height: 24px;}
.testimonial .slick-prev:before{content:'\F12F'!important; font-family: 'bootstrap-icons'!important; color: #b9977b78; font-size: 42px; transition: all 0.3s linear; font-weight: var(--medium_font);}
.testimonial .slick-next:before{content:'\F138'!important; font-family: 'bootstrap-icons'!important; color: #b9977b78; font-size: 42px; transition: all 0.3s linear; font-weight: var(--medium_font);}
.testimonial .slick-prev:hover::before{color: var(--theme-color);}
.testimonial .slick-next:hover::before{color: var(--theme-color);}*/

/* IMAGES SLIDER CSS START */
.testimonial .testimonial-content2 img{margin: 0px auto 30px auto; border-radius: 0%; width: 100%; max-width: 443px; height: 269px;}

/* GALLERY CSS START */
.gallery-section{padding-bottom: 0px; overflow: hidden;}
.gallery-section .gallery-content{width: 20%;}
.gallery-section .gallery-img img{width: 100%;}

/* FOOTER CSS START */
footer{background: rgba(185, 151, 123, 0.1); padding: 100px 0px 0px;}
footer .footer-content{padding-bottom: 70px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
footer .footer-content img{margin-bottom: 25px;}
footer .footer-content p{max-width: 460px; text-align: center; margin: 0 auto 18px auto; font-weight: var(--medium_font);}
footer .footer-content i{font-size: 20px; color: #000; padding-right: 12px; transition: 0.3s all li;}
footer .footer-content i:hover{color: var(--theme-color);}
footer .copyright{border-top: 1px solid rgba(0, 0, 0, 0.2); padding: 13px 0px;}
footer .copyright a{font-size: 14px; font-weight: var(--medium_font); font-family: var(--secondery_font_family); color: #000; transition: 0.3s all linear;}
footer .copyright a:hover{color: var(--theme-color);}

/* SCROLL CSS */
.scroll{width: 50px; height: 50px; border: 1px solid var(--theme-color); background-color: var(--theme-color); display: none; text-align: center; line-height: 50px; border-radius: 50%; position: fixed; right: 20px; bottom: 20px; cursor: pointer; transition: all 0.4s ease-in;}
.scroll a i{color: #fff;}
.effect{display: block;}
.scroll:hover{background-color: transparent; border: 1px solid var(--theme-color);}
.scroll:hover a i{color: var(--theme-color);}

/************************************************** START MEDIA QUERY **************************************************************/ 

@media (max-width: 1399px) {
    
    .heading-content{font-size: 38px; line-height: 30px; margin-bottom: 40px;}

    /* BANNER MEDIA QUERY */
    .banner-section{padding: 250px 0px 150px 0px;}
    .banner-section h1{font-size: 64px; max-width: 924px; line-height: 82px;}

	.banner-section {background-image: url("../images/webp/cover/max-1399px/Sunset-beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 835px; background-position: center; background-repeat: no-repeat; background-size: cover;}

	/* HOLIDAY CSS START */
	.holiday-section {background-image: url("../images/webp/cover/max-1399px/Best-Beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 385px; background-position: center; background-repeat: no-repeat; background-size: cover;}

    /* ABOUT MEDIA QUERY */
    .about-us{padding: 100px 0px;}
    .about-us .about-content h2{font-size: 38px; line-height: 42px;  margin-bottom: 12px;}

    /* FESTIVAL MEDIA QUERY */
    .festival-section{padding: 100px 0px;}

    /* INTRO MEDIA QUERY */
    .intro-section{padding: 100px 0px;}
    
    /* HOLIDAY MEDIA QUERY */
    .holiday-section{padding: 100px 0px;}
    
    /* BLOG MEDIA QUERY */
    .blog-section{padding: 100px 0px;}

    /* APARTMENTS MEDIA QUERY */
    .apartment{padding: 100px 0px;}

    /* TESTOMONIAL MEDIA QUERY */
    .testimonial{padding: 100px 0px;}

    /* GALLERY MEDIA QUERY */
    .gallery-section{padding-bottom: 100px;}
}

@media (max-width: 1199px) {

    .heading-content{font-size: 32px; margin-bottom: 35px;}
    iframe{width: 100%; height: 400px;}

    /* BOX MEDIA QUERY */
    .box-content a h5{font-size: 20px; line-height: 20px;}
    .box-content p {margin: 8px 0px; font-size: 14px; line-height: 22px;}

    /* HEADER MEDIA QUERY */
    header ul li a{padding-right: 40px;}

    /* BANNER MEDIA QUERY */
    .banner-section{padding: 220px 0px 130px 0px;}
    .banner-section h1{font-size: 50px; line-height: 65px; max-width: 785px; margin-bottom: 8px;}
    .banner-section p{font-size: var(--body_font); max-width: 774px;}
    .banner-section .social-link a {font-size: var(--body_font);}

	.banner-section {background-image: url("../images/webp/cover/max-1199px/Sunset-beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 747px; background-position: center; background-repeat: no-repeat; background-size: cover;}

	/* HOLIDAY CSS START */
	.holiday-section {background-image: url("../images/webp/cover/max-1199px/Best-Beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 360px; background-position: center; background-repeat: no-repeat; background-size: cover;}

    /* ABOUT MEDIA QUERY */
    .about-us .about-content h2{font-size: 32px; line-height: 40px; max-width: 506px;}
    .about-us .about-content h6{max-width: 552px; line-height: 25px;}
    .about-us .about-content p{max-width: 520px;}

    /* PLANNING MEDIA QUERY */
    .planning-section .planning-content{padding: 22px 30px;}
    .planning-section .planning-content img {margin-bottom: 25px;}

    /* INTRO MEDIA QUERY */
    .intro-section {padding: 90px 0px;}

    /* HOLIDAY MEDIA QUERY */
    .holiday-section {padding: 90px 0px;}

    /* RESERVATION MEDIA QUERY */
    .reservation{padding: 90px 0px;}

    /* APARTMENTS MEDIA QUERY */
    .apartment .apartment-content img {margin-bottom: 25px;}
    .apartment .apartment-content p{font-size: 18px; max-width: 670px; margin-bottom: 25px;}
    .apartment .slick-prev:before {left: 44px;}
    .apartment .slick-next:before {right: 44px;}

    /* TESTEMONIAL MEDIA QUERY */
    .testimonial .testimonial-content img {margin-bottom: 25px;}
    .testimonial .testimonial-content p{font-size: 18px; max-width: 670px; margin-bottom: 25px;}
    .testimonial .slick-prev:before {left: 44px;}
    .testimonial .slick-next:before {right: 44px;}

    /* FOOTER MEDIA QUERY */
    footer{padding: 90px 0px 0px;}
    footer .footer-content {padding-bottom: 50px;}
}

@media (max-width: 1024px) {

    .prefix{margin-bottom: 8px;}
    .play-video{margin-top: 40px;}
    .box-content{padding-top: 18px;}
    .box-content a h5{line-height: 26px;}
    .box-content p{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  overflow: hidden;}

    /* HEADER MEDIA QUERY */
    header ul li a {padding-right: 30px;}

    /* BANNER MWDIA QUERY */
    .banner-section{padding-bottom: 100px;}
    .banner-section h1{font-size: 42px; max-width: 609px; line-height: 56px;}
    .banner-section p{font-size: 14px; max-width: 601px; line-height: 24px;}
    .banner-section .social-link{display: none;}

	.banner-section {background-image: url("../images/webp/cover/max-1024px/Sunset-beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 681px; background-position: center; background-repeat: no-repeat; background-size: cover;}

    /* ABOUT MEDIA QUERY */
    .about-us{padding: 70px 0px;}
    .about-us .about-content h2{font-size: 28px; line-height: 34px; max-width: 425px; margin-bottom: 6px;}
    .about-us .about-content h6{font-size: 16px; max-width: 436px; margin-bottom: 8px; line-height: 23px;}
    .about-us .about-content p{font-size: 14px; line-height: 21px; margin-bottom: 18px;}

    /* PLANNING MEDIA QUERY */
    .planning-section .planning-content{padding: 18px 30px;}

    /* FESTIVAL MEDIA QUERY */
    .festival-section{padding: 70px 0px;}

    /* INTRO MEDIA QUERY */
    .intro-section{padding: 70px 0px;}
    .intro-section .intro-content h3 {margin-bottom: 10px;}
    .intro-section .intro-content p {line-height: 25px;}  
    .intro-section .play-video {margin-top: 30px;}

    /* HOLIDAY MEDIA QUERY */
    .holiday-section{padding: 70px 0px;}
    .holiday-section .holiday-content h3 {margin-bottom: 10px;}
    .holiday-section .holiday-content p {line-height: 25px;}  
    .holiday-section .play-video {margin-top: 30px;}

	.holiday-section {background-image: url("../images/webp/cover/max-1024px/Best-Beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 312px; background-position: center; background-repeat: no-repeat; background-size: cover;}

    /* BLOG MEDIA QUERY */
    .blog-section{padding: 70px 0px;}
    .blog-section .blog-inner h5{line-height: 28px;}

    /* RESERVATION MEDIA QUERY */
    .reservation{padding: 70px 0px;}

    /* APARTMENTS MEDIA QUERY */
    .apartment{padding: 70px 0px;}
    .apartment .apartment-content p{line-height: 26px;}

    /* TESTIMONIAL MEDIA QUERY */
    .testimonial{padding: 70px 0px;}
    .testimonial .testimonial-content p{line-height: 26px;}

    /* GALLERY MEDIA QUERY */
    .gallery-section{padding-bottom: 70px;}
    .gallery-section .row{row-gap: 30px; justify-content: center;}
    .gallery-section .gallery-content {width: 33.33%;}

    /* FOOTER MEDIA QUERY */
    footer{padding: 70px 0px 0px;}
    footer .footer-content{padding-bottom: 30px;}
    footer .footer-content img {margin-bottom: 20px;}
    footer .footer-content p{line-height: 24px;}
}

@media (max-width: 991px) {

    .theme-btn {padding: 11px 20px;}
    .prefix span{font-size: 16px;}
    .prefix span::before {width: 48px;}
    .prefix span::after {width: 48px;}
    .heading-content{font-size: 28px; line-height: 30px;}
    iframe{width: 100%; height: 350px;}

    /* HEADER MEDIA QUERY */
    header{padding: 20px 0px; border-bottom: 0;}
    .collapse .show header{border-bottom: 0px;}
    .active{padding: 10px 0px;}
    button:focus:not(:focus-visible) {box-shadow: none;}
    header .navbar-collapse {background-color: var(--theme-color); padding-left: 20px; margin-top: 10px; border-radius: 6px;}
    .active .navbar-collapse{padding-left: 0px;}
    header .header-btn{display: none;}
    header ul li {padding: 5px 0px;}

    /* BANNER MEDIA QUERY */
    .banner-section{padding: 170px 0px 100px 0px;}
    .banner-section h1{font-size: 38px; line-height: 52px; max-width: 563px;}
    .banner-section p{max-width: 600px; line-height: 22px;}
    .banner-section .social-link a {row-gap: 10px;}

	.banner-section {background-image: url("../images/webp/cover/max-991px/Sunset-beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 547px; background-position: center; background-repeat: no-repeat; background-size: cover;}

    /* ABOUT MEDIA QUERY */
    .about-us .about-content h2 {font-size: 26px; line-height: 30px; margin-bottom: 13px;}
    .about-us .about-content h6{font-size: 14px; line-height: 21px; margin-bottom: 11px;}
    .about-us .about-content p{font-size: 12px; line-height: 20px;}
    .about-us .about-btn{padding: 13px 18px;}
    .about-us .about-btn a {font-size: 16px;}
    
    /* PLANNING MEDIA QUERY */
    .planning-section .prefix span::before {left: -87%;}
    .planning-section .prefix span::after {right: -87%;}
    .planning-section .planning-inner{width: 30%;}
    .planning-section .row{row-gap: 40px;}

    /* FESTIVAL MEDIA QUERY */
    .festival-section .festival-inner img {max-width: 566px;}

	/* HOLIDAY CSS START */
	.holiday-section {background-image: url("../images/webp/cover/max-991px/Best-Beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 312px; background-position: center; background-repeat: no-repeat; background-size: cover;}

    /* BLOG MEDIA QUERY */
    .blog-section .blog-inner img {max-width: 471px;}

    /* APARTMENTS MEDIA QUERY */
    .apartment .slick-prev:before {left: -30px;}
    .apartment .slick-next:before {right: -30px;}

    /* TESTIMONIAL MEDIA QUERY */
    .testimonial .slick-prev:before {left: -30px;}
    .testimonial .slick-next:before {right: -30px;}

    /* FOOTER MEDIA QUERY */
    footer .footer-content{padding-bottom: 30px;}
}

@media (max-width: 767px) {

    .prefix span{font-size: 14px;}
    .prefix span::before {width: 42px;}
    .prefix span::after {width: 42px;}
    .heading-content{font-size: 26px; margin-bottom: 25px;}
    .box-content a h5 {font-size: 18px; line-height: 15px;}
    .box-content p{font-size: 12px; line-height: 18px;}

    

    /* BANNER MEDIA QUERY */
    .banner-section{padding: 160px 0px 80px 0px;}
    .banner-section .prefix span::before {left: -39%;}
    .banner-section .prefix span::after {right: -39%;}
    .banner-section h1 {font-size: 32px; line-height: 42px; max-width: 434px; margin-bottom: 5px;}
    .banner-section p {font-size: 12px; max-width: 451px; margin-bottom: 15px; line-height: 20px;}
    .banner-section .social-link{display: none;}

	.banner-section {background-image: url("../images/webp/cover/max-767px/Sunset-beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 547px; background-position: center; background-repeat: no-repeat; background-size: cover;}

    /* ABOUT MEDIA QUERY */
    .about-us {padding: 50px 0px;}
    .about-us .prefix span::before{display: block;}
    .about-us .prefix span::before {left: -85%;}
    .about-us .prefix span::after {right: -85%;}
    .about-us .row{flex-direction: column-reverse;}
    .about-us .about-content h2{font-size: 26px; line-height: 20px; margin-bottom: 15px; max-width: none;}
    .about-us .about-content h6{margin-bottom: 12px; max-width: none;}
    .about-us .about-content p{margin-bottom: 20px; line-height: 20px; max-width: none;}
    .about-us .about-img{margin-bottom: 40px;}

    /* PLANNING MEDIA QUERY */
    .planning-section .planning-inner{width: 50%;}
    .planning-section .planning-content{padding: 35px 30px;}

    /* FESTIVAL MEDIA QUERY */
    .festival-section{padding: 50px 0px;}
    .festival-section .prefix span::before{left: -27%;}
    .festival-section .prefix span::after{right: -27%;}

    /* INTRO MEDIA QUERY */
    .intro-section {padding: 50px 0px;}
    .intro-section .prefix span::before {left: -38%;}
    .intro-section .prefix span::after {right: -38%;}
    .intro-section .intro-content h3 {margin-bottom: 13px;}
    .intro-section .intro-content p {font-size: 14px; line-height: 23px; max-width: 596px;}

    /* HOLIDAY MEDIA QUERY */
    .holiday-section {padding: 50px 0px;}
    .holiday-section .prefix span::before {left: -38%;}
    .holiday-section .prefix span::after {right: -38%;}
    .holiday-section .holiday-content h3 {margin-bottom: 13px;}
    .holiday-section .holiday-content p {font-size: 14px; line-height: 23px; max-width: 596px;}

	.holiday-section {background-image: url("../images/webp/cover/max-767px/Best-Beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 312px; background-position: center; background-repeat: no-repeat; background-size: cover;}

    /* BLOG SECTION */
    .blog-section{padding: 50px 0px;}
    .blog-section .prefix span::before{left: -88%;}
    .blog-section .prefix span::after{right: -88%;}
    .blog-section .blog-inner h5 {max-width: none; line-height: 24px;}
    .blog-section .blog-inner p {max-width: none;}

    /* RESERVATION MEDIA QUERY */
    .reservation{padding: 50px 0px;}
    .reservation .prefix span::before {left: -97%;}
    .reservation .prefix span::after {right: -97%;}

    /* APARTMENTS MEDIA QUERY */
    .apartment{padding: 50px 0px;}
    .apartment .prefix span::before {left: -97%;}
    .apartment .prefix span::after {right: -97%;}
    .apartment .apartment-content img {margin-bottom: 20px;}
    .apartment .apartment-content p {font-size: 16px; max-width: 598px; margin-bottom: 20px; line-height: 25px;}
    /* .apartment .slick-prev , .slick-next {top: 87%!important;}
    .apartment .slick-prev{left: 45%;}
    .apartment .slick-next{right: 45%;} */
    .apartment .slick-dots{bottom: -35px;}
    .apartment .slick-dots li button:before {font-size: 14px;}
    .apartment .slick-dots li.slick-active button:before {color: #733E00;}
    .apartment .slick-dots li {margin: 5px;}

    /* TESTIMONIAL MEDIA QUERY */
    .testimonial{padding: 50px 0px;}
    .testimonial .prefix span::before {left: -97%;}
    .testimonial .prefix span::after {right: -97%;}
    .testimonial .testimonial-content img {margin-bottom: 20px;}
    .testimonial .testimonial-content p {font-size: 16px; max-width: 598px; margin-bottom: 20px; line-height: 25px;}
    /* .testimonial .slick-prev , .slick-next {top: 87%!important;}
    .testimonial .slick-prev{left: 45%;}
    .testimonial .slick-next{right: 45%;} */
    .testimonial .slick-dots{bottom: -35px;}
    .testimonial .slick-dots li button:before {font-size: 14px;}
    .testimonial .slick-dots li.slick-active button:before {color: #733E00;}
    .testimonial .slick-dots li {margin: 5px;}

    /* GALLERY MEDIA QUERY */
    .gallery-section{padding-bottom: 50px;}
    .gallery-section .row {row-gap: 22px;}
    .gallery-section .gallery-img img{width: 100%; padding-left: 10px; padding-right: 10px;}
    .gallery-section .gallery-content {width: 50%;}

    /* FOOTER MEDIA QUERY */
    footer{padding: 50px 0px 0px;}
    footer .footer-content {padding-bottom: 20px;}
    footer .footer-content img {margin-bottom: 15px;}
    footer .footer-content p {font-size: 14px; max-width: 395px; line-height: 23px;}
    footer .copyright{padding: 10px 0px;}

}

@media (max-width: 575px) {
    .prefix{margin-bottom: 5px;}

    .theme-btn{padding: 8px 16px; font-size: 16px;}

    .play-video{margin-top: 40px;}
    iframe{width: 100%; height: 300px;}

    .heading-content{font-size: 20px; line-height: 25px; margin-bottom: 15px;}

    .box-content{padding-top: 16px; text-align: center;}    
    .box-content a{font-size: 16px;}

    /* BANNER MEDIA QUERY */
    .banner-section{padding: 140px 0px 60px 0px;}
    .banner-section .prefix span::before {width: 32px; left: -31%;}
    .banner-section .prefix span::after {width: 32px; right: -31%;}
    .banner-section h1 {font-size: 24px; line-height: 34px; max-width: 334px;}
    .banner-section .social-link{display: none;}

	.banner-section {background-image: url("../images/webp/cover/max-575px/Sunset-beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 479px; background-position: center; background-repeat: no-repeat; background-size: cover;}

    /* ABOUT MEDIA QUERY */
    .about-us .about-content h2 {font-size: 20px; margin-bottom: 10px;}
    .about-us .about-content h6 {font-size: 12px; line-height: 20px; margin-bottom: 10px;}
    .about-us .about-content p {font-size: 10px; line-height: 18px}
    .about-us .about-btn{padding: 13px 35px;}
    .about-us .about-btn a{font-size: 14px;}

    /* PLANNING MEDIA QUERY */
    .planning-section .planning-inner{width: 50%;}

    /* FESTIVAL MEDIA QUERY */
    .festival-section .festival-box {row-gap: 30px;}

    /* INTRO MEDIA QUERY */
    .intro-section .play-video {margin-top: 30px;}
    .intro-section .intro-content h3 {margin-bottom: 10px;}
    .intro-section .intro-content p {font-size: 12px; line-height: 20px; max-width: 507px;}

    /* HOLIDAY MEDIA QUERY */
    .holiday-section .play-video {margin-top: 30px;}
    .holiday-section .holiday-content h3 {margin-bottom: 10px;}
    .holiday-section .holiday-content p {font-size: 12px; line-height: 20px; max-width: 507px;}

	.holiday-section {background-image: url("../images/webp/cover/max-575px/Best-Beach-Kralendijk-Bonaire.webp"); background-color: #ffffff; height: 229px; background-position: center; background-repeat: no-repeat; background-size: cover;}

    /* RESERVATION MEDIA QUERY */
    .reservation .form-btn .theme-btn {padding: 8px 30px;}

    /* APARTMENTS MEDIA QUERY */
    .apartment .apartment-content img {margin-bottom: 15px;}
    .apartment .apartment-content p {font-size: 14px; line-height: 20px; margin-bottom: 15px;}
    .apartment .apartment-content h5{font-size: 20px; line-height: 15px;}
    .apartment .slick-prev:before {width: 67%!important; background-size: contain;}
    .apartment .slick-next:before {width: 150%!important; background-size: contain;}
    
    /* TESTIMONIAL MEDIA QUERY */
    .testimonial .testimonial-content img {margin-bottom: 15px;}
    .testimonial .testimonial-content p {font-size: 14px; line-height: 20px; margin-bottom: 15px;}
    .testimonial .testimonial-content h5{font-size: 20px; line-height: 15px;}
    .testimonial .slick-prev:before {width: 67%!important; background-size: contain;}
    .testimonial .slick-next:before {width: 150%!important; background-size: contain;}
    

    /* BLOG MWDIA QUERY */
    .blog-section .blog-box {row-gap: 30px;}
    .blog-section .blog-inner img {max-width: 100%;}
    .blog-section .blog-inner h5 {line-height: 23px;}

    /* GALLERY MEDIA QUERY */
    .gallery-section .gallery-content {width: 100%;}

    /* FOOTER MEDIA QUERY */
    footer .footer-content p {max-width: none;}

}