css.css

*{
margin:0px;
padding:0px;
box-style:border-box;
}

header{
background-image:linear-gradient(rgba(22,33,44,0.4),rgba(22,33,44,0.4)),url("c.jpg");
background-position:center-center;
background-size:cover;
background-repeat:no-repeat;
height:500px;
}

#logo{
width:60px;
height:40px;
border-radius:16px;
margin-top:8px;
}

#logo:hover{
filter:invert(100%);
cursor:pointer;
}


nav ul li {
padding:8px 20px;
list-style:none;
font-size:20px;
font-family:arial;
color:white;

}

nav #hamn{
display:none;
}

nav ul li #times{
display:none;
}
nav ul li a{
text-decoration:none;
color:white;
}

nav ul li a:hover{
color:orange;
}

nav{
display:flex;
justify-content:space-between;
padding:6px 20px;
}

nav ul{
display:flex;
justify-content:space-between;
padding:12px 150px;
}

.hhead{
color:white;
text-align:center;
margin-top:200px;
font-size:2rem;
}

.hpara{
color:white;
text-align:center;
margin-top:20px;
font-size:1.5rem;
}

.container{
margin-top:30px;
display:flex;
justify-content:center;
}

.chead {
text-align:center;
margin-top:80px;
font-size:2rem;
//text-decoration:underline;
position:relative;
}
 h1::before{
content:'';
position:absolute;
bottom:-10px;
width:100px
height:3px;
background-color:orange;
}


.card{
border-radius:20px;
position:relative;
box-shadow:  -2px -2px 3px rgba(0,0,0,0.2), 2px 2px 3px  rgba(0,0,0,0.2) ;
width:300px;
heignt:500px;
padding:12px;
margin:20px;

}

.card h2{
margin-top:13px;
}

.card img{
width:100%;
border-radius:8px;
}

.testimonials{
font-family:"montserrat",sans-serif;
padding:40px 0;
background:#f1f1f1;
color:#434343;
text-align:center;

}
.inner{
max-width:2000px;
margin:auto;
overflow:hidden;
padding:0 20px;

}

.border{
height:5px;
width:220px;
background-color:#6ab04c;
margin:25px auto;
}

