@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
@font-face {
    font-family: Heading;
    src:  url(/assets/fonts/Gallient.ttf);
  }
@font-face {
    font-family: gm;
    src: url(/assets/fonts/Graphik-Medium-Web.ttf);
  }
@font-face {
    font-family: gr;
    src: url(/assets/fonts/Graphik-Regular-Web.ttf);
  }
@font-face {
    font-family: gsb;
    src: url(/assets/fonts/Graphik-Semibold-Web.ttf);
  }
    @font-face {
    font-family: neu;
    src: url(/assets/fonts/NeueHaasDisplayMediu.ttf);
}

@font-face {
    font-family: neu;
    font-weight: 100;
    src: url(/assets/fonts/NeueHaasDisplayLight.ttf);
}

@font-face {
    font-family: neu;
    font-weight: 200;
    src: url(/assets/fonts/NeueHaasDisplayRoman.ttf);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    width: 100%;
}
html, body {
    height: 100%;
    width: 100%;
    font-family: gr;
}
*::selection {
    background-color: #fff;
    color: #96b73d;
  }
  .c-scrollbar {
    background: transparent;
}
.c-scrollbar_thumb {
    background-color: transparent;
}


:root {
    --black:#000;
    --offblack:#0E0E0E;
    --white:#ffffff;
   --offwhite:#e7e5e5;
   --offpurple:#b084d3;
   --mediumpurple:#8b53a1;
   --offyellow:#d3ff4e;
   --mediumyellow:#96b73d;
   --mtext:#575b5f;
  --mdgwt:#777c81;
  }
/*  */

#main{
    position: relative;
    background-color: var(--black);
}

.serviceherobanner{
    width: 100%;
    height: 100vh;
    background-color: #000;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    gap: 2vw;
    padding:1vw 4vw;
}
.serviceherobanner h1{
  display: none;
}
.serviceherobanner h2{
  font-size: 16vw;
  font-family: neu;
  color: #575b5f;
  font-weight: 900;
}
.serviceherobanner h2 span{
  font-size: 16vw;
  font-family: neu;
  color: #575b5f;
  font-weight: 900;
}

.serviceherobanner p{
  width: 55%;
  font-size: 1.5vw;
  font-family: gr;
  color: #777c81;

  line-height: 1.5;
}
.serviceherobanner p span{
  width: 55%;
  font-size: 1.5vw;
  font-family: gr;
  color: #777c81;

  line-height: 1.5;
}

@media (max-width:768px) {
.serviceherobanner{
    gap: 4vh;
    padding:4vh 0vw;
    
}
.serviceherobanner h2{
  display: none;
}
.serviceherobanner h1{
  display: block;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  gap: 84px;
  
}
.serviceherobanner h1 span{
  font-size: 20vh;
  font-family: neu;
  color: #575b5f;
  font-weight: 900;
  animation-name: scroll;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-name: scroll;
  display: inline-block;
  animation-timing-function: linear;
  
}
.serviceherobanner h1::-webkit-scrollbar {
  display: none;
}
@keyframes scroll {
  0% {
      transform: translateX(0);
  }

  100% {
      transform: translateX(calc(-100% - 83px));
  }
}
.serviceherobanner p{
  width: 100%;
  font-size: 2.2vh;
  padding: 0 4vw;
}
.serviceherobanner p span{
  width: 100%;
  font-size: 2.2vh;
}
}

#servicepage2{
    display: flex;
    padding: 12vw 4vw 4vw;
    flex-direction: column;
    background-color: #000;
    gap: 12vw;
}
#servicesection{
    width: 100%;
    height: 100%;
    display: flex;
    gap: 6vw;
}
#servicesection a{
  text-decoration: none;
}
#servicesection-left{
    width: 34%;
    display: flex;
    flex-direction: column;
    gap: 1vw;
}
#servicesection-leftimg{
    width: 100%;
    height: 36vh;
    border-radius: 10px;
    overflow: hidden;
  }
  #servicesection-leftimg img{
  transition: .5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;

}
#servicesection-leftimg img:hover {
  scale: 1.1;
}

#servicesection-left p{
    font-size: 1.6vw;
    color: #ffffff;
}
#servicesection-left p span{
    font-size: 1.6vw;
    color: var(--mdgwt);
}


#servicesection-right{
    width: 60%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4vw;
    
}

#servicesection-right h1{
    font-size: 9vw;
    font-family: neu;
    color: var(--mtext);
    line-height: .7;
}

#servicesection-right p{
    font-size: 19px;
    font-family: gr;
    color: var(--mdgwt);
    line-height: 1.6;
    width: 96%;
    
}
#servicesection-rightul{
    display: flex;
    flex-direction: column;
    gap: 4vw;
    margin-top: 6vw;
}
#servicesection-rightul ul{
    display: flex;
    flex-direction: column;
    gap: 1vw;
    margin-left: 20px;
}
#servicesection-rightul ul h2{
    font-size: 1.8vw;
    font-family: gr;
    margin-bottom: 1vw;
    position: relative;
    color: #fff;
}
#servicesection-rightul ul h2 span{
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background: linear-gradient(to top right, #833ab4, #b084d3);
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
}
#servicesection-rightul ul li{
    list-style: none;
    font-size: 19px;
    font-family: gr;
    color: var(--mdgwt);
}

