@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";


/* Top Header Css Start */
.header1 {
    background-color: #eceb98;
    height: 85px;
    width: 100%;
    
}

.header1text{
    font-size: 17px;
    position: absolute;
    left: 27%;
    top: 20px;
}

.headerdays{
    font-size: 20px;
    position: relative;
    left: 45%;
}

.header_closebtn{
    position: relative;
    left: 800px;
    bottom: 25px;
}

/* End */

/* Header Start */

.header{
    font-family: 'Montserrat';
    font-weight: bolder;
    position: absolute; 
    height: 75px;
    width: 100%;
    font-size: 25px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 8px;
}

.category{
    font-family: 'Montserrat';
    position: relative; 
    font-weight: 500;
    font-size: 15px;
    left: 35%;
    bottom: 49px;

}

.cat-1{
    padding-left: 40px;
}

a:link {
    color: #6a6f73;
    background-color: transparent;
    text-decoration: none;
  }

.buttn{
    position: relative;
    left:85%;
    bottom: 82px;
    margin-left: 10px;
}

/* Body Css Start */

.body_img{
    position: absolute;
    right: 30px;
    top: 150px;

}

.body-img{
    position: relative;
    left: 32px;
    bottom: 74px;
    height: 640px;
    width: auto;
}

.body_tag{
    position: relative;
    top: 76px;
    background-color: white;
    height: 640px;
    width: 750px;


}
.body_tagline{
    position: relative;
    height: 400px;
    width: 550px;
    top: 130px;
    left: 60px;
}


/* styles.css */


    width: 400px; /* Set a fixed width */
    height: auto; /* Allow height to adjust based on content */
    background-color: #f0f0f0; /* Example background color */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  /* Transition for opacity only */
  .transition-enter {
    opacity: 0;
  }
  
  .transition-enter-active {
    opacity: 1;
    transition: opacity 300ms ease-in;
  }
  
  .transition-exit {
    opacity: 1;
  }
  
  .transition-exit-active {
    opacity: 0;
    transition: opacity 300ms ease-out;
  }
  
    opacity: 0;
  }
  
  .transition-enter-active {
    opacity: 1;
    transition: opacity 100ms ease-in;
  }
  
  .transition-exit {
    opacity: 1;
  }
  
  .transition-exit-active {
    opacity: 0;
    transition: opacity 100ms ease-out;
  }
/* End */

// styles.css or your Tailwind setup
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}