body{
color: #000;
text-align: center;
font-family: "Istok Web";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;}
main{
    gap: 20px;
    padding-bottom: 20px;
}
/*----header + nav------------*/
/*diseño header */
header{
    background-color:#0F1724;
    color: white;
    border-bottom: solid 1px #D9D9D9;
}
/*diseño princiapl nav*/
nav{ 
    gap: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    height: auto;
    padding:0;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
}
/*Diseño Logo*/
#Logo{
    width: 50%;
    display: flex;
    flex: 0 0 0;
    padding:0 30px;
    gap: 0;
    justify-content: none;
}
#h1-kine{
    width:50;
    color:#38A1FF;
}
/*Diseño btn navs*/
#btn-nav{
    width: 50%;
    display: flex;
    justify-content: space-between;
    padding:0 30px;
    gap: 100px;
    flex: 0;
    
}
#btn-nav a {
  color: white;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.05s ease ;
}

#btn-nav a:hover {
  transform: scale(1.5);
}





/*----Secciones del cuerpo------------*/

/*Section-header general*/
#section-header{
    width: 100%;
    height: auto;
    background-color: #0F1724;
}
.div-section-header{
    display: flex;
    padding: 61px 12px 0 12px;
    align-items: center;
    gap: 0px;
    justify-content: space-between;
    align-self: stretch;
    color: white;
}
/*section-header histographia*/
.header-histographia{
    display: flex;
    width: 638px;
    padding: 20px 10px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.header-histographia h1{
    color: #FFF;
    font-family: "Istok Web";
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    height: 161px;
    align-self: stretch;
}
.header-histographia p{
    color: #D9D9D9;
    font-family: "Istok Web";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 160% */
    align-self: stretch;
}
.header-histographia h5{
    color: #FFF;
    font-family: "Istok Web";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width:100%;
}
.header-histographia button{
    width: 555px;
    height: 137px;
    background-color: #169281C2;
    color: white;
    border-radius: 50px;
    border-color: #D9D9D9;
    box-shadow:(0 4px 4px rgba(0, 0, 0, 0.25));
    text-align: center;
    font-family: "Istok Web";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: inline-block;
    transition: transform 0.05s ease ;
}
.header-histographia button:hover{
    background-color:#1dc7b0c2;
    border-color: #D9D9D9;
    transform: scale(1.01);
}
.lineal-header{
    width: 598.513px;
height: 1px;
background-color: #D9D9D9;
}
.div-section-header-histographia-info{
    display: flex;
    width: 528px;
    height: 84.19px;
    padding-top: 32px;
    align-items: flex-start;
    gap: 32px;
}
.row-section-header-histographia-info{
    display: flex;
    padding-right: 10.9px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}
.row-section-header-histographia-info i{
    height: 20px;
    width: 20px;
    color: #38A1FF;
}

/*Section-helpme general*/
#section-helpme{
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    align-self: stretch;
}
/*Section-helpme histographia*/
.section-helpme-histographia{
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    align-self: stretch;

}
.section-helpme-histographia h5{
    width: 554px;
    color: #6B7280;
    text-align: center;
    font-family: "Istok Web";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28.8px; /* 160% */
}
.section-helpme-histographia h1{
    width: 1327px;
    color: #1E1E1E;
    text-align: center;
    font-family: "Istok Web";
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
/*section-helpme problems*/
.section-helpme-problems{
    display: inline-grid;
    padding-top: 41.1px;
    row-gap: 24px;
    column-gap: 24px;
    align-self: stretch;
    grid-template-rows:  272.36px;
    grid-template-columns: repeat(4,minmax(0,1fr));
}
.section-helmpe-problems-histographia{
    display: flex;
    padding: 32px 24px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15.9px;
    grid-row: 1 / span 1;
    justify-self: stretch;
    border-radius: 8px;
    border: 1px solid #FFF;
    background: #0F1724; 
    transition: transform 0.05s ease ;
}
.section-helmpe-problems-histographia:hover{
    transform: scale(1.05);
}

.section-helmpe-problems-histographia h5{
    display: flex;
    width: 119.47px;
    height: 28.085px;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28.8px; /* 160% */
}
.section-helmpe-problems-histographia p{
    display: flex;
    width: 191.55px;
    height: 90px;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.4px; /* 160% */
}
.section-helmpe-problems-histographia i{
    color: #FFF;
    font-size: 30px;
}
.section-helmpe-problems-histographia-hover{
    display: flex;
    padding: 32px 24px;
    flex-direction: column;
    align-items: center;
    gap: 15.9px;
    grid-row: 1 / span 1;
    justify-self: stretch;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #FFF;
    transition: transform 0.05s ease ;
}
.section-helmpe-problems-histographia-hover:hover{
    transform: scale(1.05);
}
.section-helmpe-problems-histographia-hover h5{
    display: flex;
    width: 119.47px;
    height: 28.085px;
    flex-direction: column;
    justify-content: center;
    color: #0F1724;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28.8px; /* 160% */
}
.section-helmpe-problems-histographia-hover p{
    display: flex;
    width: 191.55px;
    height: 90px;
    flex-direction: column;
    justify-content: center;
    color: #6B7280;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.4px; /* 160% */
}
.section-helmpe-problems-histographia-hover i{
    color:#38A1FF;
    font-size: 30px;
}

/*Section-Services General*/
#section-services{
    display: flex;
    width: 1296px;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
#movil{
    display: none;
}
/*section-services-histographia*/
.section-services-histographia h1{
    height: 61px;
    align-self: stretch;
    color: #1E1E1E;
    text-align: center;
    font-family: "Istok Web";
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.section-services-histographia h5{
    color: #6B7280;
    width: 570px;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28.8px; /* 160% */
}
/*section-services-carrusel*/
.services-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 30px;
  width: 100%;
  padding: 20px 60px;
}
.section-services-carrusel-info{
    display: flex;
    width: 330px;
    height: 400px;
    min-width: 240px;
    padding: 5px 20px;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
}
.section-services-carrusel-info img{
    display: flex;
    max-width: 100%;
    height: 160px;
    min-width: 160px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.section-services-div-img{
    display: flex;
    width: 100%;
    justify-content: center;
}

/*Section-about-profesional General*/
#section-about-profesional{
    display: flex;
    width: 897px;
    height: 684px;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}
