/* ========== Responsive Design ========== */
/* ========== Responsive ========== */
@media (max-width: 1024px) {
    .hero__container {
        grid-template-columns: 1fr
    }

    .hero__right {
        order: 1;
        margin: auto;
        align-items: center;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .testi {
        left: 0;
        right: 0
    }

    .benefits__grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }

    .moodle-section {
        height: auto;
        padding: 40px 20px;
    }

    .moodle-section__content {
        transform: none;
        padding: 30px 40px;
    }

    .moodle-section::before {
        transform: none;
        border-radius: 20px;
    }

    .accomplishments-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .accomplishment-card {
        padding: 32px 20px;
    }

    .helpers-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }


    .helpers-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 768px) {



    h1 {
        font-size: 36px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
        font-family: "Roboto" !important;
    }

    h2 {
        font-size: 27px !important;
        font-weight: 800 !important;
        font-family: "Roboto" !important;
    }

    .h3 {
        font-size: 20px;
    }


    a {
        font-size: 14px;
    }

    li {
        font-size: 14px;
    }

    span.h2 {
        font-size: 26px !important;
    }

    p {
        font-size: 14px;
    }





    span.navbar-toggler-icon {
        filter: brightness(30);
        font-size: 25px;
        font-weight: 500;
        color: var(--card);
    }

    button.btn-close {
        filter: brightness(0) invert(1);
    }

    .hero {
        padding: 32px 16px
    }

    .hero__grid2 {
        grid-template-columns: 1fr
    }

    .hero__logos {
        gap: 10px;
        font-size: 12px
    }

    .hero__right img {
        bottom: -33px;
        position: relative;
        width: 100%;
        max-width: 280px;
        height: 100%;
        max-height: 250px;
    }

    .about-main {

        grid-template-columns: 100%;

    }

    .about-main-img img {
        width: 100%;
        max-width: 400px;
        height: 100%;
        max-height: 300px;
        margin: 0 auto;
        padding-top: 20px;
    }

    .helpers-content {
        grid-template-columns: 45% 50%;
        gap: 32px;
        width: 90%;
    }

    .sticker {
        transform: rotate(-4deg) scale(.95)
    }

    .hero__shape--hat {
        display: none
    }

    .hero__shape--doodle {
        opacity: .3
    }

    /* benefit sec */
    .benefits {
        padding: 60px 16px;
    }

    .benefits__grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .benefit-card {
        padding: 24px 20px;
    }

    .benefit-card__icon {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }

    .benefit-card__icon svg {
        width: 20px;
        height: 20px;
    }

    .benefit-card__title {
        font-size: 18px;
        padding-right: 50px;
    }

    .moodle-section__content {
        padding: 24px 30px;
    }

    .moodle-section__title {
        font-size: 20px;
    }

    .moodle-section__actions {
        /* flex-direction: column; */
        gap: 16px;
        align-items: center;
    }

    .lms-section__logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .banner-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .banner-right {
        /* order: 1; */
        display: none;
        padding: 20px;
    }

    .benefits-list {
        text-align: left;
        /* max-width: 500px; */
        /* margin-left: auto; */
        /* margin-right: auto; */
    }

    .cta-buttons {
        justify-content: center;
    }

    .best-class-help-banner {
        padding: 60px 0;
    }

    .stat {
        display: grid;
        gap: 0px;
        align-items: start;
        text-align: left;
    }

    .profile-name {
        font-size: 20px;
    }

    .banner-right {
        padding: 16px;
    }

    .banner-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .banner-subtitle {
        font-size: 14px;
        margin-bottom: 22px;
    }

    .benefit-item {
        gap: 12px;
        font-size: 14px;
        margin-bottom: 12px;
    }

    .benefit-icon {
        width: 20px;
        height: 20px;
    }

    .benefit-icon svg {
        width: 12px;
        height: 12px;
    }

    .benefit-text {
        font-size: 15px;
    }

    .cta-btn {
        padding: 14px 24px;
        font-size: 15px;
        gap: 10px;
    }

    .btn-icon {
        width: 18px;
        height: 18px;
    }

    .orange-shape {
        width: 70%;
        height: 70%;
    }

    .faq-section {
        padding: 60px 0;
    }

    .faq-container {
        padding: 0 16px;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 40px;
    }

    .faq-question {
        padding: 20px;
    }

    .question-text {
        font-size: 16px;
    }

    .faq-answer.active {
        padding: 0 20px 20px 20px;
    }

    .faq-answer p {
        font-size: 15px;
    }

    .decoration-icon {
        width: 40px;
        height: 40px;
    }

    .decoration-icon--diploma,
    .decoration-icon--clock {
        width: 50px;
        height: 50px;
    }

    .decoration-icon--magnifying {
        width: 45px;
        height: 45px;
    }

    .faq-section {
        padding: 40px 0;
    }

    .faq-title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .faq-subtitle {
        font-size: 14px;
        margin-bottom: 40px;
    }

    .faq-question {
        padding: 16px;
    }

    .question-text {
        font-size: 15px;
    }

    .faq-answer.active {
        padding: 0 16px 16px 16px;
    }

    .faq-answer p {
        font-size: 14px;
    }

    .show-more-btn {
        padding: 14px 28px;
        font-size: 15px;
    }

    .decoration-icon {
        width: 30px;
        height: 30px;
        opacity: 0.2;
    }

    .decoration-icon--diploma,
    .decoration-icon--clock {
        width: 40px;
        height: 40px;
    }

    .decoration-icon--magnifying {
        width: 35px;
        height: 35px;
    }

    .accomplishments-section {
        padding: 60px 0;
    }

    .accomplishments-container {
        padding: 0 16px;
    }

    .accomplishments-title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .accomplishments-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin: 0 auto;
    }

    .accomplishment-card {
        padding: 28px 20px;
    }

    .accomplishment-number {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .accomplishment-label {
        font-size: 16px;
    }

    table.subjects-table th,
    table.subjects-table td {
        font-size: 14px;
        padding: 8px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-actions {
        flex-direction: column;
    }


    .discounts-hero {
        padding: 60px 0;
    }

    .review-badges {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
    }


    .hh-footer-list ul li a {
        font-size: 14px;
    }

    .hero-cta-left {
        display: none;
    }

    .hero-cta {
        grid-template-columns: 100%;
    }

    .helpers-container {
        padding: 0 16px;
    }

    .helpers-list {
        grid-template-columns: 1fr;
    }

    .helper-card {
        padding: 16px;
    }

    .helper-avatar {
        width: 50px;
        height: 50px;
    }

    .helper-name {
        font-size: 16px;
    }

    .helper-experience {
        font-size: 13px;
    }

    .helper-profile {
        padding: 24px;
    }

    .profile-header {
        /* flex-direction: column; */
        text-align: left;
        gap: 16px;
    }

    .profile-stats {
        justify-content: center;
        gap: 24px;
    }

    .stat-number {
        font-size: 13px;
    }

    .stat-label {
        font-size: 13px;
    }

    section.top-rated-section {
        padding: 60px 0px;
    }

    .top-rated-main {
        grid-template-columns: 100%;
    }

    .top-rated-left {
        display: none;
    }

    .cta-about-after-main {
        grid-template-columns: 100%;
        text-align: center;

    }

    div#cta-about-after-btn {
        display: flex;
        justify-content: center;
    }

    .reviews-arrows {
        position: static;
        transform: none;
        justify-content: center;
        margin-top: 10px
    }

    .reviews-header {
        padding-right: 0
    }

    .reviews-tabs {
        grid-template-columns: 1fr 1fr
    }



    .expert-container {
        padding: 0 16px;
    }

    .main-carousel,
    .services-carousel {
        margin: 0 40px;
    }

    .service-card {
        padding: 30px 20px;
    }

    .offering-content {
        padding: 24px;
    }

    .offering-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .services-carousel.circle-1,
    .services-carousel.circle-2 {
        display: none;
    }

    .quality-badge {
        display: none;
    }

    .main-carousel button.owl-prev span,
    .main-carousel button.owl-next span {
        font-size: 27px;
    }

    .services-carousel button.owl-prev span,
    .services-carousel button.owl-next span {
        font-size: 27px;
    }

    .main-carousel button.owl-prev {
        left: -20px;
        width: 40px;
        height: 40px;
    }

    .main-carousel button.owl-next {
        width: 40px;
        height: 40px;
        left: 599px !important;
    }

    .services-carousel button.owl-prev {
        bottom: 200px;
        left: -20px;
        width: 40px;
        height: 40px;
    }

    .services-carousel button.owl-next {
        bottom: 200px;
        width: 40px;
        height: 40px;
        left: 630px !important;
    }

}

