/* 
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
*/

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');


:root {
    --animated: all .3s ease-in-out;
    --mainColor: #131520;
    --altColor: #1b7eda;
    --darkColor: ;
    --whiteColor: ;
    --darkGray: #808080;
    --lightGray: ;
    --mainFont: 'DM Sans', sans-seriff;
    --textFont: 'Roboto', sans-seriff;
}

body {font-family: var(--textFont);}
a {text-decoration: none;}

.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;}

.noSpace, .noSpace p {padding: 0px; margin: 0px;}

.sidenav {
    height: 0px;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: hsl(231deg 25% 10% / 97%);
    overflow-x: hidden;
    transition: 0.5s;
}

a.white {color: white; transition: var(--animated); text-decoration: none;}
a.white:hover {color: var(--altColor);}

.carousel-control-prev,
.carousel-control-next {padding: 10px 15px 5px 10px; ;transform: scale(1); border-radius: 0px;border: none;width: 50px;height: 50px;margin: auto; transition: var(--animated); background: white; outline:none; }

.carousel-control-next-icon, .carousel-control-prev-icon {filter: brightness(0.5); width: 25px; height: 25px;}


.carousel-control-prev:hover,.carousel-control-next:hover, .carousel-control-prev:focus,.carousel-control-next:focus,.carousel-control-prev:active,.carousel-control-next:active {opacity: 1; background: white;s}


.footer {background: var(--mainColor); color: white; border-top: 2px solid var(--altColor);}

.header {background: var(--mainColor);}

.headerTop {padding: 10px 15px;}
.headerBot {padding: 10px 15px 20px 15px;}



.header .logo {width: 250px;}

.topContact .overTitle {font-weight: 800; color: var(--darkGray); font-size: 14px;}
.topContact .subTitle {font-family: var(--mainFont); font-size: 16px; font-weight: 500;}

.topContact .iconWhats a {display:flex ;background: var(--altColor); color: var(--mainColor);  padding: 10px 12px; border-radius: 10px 0px 10px 10px; font-size: 22px; }

.topContact .iconTel a {display: flex; background: var(--altColor); padding: 11px 14px;; border-radius: 10px 0px 10px 10px; transition: var(--animated);} 
.topContact .fa-phone-volume {font-size: 20px;color: var(--mainColor);transform: rotate(325deg);}

.topContact .iconMail a{display: flex; background: var(--altColor);padding: 10px;border-radius: 10px 0px 10px 10px; line-height: 0px; transition: var(--animated);} 

.topContact .iconWhats a:hover, .topContact .iconTel a:hover, .topContact .iconMail a:hover {background: white;}

.topContact .iconLoc {background: var(--altColor);padding: 11px;border-radius: 10px 0px 10px 10px; line-height: 0px;} 
.topContact .fa-envelope, .topContact .fa-map-marked-alt {font-size: 22px;color: var(--mainColor);}


.topWhats { border:2px solid var(--altColor); border-radius:10px 0px 10px 10px; transition:var(--animated); }
.topWhats .iconWhats {background: var(--altColor);padding: 12px 14px 12px 14px;border-radius: 6px 0px 0px 6px;line-height: 0px; transition: var(--animated);}
.topWhats .fa-whatsapp {font-size: 26px;color: var(--mainColor);} 
.topWhats .subTitle {font-family: var(--mainFont);font-size: 16px;font-weight: 500;}

.topWhats:hover {border: 2px solid white; background: white;}
.topWhats:hover .iconWhats {background: var(--mainColor);}
.topWhats:hover .subTitle {color: var(--mainColor);}
.topWhats:hover .fa-whatsapp {color: var(--altColor);} 



.navbar-toggler {background-image: none; background-color: transparent !important; border: none; padding: 0px;}
.navbar-toggler-icon {width: auto; height: auto;}
.navbar-toggler-icon i {color: var(--mainColor);background: white;padding: 10px 15px;border-radius: 5px; transition: var(--animated);}
.navbar-toggler-icon i:hover {background: var(--altColor);}

/* General Styles for Main Menu Items */
#menu-principal > li.menu-item:first-child {padding: 0px 20px 0px 0px; margin-right:10px; }
#menu-principal > li.menu-item:not(:first-child) {margin-right: 10px;padding: 0px 10px 10px 10px;}

#menu-principal > li.menu-item > a {font-size: 17px;font-weight: 600; color: white; letter-spacing: 1px; position: relative;text-decoration: none;font-family: var(--mainFont);transition: var(--animated);}

#menu-principal > li.menu-item:not(.menu-item-has-children) > a:before {
    content: '';width: 100%;height: 2px;background: #1a1a1a;position: absolute;bottom: -5px;left: 0;}
#menu-principal > li.current-menu-item > a {color: white;}
#menu-principal > li.menu-item.current-menu-item > a:before {
    background: var(--altColor); !important;  /* Use !important to force it if necessary */
}
#menu-principal > li.menu-item:not(.menu-item-has-children) > a:after {
    content: '';width: 100%;height: 2px;background: var(--altColor);position: absolute;
    bottom: -5px;left: 0;transform: scaleX(0);transform-origin: left;transition: var(--animated);
}
#menu-principal > li.menu-item > a:hover {color: var(--altColor);}
#menu-principal > li.menu-item:not(.menu-item-has-children) > a:hover:after {transform: scaleX(1.0);}

