/*

Theme Name: Aqua Outback - Theme

Author: Eider Ezama

Description: Custom TRE theme

Version: 1

Requires PHP: 7.8.2

*/

:root {

  --blue: #3063d6;

  --orange: #faaf40;

  --dark-blue: #89bec9;

  --white: white;

  --other-blue: #9ed9e6;

  --coral: #db7d6a;

  --grey: #80979c;

}



:focus {

  outline: none;

}

/* Aqua font */

@font-face {

  font-family: "aqua-grotesque";

  src: url("https://aquaoutback.com/font/aqua.otf") format("opentype");

}



/*========================================================================================================================

 ************************************************ 1-GLOBAL STYLES *******************************************************

 ========================================================================================================================*/

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  background-color: var(--white);

  line-height: 1.3rem;

  font-family: "PT sans", sans-serif;

  font-weight: normal;

  font-style: normal;

  position: sticky;

}

body.hidden-scrolling {

  overflow-y: hidden;

  height: 100vh;

}

html,

body {

  overflow-x: hidden;

}



dl,

ol,

ul {

  margin: 0;

  padding-left: 14px;

}



p {

  margin: 0;

}

a {

  text-decoration: none;

}

/* added by ashvin for homepage shortcuts */

.shortcut-section {
    background-color: #f9f9f9;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.shortcut-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    text-decoration: none;
    color: #333;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.shortcut-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    color: #000;
}

.shortcut-thumb {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
}

.shortcut-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.shortcut-box h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.shortcut-box p {
    margin-bottom: 0;
    font-size: 0.95rem;
}

.align-left-row {
  justify-content: flex-start !important;
  text-align: left !important;
}

.align-left-row p {
  text-align: left !important;
}

@media (max-width: 768px) {
  .schedule-title {
    text-align: center !important;
  }
}


/* added because wordpress */

img {

  max-width: 100%;

  height: auto;

  outline: none;

  border: none;

}

hr {

  all: none;

  border: 2px solid var(--dark-blue);

  margin: 0 0 20px;

  opacity: 0.5;

  height: 0;

  width: 70%;

}

.hr-1 {

  border: none;

  background-color: none;

  opacity: 0;

  margin: 0 0 30px;

}

.hr-2 {

  border: none;

  background-color: none;

  opacity: 0;

  margin: 0 0 60px;

}



h1,

h2,

h3,

h4 {

  font-family: "aqua-grotesque", sans-serif;

  color: var(--dark-blue);

}

.has-text-align-right {

  text-align: right;

}

.center {

  text-align: center;

}

hr.center {

  margin: 0 auto 20px;

}

.hidden {

  transition: 0.2s all ease-in;

  opacity: 0;

  display: none;

}

a {

  color: var(--blue);

  font-weight: bold;

}

a:focus,

a:hover {

  color: var(--orange);

  font-weight: bold;

}

.pointer {

  pointer-events: none;

}

/*========================================================================================================================

  ************************************************ 2-NAVBAR ****************************************************************

  ========================================================================================================================*/



/**************************************** 2.1-NAVBAR LOGO ***************************************************************/



nav {

  position: fixed;

  z-index: 1000;

  width: 100vw;

  opacity: 0;

  -moz-animation: content-load 300ms ease-in;

  -o-animation: content-load 300ms ease-in;

  -ms-animation: content-load 300ms ease-in;

  animation: content-load 300ms ease-in;

  animation-fill-mode: forwards;

  background-color: var(--white);

  box-shadow: 0 4px 10px #93aacf;

}

.content {

  opacity: 0;

  -webkit-animation: content-load 500ms ease-in 300ms;

  -moz-animation: content-load 500ms ease-in 300ms;

  -o-animation: content-load 500ms ease-in 300ms;

  -ms-animation: content-load 500ms ease-in 300ms;

  animation: content-load 500ms ease-in 300ms;

  animation-fill-mode: forwards;

}



