/*  GOOGLE FONT
      All fonts vary.  Best to use fonts intended for production when styling things. */
body {
  background-repeat: no-repeat;
  background-image: url("https://qr.mdkuafor.com/leaf-min.jpg");  
  background-size: cover;  
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  color: white;
  margin: 0;
  padding-top: 80px;
  padding-left: 30px;
  padding-right: 30px;
}
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;1,400&display=swap");

  /*  USEFUL . RESPONSIVE . CUSTOMIZABLE . BUTTONS
      Am tired of making buttons.  This one works for most of my button needs.
     
    Buttons have a left panel to display background images.  The SPAN tag is an overlay
    for the left panel.  Active state of button disables pointer events. 
    Used transform scale to simulate a simple button press effect.

Veratile.  Play with sizing and styles.
  
*/
a{
text-decoration:none;
}
 

:root {
  /*  BUTTON PARENT CONTAINER --> For demo. */
  --button-container-max-width: 600px;
  
    /*  BUTTON MAX WIDTH - % of parent container width or fixed pixels 
        Adjust other variable - i.e. width/height/font-size - so other shit fits. lol */
  --button-max-width: 100%;

  /*  BUTTON DEFAULT MIN-HEIGHT i.e."Mobile First" */
  --button-min-height: 65px;
  /*  BUTTON LARGE SCREEN MIN-HEIGHT Add additional breakpoints as needed. */
  --button-large-screen-min-height: 100px;
  /*  LEFT BUTTON PANEL DEFAULT WIDTH - i.e."Mobile First" */
  --button-div-width: 90px;
  /*  LEFT BUTTON PANEL LARGE SCREEN WIDTH */
  --button-div-large-screen-width: 163px;


  --button-text-font: Montserrat;
  --button-text-color: rgba(255, 255, 255, 1);
  /*  BUTTON BRIGHTNESS - Easier on the eyes */
  --button-brightness: 0.95;
  --button-border-color: rgba(255, 255, 255, 0.45);
  --button-border-width: 1px;
  --button-background-color: rgba(60, 59, 110, 1);
  --button-background-hover-color: rgba(178, 34, 52, 1);
  --button-background-active-color: rgba(137, 11, 25, 1);

  /*  LEFT BUTTON PANEL STYLES 
       The DIV in BUTTON HTML mark-up is the left button panel.
       The SPAN element is the overlay for the left panel. */

  --button-div-background-color: rgba(178, 34, 52, 1);
  --button-div-background-hover-color: rgba(60, 59, 110, 1);
  --button-div-border-color: rgba(255, 255, 255, 1);
  /*  RIGHT BORDER WIDTH OF DIV  
        Set to 0px for demo.  */
  --button-div-right-border-width: 0px;
  
      /*  LEFT BUTTON PANEL -- SPAN OVERLAY 
           SPAN background color set to transparent when animated */
    --button-span-background-color: rgba(0, 0, 0, 0.25);
}

/* BUTTON PARENT CONTAINER 
   Mark-Up for demo. */

.button-container {
  width: 100%;
  max-width: var(--button-container-max-width);
  margin: 0 auto;
}

/* BUTTON MARK-UP 
   Replace "unique-button-class" to whatever.  
   HINT: Search and replace. 
   Don't forget! - If you change the button class name in the CSS, 
   change the button class name in the HTML too.
   lol */