/* Styles for Submenu */
#menu-principal .menu-item-has-children {position: relative;}
#menu-principal .menu-item-has-children > ul.sub-menu {
    display: block;position: absolute;top: 35px;opacity: 0;padding: 0;width: 305px;max-height: 0px;transition: var(--animated);z-index: 2;}
#menu-principal .menu-item-has-children:hover > ul.sub-menu {opacity: 1;background: white;max-height: 260px;filter: drop-shadow(0px 5px 4px rgb(0, 0, 0, .25));}
#menu-principal .menu-item-has-children > a:hover {cursor: none;}

/* Submenu Items */
#menu-principal .menu-item-has-children > ul.sub-menu > li {
    color: white;padding: 15px 0px 10px 5px;list-style-type: none;transform: scaleY(0);transition: var(--animated);transform-origin: top;}
#menu-principal .menu-item-has-children:hover > ul.sub-menu > li {transform: scaleY(1.0);}
#menu-principal .menu-item-has-children > ul.sub-menu > li > a {
    font-size: 18px;font-weight: 400;color: #1a1a1a; ;margin-left: 5px;text-decoration: none;}
#menu-principal .menu-item-has-children > ul.sub-menu > li > a:before {
    display: inline-block;content: '\f054';margin-left: 0;margin-right: 5px;font-family: "Font Awesome 5 Free";font-size: 15px;
    font-weight: 900;color: #1a1a1a;opacity: 0;transition: .25s linear;
}

#menu-principal .menu-item-has-children > ul.sub-menu > li > a:hover:before {margin-left: 5px;opacity: 1;}

.fa-window-close {color: var(--altColor);}
#menu-principal-1 .sub-menu {list-style-type: none; padding: 0px;}
#menu-principal-1 li {margin: 5px 0px;}
#menu-principal-1 li a {color: white; font-size: 18px;}
#menu-principal-1 li .sub-menu li a {color: #b1b1b1;}
.navMenu .side-titulo {color: #777ea8;}

.carousel-caption {height: auto;width: auto; top: 15px; left: 10px; right: 5px;}
.captionTop, .captionBot {text-align: start;}
.captionTop {position: absolute; top: 0%; bottom: auto;}
.captionBot {position: absolute; bottom: 0%; top: auto;}
.captionTitle {font-family: var(--mainFont);font-size: 34px;letter-spacing: 4px;font-weight: 800;line-height: 36px;filter: drop-shadow(0px 5px 1px rgb(0, 0, 0, .25));}
.captionSub {font-family: var(--textFont); font-size: 21px; line-height: 26px; font-weight: 400; letter-spacing: 2px;}
.subCaption i {font-size: 28px;}
.subCaption {font-family: var(--mainFont);color: var(--altColor);font-size: 18px;font-weight: 400;font-style: italic;}

.iconsHome img {background: #131520;padding: 20px;}
.homeButton a {transition: var(--animated) !important;}
.homeButton a:hover {border-color: #1a1a1a !important; border-radius: 100px;}

.slick-dots {width: fit-content; right: 150px; margin: 0px; bottom: 50px;}
.slick-dots li {margin: 0px6px; width: 80px; height: 12px;}
.slick-dots li button {width: 80px; height: 6px; background: var(--mainColor); border-radius: 0px;}
.slick-dots li.slick-active button {background: white;}
.slick-dots li button:before {display: none;}
.slick-dots li button:hover {background: var(--altColor) !important;}
.slick-dotted.slick-slider {margin: 0px;}

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

.servBlue p {font-family: var(--textFont); font-size: 18px;}
.serviciosUl {font-family: var(--textFont); font-size: 18px; font-weight: 400;}


.buttonPost {background: var(--mainColor);padding: 10px 20px;font-family: var(--mainFont);color: white;font-size: 16px;font-weight: 600;border-radius: 100px;}
.buttonPost:hover {background: var(--altColor);}

.formContacto input, .formContacto select, .formContacto textarea {
    border: 2px solid var(--altColor);}
.formContacto input[type="submit"] {border: 2px solid white; background: transparent; padding: 8px 25px; font-weight: 600; color: white;text-transform: uppercase; font-family: var(--mainFont); transition: var(--animated);}
.formContacto input[type="submit"]:hover {background: var(--altColor); padding: 8px 35px; border-radius: 100px; border: 2px solid var(--altColor);} 

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .captionTop {top: 10%;}
    .captionTitle {font-size: 55px; line-height: 66px;}
    .captionSub {font-size: 26px;}
    .captionBot {bottom: 10%;}
    .subCaption {font-size: 20px;}
   
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
   
   .carousel-item img {max-height: 800px;}
   .carousel-caption {left: 50px; right: 50px;}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .captionTop {top: 15px;left: 50px;right: 150px;}
    .captionBot {bottom: 10px;left: 50px;right: 150px;}


}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .headerTop {padding: 10px}
    .headerBot {padding: 10px;}

    .topContact .iconMail, .topContact .iconLoc {padding: 14px;}
    .topContact {padding: 10px 14px 10px 18px;}

    .carousel-item img {max-width: calc(100% - 100px); margin: 0 auto;}
    .carousel-caption {height: auto;width: auto;top: 8%;left: 50px;bottom: 8%;}
    .captionTitle {font-size: 55px;line-height: 65px;}
    .captionSub {font-size: 24px;line-height: 30px; max-width: none;}
    .postHome {min-height: 110px;}



}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
    #menu-principal > li.menu-item:not(:first-child) {margin-right: 25px;}
    .postHome {min-height: 75px;}


}

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