globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Work+Sans:wght@300;400;500;600;700&display=swap');

:root{
    --bg-color: white;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background:#1B1130;
}

.text-gradient {
  background: linear-gradient(
    230deg,
    #e74694,
    #4b79cf,
    #4bc5cf,
    #4b79cf,
    #e74694
  );
  background-size: 500% 100%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: GradientAnimation 50s ease infinite alternate;
  -moz-animation: GradientAnimation 50s ease infinite alternate;
  animation: GradientAnimation 50s ease infinite alternate;
}

@keyframes GradientAnimation {
  0% {
    background-position: 0% 50%
  }

  100% {
    background-position: 200% 50%
  }
}

/* .container{
  max-width: 1400px;
} */

@media(max-width:992px){
  .container{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.slick-slide {
  margin-left: 20px;
  margin-right: 20px;
}
.slick-track {
  display: flex !important;

}

.slick-dots{
  position: relative !important;
  bottom: 0 !important;
}

.gradient-bg {
   background-image: linear-gradient(225deg, #2DCCFD 9.35%, #AD20E2 88.41%) !important;
}

.navbg:hover, .navbg:focus{
    background: linear-gradient(225deg, #AD20E2 9.35%, #2DCCFD 88.41%);
}

.kinda-dark{
  background: rgba(0, 0, 0, 0.75)
}

.sponsor-bg{
  background: linear-gradient(225deg, #AD20E2 9.35%, #2DCCFD 88.41%);
  mix-blend-mode: normal;
}

.dropDown{
  box-shadow: 0px 59px 100px rgba(0, 0, 0, 0.25), 0px 44px 94px rgba(0, 0, 0, 0.15);
}

.no-border {
  border: none !important;
}

.header-bg{ 
background: linear-gradient(320deg, #2db4fd 10.35%, #410854 88.41%);
}

.card-bg{
  /* background: linear-gradient(119.66deg, rgba(255, 255, 255, 0.18) 6.74%, rgba(255, 255, 255, 0.06) 98.36%);
border: 2px solid rgba(255, 255, 255, 0.64); */
/* box-shadow: 0px 40px 20px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px); */
/* Note: backdrop-filter has minimal browser support */
background-position: center;
background-size: cover ;
background-color: rgba(228, 228, 228, 0.046);
opacity: 1;
border-radius: 30px;
}

.card{
  background: linear-gradient(119.66deg, rgba(255, 255, 255, 0.18) 6.74%, rgba(255, 255, 255, 0.06) 98.36%);
border: 2px solid rgba(255, 255, 255, 0.64);
box-shadow: 0px 40px 20px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
/* Note: backdrop-filter has minimal browser support */
border-radius: 8px;
}

.subscription{
  background: linear-gradient(119.66deg, rgba(255, 255, 255, 0.054) 6.74%, rgba(255, 255, 255, 0.018) 98.36%);
box-shadow: 0px 33.2278px 16.6139px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(8.30696px);
mix-blend-mode: lighten;
}


.color-effect {
    position: absolute;
    width: 100vw;
    max-width: none;
    bottom: 400px;
    will-change: transform;
    transform: translate3d(0%, 9.9964%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    vertical-align: middle;
    display: inline-block;
}

@media (max-width: 780px) {
  .color-effect{
    bottom: 700px;
  }
}

/* title styles */
.home-title span{
    position: relative;
    overflow: hidden;
    display: block;
    line-height: 1.2;
    
}

.home-title span::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #b31fe4;
    animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(-101%);
}

.home-title span::before{
    content: '';
    position: absolute;
    color: white;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    animation: a-ltr-before 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);
}

.home-title span:nth-of-type(1)::before,
.home-title span:nth-of-type(1)::after{
    animation-delay: 1s;
}

.home-title span:nth-of-type(2)::before,
.home-title span:nth-of-type(2)::after{
    animation-delay: 1.5s;
}

@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

@keyframes a-ltr-before{
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}
}

.hoverEffect{
  transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
}

.hoverEffect:hover {
  transform: scale(1.1); /* Scale the image by 10% on hover */
}

.lg-react-element {
  column-count: 3;
  column-gap: 10px;
}