/*------ Variables */
:root {
    /*------ Colores */
    --principal-color: #363636;
    --secondary-color: #9B9B9B;
    --white-color: white;
    /*------ Tipografía */
    --normal: 12px;
    /*------ Espaciado */
    --space: 10px;
    --space-2: 20px;
    /* box shadow */
    --box: 0px 0 2px 1px #e6e5e9;
}

.prueba {
    border: 1px solid red;
}

html {
    font-family: 'Roboto', sans-serif;
    /* font-size: 62.5%;     */
}

* {
    box-sizing: border-box;

}

.topnav {
    display: none;
}

.upper_white {
    color: white;
    font-size: 3rem;
    font-weight: bold;
}

.p_white {
    color: white;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 45px;
    justify-content: center;
}

h2 {
    font-size: 3rem;
    font-weight: bold;
}

h3{
    font-size: 2rem;
    font-weight: bold;
}

p {
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 55px;
}

.jc_contreras_pic{
    display: flex;
    justify-content: center;
    align-content:center;
    /* flex-direction: column; */
}
.txt_javier_container{
    width: 90%;
    height: auto;
    padding-top:60px;
    padding-bottom: 60px;
}
#call_us{
    background-color: var(--principal-color);
}
.javier_info{
    background-color:black;
}
.card-text{
    font-size: 1rem;
    line-height: 25px;
    text-align: center;
}
.text_white{
    color: white;
}
footer {
    background-color: var(--principal-color);
    height: auto;
    padding-bottom: 20px;
}

.welcome_txt {
    padding-left: 20px;
    padding-right: 20px;
}

body {
    /* font-family: 'Lora', serif; */
    background-color: #f2f0ef;
    width: 100vw;
    line-height: 1.7em !important;
    overflow-x: hidden !important;
    color: #394561 !important;
}

#logo_hero {
    width: 80px;
}

.logo_content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.first_logo {
    width: 80px;
}

.nav_top {
    background-color: var(--principal-color);
    color: white;
    height: 50px;
    position: sticky;
}

.menu-ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: -13px;
}

ul {
    list-style: none;
}

li a {
    text-decoration: none;
    color: white;
    font-weight: 600;
}

.navbar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.split_gray_img {
    width: 2px;
    margin-right: 25px;
    margin-left: 25px;
}
.navTop {
    background-color: var(--principal-color);
    height: 20px;
}
.navbar {
    height: 120px;
}

.a_href_top {
    text-decoration: none;
    margin-right: 15px;
    color: var(--principal-color) !important;
    font-size: 1.2rem;
    font-weight: 400;
}
.a_href_topBlack{
    width: 220px !important;
    height: 100px;
    text-decoration: none;
    margin-right: 15px;
    background-color:var(--principal-color);
    color: white;
    font-size: 1.2rem;
    font-weight: 400;
    padding: 15px 30px 15px 30px;
    cursor: pointer;
}
.a_href_topBlack:hover{
    background-color:var(--principal-color);
    color: white;
}

.swiper {
    width: 100vw;
    height: 70vh;
  }

.questions_text {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.margin_top_single {
    margin-top: 2rem;
}

.questions_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(54, 54, 54, 0.1);
    width: 100%;
    height: auto;
    padding: 15px 0 15px 0;
    /* opacity: 0.1; */
}

.hero_title {
    color: white;
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    text-shadow: 1px 1px var(--secondary-color), 1px 1px var(--secondary-color), 1px 1px var(--secondary-color), 1px 1px var(--principal-color), 3px 3px var(--principal-color);
}

#main {
    margin-top: -10px !important;
}

.btn-first {
    border-radius: 3px;
    border: none;
    height: 30px;
    font-weight: 500;
    color: var(--principal-color);
    width: 120px;
    box-shadow: -1px 3px 12px 5px rgba(0, 0, 0, 0.74);
    -webkit-box-shadow: -1px 3px 12px 5px rgba(0, 0, 0, 0.74);
    -moz-box-shadow: -1px 3px 12px 5px rgba(0, 0, 0, 0.74);
}

.btn_wrapper {
    margin-top: 30px;
}

#logo_pq {
    margin-left: 40%;
}

#facebook {
    margin-top: 15px;
    margin-left: 50%;
    cursor: pointer;
}

#img-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.separador {
    height: 80px;
}

.txt-init {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#kitchen1 {
    width: 80%;
}

.icons {
    display: flex;
    justify-content: center;
    align-items: center;
}

.services_desc {
    height: 300px;
}

.services_ofer {
    margin-bottom: 100px;
}

.icon_service_pin {
    width: 60px;
}
.icon_service {
    width: 70px;
}

