*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

:root{

}
body{
    font-family: 'Open Sans', sans-serif;
}
html{
    scroll-behavior: smooth;
}
.container{
    width:80%;
    margin: auto;
    overflow: hidden;
}
header{
background-color: #f6f7ff;
position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    border-bottom: 2px solid #eceefe;
}
header .container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 24px 0px;
}

header .container .logo span{
color: #2d405f;
    font-size: 27px;
    font-weight: bold;
}

header .container .list ul{
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;

}
header .container .list ul li{
margin-right: 20px;
}
header .container .list ul li a{
text-decoration: none;
color: #2d405f;
font-size: 15px;
font-weight: bold;
}
header .container .list ul li:first-of-type a{
    color: #3b4ef8;
}

header .container .list ul li button{
    padding: 9px 25px;
    margin-left: 30px;
    border-radius: 5px;
    font-weight: 600;
    color: #fff;
    color: #3b4ef8;
   border: none;
   cursor: pointer;
}
.animate__animated .animate__fadeInUp {
  --animate-duration: 2s;
  animation-iteration-count: 2;
}
.get
{
margin-top: 70px;
} 

.get .container p:first-of-type{

    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: #141d2b;
    color: #2d405f;
    text-align: center;
}
.get .container p:last-of-type{
margin: 15px 0 0 0;
    font-size: 24px;
    color: #2d405f;
    text-align: center;
    font-weight: bold;
   
}
.get .container button{
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 8px 32px 10px 32px;
    margin-top: 25px;
    border-radius: 5px;
   background: #3b4ef8;
   color: white;
    border: none;
    position: absolute;
    left: 43%;
    cursor: pointer;
}
.get .container img{
    max-width: 60%;
    margin-top: 72px;
    margin-left: 213px;
}
.about{
background: #466393;
    background-size: cover;
    padding: 60px 0;
    position: relative;
    color: #fff;
    margin-top: 50px;
}
.about .container{
display: flex;
flex-wrap: wrap;
align-items: center;
}
.about .container .first{
width: 40%;
}
.about .container .first p:first-of-type{
font-weight: 700;
    font-size: 34px;
    margin-bottom: 30px;
}
.about .container .first p:last-of-type{
margin-bottom: 30px;
}
.about .container .first button{
    
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 30px 8px 30px;
    color: #fff;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    
}

.animate__animated .animate__fadeInLeft{ 
    animation-delay: 2s;
     animation-iteration-count: 2;
    
}
.animate__animated .animate__fadeInRight{
animation-delay: 2s;
 animation-iteration-count: 2;

}
.about .container .first button span{
position: relative;
}
.about .container .first button span i{
position: absolute;
top: 3px;
}
.about .container .second{
display: flex;
flex-wrap: wrap;
width: 60%;
padding-top: 40px;
padding-left: 40px;
justify-content: space-between;
}
.about .container .second div{
    width: 45%;
}

.about .container .second div p:first-of-type span{
   font-size: 40px;
}
.about .container .second div p:first-of-type span i{
    color: #c2d5f5;
}
.about .container .second div h2{
font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px 0;
}
.about .container .second p:last-of-type{
font-size: 15px;
}
.bar{
background: #f6f7ff;
    padding: 15px 0;
    text-align: center;
    padding: 30px 0px;
}
.bar .container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;

}
.bar .container img{
width: 65px;
}
.bar .container img:hover{
    transform: scale(1.2);
    display: block;
}
.animate__animated .animate__zoomIn{
    animation-delay: 2s;
}
.feature{
margin-top: 30px;
}

.feature .container h2 {
font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 20px;
   
    color: #2d405f;
    text-align: center;
}
.feature .container h2 span{
 position: relative;
}
.feature .container h2 span::before{
content: '';
position: absolute;
border-bottom: 3px solid #aabbd7;
width: 50px;
height: 3px;
top: 43px;
    left: 41px;

}

.feature .container  p{
    text-align: left;
    color: rgb(73, 73, 73);
}
.feature .container .one{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 40px;
}
.feature .container .one div:first-of-type{
    width: 40%;
}
.feature .container .one div:first-of-type img{
width: 400px;
    height: auto;
    margin-right: 40px;
}
.feature .container .one div:last-of-type{
    width: 60%;
}
.feature .container .one div:last-of-type h2{
    font-weight: 600;
    font-size: 26px;
    text-align: justify;
}
.feature .container .one div:last-of-type p:first-of-type{
    font-style: italic!important;
    text-align: justify;
}