nav .nav-logo-div {

  display: flex;

  align-items: center;

  width: 100%;

}



nav .nav-logo {

  height: auto;

  padding: 16px 40px 10px;

  display: inline-block;

}

nav .nav-aqua-logo {

  width: 300px;

  transform: scale(0.96);

}



nav .nav-aqua-logo:hover nav .nav-aqua-logo:focus {

  transition: all 0.3s ease-out;

  transform: scale(0.97);

}



/**************************************** 2.2-MENU NAVBAR ***************************************************************/

nav .nav-menu {

  width: 40%;

  text-align: center;

  margin: 30px auto 0;

  margin-right: 100px;

  padding: 5px 0;

  right: 0;

  font-family: "PT sans", sans-serif;

}

nav .open-nav-menu {

  height: 34px;

  width: 40px;

  margin-right: 15px;

  display: none;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  position: absolute;

  right: 10px;

  top: 53px;

}



nav .open-nav-menu span {

  display: block;

  height: 3px;

  width: 24px;

  background-color: var(--dark-blue);

  position: relative;

}

nav .open-nav-menu span:before,

nav .open-nav-menu span:after {

  content: "";

  position: absolute;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: var(--dark-blue);

  box-sizing: border-box;

}

nav .open-nav-menu span:before {

  top: -8px;

}

nav .open-nav-menu span:after {

  top: 8px;

}

nav .close-nav-menu {

  height: 40px;

  width: 40px;

  margin: 0 0 15px 15px;

  cursor: pointer;

  display: none;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  align-items: center;

  justify-content: center;

}

nav .close-nav-menu img {

  width: 20px;

  position: absolute;

  right: 44px;

  top: 40px;

}

nav .menu-overlay {

  position: fixed;

  z-index: 999;

  background-color: rgba(137, 190, 201, 0.5);

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

  visibility: hidden;

  opacity: 0;

  transition: all 0.3s ease;

}

nav .menu-overlay.nav-active {

  visibility: visible;

  opacity: 1;

}

