@import url(/css/normalize.css);

:root {
  --color-primary: #2584ff;
  --color-secondary: #00d9ff;
  --color-accent: #ff3400;
  --color-headings: #1b0760;
  --color-body: #918ca4;
  --border-color: #ccc;
  --color-body-darker: #5c5577;
  --border-radius: 30px;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}
/*Typography section*/
html {
  font-size: 62.5%;
}
body {
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 2.4rem;
  color: var(--color-body);
  line-height: 1.5;
}

h1,
h2,
h3 {
  color: var(--color-headings);
  margin-bottom: 1rem;
  line-height: 1.15;
}

h1 {
  font-size: 7rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3rem;
}
p {
  margin-top: 0;
}

@media screen and (min-width: 1024px) {
  body {
    font-size: 1.8rem;
  }

  h1 {
    font-size: 8rem;
  }
  h2 {
    font-size: 4rem;
  }
  h3 {
    font-size: 2.4rem;
  }
}

/*Link Section*/
a {
  text-decoration: none;
}

.link-arrow {
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-accent);
  text-transform: uppercase;
}
.link-arrow::after {
  content: "-->";
  margin-left: 5px;
  transition: margin 0.2s;
}

.link-arrow:hover::after {
  margin-left: 10px;
}

@media screen and (min-width: 1024px) {
  .link-arrow {
    font-size: 1.8rem;
  }
}

/*Badges Section*/

.badges {
  border-radius: 20px;
  padding: 0.5rem 1rem;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  white-space: nowrap;
}

.badges--primary {
  background-color: #222;
}
.badges--secondary {
  background-color: var(--color-secondary);
}
.badges--small {
  font-size: 1.5rem;
}

.card--secondary .badges--secondary {
  background-color: #02cdf1;
  padding: 0.5rem 1rem;
  font-weight: 600;
}

@media screen and (min-width: 1024px) {
  .badges {
    font-size: 1.5rem;
  }

  .badges--small {
    font-size: 1.2rem;
  }
}

/* 1/2 Lists Section */
.list {
  list-style: none;
  color: var(--color-headings);
  font-size: 2rem;
}

.list--inline .list__item {
  display: inline-block;
  margin-right: 2rem;
}

.list--tick {
  list-style-image: url(/icons/tick.svg);
}

.list--tick .list__item {
  padding-left: 1rem;
}

.card .list__item {
  margin-bottom: 2.5rem;
  font-size: 2.5rem;
}

/* 2/2 List Section - for collapsible sections*/

.collapsible__list {
  padding-left: 0;
}

.collapsible__list-item {
  color: var(--color-body);
}

.collapsible__list-item:hover {
  color: #fff;
}

/* Icon Sections*/

.icon {
  width: 40px;
  height: 40px;
}

.icon--primary {
  fill: var(--color-primary);
}

.icon--white {
  fill: #fff;
  background: #000;
  padding: 0.2rem;
  border-radius: 100%;
}
.icon--nav {
  fill: #fff;
  opacity: 0.5;
  cursor: pointer;
  transition: border-shadow 0.15s;
}
.icon--accent {
  fill: #fff;
}

.icon--search {
  width: 2rem;
  height: 2rem;
}

.icon--input {
  fill: #000;
}

.icon-bg {
  width: 64px;
  height: 64px;
  border-radius: 100%;
  background-color: #e2f1ff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.icon-testimonial {
  background: var(--color-accent);
}

/*Button Sections*/

.btn {
  border: 0;
  padding: 1rem 3rem;
  border-radius: 25px;
  white-space: nowrap;
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  font-size: 2rem;
  font-weight: 500;
}

.btn--primary {
  background-color: #fff;
  border: 3px solid var(--color-headings);
  color: var(--color-headings);
}

.btn--primary:hover {
  background-color: var(--color-headings);
  color: #fff;
}

.btn--secondary {
  background-color: #fff;
  color: var(--color-secondary);
  border: 3px solid var(--color-secondary);
}

.btn--secondary:hover {
  background-color: var(--color-secondary);
  color: #fff;
}
.btn--accent {
  background-color: #fff;
  color: var(--color-accent);
  border: 3px solid var(--color-accent);
}

.btn--accent:hover {
  background-color: var(--color-accent);
  color: #fff;
}

.btn--block {
  width: 100%;
  display: inline-block;
  background-color: #fff;
  border: 2px solid var(--color-headings);
}
.btn--block:hover {
  color: #fff;
  background: var(--color-headings);
}

@media screen and (min-width: 1024px) {
  .btn {
    border-radius: var(--border-radius);
    font-size: 1.8rem;
  }
}

