@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&display=swap');
*{
font-family: 'Kanit', sans-serif;
margin: 0;
padding: 0;
}
body{scroll-behavior: smooth !important;}
/* Cursor Modify Start */

.cursor,
.cursor2,
.cursor3{
  position: fixed;
  border-radius: 50%;	
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  left: -100px;
  top: 50%;
  transition: all .3s linear;
}
.cursor {
  background-color: yellow;
  z-index: 109;
  height: 4px;
  width: 4px;
}
.cursor2,
.cursor3{
  height: 50px;
  width: 50px;
  z-index: 108;
  transition: all 0.3s ease-out;
}
.cursor2.hover,
.cursor3.hover {
  transform: scale(1.4) translateX(-35%) translateY(-35%);
  border: none;
  background: transparent;
}
.cursor2.hover {
  background: rgba(255,255,255,0.3);
}
.ball {
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  border-radius: 50%;
  border: 1px solid yellow;
  z-index: 100;
  transition: all .3s linear;
}

/* Cursor Modify End */

.headerBox{
display: flex;
justify-content: space-between;
align-items: center;
padding:9px 2%;
/* background-image: linear-gradient(to bottom, #00172d, #be1922, #861825); */
background-color: #00172d;
position: sticky;
width: 96%;
top: 0;
z-index: 999;
}
@keyframes headerani {
0%{opacity: 0; transform: scale(-1);}
}
.headerBox .logo img{
    display: block;
    width: 60px;
    height: 60px;
    animation: headerani 1s linear;
}
.headerBox ul{
display: flex;
align-items: center;
list-style: none;
}
.headerBox ul li{
    padding:.8rem 2px;
    position: relative; 
}
.headerBox ul li a{
display: block;
text-transform: uppercase;
text-decoration: none;
color: #FFFFFF;
font-size: 1rem;
width: 100px;
height: 35px;
line-height: 35px;
text-align: center;
animation: headerani 1s linear;
position: relative;
}
.headerBox ul li .btn-2 span{
    display: block;
}
.headerBox ul li .btn-2::before, .headerBox ul li .btn-2::after{
    content:"";
    width: 0;
    height: 2px;
    position: absolute;
    transition: all 0.2s linear;
    background: #fff;
  }
  .headerBox ul li .btn-2 span::before, .headerBox ul li .btn-2 span::after{
    content:"";
    width:2px;
    height:0;
    position: absolute;
    transition: all 0.2s linear;
    background: #fff;
  }
  .headerBox ul li .btn-2:hover::before,  .headerBox ul li .btn-2:hover::after{
    width: 100%;
  }
  .headerBox ul li .btn-2:hover span::before,  .headerBox ul li .btn-2:hover span::after{
    height: 100%;
  }
  .btn-2::before, .btn-2::after{
    transition-delay: 0s;
  }
  .btn-2 span::before, .btn-2 span::after{
    transition-delay: 0.2s;
  }
  .btn-2::before{
    right: 0;
    top: 0;
  }
  .btn-2::after{
    left: 0;
    bottom: 0;
  }
  .btn-2 span::before{
    left: 0;
    top: 0;
  }
  .btn-2 span::after{
    right: 0;
    bottom: 0;
  }
  .btn-2:hover::before, .btn-2:hover::after{
    transition-delay: 0.2s;
  }
  .btn-2:hover span::before, .btn-2:hover span::after{
    transition-delay: 0s;
  }
#libtn{
border: 1px solid #fff;
color: #fff;
padding: .4rem .6rem;
margin-left: 1.5rem;
border-radius: .2rem;
animation: headerani 1s linear;
}
#libtn:hover{
    background-color: #861825;
}

/* SubMenu start */
.headerBox ul li .submenu{
position: absolute;
top: 3.9rem;
left: -45px;
display: none;
text-align: left;
background-color: #f1c6c6;
border-radius: .2rem;
animation: submnuani .5s linear;
transition: .5s;
}
@keyframes submnuani{
0%{
    transform: translateY(100px); 
    opacity: 0;
    box-shadow: #fff 0px 48px 100px 0px;
}
}
.headerBox ul li .submenu #nvgsnicon{
width: 0px;
height: 0px;
margin: auto;
margin-top: -15px;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid #f1c6c6;
}
.headerBox ul li:hover >.submenu{
    display: block;
}
.submenu #ulList{
display: block;
width: 200px;
}
.submenu #ulList li{
width: 100%;
padding: 0;
position: relative !important;
}
.submenu #ulList li a{
width: 96%;
padding:0 2%;
height: 35px;
animation: none;
text-align: left;
transition: .2s ease-in-out;
color: #00172d;
}
.submenu #ulList li a:hover{
background-color: #00172d;
color: #fff;
}