nav .menu {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



nav .menu-item {

  display: inline-block;

  position: relative;

}

nav .menu-item a {

  color: var(--dark-blue);

  display: block;

  margin: 8px auto;

  font-size: 0.95rem;

}

nav .menu-item.active > a {

  color: var(--orange);

}

nav .menu-item a:hover,

nav .menu-item:hover > a,

nav .menu-item a:focus,

nav .menu-item:focus > a {

  transition: all 0.3s ease;

  opacity: 0.7;

}

nav .sub-menu h6.menu-item {

  color: #141F3D;

  opacity: 0.8;

  text-transform: uppercase;

  font-size: 1rem;

  display: block;

  margin: 25px 20px 8px;

  font-weight: bold;

  text-align: left;

}

nav .plus {

  display: inline-block;

  height: 8px;

  width: 8px;

  position: relative;

  margin: 1px 1px 1px 5px;

  pointer-events: none;

}



nav .plus:before,

nav .plus:after {

  content: "";

  position: absolute;

  box-sizing: border-box;

  left: 50%;

  top: 50%;

  height: 2px;

  background-color: var(--dark-blue);

  width: 100%;

  transform: translate(-50%, -50%);

}

nav .menu-item.active > a .plus:before,

nav .menu-item.active > a .plus:after {

  background-color: var(--orange);

}

nav .menu-item:hover > a .plus:before,

nav .menu-item:hover > a .plus:after,

nav .menu-item:focus > a .plus:before,

nav .menu-item:focus > a .plus:after {

  opacity: 0.7;

}

nav .menu-item:hover .plus:before,

.menu-item:hover .plus:after,

nav .menu-item:focus .plus:before,

.menu-item:focus .plus:after {

  background-color: var(--other-blue);

  transition: all 0.3s ease;

}

nav .plus:after {

  transform: translate(-50%, -50%) rotate(-90deg);

}



nav .sub-menu {

  position: absolute;

  width: 200px;

  top: 100%;

  left: 0;

  background-color: var(--white);

  transform: translateY(10px);

  opacity: 0;

  visibility: hidden;

  font-size: 0.95rem;

  box-shadow: 0 2px 8px #93aacf;

}

nav .sub-menu.sub-menu-long {

  width: 300px;

}

nav .nav-wider {

  width: 300px;

}

nav .sub-menu .menu-item {

  display: block;

  text-align: left;

}

nav .sub-menu .menu-item a {

  padding: 10px 20px;

}

/*========================================================================================================================

  ************************************************ 3-CONTENT ****************************************************************

  ========================================================================================================================*/

/* BANNER CONTAINER */

.banner {

  position: relative;

  background-color: var(--black);

}



.banner .div-text {

  z-index: 80;

  position: absolute;
  
  display: flex;

  flex-direction: column;

  align-items: center;
  
  justify-content: center;

  margin: auto;

  text-align: center;

  min-height: 200px;

  height: 100%;

  width: 100%;

  background-color: rgba(0, 0, 0, 0.4);

  /* box-shadow: 0 0 10px #93aacf; */

  padding: 40px;

}

.banner .div-text p {

  color: white;

  letter-spacing: 0.35px;

}

.div-text h1 {

  color: white !important;

}


.banner .div-text a {

  padding: 10px 20px 7px;

  background-color: var(--dark-blue);

  display: inline-block;

  margin-top: 20px;

  color: var(--white);

  font-family: "aqua grotesque", sans-serif;

  transition: all ease 0.1s;

}

.banner img {

  width: 100%;

}

.banner .div-text a:hover,

.banner .div-text a:focus {

  /* background-color: var(--other-blue); */

  background-color: #1caecf;
  
  box-shadow: 0 0 10px #bfc6d1;

  transition: all ease 0.1s;

}

.hero-desc {
    text-align: center;
    text-align-last: center;
    max-width: 60vw;
}

/* banner simple */

.banner-simple {

  text-align: center;

  background-color: var(--other-blue);

  padding: 65px 5% 45px;

  text-transform: uppercase;

  color: var(--white);

}

.banner-simple h1 {

  color: var(--white);

  font-size: 2.6rem;

}

/* PAGE CONTENT */

.page-content {

  padding: 50px 10%;

  color: var(--grey);

}



.page-content p {

  margin: 10px auto;

}

.page-content hr {

  text-align: left;

}



.div-instagram {

  padding: 50px 5%;

}



/* GALLERY */

.content-gallery {

  padding: 30px 5%;

  text-align: center;

}



.content-gallery > div {

  display: inline-block;

  position: relative;

}

.content-gallery .img-wrap {

  overflow: hidden;

  width: 280px;

  margin: 10px;

}

.content-gallery .img-wrap img {

  width: 100%;

  outline: 0;

  object-position: center;

  transition: all 0.3s ease;

}



.content-gallery .img-wrap img:hover,

.content-gallery .img-wrap:focus {

  transform: scale(1.1);

  opacity: 0.85;

}



/* BLOG */

.blog-content {

  width: 90%;

  text-align: left;

}

.blog-home-image p {

  text-align: left;

  color: var(--dark-blue);

  margin-top: 10px;

}

.content-blog {

  padding: 30px 10%;

  text-align: center;

  max-width: 1400px;

  margin: 20px auto;

}

.content-blog p {

  color: var(--grey);

}

.blog-home-content {

  text-align: left;

}

.btn-blog {

  background-color: var(--dark-blue);

  padding: 5px 10px;

  margin: 10px auto;

  display: inline-block;

  color: var(--white);

  border: 2px solid var(--dark-blue);

}

.back-blog {

  padding: 5px 20px;

}

.btn-blog:hover {

  opacity: 0.8;

  transition: all 0.2s ease;

  color: var(--white);

}

.blog-home-content h4 a {

  font-size: 1.8rem;

  color: var(--dark-blue);

}

.blog-home-content h4 a:hover {

  color: var(--orange);

}

.blog-col {

  margin-top: 50px;

}

/* front-page blog */

.div-blog-home {

  max-width: 1000px;

  margin: 0 auto;

}

.blog-home p {

  color: var(--grey);

}

/* rooms posts */

.div-rooms,

.div-activities {

  padding: 50px 10%;

  color: var(--grey);

}
  
  .search-div {
  	
    background: #89bec9;
    
  }
  
  .search-div h2 {
  
  	color: white;
  
  }
  
  .search-div label {
  
  	color: white;
  
  }

.div-rooms-2,

.div-activities-2 {

  padding: 15px;

}

.div-rooms-2 p,

.div-activities-2 p {

  width: 100%;

}

.div-rooms-2:hover img,

.div-rooms-2:focus img,

.div-rooms-2:hover h3,

.div-rooms-2:focus h3,

.div-activities-2:hover img,

.div-activities-2:focus img,

.div-activities-2:hover h3,

.div-activities-2:hover h3 {

  opacity: 0.8;

}

.wpbs-pricing-table th, td {
    padding: 4px 40px 0px 0px !important;
}

.rooms-content h3,

.activities-content h3 {

  margin: 10px 0;

}

.activities-content h3 {

  font-size: 1.4rem;

}

.rooms-content a,

.activities-content a {

  color: var(--grey);

}



/* HOMEPAGE */



.home-blue {

  background-color: var(--other-blue);

  margin: 30px auto;

}

.home-blue h2,

.home-blue .rooms-content a {

  color: var(--white);

}

.home-blue hr {

  border: 2px solid var(--white);

  opacity: 1;

}

.div-home h2 {

  font-size: 2.3rem;

}

.div-home h2 a {

  color: var(--dark-blue);

  font-weight: normal;

  transition: 0.2s all ease;

}

.div-home h2 a:hover {

  color: var(--orange);

}

.no-lightbox {

  pointer-events: none !important;

}

.div-map {

  margin: 20px auto;

}

.div-map .map iframe {

  border: 3px solid var(--dark-blue);

  width: 100%;

  margin: 0 auto;
}

/*====================================================================

 ***********************4-ROOMS********************************

 ====================================================================*/

/* .content-room img {

  filter: brightness(1.2);

} */

.pricing {

  padding: 40px 2%;

}

.pricing-1 {

  padding: 0 8%;

}

.div-price {

  padding: 10px 0 10px;

}

.div-price h4 {

  margin: 0 auto;

  font-size: 1.3rem;

}

.div-price p {

  margin: 0 auto;

}

/* ACTIVITIES */

.content-activities .wp-block-column img {

  pointer-events: none;

}

/*====================================================================

 ***********************5-CONTANT FORM********************************

 ====================================================================*/

.content-contact {

  padding: 70px 5%;

}

.content-contact h3 {

  color: var(--dark-blue);

}



.contact-form {

  width: 95%;

  text-align: center;

  padding: 10px;

  margin: 0 auto;

  max-width: 450px;

  min-height: 300px;

}



.contact-form-div {

  margin: 10px;

  padding: 13px 8px;

  background-color: var(--grey);footer

  border-radius: 5px;

}

.contact-form-div h2 {

  color: var(--white);

}

.contact-form input,

.contact-form select,

.contact-form textarea {

  width: 90%;

  font-size: 1rem;

  padding: 5px;

  margin: 5px auto;

}



textarea {

  resize: vertical;

  min-height: 200px;

}



#response {

  text-align: center;

}

