/* 
Theme Name: Bretxia - 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: #9F8A4C;
    --altColor: #00212E;
    --darkColor: ;
    --whiteColor: ;
    --darkGray: #363C40;
    --lightGray: ;
    --mainFont: 'Sarabun', sans-seriff;
    --altFont: 'Roboto Condensed', 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); }
.darkGray {color: var(--darkGray);}
.mainFont{ font-family:var(--mainFont); }
.altFont{ font-family:var(--altFont); }
.textFont{ font-family:var(--textFont); }


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

.sidenav {
    height: auto;
    width: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color:#00161ffa;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 10px;
}

.sidenav a {text-decoration: none;}
.sidenav .closebtn {color: var(--mainColor);}
.side-titulo {color: var(--mainColor); font-size: 20px; font-weight: 500;}
.sidenav a {color: #d9d9d9;font-size: 18px;font-weight: 400;font-family: var(--textFont);}
.navMenu li {margin: 4px 0px;}
.sideContact a {margin: 4px 0px;}



.carousel-control-prev,
.carousel-control-next {border: none;height: 65px;margin: auto;border-radius: 100px;width: 65px; transition: var(--animated); background:var(--mainColor); outline:none; }
.carousel-control-prev{padding: 10px 15px 5px 10px; left: -8px;transform: scale(.65);}
.carousel-control-next{padding: 10px 10px 5px 15px; right: -8px;transform: scale(.65);}
.carousel-control-prev:hover,.carousel-control-prev:active,.carousel-control-prev:focus,
.carousel-control-next:hover,.carousel-control-next:active,.carousel-control-next:focus {}


.topHeader {background: #00212E; color: #BFBFBF; font-size: 14px; font-family: var(--mainFont);}
.topHeader strong {color: white;}
.topHeader a {text-decoration: none;}
.topHeader i {color: var(--mainColor);}
.topContact a {margin: 0px 5px; }
.subHeader {background: white;filter: drop-shadow(0px 0px 5px rgb(0, 0, 0, .23));}

.logo {width: 300px;}


#menu-principal li a {color: #737373;margin: 0px 20px;font-family: var(--mainFont);text-decoration: none;font-size: 18px;
    font-weight: 600;position: relative;letter-spacing: 1px; transition: var(--animated);}
#menu-principal li a:hover {color: var(--mainColor);}
#menu-principal li.current-menu-item a {color: var(--altColor); font-weight: 700;}
#menu-principal li a:after {content: ''; background: var(--mainColor); width: 100%; height: 3px; position: absolute; bottom: -10px;
    left: 50%; transform: translate(-50%, -50%) scaleX(0); transition: var(--animated);}
#menu-principal li a:hover:after {transform: translate(-50%, -50%) scaleX(1.0); }

.menuButton {background: var(--mainColor); color: white; border: none; border-radius: 5px; font-family: var(--mainFont);}
.menuButton:hover {background: #004764;}

.captionContent {padding: 15px;}

.carousel-caption {width: 100%; top: 2%; right: 0%; left: 0%; bottom: 0%;text-align: start; padding: 15px;}
.carousel-inner {position: relative;width: 100%;overflow: hidden;}

.captionSub {font-size:18px;font-family: var(--altFont); color: white;font-weight: 500;}
.captionTitle {font-size:40px;font-family: var(--mainFont); color: var(--mainColor); font-weight: 700; line-height: 50px; margin-bottom: 20px;} 
.captionText {font-size:18px;font-family: var(--textFont); color: white; margin-bottom: 25px;}

.captionButton, .captionButtonalt {margin-right: 0px; margin-bottom: 15px;background: var(--mainColor);color: white;font-family: var(--altFont);font-size: 18px; font-weight: 500;padding: 15px 30px; min-width: 210px; display: block; float: left; text-align: center; transition: var(--animated);}
.captionButtonalt {background:#454D52; }

.captionButton:hover, .captionButtonalt:hover {background: white; color: var(--altColor); min-width: 230px;}

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



.coreValues {color: white;font-family: var(--textFont);font-size: 18px;font-weight: 300;}


.servicesForm {background: #F5F5F5; padding: 20px;}
.servicesForm .formTitle {color: var(--altColor); font-size: 22px; font-weight: 600; font-family: var(--textFont);}
.servicesForm input, .servicesForm textarea {border: 1px solid #CCCCCC; border-radius: 0px; }
.servicesForm .formSend {display: flex; align-items: center; justify-content: center;}
.servicesForm .wpcf7-spinner {display: block;}
.servicesForm .wpcf7-submit { background: var(--mainColor);color: white;font-size: 20px;font-weight: 600;font-family: var(--textfont); border: none;padding: 10px 25px; transition: var(--animated);}
.servicesForm .wpcf7-submit:hover {background: var(--altColor); transform: scale(1.15);}

.servOvertitle:before {content: '';display: inline-block;float: left;width: 40px;height: 3px;background: var(--mainColor);    margin-top: 8px;margin-right: 10px;}


.contactForm {background: transparent; padding: 25px;}
.contactForm .formTitle {color: white; font-size: 22px; font-weight: 600; font-family: var(--textFont);}
.contactForm input, .contactForm textarea {border: 1px solid #CCCCCC; border-radius: 0px; }
.contactForm .wpcf7-spinner {display: block;}
.contactForm .wpcf7-submit { background: transparent; color: var(--mainColor);font-size: 20px;font-weight: 600;font-family: var(--textfont); border: none;padding: 10px 25px; border: 2px solid var(--mainColor); transition: var(--animated);}
.contactForm .wpcf7-submit:hover {background: var(--mainColor); color: white; transform: scale(1.15);}

.logoFooter {width: 350px;}
.shortDesc {font-size: 16px; margin-top:15px; }
.footer {background: url(/wp-content/uploads/footer_img.webp); background-color: #00161f; background-size: contain; background-position: bottom center; color:white; background-repeat: no-repeat;}
.footBot, .footBot a {color: white;}
.footer {padding: 100px 0px 0px 0px;}
.footPad {padding: 0% 5%;}

.footContact, .footBot {border-top: 2px solid rgb(255,255,255,.2); font-family: var(--mainFont); }

.footCat {border-top: 2px solid rgb(255,255,255,.2); }
.footer a {color: white; font-weight: 400; font-size: 18px; font-family:var(--textFont); text-decoration:none; transition: var(--animated);}
.footer a:hover {color: var(--mainColor);}

.footContact .address a, .footContact .phone a, .footContact .whats a, .footContact .mail a {position: relative; left: 35px;}
.footContact .address a:before, .footContact .phone a:before, .footContact .whats a:before, .footContact .mail a:before {
    font-family: 'Font Awesome 5 Free';font-weight: 900; display: block;font-size: 20px; position: absolute;left: -35px;top: -5px; color: var(--blueColor);}
.footContact .address a:before{content: '\f5a0';}
.footContact .phone a:before{content: '\f098';}
.footContact .whats a:before{font-family: 'Font Awesome 5 Brands';content: '\f232'; font-weight: 100;} 
.footContact .mail a:before{content: '\f0e0';}
.footNav a, .footCat a {margin: 5px 0px;}
.footNav a:before, .footCat a:before {content: '-'; color: var(--blueColor); margin-right: 5px;}
.footer b {font-size: 24px; font-family: var(--mainFont); color: var(--mainColor);}
.footBot strong {font-size: 18px; font-weight: 400;}

.navbar-toggler-icon {background: none; height: auto; line-height: 0px; padding: 4px 0px;}
.navbar-toggler {background: #00212e; color: white;}
.navbar-toggler:hover, .navbar-toggler:active, .navbar-toggler:focus {background:#9f8a4c; outline:none; border: none; }

.elementor-widget-icon-box.elementor-position-left .elementor-icon-box-icon, .elementor-widget-icon-box.elementor-position-right .elementor-icon-box-icon {display: inline-flex !important;}



/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .carousel-caption {top: 20%; left: 0%; padding: 0px 50px;}
    .captionButtonalt {margin-left: 20px;}
    .captionSub {font-size: 20px;}
    .captionTitle {font-size: 50px; line-height: 60px; }
    .captionText {font-size: 20px;}


}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .carousel-item {max-height: 650px;}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .carousel-item {max-height: auto;}
    .carousel-caption {top: 10%; left: 0%; padding: 0px 50px;}
    .contactForm {padding: 50px;}



}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .carousel-item {max-height: none;}
    .carousel-caption {top: 10%; left: 5%;}
    .footer {background-size: cover;}
    .topHeader {font-size: 18px;}
    .captionSub {font-size: 24px;}
    .captionTitle {font-size: 70px; line-height: 80px;margin-bottom: 40px;}
    .captionButton, .captionButtonalt {margin-right: 50px; font-size: 20px;}
    .elementor-widget-icon-box.elementor-position-left .elementor-icon-box-icon, .elementor-widget-icon-box.elementor-position-right .elementor-icon-box-icon {display: block;}
    .footNav {border-top: 2px solid rgb(255,255,255,.2); border-left: 2px solid rgb(255,255,255,.2); border-right: 2px solid rgb(255,255,255,.2); }
 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
    .servicesForm {padding: 25px 50px;}
    .carousel-caption {top: 20%; left: 10%;
    .contactForm { padding: 50px 150px 50px 100px;}


}

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

}