html { overflow-x: hidden; height: -webkit-fill-available; scroll-behavior: smooth; }
body { background-color: #fff; margin: 0; padding: 0; transition: opacity ease-out 400ms; font-family: "gyst-variable", sans-serif; }
html, body{ min-height: 100vh; }

.icon-scroll-container{
    position: absolute;
    bottom: 70px;
    height: 50px;
    width: 50px;
    z-index: 30;
    left: 290px;
}

.icon-scroll-container.hide{
    display:none;
}

.icon-scroll,
.icon-scroll:before {
  position: absolute;
  left: 50%;
}
.icon-scroll {
  width: 40px;
  height: 70px;
  margin-left: -20px;
  top: 50%;
  margin-top: -35px;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 25px;
}
.icon-scroll:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  margin-left: -4px;
  top: 8px;
  border-radius: 4px;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
          animation-name: scroll;
}
@-webkit-keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(46px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(46px);
  }
}


/* BASIC HTML */
.content-container, .part{
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100%;
}

/* PART 1 STYLES */
.part-1{
    max-height: 100vh;
    min-width: 720px;
    height: 100vh;
    width: 720px;
    padding-left: 100px;
}

.part-1 .content .spirale{
    width: 720px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
        overflow: hidden;
}

.part-1 .content .spirale img{
    width: 500px;
    animation: rotationspirale 30s infinite linear;
}

