@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

:root {
  --page-default-background: #ffffff;
  --primary-color: #8763ff;
  --secondary-color: #a2b0ff;
  --font-primary: 'Inter', 'Arial';
  --h1-font-size: 15.7vw;         /* 61.04pvx */
  --h2-font-size: 9.65vw;         /* 48.83px */
  --h3-font-size: 2.60vw;         /* 39.06px */
  --h4-font-size: 2.08vw;         /* 31.25px */
  --h5-font-size: 6.53vw;         /* 25.01px */
  --h6-font-size: 1.33vw;         /* 20px*/
  --p-font-size: 1.07vw;          /* 16px */
  --small-font-size: 0.93vw;      /* 14px */
  --smaller-font-size: 0.85vw;    /* 12.8px  */
  --smallest-font-size: 0.68vw;   /* 10.24px */
}


html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-primary);
  background: var(--page-default-background);
  color: #000000;
  scroll-behavior: smooth;
  /* cursor: url('/Assets/cursor1.svg'), auto; */
}
.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  gap: 3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #353590;
  z-index: 9999;
  padding-bottom: 5vh;
}
.loader-container h2{
  font-weight: 800;
  opacity: 0.75;
}
.loader {
  position: relative;
  /* margin-bottom: 7.5vh; */
  border-radius: 20%;
  background: #fff;
  animation: wave 1.5s ease-in-out infinite;
}

.NotSuported{
  display: none;
}

@keyframes wave {
 0% {  box-shadow:
  0 0 0 0px rgba(255, 255,255, 1),
  0 0 0 10px rgba(255, 255,255, 0.2),
  0 0 0 20px rgba(255, 255,255, 0.6),
  0 0 0 30px rgba(255, 255,255, 0.4),
  0 0 0 40px rgba(255, 255,255, 0.2)
  }
  100% {  box-shadow:
    0 0 0 40px rgba(255, 255,255, 0),
    0 0 0 30px rgba(255, 255,255, 0.2),
    0 0 0 20px rgba(255, 255,255, 0.4),
    0 0 0 10px rgba(255, 255,255, 0.6),
    0 0 0 0px rgba(255, 255,255, 1)
  }
}


  

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

::-webkit-scrollbar {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1 {
  font-size: var(--h1-font-size);
  color: #91ABFF;
  max-width: 74.32vw;
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: -1.1vw;
  margin-top: 10vh;
}

h2 {
  font-size: var(--h2-font-size);
  letter-spacing: -0.12rem;
  color: #406CFF;
  font-weight: 500;
  text-transform: uppercase;
  width: 36.14vw;
}

h3 {
  font-size: var(--h3-font-size);
}

h5 {
  font-size: var(--h5-font-size);
  color: #406CFF;
  font-weight: 400;
}

h6 {
  font-size: var(--h6-font-size);
  color: #FE9611;
}

p {
  font-size: var(--p-font-size);
}

.small {
  font-size: var(--small-font-size);
}

.smaller {
  font-size: var(--smaller-font-size);
}
.smallest {
  font-size: var(--smallest-font-size);
}
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5vh 5.455vw;
  z-index: 1000;
  font-size: 0.9vw;
}
.nav-logo{
  width: 21.14vw;
}

.favicon{
  width: 3vw;
  height: auto;
  margin-right: 0.7rem;
}

