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

@layer utilities {
  .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* For extra small screen sizes (e.g., mobile) */
  @media (min-width: 390px) {
    .container {
      max-width: 350px;
    }
  }

  /* For small screen sizes (e.g., mobile) */
  @media (min-width: 640px) {
    .container {
      max-width: 480px;
    }
  }

  /* For medium screen sizes (e.g., tablets) */
  @media (min-width: 768px) {
    .container {
      max-width: 724px;
    }
  }

  /* For large screen sizes (e.g., desktops) */
  @media (min-width: 1024px) {
    .container {
      max-width: 1000px;
    }
  }

  /* For extra-large screen sizes (e.g., large desktops) */
  @media (min-width: 1280px) {
    .container {
      max-width: 1128px;
    }
  }

  /* For Nav Mega menu Dropdown */

  .dropContainer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* For extra small screen sizes (e.g., mobile) */
  @media (min-width: 390px) {
    .dropContainer {
      width: 350px;
    }
  }

  /* For small screen sizes (e.g., mobile) */
  @media (min-width: 640px) {
    .dropContainer {
      width: 480px;
    }
  }

  /* For medium screen sizes (e.g., tablets) */
  @media (min-width: 768px) {
    .dropContainer {
      width: 724px;
    }
  }

  /* For large screen sizes (e.g., desktops) */
  @media (min-width: 1024px) {
    .dropContainer {
      width: 1000px;
    }
  }

  /* For extra-large screen sizes (e.g., large desktops) */
  @media (min-width: 1280px) {
    .dropContainer {
      width: 1128px;
    }
  }

  #theme-toggle {
    transition:
      transform 0.5s ease-in-out,
      opacity 0.5s ease-in-out;
  }

  /* Moon to Sun Transition */
  .moon {
    transform: rotate(40deg);
  }

  .sun {
    transform: rotate(120deg);
  }

  .moon .circle-sun {
    mask: url(#circle-mask-1);
    r: 9px;
  }

  .sun .circle-sun {
    mask: url(#circle-mask-1);
    r: 5px;
    mask: none;
  }

  /* Optional transition for sun rays */
  .sun-rays {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

  .sun .sun-rays {
    opacity: 1;
  }

  /* Mobile Nav */
  .hamburger .line {
    transition: all 0.3s ease-in-out;
  }

  #hamburger-1.is-active .line:nth-child(2) {
    opacity: 0;
    /* Hide the middle line */
  }

  #hamburger-1.is-active .line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    /* Move and rotate the top line */
  }

  #hamburger-1.is-active .line:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
  }

  /* Slider arrow */

  .tns-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 1;
    display: flex;
    justify-content: space-between;
  }

  .tns-controls button i {
    color: #636982;
    font-size: 30px;
    transition: all linear 0.2s;
    position: relative;
    z-index: -1;
  }

  .tns-controls button:hover i {
    color: #ffaf29;
  }

  @media (min-width: 320px) and (max-width: 639.98px) {
    .tns-controls {
      top: 22%;
    }

    .tns-controls button i {
      color: #fff;
    }
  }

  @media (min-width: 640px) and (max-width: 767.98px) {
    .tns-controls {
      top: 28%;
    }

    .tns-controls button i {
      color: #fff;
    }
  }

  @media (min-width: 768px) and (max-width: 1023.98px) {
    .tns-controls {
      top: 36%;
    }

    .tns-controls button i {
      color: #fff;
    }
  }

  /* Animation for fading in */
  .fadeIn {
    opacity: 0;
    animation: fadeIn 1s forwards;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  /* Animation for fading out */
  .fadeOut {
    opacity: 1;
    animation: fadeOut 1s forwards;
  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .paused {
    animation-play-state: paused;
  }

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

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .line-fade {
    background: rgb(2, 0, 36);
    background: linear-gradient(
      0deg,
      rgba(2, 0, 36, 0) 0%,
      rgba(255, 255, 255, 1) 50%,
      rgba(0, 212, 255, 0) 100%
    );
  }

  @media (prefers-color-scheme: dark) {
    .tab-button.active {
      background-color: #ffaf29;
      color: #333646;
      border: 1px solid #ffaf29;
    }
  }

  .dark .tab-button.active {
    background-color: #ffaf29;
    color: #333646;
    border: 1px solid #ffaf29;
  }

  .tab-button.active {
    background-color: #ffaf29;
    color: #333646;
    border: 1px solid #ffaf29;
  }
}