:root {
      --main_color_blue: #085D85;
      --second_color_darkblue: #08425d;
      --main_color_yelow:#feb700;
      --second_color_lightyelow: #fff0bd;
      --font_family_main: Langar; 
      --font_family_seconder: Confortaa; 
  }

  /******************** Main start****************************** */
main {
 /* height: 90vh; */
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
  justify-items: center;
}

.home_page_even_phone, 
.home_page_anonce_phone {
  display: none;
}

.home_page_even_phone {
  height: 100%;
  display: none;
  /* display: flex; */
  flex-direction: row;
  width: 90%;
  justify-content: space-between;
  
}

.home_page_section1 {
  display: grid;
  grid-template-columns: 2fr 2.5fr;
  height: 100%; 
  background-color: var(--main_color_blue);
  border: 1px solid var(--second_color_darkblue);
  border-radius: 50px;
  align-items: center;
  justify-items: center;
  margin-left: 10%;
  box-shadow: 3px 3px 2px var(--second_color_darkblue);

}

.photo_home_page {
  height: 100%;
  display: flex;
  padding: 20px 0;
  justify-content: center;
  align-items: center;
}

.photo_home_page> img{
  width: 100%;
  height: 100%;
}

.text_home_page {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var( --font_family_seconder);
  font-style: normal;
  /* font-size: 24px; */
  font-size: calc(10px + 1vw);
  color:var(--second_color_lightyelow);
  text-align: center;
  /* line-height: 37px; */
  line-height: calc(15px + 1.5vw);
  /* padding: 1em; */
}

.text_home_page > p {
  margin-top: 0%;
}
.first_words{
  font-size: calc(16px + 1vw);
  font-weight: 600;
}

.home_page_section2 {
  display: grid;
  grid-template-rows: 1fr 2fr;
  width: 100%; 
  height: 100%;
  align-items: start;
  justify-items: center;
}

.calendrie_home_page {
  width: 70%;
  height: 90%;
  background-color:var(--main_color_blue);
  border: var(--second_color_darkblue) solid 1px;
  border-radius: 30px;
  text-align: center;
  box-shadow: 3px 3px 2px var(--second_color_darkblue);
}

.calendrie_home_page a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.calendrie_home_page img {
  width: 70%;
  height: 70%;
  border-radius: 10px;
}

.home_page_evenement {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 70%;
  height: 100%;
  background:var(--main_color_blue);
  border: var(--second_color_darkblue) solid 1px;
  border-radius: 30px;
  text-align: center;
  box-shadow: 3px 3px 2px var(--second_color_darkblue);
}

.event_venir {
  display: flex;
  flex-direction: column;
  height: 40%;
  text-align: center;
  align-items: center;
  justify-content: space-around;
}

.event_venir > .event_btn {
  height: 45%;
}

.event_passe {
  display: flex;
  flex-direction: column;
  height: 60%;
  text-align: center;
  align-items: center;
  justify-content: space-around;
}

.event_text {
  width: 90%;
  font-family: var(--font_family_seconder);
  font-size: 2vw;
  color:var(--second_color_lightyelow);
  text-decoration: none;

}

.event_btn{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font_family_main);
  font-weight:200;
  /* font-size: 24px; */
  font-size:  2.2vw;
  color:var(--second_color_lightyelow);
  text-decoration: none;
  border: 2px solid var(--second_color_lightyelow);
  border-radius: 15px;
  width: 80%;
  height: 30%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.event_btn:hover {
  color:var(--main_color_yelow);
  border:var(--main_color_yelow) solid;
}

.event_text:hover {
  color:var(--main_color_yelow);

}

.calendrie_home_page:hover {
  background:var(--second_color_darkblue) ;
  border: 4px solid var(--main_color_yelow);
  transition: all 0.15s linear;
}

/******************** Main end****************************** */



/******************** @ Media screen  start****************************** */