@media (max-width:768px) {
  
#servicepage2{
    padding:10vh 4vw;
    gap: 12vh;
}
#servicesection{
    flex-direction: column-reverse;
    gap: 8vh;
}
#servicesection-left{
    width: 100%;
    gap: 2vh;
    height: 33vh;
}
#servicesection-left img{
    height: 100%;
}
#servicesection-left p{
    font-size: 2.2vh;
}
#servicesection-left p span{
    font-size: 2.2vh;
    color: var(--mdgwt);
}
#servicesection-right{
    width: 100%;
    border-top: none;
    gap: 4vh;
    padding-top: 4vh;
}

#servicesection-right h1{
    font-size: 7vh;
     
}
#servicesection-right p{
    font-size: 1.7vh; 
    width: 100%;
    
}
#servicesection-rightul{
    gap: 8vh;
    margin-top: 6vh;
}
#servicesection-rightul ul{
    gap: 1.2vh;
    margin-left: 30px;
}
#servicesection-rightul ul h2{
    font-size: 2.2vh;
    margin-bottom: 1.4vh;
}

#servicesection-rightul ul li{
    font-size: 1.8vh;
}

}





#servicepage3{
  width: 100%;
  height: 100%;
  padding: 4vw;
}

#servicepage3-content{
    /* border-top: 1px solid var(--mdgwt); */
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 4vw;
  gap: 4vw;
}
#servicepage3-content ul{
  width: 60%;
  display: grid;
  grid-template-columns: repeat(1,1fr);
  gap: 4vw;


}
#servicepage3-content h3{
    font-size: 1.2vw;
    display: flex;
    justify-content: flex-start;
    gap: .87vw;
    color: var(--white);
    font-family: gr;
}
#servicepage3-content h3 span{
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background: linear-gradient(to top right, #833ab4, #b084d3);
    display: block;
    z-index: 9999;
    margin-top: 5px;
}
#servicepage3-contentsection{
  width: 100%;
  padding: 4vw 0 0vw;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2vw;
  cursor: pointer;
}
#servicepage3-contentsection::after{
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--mdgwt);
  position: absolute;
  top: 0;
  left: 0;

}
#servicepage3-contentsection:hover h1 span{
  -webkit-text-stroke: transparent;
  color: transparent;
   background: linear-gradient(to top right, #833ab4, #b084d3);
   -webkit-text-fill-color: transparent;
   background-clip:text;
  }
  #servicepage3-contentsection:hover::after{
  background: linear-gradient(to top right, #833ab4, #b084d3);

}
#servicepage3-contentsection h1{
  display: flex;
  flex-direction: column;
  gap: 2vw;
  font-size: 1.5vw;
  color: #ffffff;
  font-family: gr;
}
#servicepage3-contentsection h1 span{
  font-size: 12vw;
  font-family: neu;
  /* -webkit-text-stroke: 1px var(--mdgwt); */
  color: var(--mtext);
  transition: 1s ease-in;
  line-height: 1.8;
}

#servicepage3-contentsection p {
  width: 90%;
  font-size: 1.2vw;
  color: var(--mdgwt);
  font-family: gr;
}

@media (max-width:768px) {
  
#servicepage3{
  padding:4vh 4vw;
}

#servicepage3-content{
  width: 100%;
  border-top:none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  gap: 1vh;
}

#servicepage3-content ul{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1,1fr);
  gap: 4vh;
  

}
#servicepage3-contentsection{
  padding-top: 6vh;
  gap: 2vh;
}
#servicepage3-contentsection::after{
  height: 1px;
  background-color: var(--mdgwt);
}
#servicepage3-content h3{
    font-size: 2vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .87vh;
    color: var(--white);
}
#servicepage3-content h3 span{
    margin-top:0;
}


#servicepage3-contentsection h1{
  gap: 2vh;
  font-size: 2.2vh;
}
#servicepage3-contentsection h1 span{
  font-size: 15vh;
}

#servicepage3-contentsection p {
  width: 100%;
  font-size: 1.7vh;
}

}

#servicepage4 {
    height: 100%;
    width: 100%;

    padding:6vw 4vw ;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
   
}

.swiper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}
.swiper-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2vw 0;
}
.swiper h1{
    font-size: 1.2vw;
    position: relative;
    margin-left: 20px;
    color: var(--white);
    font-family: gr;
}
.swiper h1 span{
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background: linear-gradient(to top right, #833ab4, #b084d3);
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
}
.swiper-slide {
    width: 28%;
    border-left: 1px solid #aeadad;
    padding: 0 2vw;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1vw;
    -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; 
}
.swiper-slide img{
    width: 50%;
    -webkit-filter: invert(10);
    filter: invert(10);
    -o-object-fit: cover;
    object-fit: cover;
}
.swiper-slide p{
    width: 75%;
    font-size: 1.1vw;
    font-family: gr;
    color: var(--mtext);
}
@media (max-width:768px) {
  #servicepage4 {
    padding: 6vh 4vw ;
  }
#servicepage4  .swiper {
    width: 100%;
    gap: 6vh;
}
#servicepage4  .swiper-wrapper {
    padding: 2vw 0;
}
#servicepage4  .swiper h1{
    font-size: 2vh;
}

#servicepage4  .swiper-slide {
    width: 80%;
    padding: 0 2vh;
    gap: 4vh;
}
#servicepage4  .swiper-slide img{
    width: 100%;
}
#servicepage4  .swiper-slide p{
    width: 100%;
    font-size: 1.8vh;
    font-family: gr;

}
}