@import url('https://fonts.googleapis.com/css2?family=Carattere&family=Niconne&family=Oleo+Script+Swash+Caps:wght@400;700&family=Oleo+Script:wght@400;700&family=Orbitron:wght@400..900&family=Pacifico&family=Poppins: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&family=Roboto:ital,wght@0,100..900;1,100..900&family=Shrikhand&display=swap');
/* ================= ROOT ================= */

:root{
  --font-main:"Poppins",sans-serif;
  --font-wave:"Oleo Script",system-ui;

  --nav-height:65px;

  --glass-dark:rgba(0,0,0,.92);
  --glass-nav:rgba(70,0,20,.75);

  --transition-fast:.25s ease;
  --transition-mid:.35s ease;
  --transition-slow:.45s ease;

  --blur-menu:12px;
  --blur-nav:8px;

  --text:#fff;
}

/* ================= RESET ================= */

*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
  min-width:0;
}

html{
  scroll-behavior:smooth;
}

html,
body{
  width:100%;
  min-height:100%;
}

body{
  position:relative;

  overflow-x:hidden;
  overflow-y:auto;

  color:var(--text);
  font-family:var(--font-main);

  text-rendering:optimizeSpeed;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ================= PERFORMANCE ================= */

.bg-video,
.collection-container img,
.menu-container,
.web,
.menu-item,
.wave-text span,
.nav-bar,
.bottom-nav{
  transform:translateZ(0);
  backface-visibility:hidden;
}

.collection-container,
.explore-content,
.about-box{
  contain:content;
}

.collection-container,
.menu-container,
#explore-page,
#about-page,
.video-container{
  -webkit-overflow-scrolling:touch;
}

.collection-container > div,
.web{
  will-change:transform;
}

img,
iframe,
video{
  display:block;
  max-width:100%;
  height:auto;
}

video{
  object-position:center;
}

.menu-item,
.web,
.collection-container > div,
.collection-container img{
  transition:
  transform var(--transition-fast),
  opacity var(--transition-fast),
  background-color var(--transition-fast);
}

.menu-item,
.btn,
.bottom-nav i,
.menu-icon i{
  touch-action:manipulation;
}

.gallery-video iframe{
  display:block;
}

@media (hover:hover){

  img:hover,
  i:hover{
    transform:scale(1.08);
  }

}

/* ================= GLOBAL LAYOUT ================= */

.page,
.video-container,
.collection-container,
.explore-content,
.about-box{
  width:100%;
  max-width:100vw;
}

.page,
.video-container,
.quote,
#explore-page,
#about-page{
  min-height:100dvh;
}

body,
.page,
.video-container{
  overflow-x:hidden;
}

/* ================= PAGE ================= */

.page{
  display:none;
}

.page.active-page{
  display:block;
}

img:hover,
i:hover{
  transition:var(--transition-slow);
}

/* ================= BACKGROUND VIDEO ================= */

.bg-video{
  position:fixed;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:-10;

  pointer-events:none;

  background:black;

  transform:none;
  will-change:auto;

  contain:layout style paint;
}

/* ================= MENU ================= */

.menu-container{
  position:fixed;

  top:0;
  right:-230px;

  width:220px;
  max-width:85%;
  height:100vh;

  padding:20px;

  display:flex;
  flex-direction:column;
  gap:14px;

  overflow-x:hidden;
  overflow-y:auto;

  background:var(--glass-dark);

  backdrop-filter:blur(var(--blur-menu));

  z-index:99999;

  transition:var(--transition-slow);

  box-shadow:-5px 0 25px rgba(0,0,0,.45);

  scrollbar-width:none;
}

.menu-container::-webkit-scrollbar{
  display:none;
}

#xmark{
  position:absolute;

  top:10px;
  right:10px;

  opacity:.65;

  transition:var(--transition-fast);
}

#xmark:hover{
  opacity:1;
}

#xmark:active{
  transform:scale(1.1);
}

.menu-title{
  text-align:center;
}

