/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge add Firefox */
.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none; /* Firefox */
}

html{
  scroll-behavior: smooth;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
  font-family: 'Montserrat';
}

body
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 100%;
}

h1
{
  color: white;
  text-align: center;
  font-family: 'Montserrat';
}

p
{
  font-family: 'Montserrat';
  color: #299CCC;
  font-size: 1.25rem;
}

img
{
  pointer-events: none;
}

a
{
  cursor: default;
}

.welcome
{
  display: flex;
  flex-direction: row;
  background: white;
  min-height: 100svh;
  width: 90%;
  min-width: 1024px;
  max-width: minOf(1920px, 100%);
  padding: 1rem 10%;
  justify-content: space-between;
  font-size: 1rem;
  align-items: center;
}

.welcome > #left
{
  width: 55%;
}

.welcome > #left > img
{
  max-width: 100%;
}

.welcome > #left > p
{
  max-width: 100%;
}


.welcome > #right
{
  width: 35%;
  align-items: center;
}

.welcome > #right > img
{
  max-width: 100%;
}

.welcome > #left > .buttons
{
  display: flex;
  flex-direction: row;
  padding-top: 188px;
  gap: 24px;
  width: 100%;
}

.welcome > #left > .buttons > a > .button
{
  font-size: large;
}

.experience {
  display: flex;
  flex-direction: column;
  background: #ECFAFF;
  min-height: 110svh;
  width: 100%;
  padding: 10svh 0px;
  align-items: center;
}

.experience > h1 {
  color: #07374B;
}

.experience > img {
  padding-left: 64px;
  width: 80%;
}

.footer
{
  display: flex;
  flex-direction: column;
  background: black;
  width: 100%;
  padding: 24px 0px;
  align-items: center;
}

.footer > p
{
  font-family: 'Montserrat';
  font-weight: 400;
  color: white;
  font-size: 1rem;
  padding-top: 8px;
}

.footer > img
{
  height: 1.5rem;
}

.bubble
{
  width: 100%;
}

.desktop
{
  display: flex;
  flex-direction: column;
}

.mobile
{
  display: none;
}

.button {
  padding: 16px 40px;
  background-color: white;
  color: black;
  border: 2px solid #555555;
  border-radius: 28px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button:hover {
  background-color: #555555; /* Green */
  color: white;
}


@media (max-width:992px)
{

  .welcome
  {
    min-height: 50svh;
    flex-direction: column;
    justify-content: center;
    padding: 64px 0;
    max-width: 100%;
    min-width: 0;
  }

  

  .welcome > #left
  {
    width: 75%;
  }

  .welcome > #left > .buttons
  {
    padding: 96px 0;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .welcome > #left > .buttons > a >.button
  {
    width: 50svw;
  }

  .welcome > #right
  {
    width: 100%;
    align-items: center;
    padding-top: 64px;
    align-content: center;
    padding-top: 32px;
  }

  .welcome > #right
  {
    width: 50%;
    align-items: center;
  }

  .experience {
    min-height: 50svh;
  }

  .experience > h1 {
    padding-bottom: 32px;
  }

  .experience > img {
    padding-left: 81px;
    width: 95svw;
    max-width: 100%;
  }

  .footer > p
  {
    font-size: 0.25rem;
    width: 100%;
    text-align: center;
  }

  .desktop
  {
    display: none;
  }

  .mobile
  {
    display: flex;
    flex-direction: column;
  }

}