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

/* --------------- */
/* Global Styling */
/* ------------- */

html {font-size: 16px;}

body {  
  font-weight: false;
  line-height: 1.65;
  @apply pt-24 md:pt-32;
}
p {
  font-size: 1em;
}

h1,
h2,
h3,
h4,
h5 {
  @apply font-primary font-semibold;
  line-height: 1.15;
}

h1,
.text-size-h1 {
  @apply text-[2.4em] md:text-[2.8em] lg:text-[3.05em] 
}

h2,
.text-size-h2 { 
  @apply text-[1.8em] md:text-[2em] lg:text-[2.2em] 
}

h3,
.text-size-h3 { 
  @apply text-[1.7em] md:text-[1.8em] lg:text-[1.95em]; 
}

h4,
.text-size-h4 {
  @apply text-[1.56em] 
}

h5,
.text-size-h5 {
  @apply text-[1.25em] 
}

.text-caption {
  @apply text-[0.8em] 
}

small,
.text-small {
  font-size: 0.64em;
}
   
/* --------------- */
/* Tailwind Theme */
/* ------------- */

@layer components {
  /* Global */
  .home {
    @apply overflow-x-hidden;
  }

  /* Default Elements */
  .heading {
    @apply text-white uppercase font-bold text-2xl sm:text-4xl md:text-5xl lg:text-[4.68rem] tracking-tight leading-none;
  }
}


.video-background {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 90vh;
  z-index: -1;
}
 
.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}
 
@media (min-aspect-ratio: 16/9) {
  .video-background iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-background iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}

.wrapper {
  @apply w-full md:max-w-7xl xl:max-w-7xl mx-auto px-10 sm:px-6 lg:px-8;
}

.wrapper-fluid {
  @apply w-full md:max-w-7xl xl:max-w-7xl mx-auto;
}

.wrapper-nosmall {
  @apply w-full md:max-w-7xl xl:max-w-6xl mx-auto  sm:px-6 lg:px-8;
}

.mega-menu-toggle {
  @apply !absolute !-right-[350px] !-top-[55px];

}

#mega-menu-main-menu {
  @apply !left-[-40px];
}

.para-content {
  @apply space-y-3 text-gray-700;
}

.para-content ul {
  @apply list-disc pl-5 mb-4;
}

.para-content ol {
  @apply list-decimal pl-5 mb-4;
}

.para-content li {
  @apply mb-2;
}

.primary-button {
  @apply w-fit inline-block text-center px-5 py-2 rounded font-medium hover:bg-transparent border-2 hover:text-black border-primary hover:border-primary transition bg-primary text-white;
}

.gallery-wrap {
  @apply flex flex-row w-full h-[25vh] md:h-[40vh] overflow-hidden;
}

.item {
  @apply flex-1 hover:flex-[2] items-center justify-center h-full bg-center bg-cover bg-no-repeat relative overflow-hidden hover:scale-[1.2];
  transition: 0.5s ease;
}

.item::before {
  content: '';
  @apply absolute inset-0 bg-black bg-opacity-50 z-[0];
}

