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

.montserrat-myReframe {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
  }
.inter-myReframe {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "slnt" 0;
  }
:root{
    --deepFontColor: #c86fff;
    --btnColor: #a66fff;
    --headingFont: "Montserrat", sans-serif;
    --contentFont: "Inter", sans-serif;
    --textShadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0, 0, 0, 0.541);
    --boxShadow2: 12.5px 12.5px 10px rgba(0, 0, 0, 0.01), 100px 100px 80px rgba(0, 0, 0, 0.02);
    --boxShadow: 7px 10px 22px -3px rgba(0,0,0,0.1);
}
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #000000;
}
/* ---------------------------------------------------------- common ---- */
.textHeader{
  padding: 0;
  margin: 0;
  font-size: 3.333vw;
  font-family: var(--contentFont);
}
.titleSpan{
  font-family: var(--headingFont);
  font-size: 1.46vw;
}
.paraText{
font-family: var(--headingFont);
font-size: 1.667vw;
color: #ffffff;
}

/* ---------------------------------------------------------- heroSec ---- */
.heroSec{
    padding-inline: 15vw;
    background-color: #000000;
    position: relative;
    overflow: hidden;
    padding-bottom: 5vw;
}
.heroText{
  text-align: left;
  margin-top: 9vw;
  z-index: 5;
}
.top-gradient{
  position: absolute;
  top: -2.8vw;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
}
.heroText h1{
    font-family: var(--contentFont);
    text-shadow: var(--textShadow);
    font-size: 3vw;
    color: #ffffff;
    font-weight: 800;
    margin-top: -0.1vw;
    font-style: oblique;
}
.titleHighColor{
  background: none;
  color: var(--deepFontColor);
}
.ellipseSecond{
  border: 0.6vw solid #7028e4a6;
  border-radius: 50%;
  position: absolute;
  width: 26vw;
  height: 26vw;
  left: 54vw;
  top: 7vw;
  z-index: 5;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  opacity: 0.5;
}
.ellipseThird{
  border: 0.6vw solid #7028e4;
  border-radius: 50%;
  position: absolute;
  width: 26vw;
  height: 26vw;
  left: 54vw;
  top: 7vw;
  z-index: 5;
  -webkit-filter: blur(50px);
  filter: blur(50px);
}
.magic{
  background: linear-gradient(to bottom, #7028e413, #000000);
  border-radius: 50%;
  position: absolute;
  width: 29vw;
  height: 22vw;
  left: 53vw;
  top: 13vw;
  z-index: 5;
  -webkit-filter: blur(13px);
  filter: blur(13px);
  opacity: 0.8;
}
.img-set-hero{
  position: absolute;
  width: 26vw;
  height: 26vw;
  left: 54.2vw;
  top: 7vw;
  text-align: center;
  z-index: 6;
  border-radius: 50%;
}
.firstPer{
    height: 29vw;
    position: absolute;
    left: -2vw;
    top: -3vw;
}
.hero-text-box{
  color: #ffffff;
  display: grid;
  grid-template-columns: 47% 47%;
  gap: 9.5%;
}
.text-box-one, .text-box-two, .text-box-three, .text-box-four{
  width: 31vw;
  position: relative;
}
.text-box-h3{
  font-size: 1.5vw;
  font-family: var(--contentFont);
  text-align:justify;
  word-break:keep-all;
}
.text-box-span{
  color: #a66fff;
}
.text-box-para{
  font-size: 0.9vw;
  font-family: var(--headingFont);
  font-weight: 400;
  text-align:justify;
  word-break:keep-all;
  margin-top: -1vw;
}
.text-box-num{
  position: absolute;
  font-size: 10.3vw;
  font-family:var(--contentFont);
  font-weight: 900;
  top: 2.3vw;
  left: -4vw;
  color: #a66fff00;
  -webkit-text-stroke: 0.4px #a66fff;
}
/* ------------------------------------------------------section-one ---- */
.section-one{
  padding-top: 3vw;
  padding-bottom: 4vw;
  padding-inline: 15vw;
  color: #ffffff;
  position: relative;
}
.section-one h2{
  font-size: 3.33vw;
  font-family: var(--contentFont);
}
.titleHighColor{
  background: none;
  color: var(--deepFontColor);
}
.team-section{
  display: grid;
  grid-template-columns: auto auto auto auto;
}
.team-member{
text-align: center;
padding-top: 3vw;
z-index: 5;
}
.team-member img{
width: 9.5vw;
height: 9.5vw;
border-radius: 50%;
}
.team-member h3{
  font-family: var(--contentFont);
  font-size: 1.5vw;
  color: #a66fff;
}
.team-member p{
  font-family: var(--contentFont);
  font-size: 1.1vw;
  margin-top: -1.5vw;
}
.mid-gradient{
  position: absolute;
  top: -15vw;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  opacity: 0.4;
}
/* ---------------------------------------------------------- footer ---- */
    .footer{
      position: relative;
        padding-bottom: 3vw;
        padding-inline: 4.219vw;
        color: #ffffff;
        z-index: 5;
      }
      .footSec{
        height: 20.104vw;
        background-color: #101010;
        border-radius: 3.385vw;
        padding-inline: 4.219vw;
        display: grid;
        grid-template-columns: 50% 50%;
        align-content: center;
      }
      .footerText h2{
        font-size: 4.427vw;
        font-family: var(--contentFont);
      }
      .btnfooter{
        padding-top: 2vw;
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        justify-content: left;
        gap: 1.5vw;
      }
      .smallBtnfooter{
        display: grid;
        justify-content: center;
        align-content: center;
        width: 11.875vw;
        height: 3.333vw;
        background-color: var(--btnColor);
        font-family: var(--headingFont);
        color: #ffffff;
        background-color: var(--btnColor);
        font-size: 1.3vw;
        font-weight: 600;
        border-radius: 32px;
        text-decoration: none;
        box-shadow: var(--boxShadow);
        cursor: pointer;
    }
    .footer-arrow{
      display: block;
      font-size: 3vw;
      font-family: var(--headingFont);
    }
    .footerList-ul{
      margin-top: 0;
      padding: 0;
      display: grid;
      grid-template-columns: auto auto auto auto auto;
      justify-content: space-between;
    }
    .footerList-ul li{
      list-style-type: none;
      display: inline-block
    }
    .footerList a{
      display: list-item;
      list-style-type: none;
      text-decoration: none;
      color: #ffffff;
      font-size: 1.406vw;
      font-family: var(--headingFont);
    }
    .footerSocial{
      margin-top: 7.5vw;
      padding: 0;
      display: grid;
      grid-template-columns: auto auto;
      justify-content: space-between;
    }
    .footerSocial li{
      list-style-type: none;
      display: inline-block
    }
    .footerSocial li:nth-child(2){
      display: grid;
      grid-template-columns: auto auto auto;
    }
    .footerSocial li:nth-child(2) a{
      margin-left: 1vw;
    }
    .foo-social-logo{
      width: 2.2vw;
    }