* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#btnTop{
    position: absolute;
    bottom: 300px;
    right: 300px;
    display: none;
    padding: 10px 15px;
    font-size: 18px;
    border: none;
    border-radius: 50%;
    background: #1f7369;
    color: white;
    cursor: pointer;
  }
  
  #btnTop:hover{
    background: white;
    color: #1f7369;
  }

/*---------------------------------------------Top nav-----------------------------------*/

#topNav {
    margin: 0%;
    padding: 0%;
    width: 100%;
    height: 110px;
    border-bottom: 1px solid gray;
    background: url(../res/imgs/background.png);
    background-repeat: no-repeat;  
    background-size: cover;          
    background-position: center; 
}

#topNav ul {
    display: flex; 
    padding-top: 30px;
    padding-left: 28%;
    gap: 140px;
}
  
#topNav ul svg {
    height: 45px;
    width: 45px;
    color: black;
}

a {
    display: flex;
    align-items: center;
    text-decoration: none;
}  

#topNav a:hover p {
    color: #3A5A80;
}
  
#topNav a:hover svg {
    fill: #3A5A80;
}

ul p {
    display: inline-block; 
    margin: 10px;
    font-size: 23px;
    color: black;
}


/*--------------------------------------Body---------------------------------------------*/

body {
    height: 87vh;
    background: url(../res/imgs/background.png);
    background-repeat: no-repeat;  
    background-size: cover;          
    background-position: center; 
}

body img {
    width: 150px;
    height: 150px;
    margin-left: 300px;
    margin-top: -25px;
}

.mainH2 h2 {
    position: absolute;
    color: #A33737;
    font-size: 40px;
    margin-top: 140px;
    margin-left: 600px;
    font-family: 'DM Sans', sans-serif;
}

.mainH2 p {
    position: absolute;
    text-justify: auto;
    color: #682323;
    font-size: 24px;
    margin-top: 230px;
    margin-left: 510px;
}

#ourBtn {
    position: absolute;
    height: 50px;
    width: 220px;
    margin-left: 950px;
    margin-top: 320px;
    background: #2A9D8F;
    color: white;
    font-size: 20px;
    border: none;
    border-radius: 3%;
    font-style: bold;
    cursor: pointer;
}

#ourBtn:hover {
    background: #1f7369;
}

#sonidosDiv {
    position: relative;
    width: 100%;
    height: 100%;
}

#img1 {
    position: absolute;
    height: 250px;
    width: 250px;
    top: 60px;
    left: -250px;
    transform: rotate(-10deg);
}

#img2 {
    position: absolute;
    height: 150px;
    width: 150px;
    top: 400px;
    left: 100px;
    transform: rotate(-5deg);
}

#img3 {
    position: absolute;
    height: 350px;
    width: 350px;
    top: 560px;
    left: -150px;
    transform: rotate(10deg);
}

#img4 {
    position: absolute;
    top: 320px;
    left: -60px;
    height: 100px;
    width: 100px;
    transform: rotate(10deg);
}

#img10 {
    position: absolute;
    top: 500px;
    left: -130px;
    height: 60px;
    width: 60px;
    transform: rotate(-10deg);
}

#img11 {
    position: absolute;
    top: 200px;
    left: 130px;
    height: 60px;
    width: 60px;
    transform: rotate(10deg);
}


#img5 { /*Imagenes de la derecha */
    position: absolute;
    top: 630px;
    right: 40px;
    height: 100px;
    width: 100px;
    transform: rotate(-10deg);
}

#img6 {
    position: absolute;
    top: 380px;
    right: 170px;
    height: 300px;
    width: 300px;
    transform: rotate(10deg);
}

#img7 {
    position: absolute;
    top: 180px;
    right: 390px;
    height: 150px;
    width: 150px;
    transform: rotate(-10deg);
}

#img8 {
    position: absolute;
    top: -40px;
    right: 30px;
    height: 300px;
    width: 300px;
    transform: rotate(10deg);
}

#img9 {
    position: absolute;
    top: 360px;
    right: 130px;
    height: 50px;
    width: 50px;
    transform: rotate(-10deg);
}

#img12 {
    position: absolute;
    top: 700px;
    right: 470px;
    height: 60px;
    width: 60px;
    transform: rotate(-15deg);
}

#separadorNav {
    margin: 0%;
    padding: 0%;
    width: 100%;
    height: 110px;
    border-bottom: 1px solid gray;
    background: url(../res/imgs/Footer.png);
    background-repeat: no-repeat;  
    background-size: cover;          
    background-position: center; 
    margin-top: 685px;
}
/*------------------------------------- Especialistas-----------------------------------*/
#esp {
    background-color: #ECF4F3;
}

