@tailwind base;
@tailwind components;
@tailwind utilities;
@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@font-face {
  font-family: 'ethnocentric';
  src: url('/fonts/ethnocentric.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


.animate-slide {
  display: flex;
  width: max-content;
  animation: slide 15s linear infinite;
}


.font-gradient {
  background-color: #443b62;
  background-image: linear-gradient(43deg, #302b4b 0%, #8780bc 35%, #302b4b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}



.btn-gradient {
  background-color: #443b62;
  background-image: linear-gradient(43deg, #302b4b 0%, #4b466e 47%, #766fa6 83%, #8780bc 100%);
  color: white;
  padding: 8px 15px;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}


.btn-gradient:hover {
  background-image: linear-gradient(43deg, #2a2341 0%, #403c61 47%, #655b90 83%, #7269a6 100%);
}

.social-gradient {
  background-color: #443b62;
  background-image: linear-gradient(43deg, #302b4b 0%, #4b466e 47%, #766fa6 83%, #8780bc 100%);
  color: white;
  padding: 15px 15px;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.btn-gradient-light {
  background-color: #8780bc;
  background-image: linear-gradient(43deg, #8780bc 0%, #938dc3 15%, #b5b1d7 100%);
  color: purple-50;
  border: none;
  border-radius: 50px;
  font-weight: semibold;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.social-gradient-light {
  background-color: #8780bc;
  background-image: linear-gradient(43deg, #8780bc 0%, #938dc3 15%, #b5b1d7 100%);
  color: purple-50;
  border: none;
  border-radius: 50px;
  font-weight: semibold;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.btn-gradient-light:hover {
  background-image: linear-gradient(43deg, #766fa6 0%, #8684b7 15%, #a7a4ca 100%);
}

.social-gradient-light:hover {
  background-image: linear-gradient(43deg, #766fa6 0%, #8684b7 15%, #a7a4ca 100%);
}

/* Darker button  purple green version */
.btn-gradient-dark {
  background-color: #2e2542;
  background-image: linear-gradient(45deg, #5e4589 0%, #b532ac 100%);
  color: white;
  padding: 8px 15px;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.btn-gradient-dark2 {
  background-color: #2e2542;
  background-image: linear-gradient(45deg, #5e4589 0%, #b532ac 100%);
  color: white;
  padding: 8px 32px;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.btn-gradient-dark:hover {
  background-image: linear-gradient(45deg, #3e2e5d 0%, #9a2a93 100%);
}

.text-gradient-dark {
  background-color: #5e4589;
  background-image: linear-gradient(45deg, #5e4589 0%, #b532ac 25%,  #5e4589 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.text-purple-lt {
  background-color: #cf5af8;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.text-gradient {
  background-color: #704fa8;
  background-image: linear-gradient(45deg, #703bca 0%, #d33bc9 25%,  #703bca 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.bg-gradient-dark {
  background-color: #704fa8;
  background-image: radial-gradient(circle, #302b4b  0%, #211d34 100%);
}


.btn-gradient-lt {
  background-color: #7c65a9;
  background-image: linear-gradient(45deg, #7c65a9 0%, #96d4ca 100%);
  color: white;
  padding: 8px 15px;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.btn-gradient-lt2 {
  background-color: #7c65a9;
  background-image: linear-gradient(45deg, #9277c6 0%, #a5e9de 100%);
  color: white;
  padding: 8px 15px;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.btn-gradient-lt:hover {
  background-color: #443b62;
  background-image: linear-gradient(45deg, #705b98 0%, #8bc5bb 100%);
  color: white;
  /* padding: 8px 15px; */
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.social-gradient-lt {
  background-color: #8780bc;
  background-image: linear-gradient(45deg, #7c65a9 0%, #96d4ca 100%);
  color: purple-50;
  border: none;
  border-radius: 50px;
  font-weight: semibold;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.social-gradient-lt:hover {
  background-image: linear-gradient(45deg, #705b98 0%, #8bc5bb 100%);
}

.bg-cyan-gradient {
  background-color: #3b6162;
  background-image: linear-gradient(43deg, #20434a 0%, #507e7f 47%, #74afae 83%, #5fa69b 100%);
}


.emphasis {
  @apply font-semibold text-gradient-dark bg-clip-text text-transparent;
  }
  

  /* H2 Section title */

  .h2-title {
    font-weight: 600; /* Equivalent to font-semibold */
    letter-spacing: -0.015em; /* Equivalent to tracking-tighter */
    line-height: 1.2; /* Equivalent to leading-normal */
    font-size: 2.25rem; /* Default for text-4xl */
    background-color: #5e4589;
    background-image: linear-gradient(45deg, #703bca 0%, #d33bc9 25%,  #703bca 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  
  @media (min-width: 1024px) {
    .h2-title {
      font-size: 3.75rem; /* lg:text-6xl */
    }
  }

    /* H3 Section title */

    .h3-title {
      font-weight: 600; /* Equivalent to font-semibold */
      letter-spacing: -0.01em; /* Equivalent to tracking-tight */
      line-height: 1.2; /* Equivalent to leading-normal */
      font-size: 1.25rem; /* Equivalent to text-xl */
      background-color: #5e4589;
      background-image: linear-gradient(45deg, #703bca 0%, #d33bc9 25%,  #703bca 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
    
    @media (min-width: 1024px) {
      .h3-title {
        font-size: 2.25rem; /* Equivalent to lg:text-4xl */
      }
    }
    
  

  /* H2,H3 Section texts */

  .section-text {
    font-size: 1rem; /* matches 'text-lg', adjust to match 'lg:text-xl' for responsive design */
    letter-spacing: -0.015em; /* matches 'tracking-tight' */
    line-height: 1.5rem; /* matches 'leading-tight' */
    color: #525763 
  }
  
  @media (min-width: 1024px) {
    .section-text {
      font-size: 1.25rem; /* matches 'lg:text-xl' for large screens */
      line-height: 1.85rem; /* matches 'leading-tight' */
    }
  }
  

  /* H2,H3 Section texts */

  .section-text-ct {
    font-size: 1rem; /* matches 'text-lg', adjust to match 'lg:text-xl' for responsive design */
    letter-spacing: -0.015em; /* matches 'tracking-tight' */
    line-height: 1.5rem; /* matches 'leading-tight' */
    color: #525763;
    text-align: center;  
  }
  
  @media (min-width: 1024px) {
    .section-text-ct {
      font-size: 1.25rem; /* matches 'lg:text-xl' for large screens */
      line-height: 1.85rem; /* matches 'leading-tight' */
      text-align: center;
    }
  }