html{
width: 100%;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
header{
width: 100%;
height: 40rem;
line-height: 4rem;
text-align: center;
background: url(img/h_img.jpg);
background-size: cover;
color: #fff;
}
.logo-img {
padding-top: 7rem;
height: 6rem;
width: 6rem;
}
.header-txt{
padding-top: 1rem;
font-size: 2rem;
}
.bottom-header-txt{
font-size: .7rem;
}
.mou-se {
padding-top: 8rem;
height: 2rem;
width: 1.4rem;
}
h2{
text-align: center;
}
.about-us{
text-align: center;
background-color: rgb(255, 255, 255);
color: rgb(61, 19, 19);
height: 14rem;
line-height: 2.2rem;
}
.ser-vice{
text-align: center;
background: url(img/s_image.jpg);
color: rgb(255, 255, 255);
height: 24rem;
line-height: 3rem;
}
.service-h{
padding-top: 4rem;
}
.what-we-do{
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
height: 15rem;
}
.row{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.first-col{
background-color: rgb(255, 255, 255);
}
.first-col:hover{
cursor: pointer;
}
.whatwedo-img{
height: 4.5rem;
width: 4.5rem;
}
.row .column{
flex: 20%;
width: auto;
height: 10rem;
text-align: center;
}
p{
font-size: 1rem;
}
h3{
margin-bottom: 0;
font-size: 1rem;
}
.portfolio{
height: 23rem;
background-color: rgb(255, 255, 255);
text-align: center;
color: rgb(0, 0, 0);
}
.container{
margin-left: 11rem;
width: 72%;
align-self: center;
}
.my-col{
text-align: center;
}
.popup{
margin-left: 2.4rem;
font-weight: bold;
margin-top: 4rem;
position: absolute;
height: auto;
width: 9rem;
border-radius: 2px;
display: none;
text-align: center;
color: rgb(49, 2, 2);
background-color: #fff;
}
img{
max-height: 12rem;
width: 12rem;
padding-bottom: 1rem;
cursor: pointer;
}
.contact-us{
background: url(img/c_image.jpg);
left: 2rem;
height: 27rem;
line-height: 3rem;
color: #fff;
}
form{
margin-left: 10rem;
}
.name{
height: 2rem;
width: 36%;
border-radius: 6px;
background: none;
}
.email{
height: 2rem;
width:36% ;
border-radius: 6px;
background: none;
}
.message{
height: 10rem;
width: 75%;
border-radius: 6px;
background: none;
}
::placeholder{
color: #fff;
}
footer{
background-color: rgb(255, 255, 255);
}
ul{
text-decoration: none;
display: inline;
word-spacing: 1.3rem;
width: 100%;
}
li{
display: inline;
color: rgb(0, 0, 0);
}
.socials{
padding: 2rem;
text-align: center;
}
.socials-img{
height: 2rem;
width: 2rem;
}
.writing-s{
padding: 0;
margin-top: 3rem;
font-size: .8rem;
color: black;
text-align: center;
}
@media all and (max-width :415px) {
.about-us{
height: 16rem;
line-height: 1.2rem;
}
.ser-vice{
height: 24rem;
line-height: 1.5rem;
}
.service-h{
padding-top: 4rem;
}
.what-we-do{
height: 39rem;
}
.row{
display: inline;
left: 2rem;
}
.whatwedo-img{
height: 6rem;
width: 10rem;
}
.row .column{
display: inline;
}
#colOne{
position: absolute;
left: 7rem;
margin-top: 2rem;
}
#colTwo{
position: absolute;
left: 7rem;
margin-top: 15rem;
}
#colThree{
position: absolute;
left: 6.5rem;
margin-top: 26rem;
}
.portfolio{
height: 40rem;
}
.popup{
margin-left: 0rem;
margin-top: 2rem;
}
#portfolioImgOne{
position: absolute;
left: 3rem;
}
#portfolioImgTwo{
position: absolute;
left: 13rem;
}
#portfolioImgThree{
position: absolute;
left: 3rem;
margin-top: 9rem;
}
#portfolioImgFour{
position: absolute;
left: 13rem;
margin-top: 9rem;
}
#portfolioImgFive{
position: absolute;
left: 3rem;
margin-top: 18rem;
}
#portfolioImgSix{
position: absolute;
left: 13rem;
margin-top: 18rem;
}
#portfolioImgSeven{
position: absolute;
left: 3rem;
margin-top: 27rem;
}
#portfolioImgEight{
position: absolute;
left: 13rem;
margin-top: 27rem;
}
img{
max-height: 7rem;
width: 8rem;
}
form{
margin-left: 1rem;
}
ul{
word-spacing: 0rem;
}
.socials{
padding-top: 3rem;
text-align: center;
}
.socials-img{
height: 1rem;
width: 1rem;
}
}
@media (min-width:539px) and (max-width: 541px) {
.about-us{
height: 16rem;
line-height: 1.2rem;
}
.ser-vice{
height: 24rem;
line-height: 1.5rem;
}
.service-h{
padding-top: 4rem;
}
.what-we-do{
height: 15rem;
}
#colOne{
position: absolute;
left: 2rem;
}
#colTwo{
position: absolute;
left: 13rem;
}
#colThree{
position: absolute;
left: 23rem;
}
.portfolio{
height: 50rem;
width: 100%;
}
img{
max-height: 10rem;
width: 12rem;
}
.popup{
margin-left: 1.6rem;
margin-top: 3rem;
}
#portfolioImgOne{
position: absolute;
left: 3rem;
}
#portfolioImgTwo{
position: absolute;
left: 19rem;
}
#portfolioImgThree{
position: absolute;
left: 3rem;
margin-top: 12rem;
}
#portfolioImgFour{
position: absolute;
left: 19rem;
margin-top: 12rem;
}
#portfolioImgFive{
position: absolute;
left: 3rem;
margin-top: 26rem;
}
#portfolioImgSix{
position: absolute;
left: 19rem;
margin-top: 26rem;
}
#portfolioImgSeven{
position: absolute;
left: 3rem;
margin-top: 38rem;
}
#portfolioImgEight{
position: absolute;
left: 19rem;
margin-top: 38rem;
}
form{
margin-left: 1rem;
}
ul{
word-spacing: .5rem;
}
.socials{
padding-top: 3rem;
text-align: center;
}
.socials-img{
height: 1rem;
width: 1rem;
}
}
@media (min-width:767px) and (max-width: 769px) {
.about-us{
height: 16rem;
line-height: 1.2rem;
}
.ser-vice{
height: 24rem;
line-height: 1.5rem;
}
.service-h{
padding-top: 4rem;
}
.what-we-do{
height: 15rem;
}
#colOne{
position: absolute;
left: 5rem;
}
#colTwo{
position: absolute;
left: 21rem;
}
#colThree{
position: absolute;
left: 35rem;
}
.portfolio{
height: 72rem;
width: 100%;
}
img{
max-height: 15rem;
width: 17rem;
}
.popup{
margin-left: 4rem;
margin-top: 5rem;
}
#portfolioImgOne{
position: absolute;
left: 3rem;
}
#portfolioImgTwo{
position: absolute;
left: 30rem;
}
#portfolioImgThree{
position: absolute;
left: 3rem;
margin-top: 18rem;
}
#portfolioImgFour{
position: absolute;
left: 30rem;
margin-top: 18rem;
}
#portfolioImgFive{
position: absolute;
left: 3rem;
margin-top: 36rem;
}
#portfolioImgSix{
position: absolute;
left: 30rem;
margin-top: 36rem;
}
#portfolioImgSeven{
position: absolute;
left: 3rem;
margin-top: 54rem;
}
#portfolioImgEight{
position: absolute;
left: 30rem;
margin-top: 54rem;
}
form{
margin-left: 1rem;
}
}
@media (min-width:770px) and (max-width :1024px) {
.portfolio{
height: 30rem;
}
img{
max-height: 10rem;
width: 10rem;
}
.popup{
margin-left: 1.3rem;
margin-top: 2.4rem;
}
}