/*========================================================================================================================

  ************************************************ 6-FOOTER****************************************************************

  ========================================================================================================================*/

.footer {

  background-image: url("https://aquaoutback.com/img/waves.png");

  background-size: 1000px;

  background-position: bottom;

  background-repeat: repeat-x;

  text-align: center;

  /* margin-top: 200px; */

}

.footer-waves {

  width: 100%;

  height: auto;

}

.div-footer {

  padding: 30px 0 120px;

}

.div-footer-wrapper {
	display: flex;
	justify-content: space-evenly;
}

@media only screen and (max-width: 768px) {
  .div-footer-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 300px;
  }
}

.social-footer {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    min-width: 200px;
}
.social-footer img {
	height: 50px;
	width: 50px;
}

.div-footer a {

  font-size: 1rem;

  color: var(--dark-blue);

  margin: 0;

  transition: 0.2s all ease;

}

.div-footer a:hover {

  color: var(--orange);

}

.div-footer h4 {

  font-style: italic;

  margin: 30px auto;

  color: var(--coral);

  font-family: serif;

}

/*========================================================================================================================

***********************************************************************************************************************

 *************************************** 16- MEDIA QUERIES*************************************************************

***********************************************************************************************************************

 ========================================================================================================================*/



/**************************************************************** MIN-WIDTH:992PX *****************************************************/

