:root {  
    --chinese-violet_30: hsla(304, 14%, 46%, 0.3);
    --chinese-violet: hsl(304, 14%, 46%);
    --sonic-silver: hsl(208, 7%, 46%);
    --old-rose_30: hsla(357, 37%, 62%, 0.3);
    --ghost-white: hsl(233, 33%, 95%);
    --light-pink: hsl(357, 93%, 84%);
    --light-gray: hsl(0, 0%, 80%);
    --old-rose: hsl(357, 37%, 62%);
    --seashell: hsl(20, 43%, 93%);
    --charcoal: hsl(203, 30%, 26%);
    --white: hsl(0, 0%, 100%);
  /* typography */
    --ff-philosopher: 'Philosopher', sans-serif;
    --ff-poppins: 'Poppins', sans-serif;
    --fs-1: 4rem;
    --fs-2: 3.2rem;
    --fs-3: 2.7rem;
    --fs-4: 2.4rem;
    --fs-5: 2.2rem;
    --fs-6: 2rem;
    --fs-7: 1.8rem;
    --fw-500: 500;
    --fw-700: 700;
  /* spacing */
    --section-padding: 80px;
     /* shadow */
    --shadow-1: 4px 6px 10px hsla(231, 94%, 7%, 0.06);
    --shadow-2: 2px 0 15px 5px hsla(231, 94%, 7%, 0.06);
    --shadow-3: 3px 3px var(--chinese-violet);
    --shadow-4: 5px 5px var(--chinese-violet);
      /* radius */
    --radius-5: 5px;
    --radius-10: 10px;
     /* clip path */
    --polygon: polygon(100% 29%,100% 100%,19% 99%,0 56%);
     /* transition */
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
  }
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  li { list-style: none; }
  a,img,span,data,input,button,textarea,ion-icon { display: block; }
  a {
    color: inherit;
    text-decoration: none;
  }
  img { height: auto; }
  input,button,textarea {
    background: none;
    border: none;
    font: inherit;
  }
  input,textarea { width: 100%; }
  button { cursor: pointer; }
  address { font-style: normal; }
  ion-icon { pointer-events: none; }
  html {
    font-family: var(--ff-poppins);
    font-size: 10px;
    scroll-behavior: smooth;
  }
  body {
    background-color: var(--white);
    color: var(--sonic-silver);
    font-size: 1.6rem;
    line-height: 1.8;
  }
  :focus-visible { outline-offset: 4px; }
  ::selection {
    background-color: var(--old-rose);
    color: var(--white);
  }
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }
  ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
  ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
  .container { padding-inline: 15px; }
  .section { padding-block: var(--section-padding); }
  .section:nth-child(odd) { background-color: var(--seashell); }
  .section-subtitle {
    color: var(--old-rose);
    text-transform: uppercase;
    font-weight: var(--fw-700);
    letter-spacing: 4px;
    text-align: center;
  }
  .h1,.h2,.h3,.tab-text {
    color: var(--charcoal);
    font-family: var(--ff-philosopher);
    line-height: 1.2;
  }
  .h1 { font-size: var(--fs-2); }
  .h2 { font-size: var(--fs-3); }
  .h3 { font-size: var(--fs-5); }
  .section-text { font-size: var(--fs-7); }
  .w-100 { width: 100%; }
  .has-before,.has-after {
    position: relative;
    z-index: 1;
  }
  .has-before::before,
  .has-after::after {
    content: "";
    position: absolute;
  }
  .section-title { text-align: center; }
  .grid-list {
    display: grid;
    gap: 25px;}
  .btn-link {
    color: var(--old-rose);
    font-weight: var(--fw-500);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition-1);
  }
  .btn-link:is(:hover, :focus) { color: var(--chinese-violet); }
  .has-underline {
    position: relative;
    margin-block-end: 60px;
  }
  .has-underline .span {
    height: 2px;
    background-color: var(--old-rose_30);
    width: 200px;
    margin-inline: auto;
    margin-block-start: 30px;
  }
  .has-underline .has-before::before {
    width: 18px;
    height: 18px;
    top: 2px;
    left: 45%;
    transform: translateY(-50%) rotate(45deg);
    background-color: var(--old-rose_30);
    box-shadow: 7px -7px var(--old-rose_30);
  }
  .btn {
    padding: 12px 30px;
    transition: var(--transition-1);
  }
  .btn-primary {
    background-color: var(--old-rose);
    color: var(--white);
  }
  .btn-primary:is(:hover, :focus) { background-color: var(--chinese-violet); }
  .btn-secondary {
    border: 1px solid var(--old-rose);
    color: var(--old-rose);
  }
  .btn-secondary:is(:hover, :focus) {
    background-color: var(--old-rose);
    color: var(--white);
  }
  .img-holder {
    aspect-ratio: var(--width) / var(--height);
    background-color: var(--light-gray);
  }
  .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* #HEADER*/
  .header {
    background-color: var(--white);
    position: absolute;
    top: 10px;
    right: 10px;
    left: 10px;
    padding-block: 12px;
    z-index: 4;
    transition: var(--transition-2);
  }
  .header.active {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    filter: drop-shadow(var(--shadow-1));
    transform: translateY(-100%);
    transition: none;
    animation: slideIn 0.5s ease forwards;
  }
  .header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-family: var(--ff-philosopher);
    font-size: 4rem;
    color: var(--charcoal);
    line-height: 1;
  }
  .nav-toggle-btn {
    font-size: 40px;
    color: var(--charcoal);
  }
  .nav-toggle-btn ion-icon { --ionicon-stroke-width: 20px; }
  .nav-toggle-btn.active .open,
  .nav-toggle-btn .close { display: none; }
  .nav-toggle-btn .open,
  .nav-toggle-btn.active .close { display: block; }
  .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--white);
    padding-inline: 15px;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: 0.25s var(--cubic-out);
  }
  .navbar.active {
    max-height: 300px;
    visibility: visible;
    transition-duration: 0.5s;
  }
  .navbar-list { margin-block-end: 10px; }
  .navbar-link {
    color: var(--charcoal);
    padding-block: 8px;
    line-height: 1.5;
    transition: var(--transition-1);
  }
  .navbar-link:is(:hover, :focus) { color: var(--old-rose); }
