:root{
/*
    /* dark theme 
    --bg:#24213b;
    --ink:#f8f6fb;
    --muted:rgb(214, 207, 207);
    --rose:#f3558a;
    --blue:#3e6fa8;
    --wash:#2d2b3f;
    --card:#4e4a69;
    --line:#d9d6e6; 
*/
    /* light blue/pink theme */
    --bg:#f8f6fb;
    --ink:#24213b;
    --muted:#24213b;
    --rose:#b8456b;
    --blue:#3e6fa8;
    --wash:#e3e8f3;
    --card:#fff;
    --line:#d9d6e6; 

    
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px)
}


/*
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#171527;--ink:#f1eef8;--muted:#b3b0c8;--rose:#e27a9d;--blue:#8db3e6;--wash:#22213a;--card:#1f1d33;--line:#383559}}
:root[data-theme="dark"]{--bg:#171527;--ink:#f1eef8;--muted:#b3b0c8;--rose:#e27a9d;--blue:#8db3e6;--wash:#22213a;--card:#1f1d33;--line:#383559}
*/
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 Figtree,system-ui,sans-serif}
h1,h2,h3{font-family:"Young Serif",Georgia,serif;font-weight:400;line-height:1.1;margin:0}


body {
    font-family: "Source Sans Pro", arial, sans-serif;
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

nav, footer {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

}

footer { background-color: var(--bg);}

nav b, footer b {
    text-transform: uppercase;
}

h1, h2 {
    /*font-family: "Ephesis", cursive; */
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.wrap{
    max-width:1040px;
    margin:0 auto;
    padding:6rem 1.25rem
}
nav.wrap, footer.wrap{
    padding:1.5rem 1.25rem;
}

.wrap-bg{
    margin:0 auto;
    max-width:100%;
    padding:0 1.25rem
}
.wrap-band{
    background:var(--wash);
    max-width:100%;
    padding:7.5rem 1.25rem
}

.wrap-bg > *, .wrap-band > * {
    margin:0 auto;
    max-width:1040px;
    padding:0 1.25rem
}


nav{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:1.25rem 0
}
nav b{font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:1.15rem}
nav a{text-decoration:none;font-weight:500}


h1, h2, h3, article, p, ul, form, dl {
  /* animation-name: text-appear; @keyframes defined below */
  /* animation-timing-function: ease-in; standard should be linear */
  /* animation-fill-mode: both; keeps animated values forwards and backwards */
  animation: text-appear ease-in both;
  animation-timeline: view(); /* applies animation state relative to viewport */
  animation-range: 0vh 20vh; /* set 0% and 100% positions */
}

img {
  animation: image-appear ease-in both;
  animation-timeline: view();
  animation-range: entry 20% 100vh;
}
@prefers-reduced-motion {
  img, h1, h2, h3, article, p, ul, form, dl {
    animation: none;
  }
}

@keyframes image-appear {
  from {
    filter: saturate(0) contrast(4) brightness(.1) blur(3px);
    opacity: 0;
    scale: .95;
    translate: 0 4rem;
  }
}

@keyframes text-appear {
  from {
    opacity: 0;
    translate: 0 2rem;
  }
}

.parallax {
  background-image: url("./../img/beach.JPG");
  min-height: 400px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax-100 {
  background-image: url("./../img/beach.JPG");
  min-height: 100px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.hero{
    position:relative;
    padding:10rem 2rem 5rem;
    overflow:hidden;
}

.bg-hero{
    /*position:absolute;top:0;left:0;width:100%;height:100%;*/
    background-image: url(./../img/beach-light.JPG);
    background-repeat: no-repeat; 
    background-position: center left;
    background-size: 110%;
    min-height: 50rem;
}

@media (max-width:640px){
    .bg-hero{
        background-size: cover;
    }
}

.hero h1{font-size:clamp(2.6rem,4.6vw,5.6rem);max-width:12ch;position:relative;z-index:1}
.hero p{max-width:34rem;/*color:var(--muted);*/font-size:1.2rem;position:relative;z-index:1;margin:1.5rem 0 2rem}

/* 
.btn {
  border: 1px solid;
  overflow: hidden;
  position: relative;
}
.btn  span {
    z-index: 20;
}

.btn span:after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .2;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: -10;
}

.btn:hover:after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
*/


.btn-effect,
.btn-effect *,
.btn-effect :after,
.btn-effect :before,
.btn-effect:after,
.btn-effect:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-effect {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: var(--wash);
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-effect:disabled {
  cursor: default;
}
.btn-effect:-moz-focusring {
  outline: auto;
}
.btn-effect svg {
  display: block;
  vertical-align: middle;
}
.btn-effect [hidden] {
  display: none;
}
.btn-effect {
  --thickness: 4px;
  background: none;
  box-sizing: border-box;
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% + var(--thickness)),
    0 calc(100% + var(--thickness))
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% + var(--thickness)),
    0 calc(100% + var(--thickness))
  );
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  padding: 2px 0;
  position: relative;
  text-transform: uppercase;
}
.btn-effect:before {
  background: var(--wash);
  bottom: calc(var(--thickness) * -1);
  content: "";
  display: block;
  height: var(--thickness);
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.btn-effect:hover:before {
  -webkit-animation: slide 0.5s ease;
  animation: slide 0.5s ease;
}
@-webkit-keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  51% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  51% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}



.med-image{width:100%;}
.comparison-img{width:100%;padding-top:2rem;}

dl {
    max-width: 30rem;
    /* padding: 0 1rem; */
}

dt {
    background: var(--card);
    padding: 0.6rem;
    margin: 2rem 0 1rem;
    border-radius: 10px / 10px 0;
}

.packages-image{
    /*position:absolute;top:0;left:0;width:100%;height:100%;*/
    background: url(./../img/sunset-dark.JPG);
    background-repeat: no-repeat;
    background-size: 150%;
    min-height: 50rem;
}

.btn{
    display:inline-block;
    /* background:var(--rose); */
    color:var(--rose);
    transition: all .2s ease-in-out;
    padding:.9rem 1.6rem;
    border-radius:999px;
    border: none;
    text-decoration:none;
    font-weight:600;position:relative;z-index:1}

button.btn{
    color: var(--wash);
}
/* .btn:hover{background:var(--ink);color:#fff} */
section{padding:4.5rem 0;}
h2{font-size:clamp(1.9rem,4.5vw,2.8rem);margin-bottom:1.25rem}
.lead{max-width:38rem;}/*color:var(--muted)}*/

.steps{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:s}
.steps li{counter-increment:s;border-top:3px solid var(--rose);padding-top:1rem}
/*.steps li::before{content:counter(s) ".";font-family:"Young Serif",serif;color:var(--rose);font-size:1.4rem}*/
.steps h3{font-size:1.25rem;margin:.2rem 0 .4rem}
.steps p{margin:0;color:var(--muted)}

.steps.numbered li::before{content:counter(s) ".";font-family:"Young Serif",serif;color:var(--rose);font-size:1.4rem}


.pk{
    display:grid;
    gap:1.25rem;
    /* grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); */
    margin-top:2rem;
}

.pk article{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:3rem 4rem; 
    transition:all .2s ease-in-out;
    display:flex;
    flex-direction:row;
    align-items:start;
    justify-content: space-between;
    gap: 3rem;
}
.pk article:hover{border-color:var(--rose);}
.pk h3{
    font-size:1.4rem;
    max-width: 13rem;
}
.pk .pk-desc {
    width: calc(100% - 21rem);
}
.pk .price{
    font-size:1.9rem;
    /* font-family: "Playfair Display", serif; */
    font-weight: 600;
    font-family:"Young Serif",serif;
    /* margin:.6rem 0; */
    align-self: self-end;
    color:var(--rose);
    width: 9rem;
}

.pk .price span{
    font-size:0.8rem;
    text-transform: uppercase;
}

@media (max-width:640px){
    .pk article{
        flex-direction:column;
        padding:2rem 1.5rem
    }

    .pk .pk-desc {
        width: 100%;
    }
}

.pk ul{padding-left:1.1rem;margin:.5rem 0 0;color:var(--muted)}

.note{
    font-size:.95rem;
    color:var(--muted);
    margin:1.5rem auto 0;
    max-width: 26rem;
    text-align: center;
}
.quotes{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:2rem}
blockquote{margin:0;padding-left:1.1rem;border-left:3px solid var(--blue)}
blockquote p{margin:0 0 .6rem;font-family:"Young Serif",serif;font-size:1.2rem;line-height:1.4}
blockquote cite{color:var(--muted);font-style:normal;font-size:.95rem}
.two{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}

@media (max-width:640px){
    .two{
        /* padding: 0 2rem; */
        grid-template-columns:1fr
    }
}

.gen-bg{
    background: url('./../img/beach.jpg') no-repeat 40% 60%;
    height: 12rem;
}

.bold-bg{
    background: var(--rose);
    color: var(--wash);
    padding: 4rem 0;
}

figcaption {
    font-size: .9rem;
    /* color: var(--muted); */
    text-align: center;
    margin-top: .2rem;
}

form {
    border-top: 1px solid var(--rose);
    padding-top: 1.5rem;
}

label {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

input {
    -webkit-appearance: none;
}
input:user-invalid {
  border-color: var(--rose); /* Red border for errors */
}
input:user-valid {
  border-color: var(--blue); /* Green border for correct inputs */
}

button[type=submit] {
    margin-top: 1.4rem;
}

dl{margin:0}dt{font-weight:600;margin-top:1rem}dd{margin:.15rem 0 0;color:var(--muted)}
footer{padding:2.5rem 0;color:var(--muted);font-size:.95rem;border-top:1px solid var(--line)}

@media (max-width:640px){
    .hero{padding-bottom:3.5rem
    }
}