@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* General Stuff */
*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root {
  --paletteDark: #0b0b0a;
  --paletteLight: #fff;
  --brandColor: #4da167;
}

body {
  background-color: var(--paletteDark);
  font-family: Montserrat;
  overflow-x: hidden;
  color: var(--paletteLight);
}

/* Selection */

::selection {
  background-color: #5cc97e;
  color: var(--paletteDark);
}

footer h3::selection {
  background-color: var(--paletteDark);
  color: var(--brandColor);
}

footer h4::selection {
  background-color: var(--paletteDark);
  color: var(--brandColor);
}

footer p::selection {
  background-color: var(--paletteDark);
  color: var(--brandColor);
}

/* Cursor */
.cursor {
  display: block;
  position: absolute;
  width: 4vw;
  height: 4vw;
  border: 0.218vw solid var(--paletteLight);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 105;
  transition: all 0.2s ease;
  transition-property: background, transform, transform-origin, border, opacity;
  transform-origin: 130% 130%;
}

.removeCurz {
  cursor: none;
}

.curzOnHeader {
  fill: #269e97;
  mix-blend-mode: difference;
  border-color: #269e97;
}

.curzOnLink {
  transform: scale(1.5);
  background: #269e97;
}

.curzOnFoot {
  transform-origin: 64% 58%;
  transform: scale(6);
  background: var(--brandColor);
  border: var(--brandColor);
}

.curz-on-out {
  transform: scale(3);
  transform-origin: 75% 75%;
  background: white;
  mix-blend-mode: difference;
  opacity: 0;
}

.curzOnHeading {
  fill: var(--paletteLight);
  mix-blend-mode: difference;
  transform: scale(3);
  background: var(--paletteLight);
  border-color: var(--paletteLight);
  transform-origin: 75% 75%;
}

/* SVG styling */
.cls-1 {
  fill: var(--paletteDark);
}
.cls-2 {
  fill: #63d487;
}
.cls2 {
  fill: var(--brandColor);
}
.crcl {
  fill: var(--paletteLight);
}
.clsy-1 {
  fill: var(--paletteDark);
}
.clsy-2 {
  fill: var(--paletteLight);
}
.clst-2 {
  fill: var(--paletteDark);
}

/* Header */
.wrapHead {
  width: 85%;
  height: 100%;
  margin: 0 auto;
  display: inline-flex;
}

header {
  background-color: #269e97;
  width: 100%;
  display: flex;
  justify-content: center;
}

.button {
  height: 15vh;
  padding: 2vh 0;
}

nav {
  display: flex;
  align-self: center;
  justify-content: flex-end;
  margin: 0 0 0 auto;
}

.home {
  color: #63d487;
}

nav ul {
  display: flex;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  text-decoration: none;
  color: black;
  font-size: 3vmin;
  padding: 5vh 5vh;
}

.home:hover {
  color: black;
}

/* Parallax */
.wrap-parallax {
  position: relative;
  height: 100vh;
}

.parallax {
  background-size: auto 450px;
  position: absolute;
  background-repeat: repeat-x;
  display: block;
  width: 100vw;
  height: 1000px;
  background-position: top;
}

.sky {
  background-image: url(res/img/sky.webp);
  z-index: -13;
  top: -90px;
  height: 500px;
  background-size: auto 400px;
}

.eleven {
  background-image: url(res/img/11.webp);
  z-index: -12;
  top: 250px;
}

.ten {
  background-image: url(res/img/10.webp);
  z-index: -11;
  top: 295px;
}

.nine {
  background-image: url(res/img/9.webp);
  z-index: -10;
  top: 320px;
}

.eight {
  background-image: url(res/img/8.webp);
  z-index: -9;
  top: 320px;
}

h6 {
  color: var(--paletteDark);
  position: relative;
  top: 240px;
  text-align: center;
  z-index: -7;
  text-transform: uppercase;
  font-size: 6vmin;
  letter-spacing: 1.5vmin;
  position: absolute;
  width: 100vw;
  height: auto;
  background: none;
}

.seven {
  background-image: url(res/img/7.webp);
  z-index: -7;
  top: 330px;
}

