/*
Theme Name: Structural System
Theme URI: 
Author URI: 
Description: A powerful Bootstrap 5 WordPress Theme with WooCommerce Support.
Version: 1.0
Tested up to: 5.9
Requires PHP: 5.6
License: MIT License
License URI: 
Text Domain: 
Tags: 

Use this theme to make something cool, have fun, and share what you've learned with others.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root{
    --main-color:#c02729;
    --secondary-color:#444;
    --main-light-color:#fff;
    --main-dark-color:#000;
}
.bg-main-color{
    background-color: var(--main-color);
}
.bg-secondary-color{
    background-color: var(--secondary-color);
}
.bg-light-color{
    background-color: var(--main-light-color);
}
.bg-main-color h2, .bg-main-color p, .bg-secondary-color h1, .bg-secondary-color h2, .bg-secondary-color p{
    color: var(--main-light-color);
}
body{
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-weight: 300;
    padding-top: 75px;
    overflow-x: hidden;
}
h1{ 
color: var(--main-color);
font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
font-weight: 500;
}
a{
    color: var(--main-color);
}
a:hover{
    color: var(--secondary-color);
}
p{
    font-weight: 200;
    color: var(--main-dark-color);
    font-size: 0.875rem;
}
small{
    font-size: 0.825rem;
}
.btn-primary{
    background-color: var(--main-color);
    border-color: var(--main-color);
    text-transform: uppercase;
    font-weight: 300;
    border-radius: 800px;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 00.875rem;
}
.btn-primary:hover,.btn-primary:focus{
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.page-template-page-contact #contact-float{
    display: none;
}
.btn-outline-secondary{
    border-radius: 800px;
    color: var(--main-light-color);
    border-color: var(--main-light-color);
    padding-left: 2rem;
    padding-right: 2rem;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 00.875rem
}
.btn-outline-secondary:hover{
    background-color: var(--main-light-color);
    border-color: var(--main-light-color);
    color: var(--secondary-color);
}
.tab-content p{
    color: var(--main-light-color);
}
.nav-tabs .nav-link{
    color: var(--main-light-color);
}
.nav-tabs .nav-link:hover{
    border-radius: 0;
    color: var(--main-light-color);
}
.nav-tabs .nav-link.active{
    background-color: transparent;
    border-bottom: 1px solid var(--secondary-color);
    border-radius: 0;
    color: var(--main-light-color)!important;
}
.accordion-button{
    color: var(--main-color);
}
.accordion-button:not(.collapsed){
    background-color: var(--main-color);
    color: var(--main-light-color);
}
.accordion-button::after{
    background-image: url(img/accordion-icon-collapsed.svg);
}
.accordion-button:not(.collapsed)::after {
    background-image: url(img/accordion-icon.svg);
    transform: var(--bs-accordion-btn-icon-transform);
}
.form-range::-webkit-slider-thumb {
    background: var(--main-color);
}
.form-range::-moz-range-thumb {
background: var(--main-color);
}
.form-range::-ms-thumb {
background: var(--main-color);
}
.nav-link.active{
    color: var(--main-color)!important;
}
.carousel-caption{
    left: 0;
    right: 0;
    text-align: left;
    bottom: 5rem;
    top: 5rem;
}
@media(max-width:576px){
    .carousel-caption{
        bottom: 0;
        top: 1rem;
    }
    .carousel-indicators{
        bottom: -50px;
    }
}
.carousel-indicators [data-bs-target]{
    width: 15px;
    height: 15px;
    border-radius: 50%;
}
.services-list h1{
    font-weight: 500;
}
.services-list ul{
    padding: 0;
    margin: 0;
}
.services-list ul li{
    background-color: #333;
    color: var(--main-light-color);
    list-style: none;
    width: max-content;
    padding: 5px;
    margin-bottom: 5px;
    border-left: 10px solid var(--main-color);
    font-weight: 100;
}
.nav-link{
    text-transform: uppercase;
    font-size: 0.825rem;
    color: var(--main-dark-color);
}
.nav-link:hover{
    color: var(--main-dark-color);
}
.card{
    border: none;
    background-color: transparent;
}
.card-img-top{
    border-radius: 0;
}
.nav-bg-theme{
    background-color: var(--main-light-color);
    -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.20); 
    box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.20);
    transition: all 0.5s;
}
.home .nav-bg-theme{
    background-color: transparent;
    box-shadow: none;
    -webkit-box-shadow:none;
}
.nav-bg-theme .navbar-brand img{
    width: 140px;   
}
.home .nav-bg-theme .navbar-brand img{
    width: 180px;   
}
.nav-bg-theme-scroll{
    background-color: var(--main-light-color)!important;
    -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.20)!important; 
    box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.20)!important;
}
.nav-bg-theme-scroll .navbar-brand img{
    width: 140px!important;   
}
.navbar-brand img{
    transition: all 0.5s;
}
header form.search{
    margin-block-end: 0;
}
.navbar-toggler{
    border: none;
}
.tab-content{
    min-height: 155px;
}
.btn-check:focus+.btn, .btn:focus{
    border-color: transparent;
}
.btn-close{
    border: 1px solid;
    border-radius: 50%;
    padding: 0.625rem;
    margin-top: 2.5rem;
}
.offcanvas-body{
    flex-grow: 0;
}
.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 40px;
}
.owl-theme .owl-dots .owl-dot span {
    width: 15px;
    height: 15px;
}
.wpcf7 form .wpcf7-response-output{
    margin: 1em 0;
    padding: 1rem 1rem 1rem 3rem;
}
.alert-danger{
    border: 1px solid #f5c2c7!important;
}
.alert-success{
    border: 1px solid #badbcc!important;
}
.form-control{
    font-weight: 300;
}
.widget-title{
    font-size: 1.75rem;
    border-bottom: none!important;
}
aside .widget{
    background-color: transparent!important;
    padding-top: 0!important;
}
aside .widget h2{
    padding-top: 0!important;
}
#comments .comment-form-cookies-consent{
    display: none;
}
.comments-title, #reply-title{
    font-size: 1.75rem;
}
#comments .url{
    font-size: 1.25rem;
}
.comment-reply{
    background: none;
}
/*Theme*/
.page-banner{
    background-color: var(--main-color);
    background-image: url(img/banner-gruas-2.png), url(img/bg-footer-2.png);
    background-position: center bottom, center bottom;
    background-size: 40%, 60%;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}