.icon_style_sm {
    height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.span_syle {
    font-size: 1.3rem;
    color: var(--principal-color);
    font-weight: 300;
}

#javi_pic {
    border-radius: 6px;
}

.span_bolder {
    font-size: 1.4rem;
    font-weight: 700;
}

.span_bold {
    font-size: 1.3rem;
    font-weight: 400;
}

.span_txt {
    font-size: 1rem;
    font-weight: 200;
}

.txt_javier {
    align-items: center;
    display: flex;
    text-align: justify;
    justify-content: center;
    flex-direction: column;
    width: 60%;
    padding-left: 25px;
    padding-right: 25px;
}

.year_info {
    margin-top: 150px;
}

.year_bold {
    font-size: 6rem !important;
    font-weight: 900;
    color: var(--principal-color) !important;
}
.modal{
    background-color: rgba(245, 84, 205, 0.1);
    cursor: pointer;
    opacity: 1;
    backdrop-filter: blur(8px);
}
.input_style {
    height: 50px;
    margin-bottom: 10px;
    border: 1px var(--principal-color) solid !important;
}
.input_style_area {
    margin-bottom: 10px;
    border: 1px var(--principal-color) solid !important;
}

.btn_principal {
    font-weight: bold !important;
    width: 260px;
    height: 60px;
    border-radius: 35px;
    border: none;
    color: var(--principal-color);
    font-weight: 900;
    font-size: 1.4rem;
    background-color: white;
        -webkit-box-shadow: 4px 6px 5px 0px rgba(0, 0, 0, 0.42);
    -moz-box-shadow: 4px 6px 5px 0px rgba(0, 0, 0, 0.42);
    box-shadow: 4px 6px 5px 0px rgba(0, 0, 0, 0.42);
}
.h2_white_sociales {
    color: var(--secondary-color);
    font-size: 3rem;
    font-weight: 900;
    text-align: left;
}
.h2_white_footer {
    color: white;
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
}
.h2_black_footer {
    color: var(--principal-color);
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
}
#sociales {
    background-color: var(--extra-white-color);
    height: 300px;
}
.sociales_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px;
}

.sociales_icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

a i {
    color: var(--principal-color);
    font-size: 4rem;
    margin-right: 5px;
}
/* slider */
.swiper-slide {
    position: relative;
  }

  .swiper-slide img {
    width: 100%;
    height: auto;
  }

  .swiper-slide .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .swiper-slide:hover .overlay {
    opacity: 1;
  }

  .swiper-slide h1 {
    font-size: 24px;
  }
  .animation-container{
    display: flex;
    justify-content: center;
    align-items: center;
  }
/* slider */
/* animacion */
@keyframes aparecer{
    0%{
       opacity: 0;
       transform: translateY(100px);
   }
   100%{
       opacity: 1;
       transform: translateY(0);
    }
   }
   .ocultar{
       opacity: 0;
   }
   .animar{
       animation: aparecer 1.3s;
   }

           /* Estilos para la animación */
           .animation-container {
            /* width: 400px; */
            height: 200px;
            overflow: hidden;
        }

        .animation-item {
            position: absolute;
            opacity: 0;
            animation: fade-in-out 10s infinite;
        }

        /* Definición de la animación */
        @keyframes fade-in-out {
            0%, 16.6% {
                opacity: 1;
            }

            20%, 100% {
                opacity: 0;
            }
        }

        /* Aplicar estilos de transición */
        .animation-item {
            transition: opacity 2s;
        }

        @keyframes count-up {
            0% {
              opacity: 0;
            }
            100% {
              opacity: 1;
            }
          }

          .free_quote {
            opacity: 0;
            animation: fade 2s infinite;
          }

          @keyframes fade {
            0% {
              opacity: 0;
            }
            50% {
              opacity: 1;
            }
            100% {
              opacity: 0;
            }
          }
/* animacion */


.article_bold {
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
}

.aricle_light {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 35px;
}

.specialize_txt {
    padding-left: 25px;
    padding-right: 25px;
}

.squeres {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
}