@media (min-width: 1200px) {

  .div-instagram {

    padding: 50px 20%;

  }

}



/**************************************************************** MIN-WIDTH:992PX *****************************************************/

@media (min-width: 992px) {

  .content {

    padding-top: 117px;

  }

  nav .sub-menu .menu-item a {

    padding: 5px 20px;

  }

  nav .sub-menu {

    padding: 10px 5px;

  }

  nav .menu {

    transform: translateY(10px);

  }

  nav .menu-item:hover .sub-menu,

  nav .menu-item:focus .sub-menu {

    transition: all 0.3s ease;

    transform: translateY(0px);

    opacity: 1;

    visibility: visible;

  }

  nav .menu-item:hover .plus:after,

  nav .menu-item:focus .plus:after {

    transform: translate(-50%, -50%) rotate(0deg);

  }

}



/************************************************ MAX WIDTH 1100PX **************************************************************/

@media (max-width: 1100px) {

  .homepage-banner img,

  .banner img {

    width: auto;

    height:400px;

    text-align: center;

    margin: 0 auto;

    max-width: none;

    transform: translateX(-24%);

  }

  .homepage-banner img {

    height: 500px;

  }

  nav .nav-menu {

    width: 50%;

  }

}

/************************************************ MAX WIDTH 1400PX **************************************************************/

@media (max-width: 1400px) {

  .content {

    padding-top: 100px;

  }



  nav .nav-logo {

    padding: 16px 20px 10px;

  }

  nav .nav-aqua-logo {

    width: 300px;

  }

  nav .menu-item a,

  nav .sub-menu h6.menu-item {

    font-size: 0.8rem;

  }

  nav .nav-menu {

    padding: 5px 10px;

  }

}



/**************************************************************** MAX-WIDTH:992PX *****************************************************/

