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

    body {
      font-family: sans-serif;
      background: #1E284F;
    }

.skip-link {
color:#ffffff;
position:absolute;
top:-100px;
  transform: translateY(-100%);
height:0;
}

.skip-link:focus-within {
position:absolute;
top:0px;
  transform: translateY(0%);
height:20px;
z-index:99999999999;
}

a:link{color:#b0a381;text-decoration:none;}
a:visited{color:#b0a381;text-decoration:none;}
a:hover{color:#b0a381;text-decoration:none;}

a.f:link{color:#ffffff;text-decoration:none;transition:.3s ease-out;}
a.f:visited{color:#ffffff;text-decoration:none;}
a.f:hover{color:#ffffff;text-decoration:none;opacity: 0.7;
  filter: alpha(opacity=70); /* For IE8 and earlier */}

a.white:link{color:#cccccc;text-decoration:none;}
a.white:visited{color:#cccccc;text-decoration:none;}
a.white:hover{color:#cccccc;text-decoration:none;}

a.navvy:link{color:#cccccc;text-decoration:none;transition:.3s ease-out;}
a.navvy:visited{color:#cccccc;text-decoration:none;}
a.navvy:hover{color:#b0a381;text-decoration:none;}

    nav {
      position: sticky;
      top: 0;
      z-index: 1000;
background: rgba(30, 40, 79, 0.7);
border-bottom:1px solid #b0a381;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background 0.3s ease, backdrop-filter 0.3s ease;
    }

/* Sticky appearance when user scrolls */
nav.sticky {
background: rgba(30, 40, 79, 0.7);
border-bottom:1px solid #b0a381;

}

    .logo {
      font-weight: bold;
      font-size: 1.5rem;
      color: white;
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    nav.sticky .logo {
      opacity: 1;
    }

    .hamburger {
      cursor: pointer;
      width: 30px;
      height: 22px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 1100;
    }

    .hamburger span {
      display: block;
      height: 4px;
      background: #cccccc;
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    .hamburger.open span:nth-child(1) {
      transform: translateY(9px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
      opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
      transform: translateY(-9px) rotate(-45deg);
    }

    .menu {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: 300px;
background: rgba(19, 26, 51, 0.8);
      color: white;
      padding: 2rem 1.5rem;
      transform: translateX(100%);
      transition: transform 0.3s ease, opacity 0.3s ease;
      opacity: 0;
      pointer-events: none;
      z-index: 1050;
    }

    .menu.show {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }

    .menu-content {
      margin-top: 3rem;
color:#ffffff;font-family: 'Oswald', sans-serif;
font-weight:200;
font-size:1.4em;
line-height:2em;
    }

    .menu-content > * + * {
      margin-top: 1rem;
    }

    /* SVG Close Button */
    .close-btn {
      position: absolute;
      top: 2rem;
      right: 2rem;
      width: 24px;
      height: 24px;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
    }

    .close-btn svg {
      width: 100%;
      height: 100%;
      stroke: white;
      stroke-width: 2.5;
      stroke-linecap: round;
      transition: opacity 0.2s ease;
    }

    .close-btn:hover svg {
      opacity: 0.7;
    }

.vimeo-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.embed-container {
  position: relative;
top:-85px;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
border-bottom:1px solid #cccccc;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.foot1, .foot2, .foot3{
width:28%;
margin:0 auto;
display:inline-block;
vertical-align:top;
color:#cccccc;font-family: 'Oswald', sans-serif;
font-weight:200;
}

.butnew{
display:inline-block;width:20%;margin:0 auto;padding:10px 20px;
border:1px solid #b0a381;

text-align:center;color:#b0a381;
font-family: 'Oswald', sans-serif;
transition: background-color 0.5s ease;
}

.butnew:hover{
background-color:#b0a381;
color:#1E284F;
}

.resbutton{
position:absolute;
display:block;
top:22px;
right:100px;
margin:0 auto;
padding:10px 30px;
border:1px solid #b0a381;
text-align:center;
color:#b0a381;
font-family: 'Oswald', sans-serif;
font-size:.9em;
background-color: #1E284F; 
transition: background-color 0.5s ease;
}

.resbutton:hover{
background-color:#b0a381;
color:#1E284F;
}

button.sign{
margin:0 auto;
padding:10px 30px;
border:1px solid #b0a381;
text-align:center;
color:#b0a381;
font-family: 'Oswald', sans-serif;
font-size:.9em;
background-color: #1E284F; 
transition: background-color 0.5s ease;
}

button.sign:hover{
background-color:#b0a381;
color:#1E284F;
}

.sketch{
float:right;width:45%;padding:0 0 30px 30px;
}

@media (max-width: 768px) {

.foot1, .foot2, .foot3{
width:100%;
margin:0 auto 50px auto;
display:inline-block;
vertical-align:top;
color:#cccccc;font-family: 'Oswald', sans-serif;
font-weight:200;
}

.butnew{
display:inline-block;width:80%;margin:5px 10%;padding:10px 0;
border:1px solid #b0a381;
text-align:center;
color:#b0a381;
font-family: 'Oswald', sans-serif;
}

.butnew:hover{
background-color:#b0a381;
color:#1E284F;
}

.resbutton{
display:none;
}

.sketch{
width:90%;margin:0 5%;
}

}

.three-column {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
width:80%;
margin:0 auto 30px auto;
}

.column {
  flex: 1;
  min-width: 250px;
  text-align: center;
color:#cccccc;font-family: 'Oswald', sans-serif;
font-weight:200;
font-size:.9em;
}

.left-text
 {
  text-align: left;
margin-left:5vw;
}

.right-text{
  text-align: right;
margin-right:5vw;
}

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

@media (max-width: 768px) {
  .three-column {
    flex-direction: column;
  }

  .center-image {
    order: 1;
  }

  .left-text {
    order: 2;
text-align:center;
margin:0;
  }

  .right-text {
    order: 3;
text-align:center;
margin:0;
  }
}