.menubar{
width: 50px;
height: 50px;
line-height: 60px;
border-radius: 50%;
text-align: center;
position: relative;
}
.menubar span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: 2s;
    z-index: -1;
    
}
.menubar span:nth-of-type(1){width: 50px; height: 50px; animation: menuani 2s linear infinite; animation-delay: 0;}
.menubar span:nth-of-type(2){width: 50px; height: 50px; animation: menuani2 2s infinite; animation-delay: .5s; animation-delay: 0;}
.menubar span:nth-of-type(3){width: 50px; height: 50px; animation: menuani3 2s linear infinite; animation-delay: .7s; animation-delay: 0; }


@keyframes menuani{
    0%{width: 0; height: 0; background-color: #999;}
}
@keyframes menuani2{
    0%{width: 0px; height: 0px;  background-color: #033b70;}
}
@keyframes menuani3{
    0%{width: 0px; height: 0px; background-color: #033b70;}
}
.menubar i{
font-size: 1.7rem;
color: #FFFFFF;
animation: headerani 1s linear;
}

/* Mobile Menu Start */
.mobilemenuContainer{
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 2);
position: fixed;
top: 0;
left: 100%;
z-index: 9999;
transition: 1s ease-in-out;
}
#crossMenu{
color: #FFFFFF;
width: 3.5rem;
height: 3.5rem;
line-height: 3.5rem;
text-align: center;
border-radius: 50%;
background-color: #2e2e2e;
font-size: 1.8rem;
position: absolute;
right: 20px;
top: 20px;
}
.mobilemenuContainer .innermobileMenu{
    display: flex;
    position: relative;
    height: 100%;
}
.mobilemenuContainer .innermobileMenu .firstmobilelistbox{
width: 20%;
padding-top: 4rem;
}
.mobilemenuContainer .innermobileMenu .firstmobilelistbox img{
width: 80px;
height: 80px;
display: block;
margin-left: 8%;
}
.mobilemenuContainer .innermobileMenu .firstmobilelistbox h3{
color: #FFFFFF;
font-size: 1.4rem;
margin-left: 1.5rem;
margin-top: 5%;
margin-bottom: 1rem;
}
.mobilemenuContainer .innermobileMenu .firstmobilelistbox ul{
list-style: none;
display: block;
padding-left: 9%;
}
.mobilemenuContainer .innermobileMenu .firstmobilelistbox ul li a{
text-decoration: none;
color: #FFFFFF;
display: block;
padding: .5rem 0;

}
.mobilemenuContainer .innermobileMenu .secoundmobilelistbox{
    width: 55%;
    padding-top: 5.8rem;
}
.mobilemenuContainer .innermobileMenu .secoundmobilelistbox ul{
display: block;
list-style: none;
margin-top: 8%;
}
.mobilemenuContainer .innermobileMenu .secoundmobilelistbox ul li{
    border-bottom: 1px solid #999;
}
.mobilemenuContainer .innermobileMenu .secoundmobilelistbox ul li a{
display: block;
padding: .5rem 0;
font-size: 1.6rem;
color: #FFFFFF;
text-decoration: none;
transition: .5s;
}
.mobilemenuContainer .innermobileMenu .secoundmobilelistbox ul li a:hover{
    transform: translateX(10px);
}
.mobilemenuContainer .innermobileMenu .thirdmobilelistbox{
width: 25%;
background-size:auto;
padding-top: 12%;
padding-left: 3%;
padding-right: 1rem;
background-color: #1d1d1d;
}
.mobilemenuContainer .innermobileMenu .thirdmobilelistbox h3{
color: #FFFFFF;
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 1rem;
}
.mobilemenuContainer .innermobileMenu .thirdmobilelistbox a{
display: block;
text-decoration: none;
color: #FFFFFF;
margin:.5rem 0;
font-size: 1.1rem;
}
.mobilemenuContainer .innermobileMenu .thirdmobilelistbox address{
    color: #FFFFFF;
    font-size: 1.1rem;
    width: 80%;
}
/* mobile Menu end */

/* call Action Start */
.calltoAction{
position: fixed;
bottom: 10px;
right: 10px;
z-index: 999;
}
.calltoAction .actionIcon a{
text-decoration: none;
padding: 1rem;
display: block !important;
background-color: green;
color: #fff;
text-align: center;
font-size: 1.3rem;
border-radius: 50%;

}
.calltoAction .actionIcon a:first-child{
margin-bottom: 5px;
background-color: #be1922;
}
.calltoAction .actionIcon a:last-child{
font-size: 1.5rem;
}
.calltoAction .actionIcon a:hover{
    box-shadow: 0px 1px 3px 0px #fff, 0px 0px 5px 0px #fff;
}

/* Contact Section Start */
.contactSection{
    position: fixed;
    top: 0%;
    right: -27%;
    overflow: hidden;
    padding-top: 7%;
    width: 31.2%;
    height: 100%;
    z-index: 999;
    transition: .5s;
}
.innercontactform{
position: absolute;
display: flex;
align-items: center;
}
.contactSection.active{
right: 0;
}
.contactSection .innercontactform #contactbtn{
width: 130px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #033b70;
color: #fff;
transform: rotate(-90deg);
border-radius: .2rem;
font-weight: 400;
font-size: 1.1rem;
margin-left: -30px;
box-shadow: #fff 0px 0px 0.25em, #fff 0px 0.5em .1em;
}
.contactSection .innercontactform form{
    width: 330px;
    padding: 1rem;
    margin-left: -39px;
    background-color: #FFFFFF;
    border-bottom-left-radius: .5rem;
    border-top-left-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
.contactSection .innercontactform form h2{
font-size: 2rem;
font-weight: 500;
}
.contactSection .innercontactform form input{
width: 96%;
height: 35px;
padding:0 2%;
font-size: 1rem;
font-weight: 500;
color: #999;
border: 1px solid #b1b0b0;
margin: .5rem 0;
border-radius: .4rem;
}
.contactSection .innercontactform form textarea{
width: 96%;
height: 20vh;
padding:0 2%;
font-size: 1rem;
font-weight: 500;
color: #999;
border: 1px solid #999;
border-radius: .4rem;
}
.contactSection .innercontactform form button{
width: 90px;
height: 40px;
background-color: #00172d;
color: #fff;
font-size: 1rem;
font-weight: 500;
border-radius: .4rem;
border: none;
}
/* Contact Section End */
/* Banner Section Start */
.bannerSection{
width: 100%;
background-image: linear-gradient(to bottom, #861825, #00172d, #be1922);
}
.bannerSection .innerBannerSection{
margin-left: 8%;
margin-right: 4%;
padding-top: 4%;
}
.bannerSection .innerBannerSection .firstbannerText{
display: flex;
justify-content: space-between;
}
.bannerSection .innerBannerSection .firstbannerText .bannerfirstheading{
display: flex;
align-items: center;
animation: bannerh2 1s linear;
}
.bannerSection .innerBannerSection .firstbannerText .bannerfirstheading h2{
color: #eee;
font-size: 2.8rem;
font-weight: bolder;
position: relative;
}
@keyframes bannerh2{
0%{transform: translateY(-50px);}
}
#firstSpan{
width: 100px;
height: 30px;
border-top: 1px solid #fff;
margin-left: 15%;
}
#starimgbaner{
animation: starbanner 2s linear;
}
@keyframes starbanner{
0%{opacity: 0%;}
}
.secoundBannerText{
display: flex;
justify-content: space-between;
align-items: last baseline;
}
.secoundBannerText h3{
color: yellow;
font-size: 17rem;
line-height: 14rem;
margin-left: -10px;
animation: sh3 1s linear;
opacity: 100%;
}
@keyframes sh3{
    0%{
        transform: translateX(-100%);
        opacity: 0;
    }
}
.secoundBannerText .secoundBannerTextVideo{
display: flex;
align-items: center;
}
.secoundBannerText .secoundBannerTextVideo .videoFram{
width: 130px;
height: 130px;
border-radius: 50%;
border: 1px solid #fff;
position: relative;
transition: .5s;
overflow: hidden;
transition: 2s ease-in-out;z-index: 1;
}

