/* 
==============================
Style for card content.
==============================
*/

*{
    font-family: Arial, Helvetica, sans-serif;
}

main{
    width: 100%;
    height: 100vh;
    background: none;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 3;
}

#header{
    font-weight: bold;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1em;
}

#header h1{
    text-align: center;
    margin-top: 1em;
    font-size: 50px;
}

#header h2{
    text-align: center;
    font-size: 40px;
}

@media screen and (max-width: 350px) {
    #header h1{
        text-align: center;
        margin-top: 1em;
        font-size: 40px;
    }
    
    #header h2{
        text-align: center;
        font-size: 30px;
    }
}

/* 
==============================
Bisel text.
==============================
*/

.texto__biselado {
    color: #ffd900;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px 0px #9c870f, 0 -1px 0px #EAEAEA;
    margin-top: 2px;
}

/* 
==============================
Animation iamge.
==============================
*/

#car{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#car .car{
    display: block;
    width: 300px;
    height: 200px;
    z-index: 3;
}

#car .car img{
    width: 100%;
    height: 100%;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-name: animated-car;
}

@keyframes animated-car{
    0%{
        transform: scale(1,1);
    }

    50%{
        transform: scale(1.1, 1.1);
    }

    100%{
        transform: scale(1,1);
    }
}

#logo{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -30px;
    left: 0;
    z-index: 2;
}

#logo img{
    height: 70px;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-name: animated-logo;
}

@keyframes animated-logo{
    0%{
        transform: translateX(-50px);
    }

    50%{
        transform: translateX(50px);
    }

    100%{
        transform: translateX(-50px);
    }
}

@media screen and (max-width: 370px) {
    #car .car{
        display: block;
        width: 250px;
        height: 170px;
    }

    #logo{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: -25px;
        left: 0;
        z-index: 2;
    }

    #logo img{
        height: 60px;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-name: animated-logo;
    }
}

@media screen and (max-width: 300px) {
    #car .car{
        display: block;
        width: 200px;
        height: 150px;
    }
}

/*
==============================
Presentation company.
==============================
*/

#header h3{
    text-align: center;
    font-size: 25px;
}

#header p{
    font-weight: normal;
    font-size: 18px;
    text-align: center;
}

/* 
==============================
Buttons contact.
==============================
*/

#buttons-contact{
    width: 100%;
    height: 50px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1em;
}


/* Button WhatsApp */

#contact {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    gap: 1em; 
    width: 100%;
    margin: 2em auto;
}

.container__button {
    width: 250px;
    margin-top: 2em;
}

.custom-btn {
    width: 100%;
    position: relative;
    border: none;
    box-shadow: none;
    line-height: 42px;
    perspective: 230px;
    -webkit-perspective: 230px;
    cursor: pointer;
    margin-left: 35px;
}

.custom-btn span {
    display: block;
    width: 100%;
    height: 40px;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin: 0;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.3s;
    color: #ffffff;
}

.custom-btn span:nth-child(1) {
    box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
    transform: rotateX(90deg);
    transform-origin: 50% 50% -20px;
}

.custom-btn span:nth-child(2) {
    transform: rotateX(0deg);
    transform-origin: 50% 50% -20px;
}

.custom-btn:hover span:nth-child(1), .custom-btn:hover span:nth-child(2) {
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    transform: rotateX(0deg);
}

/* Botón 1 - WhatsApp */

.custom-btn-1 {
  position: relative;
  right: 20px;
  bottom: 20px;
  border: none;
  box-shadow: none;
  width: 130px;
  line-height: 42px;
  perspective: 230px;
  -webkit-perspective: 230px;
  
}

.custom-btn-1 span {
  background: linear-gradient(0deg, rgb(37 211 102) 0%, rgb(37 211 102) 100%);
  display: block;
  position: absolute;
  width: 220px;
  height: 40px;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.3s;
  color: #ffffff; 
  align-content: center;
  box-shadow: 1px 2px 12px rgb(0, 250, 18);
}

.custom-btn-1 span:nth-child(1) {
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
  transform: rotateX(90deg);
  transform-origin: 50% 50% -20px;
  
}

.custom-btn-1 span:nth-child(2) {
  transform: rotateX(0deg);
  transform-origin: 50% 50% -20px;
}

.custom-btn-1:hover span:nth-child(1) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  transform: rotateX(0deg);
}

.custom-btn-1:hover span:nth-child(2) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  color: transparent;
  transform: rotateX(-90deg);
}

/* Botón 2 - Llamar a celular */