@media (max-width: 991px) {

  nav .nav-logo {

    padding: 15px 40px;

  }



  nav .nav-aqua-logo {

    padding: 0;

  }

  nav .nav-menu {

    position: fixed;

    right: -300px;

    visibility: hidden;

    width: 300px;

    height: 100%;

    top: 0;

    overflow-y: auto;

    background-color: var(--white);

    z-index: 1000;

    padding: 15px 0;

  }

  nav .nav-menu {

    margin: 0;

  }



  nav .nav-menu.open {

    transition: all 0.5s ease;

    visibility: visible;

    right: 0px;

  }

  nav .menu {

    display: block;

  }

  nav .menu .menu-item {

    display: block;

    margin: 0;

  }

  nav .menu .menu-item a {

    margin: 0 auto;

  }

  nav .menu .menu-item.menu-item-has-children a {

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

  nav .menu-item a {

    padding: 18px 20px;

    border-bottom: 1px solid var(--dark-blue);

    text-align: left;

  }

  nav .sub-menu h6.menu-item {

    padding: 6px 18px 0px;

    border-bottom: none;

  }

  nav .menu > .menu-item:first-child a {

    border-top: 1px solid (--dark-blue);

  }

  nav .menu .sub-menu .menu-item a {

    border-top: none;

  }

  nav .menu-item-has-children.nav-active > a .plus:after {

    transform: translate(-50%, -50%) rotate(0deg);

  }

  nav .open-nav-menu {

    display: inline-block;

  }

  nav .menu .sub-menu {

    width: 100%;

    position: relative;

    opacity: 1;

    visibility: visible;

    border: none;

    box-shadow: none;

    transform: translateY(0px);

    padding: 0;

    left: auto;

    top: auto;

    max-height: 0;

    overflow: hidden;

  }

  nav .menu .sub-menu .menu-item a {

    padding: 12px 28px;

    font-size: 0.85rem;

    opacity: 0.9;

    font-style: italic;

  }

  nav .close-nav-menu {

    display: flex;

  }

}



@media (max-width: 485px) {

  .homepage-banner img {

    height: 600px;

  }

}



/************************************************ MAX WIDTH 768PX: NAVBAR **************************************************************/

@media (max-width: 768px) {

  .content {

    padding-top: 95px;

  }

  nav .nav-aqua-logo {

    padding: 5px;

    height: 80px;

    width: auto;

  }

  nav .nav-yellow {

    padding: 0 10px;

    font-size: 0.8rem;

  }

  nav .nav-yellow .nav-right {

    right: 8px;

  }



  nav .nav-btns {

    position: relative;

    right: 0;

    margin-top: 5px;

  }



  nav .nav-logo-div {

    display: inline-block;

    width: auto;

  }



  nav .nav-btns div {

    padding-top: 10px;

  }

  nav .nav-btns {

    display: none;

  }



  nav .nav-logo {

    padding: 10px;

    padding-left: 0;

    padding-bottom: 7px;

    width: 100%;

  }



  nav .nav-logo-div {

    display: inline-block;

  }

  .banner-simple h1 {

    font-size: 2rem;

  }

  /* page content */

  hr {

    margin: none;

  }

  /* gallery */

  .page-content hr {

    text-align: left;

    margin: 0 0 20px;

    width: 80%;

  }

  .content-gallery .img-wrap {

    width: 120px;

    margin: 10px;

  }

  /* div home */

  .div-activities h2,

  .div-activities hr,

  .div-rooms h2,

  .div-activities hr,

  .div-home h2 {

    text-align: center;

  }

  .div-rooms h2,

  .div-activities h2 {

    font-size: 1.6rem;

  }

  hr {

    width: 90%;

    margin: 0 auto 30px;

  }

  .activities-content h3 {

    font-size: 1.1rem;

  }

  .contact-form {

    width: 100%;

    padding: 0;

  }

  .div-blog-home h4{

    margin:20px auto;

    font-size: 1.6rem;

  }

}

/************************************************ MAX WIDTH 590PX **************************************************************/

@media (max-width: 590px) {

  /* banner */

  .banner .div-text {

    padding: 50px;

  }

}

/************************************************ MAX WIDTH 380PX **************************************************************/

@media (max-width: 380px) {

  nav .open-nav-menu {

    right: -5px;

  }

}



/************************************************ MAX WIDTH 320PX **************************************************************/

@media (max-width: 320px) {

  nav .nav-aqua-logo {

    height: 60px;

  }

  nav .open-nav-menu {

    right: -5px;

    top: 40px;

  }

  nav .close-nav-menu img {

    right: 28px;

    top: 30px;

  }

  .content {

    padding-top: 80px;

  }

}

/* wordpress */

.wp-block-columns {

  display: flex;

}



.wp-block-column {

  flex: 1;

}

.wp-block-video video {

  width: 100%;

}



/* Animations */

@keyframes nav-load {

  0% {

    transform: translateY(-100%);

  }

  100% {

    transform: translateY(0);

  }

}



@keyframes content-load {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 100;

  }

}



/*========================================================================================================================

 ****************************************** END OF CODE *********************************************************

 ========================================================================================================================*/