/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;700&family=Handjet:wght@300&family=Lugrasimo&display=swap');
/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 4.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(248.15deg 32.02% 49.61%);
  --title-color: hsl(248.15deg 59% 24%);
  --text-color: hsl(273, 100%, 6%);
  --white-color: #fff;
  --black-color: hsl(0deg 0% 7.84%);
  --body-color: hsl(269.25, 100%, 81.25%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Chakra Petch', sans-serif;
  --title-font: 'Handjet', sans-serif;
  --subtitle-font: 'Lugrasimo', sans-serif;

  --biggest-font-size: 2.25rem;
  --big-font-size: 1.2rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;

  /*========== Font weight ==========*/
  --font-thin: 100;
  --font-semi-regular: 300;
  --font-regular: 400;
  --font-bold: 700;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  font-weight: var(--font-regular);
  color: var(--text-color);
}

section{
  margin-top: 1.5rem;
} 

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 3800px;
  margin-inline: 1.5rem;
}

.main {
  overflow: hidden; /* For animation */
}

.grid{
  display: grid;
  justify-content: center;
}

.section__titles{
  grid-template-columns: 300px;
  justify-content: center;
  row-gap: 1rem;
  text-align: center;
}

.section__title{
  font-family: var(--title-font);
  font-size: var(--biggest-font-size);
  font-weight: var(--font-bold);
}

.section__subtitle{
  font-family: var(--body-font);
  font-size: var(--big-font-size);
  font-weight: var(--font-bold);
}

.button{
  display: inline-flex;
  justify-self: center;
  justify-content: center;
  align-items: center;
  column-gap: .5rem;
  width: 65%;
  color: var(--first-color);
  background-color: var(--white-color);
  padding: 0.1rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: var(--font-bold);
  transition: background-color .3s;
}

.button i{
  font-size: 1rem;
  transition: transform .3s;
}

.black{
  color: var(--white-color);
}

.black h2{
  color: var(--first-color);
  padding-top: 3rem;
}

/*=============== SELECT ==================*/
::selection { 
    background: var(--white-color);
    color: var(--first-color);
}

/*=============== SCROLL ===============*/
::-webkit-scrollbar{
  width: .6rem;
  border-radius: .5rem;
  background-color: var(--black-color);
}

::-webkit-scrollbar-thumb{
 background-color: var(--white-color);
 border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover{
  background-color: var(--first-color);
}

/*=============== HEADER & NAV ===============*/
.header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  transition: background .3s, box-shadow .3s;
  user-select: none;
  background: var(--black-color);
}

.nav{
  display: flex;
  height: var(--header-height);
  font-family: var(--body-font);
  font-size: 1.5rem;
  font-weight: var(--font-bold);
  align-items: center;
  justify-content: center;
}

.nav__logo{
  display: flex;
  align-items: center;
  color: var(--first-color);
  column-gap: .5rem;
}

.nav__logo img{
   width: 2.25rem;
   border-radius: 15rem;
}


/* Change background header */
.bg-header{
  box-shadow: 0 4px 8px hsla(248.15, 32.02%,49.61%, .4);
}

/*=============== HOME ===============*/
.home{
  position: absolute;
  top: 0;
  right: 0;
  height: 90vh;
  width: 100%;
  background-color: var(--black-color);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}

.home__content{
  margin-top: 4rem;
  row-gap: 4rem;
}

.home__data{
  display: relative;
  color: var(--white-color);
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--first-color);
  margin: 0 auto;
  width: 80%;
}


.home__animated-text{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: var(--title-font);
  font-size: var(--big-font-size);
  font-weight: var(--font-regular);
}

.home__animated-text b{
  letter-spacing: 6px;
}

.home__animated-text span{
  position: relative;
}

.home__animated-text span::before{
  content: 'MODERNIZARTE';
  color: var(--first-color);
  animation: words 20s infinite;
}

.home__animated-text span::after{
  content: '';
  background-color: var(--black-color);
  position: absolute;
  width: calc(100% + 8px);
  height: 2rem;
  border-left: 2px solid var(--first-color);
  right: -8px;
  animation: cursor .6s infinite, typing 20s steps(24) infinite;
}

@keyframes cursor{
  to{
    border-left: 2px solid var(--first-color);
  }
}

