/*
** Responsive Code
*/
@media (min-width: 1700px) {

}
@media (max-width: 1700px) {

}
@media(max-width: 1560px) {

}
@media(max-width: 1400px) {

}
@media(max-width: 1380px) {

}
@media(max-width: 1260px) {
    .course-detail a {
        font-size: 24px;
    }
    .contact h3 {
        font-size: 24px;
    }
}
@media(max-width: 1170px) {
    .main-banner h1,
    .why-text h1,
    .reason h1,
    .steps h1 {
        font-size: 38px;
    }
}
@media(max-width: 1070px) {
    .reason-text h3 {
        font-size: 24px;
        width: 200px;
    }
    .current-price span {
        font-size: 88px;
    }
}
@media(max-width: 993px) {
    .navigation-links {
        gap: 15px;
    }
    .main .container {
        flex-direction: column;
        gap: 20px;
    }
    .full-size,
    .courses-page .main-categories {
        width: 100%;
    }
    .main-banner {
        height: 100%;
    }
    .main-categories {
        margin-top: 25px;
    }
    .course-detail a,
    .active-courses-box .course-detail .course-ttl {
        font-size: 16px;
        font-weight: 600;
    }
    .step-number {
        width: 80px;
        min-width: 80px;
        height: 80px;
    }
    .step p {
        font-size: 16px;
    }
    .reviewSwiper .reviewer-details {
        flex-direction: column;
    }
    .reviewSwiper .review-data {
        align-self: flex-start;
    }

    .course-banner-text {
        width: 50%;
        padding: 50px 25px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .course-banner .steps-img {
        width: 50%;
        height: auto;
    }
    .course-banner-text h1 {
        font-size: 32px;
        padding: 20px 0;
    }
    .course-banner-text .btn {
        width: 100%;
        margin: 20px 0 0;
    }
    .course-audience-content {
        width: 50%;
    }
    .course-audience-box {
        width: 50%;
    }
    .course-audience-content p {
        font-size: 16px;
    }
    .course-banner-text p {
        font-size: 16px;
        margin-bottom: 15px;
    }
    .course-text h5 {
        font-size: 16px;
        padding-bottom: 10px;
    }
    .course-text p {
        font-size: 14px;
    }

    .course-audience .container {
        flex-direction: column;
    }
    .course-audience-content,
    .course-info,
    .course-chapters {
        width: 100%;
    }
    .course-audience-box {
        width: 100%;
        gap: 15px;
    }
    .course-price-section .steps-img {
        height: auto;
    }
    .current-price span {
        font-size: 68px;
    }
    .old-price, .current-price,
    .price-section-box h3 {
        font-size: 24px;
    }
    .price-section-box h1 {
        font-size: 42px;
    }
    .old-price span {
        font-size: 42px;
    }
    .progress-details {
        flex-direction: column;
        gap: 5px;
    }
    .active-detail-course .container {
        flex-direction: column;
    }
    .video-box {
        height: 230px;
    }
    .course-chapters .faq_answer.active {
        min-height: 580px;
    }
    .payment-details h3 {
        font-size: 16px;
    }
    .blog {
        height: 400px;
    }
    .blogs .blogs-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact h3 {
        font-size: 32px;
    }
    .contacts-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .hero-container {
        flex-direction: column;
        gap: 50px;
    }
    .hero-courses,
    .hero-welcome,
    .about-platform-banner .main-categories {
        width: 100%;
    }
    .hero-welcome-title {
        font-size: 35px;
        margin-bottom: 15px;
    }
    .hero-welcome-message {
        margin-bottom: 20px;
    }
    .welcomeBtn {
        width: 50%;
    }
    .about-boxes,
    .platform-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .your-banner-text h3 {
        font-size: 32px;
    }
    .about-platform .container {
        flex-direction: column;
    }
    .close-btn {
        top: -5px;
        right: -5px;
    }

}
@media(max-width: 991px){
    .ham {
        display: block;
    }
}
@media(max-width: 768px) {

    .navigation-links .btn,
    .course-detail a br {
        display: none;
    }
    .courses .container,
    .reasons,
    .active-courses-box {
        flex-direction: column;
    }

    /* Course cards: vertical layout on mobile */
    .courses .course-box {
        grid-template-columns: 1fr;
    }
    .course {
        flex-direction: column;
        height: auto;
    }
    .course-image {
        width: 100%;
        min-width: unset;
        height: 220px;
    }

    /* Workshop/Resource cards: vertical layout on mobile */
    .resource-card {
        grid-template-columns: 1fr;
    }
    .resource-card-image {
        height: 200px;
    }
    .resource-card-image img {
        width: auto;
        max-height: 100%;
    }
    .why-text {
        flex-direction: column;
        align-items: start;
        gap: 30px;
    }
    .why-numbers {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .why-number span {
        font-size: 36px;
    }
    .why-number p {
        font-size: 14px;
    }
    .reason-text h3 {
        width: 300px;
    }
    .steps-container,
    .speaker-container,
    .course-banner .container,
    .user-inputs  {
        flex-direction: column;
    }
    .steps-box {
        gap: 15px;
    }
    .reviewSwiper .review-data h3,
    .learn-box h3,
    .study-box h3,
    .hamburger-menu a,
    .singOut a,
    .material h5,
    .download span {
        font-size: 16px;
    }
    .reviewSwiper .revew-text p,
    .learn-box p,
    .study-box p {
        font-size: 14px;
    }
    .footer-links .container {
        flex-wrap: wrap;
        gap: 25px;
    }
    .footer-links ul {
        width: 300px;
    }
    .course-banner-text,
    .speaker-text,
    .current-pass {
        width: 100%;
    }
    .course-banner .steps-img {
        width: 100%;
        height: 400px;
    }
    .learn-container,
    .studies-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .speaker-container img,
    .course-price-section .steps-img {
        width: 100%;
        height: 500px;
    }
    .course-price-section .container {
        flex-direction: column;
        gap: 30px;
    }
    .price-section-box {
        width: 100%;
        gap: 15px;
    }
    .progress-details {
        flex-direction: row;
    }
    .open-video-container .steps-img {
        /*height: 700px;*/
    }
    .contentMenu {
        width: 600px;
    }

    .download img {
        width: 20px;
    }
    .download-btn,
    .save, .save-2 {
        width: 45%;
    }

    .payment-details {
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }
    .payment-btns {
        width: 100%;
        justify-content: space-between;
    }

    .blog-detail h1 {
        font-size: 32px;
    }
    .blog-paragraphs {
        font-size: 16px;
    }

    .contact h3 {
        font-size: 24px;
    }

    .section-template,
    .about-footer {
        flex-direction: column;
        align-items: start;
        gap: 15px;
    }
    .section-information {
        align-self: start;
    }
    .about-footer-information,
    .your-banner-text,
    .your-banner-img {
        width: 100%;
    }

    .your-course-banner .container {
        flex-direction: column;
    }
    .your-banner-text .about-footer-action .btn {
        width: 350px;
    }
}
@media(max-width: 600px) {
    .reason h1,
    .why-text h1,
    .reviews h1,
    .news h1,
    .steps h1 {
        font-size: 24px;
    }
    .footer-links ul {
        width: 300px;
    }

    .course-audience-content h3,
    .course-banner-text h1,
    .learn-section .container h1,
    .future-works .container h1,
    .studies-status .container h1,
    .speaker .container h1,
    .speaker-text h3,
    .course-contents .course-container h1{
        font-size: 24px;
    }
    .course-banner-text h1 br {
        display: none;
    }
    .speaker-text h5,
    .future-works .container p {
        font-size: 16px;
    }
    .speaker-text p {
        font-size: 14px;
    }
    .circle-1.active{
        top: -30%;
        left: -40%;
        width: 600px;
        height: 600px;
    }
    .circle-2.active {
        top: -30%;
        left: -40%;
        width: 700px;
        height: 700px;
    }
    .circle-3.active {
        top: -30%;
        left: -40%;
        width: 800px;
        height: 800px;
    }

    .greetings h1,
    .active-courses h3 {
        font-size: 24px;
    }
    .greetings p {
        font-size: 16px;
    }
    .active-courses-box .course-detail .course-ttl {
        font-size: 14px;
    }
    .open-video-container .steps-img {
        /*height: 550px;*/
    }
    .navigation-info {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 10px;
    }
    .nav-text{
        justify-content: space-between;
    }
    .nav-actions {
        align-self: end;
        gap: 15px;
    }
    .nav-actions a {
        width: 35px;
        height: 35px;
    }
    .menuOpen .menu_overlay,
    .contacts-form-text p br,
    .agree-policy br {
        display: none;
    }
    .contentMenu {
        width: 100%;
        padding: 15px;
    }
    .video-chapters,
    .payment-details {
        padding: 15px;
    }
    .payment-btns {
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }
    .payment > img {
        height: auto;
    }
    .blog-detail-img {
        height: 550px;
    }
    .contacts-box {
        grid-template-columns: repeat(1, 1fr);
    }

    .section-title,
    .platform-grid h1 {
        font-size: 32px;
    }
    .section-information,
    .about-card-title,
    .about-footer-information,
    .your-banner-text p,
    .platform-box h3 {
        font-size: 16px;
    }
    .about-card-information li,
    .platform-box p {
        font-size: 14px;
    }
    .hero-courses {
        display: none;
    }

    .your-banner-text h3 {
        font-size: 24px;
    }
    .platform-box {
        height: 400px;
    }
}
@media(max-width: 500px) {
    .container {
        padding: 0 15px;
    }
    /* Sidebar menu — smaller avatar & tighter spacing when logged in */
    .user-img img {
        width: 80px;
        height: 80px;
    }
    .user-data h3 {
        font-size: 18px;
    }
    .user-box {
        gap: 12px;
    }
    .hamburger-menu {
        gap: 10px;
    }
    .hamburger-menu a,
    .singOut a {
        font-size: 16px;
    }
    .hamburger-menu a i {
        font-size: 18px !important;
    }
    .main-banner h1,
    .blog-detail h1,
    .blog-swiper h3,
    .contacts-form-text h3 {
        font-size: 24px;
    }
    .reason-text h3,
    .reason-text .btn,
    .search input,
    .search button,
    .download-btn,
    .save, .save-2 {
        width: 100%;
    }
    .copyright .container,
    .search .container {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    .footer-links .container {
        align-items: center;
        justify-content: center;
    }
    .footer-links .container ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .speaker-container img,
    .course-price-section .steps-img {
        height: 400px;
    }
    .course-sign {
        gap: 25px;
    }
    .video-pause {
        width: 100px;
        height: 100px;
    }
    .circle-1.active{
        top: -20%;
        left: -30%;
        width: 400px;
        height: 400px;
    }
    .circle-2.active {
        top: -23%;
        left: -36%;
        width: 500px;
        height: 500px;
    }
    .circle-3.active {
        top: -27%;
        left: -42%;
        width: 600px;
        height: 600px;
    }
    .progress-details {
        flex-direction: column;
        gap: 5px;
    }
    .progress-details p {
        font-size: 12px;
    }
    .telegram-text h3,
    .practical-work h3 {
        font-size: 16px;
    }
    .telegram-text p,
    .practical-work p,
    .practical-work li {
        font-size: 14px;
    }
    .nav-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .practical-work h1 {
        font-size: 20px;
    }

    .figma-img > img {
        height: 500px;
    }
    .blogs .blogs-container {
        grid-template-columns: repeat(1, 1fr);
    }
    .moreBtn {
        width: 100%;
    }
    .contacts-page h1,
    .about-platform-content h1 {
        font-size: 32px;
    }
    .about-boxes,
    .platform-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .about-card-number {
        left: -10px;
    }
    .welcomeBtn,
    .about-footer-action,
    .about-footer-action .btn,
    .section-information,
    .your-banner-text .about-footer-action .btn {
        width: 100%;
    }
}

@media(max-width: 400px) {
    .why-numbers {
        grid-template-columns: repeat(1, 1fr);
    }
    .why-number span {
        font-size: 30px;
    }
    .main-categories a,
    .payedBtn {
        width: 100%;
    }
    .main-banner,
    .reason-text {
        padding: 25px;
    }
    .course-sign,
    .course-numbers {
        flex-direction: column;
    }
    .learn-container,
    .studies-container,
    .about-platform .why-numbers {
        grid-template-columns: repeat(1, 1fr);
    }
    .faq_ttl {
        font-size: 14px;
    }
    .close-box {
        min-width: 35px;
        width: 35px;
        height: 35px;
    }
    .price-section-box h1 {
        font-size: 24px;
    }
    .price-section-box h3,
    .old-price,
    .current-price,
    .form-title p,
    .entryarea input  {
        font-size: 16px;
    }
    .current-price span {
        font-size: 48px;
    }
    .old-price span {
        font-size: 32px;
    }
    .user-img img {
        width: 100px;
        height: 100px;
    }

    .circle-1.active{
        top: -15%;
        left: -30%;
        width: 350px;
        height: 350px;
    }
    .circle-2.active {
        top: -20%;
        left: -40%;
        width: 450px;
        height: 450px;
    }
    .circle-3.active {
        top: -20%;
        left: -40%;
        width: 500px;
        height: 500px;
    }
    .copyright .container a {
        text-align: center;
    }
    .video-box {
        height: 170px;
    }
    .course-chapters .faq_answer,
    .form-title {
        gap: 15px;
    }
    .course-chapters .faq_answer.active {
        min-height: 480px;
    }
    .open-video-container .steps-img {
        /*height: 400px;*/
    }
    .user-info:nth-child(1),
    .payment {
        flex-direction: column;
    }
    .user-info:nth-child(1) .user-data {
        align-self: start;
    }
    .payment > img {
        width: 100%;
        height: 300px;
    }
    .blog-detail-img {
        height: 400px;
    }
    .platform-grid h1 {
        font-size: 24px;
    }
}
@media(max-width: 380px) {
    .user-box,
    .telegram-chat {
        flex-direction: column;
        align-items: start;
    }
    .user-img img {
        width: 60px;
        height: 60px;
    }
    .user-data h3 {
        font-size: 16px;
    }
    .menu-content {
        padding: 10px 15px;
    }
    .hamburger-menu {
        gap: 8px;
    }
    .main-slider {
        height: 350px;
    }
    .course-image {
        width: 100%;
        min-width: unset;
        height: 180px;
    }
    .course-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .course-detail {
        padding: 15px;
    }
    .course-detail a img {
        width: 15px;
    }
    .course .course-link-circle {
        width: 30px;
        height: 30px;
    }
    .step-number {
        width: 50px;
        min-width: 50px;
        height: 50px;
        font-size: 24px;
    }
    .old-price,
    .current-price  {
        font-size: 14px;
    }
    .current-price span {
        font-size: 38px;
    }
    .old-price span {
        font-size: 22px;
    }
    .course-banner .steps-img {
        height: 100%;
    }
    .speaker-container img,
    .course-price-section .steps-img  {
        height: 100%;
    }
    .close-box {
        min-width: 25px;
        width: 25px;
        height: 25px;
    }
    .faq_close {
        width: 10px;
        height: 10px;
    }
    .faq_txt {
        padding-bottom: 15px;
    }
    .course-contents .course-container,
    .course-banner-text {
        padding: 25px 15px;
    }
    .studies-status {
        padding-top: 100px;
    }
    .active-courses-box .course-detail .course-ttl {
        padding-right: 30px;
    }
    .course-chapters .faq_answer {
        grid-template-columns: repeat(1, 1fr);
    }
    .course-chapters .faq_answer.active {
        min-height: 900px;
    }
    .telegram {
        align-self: center;
    }
}