*{margin: 0; padding: 0; }
/* Service Banner Start */
.serviceBanner .innerserviceBanner{
position: relative;
}
#bannerH2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.8rem;
z-index: 1;
color: #fff;
font-weight: 500;
animation: bannerh2 1s linear;
transition: .5s;
}
@keyframes bannerh2{
0%{font-size: 0;}
}
.serviceBanner .innerserviceBanner ul{
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 1rem;
z-index: 1;
display: flex;
}
.serviceBanner .innerserviceBanner ul li{
list-style: none;
font-weight: 400;
}
.serviceBanner .innerserviceBanner ul li a{
text-decoration: none;
display: block;
color: #fff;
margin:0 5px;
font-weight: 400;
animation: bannerh2 1s linear;
transition: .5s;
}
.serviceBanner .innerserviceBanner ul li a:hover{
color: #be1922;
}
.serviceBanner .innerserviceBanner .serviceSlider img.slides{
animation: myslide 2s infinite;
}
.serviceBanner .innerserviceBanner {
    width: 100%;
    height: 60vh;
    overflow: hidden;
  }

  .serviceBanner .innerserviceBanner .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: brightness(70%);
  }

  .serviceBanner .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
.serviceBannerController .swiper-button-prev{
color: #fff;
margin-left: 5%;
}
.serviceBannerController .swiper-button-next{
color: #fff;
margin-right: 5%;
}
/* Service Banner end */
/* Service Start */
.servicecontaner{
  animation: servShow1 1s linear;
transition: 1s;
}
@keyframes servShow1{
  0%{
    transform: translateY(100px);
    opacity: 0;
  }
  }
.servicecontaner.servShow{
animation: servShow 1s linear;
transition: 1s;
}
@keyframes servShow{
0%{
  transform: rotateY(120deg);
  opacity: 0;
}
}
.servicecontaner .innerServiceContaner{
margin: 2% 8%;
width: 84%;
display: flex;
}
.servicecontaner .innerServiceContaner .serviceBoxfirst{
width: 40%;
padding: 1rem;

}

.servicecontaner .innerServiceContaner .serviceBoxfirst .innerfirstservicebox h1{
font-size: 2.8rem;
font-weight: 500;
color: #000;
}
.servicecontaner .innerServiceContaner .serviceBoxfirst .innerfirstservicebox h3{
font-weight: 500;
font-size: 1.5rem;
color: #454545;
margin-top: 7%;
}
.servicecontaner .innerServiceContaner .serviceBox2nd{
width: 56%;
padding: 2%;
}
.servicecontaner .innerServiceContaner .serviceBox2nd .innerservcePara{
display: flex;
justify-content: space-between;
color: #454545;
font-size: 1.1rem;
padding-bottom: 2rem;
border-bottom: 1px solid #454545;
}
.servicecontaner .innerServiceContaner .serviceBox2nd .innerservcePara p{
width: 45%;
}
.servicecontaner .innerServiceContaner .serviceBox2nd ul{
columns: 2;
list-style: none;
line-height: 1.5rem;
margin-top: 2rem;
color: #454545;
}
  
.servicecontaner .innerServiceContaner .serviceBox2nd  ul li::before {
content: "\2022";
color: yellow;
font-weight: bolder;
font-size: 1.5rem;
display: inline-block; 
width: 1em;
}


