@import url('https://fonts.googleapis.com/css2?family=Lacquer&display=swap&family=Cherry+Bomb+One&family=Foldit:wght@600&family=IBM+Plex+Mono&family=Inter&family=Monoton&family=Nunito&family=Open+Sans&family=Plaster&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,300;0,500;1,100&family=Roboto&family=Roboto+Mono&display=swap?family=Urbanist:ital,wght@0,100..900;1,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap&family=Tilt+Neon&display=swap?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap?');
:root {
  --matteBlack:#222222;
  --mintGreen:#3c9e7a;
  --mintGreenTrans:#3c9e7a80;
  --matteRed:#B33F40;
  --softGreen:#9ad1bd;
  --offWhite:#fffdfa;
  --softWhite:#f1f0ed;
  --cream:#e8e0d6;
  --lightblue:#64aef2;
  --clear:#00000000;
  --deepBlue:#021f3a;
  --contrastBlack:#010409;
  --charcoalGrey:#7a828e;
  --softBlack:#242222;
  --offWhiteTrans:#fffdfa60;
  --matteBlackTrans: #22222233;
  --accountingGrey:#cccccc;
  --neumorphBG_light:#fffdfa20;
  --neumorphBG_dark:#22222220;
  --lightBlackTrans: #63605c50;
  --medBlack: #444444;
  --medBlackTrans: #44444450;
  --medTextGrey: #555555;
  --medTextGreyTrans: #55555580;
  --neumorphGradient:linear-gradient(145deg, #ffffff, #e6e4e1);
  --legradient:linear-gradient(45deg, #fffdfa, #cccccc);
  --neumorphShadow:41px 41px 60px #d9d7d5, -41px -41px 60px #ffffff;
  --transBlack: #1f1f1f90;
  --greyTrans: #cccccc60;
  --offWhiteLucent: #fffdfa90;
  --matteBlackLucent: #22222280;
  --greyLucent: #cccccc80;
  --hallBlue:#00A3E0;
  --arkitechBlue: #003E51;
  --arkitechBlueTrans: #003E5150;
  --BadOrange: #E9C66D;
  --BadOrangeTrans: #E9C66D99;
  --badMatteBlack: #2f2f2f;
  --midBlack: #1d1b1b;
  --BadPink: #EA9692;
  --BadPinkTrans: #EA969299;
  --BadBlue:#a1c5ff;
  --BadBlueTrans:#a1c5ff50;
  --newBlack:#1a1a1a;
  --hsOrange: #FF7A59;
  --arkitechOrange:#DF852E;
  --newBlackTrans: #1a1a1a50;
  --arkitechBlueTrans: #003e5950;
  --arkitechOrangeTrans:#DF852E50;
  --pureWhite: #FFFFFF;
  --pureBlack: #000000;
  --pureWhiteTrans: #FFFFFF50;
  --pureBlackTrans: #00000050;
  --sailfestBlue: #0A5A75;
  --sailfestBlueTrans: #0A5A7580;
  --sailPink: #F05684;
  --sailPinkTrans: #F0568480;
  --sailSalmon: #F59186;
  --sailSalmonTrans: #F5918680;
  --sailBabyBlue: #51A8D8;
  --sailBabyBlueTrans: #51A8D880;
  --darkBGmedText: #ebebeb;
  --sailTurquoise: #3AC0B7;
  --sailTurquoiseTrans: #3AC0B780;
}

html {
    scroll-behavior: smooth;
    background-color: var(--pureWhite);
    color: var(--pureBlack);
    scroll-padding-top: 120px;
}
body {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-padding-top: 120px;
}
@font-face {
    font-family: 'Milkstore';
    src: url('/fonts/Milkstore01-Clean.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
}
.hero {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 24px;
    padding-top: 82px;
    min-height: 400px;
    gap: 24px;
    background-color: var(--sailfestBlue);
    flex-wrap: wrap;
    box-shadow: inset 0px -24px 24px 0px var(--newBlackTrans);
}
.hero {
    background-image: url('/graphics/herobackground.png');
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    background-position-y: 80%;
}
.button {
    background-color: var(--mintGreen);
    color: var(--offWhite);
    padding: 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid var(--offWhite);
    box-shadow: -2px 4px 0px 4px var(--offWhite);
    font-size: 20px;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    min-width: 120px;
    font-weight: 500;
    z-index: 2;
}
.button:active {
    box-shadow: -1px 2px 0px 3px var(--offWhite);
    transform: translateY(2px) translateX(-2px);
}
.icon-button p {
    font-size: 18px;
    font-weight: 500 !important;
    font-family: 'DM Sans', sans-serif;
}

.icon-button {
    display: flex;
    align-items: center;
    gap: 6px;
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Poppins', sans-serif;
    margin:0;
    padding:0;
    font-weight: 500;
}
a,p {
    margin:0;
    padding:0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
}
.pink {
    background-color: var(--pureWhite);
    color: var(--sailPink) !important;
}
.button.pink {
    border: 1px solid var(--sailPink);
    box-shadow: -2px 4px 0px 4px var(--sailPink);
}
.button.pink:hover {
    background-color: var(--greyTrans);
}
.button.pink:active {
    background-color: var(--greyTrans);
    box-shadow: -1px 2px 0px 3px var(--sailPink);
}
.button.pink p {
    color: var(--sailPink) !important;
}
.button.pink svg path {
    stroke: var(--sailPink) !important;
}

.salmon {
    background-color: var(--pureWhite);
    color: var(--sailSalmon) !important;
}
.button.salmon {
    border: 1px solid var(--sailSalmon);
    box-shadow: -2px 4px 0px 4px var(--sailSalmon);
}
.button.salmon:hover {
    background-color: var(--greyTrans);
}
.button.salmon:active {
    background-color: var(--greyTrans);
    box-shadow: -1px 2px 0px 3px var(--sailSalmon);
}
.button.salmon p {
    color: var(--sailSalmon) !important;
}
.button.salmon svg path {
    stroke: var(--sailSalmon) !important;
}

.blue {
    background-color: var(--pureWhite);
    color: var(--sailfestBlue) !important;
}
.button.blue {
    border: 1px solid var(--sailfestBlue);
    box-shadow: -2px 4px 0px 4px var(--sailfestBlue);
}
.button.blue:hover {
    background-color: var(--greyTrans);
}
.button.blue:active {
    background-color: var(--greyTrans);
    box-shadow: -1px 2px 0px 3px var(--sailfestBlue);
}
.button.blue p {
    color: var(--sailfestBlue) !important;
}
.button.blue svg path {
    stroke: var(--sailfestBlue) !important;
}

.baby-blue {
    background-color: var(--pureWhite);
    color: var(--sailBabyBlue) !important;
}
.button.baby-blue {
    border: 1px solid var(--sailBabyBlue);
    box-shadow: -2px 4px 0px 4px var(--sailBabyBlue);
}
.button.baby-blue:hover {
    background-color: var(--greyTrans);
}
.button.baby-blue:active {
    background-color: var(--greyTrans);
    box-shadow: -1px 2px 0px 3px var(--sailBabyBlue);
}
.button.baby-blue p {
    color: var(--sailBabyBlue) !important;
}
.button.baby-blue svg path {
    stroke: var(--sailBabyBlue) !important;
}

.sailfestBlue {
    background-color: var(--pureWhite);
    color: var(--sailfestBlue) !important;
}
.button.sailfestBlue {
    border: 1px solid var(--sailfestBlue);
    box-shadow: -2px 4px 0px 4px var(--sailfestBlue);
}
.button.sailfestBlue:hover {
    background-color: var(--greyTrans);
}
.button.sailfestBlue:active {
    background-color: var(--greyTrans);
    box-shadow: -1px 2px 0px 3px var(--sailfestBlue);
}
.button.sailfestBlue p {
    color: var(--sailfestBlue) !important;
}
.button.sailfestBlue svg path {
    stroke: var(--sailfestBlue) !important;
}

.white {
    background-color: var(--pureWhite);
    color: var(--sailfestBlue) !important;
}
.button.white {
    border: 1px solid var(--sailfestBlue);
    box-shadow: -2px 4px 0px 4px var(--sailfestBlue);
}
.button.white:hover {
    background-color: var(--greyTrans);
}
.button.white:active {
    background-color: var(--greyTrans);
    box-shadow: -1px 2px 0px 3px var(--sailfestBlue);
}
.button.white p {
    color: var(--sailfestBlue) !important;
}
.button.white svg path {
    stroke: var(--sailfestBlue) !important;
}
.hero h1 {
    font-size: 42px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--offWhite);
    letter-spacing: calc(-0.03 * 48px);
    text-align: center;
    line-height: 1;
}
.hero h1 i {
    font-size: 24px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: var(--offWhite);
    letter-spacing: calc(-0.03 * 24px);
}
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: center;
    margin-left: -10%;
}
.hero-logo {
    width: 50%;
    max-width: 1000px;
}
.hero-logo img {
    width: 100%;
    filter: drop-shadow(0px 0px 10px var(--newBlackTrans));
}
.hero-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-image h2 {
    font-family: 'Milkstore', sans-serif;
    font-size: 52px;
    font-weight: 500;
    color: var(--accountingGrey);
}
.hero-image img {
    max-width: 1000px;
}
.ahoy-matey {
    position: absolute;
    top: -32px;
    right: 40px;
}
.full-banner {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: column;
}
.full-banner h2 {
    font-size: 64px;
    font-weight: 500;
    color: var(--newBlack);
    letter-spacing: calc(-0.03 * 64px);
    margin: 0;
}
.full-banner .banner-header p {
    font-size: 24px;
    font-weight: 400;
    color: var(--sailTurquoise);
    letter-spacing: calc(-0.03 * 24px);
    margin: 0;
}
.banner-header {
    padding: 24px;
}

.cta {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 42px 24px;
}
.cta-content {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    gap: 28px;
}
.cta h2 {
    font-size: 64px;
    font-weight: 500;
    color: var(--pureBlack);
    letter-spacing: calc(-0.03 * 64px);
    line-height: 1.1;
}
.cta-content > p {
    font-size: 18px;
    color: var(--medTextGrey);
}
.cta-graphic {
    width: 40%;
    border: 2px solid var(--pureWhite);
    border-radius: 12px;
    display: block;
    position: relative;
    overflow:visible;
    z-index: 1;
    max-width: 600px;
}
.cta-graphic-content {
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin: 0;
    padding: 0;
}
.cta-graphic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    transform: scale(1.025);
}
.cta-graphic-content {
    border-radius: 10px;
    overflow: hidden;
}
.ship-cta h2 b, #sailva250 h2 b {
    background-image: linear-gradient(to right, var(--sailfestBlue), var(--sailBabyBlue));
}
.cta h2 b, #sailva250 h2 b {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    background-size: cover;
    background-position: center;
    font-weight: 600;
}
.cta-graphic-content-text {
    text-align: left;
    color: var(--darkBGmedText);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
    justify-content: center;
}
.cta-content-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cta-content-head a {
    text-decoration: none;
    color: var(--darkBGmedText);
}
.cta-content-head h3 {
    font-size: 32px;
    font-weight: 400;
    color: var(--pureWhite);
    letter-spacing: calc(-0.03 * 32px);
}
.cta-content-body {
    font-size: 16px;
    color: var(--darkBGmedText);
}
.cta-graphic::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 115%;
    height: 105%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transform: translate(-50%, -50%);
    filter: blur(12px);
    opacity: 0.8;
}