#section-about-profesional h5{
    color: #38A1FF;
    font-family: Istok Web;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
/*section-about-profesional div general*/
.div-section-about-profesional{
    display: flex;
    height:620px;
    justify-content: center;
    align-items: center;
    gap: 38px;
    flex-shrink: 0;
}
.div-section-about-profesional img{
    height: 620px;
}
/*section-about-profesiona-histographia*/
.section-about-profesional-histographia{
    display: flex;
    width: 508px;
    height: 614px;
    flex-direction: column;
    align-items: start;
    gap: 15px;
}
.section-about-profesional-histographia h1{
    color: #000;
    font-family: Istok Web;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.section-about-profesional-histographia h4{
    color: #000;
    font-family: Istok Web;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.section-about-profesional-histographia p{
    color: #6B7280;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28.8px; /* 160% */
}
.div-linea-section-about-profesional-1{
    width: 430px;
    height:1px;
    flex-shrink: 0;
    background-color: #D9D9D9;
}
.div-section-about-profesional-histographia-elements{
    display: grid;
    height: 116px;
    padding: 16px 0 22px 0;
    row-gap: 24px;
    column-gap: 24px;
    flex-shrink: 0;
    align-self: stretch;
    grid-template-rows:  77.58px;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
.section-about-profesional-histographia-elemnt1{
    display: flex;
    padding-left: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    justify-self: stretch;
    border-left: 3px solid #38A1FF;
}
.section-about-profesional-histographia-elemnt1 h4{
    color: #38A1FF;
}
.section-about-profesional-histographia-elemnt2{
    display: flex;
    padding-left: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
    justify-self: stretch;
    border-left: 3px solid #38A1FF;
}
.section-about-profesional-histographia-elemnt2 h4{
    color: #38A1FF;
}

/*Section-session-steps General*/
#section-session-steps{
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    align-self: stretch;
    background: #F3F4F6;
}
#section-session-steps p{
    color:#6B7280;
}
.section-session-steps-elements{
    display: flex;
    padding: 10px;
    align-items: center;
    gap: 20px;
}
.section-session-steps-element{
    display: flex;
    width: 260px;
    height: 80px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    gap: 30px;
    border-radius: 10px;
    border: 1px solid #757575;
    background: #FFF;
}
.section-session-steps-element i{
    font-size: 66px;
    color: #0F1724;
}


/*Section-real-result General*/
#section-real-result{
    display: flex;
    padding: 40px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    align-self: stretch;
}
.section-real-result-div-element{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 69px;
}
.section-real-result-elements{
    display: flex;
    width: 280px;
    min-height: 130px;
    padding: 5px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    border-radius: 5px;
    border: 1px solid #757575;
}
.div-section-real-result-elements-stars{
    display: flex;
    width: 194px;
    justify-content:start;
    align-items: flex-start;
    gap: 11px;
    color:#FAA700;
}


