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

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

@media (max-width: 1300px) {
    .event-section .count-container .count-body span {
        font-size: 120px;
    }
}
@media (max-width: 1200px) {
    .header-nav .menu ul li a {
        font-size: 14px;
        padding: 10px;
    }
    .event-section .count-container .count-body span {
        font-size: 100px;
    }

    .companies .company-item-text p,
.companies .company-item-text a {
    font-size: 13px;

}
}

@media (max-width: 1024px) {
    .header-nav .menu ul li a {
        padding: 8px;
    }
    .event-section .count-container .count-body span {
        font-size: 80px;
    }
    .event-section .count-container {
        margin: 0;
    }
}
@media (max-width: 992px) {
    nav .nav-list,
    .header-nav .menu-icon {
        display: none;
    }

    .menu-responsive .nav-list {
        display: flex !important;
    }

    section.responsive-menu.show {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 70px;
        padding: 30px 0;
        background-color: var(--color-Primary3);
        overflow: scroll;
    }
    section.responsive-menu.show .nav-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 10px 0;
        align-items: center;
        justify-content: center;
    }
    section.responsive-menu.show .nav-list li {
        width: 100%;
        text-align: center;
        padding: 10px;
    }
    section.responsive-menu.show .nav-list li.active {
        background-color: var(--color-Primary1);
        color: var(--color-white);
    }
    section.responsive-menu.show .nav-list li.active a {
        color: var(--color-white);
    }
    section.responsive-menu.show .nav-list li a {
        font-size: 16px;
        color: var(--color-Primary1);
        font-weight: 600;
    }
    .responsive-menu .menu-icon {
        flex-direction: column;
        display: flex;
        gap: 10px;
    }

    .show-menu {
        display: flex;
    }

    .hero-container .item-content {
        top: 50%;
        left: 50%;
        right: auto;
        width: 75%;
        transform: translate(-50%, -50%);
    }
    .media-details-image {
        height: auto;
    }
    .event-section .count-container .count-body span {
        font-size: 60px;
    }
}

@media (max-width: 768px) {
    .about-section,
    .labor-sector,
    .sectors,
    .companies,
    .contact,
    .event-section,
    .content-qatar {
        padding: 40px 0;
    }

    .sub-title {
        font-size: 26px;
    }

    .hero-content-text h2,
    .hero-content-text p {
        font-size: 30px;
    }

    .about-section .about-text p,
    .about-bank .about-bank-text p {
        font-size: 16px;
    }
    .event-section .count-container .count-body span {
        font-size: 40px;
    }
    .event-section .count-container .count-body p {
        font-size: 18px;
        padding: 0;
    }

    .event-section .event-header {
        margin-bottom: 40px;
    }

    .labor-sector .labor-sector-item-text h3,
    .sectors .sectors-item-text h3 {
        font-size: 20px;
    }
    .contact-card-item p {
        font-size: 18px;
    }
    .footer {
        background-size: cover;
        overflow: unset;
    }
    .footer .footer-content-item ul {
        gap: 10px;
    }
    .footer .footer-content-item ul li a {
        font-size: 16px;
    }
    .footer::before,
    .footer::after {
        top: -30px;
    }

    .accordion-button,
    .event-time-card .card-title p {
        font-size: 18px;
    }

    .hero-content-text {
        gap: 40px;
    }

        .companies .company-item-text p, .companies .company-item-text a {
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .hero-content-text h2,
    .hero-content-text p {
        font-size: 22px;
    }
    .hero-content-text .hero-content-text-desc {
        font-size: 18px;
    }
    .event-section .count-container .count-body p {
        font-size: 16px;
    }
    .event-section .count-container .count-body span {
        font-size: 36px;
    }
    .event-section .event-header {
        margin-bottom: 20px;
    }
    .labor-sector .labor-sector-item-text h3,
    .sectors .sectors-item-text h3 {
        font-size: 18px;
    }
    .footer .footer-content-item ul {
        flex-direction: column;
        align-items: center;
    }
    .accordion-button,
    .event-time-card .card-title p,
    .event-time-card .card-time {
        font-size: 16px;
    }
    .content-qatar p {
        font-size: 15px;
        line-height: 24px;
    }
    .statistics-features .statistic-item h3 {
        font-size: 17px;
    }
    .content-qatar .statistics .statistic-item p,
    .content-qatar .statistics-features .statistic-item p {
        font-size: 15px;
    }
    .sub-title {
        font-size: 21px;
    }
    .about-section .about-text p,
    .about-bank .about-bank-text p {
        font-size: 11px;
    }

    .about-bank .about-bank-text p {
        text-align: center;
    }

    .hero-content-text {
        gap: 30px;
    }

    
}

@media (max-width: 450px) {
    .event-section .count-container .count-body p {
        font-size: 12px;
    }
    .event-section .count-container .count-body span {
        font-size: 32px;
    }
    .event-section .count-container .count-body {
        gap: 0;
    }
    .labor-sector .labor-sector-item-text h3,
    .sectors .sectors-item-text h3 {
        font-size: 16px;
    }

    .contact-card-item p {
        font-size: 16px;
    }

    footer p {
        font-size: 14px;
    }

    .hero-content-text h2,
    .hero-content-text p {
        font-size: 20px;
    }

    .hero-content-text .hero-content-text-desc {
        font-size: 16px;
    }

    .ctm-btn1 {
        font-size: 14px;
    }

    .accordion-button,
    .event-time-card .card-title p,
    .event-time-card .card-time {
        font-size: 14px;
    }

    .hero-content-text h2,
    .hero-content-text p {
        font-size: 18px;
    }
}

@media (max-width: 375px) {
    .event-section .count-container .count-body p {
        font-size: 10px;
    }
    footer p {
        font-size: 12px;
    }
    .contact-card-item p {
        font-size: 14px;
    }
    .hero-content-text h2,
    .hero-content-text p {
        font-size: 14px;
    }
    .hero-content-text .country span {
        position: relative;
        padding: 14px 14px;
    }
}