/* landbot */

.BackButton__Button {
 opacity: 1!important;
}

h1 {
    font-size: 3rem;
    font-weight: bold;
    color: var(--lred);
    margin-bottom: 1.5%;
    text-shadow: 2px 1px #171616;
}
h2 { font-size: 2.8789em; }
h3 { font-size: 2.2101em; font-weight: bold;  }
h4 { font-size: 1.6967em; }
h5 { font-size: 1.3026em; }
small { font-size: .7677em; }
html { font-size: clamp(1em, .4167vw + .8875em, 1.125em) }

h1, h2, h3, h4, h5 {
    text-align: left;
}
.btn-lg{
    width: 80%;
    padding: 1rem 3rem;
}
/* Hero */
.home .content {
    margin-top: 4%;
    
}

/* Services_list*/
.nfpa img {
    width: 19%;
    padding: 0 1%;
}
.services_list_text h3 { 
    font-size: 1.5rem
}
.services_titles h4, .services_list_text h4{
    font-weight: bold;
}
.services_list {
    background: var(--breadcumb);
    flex-direction: column;
}
.menu_img .card{
    padding: 0;
    overflow: hidden;
    
}
.menu_img h5{
    text-align: center;
}
.menu_img ul .card {
    height: 12rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
}
.menu_img ul .card a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.menu_img ul .card a p{
    text-align: center;
}
.menu_img ul .card img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.menu_img ul li{
    transition: transform .2s;
}
.menu_img ul li:hover {
    transform: scale(1.1); 
}
.menu_img .grid{
    padding: 0 1%;
}
.card-image{
    width: 100%;
    height: auto;
    position: absolute;
    padding: 0;
}
.card-image img{
    width: 100%;
    height: 180px;
    position: absolute;
    top: 0;
    padding: 0;
}
.brochure{
    margin-top: 3%;
    display: flex;
    justify-content: center;
}
/* Features */
.features{
    height: auto;
    padding: 5% 0;
}
.features_cards .card{
    padding: 11%;
}
.features_cards ul {
    padding: 0 2%;
}
.header-articles h5{
    text-align: center;
}
.card-text{
    position: absolute;
    z-index: 100;
    bottom: 10%;
}
.card-text p{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8rem;
}
.card_gif {
    width: 35%;
    margin: 0 auto;
    padding-top: 10%;
}
/* Team */
.team{
    background: var(--breadcumb);
}
.team_titles h3{
    text-align: center;
}
.team_description p{
    text-align: center;
}
.team_img{
    display: flex;
    justify-self: center;
    align-items: center;
}
/* iso */
.iso{
    height: auto;
    display: flex;
    align-items: center;
    padding: 5% 0;
}
.container_iso {
    display: grid;
    gap: 2%; 
    grid-template-areas: 
    "top-left top-left circle circle circle top-right top-right"
    "top-left top-left circle circle circle top-right top-right"
    "bottom-left bottom-left circle circle circle bottom-right bottom-right"
    "bottom-left bottom-left circle circle circle bottom-right bottom-right"
    ". . bottom bottom bottom . ."; 
    height: auto;
    padding: 5% 0;
}
.top-left { grid-area: top-left; }
    .top-left .card-container,
    .bottom-left .card-container{
     align-items: flex-end;
}
    .top-left h5, .top-left p,
    .bottom-left  h5, .bottom-left  p{
    text-align: end;
}
.circle {
    grid-area: circle;
    display: flex;
    justify-content: center;
    align-items: center;
}
    .top-right { grid-area: top-right; }
    .bottom-right { grid-area: bottom-right; }
    .bottom-left { grid-area: bottom-left; }
    .bottom { grid-area: bottom; }
    .bottom .card_gray{
    width:20%;
}
.bottom .card-container{
    align-items: center;
    position: relative;
     top: -31%;
}
.bottom h5, .bottom p{
    text-align: center;
}
.card-container{
    display:flex;
    flex-direction: column;
}
.process_title h3{
    text-align: center;
}
.card_gray{
    border-radius: 50%;
    width: 25%;
    flex: 1 1 100%;
    aspect-ratio: 1/1;
    height: 100%;
}
.card_gray img{
    width: 60%;
}
/* Features*/
.features_text h5 span{
    font-weight: bold;
    color: var(--lred);
}
.features-grid{
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.features_img{
    display: flex;
} 
.features_img img{
    border-radius: 20px;
}
.card_features {
  background: var(--breadcumb);
  padding: 2% 4% 3% 5%;
  border-radius: 10px;
}
.card_gif{
    width: 100%;
    margin: 0 auto;
    padding: 2%;
}
.card_gif h5{
    text-align: left;
}
.card_features p span{
    color: var(--dblack);
  font-weight: bold;
}
.features-img{
  display: flex;
  justify-content: center;
  align-items: center;
}
/** Team */
.team_titles h3, .process_title h3, .timeline h3{
    /*font-size:  3rem;*/
    font-weight: bold;
}
.team_description{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Timeline*/
.timeline{
    background: var(--breadcumb);
    height: auto;
    padding: 10% 0;
    display: flex;
    align-items: center;
}
.timeline-content {
    position: relative;
    width: 45%;
    padding: 8% 6%;
    border-radius: 4px;
    background: white;
    box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
}
.timeline-cards{
    width: 60%;
    margin: 0 auto;
}
.timeline-text{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding-bottom: 5%;
    
  }
  .timeline-text h3{
    text-align: center;
  }
.timeline-item {
    width: 100%;
    margin-bottom: 70px;
    position: relative;
    max-width: 100%;
}
  .r_arrow{
    position: absolute;
    left: 20%;
    width: 30%;
  }
  .l_arrow {
    position: absolute;
    right: 20%;
    width: 30%;
    top: 100%;
  }
  .timeline-item:nth-child(even) .timeline-content {
    float: right;
    padding: 8% 6%;
}
 
  .timeline-item:nth-child(even) .timeline-content .date {
    right: auto;
    left: 0;
  }
  .timeline-item:nth-child(even) .timeline-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    left: -15px;
    border-width: 10px 15px 10px 0;
    border-color: transparent #f5f5f5 transparent transparent;
  }
  .timeline-item::after {
    content: "";
    display: block;
    clear: both;
  }
  .timeline-content {
    position: relative;
    width: 45%;
    padding: 6%;
    border-radius: 4px;
    background: white;
    box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
  }
  .timeline-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    right: -15px;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #f5f5f5;
  }
  .timeline-content p{
      margin-top: 5%;
      text-align: left;
  }
  .timeline-card p {
    padding: 6%;
  }
  .timeline-card a {
    margin-left: 20px;
  }
  .date {
    background: var(--red);
    display: inline-block;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
  } 