.unique-button-class {
  position: relative;
  width: 100%;
  max-width: var(--button-max-width);
  min-height: var(--button-min-height);
  margin: 0;
  border: 0;
  padding: 0;
  padding:10px;
  border: var(--button-border-width) solid var(--button-border-color);
  padding-left: calc(var(--button-div-width) + 25px);
  background-color: #2e2d3e;
  color: var(--button-font-color);
  filter: brightness(var(--button-brightness));
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 300ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.unique-button-class:hover {
  background-color: #565660;
}

/* BUTTON FOCUS AND ACTIVE STATES
   Disabled pointer events and brought down opacity
   on active button. */

.unique-button-class:focus,
.unique-button-class.active {
  background-color: var(--button-background-active-color);
  opacity: 0.9;
  pointer-events: none;
}

/* BUTTON MEDIA QUERY FOR LARGE SCREENS -->  AS NEEDED  */

@media only screen and (min-width: 980px) {
  .unique-button-class {
    min-height: var(--button-large-screen-min-height);
    padding-left: calc(var(--button-div-large-screen-width) + 25px);
  }
}



.unique-button-class div {
  width: var(--button-div-width);
  position: absolute;
  display: grid;
  justify-content: center;
  align-content: center;
  text-align: center;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  background-color: #a77b00;
  border-right: var(--button-div-right-border-width) solid
    var(--button-div-border-color);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
/* SPAN IN HTML IS AN OVERLAY FOR BACKGROUND IMAGE  */
.unique-button-class span {
  background: #a77b00 ;
  width: 100%;
  height: 100%;
  position: absolute;
  display: grid;
  justify-content: center;
  align-content: center;
  text-align: center;
}

@media only screen and (min-width: 980px) {
  .unique-button-class div {
    width: var(--button-div-large-screen-width);
  }
  .unique-button-class span {
    font-size: 2vw;
  }
}

/* BUTTON DIV HOVER EFFECT
   This is the left panel  */

.unique-button-class:hover div,
.unique-button-class:focus div,
.unique-button-class.active div {
  background-color: white;
  transition: background-color 300ms ease;
}
/* BUTTON SPAN ANIMATED SPIN HOVER EFFECT
   This is the left panel with class "spin"  */

.unique-button-class.spin:hover div span,
.unique-button-class.spin:focus div span,
.unique-button-class.spin.active div span {
  animation: spin 3s infinite;
  background:transparent;
}

/* SPIN ANIMATION */
@keyframes spin {
  0% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
  100% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

/* BUTTON PRESS EFFECT
   Transform scale to create 
   a button press effect when clicked. */

.unique-button-class:active {
  transform: scale(0.98);
}

/* BUTTON TYPOGRAPHY  */
.unique-button-class div {
  font-size: 30px;
  letter-spacing: 2px;
}

.unique-button-class h2,
.unique-button-class h3 {
  line-height: 1;
  margin: 0;
  font-family: var(--button-text-font);
  color: white;
}
.unique-button-class h2 {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 3px;
}
.unique-button-class h3 {
  font-size: 15px;
  font-weight: 400;
}

/* BUTTON TYPOGRAPHY MEDIA QUERY */

@media only screen and (min-width: 980px) {
  .unique-button-class h2 {
    font-size: calc(100% + 3 * (100vw - 1000px) / 1000);
    letter-spacing: 3px;
  }
  .unique-button-class h3 {
    font-size: calc(90% + 2 * (100vw - 1000px) / 1000);
    letter-spacing: 1px;
  }
}

/* DEMO PAGE STUFF */


.unique-button-class {
  margin-bottom: 30px;
}
h2,
h3,
div {
  text-shadow: 2px 0 0 rgba(0, 0, 0, 0.5), 0 2px 0 rgba(0, 0, 0, 0.5),
    -2px 0 0 rgba(0, 0, 0, 0.5), 0 -2px 0 rgba(0, 0, 0, 0.5);
  text-rendering: optimizeLegibility;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-fon-smoothing: grayscale;
}

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");

$brand-accent: #a77b00;
$utility-dark-grey: #a77b00;



.scroll {
  height: 1000px;
  p {
    color: #a77b00;
    font-size: 1.5rem;
  }
}

.btn.book-now {
  background: #a77b00;
  bottom: 0;
  border-radius: 0;
  color: white;
  display:inline-block;
  font-size: 1rem;
  height: 50px;
  line-height: 50px;
  position: fixed;
  // right: 0;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  // -moz-transform:rotate(-90deg);
  // -ms-transform:rotate(-90deg);
  // -o-transform:rotate(-90deg);
  // -webkit-transform:rotate(-90deg);
  transform-origin: bottom right;
  width: 150px;
  /* Hover styles, 
  media queries */
}