style.css

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
}
body {
  font-family: 'Raleway', sans-serif;
  background: #FFFBF2;
  color: #393d67;
  font-size: 1.2em;
  margin: 0;
}

img {
  max-width: 80%;
  text-align: center;
}

.container {
  padding: 45px;
  margin: 0 auto;
  max-width: 100%;
  width: 1280px;
}

.flex {
  display: flex;
  align-items: center;
  column-gap: 24px;
  row-gap: 24px;
}

.flex > div {
  flex: 1;
}

header {
  position: relative;
  padding: 50px 0 0 0;
  background-image: url('./images/red-vector.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

header .container .flex div:first-child {
  display: flex;
  justify-content: center;
}

header .container .flex > div:first-child img {
  width: 75%;
  height: auto;
}

header .container .flex > div:nth-child(2) {
  padding: 24px;
}

.mentorship-benefits .container .flex div:nth-child(2) {
display: flex;
justify-content: right;
}

.mentorship-benefits .container .flex div:nth-child(2) img{
width: 75%;
height: auto;
}

/*Nav styling*/

nav {
  text-align: center;
  background-color: #393d67;
  padding: 24px 0;
}

/*Form styling*/
form {
display: flex;
}

label {
display: block;
margin: 12px 0;
}

input {
  border: 1px solid #6f7083;
  border-radius: 2px;
  flex: 0.7;
  padding: 14px;
  background-color: #fef7e5;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  font-size: 1em;
}

button {
  border: 1px solid #ff0910;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  flex: 0.3;
  padding: 14px;
  background-color: #ff0910;
  color: white;
  font-weight: 600;
  margin-left: 20px;

  font-size: 1em;
}
button:hover {
  background-color: #393d67;
  border: 1px solid transparent;
  cursor: pointer;
  }
  
h1 {
  margin: 24px 0;
  padding: 0 26px 0 0;
  font-size: 56px;
}

h2 {
  margin: 24px 0;
  font-size: 48px;
  text-align: left;
}

p {
  margin-bottom: 24px;
}

ul {
  padding-left: 0;
}

li {
  font-size: 1em;
  margin-bottom: 12px;
}

.newsletter {
  font-weight: 600;

}

.testimonial-cards {
  margin-bottom: 12%;
  }

.testimonials {
  background-color: #fef7e5;
  padding: 32px 24px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  height: auto;
}

.h2-testimonials {
text-align: center;
}

.span-name {
  display: block;
  font-weight: 600;
  text-align: center;
}

/*Carousel styling*/

.carousel {
  position: relative;
  margin: 48px 0;
}

.carousel_item {
  height: 400px;
  background: #393d67;
  color: #fef7e5;
  text-align: center;
  padding: 48px;
  border-radius: 4px;
  display: none;
}

.carousel_item-selected {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.carousel_nav {
width: 100%;
padding: 20px 0;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}

.carousel_button {
width: 10px;
height: 10px;
display: inline-block;
background: #fef7e5;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}

.carousel_button-selected {
background: #ff0910;
}

/*Sign up section*/
.sign-up {
  background-color: #fef7e5;
  position: relative;
  padding: 56px 0;
}

.sign-up::before {
  content: '';
  background-image: url('./images/curve2.svg');
  background-size: cover;
  position: absolute;
  top: -115;
  left: 0;
  height: 185px;
  width: 100%;
}
.sign-up form {
  flex-direction: column;
}
.sign-up form input {
  flex: 1;
  background-color: #fff;
}

.sign-up form button {
  width: 50%;
  margin: 12px 0;
}

/*Footer styling*/

footer {
  background-color: #393d67;
  color: #fef7e5;
  margin: 0 auto;
}

footer p {
  text-align: center;
}

footer a {
  text-decoration: underline;
  color: #fef7e5;
}

/*Scrollbar*/

::-webkit-Scrollbar {
width: 16px;
}

::-webkit-Scrollbar-track {
  background: #fef7e5 ;
}

::-webkit-Scrollbar-thumb {
  background: #393d67;
}

::-webkit-Scrollbar-thumb:hover {
background: #ff0910;
}

/* Tablets and below */
@media screen and (max-width: 990px) {


  form {
    padding: 0 24px;
  }
  header {
    background-position-x: -180%;
    background-position-y: -400px;
  }

  header .container .flex > div:first-child img {
    margin: 24px 0 24px 0;
  }

  header form {
    flex-direction: column;
    display: inline-block;
    width: 100%;
  }
  header form input {
    flex: 1;
    width: 100%;
  }

  header form button {
    width: 100%;
    margin-left: 0;
    margin-top: 12px;
  }
  .mentorship-benefits .container .flex div:nth-child(2) {
    justify-content: center;
    }

  .mentorship-benefits .container .flex div:first-child {
    width: 85%;
    display: inline-block;
     margin: 0 auto;
  }

  .testimonial-cards {
    margin-bottom: 18%;
    }

  .testimonials {
    width: 100%;
  }

  .testimonial-name {
    display: block;
    text-align: center;
  }

  .sign-up {
    padding: 32px 0;
    width: 100%;
  }

  .sign-up .container .flex div:nth-child(2) {
  width: 100%;
  padding: 0 20px;
}

  .sign-up form button {
    width: 100%;
    margin-left: 0;
  }

  .sign-up form input {
    display: inline-block;
    width: 100%;
  }

  .sign-up p {
    text-align: center;
  }

  h1 {
    font-size: 40px;
    text-align: center;
  }

  h2 {
    font-size: 24px;
    text-align: center;
  }

  p {
    padding: 0;
    text-align: center;
  }

  .flex {
    flex-direction: column;
  }

  li {
    text-align: left;
  }

/* Mobile and below */
@media screen and (max-width: 685px) {
  header {
    background-position-x: 0;
    background-position-y: 0;
  }
  h1 {
    font-size: 32px;
  }

  p {
  text-align: left;
  }

  .container {
  padding:32px
  
  }

header form {
  width: 100%;
}

.sign-up p {
  text-align:left;
}