/* Asesorias*/
.asesorias {
    background: var(--lgray);
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    padding: 5% 0;
    display: flex;
    align-items: center;
}
.asesorias_img{
    width: 70%;
}
.asesorias_texts{
    padding: 10% 5% 0 5%;
}
.asesorias h3 {
    color: var(--lblack);
    text-transform: none;
    text-align: left;
}
.info h3 u{
  color: var(--lred);
  /*font-size: 3rem;*/
  font-weight: bold;
}
.asesorias_btn{
    width: 100%;
    display: flex;
    justify-content: center;
}
/* Contacts*/
.contacts{
    background: url('../img/pattern.svg');
    background-position: center;
    height: auto;
  }
.info{
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 3% 8%;
    text-align: center;
    background: var(--lblack);  
}
.info h3 u {
    background: linear-gradient(90deg,#efefef,#d1202a,#d93744) no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    transform: none;
    font-size: 3rem;
    font-family: 'Poppins';
}
.info p {
    color: var(--lgray);
    text-align: center;
}
.info > *{
    flex-basis: 100%;
    text-align: center;
}
.info h3{
    text-align: center;
    padding: 0;
    font-size: 1.7rem;
    margin-bottom: 1%;
}
.info h3 span, small{
    color:white;
}
.contact_container{
    margin: 2% 0;
}
.contact_form{
      width: 90%;
}

.contact_form h3{
    color:var(--lblack);
    text-align: left;
    padding: 0;
}
.contact_form p {
    margin-bottom: 0;
}
.contact_form b{
    display: block;
    color: var(--lblack);
    margin: 2% 0;
}
.contact_form input[type="text"], input[type="password"] {
    color: var(--main-color-font);
    background: var(--breadcumb); 
    padding: .5rem 1rem;
    margin-bottom: 4%;
    width: 100%;
}
.contact_form textarea{
    background: var(--breadcumb);
    width: 100%;
    padding: 4%;
}
input#button.btn_form{
  background: transparent;
  color: white;
  font-weight: 500;
}
.btn_form_hidden {
  background: gray;
  cursor: not-allowed;
}
.btn_form_hidden:hover {
  background: gray;
}
.map{
    display: flex;
     justify-content: center;
     align-items: center;
}
textarea{
    border: none;
    width: 86%;
    margin-bottom: 5%;
    background: var(--lgray);
} 
.companies{
    position: relative;
    width:100%;
    height: auto;
    padding: 5% 0;
}
.companies h3{
    text-align:center;
}
@media (min-width: 768px){
    .cjsudi {
        max-height: 800px;
        right: 0%!important;
        bottom: 9%!important;
    }
    .iSFscl {
        background-color: #0000005e!important;
        border-radius: 50%!important;
    }
}
@media screen and (max-width: 768px) {

    h1 {
        font-size: 2.552rem;
        margin: 1.5% 0;
    }
  
    h2 {font-size: 2.141rem;}
    
    h3 {font-size: 1.4rem;}
    
    h4 {font-size: 1.1rem;}
    
    h5 {font-size: 1rem;}
    h1, h2, h3, h4, h5, h6, p{
        text-align: left;
        margin-bottom: 4%;
        line-height: 1.2;
    }
    .logohome {
    position: relative;
    width: 29%;
    margin-top: 16%;
}
    .navbar{
        left: 0;
        top: 0;
        height: 9vh;
    }
    .services .grid{
        gap: 0;
    }
    .hide{
        display:none;
    }
    .menu_img{
        margin-top: 3%;
    }
    .btn{
        width: 70%;
        display: flex;
        justify-content: center;
    }
    .btn a {
        color: white;
        white-space: nowrap;
    }
    .features_cards{
        margin-top: 5%;
    }
    .card p{
        text-align: justify;
    }
    .team .grid{
        gap: 0;
    }
    .iso{
        height: auto;
        padding: 5% 0;
    }
    .timeline-content {
        width: 100%;
        padding: 13% 3%;
    }
    .timeline-item:nth-child(even) .timeline_content {
        float: right;
        padding: 13% 3%;
    }
    .timeline-cards {
        width: 100%;
        margin: 0 auto;
    }
    .l_arrow, .r_arrow{display: none;}
    .contact_form {
        width: 100%;
    }
    .asesorias {
         background-position: center;
         padding: 20% 0;
    }
    .asesorias_title h3{
        display: inline;
    }
    .benefits p{
    color: var(--dblack);
    }
  }
  

