html, body {
width:100%;
top:0;
margin: 0;
color:#1b1f10;
font-size: 16px;
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
}
/* HEADER */
.header {
height: auto;
background-color: #9fc0b7;
color: #fff;
padding: 10px 0;
}
.header-phone {
background-color: #191e08;
padding: 5px 10px;
width: 150px;
border-radius:20px;
font-size: 18px;
}
.header-text {
font-size: 10px;
}
.iconheader {
width: 2rem;
}
.hp-bg-header-left {
z-index: 10;
}
.hp-bg-header-logo img {
width: 100px;
}
.hp-bg-header-logo {
z-index: 10;
left: 10px;
top: 90px;
}
.hp-bg-header-left-1 {
z-index: 200;
top:150px;
left: -270px;
pointer-events: none;
}
.hp-bg-header-right {
z-index: 10;
right:0;
}
/* SECTION 1 */
#section-1 {
background-color: #e3e3e3;
}
.section1-cont {
margin-top: 70px;
}
.section-1-class {
min-height: 460px;
height: 460px;
}
.header-ul {
margin-left: -30px;
}
.header-li {
list-style: none;
display: block;
margin-right: 10px;
}
.section1-text-1 {
color: #1c7058;
font-size: 1rem;
font-weight: 700;
line-height: 1.2rem;
}
.section1-text-2 {
color: #1b1f10;
font-size: 1.3rem;
font-weight: 900;
letter-spacing: 2px;
line-height: 2.1rem;
}
.section1-text-3 {
color: #8fa09b;
font-size: 0.8rem;
font-weight: 400;
}
.icon-cat {
width: 45px;
}
/* SECTION 2 */
#section-2 {
z-index: 20;
background-color: #fff;
}
.bg-section2 {
margin-top: 400px;
}
.hp-sect-2-box {
margin-top: -100px;
}
.box-quote {
/*background-color: #363f3d;*/
/*background: linear-gradient(90deg, #363f3d 20px, transparent 1%) center, linear-gradient(#363f3d 20px, transparent 1%) center, #303937;
background-size: 25px 25px;*/
background-image: url('../images/bg-dots-1.png');
background-repeat: repeat;
border-radius:5px;
box-shadow: 0 10px 10px 0px #666;
}
.hp-bg-quotes {
bottom: 0;
right: 0;
}
.hp-free-quote {
font-size: 24px;
color: #fff;
line-height: 27px;
}
.hp-input-text {
background-color: #d0dcd8;
border-radius: 50px;
height: 40px;
font-size: 12px;
color: #97aba9;
border: none;
padding: 10px 20px;
}
.hp-input-btn {
background-color: #1c7b61;
border-radius: 50px;
height: 40px;
font-size: 16px;
color: #fff;
border: none;
}
.hp-sect2-head {
border-top: 5px solid #d0dcd8;
}
.hp-highly {
color: #1b1c08;
font-size: 32px;
font-weight: 700;
line-height: 34px;
}
.hp-meticulous {
color:#657473;
font-size:16px;
line-height: 18px;
font-weight:700;
}
.hp-sect-2-content {
color:#7c8886;
font-size:14px;
line-height: 20px;
font-weight:400;
}
.hp-sect2-head {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
/* section-3 */
#section-3 {
background-color: #e3efec;
}
.hp-box-we-offer {
background-color: #1c7b61;
margin-top: 78px;
height: auto;
padding: 20px 20px;
border-radius: 30px;
}
.hp-high-attention {
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 16px;
}
.hp-high-weoffer {
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 21px;
}
a .hp-input-give-us-call {
border-radius:30px;
border:none;
font-size:14px;
font-weight: 700;
margin: 3px 10px;
text-decoration: none;
}
a, a:hover {
text-decoration: none;
}
a .hp-input-give-us-call:hover {
background-color: #ddd;
}
.hp-wetake {
color:#1b1c08;
font-size:28px;
font-weight:700;
line-height: 30px;
}
.hp-service-box {
background-color: #d7e3e0;
padding: 20px;
width:100%;
border-radius: 5px;
color: #000;
}
.hp-service-box:hover {
background-color: #000;
padding: 20px;
width:100%;
border-radius: 5px;
color: #fff;
}
.hp-service-box-content {
font-size:11px;
margin-top:5px;
line-height: 14px;
}
/* Section 4 */
.hp-we-enjoy {
color:#1c7b61;
font-size: 32px;
font-weight: 900;
line-height: 36px;
}
/* Section 5 */
#section-5 {
background-color: #1c7b61;
}
.hp-see-what {
font-size: 26px;
color:#fff;
font-weight: 700;
}
/* section 6 */
#section-6 {
background-color: #e3efec;
}
.hp-testimoni-date {
background-color: #97aaa9;
border-radius: 30px;
color:#fff;
font-size: 12px;
padding:5px 10px;
width: 100px;
}
.hp-testimoni-name {
font-weight: 700;
}
.slick-dots {
text-align: left;
}
.slider-testimoni .slick-dots button {
cursor: pointer;
outline: 0;
display: inline-block;
width: 0.8rem;
height: 0.8rem;
padding: 0;
border: 2px solid #1c7b61;
border-radius: 100%;
background-color: #fff;
text-indent: -9999px;
}
.slider-testimoni .slick-dots li.slick-active button {
background-color: #1c7b61;
}
.hp-persons {
margin-top: -50px;
}
.slider-gallery img {
width:300px;
opacity: 0.3;
width: 100%;
}
.slider-gallery {
width: 100%;
}
.slider-gallery .slick-current img{
opacity: 1;
}
.slider-gallery .NextArrow {
position:absolute;
top:50%;
right:20px;
width:45px;
height:45px;
border:0 none;
margin-top:-22.5px;
text-align:center;
font:40px/45px FontAwesome;
color:#000;
z-index:5;
outline: 0;
cursor: pointer;
background-color: transparent;
}
.slider-gallery .NextArrow:before {
content:'\f105';
}
.slider-gallery .PrevArrow{
position:absolute;
top:50%;
left:50px;
width:45px;
height:45px;
border:0 none;
margin-top:-22.5px;
text-align:center;
font:40px/45px FontAwesome;
color:#000;
z-index:5;
outline: 0;
cursor: pointer;
background-color: transparent;
}
.slider-gallery .PrevArrow:before {
content: '\f104';
}
/* Section 7 */
#section-7 {
background-image: url('../images/bg-dots-2.png');
background-repeat: repeat;
}
.hp-let-us {
color: #1b1c08;
font-size: 28px;
font-weight: 900;
line-height: 32px;
}
.hp-call-us {
font-size: 14px;
background-color: #1c7b61;
padding: 10px 20px;
border-radius: 30px;
line-height: 20px;
text-decoration: none;
cursor: pointer;
}
.hp-call-us a {
text-decoration: none;
color:#fff;
}
.hp-call-us a:hover {
background-color: #156851;
}
.hp-send-us {
color:#1c7b61;
font-size: 14px;
background-color: #fff;
border:2px solid #1c7b61;
padding: 10px 20px;
border-radius: 30px;
line-height: 20px;
cursor: pointer;
}
.hp-send-us:hover {
background-color: #ddd;
}
/* Footer */
.footer1 {
background-color: #000;
color:#fff;
font-size: 12px;
font-weight: 300;
}
hp-footer-130 {
border: none;
}
.hp-footer-11, .hp-footer-12 {
border-right:1px solid #fff;
}
.hp-footer-logo img {
max-width: 150px;
}
.hp-footer-logo {
left: 100px;
top: -70px;
}
.footer2 {
color:#7c8886;
font-size: 10px;
font-weight: 300;
}
.hp-footer-21 {
border-right:none;
vertical-align: middle;
}
@media screen and (min-width: 992px) {
#section-1 {
background-image: url('../images/bg-header.jpg');
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
background-color: transparent;
}
.header {
height: 75px;
}
.header-text {
font-size: 13px;
}
.section1-text-1 {
color: #1c7058;
font-size: 1.5rem;
font-weight:700;
}
.section1-text-2 {
color: #1b1f10;
font-size: 2.6rem;
font-weight:900;
letter-spacing: 2px;
}
.section1-text-3 {
color: #8fa09b;
font-size: 0.9rem;
font-weight:400;
}
.header-li {
list-style: none;
display: inline;
margin-right: auto;
}
.hp-bg-header-logo {
left: 12%;
top:15px;
}
.hp-bg-header-logo img {
width: 75%;
}
.hp-bg-header-left-1 {
left: 0;
}
.hp-meticulous {
color:#657473;
font-size:20px;
font-weight:700;
}
.hp-highly {
color:#1b1c08;
font-size:36px;
font-weight:700;
}
.hp-sect-2-content {
color:#7c8886;
font-size:14px;
line-height: 20px;
font-weight:400;
}
.hp-box-we-offer {
background-color: #1c7b61;
margin-top: 78px;
height: 85px;
padding: 20px 20px;
border-radius: 0 85px 85px 0;
}
.hp-free-quote {
font-size: 30px;
color: #fff;
}
.hp-input-text {
background-color: #d0dcd8;
border-radius:50px;
height: 50px;
font-size: 14px;
color:#97aba9;
border: none;
padding: 10px 20px;
}
.hp-input-btn{
background-color: #1c7b61;
border-radius:50px;
height: 50px;
font-size: 18px;
color:#fff;
border: none;
}
.bg-section2 {
margin-top:250px;
}
.bg-section2-1 {
margin-top: 300px;
right: 0;
}
.bg-section2-1 img {
width: 75% !important;
}
.hp-high-attention {
font-size:14px;
font-weight: 400;
}
.hp-high-weoffer {
font-size:18px;
font-weight: 700;
}
.hp-let-us {
color:#1b1c08;
font-size: 32px;
font-weight: 900;
}
.hp-footer-130 {
border-right:1px solid #fff;
}
.hp-footer-21 {
border-right:1px solid #7c8886;
vertical-align: middle;
}
}
@media screen and (min-width: 1900px) {
.header {
height: 90px;
}
.header-text {
font-size: 16px;
}
.header-phone {
background-color: #191e08;
padding: 5px 10px;
width: 200px;
border-radius: 20px;
font-size: 24px;
}
.hp-bg-header-logo img {
width: 90%;
}
.icon-cat {
width: 75px;
margin-bottom: 30px;
}
.section1-text-1 {
color: #1c7058;
font-size: 2.3rem;
font-weight: 700;
}
.section1-text-2 {
color: #1b1f10;
font-size: 3.7rem;
font-weight: 900;
letter-spacing: 2px;
margin-top: 40px;
margin-bottom: 40px !important;
}
.section1-text-3 {
color: #8fa09b;
font-size: 1.3rem;
font-weight: 400;
}
.section-1-class {
min-height: 550px;
height: 550px;
}
.hp-bg-header-left img {
width: 80%;
}
.hp-bg-header-right img {
width: 80%;
}
.box-quote {
width: 100% !important;
border-radius: 10px;
}
.hp-bg-quotes img {
width: 90%;
}
.hp-bg-header-left-1 {
z-index: 200;
top: 90px;
}
.hp-bg-header-left-1 img {
width: 95%;
}
.hp-free-quote {
font-size: 45px;
color: #fff;
margin-bottom: 24px !important;
line-height: 50px;
}
.hp-input-text {
height: 60px;
font-size: 18px;
padding: 10px 20px;
margin-bottom: 24px;
}
.hp-input-btn {
background-color: #1c7b61;
border-radius: 50px;
height: 60px;
font-size: 26px;
color: #fff;
border: none;
}
.container-1920 {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
}
.container-1920-1 {
width: 80%;
max-width: 80%;
flex: 0 0 80%;
}
.hp-meticulous {
color: #657473;
font-size: 28px;
font-weight: 700;
}
.hp-highly {
color: #1b1c08;
font-size: 46px;
font-weight: 700;
}
.hp-sect-2-content {
font-size: 20px;
line-height: 32px;
}
.img-ngecat {
width: 100%;
}
.hp-high-attention {
font-size: 22px;
line-height: 32px;
}
.hp-high-weoffer {
font-size: 28px;
line-height: 42px;
}
a .hp-input-give-us-call {
font-size: 22px;
margin: 15px 10px;
}
.hp-box-we-offer {
margin-top: 107px;
height: 117px;
}
.hp-wetake {
font-size: 32px;
line-height: 42px;
margin-bottom: 30px !important;
}
.container {
max-width: 1500px;
}
.hp-service-box-content {
font-size: 17px;
margin-top: 20px;
line-height: 28px;
}
.hp-testimoni-name {
font-size: 22px;
}
.hp-testimoni-date {
font-size: 16px;
}
.hp-let-us {
font-size: 36px;
}
.hp-call-us {
font-size: 18px;
padding: 10px 20px;
border-radius: 40px;
line-height: 32px;
letter-spacing: 1.2px;
cursor: pointer;
}
.hp-send-us {
font-size: 18px;
padding: 10px 20px;
border-radius: 40px;
line-height: 32px;
letter-spacing: 1.2px;
cursor: pointer;
}
.hp-footer-logo {
left: 100px;
top: -100px;
}
.hp-footer-logo img {
max-width: 200px;
}
.footer1 {
font-size: 20px;
}
.footer2 {
font-size: 18px;
}
}