html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html { font-size: 16px;}
}

html {position: relative; min-height: 100%;}

body {  margin-bottom: 60px;  font-family: 'degular', sans-serif;  /*overflow-x: hidden; width: 100vw;*/}
/*section{max-width:100vw; overflow-x:hidden;}
section video {max-width:100vw; overflow-x: hidden;}*/
.navbar2 {
    position: fixed;
    top: -140px;
    width: 100%;
    transition: top 0.5s ease-in-out;
    z-index:1000;
}

.navbar2.show {
    top: 0;
}

.aspiria_logo_nav {height: 57px;width: auto;}
.btn-warning { border-radius: 10px; border: 1px solid black; background-color: #F19A38; color: white; padding:.200rem 1rem;}
.btn-warning:hover{background-color:white; color: black; border: 1px solid black;}
.px-custom {
    padding-left: 5.5%;
    padding-right: 5.5%;
}
.py-custom {   padding-top: 2.8%;}
.row{margin-right:0px;margin-left:0px; --bs-gutter-x:0px;
}

.tag-section {  /*width: 100vw;*/  position:relative;  height: 100vh;}
.tag-section video {position: absolute;top: -9.5%; left: 0; width: 100%;height: 105%;object-fit: cover;}
.tag-section::before {  content: "";position: absolute;top: 41%;left: 0;  width: 100%;height: 55%; background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255, 0.001));  z-index: 1;}
.tag-section div {position: relative; z-index: 1;}
.main-text {padding-left: 13.5%;color: black;}
.main-text-2 {padding-top: 3%;padding-left: 17%;padding-right: 14%; color: black;}
.main-text h1 {margin-top: 22.4%;font-size: 76px;line-height: 75px;font-weight: 700;}
/*hr {border: none; border-bottom: 1px solid black; margin: 5% 0 0 0; width: 165px;}*/
.hr-vertical-line{width:15%; max-height:5px; border-bottom:1px solid black; position:relative; margin-top:5%;}
.hr-vertical-line-child {max-height:5px; border-bottom:2px solid black; width:20%; position:relative; top:-4%; left:100%; transition: left 1s ease-in-out;}
.hr-vertical-line-child.desplazar{left:0%;}

.main-text h2 {margin-top:1%;font-size:40px;font-weight:600;}
.main-text h3 {margin-top: 0.5%;   font-size:25px;}

.info-btn { text-align: center;padding: 9px 16px 9px 16px;border-radius: 8px 0 0 8px; border: 1px solid black;width: 115px; background-color:rgba(255, 255, 255, 0.5)}
.info-btn:hover{background-color:black; color: white;}
.arrow-btn { padding:  9px 12px 9px 12px;border: 1px solid black; border-radius: 0px 8px 8px 0px; background-color: rgba(255, 255, 255, 0.5)}

.col-info-btn {margin-top: 6%;}
.step-1-text, .step-2-text, .step-3-text, .step-4-text, .step-5-text, .step-6-text { display:inline-block; text-align: left; font-size: 18px; line-height: 1.1em; color: rgb(112,112,112);  letter-spacing: 0em;}
.step-1-text {font-weight: bold;}
.step-2-text { padding: 0 0.2em 0 0.2em;}
.step-3-text { padding: 0 0.8em 0 0.8em;}
.step-4-text {padding: 0 1em 0 1em;}
.step-5-text {  padding: 0 3em 0 3em;}
.step-6-text {font-weight: bold; padding: 0 2em 0 2em;}

.step-circle {  position: relative; height: 67px;width: 67px;margin: auto;}
.left-div {margin-top:35%;}
.right-div {margin-top:13%;}


.step-circle h1 { position: relative;top: -102%;color: white;  font-size:54px; font-weight: bold;}

.step-section { background-image: url('/images/ondas.png'); background-size: cover;  background-position: center center; background-repeat: no-repeat; height: 400px; /*width: 100vw;*/}
.section-mas-info div h3 {margin-top: 5%;font-size: 40px; letter-spacing: 0.08em;}

.section-cuidado-ambiente{padding-left:3%; padding-right:4%; /*width: 100vw;*/}
.section-cuidado-ambiente div div h3{font-size:40px; letter-spacing:0.08em; line-height:1.5em;}
.section-cuidado-ambiente div div p{letter-spacing:0.05em;line-height:1.8em; font-size:16px;}
.section-cuidado-ambiente div .img-container {overflow:hidden; display:flex; align-items:center; max-height:630px;}
.section-cuidado-ambiente div div img {width: 948px; height:auto; object-fit:cover }

.section-ahorro div div img {height: 740px;}
.section-ahorro div div h3{padding: 0 9em 0 4em; font-size: 40px; letter-spacing: 0.08em; line-height: 1.5em;}

.tag-section-solar {position: relative; max-height: 600px;  height: 600px;overflow: hidden; /*width: 100vw;*/}
.tag-section-solar video {  position: absolute; left: 0; width: 100%;height: 100%;object-fit: cover;}
.tag-section-solar div {height: 85%;left: 4.5%;position: relative; z-index: 1}

