/* color palette 

Navy green #4B5759
Navy blue #4D5970
Dark grey #879499
Red #BC7A68
Yellow #FCBA6E
Light grey #E9EBED

#27313d = nice blue color

Fonts - family 

Nav bar - poppins  - font-family: poppins, sans-serif;
Headings - Josefin Sans 
Paragraphs - Lora 

font-family: "Pinyon Script", cursive;


/* 

/* CSS RESET  */
* {
	padding: 0;
	margin: 0; 
	box-sizing: border-box;
}

[class*=grid-][class*=-equalHeight]>[class*=col] {
  display:block;
  /* This overrides a quirk where contents inside of equal height containers become columns themselves */
}

 .overflow-x {
    overflow-x: hidden;
  }

img {  max-width: 100%; height: auto;  }

/* Override default gridlex padding */ 
[class*=col] { padding: 0; }
[class*=grid] { margin: 0; }

html {
  scroll-behavior: smooth;
}

section { position: relative;}

.gallery [class*="col-"] {
  padding: 0.5%;
}


/*-------------------------------- Re-usable Utility classes  -----------------------------------------*/

/* Padding Utility Classes */

.padded-sm { padding: 2.5%; }
.padded    { padding: 5%;   }
.padded-lg { padding: 10%; }

.padded-7  { padding: 7%;   }
.padded-lg { padding: 10%;  }
.padded-8 {  padding: 8%;  }

.padded-05 { padding: 0.5rem; }
.padded-07 { padding: 0.7rem; }
.padded-1, 
.grid-padded-1  { padding: 1rem;  }
.padded-2, 
.grid-padded-2  { padding: 2rem;  }
.padded-10      { padding: 10%;    }

.padded-t  { padding-top: 5%;    }
.padded-b  { padding-bottom: 5%; }
.padded-l  { padding-left: 5%;   }
.padded-r  { padding-right: 5%;  }

.padded-t-10  { padding-top: 10%;    }
.padded-b-10  { padding-bottom: 10%; }
.padded-l-10  { padding-left: 10%;   }
.padded-r-10  { padding-right: 10%;  }

.padded-tb  { padding-top: 5%; padding-bottom: 5%; }
.padded-lr  { padding-left: 5%; padding-right: 5%; }
.padded-lr-2  { padding-left: 2rem; padding-right: 2rem; }

.padded-t-1 { padding-top: 1rem; }
.padded-b-1 { padding-bottom: 1rem; }
.padded-l-1 { padding-left: 1rem; }
.padded-r-1 { padding-right: 1rem; }

.padded-t-2 { padding-top: 2rem; }
.padded-b-2 { padding-bottom: 2rem; }
.padded-l-2 { padding-left: 2rem; }
.padded-r-2 { padding-right: 2rem; }

.padded-t-3 { padding-top: 3rem; }
.padded-b-3 { padding-bottom: 3rem; }
.padded-l-3 { padding-left: 3rem; }
.padded-r-3 { padding-right: 3rem; }

.padded-b-5 { padding-bottom: 5%;}

.bob .padded-0 { padding: 0; }
.padded-t-0 { padding-top: 0; }
.bob .padded-b-0 { padding-bottom: 0; }
.padded-l-0 { padding-left: 0; }
.padded-r-0 { padding-right: 0; }


/* Margin Utility Classes */ 

.margin-t { margin-top: 5%; }
.margin-b { margin-bottom: 5%; }
.margin-l { margin-left: 5%; }
.margin-r { margin-right: 5%; }

.margin-t-1 { margin-top: 1rem; }
.margin-b-1 { margin-bottom: 1rem; }
.margin-l-1 { margin-left: 1rem; }
.margin-r-1 { margin-right: 1rem; }

.margin-t-2 { margin-top: 2rem; }
.margin-b-2 { margin-bottom: 2rem; }
.margin-l-2 { margin-left: 2rem; }
.margin-r-2 { margin-right: 2rem; }

.margin-t-3 {margin-top: 3rem; }

.margin-t-0 { margin-top: 0; }
.margin-b-0 { margin-bottom: 0; }
.margin-l-0 { margin-left: 0; }
.margin-r-0 { margin-right: 0; }

.margin-tb { margin-top: 5%; margin-bottom: 5%; }
.margin-lr { margin-left: 5%; margin-right: 5%; }

.flex-end { justify-content: flex-end; }
.jusitfy { text-align: justify;}

.z-0 { position: relative; z-index: 0; }
.z-1 { position: relative; z-index: 1; }
.z-2 { position: relative; z-index: 2; }
.z-3 { position: relative; z-index: 3; }


