@tailwind base;
@tailwind components;
@tailwind utilities;

.roboto-thin {
    font-family: "Roboto", serif;
    font-weight: 100;
    font-style: normal;
  }

  .roboto-light {
    font-family: "Roboto", serif;
    font-weight: 300;
    font-style: normal;
  }

  .roboto-regular {
    font-family: "Roboto", serif;
    font-weight: 400;
    font-style: normal;
  }

  .roboto-medium {
    font-family: "Roboto", serif;
    font-weight: 500;
    font-style: normal;
  }

  .roboto-bold {
    font-family: "Roboto", serif;
    font-weight: 700;
    font-style: normal;
  }

  .roboto-black {
    font-family: "Roboto", serif;
    font-weight: 900;
    font-style: normal;
  }

  .roboto-thin-italic {
    font-family: "Roboto", serif;
    font-weight: 100;
    font-style: italic;
  }

  .roboto-light-italic {
    font-family: "Roboto", serif;
    font-weight: 300;
    font-style: italic;
  }

  .roboto-regular-italic {
    font-family: "Roboto", serif;
    font-weight: 400;
    font-style: italic;
  }

  .roboto-medium-italic {
    font-family: "Roboto", serif;
    font-weight: 500;
    font-style: italic;
  }

  .roboto-bold-italic {
    font-family: "Roboto", serif;
    font-weight: 700;
    font-style: italic;
  }

  .roboto-black-italic {
    font-family: "Roboto", serif;
    font-weight: 900;
    font-style: italic;
  }

  h1{
    color: #0184ce;
    font-family: Arial, sans-serif;
    font-weight:bold;
  font-size: clamp(1.5rem, 15vw, 5rem);
    margin: 5px;
  }


  h2{
    color: #0184ce;
    font-family: Arial, sans-serif;
    font-size: clamp(0.8rem, 1.5cqw, 1.7rem);
    text-align: justify;
    margin: 5px;
  }

  h3{
    color: #0184ce;
    font-family: Arial, sans-serif;
    font-size: clamp(1rem, 1cqw, 1rem);
    text-align: justify;
    margin: 5px;
  }