/* specific CTA edits*/

.water-cta .cta-graphic::before {
    background-image: url('/graphics/beach-blur-bg.png');
}
.people-cta .cta-graphic::before {
    background-image: url('/graphics/people-blur-bg.png');
}
.ship-cta {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cta-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    gap: 12px;
}
.cta-header h3 {
    font-size: 32px;
    color: var(--sailTurquoise);
    letter-spacing: calc(-0.03 * 32px);
    margin: 0px;
    margin-top:-12px;
}
.ship-content {
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}
.ship-content article {
    width: 22%;
    min-width: 300px;
    max-width: 420px;
    border-radius: 12px;
    min-height: 450px;
    height: auto;
    border: 1px solid var(--medTextGrey);
    overflow: hidden;
}
.ship-content article img {
    width: 100%;
    height: 63%;
    object-fit: cover;
}
.ship-cta-content {
    height: 37%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    padding: 12px;
    width: calc(100% - 24px);
}
.ship-cta-content-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    width: 100%;
}
.ship-cta-content-head h3 {
    font-size: 18px;
    font-weight: 400;
    color: var(--newBlack);
    letter-spacing: calc(-0.03 * 32px);
    margin-top: 6px;
}

.ship-cta-content-body {
    font-size: 14px;
    color: var(--medTextGrey);
}
.water-cta .cta-graphic-content-text {
    background: linear-gradient(to bottom, #5C7188, var(--newBlack));
    box-shadow: 0px -24px 24px 0px #5C7188;
    z-index: 1;
    position: relative;
}
.water-cta h2 b {
    background-image: linear-gradient(to right, var(--sailTurquoise), var(--sailBabyBlue));
}

.people-cta .cta-graphic-content-text {
    background: linear-gradient(to bottom, #707F91, var(--newBlack));
    box-shadow: 0px -24px 24px 0px #707F91;
    z-index: 1;
    position: relative;
}
.people-cta h2 b {
    background-image: linear-gradient(to right, var(--matteRed), var(--sailfestBlue));
}


.gallery-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:0;
    padding:0;
    gap:12px;
    background-color: var(--sailfestBlue);
    text-align: left;
    color: var(--pureWhite);
    padding: 32px 12px;
}
.gallery-section p {
    color: var(--darkBGmedText);
    text-align: left;
}

/* Text reveal animation styles */
p span span {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

@media (prefers-reduced-motion: reduce) {
    p span span {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

.gallery-bottom-text {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    max-width: 1400px;
    gap: 24px;
}
.gallery-section h2 {
    font-size: 32px;
    letter-spacing: calc(-0.03 * 32px);
}

.hubspot-cta {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 32px 12px;
}
.hubspot-cta-content {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    gap: 12px;
}
.hubspot-cta-content h2 {
    font-size: 36px;
    letter-spacing: calc(-0.03 * 36px);
}
.hubspot-cta-content h3 {
    font-size: 24px;
    color: var(--sailTurquoise);
    letter-spacing: calc(-0.03 * 24px);
}
.hubspot-cta-content p {
    font-size: 18px;
    color: var(--sailBabyBlue);
}
#explore-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background-color: var(--sailfestBlue);
    padding: 32px 12px;
}
#explore-section h2 {
    font-size: 32px;
    letter-spacing: calc(-0.03 * 32px);
    color: var(--pureWhite);
    text-align: center;
    font-weight: 500;
}
.explore-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    max-width: 1400px;
}
.explore-content article {
    width: 30%;
    max-width:350px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--greyTrans);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}