/* More Service Start */
.moreServiceContainer .innerMoreService{
margin:5% 8%;
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
/* grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1fr); */
}
.moreServiceContainer .innerMoreService .moreservice{
flex:0 0 31%;
height: auto;
margin-bottom: 2rem;
border-top: 1px solid yellow;
padding-right: 3%;
padding-top: 4%;
position: relative;
text-decoration: none;
animation: s2show1 1s linear;
}
@keyframes s2show1{
  0%{
    transform: translateY(100px);
  }
}
.moreServiceContainer .innerMoreService .moreservice.s2show{
animation: s2show 1s linear;
}
@keyframes s2show{
  0%{
    transform: scale(-1);
  }
}
/* .moreServiceContainer .innerMoreService .moreservice:nth-of-type() */
.serviceDot{
position: absolute;
top: -4px;
left: 0px;
width: 7px;
height: 7px;
background-color: #000;
border-radius: 50%;
animation: dotani 1s linear infinite;
animation-direction: alternate-reverse;
transition: 1s;
}
@keyframes dotani{
0%{transform: scale(1.5);}
}
.moreServiceContainer .innerMoreService .moreservice .moreserviceImage img{
width: 100%;
}
.moreServiceContainer .innerMoreService .moreservice .moreserviceText h3{
background-repeat: no-repeat;
background-size:100%;
background-position: left;
padding-left: .5rem;
margin:.5rem 0;
font-weight: 500;
color: #000;
}
.moreServiceContainer .innerMoreService .moreservice .moreserviceText p{
color: #454545;
margin: .8rem 0;
padding:0 .5rem;
text-align: justify;
}

/* Service Contact Start */
.serviceContactBox .innerServiceContact{
margin:0 8%;
overflow: hidden;
}
.serviceContactBox .innerServiceContact .firseserviceContactHeading{
display: flex;
justify-content: space-between;
margin-top:3%;
margin-bottom: 7%;
transition: 1s;
animation: s3show1 1s linear;

}
@keyframes s3show1{
  0%{
    transform: translateX(-100%);
  }
}
.serviceContactBox .innerServiceContact .firseserviceContactHeading.s3show{
animation: s3show 1s linear;

}
@keyframes s3show{
  0%{
    transform: translateX(100%);
  }
}
.serviceContactBox .innerServiceContact .firseserviceContactHeading h2{
width: 47%;
font-size: 2.3rem;
font-weight: 500;
color: #000;
}
.servsContctBtn{
width: 53%;
margin: auto;
margin-right: 0;
}
.serviceContactBox .innerServiceContact .firseserviceContactHeading a{
width: 180px;
height: 180px;
display: flex;
align-items: center;
justify-content: center ;
background-color: #be1922;
text-align: center;
border-radius: 50%;
text-decoration: none;
color: #fff;
transition: .8s;
margin: auto;
margin-right: 0;
}
.serviceContactBox .innerServiceContact .firseserviceContactHeading a:hover{
background-color: #00172d;
}
.serviceContactBox .innerServiceContact .firseserviceContactHeading a span{
display: block;
width: 70%;
}
.serviceContactBox .innerServiceContact .firseserviceContactHeading a i{
rotate: -45deg;
}
.secoundServiceContact{
display: flex;
}
.secoundServiceContact.s4show{
animation: s4show 2s linear;
}
@keyframes s4show{
  0%{
    transform: matrix(1, 0, 0.5, 1, 150, 0);
  }
}
.secoundServiceContact .circleContactBox{
width: 27%;
}
.secoundServiceContact .circleContactBox .circleContct{
width: 150px;
height: 150px;
background-color: #861825;
border-radius: 50%;
display: flex;
position: relative;
}
.secoundServiceContact .circleContactBox .circleContct #dotc{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #be1922;
}
.secoundServiceContact .circleContactBox .circleContct #circleLine{
width: 100%;
height: 2px;
background-color: #be1922;
position: absolute;
top: 50%;
left: 100%;
transform: translate(-50%);
}
.secoundServiceContact .secoundImageCOntact{
width: 73%;
}
.secoundServiceContact .secoundImageCOntact .imageContct{
width: 100%;
height: auto;
}
.secoundServiceContact .secoundImageCOntact .imageContct img{
width: 100%;
height: 50vh;
}
.secoundContactText{
display: flex;
justify-content: space-between;
margin-top: 2%;
}
.secoundContactText p{
width: 47%;
font-size: 1.1rem;
color: #454545;
}

