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

/* =======================
   VARIABLES (COLORS)
======================= */
:root {
  /* Primary */
  --green-500: hsl(171, 66%, 44%);
  --blue-100: hsl(233, 100%, 69%);

  /* Neutral */
  --gray-700: hsl(210, 10%, 33%);
  --gray-500: hsl(202, 10%, 63%);
}

/* =======================
   GLOBAL STYLES
======================= */
body {
  font-family: 'Bai Jamjuree', sans-serif;
  font-size: 15px;
  color: var(--gray-700);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* =======================
   HEADINGS
======================= */
h1, h2, h3 {
  font-weight: 600;
  color: var(--gray-700);
}

p {
  color: var(--gray-500);
}

/* =======================
   BUTTONS
======================= */
button {
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  margin: 10px;
}

/* iOS Button */
button:first-child {
  background-color: var(--green-500);
  color: white;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Mac Button */
button:last-child {
  background-color: var(--blue-100);
  color: white;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* =======================
   LAYOUT
======================= */
.main {
    background: url(images/bg-header-desktop.png) no-repeat;
  padding: 20px;
  text-align: center;
}

.hero {
  margin: 40px 0;
}
.hero-buttons{
    margin-top: 40px;
}

.features {
  margin: 60px 0;
  padding: 30px;
  margin-top: 50px;
}

/* =======================
   IMAGES
======================= */
img {
  max-width: 100%;
  height: auto;
}
.image img {
  display: block; 
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-left: -25%;
}

/* =======================
   FOOTER
======================= */
.footer {
  background-color: #f5f5f5;
  padding: 25px 100px 10px 100px;
}
.footer-content {
  display: flex;
  justify-content: space-between;
}
.footer-content ul li{
  list-style-type: none;
  text-align: left;
}
.footer-content .footer-logo{
  width: 5rem;
  cursor: pointer;
}
.footer-social img{
    width: 25%;
    max-width: 100px;
}
.footer-social img:hover {
    cursor: pointer;
  filter: brightness(100%) saturate(10%) invert(57%) sepia(58%) saturate(500%) hue-rotate(120deg);
}
.footer-links ul li{
 margin-bottom: 15px;
}
.footer-links ul li:hover{
 color: var(--green-500);
 cursor: pointer;
}
.acces{
    margin-bottom: 80px;
    margin-top: 100px;
}

/* =======================
   RESPONSIVE DESIGN
======================= */
@media (min-width: 768px) {
  .image-un {
  margin-top: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .text {
    text-align: left;
    padding: 20px;
  }
  .text .detail{
    padding: 17px;
  }

 .logo-un {
    margin-top: 80px;
    margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  text-align: center;
}

.logo-un div {
  flex: 1;
}

.logo-un img {
  width: min(100%, 40px);
  height: auto;
  margin-bottom: 15px;
}

  .icon {
    display: flex;
    justify-content: space-around;
    padding: 60px;
    align-items: center;
  }
  .icon img {
  width: 80%;
  max-width: 120px; /* ajuste la taille max */
  height: auto;
}
}

@media screen and (max-width:766px) {
   .image img {
  display: block; 
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: auto;
  margin-top: 20px;
} 
.text .detail{
    padding-top: 17px;
  }

   .logo-un {
    margin-top: 80px;
    margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  text-align: center;
}

.logo-un div {
  flex: 1;
  padding-bottom: 20px;
}

.icon {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-top: 60px;
    align-items: center;
  }
.icon div {
    padding-bottom: 40px;
  }
  .footer {
  background-color: #f5f5f5;
  padding: px 0px 0px 0px;
}

  .footer-content {
  align-items: center;
  text-align: center;
  flex-direction: column;
}
.footer-content ul li{
    margin-top: 10px;
  text-align: center;
}
.footer-content .footer-logo{
  width: 3rem;
  cursor: pointer;
}
.footer-social img{
    width: 25%;
    max-width: 500px;
    padding: 5px;
}
.logo{
    margin: auto;
    width: 5rem;
  cursor: pointer;
}

}