/* #HERO */
  .hero {
    padding-block-start: calc(var(--section-padding) + 60px);
    text-align: center;
  }
  .hero .container {
    display: grid;
    gap: 60px;
  }
  .hero .hero-title { margin-block: 10px 25px; }
  .hero-banner {
    padding-inline-start: 30px;
    padding-block-end: 30px;
    max-width: 420px;
    margin-inline: auto;
  }
  .hero-banner .w-100 { border-radius: 10px 30px; }
  .hero-banner::before {
    top: 30px;
    right: 30px;
    bottom: 0;
    left: 0;
    background-color: var(--light-pink);
    border-radius: var(--radius-10);
    z-index: -1;
  }
    /* #BENEFITS */
  .benefits .section-text {
    text-align: center;
    margin-block: 8px 25px;
  }
  .benefits-card {
    padding: 25px;
    box-shadow: var(--shadow-2);
    border-radius: var(--radius-5);
    overflow: hidden;
    transition: var(--transition-2);
  }
  .benefits-card::before,
  .benefits-card::after {
    bottom: 0;
    right: 0;
    clip-path: var(--polygon);
    transition: var(--transition-2);
  }
  .benefits-card::before {
    width: 80px;
    height: 80px;
    background-color: var(--old-rose_30);
    transform: translateY(60px);
  }
  .benefits-card::after {
    width: 70px;
    height: 70px;
    background-color: var(--chinese-violet_30);
    transform: translateY(65px);
  }
  .benefits-card:is(:hover, :focus-within) { transform: translateY(-10px); }
  .benefits-card:is(:hover, :focus-within)::before,
  .benefits-card:is(:hover, :focus-within)::after { transform: translateY(0); }
  .benefits-card:is(:hover, :focus-within)::after { transition-delay: 0.1s; }
  .benefits-card .card-icon {
    background-color: var(--old-rose);
    max-width: max-content;
    padding: 10px;
    box-shadow: var(--shadow-3);
    transition: var(--transition-1);
  }
  .benefits-card:is(:hover, :focus) .card-icon { box-shadow: none; }
  .benefits-card .card-title { margin-block: 20px 15px; }
  .benefits-card .btn-link { margin-block-start: 15px; }
    /* #CHAPTERS */
  .chapter-card {
    height: 100%;
    background-color: var(--white);
    padding: 25px;
    border-radius: var(--radius-5);
    box-shadow: var(--shadow-2);
    transition: var(--transition-2);
  }
  .chapter-card:is(:hover, :focus-within) { transform: translateY(-10px); }
  .chapter-card .card-title { margin-block-end: 15px; }  
    /* #PRICING */
  .pricing-card {
    padding: 40px 50px;
    background-color: var(--white);
    text-align: center;
    transition: var(--transition-2);
  }
  .pricing-card:is(:hover, :focus-within),
  .pricing-card.bundle { box-shadow: var(--shadow-4); }
  .pricing-card:is(:hover, :focus-within) { transform: translateY(-10px); }
  .pricing-card .price {
    font-family: var(--ff-philosopher);
    font-size: var(--fs-1);
    color: var(--charcoal);
    font-weight: var(--fw-700);
    margin-block-start: 10px;
  }
  .pricing-card-list { margin-block: 20px 40px; }
  .pricing-card-list .card-item:not(:last-child) { border-block-end: 1px solid var(--ghost-white); }
  .pricing-card .card-text { padding-block: 10px; }
  .pricing-card .btn { margin-inline: auto; }
    /* #AUTHOR */
  .author { background-color: var(--seashell); }
  .author .container {
    display: grid;
    gap: 40px;
  }
  .author :is(.section-subtitle, .section-title) { text-align: left; }
  .author-content {
    background-color: var(--white);
    padding: 30px;
  }
  .author-name {
    font-size: var(--fs-6);
    margin-block-end: 30px;
  }
  .author .section-text { font-size: unset; }