@media screen and (max-width: 480px) {
 
    /************* Main start**********/
    html{
      background-image: url(imgs/photo_home_page.png);
    }
  
    main {
      grid-template-columns:  1fr;
      grid-template-rows:  2fr 3fr 1fr;
      gap: 20px;
      
    }

    .home_page_section1 {
      display: flex;
      justify-content: center;
      height: 100%; 
      width: 90%;
      background-color: rgba(255, 240, 189, 0.6);
      border-radius: 20px;
      margin-left: 0;
      
    }

    br {
      display: none;
    }
  
    .text_home_page {
      width: 95%;
      /* align-items: space-around; */
      /* font-size: 24px; */
      font-size:calc(14px + 1vw);
      color: #000000;
      text-align: center;
      /* line-height: 37px; */
      line-height: calc(21px + 1.5vw);
    }
  
    .text_home_page > p {
      margin: 10px 0;
    }
  
    .home_page_anonce_phone {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      width: 90%;
      height: 100%;
      background: rgba(68, 124, 151, 0.74);
      border-radius: 20px;
      border: solid 1px #08425D;
      box-shadow: 1.75px 1.75px 1.4px #1C2120 ;
      padding: 5px;
      
    }
  
    .photo_anonce {
      width: 90%;
    }
    .photo_anonce >img {
      width: 100%;
      height: 100%;
    }
  
    .home_page_section2, .photo_home_page  {
      display: none;
    }
  
    .text_anonce {
      width: 90%;
      font-family: var(--font_family_seconder);
      font-style: normal;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
    }
  
    .text_anonce >h3 {
      font-size:calc(20px + 1vw) ;
      font-family: var(--font_family_main);
      padding: 5px;
    }
  
    .text_anonce >p,h4 {
      font-size:calc(14px + 1vw);
      line-height:calc(21px + 1.5vw);
      
    }
  
    .home_page_even_phone {
     display: flex;
    }
  
    .event_venir {
      height: 100%;
      width: 47%;
      background: rgba(68, 124, 151, 0.74);
      border: #08425d solid 1px;
      border-radius: 20px; 
    }
  
    .event_passe {
      height: 100%;
      width: 47%;
      background: rgba(68, 124, 151, 0.74);
      border: #08425d solid 1px;
      border-radius: 20px; 
     
    }
  
    .event_text {
      font-size:calc(12px + 1vw);
    }
  
    .event_btn{
      font-size:calc(12px + 1vw);
      width: 70%;
      height: 45%;
      border-radius: 10px;
    }
  
  /************* Main end**********/
  
}


@media screen and (min-width: 480px) and (max-width: 760px) {
  

  /************* Main start**********/
  main {
    /* height: 90%; */
    grid-template-columns:  1fr ;
    grid-template-rows:  3fr 1fr; 
    gap: 20px;
    align-items: center;
  }
  .home_page_section1 {
    /* grid-column: 1/3; */
    margin-left: 0;
    width: 90%;
  }

  .text_home_page  {
    font-size: calc(10px + 1vw);
    line-height: calc(16px + 1.5vw);
  }

  .home_page_section2 {
    display: none;
  }

  .home_page_even_phone {
    height: 100%;
    display: flex;
    flex-direction: row;
    width: 90%;
    justify-content: space-between;
    
  }

  .event_venir, .event_passe{
    height: 100%;
    width: 45%;
    background: var(--main_color_blue);
    border: var(--second_color_darkblue) solid 1px;
    border-radius: 30px; 
  }

  
 
  .event_text {
    font-size: 3vw;
  }

  .event_btn{
    font-size: 3vw;
    width: 80%;
    height: 45%;
  }
  
  /************* Main end**********/
  
}

@media screen and (min-width: 760px) and (max-width: 1024px) {
  
/************* Main start**********/
  main {
    /* height: 90%; */
    height: 640px;
    grid-template-columns: 3fr 1fr;
  }

  .home_page_section1 {
   
    margin-left: 5%;
  }

  .text_home_page >p {
    font-size: calc(12px + 1vw);
    line-height: calc(18px + 1.5vw);
  }

  .calendrie_home_page {
  
    width: 80%;
    height: 80%;
  }

  .calendrie_home_page img {
    width: 80%;
    height: 80%;
  }

  .home_page_evenement {
    width: 80%;
  }


  /************* Main end**********/
  
  
}

@media screen and (min-width: 1024px)  {
  /* main {
    height: 90%;
  } */
}
@media screen and (min-width: 1280px) {
  
}

/******************** @ Media screen  end****************************** */