html{
scroll-behavior: smooth;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
.container{
width: 80%;
overflow: hidden;
margin: auto;
}
header{
background-color: rgb(55 81 126 / 90%);
height: 60px;
/* padding-top: 33px; */
position: fixed;
width: 100%;
z-index: 2222;
}
header .container .logo{
width: 15%;
float: left;
color: white;
font-size: 32px;
position: relative;
padding-top: 10px;
}
header .container .list{
width: 70%;
float: left;
}
header .container .list .first{
position: relative;
padding-top: 20px;
}
header .container .list .first li{
display: inline-block;
}
header .container .list .first li a{
text-decoration: none;
color: white;
font-size: 18px;
padding: 20px;
}
header .container .list .first li:first-of-type a{
color: #47b2e4;
}
header .container .list .first li a:hover{
color: #47b2e4;
}
header .container .start{
width: 15%;
float: left;
position: relative;
padding-top: 10px;
}
header .container .start button{
color: white;
background-color: transparent;
border: 2px solid #47b2e4;
border-radius: 21px;
padding: 5px;
width: 142px;
height: 43px;
cursor: pointer;
}
header .container .start button:hover{
background-color: #47b2e4;
}
header .container{
overflow: unset;
}
.list .menu{
position: relative;
padding-bottom: 100px;
/* top: 5px; */
}
.list .menu ul{
position: absolute;
background-color: white;
width: 250px;
text-align: center;
display: none;
}
.list .menu:hover ul{
display: block;
}
.list .menu ul li {
/* display: block; */
padding: 10px;
/* z-index: 999; */
}
.list .menu ul li a{
color: black !important;
}
/* start back */
.back{
overflow: hidden;
background-color: #37517e;
}
.back .text{
float: left;
width: 40%;
margin-left: 131px;
}
.back .text h1{
color: white;
font-size: 50px;
margin-top: 90px;
}
.back .text p{
color: #ffffff9c;
font-size: 21px;
}
.back .text button:first-of-type{
background-color: #47b2e4;
color: white;
border: none;
padding: 15px;
font-size: 20px;
border-radius: 32px;
width: 146px;
cursor: pointer;
}
.back .text button:first-of-type:hover{
background-color: #1091cc;
}
.back .text button:last-of-type{
background-color: transparent;
border: none;
padding: 15px;
font-size: 20px;
border-radius: 32px;
width: 222px;
color: white;
cursor: pointer;
}
.back .text button i{
font-size:40px ;
position: relative;
top: 13px;
}
.back .image
{
float: left;
width: 40%;
}
.back .image img{
width: 512px;
position: relative;
margin-top: 90px;
animation: up-and-down 5s linear infinite;
}
@keyframes up-and-down{
0%,
100%{
top: 0;
}
50%{
top: -50px;
}
}
/* end back */
/* srart bar */
.bar{
background-color: #f3f5fa;
height: 100px;
}
.bar img{
width: 73px;
margin-left: 125px;
margin-top: 30px;
filter: grayscale(100);
}
.bar img:first-of-type:hover{
filter:inherit ;
}
.bar img:nth-child(2):hover{
filter: url(100);
}
.bar img:nth-child(3):hover{
filter:saturate(100) ;
}
.bar img:nth-child(4):hover{
filter: opacity();
}
.bar img:nth-child(5):hover{
filter: contrast();
}
.bar img:nth-child(6):hover{
filter: blur();
}
/* end bar */
/* start about */
.about{
margin-top: 70px ;
margin-bottom: 70px;
}
.about .container{
overflow: hidden;
}
.about .container h1{
text-align: center;
color: #37517e;
margin-bottom: 40px;
}
.about .container h1 span{
border-bottom: 1px solid gray;
position: relative;
}
.about .container h1 span::before{
content: '';
position: absolute;
border-bottom: 4px solid #47b2e4;
width: 40px;
top: 35px;
left: 34px;
}
.about .container .te1{
float: left;
width: 50%;
font-size: 18px;
color: #444444;
}
.about .container .te1 p i{
color: #47b2e4;
padding: 5px;
}
.about .container .te2{
float: left;
width: 50%;
font-size: 18px;
color: #444444;
line-height: 1.8;
}
.about .container .te2 button{
display: block;
margin-top: 20px;
color: #47b2e4;
border: 2px solid #47b2e4;
font-size: 18px;
/* border: none; */
background-color: transparent;
padding: 10px;
width: 150px;
cursor: pointer;
}
/* end about */
/* start ipsam */
.ipsam{
background-color: #f3f5fa;
}
.ipsam .container{
overflow: hidden;
}
.ipsam .container .text{
float: left;
width: 60%;
}
.ipsam .container .text h1{
color: #37517e;
font-size: 30px;
}
.ipsam .container .text h1 strong{
color: #37517e;
font-size: 40px;
}
.ipsam .container .text p{
color: gray;
line-height: 1.2;
font-size: 18px;
padding: 20px;
}
.ipsam .container .text p:nth-last-of-type(2){
background-color: white;
padding: 24px;
font-size: 20px;
color: black;
width: 466px;
}
.txt{
background-color: white;
position: relative;
}
.txt p{
color: #47b2e4;
cursor: pointer;
}
.txt p span:first-of-type{
color: #47b2e4;
}
.txt p span:last-of-type{
color: #47b2e4;
padding: 7px;
position: absolute;
right: 20px;
top: 21px;
}
.txt p:last-of-type{
}
/* .ipsam .container .text .hh{
color: #47b2e4;
}
.ipsam .container .text .hh i{
margin-left: 30px;
} */
.ipsam .container .img{
float: left;
width: 40%;
}
.ipsam .container .img img{
width: 500px;
}
/* endipsam */
/* start team */
.team{
background-color: #f3f5fa;
}
.team .tttt span{
position: relative;
left: 50%;
font-size: 36px;
border-bottom: 1px solid gray;
color: #37517e;
}
.team .tttt span::before{
content: '';
position: absolute;
color: #47b2e4;
border-bottom: 4px solid #47b2e4;
width: 29px;
top: 39px;
left: 26px;
}
.team .container{
display: flex;
flex-wrap: wrap;
}
.team .container .per .ima{
}
.team .container .per{
width: 45%;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 70px;
/* margin-left: 32px; */
/* border: 1px solid #80808042; */
border-radius:5px;
padding: 5px;
margin-right: 30px;
height: 200px;
box-shadow: 2px 15px rgb(0 0 0 / 10%);
/*transition: .3s all ease-in-out;
*/background-color: white;
}
.team .container .per img{
width: 100px;
border-radius:50% ;
position: absolute;
}
.team .container .per div:last-of-type h3{
font-size: 24px;
color: #37517e;
}
.team .container .per div p:first-of-type{
color: #0e0e0ea3;
font-size: 18px;
}
.team .container .per div p:first-of-type span{
border-bottom: 1px solid gray;
color: #0e0e0ea3;
}
.team .container .per div p:last-of-type{
color: #0e0e0ea3;
font-size: 16px;
}
.team .container .per i{
font-size: 15px;
padding: 7px;
color: #37517e;
}
.team .container .per span i{
border-radius: 50%;
border: 1px solid gray;
margin: 3px;
background-color: #f3f5fa;
cursor: pointer;
}
.team .container .per:hover{
/*transition: 4s;
*/top: -15px;
transition:.3s ;
}
/* end team */
/* start services */
.services{
padding-top: 60px;
background-color: #f3f5fa;
}
.services h3{
text-align: center;
}
.services h3 span{
font-size: 36px;
color: #37517e;
border-bottom: 1px solid gray;
position: relative;
}
.services h3 span::before{
content: '';
color: #b7c9d1;
position: absolute;
border-top: 3px solid #47b2e4;
width: 30px;
top: 39px;
left: 44px;
}
.services .first{
width: 80%;
text-align: center;
padding-left: 112px;
font-size: 18px;
line-height: 1.5;
color: gray;
}
.services .tablu{
display: flex;
width: 80%;
padding-left: 112px;
padding-top: 30px;
}
.services .tablu div{
background-color: white;
height: 266px;
margin-right: 17px;
box-shadow: 2px 15px rgb(0 0 0 / 10%);
transition: 2s all;
position: relative;
}
.services .tablu div:hover{
top: -20px;
}
.services .tablu div:hover h3{
color: #47b2e4;
}
.services .tablu div p:first-of-type span {
padding-left: 20px;
padding-top: 30px;
}
.services .tablu div p:first-of-type span i{
color: #47b2e4;
font-size: 35px;
}
.services .tablu div h3{
color: #37517e;
position: relative;
right: 27px;
font-size: 25px;
}
.services .tablu div p:last-of-type{
color: #000000c4;
font-size: 17px;
text-align: start;
padding-left: 25px;
}
/* end services */
/* start layout */
.back2{
background-color: #f3f5fa;
margin-top: 70px;
background-image: url('../images/images.jfif');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.back2 .layer {
background-color:rgba(0, 0, 0, 0.089) ;
}
.back2 .layer .container{
display: flex;
justify-content: space-around;
align-items: center;
padding-top: 100px;
padding-bottom: 100px;
}
.back2 .layer .container .left{
}
.back2 .layer .container .left h2{
color: white;
font-size: 30px;
}
.back2 .layer .container .left p{
color: white;
font-size: 18px;
font-weight: normal;
line-height: 1.5;
}
.back2 .layer .container .right{
}
.back2 .layer .container .right button{
width: 208px;
height: 39px;
border-radius: 44px;
background-color: transparent;
color: white;
border: 2px solid white;
cursor: pointer;
}
/* end layout */
/* start portfolio */
.portfolio .container h3 {
text-align: center;
}
.portfolio .container h3 span{
font-size: 36px;
color: #37517e;
border-bottom: 1px solid gray;
position: relative;
}
.portfolio .container h3 span::before{
position: absolute;
content: '';
border-bottom: 3px solid #47b2e4;
width: 30px;
top: 39px;
left: 52px;
}
.portfolio .container p{
width: 80%;
text-align: center;
padding-left: 112px;
font-size: 18px;
line-height: 1.5;
color: gray;
}
.portfolio .container ul{
display: flex;
list-style: none;
align-items: center;
position: relative;
left: 37%;
margin-bottom: 50px;
}
.portfolio .container ul li{
padding: 10px;
background-color:white ;
margin-right: 10px;
border-radius:20px ;
width: 43px;
color: black;
font-size: 20px;
text-align: center;
cursor: pointer;
}
.portfolio .container ul li:first-of-type{
background-color:#47b2e4 ;
color: white
}
.portfolio .container ul li:hover{
background-color:#47b2e4 ;
color: white;
}
.portfolio .container .photos {
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;
position: relative;
-webkit-transition: .3s ease-out;
-moz-transition: .3s ease-out;
-ms-transition: .3s ease-out;
-o-transition: .3s ease-out;
}
.photos img:hover{
top: -20px;
}
/* end portfolio */