.pics_services {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

.title_service {
    color: var(--white-color);
    font-weight: bold;
    font-size: 3rem;
    cursor: pointer;
    text-transform: capitalize;
    text-shadow: 1px 1px var(--secondary-color), 1px 1px var(--secondary-color), 1px 1px var(--secondary-color), 1px 1px var(--principal-color), 3px 3px var(--principal-color);
}

.title_service:hover {
    font-size: 4rem;
}

.free_quote{
    margin-top: 10px;
    margin-bottom: 10px;
}

#basements {
    background: url(../img/basemets-aplus.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#cabinetry {
    background: url(../img/cabinetry.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#drywall {
    background: url(../img/drywall-aplus.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#custom_paint {
    background: url(../img/paint-aplus.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#flooring {
    background: url(../img/floring.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#masonery {
    background: url(../img/masonery-aplus.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#testimonials {
    background: url(../img/img/aplus24_b.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#framing {
    background: url(../img/framing-aplus.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#new_construction {
    background: url(../img/newconstruction-aplus-u4172-r-fr.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#remodels {
    background: url(../img/remodels-aplusgray.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#siding {
    background: url(../img/siding-aplusgray.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#tile {
    background: url(../img/tile-aplusgcontractorscom.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.test_text {
    height: 950px;
}

.testimonials{
    height: 350px;
    max-height: 350px;
}

.testimonials_name {
    font-style: italic;
    font-weight: 600;
    text-align: right;
    padding-left: 20%;
    padding-right: 20%;
}

.testimonials_txt {
    text-align: justify;
    padding-left: 20%;
    padding-right: 20%;
    line-height: 50px;
    height: 750px;
}

#testimonials_images {
    width: 150px;
}

.testimonials_img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -100px;
}

#logowhite {
    width: 40px;
}

.stars {
    width: 20px;
}

.txt_white {
    color: white;
}

.txt_bold {
    font-weight: bolder;
}

.fields {
    width: 322px;
    height: 46px;
    margin-left: 15px;
    border: 1px white solid;
    background-color: var(--principal-color);
    font-size: 1.6rem;
    font-weight: 500;
    border-radius: 8px;
    padding-left: 10px;
    color: white;
}

.fields-text {
    width: 322px;
    /* height: 46px; */
    margin-left: 15px;
    background-color: transparent;
    border: 1px var(--white-color) solid;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--white-color);
}
.fields-text:hover{
    border: 1px white solid;
    background-color: white;
    color: var(--principal-color);
}
.fields-text:active{
    border: 1px white solid;
    background-color: white;
    color: var(--principal-color);
}
.fields:hover {
    border: 1px white solid;
    background-color: white;
    color: var(--principal-color);
}
.fields:active {
    background-color: white;
    color: var(--principal-color);
}
.btn_aplus_white {
    font-weight: bold !important;
    width: 200PX;
    height: 50px;
    border-radius: 35px;
    color:var(--principal-color);
    font-weight: 700;
    font-size: 1.4rem;
    background-color:var(--white-color);
        -webkit-box-shadow: 4px 6px 5px 0px rgba(0, 0, 0, 0.42);
    -moz-box-shadow: 4px 6px 5px 0px rgba(0, 0, 0, 0.42);
    box-shadow: 4px 6px 5px 0px rgba(0, 0, 0, 0.42);
}
.btn_aplus {
    font-weight: bold !important;
    width: 200PX;
    height: 50px;
    border-radius: 35px;
    color:white;
    font-weight: 700;
    font-size: 1.4rem;
    background-color:var(--principal-color);
        -webkit-box-shadow: 4px 6px 5px 0px rgba(0, 0, 0, 0.42);
    -moz-box-shadow: 4px 6px 5px 0px rgba(0, 0, 0, 0.42);
    box-shadow: 4px 6px 5px 0px rgba(0, 0, 0, 0.42);
}
.btn_aplus:hover {
    background-color: var(--principal-color);
    color: white;
}
.form_wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.button_form{
    display: flex;
    justify-content: center;
    align-items: center;
}

.card_wrapper{
    display: flex;
    justify-content:space-around;
    align-items: center;
    flex-wrap: wrap;
}
#buidzoom{
    text-decoration: none;
}
#buidzoom_hover{
    text-decoration: none;
}
#buidzoom:visited{
    text-decoration: none;
}
/* interno */
.alert-success{
    display: flex;
    justify-content: center;
    align-content: center;
}
.alert-success_wrapper{
    background-color: var(--light-green);
    width: 600px;
    height: 80px;
    border-radius: 20px;
    border: 2px var(--dark-green__border) solid;
    margin-top: 20px;
    color: var(--dark-green__txt);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility:hidden;
}
#fullscreen-menu {
    display: none;
}
.btn_footer{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* interno */



@media screen and (max-width: 1500px) {
    .hero_title {
        font-size: 1.5rem;
    }

}
@media screen and (max-width: 1400px) {
    .swiper-slide .overlay {
        width: 100%;
        height: 87%;
      }

      .swiper {
        height: 87%;
      }

      .form_wrapper{
        margin-top: 20px;
      }


}
@media screen and (max-width: 993px) {
    .a_href_top {
        margin-right: 1px;
        font-size: 1rem;
        font-weight: 400;
    }

    .split_gray_img {
        width: 1px;
        margin-right: 10px;
        margin-left: 10px;
    }

    .a_href_topBlack{
        width: 200px !important;
        height: 100px;
        text-decoration: none;
        margin-right: 15px;
        background-color:var(--principal-color);
        color: white;
        font-size: 1rem;
        font-weight: 400;
        padding: 8px 10px 8px 10px;
    }
    .services_desc {
        height: auto;
    }
    .img_slider{
        width: 100vw;
    }

}

@media screen and (max-width: 763px) {
    .welcome_txt{
        margin-top: 15px;
    }

    h2 {
        font-size: 1.6rem !important;
        font-weight: bold;
    }
    .txt_javier {
        width: 100%;
        padding-left: 1px;
        padding-right: 1px;
    }

    .li_a_menu{
        color: white !important;
    }

    #fullscreen-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 100vw;
        max-height: 100vh;
        color: var(--extra-gray_bold-color);
        font-weight: bold;
        font-size: 1.6rem;
        z-index: 9999;
        /* padding: 20px; */
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 1;
        backdrop-filter: blur(8px);
      }

      .fullscreen_wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
      }

      #fullscreen-menu ul {
        text-align: center;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      #fullscreen-menu li {
        margin-bottom: 10px;
      }

      #fullscreen-menu a {
        text-decoration: none;
        color: #333;
        font-size: 18px;
      }
      .btn_principal {
        width: 200px;
        height: 60px;
        font-weight: 700;
        font-size: 1.4rem;
    }

    .hero_title {
        font-size: 1.2rem !important; 
    }
    .swiper-slide .overlay {
        display: none;
        background-color:transparent !important;
      }

      .swiper-button-next,
      .swiper-button-prev{
        width: 10px !important;
      }

      .welcome_txt {
        font-size: 1.8rem !important;
    }

    p {
        font-weight: 300;
        text-align: justify;
        font-size: 1.2rem;
        line-height: 35px;
    }

    .p_white {
        color: white;
        font-weight: 300;
        font-size: 1.2rem;
        line-height: 35px;
        justify-content: center;
    }
    .aricle_light {
        text-align: center;
    }
    .txt_white_wrapper{
        text-align: center !important;
    }
    .txt_white_wrapper p{
        text-align: center !important;
    }
    .h2_white_sociales_wrapper{
        text-align: center;
    }
}

@media screen and (max-width: 390px){
    .welcome_txt{
        margin-top: 15px;
    }

    .mobile-container {
        max-width: 480px;
        margin: auto;
        background-color: #555;
        height: 500px;
        color: white;
        border-radius: 10px;
    }
    .topnav {
        position: fixed;
        overflow: hidden;
        background-color: var(--principal-color);
        position: relative;
    }
    .topnav #myLinks {
        display: none;
    }
    .topnav a {
        color: white;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;
    }
    .topnav a.icon {
        background: var(--principal-color);
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 50px;
    }
    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }
    .topnav .active {
        background-color: var(--principal-color);
        color: white;
    }
    #logo_pq {
        width: 50px;
        margin-top: 1px;
        margin-left: 3%;
    }
    /* nav */
    .topnav {
        display: block;
    }
    .icon_service {
        width: 60px;
    }

    #javi_pic {
        width: 90%;
    }

    .span_syle {
        margin-top: 15px;
        font-size: 2rem;
    }

    .span_bolder {
        font-size: 1.8rem;
    }

    .span_bold {
        font-size: 1.6rem;
    }


    .span_txt {
        font-size: 1.7rem;
        font-weight: 200;
    }

    #carousel{
        width: 100%;
        /* margin-left:100%; */
    }

    #logo_hero {
        width: 60px;
    }

    .hero_title {
        font-size: 1rem !important; 
    }

    .btn_principal {
        width: 120px !important;
        height: 40px !important;
        font-weight: 700 !important;
        font-size: .8rem !important;
    }

    h2 {
        font-size: 1.4rem !important;
        font-weight: bold;
    }

    .nav_top {
        display: none;
    }

    .specialize_txt {
        padding-left: 1px;
        padding-right: 1px;
    }

    .services_desc {
        height: auto;
    }

    .icon_style_sm {
        height: 150px;
    }

    .testimonials_txt {
        margin-top: 20px;
        text-align: justify;
        padding-left: 1%;
        padding-right: 1%;
    }

    .test_text {
        height: 500px;
    }

    .form-content {
        margin-top: 30px;
    }
    .txt_white_wrapper{
        text-align: center !important;
    }
    .txt_white_wrapper p{
        text-align: center !important;
    }
}