:root {

}

* {
   font-family: Avenir, Calibri, "Helvetica Neue", "SF Pro Rounded", Sans, serif;
   margin-inline: 0;
}

a {
   color: black;
   text-decoration: none;

}

h3 {
   font-size: x-large;
}

html {
   position: relative;
   min-height: 100%;
}



/*HEADER-SECTION*/
/*with a 450px minimal width we will have to introduce
a menu wrapper*/
.ref:hover {
   color: #3d50ce;
   transform: scale(1.02);
   transition: transform 0.1s ease-in-out;
}

.header {
   margin: 5px;
}

.header header {
   margin: 5px;
}

.header header .container * {
   margin: 5px;
   white-space: nowrap;
}

@media (min-width: 501px) {
   #menu {
      display: none;
      background-size: unset;
   }

   .header .container {
      display: flex;

      flex-wrap: nowrap;
      justify-content: space-between;

      gap: 30px;

      align-items: center;
   }
}


@media (min-width: 700px) {
   .header .container {
      font-size: large;
   }
   .container h3{
      font-size: x-large;
   }
}
/*END: HEADER-SECTION*/

/*********************/

/*HERO-SECTION*/
@media (min-width: 400px) {
   .hero-section {
      width: 100vw;
      height: 480px;
      color: white;

      background: url(/assets/img/IMG_0824.jpeg) no-repeat fixed center;
      background-size: cover;

   }
}
@media (max-width: 399px) {
   .hero-section {
      width: 100vw;
      height: 520px;
      color: white;

      background: url(/assets/img/300px.jpeg);
      background-position: center;
   }
}

.hero-container {
   display: flex;
   text-align: center;
   flex-direction: column;
   padding: 5%;
}

.hero-title {
   font-size: 36px;
}

.hero-text {
   font-size: 20px;
}
/*END: HERO-SECTION*/


.about-us{

}

/*SERVICE-SECTION*/
.services {
   display: flex;
   justify-content: center;
}

@media (min-width: 601px) {
   .services-container {
      padding: 24px;
      display: inline-flex;
      max-width: 66%;
      justify-content: center;
   }
}

@media (max-width: 600px){
   .services-container {
      padding: 24px;
      display: flex;
      flex-direction: column;
   }
}

@media (max-width: 600px) {
   .service-block{
      flex-basis: 33%;
      background: rgba(241, 237, 235, 0.76);
      margin: 10px;
      border-radius: 5px;
      max-width: 400px;
      min-width: 170px;
   }

   .service-block:hover{
      background: rgba(241, 237, 235, 0.76);
      margin: 10px;
      border-radius: 5px;
      box-shadow: rgba(175, 175, 175, 0.6) 5px 5px 0px 0px;
      transform: translate(-0.5px, -0.5px);
      transition: 0.4s ease;
   }
}

@media (min-width: 601px) {
   .service-block{
      flex-basis: 33%;
      background: rgba(242, 237, 236, 0.76);
      border-radius: 5px;
      max-width: 400px;
      min-width: 170px;
      margin: -20px 10px 10px;
   }

   .service-block:hover{
      background: rgba(241, 237, 235, 0.76);
      border-radius: 5px;
      box-shadow: rgba(175, 175, 175, 0.6) 5px 5px 0px 0px;
      transform: translate(-0.5px, -0.5px);
      transition: 0.4s ease;
      margin: -20px 10px 10px;

   }
}


.service-block div {
   padding: 15px;
}

.service-block h3{

}

#use-cases {
   margin: 30px;
   display: grid;
   grid-template-columns: repeat(3, minmax(100px, 1fr));
   gap: 16px;
}

.case {
   align-items: center;
   justify-content: center;
   padding: 10px;

   background: rgba(119, 136, 153, 0.50);
   border-radius: 5px;

   display: grid;
   position: relative;
   overflow: hidden;

   object-fit: cover;
}

.case:hover{
   box-shadow: rgba(175, 175, 175, 1) 5px 5px 0px 0px;
   transform: translate(-0.5px, -0.5px);
   transition: 0.4s ease;
}

.case h4 {
   text-align: center;
   word-wrap: anywhere;
}
/*END: SERVICE-SECTION*/

