/*!
Theme Name: DevWP
Theme URI: http://underscores.me/
Author: Seadog Lab
Author URI: https://seadog.com.co/
Description: Saniflo Specialists
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: devwp
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

/* ========= UTILITIES ============*/

html{ font-size: 16px;}	
body{
	font-family: "mundial", sans-serif;
	font-style: normal;
	font-weight: 100;	
	color: #2c333a;
}
h1, h2, h3, h4, h5, h6{ font-weight: 700; }
h3, h4, h5, h6{ color: #00334e; }
h1{	font-size: 3.5rem; }
h2{	font-size: 2.5rem; }
h3{	font-size: 2rem; }
h4{	font-size: 1.4rem; }
h5{	font-size: 1.2rem; }
h6{	font-size: 1rem; }
a{
	color: #00334e ;
	transition: all 1s ease-out;
}
p{	line-height: 1.4rem;}
.hoverimg img { transition: all 1s ease-out; }
.hoverimg img:hover { filter: saturate(180%); }

/* --- Colors ---*/ 
.bg-drak{
	background-color: #00334e;
}
.bg-grey{
	background-color: #ededed;
}
.bg-red{
	background-color: #ff2f1a;
	transition: all 1s ease-out;
}
a:hover .bg-red{
	background-color: #bb2111;
}
.bg-facebook{
	background-color: #374fa5;
	transition: all 1s ease-out;
}
.bg-whatsapp{
	background-color: #55b566;
	box-shadow: 2px 2px 3px #222222;
	transition: all 1s ease-out;
}
a:hover .bg-whatsapp{
	background-color: #25a03c;
}
.font-red{
	color: #ff2f1a;
}
.font-white{
	color: #ffffff;
}
.nav-link{
	color: #00334e ;
}
.nav-link.nav-link-white{
	color: #ffffff;
}
.border-bottom {
        border-bottom: 0.5px solid #555555 !important;
}

/* --- Fonts ---*/ 
.font-shadow{
	text-shadow: 3px 3px 3px #222222;
}
.icon-divider{
	color: #ff2f1a;
	font-size: 0.4rem;
	padding: 0 10px;
	vertical-align: middle;
}
.title-contact .icon-divider{
	font-size: 0.5rem;

}
.link-contact{
	color: #ff2f1a;
	text-decoration-line: none;
	font-weight: 700;
	transition: all 1s ease-out;
}
.link-contact:hover{
	color: #bb2111;
}
.link-contact.green{
	color: #25a03c;
	transition: all 1s ease-out;
}
.link-contact.green:hover{
	color: #55b566;
}

/* --- Size ---*/

.p-section{
	padding: 4rem 0;
}
.p-jumbotron{
	padding-top: 12rem;
}

.pe-inter{
	padding-right: 2rem;
}
.pe-60inter{
	padding-right: 3rem;
}
.icon-done {
    width: 50px;
    height: auto;
    padding-top: 8px;
}
.top-1{
	top: -1rem;
}

/* --- Button ---*/ 
.btn-primary{
	background-color: #ff2f1a;
	border: 1px solid #ff2f1a;
	text-transform: uppercase;
	transition: all 1s ease-out;
	font-weight: 600;
}
.btn-primary:hover{
	background-color: #bb2111;
	border: 1px solid #bb2111;
}
.btn-contact{
	background-color: #ff2f1a;
	color: #ffffff;
	transition: all 1s ease-out;
	font-weight: 600;
}
.btn-contact:hover{
	background-color: #bb2111;
	color: #ffffff;
}
.btn-xl{
	padding: 1rem 1rem;
}
/* --- Heder ---*/

.navbar-toggler:hover .navbar-toggler-icon {
    opacity: 0.7;
}
.brand-style, .bt-nav-style{
	z-index: 10;
}

.navbar-style .nav-link{
    font-size: 1.2rem;
    padding: 10px 0;
    color: #00334e;
    background-color: #ededed;
    text-align: center;
    margin-bottom: 4px;
}
.navbar-style .dropdown-item{
    font-size: 1.2rem;
    padding: 10px 0;
    color: #00334e;
    background-color: #dedede;
    text-align: center;
    margin-bottom: 4px;
}

.navbar-style .nav-link:hover, .navbar-style .dropdown-item:hover, .navbar-nav .nav-link.active, .navbar-nav .show>.nav-link{
    background-color: #cccccc;
    color: #00334e;
}

.navbar-style .dropdown-toggle::after {
    content: "";
    background-image: url('image/chevron-down.svg');
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border:none;
    color: #ff2f1a;
}
.navbar-style .dropdown-toggle.show::after {
    content: "";
    background-image: url('image/chevron-up.svg');
    width: 20px;
    height: 20px;
}
.navbar-toggler{
	transition: all 1s ease-out;
}
.navbar-toggler .navbar-toggler-icon {    
    background-image: url("image/navbar-toggler.png"); 
   
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-icon {    
    background-image: url("image/navbar-toggler-cl.png"); 
}
.bt-nav-style.navbar-toggler:focus {
    box-shadow: initial;
}
.navbar-style .dropdown-menu{
	border: none;
	padding: 0;
	border-radius: 0;
	margin-top: 4px;
}
.container-nav {
    padding: 8rem 0 4rem 0;
    margin: 0 auto;
    width: 40%;
}
.navbar-style {
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 96vh;
    z-index: 9;
}
.navbar-toggler{
	border: none;
	color: #00334e;
}
.navbar-brand img{
	height: 90px;
	width: auto;
}
.btn-var {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.item-chat {
    margin: 20px 10px 0;
    align-content: center;
}
.item-chat  .icon-chat {
    width: 90px;
}
.item-chat .qlwapp-toggle {
    border-radius: 66%;
}
.item-chat .qlwapp-bubble .qlwapp-toggle .qlwapp-icon {
    font-size: 32px!important;
}
.item-chat #qlwapp .qlwapp-toggle {
    margin: 0;
}

/* --- Footer ---*/
#footer .box-pay{
	background-color: #e3e4e5;
	padding: 1rem;
	border-radius: 4px;
}
#footer .footer-brand img{
	height: 90px;
	width: auto;
	margin-bottom: 1rem;
}
#footer .box-reviews{
	display: block;
	background-color: #ffffff;
	padding: 1rem;
	border-radius: 4px;
	transition: all 1s ease-out;
	text-decoration: none
}
#footer .box-reviews:hover{
	background-color: #e3e4e5;
}
.box-reviews p{
	color: #2c333a;
	margin-bottom: 0;
}
.circle-icon {
	display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 30px;
    vertical-align: middle;
    text-align: center;
    margin-right: 10px;
}
.circle-icon i{
   font-size: 1.5rem;
   vertical-align: middle;
   color: #ffffff;
}
.box-pay, .box-reviews{
	margin-bottom: 1rem;
}
.widget-footer{
	margin-bottom: 0px;
}
.widget-footer .nav-link:hover{
	color: #00334e ;
	text-decoration: underline;
}
.btn-contact.pr-contact {
    margin-right: 2rem;
}


