:root {
  /*Colors*/
  --color-black: #18191F;
  --color-neutral-black:#263238;
  --color-Neutral-D_Grey: #4D4D4D;
  --color-Neutral-Grey:#717171;
  --color-gray-light: #f9f9f9;
  --color-Neutral-White: #FFFFFF;
  --color-Neutral-silver: #F5F7FA;
  --color-brand-primary:#4CAF4F;

/* Fonts */
--font-family-heading: "Inter",sans-serif;

/* font size */
--font-size-base: clamp(0.75rem, 0.875rem + 0.1vw, 1.125rem); /*14px*/
--font-size-lg: clamp(1.5rem, 1.75rem + 0.15vw, 2rem);/*28PX*/
--font-size-xl: clamp(1.75rem, 2.25rem + 0.2vw, 2.75rem);/*36px*/
--font-size-2xl: clamp(3rem, 4rem + 0.25vw, 5rem); /*64px*/

/* Font weight */
--font-weight-normal: 400;
--font-weight-buttum: 500;
--font-weight-title: 600;
--font-weight-subtitle: 700; 

 /* Radius */
 --radius-sm:0.25rem ;
 --radius-mm:0.375rem;
 --raduis-lm:0.5rem ;

 /* Spacing */
 --spacing-5xs: 0.5rem;
 --spacing-4xs: 0.625rem;
 --spacing-3xs: 0.875rem;
 --spacing-2xs: 0.938rem;
 --spacing-xs: 1rem;
 --spacing-s: 2rem;
 --spacing-2s: 2.5rem;
 --spacing-3s: 2.625rem;
 --spacing-4s: 3rem;
 --spacing-md: 3.125rem;
 --spacing-lg: 6.5rem;
 --spacing-xl: 7.813rem;
 --spacing-2xl: 9.063;

/* shadow */
--shadow-md: 0 2px 4px 0 #abbed1;

 

/*  height */
--height-block1: 16.25rem;
--height-block2: 1.5em;
--height-block3: 2.5rem;


/* width */
--wight-block1: 18.688rem;
--wight-block2: 90rem;
--wight-base: 90.063rem;

/*padding*/
--padding-long-buttum: 0.875rem 2rem 0.875rem 8rem;

}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* BASE */
html,
body {
  max-width: 90rem;
  max-height: 168.188rem;
  font-family: var(--font-family-heading);
  background-color: var(--color-Neutral-White);
  margin: 0;
  padding: 0;
}
header {
  display: flex;
  background-color: var(--color-Neutral-silver);
  align-items: center;
  width: 90.063rem;
  height: 5.25rem;

}

main{
  width : 90.063rem;
  height: 125.713rem;
  

}

button {
  top: 0.625rem;
  right: 1.25rem;
  bottom: 0.625rem;
  left: 1.25rem;
  gap: var(--spacing-4xs);
  border-radius: 0.375rem;
  border-style: none;
  font-weight: var(--font-weight-buttum);
  font-size: var(--font-size-base);
  align-content: center;
  line-height: 1.25rem;
  
  
}

footer {
  display: flex;
  flex-direction: column;
  height: 554px;
  gap: 42px;
  padding-top: 42px ;
}

/*layout*/

a {
  text-decoration: none;
  color: #18191F;
  line-height: 1.5rem;
}

span{
  color:var(--color-brand-primary) ;
}

h2 {
  font-weight: var(--font-weight-title);
  font-size: 36px;
  line-height: 44px;
  text-align: center;
}
/*componant*/

.cinquante-weight {
  font-weight: var(--font-weight-buttum)!important;
}

.card {
  border-radius: 8px;
  gap: 8px;
  width: 299px;
  height: 260px;
  padding: 24px 32px 24px 32px;
  text-align: center;
  background-color: var(--color-Neutral-White);
  box-shadow: var(--shadow-md);

}
/*header*/

.logo{
  padding: 30px 145px 30px 105px;
  right: 7rem;
}

.nav-header {
  display: flex;
  width: 588px;
  height: 24px;
  gap: var(--spacing-md);
  list-style: none;
  top: 30px;
  left: 404.49px;
  font-weight: var(--font-weight-normal);

  
 
}

.dos-buttom {
  width: 100vh;
  gap: var(--spacing-3xs);
  padding-left: 145px;
  padding-right: 121.51px;
  padding-top: 22px;
  padding-bottom: 22px;
  align-items: center;
  height: 40px;
  display: flex;
  
} 

.login {
  width:4.813rem ;
  height: 2.5rem;
  color: var(--color-brand-primary);
  background-color: var(--color-Neutral-silver);
  
}

.sign-up{
  width: 5.688rem;
  height: 2.5rem;
  background-color: var(--color-brand-primary);
  color: white;
}

/*Main*/

/*body*/

.body {
  width:var(--wight-base) ;
  height: 65.938rem;
  gap: var(--spacing-2s);
}
/*hero section*/