.card { background-color: black;color: white;border-radius: 15px;width: 30rem; position: relative;top:30%; transition: top 1s ease-in-out;}
.card.subir {top: 0; /* posición final del elemento */}

.card-title { line-height: 1.8em !important;  font-size: 24px;letter-spacing: 0.08em;}
.card-text {font-size: 16px !important; line-height: 1.8em !important;  letter-spacing: 0.04em; margin-bottom: 0%;}
.card-body { padding-top: 18%; margin-left: 9%; margin-right: 15%;}
.card-vertical-line{max-height:5px; width:83%; border-top: 1px solid white; transform: rotate(90deg); position:relative; top:-50%; left:-36%!important;}
.card-vetical-line-child{max-height:5px; width:30%; border-top: 3px solid white; transform: rotate(90deg); position:relative; top:0%; left:-9.3%!important;transition: top 1s ease-in-out;}
.card-vetical-line-child.subir{top:-63%;}

.row-beneficios {line-height: normal;  font-size: 30px;  letter-spacing: 0.08em;padding-right:15%;padding-left: 15%;}
.row-beneficios .col { padding-top: 12%;/*border-bottom: solid 1px black;*/ /*margin: 0 11% 0 11%;*/}
.p-vertical-line{max-height:5px; border-bottom: 1px solid black; width:60%; position:relative;}
.p-vertical-line-child {max-height:5px; border-bottom:2px solid black; width:19%; position:relative; left:80%; transition: left 1.5s ease-in-out;}
.p-vertical-line-child.desplazar{left:0;}

.h2-form {  font-size: 30px;  line-height: 1.4em;  font-weight: bold !important;  margin: 5% 0 5% 0;}
.form-control {  border-top: none;  border-left: none;  border-right: none;  border-radius: 0px;  border-bottom: 2px solid black;}
.form-control:focus {border-color: transparent;box-shadow: none;border-bottom: 2px solid black;}
.form-select {  border-top: none;  border-left: none;   border-right: none; border-radius: 0px; border-bottom: 2px solid black; font-weight: 600;}
.form-select:focus {border-color: transparent;box-shadow: none;border-bottom: 2px solid black;}
.form-select option {color:rgb(255,203,5);}
.form-select option:hover{background-color: yellow !important;}

.btn-dark { border-radius: 30px;width: 147px;height: 42px; background-color: black;}
.btn-dark:hover{background-color:white; color: black; border: 2px solid black;}
footer div { color: black;}
.footer-row-m { margin: 15% 0 7% 0;}
.footer-row div p {letter-spacing: 0.04em; font-size: 16px;}
.footer-row .col-n2 { padding-left: 6%;}
.footer-row .col-n3 { padding-left: 6%; padding-right: 7%;}
.footer-icon { height: 24px; width: 24px; }
.custom-tooltip {background-color:transparent;}
.custom-tooltip .tooltip-inner{background-color:white; color:black; border: 1px solid gray; max-width:400px;}
.custom-tooltip .tooltip-arrow::before{border-bottom-color: gray;}
/*Media querys css styles*/