/* ========= HOME ============*/
/* --- Hero ---*/ 

#hero-home{
	height: 850px;
	position: relative;	
	background-size: cover;
	background-position-y: bottom;
}
.margin-reviews {
    margin: 2rem auto 3rem;
}
.wrap-reviews{
    width: 50%;
    text-align: center;
}
img.icon-reviews {
    width: 100%;
    max-width: 270px;
}
.jumbotron .wp-gr .wp-google-powered {
    color: #ffffff!important;
}
.jumbotron .wp-gr .wp-google-powered img {
   display: none;
}
.overlay-hero{	
  	position: absolute;
  	height: 100%;
  	width: 100%;
  	top: 0;
  	left: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 10%, rgba(0, 51, 78, 0.5) 25%, rgba(0, 51, 78, 1) 90%);
}
.title-jumbotron{
	font-size: 2.5rem;
	color: #ffffff;
}
.box-fom{
	background-color: #ededed;
	border-radius: 4px;
	padding: 3rem;
}
.wpcf7-form p{
	margin: 0;
}
.wpcf7-form .form-label {
    margin-bottom: 0;
    line-height: 0;
}
.wpcf7-form .form-control {
    background-color: transparent;
    border: none;
    border-bottom: #6d757d 1.5px solid;
    border-radius: 0;
    padding: 0.6rem 0;
    margin-bottom: 6px;
    font-size: .9rem;
}
input:-internal-autofill-selected {
    background-color: transparent!important;
}
.wpcf7-form .form-control:focus {
    border-color: #ff2f1a;
    box-shadow: none;
}
.wpcf7-form-control.wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
}
.wpcf7-list-item {
    width: 50%;
    margin: 0;
}
.wpcf7-not-valid-tip {
    font-size: .8em;
    line-height: 0.4rem;
    display: none;
}
.wpcf7-form-control-wrap .wpcf7-form-control.error {
	border-color: #ff2f1a;
	background-image: url('image/close.svg');
	background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 25px 25px;

}
.wpcf7-form-control-wrap .wpcf7-form-control.valid{
	border-color: #56b566;
	background-image: url('image/valid.svg') !important ;
	background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 25px 25px;

}