.custom-btn-2 {
  position: relative;
  right: 20px;
  bottom: 20px;
  border: none;
  box-shadow: none;
  width: 130px;
  line-height: 42px;
  perspective: 230px;
  -webkit-perspective: 230px;
}

.custom-btn-2 span {
  background: #007bff;
  display: block;
  position: absolute;
  width: 220px;
  height: 40px;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.3s;
  color: #ffffff; 
  align-content: center;
  box-shadow: 1px 2px 12px #007bff;
}

.custom-btn-2 span:nth-child(1) {
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
  transform: rotateX(90deg);
  transform-origin: 50% 50% -20px ;
}

.custom-btn-2 span:nth-child(2) {
  transform: rotateX(0deg);
  transform-origin: 50% 50% -20px;
}

.custom-btn-2:hover span:nth-child(1) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  transform: rotateX(0deg);
}

.custom-btn-2:hover span:nth-child(2) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  color: transparent;
  transform: rotateX(-90deg);
}

/* Botón 3 - Enviar email */

.custom-btn-3 {
  position: relative;
  right: 20px;
  bottom: 20px;
  border: none;
  box-shadow: none;
  width: 130px;
  line-height: 42px;
  perspective: 230px;
  -webkit-perspective: 230px;
}

.custom-btn-3 span {
  background: #dc3545;
  display: block;
  position: absolute;
  width: 220px;
  height: 40px;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.3s;
  color: #ffffff; 
  align-content: center;
  box-shadow: 1px 2px 12px #dc3545;
}

.custom-btn-3 span:nth-child(1) {
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
  transform: rotateX(90deg);
  transform-origin: 50% 50% -20px;
}

.custom-btn-3 span:nth-child(2) {
  transform: rotateX(0deg);
  transform-origin: 50% 50% -20px;
}

.custom-btn-3:hover span:nth-child(1) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  transform: rotateX(0deg);
}

.custom-btn-3:hover span:nth-child(2) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  color: transparent;
  transform: rotateX(-90deg);
}

/* Botón 4 - Sitio web */

.custom-btn-4 {
  position: relative;
  right: 20px;
  bottom: 20px;
  border: none;
  box-shadow: none;
  width: 130px;
  line-height: 42px;
  perspective: 230px;
  -webkit-perspective: 230px;
}

.custom-btn-4 span {
  background: #ffd900;
  display: block;
  position: absolute;
  width: 220px;
  height: 40px;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.3s;
  color: #ffffff; 
  align-content: center;
  box-shadow: 1px 2px 12px #ffd900;
}

.custom-btn-4 span:nth-child(1) {
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
  transform: rotateX(90deg);
  transform-origin: 50% 50% -20px;
}

.custom-btn-4 span:nth-child(2) {
  transform: rotateX(0deg);
  transform-origin: 50% 50% -20px;
}

.custom-btn-4:hover span:nth-child(1) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  transform: rotateX(0deg);
}

.custom-btn-4:hover span:nth-child(2) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  color: transparent;
  transform: rotateX(-90deg);
}

/* Botón 5 - Compartir */

.custom-btn-5 {
  position: relative;
  right: 20px;
  bottom: 20px;
  border: none;
  box-shadow: none;
  width: 130px;
  line-height: 42px;
  perspective: 230px;
  -webkit-perspective: 230px;
}

.custom-btn-5 span {
  background: #17a2b8;
  display: block;
  position: absolute;
  width: 220px;
  height: 40px;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.3s;
  color: #ffffff; 
align-content: center;
box-shadow: 1px 2px 12px #17a2b8;
}

.custom-btn-5 span:nth-child(1) {
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
  transform: rotateX(90deg);
  transform-origin: 50% 50% -20px;
}

.custom-btn-5 span:nth-child(2) {
  transform: rotateX(0deg);
  transform-origin: 50% 50% -20px;
}

.custom-btn-5:hover span:nth-child(1) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  transform: rotateX(0deg);
}

.custom-btn-5:hover span:nth-child(2) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  color: transparent;
  transform: rotateX(-90deg);
}

.icon__custom__btn div{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.icon__custom__btn div picture{
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-bottom: 15px;
}

.icon__custom__btn div label{
    color: white;
    font-size: 15px;
}

.icon__custom__btn div picture svg{
    width: 25px;
    height: 25px;
    fill: rgb(255, 255, 255);
}

/* 
==============================
Main card content.
==============================
*/

#description-business-digital-card{
    padding-left: 1em;
    padding-right: 1em;
}