/* ================= VIDEO CONTAINER ================= */

.video-container{
  position:relative;

  min-height:100dvh;

  overflow-x:hidden;
  overflow-y:auto;

  z-index:1;
}

/* ================= NAVBAR ================= */

.nav-bar{
  position:fixed;

  inset:0 0 auto 0;

  width:100%;
  height:var(--nav-height);

  padding-inline:15px;

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

  background:var(--glass-nav);

  backdrop-filter:blur(var(--blur-nav));

  z-index:3000;
}

.nav-bar > div > i{
  padding-left:10px;
  font-size:1.25rem;
}

.image{
  flex-shrink:0;
}

.image img{
  width:40px;

  border-radius:50%;
}

.title{
  flex:1;

  padding-inline:10px;

  text-align:center;
}

.title h1{
  overflow:hidden;

  font-size:1.2rem;
  font-weight:500;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.menu-icon{
  flex-shrink:0;

  padding-right:10px;
}

.menu-icon i{
  font-size:1.6rem;
}

/* ================= QUOTE ================= */

.quote{
  display:flex;
  flex-direction:column;

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

  padding:
  calc(var(--nav-height) + 25px)
  15px
  90px;
}

.wave-container{
  width:100%;
}

.wave-text{
  display:flex;

  flex-wrap:wrap;

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

  gap:5px;

  padding:0 5px 5px;

  text-align:center;
}

.wave-text span{
  font-family:var(--font-wave);

  font-size:1.3rem;

  animation:wave 2s ease-in-out infinite;
}

.wave-text span:nth-child(1){animation-delay:0s;}
.wave-text span:nth-child(2){animation-delay:.3s;}
.wave-text span:nth-child(3){animation-delay:.6s;}
.wave-text span:nth-child(4){animation-delay:.9s;}
.wave-text span:nth-child(5){animation-delay:1.2s;}
.wave-text span:nth-child(6){animation-delay:2s;}
.wave-text span:nth-child(7){animation-delay:2.3s;}
.wave-text span:nth-child(8){animation-delay:2.6s;}
.wave-text span:nth-child(9){animation-delay:3s;}

@keyframes wave{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-3px);
  }

}

/* ================= GALLERY VIDEO ================= */

.gallery-video{
  width:100%;

  display:flex;
  justify-content:center;
}

.gallery-video iframe{
  width:min(90vw,700px);

  aspect-ratio:16/9;

  margin-bottom:80px;

  border:none;
  border-radius:10px;

  box-shadow:
  0 3px 6px rgba(0,0,0,.16),
  0 3px 6px rgba(0,0,0,.23);
}

/* ================= COLLECTION ================= */

.collection-container{
  position:relative;
  top:75px;
  width:100%;
  display:grid;
  grid-template-columns:
  repeat(auto fit,minmax(150px,1fr));
  gap:14px;
  padding:
  20px
  12px
  170px;
  overflow:visible;
  height:auto;
}

/* FIX CARD */

.collection-container > div{
  width:100%;
  aspect-ratio:1/1;
  min-height:150px;
  position:relative;
  overflow:hidden;
  border-radius:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:
  rgba(255,255,255,.08);
}


/* FIX IMAGE */

.collection-container img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;

}


/* FIX TITLE */

.content p{
  position:absolute;
  top:10px;
  right:10px;
  left:10px;
  font-size:0.95rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
  z-index:5;

}


/* FIX BUTTON */

.btn{
  position:absolute;
  right:12px;
  bottom:12px;
  width:70px;
  padding:5px;
  z-index:5;
}


/* FIX SEARCH BAR */

.search-area{
  position:fixed;
  top:72px;
  left:0;
  z-index:4000;
}


.search-bar{
  width:min(
  95vw,
  700px
  );

}


/* MOBILE */

@media(max-width:480px){

.collection-container{

grid-template-columns:
repeat(2,1fr);

gap:12px;

}

.content p{

font-size:.85rem;

}

}


/* VERY SMALL */

