:root {
  --white: #ffffff;
  --black: #000000;
  --grey: #f0f0f0;
  --primary-color: #4f676a;
  --heading-color: #293647;
  --paragraph-color: #1e2d40ba;
  --yellowish-grey: #a5a392;
  --border-color: #d5d5d5;
}

* { box-sizing: border-box;}
html, body { background: var(--white); margin: 0;	padding: 0;	border: 0; vertical-align: baseline; font-weight: 400; list-style: none; font-size: 15px; font-optical-sizing: auto; font-style: normal; font-optical-sizing: auto; color: var(--paragraph-color); font-family: "Lato", sans-serif;}
a:focus,button:focus,input:focus,textarea:focus { outline:0; text-decoration:none;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0; -webkit-font-smoothing:antialiased; margin-bottom:15px; color:var(--heading-color); line-height: normal; font-family: 'Marcellus', serif; line-height: 1.1;}
h1 { font-size:70px; color: var(--primary-color);}
h2 { font-size: 50px;}
h3 { font-size:28px;}
h4 { font-size:24px;}
a { color:#018aff; text-decoration:none; transition:all ease-out .3s; -webkit-transition:all ease-out .3s; -moz-transition:all ease-out .3s;-ms-transition:all ease-out .3s; -o-transition:all ease-out .3s;}
a:hover { text-decoration:none;color:#3b90ff;}
label { font-weight:400;margin:0;}
p { font-size: 15px; line-height:24px; color: var(--paragraph-color); margin:0; padding:0; font-weight: 400; margin-bottom:15px;}
li,ol,ul { list-style:none; margin:0; padding:0;}
focus { outline:0;}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #1e2d40ba; font-size: 14px;}
::-moz-placeholder { /* Firefox 19+ */ color: #1e2d40ba; font-size: 14px;}
:-ms-input-placeholder { /* IE 10+ */ color: #1e2d40ba; font-size: 14px;}
:-moz-placeholder { /* Firefox 18- */ color: #1e2d40ba; font-size: 14px;}

/*========================== Commen styles ========================*/
.primary-btn { display: inline-block; background: var(--primary-color); border: 1px solid var(--primary-color); color: var(--white); font-size: 16px; padding: 16px 40px; text-transform: uppercase; line-height: 1; font-family: 'Marcellus', serif; transition: all ease-out 0.3s; position: relative; border-radius: 35px;}
.primary-btn:hover { color: var(--primary-color); background: none;}

section { display: block; padding: 75px 0;}
/*========================== Commen styles ========================*/

.header { display: block; background: #FFFFFF; box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.05); padding: 8px 0; position: relative; z-index: 2;}
.header .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative;}
.logo { max-width: 130px; width: 100%; display: block; margin: 10px 0;}
.logo a { display: inline-block;}
.logo a img { display: block;}
.header-contact { display: flex; align-items: center; flex-wrap: wrap;}
.header-contact a { display: inline-flex; align-items: center; margin-left: 20px; color: var(--heading-color); font-weight: 400;}
.header-contact a i { font-size: 13px; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 100%; background: var(--grey); color: var(--primary-color); margin-right: 8px;}
.home-page { overflow: hidden;}

.banner { display: flex; align-items: center; min-height: 700px; background: var(--primary-color); overflow: hidden; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; position: relative;}
.banner::before { content: ''; width: 100%; height: 100%; display: none; background: var(--yellowish-grey); position: absolute; left: 0; top: 0; opacity: 0.8;}
.banner .container { position: relative; z-index: 2;}
.banner-text { display: block; padding: 30px; background: #ffffff33; backdrop-filter: blur(13px); border-radius: 15px;}
.banner-text h1 { color: var(--white); font-size: 45px;}
.banner-text p { font-size: 20px; color: var(--white); font-family: "Marcellus", serif; line-height: 1.5;}
.lp-form { display: block; padding: 35px; border-radius: 15px; background: var(--white); font-family: "Manrope", sans-serif;}
.lp-form h2 { font-size: 32px; line-height: 1; margin-bottom: 10px; text-align: center;}
.lp-form p { text-align: center; line-height: 1.4; max-width: 95%; margin: auto; margin-bottom: 15px;}
.lp-form-input { width: 100%; height: 45px; padding: 0 15px; border: 1px solid #e9e8e8; border-radius: 8px; color: var(--paragraph-color);}
.lp-form-input:focus { border-color: var(--primary-color); outline: none;}
.lp-form-textarea { width: 100%; height: 100px; padding: 10px 15px; border: 1px solid #e9e8e8; border-radius: 8px; resize: none;}
.lp-form-textarea:focus { border-color: var(--primary-color);}

.lp-about { display: block;}
.lp-about h2 span { display: block; font-size: 16px; letter-spacing: 4px; margin-bottom: 10px;}

.yellowish-grey { background: var(--yellowish-grey) !important;}
.primary-bg { background: var(--primary-color) !important;}
.grey-bg { background: var(--grey) !important;}

.padding-style2 { padding: 50px 0;}
.lp-features-block { display: block;}
.lp-features { display: block; text-align: center;}
.lp-features .icon { width: 85px; height: 85px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); padding: 20px; border-radius: 100%; margin-bottom: 15px;}
.lp-features h4 { color: var(--white); margin-bottom: 5px;}
.lp-features p { color: var(--white);}

.lp-services-block { display: block;}
.service-item { display: block; overflow: hidden; border-radius: 25px; background-size: cover !important; background-repeat: no-repeat !important; background-position: center top !important; min-height: 600px; background-color: var(--grey); position: relative;}
.service-item::before { content: ''; width: 100%; height: 50%; display: block; position: absolute; bottom: 0; left: 0; /*background: rgb(79,103,106); background: linear-gradient(184deg, rgba(79,103,106,0.30575980392156865) 31%, rgba(165,163,146,1) 85%); transition: all ease-out 0.3s;*/  background: rgb(79,103,106); background: linear-gradient(184deg, #4f676a00 15%, #4f676a 85%); transition: all ease-out 0.3s;}
/* .service-item:hover::before {background: rgb(79,103,106); background: linear-gradient(184deg, #a5a392a6 50%, #a5a392 100%);} */
.service-item .service-body { display: block; padding: 25px 30px; position: absolute; left: 0; bottom: 0; z-index: 2;}
.service-item .service-body h3 { margin-bottom: 10px; color: var(--white);}
.service-item .service-body p { color: var(--white); margin-bottom: 0;}

.accordion { display: block;}
.accordion-box { display: block; overflow: hidden; border-radius: 10px; background: var(--white); margin-top: 15px;}
.accordion-item { display: block; border-radius: 0; padding: 18px 25px; padding-right: 40px; border: none; background: none; cursor: pointer; font-size: 22px; font-family: "Marcellus", serif; color: var(--heading-color); position: relative;}
.plus-minus { width: 30px; height: 30px; display: flex; border-radius: 100%; justify-content: center; align-items: center; background: var(--grey); position: absolute; right: 20px; top: 18px;}
.plus-minus::before { content: ''; width: 50%; height: 2px; display: block; background: var(--primary-color); position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto;}
.plus-minus::after { content: ''; width: 2px; height: 50%; display: block; background: var(--primary-color); position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto;}
.data { display: none; padding: 25px; border-top: 1px solid var(--grey)}
.data p { font-size: 16px;}
.data ul { padding-left: 20px;}
.data ul li { list-style: outside; font-size: 16px;}
.accordion-item.open { color: var(--heading-color);}
.accordion-item.open .plus-minus::after { display: none;}

.owl-carousel .owl-stage { display: flex;}
.owl-carousel .owl-item img { height: auto; width: auto;}
.owl-carousel .owl-dots { display: flex; justify-content: center; align-items: center; margin-top: 15px;}
.owl-carousel .owl-dots .owl-dot { display: inline-block; margin: 0 4px;}
.owl-carousel .owl-dots .owl-dot { width: 6px; height: 6px; background: var(--paragraph-color); border-radius: 100%;}
.owl-carousel .owl-dots .owl-dot.active { background: var(--paragraph-color); width: 13px; height: 13px;}

.faq-block { display: block; position: relative;}
.commen-head { display: block; padding-bottom: 15px;}
.commen-head h2 span { display: block; font-size: 16px; letter-spacing: 4px; margin-bottom: 10px;}
.border-top { border-top: 1px solid #d5d5d5 !important;}

.testimonials-block { display: block; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; position: relative; filter: grayscale(50%);}
.testimonials-block .commen-head h2 { color: var(--black);}
.testimonials-block .commen-head h2 span { color: var(--black);}
.testimonials-block .container-fluid { position: relative; z-index: 2;}
.testimonials-block::before { content: ''; width: 100%; height: 100%; display: block; background: rgba(255, 250, 208, 0.774); position: absolute; left: 0; top: 0; backdrop-filter: blur(13px);}
.testimonial-slider { max-width: 1500px; margin: auto;}
.testimonial-item { display: block; padding: 40px; border-radius: 15px; border: 1px solid var(--grey); height: 100%; position: relative;}
.testimonial-item::after { content: "\f10d"; font-family: "FontAwesome"; width: 35px; height: 35px; display: block; position: absolute; right: 20px; bottom: 25px; font-size: 36px; color: var(--yellowish-grey); transform: rotate(180deg); opacity: 0.3;}
.testimonial-item p { margin-bottom: 25px;}
.testimonial-item h5 { font-size: 18px; margin-bottom: 5px; color: var(--heading-color);}
.testimonial-item { font-size: 18px; background: var(--white);}
.stars { display: flex; align-items: center;}
.stars i { color: #e2c311; display: inline-block; margin-right: 3px; font-size: 14px;}
.testimonials-block .owl-carousel .owl-item { padding: 1px;}

.brands-block { display: block;}
.brands-slider .owl-item { padding: 1px;}
.brands-item { display: flex; justify-content: center; align-items: center; padding: 15px 25px; height: 100%; border: 1px solid #d5d5d5; min-height: 65px; border-radius: 6px; background: var(--white);}
.brands-item img { max-height: 65px; width: auto; transition: all ease-out 0.3s; filter: grayscale(100%); opacity: 0.7;}
.brands-item:hover img { filter: grayscale(0); opacity: 1;}

.gallery-block { display: block;}
.gallery-item { display: block; overflow: hidden; position: relative; border-radius: 10px;}
.gallery-item img { display: block; width: 100% !important; height: 100%; position: relative;}
.gallery-item::before { content: "\f065"; font-family: "FontAwesome"; font-size: 50px; width: 0; height: 0; display: flex; justify-content: center; align-items: center; background: #000000af; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 2; transition: all ease-out 0.3s; color: var(--white); opacity: 0;}
.gallery-item:hover:before { width: 100%; height: 100%; opacity: 1;}

.map-block { display: block; background: var(--grey);}
.map-block iframe { display: block; width: 100%; height: 400px;}

.footer { display: block;}
.footer-main { display: block; background: var(--primary-color);}
.footer-main h4 { color: var(--white); margin-bottom: 30px;}
.footer-main ul li { display: block; margin-bottom: 5px;}
.footer-main ul li a { color: var(--grey); font-size: 16px;}
.footer-main ul li a i { display: inline-block; margin-right: 5px;}
.footer-main h5 { color: var(--white); margin-bottom: 15px;}
.footer-main p { color: var(--grey); font-size: 16px;}
.footer-main p span { display: block; font-weight: 600;}
.footer-social { display: flex; align-items: center; margin-top: 25px;}
.footer-social a { color: var(--white); font-size: 20px; display: inline-block; margin-right: 20px;}
.footer-bottom { display: block; padding: 20px 0;}
.footer-bottom p { margin: 0}

.success-block { display: flex; align-items: center; min-height: 700px;}
.success-block .container { text-align: center;}
.success-main { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 700px; margin: auto; background: var(--white); padding: 50px; border-radius: 20px; min-height: 300px;}

.grey-gradiant-bg { background: rgb(240,240,240); background: linear-gradient(0deg, rgba(240,240,240,0) 51%, rgba(240,240,240,1) 98%) !important;}
.bottom-form-main { display: block; max-width: 900px; padding: 40px; border-radius: 20px; background: var(--white); margin: auto;}
.footer-logo { display: inline-block; margin-bottom: 20px;}
.footer-social { margin-top: 15px;}

.floating { display: inline-block; position: fixed; left: 1%; bottom: 3%; z-index: 999999;}
.floating a { width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; border-radius: 100%; position: relative; margin-bottom: 8px;}
.floating a i { color: var(--white); font-size: 22px;}
.floating a span { display: inline-block; position: absolute; left: 46px; opacity: 0; color: var(--black); font-size: 14px; padding: 5px 10px; border-radius: 5px; background: var(--white); box-shadow: 0 0 5px 0 #0000001a;}
.floating .phone { background: #4f676a; border: 1px solid #ffffff;}
.floating .phone:hover { background: #a5a392;}
.floating .whatsapp { background: #49e670;}
.floating .whatsapp:hover { background: #3cc55e;}
.floating a:hover span { opacity: 1;}
.floating a span::after { content: ''; width: 0; height: 0; display: block; border: 8px solid #ffffff; border-color: transparent #ffffff transparent transparent; border-radius: 3px; position: absolute; left: -15px; top: 0; bottom: 0; margin: auto;}

.tabby-tamara { display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 15px;}
.tabby-tamara span { display: inline-block; margin-right: 10px;}
.tabby-tamara p { font-size: 20px; color: var(--white); font-family: "Marcellus", serif; line-height: 1.5;}

.footer-bottom .container { display: block; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.footer-bottom .container .tabby-tamara { padding: 0;}
.footer-bottom .container .tabby-tamara p { font-size: 16px; color: var(--paragraph-color); font-family: "Lato", sans-serif;}
.footer-main ul li a,
.header-contact a { font-family: "Lato", sans-serif;}

















/* 
font-family: "Marcellus", serif;
font-family: "Lato", sans-serif;
*/

/* :root {
  --white: #ffffff;
  --black: #000000;
  --grey: #f0f0f0;
  --primary-color: #568259;
  --primary-hover: #4f676a;
  --heading-color: #293647;
  --paragraph-color: #1e2d40ba;
  --yellowish-grey: #a5a392;
  --border-color: #d5d5d5;
} */