.feature .container .one div:last-of-type p span i{
    color: cornflowerblue;
    padding: 10px;
}
.feature .container .two{
    padding-top: 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 40px;
}
.feature .container .two .twone{
    width: 60%;
}
.feature .container .two .twone h2{
        margin-left: -21px;
}
.feature .container .two .twone p:first-of-type{
        font-style: italic!important;
    text-align: justify;
}
.feature .container .two .twone p:last-of-type{
    color: rgb(73, 73, 73);
    font-weight: 500;
}
.feature .container .twoto{
    width: 40%;
}
.feature .container .twoto img{
    max-width: 400px;
    height: auto;
    margin-left: 40px;
}
.nums{
margin-top: 80px;
margin-bottom: 80px;
}
.nums .container{
display: flex;
flex-wrap: wrap;
align-items: center;
    justify-content: space-between;
}
.nums .container div{
width: 30%;
border-right: 1px solid rgb(211, 209, 209);
border-bottom: 1px solid rgb(211, 209, 209);
padding: 20px;
}
.nums .container div:nth-of-type(4){
border-bottom: none;
}
.nums .container div:nth-of-type(5){
border-bottom: none;
}
.nums .container div:nth-of-type(6){
border-bottom: none;
}
.nums .container div p:first-of-type{
display: block;
    font-size: 24px;
    font-weight: 400;
    color: #3b4ef8;
}
.nums .container div h2{
font-size: 28px;
    font-weight: 400;
    padding: 0;
    margin: 20px 0;
    color: #2d405f;
}
.nums .container div p:last-of-type{
color: #aaaaaa;
    font-size: 15px;
    margin: 0;
    padding: 0;
}
.services{
background: #2d405f;
    padding-bottom: 80px;
}

