:root {

    --clr-accent: rgb(255, 115, 93);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-size: 18px;
    font-family: 'Inter', sans-serif;
}

h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 1rem 0;
}

h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 4rem 0;
}

h3 {
    font-size: 2.5rem;
    margin-bottom: 2rem;

}

p {
    font-size: 18px;
    line-height: 28px;
}

.text-sm {
    font-size: 18px;
    line-height: 24px;
}

img {
    width: 100%;
}

.header {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    padding: 10px 0px;
}

.navigation {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.navigation-item {
      list-style-type: none;
}

button {
    border: none;
    background: var(--clr-accent);
    padding: 1rem 5rem;
    margin: 2rem 0;
    color: white;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    transition: all .3s ease-in;
    cursor: pointer;
}

.mobile-btn {
    display: none;
}

button:hover {
    background: #F63A1D;
}

main {
    max-width: 1200px;
    margin: 0 auto;
}

section {
    padding: 8rem 3rem 0 3rem;
}

i {
    font-size: 32px;
    color: var(--clr-accent);
}

.hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 3rem;
    margin: 4rem 0 0 0;

    background-color: #F5F5F5;
    border-radius: 20px;
}

.hero-card > * {
    flex: 1;
}

.badge {
    border-radius: 20px;
    background: white;
    max-width: 130px;
    padding: .5rem .2rem;
    margin: 1rem 0;
    font-size: 14px;
    font-weight: 600;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-card p {
    max-width: 40ch;
    font-weight: 500;
}

.split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.split > * {
    flex: 1;
    width: 50%;
}

.situation-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1rem;

    background: #F5F5F5;
    padding: 1.8rem 3rem;
    border-radius: 14px;
}


.profit-items {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.profit-items > * {
    flex-grow: 1;
    width: 28%;
}

.profit-item p{
    margin-top: 1.5rem;
}

.profit-item {
    background: #F5F5F5;
    border-radius: 14px;
    padding: 2rem;
    transition: all .2s ease-in;
}

.profit-item:hover {
    background-color: var(--clr-accent);
    color: white;
}


.accordion{
	transform: translateZ(0);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.accordion > .accordion-toggle{
	position: absolute;
	opacity: 0;
	display: none;
}

.accordion > label{
	position: relative;
	display: flex;

    font-weight: 600;
    font-size: 20px;
	padding: 20px 10px;
	border-top: 1px solid #ddd;
	background: #fff;
	cursor: pointer;
    color: var(--clr-accent);
}

.accordion > label:after {
  content: '\f078';
  position: absolute;
  right: 20px;
  font-family: fontawesome;
  transform: rotate(90deg);
  transition: .3s transform;
  color: var(--clr-accent);
}

.accordion > div{
	height: 0;
	transition: .3s all;
	overflow: hidden;
}

.accordion > .accordion-toggle:checked ~ label:after{
 transform: rotate(0deg);
}

.accordion > .accordion-toggle:checked ~ div{
  height: auto;
}

.accordion > div p {
  margin: 15px 0;
  padding: 0 20px;
}

.author img {
    border-radius: 20px;
}


.author-digit {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    margin-top: 3rem;
    color: var(--clr-accent);
}

.about-learning {
    background: #F5F5F5;
    padding: 3rem;
    margin: 0;
    margin-top: 9rem;
    border-radius: 20px;
}

.about-learning h2 {
    padding: 0;
    margin: 0;
    margin-bottom: 2rem;
}

.about-learning .split {
    align-items: center;
    justify-content: center;
}

.cta {
    border: 1px solid var(--clr-accent);
    border-radius: 20px;
    padding: 0;
    padding: 3rem;
    margin-top: 7rem;
    background:var(--clr-accent);
    color: white;
}

.cta p {
    width: 60%;
}

.cta h2 {
    margin-bottom: 2rem;
}

.price-left p {
    padding: 2rem;
    border-radius: 14px;
    border: 1px solid var(--clr-accent);
}

.price-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.price-right p {
    background: #F5F5F5;
    padding: 2rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.price-tag {
    font-size: 2rem;
    font-weight: 800;
    color: var(--clr-accent);
    letter-spacing: -1px;
}

footer {
    margin-top: 6rem;
    background: #F5F5F5;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-container a {
    text-decoration: none;
    color: var(--clr-accent);
}

.link {
    text-decoration: none;
    color: var(--clr-accent);
}

.link-black {
    text-decoration: underline;
    color: black;
}

@media (max-width: 1279px) {

    h1 {
        font-size: 1.6rem;
    }

    h2 {
        font-size: 1.7rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    section {
        padding: 6rem 1.5rem 0 1.5rem;
    }

    button {
        width: 100%;
    }

    .mobile-btn {
        display: block;
    }

    .desktop-btn {
        display: none;
    }

    .split {
        flex-direction: column;
    }

    .split > * {
        width: 100%;
    }

    .hero-card {
        margin-top: 0;
        flex-direction: column-reverse;
        padding: 1.5rem;
        border-radius: 0 0 20px 20px;
    }

    .situation-item {
        flex-direction: column;
        padding: 1.5rem;
        align-items: flex-start;
    }

    .profit-items {
        flex-direction: column;
    }

    .profit-item {
        width: auto;
    }

    .about-learning {
        padding: 3rem 1.5rem;
    }

    .accordion > label:after {
        right: 0;
    }

    .accordion > label {
        font-size: 16px;
    }

    .accordion div  {
      font-size: 16px;
      }

      .accordion > div p {
        font-size: 16px;
      }

      .cta {
        padding: 3rem 1.5rem;
      }

      .cta p {
        width: 100%;
      }

    footer {
        marign-top: 3rem;
    }
    
    .footer-container {
        flex-direction: column;
        gap: 1rem;
    }
     
}