/* Banner Start */
.aboutBanner .innerAboutBanner {
height: 60vh;
position: relative;
}
.aboutBanner .innerAboutBanner img{
width: 100%;
height: 60vh;
filter: brightness(70%);
}
.aboutBanner .innerAboutBanner h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.8rem;
color: #fff;
animation: h1ani 1s linear;
}
@keyframes h1ani{
0%{font-size: 0;}
}
.aboutBanner .innerAboutBanner ul{
position: absolute;
bottom: 1rem;
left: 50%;
transform: translate(-50%);
list-style: none;
display: flex;
}
.aboutBanner .innerAboutBanner ul li a{
display: block;
color: #fff;
margin:0 5px;
text-decoration: none;
}
.aboutBanner .innerAboutBanner ul li a:hover{
color: #be1922;
}
/* About Content Start */
.aboutContainer{
    animation: abani1 .5s linear;
}
.aboutContainer.a1show{
    animation: abani2 1s linear;
}
@keyframes abani1{
    0%{transform: translateY(100px);}
}
@keyframes abani2{
    0%{transform: rotateY(45deg);}
}
.aboutContainer .inneraboutContainer{
margin:5% 8%;
display: flex;
}
.aboutContainer .inneraboutContainer .headingAbout{
width: 35%;
}
.aboutContainer .inneraboutContainer .headingAbout h2{
font-size: 2.7rem;
font-weight: 500;
}

.aboutContainer .inneraboutContainer .headingAbout p{
font-size: 1.3rem;
font-size: 500;
color: #454545;
}
.aboutContainer .inneraboutContainer .headingAbout #aboutbtn{
width: 150px;
height: 150px;
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-left: 0px;
margin-top: 1.3rem;
}
.aboutContainer .inneraboutContainer .headingAbout #aboutbtn:hover{
background-color: #00172d;
}
.aboutContainer .inneraboutContainer .headingAbout #aboutbtn span{
display: block;
width: 70%;
}
.aboutContainer .inneraboutContainer .headingAbout #aboutbtn i{
rotate: -45deg;
}
.aboutContainer .inneraboutContainer .aboutTextBox{
width: 65%;
display: flex;
}
.aboutContainer .inneraboutContainer .aboutTextBox p{
color: #767676;
width: 50%;
padding:.8rem 1rem;
text-align: justify;
}

/* Help You Start */
.helpYouCOntaner .innerhelpYouCOntaner{
margin:5% 8%;
display: flex;
}
.helpYouCOntaner .innerhelpYouCOntaner .firsthelpYouBox{
    width: 40%;
}
.helpYouCOntaner .innerhelpYouCOntaner .firsthelpYouBox.a2show{
animation: a2show .8s linear;
}
@keyframes a2show {
0%{
    transform: translateX(-100%);
}
}
.helpYouCOntaner .innerhelpYouCOntaner .firsthelpYouBox h3{
color: #767676;
font-weight: 500;
}
.helpYouCOntaner .innerhelpYouCOntaner .firsthelpYouBox h2{
font-size: 2.7rem;
font-weight: 500;
}
.helpYouCOntaner .innerhelpYouCOntaner .firsthelpYouBox .helpimgBack{
width: 350px;
height: 450px;
background-repeat: no-repeat;
margin-top: 2rem;
background-attachment: fixed;
background-size: contain;

}
.helpYouCOntaner .innerhelpYouCOntaner .secoundhelpYouBox{
width: 60%;
}
.helpYouCOntaner .innerhelpYouCOntaner .secoundhelpYouBox p{
margin-bottom: 2rem;
color: #767676;
}
.helpYouCOntaner .innerhelpYouCOntaner .secoundhelpYouBox .atxt.a4show{
animation: a4show 1s linear;
}
@keyframes a4show{
    0%{
        transform: rotateX(90deg);
    }
    }
.helpYouCOntaner .innerhelpYouCOntaner .secoundhelpYouBox .helpYouCorePoint.a3show{
animation: a3show 1s linear;
}
@keyframes a3show{
0%{
    transform: rotateY(45deg);
}
}
.helpYouCOntaner .innerhelpYouCOntaner .secoundhelpYouBox .helpYouCorePoint h3{
margin-bottom: .5rem;
font-weight: 500;
}

/* Static Start */
.StaticsBox .innerStaticsBox{
margin:0% 8%;
display: flex;
justify-content: space-between;
}
.StaticsBox .innerStaticsBox .statics{
width: auto;
text-align: center;
}
.StaticsBox .innerStaticsBox .statics.a5show{
animation: a5show 1s linear;
}
@keyframes a5show{
0%{
    transform: scale(1.2);
}
}
.StaticsBox .innerStaticsBox .statics h2{
font-size: 6rem;
font-weight: 400;
color: #252525;
line-height: 6rem;
}
.StaticsBox .innerStaticsBox .statics p{
color: #767676;
font-size: 1.2rem;
}

/* Conversation Start */
.conversationContaner .innerconversation{
margin:5% 8%;
}
.conversationContaner .innerconversation h2{
font-weight: 500;
width: 82%;
font-size: 2rem;
text-align: center;
margin: auto;
}
.conversationContaner .innerconversation h2.a6show{
animation: a6show 1s linear;
}
@keyframes a6show{
0%{
    transform: translateY(50px);
    opacity: 0;
}
}
.conversationContaner .innerconversation .conversationBox{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1fr);
margin-top: 3%;
}
.conversationContaner .innerconversation .conversationBox .conversation{
background-image: linear-gradient(to bottom, #be1922, #861825);
margin: 1rem;
height: 200px;
padding:0 1rem;
border-radius: .5rem;
position: relative;
animation: a7show1 1s linear;
color: #fff;
}
@keyframes a7show1{
0%{
    transform: rotateY(90deg);
}
}
.conversationContaner .innerconversation .conversationBox .conversation.a7show{
animation: a7show 1s linear;
transition: .5s;
}
@keyframes a7show{
0%{
    transform: rotateY(90deg);
}
}
.conversationContaner .innerconversation .conversationBox .conversation:hover{
background-color: #00172d;
background-image: none;
color: #fff;
}
.conversationContaner .innerconversation .conversationBox .conversation .innerConver{
width: 90%;
height: auto;
position: absolute;
bottom: 1rem;
}

.conversationContaner .innerconversation .conversationBox .conversation h3{
font-size: 1.5rem;
font-weight: 500;
}