#services h3{
    width: 100%;
    height: auto;
    text-align: center;
}

.card{
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.card__content{
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    border-radius:10px;
    padding: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.card__content h2{
    width: calc(100% - 1em);
    height: calc(100% - 1em);
    color: rgb(19, 19, 19);
    font-size: 30px;
    text-align: center;
    cursor: pointer;
}

.card__content a{
    color: rgb(19, 19, 19);
    text-decoration: none;
    transition: all ease-in-out .3s;
}

.card__content a:hover{
    color: rgba(19, 19, 19, 0.747);
    transition: all ease-in-out .3s;
    text-decoration: none;
}

.card__content p{
    width: 100%;
    height: auto;
    text-align: center;
    padding: 1em;
}

.block {
	position: relative;
	margin: 0px auto 0;
	width: 500px;
	margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding-top: 3px;
    padding-left: 3px;
    transition: all ease-in-out .3s;
}

@media screen and (max-width: 600px){
    .block {
        position: relative;
        margin: 0px auto 0;
        width: 400px;
        margin-top: 1em;
        margin-bottom: 1.5em;
        padding-top: 3px;
        padding-left: 3px;
        transition: all ease-in-out .3s;
    }
}

@media screen and (max-width: 480px){
    .block {
        position: relative;
        margin: 0px auto 0;
        width: 300px;
        margin-top: 1em;
        margin-bottom: 1.5em;
        padding-top: 3px;
        padding-left: 3px;
        transition: all ease-in-out .3s;
    }

    .card__content h2{
        width: 100%;
        color: rgb(19, 19, 19);
        font-size: 25px;
        text-align: center;
        cursor: pointer;
    }
}

@media screen and (max-width: 370px){
    .block {
        position: relative;
        margin: 0px auto 0;
        width: 240px;
        margin-top: 2em;
        margin-bottom: 1.5em;
        padding-top: 3px;
        padding-left: 3px;
        transition: all ease-in-out .3s;
    }

    .card__content h2{
        width: 100%;
        color: rgb(19, 19, 19);
        font-size: 20px;
        text-align: center;
        cursor: pointer;
    }
}

@media screen and (max-width: 300px){
    .block {
        position: relative;
        margin: 0px auto 0;
        width: 200px;
        margin-top: 2em;
        margin-bottom: 1.5em;
        padding-top: 3px;
        padding-left: 3px;
        transition: all ease-in-out .3s;
    }

    .card__content h2{
        color: rgb(19, 19, 19);
        font-size: 17px;
    }
}

.block:hover {
    transform: scale(1.1, 1.1);
    transition: all ease-in-out .3s;
}

.block:before, .block:after {
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
    background: linear-gradient(45deg, #00ee16, #007bff, #17a2b8,#e0a800, #de4452, #01099c, #00f, #dadaec,#070463, #060985);
	background-size: 400%;
	width: calc(100% + 7px);
	height: calc(100% + 7px);
	z-index: -1;
	animation: steam 20s linear infinite;
    border-radius:10px;
}

@keyframes steam {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}

.block:after {
	filter: blur(50px);
}

/* 
==============================
Social.
==============================
*/

#social{
    width: 100%;
    height: auto;
}

#social h3{
    text-align: center;
}

a {
    cursor: pointer;
    text-decoration: none;
}

.contenedor-redes-sociales {
    margin: 20px 0;
    padding: 20px;
    text-align: center;
}

.contenedor-redes-sociales div {
    position: relative;
    display: inline-block;
    height: 40px;
    width: 160px;
    line-height: 35px;
    padding: 0;
    color: #fff;
    border-radius: 50px;
    background: #fff;
    margin: 5px;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}

.contenedor-redes-sociales div:hover span.circulo {
    left: 100%;
    margin-left: -35px;
}

.contenedor-redes-sociales div:hover span.titulo {
    opacity: 0;
}

.contenedor-redes-sociales div:hover span.titulo-hover {
    opacity: 1;
    color: #fff;
}

.contenedor-redes-sociales div span.titulo-hover {
    opacity: 0;
}

.contenedor-redes-sociales div span.circulo {
    display: block;
    color: #fff;
    position: absolute;
    float: left;
    margin: 3px;
    line-height: 30px;
    height: 30px;
    width: 30px;
    top: 0;
    left: 0;
    transition: all 0.5s;
    border-radius: 50%;
}

.contenedor-redes-sociales div span.circulo i {
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
}

.contenedor-redes-sociales div span.titulo, .contenedor-redes-sociales a span.titulo-hover {
    position: absolute;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 400;
    transition: .5s;
}

.contenedor-redes-sociales div span.titulo {
    right: 15px;
}

.contenedor-redes-sociales div span.titulo-hover {
    left: 15px;
}

/* Colores de los botones */

.contenedor-redes-sociales .facebook {
    border: 2px solid #3b5998;
    background: linear-gradient(45deg, #3b5998, #00000075);
}

.contenedor-redes-sociales .facebook:hover {
    background: #3b5998;
}

.contenedor-redes-sociales .facebook:hover span.titulo {
    color: #ffffff;
}

.contenedor-redes-sociales .facebook:hover span.circulo {
    background: #ffffff;
    color: #3b5998;
}

.contenedor-redes-sociales .instagram {
    border: 2px solid #E4405F;
    background: linear-gradient(45deg, #e4405f, #00000075);
}

.contenedor-redes-sociales .instagram:hover {
    background: #E4405F;
}

.contenedor-redes-sociales .instagram:hover span.titulo {
    color: #ffffff;
}

.contenedor-redes-sociales .instagram:hover span.circulo {
    background: #ffffff;
    color: #E4405F;
}

.contenedor-redes-sociales .youtube {
    border: 2px solid #FF0000;
    background: linear-gradient(45deg, #FF0000, #00000075);
}

.contenedor-redes-sociales .youtube:hover {
    background: #FF0000;
}

.contenedor-redes-sociales .youtube:hover span.titulo {
    color: #ffffff;
}

.contenedor-redes-sociales .youtube:hover span.circulo {
    background: #ffffff;
    color: #FF0000;
}

.contenedor-redes-sociales .tiktok {
    border: 2px solid #000000;
    background: linear-gradient(45deg, #000000, #00000075);
}

.contenedor-redes-sociales .tiktok:hover {
    background: #000000;
}

.contenedor-redes-sociales .tiktok:hover span.titulo {
    color: #ffffff;
}

.contenedor-redes-sociales .tiktok:hover span.circulo {
    background: #ffffff;
    color: #000000;
}

#x-twitter{
    display: block;
    padding-top: 2px;
}

#x-twitter svg{
    width: 15px;
    height: 15px;
    fill: rgb(255, 255, 255);
}

.contenedor-redes-sociales .x {
    border: 2px solid #000000;
    background: linear-gradient(45deg, #000000, #00000075);
}

.contenedor-redes-sociales .x:hover {
    background: #000000;
}

.contenedor-redes-sociales .x:hover span.titulo {
    color: #ffffff;
}

.contenedor-redes-sociales .x:hover span.circulo {
    background: #ffffff;
    color: #000000;
}

.contenedor-redes-sociales .x:hover #x-twitter svg {
    fill: #000000;
    width: 15px;
    height: 15px;
}

/* Media queries */

@media screen and (max-width: 480px) {
    .contenedor-redes-sociales a {
        width: 100%;
        margin: 0;
        margin-bottom: 10px;
    }
}

/* 
==============================
Map location content.
==============================
*/

.map__container{
    width: calc(100% - 4em);
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    position: relative;
    overflow: hidden;
    margin: auto;
}

.map__container h3{
    width: max-content;
    height: 30px;
}

.map__container #location{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: max-content;
    height: 50px;
    margin-bottom: 1em;
}

.map__container #location picture{
    display: block;
    width: max-content;
    height: max-content;
}

.map__container #location picture svg{
    width: 30px;
    height: 30px;
    fill: rgba(252, 0, 0, 0.884);
}

