@import "tailwindcss";
/* @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caprasimo&display=swap');

@font-face {
  font-family: 'hero_title';
  src: url('./src/c22ccc5eb58b83e1-s.p.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

#loader.slide-up {
    transform: translateY(-100%);
  }

body{
    font-family: "Fredoka", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #fff;
    transition: background-color 0.1s ease;
}

.logo_text{
    font-family:"Fredoka", serif;
    font-weight: 700;
    font-style: normal;
}

button{
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}

.Title{
    font-family: 'Fredoka', sans-serif;
}

.marquee{
    transform: translateX(-100%);
}

.sub-container{
  border-radius: 23px;
  overflow: hidden;
}

.service-wrapper {
  animation: scroll-left 20s linear infinite;
  will-change: transform;
}

.featured{
     padding: 10vw 15vw;
}
.fimages{
    display: flex;
    height: 100vh;
    justify-content:space-between;
}

.fleft{
   overflow: hidden;
    width:45%;
    height: inherit;
    /* border: 1px solid  blue */
}

.fleftelm{
  width: 100%;
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fright{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width:45%;
    height: inherit;
    /* border: 1px solid  green; */
    
}

.fright .images{
  max-width: 500px;
  max-height: 100vh;
  /* border: 5px solid red; */
}

.fright .images img{
  width: 100%;
  height: 100%;
  object-fit:cover;
}

.cards li{
  list-style:none;
}



.slider-wrapper{
  width: max-content;
  padding: 0 150px;
  height: 100%;
  display:flex;
  gap:50px;
}

.slide{
  width: 600px;
  height:500px;
  display:flex;
  align-items: center;
  justify-content: center;
}

.slide img{ 
  width: 100%;
  height:100%;
  object-fit: cover;
}


@keyframes scroll-left {
  0% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(-100%);
  }
}