@media (max-width: 568px) {


    div#cta-about-after-btn {
        display: grid;
        justify-content: center;
    }

    .top-bar {
        display: none;
    }

    .benefits__title {
        font-size: 24px;
    }

    .benefits__subtitle {
        font-size: 15px;
    }

    .benefit-card__title {
        font-size: 16px;
        padding-right: 40px;
    }

    .benefit-card__text {
        font-size: 14px;
    }

    .moodle-section__content {
        padding: 20px 24px;
    }

    .moodle-section__title {
        font-size: 18px;
    }

    .lms-section__logos {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .best-class-help-banner {
        padding: 40px 0;
    }

    .banner-container {
        gap: 30px;
    }

    .banner-title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .banner-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .benefit-item {
        gap: 10px;
        margin-bottom: 12px;
    }

    .benefit-icon {
        width: 18px;
        height: 18px;
    }

    .benefit-icon svg {
        width: 10px;
        height: 10px;
    }

    .benefit-text {
        font-size: 14px;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .cta-btn {
        width: 100%;
        max-width: 280px;
        padding: 12px 20px;
        font-size: 14px;
        justify-content: center;
    }

    .orange-shape {
        width: 60%;
        height: 60%;
        transform: rotate(10deg);
    }

    .accomplishments-section {
        padding: 40px 0;
    }

    .accomplishments-title {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .accomplishment-card {
        padding: 24px 8px;
    }

    .accomplishment-number {
        font-size: 30px;
        margin-bottom: 10px;
    }

    .accomplishment-label {
        font-size: 14px;
    }

    .form-title {
        font-size: 24px;
    }

    .form-subtitle {
        font-size: 16px;
    }

    .profile-stats {
        flex-direction: column;
        gap: 16px;
    }

    .benefits__grid {
        grid-template-columns: 1fr;
    }

    .moodle-lms {
        grid-template-columns: 100%;
    }

    .moodle-section {
        margin-top: 30px;
    }

    .hero__offer {
        display: grid;
    }

    ul.hero__logos li {
        font-size: 13px;
    }


    .item .slider-img img {
        width: 130px;
        margin: 0 auto;
    }

    .benefits__header {
        text-align: left;
    }


    .benefits__header {
        text-align: center;
        margin-bottom: 60px;
    }

    .benefits-list {
        grid-template-columns: 100%;
    }

    .helpers-content {
        grid-template-columns: 100%;
    }

    .lms-section {
        padding: 0;
    }

    .review-badges {
        grid-template-columns: 1fr;
    }

    .moodle-section__icon img {
        display: none;
    }

    .table-main {
        display: none;
    }

    .con-main {

        overflow-y: hidden;
        height: auto;

    }



    .main-carousel button.owl-next {

        left: 340px !important;
    }

    .services-carousel button.owl-next {
        left: 330px !important;
    }


    .main-carousel,
    .services-carousel {
        margin: 0 20px;
    }

    .services-carousel .carousel-nav {
        width: 36px;
        height: 36px;
    }

    .services-carousel .carousel-nav svg {
        width: 14px;
        height: 14px;
    }

    .service-card {
        padding: 24px 16px;
    }

    .offering-content {
        padding: 20px;
    }

    .quality-badge {
        width: 60px;
        height: 60px;
    }

    .badge-text {
        font-size: 6px;
    }

    .badge-percentage {
        font-size: 12px;
    }

    .badge-guarantee {
        font-size: 5px;
    }
}

@media (max-width: 422px) {

    .hh-con-sec-head-btn {
        flex-direction: column;
    }
}