@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,600;0,700;0,800;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,600;0,700;0,800;1,500&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@800&family=Cal+Sans&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@456&display=swap');

.be-vietnam-pro-semibold {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.be-vietnam-pro-bold {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.be-vietnam-pro-extrabold {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.be-vietnam-pro-medium-italic {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 500;
  font-style: italic;
}
.cal-sans-regular {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.inter-tight-regular {
  font-family: "Inter Tight", sans-serif;
  font-optical-sizing: auto;
  font-weight: 456;
  font-style: normal;
}

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.initial {
    background-image: url('./steps1.svg');
    height:auto;
    width:100%;
    background-size: cover;
    background-repeat: no-repeat;
}

body {
    background-color: #1f0912;
    margin: 0;
}

.main {
    display: grid;
    place-items: center;
    align-content: center;
    padding: 5%;
}

.title {
    color: white;
    font-size: xx-large;
    padding: 5%;
}

.container {
    background-color: white;
    border-radius: 25px;
    width: auto;
    height: fit-content;
    padding: 10%;
}

.container > h1 {
    font-size: xx-large;
    font-family: "Cal Sans", sans-serif;
}
.container > h2{
    font-size: large;
    font-family: "Inter Tight", sans-serif;
}
.container > img {
    width: auto;
    height: auto\9;
    max-width: 100%
}

.hidden {
    opacity: 0;
    transition: all 1s;
    
    filter: blur(10px);
    transform: translateX(-40%);
}

.show {
    filter: blur(0);
    transform: translateX(0);
    opacity: 1;
}
.bold { font-size: larger; font-weight: bolder; }

.finallink {
    padding:5%;
    color: black;
    background-color: white;
    font-family: "Be Vietnam Pro", sans-serif;
    cursor: pointer;

} 

.videocontainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}

/* Default: desktop/laptop */
.videocontainer {
  padding-top: 56.25%; /* 16:9 */
}

/* Tablet */
@media (max-width: 1024px) {
  .videocontainer {
    padding-top: 66.66%; /* 3:2 */
  }
}

/* Mobile */
@media (max-width: 768px) {
  .videocontainer {
    padding-top: 75%; /* 4:3 */
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .videocontainer {
    padding-top: 100%; /* 1:1 */
  }
}

/* iframe styling */
.videocontainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}