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

/* CSS Variables */
:root {
  /* Primary Colors */
  --bright-red: hsl(12, 88%, 59%);
  --dark-blue: hsl(228, 39%, 23%);

  /* Neutral Colors */
  --dark-gray-blue: hsl(227, 12%, 61%);
  --very-dark-blue: hsl(233, 12%, 13%);
  --very-pale-red: hsl(13, 100%, 96%);
  --very-light-gray: hsl(0, 0%, 98%);
}

body {
  /* background-image: url(/images/bg-tablet-pattern.svg); */
  background-size: 50%;
}


/* Buttons styling */
button:not(.manage_btn,#foot_btn){
  width: 8rem;
  padding: .8rem 0;
  cursor: pointer;
  background: var(--bright-red);
  outline: none;
  font-family: "Be Vietnam Pro", sans-serif;
  border: none;
  border-radius: 1.5rem;
  color: var( --very-light-gray);
}
/* Buttons styling ends */


/* Header styling starts */
nav {
  display: flex;
  margin: 1rem 0;
  padding: 1rem 0;
  justify-content: space-around;
  align-items: center;
}

.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}

.nav-links a {
  margin: 0 1rem;
  text-decoration: none;
  color: var(--dark-blue);
  font-size: .9rem;
  font-family: "Be Vietnam Pro", sans-serif;
}
/* Header styling starts */


/* First Section Styles */
.first-section{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5rem 0;
  padding: 0 5rem;
}

.box-left h1{
  font-size: 2.7rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  margin-bottom: 1.5rem;
  line-height: 2.8rem;
}

.box-left p{
  color: var(--dark-gray-blue);
  font-family: 'Be Vietnam Pro', sans-serif;
  margin-bottom: 2rem;
}

.box-right{
  width: 45%;
}

.box-right img{
  width: 100%;
}
/* First Section Styles ends */


/* Manage section styling */
section#manage{
  display: flex;
  justify-content: space-between;
  padding: 0 3em;
  margin: 5rem 0;
  font-family: 'Be Vietnam Pro', sans-serif;
}

section#manage > div{
  width: 45%;
}

.manage_desc {
  padding: 0 2em;
}

.manage_desc h1{
  margin: 0 0 1em 0;
  font-size: 2rem;
  color: var(--dark-blue);
}

.manage_desc p{
  margin-right: 5rem;
  font-size: 1rem;
  color: var(--dark-gray-blue);
}

.sub_manage_item{
  display: flex;
  justify-content: space-between;
  margin-bottom: 2em;
  font-family: 'Be Vietnam Pro', sans-serif;
}

.sub_manage_item > div:nth-child(1) {
  margin-right: 1.5em;
}

.sub_manage_item > div:nth-child(1) button {
  width: 3.5em;
  border-radius: 20px;
  height: 2em;
  background-color: var(--bright-red);
  color: white;
  border: 0;
}

.sub_manage_item > div:nth-child(2) {
  font-family: 'Be Vietnam Pro', sans-serif;
  margin-top: .2rem;
}

.sub_manage_item > div:nth-child(2) h2 {
  font-size:  1rem;
  color: var(--dark-blue);
  margin-bottom: 1em;
}

.sub_manage_item > div:nth-child(2) p {
  color: var(--dark-gray-blue);
  margin-right: 3em;
}
/* Manage section styling ends */


/* Testimonials styling starts */
section#testimonials{
  text-align: center;
  font-family: 'Be Vietnam Pro', sans-serif;
  /* padding: 0 3em; */
  margin: 5rem 0;
}

section#testimonials h1{
  margin: 0 0 3em 0;
  font-size: 2rem;
  color: var(--dark-blue);
}

#customers_container{
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 3em;
}

.customer{
  background-color: var(--very-light-gray);
  padding: 1.5em;
  position: relative;
}

.img_container{
  position: absolute;
  width: 100%;
  transform: translate(-50%, 20%);
  left: 50%;
  top: -45px;
}

.img_container img{
  width: 4em;
  height: 4em;
}

.customer h2{
  color: var(--dark-blue);
  font-size: 1rem;
  margin: 2em 0 1em 0;
}

.customer p{
  color: var(--dark-gray-blue);
}
/* Testimonials styling starts ends */


/* Simplify section starts */
section#simplify{
  display: flex;
  padding: 3em 5em;
  background: var(--bright-red);
  font-family: 'Be Vietnam Pro', sans-serif;
  text-align: right;
}

section#simplify > div {
  width: 50%;
}

.simp_child:nth-child(1) {
  padding-right: 10em;
}

section#simplify h1{
  font-size: 2rem;
  color: #fff;
  text-align: left;
  font-family: 'Be Vietnam Pro', sans-serif;
}

section#simplify button{
  background: #fff;
  color: var(--bright-red);
}

.simp_child:nth-child(2) {
  margin: auto;
}
/* Simplify section ends */


/* Footer styling starts */
footer{
  background-color: var(--very-dark-blue);
  display: flex;
  justify-content: space-between;
  padding: 3em 5em;
  color: #fff;
  font-family: 'Be Vietnam Pro', sans-serif;
}

.foot_child:not(.foot_child:nth-child(3)){
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 8rem;
}

.foot_child:nth-child(3) li + li{
  margin-top: 1.1em;
}

.foot_icons{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

footer ul{
  list-style: none;
}

footer ul li a{
  color: white;
  text-decoration: none;
}

.newsletter{
  display: flex;
  justify-content: space-between;
  gap: .4em;
}

.newsletter input{
  background-color: #fff;
  border: none;
  border-radius: 15px;
  padding: .8em 1em;
  outline: none;
}

.newsletter button{
  background: var(--bright-red);
  color: #fff;
  padding: .8em 1.3em;
  border: none;
  border-radius: 15px;
  cursor: pointer;
}

.foot_child:nth-child(4) p{
  font-size: .7rem;
  color: grey;
  text-align: right;
  font-weight: lighter;
}
/* Footer styling starts */

/* Mobile View*/
/* Mobile Styles */
@media (max-width: 767px) {
    nav {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        margin-top: 1rem;
    }

    .nav-links a {
        margin: 0.5rem 0;
    }

    .btn {
        margin-top: 1rem;
    }
}