@keyframes borderSlide {
  from {
    opacity: 0.95;
  }
  to {
    opacity: 1;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Trip Sans", "Times New Roman", Times, serif;
}
* ul {
  list-style: none;
}
* a {
  color: black;
}
* a:visited {
  color: purple;
}
* a:hover {
  color: green;
}

.wrapper {
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
@media all and (min-width: 576px) {
  .wrapper {
    max-width: 500px;
  }
}
@media all and (min-width: 768px) {
  .wrapper {
    max-width: 700px;
  }
}
@media all and (min-width: 992px) {
  .wrapper {
    max-width: 900px;
  }
}
@media all and (min-width: 1200px) {
  .wrapper {
    max-width: 1100px;
  }
}
@media all and (min-width: 1400px) {
  .wrapper {
    max-width: 1200px;
  }
}

* h2 {
  font-size: 1.4rem;
  font-weight: 800;
}

p {
  line-height: 1.25rem;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 0 10px 0;
}
header .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
header .wrapper .boxLogo img {
  width: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}
header .wrapper .menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: transparent;
  position: absolute;
  top: 3.25%;
  left: 90%;
  transform: translate(-50%, -50%);
  border: none;
  gap: 4px;
  padding: 5px;
  width: 30px;
  height: 30px;
  z-index: 500;
}
header .wrapper .menu:active {
  box-shadow: inset 0px 0px 1px black, inset 0px 0px 2px black, inset 0px 0px 3px black;
  border-radius: 5px;
}
header .wrapper .menu .line {
  width: 25px;
  height: 2.5px;
  background-color: black;
  transition: transform 0.3s ease;
  transform-origin: center;
}
header .wrapper nav {
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}
header .wrapper nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
header .wrapper nav ul li {
  min-width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid transparent;
}
header .wrapper nav ul li button {
  border: none;
  background-color: black;
  color: white;
  border-radius: 50px;
  font-weight: 500;
}
header .wrapper nav ul li a {
  font-weight: 900;
  text-decoration: none;
}
header .wrapper nav ul li a, header .wrapper nav ul li button {
  padding: 8px;
}
header .wrapper nav ul li:hover:not(li:nth-child(4)) {
  border-bottom: 2px solid #34E0A1;
}
header .wrapper nav ul li:hover button {
  cursor: pointer;
  color: black;
  background-color: #34E0A1;
  box-shadow: inset 0px 0px 6px green, 0px 0px 4px black;
  font-weight: 700;
}
header .wrapper nav ul li:hover a {
  text-shadow: 1px 1px 1px rgb(248, 246, 246), 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 3px rgb(248, 246, 246), 3px 3px 4px rgb(248, 246, 246), 1px 1px 2px rgba(0, 0, 0, 0.7), 2px 2px 3px rgba(0, 0, 0, 0.7), 3px 3px 4px rgba(0, 0, 0, 0.7);
}
header .wrapper nav ul li:hover .fa-solid, header .wrapper nav ul li:hover .fa-regular {
  text-shadow: 1px 1px 1px rgb(248, 246, 246), 1px 1px 1px rgba(0, 0, 0, 0.7);
}
header .wrapper nav ul li .boxHearth .hearthFull {
  display: none;
}
header .wrapper nav ul li:hover:nth-child(3) .boxHearth .hearthFull {
  display: flex;
  color: #34E0A1;
}
header .wrapper nav ul li:hover:nth-child(3) .boxHearth .hearthEmpty {
  display: none;
}

.menu.active {
  gap: 0;
}

.menu.active .line1 {
  transform: rotate(45deg) translate(5.5px, 1.15px);
}

.menu.active .line2 {
  display: none;
}

.menu.active .line3 {
  transform: rotate(-45deg) translate(3px, 1.25px);
}

nav.active {
  display: flex !important;
  position: absolute !important;
  top: 50% !important;
  left: 75% !important;
  transform: translate(-50%, -50%) !important;
  height: 100vh !important;
  width: 50% !important;
  background-color: #34E0A1;
  box-shadow: 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black;
}

@media all and (min-width: 768px) {
  header .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }
  header .wrapper .menu {
    display: none;
  }
  header .wrapper nav {
    display: flex;
  }
  header .wrapper nav ul {
    flex-direction: row;
    justify-content: flex-end;
  }
}
main .wrapper {
  padding: 0 0 10px 0;
}
main .wrapper .secOne {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}
main .wrapper .secOne .title {
  display: flex;
  gap: 10px;
}
main .wrapper .secOne .title span:first-child {
  color: #ff5d5d;
}
main .wrapper .secOne .title span {
  font-weight: 800;
  font-size: 48px;
}
main .wrapper .secOne .secFilters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px 10px 0px;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
main .wrapper .secOne .secFilters article {
  display: flex;
  width: 45%;
  padding: 10px;
  border: 2px solid black;
  border-radius: 15px;
  height: 60px;
}
main .wrapper .secOne .secFilters article .cardTextIcon {
  height: 100%;
  width: 70%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
main .wrapper .secOne .secFilters article .cardTextIcon p {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
main .wrapper .secOne .secFilters article .cardIcon {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
main .wrapper .secOne .secFilters article .cardIcon svg {
  height: 60%;
}
main .wrapper .secOne .secFilters > article:hover {
  background-color: #202020;
  color: white;
}
main .wrapper .secOne .SecGalerie {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4px;
}
main .wrapper .secOne .SecGalerie div img:hover {
  opacity: 80%;
}
main .wrapper .secOne .SecGalerie div img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
main .wrapper .secOne .SecGalerie div:last-child img {
  height: 226px;
}
main .wrapper .secOne .navi {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .wrapper .secOne .secBlabla {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
}
main .wrapper .secOne .secBlabla .left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
main .wrapper .secOne .secBlabla .right {
  height: 100%;
  width: 100%;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  border-radius: 10px;
}
main .wrapper .secOne .secBlabla .right div {
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 0, 0, 0.7);
  padding: 20px;
  gap: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
main .wrapper .secOne .secBlabla .right div button {
  width: 50%;
  border: none;
  background-color: #202020;
  color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 10px;
}
main .wrapper .secOne .secBlabla .right img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (min-width: 768px) {
  main .wrapper .secOne .secFilters {
    flex-wrap: nowrap;
    flex-direction: row;
    gap: none;
  }
  main .wrapper .secOne .SecGalerie {
    flex-direction: row;
    width: 100%;
  }
  main .wrapper .secOne .SecGalerie div:first-child {
    display: flex;
    gap: 4px;
    flex: 2;
  }
  main .wrapper .secOne .SecGalerie div:first-child img {
    width: 100%;
    height: 455px;
  }
  main .wrapper .secOne .SecGalerie div:last-child {
    flex: 1;
  }
  main .wrapper .secOne .SecGalerie div:last-child img {
    height: 226px;
  }
  main .wrapper .secOne .secBlabla {
    flex-direction: row;
    gap: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  main .wrapper .secOne .secBlabla .left {
    width: 60%;
  }
  main .wrapper .secOne .secBlabla .left p {
    line-height: 1.5rem;
    text-align: justify;
    width: 80%;
  }
  main .wrapper .secOne .secBlabla .right {
    width: 30%;
  }
  main .wrapper .secOne .secBlabla .right div {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  main .wrapper .secOne .secBlabla .right div button {
    width: 50%;
    border: none;
    background-color: #202020;
    color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 10px;
  }
  main .wrapper .secOne .secBlabla .right img {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    height: 150px;
  }
}
.secTwo,
.secThree,
.secFour {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.secTwo h3,
.secThree h3,
.secFour h3 {
  width: 100%;
  font-weight: bold;
  font-size: 28px;
  line-height: 38px;
}
.secTwo .top,
.secThree .top,
.secFour .top {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.secTwo .top .cardIntro,
.secThree .top .cardIntro,
.secFour .top .cardIntro {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 20px;
  padding-right: 8%;
  flex: 1;
}
.secTwo .top .boxCards,
.secThree .top .boxCards,
.secFour .top .boxCards {
  flex: 3;
}

.secThree > .top > .boxCards > .cardDiaporama {
  padding-left: 240px !important;
}

@media all and (min-width: 992px) {
  .top {
    flex-direction: row !important;
  }
  .secThree > .top > .boxCards > .cardDiaporama {
    padding-left: 0 !important;
  }
}
.boxCards,
.boxBigCards {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-direction: column;
  overflow-x: scroll;
}

.cardDiaporama {
  display: flex;
  gap: 10px;
  flex: 3;
  overflow-x: scroll;
  padding-left: 300px;
}

::-webkit-scrollbar {
  height: 5px;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: calc((100% - 20px) / 3);
  position: relative;
  flex-shrink: 0;
}
.card:hover {
  opacity: 80%;
}
.card img {
  width: 100%;
  height: 200px;
}
.card .cardBoxHearth {
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 10%;
  left: 90%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0px 0px 0.5px #000);
}
.card .cardBoxHearth:hover {
  background-color: #f2f2f2;
}
.card .cardBoxHearth .heartEmpty {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #36E0A2;
  filter: drop-shadow(0px 0px 0.5px #000);
}
.card .cardBoxHearth .heartFull {
  display: none;
  justify-content: center;
  align-items: center;
}
.card .cardBoxHearth:hover .heartEmpty {
  display: none;
}
.card .cardBoxHearth:hover .heartFull {
  display: flex;
  color: #36E0A2;
  filter: drop-shadow(0px 0px 1px #000);
}
.card .cardLogoBestTrip {
  width: 20px;
  height: 30px;
  position: absolute;
  top: 60%;
  left: 10%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0px 0px 0.5px #000);
}
.card .cardLogoBestTrip img {
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.card .cardBottom {
  height: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}
.card .cardBottom a {
  text-decoration: none;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  text-align: justify;
}
.card .cardBottom .cardBoxRatings {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 10px;
}
.card .cardBottom .cardBoxRatings .ratings {
  display: flex;
  gap: 2px;
}
.card .cardBottom .cardBoxRatings .ratings .fa-circle,
.card .cardBottom .cardBoxRatings .ratings .fa-circle-half-stroke {
  color: #03AA6C;
  font-size: 14px;
}
.card .cardBottom .cardBoxRatings .ratings .faCircleFirstHalf {
  transform: rotateY("180deg");
}

.card:hover > .cardBottom > a {
  -webkit-text-decoration: underline solid;
  text-decoration: underline solid;
}

.cardIntro,
.card {
  height: 280px;
}

.boxBigCards {
  display: flex;
  gap: 10px;
}
.boxBigCards .bigCard {
  width: 100%;
}
.boxBigCards .bigCard .cardTop {
  width: 100%;
  height: 274px;
}
.boxBigCards .bigCard .cardTop img {
  display: block;
  width: 357px;
  height: 274px;
  -o-object-fit: cover;
  object-fit: cover;
  padding: 5px;
  opacity: 80%;
}
.boxBigCards .bigCard .cardBottom {
  width: 100%;
  height: 100px;
  background-color: none;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
}
.boxBigCards .bigCard .cardBottom .cardDesc {
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  text-align: justify;
}
.boxBigCards .bigCard .cardBottom .boxArticle {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.boxBigCards .bigCard .cardBottom .boxArticle .cardLogoArticleAndName {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 10px;
}
.boxBigCards .bigCard .cardBottom .boxArticle .cardLogoArticleAndName img {
  width: 40px;
  height: 40px;
  border-radius: 0;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
}
.boxBigCards .bigCard:hover > .cardTop > img {
  opacity: 1;
}
.boxBigCards .bigCard:first-child img {
  border-radius: 23% 77% 26% 74%/24% 19% 81% 76%;
  transition: all 1.5s;
}
.boxBigCards .bigCard:nth-child(2) img {
  border-radius: 35% 65% 16% 84%/65% 81% 19% 35%;
  transition: all 1.5s;
}
.boxBigCards .bigCard:last-child img {
  border-radius: 57% 43% 56% 44%/83% 61% 39% 17%;
  transition: all 1.5s;
}
.boxBigCards .bigCard:hover > .cardTop > img {
  border-radius: 0;
  transition: all 1.5s;
  padding: 0;
  background-color: #ffffff;
}

@media all and (min-width: 768px) {
  /* Track */
  ::-webkit-scrollbar-track:hover {
    background: #8bf9d1;
    border-radius: 15px;
    background-clip: content-box;
    box-shadow: inset 0 0 0 1px #05faa0, inset 0.5px 0.5px 0.5px 1px #006641, 0.5px 0.5px 1px #006641;
  }
  /* Handle */
  ::-webkit-scrollbar-thumb:hover {
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 15px;
    box-shadow: inset 0 0 0 2px #05faa0, inset 0 0 0 0.5px #006641;
    background: #006641;
  }
}
@media all and (min-width: 1200px) {
  .boxCards .cardDiaporama {
    padding: 0;
  }
  .boxCards .cardIntro {
    width: 33.3333333333% !important;
  }
  .boxCards .card {
    width: calc((100% - 50px) / 2.9);
  }
  .boxCards,
  .boxBigCards {
    flex-direction: row !important;
  }
  .boxBigCards .bigCard {
    width: 357px;
  }
}
footer {
  width: 100%;
  min-height: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  box-shadow: 0px 0px 1px black, 0.25px 0.25px 1px black, 0.5px 0.5px 1px black;
}
footer .wrapper ul {
  display: flex;
  justify-content: center;
  align-items: center;
}/*# sourceMappingURL=style.css.map */