.combinedHeader {
  display: grid;
  grid-template-areas: 'headerImg';
  anchor-name: --mainHeader;
}

.combinedHeader img {
  grid-area: headerImg;
}

.leftLogo {
  width: auto;
  justify-self: flex-start;
  z-index: 3;
  margin-top: 1em;
  aspect-ratio: 305 / 116;
}

.combinedHeader > .leftLogo {
  margin-left: 2em;
}

.fullBanner {
  aspect-ratio: 1367/209;
  max-width: 100%;
  max-height: 209px;
}

.shadedBox {
  background-color: white;
}

.mainNavBar {
  background-image: linear-gradient(to bottom, transparent, transparent 25px, var(--deepTeal, #CCCCCC) 25px, var(--deepTeal, #CCCCCC) 50px, transparent 50px);
  anchor-name: --mainNavBlock;
  display: flex;
  justify-content: space-around;
}

.navbarMiddle {
  position: absolute;
  position-anchor: --mainHeader;
  top: calc(anchor(bottom) - 60px);
  left: anchor(left);
  right: anchor(right);
  width: 520px;
}


.navbarSmall {
  grid-area: navbar;
  /*  width: clamp(300px, 75%, 800px);*/
  margin-block: 1em;
}

.navLink {
  display: inline-grid;
  justify-items: center;
  grid-template-areas: 'spacer' 'text' 'indicator';
  grid-template-rows: 25px 25px 22px;
  margin-inline: .5em;
  color: white;
}

.navLink.active {
  grid-template-areas: 'indicator' 'text' 'spacer'
}

.navLink .navLabel {
  grid-area: text;
  text-decoration: none;
}

.navLink .navSpacer {
  grid-area: spacer;
  height: 100%;
  display: block;
}

.navLink img {
  grid-area: indicator;
}

h2 {
  text-wrap: balance;
}


.travelPage {
  display: grid;
  grid-template-areas: 'leftImage logo' 'leftImage navbar' 'leftImage content' 'leftImage footer' 'leftImage empty';
  grid-template-columns: max-content 1fr;
  column-gap: 0.5em;
  row-gap: .5em;
}

.leftMainImage {
  grid-area: leftImage;
  height: 100%;
  font-size: 0;
  position: sticky;
  top: 0;
}

.leftMainImage img {
  position: sticky;
  top: 0;
  height: 100vh;
  aspect-ratio: 543 / 775;
}

.travelCopy {
  display: flex;
  text-align: left;
}

.travelImages {
  display: grid;
  grid-template-areas: 'topImage' 'overlap' 'bottomImage';
  grid-template-rows: 175px 45px 175px;
}

.firstTravel {
  grid-row-start: topImage;
  grid-row-end: overlap;
  grid-column: topImage;
  max-height: 220px;
}

.secondTravel {
  grid-row-start: overlap;
  grid-row-end: bottomImage;
  grid-column: bottomImage;
  max-height: 220px;
}

.homePage {
  display: grid;
  grid-template-areas: 'leftImage navbar rightSpacer' 'leftImage content rightSpacer' 'leftImage footer rightSpacer' 'leftImage empty rightSpacer';
  grid-template-columns: max-content 1fr minmax(auto, 150px);
  grid-template-rows: 118px auto;
  column-gap: 1em;
  row-gap: .5em;
  /*Position palms and flowers as background images*/
  background-image: url(/Images/2027/Home-BG.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-attachment: fixed;
  background-size: contain;
  background-origin: padding-box;
}

.foregroundImage {
  grid-area: leftImage;
  grid-row: 1;
  z-index: 5;
  text-align: center;
  margin-block: 0;
  margin-inline: auto;
  position: sticky;
  top: 0;
}

.qualification {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, min-content);
  gap: 0 2em;
}

.qualification > li {
  text-wrap: pretty;
}

.columnOne {
  grid-column: 1;
  grid-row: auto;
}

.columnTwo {
  grid-column: 2;
  grid-row: auto;
}

.spanRows {
  grid-row-start: 1;
  grid-row-end: -1;
}

.termsLink {
  text-align: center;
  margin-inline: auto;
  align-self: center;
  text-decoration: none;
  display: block;
  padding: .25em;
}

.termsLink a {
  text-decoration: none;
  display: inline-block;
  padding: .25em;
}

.termsLink a:is(:hover,:focus-visible) {
  background-color: hsl(0deg 0% 95% /.35);
}

.middleAlign {
  vertical-align: middle;
}

.narrowTC {
  text-decoration: none;
  max-width: 12ch;
  display: inline-block;
  margin-left: .5em;
}

#myVideo {
  margin: auto;
  text-align: center;
}

#myVideo > iframe {
  background-color: var(--deepTeal, white);
  padding: 3px;
}

.text-danger {
  display: block;
}