@media screen and (min-width: 320px) and (max-width: 533px){
   h1, h2, h3, h4, h5, p, .list_icon, .card p{
      text-align: left;
    }

    .btn{
        width: 70%;
    }
    .btn_md{
        width: 90%;
    }
    .btn-lg{
    width: 100%;
    padding: 1rem;
    }
    .logohome {
         position: relative;
        width: 30%;
    }
    .timeline-item{
        margin: 4% 0;
    }
    .timeline-content{
            padding: 8% 3%;
    }
    .timeline-content p {
    margin-top: 10%;
    }
    .nfpa img {
        width: 15%;
        padding: 0 1%;
    }
    .video_nfpa, .video_nfpa video{
        width: 100%;
    }
    .brochure{
        max-width: 90%;
    }
    .features{
        display: flex;
        align-items: center;
    }
    .team, .iso{
        display: flex;
        align-items: center;
    }
    .footer_logo {
      width: 100%;
      position: relative;
      z-index: 100;
      margin-top: 10%;
    }
    .card-text {
        position: absolute;
        z-index: 100;
        bottom: 2%;
    }
    .blog_post, .post {
      margin-left: 0;
    }
    .blog-post p, .blog-post address {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 2%;
    justify-content: flex-end;
    }
    .post-card {
    flex-direction: row-reverse;
    }
    .post_card_text small {
        text-align: left;
    }
    .brand img {
        width: 17%;
    }
    .footer_info h5 {
      padding-left: 0;
    }
    .foot ul li {
      display: flex;
    }
    .iso{
        height: auto;
    padding: 10% 0;
    
  }
  .asesorias_title{
      display: none;
  }
    .nfpa{
        width: 100%;
    }
    .team_description{
        order: 2;
    }
    .team_img{
        order:1;
    }
    .team_titles h3{
            text-align: left;
            /*font-size: 2.5rem;*/
    }
    .container_iso{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .circle{
        order: 1;
    }
    .top-left{
        order: 2;
    }
    .bottom-left{
        order: 3;
    }
    .top-right{
        order: 4;
    }
    .bottom-right{
        order: 5;
    }
    .bottom{
        order: 6;
    }
   .top-left .card-container,
   .bottom-left .card-container,
   .top-right .card-container,
   .bottom-right .card-container{
        align-items: center;
        position: relative;
        top: -31%;
    }
    .card-container h5{
        text-align: center;
        font-weight: bold;
    }
    .card-container p{
        text-align: left;
    }
    .asesorias{
        flex-direction: column;
    }
    .contact_form p {
    margin-bottom: 3%;
    }
        .foot, .foot .container{
        height: auto;
        padding: 2% 0;
    }
    .footer_info{
        align-items: flex-start;
    }
}