@keyframes words{
  0%, 20%{
    content: 'MODERNIZARTE';
  }

  21%, 40%{
    
    content: 'MÁS SENCILLEZ';
  }

  41%, 60%{
    content: 'MÁS SEGURIDAD';
  }

  61%, 80%{
    content: 'GANAR MÁS CLIENTES'; 
  }

  81%, 100%{
    content: 'POTENCIAR TU NEGOCIO';
  }
}

@keyframes typing {
  10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95%{
    width: 0;
  }

  5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85%{
    width: calc(100% + 8px);
  }
}

/*=============== CHOOSE ===============*/
.choose{
  position: relative;
  margin-top: 42rem;
}

.choose__bg{
  position: absolute;
  top: -10rem;
  height: 900vh;
  width: 100%;
  background-color: var(--body-color);
  z-index: -1;
}

.choose__content{
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}

.choose__data{
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
  text-align: center;
}

.choose__description{
  font-family: var(--body-font);
  font-size: var(--big-font-size);
  font-weight: var(--font-bold);
}

.choose__description b{
  color: var(--first-color);
}

.choose__faq{
  font-size: var(--normal-font-size);
  color: var(--text-color);
  visibility: visible;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: grid;
  row-gap: 2rem;
}

.choose__faq-header{
  display: flex;
  align-items: center;
  column-gap: 0.75rem;
  cursor: pointer;
}

.choose__faq-icon{
  display: inline-flex;
  padding: 0.25rem;
  background: var(--black-color);
  border-radius: 0.5rem;
  color: var(--first-color);
  font-size: 1.25rem;
  box-shadow: 0 2px 8px hsla(0, 100%, 0%, .4);
  transition: box-shadow .4s;
}

.choose__faq-icon i{
  transition: transform .3s;
}

.choose__faq-content{
  overflow: hidden;
  height: 0;
  transition: height .3s ease;
}

.choose__faq-description{
  padding: 0.5rem 1rem 0 2.5rem;
  font-size: var(--normal-font-size);
}

/* Rotate icon */
.faq-open .choose__faq-icon i{
  transform: rotate(45deg);
}

/* Change color icon */
.faq-open .choose__faq-icon{
  background: var(--white-color);
  color: var(--first-color-alt);
  box-shadow: none;
}

/*=============== SERVICES ===============*/
.services{
  margin-top: 8rem;
  row-gap: 2rem;
}

.services__cards{
  display: grid;
  grid-template-columns: repeat(4 , minmax(186px, 1fr));
  grid-template-rows: repeat(2, 230px);
  gap: 10px;
  z-index: 9;
  margin-top: 20px;
  margin-inline: 1rem;
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
}

.services__card{
  display: grid;
  height: 30rem;
  flex-direction: column;
  background-color: var(--white-color);
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.services__img{
  margin-top: 30%;
}

.services__button{
  padding: 1.5rem;
  background-color: var(--white-color);
  border-radius: 1rem;
  transition: background .4s, color .4s;
}

.services__button:hover{
  background-color: var(--first-color);
  color: var(--white-color);
}

.services__img img{
  width: 50%;
  position: absolute;
  right: -2rem;
  bottom: -3rem;
}

.services__cards .services__card i{
  font-size: 2.5rem;
  color: var(--first-color);
  margin-bottom: 4rem;
}

.services__card h4{
  font-size: var(--big-font-size);
  margin-bottom: 10px;
}

.services__content{
  margin-top: 1rem;
  padding: 1rem;
}

.services__cards span b{
  color: var(--first-color);
}

.services__card .services__content p{
  font-size: var(--normal-font-size);
  margin-bottom: 20px;
  font-weight: var(--font-regular);
  margin-inline: 2rem;
}

.services__card:first-child{
  grid-column: 1 / 3;
  background: var(--black-color);
  color: var(--white-color);
}

.services__card:nth-child(2){
  grid-column: 3 / 4;
}

.services__card:nth-child(2) .services__content, .services__card:nth-child(3) .services__content{
  display: grid;
  justify-items: center;
  padding: 0;
}

.services__card:nth-child(2) .services__content img, .services__card:nth-child(3) .services__content img{
  position: relative;
  height: 200px;
}

.services__card:nth-child(2) .services__content h4{
  font-size: var(--normal-font-size);
}

.services__card:nth-child(2) .services__content i{
  position: absolute;
  right: 1rem;
  bottom: -2rem;
}

.services__card:nth-child(3){
  grid-columns: 4 / 5;
}

.services__card:nth-child(3) .services__content i{
  position: absolute;
  right: 1rem;
  top: 1rem;
}

/*=============== PRICE ===============*/
.price{
  min-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 4em;
}

.price__container{
  margin: 4em 1.5em;
  text-align: center;
  position: relative;
}

.price__header{
  width: 25em;
  height: 13em;
  background: linear-gradient(
  331deg, #321d58, #7344c8);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(
  0 0,
  100% 0,
  100% 80%,
  50% 100%,
  0 80%);
}

.shadow__container{
  filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.2));
}