@media(max-width:340px){

.collection-container{

grid-template-columns:
1fr;

}

}

/* ================= CARD ================= */

.collection-container > div{
  position:relative;

  width:150px;
  height:120px;

  padding:6px;

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

  overflow:hidden;

  border-radius:16px;

  background:
  rgba(255,255,255,.12);

  backdrop-filter:blur(1px);

  box-shadow:
  0 4px 12px rgba(0,0,0,.35);

  transition:
  transform .3s ease,
  box-shadow .3s ease;
}

.collection-container > div:hover{
  transform:scale(1.04);

  box-shadow:
  0 8px 18px rgba(0,0,0,.35);
}

/* ================= INNER IMAGE BOX ================= */

.collection-container > div > div{
  width:100%;
  height:100%;

  overflow:hidden;

  border-radius:12px;
}

/* ================= IMAGE ================= */

.collection-container img{
  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:12px;

  cursor:pointer;

  transition:
  transform .3s ease,
  filter .3s ease;
}

.collection-container img:hover{
  transform:scale(1.15);
}

/* ================= CONTENT ================= */

.content{
  display:flex;

  flex-direction:column;

  content-visibility:auto;

  contain-intrinsic-size:
  150px 120px;
}

/* ================= TEXT ================= */

.content p{
  position:absolute;

  top:12px;
  right:15px;

  font-size:.8rem;

  text-shadow:
  0 0 6px rgba(0,0,0,.55);
}

/* ================= BUTTON ================= */

.btn{
  position:absolute;

  bottom:12px;
  right:20px;

  width:45px;

  padding:1.25px;

  border:none;
  border-radius:4px;

  font-size:10px;

  color:black;

  background:aqua;

  box-shadow:
  0 0 .5px rgba(0,0,0,.5);

  cursor:pointer;

  transition:
  transform .2s ease,
  opacity .2s ease;
}

.btn:hover{
  opacity:.95;
}

.btn:active{
  transform:scale(1.15);
}

/* ================= BOTTOM NAV ================= */

.bottom-nav{
  position:fixed;

  left:0;
  bottom:0;

  width:100%;
  min-height:50px;

  padding:5px 10px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  color:black;

  background:
  deepskyblue;

  z-index:50;

  font-size:1.5rem;

  backdrop-filter:blur(8px);
}

.active-nav{
  color:red;

  transform:scale(1.3);

  border-bottom:
  1.5px solid red;

  transition:.3s;
}

/* ================= EXPLORE PAGE ================= */

#explore-page,
#explore-page .video-container{
  overflow-x:hidden;
  overflow-y:auto;

  height:100vh;
}

.explore-content{
  width:100%;

  padding-bottom:125px;

  display:flex;

  flex-direction:column;

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

  gap:10px;
}

.explore-title{
  margin-top:6rem;

  text-align:center;

  font-family:
  "Oleo Script",
  system-ui;
}

/* ================= LINKS ================= */

a{
  width:100%;

  color:white;

  display:flex;

  justify-content:center;

  text-decoration:none;

  transition:.2s;
}

a:hover{
  text-decoration:underline;
}

.website{
  width:100%;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:15px;
}

/* ================= WEB CARD ================= */

.web{
  position:relative;

  z-index:2000;

  width:min(100%,1000px);

  padding:
  10px
  25px
  10px
  40px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  background:white;

  transition:
  transform .35s ease,
  box-shadow .35s ease;
}

.web:hover{
  transform:scale(1.03);

  box-shadow:
  0 10px 20px rgba(0,0,0,.2);
}

.icon-web{
  position:relative;

  padding:5px;

  border-radius:45%;
}

.icon-web > i{
  position:relative;

  z-index:8000;

  font-size:2rem;

  transition:.35s;
}

/* ================= WEBSITE ================= */