.item span {
  @apply flex w-full h-full items-center justify-center text-white md:text-2xl lg:text-3xl font-medium relative z-[10];
}

  @media (min-width: 1060px) {
    .item span {
      @apply transform -translate-y-[30%] opacity-0;
      transition: transform 0.5s ease, opacity 0.5s ease;
    }

    .item:hover span {
      transition: transform 0.5s ease 0.2s, opacity 0.5s ease 0.3s;
      @apply transform translate-y-0 opacity-100;
    }
  }

  .image-overlay::before {
    content: '';
    @apply absolute inset-0 bg-black bg-opacity-10 z-[1];
  }
  .underline-hover {
    position: relative;
    display: inline;
    background-image: linear-gradient(to right, currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.3s ease-in-out;
    padding-bottom: 2px;
  }

  .underline-hover:hover {
    background-size: 100% 2px;
  }

  .accordion {
    margin-bottom: 10px;
    @apply border-b border-stone-200 py-2;
  }

  .accordion:last-child {
    @apply border-b-0;
  }
  .accordion .accordion-btn {
    @apply cursor-pointer text-lg md:text-sm font-medium text-stone-700;
    list-style-image: none;
  }
  .accordion .accordion-btn::marker {
    @apply text-stone-600 block text-sm;
  }

  .accordion .accordion-content {
    background-color: #ffffff;
  }
  .accordion .accordion-content > * {
    @apply py-2 text-base md:text-sm text-stone-700;
  }

  .accordion[open] summary ~ * {
    overflow: hidden;
    animation: heightUp 1s ease-in-out;
  }
  
  @keyframes heightUp {
    0% {
      max-height: 0;
    }
    100% {
      max-height: 2000px;
    }
  }

  .splide__pagination {
    @apply flex items-center justify-center -bottom-10;
  }

  .splide__pagination__page {
    @apply bg-stone-300;
  }

  .splide__pagination__page.is-active {
    @apply bg-primary scale-105 opacity-100;
  }

  .gradient-line {
    background: linear-gradient(89deg,#a0dbfd 1%,#947bed 26%,#fb81b5 51%,#ffbd75 98%);
    @apply block w-full h-[2px] rounded-full overflow-hidden;
  }

  .resouces-list {
    @apply space-y-3 text-stone-700;
  }

  .resouces-list li a {
    @apply  hover:text-primary hover:underline transition-all underline-offset-8 decoration-stone-300 hover:decoration-stone-300 hover:translate-x-1;
  }

  .content-wrapper {
    @apply space-y-3;
  }

  .content-wrapper a {
    @apply text-secondary underline-hover;
  }

  #search-box {
    @apply -translate-y-full;
  }

  .search-box {
    @apply absolute top-[100%] left-0 w-full h-full p-10 bg-white border-t border-stone-200;
  }

  .search-box input {
    @apply w-full p-3 outline-none active:outline-none;
  }

  .search-box button {
    @apply bg-primary text-white p-3 rounded-lg rounded-l-none border-2 border-white border-l-0;
  }

  .search-box form {
    @apply flex items-center justify-center border border-stone-400/50 rounded-lg overflow-hidden;
  }


  ul#menu-main-menu {
    margin: 0px;
  }
  
  nav.main-navbar {
    @apply absolute md:static left-0 md:left-auto top-full z-[1111] bg-white w-full md:w-auto;
  }
  
  
  nav.main-navbar > ul {
    @apply w-full md:w-auto border-b-2 border-primary md:border-none;
  }
  
  nav.main-navbar ul li {
    @apply block relative md:inline-block w-full md:w-auto;
  }
  
  nav.main-navbar ul > li > a {
    @apply px-5 py-4 text-black hover:bg-primary uppercase text-sm hover:text-white transition-all flex items-center w-full md:w-auto;
  }
  
  nav.main-navbar ul > li.menu-item-has-children > a::after {
    content: '⌵';
    @apply ml-1 inline-block -mt-1.5;
  }
  
  nav.main-navbar ul.sub-menu {
    @apply md:absolute text-center px-2 md:px-0 md:pt-2 left-0 bg-[#f5f4f4] hidden z-[300] min-w-[200px] shadow-none md:shadow-md md:top-[100%];
  } 
  
  nav.main-navbar ul.sub-menu > li {
    @apply text-left block uppercase font-normal text-[13px];
  }
  
  nav.main-navbar ul.sub-menu > li a {
    @apply font-normal p-3 block w-full rounded-none;
  }
  
  nav.main-navbar ul.sub-menu-1 > li a {
    @apply font-normal text-xs;
  }
  
  nav.main-navbar ul > li:hover ul.sub-menu {
    @apply block;
  }
  
  nav.main-navbar ul.sub-menu-1 {
    @apply text-left pt-2 pr-0 pb-2 pl-0;
  }
  
  nav.main-navbar ul.sub-menu-1 li {
    @apply block text-xs;
  }
  
  nav.main-navbar ul.sub-menu-1 li a {
    @apply p-2 normal-case;
  }
  
  nav.main-navbar ul.sub-menu-1 li a:hover {
    @apply pl-4 no-underline bg-primary/10;
  }
  
  nav.main-navbar ul > li a:hover {
    /* @apply underline text-[#581311]; */
  }
  

 .para-content #ez-toc-container {
    @apply !block md:!hidden;
  }