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

 .main {
     min-height: 1000px;
     background-color: #0d1d2b;
     /* background-image: url(../images/background_color.png);*/
     font-family: 'montserrat';
     color: #fdf9ef;
     border-radius: 20px;
     overflow-x: hidden;
     font-size: 13px;
     box-shadow: 1PX 1PX rgb(168, 162, 162);
 }



 header {
     position: relative;
     height: 100px;
     font-weight: 500;

 }

 .logo {
     width: 95px;
     height: 80px;
     float: left;
     padding: .3em 0 0 1em;
 }



 ul {
     display: flex;
     list-style-type: none;

 }

 ul li {
     padding-LEFT: .6em;
 }

 ul li a {
     text-decoration: none;
     color: #fdf9ef;
     padding-left: 15px;


 }

 nav {

     position: absolute;
     top: 30%;
     right: 5%;



 }

 #ikons_section_findos_text_footer {

     padding-top: 10px;
 }

 /*-------------------------------------*/
 .flere_backgrounds_animation {
     min-height: 600px;
     width: 100%;
     background-size: cover;
     background-repeat: no-repeat;

     animation: slides 40s linear infinite;
     position: relative;
     color: white;


 }

 @keyframes slides {
     0% {

         background-image: url(../images/man-headphones-video-call-meeting-group.jpg);

     }

     35% {
         background-image: url(../images/phonecall_therapy.jpg);
     }

     70% {
         background-image: url(../images/chat_therapy.jpg);
     }

     100% {
         background-image: url(../images/one\ to\ one_therapy.jpeg);
     }
 }


 .image_text {

     position: absolute;
     top: 4%;
     left: 5%;
     font-family: 'montserrat extrabold';



 }


 .image_text p {
     font-size: 19px;
     color: #f7f6f3;
     font-weight: 400;
     text-shadow: #69615e .5px .5px;
     line-height: 20px;
     font-style: italic;

 }

 /*--------------------making the text disappear by using opacity*/
 .first_text {
     opacity: 0;
     animation: aparecer 40s infinite;
     margin-top: 20px;

 }

 @keyframes aparecer {

     0% {
         opacity: 1;

     }

     /* En el 100% de la animación, el texto es completamente visible */
     35% {
         opacity: 0;
     }

     70% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 /*--------------------------*/
 .second_text {
     opacity: 0;
     animation: aparecer2 40s linear infinite;

 }

 @keyframes aparecer2 {

     0% {
         opacity: 0;
     }

     /* En el 100% de la animación, el texto es completamente visible */
     35% {
         opacity: 1;
     }

     70% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 .third_text {
     opacity: 0;
     animation: aparecer3 40s linear infinite;

 }

 @keyframes aparecer3 {

     0% {
         opacity: 0;
     }

     /* En el 100% de la animación, el texto es completamente visible */
     35% {
         opacity: 0;
     }

     70% {
         opacity: 1;
     }

     100% {
         opacity: 0;
     }
 }

 .fourth_text {
     opacity: 0;
     animation: aparecer4 40s linear infinite;

 }

 @keyframes aparecer4 {

     0% {
         opacity: 0;
     }

     /* En el 100% de la animación, el texto es completamente visible */
     35% {
         opacity: 0;
     }

     70% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }


 /*------------------------------------------*/
 .a_links:hover {
     background-color: rgb(194, 81, 47, 0.7);
     text-shadow: .4px .4px grey;
 }

 /*------------------------------*/
 .quote {
     /* quote billede*/

     height: 40px;
     display: block;
     margin-bottom: -38px;



 }

 .carousel {
     clear: both;
 }

 .comments {
     /* comments box where the carousel is*/
     min-height: 20rem;
     position: relative;
 }

 /*------------------------*/
 /*  carousel of comments with the arrows to the sides. */
 .carousel {
     width: 100%;
     overflow-x: auto;
     margin: 3em auto;
     display: flex;
     gap: 1em;
     scroll-behavior: smooth;

     scroll-snap-type: x mandatory;
     scroll-marker-group: after;
     anchor-name: --arrows;
 }



 .carousel::-webkit-scrollbar {
     display: none;
 }


 .carousel::scroll-button(right),
 .carousel::scroll-button(left) {
     content: ' → ';
     border: none;
     background-color: #a3e2eb;
     /* COLOR FONDO DE FLECHA*/
     font-family: "montserrat";
     font-size: 2.5rem;
     color: rgb(94, 92, 92);
     /* color flecha*/
     height: 50px;
     /* size of arrows*/
     width: 50px;
     border-radius: 50%;
     padding-bottom: 0.1em;
     cursor: pointer;
     /*fija la position de las flechas*/
     position: fixed;
     position-anchor: --arrows;
     position-area: right center;
     translate: -90%;
 }

 .galery1::scroll-button(right),
 .galery1::scroll-button(left) {
     position-anchor: --arrows;

 }

 .carousel::scroll-button(left) {
     content: '←';
     position-area: left center;
     translate: 90%;
 }

 .carousel::scroll-button(right):disabled,
 .carousel::scroll-button(left):disabled {
     opacity: 0.1;
     cursor: auto;
 }

 /*--------------------------------------------------------*/

 .card {
     flex: 0 0 20em;
     /*flex positiona las tarjetas dando un ancho de 20, causando un overflow
  que automaticamente genera un scrollbar, por eso debimos desactivar el scrollbar arriba */
     height: 12em;
     background-color: rgba(25, 54, 41, 0.8);
     background-image: url(../images/equilibrio.jpg);
     background-blend-mode: multiply;

     /* COLOR TARJETA*/
     padding: 1em;
     /* marco  delgado que puede agrandarse_ da paso entre el background y la imagen */
     border-radius: 1em;
     text-align: center;
     align-content: center;
     scroll-snap-align: start;
     /* va de la mano con el scroll-snap-type del contenedor;*/
     width: 20em;
     font-family: 'montserrat';

     font-size: 12px;
     color: #e0dbda;
 }

 /*-----------------------------------------------------------*/
 .carousel::scroll-marker-group {
     display: flex;
     /* to have themm in a line */
     justify-content: center;
     gap: .6em;

     margin-bottom: 20px;
 }

 .card::scroll-marker {
     content: '';
     /* cards1 es la clase dada a todas las img de la galleria */
     height: 1em;
     width: 1em;
     background-color: silver;
     border-radius: 50%;
 }

 .card::scroll-marker:target-current {
     background-color: rgb(236, 160, 97)
 }

 /*---------------------------------------------------------------*/



 footer {
     /* background-color: rgb(199, 236, 243);*/
     min-height: 80px;
     margin-top: -70px;
     position: relative;
     /* para centrar los ikons de footer*/
     display: flex;
     justify-content: flex-start;
     /* align-content: center; */
     /* pone los elementos al centro de footer*/
     flex-wrap: wrap;

 }

 footer table {
     padding-left: 20px;
     border-collapse: separate;


     min-height: 50px;


 }

 footer th,
 footer td {
     text-align: left;
     font-family: 12px;
     flex-grow: 1;


 }


 table caption {
     padding-top: 15%;
     /* no coloco el padding-top en table, porque daria un espacio entre caption y el contenido de table (dage, timer)*/
     font-weight: 500;


 }

 footer td:nth-child(1) {

     padding-right: 30px;


 }

 footer td:nth-child(2) {
     padding-right: 30px;

 }

 #dage {
     font-weight: 500;




 }

 #time {
     font-size: 12px;
     flex-shrink: 1;
 }


 #ikons_section {

     gap: 8px;
     position: absolute;
     right: 3%;
     top: 25%;
 }


 .ikon_image_footer {
     /* flex-grow: 1;*/
     height: 25px;
     padding-right: 5px;
     display: inline-block;



 }



 #ikons_section_findos_text_footer {
     padding-top: 100px;
     flex-grow: 1;

 }

 /*   content inhold ------------------------*/

 @media (max-width:500px) {
     .logo {
         height: 55px;
         width: 65px;
     }



     .card {
         font-size: 10px;
     }

     footer {
         min-height: 200px;
     }

 }

 @media (min-width:501px)and(max-width:960px) {


     .logo {
         width: 80px;
         height: 80px;

     }

     .card {
         font-size: 10px;
     }

     footer {
         min-height: 200px;
     }

     .image_text p {
         font-size: 25px;


     }

 }

 @media (min-width:961px)and (max-width:2000px) {
     .main {
         font-size: 15px;
     }

     table {
         font-size: 110%;
     }

     .carousel::scroll-marker-group {


         margin-bottom: 50px;
     }

     footer {
         margin-top: 1px;
     }

     #ikons_section {


         padding-left: 75%;
         padding-bottom: 10%;



     }

     .ikon_image_footer {

         height: 35px;




     }

     .flere_backgrounds_animation {
         height: 700px
     }



     .card {
         font-size: 20px;

     }

     #phone_openhours {
         font-size: 120%;
     }

     .image_text p {
         font-size: 25px;


     }




 }

 @media (min-width:2001px)and (max-width:5000px) {
     .main {
         font-size: 20px;
     }

     table {
         font-size: 130%;
     }



     #ikons_section {


         padding-left: 80%;
         padding-bottom: 5%;
     }

     .flere_backgrounds_animation {
         height: 900px
     }

     .card {
         font-size: 35px;
     }

     #phone_openhours {
         font-size: 140%;
     }

     .image_text p {
         font-size: 29px;


     }

 }