@font-face {
  font-family: "Gfont";
  src: url("../fonts/gfont.otf");
}

:root
{
  --my-blue: #3A6688;
  --button-bg: #3A6688;
  --button-text-color: #fff;
  --baby-blue: #f8faff;
  --facebook-color: #4867aa;
  --insta-color: #ff005d;
  --linkedin-color: #027bb6;
  --whatsapp-color: #24d366;
  
}


*
{
    box-sizing: border-box;
}

body
{
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  /* font-family: 'Raleway', sans-serif; */
  font-family: 'Helvetica', sans-serif;
  font-weight: 300;
  /* font-family: 'Poppins', sans-serif; */
  width: 100%;

}

.page
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: initial;

  scroll-behavior: smooth;
  overflow-x: hidden; 
  
}

/* .page::before
{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;

  height: 100vh;
  min-width: 100%;
  max-width: 160%;
  width: var(--bg-width);
  background-image: url('../images/john-lee-oMneOBYhJxY-unsplash.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page::after 
{
  content: "";
  position: fixed;
  z-index: -1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(137, 137, 137, .3);
} */

h1
{
  text-shadow: 1px 1.5px #000000;
  color: #ffffff;
  
}

h1, h2
{
  margin: 0;
  font-family: "Gfont", sans-serif;
  font-weight: 400;
}


section.header-top-bar
{
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 110px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 20px;
  padding-left: 80px;

  /* background-color: rgba(230, 230, 230, 0.3); */

  background-image: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.705), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3), #ffffff00);
}

section.header-top-bar img
{
  height: 65px;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,.7));
}


section.banner-medium
{

  width: 100%;
  height: 60vh;
  /* max-height: 488px; */

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: center;

  box-shadow: 0 3px 4px rgba(0,0,0,.4);


}

h1
{
  position: relative;
  z-index: 1;
  font-size: max(80px, 10vw);
  grid-column: 1;
  grid-row: 1;
  padding-left: 100px;
}

.banner-medium .banner-image
{
  position: relative;
  grid-column: 1;
  grid-row: 1;
  

  width: 100%;
  height: 60vh;
  /* max-height: 488px; */
  background-color: #000;
  
}

.banner-medium .banner-image::before
{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  /* width: var(--bg-width); */
  /* max-width: 130%; */
  height: 100%;
  /* height: 50vh; */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('../images/jake-givens-ocwmWiNAWGs-unsplash.jpg');
  

  opacity: .9;
}

.about-container
{
  /* position: relative; */
  margin-top: 125px;
  width: 100%;
  /* padding-right: 100px; */
  padding: 0 50px;

  display: flex;
  /* align-items: center; */
  justify-content: center;
  /* gap: 50px; */
}

.about-container .me-description
{
  position: relative;
  width: 95%;
  max-width: 600px;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto 200px;
  /* grid-template-rows: 250px auto 1fr 67px 200px; */
  justify-items: center;
  margin: 0 25px;
  /* background-color: #fff; */
}

.about-container .me-description h2
{
  text-align: center;
  font-size: 55px;
  /* font-size: max(45px, 4vw); */
  color: #000;
  text-shadow: 1px 1.5px 1px rgba(0, 0, 0, 0.4);
}

.about-container .me-description p.me-me
{
  text-align: justify;
  line-height: 25px;
}

.about-container .me-description p.me-me a
{
  /* text-decoration: none; */
  font-weight: bold;
  color: var(--my-blue);
  transition: .2s;
}

.me-photo
{
  position: absolute;
  top: -250px;
}

.me-photo img
{
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 12px solid #fff;
  box-shadow: 3px 3px 3px rgba(0,0,0,.4);
}

.about-container .me-description p.signature
{
  justify-self: flex-end;
  margin: 0  0 30px;
  font-family: "Gfont", sans-serif;
  font-weight: 400;
  font-size: 67px;
  color: #000;
  text-shadow: 1px 1.5px 1px rgba(0, 0, 0, 0.4);
}


#formations
{
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 100%;
  /* max-width: 800px; */

  /* border: 1px solid #3d3d3d; */
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .5);
}

#formations::before 
{
  content: "";
  position: absolute;
  z-index: -2;
  height: 100%;
  width: 100%;
  /* top: 0;
  left: 0; */
  background-image: url('../images/lfrezza-027-photo.jpg');
  /* background-attachment: fixed; */
  background-size: cover;
  /* background-position: 0 -300px; */
  background-position: center;
  background-repeat: no-repeat;
}

#formations::after
{
  content: "";
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(137, 137, 137, .7);
}