.services .container h1{
    color: #fff;
    text-align: center;
    font-weight: bold;
}
.services .container h1 span{
position: relative;
}
.services .container h1 span::before{
    content: '';
    position: absolute;
    border-bottom: 3px solid #aabbd7 ;
    width: 50px;
   top: 45px;
    left: 38px;
   
}
.services .container .pp{
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
}
.services .container .menu{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.services .container .menu div{
    width: 23%;
    background-color: white;
    border-radius: 7px;
    margin-top: 52px;
    position: relative;
    padding: 10px;
    overflow: hidden;
}
.services .container .menu div:hover{
    transform: scale(1.1);
    
}

.services .container .menu div p:first-of-type span i{
    font-size: 32px;
    line-height: 1;
    color: #2d405f;
    background: #eff2f8;
    padding: 20px;
    border-radius: 50px;
    position: absolute;
    left: 89px;
    top: 41px;
}
.services .container .menu div h2{
color: #2d405f;
    text-align: center;
    margin-top: 137px;
}
.services .container .menu div p:last-of-type{
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 0;
    text-align: center;
    padding-bottom: 40px;
}
@media(max-width:767px)
{
    header{
        height: 100px;
    }
    .test .container .info div{
        width: 100%;
        margin-bottom: 20px;
    }
    .get .container button{
        left: 96px;
    }
    .get .container img{
       position: relative;
    right: 155px;
    }

  .get{
margin: 0 auto;
  }  
  .about .container .first{
      width: 760px;
      margin: 0 auto;
  }
  
  .about .container .second div {
    width: 760px;
    /* margin: 20px auto; */
}
 .about .container .second div p:first-of-type{
width: 755px;
 }
 .about .container .second div h2{
     width: 755px;
 }
 .about .container .second div p:first-of-type{
   width: 755px;
 }
 .bar .container img{
width: 40%;
}
.feature .container .two .twone{
    width: 100%;
}
.feature .container .two .twone h2{
font-size: 27px;
}
.feature .container  .twoto img{
    width: 160%;
}
.feature .container .one div:last-of-type{
    width: 100%;
}
.feature .container .one div:first-of-type img{
    width: 224%;
}
.nums .container div{
    width: 100%;
}

.nums .container div:nth-of-type(4){
border-bottom: 1px solid rgb(211, 209, 209);
}
.nums .container div:nth-of-type(5){
border-bottom: 1px solid rgb(211, 209, 209);
}
.nums .container div:nth-of-type(6){
border-bottom: 1px solid rgb(211, 209, 209);
}

.services .container .menu div{
    width: 100%;
}
}
@media(min-width:768px) and (max-width:990px)
{
    header{
        height: 100px;
    }
    .get .container p:first-of-type {
        margin-top: 168px;
    }
    .test .container .info div{
        width: 50%;
        margin-bottom: 20px;
    }
    .get .container button{
        left: 300px;
    }
    .get .container img{
       position: relative;
    right: 155px;
    }

  .get{
margin: 0 auto;
  }  
  .about .container .first{
      width: 760px;
      margin: 0 auto;
  }
  
  .about .container .second div {
    width: 34%;
    position: relative;
    left: 100px;
    /* margin: 20px auto; */
}
 .about .container .second div p:first-of-type{
width: 755px;
 }
 .about .container .second div h2{
     width: 755px;
 }
 .about .container .second div p:first-of-type{
   width: 755px;
 }
 .bar .container img{
    width: 26%;
}
.feature .container .two .twone{
    width: 100%;
}
.feature .container .two .twone h2{
font-size: 27px;
}
.feature .container  .twoto img{
    width: 160%;
}
.feature .container .one div:last-of-type{
    width: 100%;
}
.feature .container .one div:first-of-type img{
    width: 224%;
}
.nums .container div{
    width: 100%;
}

.nums .container div:nth-of-type(4){
border-bottom: 1px solid rgb(211, 209, 209);
}
.nums .container div:nth-of-type(5){
border-bottom: 1px solid rgb(211, 209, 209);
}
.nums .container div:nth-of-type(6){
border-bottom: 1px solid rgb(211, 209, 209);
}

.services .container .menu div{
    width: 100%;
} 
}
.portfolio{

}
.portfolio .container{

}
.portfolio .container h2{
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20 px;
    padding-bottom: 20 px;
    color: #2d405f;
    text-align: center;
}
.portfolio .container h2 span{
position: relative;
}
.portfolio .container h2 span::before{
    content: '';
    position: absolute;
    border-bottom: 3px solid #aabbd7 ;
    width: 50px;
    top: 49px;
    left: 40px;
   
}
.portfolio .container p{
text-align: center;
}
.portfolio .container ul{
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.portfolio .container ul li{
    padding: 7px;
    margin-right: 5px;
}
.portfolio .container ul li:first-of-type {
 background-color: #3b4ef8;
 border-radius: 5px;
 
}
.portfolio .container ul li:first-of-type a{
    color: white;
    padding: 10px;
}
.portfolio .container ul li a{
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.portfolio .container .photos {
    margin-top: 30px;
display: flex;
justify-content: space-between;
}
.portfolio .container .photos .two{
    width: 30%;
    display: flex;
    flex-direction: column;
}
.portfolio .container .photos .three {
     width: 30%;
     display: flex;
     flex-direction: column;
     
}
.portfolio .container .photos .four{
     width: 30%;
     display: flex;
     flex-direction: column;

}
.photos img{
    margin-bottom: 30px;
    transition: .3s  ease-out;
    box-sizing: border-box;
    position: relative;
  
}
.photos img:hover{
   box-sizing: border-box;
   display: block;
   transform:scale(1.1) ;
   
}
.test{
    background-color: #f6f8fb;
}
 .test .container{

 }
 .test .container h2{
text-align: center;
font-size: 32px;
    font-weight: bold;
    margin-bottom: 20 px;
    padding-bottom: 20 px;
    color: #2d405f;
    

 }
 .test .container h2 span{
position: relative;
 }
 .test .container h2 span::before{
     content: '';
     position: absolute;
      border-bottom: 3px solid #aabbd7 ;
    width: 50px;
    top: 49px;
    left: 76px;
 }

 .test .container p{

text-align: center;
    padding: 24px;
    color: gray;
 }
 .info{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
 }
 .info div{
     width: 30%;
     box-shadow: 0px 2px 12px rgb(0 0 0 / 8%);
     background-color: white;
     margin-right: 34px;
 }
 
 .info div img{
     width: 75px;
    height: 75px;
    position: relative;
    left: 113px;
     border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     -o-border-radius: 50%;
}
 .test .info div h2{
     text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: black;
 }
 .test .info div h4{
     text-align: center;
    color: gray;
 }
header> span{
position: fixed;
font-size: 30px;
right: 20px;
top: 30px;
display: none;
}
@media(max-width:767px){
  .info div{
      width: 100%;
      margin-bottom: 20px;
  }  
}
@media(max-width:800px){
    header >span{
        display: block;
    }
    header .list{
        width: 100% !important;
        margin-top: 15px;
    }
    .list ul{
        display: none !important;
    }
    header:hover .list ul{
        display:block !important;
        background-color: white;
    text-align: center;
    }
    header .list ul li{
        display: block !important;
        margin-bottom: 15px;
        margin-right: 0px;
    }
}