/* styles.css */

/* Global styles */
*{
box-sizing: border-box;
transition: .4s;
}
p,span,a,div,button{
font-size: 1.2rem;
}
body {
font-family: Montserrat;
margin: 0;
padding: 0;
background-color: #f5f4ef;
}
#container{
padding: 0 50px;
}
.separator {
border: none;
border-top: 2px solid #000;
margin: 0;
padding: 0;
}

/* Header styles */
header {
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
}
header img{
width:100%
}
header > div:nth-child(1){
width: 10vw;
}
header > div:nth-child(2) > a{
color: black;
transition: .1s;
}
header > div:nth-child(2) > a:hover{
transform: scale(1.2);
}
header > div:nth-child(2){
display: flex;
width: 50%;
justify-content: space-around;
align-items: center;
}

div ul {
list-style-type: none;
padding: 0;
}

a{
text-decoration: none;
color: white;
}

div ul li {
display: inline;
margin-right: 10px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

/* Main content styles */
main{
margin-top: 8vh;
}

.main-section > div{
width: 100%;
}
.main-section > div > img{
width: 100%;
}
.main-text-div{
display: flex; 
padding-block: 50px;
}
.main-text-div > div:nth-child(1){
width: 55.5vw;
font-size: 3.5rem;
line-height: 1.3;
letter-spacing: 2.5px;
}
.main-text-div > div:nth-child(2){
width: 30%;
display: flex;
flex-direction: column;
padding-inline: 50px;
line-height: 1.7;
margin-left: 50px;
}
.main-text-div > div:nth-child(2) > button{
background-color: black;
color: #fff;
font-family: Montserrat;
font-size: 1rem;
width: 200px;
height: 60px;
border: 0;
margin-top: 20px;
transition: .2s;
}
.main-text-div > div:nth-child(2) > button:hover{
transform: scale(1.1);
}
marquee{
display: flex;
}
.stat{
display: flex;
justify-content: space-around;
font-size: 1.5rem;
padding-block: 30px;
}
.stat > div{
display: flex;
align-items: center;
scroll-snap-type: mandatory;
transition: .2s;
}
.stat > div:hover{
transform: scale(1.1);      

}
.stat > div > span{
font-size: 20px;
}
.stat-num{
width: 70px;
height: 40px;
margin-left: 10px;
font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
}
.stat > div:nth-child(1) > div:nth-child(2){
background-color: #ffc96e;
}
.stat > div:nth-child(2) > div:nth-child(2){
background-color: #ff405b;
}
.stat > div:nth-child(3) > div:nth-child(2){
background-color: #7059f9;
}
.stat > div:nth-child(4) > div:nth-child(2){
background-color: rgb(58, 155, 58);
}
.connect{
margin: 80px 0;
}
.connect > div:nth-child(1){
width: 50%;
padding: 0 10px 0 0 ;
}
.connect > div:nth-child(2){
display: flex;
}
.connect > div:nth-child(2) > div:nth-child(1){
width: 50%;
padding: 0 40px 0 0;
}
.connect > div:nth-child(2) > div:nth-child(2){
width: 50%;
padding: 0 0 0 40px;
}
.connect > div:nth-child(2) > div:nth-child(2) > img{
width: 100%;
}
.connect > div:nth-child(2) > div:nth-child(1) > p{
line-height: 1.7;
margin-bottom: 40px;
}
.connect > div:nth-child(2) > div:nth-child(1) > span{
border-bottom: 2px solid black;
font-weight: bold;
margin: 50px 0;
padding-bottom: 5px;
}
.connect > div:nth-child(2) > div:nth-child(1) > div{
display: flex;
justify-content: space-between;
align-items: space-between;
}
.connect > div:nth-child(2) > div:nth-child(1){
flex-direction: column;   
}
.connect > div:nth-child(2) > div:nth-child(1) > div{
margin-bottom: auto;
position: relative;
top: 110px;
}  
.connect > div:nth-child(2) > div:nth-child(1) > div > img{
width: 100%;
}
.heading{
text-align: center;
width: 50%;
margin: auto;
}
.service{
display: flex;
margin: auto;
padding: 80px 80px;
}
.service > div:nth-child(1){
padding-right: 40px;
}
.service > div:nth-child(2){
padding-left: 40px;
}
.service > div > div{
padding-bottom: 80px ;
}
.service > div:nth-child(2){
padding-top: 90px;
}
.service > div > div > div > img{
width: 100%;
}
.service > div > div > p{
color: rgb(42, 41, 41);
line-height: 1.7;
}
.service > div > div > span{
border-bottom: 2px solid black;
padding-bottom: 5px;
}
.black-div{
background-color: black;
color:whitesmoke;
padding: 80px 80px;
display: flex;
}
#orange{
margin-left: 20px;
margin: 100px auto;
position: relative;
}
.ques{
width: 50%;
}
.ques > div{
display: flex;
}
.ques > div > span{
font-size: 25px;
}
.ques > div > span:nth-child(2){
margin-left: 25px;
}
.ques > p{
color: rgb(141, 141, 141);
margin-left: 55px;
font-size: 18px;
line-height: 1.7;
}
.black-box-seprater{
margin: 50px 0;
} 
.black-div > div:nth-child(1){
width: 50%;
}
.black-div > div > h1:nth-child(2){
letter-spacing: 3px;
line-height: 1.4;
}
.black-div > div > p:nth-child(3){
font-size: 17px;
line-height: 1.7;
color: rgb(141, 141, 141);

}
.black-div > div > button{
background-color: #fff;
color: black;
font-family: Montserrat;
font-size: 1rem;
font-weight: bold;
width: 200px;
height: 60px;
border: 0;
line-height: 1.7rem;
margin-top: 20px;
transition: .2s;
}
.black-div > div > button:hover{
transform: scale(1.1);
}

.chat{
display: flex;
justify-content: space-between;
align-items: center;
padding: 70px 80px;
}
.chat > h1{
letter-spacing: 5px;
}
.chat > button{
background-color: black;
color: #fff;
font-family: Montserrat;
font-size: 1rem;
width: 200px;
height: 60px;
border: 0;
margin-top: 20px;
transition: .2s;
}
.chat > button:hover{
transform: scale(1.1);
}
/* Footer styles */
footer{
display: flex;
color: rgb(61, 61, 61);
}
footer > div:nth-child(1){
width: 50%;
}
footer > div:nth-child(1){
padding-right: 60px;
}
footer > div > p{
line-height: 1.5;
}
footer div > div img{
width: 100%;
}
footer > div:nth-child(2){
width: 50%;
display: flex;
justify-content: space-between;
}
footer > div:nth-child(2) > div > p:nth-child(1){
font-weight: bold;
margin-bottom: 20px;
color: black;
}
footer > div:nth-child(2) > div > p:nth-child(1)~p{
transition: .1s;
}
footer > div:nth-child(2) > div > p:nth-child(1)~p:hover{
transform: scale(1.1);
}
footer > div:nth-child(1) > div > img{
width: 25%; 
}