/*
=============== 
Universal rules
===============
*/
*{
  margin: 0%;
  padding: 0%;
  box-sizing: border-box
}
/*
=============== 
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");

/*
=============== 
Variables
===============
*/
:root{
  --clr-pink: hsl(322, 100%, 66%);
  --clr-light-pink: hsl(321, 100%, 78%);
  --clr-light-red: hsl(0, 100%, 63%);
  --clr-dark-cyan: hsl(192, 100%, 9%);
  --clr-pale-blue: hsl(207, 100%, 98%);
}
body{
  display: block;
}
/*
headers begins
*/
header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 3%;
}
header div img{
  width: 50%;
}
header .nav-link{
  color: var(--clr-pink);
  border: 1px solid var(--clr-pink);
  padding: 5px 16px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1rem;
  font-family: 'Poppins' sans-serif;
}
header .nav-link:hover{
  color: var(--clr-light-pink);
  border-color: var(--clr-light-pink);
  box-shadow: 0 1px 5px var(--clr-light-pink);
}
/*
header ending
*/
/*
section begins
}*/
.section-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.section-header .mid-header {
  text-align: center;
}
.section-header .mid-header h1 {
  text-transform: capitalize;
  font-size: 3rem;
  font-family: 'Poppins' sans-serif;
  font-weight: 700;
  margin-top: 8%;
}
.section-header .mid-header p {
  text-align: center;
  width: 50%;
  text-wrap: balance;
  color: hsl(208, 11%, 55%);
  font-size: 1rem;
  font-family: 'Open Sans' sans-serif;
  font-weight: 400;
  margin: 0 auto;
  margin-bottom: 2rem;
  margin-top: 1rem;

}
.section-header .mid-header a {
  background-color: hsl(322, 100%, 66%);
  color: white;
  padding: 10px 50px;
  text-decoration: none;
  border-radius: 50px;
  font-size: 16px;
}
.section-header .mid-header a:hover {
  background-color: hsla(322, 76%, 74%, 0.979);
}
.section-header div img{
  width: 50%;
  margin-top: 5%;
}
.section-body{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 6%;
}
.section-body div img{
  width: 40px;
}
.section-body div h1{
  font-size: 4rem;
  font-weight: 700;
}
.section-body div p{
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  color: hsl(208, 11%, 55%);
}
section .bg-section img{
  position: relative;
  top: 1rem;
  width: 100%;
}
section .bg-section-bottom img{
  position: relative;
  width: 100%;
}
.mid-section {
  background-color: var(--clr-pale-blue);
  display: flex;
  justify-content: space-between;
  margin: 0%;
}
.mid-section div {
  margin-top: 5%;
  margin-left: 7%;
  padding: 4%;
}
.mid-section div h2 {
  font-size: 2rem;
  font-family: 'Poppins' sans-serif;
  font-weight: 700;
  margin-bottom: 5%;
}
.mid-section div p {
  color: hsl(208, 11%, 55%);
  text-wrap: balance;
}
.mid-section img {
  width: 35%;
  margin: 4% 4% 4% 3%;
}
.section-center {
  background-color: white;
  display: flex;
  justify-content: space-between;
  margin: 3% 6% 0% 6%;
}
.section-center div {
  margin-top: 5%;
  margin-left: 7%;
  padding: 4%;
}
.section-center div h3 {
  text-wrap: balance;
  font-size: 2rem;
  font-family: 'Poppins' sans-serif;
  font-weight: 700;
  margin-bottom: 5%;
}
.section-center div p {
  color: hsl(208, 11%, 55%);
}
.section-center img {
  width: 35%;
  margin: 4% 4% 4% 7%;
}
.section-footer {
  background-color: var(--clr-pale-blue);
  display: flex;
  justify-content: space-between;
  margin: 0%;
  border-radius: 10px;
}
.section-footer div {
  margin-top: 5%;
  margin-left: 7%;
  padding: 4%;
}
.section-footer div h4 {
  font-size: 2rem;
  font-family: 'Poppins' sans-serif;
  font-weight: 700;
  margin-bottom: 5%;
}
.section-footer div p {
  color: hsl(208, 11%, 55%);
  font-size: 1rem;
  font-family: 'Open sans' sans-serif;
}
.section-footer img {
  width: 35%;
  margin: 4% 4% 4% 7%;
}
.ready {
  text-align: center;
  background-color: white;
  position: relative;
  margin-top: 5%;
}
.ready h5 {
  font-size: 2rem;
  font-family: 'Poppins' sans-serif;
  font-weight: 700;
  margin-top: 10%;
  margin-bottom: 3%;
}
.ready a {
  background-color: hsl(322, 100%, 66%);
  color: white;
  padding: 10px 50px;
  text-decoration: none;
  border-radius: 50px;
  font-size: 1rem;
  font-family: 'Open sans' sans-serif;
  font-weight: 400;
}
.ready a:hover {
  background-color: hsla(322, 76%, 74%, 0.979);
}
/*
section ending
*/
.bg-footer img{
  margin-top: 10%;
  width: 100%;
  position: relative;
  top: 0.4rem;
}
footer{
  background-color: var(--clr-dark-cyan);
  color: white;
}
.footer{
  background-color: var(--clr-dark-cyan);
  color: white;
  padding: 10% 5% 8% 8%;
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
.footer .footer-header .huddle{
  margin-bottom: 5%;
}
.footer .footer-header .lorem{
  margin-bottom: 5%;
  font-size: 1rem;
  font-family: 'Open sans' sans-serif;
  font-weight: 400;
  text-wrap: balance;
}
.footer .footer-header .contact {
  display: flex;
  gap: 10px;
  margin-bottom: 5%;
}
.footer .footer-header .email {
  display: flex;
  gap: 10px;
  margin-bottom: 15%;
}
.footer .footer-header .footer-icons {
  display: block;
}
.footer .footer-header .fb {
  color: white;
  background-color: transparent;
  padding: 3px;
  margin-right: 10px;
  border-radius: 1px;
}
.footer .footer-header .fb:hover {
  color: var(--clr-dark-cyan);
  background-color: hsl(188, 77%, 54%);
  border: 1px solid hsl(188, 77%, 54%);
  cursor: pointer;
}
.footer .footer-header .twitter {
  color: white;
  background-color: transparent;
  padding: 3px;
  margin-right: 10px;
  border-radius: 1px;
}
.footer .footer-header .twitter:hover {
  color: var(--clr-dark-cyan);
  background-color: hsl(188, 77%, 54%);
  border: 1px solid hsl(188, 77%, 54%);
  cursor: pointer;
}
.footer .footer-header .ins {
  color: white;
  background-color: transparent;
  padding: 3px;
  border-radius: 1px;
}
.footer .footer-header .ins:hover {
  color: var(--clr-dark-cyan);
  background-color: hsl(188, 77%, 54%);
  border: 1px solid hsl(188, 77%, 54%);
  cursor: pointer;
}
.footer .news h4{
  text-transform: uppercase;
  font-size: 2rem;
  font-family: 'Poppins' sans-serif;
  font-weight: 700;
  margin-bottom: 5%;
  text-wrap: balance;
}
.footer .news p{
  text-wrap: balance;
  font-size: 1rem;
  font-family: 'Open sans' sans-serif;
  font-weight: 400;
  margin-bottom: 5%;
  padding-left: 2px;
}
.footer .news .Email input{
  width: 60%;
  padding: 1%;
  margin-right: 3%;
  border-radius: 2px;
  border: 0px;
}
.footer .news .Email button{
  color: white;
  background-color: var(--clr-pink);
  padding: 1% 4%;
  border-radius: 2px;
  border: 0px;
}
.footer .news .Email button:hover{
  background-color: var(--clr-light-pink);
}
.attribution {
  font-size: 11px;
  font-family: 'Open sans' sans-serif;
  text-align: center;
}
.attribution a {
  color: white;
  text-decoration: none;
}
@media screen and (max-width: 650px){
  .section-header{
    display: flex;
    flex-direction: column;
  }
  .section-header .mid-header p{
    width: 100%;
    margin-bottom: 3rem;
  }
  .section-header .mid-header{
    margin-bottom: 2rem;
}
  .section-body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .section-body .message{
    margin-top: 15%;
  }
  .mid-section{
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .mid-section img{
    width: 50%;
  }
  .section-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .section-center img{
    width: 50%;
  }
  .section-footer{
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .section-footer img{
    width: 50%;
  }
  .footer{
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
  }
  .footer .footer-header{
    margin-top: 15%;
  }
  .footer .news .Email input{
    width: 100%;
    display: block;
    margin-bottom: 2%;
  }
  .footer .news .Email p{
    color: var(--clr-light-red);
  }
  .footer .news .Email button{
    display: block;
    margin-left: auto;
  }
}