/*VIDEO-SECTION*/
@media (min-width: 800px) {
   .video-section {
      padding-top: 15px;
      padding-bottom: 15px;

      display: flex;


      align-items: center;
      margin-bottom: 1.75em;
      margin-inline: 11vw;

   }

   .video-section-container {
      color: rgb(32, 32, 32);
      column-gap: 20px;

      justify-content: center;
      display: flex;
      flex-direction: row;

      margin-inline: 11vw;
   }

   .video-text {
      flex-basis: 33%;

      max-width: 280px;

      justify-self: right;
      align-items: center;
      margin-top: calc(40vw / 1.8 / 8);
   }

   .video-container {
      flex-basis: 66%;
      align-items: center;
   }

   .video iframe {
      width: 40vw;
      height: calc(40vw / 1.8);


      align-self: flex-start;

      margin-left: 0;
      margin-top: 5vw;
   }

   .tv-symbols {
      display: flex;
   }

   .tv-symbols div img:hover {
      transform: scale(1.1);
      transition: 0.4s ease-in-out;
   }

   .tv-symbols div img {
      transition: 0.2s ease-in-out;

   }

   #cookies {
      margin-right: 0.5vw; margin-left: -0.5vw;

   }

}
@media (max-width: 799px) {
   .video-section {
      padding-top: 15px;
      padding-bottom: 15px;

      display: flex;

      justify-content: center;

      align-items: center;
      margin-bottom: 1.75em;
   }

   #cookies {
      margin-right: 12vw; margin-left: 8vw;

   }

   .video-section-container {
      color: rgb(32, 32, 32);
      column-gap: 20px;

      justify-content: center;
      display: flex;
      flex-direction: column;
      grid-template-columns: repeat(2, minmax(100px, 1fr));
   }

   .video-text {
      display: flex;

      justify-content: center;
      justify-self: center;
      margin-inline: 10vw;
   }

   .video-container {


   }

   .video iframe {
      width: 80vw;
      height: calc(80vw / 1.8);
      margin-inline: 10vw;
   }

   .tv-symbols div img:hover {
      transform: scale(1.1);
      transition: 0.4s ease-in-out;
   }

   .tv-symbols div img {
      transition: 0.2s ease-in-out;

   }
}


#menu-blend-over .header {
   margin: 0;
}

.menu-container {
   margin-right: 25px;
}

#menu-blend-over {
   margin: 0;
   font-size: x-large;
   align-items: center;
   display: none;
   flex-direction: column;
   flex-wrap: nowrap;
   overflow: visible;

   animation: slide-in-left 0.3s ease-in-out forwards;
}

@keyframes slide-in-left {
   from {
      opacity: 0;
      transform: translateX(0%);
   }

   to {
      opacity: 100%;
      transform: translateX(36%);
   }
}

/*INFO-SECTION*/
.info-section{}

.info-container {
   display: flex;
}

@media (max-width: 650px) {
   .info-container {
      flex-direction: column;
   }
}

.info-pic {
}
/*END: INFO-SECTION*/

/*TESTIMONIAL*/
@media (min-width: 600px) {
   .testimonial {
      display: flex;
      gap: 10px;
      padding: 30px;
   }

   .testimonial-container {
      flex-basis: 50%;
      padding: 15px
   }
}

@media (max-width: 599px) {
   .testimonial {
      display: flex;
      gap: 10px;
      padding: 30px;
      flex-direction: column;
   }

   .testimonial-container {
      flex-basis: 50%;
      padding: 15px
   }
}

/*END: TESTIMONIAL*/

/*FOOTER*/

.footer {
   background-color: rgba(180, 189, 250, 0.35);
   width: 100vw;
   left: 0;

}

footer {
   position: absolute;
   bottom: 0;
   height: 540px;
   width: 100vw;
}

/*makes room for expanded footer*/
@media (max-width: 549px) {
   body {
      margin: 0 0 0px;
   }
}

@media (min-width: 550px) {
   .footer-container {
      display: flex;
      flex-direction: row;
      height: 200px;
   }

   .footer {
      position: absolute;
      bottom: 0;
      height: 200px;
      width: 100%;
      overflow: hidden;
   }

   body {
      margin: 0 0 200px;
   }
}

.table {
   display: flex;
   flex-direction: column;
   padding: 25px;
}

.table a {
   text-decoration: underline;
}


.privacy-notice {
   padding: 45px;
}
@media (min-width: 500px) {
   .privacy-notice {
      padding: 45px 40vw 45px 45px;
   }
}

.contact-container {
   margin-inline: 45px;
}


/*REVIEWS*/
@media (max-width: 500px) {
   .reviews {
      display: flex;
      flex-direction: column;
      gap: 25px;
      margin: 45px;
   }
}

@media (min-width: 500px) {
   .reviews {
      display: flex;
      flex-direction: row;
      gap: 25px;
      margin: 45px;
   }
}

.reviews-container {
   flex-basis: 50%;
}

.rev {
   padding: 20px;
   border-style: solid;
   border-radius: 5px;
   border-width: 2px;
   margin-bottom: 20px;
   transition: 0.2s;
}

.rev:hover {
   box-shadow: 5px 5px 0 0 rgba(175, 175, 175, 0.75);
   transition: 0.3s;
}

/*IMPRESSUM*/
.impressum-container {
   padding: 45px;
}
@media (min-width: 500px) {
   .impressum-container {
      padding: 45px 40vw 45px 45px;
   }
}


.table p {
   margin: 0;
}



/*===================*/
.long-covid {
   border-radius: 5px;
}

@media (min-width: 500px) {
   .long-covid {
      width: 45vw;
      height: 25vw;
   }
   #top-video {
      display: none;
   }

   #main-video {
      display: initial;
   }
}

@media (max-width: 499px) {
   .long-covid {
      width: 80vw;
      height: 47vw;
   }

   #top-video {
      display: initial;
   }

   #main-video {
      display: none;
   }
}