#h2{
    text-align: center;
    font-size: 40px;
    padding: 5px;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
}

#divTM h3 {
    font-size: 35px;
    padding: 5px;
    color: #1f7369;
    font-family: 'DM Sans', sans-serif;
}

#divTN h3 {
    font-size: 35px;
    padding: 5px;
    color: #1f7369;
    font-family: 'DM Sans', sans-serif;
}

#divTM {
    width: 75vh;
    margin-top: 50px;
    margin-left: 150px;
}

#esp .l p {
    font-size: 35px;
    padding: 10px;
    font-family: 'DM Sans', sans-serif;
    color: gray;
    text-align: justify;
    text-wrap: pretty;
}

#imgTM {
    position: absolute;
    top: 1200px;
    right: 210px;
    width: 700px;
    height: 700px;
}

#divTN {
    width: 75vh;
    text-align: right;
    margin-top: 50px;
    margin-left: 1140px;
}

#esp .r p {
    font-size: 35px;
    padding: 10px;
    font-family: 'DM Sans', sans-serif;
    color: gray;
    text-align: justify;
    text-wrap: pretty;
}

#imgTN {
    position: absolute;
    top: 2200px;
    left: -70px;
    width: 700px;
    height: 700px;
}

/*---------------------------------------Videos-------------------------------------------*/
#videos {
    padding: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
    margin: auto;
    width: 50%;
    height: 500px;
}

#videos video {
    width: 200px;
    height: 350px;
}

/*-----------------------------------------Template--------------------------------------*/

#divTemplate {
    margin-top: 500px;
    display: flex;
    justify-content: flex-end;
}

#divTemplate img {
    width: 800px;
    height: 800px;
    margin-right: 50px;
    margin-top: -300px;
}

#izqP {
    width: 60%;
}

#lp {
    -webkit-text-stroke-width: 0px;
    stroke-width: 0px;
    -webkit-text-stroke-color: #000;
    stroke: #000;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    font-size: 2.5rem;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
}

#np {
    font-family: var(--e-global-typography-solace_h2_font_family_general-font-family), Sans-serif;
    font-size: 50px;
    padding: 20px 0px 20px 0px;
}

.pp {
    font-size: 20px;
    color: gray;
    text-align: justify;
    width: 500px;

}

/*-----------------------------------------Quote--------------------------------------*/

#divQuote {
    margin: auto;
    height: 800px;
    padding: 200px;
}

#divQuote svg {
    color: #2a9d8f;
    height: 80px;
    width: 80px;
}

#qq {
    font-size: 65px;
    color: #374151;
}

#qn {
    font-size: 25px;
    margin-top: 150px;
}

/*--------------------------------Footer--------------------------------------------*/

footer {
    display: flex;
    background-color: #7785A9;
    color: #374151;
    height: 200px;
    font-size: 18px;
}

#izq {
    width: 50%;
    align-content: center;
    text-align: center;
}

#aFace {
    background-color: #3B5998;
}

#aFace:hover {
    background-color: #344d85;
}

#aWha {
    background-color: #25D366;
}

#aWha:hover {
    background-color: #21be5b;
}

#aTik {
    background-color: #000;
}

#aTik:hover {
    background-color: #242424;
}

#aLin {
    background-color: #0077B5;
}

#aLin:hover {
    background-color: #016195;
}

#aIg {
    background-color: #FC09BE;
}

#aIg:hover {
    background-color: #bd058f;
}

#izq ul {
    display: flex; 
    padding-left: 42%;
    gap: 20px;
    padding: 35px 0px 35px 385px;
}

#izq a {
    height: 35px;
    width: 35px;
    border: 1px solid white;
}

#izq ul svg {
    height: 20px;
    width: 20px;
    color: white;
    margin: auto;
}

#der {
    align-content: center;
    text-align: center;
    width: 50%;
}

#der div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0px 20px 450px;
}

#der ul {
    display: flex; 
    padding-left: 42%;
    gap: 30px;
    padding: 35px 0px 35px 305px;
}

#der li {
    list-style: none;
    position: relative;
    padding: 0 15px;
}

#der li:not(:last-child)::after{
    content: "|";
    position: absolute;
    right: 0;
    color: #cccccc;
    font-size: 30px;
    margin: -7px -15px 0px 0px;
  }