html {
overflow-y: scroll;
height: 100%;
}
body {
font-family: 'Poppins', sans-serif;
/* font-family: 'Open Sans', sans-serif; */
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-size:14px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
button, input, select, textarea, label {
/*Probably Helvetica for Linux/Mac Systems And Arial for Windows PC*/
font-family: 'Poppins', sans-serif;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after { /* Safari Reset as Safari does not recognise quotes property */
content: '';
content: none;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted #000;
cursor: help;
}
ins {
background-color: #fcd700;
color: #000;
text-decoration: none;
}
mark {
background-color: #fcd700;
color: #000;
font-style: italic;
font-weight: bold;
}
p {
margin: 0;
line-height: 25px;
font-size: 16px;
color: #111;
padding:5px 0;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
}
a:hover {
color: ;
}
a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: 0 none;
}
img {
max-width: 100%;
border: none;
}
del {
text-decoration: line-through;
color: #ed1c24;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
.clickable, input[type=button], input[type=submit], button {
cursor: pointer; /* hand cursor on clickable elements */
}
button, input, select, textarea {
margin: 0; /* Webkit browsers add a 2px margin outside the chrome of form elements */
}
::placeholder {
color:#333333;
}
button { /* make buttons play nice in IE */
width: auto;
overflow: visible;
}
table {
font-size: inherit;
border-collapse: collapse;
border-spacing: 0;
}
th {
font-weight: bold;
vertical-align: bottom;
}
td {
font-weight: normal;
}
td, td img {
vertical-align: top;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
dd {
margin: 0 0 0 40px;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
.content ul, .content ol {
margin: 1em 0;
padding: 0 0 0 40px;
}
nav ul, nav ol {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
color:#111;
font-weight: 600;
margin-bottom:10px;
}
h1 {
font-size: 47px;
}
h2 {
font-size: 38px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
.container {
margin: 0 auto;
width: 1170px;
}
/*** header ***/
.top-bar {
width: 100%;
float: left;
background-color: #1a1919;
}
.top-bar-now {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.top-bar-contact-info ul li {
float: left;
margin-right: 50px;
}
.top-bar-contact-info ul li a{
color:#fff;
font-size:13px;
transition:0.5s;
}
.top-bar-contact-info ul li a:hover{
color:#c6d02e;
}
.top-bar-contact-info ul li a span {
margin-right: 10px;
font-size: 16px;
vertical-align: middle;
}
.make-an-appointment a {
color: #111;
background-color: #c6d02e;
padding: 10px 23px;
display: inline-block;
font-size: 14px;
text-transform: uppercase;
transition:0.5s;
}
.make-an-appointment a:hover {
background-color: #fff;
}
.header {
width: 100%;
float: left;
background-color: rgba(0, 0, 0, 0.55);
padding:10px 0;
position: absolute;
top: 41px;
z-index: 9;
}
.header-now {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo a img {
float: left;
}
.mynav ul li {
float: left;
}
.mynav ul li a {
float: left;
color: #fff;
text-transform: uppercase;
font-weight: 400;
margin: 0 30px;
font-size: 18px;
transition:0.5s;
}
.mynav ul li a:hover, .mynav ul li a:focus, .mynav ul li.active a {
color: #c6d02e;
}
.mobile-menu {
display:none;
}
/*** header end ***/
/*** banner ***/
.banner {
width: 100%;
float: left;
position: relative;
height: 780px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.banner-now {
width: 100%;
display: table;
height: 100%;
}
.banner-cont {
width: 100%;
height: 100%;
display: table-cell;
padding: 0 90px;
vertical-align: middle;
}
.banner-text {
width: 60%;
float: left;
opacity: 0.7;
background-color: black;
}
.banner-text h2 {
color: #fff;
font-size: 62px;
font-weight: 500;
line-height: normal;
margin-bottom: 0;
}
.banner-text h1 {
font-size: 41px;
text-transform: uppercase;
line-height: 63px;
font-weight: 600;
color: #c6d02e;
/* margin-bottom: 24px; */
}
.banner-text p {
font-size: 20px;
color: #fff;
}
.contact-btn a {
color: #000;
background-color: #c6d02e;
margin-top: 38px;
border-radius: 50px;
padding: 15px 48px;
float: left;
font-size: 20px;
font-weight: 400;
transition: 0.5s;
text-transform: capitalize;
}
.contact-btn a:hover {
background-color: #fff;
}
/*** inner-banner ***/
.banner.inner-banner {
height: 476px;
}
.inner-banner .banner-cont {
padding: 0 ;
}
.inner-banner .banner-text {
width: 100%;
text-align: center;
}
/*** inner-banner end ***/
/*** banner end ***/
/*** about-jp-sec ***/
.about-jp-sec {
width: 100%;
float: left;
padding: 90px 0;
}
.about-left {
width: 60%;
float: left;
}
.about-right {
width: 36%;
float: right;
}
.about-left .title {
margin-bottom:13px;
}
.title {
width: 100%;
float: left;
margin-bottom:45px;
}
.title h2 {
text-transform: uppercase;
margin-bottom:0;
font-weight: 700;
}
.title h2 span {
color: #c6d02e;
}
.read-more-btn a {
color: #000;
background-color: #c6d02e;
margin-top: 38px;
border-radius: 50px;
padding: 12px 35px;
float: left;
font-size: 16px;
font-weight: 400;
transition: 0.5s;
text-transform: capitalize;
}
.read-more-btn a:hover {
background-color: #fdc236;
}
/*** about-jp-sec end ***/
/*** our-services ***/
.our-services {
width: 100%;
float: left;
padding: 90px 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.our-services .title {
text-align: center;
}
.our-services .title h2{
color:#fff;
}
.our-services-sec {
width: 100%;
float: left;
margin-top: 25px;
}
.our-services-sec ul {
width: 100%;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 30px;
}
.our-services-sec ul li img {
width: 100%;
float: left;
}
.our-services-sec ul li .contbox {
width: 100%;
float: left;
background-color:#fff;
padding:20px 15px;
}
.our-services-sec ul li .contbox p {
font-size: 15px;
}
.our-services-sec ul li .read-more-btn a {
margin-top: 15px;
padding: 5px 17px;
font-size: 14px;
}
/*** our-services end ***/
/*** our-gallery ***/
.our-gallery {
width: 100%;
float: left;
padding: 90px 0 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.our-gallery .title {
text-align: center;
}
.gallery-tabs ul {
width: 100%;
float: left;
text-align: center;
}
.gallery-tabs ul li {
width: auto;
display: inline-block;
margin: 0 -2px;
}
.gallery-tabs ul li a {
color: #000;
padding: 5px 21px;
font-size: 16px;
display: inline-block;
transition:0.5s;
font-weight:500;
}
.gallery-tabs ul li a:hover, .gallery-tabs ul li.active a{
background-color: #c6d02e;
}
.our-gallery-sec {
width: 100%;
float: left;
margin-top: 55px;
}
.our-gallery-sec ul {
width: 100%;
display: grid;
grid-template-columns: repeat(4,1fr);
}
.our-gallery-sec ul li img {
width: 100%;
float: left;
}
/*** our-gallery end ***/
/*** read-to-work ***/
.read-to-work {
width: 100%;
float: left;
padding: 60px 0;
background-color: #c6d02e;
}
.read-to-work-inner {
width: 100%;
display: flex;
align-items: center;
}
.read-to-work-left {
width: 70%;
float: left;
}
.read-to-work-left h2 {
font-size: 36px;
padding-bottom: 10px;
position: relative;
margin-bottom: 20px;
}
.read-to-work-left h2:before {
position: absolute;
content:'';
width:155px;
height:2px;
background-color:#000;
bottom:0;
left:0;
}
.read-to-work-right {
width: 30%;
float: right;
}
.get-a-quote-btn a {
background-color: #fff;
float: right;
margin: 0;
font-size: 18px;
}
/*** read-to-work end ***/
/*** contatc-us-sec ***/
.contact-us-sec {
width: 100%;
float: left;
padding: 90px 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.contact-info-left {
width: 50%;
float: left;
}
.contact-info-left h3 {
font-size: 26px;
color: #fff;
text-transform: uppercase;
}
.contact-info-left ul {
width: 100%;
float: left;
margin-top: 20px;
}
.contact-info-left ul li {
width: 100%;
float: left;
position: relative;
margin-bottom: 20px;
padding-left: 35px;
}
.contact-info-left ul li .fa {
position: absolute;
top: 3px;
left: 0;
font-size: 20px;
}
.contact-info-left ul li h5, .contact-info-left ul li p, .contact-info-left ul li .fa {
color:#fff;
}
.contact-info-left ul li h5 {
margin-bottom:7px;
}
.contact-info-left ul li p a {
color: #fff;
font-size: 16px;
}
.contact-form-right {
width: 50%;
float: right;
background-color:#fff;
padding:45px;
}
.contact-form-right h3 {
text-align: center;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 15px;
}
.contact-form-right ul {
width: 100%;
float: left;
margin-top: 28px;
}
.contact-form-right ul li {
width: 100%;
float: left;
margin-bottom: 15px;
}
.contact-form-right ul li:last-child {
margin-bottom: 0px;
margin-top: 15px;
}
.contact-form-right ul li input[type="text"], .contact-form-right ul li input[type="email"], .contact-form-right ul li textarea {
width: 100%;
float: left;
background-color: #eeeeee;
border: 1px solid #eae2e2;
height: 50px;
padding: 0 15px;
font-size: 16px;
outline:none;
}
.contact-form-right ul li textarea {
height: 140px !important;
padding: 10px 15px;
}
.contact-form-right ul li input[type="submit"] {
color: #000;
background-color: #c6d02e;
width: 215px;
border-radius: 50px;
height: 54px;
font-size: 16px;
font-weight: 500;
transition: 0.5s;
text-transform: uppercase;
border: none;
float: right;
outline:none;
}
.contact-form-right ul li input[type="submit"]:hover {
background-color: #fdc236;
}
/*** contatc-us-sec end ***/
/*** footer ***/
.footer {
width: 100%;
float: left;
background-color: #000;
padding-top:80px;
}
.footer-box {
width: 25%;
float: left;
}
.footer-box h5 {
color: #fff;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 20px;
}
.footer-box ul {
width: 100%;
float: left;
}
.footer-box ul li {
width: 100%;
float: left;
margin-bottom: 15px;
position: relative;
padding-left: 10px;
}
.footer-box ul li:before {
content: '\f105';
position: absolute;
top: 2px;
left: 0;
color: #fff;
font-family:fontawesome;
}
.footer-box ul li a {
width: 100%;
float: left;
color: #fff;
transition:0.5s;
}
.footer-box ul li:hover a, .footer-box ul li:hover:before {
color: #c6d02e;
}
.footer-box ul li p{
color: #fff;
font-size:14px;
}
.footer-box-1 ul li {
display: flex;
margin-bottom: 12px;
padding-left: 0px;
}
.footer-box-1 ul li:before {
content:none;
}
.footer-box-1 ul li:last-child {
margin-bottom: 0px;
}
.footer-box-1 ul li span, .footer-box-1 ul li a span {
width: 35px;
font-size: 28px;
color: #c6d02e;
float: left;
}
.footer-box-1 ul li a {
display: flex;
align-items: center;
}
.footer-box-1 ul li p {
padding: 0;
}
.footer-bottom {
width: 100%;
float: left;
margin-top: 60px;
border-top: 2px solid #4d4c4c;
display: flex;
justify-content: space-between;
align-items: center;
padding: 17px 0;
}
.footer-bottom-left ul li {
float: left;
margin-right: 10px;
padding-right: 10px;
position: relative;
}
.footer-bottom-left ul li:before {
content: '';
position: absolute;
top: 4px;
right: 0;
height: 12px;
background-color: #fff;
width: 1px;
}
.footer-bottom-left ul li:last-child:before {
content: none;
}
.footer-bottom-left ul li:last-child {
margin-right: 0px;
padding-right: 0px;
}
.footer-bottom-left ul li a {
color:#fff;
font-size: 14px;
}
.footer-bottom-left ul li a:hover {
color: #c6d02e;
}
.footer-bottom-right p {
color: #fff;
font-size: 14px;
padding: 0;
}
/*** footer end ***/
/*** lorem-ipsun-sec ***/
.lorem-ipsum-sec .about-right {
float: left;
}
.lorem-ipsum-sec .about-left {
float: right;
}
/*** lorem-ipsun-sec end ***/
/*** lorem-ipsum-full-sec ***/
.lorem-ipsum-full-sec {
width: 100%;
float: left;
padding: 90px 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.lorem-ipsum-full-sec h2 {
padding-bottom: 10px;
position: relative;
margin-bottom: 45px;
color:#fff;
text-transform:uppercase;
}
.lorem-ipsum-full-sec h2:before {
position: absolute;
content: '';
width: 376px;
height: 2px;
background-color: #fff;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
}
.lorem-ipsum-full-sec p {
color:#fff;
}
/*** lorem-ipsum-full-sec end ***/
/*** contact-sec ***/
.contact-sec {
width: 100%;
float: left;
padding: 60px 0;
}
.contact-sec h3 {
margin-bottom: 30px;
}
.contact-form {
width: 60%;
float: left;
}
.contact-form ul li {
width: 100%;
float: left;
margin-bottom: 20px;
}
.contact-form ul li .left-input{
width: 49%;
float: left;
}
.contact-form ul li .right-input{
width: 49%;
float: right;
}
.contact-form label {
width:100%;
float:left;
margin-bottom:5px;
font-size:16px;
font-weight:600;
}
.contact-form ul li input[type="text"], .contact-form ul li input[type="tel"], .contact-form ul li input[type="email"], .contact-form ul li textarea {
width: 100%;
float: left;
height: 46px;
padding: 0 10px;
border: 1px solid #c4c5c4;
font-size: 16px;
outline: none;
}
.contact-form ul li textarea {
height: 142px !important;
padding: 10px;
}
.contact-form ul li input[type="submit"] {
color: #000;
background-color: #c6d02e;
width: 170px;
border-radius: 50px;
height: 50px;
font-size: 16px;
font-weight: 500;
transition: 0.5s;
text-transform: uppercase;
border: none;
float: left;
outline: none;
}
.contact-form ul li input[type="submit"]:hover {
background-color: #fdc236;
}
.contact-info {
width: 31%;
float: right;
}
.contact-info ul li {
width: 100%;
float: left;
margin-bottom: 20px;
position:relative;
padding-left:35px;
}
.contact-info ul li .fa {
position: absolute;
top: 2px;
left: 0;
font-size: 20px;
color: #000;
}
.contact-info ul li h5 {
font-weight:600;
}
.contact-info ul li p {
font-weight:500;
color:#111;
}
.map-sec img {
width:100%;
float:left;
}
/*** contact-sec end ***/
/*** inner-our-gallery ***/
.inner-our-gallery {
padding:90px 0;
}
.inner-our-gallery .our-gallery-sec ul {
grid-gap:25px;
}
/*** inner-our-gallery end ***/
/*** inner-our-services ***/
.inner-our-services .title h2 {
color: #000;
}
.inner-our-services-cont {
width: 100%;
float: left;
text-align: center;
margin-bottom: 30px;
}
.inner-our-services .our-services-sec ul li {
box-shadow: 0px 0px 13px rgba(236, 232, 232, 0.73);
}
.fullimgsec {
width: 100%;
float: left;
margin-top: 70px;
}
/*** inner-our-services end ***/