.secoundBannerText .secoundBannerTextVideo .videoFram #videopop{
    width: 100%;
    height: 100%;
    position: absolute;
}

#xmark{
z-index: 1;
font-size: 1.1rem;
background-color: #00172d;
border: 1px solid #fff;
color: #fff;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
border-radius: 50%;
position: absolute;
right: 20px;
top: 20px;
}
#vidopopbox{
display: none;
position: fixed;
top: 79px;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 565px;
z-index: 999;
}
#vidopopbox .videopop2{
width: 100%;
height: 100%;
}
.secoundBannerText .secoundBannerTextVideo .videoFram .fa-play{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFFFFF;
background-color: #00172d;
width: 3rem;
height: 3rem;
line-height: 3rem;
text-align: center;
border-radius: 50%;
z-index: 1;
}

.secoundBannerText .secoundBannerTextVideo p{
color: #eee;
margin-left: 10px;
}
.thirdBannerText{
display: flex;
justify-content: space-between;
}
.thirdBannerText .thirdBannerContent{
width: 27%;
color: #eee;
}
.thirdBannerText #thing{
color: #eee;
font-size: 17rem;
line-height: 14rem;
animation: sh4 1s linear;
}
@keyframes sh4{
    0%{transform: translateX(100%); opacity: 0;}
}
.forthBannerImg{
display: flex;
justify-content: space-between;
align-items: center;
}
.forthBannerImg .arrowDownImg{
margin-left: 8%;
animation: btnani 2s linear infinite;
animation-direction: alternate-reverse; 
position: relative;
}
@keyframes btnani{
0%{top: 20px;}
100%{top: -20px;}
}
.forthBannerImg .arrowDownImg #arrowdownimg{
border: 1px solid #eee;
padding:25px 10px;
border-radius: 1.1rem;
}
.forthBannerImg .bannerSlider{
width: 70%;
height: auto;
}
.forthBannerImg .bannerSlider img{
width: 100%;
height: 250px;
}