/* Our Ups Section Start */
.ourupsContainer .innerourupsContainer{
margin:5% 8%;
display: flex;
}
.ourupsContainer .innerourupsContainer .fixedImageUps{
width: 40%;
background-attachment: fixed;
background-repeat: no-repeat;
animation: s5show1 1s linear;
}
@keyframes s5show1{
  0%{
    transform: translateX(-100px)
  }
}
.ourupsContainer .innerourupsContainer .fixedImageUps.s5show{
animation: s5show 1s linear;
}
@keyframes s5show{
  0%{
    transform: translateX(-100px)
  }
}
.ourupsContainer .innerourupsContainer .contentourUpsBox{
width: 60%;
animation: s6show 1s linear;
}
@keyframes s6show{
  0%{
    transform: translateX(100px)
  }
}
.ourupsContainer .innerourupsContainer .contentourUpsBox.s6show{
  animation: s6show1 1s linear;
}
@keyframes s6show1{
  0%{
    transform: translateX(100px)
  }
}
.ourupsContainer .innerourupsContainer .contentourUpsBox h2{
width: 80%;
margin: auto;
margin-right: 0;
font-weight: 500;
font-size: 2.3rem;
line-height: 2.5rem;
}
.ourupsContainer .innerourupsContainer .contentourUpsBox .ourupsbox{
padding: 5%;
padding-right: 0;
}
.ourupsContainer .innerourupsContainer .contentourUpsBox .ourupsbox .innerups{
display: flex;
align-items: center;
}
.ourupsContainer .innerourupsContainer .contentourUpsBox .ourupsbox .innerups span{
width: 16%;
color: #ffde16;
font-weight: bold;
font-size: 2.5rem;
}
.ourupsContainer .innerourupsContainer .contentourUpsBox .ourupsbox .innerups h4{
width: 84%;
font-weight: 400;
color: #454545;
border-top: 1px solid #999;
padding: 1rem 0;
}
.ourupsContainer .innerourupsContainer .contentourUpsBox .ourupsbox .innerups:last-child h4{
    border-bottom: 1px solid #999;
}
.ourupsContainer .innerourupsContainer .contentourUpsBox a{
width: 250px;
padding: .7rem;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #be1922;
border-radius: .5rem;
display: block;
margin-left: 20%;
}
.ourupsContainer .innerourupsContainer .contentourUpsBox a:hover{
  background-color: #00172d;
}
.ourupsContainer .innerourupsContainer .contentourUpsBox a i{
margin-left: .5rem;
}

/* Our Client Start */
.serviceourClientContainer .innerserviceOurClient{
margin: 5% 8%;
}
.serviceourClientContainer .innerserviceOurClient h2{
font-size: 2.7rem;
font-weight: 500;
text-align: center;
}
.serviceourClientContainer .innerserviceOurClient .serviceClientbox{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 2rem;
}
.serviceourClientContainer .innerserviceOurClient .serviceClientbox .serviceclient{
width: 23%;
padding: 3% 0;
background-color: #eee;
margin:1%;
animation: servicecnt 1s linear;
}
@keyframes servicecnt{
0%{transform: rotate(45deg);}
}
.serviceourClientContainer .innerserviceOurClient .serviceClientbox .serviceclient.cxshow{
  animation: cxshow 1s linear;
}
@keyframes cxshow{
0%{transform: rotate(45deg);}
}
.serviceourClientContainer .innerserviceOurClient .serviceClientbox .serviceclient img{
display: block;
margin: auto;
transition: .7s;
}
.serviceourClientContainer .innerserviceOurClient .serviceClientbox .serviceclient:hover img{
transform: scale(1.2);
}
/* service Contact Form */
.serviceContactFormContaner{
background-color: #ffde16;
padding: 5% 0;
}
.serviceContactFormContaner .innerserviceContactFormContaner{
display: flex;
margin:0% 8%;
}
.serviceContactFormContaner .innerserviceContactFormContaner .firstBoxForm{
width: 60%;
}
.serviceContactFormContaner .innerserviceContactFormContaner .firstBoxForm h2{
font-size: 3rem;
color: #252323;
font-weight: 500;
width: 65%;
}
.serviceContactFormContaner .innerserviceContactFormContaner .firstBoxForm.form1{
animation: form1 1s linear;
}
@keyframes form1{
  0%{opacity: 0; transform: scaleY(1.2);}
}
.serviceContactFormContaner .innerserviceContactFormContaner .firstBoxForm p{
font-size: 1.3rem;
color: #454545;
margin-top: 5%;
}
.serviceContactFormContaner .innerserviceContactFormContaner .firstBoxForm img{
display: block;
margin: auto;
margin-top: 2rem;
}
.serviceContactFormContaner .innerserviceContactFormContaner .secoundBoxForm{
width: 40%;
}
.serviceContactFormContaner .innerserviceContactFormContaner .secoundBoxForm .serviceform.form2{
  animation: form2 1s linear;
  }
  @keyframes form2{
    0%{opacity: 0; transform: scaleY(1.2);}
  }
