@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap");


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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 2em;
    padding-bottom: 2em;
}

.container {
    max-width: 1250px;
}

.titre {
    text-align: center;
    color: white;
    line-height: 1.6;
}
.titre h1 {
    font-size: 2.5rem;
}
.titre p {
    font-size:  1.2rem;
}

.cards {
  flex-direction: column;
  padding-top: 3em;
}

.première_partie {
    display: flex;
    gap: 1.5em;
    padding-bottom: 2em;
}

.card1 {
  background-color: white;
  border-radius: 15px;
  padding: 2em;
  width: 70%;
  border: 4px solid transparent;
  border-radius: 15px;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24, #a55eea, #26de81) border-box;
  border-right: white;
  border-bottom: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.card1:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform : 0.3s ease;
  box-shadow : 0.3s ease;
  cursor: pointer;
}
.card1 p {
  color: #666;
} 

.profile {
    display: flex;
    justify-content: space-between;
}
.info_text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    line-height: 1.6;
}
.info_text h3 {
    color: #333;
    font-size: 1.2rem;
}
.info_text p {
    font-size: 0.9rem;
}

.photo1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4em;
    height: 4em;
    border-radius: 50px;
    border: 2px solid  #f0f0f0;
}

.card-text {
    margin-top: 2em;
}

.star {
    margin-top: 1em;
}

.fa-solid {
  color: #ffd700;
}

.card2 {
  background-color: white;
  border-radius: 15px;
  padding: 2em;
  width: 35%;
  border: 4px solid transparent;
  border-radius: 15px;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, #45b7d1,#ff6b6b, #4ecdc4, #f9ca24) border-box;
  border-right: white;
  border-bottom: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.card2:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform : 0.3s ease;
  box-shadow : 0.3s ease;
  cursor: pointer;
}

.card2 p {
  color: #666;
} 

.deuxième_partie {
    display: flex;
    gap: 1.5em;
    padding-bottom: 2em;
}

.card3 {
  background-color: white;
  border-radius: 15px;
  padding: 2em;
  width: 32%;
  border: 4px solid transparent;
  border-radius: 15px;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, #45b7d1,#ff6b6b, #4ecdc4, #f9ca24) border-box;
  border-right: white;
  border-bottom: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.card3:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform : 0.3s ease;
  box-shadow : 0.3s ease;
  cursor: pointer;
} 

.card3 p {
  color: #666;
}

.card4 {
  background-color: white;
  border-radius: 15px;
  padding: 2em;
  width: 32%;
  border: 4px solid transparent;
  border-radius: 15px;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, #f9ca24,#ff6b6b,#45b7d1,#4ecdc4, #f9ca24) border-box;
  border-right: white;
  border-bottom: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.card4:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform : 0.3s ease;
  box-shadow : 0.3s ease;
  cursor: pointer;
} 

.card4 p {
  color: #666;
}

.card5 {
  background-color: white;
  border-radius: 15px;
  padding: 2em;
  width: 70%;
  border: 4px solid transparent;
  border-radius: 15px;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, #a55eea,#ff6b6b,#45b7d1,#4ecdc4, #f9ca24) border-box;
  border-right: white;
  border-bottom: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.card5:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform : 0.3s ease;
  box-shadow : 0.3s ease;
  cursor: pointer;
}

.card5 p {
  color: #666;
} 

.card6 {
  background-color: white;
  border-radius: 15px;
  padding: 2em;
  width: 35%;
  border: 4px solid transparent;
  border-radius: 15px;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, #26de81,#ff6b6b,#45b7d1,#4ecdc4, #f9ca24) border-box;
  border-right: white;
  border-bottom: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.card6:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform : 0.3s ease;
  box-shadow : 0.3s ease;
  cursor: pointer;
}

.card6 p {
  color: #666;
}

.card7 {
  background-color: white;
  border-radius: 15px;
  padding: 2em;
  width: 32%;
  border-inline-start: solid 4px  #C78941;
  border: 4px solid transparent;
  border-radius: 15px;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, #C78941,#ff6b6b,#45b7d1,#4ecdc4, #f9ca24) border-box;
  border-right: white;
  border-bottom: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.card7:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform : 0.3s ease;
  box-shadow : 0.3s ease;
  cursor: pointer;
}


.card7 p {
  color: #666;
}

@media (max-width: 1024px) {
  .container {
    max-width: 90%;
    margin: 0 auto;
  }

  .titre h1 {
    font-size: 2rem;
  }

  .titre p {
    font-size: 1rem;
  }

  .première_partie,
  .deuxième_partie {
    gap: 2em;
  }

  .card1,
  .card2,
  .card3,
  .card4,
  .card5,
  .card6 {
    padding: 1.5em;
  }

  .card1, .card5 {
    width: 65%;
  }

  .card2, .card6, .card7 {
    width: 48%;
  }

  .card3, .card4 {
    width: 48%;
  }

  .info_text h3 {
    font-size: 1.1rem;
  }
  .info_text p {
    font-size: 0.85rem;
  }

  .card-text {
    font-size: 0.95rem;
  }

}

@media (max-width: 768px) {
  .container {
    max-width: 95%;
    margin: 0 auto;
  }

  .titre h1 {
    font-size: 1.8rem;
  }

  .titre p {
    font-size: 1rem;
  }

  .première_partie,
  .deuxième_partie,
  .Quatrième_partie {
    flex-direction: column;
    align-items: center;
  }

  .card1,
  .card2,
  .card3,
  .card4,
  .card5,
  .card6,
  .card7 {
    width: 100%;
    max-width: 700px;
  }

  .card1,
  .card2,
  .card3,
  .card4,
  .card5,
  .card6,
  .card7 {
    padding: 1.5em;
  }

 
  .info_text {
    align-self: start;
  }

  .photo1 {
    width: 3.5em;
    height: 3.5em;
  }

  .card-text {
    font-size: 0.9rem;
  }

  .star {
    align-self: flex-end;
    margin-top: 1em;
  }
}


@media (max-width: 375px) {
    .profile {
        flex-direction: column;
        text-align: center;
    } 
    .info_text {
        flex-direction: column;
        align-self: center;
    } 

    .star {
        align-self: center;
        margin-top: 1em;
    }

}