/*Section-schedule-via-wsp General*/
#section-schedule-via-wsp{
    display: flex;
    height: 398px;
    padding: 20px 0;
    flex-direction: column;
    align-items: center;
    gap: 33px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #0F1724;
}
#section-schedule-via-wsp h1{
    color: #FFF;
}
#section-schedule-via-wsp p{
    color: #757575;
    width: 590px;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 160% */
}
#section-schedule-via-wsp button{
    width: 555px;
    height: 137px;
    background-color:#38A1FF;
    color: white;
    border-radius: 50px;
    border-color: #D9D9D9;
    box-shadow:(0 4px 4px rgba(0, 0, 0, 0.25));
    text-align: center;
    font-family: "Istok Web";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: inline-block;
    transition: transform 0.05s ease ;
}
#section-schedule-via-wsp button:hover{
    background-color: #3383ca;
    border-color: #D9D9D9;
    transform: scale(1.01);
}



/*FOOTER SECTION*/
footer{
    display: flex;
    height: 339px;
    padding: 20px 0;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    border-top: 1px solid #c9c9c9;
}
#footer-section-histographia{
    display: flex;
    width: 100%;
    max-width: 1200px;
    padding: 0 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 72px;
}
#section-histographia-elemnts{
    display: flex;
    height: 158px;
    padding: 0 20px;
    align-items: flex-start;
    gap: 60px;
    align-self: stretch;
}
.footer-histographia-element1{
    display: flex;
    width: 300px;
    height: 158px;
    padding-bottom: 80px;
    flex-direction: column;
    align-items: flex-start;
    gap: 23.095px;
}
.logo{
    display: flex;
    flex: 0 0 0;
    gap: 0;
    justify-content: start;
    align-items: start;
}
.logo h5{
    font-size: 36px;
}
.kine-h5{
    color: #38A1FF;
}
.footer-histographia-element{
    display: flex;
    width: 238px;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.f-elements{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}
.f-elements i{
    color: #38A1FF;
    font-size: 20px;
}
.f-elements1{
    display: flex;
    align-items: center;
    gap: 20px;
}
.f-elements1 i{
    color: #38A1FF;
    font-size: 36px;
    display: inline-block;
    transition: transform 0.05s ease ;
}
.f-elements1 i:hover{
    color: #2874b6;
    transform: scale(1.01);
}
#footer-section-creador{
    display: flex;
    padding: 0 501px 0 502px;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: rgba(30, 30, 30, 0.70);
    color: white;
}
#footer-section-creador p{
    margin: 0;
}
#section-histographia-credits{
    display: flex;
    padding-top: 31px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}