/* Our Client Start */
.ourclientSection .innerourclientSection{
margin-top: 5%;
}
.ourclientSection .innerourclientSection .ourclientHeading{
width: 50%;
margin: auto;
text-align: center;

}
.ourclientHeading.cxShow{
    animation: ourclient 1s;
    transition: 1s;
    opacity: 100%;
}
@keyframes ourclient{
0%{transform: translateY(50px); opacity: 0;}
}
.ourclientSection .innerourclientSection .ourclientHeading h2{
font-size: 7vh;
font-weight: 400;
}
.mainourclientSlider{
overflow: hidden;
}
.ourclientSlider{
display: flex;
margin-top: 2%;
white-space: nowrap;
animation: clietslide 12s linear infinite;
animation-delay: 1s;
}
.ourclientSlider:hover{
    animation-play-state: paused;
}
@keyframes clietslide{
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}
.ourclientSlider img{
margin: 1rem;
filter: grayscale(100%);
}

.ourclientSlider img:hover{
filter: grayscale(0);
transform: scale(1.2);
}
#ourclientBtn{
width: 130px;
height: 45px;
line-height: 45px;
text-align: center;
text-decoration: none;
color: #fff;
border-radius: .4rem;
margin: auto;
display: block;
background-color: #be1922;
}
#ourclientBtn i{
margin-left: .6rem;
}
#ourclientBtn:hover{
    background-color:#00172d;
    color: #fff;
}
/* Our Client End */

/* Service Section Start */
.serviceSection{
background-color: #00172d;
padding-bottom: 5%;
margin-top: 5%;
}
.serviceSection .innerServiceSection{
    margin: 0 8%;
}
.serviceSectionBox{
display: flex;
}
.serviceSectionBox .firstServiceSection{
width: 60%;
height: auto;
margin-top:15%;

}
.firstServiceSection img.show {
   animation: onscrollAni .8s linear;
  display: block;
  transform: scale(1);
  }
  @keyframes onscrollAni{
    0%{
        transform: scale(0);
    
    }
  }