.explore-see {
    background-image: url('/graphics/love-small.png');
}
.explore-stay {
    background-image: url('/graphics/outside-drinks.png');
}
.explore-do {
    background-image: url('/graphics/beach-play.png');
}
.explore-content article h3 {
    font-size: 42px;
    letter-spacing: calc(-0.03 * 42px);
    color: var(--pureWhite);
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--sailfestBlueTrans);
    transition: all 0.2s ease;
    pointer-events: none;
}
.explore-content article:hover h3,
.explore-content article:active h3,
.explore-content article:focus h3,
.explore-content article.touched h3 {
    background-color: #003E51;
    height: auto;
    border-bottom: 1px solid var(--accountingGrey);
}
.explore-content article p {
    font-size: 18px;
    color: var(--darkBGmedText);
    text-align: left;
    position: absolute;
    padding: 12px;
    transition: all 0.2s ease;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    opacity: 0;
    margin-top: 200px;
    visibility: hidden;
    display: flex;
    pointer-events: none;
}
.explore-content article:hover p,
.explore-content article:active p,
.explore-content article:focus p,
.explore-content article.touched p {
    position: relative;
    height: 100%;
    background-color: var(--sailfestBlueTrans);
    display: flex;
    opacity: 1;
    margin-top: 0px;
    visibility: visible;
}
.explore-content article p a {
    text-decoration: none;
    color: var(--pureWhite);
    font-size: 24px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    background-color: var(--sailSalmon);
    position: relative;
    border: 1px solid var(--greyTrans);
    pointer-events: auto;
    z-index: 10;
}
.gallery-head {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 24px;
}
.gallery-head a {
    flex-shrink: 0;
}
.explore-content article:hover,
.explore-content article:active,
.explore-content article:focus,
.explore-content article.touched {
    transform: scale(1.02);
    box-shadow: 0px 8px 12px 0px var(--newBlackTrans);
}
.lodging-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    width: calc(100% - 48px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 24px;
}
.lodging-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    width: 420px;
    flex-shrink: 0;
    min-height: 350px;
    height: 364px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--accountingGrey);
    transition: all 0.2s ease;
}
.lodging-option:hover {
    border-top: 1px solid var(--sailPink);
    border-left: 1px solid var(--sailTurquoise);
    border-right: 1px solid var(--sailPink);
    border-bottom: 1px solid var(--sailTurquoise);
    box-shadow: -3px 3px 12px 0px var(--sailTurquoise), 3px -3px 12px 0px var(--sailPink);
    transform: scale(1.02);
}
.lodging-option-body p {
    font-size: 16px;
    color: var(--medTextGrey);
}
.lodging-option-image-container {
    width: 100%;
    height: 200px;
    object-fit: cover;
    position: relative;
}
.lodging-option-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.lodging-option-image-container:not(.cape-rentals .lodging-option-image-container)::after {
    content: '$249.00';
    position: absolute;
    width: 72px;
    background-color: var(--offWhiteTrans);
    z-index: 10;
    border-radius: 24px;
    border: 1px solid var(--medTextGrey);
    border-bottom: 4px solid var(--medTextGrey);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -moz-backdrop-filter: blur(12px);
    display: block;
    padding: 8px 12px;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    color: var(--newBlack);
    font-size: 14px;
    bottom: 6px;
    right: 6px;
    display: none;
}
.chesapeake-properties .lodging-option-image-container::after {
    content: '$174.00' !important;
}
.blue-heron-realty .lodging-option-image-container::after {
    display: none !important;
}
.shorestay-suites .lodging-option-image-container::after {
    content: '$105.00' !important;
}
.hotel-cape-charles .lodging-option-image-container::after {
    display: none !important;
}
.pref-lodging .lodging-option {
    width: 400px;
}
.alt-lodging {
    margin-top: -24px;
}
.alt-lodging .lodging-option {
    width: 300px;
}
.alt-lodging .lodging-option .lodging-option-head h3 {
    font-size: 16px;
}
.alt-lodging .icon-button p {
    font-size: 14px;
}
.preferred-lodging {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    gap: 24px;
    padding: 24px;
}
.lodging-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    gap: 0px;
}
.lodging-head h2 {
    font-size: 64px;
    letter-spacing: calc(-0.03 * 64px);
    color: var(--newBlack);
    margin: 0px;
}
.lodging-head h3 {
    font-size: 32px;
    color: var(--sailTurquoise);
    letter-spacing: calc(-0.03 * 32px);
    margin: 0px;
    margin-top:-12px;
}
.lodging-option-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.lodging-option-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 12px;
    padding: 18px;
    height: 100%;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    -moz-backdrop-filter: blur(18px);
    background-color: var(--offWhiteTrans);
}
.lodging-option-head h3 {
    font-size: 18px;
    letter-spacing: calc(-0.03 * 18px);
    margin: 0px;
    font-weight: 400;
}
.small-button {
    margin-top: -8px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0px;
}