.row{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.col{
flex:33.33%;
max-width:33.33%;
box-sizing:border-box;
padding:15px;

}
                                            //           testimony
.testimonials{
font-family:"montserrat",sans-serif;
padding:40px 0;
background:#f1f1f1;
color:#434343;
text-align:center;
margin-top:80px;

}
.inner{
max-width:2000px;
margin:auto;
overflow:hidden;
padding:0 20px;

}

.border{
height:5px;
width:220px;
background-color:#6ab04c;
margin:25px auto;
}

.row{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.col{
flex:33.33%;
max-width:33.33%;
box-sizing:border-box;
padding:15px;

}

.testimonial{
background:#ffffff;
padding:30px;
border-radius:16px;
box-shadow:  -2px -2px 3px rgba(0,0,0,0.2), 2px 2px 3px  rgba(0,0,0,0.2) ;
}

.testimonial img{
height:100px;
width:100px;
border-radius:50%;
}

.name{
font-size:20px;
text-transform:uppercase;
margin:20px 0;

}

.stars{
color:#6ab04c;
margin-bottom:20px;
}

                                              /*               footer            */
.footer{
background-color:#24262b;
width:100%
border:2px solid black;
padding:70px 0px;
}

.fcontainer{
max-width:1170px;
margin:auto;
line-height:1.5;
}

.row{
display:flex;
flex-wrap:wrap;
}

.footer-col{
width:25%;

}

.ul li{
list-style:none;
}

.ul li a{
text-decoration:none;
}

.footer-col h4{
font-size:18px;
color:#ffffff;
text-transform:capitalize;
margin-bottom:30px;
font-weight:500;
position:relative;
}

.footer-col h4::before{
content:'';
position:absolute;
left:0;
bottom:-10px;
background-color:#e19e63;
height:2px;
width:80px;
}

.footer-col ul li a{
font-size:16px;
text-transform:capitalize;
font-weight:300;
color:#bbbbbb;
display:block;
padding-top:9px;
transition:all 0.3s ease;
}

.footer-col ul li a:hover{
color:#ffffff;
padding-left:10px;
}

.footer-col .social-links a{
display:inline;
height:80px;
width:80px;
background-color:rgba(255,255,255,0.2);
padding:8px;
margin:0 10px 10px 0;
text-align:center;
font-size:22px;
line-height:40px;
border-radius:50%;
color:#ffffff;
transition:all 0.5s ease;
}

.footer-col .social-links a:hover{
color:#24262b;
background-color:#ffffff;
}

                                                                /*              About us page          */

.about{

padding:78px 12px;
background-color:#191919;
}

.about img{
height:auto;
width:420px;
border-radius:12px;
}

.main{
width:1130;
max-width:90%;
margin:0 auto;
display:flex;
justify-content:space-evenly;
align-items:center;

}

.about-text{
margin-left:50px;
}

.about-text h1{
font-family:'josefin sans',sans-sarif;
color:white;
font-size:50px;
margin-bottom:20px;
}

.about-text h3{
color:white;
font-size:25px;
margin-bottom:25px;
letter-spacing:2px;
}

.spdash{
color:#f9004d;
}

.about-text p{
color:#fcfc;
letter-spacing:2px;
line-height:28px;
font-size:18px;
margin-bottom:45px;
}

.abtn{
background:#f9004d;
color:white;
text-decoration:none;
border:2px solid transparent;
font-weight:bold;
padding:13px 30px;
border-radius:30px;
transition: 0.4s;
}

.abtn:hover{
background: transparent;
border:2px solid #f9004d;
}



                                                                /*              join page          */



.fcont{
width:60%;
margin-top: 40px; 
margin-bottom: 40px; 
margin-left:600px;
font-size:22px;
}

input{
height:40px;
width:350px;
margin:8px 20px 20px;
border-radius:8px;
font-size:22px;
}

input:hover{
border-color:blue;
}

.formerror{
color:red;
font-weight:bold;
font-size:20px;
padding-left:20px;
}


			//	      	contact us		contact us

.contact{
position:relative;
min-height:100vh;
padding:50px 100px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(image/cb.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}

.contact .content {
max-width:800px;
text-align:center;
}

.contact .content h2{
font-size:36px;
font-weight:500;
color:#fff;
}

.contact .content p{
font-weight:300;
color:#fff;
}

.cont-container{
width:88%;
display:flex;
justify-content:center;
align-items:center;
margin-top:30px;
}

.cont-container .contactinfo{
width:50%;
display:flex;
flex-direction:column;
}

.cont-container .contactinfo .box{
position:relative;
padding:4px 0;
display:flex;
}

.cont-container .contactinfo .box .icon{
min-width:50px;
height:50px;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
font-size:22px;
}

.cont-container .contactinfo .box .text{
display:flex;
margin-left:20px;
font-size:18px;
color:#fff;
flex-direction:column;
font-weight:300;
}

.contactform{
width:40%;
padding:40px;
background:#fff;
border-radius:8px;
}

.contactform h2{
font-size:30px;
color:#333;
font-weight:500;
}

.contactform .inputbox{
position:relative;
width:100%;
margin-top:10px;
}

.contactform .inputbox input, 
.contactform .inputbox textarea{
width:100%;
padding:5px 0;
font-size:16px;
margin:10px 0;
border:none;
border-bottom:2px solid #333;
outline:none;
resize:none;
}

.contactform .inputbox span{
position:absolute;
left:0;
padding:5px 0;
font-size:16px;
margin:10px 0;
pointer-events:none;
transition:0.5s;
color:#666;
}

.contactform .inputbox input:focus ~ span,
.contactform .inputbox input:valid ~ span,
.contactform .inputbox textarea:focus ~ span,
.contactform .inputbox textarea:focus ~ span{
color:#e91e63;
font-size:12px;
transform: translatey(-20px);
}

.contactform .inputbox input[type="submit"]{
width:100px;
background:#00bcd4;
color:#fff;
border:none;
padding:10px;
font-size:18px;
border-radius:8px;
}



                                                 /*               responsive website            */


@media (max-width:768px){
*{
font-size:1.1rem;
}

 nav #hamn{
display:inline;
color:white;
font-size:35px;
}
 nav #hamn{
cursor:pointer;
}
 nav ul #times{
cursor:pointer;
}
nav ul li #times{
display:inline;
color:white;
font-size:45px;
text-align:right;
}

header{
height:300px;
}
nav ul {
display:block;
width:100px;
}
nav ul li {
padding:12px;
width:100px;

}
nav ul li a{
text-align:left;
}
nav ul li a:hover{
color:black;
}

nav ul{
background-color:orange;
width:100px;
height:100vh;
text-align:left;
position:fixed;
top:0px;
right:-450px;
z-index:2;
transition:0.8s;
}

.hhead{
color:white;
text-align:center;
margin-top:80px;
font-size:1.4rem;
}

.hpara{
color:white;
text-align:center;
margin-top:10px;
font-size:1.1rem;
}

.chead{
margin-top:30px;
font-size:24px;
}
.container{
display:block;
}
 .card{
margin:auto;
margin-top:20px;
padding:60px;
width:60vw;
}

.card h2{
font-size:22px;
}
.card p{
font-size:16px;
margin-top:8px;
}

.col p{
font-size:16px;
text-align:left;
}
.footer-col {
width:30%;
margin-bottom:30px;
margin-left:110px;
}


.fcont{
width:60%;; 
margin:30px auto 30px;
}

.col{
flex:100%;
max-width:90%;
}


.main{
display:block;
}

.about img{
margin:0 12px 40px 50px;

}

.contact{
padding:2px;
}

.cont-container{
flex-direction:column;
}

.cont-container .contactinfo{
margin-bottom:40px;
}

.cont-container .contactinfo , .contactform{
width:80%;
}



}