html,
body,
img,
fieldset,
abbr,
acronym {
border: 0;
max-width: 100%;
width: auto;
}
body {
padding: 0 !important;
font-family: 'Yanone Kaffeesatz', sans-serif;
}
body a,
body button {
color: #000;
outline: none !important;
text-decoration: none !important;
transition: all ease 0.5s;
}
* {
padding: 0;
margin: 0;
}
.m-100{
margin-bottom: 100px;
}
.sec-btn{
display: inline-block;
padding: 10px 20px;
background-color: #095900;
color: #fff;
border-radius: 10px;
transition: .5s;
border: 1px solid #095900;
text-transform: uppercase;
font-size: 18px;
}
.sec-btn:hover{
background-color: transparent;
color: #095900;
border-radius: 30px;
}
.under{
background-color: #095900;
padding: 10px 15px;
color: #fff;
text-transform: uppercase;
border-radius: 5px;
word-spacing: 2px;
letter-spacing: 2px;
}
.quote-form{
padding: 20px;
text-align: center;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.185);
}
.quote-form h3{
color: #095900;
font-weight: 600;
text-transform: uppercase;
}
.quote-form input,.quote-form textarea{
width: 100%;
border-radius: 5px;
padding: 10px 20px;
font-size: 20px;
margin: 10px 0px;
border: none;
background-color: #d0edcd;
}
p{
font-size: 18px;
font-weight: 600;
}
.slick-prev,.slick-next{
display: none !important;
}
.sticky{
background-color: #fff !important;
position: fixed !important;
top: 0 !important;
left: 0;
width: 100%;
z-index: 999;
}
.sticky .navbar-light .navbar-nav .nav-link{
color: #000 !important;
}
.sticky .navbar-light .navbar-nav .nav-link:hover,.sticky .navbar-light .navbar-nav .active{
color: #095900 !important;
}
/* -------Globle-css-end------- */
header .top-bar{
background-color: #095900;
padding: 10px 0px;
}
.top-bar .top-left ul{
display: flex;
list-style: none;
padding: 0;
margin: 0;
align-items: center;
}
.top-bar .top-left ul li a{
height: 40px;
width: 40px;
background-color: #095900;
transition: .5s;
color: #fff;
display: flex;
transition: .5s;
align-items: center;
justify-content: center;
margin: 0px 4px;
}
.top-bar .top-left ul li a:hover{
background-color: #fff;
color: #095900;
border-radius: 10px;
}
.top-bar .top-right{
display: flex;
align-items: center;
justify-content: flex-end;
}
.top-bar .top-right .phone{
margin-right: 20px;
}
.top-bar .top-right a{
color: #fff;
font-size: 18px;
}
.top-bar .top-right a:hover{
color: #fff;
}
.top-bar .top-right i{
color: #fff;
padding-right: 10px;
}
.top-left span {
font-size: 18px;
color: #fff;
}
.menu{
background-color: rgb(236 243 234 / 40%);
position: absolute;
top: 47px;
width: 100%;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.279);
z-index: 999;
}
.menu .navbar-brand img{
width: 200px;
}
.menu .navbar-nav{
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
}
.menu .navbar-light .navbar-nav .nav-link{
font-size: 18px;
font-weight: 600;
color: #fff;
padding: 0px 20px;
}
.menu .navbar-light .navbar-nav .nav-link:hover,.menu .navbar-light .navbar-nav .active{
color: #095900;
}
.menu .book-now{
padding: 0px 20px;
}
.book-now .sec-btn{
margin-top: 0;
}
/* -------hero-section-start------- */
.hero-slide{
padding: 200px 0px 100px;
background-size: cover !important;
color: #fff;
background-position:center;
}
.hero-slide span{
color: #fff;
}
.hero-slide h2{
font-size: 80px;
font-weight: 600;
margin: 15px 0px;
}
.hero-slide p{
font-size: 23px;
}
.hero-slide .hero-content .sec-btn:hover{
border: 1px solid #fff;
color: #fff;
}
/* ------hero-section-end------ */
/* --------About-Section-Start------- */
.about-section{
padding: 100px 0px;
}
.as-content h2{
margin: 20px 0px;
font-size: 50px;
font-weight: 700;
}
.as-content ul{
padding: 0;
margin: 0;
list-style: none;
}
.as-content ul li{
margin: 10px 0px;
display: flex;
font-size: 18px;
align-items: center;
}
.as-content ul li .icon{
height: 30px;
width: 30px;
background-color: #095900;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.as-content ul li span{
flex: 1;
}
.as-item .as-img{
border-radius: 10px;
margin: 10px 0px;
background-color: #095900;
padding: 5px;
}
.as-item .as-img img{
width: 100%;
border-radius: 10px;
}
/* --------About-Section-End--------- */
/* --------step-section-start--------- */
.step-section{
padding: 100px 0px;
background-image: url(../images/ser-bg.jpg);
background-size: cover;
background-position: center;
position: relative;
color: #fff;
}
.step-section::after{
position: absolute;
top: 30px;
left: 0;
content: '';
height: 100%;
width: 100%;
background-image: url(../images/step-shape.png);
background-position: center;
background-repeat: no-repeat;
}
.step-section .step-head{
margin-bottom: 30px;
text-align: center;
}
.step-section .step-head h2{
font-size: 50px;
font-weight: 600;
}
.step-section .step-box{
margin-top: 20px;
text-align: center;
}
.step-section .step-box h3{
height: 60px;
width: 60px;
border-radius: 10px;
background-color: #fff;
color: #095900;
display: flex;
align-items: center;
justify-content: center;
margin: 10px auto;
}
.step-section .step-box p{
font-size: 20px;
font-weight: 400;
margin-bottom: 0;
}
/* ------Step-Section-End-------- */
/* ------FAQ-section-start------- */
.faq-section{
padding: 100px 0px;
}
.faqs > h2{
font-size: 40px;
font-weight: 600;
margin-top: 20px;
}
.faqs .accordion-header {
margin-bottom: 0px;
margin-top: 20px;
}
.faqs .accordion-button.collapsed {
border-radius: 8px;
background: #ffffff;
box-shadow: 0px 30px 60px 0px #2626262e;
font-size: 18px;
padding: 13px 30px;
position: relative;
color: #161616;
font-weight: 700;
}
.faqs .accordion-button.collapsed .icon {
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: #095900;
width: 50px;
border-radius: 0px 10px 10px 0px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
z-index: 7;
}
.faqs .accordion-button.collapsed .icon .fa-chevron-down {
display: block;
}
.faqs .accordion-button.collapsed .icon .fa-chevron-left {
display: none;
}
.faqs .accordion-body {
padding: 1rem 1.25rem;
box-shadow: 0px 20px 40px 0px #03030324;
border-radius: 8px;
}
.faqs .accordion-item {
background-color: #fff;
border: none;
}
.faqs .accordion-item h4{
margin-bottom: 0;
}
.faqs .accordion-button:not(.collapsed) {
border-radius: 8px;
background: #ffffff;
box-shadow: 0px 30px 60px 0px #2626262e;
font-size: 18px;
padding: 20px 30px;
position: relative;
color: #161616;
font-weight: 700;
}
.faqs .accordion-button:not(.collapsed) .icon {
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: #095900;
width: 50px;
border-radius: 0px 10px 10px 0px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
z-index: 7;
}
.faqs .accordion-button:not(.collapsed) .icon .fa-chevron-down {
display: none;
}
.faqs .accordion-button:not(.collapsed) .icon .fa-chevron-left {
display: block;
}
.faqs .accordion-flush .accordion-collapse {
border-width: 0;
}
/* -------Faq-section-end------- */
/* -------counter-section-start------- */
.counter-section{
margin-bottom: 80px;
}
#counter{
position: relative;
padding: 30px 0px;
background:#095900;
text-align: center;
color: #fff;
border-radius: 20px;
}
#counter .counter-shape{
position:absolute;
bottom: 0;
height: 100%;
right: 0;
}
#counter .counter-shape img{
height: 100%;
}
.counter-section .count-box h2{
font-size: 45px;
font-weight: 600;
margin-bottom: 0;
margin-top: 15px;
}
.counter-section .count-box h2::after{
content: '+';
}
/* -------Service-Section-Start-------- */
.service-section{
padding: 100px 0px;
background-image: url(../images/ser-bg.jpg);
background-size: cover;
background-position: center;
}
.ser-head{
text-align: center;
margin-bottom: 30px;
color: #fff;
}
.ser-head h2{
font-weight: 600;
margin: 20px 0px;
font-size: 50px;
}
.ser-box .ser-img{
width: 100%;
overflow: hidden;
}
.ser-box .ser-img img{
width: 100%;
transition: .5s;
height: 220px;
object-fit: cover;
}
.ser-box:hover .ser-img img{
transform: scale(1.3) rotate(10deg);
}
.ser-box{
background-color: #fff;
position: relative;
text-align: center;
padding: 20px;
border-radius: 20px 0px 20px 0px;
height: 100%;
}
.ser-box h4{
margin-top: 20px;
}
/* -------Service-Section-End---------- */
/* -------testimonial-section-start-------- */
.testimonial-section {
margin-top: 100px;
text-align: center;
}
.tes-slider .tes-box {
display: block;
text-align: center;
border-radius: 0; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.212);
padding: 25px;
background-color: #fff;
position: relative;
margin: 15px;
}
.tes-slider .tes-box::before {
height: 20px;
width: 20px;
background-color: #095900;
position: absolute;
bottom: 0;
transition: .5s;
left: 0;
content: '';
}
.tes-slider .tes-box:hover::after, .tes-slider .tes-box:hover::before {
width: 100%;
height: 100%;
}
.tes-slider .tes-box::after {
height: 20px;
transition: .5s;
width: 20px;
background-color: #095900;
position: absolute;
top: 0;
right: 0;
content: '';
}
.tes-img {
position: relative;
}
.tes-img img {
width: 100px;
border-radius: 10px 10px 0px 10px;
height: 100px;
position: relative;
z-index: 99;
object-fit: cover;
margin: 20px auto;
}
.tes-slider .tes-box:hover .tes-img::after {
z-index: 9;
}
.tes-slider .tes-img::after {
position: absolute;
top: -5px;
left: 45%;
content: '';
width: 110px;
transform: translate(-45%, -5px);
height: 110px;
border-radius: 10px 10px 0px 10px;
background-color: #095900;
}
.tes-slider .tes-box .text h6 {
color: #67b612;
font-size: 24px;
}
.tes-box .text {
position: relative;
z-index: 9;
}
.tes-slider .tes-box:hover .text p,.tes-slider .tes-box:hover h6{
color: #fff;
}
/* -------testimonial-section-end------- */
/* -----cta-section-start------ */
.cta-section{
margin-top: 100px;
position: relative;
background-image: url(../images/cta-bg.webp);
background-size: cover;
background-position: center;
padding: 50px 0px 30px;
overflow-x: hidden;
}
.cta-section::after{
height: 100%;
background-color: #095900;
position: absolute;
top: 0;
right: -100px;
width: 70%;
transform: skew(-30deg);
content: '';
}
.cta-section .cta-content{
position: relative;
color: #fff;
z-index: 9;
}
.cta-content h2{
font-size: 40px;
}
.cta-content h3 a{
color: #fff;
}
.cta-content p{
font-size: 22px;
}
.cta-content .sec-btn{
background-color: #fff;
color: #095900;
border: 1px solid #fff;
}
.cta-content .sec-btn:hover{
background-color: transparent;
color: #fff;
}
/* -----cta-section-end-------- */
/* -------footer-section-start-------- */
.footer-section {
padding-top: 60px;
background: linear-gradient(#09590057,#09590057),url(../images/footer-bg.png);
background-size: cover;
background-position: center;
}
.f-box .f-logo {
margin-bottom: 20px;
}
.f-box .f-logo img{
width: 230px;
}
.social ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
align-items: center;
}
.social ul li a {
height: 40px;
width: 40px;
background-color: #095900;
display: flex;
border: 1px solid #095900;
align-items: center;
justify-content: center;
border-radius: 4px;
color: #fff;
}
.social ul li {
margin: 10px 4px;
}
.social ul li a:hover {
color: #095900;
background-color: transparent;
}
.f-box .f-title h4 {
margin-bottom: 23px;
font-weight: 600;
color: #1A2B48;
}
.f-box ul {
padding: 0;
margin: 0;
list-style: none;
}
.f-box ul li {
margin: 8px 0px;
}
.f-box ul li a:hover{
color:#095900;
}
.f-box .con-info {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.f-box .con-info p{
flex: 1;
font-size: 16px;
color: #212529;
margin-bottom:0px;
font-weight: normal;
}
.f-box .con-info a:hover{
color:#095900;
}
.f-box .con-info .icon {
height: 40px;
width: 40px;
border-radius: 100%;
background-color: #095900;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
}
.f-box .con-info address {
margin-bottom: 0;
flex: 1;
}
.copy-right {
background-color: #095900;
text-align: center;
margin-top: 50px;
padding: 20px 0px;
}
.copy-right p {
margin-bottom: 0;
color: #fff;
}
.social ul li{
margin: 10px 4px;
}
/* -------About-Page-Style------ */
.banner-section{
padding: 140px 0px 90px;
background-image:linear-gradient(rgba(0, 0, 0, 0.507),rgba(0, 0, 0, 0.507)),url(../images/hero2.webp);
background-size: cover;
background-position: center;
}
.banner-section h2{
font-size: 60px;
font-weight: 600;
color: #fff;
text-align: center;
}
.banner-section ul{
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
.banner-section ul li a{
padding: 0px 5px;
color: #fff;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
}
/* -------banner-section-end------ */
/* ------quote-section-start------- */
.quote-section{
padding-top: 100px;
}
.about-section .as-footer{
margin-top: 30px;
}
.as-footer .as-box{
background:url(../images/step-bg.jpg);
background-size: cover;
background-position: center;
color: #fff;
margin-top: 30px;
text-align: center;
padding: 30px;
border-radius: 20px 0px 20px 0px ;
}
.quote-section .quote-form{
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.243),0px -10px -20px 0px rgba(0, 0, 0, 0.243);
}
/* ------Contact-Page-Style------- */
.contact-section{
padding: 100px 0px;
}
.contact-box {
background-color: #fff;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.246);
border-radius: 10px;
padding: 20px;
position: relative;
display: flex;
align-items: center;
margin-bottom: 30px;
}
.contact-box::after {
height: 100%;
width: 100%;
background-color: #095900;
border-radius: 10px;
position: absolute;
transition: .5s;
top: 0;
left: 0;
content: '';
transform: scale(0);
}
.contact-box:hover:after {
transform: scale(1);
}
.contact-box:hover .icon {
background-color: #fff;
color: #095900;
}
.contact-box .text {
flex: 1;
margin-left: 20px;
}
.contact-box:hover a, .contact-box:hover h4 {
color: #fff;
}
.contact-box a, .contact-box h4 {
position: relative;
z-index: 4;
}
.contact-box:hover address {
color: #fff;
}
.contact-box address {
margin-bottom: 0;
position: relative;
z-index: 4;
}
.contact-box .icon {
height: 70px;
width: 70px;
border-radius: 100%;
color: #fff;
font-size: 30px;
position: relative;
transition: .5s;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
background-color: #095900;
margin: 0px auto 20px;
box-shadow: 0px 5px 10px 0px #0959002e;
}
.contact-box:hover .icon {
background-color: #fff;
color: #095900;
}
/* ------map-section------- */
.map-section .map{
height: 500px;
}
/* -------Services-Page-Style------ */
.ser-two{
background-image: none;
}
.ser-two .ser-box{
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.218);
}
.ser-two .all{
margin-top: 30px;
text-align: center;
}
.ser-two .see-all2{
display: none;
}
.quote-section .quote-img{
margin-right: -100px;
height: 100%;
margin-top: -100px;
}
.quote-section .quote-img img{
width: 100%;
height: 100%;
object-fit: cover;
}
/* --------project-secction---------- */
.project-section{
padding: 100px 0px;
text-align: center;
}
.pro-head h2{
font-size: 50px;
margin-top: 20px;
}
.project-section .team-box {
margin-top: 20px;
position: relative;
}
.project-section .team-box img {
border-radius: 10px;
width: 100%;
height: 260px;
object-fit: cover;
}
.project-section ul li a {
padding: 8px 15px;
font-size: 20px;
color: #fff;
border: 2px solid #095900;
background: #095900;
border-radius: 8px;
}
.project-section ul li {
margin: 0px 4px;
}
.project-section ul li a:hover {
color: #095900;
border-radius: 30px;
background-color: transparent;
}
.project-section #tabs-nav {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 30px 0px;
list-style: none;
}
.project-section .team-layer {
position: absolute;
top: 0;
left: 0;
background-color: #0959008d;
font-size: 25px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
transform: scale(0);
border-radius: 10px;
z-index: 88;
transition: .5s;
}
.project-section ul li .mixitup-control-active {
color: #095900;
border-radius: 30px;
background-color: transparent;
}
.project-section .team-box:hover .team-layer {
transform: scale(1);
}
.project-section .team-layer a {
color: #fff;
}
.project-section .team-layer p{
font-size: 25px;
}
/* --------Responsive--------- */
@media screen and (max-width:1024px) {
.hero-slide h2{
font-size: 60px;
}
.hero-slide {
padding: 140px 0px 80px;
}
.step-section .step-head h2,.pro-head h2{
font-size: 40px;
}
.step-section,.project-section,.faq-section,.about-section,.service-section,.contact-section{
padding: 50px 0px;
}
.cta-section .cta-content {
padding-left: 50px;
}
}
@media screen and (max-width:992px) {
.menu .navbar-light .navbar-toggler-icon {
background-image: none;
color: #fff;
font-size: 23px;
display: flex;
align-items: center;
justify-content: center;
}
.sticky .navbar-light .navbar-toggler-icon{
color: #095900;
}
.menu .navbar-light .navbar-toggler {
color: rgba(0, 0, 0, 0.55);
border-color: #fff;
}
.sticky .navbar-light .navbar-toggler {
color: rgba(0, 0, 0, 0.55);
border-color: #095900;
}
.menu .navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: none;
}
}
@media screen and (max-width:768px) {
.hero-content,.faq-img{
display: none;
}
.count-box .icon img{
width: 50px;
}
.step-section::after {
background-size: contain;
}
.step-section .step-box p {
font-size: 16px;
}
.cta-section::after {
width: 80%;
}
.f-box{
margin-top: 20px;
}
.project-section #tabs-nav{
flex-wrap: wrap;
margin: 10px 0px;
}
.project-section #tabs-nav li{
margin-top: 20px;
}
.quote-section .quote-img {
margin-right: 0px;
margin-top: -100px;
}
.top-bar .top-right a {
color: #fff;
font-size: 15px;
}
}
@media screen and (max-width:570px) {
.hero-slide{
padding: 90px 0px 30px;
}
.cta-content h2,.counter-section .count-box h2,.step-section .step-head h2, .pro-head h2,.ser-head h2,.as-content h2{
font-size: 30px;
}
.cta-content p {
font-size: 18px;
margin-bottom: 0;
}
.cta-section::after {
width: 95%;
}
.cta-section .cta-content {
padding-left: 200px;
}
.contact-box {
flex-direction: column;
text-align: center;
}
.step-section::after{
display: none;
}
.menu {
top: auto;
}
.quote-section .quote-img {
margin-top: 0px;
}
.top-bar .top-left ul,.top-bar .top-right{
justify-content: start;
margin-bottom: 10px;
}
.top-bar .top-right{
margin-bottom:0px;
}
.menu .navbar-brand img {
width: 150px;
}
.quote-section {
padding-top: 0px;
}
.footer-section {
padding-top: 20px;
}
.m-100 {
margin-bottom: 50px;
}
.copy-right {
margin-top: 20px;
}
}
@media screen and (max-width:450px) {
.cta-section::after {
right: 0px;
width: 100%;
transform: skew(0deg);
}
.cta-section .cta-content {
padding-left: 0px;
text-align: center;
}
.top-bar .top-left ul, .top-bar .top-right {
flex-wrap: wrap;
}
}
@media screen and (max-width:375px) {
.menu{
top: 130px;
}
}
.bx1 {
background: #f8f8f8;
box-shadow: 0 0 10px rgb(204 204 204 / 67%);
border: 1px solid #ccc;
padding: 20px;
margin-top: 60px;
margin-bottom: 50px;
}
.ser-box1 .ser-img img {
width: 100%;
transition: .5s;
height:350px;
object-fit: cover;
}
.bx1 p{
font-size: 20px;
font-weight: 600;
letter-spacing:.5px;
}