.firstServiceSection img{
width: 400px;
height: auto;display: none;
}
.secoundServiceSection{
width: 40%;
position: relative;
border-left: 1px solid #3b3b3b;
}
.serviceHeading{
width: 500px;
margin: 15%;
margin-bottom: 0;
margin-left: -100px;
color: #fff;
background-color: #00172d;
padding: 1rem 0;
}
.serviceHeading.showHeading{
animation: serviceHeadg 1s linear;
transform: scale(1);
}
@keyframes serviceHeadg {
    0%{
  transform: scale(1.2);
    }
}
.serviceHeading h2{
font-size: 2.8rem;
font-weight: 400;
}
.serviceContent{
margin-left: 2.5rem;
color: #999;
}
.serviceContent p.serviceCnt{
animation: paracunt 1s linear;
}
@keyframes paracunt{
    0%{
        transform: rotateX(180deg);
    }
}
#serviceBtn{
width: 160px;
height: 160px;
line-height: 160px;
display: block;
background-color: #eee;
text-align: center;
border-radius: 50%;
margin: auto;
margin-right: 22%;
margin-top: 5%;
text-decoration: none;
color: #000;
transition: .8s;
}
#serviceBtn.serviceB{
animation: servsbtn 1s linear;
}
@keyframes servsbtn{
    0%{
       transform: translateY(-50px);
       box-shadow: #fff 0px 22px 70px 4px;
    }
}
#serviceBtn i{
rotate: -45deg;
margin-left: 7px;
}
#serviceBtn:hover{
background-color: #be1922;
color: #fff;
}

/* Fifth Section Start */
.sectionfifth .innerSectionfifth{
margin:5% 8%;
}
.sectionfifth .innerSectionfifth .headingSectionFifth{
display: flex;
justify-content: space-between;
align-items: center;
}
.headingSectionFifth.SxnFifth{
animation: fifthsxn .8s linear;
transform: scale(1);
}
@keyframes fifthsxn{
    0%{transform: scale(-1.1);}
}
.sectionfifth .innerSectionfifth .headingSectionFifth .fifthheading span{
color: #999;
font-size: 1.1rem;
}
.sectionfifth .innerSectionfifth .headingSectionFifth .fifthheading h2{
font-size: 2.5rem;
font-weight:400;
}
.sectionfifth .innerSectionfifth .headingSectionFifth p{
width: 25%;
text-align: right;
color: #999;
}
.fifthSliderBox{
display: flex;
justify-content: center;
margin-top: 5%;
}
.fifthSliderBox.SxFifth{
animation: fifthsx .8s linear;
transform: translateX(0px);
}
@keyframes fifthsx{
    0%{transform: translateX(100px); opacity: 0;}
}
.fifthSliderBox .innerfifthSliderBox{
padding: 4.5rem 0;
background-image: linear-gradient(to bottom, #be1922, #861825);
}
.fifthSliderBox .innerfifthSliderBox .insidefifth {
    border-right: 5px solid #00172d;
    padding:0 4.5rem;
}
.fifthSliderBox .innerfifthSliderBox .insidefifth h2{
font-size: 70px;
line-height: 60px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
color: #fff;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
text-transform: uppercase;
stroke-width: 1px;
}
.fifthSliderBox .innerfifthSliderBox .insidefifth p{
margin-top: 3%;
color: #fff;
}

/* Feature Gallery Start */
.galleryContainer{
background-color: hsl(40, 90%, 4%);
padding:5% 0;
}
.innerGalleryContainer{
margin:0% 8%;
}
.innerGalleryContainer h2{
font-size: 2.8rem;
font-weight: 400;
color: #eee;
text-align: center;
}
.gallerybox{
    display: flex;
    margin-top: 5%;
}

.gallerybox .galleryImage img{
margin-bottom: 5%;
}
.galleryImage img.glryImage{
    animation: gltanim 1s linear;
    
}
@keyframes gltanim{
    0%{

        transform: skew(-45deg, -45deg);
    }
}
.gallerybox .galleryImage:last-child{
    margin-top: 20%;
}
.gallerybox .galleryImage2 img{
    margin-bottom: 5%;
}
#galleryBtn{
width: 160px;
height: 160px;
line-height: 160px;
display: block;
background-color: #eee;
text-align: center;
border-radius: 50%;
margin: auto;
margin-top: 5%;
text-decoration: none;
color: #000;
transition: .8s;
}
#galleryBtn.glryBtn{
animation: glryBt 1s linear;
}
@keyframes glryBt{
    0%{
       transform: translateY(-50px);
       box-shadow: #fff 0px 22px 70px 4px;
    }
}
#galleryBtn i{
rotate: -45deg;
margin-left: 7px;
}
#galleryBtn:hover{
background-color: #be1922;
color: #fff;
}


