/* ///////////////////////////////////////// */
/* HEAD SECTION */
/* ///////////////////////////////////////// */
.header-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2rem;
}
.navigation-ul {
  display: flex;
  gap: 2rem;
  align-items: center;
  list-style-type: none;
  font-size: 1.6rem;
}
.nav-anchor:link,.nav-anchor:visited {
  text-decoration: none;
  color: black;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  color: hsl(273, 4%, 51%);
}
.nav-anchor__plans:link,.nav-anchor__plans:visited {
  display: inline-block;
  border: 3px solid #000;
  padding: 1.2rem 2.4rem;
  color: #000;
  transition: all 0.3s ease-in-out;
}
/* ///////////////////////////////////////// */
/* HEAD SECTION END */
/* ///////////////////////////////////////// */

/* ///////////////////////////////////////// */
/* HERO SEcTION */
/* ///////////////////////////////////////// */

.hero-section {
  background-color: hsl(256, 26%, 20%);
  color: #fff;
  margin-bottom: 12.8rem;
}
.text-img-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
  width: 130rem;
  margin: auto;
  max-width: 100%;
  padding: 3.2rem;
}
.text-box {
  padding: 4.2rem;
}

.hero-title {
  font-size: 7.2rem;
  font-family: "DM Serif Display", sans-serif;
  font-weight: 400;
  margin-bottom: 3rem;
}
.hero-paragraph {
  font-size: 1.6rem;
  font-family: "Karla", sans-serif;
  font-weight: 400;
  margin-bottom: 3rem;
}
.hero-link:link,.hero-link:visited {
  display: inline-block;
  border: 3px solid #fff;
  padding: 1.2rem 4rem;
  color: #fff;
  text-decoration: none;
  font-size: 1.6rem;
  font-family: "Karla", sans-serif;
  font-weight: 400;
  transition: all 0.3s ease-in-out;
}


.hero-image {
  transform: translateY(20%);
  width: 100%;
}

/* ///////////////////////////////////////// */
/* HERO SEcTION END*/
/* ///////////////////////////////////////// */

/* ///////////////////////////////////////// */
/* PROCESS SECTION*/
/* ///////////////////////////////////////// */

.process {
    padding: 4.8rem;
    width: 130rem;
    margin: auto;
    margin-bottom: 9.8rem;
    max-width: 100%;
}
.process-tree {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.process-title {
  font-size: 6.2rem;
  color: hsl(270, 9%, 17%);
  font-family: "DM Serif Display", sans-serif;
  font-weight: 400;
  margin-bottom: 6.2rem;
}

.process-card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 30rem;
  max-width: 100%;
}
.card-title {
  font-size: 2.4rem;
  font-family: "DM Serif Display", sans-serif;
  font-weight: 400;
}
.card-paragraph {
  font-size: 1.4rem;
  font-family: "Karla", sans-serif;
  font-weight: 400;
  color: hsl(273, 4%, 51%);
}
/* ///////////////////////////////////////// */
/* PROCESS SECTION END*/
/* ///////////////////////////////////////// */

/* ///////////////////////////////////////// */
/* HOW WE WORK SECTION*/
/* ///////////////////////////////////////// */
.how-we-weork-section{
    background-color: hsl(256, 26%, 20%);
    background-image: url('../images/bg-pattern-how-we-work-desktop.svg');
    background-repeat: no-repeat;
    background-position:right;
    width: 120rem;
    max-width: 100%;
    margin: auto;
    padding: 6.2rem;
    color: #fff;
    margin-bottom: 9.8rem;
}
.how-we-work-grid{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hww-title{
    font-size: 4.8rem;
    font-family: "DM Serif Display", sans-serif;
    font-weight: 400;
}

.how-we-work__link:link,.how-we-work__link:visited{
    text-decoration: none;
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    font-family: "Karla", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.6rem;
    padding: 1.4rem 3.2rem;
    transition: all 0.3s ease-in-out;
}
/* ///////////////////////////////////////// */
/* HOW WE WORK SECTION END*/
/* ///////////////////////////////////////// */



/* ///////////////////////////////////////// */
/* FOOTER SECTION */
/* ///////////////////////////////////////// */
.footer-section{
  padding: 6.2rem 9.8rem;
  background-color: hsl(0, 0%, 98%);
  background-image: url('../images/bg-pattern-footer-desktop.svg');
  background-repeat: no-repeat;
  background-position: left;
}
.footer-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4rem;
}
.socials{
  display: flex;
  gap: 3.2rem;
}

.footer-links{
  display: grid;
  grid-template-columns: repeat(4,1fr);
}

.footer-titles{
  font-size: 1.4rem;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  color: hsl(273, 4%, 51%);
  margin-bottom: 2.4rem;
}
.footer-link-ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-anchor:link,.footer-anchor:visited{
  text-decoration: none;
  color: hsl(270, 9%, 17%);
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
}
/* ///////////////////////////////////////// */
/* FOOTER SECTION END*/
/* ///////////////////////////////////////// */


/* HOVER EFFECTS */

.nav-anchor__plans:hover{
  background-color: #000;
  color: #fff;
}
.hero-link:hover,.how-we-work__link:hover{
  background-color: #fff;
  color: #000;
}

.social-img:hover{
  filter: brightness(0.4);
}


/* Burger menu */

.burger-button{
  background: none;
  border: none;
  display: none;
}

.burger-btn--open,.burger-btn--close{
  font-size: 3.2rem;
  cursor: pointer;
}

.burger-btn--close{
  display: none;
}