---
// import { Icon } from 'astro-icon/components'

// const { src = '/astronaut-hero-img.webp' } = Astro.props
// const { fullhero = '../images/full_hero.png' } = Astro.props
import fullhero from "../assets/img/right-img-traprntnew.png"

import btn2 from "../assets/img/button-img-02.png"

import secondPatch from "../assets/img/patch-01.png"

import title from "../assets/img/new-title-img.png"
import btn1 from "../assets/img/button-img-01.png"
import { Image } from "astro:assets"
---
<!-------------#front section------------- -->
<section class="hero">

    <!-- <div class=" flex flex-col lg:grid lg:grid-cols-2 gap-3 items-center"> -->
      
        <div class="flex flex-col justify-center items-center md:pt-5 space-y-5">
          <h3 class="text-white md:text-[30pt] text-2xl ">A global challenge for bright minds</h3>
          <br>
        
          <h6 class="text-white md:text-lg text-md">
           <p class="text-center"> An initiative of the FOSSEE Project,<br>
            Indian Institute of Technology Bombay, India </p></h6>
         <div>
          <h1 class="text-white md:text-6xl text-4xl font-extrabold ">Scilab <span class="text-[#f50000]">Case Study</span> </h1>
          <h1 class="text-white text-center md:text-6xl text-4xl  font-extrabold">Hackathon</h1>
        </div>
          <br>
          <h3 class="text-white text-xl font-extrabold">Registration date: <span class=" text-[#f50000]">24 December 2024</span><br>
         Submission end date: <span class=" text-[#f50000]">20 February 2025</span></h3>
          <!-- <br /> -->
<p class="text-white text-lg font-bold ">*Anyone can register and submit their case study from 24 December 2024 to 20 February 2025</p>
<p class="text-white text-lg font-bold">Cash prizes, eCertificate and internship opportunities</p>
<br>
          <div class="py-2">  
             <a href="/#register"><button class="neon-button">Register</button></a>

          </div>
        </div>
      

  <!-- </div> -->
</section>

<style>

.flip-card {
  width: 100%;
  height: 160px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */
  animation: flipAnimation 6s 0.5s infinite;
}
.flip-card-inner:hover {
  animation: none;
  transition: 0.5s ease;
}
/* for hover animation */
/* .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
} */
@keyframes flipAnimation {
  0%, 25% {
    transform: rotateY(0deg);
  }
  50%, 75% {
    transform: rotateY(180deg); 
  }
  100% {
    transform: rotateY(360deg); 
  }
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-back {

  transform: rotateY(180deg);
}


  .left-block{
    border-radius:0 12rem  0 12rem ;
  }
  .bg-secondPatch{
    background: black;
    background: url(../assets/img/patch-01.png) center fixed;
    background-position:center;
    background-size:cover;
    /* padding: 70px; */
    width: 100%;
  height: 160px; 
    /* height:fit-content; */
    /* background-position: -20px -20px; */
    background-repeat: no-repeat;
    background-attachment: fixed;
    
  
}

.hero{
        background: url(../assets/img/bg-01.png)  top center;
        /* background-attachment:fixed; */
        background-size: cover;
       overflow: hidden;
      position: relative;
        /* padding: 0em 10em; */
       min-height: 100vh;
        animation: zoom 2s cubic-bezier(0.65, 0.05, 0.36, 1);
        background-attachment: fixed;
    }
@keyframes zoom {
  0% {
    transform: scale(1.05);
    opacity: 0;
    
  }

  100% {
    transform: auto;
 
      opacity: 1;
      
    }
}

  @media screen and (max-width:983px) {
    .left-block{
    border-radius:0 2rem  0 2rem ;
  }
  
  .hero{
    padding:2px;
  }
  }

    
  .text-gradient {
    background: linear-gradient(315deg, var(--primary-200) 25%, var(--secondary-500));
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  :global(.darkmode .text-gradient) {
    background: linear-gradient(315deg, var(--primary-200) 25%, var(--secondary-400));
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @media screen and (max-width:498px) {
  .bg-secondPatch{height: 80px;}
  .flip-card { height: 80px; }
}













</style>