.price__item{
  background: var(--black-color);
  width: 7em;
  height: 7em;
  position: absolute;
  top: -3.5em;
  left: 50%;
  border-radius: 10%;
  transform: translate(-50%);
  padding: 1.5em 1em 1em 1em;
  z-index: 1;
  box-shadow: 0 1em 1em rgba(0, 0, 0, 0.3);
}

.price__item h4{
  color: var(--white-color);
}

.price__item h6{
  margin-top: 1rem;
  color: #aaa;
}

.price__title{
  color: var(--white-color);
}

.price__title h3{
  margin: .3em;
  letter-spacing: 4px;
}

.price__title p{
  font-size: var(--small-font-size);
  margin-inline: 3rem;
}

.price__body{
  width: 22em;
  margin: -4em auto 0 auto;
  padding: 4em 1em 1em 1em;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 4em rgba(0, 0, 0, .4);
}

.price__title-body h4{
  margin: 1em 0 .2em 0;
  color: #222;
}

.price__body ul{
  list-style: none;
  margin: 2em 1rem;
}

.price__body li{
  display: flex;
  column-gap: .5rem;
  padding: .5em 0;
  color: #555;
  text-align: left;
  align-items: center;
}

.price__body li i{
  color: #00ff44;
}

.price__button{
  width: 60%;
  background: linear-gradient(331deg, #321d58, #7344c8);
  color: var(--white-color);
  border-radius: 3rem;
  padding: 2rem 2rem;
  font-weight: var(--font-bold);
  bottom: -1.5em;
  transition: color .4s, box-shadow .4s;
  cursor: pointer;
}

.price__button:hover{
  box-shadow: 0 0 1em var(--first-color);
}

.price__container:nth-child(1) .price__header,
.price__container:nth-child(1) .price__button{
  background: linear-gradient(331deg, #b71a50, #ff4c7d);
}

.price__container:nth-child(1) .price__item h4{
  color: #ff3c7d;
}


/*=============== DISCOVER ===============*/
.discover{
  margin-top: 8rem;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.discover__titles{
  grid-template-columns: 300px;
  justify-content: center;
  row-gap: 1rem;
  text-align: center;
}

.discover__titles span{
  font-size: var(--big-font-size);
}

.discover__img{
  display: none;
}

.discover__card{
  position: relative;
  width: 600px;
  height: 350px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  transition: all;
}

.discover__card-circle{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.discover__card-circle::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--black-color);
  clip-path: circle(120px at center);
  transition: clip-path .5s, background .5s;
}

.discover__card:hover .discover__card-circle::before{
  background: var(--title-color);
  clip-path: circle(400px at center);
}

.discover__card img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 300px;
  pointer-events: none;
  transition: all .5s;
}

.discover__card:hover img{
  left: 72%;
  height: 400px;
}

.discover__content{
  position: relative;
  width: 50%;
  padding: 20px 20px 20px 40px;
  opacity: 0;
  left: 20%;
  visibility: hidden;
  transition: opacity .5s, left .5s;
  color: var(--white-color);
}

.discover__content h2{
  margin-bottom: 1rem;
}

.discover__card:hover .discover__content{
  left: 0;
  opacity: 1;
  visibility: visible;
}


.discover__content a{
  display: flex;
  position: relative;
  color: var(--first-color);
  background-color: var(--white-color);
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 15px;
  display: inline-block;
  text-decoration: none;
  font-weight: var(--font-bold);
  transition: background-color .3s;
}

.discover__content a:hover{
  background-color: var(--black-color);
}

/* For mobiles */
@media (max-width: 766px){
  .discover__card{
    margin-top: 2rem;
    width: auto;
    max-width: 350px;
    align-items: flex-end;
  }

  .discover__card:hover{
    height: 600px;
  }

  .discover__content{
    width: 100%;
    padding: 30px;
  }

  .discover__card:hover img{
    top: 30%;
    left: 50%;
    height: 320%;
  }

  .price__header{
    margin: 0 auto;
    width: 18em;
  }
}

/*===============  COMPLETED  ===============*/
.completed{
  margin-top: 8rem;
  row-gap: 2rem;
}

.completed__container{
  justify-items: center;
  text-align: center;
  row-gap: 2rem;
}

.completed__container img{
  width: 60%;
  border-radius: .75rem;
  box-shadow: 0 10px 8px rgba(0, 0, 0, .4);
  transition: transform .3s;
}

.completed__container:hover img{
  transform: translateY(-.5rem);
}


.completed__content{
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
  margin-bottom: 3rem;
}

.completed__button{
  width: 100%;
  padding: 1rem;
}

.completed__button:hover{
  background-color: var(--first-color);
  color: var(--white-color);
}

.completed__button:hover i{
  transform: translateX(.25rem);
}

.completed__bg{
  width: 100%;
  background-color: var(--black-color);
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
  box-shadow: 0px -20px 31px 2px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px -20px 31px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px -20px 31px 2px rgba(0,0,0,0.75);
  transition: transform .3s;
}

/*=============== TESTIMONY ===============*/
.testimony{
  margin-top: 8rem;
}

.testimony__container .black{
  row-gap: 2rem;
}

.testimony__content{
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--first-color);
}