/* min height  */

.tall-25 { min-height: 25vh; }
.tall-35 { min-height: 35vh; }
.tall-40 { min-height: 30vh; }
.tall-50 { min-height: 50vh; }
.tall-60 { min-height: 60vh; }
.tall-70 { min-height: 70vh; }
.tall-80 { min-height: 80vh; }
.tall-90 { min-height: 90vh; }
.tall-100 { min-height: 100vh; }

.capped-width-wide      { max-width: 1400px; margin: auto; }
.capped-width           { max-width: 1200px; margin: auto; }
.capped-width-narrow    { max-width: 1000px; margin: auto; }
.capped-width-v-narrow  { max-width: 700px;  margin: auto; }


/* text and background colors  */

/* .bg-light    { background-color: #ececec;; }
.bg-navygreen { background-color: #4B5759; }
.bg-dark { background-color: #AFBCC5; } */
/* .bg-dark { background-color: #27313d; } */
/* .bg-dark-grey { background-color: #879499; }
.bg-red { background-color: #BC7A68; }
.bg-yellow { background-color: #fecf68; }
.bg-featured { background-color: #789bab;} */

.bg-navygreen { background-color: #39504a; }
.bg-navyblue {background-color: #354567; }
.bg-beige { background-color: #f8ecdb; }
.bg-lightblue { background-color: #9DB8D6; }
.bg-blue { background-color: #5C7899; }
.bg-light { background-color: #f6f3ed; }

.text-yellow { color: #fecf68; } 
.text-red    { color: #BC7A68;  } 
.text-light { color: #f7f5f3;  }
.text-green { color: #4B5759; }
.text-featured { color: #789bab;}
.text-navygreen { color: #39504a; }
.text-beige { color: #f8ecdb; }
.text-navyblue { color: #354567; }
.text-lightblue { color: #9DB8D6; }
.text-orange { color: #C06A4A; }
.text-brown { color: #50342a; }
.text-white {color: #fff; }


/*------------------------ General typography & universal styles  ------------------------------------*/

.left   { text-align: left; }
.center { text-align: center; }
.right  { text-align: right; }

body { 
    font-family: 'Manrope', serif;  /* Add your font here */ 
    font-weight: 400;
    overflow-x: hidden;
}


h1, h2, h3, h4, h5, h6 {
    font-family: "Unbounded", sans-serif;
    line-height: 1.1; 
    font-weight: 500;
    margin-bottom: 1.2rem;
}

h2 { font-size: 2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.6rem; }
h5 { font-size: 1.3rem; }
h6 { font-size: 1.2rem; }

p, li {
  line-height: 1.6; 
  margin-bottom: 1rem;
  font-family: 'Manrope', serif;  /* Add your font here */ 
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

ul { margin-left: 1rem; }
li { padding-left: .5rem;}
.italic { font-style: italic; }

h1:last-child, 
h2:last-child, 
h3:last-child, 
h4:last-child, 
h5:last-child, 
h6:last-child, 
p:last-child {
    margin-bottom: 0;
}

a {
  color: inherit;
}

.text-decoration-none {
  text-decoration: none;
}



.emphasis       { font-size: 1.2rem; }
.subtle         { opacity: 0.8;     }
.v-subtle       { opacity: 0.5;     }
.subtitle       { font-size: 0.8rem; }
.bold           { font-weight: bold; }
.italic         { font-style: italic; }

.text-left {text-align: left;}

.text-xs   { font-size: 1rem; line-height: 0.9; } 
.text-m   { font-size: 3.1rem; line-height: 0.9; } 
.text-l   { font-size: 4.1vw; line-height: 1;}
.text-xl  { font-size: 5.5vw;  }
.text-xxl { font-size: 10vw; }

.text-hotel { font-size: 2.8rem; line-height: 0.9;}

.text-w-600 { font-weight: 600; }
.text-w-700 { font-weight: 700; }
.text-w-800 { font-weight: 800; }

.main-font  { font-family: "Unbounded", sans-serif; }
.second-font { 
  font-family: 'Manrope', serif; 
  font-size: 28px;
  line-height: 3rem;
 }
.script-font { font-family: "Pinyon Script", cursive; }

.text-hightlight { font-family: "Unbounded", sans-serif; }

.hotel-name {
  position: relative;
  
}

.hotel-name p {
position: absolute;
bottom: 1rem;
text-align: center;
width: 100%;
}
.banner-title {
  line-height: 0.8;
  font-size: 8vw;
  margin: 0;
}

.mini-banner {
  min-height: 60vh;
  padding: 10%;
}


.banner-subtitle { 
  position: relative;
  line-height: 1;
  top: 0.5rem;
  font-size: 2.5rem;
}

.banner-subtitle-top {
  position: relative;
  bottom: -3rem;
  font-size: 2.5rem;
  left: 15rem;

}

.uppercase { text-transform: uppercase;}
.letter-spacing { letter-spacing: 0.2rem;}
.line-height { line-height: 1;}
.line-height-p {line-height: 1.9; }

.fas {
  display: block;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 3rem;
}

.location-icon{
  color: blue;
}

/* Unique text + line styles  */
.text-in-line {
  text-align: center;
  line-height: 0.5;
}

.text-in-line span {
  display: inline-block;
  position: relative;  
}

.text-in-line span:before,
.text-in-line span:after {
  content: "";
  position: absolute;
  border-bottom: 2px solid;
  top: 50%;
  width: 50vw;
}
.text-in-line span:before {
  right: 100%;
  margin-right: 15px;
}
.text-in-line span:after {
  left: 100%;
  margin-left: 15px;
}
.border-bottom-wide {
  border-bottom: 2px solid;
  margin-right: -45%;
  position: relative;
  z-index: 2;
}






/* Aspect Ratios with percentage unit are only effective if the element (the <div>) is inside a parent container or column, it can't be applied to the column itself. */

/* Aspect Ratio  */

a.bg-image { display: block;}

.landscape-wide{ padding-bottom: 45% ; }
.landscape     { padding-bottom: 66% ; }
.portrait-tall { padding-bottom: 155%; }
.portrait      { padding-bottom: 125%; }
.square        { padding-bottom: 100%; }


/* Background Position */
.bg-pos-t { background-position: top; }
.bg-pos-b { background-position: bottom; }
.bg-pos-l { background-position: left; }
.bg-pos-r { background-position: right; }

.bg-pos-50-20 {
  background-position: 50% 20%; 
}

.bg-grayscale {
  filter: grayscale(1);
  -webkit-filter: grayscale(1); 
  filter: grayscale(100%); 
}

.bg-grayscale {
  filter: grayscale(1);
  -webkit-filter: grayscale(1); 
  filter: grayscale(100%); 
}


/* ------------ Specific Images & Elements   ----------------------- */

.gallery > [class*=col] {
  border: 0.5rem solid white;
}

.gallery > [class*=col] [class*=col] + [class*=col] {
  border-top: 1rem solid white;
}





/* background - images  */

.bg-fixed { background-attachment: fixed;;}

.bg-image { 
    background-color: #E9EBED; /* set a fall-back color while images are loading */
    background-size: cover;
    background-position: center; 
    background-image: url('/images/placeholder.jpg');
    background-repeat: no-repeat;
}

.full-height-bg .bg-image{
  min-height: 100%;
}

.box-img {
  background-size: cover;
     -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
  background-position: center;
  min-height:45vh;
}

.bg-overlay::after {
  z-index: 1;
  content: ""; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
}

.bg-overlay > * {
  z-index: 2;
  position: relative;
}

.bg-overlay-gradient::after { 
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
} 

.bg-overlay-featured::after { 
  background-color: var(--featured);
  opacity: 0.5;
} 

.relative {
  overflow: hidden;
  position: relative;
}

.absolute-vertical-text {
  position: absolute;
  top: 1.5rem;
  right: 1rem;
  writing-mode: vertical-rl;
}

.absolute-center {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  text-align: center;
}

.absolute-date {
  position: absolute;
  bottom: 2rem;
  left: 1rem; 

}

.background-video {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}


/*  All bg images */

.bg-highlights { 
  background-color: #E9EBED; /* set a fall-back color while images are loading */
  background-size: cover;
  background-position: center; 
  background-image: url('/images/placeholder2.jpg');
  background-repeat: no-repeat;
}


.bg-contact {
  background-image: url('/images/placeholder.jpg');
  background-size: cover;
  background-position: 50% 64%; 
}

.bg-homebanner {
  background-image: url('/images/iceland.jpg');
  background-position: 50% 64%; 
}


.bg-mountainmoments {
  background-image: url('/images/placeholder.jpg');
}

.bg-yachtmoments {
  background-image: url('/images/placeholder2.jpg');
}

.bg-first-banner {
  background-image: url('/images/Copyright_Karen_9W3A8114.jpg');
}

.bg-second-banner {
  background-image: url('/images/gvgolf.JPG');
}

.bg-itinerary {
  background-image: url('/images/pinehurst-highlight.jpeg');
}

.bg-guides {
  background-image: url('/images/van-trip.jpg');
}

.bg-explore {
  background-image: url('/images/placeholder.jpg');
}

.bg-card1 {
  background-image: url('/images/placeholder.jpg');
} 

.bg-exploreslider {
  background-image: url('/images/placeholder.jpg');
}

.bg-coastal {
  background-image: url('/images/coastal-background.jpg');
}

.bg-highlight-1 {
  background-image: url('/images/iceland.jpg');
}

.bg-banner-story {
  background-image: url('/images/iceland.jpg');
}

.bg-exploring {
  background-image: url('/images/blackdunes.jpg');
}

.bg-friends {
  background-image: url('/images/Copyright_Karen_9W3A8114.jpg');
}

.bg-hiking {
  background-image: url('/images/Copyright_Karen_9W3A6347.JPG');
}

.bg-golf {
  background-image: url('/images/brautarholt-golf.jpg');
}

.bg-golfiniceland {
  background-image: url('/images/brautarholt-golf.jpg');
}

.bg-partner {
  background-image: url('/images/brautarholt-golf.jpg');
}

.bg-founders {
  background-image: url('/images/Instagram_Karen_AW0I8296.jpg');
}

.bg-daytripbanner {
  background-image: url('/images/gvgolf.JPG');
}

.bg-prices {
  background-image: url('/images/iceland.jpg');
   background-color: #E9EBED; /* set a fall-back color while images are loading */
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
}


.itinerary-hero {
  width: 100%;
  height: 30rem;      /* tweak */
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  margin-bottom: 1rem;
}



.bg-img-1 {
  background-image: url('/images/placeholder.jpg');
}

.bg-img-2 {
  background-image: url('/images/placeholder.jpg');
}

.bg-img-3 {
  background-image: url('/images/placeholder.jpg');
}

.bg-img-4 {
  background-image: url('/images/placeholder.jpg');
}

.bg-img-5 {
  background-image: url('/images/placeholder.jpg');
}


.bg-img-6 {
  background-image: url('/images/placeholder.jpg');
}






/* header and footer section  */
header {  padding: 1% 5%; }

nav a {
  padding: 0.25rem 0.5rem;
  display: inline-block;
  text-decoration: none;
  color: #354567;
  font-family: manrope;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
}

nav a:hover {
color: #fecf68;
border-bottom: 1px solid #fecf68;
transition: 0.5s;
}

footer a:hover {
  /* color: #fecf68; */
  transition: 0.5s;
  }

footer a {
  text-decoration: none;
  color: #fff;
}

.built a {
  color: #4D5970;
  padding: 1rem; 
  font-size: 12px;
}

p a {
  color: #45443E;
}

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

.show-on-scroll {
display: none;
}

/* Miscelaneous elements  */

.border-bottom-wide {
  border-bottom: 2px solid;
  margin-right: -45%;
  position: relative;
  z-index: 2;
}

.border-bottom-wide-left {
  border-bottom: 2px solid;
  margin-left: -45%;
  position: relative;
  z-index: 2;
}

.fixed {
  background-attachment: fixed;
}


hr.short {
  border: 1px solid #fff;
  width: 2rem;
  margin: 1rem 0;
}

hr.short.center {
  margin:auto;
  margin: 1rem auto;
}

.bump-left {
  margin-left: -10vw;
  position: relative; 
}
.bump-right {
  margin-right: -10vw;
  position: relative; 
}

.bump-up {
  margin-top: -10vh;
  position: relative; 
}

.text-overflow {
  white-space: nowrap;
  max-width: 70vw;
}

.columns-3 {
  column-count: 3;
  column-gap: 5%;
}

.columns-2 {
  column-count: 2;
  column-gap: 5%;
}


.testimonial{
  position: relative; /* you already have .relative, just ensuring */
}

.quote-mark{
  position: absolute;
  top: -1rem;     /* tweak */
  left: -1rem;    /* tweak */
  font-size: 12rem;  /* big quote */
  line-height: 1;
  z-index: 0;       /* behind text */
  font-weight: bold;
}


.northern-section p:last-child,
.northern-section h2:last-child{
  margin-bottom: 0;   /* or .5rem */
}


/* buttons */

.button {
  color: #f8ecdb;
  text-decoration: none;
  background-color: #39504a;
  border: 2px solid #39504a;
  padding: 0.3rem 1.7rem 0.3rem 1.7rem;
}

.main-button {   
    border: 1px solid #5C7899;
    border-radius: 1rem;
    background-color: #5C7899;
    color: #fff;
    text-align: center;
    padding: .75rem 1.5rem;
    text-decoration: none;
    display: inline-block;
  }

  .second-button {   
    border: 1px solid #39504a;
    border-radius: 1rem;
    background-color: #fff;
    color: #39504a;
    text-align: center;
    padding: .75rem 1.5rem;
    text-decoration: none;
    display: inline-block;
  }

 
  /*  cards on day trip page */

  .iceland-cards{
  background-image: url("/images/Copyright_Karen_9W3A6347.JPG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 5rem 2rem;     /* space around the whole section */
  position: relative;
  height: 70vh;
  min-height: 50vh;
   width: 100vw;            /* full bleed edge-to-edge */
  margin-left: calc(50% - 50vw);  /* breaks out of any page container */
  margin-right: calc(50% - 50vw);

  padding: 0;              /* remove side padding so image hits edges */
  position: relative;
  display: flex;
  align-items: center;     /* center the cards vertically */
}

.iceland-cards__overlay{
  padding: 3rem 2rem;
  border-radius: 12px;
  width: 100%;
}

.iceland-cards__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.iceland-card{
  background: white;
  padding: 7rem 2rem;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  text-align: center;
}

.iceland-card h3{
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  color: #1c2a44;  /* navy vibe */
}

.iceland-card p{
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #333;
}
  


/* font awesome  */


.shuttle-badge {
  font-size: 5rem;
  color: #fff;
  display: block;        /* makes it easier to center */
  margin: 0 auto 1rem;   /* center + space below */
  line-height: 1;
}




/* Back to top  */

.back-to-top a {
  padding: 0.3em 0.3rem 0.1rem 0.3rem;
  display: block;
  color: #fff;
  text-decoration: none;
  text-align: right;
  line-height: 1;
  transition: .5s all;
  font-size: 16px;
  transition: 0.5s all;
  border: 1px solid;
}


.back-to-top  {
  position: fixed;
  bottom:1rem;
  right: 1rem;
  z-index: 2;
}

.back-to-top a:hover {
  color: #f8ecdb;
  border-color: #f8ecdb;
}

/* Contact form  */

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
  }

  input,
  textarea {
    border-style: solid;
    border: 2px solid #FCBA6E;
    padding: 0.8em;
    display: block;
    width: 100%;
    font-size: 1rem;
    /* vertical-align: top; */
  }

  input:focus,
  textarea:focus {
    outline: none;
    border-color: #FCBA6E;
  }

  textarea {
    min-height: 6rem;
  }

  input[type="submit"] {
    width: auto;
    display: block;
  }

  /* // Work with me form */

  .enquiry input {
    font-family: lora, serif;
  }


  .floating-input {
    position: relative;
    padding-top: 1rem;
    margin-bottom: 3rem;
  }

  .input-text {
    font-size: 1.1rem;
    line-height: 1.2;
    display: block;
    margin: 0;
    width: 100%;
    border: none;
    border-bottom: 2px solid rgb(95,90,90);
    transition: all 0.5s;
    padding: 0.7rem 0 0.5rem;
    background-color: rgba(0,0,0,0);
  }

  .enquiry textarea {
    resize: none;
  }

  .input-text:focus {
    border-color: #FCBA6E;
  }

  .input-label {
    display: block;
    position: absolute;
    top:0;
    font-family: lora, serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: rgb(90,90,90);
  }

  .input-text:placeholder-shown + .input-label {
    /* While the placeholder is visible, we want to hide the label. */
    visibility: hidden;
    z-index: -1;
  }

  .input-text:not(:placeholder-shown) + .input-label,
  .input-text:focus:not(:placeholder-shown) + .input-label {
    /**
     * While the placeholder is not shown - i.e. the input has a value - we want
     * to animate the label into the floated position.
     */
    visibility: visible;
    z-index: 1;
    opacity: 1;
    /**
     * These props will be added in the demo once variables are defined:
     *
     * transform
     * transition
     *
     * They will give the label floated positioning and styling.
     */
  }

  .vertical-form-text {
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    font-size: 3.3rem;
    position: absolute;
    white-space: nowrap;
  }

  .basics-text {
      left: 20%; 
      bottom: -73%;
  }

  .project-text {
      left: 20%;
      top: 110rem;
  }

  .button-solid {
   background-color: #FCBA6E;
   color: #4D5970;
   border: none;
   padding: 0.8rem 2.5rem 0.6rem;
 }

 .button-solid:hover {
   background-color: #4D5970;
   color: #FCBA6E;
 }

 .contact-page a {
   text-decoration: none;
   color: #FCBA6E;
   font-size: 16px;
   margin-top: 3rem;
 }

/* Contact form ends  */

/* Image gallery section */

.square {
  padding-bottom: 80%;
}

.popup-gallery .bg-image {
  border: 2px solid #f6f3ed;
}



/* This is the slick slider section  */


/* Slider */
.testimonial-slider-container {
  /*   border: 2px solid lightblue; */
    padding: 5%;
    max-width: 900px;
    margin: auto;
  }
  
  .slider-item {
    padding: 1rem;
  /*   border: 2px solid orange; */
  }
  
  /* By setting default to 'display: none' and first child to 'display: block' you cset the image before loading*/
  .slider-item:first-child {
    display: block;
  }
  
  /*  Copy 'rule' from inspect elements debug mode*/
  .slick-next:before {
      content: '→';
  }
  
  /*  Copy 'rule' from inspect elements debug mode*/
  .slick-next:before, .slick-prev:before {
      font-family: slick;
      font-size: 30px;
      line-height: 1;
      opacity: .75;
      color: rgb(90,90,90);
  }
  
  .slick-next {
    right: 11px;
  }
  
  .slick-prev {
    left: 0px;
  }
  
  /* Without this the padding on the parent affects the centering of the dots. Do NOT delete */
  .slick-dots {
    left: 0;
    bottom: 10px;
  }
  
  .slick-dots li button::before {
    color: #39504a;
  }
  
  .slick-dots li.slick-active button::before {
    color: #39504a;
  }
  
  /* Slider Text Styles*/
  .slider-item p {
    text-align: justify;
    font-family: 'Manrope', serif; 
    font-size: 1.1rem;
  }
  
  @media(max-width: 36em) {
    .slider-item p { font-size: 1.1rem; }
  }


/* Slcik Slider w/ images for hightlights of the week section */
.slider-container {
  padding: 5%;
}

.slider-item {
  padding: 0.25rem;
}

.slider-item:first-child {
  display: block;
}

.slick-next {
  right: 10px;
}

.slick-prev {
  left: 10px;
}

.slick-next::before, .slick-prev::before {
    font-family: inherit;
    font-size: 30px;
    line-height: 1;
    opacity: .75;
    color: #354567;
}

.slick-dots {
  left: 0;
  bottom: 10px;
  /*  Without this the padding on the parent affects the centering of the dots. Do not delete.    */
}

.slick-dots li,
.slick-dots li button {
  width: 10px;
}

.slick-dots li button::before {
  color:  .75;
    color: #354567;
    font-size: 30px;
}

.slick-dots li.slick-active button::before {
  color:  .75;
    color: #354567;
}


@media(max-width:768px) {
  .slick-prev {left: -10px; }
  .slick-next {right: -10px; }
  .slick-dots { bottom: -10px; }
}


  /* Hover overlay  */

  .hover-container {
    background-size: cover;
    background-position: center;
  }
  
  .hover-overlay {
    position: relative;
    padding-bottom: 100%;
    color: rgba(255, 255, 255, 0);
    position: relative;
    /* you only need to use relative + absolute if you want to determine the exact aspect ratio of the container */
    transition: all 0.3s;
  }
  
  .hover-overlay:hover {
    background-color: rgba(60, 60, 60, 0.7);
    color: white;
  }
  
  .hover-inner {
    position: absolute;
    width: 100%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  
  .hover-inner p {
    margin-bottom: 0;
  }



  /*  Cards  */

  .card {
    background-color: #39504a;
    /* border-radius: 5px; */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    display:block;
    position: relative;
    top:0;
    transition: all 0.5s;
  }

   .day-button {
    color: #f8ecdb;
  }

  .card h3 {
    font-weight:normal;
    font-size: 1.5rem;
    /* text-align:center; */
  }

  .card .info {
    display: inline-block;
    width: 48%;
    margin-bottom:0;
  }

  a.card:hover {
    top:-0.5rem;
  }

  .profile {
    max-width: 8rem;
    border-radius: 100%;
    margin-bottom: 2rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  }

  .card .author {
    font-weight: bold;
    margin-bottom:0;
  }

  .card .company {
    margin-bottom: 2rem;
  }

  /* clickable boxes */

  .clickable-box {
    color: inherit;
    text-decoration: none;
    box-shadow: 0 rgba(0, 0, 0, 0); /* so that we can add a transition */
    transition: 0.2s all;
    display: block;
  }

  .clickable-box .overlay {
    min-height:10rem;
    padding: 5rem 2rem;
    background-color: rgba(0,0,10,0.6);
    color: white;
  }

  .clickable-box p {
    margin-bottom: 0;
  }

  .clickable-box:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 20px -5px rgba(0, 0, 0, 0.4);
    margin-top:-2px;
  }

  /*  popup gallery */

  .bg-image {
    background-color: rgb(235,235,235);
    background-size: cover;
    background-position: center;
  }
/*   
  .square {
    padding-bottom: 60%;
  } */
  
  .popup-gallery .bg-image {
    border: 4px solid white;
  }

/*  Gallery - Home page  */

.gallery-section{
  /* matches your site spacing vibe */
  padding: 9rem;
}

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.2rem;                 /* space between images */
}

.gallery-grid img{
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;       /* makes perfect squares */
  object-fit: cover;         /* crops nicely */
  display: block;
  border-radius: 4px;        /* optional */
}








/*  Itenerary pop up  */

.popup {
  position: fixed;
  left: 100%;
  z-index: 5;
  padding: 2rem;
  background-color: white;
  display:grid;
  grid-template-columns: 1fr 1fr
}
.popup.onscreen {
  left: 20%;
  right: 20%;
  top: 20%;
}

.popUpOverlay {
  background-color: rgba(0,0,0,0);
  transition: all 1s;
  position: fixed;
}

.popUpOverlay.onscreen {
  background-color: rgba(125,125,125,.6);
  top:0;
  left:0;
  bottom:0;
  right:0;
}

polygon, path{
  fill:rgba(0,0,0,0);
  stroke:black;
  stroke-width:5;
}

.popupX {
    position:absolute;
  top:1rem;
  right:1rem;
  width:1rem;
}

/*  FAQ questions  */

.accordion-item {
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding: 1rem 0;
}

.accordion-link {
  width: 100%;
  background: #5C7899;
  border: 3px solid #5c6f8f;  /* was 1px */
  color: #fff;
  font-family: "Unbounded", sans-serif;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 1.2rem 1.5rem; /* taller + more left/right space */
  text-decoration: none;
  display: flex;
  max-width: 100%;   /* extra safe */
  box-sizing: border-box;
}

.answer {
  font-family: 'Manrope', serif; 
  max-height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height .45s ease,
    padding .45s ease,
    opacity .3s ease,
    transform .3s ease;
}

/* optional: make the + look nicer */
.accordion-icon{
  font-size: 1rem;
  font-weight: 700;
  margin-left: 1rem;
  flex-shrink: 0;  /* prevents it wrapping under text */
}


/* gap only when open */
.accordion-item.open .answer {
  max-height: 1000px;
  padding: 2.5rem 3rem;
  opacity: 1;
  transform: translateY(0);
  font-family: 'Manrope', serif;  /* Add your font here */ 

}


/* CLOSED */
.answer{
  font-family: 'Manrope', serif;  /* Add your font here */ 
  display: grid;
  grid-template-rows: 0fr;   /* collapse */
  transition: grid-template-rows .45s ease;
  padding: 0;               /* no padding when closed */
}

/* the inner wrapper is what actually holds the text */
.answer > div{
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s ease, transform .35s ease;
}

/* OPEN */
.accordion-item.open .answer{
  grid-template-rows: 1fr;  /* expand to content height */
  padding: 2.5rem 3rem;     /* your open padding */
}

.accordion-item.open .answer > div{
  opacity: 1;
  transform: translateY(0);
}


/* toggle plus/minus */
.accordion-item .ion-md-remove {
  display: none;
}

.accordion-item.open .ion-md-add {
  display: none;
}

.accordion-item.open .ion-md-remove {
  display: inline-block;
}

.accordion-item.open .answer {
  max-height: 300px !important;
}

.accordion,
.faq-wrapper,
.accordion-item{
  max-width: 100%;
}







  /* ------------ Responsive Styles ----------------------- */

/* General CSS Responsive Styles (Apply everywhere unless overriden) */ 

.xs-show, 
.sm-show,
.md-show {
	display: none; 
}

.inline { 
  display: inline-block;
  vertical-align: top;
}

/* XL Screens  */

@media(min-width: 1800px) {
  .text-l,
  .text-xl,
  .text-xxl { font-size: 7rem; }
}

.desktop-show { display: block; }
.desktop-hide { display: none;  }


/* ------- MD Media Query (64em / 1024px) --------------- */ 
/* - Styles added here will apply at devices smaller than 576px, or zoomed in equivalent */ 

@media(max-width:64em) {

	.md-show { display: block; }
	.md-hide { display: none;  }

  .md-margin-b-0 { margin-bottom: 0; }
  .md-padded-b-0 { padding-bottom: 0; }

  .md-flex-1 { order: 1; }
  .md-flex-2 { order: 2; }
  .md-flex-3 { order: 3; }

}

/* ------- SM Media Query (48em / 768px) --------------- */ 
/* - Styles added here will apply at devices smaller than 768px, or zoomed in equivalent */ 


@media(max-width:48em) {

	.sm-show { display: block; }
	.sm-hide { display: none;  }

  .sm-center { text-align: center; }
  .sm-left   { text-align: left; }
  .sm-right  { text-align: right; }

  .sm-padded     { padding: 5%; }
  .sm-padded-1   { padding: 1rem; }
  .sm-padded-05  { padding: 0.5rem; }

  .sm-padded-0   { padding: 0; }
  .sm-padded-t-0 { padding-top: 0; }
  .sm-padded-b-0 { padding-bottom: 0; }
  .sm-margin-t-0 { margin-top: 0; }
  .sm-margin-b-0 { margin-bottom: 0; }

  .sm-padded-r-0 { padding-right: 0;}
  .sm-padded-l-0 { padding-left: 0;}

  .sm-margin-b-1 { margin-bottom: 1rem; }
  .sm-margin-b-2 { margin-bottom: 2rem; }

  .sm-landscape-wide{ padding-bottom: 45% ; }
  .sm-landscape     { 
    padding-bottom: 66% ;
    background-size: cover;
    background-position: center;
   }
  .sm-portrait-tall { padding-bottom: 175%; }
  .sm-portrait      { padding-bottom: 125%; }
  .sm-square        { padding-bottom: 100%; }
  .sm-no-bg-image   { background-image: none!important; }
  .sm-no-bg-image::after {background: none }
  .sm-no-border { border: none!important; }

  .sm-flex-flip { flex-direction: row-reverse; }
  .sm-flex-1 { order: 1; }
  .sm-flex-2 { order: 2; }
  .sm-flex-3 { order: 3; }

  .banner-title { font-size: 15vw;}
  .sm-text-dark { color: var(--dark-text); }
  .columns-3, .columns-2 { column-count: 1;}
  .sm-bump-up {
    margin-top: -10vh;
    position: relative; 
  }

  .sm-overlay-dark::after {
    background-color:rgba(0, 0, 0, 0.4);
  }

  .gallery-section{
    padding: 1rem;
  }
  .gallery-grid{
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  p {
    font-weight: 400;
  }

}

/* ------- XS Media Query (36em / 576px) --------------- */ 
/* - Styles added here will apply at devices smaller than 576px, or zoomed in equivalent */ 

@media(max-width:36em) {

    .bg-image{ min-height: 0; }  /* or height: auto; */

		.xs-show { display: block; }
		.xs-hide { display: none;  }

    .xs-center { text-align: center; }
    .xs-left   { text-align: left; }
    .xs-right  { text-align: right; }

    .xs-padded     { padding: 5%; }
    .xs-padded-10  { padding: 10% }

    .xs-margin-b-1 { margin-bottom: 1rem; }

    .xs-padded-r-2 { padding-right: 2rem; }
    .xs-padded-l-2 { padding-left: 2rem; }

    .xs-square { padding-bottom: 100%; }

    .xs-text-small { font-size: 2rem; }

    .xs-bg-fixed {background-attachment: scroll;}

    .emphasis { font-size: 1rem;}

  
    .xs-tall-70 {min-height: 70vh;}

    
  .capped-width.grid{
    display: flex;        /* if your grid system is flex-based */
    flex-direction: column;
    align-items: center;  /* centers children */
  }

  .capped-width.grid > [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* image on top + centered */
  .capped-width .bg-image{
    order: 1;
    width: 100%;
    min-height: 16rem;     /* mobile height */
    margin-bottom: 1.5rem;
  }

  /* text underneath */
  .capped-width .col-5_sm-12-middle{
    order: 2;
    text-align: left;      /* or center if you prefer */
  }

 .portrait-tall{
    width: 100%;
    margin: 0 auto 1rem;
 }

 .mob-horizontal-scroll {
          overflow-x: auto;
          flex-wrap: nowrap;
          -webkit-overflow-scrolling: auto;
        }
       
        .mob-horizontal-scroll a {
          margin-bottom: 2rem;
        }

    .gallery-section{
    padding: 1rem;
  }
  .gallery-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }

  p {
    font-weight: 400;
  }

}