@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
/*font-family: "Source Serif 4", serif;*/
/*[data-aos] {
visibility: hidden;
}
[data-aos].animated { visibility: visible; }*/
html { font-size: 100%; overflow-X: hidden; scroll-behavior: smooth; }
* { margin: 0px; padding: 0px; box-sizing: border-box; }
.back-color1 { background: #F14C38; background: -webkit-linear-gradient(90deg, rgba(241, 76, 56, 1) 0%, rgba(245, 158, 63, 1) 100%); background: -moz-linear-gradient(90deg, rgba(241, 76, 56, 1) 0%, rgba(245, 158, 63, 1) 100%); background: linear-gradient(90deg, rgba(241, 76, 56, 1) 0%, rgba(245, 158, 63, 1) 100%); }
body { font-size: 1em; color: #000; margin: 0px; font-family: "Montserrat", sans-serif; }
ul,
li { display: inline-block; }
h1,
h2,
h3,
h4,
h5,
h6 { font-family: "Source Serif 4", serif; }
p { font-size: 1em; line-height: 1.7; }
img { display: flex; }
.coastal-but { text-decoration: none; padding: 13px 30px; color: #333; text-transform: uppercase; line-height: 1; display: inline-block; font-weight: 500; letter-spacing: 1px; border: solid 2px #E6D0C3; background: #E6D0C3; font-size: 1em; border-radius: 100px; }
.coastal-but:hover { background: #A8BEB2; border-color: #A8BEB2; color: #333; transition: 0.2s; }
.container { width: 1380px; margin: 0 auto; }
.container-flex { display: flex; }
.clear { clear: both; }
.roc-title { font-size: 3.375em; line-height: 1.1; margin-bottom: 20px; font-weight: 600; letter-spacing: 1px; font-family: "Source Serif 4", serif; }
.toggle-menu,
.close { display: none; }
.roc-sub-title { padding: 8px 30px; font-weight: normal; color: #000; background: #E6D0C3; display: inline-block; border-radius: 30px; margin-bottom: 16px; }
/**Top_Heade**/
.top-header { text-align: center; background: #E6D0C3; padding: 8px 0; position: relative; z-index: 11; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9em; }
.top-header .slick-prev,
 .top-header .slick-next { top: 0; width: 20px; height: 20px; background: none; color: #000; }
.top-header .slick-prev { left: 20%; top: 50%; }
.top-header .slick-next { right: 20%; top: 50%; }
.top-header .slick-prev:before,
 .top-header .slick-next:before { color: #000; }
.top-header .slick-prev:before,
.top-header .slick-next:before { height: 9px; width: 9px; }
/**Heade**/
.header { position: fixed; top: 0; z-index: 9; width: 100%; padding: 4em 6em 2em 6em; transition: 0.2s; }
.header .container-flex { align-items: center; justify-content: space-between; width: 100%; }
.sticky .header { box-shadow: 0 0 10px #00000036; background: #fff; padding: 0.5em 6em; }
.logo img { width: 240px; transition: 0.5s; }
.sticky .logo img { width: 140px; transition: 0.5s; }
.menu ul li a { text-decoration: none; color: #fff; padding: 10px 0px; font-weight: 400; letter-spacing: 1px; text-transform: capitalize; margin: 0 15px; }
.menu ul li a:hover { color: #A8BEB2; border-bottom: solid 1px; }
.header .thi-but { color: #ffffff; border: solid 2px #000; background: #000; }
.sticky .menu ul li a { color: #000000; }
/*Banner*/
.banner { position: relative; }
.banner .slick-slide img { object-fit: cover; width: 100%; height: 860px; }
.banner .slick-slide { position: relative; }
.banner .slick-slide:before { content: ""; background: rgba(0, 0, 0, 6.2); background: radial-gradient(circle, rgba(0, 0, 0, 0.33) 0%, rgba(255, 255, 255, 0) 100%); position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.banner-content { position: absolute; top: 50%; left: 50%; width: 45%; z-index: 9; transform: translate(-50%, -50%); text-align: center; }
.banner h4 { font-size: 1.3em; color: #fff; display: inline-block; margin-bottom: 20px; font-weight: normal; letter-spacing: 2px; }
.banner h2 { font-size: 5em; color: #fff; font-weight: 600; line-height: 1; font-family: "Source Serif 4", serif; margin-bottom: 30px; }
/*Hotels*/
.hotels { padding: 5em 0 4em 0; text-align: center; background: url(../images/hotel-bg.jpg); position: relative; background: #F0F1EB; }
.rotating { position: absolute; right: 50px; top: -120px; }
.text-logo { width: 100px !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.hotels img.text-logo:hover { transform: none !important; }
.rotating img.text-rotat { width: 230px !important; -webkit-animation: rotating 8s linear infinite; -moz-animation: rotating 1s linear infinite; -ms-animation: rotating 8s linear infinite; -o-animation: rotating 8s linear infinite; animation: rotating 8s linear infinite; }
 @-webkit-keyframes rotating /* Safari and Chrome */ { from {
 -webkit-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
}
to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
 @keyframes rotating { from {
 -ms-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
}
to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
.hotels p { width: 40%; margin: 0 auto; }
.hotels .hotels-slider { margin-top: 60px; }
.hotels aside { position: absolute; bottom: 40px; text-align: left; color: #fff; left: 40px; }
.hotels aside h3 { font-size: 1.7em; font-weight: 500; margin: 0 0 8px 0; }
.hotels figure { overflow: hidden; border-radius: 14px; }
.hotels img { width: 100%; transition: 0.5s; }
.hotels img:hover { transform: scale(1.2); transition: 0.5s; }
.hotels .slick-slide > div a.coastal-but { position: absolute; top: 50px; right: -20px; transform: rotate(-90deg); background: #00000029; border: solid 1px #fff; padding: 12px 15px; font-size: 0.8em; letter-spacing: 2px; color: #fff; }
.hotels .slick-slide > div a.coastal-but:hover { background: #788689; border-color: #788689; color: #fff; transition: 0.2s; }
.hotels .slick-track { margin: 0 -15px; }
.hotels .slick-slide > div { margin: 15px; position: relative; display: inline-block; }
.marquee { overflow-x: hidden; margin-top: 40px; }
.track { white-space: nowrap; will-change: transform; animation: marquee 10s linear infinite; width: 100%; }
.track li { font-size: 3.5em; font-weight: 600; color: #c7c7c7; letter-spacing: 1px; font-family: "Source Serif 4", serif; position: relative; }
.track li:after { content: ""; background: url(../images/right-arrow.svg); display: inline-block; width: 38px; height: 15px; position: relative; bottom: 10px; margin: 0px 25px; }
 @keyframes marquee { from {
 transform: translateX(0);
}
to { transform: translateX(-50%); }
}
/**/

.home-video { position: relative; }
video { width: 100%; display: flex; }
.play-button,
 .pause-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 60px; color: white; opacity: 0.8; cursor: pointer; z-index: 2; transition: opacity 0.3s; display: none; }
.play-button { display: block; }
.video-container.playing .play-button { display: none; }
.video-container.playing:hover .pause-button { display: block; }
/*career*/
.career { padding: 6em; background: #FFF; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(240, 241, 235, 1) 100%); background: #A8BEB2; }
.career .container-flex { gap: 4em; }
.career ul.container-flex { gap: 1em; flex-wrap: wrap; margin-top: 35px; }
.career-img { flex: 1 1 calc((65% / 2) - 2em); }
.career-content { flex: 1 1 calc((35% / 2) - 2em); }
.career img { border-radius: 20px; width: 100%; }
.career-content .roc-title { color: #19261f; }
.tab-area { margin: 2em 0 1em 0; padding: 0; display: flex; gap: 1em; }
.tab-area li { color: #19261f; cursor: pointer; font-weight: 500; border: solid 1px #19261f; padding: 11px 28px; border-radius: 30px; }
.tab-area li.active { border: solid 2px #19261f; background: #19261f; color: #fff; }
.tab-content { display: none; text-align: left; }
.tab-content li { width: 100%; margin: 10px 0; color: #19261f; padding-left: 20px; position: relative; }
.tab-content li:before { background: url(../images/arrow.svg); content: ""; width: 9px; height: 12px; position: absolute; left: 0px; top: 3px; line-height: 1; }
.tab-content.active { display: block; padding: 20px 0px; border-radius: 5px; }
.technical-information { margin-bottom: 3em; }
.tab-wrap a { margin-top: 25px; display: inline-block; text-decoration: none; color: #19261f; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; position: relative; transition: 0.2s; padding: 13px 25px; border-radius: 30px; }
.tab-wrap a:after { background: url(../images/arrow.svg); content: ""; width: 9px; height: 12px; line-height: 1; display: inline-block; margin-left: 10px; }
.tab-wrap a:hover { transition: 0.2s; background: #fff; }
/*About-Us*/
.home-about { text-align: center; padding: 5em 0; position: relative; }
.home-about .container { width: 1200px; }
.home-about p { padding: 15px 0; line-height: 32px; }
.home-about h4 { font-size: 1.6em; font-weight: normal; margin-bottom: 20px; }
/*Testimonial*/
.testimonial { background: url(../images/testimonil-bg.jpg); color: #fff; padding: 7em 0; text-align: center; background-attachment: fixed; position: relative; z-index: 1; }
.testimonial:before { content: ""; background: #00000070; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.testimonial-slider { margin-top: 50px; }
.testimonial .slick-slide { text-align: left; margin: 20px; position: relative; border: solid 1px #ffffff29; padding: 40px; border-radius: 10px; background: #ffffff4a; }
.testimonial p { padding: 30px 0; line-height: 29px; }
.testimonial strong { color: #fbc738; font-weight: normal; padding-left: 12px; margin-left: 10px; border-left: solid 1px #fff; }
/*news*/
.home-news { padding: 5em 0; text-align: center; background: #F0F1EB; background-attachment: fixed; }
.home-news .news-slider h3 { padding: 15px 0; }
.news-slider { margin: 50px 0; }
.home-news .slick-slide { text-align: left; margin: 0 15px; }
.home-news .slick-list { margin: 0 -20px; }
.home-news .slick-slide img { width: 100%; height: 230px; object-fit: cover; }
.news-content { padding: 1.2em; border: solid 1px #ddd; }
.home-news .slick-slide .news-content img { width: auto; }
.news-content h3 { font-weight: 600; font-size: 1.3em; letter-spacing: 1px; padding-top: 0px; }
.news-content p { padding-bottom: 25px; }
.news-content aside { display: flex; align-items: center; gap: 10px; }
.news-content aside strong { font-weight: normal; color: #48979B; }
.testimonial .slick-list,
.home-news .slick-list { width: 90%; margin: 0 auto; }
/**/
.footer { background: #181818; padding: 6em 0; text-align: center; color: #888888; }
.footer-logo img { margin: 0 auto 20px auto; }
.home-about h4 { font-size: 1.7em; font-weight: normal; margin-bottom: 20px;/*color: #52a5a2;*/ }
.footer .container-flex { margin-top: 50px; }
.location-grid { text-align: center; position: relative; padding-right: 50px; margin-left: 50px; }
.location-grid img { margin: 0 auto; }
.location-grid:before { content: ""; width: 1px; height: 100%; right: 0; top: 0; position: absolute; background: #888888; background: -webkit-linear-gradient(180deg, rgba(136, 136, 136, 0) 0%, rgba(136, 136, 136, 1) 50%, rgba(136, 136, 136, 0) 100%); background: -moz-linear-gradient(180deg, rgba(136, 136, 136, 0) 0%, rgba(136, 136, 136, 1) 50%, rgba(136, 136, 136, 0) 100%); background: linear-gradient(180deg, rgba(136, 136, 136, 0) 0%, rgba(136, 136, 136, 1) 50%, rgba(136, 136, 136, 0) 100%); }
.location-grid:last-child:before { display: none; }
.location-grid:first-child { margin-left: 0; }
.location-grid:last-child { padding-right: 0px; }
.location-grid h3 { font-size: 1.1em; font-weight: normal; color: #E6D0C3; text-transform: capitalize; margin-top: 15px; }
.location-grid p { padding: 12px 0; display: inline-block; }
.location-grid a { text-decoration: none; padding: 12px 10px; border: solid 1px #6c6c6c; color: #888888; display: flex; width: 100%; text-align: center; border-radius: 30px; position: relative; justify-content: center; gap: 8px; }
.location-grid a:hover { border: solid 1px #D6A792; }
.location-grid a:before { background: url(../images/phone.svg); content: ""; width: 16px; height: 17px; line-height: 1; display: inline-block; }
.footer ul.container-flex { align-items: center; justify-content: center; gap: 1em; margin-top: 70px; }
.social-icon li { display: inline-block; border: solid 1px #6c6c6c; padding: 16px; border-radius: 100px; }
.social-icon li:hover { border: solid 1px #D6A792; }
.social-icon li img { width: 22px; height: 22px; }
.copyright { margin-top: 80px; font-size: 1em; }
/***Booking-Form****/

.inner-banner { background: #202020; display: flex; align-items: center; color: #fff; text-align: center; padding: 15px 0 17px 0; line-height: 1; }
.inner-banner h2 { font-weight: normal; font-size: 2.5em; }
.page-id-29 .header { position: relative; padding: 2em 6em 2em 6em; }
.page-id-29 .menu ul li a { color: #000000; }
.bookin-form { padding: 5em 0; position: relative; }
.bookin-form .container-flex { display: flex; gap: 4em; align-items: center; flex-wrap: wrap; }
.bookin-form .container-flex > div { flex: 1 1 calc((100% / 2) - 2em); }
.half-field-row label,
.full-field-row label { display: inline-block; width: 100%; margin-bottom: 8px; }
.form-control { width: 100%; padding: 15px 15px; border: 1px solid #ccc; border-radius: 4px; }
.bookin-form form { display: flex; flex-wrap: wrap; gap: 1.5em 2em; }
.bookin-form form > div { display: flex; flex-wrap: wrap; flex: 1 1 calc((100% / 2) - 2em); margin: 0px !important; }
.bookin-form form > div.Notes { flex: 1 1 calc((100% / 1) - 2em); }
#btnGo { width: 100%; /* line-height: 2; */ cursor: pointer; border: 1px solid transparent; border-radius: 21px; font-size: 1.2em; background-color: #d0a95e; padding: 11px 0; }
#btnGo:hover,
#btnGo:hover { border: 1px solid #333; background-color: #fff; }
.Title { padding: 11px 4px; clear: both; border-bottom: 3px solid #9c8253; background-color: rgba(169, 169, 169, 0.4); text-align: center; font-size: 20px; }
.Notes { padding: 12px 20px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; background-color: #f8f8f8; margin-top: 5%; text-align: justify; }
.Notes ul li { padding-bottom: 10px; font-size: 0.9em; initial-letter: 1; position: relative; padding-left: 20px; }
.Notes ul li:before { background: url(//beta-olive.com/costal_collection/wp-content/themes/costal_collection/images/arrow.svg); content: ""; width: 8px; height: 12px; position: absolute; left: 0px; top: 4px; line-height: 1; background-size: 100%; background-repeat: no-repeat; }
.featured-image img { border-radius: 14px; width: 100%; object-fit: cover; }
.bookin-form .rotating { position: absolute; right: 20px; top: auto; bottom: -113px; }
/*******Hotel-Page*********/
.hotel-banner > div { min-height: 410px; text-align: center; display: flex; align-items: center; justify-content: center; }
.hotel-banner h2 { color: #fff; margin: 0; }
/*About-Us*/
.hotel-about { text-align: center; padding: 5em 0; position: relative; background: #FFEFE8; background: linear-gradient(180deg, rgba(255, 239, 232, 1) 0%, rgba(255, 255, 255, 1) 100%); border-bottom: solid 1px #ddd; }
.hotel-about .container { width: 1200px; }
.hotel-about p { padding-bottom: 20px; line-height: 32px; }
/***featured-rooms****/
.featured-rooms { padding: 5em 0; text-align: center; }
.featured-rooms-slider { margin-top: 3em; }
.featured-rooms .featured-rooms-slider img { width: 100%; border-radius: 16px; }
.featured-rooms .slick-track { display: flex; gap: 3em; }
.featured-rooms .slick-slide { position: relative; }
.featured-rooms-slider aside { position: absolute; left: 8%; bottom: 8%; color: #fff; text-align: left; width: 70%; }
.featured-rooms-slider aside h3 { font-size: 2em; font-weight: normal; margin-bottom: 15px; }
/*****Hotel-cta*******/
.hotel-cta { position: relative; }
.hotel-cta .cta-content { position: absolute; top: 50%; left: 52%; width: 40%; transform: translateY(-50%); }
.hotel-cta .cta-content a { margin-top: 20px; }
/**Amenities***/
.amenities { padding: 5em 0; }
.amenities .container-flex { gap: 8em; align-items: center; }
.amenities-img img { border-radius: 24px; width: 100%; }
.amenities-img figure { position: relative; }
.amenities-img figure:before { background: #f1f1f1; content: ""; width: 100%; height: 100%; position: absolute; left: 5%; top: 4%; border-radius: 24px; }
.amenities-img img { border-radius: 24px; width: 100%; position: relative; z-index: 1; }
.amenities-content { flex: 0 1 calc((55% / 1) - 2em); }
.amenities-content ul { display: flex; flex-wrap: wrap; margin-top: 3em; gap: 2em; }
.amenities-content ul li { flex: 1 1 calc((100% / 3) - 2em); }
.amenities-content ul li span { padding-top: 15px; display: inline-block; }
/******/
.our-gallery { background: #ff0; padding: 5em 0; text-align: center; }
.our-gallery .slick-slide { margin: 0 20px; transform: scale(0.8); }
.our-gallery .slick-slide.slick-center { margin: 0 20px; transform: scale(1); }
.our-gallery .slick-slide img { display: block; width: 100%; border-radius: 20px; }