.six {
  background-image: url(res/img/6.webp);
  z-index: -6;
  background-size: auto 250px;
  top: 420px;
}

.five {
  background-image: url(res/img/5.webp);
  z-index: -5;
  background-size: auto 400px;
  top: 280px;
}

.four {
  background-image: url(res/img/4.webp);
  z-index: -4;
  background-size: auto 400px;
  top: 390px;
}

.three {
  background-image: url(res/img/3.webp);
  z-index: -3;
  top: 100px;
  background-size: auto 750px;
}

.two {
  background-image: url(res/img/2.webp);
  z-index: -2;
  top: 430px;
  background-size: auto 500px;
  height: 3000px;
}

.one {
  background-image: url(res/img/1.png);
  z-index: -1;
  top: 500px;
  background-size: auto 2000px;
  height: 1500px;
}

/* Main */
main {
  margin-top: 210px;
  display: grid;
}

/* About Us */
.about-us {
  background: var(--paletteDark);
  display: grid;
  justify-items: center;
}

.stroke-headings {
  display: grid;
  place-items: center;
}

.stroke-headings h2 {
  position: relative;
  font-size: 15vh;
  padding: 4vw;
}

.stroke-headings h3 {
  font-size: 15vh;
  position: absolute;
  color: var(--paletteDark);
  -webkit-text-stroke: 0.4vh var(--paletteLight);
  user-select: none;
  -webkit-user-select: none;
  padding: 4vw;
  opacity: 0;
}

.about-us p {
  color: var(--paletteLight);
  width: 60vw;
  text-align: center;
  font-size: 3.5vh;
  font-weight: 400;
}

/*
 __           __    __   __
/_   |    |  |  \  |_   /_
__/  |__  |  |__/  |__  __/

*/
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: montserrat;
}

.divide {
  height: 50vh;
}

.divide1 {
  height: 50vh;
  background: var(--paletteDark);
}

.scroll-wrapper h2 {
  font-size: 15vmin;
  color: var(--paletteDark);
  user-select: none;
  -webkit-user-select: none;
}

.scroll-wrapper h3 {
  font-size: 10vmin;
  color: var(--paletteLight);
  user-select: none;
  -webkit-user-select: none;
}

.scroll-wrapper {
  background: var(--brandColor);
  transition: all 0.2s ease;
}

/* First */

.ek {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
}

.ek h2 {
  white-space: nowrap;
}

.side-waale {
  color: #383838;
  opacity: 0.6;
}

.ek .doosre-waale {
  color: #383838;
  opacity: 0.6;
}

.ek .baad-waale {
  color: #383838;
  opacity: 0.6;
}

/* Second */

.do {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
}

.do-main {
  position: relative;
}

.do-main .write {
  color: var(--brandColor);
  -webkit-text-stroke: var(--brandColor) 0.35vmin;
}

.do-me {
  visibility: hidden;
  position: absolute;
}

.do-me .write {
  -webkit-text-stroke: var(--brandColor) 0.35vmin;
  color: var(--paletteDark);
  visibility: visible;
}

/* Third */

