/* 16px -> 1em  */

/* ------------------------------- */
/* 1220 px ≈ 76.25 em */
/* 1097 px ≈ 68.5625 em */
/* 1085 px ≈ 67.8125 em */
/* 917  px ≈ 57.3125 em */
/* 845  px ≈ 52.8125 em */
/* 760  px ≈ 47.5 em */
/* 700  px ≈ 43.75 em */
/* 640  px ≈ 40 em */
/* 588  px ≈ 36.75 em */
/* 500  px ≈ 31.25 em */
/* 450  px ≈ 28.125 em */
/* 400  px ≈ 25em */
/* ------------------------------- */

/* 
- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 
*/

@media (max-width: 76.25em) {
    html {
        font-size: 56.25%;
    }
}

@media (max-width: 68.5625em) {
    .hero-heading-primary {
        font-size: 4.4rem;
    }

    .testimonial-text {
        font-size: 1.6rem;
    }
}

@media (max-width: 67.8125em) {

    .price--first,
    .price--secondery {
        padding: 3.2rem;
    }

    .plan-name {
        font-size: 1.8rem;
    }

    .plan-price {
        font-size: 5.2rem;
    }

    .plan-text {
        font-size: 1.4rem;
    }

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

    .price-list li {
        gap: 1.6rem;
    }

    .price-span {
        font-size: 1.4rem;
    }

    .statistics-main-p {
        font-size: 1.6rem;
    }

    .statistics-grid-left {
        row-gap: 3.2rem;
    }

    .statistics-span {
        font-size: 4.4rem;
    }

    .statistics-p {
        font-size: 1.4rem;
    }

    .price-title,
    .statistics-title,
    .accordion-title,
    .testimonials-title,
    .statistics-main-title {
        font-size: 3.6rem;
    }

    .hero-dis {
        font-size: 1.8rem;
    }

    .hero-cartoons-list {
        flex-direction: column;
    }

    .btn:link,
    .btn:visited {
        font-size: 1.6rem;
    }

    .price-grid.kocluk-layout .price {
        width: 80%;
        justify-self: center;
    }
}

@media (max-width: 57.3125em) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 3.2rem;
    }

    .testimonials-container {
        padding: 8rem;
    }

    .accordion-container {
        max-width: 80rem;
    }

    .testimonials {
        gap: 2.4rem;
    }

    .about-title {
        font-size: 1.6rem;
    }

    .about-parag {
        font-size: 1.4rem;
    }

    .about-img i {
        font-size: 2.4rem !important;
    }

    .about-header a {
        font-size: 1.4rem;
    }

    .hero-heading-primary {
        font-size: 3.6rem;
    }

    .hero-btn {
        flex-direction: column;
        text-align: center;
    }

    .about-img-h3 {
        gap: 6.4rem;
    }

    .price-grid.kocluk-layout .price {
        width: 100%;
        column-gap: 3.2rem;
    }

    .price-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 3.2rem;
    }

    .price-grid.kocluk-layout {
        column-gap: 3.2rem;
    }
    
    .tag {
        font-size: 1rem;
    }
}

@media (max-width: 52.8125em) {
    .about-services {
        flex-direction: column;
        gap: 1rem;
        align-items: initial;
        justify-content: initial;
    }

    .about-img-h3 {
        gap: 1rem;
    }

    .about-header {
        margin-bottom: 3.2rem;
        flex-direction: column;
        gap: 2rem;
        align-items: initial;
    }

    .about-header a {
        align-self: flex-start;
    }

    .statistics-grid {
        grid-template-columns: 1fr;
        row-gap: 2.4rem;
    }
    .header ul {
        font-size: 1.6rem;
    }
    .şapkalıbiröğretmen-logo {
        height: 6rem;
    }
    .about-parag {
        width: initial;
    }
    .team-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 47.5em) {
    .btn-mobile-nav {
        display: block;
        z-index: 9999;
    }

    .main-nav {
        background-color: rgba(255, 255, 255, 0.9);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(10px);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1000;

        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in;

        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }

    .nav-open .main-nav {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    .nav-open .close-outline {
        display: block;
    }

    .nav-open .menu-outline {
        display: none;
    }

    .main-nav-list {
        flex-direction: column;
        gap: 4.8rem;
        font-size: 3rem;
    }

    .header ul {
        font-size: 3rem;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 6.4rem;
    }
    .hero-btn {
        flex-direction: initial;
        justify-content: center;
    }
    .hero-img {
        grid-row: 1/2;
    }
    .şapkalıbiröğretmen-logo {
        height: 8rem;
    }
    .hero-heading-primary {
        text-align: center;
    }
    .price-grid.kocluk-layout {
        grid-template-columns: 1fr;
    }
    .price-grid {
        grid-template-columns: 1fr;
        width: 60%;
        justify-self: center;
    }
    .team-title-h2 {
        font-size: 3.6rem;
    }
}

@media (max-width: 43.75em) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr); 
    }
    .team-title-main {
        flex-direction: column;
        gap: 2.4rem;
    }
}

@media (max-width: 40em) {
    .about-header h2, .testimonials-title, .price-title, .statistics-title, .statistics-main-title, .accordion-title {
        font-size: 3rem;
    }
    .features-images img {
        height: 4rem;
    }
    .price-grid {
        width: 70%;
    }
}

@media (max-width: 36.75em) {
    .footer {
        padding: 4.8rem;
    }
    .footer-container {
        grid-template-columns: 1fr;
        gap: 4.8rem;
    }
    .testimonial-text {
        font-size: 1.4rem;
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
    .tag {
        font-size: 1.2rem;
    }
}

@media (max-width: 31.25em) {
    .features-images img {
        height: initial;
        width: 20rem;
    }
    .features-images {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }
    .feature-section {
        padding: 4.8rem 0 0 0;
    }
    .hidden-box p {
        font-size: 1.4rem;
    }
    .accordion-in-number, .accordion-in-title {
        font-size: 1.8rem;
    }
    .hero-heading-primary {
        font-size: 3rem;
    }
    .about-header h2, .testimonials-title, .price-title, .statistics-title, .statistics-main-title, .accordion-title {
        font-size: 2.4rem;
    }
    .about-information, .testimonials-information, .price-information, .statistics-information, .accordion-information {
        font-size: 1.4rem;
    }
    .statistics-main-p {
        font-size: 1.4rem;
    }
    .price-grid {
        width: 80%;
    }
    .statistics-span {
        font-size: 4rem;
    }
    .testimonials-section {
        padding: 4.8rem 0;
    }
}

@media (max-width: 28.125em) {
    .price-grid {
        width: 100%;
    }
    .testimonial-text {
        font-size: 1.2rem;
    }
    .testimonials-title {
        margin-bottom: 6.4rem;
    }
    .hero-btn {
        flex-direction: column;
        width: 75%;
        margin: 0 auto 8rem auto;
    }
    .team-title-h2 {
        font-size: 3rem;
    }
    .statistics-grid-left {
        grid-template-columns: 1fr;
    }
    .testimonials-container {
        padding: 4.8rem;
    }
}

@media (max-width: 25em) {
    .tag {
        font-size: 1rem;
    }
    .team-back {
        font-size: 1.4rem;
    }
}