#formations .parcours
{
  position: relative;
  z-index: 10;
  height: 100%;
  width: 100%;
  padding: 150px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#formations .parcours h2
{
  text-align: center;
  font-size: max(67px, 7vw) !important;
  /* font-size: 60px; */
  /* font-size: max(45px, 4vw); */
  color: #fff;
  text-shadow: 1px 1.5px 1px rgba(0, 0, 0, 1);
}

#formations .parcours .frezza-cv
{
  width: 100%;
  max-width: 800px;
  /* margin-top: 70px; */
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}

#formations .parcours .frezza-cv dl dt,
#formations .parcours .frezza-cv dl dd
{
  /* padding-left: 4vw; */
  margin-left: 0 !important;
  /* padding: 0 !important; */
  text-align: center;
}

#formations .parcours .frezza-cv dl .cv-year
{
  text-align: center;
  font-size: 30px !important;
  font-weight: bold;
  font-style: italic;
  margin-top: 100px;
  padding: 0 !important;
}

#formations .parcours .frezza-cv dl dt
{
  font-size: 20px;
  margin-top: 50px;
}

#formations .parcours .frezza-cv dl dd
{
  margin-top: 10px;
}

#formations .parcours .frezza-cv dl a
{
  text-decoration: none;
  color: goldenrod;
  /* color: var(--my-blue);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 1); */
  font-weight: bold;
  /* color: #000; */
  transition: .2s;
}

/* #formations .parcours .frezza-cv dl a:hover
{
  color: goldenrod;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
  transition: .2s;
} */


.reseaux
{
  /* position: relative; */
  margin-top: 125px;
  width: 100%;
  /* padding-right: 100px; */
  padding: 0 50px;

  display: flex;
  /* align-items: center; */
  justify-content: center;
  /* gap: 50px; */
}

.reseaux .network-logos
{
  position: relative;
  width: 95%;
  max-width: 600px;
  height: 100%;
  display: grid;
  grid-template-rows: 250px 100px;
  /* grid-template-rows: 250px auto 1fr 67px 200px; */
  justify-items: center;
  margin: 0 25px;
}

.logo-membre-sdmh
{
  width: 230px;
}

.my-social
{
  margin-top: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 10px;
}

.my-social i
{
  /* font-size: 4vw; */
  font-size: 50px;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  transition: .3s;
  margin: .8vw;
}

.link-icon-doctolib
{
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
}

img.icon-doctolib
{
  
  width: 50px;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
  transition: .3s;
  margin: .8vw;
}

.my-social .fab.fa-linkedin
{
  color: var(--linkedin-color) !important;
}
.my-social .fab.fa-instagram
{
  color: #fd5949
}
.my-social .fab.fa-facebook
{
  color: var(--facebook-color) !important;
}
.my-social .fab.fa-whatsapp
{
  color: var(--whatsapp-color) !important;
}

 .my-social a:hover .fab.fa-linkedin,
 .my-social a:hover .fab.fa-instagram,
 .my-social a:hover .fab.fa-facebook,
 .my-social a:hover .fab.fa-whatsapp,
 .my-social a:hover img.icon-doctolib
{
  transform: scale(1.1);
}


.myButton {
  position: relative;
  overflow: hidden;

  font-family: "Poppins", sans-serif;
  
  text-align: center;
  line-height: 32px;

	box-shadow:inset 0px 0px 15px 3px #23395e;

	background-color: var(--my-blue);
	border-radius:42px;
	border:4px solid #ffffff;

	cursor:pointer;
	color:#ffffff;

	font-size:20px;
  font-weight: bold;
	padding:10px 43px;

	text-decoration:none;

	text-shadow: 1px 1px #000000;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  transition: .4s;
}
.myButton:hover 
{
	background-color: #4980aa;
  /* border-color: gold; */
}

.myButton:hover i{
  color: rgb(255, 59, 59);
	transform: rotate(20deg);
  transition: .2s;
}
.myButton:active {
  transform: scale(0.93);
  box-shadow: none;
}

.myButton span
{
  position: relative;
  z-index: 3;
  transition: .4s;
}

/* .myButton:hover span
{
  color: gold;
  transition: .2s;
} */

.myButton i
{
  position: relative;
  z-index: 3;
  top: 2px;
  font-size: 30px;
  margin-left: 5px;
  transition: .4s;
}

.myButton img {
  opacity: .15;
  position: absolute;
  top: -28px;
  left: -11px;
  height: auto;
  filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 1));
  width: 105%;
}














@media (min-width: 1300px) {
  h1
  {
    font-size: 130px;
  }
  /* .about-container
  {
    padding: 0 100px;
  } */
}


@media (max-width: 1000px) {
  /* .about-container
  {
    padding: 0;
  } */
  .about-container .photo-right
  {
    display: none;
  }
}




@media (max-width: 880px) {

  
}




@media (max-width: 800px) {

  h1
  {
    padding: 0;
    text-align: center;
  }

  /* .header-top-bar a
  {
    display: none;
  } */

  section.header-top-bar
  {
    display: none;
  }

}

@media (max-width: 700px) {

  
}

@media (max-width: 600px) {

  .about-container
  {
    padding: 0;
  }

  section.banner-medium 
  {
    
    justify-content: center;
    
    padding-left: 0;
  }

  /* .banner-medium .banner-image img
  {
    height: 100%;

  } */

}

@media (max-width: 650px) {
  
  
}

@media (max-width: 440px) {

  .about-container .me-description
  {
    margin: 0 18px;
  }

  .myButton
  {
    padding: 11px 20px;
    font-size: 16px;
    line-height: 25px;
  }
  
  .myButton i
  {
    /* top: 2px; */
    font-size: 25px;
    
  }
  
  .myButton img
  {
    top: -11px;
    left: -7px;
    
  }
}