/*****************************************************/
  /*****************   Typography   ********************/
  /*****************************************************/

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

  @font-face {
  	font-family: 'Bradley Hand ITC';
  	src: url('../fonts/bradley-hand/BradleyHandITC.woff2') format('woff2'),
  		url('../fonts/bradley-hand/BradleyHandITC.woff') format('woff');
  	font-weight: normal;
  	font-style: normal;
  	font-display: swap;
  }

  @font-face {
  	font-family: 'Museo 700';
  	src: url('../fonts/Museo-700.woff2') format('woff2'),
  		url('../fonts/Museo-700.woff') format('woff');
  	font-weight: bold;
  	font-style: normal;
  	font-display: swap;
  }

  * {
  	margin: 0;
  	padding: 0;
  }

  :root {
  	--blue: #0082c8;
  	--brown: #7a3e30;
  	--black: #000000;
  	--green: #2f6e41;
  	--white: #ffffff;
  	--body-font: "Inter", sans-serif;
  	/* --heading-font: 'Museo 700'; */
    --heading-font: 'Poppins', sans-serif;
  }

  html {
  	overflow-x: hidden;
  }

  body {
  	font-family: var(--body-font);
  	font-size: 18px;
  	line-height: 1.5;
  	font-weight: 400;
  	color: var(--black);
  	background-color: var(--white);
  	/* overflow-x: hidden; */
  }

  ul {
  	list-style: none;
  	margin: 0;
  	padding: 0;
  }

  li {
  	list-style: none;
  }

  a {
  	text-decoration: none;
  	display: inline-block;
  }

  a:hover {
  	text-decoration: none;
  }

  a:focus {
  	outline: none;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  	font-family: var(--heading-font);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
  	margin: 0;
  	padding: 0;
  }

  img {
  	border: none;
  	max-width: 100%
  }

  button {
  	border: none;
  }

  button:focus {
  	border: none;
  	outline: none;
  	box-shadow: none;
  }

  .align_center {
  	align-items: center;
  }

  .no_padding {
  	padding: 0;
  }

  .section-padding {
  	padding: 80px 0px;
  }

  .btn-style,
  .btn-style-blue {
  	background-color: var(--green);
  	color: var(--white);
  	padding: 12px 30px;
  	text-transform: capitalize;
  	font-weight: 500;
  	letter-spacing: 0.5px;
  	transition: 0.3s;
  	display: block;
  	width: fit-content;
  	margin: 0 auto;
  }

  .btn-style:hover {
  	background-color: var(--blue);
  }

  .btn-style-blue {
  	background-color: var(--blue);
  }

  .btn-style-blue:hover {
  	background-color: var(--white);
  	color: var(--black);
  }


  /*****************************************************/
  /******************   Header Area   ******************/
  /*****************************************************/

  header {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  }

  .mobile-header {
  	display: none;
  }

  header .container {
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	padding: 15px 0;
  }

  .header-area a img {
  	width: 100px;
  }

  .header-nav ul {
  	display: flex;
  	gap: 10px;
  }

  .header-nav ul li a {
  	font-size: 16px;
  	color: var(--white);
  	font-weight: 600;
  	text-transform: capitalize;
  	font-family: var(--heading-font);
  	transition: 0.3s;
  	text-shadow: 0px 1px 2px #000000e3;
  	padding: 8px 15px;
  	background-color: #00000070;
  	text-shadow: inherit;
  	transition: .3s;
  }

  .header-nav ul li a:hover {
  	color: #85d09a !important;
  	transition: .3s;
  }

  .current_page_item a {
  	color: #85d09a !important;
  	transition: .3s;
  }

  .header-nav ul .current_page_item a {
  	background: #FFF !important;
  	color: #000 !important;
  	text-shadow: inherit;
  	transition: .3s;
  }

  .header-nav ul li a:hover {
  	color: var(--black) !important;
  	background: #fff;
  	text-shadow: inherit;
  	transition: .3s;
  }

  .mobile-menu-trigger {
  	display: none;
  }

  .mobile-menu-trigger svg {
  	font-size: 28px;
  }

  /*****************************************************/
  /*****************   Banner Area   *******************/
  /*****************************************************/

  .banner-area {
  	height: 60vh;
  	box-sizing: border-box;
  }

  .banner-area img {
  	height: 100% !important;
  	width: 100%;
  	object-fit: cover;
  }

  #homepage-banner .banner-area {
  	height: 100vh;
  	position: relative;
  }

  #homepage-banner .banner-area.home-banner-area {
  	height: 100vh;
  	position: relative;
  }

  .banner-area.home-banner-area .banner-content {
  	position: absolute;
  	top: 0;
  	left: 0;
  	right: 0;
  	text-align: center;
  	margin: auto;
  	z-index: 1;
  	height: 100vh;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	flex-direction: column;
  }

  .banner-area.home-banner-area .banner-content h2 {
  	font-family: Bradley Hand ITC;
  	text-transform: uppercase;
  	font-size: 65px;
  	font-weight: bold;
  	line-height: 1.2em;
  	text-shadow: 3px 3px 3px #00000087;
  }

  .banner-area.home-banner-area .banner-content p {
  	font-size: 45px;
  	font-family: Bradley Hand ITC;
  	max-width: 940px;
  	font-weight: 600;
  	width: 100%;
  	text-shadow: 3px 3px 3px #00000087;
  	margin: auto;
  }

  .page-intro-area {
  	max-width: 900px;
  	width: 100%;
  	margin: 0 auto;
  	margin-top: -100px;
  	background-color: var(--white);
  	position: relative;
  	text-align: center;
  	padding: 65px 45px 25px 45px;
  }

  .page-intro-area h2 {
  	font-size: 38px;
  	font-weight: bold;
  	line-height: 1.2em;
  	color: #4D4A47;
  	margin-bottom: 20px;
  }

  .page-intro-area p {
  	margin-bottom: 20px;
  	text-align: justify;
  }

  .page-intro-area ul {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	margin-bottom: 20px;
  	flex-wrap: wrap;
  	row-gap: 10px;
  }

  .page-intro-area ul li {
  	padding-right: 10px;
  	margin-right: 10px;
  	position: relative;
  }

  .page-intro-area ul li::after {
  	content: "";
  	position: absolute;
  	top: 50%;
  	right: 0;
  	width: 2px;
  	height: 70%;
  	background-color: #918585;
  	transform: translateY(-50%);
  }

  .page-intro-area ul li:last-child:after {
  	display: none;
  }

  .page-intro-area ul li a {
  	font-size: 17px;
  	color: #00b6b6;
  	transition: 0.3s;
  }

  .page-intro-area ul li a:hover {
  	color: #4D4A47;
  }

  .banner-content-top {
  	text-align: center;
  	margin-bottom: 40px;
  }

  .banner-content-top h1 {
  	font-size: 38px;
  	margin-bottom: 10px;
  	font-weight: 700;
  	text-transform: capitalize;
  }

  .banner-content-top h2 {
  	font-size: 35px;
  	text-transform: capitalize;
  	font-weight: 600;
  }

  .banner-content-bottom p {
  	margin: 20px 0;
  	text-align: justify;
  }

  /*****************************************************/
  /*****************   Footer Area   *******************/
  /*****************************************************/

  .footer-top img {
  	width: 100%;
  	height: 80vh;
  	object-fit: cover;
  }

  .footer-middle {
  	text-align: center;
  	margin: 60px 0 100px;
  }

  .footer-middle h2 {
  	text-transform: capitalize;
  	margin-bottom: 30px;
  }

  .footer-bottom {
  	background-color: #d1eaf5;
  	padding: 50px 0 0;
  }

  .footer-column a img {
  	width: 100px;
  }

  .footer-address {
  	margin: 20px 0;
  }

  .footer-address h2 {
  	font-size: 25px;
  	margin-bottom: 10px;
  }

  .footer-column .btn-style {
  	margin: 0;
  }

  .footer-address {
  	margin: 20px 0;
  }

  .footer-column>h2 {
  	margin-bottom: 20px;
  	font-size: 25px;
  }

  .footer-column ul {
  	display: flex;
  	gap: 20px;
  }

  .footer-column ul li a i {
  	color: var(--green);
  	font-size: 35px;
  	transition: 0.3s;
  }

  .footer-column ul li a i:hover {
  	color: var(--blue);
  }

  .copyright-area {
  	text-align: center;
  	background-color: var(--green);
  	color: var(--white);
  	padding: 20px;
  	margin-top: 50px;
  }

  /*****************************************************/
  /*****************   Content Area   ******************/
  /*****************************************************/

  .sustainability-area {
  	background-image: url(assets/images/header/Activites-Header.jpg);
  	background-size: cover;
  	background-repeat: no-repeat;
  	background-position: center;
  	padding: 80px 0;
  }

  .sustainability-area .container {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  }

  .sustainability-content {
  	max-width: 800px;
  	width: 100%;
  	background-color: rgba(0, 0, 0, 0.3);
  	color: #fff;
  	padding: 50px;
  	text-align: center;
  	backdrop-filter: blur(2px);
  }

  .sustainability-content h2 {
  	text-transform: capitalize;
  	font-size: 38px;
  	font-weight: 700;
  }

  .sustainability-content p {
  	margin: 35px 0;
  	text-align: justify;
  }

  /* Single Offer Area */

  .single-offer-area {
  	background-color: #d1eaf5;
  }

  .single-offer-area .row .col-md-6:nth-child(1) {
  	height: fit-content;
  	position: sticky;
  	top: 0;
  }

  .single-offer-image img {
  	height: 45rem !important;
  	width: 100%;
  	object-fit: cover;
  }

  .single-offer-content {
  	padding: 40px;
  	text-align: center;
  }

  .single-offer-content h2 {
  	font-size: 38px;
  	font-weight: 700;
  	text-transform: capitalize;
  }

  .single-offer-content p {
  	margin: 30px 0;
  	text-align: justify;
  }

  .single-offer-content span {
  	margin-top: 40px;
  	display: block;
  	background-color: var(--white);
  	padding: 12px;
  	border-radius: 5px;
  }

  /* instagram area */

  .instagram-area {
  	display: grid;
  	grid-template-columns: repeat(6, 1fr);
  	gap: 10px;
  	justify-content: center;
  }

  .instagram-area img {
  	height: 230px;
  	width: 100%;
  	object-fit: cover;
  	border-radius: 5px;
  }

  /* Ready to travel */

  .visited-location-top {
  	text-align: center;
  	margin-bottom: 50px;
  }

  .visited-location-top a img {
  	width: auto;
  	height: 150px;
  	margin-bottom: 30px;
  }

  .testimonial-slider-inner p {
  	font-style: italic;
  	width: 75%;
  	margin: 0 auto;
  	cursor: pointer;
  }

  .testimonial-slider-inner h4 {
  	margin-top: 10px;
  	text-transform: capitalize;
  	cursor: pointer;
  }

  .single-ready-to-travel {
  	text-align: center;
  }

  .single-ready-to-travel a {
  	text-transform: capitalize;
  	font-size: 25px;
  	color: var(--black);
  	font-weight: 500;
  	margin: 25px 0;
  	width: 100%;
  }

  .single-ready-to-travel a img {
  	width: 100%;
  }

  .single-ready-to-travel p {
  	text-align: justify;
  }

  .ready-to-visit {
  	margin-top: 50px;
  	text-align: center;
  }

  .ready-to-visit h2 {
  	text-transform: capitalize;
  	font-size: 35px;
  	font-weight: 600;
  	margin-bottom: 30px;
  }

  /*****************************************************/
  /*****************   Our Island   ********************/
  /*****************************************************/


  .single-island-area {
  	margin: 25px 0;
  }

  .single-island-area .row {
  	align-items: center;
  }

  .single-island-image a {
  	width: 100%;
  }

  .single-island-image img {
  	width: 100%;
  }

  .single-island-content a:first-child {
  	font-size: 35px;
  	color: var(--black);
  	font-weight: 700;
  	font-family: var(--heading-font);
  }

  .single-island-content p {
  	margin: 12px 0 36px;
  	text-align: justify;
  }

  .single-island-content .btn-style {
  	margin: 0;
  }


  /*****************************************************/
  /**********************   FAQ   **********************/
  /*****************************************************/

  .single-faq {
  	margin: 20px 0;
  }

  .single-faq h2 {
  	background-color: #d1eaf5;
  	padding: 15px 50px 15px 20px;
  	font-weight: 400;
  	font-family: var(--body-font);
  	font-size: 22px;
  	line-height: 1.5;
  	cursor: pointer;
  	position: relative;
  }

  .single-faq a {
  	color: #0082C8;
  }

  .single-faq h2::before {
  	content: "";
  	position: absolute;
  	top: 50%;
  	right: 29px;
  	height: 18px;
  	width: 3px;
  	background-color: black;
  	transform: translateY(-50%);
  }

  .single-faq h2::after {
  	content: "";
  	position: absolute;
  	top: 50%;
  	right: 22px;
  	height: 3px;
  	width: 18px;
  	background-color: black;
  	transform: translateY(-50%);
  }

  .single-faq p {
  	padding: 5px 20px;
  	display: none;
  }

  .single-faq.active p {
  	display: block;
  	text-align: justify;
  }

  .single-faq.active h2::before {
  	display: none;
  }


  /* MIX IT UP */

  .all-gallery {
  	display: grid;
  	grid-template-columns: repeat(4, 1fr);
  	gap: 15px;
  }

  .filter-btns {
  	text-align: center;
  }

  .all-gallery .mix {
  	width: 100%;
  	height: 200px;
  	background-color: #fff;
  	font-size: 39px;
  	font-weight: 700;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	color: #ded3d3;
  	overflow: hidden;
  }

  .all-gallery .mix:hover img {
  	transform: scale(1.1);
  }

  .all-gallery img {
  	width: 100%;
  	height: 100% !important;
  	object-fit: cover;
  	transition: 0.3s;
  }

  .filter-btns span {
  	color: #00b6b6;
  	transition: 0.3s;
  	background-color: transparent;
  	padding-right: 10px;
  	margin-right: 10px;
  	position: relative;
  }

  .filter-btns span::after {
  	content: "";
  	position: absolute;
  	top: 50%;
  	right: 0;
  	width: 2px;
  	height: 82%;
  	background-color: #918585;
  	transform: translateY(-50%);
  }

  .filter-btns span:last-child:after {
  	display: none;
  }

  span.mixitup-control-active {
  	color: #4D4A47;
  }

  /*****************************************************/
  /*****************   Contact Page   ******************/
  /*****************************************************/

  .contact-content-area {
  	background-color: #d1eaf5;
  }

  .contact-intro-title {
  	font-family: 'Bradley Hand ITC';
  	font-size: 46px !important;
  }

  .contact-content-area .page-intro-area {
  	transform: translateY(-100px);
  }

  .contact-address-info {
  	text-align: left;
  }

  .contact-address-info h2 {
  	font-size: 18px;
  	color: var(--black);
  	margin-bottom: 5px;
  	font-weight: 700;
  }

  .contact-info span {
  	font-size: 18px;
  	text-align: left;
  	color: var(--black);
  	margin-bottom: 10px;
  	font-weight: 700;
  	display: block;
  }

  .contact-info span:first-child {
  	margin-bottom: 20px;
  }

  .contact-info span a {
  	color: var(--blue);
  	font-weight: 400;
  }

  .contact-address-info a {
  	color: #0082C8;
  }

  .contact-form-area {
  	text-align: left;
  }

  .contact-form-area h2 {
  	font-size: 25px;
  	color: var(--black);
  	margin: 35px 0;
  }

  .contact-form-area form br {
  	display: none;
  }

  .contact-form-area form .wpcf7-response-output {
  	margin: -30px 0 0 0;
  }

  .contact-form-area form label {
  	display: block;
  	margin: 20px 0 0 0;
  	font-size: 20px;
  	font-weight: 600;
  	text-transform: uppercase;
  	color: var(--blue);
  	font-family: var(--heading-font);
  }

  .contact-form-area form label .wpcf7-not-valid-tip {
  	font-size: 16px;
  	text-transform: capitalize;
  	margin-top: 7px;
  }

  .contact-form-area form input,
  .contact-form-area form textarea {
  	margin-top: 5px;
  	width: 100%;
  	outline: none;
  	padding: 10px;
  	background-color: #d1eaf5;
  	border: none;
  }

  .contact-form-area form textarea {
  	min-height: 150px;
  	max-height: 150px;
  }

  .contact-form-area form input[type=submit] {
  	display: block;
  	width: 100%;
  	padding: 10px;
  	text-transform: uppercase;
  	background-color: var(--blue);
  	margin-top: 20px;
  }

  .contact-form-area form input[type=submit]:hover {
  	background-color: var(--green);
  	color: var(--white);
  }

  .contact-map-area {
  	padding-top: 80px;
  }

  .contact-map-area iframe {
  	width: 100%;
  	height: 50vh;
  }

  .contact-map-content h2 {
  	font-size: 38px;
  	font-weight: bold;
  	line-height: 1.2em;
  	color: #4D4A47;
  	margin-bottom: 20px;
  	text-transform: capitalize;
  	text-align: center;
  	margin-bottom: 80px;
  }

  .contact-description {
  	margin-bottom: 80px;
  }

  .contact-description a {
  	color: #0082C8;
  }

  /* Single Island Page */

  .main-single-content img {
  	width: 100%;
  	height: 75vh;
  	object-fit: cover;
  }

  .main-single-content h2 {
  	font-size: 35px;
  	line-height: 55px;
  	margin-top: 50px;
  	margin-bottom: 15px;
  }

  .main-single-content p {
  	margin-bottom: 50px;
  }

  /* Simple Gallery Widget */

  .simple-gallery-content {
  	display: grid;
  	grid-template-columns: repeat(6, 1fr);
  	gap: 15px;
  }

  .simple-gallery-content a img {
  	width: 100%;
  	height: 165px;
  	object-fit: cover;
  	border-radius: 3px;
  }

  .simple-gallery-area .container>a {
  	margin-top: 40px;
  }






  /* Home Banner Slider Css */


  .swiper {
  	width: 100%;
  	height: 100%;
  }

  .swiper-slide {
  	background-position: center;
  	background-size: cover;
  }

  .swiper-slide img {
  	display: block;
  	width: 100%;
  }

  .pagination-wrapper {
  	display: none;
  }

  .swiper-pagination {
  	width: 50px !important;
  	height: calc(100% - 400px);
  	display: flex;
  	flex-direction: column;
  	top: 60px !important;
  	bottom: 0 !important;
  	left: 40px !important;
  	right: 0 !important;
  	justify-content: space-between;
  	counter-reset: my-sec-counter;
  	padding: 100px 0;
  }

  .swiper-pagination-bullet {
  	opacity: 1;
  	background: rgb(255 255 255 / 35%);
  	width: 12px;
  	height: 12px;
  	transition: 0.3s all;
  	transform: scale(1);
  	margin: 0 !important;
  }

  .swiper-pagination:before {
  	content: "";
  	background: rgb(255 255 255 / 35%);
  	width: 1px;
  	height: 100%;
  	position: absolute;
  	left: 5.5px;
  	top: 0
  }

  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  	transform: scale(2);
  }

  .swiper-pagination-bullet:before {
  	counter-increment: my-sec-counter;
  	content: ""counter(my-sec-counter) "";
  	font-size: 0;
  	color: #fff;
  	position: absolute;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	width: 100%;
  	height: 100%;
  }

  .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  	font-size: 8px;
  }

  .swiper-counter {
  	position: absolute;
  	color: #fff;
  	bottom: 70px;
  	z-index: 1;
  	transform: rotate(-90deg);
  	left: 35px;
  }

  .swiper-counter span {
  	color: #fff;
  }

  .slider-text {
  	text-align: center;
  }



  .swiper-slide.swiper-slide-active .slider-text h2 {
  	animation: fadeInUp 0.6s ease-in-out 0s forwards;
  }


  .swiper-slide.swiper-slide-active .slider-text p {
  	animation: fadeInUp 0.9s ease-in-out 0s forwards;
  }


  @keyframes fadeInUp {
  	from {
  		opacity: 0;
  		-webkit-transform: translate3d(0, 100%, 0);
  		transform: translate3d(0, 100%, 0);
  	}

  	to {
  		opacity: 1;
  		-webkit-transform: none;
  		transform: none;
  	}
  }

  .swiper-slide {
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  }