*{
  cursor: none;
}

:root {
  /* colors */
  --black: #000000;
  --white: #ffffff;
  --gray: #bbbbbb;

  /* font-family */
  --default--font-family: 'helvetica';
  --logo--font-family: 'corpar';
  --sub-font-family: "Livvic", sans-serif;

  /* font-size */
  --title-font-size: 3.5rem;
  --subtitle-font-size: 2rem;
  --accent--font-size: 1.3rem;
  --normal-font-size: 1rem;
  --desc-font-size: 0.75rem;

  /* shadow */
  --box-shadow: 0 0 10px rgba(0, 0, 0, .1);

  /* texts */
  --default-letter-space: 0.1rem;
  --default-line-height: 2.5rem;
}

html{
  margin: 0;
  padding: 0;
  font-size: 87.5%;
  cursor: none !important;
}
body{
  margin: 0;
  padding: 0;
  cursor: none !important;
  background-color: var(--white);
}
div{
  box-sizing: border-box;
  cursor: none !important;
}
h1,h2,h3,h4,h5,h6,p,a,li{
  font-family: var(--font-family-main);
  margin: 0;
  cursor: none !important;
}
h1,h2,h3,h4,h5,h6{
  font-size: 1rem;
  font-weight: normal;
}

a{
  text-decoration: none;
  cursor: pointer;
}
ul{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}



@font-face {
  font-family:"helvetica";
  src:url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf") format("woff"),
  url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf") format("opentype"),
  url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf") format("truetype");
}

@font-face {
  font-family: 'corpar';
  src: url('../fonts/corpar/Cropar.otf');
}





