.small-button p span {
    font-size: 14px !important;
}
.small-button svg {
    width: 20px !important;
    height: 20px !important;
}
.lodging-head div {
    font-size: 18px;
    color: var(--offWhite);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    width: 100%;
    text-align: center;
    background-color: var(--sailfestBlue);
    border-radius: 6px;
    padding: 6px 12px;
}
.lodging-option-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.cape-rentals img {
    padding: 24px;
    object-fit: contain;
    width: calc(100% - 48px);
    filter:drop-shadow(0px 0px 12px var(--newBlackTrans));
    height: 152px;
}
.lodging-option-image-container {
    border-bottom: 1px solid var(--greyTrans);
    background-color: var(--pureWhite);
}
.blue-heron-realty  .lodging-option-image-container img {
    object-fit: contain !important;
}
#sailva250 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding:42px 0px;
    padding-left: 42px;
    color: var(--medTextGrey);
    flex-wrap: wrap;
    width: calc(100% - 42px);
}
#sailva250 div {
    width: calc(50% - 24px);
}
#sailva250 div:not(.sail250va-video, .btn-container) {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    gap: 24px;
    width: calc(50% - 48px);
    max-width: 800px;
}
#sailva250 .sail250va-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px 0px 0px 12px;
    border: 2px solid var(--accountingGrey);
    border-right: none;
}
#sailva250 h2 {
    font-size: clamp(32px, 3.5vw, 64px);
    letter-spacing: calc(-0.03 * clamp(32px, 3.5vw, 64px));
    color: var(--newBlack);
    margin: 0 auto;
    width: 100%;
}
#sailva250 p {
    font-size: 18px;
    color: var(--medTextGrey);
}