/* ACHIEVEMENT */
  .section.achievement { background-color: var(--white); }
  .achievement-card {
    background-color: var(--seashell);
    box-shadow: var(--shadow-4);
    overflow: hidden;
    transition: var(--transition-2);
  }
  .achievement-card:is(:hover, :focus-within) { transform: translateY(-10px); }
  .achievement-card .card-content {
    position: relative;
    padding: 15px;
  }
  .achievement-card .abs-img {
    position: absolute;
    top: 0;
    right: -5px;
    opacity: 0.3;
  }
  /* CONTACT */
  .contact .wrapper {
    display: grid;
    gap: 25px;
  }
  .contact-form {
    background-color: var(--seashell);
    padding: 20px;
  }
  .input-field {
    background-color: var(--white);
    padding: 10px;
    margin-block-end: 15px;
    outline: none;
    border-block-end: 2px solid transparent;
  }
  .input-field:focus { border-color: var(--old-rose); }
  textarea.input-field {
    resize: vertical;
    min-height: 120px;
    height: 120px;
    max-height: 200px;
  }
  .contact-form .btn { margin-inline: auto; }
  .contact-card {
    background-color: var(--seashell);
    padding: 30px;
  }
  .contact-card .card-title {
    font-family: var(--ff-philosopher);
    text-transform: uppercase;
    font-weight: var(--fw-700);
  }
  .contact-card > li:not(:last-child) { margin-block-end: 30px; }
  .contact-card .card-link {
    color: var(--chinese-violet);
    transition: var(--transition-1);
  }
  .contact-card .card-link:is(:hover, :focus) { color: var(--old-rose); }
  .social-list-title {
    font-size: var(--fs-6);
    font-weight: var(--fw-700);
    margin-block-end: 15px;
  }
  .social-list {
    display: flex;
    gap: 10px;
  }
  .social-link {
    background-color: var(--old-rose);
    color: var(--white);
    font-size: 20px;
    padding: 5px;
    box-shadow: var(--shadow-3);
    transition: var(--transition-1);
  }
  .social-link:is(:hover, :focus) {
    background-color: var(--chinese-violet);
    box-shadow: none;
  }
  /* FOOTER */
  .footer {
    background-color: var(--seashell);
    text-align: center;
  }
  .footer-top {
    padding-block: 50px;
    border-block-end: 1px solid var(--chinese-violet_30);
  }
  .footer .logo { margin-block-end: 15px; }
  .footer-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 20px;
  }
  .footer-link {
    color: var(--charcoal);
    transition: var(--transition-1);
  }
  .footer-link:is(:hover, :focus) { color: var(--old-rose); }
  .footer-bottom { padding-block: 20px; }
  /* /* responsive for large than 575px screen */
  @media (min-width: 575px) {
  /* CUSTOM PROPERTY */
    :root {
   /* typography */
      --fs-2: 4.5rem;
      --fs-3: 3.5rem;
      --fs-5: 2.5rem;
    }
  /* REUSED STYLE */
    .container,
    .header,
    .navbar {
      max-width: 540px;
      width: 100%;
      margin-inline: auto;
    }
    .section-text { --fs-7: 2rem; }
  /* HEADER */
    .header { top: 30px; }
    .header.active { max-width: unset; }
    .navbar {
      left: 50%;
      transform: translateX(-50%);
    }
  /* ACHIEVEMENT */
    .achievement-card { display: flex; }
    .achievement-card > * { width: 50%; }
    .achievement-card .card-content { padding-block: 30px; }
    .achievement-card .card-title { margin-block-end: 20px; }
  /* CONTACT */
    .social-list-title { --fs-6: 2.2rem; }
    .social-link {
      font-size: 25px;
      padding: 8px;
    }
  }
     /* Responsive for large than 768px screen */
  @media (min-width: 768px) {
    /* CUSTOM PROPERTY */
      :root {
    /* typography */
        --fs-2: 4.8rem;
      }
    /* REUSED STYLE */
      .container,
      .header,
      .navbar { max-width: 720px; }
      .grid-list { grid-template-columns: 1fr 1fr; }
    /* HERO */
      .hero {
        padding-block-start: calc(var(--section-padding) + 100px);
        text-align: left;
      }
      .hero .container {
        grid-template-columns: 1fr 0.8fr;
        align-items: center;
      }
      .hero .section-subtitle { text-align: left; }
    /* BENEFITS */
      .benefits :is(.section-title, .section-text) { text-align: left; }
      .benefits-content { grid-column: 1 / 3; }

    /* CONTACT */
    }
  /* responsive for large than 992px screen */
  @media (min-width: 992px) {
  /* CUSTOM PROPERTY */
    :root {
  /* typography */
      --fs-2: 5.4rem;
      --fs-3: 4rem;
    }
  /* REUSED STYLE */
    .container,
    .header,
    .navbar { max-width: 960px; }
    .grid-list { grid-template-columns: repeat(3, 1fr); }
  /* HEADER */
    .header .container { padding-inline: 20px 30px; }
    .nav-toggle-btn { display: none; }
    .navbar,
    .navbar.active { all: unset; }
    .navbar-list {
      margin-block-end: 0;
      display: flex;
      gap: 30px;
    }
  /* BENEFITS */
    .benefits .grid-list {
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
    }
    .benefits-content { max-width: 80%; }
    /* CHAPTER, PRICING */
    :is(.chapters, .pricing) .grid-list li:last-child { all: unset; }
    /* AUTHOR */
    .author .container {
      grid-template-columns: 0.6fr 1fr;
      gap: 0;
    }
    .author-content {
      margin-block-start: 40px;
      margin-inline-start: -30px;
      padding-block-end: 70px;
    }
    /* ACHIEVEMENT */
    .achievement .grid-list { grid-template-columns: 1fr 1fr; }
    .achievement-card { flex-direction: row; }
    .achievement-card > * { width: 50%; }
  /* CONTACT */
    .contact-form { padding: 40px; }
  }  
  /* responsive for large than 1200px screen */
  @media (min-width: 1200px){
    /* CUSTOM PROPERTY */
    :root {
      /* typography */
      --fs-2: 6rem;
      --fs-3: 4.5rem;
      --fs-4: 3rem;
      --fs-5: 3rem;
    }
    /* REUSED STYLE */
    .container,
    .header,
    .navbar { max-width: 1140px; }
     /* AUTHOR */
     .author-content { padding: 85px 60px 115px; }
  }