.map__container #location p{
    width: max-content;
    height: auto;
}

@media screen and (max-width: 480px) {
    .map__container #location{
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 1em;
        width: max-content;
        margin-top: 2em;
        margin-bottom: 1em;
    }

    .map__container #location p{
        width: 100%;
        height: auto;
        padding: 1em;
    }
}

.map{
    width: 100%;
    height: calc(100% - 80px);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.map iframe{
    width: 100%;
    height: 100%;
    transition: all ease-in-out .5s;
}

.map iframe:hover{
    width: 100%;
    height: 100%;
    transition: all ease-in-out .5s;
}

/*
=============================
WhatsApp button bottom left.
=============================
*/

.link__whatsapp{
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    width: 55px;
    height: 55px;
    animation-name: animate-circle;
    animation-duration: .4s;
    z-index: 1000;
}

@keyframes animate-circle{
    0%{
        transform: scale(1,1);
    }

    50%{
        transform: scale(1.7, 1.7);
    }

    100%{
        transform: scale(1,1);
    }
}

.figure__whatsapp{
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(4, 211, 32);
    border-radius: 50%;
    padding: .6em;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.521);
}

.figure__whatsapp svg{
    width: 30px;
    height: 30px;
    fill: white;
    margin-top: 3px;
    margin-left: 3px;
}