@media screen and (max-width: 1700px) {
    .main-text {
        padding-left: 20%;
    }

        .main-text h1 {
            margin-top: 6%;
            font-size: 60px;
            line-height: 60px;
        }

        .main-text h2 {
            font-size: 32px;
        }

        .main-text h3 {
            font-size: 20px;
        }

    .section-mas-info div h3 {
        font-size: 30px;
        letter-spacing: 0.08em;
    }

    .section-ahorro div div img {
        height: 500px
    }

    .section-ahorro div div h3 {
        padding: 0 6em 0 4em;
        font-size: 30px;
        letter-spacing: 0.08em;
        line-height: 1.5em;
    }

    .main-text-2 {
        padding-right: 11%;
        padding-left: 14%;
    }

    .section-cuidado-ambiente {
        padding-right: 2%;
    }

        .section-cuidado-ambiente div div h3 {
            font-size: 30px;
        }

        .section-cuidado-ambiente div div p {
            font-size: 14px;
        }

        .section-cuidado-ambiente div .img-container {
            max-height: 450px
        }

        .section-cuidado-ambiente div div img {
            height: auto !important;
            width: 100%;
        }

    .section-beneficios {
        padding-top: 5% !important;
        padding-bottom: 5% !important;
    }

        .section-beneficios div div img {
            height: auto !important;
            width: 100%;
        }

    .row-beneficios {
        font-size: 23px;
        padding-right: 5%;
        padding-left: 5%;
    }
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
    /*.tag-section{height:90vh;}*/
    .section-ahorro div div img{width:90%; height:auto !important;}
    .section-ahorro div div h3 {padding: 0 3em 0 3em;}
    .section-cuidado-ambiente div div img {width:95%; height:auto !important;}
/*    .section-beneficios{padding-top:5% !important; padding-bottom:5% !important;}
*/    .section-beneficios div div img {width:100% !important; height:auto !important;}
}
@media screen and (max-width: 820px) {
    /*.tag-section{height:60vh;}*/
}
@media screen and (max-width: 768px) {
    .footer-row div p {
        padding-left: 18%;
        padding-right: 18%;
    }

    .section-ahorro div div img {
        height: 350px !important;
    }

    .section-ahorro div div h3 {
        padding: 0 3em 0 3em;
        font-size: 27px;
    }

    .main-text-2 {
        padding-right: 6% !important;
        padding-left: 9% !important;
    }

    .section-cuidado-ambiente div div h3 {
        font-size: 27px;
    }

    .section-cuidado-ambiente div .img-container {
        max-height: 400px !important;
        max-width: 100%;
    }

    .section-cuidado-ambiente div div img {
        height: 400px !important;
    }

    .tag-section-solar div {
        left: 2%;
    }

    .section-beneficios div div img {
        height: 225px !important;
    }

    .section-beneficios {
        padding-top: 10%;
        padding-bottom: 10%;
    }

    .row-beneficios .col {
        margin: 0 3% 0 4%;
    }

    .px-5 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    /*.footer-row .col-n2{padding-left:0%;}*/
    .footer-row .col-n2 {
        padding-left: 0%;
        padding-right: 0%;
    }

    .footer-row div p {
        padding-left: 0%;
        padding-right: 0%;
    }

    .footer-row .col-n3 {
        padding-left: 0%;
        padding-right: 5%;
    }
}
@media screen and (max-width: 480px) {

   /* .tag-section {
        height: 70vh;
    }*/
    .main-text {
        padding-left: 12% !important;
        padding-right: 18%;
        padding-top: 20%;
    }

    .main-text h1 {
        margin-top: 6%;
        font-size: 43px;
        line-height: 40px !important;
    }

    .main-text h2 {
        font-size: 28px !important;
    }

    .main-text h3 {
        margin-bottom: 15%;
    }

    .hr-vertical-line {
        width: 80%;
        margin-top: 10%;
        margin-bottom: 5%;
    }

    .hr-vertical-line-child {
        width: 20%;
        left: 100%;
        transition: left 1s ease-in-out;
    }

    .step-section {
        height: 820px;
    }
    .step-section { background-image: none;}


    .step-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 8% 10% 8%
    }

        .step-container .right-p {
            width: 70%;
            text-align: center;
            order: 2;
            margin-left: auto;
        }

        .step-container .left-div {
            width: 30%;
            text-align: center;
            margin-top: 0%;
            order: 1;
        }

    .step-circle h1 {
        top: -115%;
    }

    .step-container .left-p {
        width: 70%;
        text-align: center;
        order: 1;
        margin-left: auto;
    }

    .step-container .right-div {
        width: 30%;
        text-align: center;
        margin-top: 0%;
        order: 2;
    }

    .right-p, .left-p {
        margin-top: 1.5rem;
    }

        .right-p span, .left-p span {
            font-size: 22px;
        }

    .step-circle svg {
        height: 80px;
        width: 80px;
    }


    .section-cuidado-ambiente div .img-container {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .section-cuidado-ambiente div div img {
        width: 100%;
        height: auto !important;
    }

    .card {
        width: 88%;
    }

    /*.tag-section-solar div{ left:5% !important;}*/

    .section-beneficios div div img {
        width: 500px !important;
        height: auto !important;
        max-width: 100vw;
        overflow-x: hidden !important;
    }

    .section-mas-info {
        padding-bottom: 10%;
        margin-left: 12%;
        margin-right: 12%;
    }

    .col-info-btn {
        margin-bottom: 10%;
    }

    .section-ahorro div div img {
        width: 90% !important;
        height: auto !important;
    }

    .section-ahorro div div h3 {
        padding: 0 2em 0 3em;
    }

    .section-form {
        padding-left: 5%;
        padding-right: 5%;
    }
    /*.card{width: 27.2rem;}*/
    .footer-row .col-n2 {
        padding-left: 30%;
    }

    .footer-row .col-n3 {
        padding-left: 10% !important;
        padding-right: 10% !important;
        text-align: center;
    }
}

@media screen and (max-width: 410px) {
    .step-section {
        height: 910px;
    }

    /*.tag-section {
        height: 100vh;
    }*/
}
@media screen and (max-width:340px){
    .main-text h1{font-size:34px;}
    .step-section {height: 650px;}
    .step-circle svg{ height:60px; width:60px;}
    .right-p span, .left-p span{font-size:15px;}
    .step-circle h1{top:-95%; font-size: 45px;}
    .right-p, .left-p{margin-top:0rem;}
    .section-mas-info div h3{font-size:25px;}
    .section-ahorro div div h3{font-size:22px;padding: 0 1em 0 1.5em;}
    section-cuidado-ambiente{padding-left:0px;padding-right:0px;}
    .section-cuidado-ambiente div div h3{font-size:22px;}
    .card-body{margin-left:5%;margin-right:5%;}
    .card-vertical-line{width:130% !important; left:-60% !important;}
    .card-vetical-line-child {top:-10%;}
    .row-beneficios{font-size:18px;}
    .p-vertical-line{width:70%;}
    .footer-row .col-n2{padding-left:20%;}
}

@media screen and (max-height:580px) {
    .tag-section{height:140vh;}
    .step-section{height:700px;}
}