.site{
  background:
  linear-gradient(
  135deg,
  #19102A,
  #2F2157,
  #523168,
  #5F4E9F,
  #94669C);

  box-shadow:
  0 0 2px #94669C;

  text-shadow:
  0 0 5px rgba(0,0,0,.5);
}

.cn-img{
  width:50px;

  padding:3px;

  transition:.5s;
}

.cn-img:hover{
  transform:scale(1.05);
}

/* ================= YOUTUBE ================= */

.youtube{
  background:red;
}

.u-para{
  color:aliceblue;

  text-shadow:
  0 0 10px rgba(0,10,30,.5);
}

.u-tube{
  color:red;

  background:white;

  box-shadow:
  0 -1px 5px rgba(0,0,0,.5);
}

/* ================= WHATSAPP ================= */

.whatsapp{
  background:#25D366;
}

.w-app{
  color:#25D366;

  background:white;

  box-shadow:
  0 -1px 5px rgba(0,0,0,.5);
}

.w-para{
  color:aliceblue;

  text-shadow:
  0 0 5px rgba(0,10,30,.5);
}

/* ================= INSTAGRAM ================= */

.insta{
  background:
  radial-gradient(
  circle at 30% 107%,
  #fdf497 0%,
  #fdf497 5%,
  #fd5949 45%,
  #d6249f 60%,
  #285aeb 90%);
}

.insta-app > i{
  border-radius:10px;

  background:
  radial-gradient(
  circle at 30% 107%,
  #fdf497 0%,
  #fdf497 5%,
  #fd5949 45%,
  #d6249f 60%,
  #285aeb 90%);

  box-shadow:
  0 -1px 5px rgba(0,0,0,.5);
}

.insta-para{
  color:aliceblue;

  text-shadow:
  0 0 3px rgba(0,10,30,.5);
}

/* ================= OTHERS ================= */

.facebook{
  background:#1877F2;
}

.linkedin{
  background:#0A66C2;
}

.twitter{
  background:black;
}

.sml{
  position:absolute;

  right:0;

  padding-right:25px;

  font-size:8px;

  text-shadow:
  0 0 5px rgba(0,10,30,.5);
}

/* ================= FOREGROUND LOGO ================= */

.fore-img{
  position:absolute;

  top:-5px;
  right:-2px;

  width:20px;
  height:20px;

  object-fit:cover;

  border-radius:50%;

  background:white;

  border:1.5px solid white;

  z-index:9000;
}

/* ================= ABOUT PAGE ================= */

#about-page,
#about-page .video-container{
  height:100vh;

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

.about-box{
  width:min(100%,1400px);

  margin:80px auto 0;

  padding:
  20px
  20px
  90px;

  display:flex;

  flex-direction:column;

  gap:15px;
}

.about-title h1{
  text-align:center;

  color:#E8DCFF;

  font-size:1.4rem;

  text-shadow:
  0 0 10px rgba(172,145,205,.5);
}

.about-para p{
  padding:15px;

  border-radius:15px;

  color:white;

  font-size:1rem;

  line-height:1.8;

  text-align:justify;

  background:
  rgba(55,55,255,.25);

  backdrop-filter:
  blur(1px);

  box-shadow:
  0 0 15px rgba(148,102,156,.25);
}

b,
strong{
  color:yellow;
}

.disclaimer{
  margin:
  10px 0 35px;

  color:white;

  opacity:.9;

  font-size:.75rem;

  line-height:1.8;

  text-align:justify;

  font-weight:700;

  letter-spacing:.75px;
}


/* ================= SEARCH AREA ================= */

.search-area{
  position:relative;

  top:-40px;

  z-index:9000;

  width:100%;
  height:40px;

  padding-inline:10px;

  display:flex;
  justify-content:center;

  background:transparent;

  transition:
  transform .25s ease,
  top .25s ease;
}

.search-area:hover{
  transform:scale(1.03);
}

.search-bar{
  width:min(90%,700px);
  height:40px;

  padding:5px;

  display:flex;
  align-items:center;

  color:slategray;

  font-size:18px;

  background:white;

  border-radius:15px;

  box-shadow:
  0 4px 18px rgba(0,0,0,.18);
}

.search-input{
  width:100%;
  height:100%;

  min-width:0;

  padding:5px 10px;

  border:none;
  outline:none;

  border-radius:20px;

  font-size:1.05rem;

  background:transparent;
}

.search-input::placeholder{
  opacity:.7;
}

.search-input:focus{
  outline:none;
}

/* ================= MENU ITEMS ================= */

.menu-item{
  width:100%;

  margin-top:8px;

  padding:13px 14px;

  display:flex;
  align-items:center;

  gap:15px;

  cursor:pointer;

  border-radius:14px;

  background:
  rgba(255,255,255,.04);

  border:
  1px solid rgba(255,255,255,.05);

  backdrop-filter:
  blur(5px);

  transition:
  transform .3s ease,
  background .3s ease,
  border .3s ease,
  box-shadow .3s ease;
}

.menu-item:hover{
  transform:
  translateX(5px);

  background:
  rgba(255,255,255,.08);

  border-color:
  rgba(0,191,255,.25);

  box-shadow:
  0 0 10px rgba(0,191,255,.12);
}

.menu-item:active{
  transform:
  scale(.97);
}

.menu-item i{
  width:22px;

  text-align:center;

  color:deepskyblue;

  font-size:1rem;

  text-shadow:
  0 0 8px rgba(0,191,255,.4);

  transition:.3s;
}

.menu-item:hover i{
  color:cyan;

  transform:scale(1.15);
}

.menu-item p{
  color:white;

  font-size:.92rem;
  font-weight:400;

  letter-spacing:.4px;

  transition:.3s;
}

.menu-item:hover p{
  color:#E6F7FF;
}

/* ================= MENU FOOTER ================= */

.menu-footer{
  position:absolute;

  top:50px;
  left:20px;

  z-index:9999;

  opacity:.6;

  font-size:.7rem;

  letter-spacing:1px;
}

#zoom-out{
  display:none;

  margin-bottom:80px;
}

/* ================= SMALL MOBILE ================= */

@media screen and (max-width:360px){

  .nav-bar{
    height:58px;
    padding-inline:10px;
  }

  .image img{
    width:34px;
  }

  .title h1{
    font-size:1rem;
  }

  .menu-icon i{
    font-size:1.35rem;
  }

  .wave-text span{
    font-size:1.45rem;
  }

  .collection-container > div{
    width:150px;
    height:130px;
  }

  .content p{
    font-size:.75rem;
  }

  .btn{
    width:35px;

    font-size:10px;
  }

  .web{
    width:95%;

    padding:10px 15px;
  }

  .icon-web > i{
    font-size:1.6rem;
  }

  .search-bar{
    height:36px;
  }

  .search-input{
    font-size:.9rem;
  }

  .about-title h1{
    font-size:1.1rem;
  }

  .about-para p{
    font-size:.8rem;
  }

  .bottom-nav{
    font-size:1rem;
  }

  .gallery-video iframe{
    width:95vw;
  }

}

/* ================= MOBILE ================= */

@media screen and (max-width:480px){

  .menu-item{
    padding:12px;

    gap:12px;
  }

  .menu-item i{
    font-size:.95rem;
  }

  .menu-item p{
    font-size:.85rem;
  }

}

/* ================= TABLET ================= */

@media screen and (min-width:768px){

  .menu-container{
    backdrop-filter:
    blur(10px);
  }

  .nav-bar{
    height:75px;

    padding-inline:30px;
  }

  .image img{
    width:52px;
  }

  .title h1{
    font-size:2rem;
  }

  .menu-icon i{
    font-size:2rem;
  }

  .wave-text span{
    font-size:2rem;
  }

  .collection-container{
    top:90px;

    gap:25px;
  }

  .collection-container > div{
    width:220px;
    height:180px;
  }

  .content p{
    font-size:.9rem;
  }

  .btn{
    width:55px;

    padding:5px;

    font-size:.7rem;
  }

  .bottom-nav{
    min-height:70px;

    padding:12px 35px;

    font-size:2rem;
  }

  .web{
    width:95%;

    padding:18px 40px;
  }

  .icon-web > i{
    font-size:2.6rem;
  }

  .cn-img{
    width:70px;
  }

  .fore-img{
    width:24px;
    height:24px;
  }

  .about-title h1{
    font-size:2rem;
  }

  .about-para p{
    padding:25px;

    font-size:1.1rem;
  }

  .search-bar{
    height:52px;
  }

  .menu-item{
    padding:15px 18px;

    border-radius:16px;
  }

  .menu-item i{
    font-size:1.15rem;
  }

  .menu-item p{
    font-size:1rem;
  }

}

/* ================= LAPTOP ================= */

@media screen and (min-width:1024px){

  .nav-bar{
    height:80px;

    padding-inline:45px;
  }

  .image img{
    width:60px;
  }

  .title h1{
    font-size:2.3rem;
  }

  .wave-text span{
    font-size:2.4rem;
  }

  .collection-container > div{
    width:260px;
    height:210px;
  }

  .content p{
    font-size:1rem;
  }

  .btn{
    width:65px;

    padding:6px;

    font-size:.8rem;
  }

  .bottom-nav{
    padding:12px 60px;

    font-size:2rem;
  }

  .web{
    width:82%;
  }

  .icon-web > i{
    font-size:3rem;
  }

  .about-title h1{
    font-size:2.4rem;
  }

  .about-para p{
    font-size:1.2rem;
  }

}

/* ================= LARGE DESKTOP ================= */

@media screen and (min-width:1440px){

  .nav-bar{
    height:90px;
  }

  .image img{
    width:70px;
  }

  .title h1{
    font-size:2.8rem;
  }

  .wave-text span{
    font-size:3rem;
  }

  .collection-container > div{
    width:300px;
    height:240px;
  }

  .bottom-nav{
    padding:15px 90px;

    font-size:2.2rem;
  }

  .web{
    width:70%;
  }

  .about-box{
    width:70%;
  }

  .about-para p{
    font-size:1.3rem;
  }

}

/* ================= EXTRA LARGE ================= */

@media screen and (min-width:1600px){ 
  
  .collection-container,
.explore-content,
.about-box{
  contain:layout style;
}

}

/* ================= REDUCED MOTION ================= */

@media (prefers-reduced-motion:reduce){

  *{
    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;
  }

}

/* ================= IMAGE PREVIEW ================= */

.page-img{
  cursor:pointer;
}

.img-bg{
  position:fixed;

  inset:0;

  z-index:50;

  display:none;

  padding:15px;

  place-content:center;

  background:
  rgba(0,0,0,.7);
}

.img-bg > div{
  width:100%;

  padding:10px;
}

.head{
  display:flex;

  justify-content:space-between;

  padding:5px 10px;
}

.head p{
  cursor:pointer;

  opacity:.5;

  font-size:1.5rem;

  transition:.25s;
}

.head p:hover{
  opacity:.9;
}

.head p:active{
  opacity:1;
}

.front-content img{
  position:relative;
}

.front-btn{
  position:absolute;

  padding:
  10px
  80px;

  border:none;
  border-radius:5px;

  color:white;

  font-size:20px;

  cursor:pointer;

  opacity:.9;

  background:gold;

  text-shadow:
  0 0 2px black;

  box-shadow:
  0 0 2px rgba(0,0,0,.7);

  animation:
  flow 1.2s ease-in-out infinite;
}

@keyframes flow{

  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.06);
  }

}

.front-btn:active{
  transform:scale(1.05);

  opacity:1;
}


.my-quote{
  padding: 1px;
  font-weight: 600;
  letter-spacing: 1.20px;
  word-spacing: 2.5px;
  font-size: 1.5rem;
  font-family: "carattere", cursive;
  text-align: center;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 1); 
  background-color: rgba(10, 0, 15, 0.70);
  text-shadow: 2px -1.5px 0.5px rgba(200, 0, 0, 0.8); 
}