@import url('https://fonts.googleapis.com/css?family=Open+Sans|Raleway:400,700&display=swap');

:root{
  --dark-blue:hsl(243, 87%, 12%);
  --desaturated-blue:hsl(238, 22%, 44%);
  --bright-blue:hsl(224, 93%, 58%);
  --cyan: hsl(170, 45%, 43%);
  --grayish-blue: hsl(240, 75%, 98%);
  --gray: hsl(0, 0%, 75%);
}


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

html{
  font-size: 62.5%;
}

body{
  font-family: 'Open Sans', sans-serif;
  font-size: 1.6rem;
  color: var(--dark-blue);
}

/***** PAGE SHARED CSS *****/
h1, h2{
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: 1px;
}

.container{
  width: 80%;
  margin: auto;
}

input{
  padding: 1rem 2rem;
  font-family: 'Open Sans', sans-serif;
  border-radius: 4px; 
}

input:focus{
  outline: none;
}

input::placeholder{
  font-family: 'Open Sans', sans-serif;
  opacity: .7;
}

.section{
  padding:10rem 0;
}
/***** PAGE SHARED CSS END *****/

/***** UTILS *****/
.util-block{
  display: block;
}
/***** UTILS END *****/

/***** HEADER *****/
.header{
  padding: 4rem 0 18rem 0;
}

.navigation{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rem;
}

.navigation__logo{
  max-width: 14rem;
}

.navigation__link{
  font-family: 'Raleway', sans-serif;
  text-decoration: none;
  margin-left: 3rem;
  font-size: 1.5rem;
}

.navigation__link:hover{
  text-decoration: underline;
}

.header__main{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__text{
  flex-basis: 42%;
}

.header__description{
  max-width: 55rem;
  padding: 2rem 0;
}

.header__form{
  display: flex;
  justify-content: space-between;
}

.header__input{
  flex-basis: 60%;
  border: 1px solid var(--dark-blue);
}

.header__submit{
  flex-basis: 30%;
  margin-right: 2rem;
  border-radius: 4px;  
  background-color: var(--bright-blue);
  color: white;
  border: none;
  cursor: pointer;
  margin-left: 1rem;
  display: block;
  padding: 1rem 2rem;
  width: 100%;
}

.header__submit:hover{
  opacity: 0.85;
}

.header__image-container{
  flex-basis: 50%;
}

.header__image{
  width: 100%;
}
/***** HEADER END *****/

/***** ABOUT SECTION *****/
.about{
  position: relative;
  background-color: #f8f8fe;
}

.about:before{
  content: " ";
  position: absolute;
  height: 10rem;
  background-image: url(./images/bg-curve-desktop.svg);
  top: -10rem;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.container--about{
  display: flex;
}

.about__text{
  flex-basis: 60%;
}

.about__heading{
  margin-bottom: 3rem;
}

.about__description{
  max-width: 55rem;
  margin-bottom: 1.5rem;
}

.about__link{
  position: relative;
  padding-right: 2.5rem;
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  margin-bottom: 4rem;
}

.about__link:after{
  content: "";
  display: block;
  position: absolute;
  right: 0;
  width: 2rem;
  height: 100%;
  background-image: url(./images/icon-arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.card{
  max-width: 36rem;
  padding: 3rem;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 29px -5px rgba(0, 0, 0, .15);
}

.card__description{
  margin: .5rem 0 1.5rem 0;
}

.card__footer{
  display: flex;
  align-items: center;
}

.card__image{
  max-width: 4.5rem;
  border-radius: 100px;
  overflow: hidden;
  margin-right: 1rem;
}

.card__user-info{
  display: flex;
  flex-direction: column;
  font-size: 1.3rem;
}

.card__username{
  font-weight: 700;
  font-family: 'Raleway', sans-serif;
}

.about__image-wrapper{
  flex-basis: 40%;
}

.about__image{
  width: 100%;
}
/***** ABOUT SECTION *****/

/***** CTA SECTION *****/
.cta{
  background-color: var(--desaturated-blue);
}

.cta__container{
  display: flex;
  justify-content: space-between;
}

.cta__text{
  flex-basis: 45%;
  color: white;
}


.cta__description{
  max-width: 50rem;
  margin: 2rem 0;
}

.cta__form{
  flex-basis: 45%;
  display: flex;
  flex-direction: column;
}

.cta__email-input{
  border: 1px solid var(--desaturated-blue);
  margin-bottom: 1rem;
  max-width: 50rem;
}

.cta__button-submit{
  align-self: start;
  padding: 1rem 2rem;
  background-color: var(--bright-blue);
  opacity: .85;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cta__button-submit:hover{
  opacity: .7;
}
/***** CTA SECTION END *****/

/***** FOOTER *****/
.footer{
  background-color: var(--dark-blue);
  color: #bfbfbf;
}

.footer__logo{
  margin-bottom: 2rem;
}

.footer__logo path{
  fill: white;
}

.footer__contact-wrapper{
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.footer__contact-icon{
  margin-right: 1rem;
}

.footer-wrapper{
  display: flex;
  justify-content: space-between;
}

.footer__contacts{
  flex-basis: 30%;
}

.footer__links{
  flex-basis: 30%;
  display: flex;
  justify-content: space-around;
}

.footer__links a{
  text-decoration: none;
  color: inherit;
  margin-bottom: 1.5rem;
}

.footer__links a:hover{
  color: white;
}

.footer__links-section{
  display: flex;
  flex-direction: column;
}

.footer__social{
  flex-basis: 30%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.footer__social-link{
  color: inherit;
  max-width: 2rem ;
  width: 100%;
  box-sizing: initial;
  padding: 1rem;
  border: 1px solid #bfbfbf;
  border-radius: 100px;
  margin-right: 1rem;
  display: flex;
  align-items: center;
}

.footer__social-link:hover{
  color: white;
  border: 1px solid white;
}

.footer__social-link svg{
  width: 100%;
}

.footer__attribution { 
  font-size: 1.4rem; 
  text-align: center; 
  margin-top: 3rem;
}
.footer__attribution a { 
  color: hsl(228, 45%, 44%); 
}

@media screen and (max-width:950px){
  h1, h2{ 
    font-size: 2.5rem;
  }

  .header__form{
    flex-direction: column;
  }

  .header__submit{
    margin: 1.5rem 0 0 0 ;
  }
}

@media screen and (max-width:600px){
  html{
    font-size: 56.25%;
  }

  h1, h2{ 
    font-size: 2.2rem;
  }

  .section{
    padding: 7rem 0;
  }
  
  .header__main{
    flex-direction: column;
  }

  .header__text{
    order: 1;
    text-align: center;
  }

  .navigation__logo{
    max-width: 10rem;
  }

  .navigation__link{
    margin-left: 1rem;
  }

  .container--about{
    flex-direction: column;
  }

  .about:before{
    background-image: url(./images/bg-curve-mobile.svg);
    height: 6rem;
    top: -6rem;
  }

  .about__text{
    order: 1;
    margin-top: 3rem;
    text-align: center;
  }

  .about__heading{
    margin-bottom: 1.5rem;
  }

  .card{
    text-align: start;
  }

  .about__link{
    margin: 1.5rem 0 3rem 0;
  }

  .cta__container{
    flex-direction: column;
  }

  .cta__text{
    text-align: center;
  }

  .cta__button-submit{
    width: 100%;
  }

  .footer-wrapper{
    flex-direction: column;
  }

  .footer__links{
    flex-direction: column;
    margin: 3rem  0;
  }
}