@keyframes rotationspirale {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.part-1 .p1-i1{position: absolute;top:-10px;}
.part-1 .p1-i1 img{width: 250px;}

.part-1 .p1-i2{position: absolute;top:40%;}
.part-1 .p1-i2 img{width: 200px;}

.part-1 .p1-i3{position: absolute;bottom:-10px;left: -10px;}
.part-1 .p1-i3 img{width: 250px;}

.part-1 .p1-i4{position: absolute;bottom: -10px;left: 400px;}
.part-1 .p1-i4 img{width: 550px;}

.part-1 .p1-i5{position: absolute;top:-10px;left: 450px;}
.part-1 .p1-i5 img{width: 450px;}

.part-1 .p1-i6{position: absolute;top:40%;left: 650px;z-index:1;}
.part-1 .p1-i6 img{width: 450px;transform: scaleX(-1);}


.part-1 .p1-i7{position: absolute;top:29%;left: 675px;}
.part-1 .p1-i7 img{width: 350px;transform: scaleX(-1);}

.part-1 .p1-i8{position: absolute;bottom:-10px;left: 950px;}
.part-1 .p1-i8 img{width: 200px;transform: scaleX(-1);}

.part-1 .p1-i9{position: absolute;bottom:-10px;left: 1100px;}
.part-1 .p1-i9 img{width: 200px;transform: scaleX(-1);}

.part-1 .p1-i10{position: absolute;top:15%;left: 675px;}
.part-1 .p1-i10 img{width: 250px;transform: scaleX(-1);}

.part-1 .p1-i11 {position: absolute;top: 10%;left: 975px;}
.part-1 .p1-i11 img{width: 250px;transform: scaleX(-1);}

/* PART 2 STYLES */
.part-2{
    max-height: 100vh;
    min-width: 500px;
    height: 100vh;
    padding-left: 500px;
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 20px;
}

.part-2 .content{
    width: 100%;
    text-align: left;
    white-space: normal;
    /* background-color: #2c7881; */
    padding-left: 50px;
}

.part-2 .content .qchat{
    text-align: left;
    white-space: normal;
    margin-top: 80px;
}

.part-2 .content .titleone{
    font-size: 30px;
    font-weight: bold;
    color: #feefe9;
    line-height: 24px;
    margin-top: 20px;
    text-transform: uppercase;
}

.part-2 .content .tone{
    font-size: 22px;
    font-weight: normal;
    color: #feefe9;
    line-height: 24px;
    margin-top: 20px;
}

.part-2 .content .ttwo{
    font-size: 28px;
    font-weight: normal;
    color: #feefe9;
    line-height: 36px;
}




.part-2 .content .p2-t1{

}
.part-2 .content .p2-t1 img{
    width:400px;
}

.part-2 .content .p2-t2{
    margin: 45px 0 0 0;
}
.part-2 .content .p2-t2 img{
    width:400px;
}


/* END : PART 2 STYLES */

/* PART 3 STYLES */

.part-3{
    max-height: 100vh;
    min-width: 500px;
    height: 100vh;
    width: 639px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-left: 300px;
    padding-right: 300px;
    padding-top: 20px;
}
.part-3 .content{
    width: 100%;
    text-align: center;
    background-color: #2c7881;
}

.part-3 .content .p3-t1{

}

.part-3 .content .btn-v{
    margin-top:30px;
}

.part-3 .content .btn-v a{
    text-transform: uppercase;
    text-decoration:none;
    display: inline-block;
    border:1px solid #feefe9;
    padding: 8px 20px 2px 20px;
    border-radius:10px;
    font-size: 30px;
    font-weight: bold;
    transition: all 0.5s ease-out;
    color:#ffe36e;
    background-color: #2c7881;
    margin-top: 80px;
    z-index: 10;
    position: relative;
    animation: glowing 3500ms infinite;
}

.part-3 .content .btn-v a:hover{
    color:#feefe9;
    background-color: #2c7881;
}

@keyframes glowing {
  0% { box-shadow: 0 0 -10px #ffffff; }
  40% { box-shadow: 0 0 20px #ffffff; }
  60% { box-shadow: 0 0 20px #ffffff; }
  100% { box-shadow: 0 0 -10px #ffffff; }
}

.part-3 .content .p3-t1 img{
    width:400px;
}


.part-3 .content .titleone{
    font-size: 30px;
    font-weight: bold;
    color: #feefe9;
    line-height: 24px;
    margin-bottom: 60px;
    text-transform: uppercase;
}


.part-3 .content .qchat{
    font-size: 22px;
    font-weight: normal;
    color: #feefe9;
    line-height: 24px;
    margin-top: 20px;
    text-align: left;
    white-space: normal;
    display: flex;
    flex-direction: column;
}


.part-3 .content .qchat div:nth-child(even){
    text-align: left;
}

.part-3 .content .qchat div:nth-child(odd){
    text-align: right;
}

.part-3 .content .qchat div:nth-child(even) div{
    text-align: center;
    display: inline-block;
}

.part-3 .content .qchat div:nth-child(odd) div{
    text-align: center;
    display: inline-block;
}

.cloudy-1{
    /* color:#2c7881; */
}

.cloudy-1 img{
    position: absolute;
        object-fit: cover;
}


.part-3 .p3-i1{position: absolute;top:-10px;}
.part-3 .p3-i1 img{width: 250px;}

.part-3 .p3-i2{position: absolute;top:40%;}
.part-3 .p3-i2 img{width: 200px;}

.part-3 .p3-i3{position: absolute;bottom:-10px;right: -10px;}
.part-3 .p3-i3 img{width: 250px;transform: scaleX(-1);}

.part-3 .p3-i4{position: absolute;bottom: -10px;left: 0px;}
.part-3 .p3-i4 img{width: 550px;}

.part-3 .p3-i5{position: absolute;top:-10px;right: -20px;}
.part-3 .p3-i5 img{width: 450px;transform: scaleX(-1);}

.part-3 .p3-i6{position: absolute;
    top: 40%;
    right: -50px;
    z-index: 1;}
.part-3 .p3-i6 img{width: 450px;transform: scaleX(-1);}


.part-3 .p3-i7{position: absolute;
    top: 25%;
    right: -50px;}
.part-3 .p3-i7 img{width: 350px;transform: scaleX(-1);}

.part-3 .p3-i8{position: absolute;bottom:-10px;left: 950px;}
.part-3 .p3-i8 img{width: 200px;transform: scaleX(-1);}

.part-3 .p3-i9{position: absolute;bottom:-10px;left: 1100px;}
.part-3 .p3-i9 img{width: 200px;transform: scaleX(-1);}

.part-3 .p3-i10{position: absolute;top:15%;left: 30px;}
.part-3 .p3-i10 img{width: 250px;transform: scaleX(-1);}

.part-3 .p3-i11 {position: absolute;top: 18%;left: 20px;}
.part-3 .p3-i11 img{width: 250px;}

/* END : PART 3 STYLES */
.part{
  &-1{
      background-color: #ECC9F7;
      color: #2A66E1;
      justify-content: center;
      align-items: center;

  }
  &-2{
    background-color: #E9E1E5;
    color: #83448F;
    justify-content: center;
    align-items: center;
  }
  &-3{
    background-color: #306EDE;
    color: #F3ECCF;
    justify-content: center;
    align-items: center;
  }
}

/* BASIC HTML */





// LOCOMOTIVE CSS (WILL NOT WORK WITHOUT THIS)
/*! locomotive-scroll v4.1.0 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
  overflow: hidden; }

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

  .color-rose{
      color:#d866a3;
  }
  .color-yellow{
      color:#ffe36e;
  }
  .color-blue{
      color:#63b3cc;
  }
  .color-orange{
      color:#f18440;
  }

.has-scroll-smooth body {
  overflow: hidden; }

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh; }

[data-scroll-direction="horizontal"] [data-scroll-container] {
  white-space: nowrap;
  height: 100vh;
  display: inline-block;
  white-space: nowrap; }

[data-scroll-direction="horizontal"] [data-scroll-section] {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  height: 100%; }

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100%;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0; }
  .c-scrollbar:hover {
    transform: scaleX(1.45); }
  .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {
    opacity: 1; }
  [data-scroll-direction="horizontal"] .c-scrollbar {
    width: 100%;
    height: 10px;
    top: auto;
    bottom: 0;
    transform: scaleY(1); }
    [data-scroll-direction="horizontal"] .c-scrollbar:hover {
      transform: scaleY(1.3); }

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: black;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab; }
  .has-scroll-dragging .c-scrollbar_thumb {
    cursor: -webkit-grabbing;
    cursor: grabbing; }
  [data-scroll-direction="horizontal"] .c-scrollbar_thumb {
    right: auto;
    bottom: 0; }