.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ffb900;
    background-color: #ffb900;
}
.wpcf7 form .wpcf7-response-output {
    margin: 0em 0.5em 0em;
    font-size: .9rem;
}
.box-features{
	border: 1px solid #ffffff;
	padding: 2rem ;
	border-radius: 4px;
}

/* --- Services ---*/ 
.card{
	border: none;
}
	
.card .label-position {
    position: absolute;
    left: -1px;
    top: -66px;
}

.card .label-title { 	
 	 text-align: left;
    padding: 2rem 1.5rem;
	position: relative;
	background-image: url("image/title-services.png"); 
	background-size: cover;
	width: 231px;
    height: 132px;
}
.card .pt-card {
    padding-top: 5rem !important;
}
.label-title .card-title {  
	color: #ffffff;
	margin-bottom: 0;
	font-size: 1.8rem;
}
.card-text{
	text-align: left;
	min-height: 10rem;
	overflow: hidden;
	min-height: 180px;
}
.expert-location .align-items-start , .Saniflo.Repairs .align-items-start{
    align-items: center!important;
}
.Saniflo.Repairs h3{
    margin-bottom: 0;!important;
}
/* --- Team ---*/ 

#team.owl-theme .owl-dots{
    position: absolute;
    top: 10px;
    width: 100%;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #55b566;
}
.owl-theme .owl-dots .owl-dot span {
    width: 1rem;
    height: 1rem;
    background: #fff;
}
.carousel-indicators [data-bs-target] {
   margin: 0 10px;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    opacity: 1;
  
}
.owl-carousel .owl-stage {
    display: flex;
}
.carousel-indicators .active {
    background-color: #55b566;
}
.owl-theme .owl-nav [class*=owl-] {
    margin: 1rem 1.5rem;
}
.owl-theme .owl-nav [class*=owl-]:hover {
    background: transparent;
}

.item-team .label-team {
    position: absolute;
    left: -1px;
    bottom: 61px;
}
.item-team .label-title-team { 	
 	text-align: right;
    padding: 2rem 2rem;
    position: relative;
    background-image: url(image/title-services.png);
    background-size: cover;
    width: 191px;
    height: 110px;
}
.label-title-team  .team-title {  
	color: #ffffff;
	margin-bottom: 0;
	font-size: 1.8rem;
}

/* --- Location ---*/ 
.w-location {
    width: 50%;
    color: #55b566;
    font-weight: 700;
    margin: 0.6rem 0;
    position: relative;  
    padding: 0 10px;
}
.l-location li a, .w-location  a{
	color: #55b566;	
	text-decoration: none;	
}
.l-location li a:hover, .w-location a:hover, .w-location a:hover i{
	color: #ffffff;		
}
.w-location i {
    font-size: 1.6rem;
    padding-left: 0.8rem;
    color: #387595;
    position: absolute;
    top: 0px;
    right: 0%;
    transition: all 1s ease-out;
}
.l-location{	
	list-style: none;
	padding-left: 0;
}
.l-location li {
	color: #55b566;		
	padding: 0.1rem 0;

}
 .label-position-map {
    position: absolute;
    left: 0px;
    top: 0px;
}

.label-title-map { 	
 	 text-align: left;
    padding: 2rem 1.5rem;
	position: relative;
	background-image: url("image/title-map.png"); 
	background-size: cover;
	width: 375px;
    height: 159px;
}
.label-title-map .map-title {  
	color: #ffffff;
	margin-bottom: 0;
	font-size: 1.8rem;
}
.w-location .accordion-item {
    background-color: transparent;
}
.w-location .accordion-button, .w-location .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: #56b566;
    font-size: 18px;
    font-weight: 600;
    box-shadow: inset 0 calc(-1* 2px) 0 #56b566;
}
.w-location .item-location {
    position: relative;
    color: #56b566;
}
.w-location .accordion-button::after {    
    background-image: url("image/caret-down-fill.svg");   
}

.w-location .accordion-button:not(.collapsed)::after {
    background-image: url("image/caret-down-fill.svg"); 
}

/* --- Reviews ---*/
.card-body {
    padding: 3rem 2rem;
}
.starts-reviews{
	width: 120px!important;
	height: auto;
	margin-bottom: 30px;
}
.mh-500{
	min-height: 500px;
}

