/* ************reset************* */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ************variable********** */
:root {
  --dauphin: #2b5df2;
  --dark: #333;
  --white-nav: #eee;
  --dauphin-opa: rgba(42, 119, 235, 0.226);
}

/* *************general************ */

/* 1rem = 10px */
html {
  font-size: 62.5%;
  /* font-family: "Open Sans", sans-serif; */
  font-family: "Roboto", sans-serif;
}
a {
  text-decoration: none;
}
.container {
  min-height: 100vh;
}
/* ************header************ */
header {
  box-shadow: 1px 1px #3333;
}
.bando {
  background: url(../img/bando_grenoble.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* background-color: red; */
  height: 300px;
  width: 100%;
}
.slogan {
  color: var(--dauphin);
  background: var(--white-nav);
  padding-left: 1rem;
}
@media (max-width: 700px) {
  .slogan {
    text-align: center;
    padding-left: 0;
  }
}

/* ************** nav ************ */
.logo {
  margin: 0.5rem;
  height: 50px;
}
.nav-bar {
  display: flex;
  justify-content: space-between;
  background: var(--white-nav);
  position: sticky;
  top: 0;
}

.nav-bar ul {
  display: flex;
  margin-right: 2rem;
}
.nav-bar ul li {
  list-style: none;
  font-size: 2.5rem;
  margin: 0rem 0.5rem;
  padding: 1.25rem;
  color: var(--dauphin);
  transition: 0.2s;
}
.nav-bar ul li a {
  padding: 1.45rem;
  color: var(--dauphin);
}
.nav-bar ul li a:hover {
  color: var(--white-nav);
}
.nav-bar ul li:hover {
  background: var(--dauphin);
}

@media (max-width: 700px) {
  .logo {
    margin: 0 30%;
  }
  .nav-bar {
    display: block;
    top: 0;
  }
  .nav-bar ul {
    display: block;
    text-align: center;
  }
  .nav-bar ul li {
    font-size: 1.8rem;
  }
}

/* ************country************** */
.country {
  /* margin: 2rem 0rem; */
  padding: 2rem 0 0 0;
  background: var(--dauphin-opa);
}
.content {
  max-width: 900px;
  margin: 0 auto;
}
.content h1 {
  text-align: center;
  font-size: 4rem;
}
.content p {
  margin: 2rem;
  font-size: 1.6rem;
}

.caroussel {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 900px;
  margin: 0 auto;
}
.caroussel img {
  margin: 1rem;
}
@media (max-width: 700px) {
  .caroussel {
    width: 100%;
  }
}
/* ***************meteo************** */
.meteo {
  display: flex;
  flex-direction: column;
}
.meteo h3 {
  text-align: center;
  font-size: 2rem;
  margin: 2rem 0;
}
.widget-meteo {
  display: flex;
  max-width: 70%;
  margin: 0 auto;
  justify-content: space-around;
}
.widget-meteo iframe {
  margin: 2rem;
}
.widget-meteo img {
  width: 350px;
  height: 300px;
}
@media (max-width: 700px) {
  .widget-meteo {
    display: block;
    width: 100%;
  }
  .widget-meteo img {
    width: 100%;
    height: auto;
  }
  .widget-meteo iframe {
    width: 100%;
    height: 310px;
  }
}
/* *****************3 avis**************  */
.avis {
}
.avis-cards {
  margin: 0;
  display: flex;
  justify-content: center;
}
.avis h2 {
  text-align: center;
  font-size: 3rem;
}
.card {
  max-width: 300px;
  max-height: 400px;
  margin: 2rem 2rem;
  border: 0.5px solid var(--white-nav);
  border-radius: 0 0 10px 10px;
  box-shadow: 0.1px 1px rgba(41, 40, 40, 0.164);
  overflow: hidden;
}

.destination img {
  width: 100%;
}
.destination h3 {
  margin: 1rem;
  text-align: center;
}
.destination h4 {
  text-align: center;
  color: var(--dark);
}
.destination p {
  margin: 1rem;
}
@media (max-width: 700px) {
  .avis-cards {
    flex-direction: column;
  }
  .card {
    width: 100%;
    margin: 2rem auto 2rem;
  }
}
/* *************market-all******************** */

.bando-market {
  background: url(../img/bando_marche.jpg) no-repeat center/cover;
  height: 300px;
  width: 100%;
}
.bando-market h2 {
  font-size: 7rem;
  text-align: center;
  color: var(--white-nav);
  padding: 12rem;
}
@media (max-width: 700px) {
  .bando-market h2 {
    font-size: 4rem;
    padding: 9rem 0;
  }
}
/* ************* footer ****************** */
footer {
  background: var(--dark);
  height: 5rem;
}
footer p {
  font-size: 1.4rem;
  padding: 1rem;
  text-align: center;
  color: white;
}