.testimony__content b{
  color: var(--first-color);
}

/*=============== TEMPLATES ===============*/
.templates{
  margin-top: 8rem; 
}

.templates__container{
  align-items: center;
  justify-content: center;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--first-color);
}

.templates__content{
  position: relative;
  width: 350px;
  height: 400px;
  margin-top: 4rem;
  background-color: var(--first-color);
  border-radius: 2rem;
  transition: background-color .3s, color .3s, transform .3s;
  border: 10px double var(--title-color);
}

.templates__content:hover{
  color: var(--first-color);
  transform: translateY(-.5rem);
}

.templates__content:hover .templates__button{
  background-color: var(--first-color);
  color: var(--black-color);
}

.templates__content .face{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  transition: .5s;
  border-radius: 1.5rem;
  cursor: pointer;
}

.templates__front{
  transform: perspective(600px) rotateY(0deg);
  box-shadow: 0 5px 10px #000;
}

.templates__front h3{
  font-size: 1.5rem;
}

.templates__front img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.templates__front h3{
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: 45px;
  line-height: 45px;
  color: var(--first-color);
  letter-spacing: 2px;
  background: rgba(0, 0, 0, .9);
}

.templates__back{
  transform: perspective(600px) rotateY(180deg);
  background: rgba(0, 0, 0, .90);
  padding: 15px;
  color: var(--first-color);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  box-shadow: 0 5px 10px #000;
}

.templates__back h3{
  letter-spacing: 3px;
}

.templates__back p{
  font-weight: var(--font-regular);
  font-size: var(--normal-font-size);
  letter-spacing: 2px;
}

.templates__link{
  border-top: solid 1px var(--first-color);
  height: 50px;
  line-height: 50px;
  padding-top: 1rem;
}


.templates__link a:hover{
  background-color: var(--first-color);
  color: var(--white-color);
}

.templates__link a i{
  font-size: 1rem;
  transition: transform .3s;
}

.templates__link a:hover i{
  transform: translateX(.25rem);
}

/* Templates class */
.change-template-front{
  transform: perspective(600px) rotateY(180deg)
}

.change-template-back{
  transform: perspective(600px) rotateY(0deg)
}

/*=============== CONTACT ===============*/
.contact__container{
  row-gap: 3.5rem;
  grid-template-columns: 1fr;
}

.contact__container .black h2 span{
  color: var(--white-color);
}

.contact__form{
  position: relative;
  row-gap: 2rem;
  grid-template-columns: 1fr;
  justify-items: center;
}

.contact__form div{
  position: relative;
  width: 80%;
}

.contact__form-tag{
  position: absolute;
  top: -.75rem;
  left: 1.5rem;
  z-index: 10;
  background-color: var(--black-color);
  font-size: var(--normal-font-size);
  font-weight: var(--font-bold);
  padding: .35rem;
  transition: background .4s;
  color: var(--white-color);
  letter-spacing: 3px;
}