.teen {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.teen-main {
  position: relative;
}

.teen-main .manip {
  -webkit-text-stroke: var(--brandColor) 0.35vmin;
  color: var(--paletteDark);
}

.teen-me .manip {
  color: var(--brandColor);
  -webkit-text-stroke: var(--brandColor) 0.35vmin;
  visibility: visible;
}

.teen-me {
  position: absolute;
  visibility: hidden;
}

/* Fourth */

.chaar {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.chaar-me .edit {
  -webkit-text-stroke: var(--brandColor) 0.35vmin;
  color: var(--paletteDark);
  visibility: visible;
}

.chaar-main .edit {
  color: var(--brandColor);
  -webkit-text-stroke: var(--brandColor) 0.35vmin;
}

.chaar-me {
  position: absolute;
  visibility: hidden;
}

/* Fifth */
.paach {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* Sixth */
.chay {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.chay h2.chay-me {
  position: absolute;
  -webkit-text-stroke: var(--paletteDark) 0.35vmin;
  color: var(--paletteLight);
  opacity: 0;
}

.chay h2 {
  color: var(--paletteDark);
  -webkit-text-stroke: var(--paletteDark) 0.35vmin;
  padding: 4vw;
}

/* Seventh */
.saath {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* Eighth */
.aath {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.aath h3 {
  -webkit-text-stroke: var(--paletteLight) 0.35vmin;
  color: var(--paletteDark);
}

/* Logo */
#scroll-intro {
  width: 100vw;
  height: 100vh;
}

/* Channel Intro */
.channel-intro {
  background: var(--paletteLight);
  display: grid;
  place-items: center;
  cursor: pointer;
  height: 90vh;
  filter: brightness(94%);
  transition: all 1s ease;
}

.channel-intro iframe {
  width: 160vh;
  height: 90vh;
}

.channel-intro img {
  width: 128vh;
  height: 72vh;
  transition: all 2s ease;
}

.channel-intro:hover {
  filter: brightness(100%);
}

.channel-intro:hover img {
  width: 160vh;
  height: 90vh;
}

/* Videos */
.showcase-videos {
  display: grid;
  justify-items: center;
}

.showcase-videos h2 {
  margin-top: 15vh;
  margin-bottom: 7vh;
  font-size: 8vh;
  text-align: center;
}

a {
  text-decoration: none;
  color: var(--paletteLight);
}

.saareVid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40vh, 1fr));
  width: 85vw;
  gap: 6vh 6vw;
}

.card img {
  width: 100%;
}

.card p {
  text-align: center;
  font-size: 2vh;
}

/* FOOTER STYLES */

footer {
  position: relative;
  margin-top: 30vh;
  height: 100vh;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  grid-template-rows: 1fr 5vh;
  background: var(--paletteDark);
  grid-template-areas:
    "contact logo social"
    "copyright copyright copyright";
}

#twitter {
  width: 15vh;
  z-index: 112;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  grid-area: logo;
}

#clogo {
  width: 15vw;
}

#youtubeLap {
  width: 15vh;
  z-index: 111;
}

.social {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -0.5em;
  column-gap: 4em;
  z-index: 110;
}

.conw {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: contact;
}

footer h3 {
  font-weight: 800;
  text-align: center;
  color: var(--paletteDark);
  padding-top: 5vh;
  font-size: 12vh;
  margin-bottom: 0.5em;
  z-index: 110;
}

.contact {
  z-index: 110;
}

.foso h3 {
  margin-bottom: 0;
}

.wrso {
  display: grid;
  place-content: center;
  grid-area: social;
}

.contact h4 {
  font-size: 5vh;
  z-index: 110;
}

footer h4 {
  font-size: 1.3em;
  font-weight: 300;
  text-align: center;
  color: var(--paletteDark);
  margin-top: 1vh;
}

footer p {
  color: var(--paletteDark);
  position: absolute;
  bottom: 1vh;
  text-align: center;
  width: 100%;
  font-weight: 200;
  grid-area: copyright;
  font-size: 3vh;
  z-index: 110;
  line-height: 2vh;
}

/*                 ____     ______      ______
|         /\      |    \   /           |
|        /  \     |____/  |      ___   |___
|       /----\    |   \   |       | |  |
|_____ /      \   |    \   \_____/  |  |______
*/
@media screen and (min-width: 1960px) {
  /* Parallax */
  .parallax {
    background-size: auto 700px;
  }

  .sky {
    top: -130px;
    height: 800px;
    background-size: auto 600px;
  }

  .eleven {
    top: 300px;
  }

  .ten {
    top: 350px;
  }

  .nine {
    top: 390px;
  }

  .eight {
    top: 390px;
  }

  .seven {
    top: 430px;
  }

  .six {
    background-size: auto 500px;
    top: 570px;
  }

  .five {
    background-size: auto 700px;
    top: 330px;
  }

  .four {
    background-size: auto 700px;
    top: 530px;
  }

  .three {
    top: -129px;
    background-size: auto 1600px;
    height: 120vh;
  }

  .two {
    top: 650px;
    background-size: auto 900px;
  }

  .one {
    top: 800px;
    background-size: auto 3500px;
    height: 2000px;
  }
}