@charset "UTF-8";
/* css reset || * işareti universal seçici : dom üzerinde yer alan bütün elemanları seçin demek*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  /* font-size: 100%; kullanımı da 16px'i ifade etmektedir. || 16*100/100 */
  font-size: 100%;
  /* 1rem = 16px */ }

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #504f4f; }

.t1 {
  font-family: 'Nunito';
  color: #17015d;
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.3; }
  .t1 span {
    display: block; }

.t2 {
  font-family: 'Nunito';
  color: #17015d;
  font-size: 2rem; }
  .t2--green {
    color: #3dbe71; }
  .t2--white {
    color: #fff;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.4); }

.t3 {
  font-family: 'Nunito';
  color: #17015d;
  font-size: 1.2rem; }

.t4 {
  font-size: 1.1rem; }

.s1 {
  font-size: .9rem;
  color: #909090; }

.u-float-right {
  float: right !important; }

.u-text-aling-right {
  text-align: right !important; }

.button {
  padding: 1.25rem 3rem;
  text-transform: uppercase;
  border-radius: 5rem;
  background-color: #3dbe71;
  color: #fff;
  border: none;
  font-size: .7rem;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative; }
  .button span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all .3s ease-in; }
    .button span:last-child {
      top: 100%;
      transform: translate(-50%, 0);
      opacity: 0; }
  .button:hover, .button:active {
    background-color: #3dbe71; }
    .button:hover span, .button:active span {
      opacity: 0; }
      .button:hover span:last-child, .button:active span:last-child {
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 1; }
  .button--middle {
    font-size: .9rem;
    padding: 1.5rem 8rem; }
  .button--big {
    font-size: .9rem;
    padding: 2rem 8rem; }
  .button--pink {
    background-color: #ee4266; }
    .button--pink:hover {
      background-color: rgba(238, 66, 102, 0.6); }
  .button--purple {
    background-color: rgba(84, 13, 110, 0.8); }
    .button--purple:hover {
      background-color: rgba(84, 13, 110, 0.6); }

.navigation {
  width: 75%;
  display: flex;
  justify-content: space-between; }
  .navigation__nav {
    flex: 0 0 80%;
    display: flex;
    align-items: center; }
  .navigation__list {
    list-style: none;
    flex: 0 0 80%;
    display: flex;
    justify-content: space-between; }
  .navigation__link {
    position: relative; }
    .navigation__link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;
      width: 0;
      height: 3px;
      background-color: #3dbe71;
      transition: all .2s ease-in; }
    .navigation__link:link, .navigation__link:visited {
      font-size: .8rem;
      color: rgba(0, 0, 0, 0.7);
      text-decoration: none;
      text-transform: uppercase;
      font-weight: 600; }
    .navigation__link:hover::after, .navigation__link:active::after {
      width: 100%; }

.sociable-nav__list {
  list-style: none;
  display: flex; }

.sociable-nav__link, .sociable-nav__link:link, .sociable-nav__link:visited {
  padding: .5rem; }

.sociable-nav__link:hover svg, .sociable-nav__link:active svg {
  fill: #17015d; }

.sociable-nav__icon {
  width: 1rem;
  height: 1rem;
  fill: #3dbe71; }

.counter {
  height: 14rem;
  width: 22%;
  border: 2px solid #fff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center; }
  .counter__icon {
    width: 3rem;
    height: 3rem;
    fill: #fff; }
  .counter__num {
    font-family: 'Nunito';
    font-size: 2.5rem;
    font-weight: 200;
    color: #fff;
    letter-spacing: -2px; }
  .counter__name {
    font-family: 'Nunito';
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px; }

.card {
  height: 80%;
  width: 30%;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2rem 2.5rem rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column; }
  .card__top {
    flex: 0 45%;
    background-image: linear-gradient(to right bottom, rgba(61, 190, 113, 0.9), rgba(163, 235, 177, 0.7));
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    border-radius: 4px 4px 0 0;
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; }
  .card__bottom {
    flex: 1;
    border-radius: 0 0 4px 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; }
  .card__img {
    width: 4rem;
    height: 4rem;
    fill: #fff; }
  .card__texts {
    color: #fff;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; }
  .card__title {
    font-size: 1.2rem;
    letter-spacing: 2px; }
  .card__price {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 2.7rem; }
    .card__price sup {
      font-size: .8rem; }
  .card__text {
    font-size: 1rem; }
  .card__list {
    list-style: none;
    width: 80%; }
  .card__item {
    color: #9e9e9e;
    padding-top: 1rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between; }
    .card__item span:last-child {
      font-weight: bold; }
    .card__item:last-child {
      border: none; }
  .card:nth-child(2) {
    transform: scale(1.1);
    position: relative; }
    .card:nth-child(2)::before {
      content: url("../imgs/badge.png");
      position: absolute;
      right: 10%;
      top: 33%;
      z-index: 1;
      transform: scale(1.3); }
    .card:nth-child(2)::after {
      content: "En \a popüler";
      white-space: pre;
      text-align: center;
      position: absolute;
      right: 11%;
      top: 35%;
      z-index: 2;
      color: #fff;
      font-weight: 300;
      font-size: .9rem;
      line-height: 1.25;
      letter-spacing: 1.5px; }
  .card--pink {
    background-image: linear-gradient(to right bottom, #ee4266, rgba(232, 136, 156, 0.6)); }
  .card--purple {
    background-image: linear-gradient(to right bottom, rgba(84, 13, 110, 0.8), rgba(83, 45, 97, 0.6)); }

.comment {
  height: 21rem;
  width: 20%;
  position: relative; }
  .comment__content {
    height: 100%;
    padding: 4rem 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    clip-path: polygon(0% 0%, 100% 10%, 100% 90%, 25% 100%, 0% 75%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative; }
    .comment__content::before {
      content: url(../imgs/left-quote.png);
      position: absolute;
      left: 3%;
      top: 3%;
      transform: scale(0.7);
      opacity: .4; }
  .comment__shadow {
    height: 100%;
    filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5)); }
  l
.comment__img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    box-shadow: -4px 3px 4px 3px rgba(0, 0, 0, 0.3);
    position: absolute;
    right: 5%;
    top: -7%;
    z-index: 1; }
  .comment__text {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #504f4f;
    text-align: justify; }
  .comment__author {
    font-family: 'Nunito',sans-serif;
    font-weight: 200;
    font-size: .8rem;
    letter-spacing: 1px;
    text-align: right; }
  .comment:nth-child(2), .comment:nth-child(4) {
    align-self: flex-end; }

/* HEADER */
.header {
  min-height: 8rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative; }
  .header__sociable-nav {
    position: absolute;
    right: 10%;
    top: 2%; }

.sec-info {
  height: 39rem;
  padding: 4rem 6rem 1rem 6rem;
  display: flex;
  justify-content: center;
  align-items: center; }
  .sec-info__container {
    display: flex;
    height: 100%; }
  .sec-info__left {
    flex: 0 0 50%;
    height: 65%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start; }
  .sec-info__right {
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center; }
  .sec-info__img {
    width: 90%;
    height: 90%; }

.sec-features {
  min-height: 50rem;
  padding: 4rem 6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; }
  .sec-features__top {
    width: 70%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; }
  .sec-features__bottom {
    min-height: 32rem;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
  .sec-features__feature {
    height: 13rem;
    width: 27%;
    text-align: justify;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; }
  .sec-features__icon {
    width: 2.5rem;
    height: 2.5rem;
    fill: #3dbe71; }

.sec-workflow {
  height: 68rem;
  padding: 4rem 0 2rem 0;
  background-color: #e3f5eb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; }
  .sec-workflow__top {
    height: 6rem;
    width: 70%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; }
  .sec-workflow__bottom {
    flex: 0 85%;
    display: flex; }
  .sec-workflow__left {
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end; }
  .sec-workflow__line-box {
    flex: 1;
    display: flex;
    justify-content: center; }
  .sec-workflow__line {
    width: 4px;
    background-color: #e3a396;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; }
  .sec-workflow__circle {
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background-color: #e3a396; }
  .sec-workflow__right {
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
  .sec-workflow__box {
    height: 10rem;
    width: 80%; }
  .sec-workflow__icon {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    border: 4px solid #e3a396;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    shape-outside: circle(50%);
    float: left;
    margin: 0 1rem; }
  .sec-workflow__heading {
    letter-spacing: 1px;
    margin-bottom: .5rem; }

.sec-counter {
  height: 40rem;
  padding: 3rem 6rem;
  background-image: linear-gradient(to bottom, rgba(227, 163, 150, 0.5), rgba(227, 163, 150, 0.6)), url("../imgs/counter-bg-2000.jpg");
  background-size: cover;
  display: flex;
  justify-content: center; }
  .sec-counter__container {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; }
  .sec-counter__top {
    width: 85%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; }
  .sec-counter__bottom {
    width: 100%;
    display: flex;
    justify-content: space-between; }

.sec-card {
  height: 55rem;
  padding: 4rem 5rem 2rem 5rem;
  background-color: #edeeee;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; }
  .sec-card__cards {
    flex: 0 90%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center; }

.sec-idea {
  height: 35rem;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.5)), url(../imgs/sec-idea-bg-2000.jpg);
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .sec-idea__text {
    font-family: 'Munito',sans-serif;
    font-weight: 200;
    font-size: 3.5rem;
    color: #fff;
    letter-spacing: 2px; }

.sec-comment {
  height: 40rem;
  padding: 4rem 3rem;
  background-color: rgba(180, 187, 189, 0.7);
  display: flex;
  flex-direction: column; }
  .sec-comment__top {
    flex: 0 20%;
    display: flex;
    justify-content: center; }
  .sec-comment__bottom {
    flex: 0 80%;
    display: flex;
    justify-content: space-around; }