.page-banner h1{
    margin: 0 0 0 0; 
    text-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    color: var(--main-light-color);
}
.contact a{
    background-color: var(--main-color);
    border-color: var(--main-color);
    text-transform: uppercase;
    font-weight: 300;
    border-radius: 800px;
    padding-left: 2rem!important;
    padding-right: 2rem!important;
    font-size: 00.875rem;
    color: var(--main-light-color)!important;
}
.contact a.active{
    color: var(--main-light-color)!important;
}
.contact a:hover{
    background-color: var(--secondary-color);
    color: var(--main-light-color);
}
.rss a{
    color: var(--main-color);
    border: 1px solid var(--main-color);
    width: 26px;
    height: 26px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    padding: 1px 0 0 1px!important;
    font-size: 1rem;
}
.rss a:hover{
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}
.sidebar ul{
    padding-left: 1rem;
    list-style-image: url(img/angle-right-solid.svg);
}
.sidebar ul li{
    line-height: 1;
    margin-bottom: 0.5rem;
}
.sidebar ul li a{
    text-decoration: none;
    font-size: 00.875rem;
}
.pagination{
    margin: 0 auto;
    width: auto;
}
.pagintion a{
    color: var(--main-color);
}
.pagination a:hover{
    color: var(--secondary-color);
}
.bg-full{
    position: absolute;
    width: 30%;
    bottom: 0;
    top: 0;
    z-index: 1;
}
/*home*/
.grua-home{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30%;   
}
.grua-home.gancho{
    z-index: 99;
}
@media(max-width:576px){
    .grua-home{
        width: 65%;
        left: -160px;
    }
}
.banner-home-small{
    position: relative;
/*     right:calc(var(--bs-gutter-x) * .5); */
    height: 100%;
    z-index: 99;
}
@media(max-width:576px){
    .banner-home-small{
        height: auto;
    }
}
#about{
    overflow: hidden;
}
#about p:last-child{
    margin-bottom: 0;
}
.milestone{
    width: 100px;
    height: 200px;
    display: inline-block;
    position: relative;
}
#milestones h2{
    font-weight: 600;
    background-color: var(--secondary-color);
    color: var(--main-light-color);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: inline-block;
    padding-top: 30px;
}
.gradient-overlay{
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 0;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,0.8) 100%);
    z-index: 98;
}
.reflect{
    -webkit-box-reflect: below;
}
#brands{
    background-color: var(--main-color);
    color: var(--main-light-color);
}
#brands h1{
    color: var(--main-light-color);
}
.brand{
    background-color: var(--main-light-color);
    border-radius: 800px;
    width: 105px;
    height: 105px;
    display: inline-block;
    padding-top: 15px;
    
}
.brand img{
    mix-blend-mode: multiply;
    display: inline!important;
    width:70%!important;
}
#services{
    background-color: var(--main-light-color);
}
#services h1{
    color: var(--main-color);
}
#services h5{
    height: 72px;
    margin-bottom: 1.2rem;

}
@media(max-width:576px){
    #services h5{
        height: auto;
    }
}
#services img{
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);      
}
#services h5, #services p{
    color: var(--main-dark-color);
}
#services p::before{
    content: '';
    width: 20%;
    height: 5px;
    background-color: var(--secondary-color);
    display: block;
    margin: 10px auto 0;
    position: relative;
    top: -5px;

}
#services .btn-outline-secondary:hover{
    color: var(--main-color);
}
#featured{ 
    background-color: var(--secondary-color);
    color: var(--main-light-color);
}
#featured p{
    color: var(--main-light-color);
}
#news .card-title{
    height: 50px;
}
    