.serviceContactFormContaner .innerserviceContactFormContaner .secoundBoxForm .serviceform input{
display: block;
width: 100%;
border: none;
outline: none;
border-bottom: 1px solid #454545;
padding: .5rem .3rem;
background-color: #ffde16;
margin: 2rem 0;
}
.serviceContactFormContaner .innerserviceContactFormContaner .secoundBoxForm .serviceform input:first-child{
margin-top: 0;
}
.serviceContactFormContaner .innerserviceContactFormContaner .secoundBoxForm .serviceform textarea{
width: 100%;
background-color: #ffde16;
border: none;
outline: none;
border-bottom: 1px solid #454545;
padding: .5rem .3rem;
}
.serviceContactFormContaner .innerserviceContactFormContaner .secoundBoxForm .serviceform #sformBtn{
width: 300px;
padding: .8rem;
background-color: #00172d;
border: none;
outline: none;
color: #fff;
border-radius: .5rem;
margin-top: 2rem;
}
.serviceContactFormContaner .innerserviceContactFormContaner .secoundBoxForm .serviceform #sformBtn:hover{
background-color: #be1922;
}

/* Faq Start */
.serviceFaqContainer{
background-color: #000;
padding: 5% 0;
}
.serviceFaqContainer .innerserviceFaqContainer{
margin: 0 8%;
}
.serviceFaqContainer .innerserviceFaqContainer h2{
text-align: center;
color: #fff;
font-size: 2.5rem;
font-weight: 500;
}
.serviceFaqContainer .innerserviceFaqContainer h2.f1show{
animation: f1show 1s linear;
}
@keyframes f1show{
0%{transform: translateY(40px); opacity: 0;}
}
.serviceFaqContainer .innerserviceFaqContainer .servicefaqbox .servicefaq{
border: 1px solid #eee;
padding: 1rem;
margin-top: 1.5rem;
overflow: hidden;
}
.serviceFaqContainer .innerserviceFaqContainer .servicefaqbox .servicefaq.f2show{
  animation: f2show 1s linear;
}
@keyframes f2show{
  0%{transform: translateY(40px); opacity: 0;}
  }
.serviceFaqContainer .innerserviceFaqContainer .servicefaqbox .servicefaq .sfaq{
display: flex;
justify-content: space-between;
align-items: center;
color: #ffff;
}
.serviceFaqContainer .innerserviceFaqContainer .servicefaqbox .servicefaq .sfaq h4{
font-weight: 400;
font-size: 1.1rem;
}
.serviceFaqContainer .innerserviceFaqContainer .servicefaqbox .servicefaq p{
color: #fff;
margin-top: 1rem;
font-weight: 100;
display: none;
}

.serviceFaqContainer .innerserviceFaqContainer .servicefaqbox .servicefaq p.faqActive{
display: block;
animation: faqani 1s linear;
transition: .5s;
}
@keyframes faqani{
  0%{transform: translateY(60px);}
  }