/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 11px;
  width: 11px;
}
*::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #ffffff;
}
*::-webkit-scrollbar-track:hover {
  background-color: #ff9e1b40;
}
*::-webkit-scrollbar-track:active {
  background-color: #ff9e1bb3;
}
*::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background-color: #ff9e1b;
  border: 2px solid #FFFFFF;
}
*::-webkit-scrollbar-thumb:hover {
  background-color:#ff9e1bb3;
}
*::-webkit-scrollbar-thumb:active {
  background-color:#ff9e1b;
}


  .body{
    background-color: white;
    margin: 0;
    pointer-events: none;
    scroll-behavior: smooth;
  }

  .header{
    width: auto;
    max-width: 250px;
    height: fit-content;
    position: fixed;
    z-index:100;
    display: flex;
    flex-wrap: nowrap;
    justify-items: center;
    align-items: center;
    margin: 15px auto;
    padding: 15px;
    left: 0;
    right: 0;
    background-color: #0184ce;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);}

  .section{
    width: 100%;
    min-height: 100vh;
    height: fit-content;
    display: grid;
    justify-items: center;
    align-items: center;
    margin: auto;
    padding:0;
    background-color: #fdfdfd;
  }

  .sectionContent{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items:center;
  }

  .sectionContentChild{
      min-width: 150px;
      max-width: 400px;
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 40px;
  }

  .sectionContentTitle{
      color: red;
      margin: 0;
      padding: 5px;
      font-family: Arial, sans-serif;
      font-size: clamp(2rem, 7cqw, 2.5rem);
      text-align: left;
  }

  .sectionContentText{
      color: red;
      font-size: medium;
      text-align: justify;
      font-weight: 500;
      margin: 0;
      padding: 5px;
      font-family: Arial, sans-serif;
    }

  @media (max-width: 800px) {

      .sectionContent{
          display: flex;
          flex-direction: column;
      }

      .sectionContentChild{
          margin: 30px 10px;
      }

      .sectionContentReverse{
          flex-direction: column-reverse;
      }
  }

  /* tool: https://scroll-driven-animations.style/ */
  .titleReveal{
      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 81%, transparent);
      mask-size:200%;
      mask-position: 200%;
      mask-repeat:no-repeat;
      animation: titleRevealAnimation 1.5s normal forwards ease-in-out;
      animation-delay: 0.5s;
  }

  @keyframes titleRevealAnimation {
      0%{
          mask-position: 200%;
      }
      100% {
          mask-position: 0%;
      }
  }

  .textReveal{
      animation: textRevealAnimation linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
  }

  @keyframes textRevealAnimation {
      0%{
          opacity: 0;
      }
      50%{
          opacity: 0;
      }
      100% {
          opacity: 1;
          }
  }

  .imageUp{
      box-shadow:0 0px 0px 0px rgba(0,0,0,0.5);
      animation: imageUpAnimation linear both;
      animation-timeline: view();
      animation-range: entry 70% cover 60%;
  }

  @keyframes imageUpAnimation {
      0%{
          box-shadow:0 0px 0px 0px rgba(0,0,0,0.5);
          transform: translateY(0px);
      }
      100% {
          box-shadow:0 10px 15px 5px rgba(0,0,0,0.5);
          transform: translateY(-15px);
          }
  }

  .textRevealLeft{
    animation: textRevealLeftAnimation linear both;
    animation-timeline: view();
    animation-range: entry 40% cover 45%;
  }

  @keyframes textRevealLeftAnimation {
    0%{
      transform: translate(-40px, 0px);
      opacity: 0;
      }
    100% {
        transform: translateY(0px);
        opacity: 1;
        }
  }

  .textRevealUp{
    text-align: center;
    animation: textRevealUpAnimation linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
  }

  @keyframes textRevealUpAnimation {
    0%{
      transform: translate(0, 80px);
      }
    100% {
      transform: translate(0px, 0px);
    }
  }

  .objectTranslateRight{
    animation: objectTranslateRightAnimation linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }

  @keyframes objectTranslateRightAnimation {
    0%{
      transform: translate(300px, 0px);
      /* object-position: 0px 0px; */
        }
    100% {
      transform: translateY(0px);
        /* object-position: -200px 0px; */
        }
  }

  .buttonLight{
    height: fit-content;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: white;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    transition: all 0.15s ease-in;
  }

    .buttonLight:hover{
      background-color:rgba(255, 255, 255, 0.4);
    }

    .buttonLight:active{
      background-color: white;
      color: #0184ce;
    }

    .buttonDark{
      height: fit-content;
      font-family: Arial, sans-serif;
      font-weight: bold;
      color: red;
      background-color:rgba(255, 255, 255, 1.0);
      padding: 10px;
      text-align: center;
      border-radius: 10px;
      transition: all 0.15s ease-in;
    }

      .buttonDark:hover{
        background-color:rgba(255, 255, 255, 0.7);
      }

      .buttonDark:active{
        background-color: rgba(137, 0, 0, 0.8);
        color: white;
      }

    .iconButton{
      transition: all 0.15s ease-in;
    }

    .iconButton:hover{
      opacity:0.7;
    }

    .iconButton:active{
      opacity:0.4;
    }

    .footer{
      left: 0;
      right: 0;
      margin: auto;
    }

    .footerInner{
      display: flex; flex-direction: column; justify-items: center; align-items: center;
      margin: 15px; padding: 10px;
      background-color: #ff9e1b; border-radius: 15px;
    }

    @media (max-width: 550px) {
      .footerSpace{
        display:none;
      }
    }

    .footerSpace{
      margin-left:auto;
    }

    .footerText{
      font-family: Arial, sans-serif;
    font-weight: bold;
    color: #484b50;
    padding: 10px;
    text-align: center;
    }

    .imageScale{
      max-width:700px;
      width: 50%;
      object-fit: contain;
    }

    // --- faq accordion classes
    // doc:https://codepen.io/raubaca/pen/PZzpVe

    /* Core styles/functionality */
    .tab {
      position: relative;
    }
    .tab input {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }
    .tab__content {
      max-height: 0;
      overflow: hidden;
      transition: all 0.35s;
    }
    .tab input:checked ~ .tab__content {
      max-height: 10rem;
    }

    /* Visual styles */
    .accordion {
      color: #0184ce;
      border: 3px solid;
      border-radius: 0.5rem;
      overflow: hidden;
    }
    .tab__label,
    .tab__close {
      display: flex;
      color: white;
      background: #0184ce;
      cursor: pointer;
    }
    .tab__label {
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
    }
    .tab__label::after {
      content: "\276F";
      width: 1em;
      height: 1em;
      text-align: center;
      transform: rotate(90deg);
      transition: all 0.35s;
    }
    .tab input:checked + .tab__label::after {
      transform: rotate(270deg);
    }
    .tab__content p {
      margin: 0;
      padding: 1rem;
    }
    .tab__close {
      justify-content: flex-end;
      padding: 0.5rem 1rem;
      font-size: 0.75rem;
    }
    .accordion--radio {
      color:#ff0000;
    }

    /* Arrow animation */
    .tab input:not(:checked) + .tab__label:hover::after {
      animation: bounce .5s infinite;
    }
    @keyframes bounce {
      25% {
        transform: rotate(90deg) translate(.25rem);
      }
      75% {
        transform: rotate(90deg) translate(-.25rem);
      }
    }

    /* contact button */
    .contactButton{
      background-color: white;
      display: flex; flex-direction: row; flex-wrap: nowrap;
      align-items: center; justify-content: space-evenly;
      padding: 20px; margin: 10px;
      border-radius: 10px;
      cursor: pointer;
      transition: all 5s ease-in
    }

    .contactButton:hover{
      animation: buttonIconTextHoverAnim .15s normal forwards ease-in-out;
    }

    @keyframes buttonIconTextHoverAnim {
      0% {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(0,83,130,0);
        box-shadow: 0px 0px 0px 0px rgba(0,83,130,0);
        transform: rotate(0) translate(0, 0);
      }
      100% {
        -webkit-box-shadow: 0px 10px 10px 5px rgba(0,83,130,0.5);
        box-shadow: 0px 10px 10px 5px rgba(0,83,130,0.5);
        transform: rotate(0) translate(0, -10px);
      }
    }

    .contactButton:active{
      animation: buttonIconTextActiveAnim .15s normal forwards ease-in-out;

    }

    @keyframes buttonIconTextActiveAnim {
      0% {
        -webkit-box-shadow: 0px 10px 10px 5px rgba(0,83,130,0.5);
        box-shadow: 0px 10px 10px 5px rgba(0,83,130,0.5);
        transform: rotate(0) translate(0, -10px);
        opacity:1;
      }
      100% {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(0,83,130,0);
        box-shadow: 0px 0px 0px 0px rgba(0,83,130,0);
        transform: rotate(0) translate(0, 0);
        opacity:0.5;
      }
    }