/*page*/
#content{
    background-image:url(img/bg-footer-2.png);
    background-size: contain;
    background-position:center bottom;
    padding-bottom: 10rem;
    background-repeat: no-repeat;
    overflow: hidden;
}
@media(max-width:576px){
    #content{
        padding-bottom: 0;
    }
}

/*about*/
.tabs-about{
    width: calc(91% - 3rem);
}
@media(max-width:576px){
    .tabs-about{
        width: 100%;
    }
}

/*services*/
.service .container{
    position: relative;
    z-index: 2;
}
.inner-page.services #content{
    background-position: -660px 160px, center bottom;
}

.services .s-1{
    background-repeat: no-repeat;
    min-height: 200px;
    
}
.services .s-2{
    background-repeat: no-repeat;
    min-height: 200px;
}
.services .s-3{
    background-repeat: no-repeat;
    min-height: 200px;
   
}
.services .s-4{
    background-repeat: no-repeat;
    min-height: 200px;
}
@media(max-width:576px){
    .services .s1, .services .s2, .services .s3, .services .s4{
        background-size: cover;
    }
}
/*news*/
.inner-page.news #content{
    background-position: -520px -60px, center bottom;
}
/*Cases*/
.cases .card{
    flex-direction: row;
}
.cases .card img{
    width: 20%;
    /* height: fit-content; */
}
@media(max-width:576px){
    .cases .card{
        flex-direction: column;
    }
    .cases .card img{
        width: 100%;
    }
}
.cases .card .card-body{
    padding-top: 0;
}
.cases aside .card{
    flex-direction: column;
}

/*footer*/
footer{
    background-color: #eee;
    overflow: hidden;
}
footer .nav-link{
    padding: 0 0 5px 0;
}
.bg-footer{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
}

/*landing*/
.page-template-page-landing .carousel-caption h1, .page-template-page-landing .carousel-caption p{
    text-shadow: 0px 0px 15px rgba(0,0,0,0.6);
}
.page-template-page-landing #contact-float{
    display: none;
}
.page-template-page-landing  h2{
    color: var(--main-color);
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
    font-weight: 500;
}
.page-template-page-landing ul, .page-template-page-landing ol{
    font-size: 0.875rem;
    font-weight: 200;
}
.page-template-page-landing .carousel-dark .carousel-item img.md{
    height: 80vh;
}
.page-template-page-landing .carousel-dark .carousel-caption{
    top:5rem;
    bottom: 5rem;
}
.page-template-page-landing .carousel-dark .carousel-caption .row{
    height: calc(80vh - 10rem);
}
.banner-overlay{
    height: 80vh;
    position: absolute;
    display: block;
    width: 100%;
    background: linear-gradient(45deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
    top: 0;
}
#scroll-form{
    position: absolute;
    top:75px;
    height: 80vh;
    z-index: 5;
    width: 100%;
    display: block;
    pointer-events: none;
}
#scroll-form .row.outer{
    height: 80vh;
    padding: 1rem 0;
}
#scroll-form .form-box{
    /* background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 100%); */
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
    border-radius: 0.375rem;
    pointer-events: auto;
    color: var(--main-light-color)!important;
    -webkit-box-shadow: 0px 0px 15px 5px rgb(0 0 0 / 20%);
    box-shadow: 0px 0px 15px 5px rgb(0 0 0 / 20%);
}
#scroll-form .form-box h2, #scroll-form .form-box p{
    color: var(--main-color)!important;
}