#otherlodgingoptionsbtn {
    margin: 0 auto;
}
.standard-form {
    width: 50%;
}
.hs-form-frame {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.people-cta::before {
    content: '' !important;
    background-image: url('/graphics/1.png') !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    z-index: -1 !important;
    opacity: 0.2 !important;
}


#register-cta {
    position: relative;
}
#register-cta::before {
    content: '' !important;
    background-image: url('/graphics/3.png') !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    bottom: 0 !important;
    height: 100% !important;
    position: absolute !important;
    z-index: -1 !important;
    opacity: 0.2 !important;
}
.ships-image-container {
    width: 100%;
    margin: 0 auto;
}
.ships-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--newBlackTrans);
    border-top: 32px solid var(--sailfestBlue);
    filter: drop-shadow(0px 0px 12px var(--newBlackTrans));
    transform: rotateX(12deg) rotateY(-30deg) rotateZ(6deg);
    cursor: pointer;
    transition: all 0.2s ease;
}
.ships-image-container:hover img {
    transform: rotateX(12deg) rotateY(-30deg) rotateZ(6deg) scale(1.02);
    filter: drop-shadow(0px 0px 12px var(--sailTurquoise));
}
.btn-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0px 24px !important;
    width: calc(100% - 48px) !important;
    justify-content: space-around;
}
.btn-container .icon-button {
    max-width: calc(30% - 12px) !important;
}
.btn-container .icon-button svg {
    flex-shrink: 0;

}
.lodging-head {
    margin-top: 24px;
    margin-bottom: -32px;
}