.lsm1{
  letter-spacing: -0.066vw;
}
.lsm05{
  letter-spacing: -0.033vw;
}
.nav-links{
  display: flex;
  gap: 1.82vw;
  align-items: center;
  justify-content: center;
  padding: 0.9vw;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.5);
  border: #E4EAFF 1px solid;
}
.nav-buttons{
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.nav-buttons a{
  background: #F0F0F0;
  padding: 0.8vw 1vw;
  border-radius: 10rem;
  font-weight: 600;
  font-size: 0.933vw;
}
.nav-buttons a:nth-child(2){
  margin-left:  0.533vw;
  color: white;
  background: #5792FF;
}

.hero{
  padding: 0 4vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lsm2{
  letter-spacing: -0.13vw;
}

.hero{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
}
.Contact{
  font-size: 3.18vw;
  text-transform: uppercase;
  color: #3859C7;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10rem;
  border: #E4EAFF 1px solid;
  padding: 2.727vw;
  font-weight: 500;
  backdrop-filter: blur(5px);
}
.menu-icons{
  position: relative;
  display: flex;
  padding-right: 1.5vw;
  width: 7.27vw;
  height: auto;
}
.close-icon{
  position: absolute;
  scale: 0; 
  width: 7.27vw;
  height: auto;
}
.HeroSection{
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5.5vw;
  position: relative;
  overflow: hidden;
}
.HighlightText{
  color: #3B65F0;
}
.HeroSVG{
  width: 88.2vw;
  position: absolute;
  bottom: 10vh;
  right: -35vw;
  z-index: -1;
  overflow: hidden;
}
.subHeading{
  width: 22.727vw;
  font-size: 2.727vw;
  line-height: 1;
  text-transform: uppercase;
  color: #3B65F0;
  text-align: end;
  align-self: end;
  letter-spacing: -0.2vw;
  margin-top: 10vh;
}
.logoContainer{
  margin-top: 10vh;
  display: flex;
  justify-content: space-between;
  /* overflow: auto; */
  opacity: 0.75;
}
.logoContainer img{
  width: 9.32vw;
  height: auto;
}

.RecentWorkSection{
  display: flex;
  flex-direction: column;
  padding: 10vh 5.5vw;
  gap: 1rem;
}
.RecentWorkSection h2{
  line-height: 1;
}
.Projects{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.Projects img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.ProcessSection{
  padding: 20vh 5.5vw;
}
.ProcessSection h2{
  margin-bottom: 1.5rem;
  font-size: 11.36vw;
}
.Process{
  display: flex;
  gap: 1rem;
}
.Process svg{
  width: 5.46vw;
  height:5.46vw;
}
.processSVG{
  width: 13.64vw;
  height:13.64vw;
  padding: 1.82vw;
  border: #C6D3FF 1px solid;
  border-radius: 500rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ProcessContent p{
  font-size: 2.73vw;
  color: #6E94FF;
  width: 47.96vw;
  letter-spacing: -0.11vw;
  margin-top: 0.75vw;
}
.ProcessContent h5{
  letter-spacing: -0.25vw;
}
.ProcessContainer{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.CTAsection{
  margin: 2rem 5.5vw 3rem 5.5vw;
}
.CTAsection h2{
  font-size: 18vw;
  letter-spacing: -1.01vw;
  text-transform: capitalize;
  line-height: 1;
  width: 75.9vw;
  margin-bottom: 1.7rem;
}

.CTA1B{
  all: unset;
  color: #3B65F0;
  font-size: 3.63vw;
  text-transform: uppercase;
  padding: 3.63vw;
  border-radius: 50rem;
  border: #B9C9FF 1px solid;
  margin-bottom: 1rem;
  letter-spacing: -0.2vw;
}
.CTA2B{
  all: unset;
  color: #ffffff;
  background: #3B65F0;
  font-size: 3.63vw;
  letter-spacing: -0.2vw;
  text-transform: uppercase;
  padding: 3.63vw;
  border-radius: 50rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.CTA2B svg{
  width: 4.55vw;
  height: auto;
}
footer{
  margin: 0 5.5vw 10vh;
}

.footerLinks div h4{
  font-size: 7.27vw;
  font-weight: 400;
  color: #406CFF;
  letter-spacing: -0.3vw;
  margin-bottom: 0.5rem;
}

.footerLinks{
  display: flex;
  gap: 7.73vw;
}

.footerLinks div{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footerLinks div a{
  font-size: 3.64vw;
  color: #6E94FF;
  letter-spacing: -0.1vw;
}
.footer-line{
  position: relative;
}

.footer-brand{
  position: absolute;
  font-size: 16.36vw;
  font-weight: 900;
  letter-spacing: -1.2vw;
  color: #003BFF;
  opacity: 0.1;
  margin: 0.5rem 5.5vw -1rem 5.5vw;
  bottom: 0;
  z-index: -100;
}

@media (width > 700px) {
  :root {
    --h1-font-size: 7.75vw;
    --h2-font-size: 5.6vw;
    --h3-font-size: 6vw;
    --h4-font-size: 4vw;
    --h5-font-size: 2.933vw;
    --h6-font-size: 3vw;
    --p-font-size: 3vw;
    --small-font-size: 2.5vw;
    --smaller-font-size: 2vw;
    --smallest-font-size: 1.5vw;
  }
  .nav-logo{
    width: 6.733vw;
  }
  .Contact{
    font-size: 1vw;
    padding: 0.85vw;
  }
  .nav-links{
    padding: 0.27vw;
  }
  .menu-icons{
    padding-right: 0vw;
    width: 3.5vw;
  }
  nav{
    padding: 2.5vh 4vw;
  }
  .HeroSection{
    padding: 0 4vw;
  }
  h1{
    margin-top: 18vh;
    letter-spacing: -0.5vw;
  }
  .subHeading{
    font-size: 0.73vw;
    width: 5.6vw;
    letter-spacing: -0.02vw;
  }
  .HeroSVG{
    width: 38.6vw;
    right: -3vw;
  }
  .logoContainer img{
  width: 4vw;
  height: auto;
}
.RecentWorkSection{
  flex-direction: row;
  padding: 35vh 4vw;
  gap: 3.2vw;
  position: relative;
}
.RecentWorkSectionH2{
  position: sticky;
  top: 15vh;
  width: 20.93vw;
}
.Projects{
  margin-top: 2vh;
  gap: 4.27rem;
}
.Projects img{
  border-radius: 1rem;
}
.ProcessSection{
  padding: 0vh 4vw;
}
.ProcessSection h2{
  font-size: 6.8vw;
  letter-spacing: -0.2vw;
}
.ProcessContainer{
  flex-direction: row;
  justify-content: space-between;
}
.Process svg{
  width: 2.67vw;
  height:2.67vw;
}
.processSVG{
  padding: 0.67vw;
  width: 5.39vw;
  height:5.39vw;
  border: #C6D3FF 1.3px solid;
}
.ProcessContent h5{
  letter-spacing: -0.1vw;
}
.ProcessContent p{
  font-size: 1vw;
  letter-spacing: -0.04vw;
  width: 20vw;
  margin-top: 0.5vw;
}
.CTAsection{
  margin: 30vh 4vw 2vh;
}
.CTAsection h2{
  font-size: 6.533vw;
  text-transform: uppercase;
  width: 68vw;
  letter-spacing: -0.29vw;
}
.CTA1B{
  font-size: 1.18vw;
  padding: 1.1vw;
  letter-spacing: -0.03vw;
  width: max-content;
}
.CTA2B{
  font-size: 1.18vw;
  padding: 1.1vw;
  letter-spacing: -0.03vw;
  width: max-content;
}
.CTA2B svg{
  width: 1.5vw;
  height: auto;
}
footer{
  margin: 0 4vw 5vh;
  display: flex;
  justify-content: end;
  scale: 0.8;
}

.footerLinks div h4{
  font-size: 2.27vw;
  letter-spacing: -0.01vw;
}
.footerLinks div a{
  font-size: 1.2vw;
  letter-spacing: -0.01vw;
}
.footer-line{
  position: relative;
}
.footer-brand{
  font-size: 16.75vw;
  margin: 0.5rem 4vw -5rem 4vw;
}
}

.unselectable-text {
  -webkit-user-select: none; /* Safari, Chrome, Opera */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+ and Edge */
  user-select: none;         /* Standard syntax */
  cursor: default;           /* Optional: change cursor to default pointer */
}