html{
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
body{
margin: 0;
}
*{
box-sizing: border-box;
}
/* navbar */
.page0{
z-index: 300;
width: 100%;
margin: auto;
background-color: fff;
font-family: "Open Sans", sans-serif;
position: fixed;
}
.navbar{
width: 85%;
margin: auto;
display:flex;
justify-content: space-between;
/* height: 89px; */
align-items: center;
}
.nav1 p{
font-size: 30px;
}
.nav1 span{
color: #ce1212;
}
.nav3{
display: flex;
justify-content: center;
align-items: center;
}
.p a{
text-decoration:none ;
color: #7f7f90;
font-size: 17px;
}
.nav2{
visibility: visible;
}
.p1 hr{
margin-top: -5px;
background-color: #ce1212;
height: 2px;
border: none;
}
.p{
transition: .5s;
position: relative;
font-family: "Open Sans", sans-serif;
font-size: 19px;
}
.p hr{
margin-top: 10px;
background-color: #ce1212;
height: 2px;
border: none;
width: 0;
position: absolute;
left: 0;
transition: .5s;
}
.p:hover hr{
width: 100%;
}
.p:hover{
color: #000;
}
.nav2{
font-size: 17px;
color: #7f7f90;
width: 30%;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav3 i {
color: rgb(13, 13, 14);
font-size: 25;
}
/* page1 */
.back1{
background-color: #eeeeee;
display: flex;
justify-content: center;
}
.page1{
width: 85%;
height: 100vh;
background-color: #eeeeee;
display: flex;
align-items: center;
justify-content: space-between;
}
.left1{
width: 30%;
}
.left1 h2{
font-family: "Amatic SC", sans-serif;
font-size: 65px;
color: #37373f;
}
.left1 p{
font-family: "Open Sans", sans-serif;
color: #4f4f5a;
}
.button1 {
width: 100%;
display: flex;
justify-content: left;
}
.button1 button{
color:fff;
background-color: #ce1212;
width: 50%;
padding-top: 20px;
padding-left: 20px;
padding-top: 15px;
padding-bottom: 15px;
border: 3px solid #ce1212;
border-radius:25px;
border-top-left-radius:0 ;
border-bottom-left-radius:20px ;
}
.icon1::before{
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: hsl(0, 14%, 97%);
width: 2.5rem;
height: 2.5rem;
border-radius: inherit;
}
.icon1{
position: relative;
display: flex;
background-color: #ce1212;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
margin: auto;
border-radius: 50%;
transition: .5s;
}
.button1 table{
font-family: "Open Sans", sans-serif;
width: 60%;
transition: .5s;
}
.button1 table:hover{
color: #ce1212;
}
.button1 table:hover .icon1 i{
color: #ce1212;
}
.icon1 i{
color: rgb(16, 16, 17);
z-index: 100;
margin: auto;
transition: .5s;
}
.right1{
width: 50%;
text-align: end;
margin-top: 50px;
filter: drop-shadow(0 0 20px #444);
}
.right1 img{
width: 80%;
}
.right1 img:hover {
animation: shake 1s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
/* page2 */
.page2{
width: 100%;
text-align: center;
margin-bottom: 40px;
}
.content2{
width: 90%;
display: flex;
justify-content: center;
margin: auto;
}
.page2 p{
font-family: "Open Sans", sans-serif;
color: #4f4f5a;
}
.page2 h1{
font-family: "Amatic SC", sans-serif;
font-size: 50px;
color: 212529;
color: #4f4f5a;
margin-top: -5px;
}
.page2 span{
color: #ce1212;
}
.content2 h3{
font-family: "Open Sans", sans-serif;
font-size: 18;
}
.cont2{
width: 30.33333%;
text-align: center;
margin-left: 20px;
position: relative;
overflow: hidden;
border-radius: 5px;
transition: .5s;
box-shadow:0 0 10px #4444;
}
.cont2:hover{
transform: scale(1.05);
}
.photo2 img{
width: 100%;
}
.icon2{
position: absolute;
top: 30px;
right: -70px;
background-color: #ffffff6d;
height: 150px;
width: 50px;
border-radius: 5px;
transition-duration: .5s ;
transition-delay: .05s;
}
.cont2:hover .icon2{
position: absolute;
top: 30px;
right: 20px;
transition-delay: .25s;
}
.icon2 i{
margin-bottom: 10px;
margin-top: 10px;
color: #4f4f5f;
transition: .25s;
}
.icon2 i:hover{
color: black;
}
/* page3 */
.page3{
padding-top: 20px;
width: 100%;
text-align: center;
background-color: #eeeeee;
}
.page3 p{
font-family: "Open Sans", sans-serif;
color: #4f4f5a;
}
.page3 h1{
font-family: "Amatic SC", sans-serif;
font-size: 50px;
color: 212529;
color: #4f4f5a;
margin-top: -5px;
}
.page3 span{
color: #ce1212;
}
.content3{
width: 80%;
columns: 3 250px;
gap: 15px;
margin: auto;
padding-bottom: 80px;
}
.content3 img{
width: 100%;
}
.im{
margin-top: 20px;
margin-left: 20px;
border: 5px solid white;
position: relative;
overflow: hidden;
}
.im img{
transition: .5s ;
}
.im:hover img{
transform: scale(1.03);
}
.text3{
position: absolute;
bottom: -200;
right: 0;
left: 0;
transition-delay: .25;
transition: .5s;
background-color: #000000ab;
color: white;
height: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text3 p{
width: 90%;
color: #ffffff;
font-size: 16px;
font-family: "Open Sans", sans-serif;
}
.text3 h2{
color: #ffffff;
margin-bottom: -5px;
font-size: 24px;
font-family: "Inter", sans-serif;
}
.im:hover .text3{
height: 100%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
.cont3{
display: flex;
flex-direction: column;
}
/* page4 */
.page4{
text-align: center;
padding-top:20px;
}
.page4 p{
font-family: "Open Sans", sans-serif;
color: #4f4f5a;
}
.page4 h1{
font-family: "Amatic SC", sans-serif;
font-size: 50px;
color: 212529;
color: #4f4f5a;
margin-top: -5px;
}
.page4 span{
color: #ce1212;
}
.content4 iframe{
width: 90%;
height: 350px;
margin: auto;
margin-bottom: 50px;
}
.cont4{
width: 92%;
display: flex;
flex-wrap: wrap;
margin: auto;
}
.tab{
background-color: #eeeeee;
margin-left: 1%;
margin-right: 1%;
padding-left: 20px;
margin-bottom: 20px;
display: flex;
justify-content:flex-start;
width: 48%;
padding-bottom: 20px;
}
.text{
display: flex;
flex-direction: column;
/* justify-content:flex-start; */
align-items: flex-start;
color: black;
}
.text h3{
font-family: "Inter", sans-serif;
margin-bottom: -6px;
/* font-family: "Open Sans", sans-serif; */
color: #7f7f90;
}
.text span{
color: black;
font-weight: 700;
font-family: "Open Sans", sans-serif;
}
.icon4{
padding-top: 40px;
padding-right: 30px;
height: 100%;
/* background-color: #37373f; */
}
.icon4 i{
color: #fff;
background: #ce1212;
width: 50px;
height: 50px;
border-radius: 100%;
line-height: 36px;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* page5 */
.page5{
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
/* filter: drop-shadow(0 0 1px #444); */
/* background-color: #fff4f4; */
/* box-shadow:0 0 10px #4444; */
}
#name{
width: 49%;
margin-right: 1%;
margin-bottom: 40px;
height: 50px;
font-family: "Open Sans", sans-serif;
/* border: 1px solid #eeeeee; */
border:.25px solid #eeeeee;
}
#email{
width: 49%;
margin-left: 1%;
margin-bottom: 40px;
height: 50px;
font-family: "Open Sans", sans-serif;
border: .25px solid #eeeeee;
}
#supject{
width: 100%;
margin-bottom: 40px;
height: 50px;
font-family: "Open Sans", sans-serif;
border: 1px solid #eeeeee;
}
#massage{
width: 100%;
margin-bottom: 40px;
height: 150px;
font-family: "Open Sans", sans-serif;
border: 1px solid #eeeeee;
}
input:focus{
border-color: #ce1212;
}
.page5 button{
padding-top: 15px;
padding-bottom: 15px;
padding-left: 35px;
padding-right: 35px;
color: #eeeeee;
font-family: "Open Sans", sans-serif;
background-color: #ce1212;
border-radius: 40px;
border: none;
border: 1px solid #eeeeee;
transition: .5s;
}
.page5 button:hover{
background-color: rgb(234, 15, 15);
/* transform: scale(1.02); */
}
/* footer */
.back6{
background-image: url(../images/back.jpg);
}
.footer{
width:90%;
margin: auto;
margin-top: 50px;
font-family: "Open Sans", sans-serif;
color: white;
position: relative;
}
.color{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.408);
}
.tab1{
width: 25%;
padding-right: 20px;
}
.tab1 span{
color: #ce1212;
}
.line{
display: flex;
align-items: center;
}
.ph5{
width: 50px;
}
.ph5 img{
width: 100%;
}
.tab1 h3{
text-align: center;
font-family: "Inter", sans-serif;
}
.tab1 hr{
width: 100%;
margin-left: -0%;
height: 2px;
color: #7f7f90;
background-color: #eeeeee;
}
.icons5{
display: flex;
justify-content: space-around;
padding-top: 10px;
}
.icons5 i{
font-size: 20px;
height: 50px;
width: 50px;
color: white;
}
.footer{
display: flex;
}
.tab2{
width: 47%;
}
#data{
width: 70%;
/* margin-right: 5%; */
padding-top:10px;
padding-bottom:10px;
font-family: "Open Sans", sans-serif;
}
.inf6 button{
width: 25%;
padding-top:12px;
padding-bottom:12px;
background-color: #ce1212;
color: #eeeeee;
border:none;
font-family: "Open Sans", sans-serif;
transition: 1s;
}
.inf6 button:hover{
background-color: rgb(234, 15, 15);
}
.cont6{
display: flex;
}
.line6{
width: 40%;
margin-right: 10%;
transition: .5s;
}
.line6 p{
padding-top: 5px;
padding-bottom: 5px;
transition: .5s;
}
.line6 p:hover{
background-color: #222222;
transform: translateX(4px);
}
.link6 i{
font-size: 20px;
color: #ce1212;
}
.tab3 td{
color: rgb(254, 254, 254);
}