/*Input Sections */

.input {
  border-radius: var(--border-radius);
  outline: 0;
  border: 1px solid var(--border-color);
  padding: 1.5rem 3rem;
}

::placeholder {
  color: #cddbd7;
  font-size: 2rem;
}

@media screen and (min-width: 1024px) {
  ::placeholder {
    font-size: 1.5rem;
  }
}

/* Input-group*/

.input-group {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  display: flex;
  flex-flow: wrap;
}

.input-group .input {
  border: 0;
  flex-grow: 1;
  width: 0;
}

.input-group .btn {
  margin: 4px;
}

/*Cards Section*/

.card {
  width: 100vw;
  border-radius: 7px;
  box-shadow: 0 0 20px 10px #f3f3f3;
  overflow: hidden;
  position: relative;
}

.card__header,
.card__body {
  padding: 2.5rem 3rem;
}

.card--secondary {
  background-color: var(--color-secondary);
  color: #fff;
  font-weight: 600;
}

.card--primary {
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.plan__heading {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 600;
}

.plan__pricing {
  font-size: 8rem;
  font-weight: 500;
}
.plan__billing {
  opacity: 0.8;
  font-size: 2.5rem;
  font-weight: 300;
  margin-right: 5rem;
}

.plan__description {
  word-spacing: 0.1rem;
  font-size: 2rem;
  font-weight: 400;
}

.card__popular {
  width: 40px;
  height: auto;
  position: absolute;
  right: 10%;
  top: -6px;
}

.card .list {
  margin-bottom: 5rem;
}

.card--entry .list {
  margin-bottom: 11.25rem;
}

/* Media Section*/

.media {
  display: flex;
  column-gap: 1.5rem;
}
.media__body h3 {
  margin: 0;
}

.media__img {
  margin-top: 2rem;
}
@media screen and (min-width: 1024px) {
  .card {
    width: 33vw;
  }

  .testimonial {
    width: 100%;
  }
}

/*quote section*/

.quote__text {
  color: var(--color-body-darker);
  font-style: italic;
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1.3;
  padding-top: 3rem;
}

.quote__text::before {
  content: open-quote;
}

.quote__text::after {
  content: close-quote;
}

.quote__company {
  font-size: 1.3rem;
  opacity: 0.6;
}

@media screen and (min-width: 768px) {
  .quote__text {
    padding-left: 4rem;
  }
}

/* Grid Section & Testomonial Implementation*/

.grid {
  display: grid;
}

.testimonial {
  padding: 5rem;
}

.testimonial__image > img {
  width: 100%;
  border-radius: 0.25rem;
}

.testimonial__image {
  position: relative;
}

.testimonial__icon {
  position: absolute;
  right: -32px;
  top: 32px;
}

.media__testimonial {
  margin-top: 0.05rem;
}

@media screen and (min-width: 768px) {
  .grid--1x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .grid--1x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

/*Callouts Section*/

.callouts {
  border-radius: var(--border-radius);
  padding: 2.5rem;
  width: 80vw;
  position: absolute;
  top: -10rem;
  left: 10vw;
}

.callouts--primary {
  background: var(--color-primary);
  color: white;
}

.callouts__content {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2.5rem;
}
.callouts__text {
  margin: 0;
}

.callouts__content .callouts__heading {
  color: #fff;
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  .callouts .grid-1x2 {
    grid-template-columns: 1fr 1fr;
  }

  .callouts .btn {
    padding: 2rem 6rem;
    justify-self: center;
    align-self: center;
  }

  .callouts__content {
    text-align: left;
  }
}

@media screen and (min-width: 1140px) {
  .callouts {
    width: 60vw;
    left: 20vw;
  }
}

/*Collapsible Section*/

.collapsible {
  border-bottom: 1px solid #393939;
  padding-top: 5rem;
  padding-bottom: 2.5em;
}

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

.collapsible__heading {
  margin: 0;
  font-size: 3rem;
  text-transform: capitalize;
}

.collapsible__chevron {
  transform: rotate(-90deg);
  transition: transform 0.8s;
}

.collapsible__content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.8s;
}

.collapsible--expanded .collapsible__chevron {
  transform: rotate(0deg);
}

.collapsible--expanded .collapsible__content {
  max-height: 100vh;
  opacity: 1;
}

/*block sections*/
.block {
  --block-padding: 6rem;
  padding: var(--block-padding) 2rem;
}
.block__heading {
  margin-top: 0;
}

.block__content {
  font-size: 2.5rem;
}
.block__header {
  text-align: center;
}

.block--skewed {
  color: #7b858b;
  background-color: #000;
  padding-bottom: calc(var(--block-padding) + 4rem);
}
.block--skewed .block__heading {
  color: #fff;
}

.block--skewed-right {
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
}

.block--skewed-left {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
}
.container {
  max-width: 1140px;
  margin: 0 auto;
}

/*Navigation Section*/

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #000;
  padding: 2rem 2.5rem;
}