header{
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);

  width: fit-content;
  height: 20px;

  z-index: 5000;
  transition: 1s ease;
}
  .header__inner{
    width: fit-content;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
    .header__inner h1{
      font-size: 20px;
      font-family: var(--logo--font-family);
      letter-spacing: 0.4rem;
    }
      .header__inner h1 a{
        color: var(--black);
        transition: 1s;
      }
      .header__inner h1 a.white{
        color: var(--white);
      }


.navigation__trigger{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);

  height: 60px;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  transition: 1s ease;
}
.navigation__trigger.on{
  position: fixed;
  bottom: 100px;
  height: 0;
  visibility: hidden;
}
  .navigation__trigger a{
    color: var(--black);
    letter-spacing: 0.3rem;
    opacity: 1;
    visibility: visible;
    transition: 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .navigation__trigger a svg{
    height: 20px;
  }
  .navigation__trigger a.white{
    color: var(--white);
  }
  .navigation__trigger a.white svg path{
    fill: var(--white);
  }
  .navigation__trigger.on a{
    opacity: 0;
    visibility: hidden;
  }

.navigation-container{
  position: fixed;
  bottom: -100px;

  width: 100%;
  height: 100px;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: 1s;
}
.navigation-container.on{
  bottom: 0px;
}
.navigation {
  position: relative;
  height: 40px;
  width: 150px;
  background-color: black;
  padding: 0 40px;
  border-radius: 34px;
  transition: all 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);

  overflow: hidden;
}
.navigation.glas{
  background: rgba(0, 0, 0, 0.43);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10.5px);
  -webkit-backdrop-filter: blur(10.5px);
}
.navigation.bubble{
  height: 76px;
  width: 711px;
  padding: 0 60px;
  border-radius: 38px;
  transition: all 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.navigation.active{
  height: 68px;
  width: 711px;
  padding: 0 40px;
  border-radius: 34px;
  transition: all 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
  .navigation .navigation__inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    
    height: 40px;
    width: 150px;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    visibility: hidden;

    transition: all 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  }
  .navigation.bubble .navigation__inner{
    height: 76px;
    width: 711px;
    opacity: 0;
    visibility: visible;
  }
  .navigation.active .navigation__inner{
    height: 68px;
    width: 711px;
    opacity: 1;
    visibility: visible;
  }
    .navigation .navigation__page__control,
    .navigation .vertical-line,
    .navigation .navigation__visual__contorol{
      -webkit-filter: blur(50px);
      filter: blur(50px);
      transition: all 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }
    .navigation.active .navigation__page__control,
    .navigation.active .vertical-line,
    .navigation.active .navigation__visual__contorol{
      -webkit-filter: blur(0px);
      filter: blur(0px);
    }
    .navigation__page__control{
      height: 100%;
      width: 500px;

      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
    }
      .navigation__page__control__language{
        height: 100%;
        display: flex;
        justify-content: left;
        align-items: center;
        gap: 15px;
        color: var(--white);
      }
            .navigation__page__control__language .label {
              position: relative;
              display: inline-flex;
              align-items: center;
              cursor: pointer;
              background-color: #dddddd;
              height: 40px;
              padding: 0 10px;
              border-radius: 20px;
            }
            .navigation__page__control__language .toggle {
              isolation: isolate;
              position: relative;
              height: 30px;
              width: 60px;
              border-radius: 15px;
              overflow: hidden;
            }
            .navigation__page__control__language .toggle-state {
              display: none;
            }
            .navigation__page__control__language .indicator {
              height: 100%;
              width: 200%;
              background: #000000;
              border-radius: 15px;
              transform: translate3d(-75%, 0, 0);
              transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
            }
            .navigation__page__control__language .toggle-state:checked ~ .indicator {
              transform: translate3d(25%, 0, 0);
            }
            .navigation__page__control__language p{
              font-size: var(--desc-font-size);
              text-wrap: nowrap;
            }
      ul.navigation__page__control__links{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 25px;
      }
          .navigation__page__control__links li a{
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
          }
            .navigation__page__control__links li a img{
              height: 25px;
            }
            .navigation__page__control__links li a video{
              height: 25px;
            }
            .navigation__page__control__links li a p{
              text-wrap: nowrap;
              color: var(--white);
            }
    .navigation__inner .vertical-line{
      width: 0;
      height: 40px;
      margin: 0 20px;
      border-left: 1px solid var(--white);
    }
    .navigation__visual__contorol{
      width: 170px;
      height: 44px;
    }
      .navigation__visual__contorol__inner{
        position: relative;
        width: 100%;
        height: 100%;
      }
        .navigation__visual__contorol__inner__visual{
          position: relative;
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
          .navigation__visual__contorol__inner__visual img{
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
            opacity: 0;
            transition: 0.3s;
          }
          .navigation__visual__contorol__inner__visual img.active{
            opacity: 1;
          }
        .navigation__visual__contorol__inner__control{
          position:absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);

          height:36px;
          width: 100px;
          display:flex;
          justify-content:center;
          align-items:center;
          pointer-events:auto;
        }
          .navigation__visual__contorol__inner__control .controls{
            width: 100%;
            height: 100%;

            display: flex;
            justify-content: end;
            align-items: center;
          }
            .navigation__visual__contorol__inner__control .controls .play-btn {
              height: 36px;
              width: 36px;

              display: flex;
              align-items: center;
            }
              .btn__icon__box{
                position: relative;
                width: 28px;
                height: 28px;
                
                border-radius: 50%;
                
                background: rgba(255, 255, 255, 0.15);
                border-radius: 16px;
                box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                backdrop-filter: blur(2px);
                -webkit-backdrop-filter: blur(2px);

                transition: 0.5s;
              }
              .navigation__visual__contorol__inner__control .controls a:hover .btn__icon__box{
                background: rgba(255, 255, 255, 0.3);
                border-radius: 16px;
                box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);  
              }
                .btn__icon__box img{
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  -webkit-transform: translate(-50%, -50%);
                  -ms-transform: translate(-50%, -50%);

                  height: 10px;
                  width: auto;
                }
                .navigation__visual__contorol__inner__control .controls .play-btn .btn__icon__box img{
                  opacity: 0;
                }
                .navigation__visual__contorol__inner__control .controls .play-btn .btn__icon__box img.active{
                  opacity: 1;
                }
      









@media screen and (max-width: 440px){
  .header__inner h1{
    font-size: 20px;
    text-wrap-mode: nowrap;
  }

.navigation.bubble{
  width: 100vw;
  padding: 0 15px;
}
.navigation.active{
  width: calc(100vw - 40px) !important;
  padding: 0 10px;
}
  .navigation.bubble .navigation__inner{
    width: 100vw;
  }
  .navigation.active .navigation__inner{
    width: calc(100vw - 20px);
  }
  .navigation__inner .vertical-line{
    margin: 0 10px;
  }
    .navigation__page__control{
      width: 100%;
      padding: 0 30px;
      justify-content: space-around;
      gap: 10px;
    }
    ul.navigation__page__control__links{
      gap: 30px;
    }
        .navigation__page__control__links li a p{
          display: none;
        }
        .navigation__page__control__language p{
          display: none;
        }
    .navigation__visual__contorol{
      width: 100px;
      height: 44px;
    }
}