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

    .hero__right {
        order: -1
    }

    .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(10);
}
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
    }

    .about-main {
    
    grid-template-columns: 100%;
    
}
.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;
}
}