.contact__form-input{
  position: relative;
  left: 0;
  top: 0; 
  width: 100%;
  height: 100%;
  border: 2px solid var(--white-color);
  border-radius: 2rem;
  padding: 1.5rem;
  font-size: var(--normal-font-size);
  font-family: var(--body-font);
  color: var(--white-color);
  background: none;
  outline: none;
  z-index: 1;
  transition: border .3s;
}

.contact__form-input:focus{
  border: 2px solid var(--first-color);
}

.contact__form-area{
  height: 10rem;
}
.contact__form-area textarea{
  resize: none;
  height: 10rem;
}


.contact__message{
  position: absolute;
  color: var(--white-color);
  top: 23.25rem;
  left: 1rem;
}

.contact__button{
  cursor: pointer;
  padding: 1rem;
}

.contact__button:hover{
  background-color: var(--first-color);
  color: var(--black-color);
}

/* Status Color */
.color-red{
  color: indianred;
}

.color-green{
  color: lightgreen;
}

/*=============== QUESTION ===============*/
.questions__container{
  width: 80%;
  padding: 2rem 2rem;
  margin: 0 auto;
  row-gap: 3rem;
}

.questions__container .black span{
  color: var(--white-color);
}

.questions__content{
  display: grid;
  row-gap: 2rem;
}

.questions__item{
  background-color: var(--white-color);
  padding: 2rem 0;
  overflow: hidden;
  border-radius: .8rem;
  width: 80%;
  margin: 0 auto;
}

.questions__item-link{
  display: flex;
  color: var(--black-color);
  font-weight: var(--font-bold);
  font-size: var(--normal-font-size); 
  justify-content: space-between;
  margin-inline: 1rem;
  align-items: center;
  cursor: pointer;
  column-gap: .5rem;
}

.questions__item-link i{
  font-size: 1.25rem;
  color: var(--first-color);
  transition: color .3s;
}

.subquestions{
  height: 0;
  transition: height .3s;
}

.subquestions__description{
  padding: 2rem .5rem;
  margin-top: 0 auto;
  margin-inline: 1rem;
  text-align: center;
  font-size: var(--normal-font-size);
  font-weight: var(--font-thin);
}

/* Plus */
.plus i{
  color: var(--black-color);
}


/* Show subquestion */
.show-questions{
  display: initial
}

/*=============== FOOTER ===============*/
.footer{
  user-select: none;
  background-color: var(--black-color);
  padding: 4rem;
  border-top: 6px solid var(--black-color);
}

.footer__container{
  text-align: center;
  row-gap: 2rem;
  color: var(--white-color);
}


.footer__container p{
  font-size: var(--small-font-size);
}

