@charset "utf-8";
body {font-family: Georgia, serif;
    margin: 0;
    padding: 0;
	}

header {
	    background-color: #7fad8b;
        color: #fff;
	    text-align: center;
}

.header img{
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
}

.first {
	    background-color: #f7f7f7;
		   text-align: center;
		     height: 500px;
}

.hero {
    text-align: center;
    padding-bottom: 2em;
}

.hero h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 24px;
    margin-bottom: 40px;
}

.hero button {
    background-color: #ff9900;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
}

.hero button:hover {
    background-color: #ffcc00;
}

.about {
    padding: 20px;
    background-color: #f7f7f7;
	text-align: center;
    padding-bottom: 2em;


}

.about h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.about p {
    font-size: 18px;
    margin-bottom: 20px;
					margin-left: 20%;
		margin-right: 20%;
}

.about ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about li {
    margin-bottom: 10px;
}


.about img {
	max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}

.services {
    padding: 20px;
    background-color: #fff;
	text-align: center;
    padding-bottom: 2em;

}

.services h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.services p {
					margin-left: 20%;
		margin-right: 20%;
}

.services li {
    margin-bottom: 20px;
}

.services img {
	max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}

.contact {
    padding: 20px;
    background-color: #f7f7f7;
	text-align: center;
    padding-bottom: 2em;

}

.contact h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.contact p {
    font-size: 18px;
    margin-bottom: 20px;
}

.contact iframe {
    width: 100%;
    height: 300px;
    border: none;
    margin-bottom: 20px;
}

.contact p {
    font-size: 18px;
    margin-bottom: 10px;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
    clear: both;
}

/* Responsive design */

@media only screen and (max-width: 768px) {
    body {
        padding: 12px;
    }
    .hero {
     /*   height: 50vh;  */
    }
    .about img {
        height: 150px;
    }

    .services img {
        height: 100px;
    }
    .contact iframe {
        height: 200px;
    }
}

@media only screen and (max-width: 480px) {
	.about p {
					margin-left: 0%;
		margin-right: 0%;
	}
	
	.services p {
					margin-left: 0%;
		margin-right: 0%;
	}
}
/* CSS Document */