/* 
Theme Name: Playa Projects - Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featumain-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

:root {
    --animated: all .3s ease-in-out;
    --mainColor: #114C59 ;
    --altColor: #45ADA2 ;
    --darkColor: ;
    --whiteColor: ;
    --darkGray: #1F1F1F ;
    --lightGray: #BFBFBF ;
    --mainFont: 'Poppins', sans-seriff;
    --textFont: 'Roboto', sans-seriff;
}

.mainColor{ color:var(--mainColor); }
.altColor{ color:var(--altColor); }
.darkColor{ color:var(--darkColor); }
.whiteColor{ color:var(--whiteColor); }
.darkGray{ color:var(--darkGray); }
.lightGray{ color:var(--lightGray); }
.mainFont{ font-family:var(--mainFont); }
.textFont{ font-family:var(--textFont); }
.white {color: white;}


a {color: var(--mainColor);}
.noSpace, .noSpace p {padding: 0px; margin: 0px;}

.sidenav {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color:#0c0c0c;
    overflow-x: hidden;
    transition: 0.5s;
    
}

.navbar-toggler-icon {background: none; width: auto; height: auto;}
.navbar-toggler {background: var(--darkGray); color: white; padding: 10px 15px; border: none;}
.navbar-toggler:hover {background: var(--altColor); color: white;}
.closebtn {color: var(--altColor); text-decoration: none;}
.navMenu li {margin: 5px 0px;}
.navMenu li a {color: white;text-decoration: none; font-size: 20px;}
.navMenu li a:hover {color: var(--altColor);}


body {font-family: var(--textFont);}

.lightText {font-weight: 300;}


.header {position: relative; z-index: 2;}
.page-id-10 .header {position: absolute;}
.menuCont {background: white;}
.header:not(.page-id-10 .header) {filter: drop-shadow(0px 5px 5px rgb(1, 1, 1, .4));}
.page-id-10 .menuCont {background: transparent;}



.footer {background: var(--darkGray); color: white;}



.headerRow {background: var(--darkGray); color: white;position: relative;}
.headerTopleft i {color: #009CA6; font-size: 18px;}
.headerTopright a {display: flex;width: 40px; height: 40px; align-items:center; justify-content:center; background:white; color: var(--darkGray); font-size:18px;text-decoration:none; border-radius:0px;margin: 0px 10px; transition:var(--animated);  }
.headerTopright a:hover {background: var(--mainColor); color: white;}

.logo{width: 150px;}


#menu-principal {border-bottom: 2px solid var(--darkGray);}
#menu-principal li {padding: 8px;}
#menu-principal li a {font-family: var(--mainFont);color: var(--darkGray); padding: 10px; margin: 0px 0px;text-decoration: none; font-size: 18px; font-weight: 600; position: relative; transition: var(--animated);}
#menu-principal li a:hover {color: var(--mainColor);}

#menu-principal li.current-menu-item a {color: var(--mainColor); font-weight: 700;}

#menu-principal li a:after {content: '';display: block;width: 100%;height: 6px;background: var(--altColor);position: absolute;bottom: -3px;left: 0;transform: scaleX(.1);transform-origin: center;opacity: 0;transition: var(--animated);}
#menu-principal li a:hover:after {transform: scaleX(.8);opacity: 1;}

.homePleca:before {content: '';position: absolute;left: -150px;top: 50%;width: 130px;height: 12px;background-color: var(--altColor);border-radius: 0px;}


.iconValores .elementor-icon {background: #e9e9e9; padding: 15px; fill: var(--altColor) !important; transition: var(--animated);}
.iconValores .elementor-icon:hover {background: var(--darkGray) !important ; fill: white !important ;}


.greenButton {font-family: var(--textFont); font-size:18px; font-weight:600; background: var(--mainColor);color:white;border: none;border-radius: 100px; padding: 10px 30px;transition: var(--animated);}
.greenButton:hover {background: var(--altColor); color: white; padding: 10px 40px;}


.whiteButton {font-family: var(--textFont); font-size:18px; font-weight:600; background: transparent;color:white;border: 2px solid white;border-radius: 100px; padding: 10px 30px;transition: var(--animated);}
.whiteButton:hover {background: white; color: var(--darkGray); padding: 10px 40px;}
.whiteButton i {transition: var(--animated); font-size: 24px;}
.whiteButton:hover i {color: var(--altColor);}

.homeBox .elementor-image-box-description {border-bottom: 1px solid #c3c3c3;padding: 25px 50px;}


.formContact input, .formContact select , .formContact textarea {max-width: 450px; font-family: var(--textFont); color: #7F7F7F; font-size: 16px; border: none; border-radius: 0px; border-left: 6px solid var(--darkGray);}

.formContact input[type='submit'] {background: transparent;padding: 8px 20px;font-family: var(--mainFont);font-size: 16px;font-weight: 700;border: 1px solid white;color: white;border-radius: 0px;transition: var(--animated);}
.formContact input[type='submit']:hover {background: var(--darkGray); border: 1px solid var(--darkGray); padding: 8px 30px;}

.servIconmain .elementor-icon-box-icon {background: var(--mainColor);padding: 15px;border-radius: 0px;}

.servIconalt .elementor-icon-box-icon {background: var(--altColor);padding: 15px;border-radius: 0px;}



/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .homePleca:before {left: -150px; width: 120px;}
    .logo{width: 250px;}
 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 

    #menu-principal li a {padding: 10px 25px;}
    .homePleca:before {left: -350px; width: 300px;}

}

/* No Bootstrap Class (larger desktops, 1900px and up) */
@media (min-width: 1900px) { 

}