html,body{
    width:100%;
  height:100%;
 
}
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family:"Space Grotesk", sans-serif;
  
}
.main{
  width:100%;
  height:100%;
position:relative;
}
/* nav */
.nav{
  width:100%;
  height:120px;
  /* background-color:palevioletred; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5vw;
}
.nav h1{
  font-size: 3.2vw;
}
.nav-part2{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:4vw;
}
.navp{
  font-size: 1.1vw;
  position: relative;
cursor: pointer;
text-decoration: none;
color:black;
}
.navp::after{
  content:'';
  background-color: #B9FF66;
  height:0.2vw;
  width:0;
  position: absolute;
  bottom: -0.2vw;
  left:0;
  transition: 0.5s;
}
.navp:hover::after{
  width:100%;
}
.navp:hover{
color:#B9FF66;
 background: conic-gradient(
    #B9FF66,
    #00ffaa,
    #00f0ff,
    #ffffff,
    #f3f3f3,
    #B9FF66
  );
   -webkit-background-clip: text;
  background-clip: text; /* for Firefox */
 
}
.nav-anchor{
  display: inline-block;
  font-size: 1vw;
  position:relative;
  transition: 0.25s;
  background-color: #ffffff;
   padding: 1.2vw 2.2vw;
 border-radius: 1vw;
 border:1px solid black;
 color:black;
 text-decoration: none;
  overflow: hidden;
  z-index:1;
}
.nav-anchor::before{
  content:'';
  position: absolute;
 height:100%;
 width:0;
 background-color: black;
 top:0;
 left:0;
 z-index:-1;
  transition: 0.5s;
}
.nav-anchor:hover{
  color:white;
}
.nav-anchor:hover::before{
 width:100%;
}
.nav img{
  width:11.3vw;
  height:11.3vh;
  object-fit: contain;
}
.nav-part2 i{
  display: none;
}
/* Home */
.Home{
  width:100%;
height: auto;
  display: flex;
  flex-wrap: wrap;
}
/* homeleft */
.Home-left{
width:45%;
height: 80%;
padding: 4vw 5vw;
}
.Home-left h2{
  margin-top: -1.3vw;
  margin-bottom: 2vw;
 font-size: 4vw;
 line-height: 5vw;
 
}
.Home-left p{
  margin-top: 1.1vw;
  margin-bottom: 2.2vw;
  margin-left: 0.2vw;
font-size: 1.3vw;
line-height: 1.7vw;
width:85%;
text-align: left;
}
.Home-lefta{
    display: inline-block;
padding:1vw 1.5vw;
  background-color: black;
  color: #f3f3f3;
  border:2px solid black;
 border-radius: 1vw;
  font-size: 1.2vw;
  text-decoration: none;
  letter-spacing: 1;
  justify-content: center;
  align-items: center;
  z-index: 1;
  overflow: hidden;
    position: relative;
}
.Home-lefta::before{
content:'';
position: absolute;
width:0;
height:100%;
top:0;
left:0;
background-color: white;
z-index: -1;
transition: 0.5s;
}
.Home-lefta:hover{
  color: black;
}
.Home-lefta:hover::before{
width:100%;
}
.Home-lefta1{
    display: inline-block;
padding:1vw 1.5vw;
  background-color: black;
  color: #f3f3f3;
  border:2px solid black;
 border-radius: 1vw;
  font-size: 1.2vw;
  text-decoration: none;
  letter-spacing: 1;
  justify-content: center;
  align-items: center;
  z-index: 1;
  overflow: hidden;
    position: relative;
}
.Home-lefta1::before{
content:'';
position: absolute;
width:0;
height:100%;
top:0;
left:0;
background-color: white;
z-index: -1;
transition: 0.5s;
}
.Home-lefta1:hover{
  color: black;
}
.Home-lefta1:hover::before{
width:100%;
}
.Home-last{
width:100%;
height: 6.25vh;
padding:0vw 5vw;
display: flex;
align-items: center;
gap:155px;
}
/* .Home-right */
.Home-right{
  padding: 4vw 5vw;
width:55%;
height: 80%;
margin: 0;
padding: 0;
overflow: hidden;
}
.Home-right1{
    display: none;
}
.Home-right1 img{
  object-fit: contain;
  width: 80%;
  height: 80%;
  display: block;
transform: translateX(7vw);
}
.Home-right img{
  object-fit: contain;
  width: 80%;
  height: 80%;
  display: block;
transform: translateX(7vw);
}
/* lastboxes */
.box{
background-image: url('./image/logo1.png');
background-size: contain;
background-repeat: no-repeat;
width:100px;
height:6.25vh;
filter: grayscale(100%) brightness(70%);
display: flex;
justify-content: center;
align-items: center;
}
.box1{
  background-image: url('./image/logo1.png');
}
.box2{
 background-image: url('./image/logo2.png');
}
.box3{
 background-image: url('./image/logo3.png');
}
.box4{
 background-image: url('./image/logo4.png');
}
.box5{
 background-image: url('./image/logo5.png');
}
.box6{
 background-image: url('./image/logo6.png');
}
/* service */
.service{
  padding:0 5vw;
  margin-top: -2.2vw;
}
.spara{
  display: none;
}
.service-header{
  /* background-color: #ffffff; */
  width:100%;
  height:80px;
}
#space{
  width:100%;
  height:10px;
}
.service-header1{
  margin-top: 2vw;
  width:100%;
  height:80px;
  display: flex;
  gap: 2vw;
}
.service-header1 a{
  font-weight: 500;
  font-size: 2.2vw;
  text-decoration: none;
  color:black;
  background-color: #B9FF66;
  padding:0 0.3vw;
  height: 54%;
  border-radius: 0.2vw;
}
.serviceheader1-para{
  display: none;
}
.service-para{
  color: black;
  width:38%;
  height:54%;
  line-height: 1.3vw;
}
@property --angle{
  syntax:"<angle>";
  initial-value: 0deg;
  inherits: false;
}
.service-box{
display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* ensures space between two boxes */
  width: 100%;
  padding: 2vw 0;
}
.service-box1{
  flex: 0 1 48%;
  border: 0.1vw solid black;
  height: 300px;
  background-color: #f3f3f3;
  margin-bottom: 3vw;
  border-radius: 3vw;
  display: flex;
  position: relative;
}
.service-box1::after,
.service-box1::before{
  content:'';
  position: absolute;
  background-color: rgb(0, 0, 0);
  width:100%;
  height: 100%;
  z-index: -1;
padding-top:0.5vw;
background-image: conic-gradient(from var(--angle),#B9FF66,
  #00ffaa,
  #00f0ff,
  #ffffff,
  #f3f3f3,
  #B9FF66);
border-radius:3vw;
transition:height ease 1.5s;
animation:3s spin linear infinite;
}
.service-box1::before{
  filter:blur(1.5rem);
  opacity: 0;
}
.service-box1:hover::before{
  filter:blur(1.5rem);
  opacity: 0.8;
}
@keyframes spin{
  from{
    --angle:0deg;
  }
  to{
    --angle:360deg;
  }
}
.sb2{
  background-color: #B9FF66;
}
.sb3{
  background-color: black;
}
.Sleft{
  display: flex;
  flex-direction: column;
  gap:9vw;
  margin-left: 3vw;
    width:50%;
    height: 50%;
}
.left-para{
  display: flex;
  flex-direction: column;
  margin-top:2vw;
}
.left-para a{
  background-color: #B9FF66;
  text-decoration: none;
  color:black;
  font-size: 2vw;
  font-weight: 500;
  border-radius: 0.4167vw;
  padding:0.1vw 0.5vw;
 width:max-content;
 height: max-content;
}
.left-last{
  display: flex;
  gap:1vw;
   font-size: 1.2vw;
    margin-top: -1.2vw;
}
.left-decor{
background-color: black;
width:max-content;
height: max-content;
padding:0.4vw 0.4vw;
border-radius: 5vw;
text-align: center;
margin-top: -1.4vw;
position: relative;
overflow: hidden;
display: inline-block;
z-index: 1;
}
.left-last i{
 color:#B9FF66;
}
.left-last .txt{
  text-decoration: none;
  color: black;
 margin-top: -0.89vw;
}
.Sright{
  margin-top: 1vw;
  margin-left: 1vw;
  width:50%;
  margin-right: 3vw;
  height:400px;
  background-image: url('./image/s2.png');
  filter: grayscale(100%) brightness(100%);
  background-size: contain;
  background-repeat: no-repeat;
}
.service-last{
  margin-top: 3vw;
  border-radius: 3vw;
  width:100%;
  height:330px;
  background-color: #f3f3f3;
  display: flex;
  position: relative;
 
}
.service-last::after,
.service-last::before{
  content:'';
  position: absolute;
  background-color: rgb(0, 0, 0);
  width:100%;
  height:330px;
z-index: -1;
background-image: conic-gradient(from var(--angle),#B9FF66,
  #00ffaa,
  #00f0ff,
  #ffffff,
  #f3f3f3,
  #B9FF66);
border-radius:3vw;
transition:height ease 1.5s;
animation:3s spin linear infinite;
}
.Home-lefta1{
  display: none;
}
.service-spec1{
  display: none;
}
.service-last::before{
  filter:blur(1.5rem);
  opacity: 0.8;
} 
.service-last-left{
  width:50%;
  height:100%;

}
.service-last-right{
   width:50%;
  height:100%;

}
.SLLH{
  padding:2.5vw 3vw;
  font-weight: 450;
  margin-top: 1vw;
  font-size: 2.5vw;
}
.SLLP{
    padding:0 3vw;
     font-size: 1.1vw;
     width:80%;
     line-height: 1.5vw;
}
.service-spec{
  margin:1.5vw 3vw;
}

.img{
  background-image: url('./image/Illustration2.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-top:-1.5vw;
  margin-left: 15vw;
  overflow: hidden;
width:50%;
height:400px ;
}
/* casestudies */
.casestudies{
    padding:0 5vw;
  margin-top: -2.2vw;
}
/* @media(max-width:600px){

} */
.largecasebox{
  margin-top: 2vw;
  border-radius: 3vw;
  width:100%;
  height:330px;
 background: black;
 color:white;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 padding:2.5vw 3vw;
padding-top:3.5vw;
   transform: translateY(1rem);
  transition:transform 0.6s ease, box-shadow 0.6s ease;
 
}

.largecasebox:hover{
 transform: translateY(-1.3rem);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   cursor: pointer;
}
.boxcase{
  width:30%;
}

.boxcase p{
 position: relative;
 top:-1.1vw;
  line-height: 1.7vw;
  width:80%;
  font-size: 1.1vw;
  text-align: left;
  height:150px;
}
.inlin-item{
  display: inline-flex;
  position: relative;
  top:-1.1vw;
  gap:0.5vw;
  color:#B9FF66;
 
}
.inlin-item a{
  text-decoration: none;
  color:#B9FF66;
}
.inlin-item a:hover{
  color:#f3f3f3;
}
.feather {
  width: 24px;
  height: 24px;
}
.feather:hover{
  color:#f3f3f3;
  cursor: pointer;
}
.vl{
    border-left: 0.3vw solid #f3f3f3;
  height: 210px;
  margin-right:3.6458vw;
}
/* workingprocess */
.workingprocess{
      padding:0 5vw;
  margin-top: -2.2vw;
}
.working-para{
  color: black;
  width:20%;
  height:54%;
  line-height: 1.3vw;
}
.working-anchor{
  display: none;
}
.process-anchor{
  display: none;
}
.goal{
  margin-top: 2vw;
  border-radius: 2vw;
  width:100%;
  height:120px;
 background: #f3f3f3;
 color:black;
 padding:0 3vw;
 position: relative;
}
.goal::after,.goal::before{
  content:'';
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:120px;
    border-radius: 2vw;
 top: 0.35vw; 
   z-index:-1 ;
  background-color: black;
  background-image: conic-gradient(from var(--angle),#B9FF66,
  #00ffaa,
  #00f0ff,
  #ffffff,
  #f3f3f3,
  #B9FF66);
  transition:height ease 1.5s;
animation:2s spin linear infinite;
}
.goal::before{
  opacity: 0.5;
}
.goal:hover{
 background-color:#e0e0e0;
 cursor: pointer;
}
.goalbox{
display: flex;
 display: flex;
  justify-content: space-between;
 align-items: center;
width: 100%;
height:120px;
}
.leftgoal{
  display: flex;
  align-items: center;
  justify-content: center;
  gap:1vw;
}
.leftgoal h1{
  font-size: 2.5vw;
}
.leftgoal p{
  font-size: 1.5vw;
  font-weight: 500;
}
.rightgoal a{
 border:0.1vw solid black;
 color: black;
  text-decoration: none;
  text-align: center;
font-size: 3vw;
font-weight: 500;
line-height: 3vw;
  border-radius:50%;
  width: 3vw;
height: 3vw;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;

}

.rightgoal a:hover{
background-color:black;
color:white;
}
.rightgoal p{
position: relative;
top:-3px;
}
/* Team */
.Team{
      padding:0 5vw;
  margin-top: -2.2vw;
}
.Team-para{
  color: black;
  width:30%;
  height:54%;
  line-height: 1.3vw;
}
.teamBox{
  height: auto; /* let it grow according to children */
  margin-top: 2vw;
   display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap:2vw;
  width: 100%;
 
 margin-left: -1vw;
 padding-bottom: 1.5vw;
}
.teamSmallBox{
  width:30%;
  height:320px;
  border: 1px solid black;
 background-color: white;
  display: flex;
  flex-direction: column;
border-radius:14%;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
 
}
.teamSmallBox::after,.teamSmallBox::before{
  content:'';
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:320px;
    border-radius: 14%;
 top: 0.35vw; 
  background-color: black;
  background-image: conic-gradient(from var(--angle),#B9FF66,
  #00ffaa,
  #00f0ff,
  #ffffff,
  #f3f3f3,
  #B9FF66);
  transition:height ease 1.5s;
animation:2s spin linear infinite;
 z-index:-1;
}
.teamSmallBox::before{
  opacity: 0.5;
}
.teamSmallBox:hover{
 box-shadow: 0 0 10px rgb(0, 0, 0);
 cursor: pointer;
}
.teamTop{
  width:100%;
  height:140px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
}
/* .petal {
  position: relative;
  width: 10vw; 
  height: 10vw; 

  display: inline-block; 
background-color: #00f0ff;

} */

.person {
  position: absolute;
  display: inline-block;
  top: -3.5vw;
  left: -13vw;
  width: 12vw;
  height: 12vw;
  background-image: url('./image/team1.png');
  background-size: 50%;
 background-position: 50% 50%; 
  background-color: #96dd3f;
  background-blend-mode: multiply;
  -webkit-mask-image: url('./image/team_petal.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('./image/team_petal.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  border-bottom:4px black;
  z-index:1;
}
.tperson{
   position: absolute;
  display: inline-block;
  z-index:0;
  top: -3.4vw;
  left: -12.69vw;
  width: 12vw;
  height: 12vw;
  background-image: url('./image/team1.png');
  background-size: 50%;
 background-position: 50% 50%; 
  background-color: #161616;
  background-blend-mode: multiply;
  -webkit-mask-image: url('./image/team_petal.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('./image/team_petal.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  border-bottom:4px rgb(53, 53, 53);
}
 .person-wrapper {
  margin-top: -0.8vw;
  margin-left: 1vw;
  position: absolute;
  display: inline-block;
  padding: 1vw; /* space for shadow */

   /* background: red; border color */
  border-radius: 50%; } 
.teamPara{
  margin-top:4vw;
  margin-left:7vw;
}
.teamPara :nth-child(1){
   font-size:1.2vw ;
font-weight: 600;
}
.teamPara p{
  font-size:1vw ;
}
.teamTop a{
  text-decoration: none;
  background-color: black;
  margin-top: -2.5vw;
  width:2vw;
  height:2vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.teamTop i{
  color:#B9FF66;
  font-size: 1vw;
}
.teamBottom{
  width:100%;
  height:100px;
  
}
.teamBottom p{
  position: relative;
  left:0.7vw;
  font-size: 1.1vw;
  width:80%;
  height:100px;
  margin-top:1.5vw;
  margin-left: 1.2vw;
  line-height: 1.5vw;
}
.teambotom-button{
  margin-top:1.5vw;
  margin-left: 71vw;
    display: inline-block;
padding:1vw 4vw;
  background-color: black;
  color: #f3f3f3;
  border:2px solid black;
 border-radius: 0.8vw;
  font-size: 1vw;
  text-decoration: none;
  letter-spacing: 1;
  justify-content: center;
  align-items: center;
  z-index: 1;
  overflow: hidden;
    position: relative;
}
.teambotom-button::before{
content:'';
position: absolute;
width:0;
height:100%;
top:0;
left:0;
background-color: white;
z-index: -1;
transition: 0.5s;
}
.teambotom-button:hover{
  color: black;
}
.teambotom-button:hover::before{
width:100%;
}
/* contact us */
.contactus{
  padding:0 4.8rem;
 margin-top: -2.112rem;

padding-bottom: 10rem;
}
.service-header1 .contact-para{

height:5.5vh;
width:19vw;
}
.contactForm {
  width: 100%; /* fixed */
  height: 655px;

  display: flex;
  background-color: #f3f3f3;
  overflow: hidden;
}
.left-contactForm{
  padding-top: 2.3959vw;  /* 2.3rem → 2.3959vw */
  width:50%;
  height:100%;
 
  display: flex;
  flex-direction: column;
  gap:2.083vw;  /* 2rem → 2.083vw */
  justify-content: center;
  align-items: center;
}
.radio-contactLeft{
  display: flex;
  gap:1.042vw;   /* 1rem → 1.042vw */
 
  margin-left:-17.5vw;  /* -19.6rem → -20.417vw */
}
.radio-contactLeft   input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.5vw;
  height:1.5vw;
  border: 2px solid rgb(83, 82, 82);   /* outer circle border */
  border-radius: 50%;
  background: white;
  cursor: pointer;
  position: relative;
}

/* Create inner dot */
.radio-contactLeft  input[type="radio"]::after {
  content: "";
  width: 10px;
  height: 10px;
  background: transparent;   /* hidden by default */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* When checked  dot becomes colored */
.radio-contactLeft    input[type="radio"]:checked::after {
  background:#B9FF66;   
}
.input-contactLeft{
  display: flex;
  flex-direction: column;
  gap:0.521vw;   /* 0.5rem → 0.521vw */
  width:80%;
}
.input-contactLeft label{
  font-size: 1.042vw;   /* 1rem → 1.042vw */
}
.input-contactLeft input{
  padding:0.938vw;   /* 0.9rem → 0.938vw */
  border-radius: 0.8vw;
  border-style:solid;
  box-sizing: border-box;
}
.input-contactLeft textarea{
  border-radius: 0.8vw;
  resize: none;
  padding-left: 1.042vw;  /* 1rem → 1.042vw */
  padding-top:1.042vw;    /* 1rem → 1.042vw */
}
.left-contactForm .teambotom-button{
  text-align: center;
  width:80%;
  margin-left:0;
  padding:1vw 4vw;
  position: relative;
  top:-1.563vw;   /* -1.5rem → -1.563vw */
}
.right-contactForm{
  width:50%;
  height: 100%;
}
.right-contactForm .rightimg img{
  width:100%;
  height:100%;
  position: relative;
  left:20.833vw;  /* 20rem → 20.833vw */
}

@media(max-width:600px){
  .main {
  display: flex;
  flex-direction: column; /* stack sections vertically */
}
  .nav{
   height:80px;
  }
  .nav img{
  width:35.3vw;
  height:35.3vh;
  }
  .nav-anchor{
    display: none;
  }
  .nav-part2 a{
    display: none;
  }
  .nav-part2 i{
    display: block;
    font-size: 6vw;
  }
  .Home-left{
      width: 100%;
    padding: 4vw 3vw;
    padding-bottom: 12vw;
  }
  .Home-left h2{
    margin-top: 2vw;
    font-size: 10.2vw;
    line-height: 12vw;
    width:100%;
  }
  .Home-left p{
      margin-top: 4vw;
    width:100%;
    font-size: 3.7vw;
    line-height:6vw ;
  }
  .Home-left a{
    margin-top: 9vw;
padding:2.5vw 22.5vw;
  border:2px solid black;
 border-radius: 2vw;
  font-size: 4.2vw;
  letter-spacing: 1;
  }
  .Home-right1{
  object-fit: contain;
  width: 100%;
  height: auto;
  display: block;
  object-position: center;
transform: translateX(0);
   margin-top: 0; /* was 5vw */
  
  }
  .Home-right{
    display: none;
  }
  .Home-last{ 
   height: auto;
 
  gap:5vw;
  display: flex;
  justify-content: center;
   flex-wrap: wrap;
 

  }

  .service-header{
    display: none;
  }
  .service-header1{
    
    margin-top: 14vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
  }
.casestudies .service-header1 .Team-para{
  display: none;
}
.service-header1 .caseStudies-para{
  display: block;
  margin-top: 0.8rem;
  width:100%;
  padding-right: 0.5rem;
  font-size: 0.8rem;
  line-height: 0.9rem;
  text-align: center;
  display: block !important;
}
  .service-header1 a{
    font-size: 8vw;
    font-weight: 600;
  }
 
 
   .service-para{
    display: none;
   }
  
   .service-box{

    margin-top: 10vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .service-box1{
  flex: 0 1 96%;
  border: -3vw solid black;
  height: 260px;
  margin-bottom: 6vw;
  border-radius:10vw;
   }
   .serviceheader1-para{
  width:100%;
  padding-right: 0.5rem;
  font-size:0.8rem;
  line-height: 1.2rem;
  text-align: center;
  margin-top:0.8rem ;
}
   .left-para a{
  font-size: 7vw;
  font-weight: 480;
  border-radius: 0.4167vw;
   }
   .Sleft{
    gap:28vw;
    margin-left: 12vw;
    margin-top: 6vw;
   }
   .left-last{
    margin-top: -3vw;
    padding: 0;
   }
   .left-last a{
     font-size: 4vw;
   }
   .txt{
    display: none;
   }
   .left-decor{
padding:1.7vw 1.7vw;
font-size: 3vw;
border-radius: 10vw;
text-align: center;
   }
   .Sright{
  width:50%;
  height:100px;
  position: absolute;
  top:6.5vw;
  left:40vw;
margin-top: 15.5vw;
  flex-shrink: 0;
  height: 500px;
}
.service-box1::after,
.service-box1::before{
  border-radius:10vw;
  padding-top:1.5vw;
transition:height ease 1.5s;
animation:3s spin linear infinite;
}
.service-box1::before{
  filter:blur(1rem);
}
.service-box1:hover::before{
  filter:blur(1rem);
  opacity: 0.6;
}
.service-last{
position: relative;
left:2vw;
  margin-top: 3vw;
  border-radius: 10vw;
  height:270px; 
  flex-shrink: 0;
margin: 0;
padding: 0;
width:96%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom:8vw;
}
.service-last::after,
.service-last::before{
  height:270px;
}
.service-last-left{
     margin-left: 12vw;
    margin-top: 6vw; 
    width: 100%;
  
}
.SLLH{
  margin: 0;
  margin-top: 4vw;
  margin-bottom: 6vw;
  padding: 0;
  font-weight: 650;
  font-size: 6.7vw;
  width: 100%;
  line-height: 7vw;
    flex-shrink: 0;
}
.SLLP{
  margin: 0;
  padding: 0;
  text-align: left;
  padding-right: 12vw;
    /* padding:0 3vw; */
     font-size: 3.37vw;
     /* width:80%; */
     width:100%;
     line-height: 4.8vw;
       flex-shrink: 0;
}
.service-last-left .Home-lefta{
  display: none;
}
.Home-lefta1{
    display: inline-block;
padding:3vw 15.7vw;
margin: 0;
  background-color: black;
  color: #f3f3f3;
  border:2px solid black;
 border-radius: 2vw;
  font-size: 3.6vw;
  text-decoration: none;
  letter-spacing: 3;
  justify-content: center;
  align-items: center;
  z-index: 1;
  overflow: hidden;
    position: relative;
    left:-3vw;
    top:2vw;
}
.service-last-right{
display: none;
}
.service-spec1{
  margin:1.5vw 3vw;
}
.service-last::after,
.service-last::before{
  height: 270px;
  border-radius:10vw;
}
.service-last::before{
  filter:blur(1rem);
  opacity: 0.6;
} 
.largecasebox{
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  width:100%;
  height:200px;
  padding: 0;
  background-color: transparent;
  margin-left: 1.5vw;
  margin-top: 5vw;
  margin-bottom: 15vw;

}
.largecasebox:hover{
 transform: none !important;
    box-shadow: none !important;
    cursor: default !important;
}
.boxcase{
  background-color: black;
  min-width: 300px;
  height:200px;
  border-radius: 10vw;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left:5vw ;
  margin-left: 3vw;
}
.vl{
  display:none;
}
.boxcase p{
  top:3vw;
  left:1vw;
  min-width: 250px;
  padding-left:2vw ;
  font-size: 3.5vw;
  line-height: 20px;
  
}
.inlin-item{
  left:3vw;
  margin-top:-4vw;

  font-size: 3.5vw;
}

/* our working process */

 .working-header{
  
  height:150px;
  margin-bottom: 7.5vw;
  margin-top: 4vw;
 }
 .working-header a{
display: none;
 }
.service-header1  .working-anchor{
  display: inline-block;

 }
.service-header1 .process-anchor{
  position: relative;
  top:-3vw;
  display: inline-block;
   
 }
.service-header1 .working-para{

width:100%;
font-size:3.5vw;
line-height: 4vw;
text-align: center;
padding-top: 3.2vw;
          }
.spara{
  display: none;
}
.goal{
  border-radius: 10vw;
   height:80px;
   margin-bottom:5vw;
 padding-left: 5vw;
   transition:height ease 1.5s;
}
.goal::after,.goal::before{
height:80px;
border-radius: 10vw;
 top: 1.35vw; 
animation:1.5s spin linear infinite;
}
.goalbox{
  
  height:80px;
}
.leftgoal{
  gap:4vw;
}
.leftgoal h1{
font-size:6vw;

}
.leftgoal p{
  width:59vw;
font-size:4vw;

white-space: wrap;
}
.rightgoal a{
 
 margin-right: 3vw;
   width: 7vw;
height: 7vw;
font-size:7vw ;
}
.rightgoal p{
position: relative;
top:0px;
}
/* team */
.Team .service-header1 a{
padding:0.05rem 0.25rem 0.05rem 0.25rem;
font-size: 2rem;
margin-bottom: 1rem;
}
.Team-para{
  width:100vw;
  padding-right: 0.5rem;
  font-size: 0.8rem;
  line-height: 0.9rem;
  text-align: center;
}
.teamBox{
 
  margin-top:2rem ;
}
.teamSmallBox{
  margin-left: 1.2rem;
  margin-right:0.5rem;
  width:96%;
   height:38vh;
   border-radius:12vw;
   transition:height ease 1.5s;
   margin-bottom:1.2rem;
}
.teamSmallBox::after,.teamSmallBox::before{
height:38vh;
   border-radius:12vw;
  top:0.25rem; 
  animation:1.5s spin linear infinite;
}
.teamSmallBox:hover{
 box-shadow: 0 0 5px rgb(0, 0, 0);
}
.teamTop{
  height:50%;
  border-radius:10vw;
  margin-top: -1rem;
  
}
.teamPara{
  margin-top: 5rem;
margin-left: 6.5rem;
 
}
.teamPara :nth-child(1){
   font-size:0.8rem ;
font-weight:1000;
}
.teamPara p{
  font-size: 0.8rem;
}
.teamTop a{
  margin-top: 0.1rem;
  width:8vw;
  height:8vw;
}
.teamTop i{
  font-size: 0.9rem;
}
.person{
   width: 45vw;
    height: 45vw;
}
.tperson{
    width: 45vw;
    height: 45vw;
    top:-0.55rem;
    left:-2.8rem;
}
.person-wrapper{
  margin-top: -5rem;
  margin-left: -16rem;
}
.teamBottom{
  height:20vw;
  width:100%;
  margin-top:1.7rem;
  margin-left:1rem ;
  position: relative;
  
  
  padding-left: 1rem;
}
.teamBottom p{

  font-size: 0.8rem;
  line-height: 1.1rem;
  
}
.teambotom-button{
  padding:0.7rem 6.5rem ;
margin-left:1rem ;
font-size: 1rem;
border-radius: 2vw;

}

/*
.teambotom-button::before{
content:'';
position: absolute;
width:0;
height:100%;
top:0;
left:0;
background-color: white;
z-index: -1;
transition: 0.5s;
}
.teambotom-button:hover{
  color: black;
}
.teambotom-button:hover::before{
width:100%;
}
*/
.teamSmallBox hr{
position: relative;
top:1rem;
z-index: 3;
}
.contactus{
 
  /* small spacing if needed */
  
  padding: 1.5rem 1rem;
  padding-top: 0;
}
 .contact-header .working-anchor{
  display: none;
}
.contact-header .process-anchor{
  display: none;
}
.service-header1 .contact-para{
  
  width:100%;
  height:10rem;
  text-align: center;
  margin-top:1rem;
}
.contactForm{
  background-color:#f3f3f3;
  margin-top: 2rem; /* or 0 */
  height:600px;
  padding: 0;
 border-radius: 8vw;
}
.right-contactForm{
  display: none;
} 
.left-contactForm{

   width:100%;
   gap:1.5rem;
}
.radio-contactLeft{
  
  gap:1rem;
  margin-left: 0
}

.radio-contactLeft input[type="radio"]{
  width:1.3rem;
  height:1.3rem;
}

.input-contactLeft label{
  font-size: 0.8rem;   
}
.input-contactLeft input{
 padding:0.93rem;  
}
/* contact us */
.contactus{

  /* small spacing if needed */
  margin-top: 0.01rem;
  padding: 1.5rem 1rem;
}
 .contact-header .working-anchor{
  display: none;
}
.contact-header .process-anchor{
  display: none;
}
.contact-header{
  padding-top: 0;
  margin-top: 1rem;
}
.service-header1 .contact-para{
 
  width:95%;
  height:10rem;
  text-align: center;
  margin-top:1rem;
  font-size: 0.8rem;
}
.contactForm{

  margin-top: 2rem; /* or 0 */
  height:550px;
  padding: 0;
 
}
.right-contactForm{
  display: none;
} 
.left-contactForm{
 
  
   width:100%;
   gap:1.5rem;
}
.radio-contactLeft{
  
  gap:1rem;
  margin-left: 0
}
.radio-contactLeft label{

 font-size: 0.9rem;

}
.radio-contactLeft input[type="radio"]{
  width:1.3rem;
  height:1.3rem;
}

.input-contactLeft label{
  font-size: 0.8rem;   
}
.input-contactLeft input{
 padding:0.83rem;  
 border-radius:4vw;
}
.input-contactLeft textarea{
  border-radius:4vw;
  padding-left: 3vw;
  padding-top: 2vw;
}
.left-contactForm .teambotom-button{
padding-top: 2vw;
padding-bottom: 2vw;
}
/*
.input-contactLeft input{
  padding:0.938vw; 
  border-radius: 0.8vw;
  border-style:solid;
  box-sizing: border-box;
}
.input-contactLeft textarea{
  border-radius: 0.8vw;
  resize: none;
  padding-left: 1.042vw;  
  padding-top:1.042vw;    
}
.left-contactForm .teambotom-button{
  text-align: center;
  width:80%;
  margin-left:0;
  padding:1vw 4vw;
  position: relative;
  top:-1.563vw;   
}

.radio-contactLeft   input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.5vw;
  height:1.5vw;
  border: 2px solid rgb(83, 82, 82);  
  border-radius: 50%;
  background: white;
  cursor: pointer;
  position: relative;
}


.radio-contactLeft  input[type="radio"]::after {
  content: "";
  width: 10px;
  height: 10px;
  background: transparent;   
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.radio-contactLeft    input[type="radio"]:checked::after {
  background:#B9FF66;   
}

.right-contactForm{
  width:50%;
  height: 100%;
}
.right-contactForm .rightimg img{
  width:100%;
  height:100%;
  position: relative;
  left:20.833vw;  
}
*/

}