/* 
__________________________________________________________________________

                  Font Family
__________________________________________________________________________ 
*/

@import 'https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap';

/*
__________________________________________________________________________

                    Reset
__________________________________________________________________________
 */

* {

  font-family: Berkshire Swash, sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #e68a00 #282C34;
}

*::-webkit-scrollbar {
  width: 9px;
}

*::-webkit-scrollbar-track {
  background: #282C34
}

*::-webkit-scrollbar-thumb {
  background-color: #e68a00;
  border-radius: 20px;
}


/*
__________________________________________________________________________

                    Header
__________________________________________________________________________
 */


header {
  position: fixed;
  width: 100%;
  min-height: 8vh;
  padding: 10px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
  text-decoration: none;
  background-color: rgba(182, 182, 182, 0.1);
}

header .logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

header .menu ul {
  display: flex;
  justify-content: center;
  list-style: none;
}

header .menu ul li a {
  color: white;
  font-size: 19px;
  margin: 0 20px;
  border-bottom: 2px solid transparent;
  transition: all 0.8s ease;
  text-decoration: none;
}

header .menu ul li a i {
  margin: 0 3px;
}

header .menu ul li:hover a {
  border-bottom: 2px solid #e68a00;
}

header .logo img {
  width: 70px;
}

header .logo h2 {
  color: #e68a00;
  font-size: 23px;
  margin-left: 10px;
}

header .reseaux a i {
  margin: 0 20px;
}



.social-cust,
.social-cust-yb,
.social-cust-tw,
.social-cust-fb {
  display: inline-flex;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: none;
  border-radius: 10px;
  align-items: center;
  text-decoration: none;
  outline: none;
  justify-content: center;
  color: #fff;
  background: #405de6;
  box-shadow: 3px 3px 15px #293037, -3px -3px 15px #37404b;
  position: relative;
  font-size: 17px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all .5s ease-out;
}