/* sixth Section Start */
.sixthSection{
padding:5% 0;
}
.innerSixthsection{
margin:0 8%;
}
.innerSixthsection h2{
text-align: center;
font-weight: 400;
}
.fixedSixthsection{
display: flex;
margin-top: 5%;
}
.backimagesection{
width: 30%;
height: 600px;
overflow: hidden;
}
.backimagesection .imagebackimagesection{
background-repeat: no-repeat;
background: fixed;
background-size: contain;
height: 400px;
}

.middlesection{
width: 50%;
padding: 3rem;
}
.middlesection p{
color: #3b3b3b;
}
.middlesection h4{
color: #454545;
margin-top: 2rem;
}
.middlesection #signature{
width: 40%;
display: block;
margin-top: 1.5rem;
}
.middlesection #imagesixthsectionsmall{
display: block;
margin: auto;
margin-right: 0;
}
.thirdsection{
width: 20%;
height: 500px; 
}
.thirdsection img{
position: sticky;
top: 70px;
left: 0;
display: block;
}

/* Testimonial Start */
.testimonialsection .innertestimonialsection{
margin:0 8%;
}
.testimonialsection .innertestimonialsection #btntest{
width: 140px;
background-color: #eee;
border: 1px solid #3b3b3b;
border-radius: 1rem;
display: block;
text-align: center;
margin: auto;
}
.testiheader.testihdr{
animation: testiani 1s linear;
transition: 1s;
}
@keyframes testiani{
    0%{
        transform: translateY(50px);
        opacity: 0;
    }
}
.testimonialsection .innertestimonialsection h2{
text-align: center;
font-size: 2.8rem;
margin-top: 1%;
font-weight: 400;
}
.clientTesimonialBox{
display: flex;
overflow: hidden;
margin-top: 5%;
}

.clientTesimonialBox .tesimonial{
flex:0 0 31.1%;
padding: 1.3%;
}
.tesimonial.tesimnil{
    animation: testimonialani1 .5s linear;
}
.tesimnil:nth-of-type(even) {
    animation: testimonialani2 1s linear;
  }
@keyframes testimonialani1 {
    0%{
        transform: translateX(100px);
    }
}
@keyframes testimonialani2 {
    0%{
        transform: scale(1.2);
    }
}
.clientTesimonialBox .tesimonial img{
display: block;
border-radius: 50%;
}
.clientTesimonialBox .tesimonial span{
background-color: #eee;
font-size: .9rem;
padding:0 .5rem;
border-radius: 1rem;
margin-top:2rem;
margin-bottom: 1rem;
display: block;
width: fit-content;
}
.clientTesimonialBox .tesimonial p{
color: #454545;
}
.clientTesimonialBox .tesimonial h5{
font-size: 1.2rem;
font-weight: 400;
margin-top: 1rem;
}
.clientTesimonialBox .tesimonial h6{
font-size: 1rem;
font-weight: 400;
color: #3b3b3b;
}
.testminialController{
display: flex;
align-items: center;
justify-content: center;
margin-top: 3%;
}
.testminialController i{
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
background-color: #999;
margin: 0 1rem;
}

.testminialController span{
margin: .5rem;
}


