/*
Theme Name: Mirabilis Suites
Theme URI: https://example.com/mirabilis-studios/
Author: Cascade
Author URI: https://example.com/
Description: A modern and v isually appealing WordPress theme for rental rooms in Vasiliki, Lefkada, Greece.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later 
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mirabilis-studios
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* This file is intentionally left mostly empty. Styles are loaded via Tailwind CSS */
/* HTML: <div class="trapezoid"></div> */

/* COLORS */
:root {
  --darkblack: #231f20;
  --graybrown: #7b6149;
  --verylightbrown: #bda288;
  --lightbrown: #ffdfbd;
  --mediumbrown: #a16032;
  --bluegreenlight: #578f9a;
  --bluegreenverylight: #bcdfda;
  --bluegreen: #2e575f;
  --white: #ffffff;
  --swiper-navigation-color: #fff;

  --swiper-pagination-bullet-width: 12px;
  --swiper-pagination-bullet-height: 12px;
  --swiper-pagination-color: #578f9a;
}

.text-bluegreen {
  color: var(--bluegreen);
}

.text-bluegreenlight {
  color: var(--bluegreenlight);
}

.bg-bluegreenlight {
  background-color: var(--bluegreenlight);
}

.bg-bluegreenverylight {
  background-color: var(--bluegreenverylight);
}

.text-darkblack {
  color: var(--darkblack);
}

.text-graybrown {
  color: var(--graybrown);
}

.bg-darkblack {
  background-color: var(--darkblack);
}

.bg-graybrown {
  background-color: var(--graybrown);
}

.bg-verylightbrown {
  background-color: var(--verylightbrown);
}

.trapezoid {
  position: fixed;
  top: 0px;
  --p: 50px; /* control the shape (can be percentage) */
  height: 140px;
  aspect-ratio: 3/2;
  clip-path: polygon(var(--p) 100%, calc(100% - var(--p)) 100%, 100% 0, 0 0);
  background: var(--darkblack);
}

.custom-logo-link {
  z-index: 100;
  position: absolute;
  top: 0px;
  width: 130px;
  height: 130px;
}

.herodivider::before {
  content: "";
  position: absolute;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw;
  background-size: 100% 90px;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;
  transform: rotate(180deg) scaleX(-1);
  background-color: #ffffff;
  width: 100%;
  mask-image: url("assets/images/hero-separator.svg");
  -webkit-mask-image: url("assets/images/hero-separator.svg"); 

  mask-size: 100% 100px; /* Ensure it takes full width */
  -webkit-mask-size: 100% 100px;

  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;

  mask-position: bottom;
  -webkit-mask-position: bottom;
}

.section-header {
  font-family: 'Carattere', sans-serif;
  font-size: 36pt;
  font-weight: 200;
  color: var(--bluegreenlight);
}

.room-header {
  color: var(--bluegreenlight);
}

.main-navigation {
  color: #fff;
  width: 100%;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}

.main-menu-ul li:nth-child(3) {
  padding-right: 250px;
}

.section-with-light-bg {
  background-color: var(--lightbrown);
}

.section-with-light-bg .section-header {
  color: var(--mediumbrown);
}

.section-with-dark-bg {
  background-color: var(--darkblack);
}

.section-with-dark-bg .section-header {
  color: var(--white);
}

.masthead-header {
  /* background-color: #231f20cc; */
}

.pagebtn {
  background-color: var(--bluegreenlight);
}

.pagebtn-dark {
  background-color: var(--darkblack);
}

.pagebtn-dark:hover {
  background-color: var(--bluegreenlight);
}

.swiper-button-next, .swiper-button-prev {
  opacity: 0.57;
}

.site-footer {
  background-color: var(--darkblack);
}

.footerlogo {
  width: 100px; 
  height: 100px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#mobile-primary-menu .menu-item {
  color: #fff;
}