/* banner scroller */
.full-banner {
    overflow-x: hidden;
}
.banner-scroller {
    overflow: hidden; /* Disable all scrolling */
    padding: 24px;
    width: 100%;
    position: relative; /* For proper child positioning */
}

.banner-items-wrapper {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 24px !important;
    transition: none !important; /* No CSS transitions, JS controls animation */
    will-change: transform; /* Optimize for transforms */
}
.banner-scroller-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    width: 30vw;
    height: 250px;
    min-width: 250px;
    max-width: 400px;
    flex-shrink: 0;
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.2s ease;
}
.banner-scroller-item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    position: relative;
    z-index: 2;
    height: calc(100% - 24px);
    width: calc(100% - 24px);
    padding: 12px;
    background: linear-gradient(to bottom, #1a1a1a00, #1a1a1a);
    color: var(--offWhite);
    transition: all 0.2s ease;
}
.banner-scroller-item-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.banner-scroller-item-header h3 {
    font-size: 24px;
    letter-spacing: calc(-0.03 * 24px);
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
}

.banner-scroller-item-header p {
    font-size: 14px;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--accountingGrey);
}

.banner-scroller-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 0;
}
.banner-scroller-item-description {
    opacity: 0;
    transition: all 0.2s ease;
    top: 250px;
    position: absolute;
}
.banner-scroller-item:hover {
    transform: scale(1.02);
    transition: all 0.2s ease;
    z-index: 10;
}
.banner-scroller-item:hover .banner-scroller-item-content {
    background: linear-gradient(to bottom, #1a1a1a99 -20%, #1a1a1a);
    transition: all 0.2s ease;
    justify-content: flex-start;
    box-shadow: 0px 8px 24px var(--newBlackTrans),
                inset -4px -4px 8px var(--newBlackTrans),
                inset 4px 4px 8px var(--pureWhiteTrans);
    border-radius: 24px;
}
.banner-scroller-item:hover .banner-scroller-item-description {
    opacity: 1;
    position: relative;
    top: auto;
    transition: all 0.2s ease;
    color: var(--accountingGrey);
}
.rope-separator {
    width: calc(100% - 24px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
}
.rope-separator img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 620px;
}
@media (max-width: 1100px) {
    .cta-header h3 {
        font-size: 16px;
        letter-spacing: calc(-0.03 * 16px);
    }
    .preferred-lodging {
        padding: 12px;
    }
    #sailva250 div:not(.sail250va-video) {
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        gap: 24px;
        width: calc(100% - 48px);
        order: 1;
    }
    .btn-container .icon-button {
        max-width: calc(100% - 12px) !important;
    }
    .hubspot-cta {
        flex-direction: column-reverse;
        gap: 24px;
    }
    .standard-form {
        width: 100%;
    }
    .hs-form-frame {
        width: 100%;
    }
    .hubspot-cta-content {
        width: calc(100% - 48px);
        text-align: center;
        flex-direction: column-reverse;
    }
    .hubspot-cta-content h2, .hubspot-cta-content h3 {
        text-align: center;
        margin: 0 auto;
    }
    #sailva250 {
        flex-direction: column;
        gap: 24px;
        padding: 24px;
    }
    #sailva250 div {
        width: 100%;
    }
    #sailva250 video {
        border-radius: 12px !important;
        border-right: 2px solid var(--accountingGrey) !important;
    }
    .cta {
        flex-direction: column;
        gap: 32px;
    }
    .cta-content {
        width: 100%;
    }
    .cta-graphic {
        width: 100%;
    }
    .cta h2 {
        font-size: 32px;
        letter-spacing: calc(-0.03 * 32px);
    }
    .water-cta {
        flex-direction: column-reverse;
    }
    .full-banner {
        flex-direction: column;
    }
    .full-banner h2 {
        font-size: 32px;
        letter-spacing: calc(-0.03 * 32px);
    }
    .banner-scroller {
        padding: 12px;
    }
  
    .hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        padding-bottom: 24px;
        padding-top: 100px;
    }
    .hero-logo {
        width: 100%;
        max-width: 600px;
    }
    .hero-image {
        margin-top:0px;
        max-width: 560px;
    }
    .hero-image img {
        width: 100%;
    }
    .hero-content {
        margin-left: 0;
    }
    .hero h1 {
        font-size: 32px;
        letter-spacing: calc(-0.03 * 32px);
    }
    .hero h1 i {
        font-size: 18px;
        letter-spacing: calc(-0.03 * 18px);
    }
    .button p {
        font-size: 16px !important;
    }
    .ahoy-matey {
        top: 30px;
        right: 20px;
        width: 200px;
    }
    .explore-content {
        flex-direction: column;
        gap: 24px;
    }
    .explore-content article {
        width: 90%;
        max-width: 500px;
    }
    .explore-content article h3 {
        font-size: 32px;
        letter-spacing: calc(-0.03 * 32px);
    }
    .explore-content article p {
        font-size: 16px;
    }
    .explore-content article p a {
        font-size: 18px;
    }
    .gallery-head {
        flex-direction: column;
    }
    .gallery-head-text {
        width: 100%;
    }
    .cta-content-head h3 {
        font-size: 24px;
        letter-spacing: calc(-0.03 * 28px);
    }
    .cta-content-head a {
        margin: 0;
    }
    .hero-image h2 {
        font-size: 36px;
    }
    .lodging-head h2 {
        font-size: 32px;
        letter-spacing: calc(-0.03 * 32px);
    }
    .lodging-head h3 {
        font-size: 18px;
        letter-spacing: calc(-0.03 * 18px);
    }
}


@media (max-width: 768px) {
    
    .lodging-content .icon-button p {
        font-size: 12px !important;
    }
    .hero-image h2 {
        font-size: 28px;
    }
    .lodging-option {
        height: 375px;
    }
    .pref-lodging .lodging-option {
        width: 300px;
    }
    .alt-lodging .lodging-option {
        width: 280px;
    }
    .lodging-option-head h3 {
        font-size: 14px;
        letter-spacing: calc(-0.03 * 14px);
    }
    .lodging-option-head {
        gap: 6px;
    }
    .small-button p span{
        font-size: 12px !important;
    }
    
    .banner-scroller-item-header h3 {
        font-size: 20px;
        letter-spacing: calc(-0.03 * 20px);
    }
    .banner-scroller-item-header p {
        font-size: 12px;
    }
}
@media (max-width: 400px) {
    
    .hero h1 {
        font-size: 24px;
    }.hero-image h2 {
        font-size: 20px;
    }
    .hero h1 i {
        font-size: 14px;
        letter-spacing: calc(-0.03 * 14px);
    }
}