/* callout Section start */
.calloutSection{
padding:5% 0;
}
.innercalloutSection{
margin:0 8%;
background-color: #f0e2e2;
display: flex;
padding: 4rem;
padding-bottom: 0;
border-radius: .5rem;
}
.innercalloutSection .imagecallout{
overflow: hidden;
width: 28%;
}
.innercalloutSection .imagecallout img{
display: block;
object-fit: cover;
}
.imagecallout.imgclot{
animation: imgclotimg 1s linear;
}
@keyframes imgclotimg{
    0%{
        transform: scale(1.5);
    }
}
.innercalloutSection .calloutTextBox{
display: flex;
width: 68%;
margin-left: 8%;
}
.innercalloutSection .calloutTextBox .calloutHeading{
width: 50%;
}
.innercalloutSection .calloutTextBox .calloutHeading h2{
font-size: 2.5rem;
font-weight: 500;
}
.calout.calouthd{
animation: caloutanim .8s linear;
}
@keyframes caloutanim{
    0%{
        transform: skew(-90deg);
    }
}
.innercalloutSection .calloutTextBox .calloutcalloutparaBtn{
    width: 45%;
}
.innercalloutSection .calloutTextBox .calloutcalloutparaBtn p{
font-size: 1.1rem;
color: #252525;
}
.innercalloutSection .calloutTextBox .calloutcalloutparaBtn a{
padding: .8rem 1.1rem;
background-color: #be1922;
margin-top: 40px;
display: block;
text-decoration: none;
color: #fff;
border-radius: .5rem;
font-weight: 500;
}
.innercalloutSection .calloutTextBox .calloutcalloutparaBtn a:hover{
background-color: #00172d;
color: #eee;
}
/* callout Section end */

/* Blog Section Start */
.blogSection{
padding: 5% 0;
}
.blogSection .innerblogSection{
display: flex;
margin:0 8%;
}
.blogSection .innerblogSection .blogheader{
width: 32%;
}
.blogheader.bloghdr{
animation: bloghead 1s linear;
}
@keyframes bloghead{
    0%{
       transform: rotateX(90deg);
    }
}
.blogSection .innerblogSection .blogheader span{
background-color: #eee;
padding:0rem 1rem;
border: 1px solid #3b3b3b;
border-radius: 1rem;
}
.blogSection .innerblogSection .blogheader h2{
font-weight: 500;
font-size: 2.8rem;
width: 90%;
line-height: 3.5rem;
margin-top: 20px;
}
.blogSection .innerblogSection .blogheader p{
margin-top: 20px;
color: #454545;
width: 80%;
}
.blogSection .innerblogSection .blogheader a{
display: block;
text-align: center;
text-decoration: none;
background-color: #be1922;
width: fit-content;
padding: .8rem 1rem;
margin-top: 50px;
color: #fff;
font-weight: 500;
border-radius: .5rem;
}
.blogSection .innerblogSection .blogheader a i{
margin-left: .5rem;
}
.blogSection .innerblogSection .blogheader a:hover{
background-color: #00172d;
color: #eee;
}
.blogSection .innerblogSection .blogContainer{
width: 68%;
display: flex;
}
.blogSection .innerblogSection .blogContainer .blogCard{
width: 50%;
margin:0 .8rem;
}

.blogCard.blogCrd{
animation: firstblogcrd 1s linear;
}

@keyframes firstblogcrd{
    0%{
        transform: rotateY(90deg);
    }
}

.blogSection .innerblogSection .blogContainer .blogCard img{
width: 100%;
}
.blogSection .innerblogSection .blogContainer .blogcarText{
padding-top: 2rem;
}
.blogSection .innerblogSection .blogContainer .blogcarText span{
display: block;
margin-bottom: 1rem;
}
.blogSection .innerblogSection .blogContainer .blogcarText h3{
font-weight: 500;
font-size: 1.6rem;
}
/* Blog Section End */
/*footer start */
.footerSection{
padding: 5% 0;
position: relative;
}
.innerFooterSection{
display: flex;
height: 800px;
}
.innerFooterSection .whitepart{
width: 15%;
}
.innerFooterSection .footerBackground{
width: 85%;
background-repeat: no-repeat;
background: fixed;
background-size: cover;
}
footer{
position: absolute;
top: 37%;
background-color: hsl(40, 90%, 4%);
margin-right: 7%;
}
.footermainContainer{
display: flex;
justify-content: space-between;
}
.innerfootermain{
width: 66%;
padding-left: 8%;
padding-top: 10%;
}
.innerfooter{
display: flex;
justify-content: space-between;
margin-right: 4%;
}
.firstfooterbox{
width: 38%;
}
.firstfooterbox .footerLogo{
width: 80px;
}
.firstfooterbox .footerLogo img{
width: 100%;
}
.firstfooterbox p{
color: #999;
margin-top: 1.5rem;
}
.firstfooterbox ul{
display: flex;
list-style: none;
margin-top: 1.5rem;
}
.firstfooterbox ul li a{
margin-right: .8rem;
}
.firstfooterbox ul li a i{
font-size: 1.4rem;
color: #999;
}
.footerPartner{
display: flex;
margin-top: 1.5rem;
}
.footerPartner #goofleId{
width: 150px;
height: 55px;
border-radius: .2rem;
}
.footerPartner #metaimg{
width: 95px;
margin-left: 1.7rem;
border-radius: .2rem;
}
.secoundfooterBox{
width: 20%;
}
.secoundfooterBox h3{
color: #FFFFFF;
font-size: 1.4rem;
font-weight: 500; 
}
.secoundfooterBox ul{
list-style: none;
margin-top: 1.5rem;
}
.secoundfooterBox ul li a{
display: block;
margin-bottom: 1rem;
text-decoration: none;
color: #999;
}
.secoundfooterBox ul li a:hover{
color: #FFFFFF;
}
.thirdfooterBox{
width: 25%;
}
.thirdfooterBox h3{
color: #FFFFFF;
font-size: 1.4rem;
font-weight: 500; 
}
.thirdfooterBox address{
color: #999;
margin-top: 1.5rem;
}
.thirdfooterBox a{
    display: block;
    margin-top: .5rem;
    margin-bottom: .5rem;
    text-decoration: none;
    color: #999;
}
.thirdfooterBox a:hover{
color: #FFFFFF;
}