.social-cust-yb {
  background: linear-gradient(45deg, #d5135a, #f05924);
}

.social-cust-yb:hover,
.social-cust-yb:focus {
  transition: all .5s ease-out;
  box-shadow: 0 0 0 black;
}

.social-cust-tw {
  background: linear-gradient(45deg, #1da1f2, #0e71c8);
}

.social-cust-tw:hover,
.social-cust-tw:focus {
  transition: all .5s ease-out;
  box-shadow: 0 0 0 black;
}

.social-cust-fb {
  background: linear-gradient(45deg, #4b7bec, #3867d6);
}

.social-cust-fb:hover,
.social-cust-fb:focus {
  transition: all .5s ease-out;
  box-shadow: 0 0 0 black;
}

.social-cust-tw .fab {
  background: linear-gradient(45deg, #1da1f2, #0e71c8);
}

.social-cust-yb .fab {
  background: linear-gradient(45deg, #d5135a, #f05924);
}

.social-cust-fb .fab {
  background: linear-gradient(45deg, #4b7bec, #3867d6);
}


/* 
___________________________________________________________________________________________

                    Section  Home
___________________________________________________________________________________________
 */


.Home {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 100vh;
  position: relative;
  padding: 0 200px;
  background-image: url(ressources/images/home.webp);
  background-size: cover !important;
  background-position: center !important;
}

.Home .text-box {
  width: 400px;
  margin-left: 100px;
}

.Home .text-box h1 {
  color: #ffffff;
  font-size: clamp(30px, 4vw, 55px);
  font-weight: bold;
}

.Home .text-box p {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(10px, 1.7vw, 23px);
  margin: 40px 0 60px;
}

.Home .text-box .buttons {
  display: flex;
  justify-content: flex-start;
}

.Home .text-box .buttons .btn {
  font-size: 17px;
  width: 200px;
  text-align: center;
  align-items: center;
  display: inline-block;
  transition: all 0.4s ease;
  text-decoration: none;
}

.Home .text-box .buttons .btn.bg {
  background-color: #e68a00;
  margin-right: 25px;
  padding: 10px 0;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: bold;
  border: none;
  outline: none;

}

.Home .text-box .buttons .btn.bd {
  border: 2px solid #e68a00;
  margin-right: 25px;
  padding: 10px 0;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
}

.Home .text-box .buttons .btn:hover {
  transform: scale(1.08);
}


.Home .image-box {
  width: 650px;
}


.Home .image-box img {
  width: 600px;
}



/* 
___________________________________________________________________________________________

                     Section  Candy
___________________________________________________________________________________________
 */


.Candy {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 100px;
  background: #171A1B;
  overflow-x: hidden;
}

.Candy h2 {
  color: #e68a00;
  font-size: clamp(35px, 4.8vw, 60px);
  margin: 170px 0;
  position: relative;
  cursor: default;
}

.Candy .container-candy {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}


.Candy .container-candy .cards {
  background: #2F3233;
  width: 300px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  align-items: center;
  color: white;
  cursor: default;
  margin: 20px;
  transition: all 0.4s ease;
  border-radius: 20px;
  padding: 30px 0;
  margin-bottom: 50px;
}

.Candy .container-candy .cards img {
  margin-top: -150px;
  width: 300px;
  margin-bottom: 15px;
}

.Candy .container-candy .cards .img-ghost-candy {
  width: 250px;
}

.Candy .container-candy .cards h3 {
  font-size: 22px;
}

.Candy .container-candy .cards h4 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 300;
}

.Candy .container-candy .cards:hover {
  transform: scale(1.1);
}



/* 
___________________________________________________________________________________________

                     Section  About
___________________________________________________________________________________________
 */


.About {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  padding: 0 200px;
  background: url(ressources/images/halloween-fond-ecran-toile-araignee_23-2148635554.webp);
  background-size: 55%;
  overflow-x: hidden;
}

.About .container-about {
  background: #2F3233;
  width: 70%;
  height: 400px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


.About .container-about .text-box-About {
  width: 400px;

}

.About .container-about img {
  width: 400px;
}

.About .container-about .text-box-About h2 {
  color: #e68a00;
  font-size: clamp(35px, 4vw, 60px);
  margin-bottom: 40px;
}

.About .container-about .text-box-About p {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(10px, 1.6vw, 20px);

}



/* 
___________________________________________________________________________________________

                     Section  Contact
___________________________________________________________________________________________
*/


.Contact {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  padding: 0 200px;
  background: #171A1B;
  overflow-x: hidden;
}

.Contact h2 {
  color: #e68a00;
  font-size: clamp(35px, 5vw, 60px);
  margin: 100px 0;
  position: relative;
  cursor: default;
}

.Contact .container-contact {
  background: #2F3233;
  width: 70%;
  height: 400px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.Contact .container-contact .text-box-contact {
  width: 400px;
}

.Contact .container-contact img {
  width: 400px;
}

.Contact .container-contact .text-box-contact p {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(10px, 1.6vw, 20px);
}

.Contact .container-contact .text-box-contact p a {
  color: #e68a00;
  font-size: clamp(10px, 1.6vw, 20px);
}

.Contact .container-contact .text-box-contact .btn-contact {
  font-size: 16px;
  width: 200px;
  display: inline-block;
  text-decoration: none;
  border: 2px solid #e68a00;
  margin-right: 25px;
  margin-top: 35px;
  padding: 10px 0;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
}



/* 
___________________________________________________________________________________________

                      FOOTER
___________________________________________________________________________________________
 */


footer {
  background: #171A1B;
  position: end;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1em;
  text-align: center;
}


p {
  color: #BFBFC2;
}




/* 
___________________________________________________________________________________________

                      RESPONSIVE ipad
___________________________________________________________________________________________
 */


@media screen and (max-width: 1080px) {

  header .menu ul li a {
    font-size: 17px;
  }


  /*________________________ HOME ________________________*/

  .Home .text-box {
    margin-left: 0px;
  }

  .Home .image-box img {
    width: 450px;
  }

  /*________________________ CANDY ________________________*/

  .Candy .container-candy .cards:nth-child(3n) {
    margin-top: 100px;
  }

  /*________________________  ABOUT ________________________*/

  .About .container-about img {
    width: 300px;
  }

  .About .container-about .text-box-About p {
    margin: 10px;
  }

  .About .container-about {
    height: 350px;
    width: 100%;
  }


  /*________________________ CONTACT ________________________*/

  .Contact .container-contact img {
    width: 300px;
  }

  .Contact .container-contact .text-box-contact p {
    margin: 10px;
  }

  .Contact .container-contact {
    height: 350px;
    width: 100%;
  }


}