/*
=============================
Share button bottom right.
=============================
*/

.container__share__circle{
    width: 55px;
    height: 55px;
    position: fixed;
    right: 1em;
    bottom: 1em;
    z-index: 3;
}

#circle-share{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#btn-share{
    width: 100%;
    height: 100%;
    background-color: #007bff;
    border-radius: 50%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 17;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.521);
    animation-name: animate-circle;
    animation-duration: .4s;
}

#btn-share picture {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#btn-share picture svg{
    width: 25px;
    height: 25px;
    fill: rgb(255, 255, 255);
}

/* Hidden buttons */

.hidden{
    width: 0;
    height: 0;
    position: absolute;
    bottom: 27px;
    right: 27px;
    z-index: 7;
    transition: all ease-in-out .3s;
}

/* Button web site */ 

#btn-web{
    background-color: #ffd900;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.521);
}

#btn-web picture {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#btn-web picture svg{
    width: 25px;
    height: 25px;
    fill: rgb(255, 255, 255);
}

.show__web{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 140px;
    right: 0;
    z-index: 15;
    animation-name: animate-circle;
    animation-duration: .5s;
    transition: all ease-in-out .3s;
}

/* Button E-mail */ 

#btn-email{
    background-color: #dc3545;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.521);
}

#btn-email picture {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#btn-email picture svg{
    width: 25px;
    height: 25px;
    fill: rgb(255, 255, 255);
}

.show__email{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 70px;
    right: 0;
    z-index: 16;
    animation-name: animate-circle;
    animation-duration: .5s;
    transition: all ease-in-out .1s;
}

/* Button Instagram */

#btn-instagram{
    background-color: #E4405F;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.521);
}

#btn-instagram picture {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#btn-instagram picture svg{
    width: 25px;
    height: 25px;
    fill: rgb(255, 255, 255);
}

.show__instagram{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 210px;
    right: 0;
    z-index: 14;
    animation-name: animate-circle;
    animation-duration: .5s;
    transition: all ease-in-out .5s;
}

/* Button telegram */

#btn-telegram{
    background-color: #0088cc;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.521);
}

#btn-telegram picture {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#btn-telegram picture svg{
    width: 25px;
    height: 25px;
    fill: rgb(255, 255, 255);
}

.show__telegram{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 280px;
    right: 0;
    z-index: 14;
    animation-name: animate-circle;
    animation-duration: .5s;
    transition: all ease-in-out .9s;
}

/* Button WhatsApp */

#btn-whatsapp{
    background-color: rgb(4, 211, 32);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.521);
}

#btn-whatsapp picture {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#btn-whatsapp picture svg{
    width: 25px;
    height: 25px;
    fill: rgb(255, 255, 255);
}

.show__whatsapp{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 350px;
    right: 0;
    z-index: 14;
    animation-name: animate-circle;
    animation-duration: .5s;
    transition: all ease-in-out 1.1s;
}

/*
=============================
Messenger Facebook button bottom left.
=============================
*/

#btn-messenger{
    background-color: #ffffff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.521);
}

#btn-messenger picture {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#btn-messenger picture img{
    width: 30px;
    height: 30px;
    fill: rgb(255, 255, 255);
}

.show__messenger{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 420px;
    right: 0;
    z-index: 13;
    animation-name: animate-circle;
    animation-duration: .5s;
    transition: all ease-in-out 1.3s;
}

/* Button call */

#btn-call{
    background-color: #007bff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.521);
}

#btn-call picture {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#btn-call picture svg{
    width: 25px;
    height: 25px;
    fill: rgb(255, 255, 255);
}

.show__call{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 490px;
    right: 0;
    z-index: 12;
    animation-name: animate-circle;
    animation-duration: .5s;
    transition: all ease-in-out 1.5s;
}

/*
==========
Styles for services.
==========
*/

.description__service__card {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .35s ease;
    padding: 0 15px;
}

.block.open .description__service__card {
    padding: 15px;
    max-height: 500px; 
}

.card__content h2 {
    cursor: pointer;
}

.description__service__card{
    width: 100%;
    height: auto;
    border-radius: 10px;
    background-color: white;
    color: black;
}