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


@media screen and (max-width: 900px){
  .header__nav--links{
    display: none;
  }
 
}

@media screen and (max-width: 600px){
  .header__nav--links{
    display: none;
  }

}


:root{
 
  --rainy-color: #2F515E;
  --color-primary: #FFF;
 
  /* Dynamic Padding */
  --padding-d-l-v: calc(2rem + 12vh);
  --padding-d-l-h: calc(2rem + 12vw);

  --padding-d-mc-v: calc(1rem + 4vh);
  --padding-d-mc-h: calc(1rem + 4vw);

  --padding-d-m-v: calc(1rem + 2vh);
  --padding-d-m-h: calc(1rem + 2vw);

  --padding-d-s-h: calc(1rem + 1vw);
  --padding-d-s-v: calc(1rem + 1vh);

  /* Static Padding */
  --padding-st-l-h: 3rem;
  --padding-st-l-v: 2rem;

  --padding-st-m-h: 2.5rem;
  --padding-st-m-v: 1.5rem;

  --padding-st-s-h: 2rem;
  --padding-st-s-v: 1rem;


   /* Dynmaic Font-sizes */
  --font-size-d-lc: calc(3rem + 3.5vw);
  --font-size-d-l: calc(2rem + 3vw);
  --font-size-d-mc: calc(2rem + 2.5vw);
  --font-size-d-m: calc(1rem + 2vw);
  --font-size-d-sc: calc(1rem + 1.5vw);
  --font-size-d-s: calc(1rem + 1vw);

  /* Static */
  --font-size-st-xl: 4rem;
  --font-size-st-lc: 3.5rem;
  --font-size-st-l: 3rem;
  --font-size-st-mc: 2.5rem;
  --font-size-st-m: 2rem;
  --font-size-st-sc: 1.5rem;
  --font-size-st-s: 1rem;

  --font-family-heading: 'alexandria';
  --font-family-primary: 'albert sans';


  --btn-padding-primary: 0.99rem;
  --btn-padding-secondary: 1rem;
}


body{
font-family: var(--font-family-primary);
line-height: 1.5;
background-color: var(--color-primary);
height: 100vh;
}


main{
  
  
}

.section__padding{
  padding: 5rem 5rem;
}

a{
  text-decoration: none;
  border-radius: 1rem;
  font-family: 'albert sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #FFF;
}

li{
  list-style: none;
}

.soon__h1 {
  font-family: 'alexandria' sans-serif;
  font-size: 5rem;
  text-align: center;
}

/*------------*------------SECTION PADDING----------------*------------------*
--------------*------------------*--------------*------------------*/

.section__title {
  font-size: var(--font-size-d-sc);
  font-weight: 900;
}

.section__para {
font-size: var(--font-size-st-sc);
}

.header{
  padding: var(--padding-d-s-v) var(--padding-d-l-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo img {
  width: 4.7rem;  
}

.header__icons img {
  width: 2rem;
}

.header__nav{
  color: #000;
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.header__nav--links{
  color: #000;
  font-size: 1.3rem;
  transition: all 0.1s ease-in-out;
  text-transform: uppercase;
  font-weight: 600;
}

.header__nav--links:hover{
  color: var(--rainy-color);
}

.header__icons{
  display: flex;
  gap: .8rem;
}


.footer {
  background-color: rgba(255, 246, 237, 1);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 2.5rem 1.875rem 0.75rem 1.875rem;
  color: #000;
}

.footer__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.footer__content--about,
.footer__content--info,
.footer__content--support,
.footer__content--newsletter,
.footer__content--socials,
.footer__copyright {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer__content--about ul,
.footer__content--info ul,
.footer__content--support ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .3rem;
}

.footer__content--newsletter, h2{
  justify-content: center;
  align-items: center;
  gap: .7rem; 
}

.footer__content--socials,
.footer__content--socials__icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.footer__copyright {
  display: flex;
  justify-content: center;
  align-items: center; 
}

.footer__copyright h3{
font-size: 0.8rem;
font-weight: 300;
}

/****----------------**Primary button styles**-------------****/
.buy__btn {
  background-color: var(--rainy-color);
  cursor: pointer;
  border-radius: 1.3rem;
  letter-spacing: 0.125rem;
  text-align: center;
  width: 6rem;
  height: 3rem;
  font-weight: 500;
  font-family: 'albert sans', sans-serif;
  border: 0.063rem solid transparent;
  margin: 0.625rem 0 0.625rem 0.625rem; 
}

.primary__btn {
  background-color: var(--rainy-color);
  font-family: 'alberts sans', sans-serif;
  letter-spacing: 0.100rem;
  cursor: pointer;
  border-radius: 2rem;
  width: 14rem;
  height: 3.7rem;
  border: none;
  
}

.primary__btn a,
.buy__btn a {
  color: #FFF;
  text-align: center;
  font-size: 1.1rem;                              
}

.primary__btn:hover,
.buy__btn:hover{
  background-color: rgba(47, 101, 103, 0.34);
  color: var(--rainy-color); 
}