.hero-section {
  width: 90.063rem;
  height: 37.438rem;
  gap:var(--spacing-4xs) ;
  background-color: var(--color-Neutral-silver) 
}

.frame-1{
  display: flex;
  width:41.125rem ;
  height: 17.25rem;
  gap: var(--spacing-lg);
  padding: 6rem 9rem 6rem 9rem;
}

/*texte*/
.texte {
  width:41.125rem;
  height: 12rem;
  gap: var(--spacing-xs) ;


}

.texte h1 {
  width: 41.125rem;
  height: 9.5rem ;
  font-size: var(--font-size-2xl);
  line-height:4.75rem ;
  font-weight: var(--font-weight-title);
  white-space: nowrap;
  
  }

  .buttom-registers {
    width: 8rem;
    height: 3.25em; 
    background-color: var(--color-brand-primary);
    color: var(--color-Neutral-White);
    border-radius: 0.25rem;
    line-height: 1.5rem;

  }

  .dos-buttom-registers{
    padding: 24.094rem 73.063rem 10.094rem 9rem;
    
  }

  /*illustration*/
  .illustration {
    height: 25.438rem;
    width: 24.438rem;
  }

  /*community général*/

 .community-general {
  gap: 16px;
  display: flex;
  flex-direction: column;
 }

 .community {
  text-align: center;
  
 }

 .titre-community{
  margin-bottom: 4px;
 }

.texte-community {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 400;
}

.frame-4 {
  display: flex;
  height: 280px;
  padding-left: 144px;
  padding-right: 144px;
  gap: 127px;
}

.membership-organizatios{
  height: 260px;
  display: flex;
  flex-direction: column;
}

.member{
  height: 144px;
  gap: 16px;
  font-size: 28px;
  line-height: 36px;
  align-content: center;
  font-weight: 700;
  text-align: center;
  margin: 0;
}


.frame-3 {
  width: 251px;
  height: 60px;
  gap: 8px;
  font-size: 14px;
  color: var(--color-Neutral-Grey);
  line-height: 20px;

}

.card-title {
  font-weight: 700;
  margin-bottom: 8px;
  margin-top: 16px;
}

.cards {
  width: 299px;
  height: 280px;
}

/*body*/

.body{
  height:914.4px ;
  gap: 48px;
  padding-top: 42px;
  padding-bottom: 42px;
  display: flex;
  flex-direction: column;
}

/*unlock*/

.unlock-general{
  height: 433px;
 
}


.unlock {
  display: flex;
  padding-left: 144px;
  padding-right: 144px;
  gap: 32px;
  height: 433px;
}

.frame-35 {
  width: 442px;
  height: 433px;
}

.frame-6 {
  display: flex;
  flex-direction: column;
  gap: 32px;

}

.frame-6-spe{
  margin-top: 82.5px;
  margin-bottom: 82.5px;
  width: 661px;
  height: 268px;

}

.frame-5 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 601px;
  height: 184px;
  text-align: left;

}

.text-frame{
  text-align: left;
  gap: 16px;
  color: var(--color-Neutral-D_Grey);
  margin-top: 0;
  margin-bottom: 0;
  
}

.description-frame{ 
  font-weight: var(--font-weight-normal);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-Neutral-Grey);
  margin: 0;
}

.label{
  width: 151px;
  height: 52px;
  background-color: var(--color-brand-primary);
  color: var(--color-Neutral-White);
  border-radius: var(--radius-sm);
  line-height: 24px;
  font-size: 16px;
}

/*calanders*/

.calander{
  height: 433.4px;
}

.calander-unlock{
  display: flex;
}

.frame-6-spe-2{
  margin-top: 62.7px ;
  margin-bottom: 62.7px;
  width: 661px;
  height: 308px;

}

.frame-7{
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 601px;
  height: 224px;
  text-align: left;
}

/*footer*/

.frame-16 {
  width: 1200px;
  height: 364px;
  gap: 32px;
  background-color: var(--color-Neutral-silver);
  padding: 64px 156.5px 148px 156.5px;
  margin:0 120px 0 120px ;
  border-radius: var(--raduis-lm);

}

.title-frame-16{
  margin-top: 0;
  margin-bottom: 0;
  font-weight: var(--font-weight-title);
  font-size: var(--font-size-2xl);
  width: 887px;
  height: 152px;
  text-align: center;
  color: var(--color-neutral-black);

  } 
  .spe-label{
    margin-top: 32px;
    margin-left: 366.5px;
    margin-right: 366.5px;
    width: 154px;
    margin-bottom: 64px;
    
  }

  .footer-big-4{
    display: flex;
    background-color: var(--color-neutral-black);
    height: 148px;
    padding: 64px 434px 64px 434px;
    gap: 8px;

    
  }

  .company-info {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--color-Neutral-silver);
    line-height: 20px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
   

  }

  .copyright{
    margin-top: 0;
    margin-bottom: 0;
    color: var(--color-Neutral-silver);
    line-height: 20px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
   
  }