.footerratingBox{
display: flex;
align-items: center;
margin-top: 7%;
}
.footerratingBox p{
display: block;
color: #FFFFFF;
padding:0 10px;
}
.footerratingBox .footerStart{
display: flex;
align-items: center;
border-left: 1px solid #3b3b3b;
}
.footerratingBox .footerStart p{
    padding-left: 10px;
    color: yellow;
}
.footerratingBox .footerStart img{
margin-right: 5px;
}

.copyrightBox{
border-top: 1px solid #3b3b3b;
margin-top: 2rem;
padding:2rem 0;
display: flex;
justify-content: space-between;
margin-right: 4%;
}
.copyrightBox p{
width: 30%;
color: #999;
}
.copyrightBox form{
width: 50%;
display: flex;
position: relative;
}
.copyrightBox form input{
width: 96%;
padding:0 2%;
height: 50px;
background-color: #1d1d1d;
border: none;
outline: none;
}
.copyrightBox form #footerbtn{
display: block;
position: absolute;
right: 15px;
top: 15px;
background-color: #1d1d1d;
border: none;
outline: none;
color: #FFFFFF;
}
.copyrightBox form #footerbtn i{
font-size: 1.1rem;
}
.fooderrightsideBox{
background-color: #1d1d1d;
padding: 10% 0;
width: 26%;
}
.fooderrightsideBox h3{
color: #FFFFFF;
font-weight: 400;
font-size: 1.8rem;
width: 80%;
text-align: center;
margin: auto;
margin-bottom: 2rem;
}
.fooderrightsideBox #rightsideboxbtn{
width: 160px;
height: 160px;
line-height: 160px;
border-radius: 50%;
background-color: #FFFFFF;
display: block;
text-align: center;
text-decoration: none;
color: #000;
margin: auto;
margin-bottom: 2rem;
}
.fooderrightsideBox #rightsideboxbtn:hover{
    background-color: #be1922;
    color: #fff;
}
.fooderrightsideBox #rightsideboxbtn i{
rotate: -45deg;
}
.fooderrightsideBox h4{
color: #FFFFFF;
font-size: 1.3rem;
font-weight: 400;
text-align: center;
}
.fooderrightsideBox span{
text-align: center;
display: block;
color: #999;
margin-bottom: 2rem;
}
.fooderrightsideBox p{
text-align: center;
width: 80%;
margin: auto;
color: #999;
}
.lastBox{
width: 80%;
margin-left: 8%;
}
.lastBox h3{
color: #FFFFFF;
font-weight: 400;
}
.lastBox ul{
list-style: none;
display: flex;
flex-wrap: wrap;
}
.lastBox ul li{
padding:0 .5rem;
margin:.5rem 0;
border-left: 1px solid #1d1d1d;
}
.lastBox ul li:first-child{
border-left: none;
}
.lastBox ul li a{
display: block;
text-decoration: none;
color: #999;
}