:root {
  --indian-red: #ed4264;
  --dark-khaki: #cab374;
  --dark-grey-2: #222;
  --moccasin: #ffedbc;
  --dark-grey: #b2b4b8;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Silk serif, sans-serif;
  font-size: 120px;
  font-weight: 600;
  line-height: 120px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Silk serif, sans-serif;
  font-size: 60px;
  font-weight: 300;
  line-height: 60px;
}

p {
  margin-bottom: 10px;
  font-family: Archivo, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.body {
  background-color: #ffdcc1;
  justify-content: center;
  align-items: center;
}

.ths12-hero-section {
  justify-content: center;
  align-items: stretch;
  min-height: 100vh;
  padding-left: 70px;
  padding-right: 70px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.ths12-header {
  z-index: 8;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  padding: 40px 70px;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.ths12-logo {
  width: 50px;
  margin-right: 15px;
}

.ths12-brand {
  z-index: 99;
  color: #fff;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-family: Archivo, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  display: flex;
}

.ths12-social-link {
  padding-top: 10px;
  padding-bottom: 10px;
}

.ths12-social-icon {
  width: 25px;
}

.ths12-menu-icon-bars-wrapper {
  opacity: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  display: flex;
  position: relative;
}

.ths12-menu-icon-bar {
  z-index: 5;
  background-color: #fff;
  width: 20px;
  height: 2px;
  margin-top: 3px;
  margin-bottom: 3px;
  position: relative;
}

.ths12-menu-icon-bg-hover-circle {
  background-color: #ffffff1a;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: absolute;
}

.ths12-menu-bg-circle {
  z-index: 7;
  background-color: #fffefe;
  border-radius: 50%;
  width: 3vw;
  height: 3vw;
  position: fixed;
  inset: -1.5vw -1.5vw auto auto;
}

.ths12-menu {
  z-index: 9;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: absolute;
  inset: -100% 0% 0%;
}

.ths12-menu-links-wrapper {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.ths12-menu-link {
  background-image: linear-gradient(to right, var(--indian-red), var(--dark-khaki));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Silk serif, sans-serif;
  font-size: 120px;
  line-height: 120px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.ths12-logo-dark {
  opacity: 0;
  width: 50px;
  margin-right: 15px;
  position: absolute;
  left: 0;
}

.ths12-logo-text {
  color: #000;
  text-transform: capitalize;
  font-family: Hello Roti, sans-serif;
  font-size: 55px;
}

.ths12-wrapper {
  z-index: 6;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1234px;
  display: flex;
  position: relative;
}

.ths12-heading-h1 {
  z-index: 1;
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
}

.ths12-heading-h1.ths12-margin-left {
  margin-left: 40px;
}

.ths12-cta-link {
  color: #fff;
  letter-spacing: .5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Archivo, sans-serif;
  font-size: 24px;
  line-height: 40px;
  text-decoration: none;
  display: flex;
}

.ths12-link-line-wrapper {
  background-color: #ffffff4d;
  width: 100%;
  height: 1px;
  overflow: hidden;
}

.ths12-link-hover-line {
  background-color: #fff;
  width: 0%;
  height: 1px;
}

.ths12-cta-links-wrapper {
  grid-column-gap: 100px;
  color: #fff;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: Bwgradualdemo;
  font-size: 24px;
  line-height: 40px;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: auto 0% 100px;
}

.ths12-menu-close-icon {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  display: flex;
  position: absolute;
  inset: 40px 50px auto auto;
}

.ths12-menu-close-icon-bar-wrapper {
  width: 30px;
}

.ths12-menu-close-icon-bar-wrapper.one {
  transform: rotate(45deg);
}

.ths12-menu-close-icon-bar-wrapper.two {
  position: absolute;
  transform: rotate(135deg);
}

.ths12-menu-close-icon-bar {
  background-color: var(--dark-grey-2);
  width: 100%;
  height: 2px;
}

.ths12-social-links-wrapper {
  opacity: 0;
}

.ths12-heading-bg-circle {
  border: 1px solid #ffedbc33;
  border-right-width: 3px;
  border-radius: 50%;
  width: 500px;
  height: 500px;
  position: absolute;
}

.ths12-heading-h1-span {
  border-bottom: 2px solid #ffedbc33;
}

.ths12-heading-h1-wrapper {
  justify-content: center;
  align-items: center;
  display: flex;
}

.ths12-overlay-1 {
  z-index: 5;
  background-image: linear-gradient(135deg, #ed426433, #cab37480), url('../images/ths12_bg_mesh_gradient_1.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  position: absolute;
  inset: 0%;
}

.ths12-overlay-2 {
  z-index: 5;
  background-image: linear-gradient(135deg, #ed426433, #cab37480), url('../images/ths12_bg_mesh_gradient_2.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  position: absolute;
  inset: 0%;
}

.ths12-overlay-3 {
  z-index: 5;
  background-image: linear-gradient(135deg, #ed426433, #cab37480), url('../images/ths12_bg_mesh_gradient_3.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  position: absolute;
  inset: 0%;
}

.ths12-overlay-4 {
  z-index: 5;
  background-image: linear-gradient(135deg, #ed426433, #cab37480), url('../images/ths12_bg_mesh_gradient_4.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  position: absolute;
  inset: 0%;
}

.ths12-overlay-5 {
  z-index: 5;
  background-image: linear-gradient(135deg, #ed426433, #cab37480), url('../images/ths12_bg_mesh_gradient_5.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  position: absolute;
  inset: 0%;
}

.ths12-menu-link-hover-line {
  background-image: linear-gradient(135deg, var(--indian-red), var(--dark-khaki));
  width: 100%;
  height: 4px;
  position: absolute;
  inset: 70px 0% auto;
}

.background-gradient {
  z-index: 0;
  background-color: #e1d9c0;
  position: absolute;
  inset: 0%;
}

.unmute-icon {
  width: 1em;
  height: 1em;
  font-size: 1.9em;
}

.text-block {
  color: #fff9e4;
  height: auto;
  font-family: Hello Roti, sans-serif;
  font-size: 25px;
}

.social-parent {
  z-index: 5;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  margin-top: 5vw;
  margin-bottom: 0;
  display: flex;
  position: absolute;
}

.play-pause--icon {
  width: 1em;
  height: 1em;
  font-size: 1.7em;
}

.video-play-pause-toggle {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 1.5em 1.5em auto auto;
}

.delete-background-wrapper {
  z-index: 0;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.section-video {
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  position: relative;
}

.custom-video-wrapper {
  z-index: 1;
  justify-content: center;
  align-items: center;
  margin-left: 60px;
  margin-right: 60px;
  display: flex;
  position: relative;
}

.contact {
  z-index: 7;
  color: #121214;
  text-align: center;
  background-color: #121214;
  border-radius: 20px;
  width: 200px;
  height: 40px;
  padding-top: 10px;
  position: static;
}

.video-pause-wrapper {
  z-index: 1;
  color: #121214;
  border-radius: 999em;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.desktop-background-lottie {
  width: 100vw;
  height: auto;
  transform: scale(1.2);
}

.video-play-wrapper {
  z-index: 0;
  color: #121214;
  border-radius: 999em;
  flex: none;
  justify-content: center;
  align-items: center;
  padding-left: .2em;
  display: flex;
  position: absolute;
  inset: 0%;
}

.video-vimeo-wrapper {
  width: 100%;
  height: 0;              /* <-- change from 0% to 0 */
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;       /* <-- change from visible to hidden */
}

.video-unmute-wrapper {
  z-index: 3;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  color: #121214;
  cursor: pointer;
  background-color: #ffffffb3;
  border-radius: 999em;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 7em;
  height: 7em;
  font-size: 1em;
  transition: all .25s cubic-bezier(.165, .84, .44, 1);
  display: flex;
  box-shadow: 0 10px 4em #00000073;
}

.video-unmute-wrapper:hover {
  transform: scale(1.2);
}

.video-unmute-wrapper:active {
  transform: scale(.95);
}

.video-play-pause-wrapper {
  background-color: #ffffffe6;
  border-radius: 999em;
  width: 5em;
  height: 5em;
  transition: all .25s;
}

.video-play-pause-wrapper:hover {
  transform: scale(1.2);
}

.video-play-pause-wrapper:active {
  transform: scale(.95);
}

.container-w1 {
  width: 100%;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}

.container-w1.gutter-outside {
  z-index: 2;
  width: 75vw;        /* <- your requirement */
  max-width: none;    /* <- remove the vh cap */
  margin: 0 auto;     /* <- center it */
  padding-left: 0;
  padding-right: 0;
  display: block;
  position: relative; /* <- don’t pin it with fixed */
}

.lottie-animation {
  z-index: 2;
  width: 30vw;
  height: 30vw;
  position: absolute;
}

.vimeo-player-overlay {
  pointer-events: none;
  background-color: #0000;
  position: absolute;
  inset: 0%;
}

.video-unmute-button {
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
}

.heading {
  z-index: 1;
  opacity: 0;
  color: #121214;
  position: absolute;
  top: 7.3vw;
}

.vimeo-embed {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0%;
  box-shadow: 10px 10px #0000004d;
}

.text-block-2, .text-block-3, .text-block-4 {
  font-family: Hello Roti, sans-serif;
}

.video {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

@media screen and (max-width: 991px) {
  .container-w1.gutter-outside {
    max-width: none;
    width: 75vw;
  }
}

  .desktop-background-lottie {
    position: static;
  }

  .video-play-wrapper:active {
    transform: scale(.9);
  }

  .video-unmute-wrapper:hover {
    transform: none;
  }

  .video-unmute-wrapper:active {
    transform: scale(.9);
  }

  .video-play-pause-wrapper:hover {
    transform: none;
  }

  .video-play-pause-wrapper:active {
    transform: scale(.9);
  }

  .container-w1.gutter-outside {
    max-width: 60vh;
  }

  .heading {
    top: 19.4vw;
  }
}

@media screen and (max-width: 767px) {
  .text-block {
    font-size: 1.5rem;
  }

  .video-play-pause-toggle {
    top: 1em;
    right: 1em;
  }

  .section-video {
    padding-top: 10em;
    padding-bottom: 10em;
  }

  .video-unmute-wrapper {
    font-size: .9em;
  }

  .video-play-pause-wrapper {
    font-size: .8em;
  }

  .heading {
    top: -28.4px;
  }
}

@media screen and (max-width: 479px) {
  .background-gradient {
    height: 100vh;
  }

  .text-block {
    font-size: 1.5rem;
  }

  .contact {
    height: 40px;
  }

  .desktop-background-lottie {
    height: 95vh;
    font-size: .5rem;
    position: absolute;
  }

  .heading {
    top: 10.6px;
  }
}

#w-node-_6df01e9f-66c4-a546-5328-f2d36a3a17e9-9c9745ef {
  justify-self: center;
}

#w-node-_453d7618-5b86-5e96-4c6f-47ed8ed1d416-9c9745ef {
  justify-self: end;
}

/* FORCE VIDEO CONTAINER TO 75% VIEWPORT */

.container-w1.gutter-outside {

  width: 75vw !important;
  max-width: 75vw !important;

  margin-left: auto;
  margin-right: auto;

  position: relative !important;

}


/* make sure wrapper fills container */

.video-vimeo-wrapper {

  width: 100% !important;

}


/* make iframe fill properly */

.video {

  width: 100% !important;
  height: 100% !important;

}

@font-face {
  font-family: 'Forte';
  src: url('../fonts/FORTE.TTF') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hello Roti';
  src: url('../fonts/Hello-Roti.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-Black-Italic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-Bold-Italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-ExtraLight-Italic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-Light-Italic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-Medium-Italic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-Regular-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silk serif';
  src: url('../fonts/Silk-Serif-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}