.nav img {
  width: 20rem;
  height: auto;
}
.nav__list {
  width: 100vw;
  padding-left: 0;
  margin: 0;
}

.nav a {
  color: #d2d0db;
  transition: 0.3s;
}

.nav a:hover {
  color: #fff;
}

.nav__item {
  margin-bottom: 2rem;
  border-bottom: 1px solid #222;
}

.icon--nav:hover,
.nav.collapsible--expanded .icon--nav {
  box-shadow: 0 0 0 3px #666;
  border-radius: 5px;
  fill: #fff;
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .nav {
    padding: 2rem 2rem;
  }
  .icon--nav {
    display: none;
  }

  .nav__list {
    width: auto;
    display: flex;
    max-height: 100%;
    opacity: 1;
  }

  .nav__item {
    margin-bottom: 0;
    border-bottom: 0;
    margin-left: 2.5rem;
  }
}

/* Hero Component (Banner Component)*/

.hero__image {
  width: 100%;
  align-self: center;
}

.hero__tagline {
  font-size: 2rem;
  color: #b9c3cf;
  letter-spacing: 1px;
  padding-bottom: 5rem;
}

.hero__content .block__content {
  padding-bottom: 3.5rem;
}

@media screen and (min-width: 768px) {
  .hero {
    padding-top: 0;
  }
  .hero__content {
    text-align: left;
    align-self: center;
  }
}

/*Domain Section*/

.domain .input-group {
  margin: 0 4rem;
  box-shadow: 0 0 30px 20px #e6ebee;
}

.btn .icon--search {
  vertical-align: middle;
  margin-right: 1rem;
}

.domain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 50px);
  margin: 5rem auto;
}

.domain-grid .list__item {
  justify-content: center;
  align-content: center;
}

@media screen and (min-width: 768px) {
  .domain-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .domain .input-group {
    margin: 0 35rem;
  }
}

/*Plans Section*/

@media screen and (min-width: 768px) {
  .plans {
    margin: 2rem auto;
  }
  .grid--1x3 {
    gap: 4rem;
  }
  .plans .card {
    width: 100%;
    transition: transform 0.5s ease-in;
  }
  .plans .card:hover {
    transform: scale(1.05);
  }
}

/*Feature Section*/
.feature__image {
  width: 100%;
}
.feature .block__header {
  margin-bottom: 5rem;
}
.feature {
  gap: 4rem;
}

@media screen and (min-width: 768px) {
  .feature {
    gap: 1rem 2.5rem;
    margin-bottom: 10rem;
  }

  .feature:nth-of-type(even) .feature__text {
    order: 2;
  }

  .feature:first-of-type {
    margin-top: 10rem;
  }
}

/*Media Component*/
.media-component header :first-of-type {
  margin-bottom: 8rem;
}

.media-component__image {
  width: 100%;
  padding-bottom: 5rem;
}

.media-component__image .media {
  padding-bottom: 5rem;
}

@media screen and (min-width: 768px) {
  .media-component .grid--1x2 {
    grid-template-columns: 50% 50%;
  }
  .media-component__image {
    width: auto;
    max-width: 700px;
  }
  .media-component__content .media {
    padding: 2.5rem;
  }
  .media-component__picture {
    justify-self: end;
  }
}

/* footer section*/

.grid--1x5 {
  padding-top: 15rem;
}

.footer__logo {
  width: 20rem;
  margin-top: 5rem;
}

.footer__text {
  color: var(--color-body);
  font-size: 1.2rem;
}

.callout-footer {
  margin-top: 20rem;
  position: relative;
}

@media screen and (min-width: 1140px) {
  .collapsible__chevron {
    display: none;
  }

  .collapsible {
    border: 0;
  }

  .collapsible__content {
    max-height: 100vh;
    opacity: 1;
  }

  .grid--1x5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    column-gap: 10rem;
    padding: 15rem 10rem;
  }

  .collapsible__list-item {
    font-size: 1.8rem;
  }

  .footer__image {
    grid-row: 1/1;
    width: 100%;
  }

  .footer__text {
    font-size: 1.8rem;
  }
}