body {
    color: white;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.mainbg {
    background-image: url("../img/bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    height: 100vh;
    width: 100vw;

    overflow-y: scroll;
    overflow-x: hidden;
}


.section {
    height: 100vh;
}

.standardimg {
    width: 100%;
    height: auto;
}

.whitebg {
    background-color: white;
    color: black;
}

.curvedbg{
    border-radius: 1rem;
}



.fancybutton2 {
    border: 1px solid white;
    background-color: transparent;
    color: black;
    box-shadow: 0px 0px 8px #888888;
    transition: 0.5s;
    cursor: pointer;
}

.fancybutton2:hover {
    border: 1px solid #964a87;
    background-color: #964a87;
    color: white;
    box-shadow: 0px 0px 8px #964a87;
    transition: 0.5s;
     cursor: pointer;
}


.hideori {
  opacity: 0;
}

.hidetillscroll {
  opacity: 0;
}

.fadefromright1 {
  animation: 1s ease-in-out 0s 1 forwards SlideFromRight;
}

.fadefromleft1 {
  animation: 1s ease-in-out 0s 1 forwards slideInFromLeft;
}

.fadefromleft2 {
  animation: 1s ease-in-out 0.2s 1 forwards slideInFromLeft;
}

.fadefromleft3 {
  animation: 1s ease-in-out 0.4s 1 forwards slideInFromLeft;
}

.fadefromleft4 {
  animation: 1s ease-in-out 0.6s 1 forwards slideInFromLeft;
}

.fadefromtop1 {
  animation: 1s ease-in-out 0s 1 forwards slideInFromTop;
}

.fadefromtop2 {
  animation: 1s ease-in-out 0.2s 1 forwards slideInFromTop;
}

.fadefromtop3 {
  animation: 1s ease-in-out 0.4s 1 forwards slideInFromTop;
}

.fadefromtop4 {
  animation: 1s ease-in-out 0.6s 1 forwards slideInFromTop;
}

.fadein {
  animation: 1s ease-in-out 0s 1 forwards FadeIn;
}

.fadein2 {
  animation: 1s ease-in-out 0.2s 1 forwards FadeIn;
}

.fadein3 {
  animation: 1s ease-in-out 0.4s 1 forwards FadeIn;
}

.fadein4 {
  animation: 1s ease-in-out 0.6s 1 forwards FadeIn;
}

.fadeout {
  animation: 1s ease-in-out 0s 1 forwards FadeOut;
}

.fadetoright {
  animation: 1s ease-in-out 0s 1 forwards SlidetoRight;
}

.noticemeeffect {
  animation: 1s ease-in-out 0s infinite forwards slideInFromTop;
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes SlidetoRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes SlideFromRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes slideInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes FadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}