.footer__list{
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.footer__list li a, .footer__terms{
  color: var(--white-color);
  transition: color .3s;
}

.footer__list li a:hover, .footer__terms:hover{
  color: var(--first-color);
}

.footer__social-link{
  color: var(--white-color);
}

.footer__social-link:hover i{
  color: var(--first-color);
}

.footer__social-link i{
  font-size: var(--big-font-size);
  transition: color .3s;
}

.footer__copy span{
  color: var(--first-color);
  font-weight: var(--font-bold);
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 390px){

  .home{
    height: 40rem;
  }

  .home__animated-text h1{
    font-size: 1.5rem;
  }

  .price{
    padding: 2rem;
  }

  .pc{
    display: none;
  }

  .mobile{
    display: inline;
  }

  .section__titles{
    grid-template-columns: 250px;
  }

  .templates{
    margin-top: 1rem;
  }

  .templates__content{
    width: 250px;
  }

  .templates__link a{
    padding: 0;
  }

  .contact__button{
    width: 70%;
  }

  .footer__copy{
    font-size: var(--small-font-size);
  }
}

/* For medium devices */
@media screen and (min-width: 768px){

  .completed{
    margin-top: 2rem;
  }

  .discover{
    grid-template-columns: 1fr 300px;
    margin-top: 2rem;
  }
  .home{
    height: 30rem;
  }

  .home__content{
    grid-template-columns: 500px 1fr;
    margin-top: 8rem;
    align-items: center;
  }

  .choose{
    margin-top: 35rem;
  }

  .choose__bg{
    margin-top: -90rem;
  }

  .choose__faq{
    margin-left: 10%;
  }

  .services__card{
    zoom: .8;
  }

  .discover{
    grid-template-columns: 200px 450px;
    margin-top: 2rem;
    column-gap: 2rem;
  }

  .discover .section__titles{
    justify-items: center;
  }

  .discover__img{
    display: inline;
    width: 200px;
  }

  .discover__card-circle{
    top: -2rem;
    width: 110%;
    height: 26rem;
  }

  .discover__content{
    zoom: .8;
  }

  .mobile{
    display: none;
  }

  .pc{
    display: inline;
  }

  .completed__container h3{
    font-size: var(--biggest-font-size);
  }

  .testimony__container .black{
    grid-template-columns: 700px;
  }
  .templates{
    margin-top: 1rem;
  }

  .templates .black{
    grid-template-columns: 700px;
  }

  .templates__container{
    grid-template-columns: 250px 250px;
    column-gap: 2rem;
  }

  .templates__content{
    width: 100%;
  }

  .contact__button{
    width: 50%;
    font-size: var(--big-font-size);
    align-items: flex-end;
  }

  .contact__button i{
    font-size: 1.5rem;
  }

  .completed{
    margin-top: 0;
  }

  .footer__container{
    grid-template-columns: 1fr;
    row-gap: 3rem;
  }

  .footer__list{
    grid-template-columns: repeat(6, 1fr);
  }

}

@media screen and (min-width: 960px){
  .home{
    height: 30rem;
  }

  .services__cards{
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
  }

  .services__card:nth-child(1){
    grid-row: 1;
    grid-column: 1 / 5;
    height: 20rem;
  }

  .services__card:nth-child(2){
    grid-row: 2;
    grid-column: 1 / 3;
    position: relative;
    top: -10rem;
  }

  .services__card:nth-child(3){
    grid-row: 2;
    grid-column: 3 / 5;
    posotion: relative;
    top: -10rem;
  }

  .services__card:nth-child(3) .services__content h4{
    margin-top: 5rem;
  }

  .services__card:nth-child(2) .services__content h4{
    margin-top: -4rem;
  }

  .services__card:nth-child(2) .services__content p{
    margin-top: -6rem;
    text-align: left;
  }

}

/* For large devices */
/*========== Responsive typography ==========*/
@media screen and (min-width: 1018px) {
  :root {
    --biggest-font-size: 2.5rem;
    --big-font-size: 1.4rem;
    --normal-font-size: 1.2em;
    --small-font-size: 1rem;
  }
}

@media screen and (min-width: 1018px){
  .home{
    height: 45rem;
  }

  .home__animated-text{
    font-size: var(--big-font-size);
  }
  
  .home__content{
    grid-template-columns: 550px 1fr;
  }

  .choose{
    margin-top: 50rem;
  }

  .choose__faq-title{
    font-size: var(--big-font-size);
  }

  .choose__faq-description {
    font-size: 1.3rem;
  }

  .price{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    column-gap: 2rem;

  }

  .price__container{
    margin: 0;
    scale: .75;
  }

  .discover{
    min-height: initial;
  }

  .completed{
    margin-top: 4rem;
  }

  .completed .section__titles{
    grid-template-columns: 600px;
  }

  .completed__container{
    scale: .8;
  }

}

/* For 2K resolutions (2048 x 1152, 2048 x 1536) */
@media screen and (min-width: 2048px){
  .home{
    height: 70vh;
  }

  body{
    zoom: 1.7;
  }
}

/* For 4K resolutions (3840 x 2160, 4096 x 2160) */
@media screen and (min-width: 3840px){
  .home{
    height: 35vh;
  }

  body{
    zoom: 3.1;
  }

  .discover{
    min-height: 40vh;
  }

}


/*==================================================================================================*/

/* ============================ TERMS ============================ */
.main__terms{
  background-color: var(--black-color);
  padding: .5rem 0;
}

.terms{
  background-color: var(--black-color);
}

.terms .section__titles{
  margin-top: 10rem;
  background-color: var(--black-color);
}

.terms .section__titles span{
  color: var(--white-color);
}

.terms__container{
  color: var(--white-color);
}

.terms__list{
  margin-top: 5rem;
  text-align: left;
  row-gap: 2rem;
  margin-left: 3rem;
  margin-inline: 2rem;
}