/* --- FAQ ---*/
.box-faq{
	padding: 2rem;
	border: 1px solid #dee2e6;
	border-radius: 4px;
}
.accordion-style .accordion-item{
	border-style: solid hidden solid hidden;
}
.accordion-style .accordion-item:first-of-type, .accordion-item:first-of-type>.accordion-header .accordion-button{
	border-radius: 0px;
}
.accordion-style .accordion-button:not(.collapsed){
	background-color: initial;
	box-shadow: initial;
}
.accordion-style .accordion-button{
	font-size: 1.3rem;
	font-weight: 600;
	padding: 2rem 1rem;
	color: #00334e;
}
.accordion-style .accordion-body {
    text-align: start;
}
.accordion-style .accordion-button::after {    
    background-image: url("image/dash.svg");   
}

.accordion-button:not(.collapsed)::after {
    background-image: url("image/plus.svg"); 
}

/* --- BTN contact Float ---*/
#wrap-contact-right .bg-body-contact{
    display: none;
    width: 100%;
    height: 100%;
    background: #000000a6;
    position: fixed;
    top: 0;
    transition: visibility 0s, opacity 0.5s linear;
     z-index: 90;
}
#wrap-contact-right.show .bg-body-contact {
    display: block;
}
.contact-float {
    position: fixed;
    top: 25%;
    right: 0;
    display: flex;
    z-index: 100;
}
.contact-float .btn-contact .vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin: auto;
    height: 100%;
    text-transform: uppercase;
}
.contact-float .content-btn {
    height: 500px;
    min-width: 45px;
    margin: auto;
}
.contact-float .btn-contact {
    height: 230px;
    padding-right: 15px;
    border-radius: 6px 0 0 6px;
    position: relative;
    top: 20%;
    width: 100%;
}
#wrap-contact-right .wrap-contact-float {
    display: flex;
    position: relative;
    display: none;
   
}
#wrap-contact-right.show .wrap-contact-float {
	display: flex;
	box-shadow: 0px 0px 7px #22222278;
}

.contact-float .item-contact-float {
    width: 350px;
    padding: 40px 30px;
    background-color: #ededed;
    position: relative;
}
.contact-float .item-contact-float .content-info {
    text-align: center;
    margin: 50px 0 30px;
}
.contact-float .content-info .icon-reviews {
    width: 80%;
}
.contact-float .item-contact-float.bg-blue {
    background-color: #00334e;
}
.contact-float .btnclose {
    font-size: 25px;
    position: absolute;
    right: 20px;
    top: 20px;
    transition: all 1s ease-out;
}
.contact-float .btnclose:hover {
    color: #ff2f1a;
}
.contact-float .content-social{
    margin-bottom: 10px;
}
.contact-float .content-social a {
    width: 50%;
    display: flex;
    margin: auto;
    font-size: 14px;
    line-height: 18px;
    align-items: center;
}
.btn-phone {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 1s ease-out;
}
.btn-massenger{
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    transition: all 1s ease-out; 
}
.btn-mail{
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    transition: all 1s ease-out;
}
.btn-massenger:hover, .btn-phone:hover, .btn-mail:hover {
    color: #ff2f1a;
}
.term {
    line-height: 18px;
}
/* --- Footer top ---*/
.what-s {
    height: 50px;
    width: auto;
}
.btn-whatsapp {
    position: absolute;
    top: -25px;
    right: 16px;
}
.call-action-footer {
    position: fixed;
    width: 100%;
    height: 108px;
    bottom: -35px;
    z-index: 99;
}
.call-action-footer .circle-icon {
    width: 4rem;
    height: 4rem;
}
.call-action-footer .circle-icon i{
   font-size: 2.5rem;
}


/* ========= PAGES ============*/
#hero-area{
	height: 740px;
	position: relative;	
	background-size: cover;
}
#hero-services{
	height: 740px;
	position: relative;	
	background-size: cover;
	background-position-y: center;
}
.bk-py-c{
	background-position-y: center !important;
}
/* --- Teams ---*/
#hero-page{
	height: 370px;
	position: relative;	
	background-size: cover;
}
#hero-page .overlay-hero {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 17%, rgba(0, 51, 78, 0.5) 70%);
}

.item-reviews, .card {
    height: 100%;
}
.item-thanks img {
    width: 80px;
    padding-bottom: 10px;
}
.content-social-footer a {
    width: 50%;
    display: flex;
    margin: auto;
    font-size: 20px;
    line-height: 22px;
    align-items: center;
}
.content-social-footer .text-massenger{
    padding-left: 10px;
}

