/**
 * EntreAgri - Page d'accueil (index.html)
 * Styles spécifiques à la home
 */

main.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  background-color:rgba(249,245,232,1);
  background-size: calc(100% + 0px);
  background-repeat: no-repeat;
  background-position: 20% -90px;
  
  position:relative;
}



main.home article {
 
  background: white;
  padding: 48px 24px;
  border-radius: 48px;
  margin: 48px auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-height: 100vh;
  //opacity: 0;
  //animation: fadeIn 0.5s ease-in-out forwards;
  container-type: inline-size;
  width: clamp(300px,calc(100% - 648px), 840px );
  z-index:1;
}

@media(max-width:1279px)
{
  main.home article
  {
    width: clamp(300px, 100%, 1180px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(600px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main.home article .text-content {
  max-width: 620px;
  text-align: center;
  margin: auto;
}

main.home article .text-content.seo {
  text-align: left;
}

main.home article .faq {
  width: 100%;
  max-width: 620px;
  margin: auto;
}

main.home h1 {
  max-width: 460px;
  margin: 0 auto 24px;
}

main.home h2 {
  text-align: center;
  font-size: 28px;
}

/* Home grid for categories */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

@container (max-width: 780px) {
  .home-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@container (max-width: 384px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  main.home article {
    padding: 24px 16px;
    border-radius: 24px;
    margin: 24px 8px;
  }
}


.gradient-overlay_
{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:115vh;
     background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}
.background-container
{
  display:flex;
  flex-direction:column;
}

.background-container, .hero-overlay

{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  
 
}

.background-container .hero
{
  width:100%;
  ratio: 1;
  
  aspect-ratio: 2375/759;
  background-image: url("../../images/hero.webp");
  background-size:100%;
  background-position:top right;
position:relative;
  background-repeat:repeat-x;

}

.hero-overlay
{
 
   background-image: linear-gradient(to bottom, rgba(249,245,232,0) 5%, rgba(249,245,232,1));
   
}


.background-container .bottom-page
{
  position:relative;

  display:flex;
  flex-direction:column;
  flex-grow: 1;
  overflow:hidden;
  background-image: linear-gradient(to bottom, rgba(17, 89, 85, 0)98px, rgba(17, 89, 85, 1)296px);
  
}




.background-container .bottom-page .overlay-top
{
  width:100%;
  height:296px;
 
  position:absolute;
  top:0;
  left:0;
 
   filter: blur(20px);
  
    background-image: linear-gradient(to bottom, rgba(17, 89, 85, 0) 5%, rgba(17, 89, 85, 1));
}


.background-container .bottom-page .overlay-right
{
  position:absolute;
  top:-15vw;
  right:-40vw;
  width:80vw;
  aspect-ratio: 1;
background: radial-gradient(circle,rgba(47, 192, 156, 1) , rgba(47, 192, 156, 0)70%);

filter: blur(20px);
 

}


.background-container .bottom-page .overlay-left
{
  position:absolute;
 top:900px;
  left:-50vw;
  width:80vw;
  aspect-ratio: 1;
background: radial-gradient(circle,rgba(47, 192, 156, 1) , rgba(47, 192, 156, 0)70%);

filter: blur(20px);
 

}



@media(max-width:1280px)
{
    .background-container .hero {
   
   background-size:140%;
    
    }
  

}