/* ========= RESPONSIVE ============*/
@media (max-width: 1200px) {
	.box-features h4{
		font-size: 1.2rem;
	}
	.icon-done{
		width: 2rem;
		height: auto;
	}
}
@media (max-width: 992px) {
	html{
		font-size: 14px;	
	}	
	.container-nav {
	    width: 80%;
	}
	.navbar-brand img{
		height: 60px;
		width: auto;
	}
  	#hero-home, #hero-services, #hero-area{
		height: 130vh;	
	}
	.box-features{
		padding: 20px 10px;
	}
	.icon-done{
		width: 2rem;
		height: auto;
	}
	.box-features .item-features h5{
		font-size: .9rem;
	}
	.box-fom{
		padding: 20px;
	}
	.box-pay, .box-reviews{
		margin-bottom: 1rem;
	}
	.widget-footer{
		margin-bottom: 3rem;
	}
	.me-inter, .pe-60inter{
		padding-right: 10px;
	}
	.card .label-title {
	    width: 200px;
	    height: 114px;
	}
	.label-title-map {
	    width: 313px;
	    height: 135px;
	}
	.mt-r-8{
		margin-top: 8rem;
	}
	.w-location {
	    width: 50%;
	    font-size: 1.1rem;
	}
	.pe-inter {
	    padding-right: 0rem;
	}
}

@media (max-width: 768px) {
    .margin-reviews {
        max-width: 100%;
    }
    .widget-footer{
		margin-bottom: 2rem;
	}
    .p-jumbotron h1 {
	    font-size: 2.5rem;
	    
	}
	.p-jumbotron {
	    padding-top: 10rem;
	}
	
	.container-nav {
	    width: 90%;
	}
	.box-features{
		border: none;
		padding: 0px;
	}

	.me-inter, .pe-60inter{
		padding-right: 0px;
	}
	.title-jumbotron.font-shadow{
		color: #00334e;
		text-shadow: none;
	}	
	.box-faq{
		padding: 0px;
		border: none;
	}
	.mt-r-8{
		margin-top: 5rem;
	}
	.form-control {
        font-size: 1.2rem;
    }
	.box-fom p{
		font-size: 1rem;
		text-align: left;
		line-height: 1rem;
	}
	.box-fom .wpcf7-not-valid-tip{
	    color: #56b568;
        font-size: 0.8rem;
	}
	.margin-reviews {
        margin: 0rem auto 2rem;
    }
}

@media (max-width: 540px) {
    .p-section {
        padding: 3rem 0;
    }
    .p-jumbotron h1 {
	    font-size: 1.8rem;
	    text-shadow: none;
	    color: #00334e;
	}
    h2 {
        font-size: 2rem;
    }
    .wrap-reviews {
        width: 50%;
    }
  	.box-fom{
		background-color: initial;
		padding: 0 10px;
	}	
	.box-fom h3{
		text-shadow: 1px 1px 2px #22222290;
		font-size: 2.5rem;
	}	
	.box-fom span{
		color: #ffffff;
		font-size: 1.2rem;
		text-shadow: 2px 1px 2px #22222290;
	}	
	.box-pay img{
		width: 70%;
	}
	.overlay-hero {
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 15%, rgba(0, 51, 78, 0.5) 30%, rgba(0, 51, 78, 1) 80%);
    }
	#hero-home, #hero-services, #hero-area{
		height: 110vh;	
	}
	#hero-page{
		height: 210px;
		background-position-y: top;
	}
	#hero-page .overlay-hero {
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0.6) 80%, rgba(0, 51, 78, 0.3) 100%);
    }
	.p-jumbotron {
	    padding-top: 8rem;
	}
	.home .title-jumbotron{
		font-size: 1.5rem;
	}	
	.icon-done{
		width: 1.5rem;
		height: auto;
	}
	.box-features .item-features h4{
		font-size: 1rem;
	}
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        width: 95%;
    }
    .item-features h4.mx-3{
        margin-right: 0rem !important;
        margin-left: 0.2rem !important;
        font-size: 1rem;
    }
    
    .font-shadow {
        text-shadow: 2px 1px 2px #222222;
    }
    .btn-contact.pr-contact {
        margin-left: 2rem;
        margin-bottom:20px;
    }
    .widget-footer{
		margin-bottom: 1rem;
	}
	.margin-reviews {
        margin: 0rem auto .8rem;
    }
    .form-control {
        font-size: 1.2rem;
        color: #ffffff;
    }
    .form-control:focus {
        color: #ffffff;
    }
	.box-fom p{
		 color: #ffffff;
	}
}