/* Responsive Styles */

/* Large Screens (1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: var(--container-width);
    }

    .tab-buttons {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
}

/* Medium Screens (992px to 1199px) */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    .hero-content h1 {
        font-size: 40px;
    }

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

    .feature-card {
        padding: var(--spacing-lg);
    }

    .feature-icon {
        width: 60px;
        height: 60px;
    }

    .feature-icon i {
        font-size: 24px;
    }
    
    /* Services section */
    .services .section-header h2 {
        font-size: 2.2rem;
    }
    
    .service-info h3 {
        font-size: 1.6rem;
    }

    .tab-buttons {
        white-space: nowrap;
    }
}

/* Tablet Screens (768px to 991px) */
@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }

    /* Header & Navigation */
    .nav-links {
        gap: var(--spacing-md);
    }

    /* Hero Section */
    .hero .container {
        flex-direction: column;
        gap: var(--spacing-xl);
        padding-top: var(--spacing-xl);
    }

    .hero-content, .hero-image {
        flex: auto;
        width: 100%;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 36px;
    }

    .hero-content p {
        margin: 0 auto var(--spacing-xl);
    }

    /* About Section */
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .about-image {
        order: 1;
    }

    .about-text {
        order: 2;
        max-width: unset;
    }

    /* Services Section */
    .tab-buttons {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    /* Hide scrollbar for Chrome, Safari and Opera */
    .tab-buttons::-webkit-scrollbar {
        display: none;
    }
    
    /* Use shorter tab text on tablets too */
    .tab-short {
        display: none;
    }
    
    .services .section-header h2 {
        font-size: 2rem;
    }
    
    .tab-btn {
        padding: 12px 15px;
        font-size: 15px;
    }
    
    .service-info li {
        font-size: 1rem;
    }

    /* Contact Section */
    .contact-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .footer-logo {
        grid-column: span 2;
        margin-bottom: var(--spacing-lg);
    }

    .logo img {
        height: 45px;
    }
}

/* Mobile Screens (576px to 767px) */
@media (max-width: 767px) {


    button[data-service="erp"] {
        font-size: 0;
    }
    button[data-service="web"] {
        font-size: 0;
    }
    button[data-service="mobile"] {
        font-size: 0;
    }
    button[data-service="custom"] {
        font-size: 0;
    }
    button[data-service="consulting"] {
        font-size: 0;
    }
    button[data-service="erp"]::after {
        content: "ERP";
        font-size: 12px;
    }
    button[data-service="web"]::after {
        content: "Web";
        font-size: 12px;
    }
    button[data-service="mobile"]::after {
        content: "Mobile";
        font-size: 12px;
    }
    button[data-service="custom"]::after {
        content: "Custom";
        font-size: 12px;
    }
    button[data-service="consulting"]::after {
        content: "Consulting";
        font-size: 12px;
    }
    html[dir="rtl"] button[data-service="web"]::after {
        content: "ويب"; /* Arabic translation for "ERP" */
        font-size: 12px;
    }
    html[dir="rtl"] button[data-service="mobile"]::after {
        content: "موبايل"; /* Arabic translation for "ERP" */
        font-size: 12px;
    }
    html[dir="rtl"] button[data-service="custom"]::after {
        content: "مخصص"; /* Arabic translation for "ERP" */
        font-size: 12px;
    }
    html[dir="rtl"] button[data-service="consulting"]::after {
        content: "استشارات"; /* Arabic translation for "ERP" */
        font-size: 12px;
    }


    .container {
        max-width: 540px;
    }

    /* Header & Navigation */
    header .container {
        padding: var(--spacing-sm) var(--container-padding);
    }

    .logo h1 {
        font-size: 20px;
    }

    /* Tab buttons in mobile view */
    .tab-short {
        display: none;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        flex-direction: column;
        width: 70%;
        height: 100vh;
        background-color: var(--dark-bg);
        padding-top: 80px;
        transition: right var(--transition-normal);
        z-index: 998;
        gap: 0;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        display: block;
        padding: var(--spacing-md) 0;
        color: var(--text-light);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-links a::after {
        display: none;
    }

    .mobile-menu {
        display: block;
        z-index: 999;
    }

    /* Hero Section */
    .hero {
        padding-top: 100px;
        min-height: auto;
    }

    .hero-content h1 {
        font-size: 28px;
    }

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

    /* Features Section */
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Services Section */
    .services .section-header h2 {
        font-size: 1.8rem;
    }
    
    .services .section-header h2::after {
        width: 90px;
        height: 4px;
        margin-top: 12px;
    }
    
    .tab-buttons {
        flex-wrap: nowrap;
        margin-bottom: var(--spacing-sm);
        justify-content: flex-start;
    }

    .tab-btn {
        padding: 8px 12px;
        font-size: 13px;
        text-align: center;
        min-width: auto;
    }

    .tab-pane {
        padding: var(--spacing-md);
    }

    .service-info h3 {
        font-size: 1.4rem;
        padding-left: 10px;
    }
    
    .service-info li {
        font-size: 0.95rem;
    }
    
    .service-info p {
        font-size: 0.95rem;
    }
    
    .service-img {
        margin-bottom: var(--spacing-md);
    }
    
    .service-img img {
        height: 220px;
    }

    /* Mission Vision */
    .mission-vision {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }

    .footer-logo {
        grid-column: span 1;
    }

    .footer-links, .footer-services {
        text-align: center;
    }

    .footer-links ul, .footer-services ul {
        align-items: center;
    }
    
    .footer-links h3::after,
    .footer-services h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    /* Responsive Floating Contact Buttons */
    .floating-contact-buttons {
        bottom: 20px;
        right: 70px; /* Position beside mobile back-to-top */
        gap: 10px;
        flex-direction: row; /* Ensure horizontal layout is maintained */
    }

    /* No need to adjust position with back-to-top button since they're side by side */
    .back-to-top.visible ~ .floating-contact-buttons {
        bottom: 20px; /* Same level as back-to-top on mobile */
    }

    :root[dir="rtl"] .floating-contact-buttons {
        right: auto;
        left: 70px; /* Position beside mobile back-to-top in RTL */
        flex-direction: row-reverse; /* Change direction for RTL layout */
    }

    .floating-button {
        width: 40px; /* Match mobile back-to-top size */
        height: 40px; /* Match mobile back-to-top size */
    }

    .floating-button i {
        font-size: 16px; /* Match mobile back-to-top icon size */
    }

    /* Contact label mobile styles */
    :root[dir="rtl"] .contact-label {
        position: absolute;
        bottom: 50px;
        left: 20px;
        font-size: 12px;
        margin-right: 0;
    }

    .logo img {
        height: 40px;
    }
}

/* Small Mobile Screens (Up to 575px) */
@media (max-width: 575px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }

    .section-header h2 {
        font-size: 24px;
    }

    .hero-content h1 {
        font-size: 24px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Services Section */
    .tab-short {
        display: none;
    }
    
    .services .section-header h2 {
        font-size: 1.6rem;
    }
    
    .services .section-header h2::after {
        width: 70px;
        height: 4px;
        margin-top: 10px;
    }
    
    .tab-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .service-info h3 {
        font-size: 1.3rem;
    }
    
    .service-info li i {
        font-size: 1rem;
    }

    .service-img img {
        height: 200px;
    }
    
    .service-info .btn-secondary {
        padding: 10px 20px;
        font-size: 14px;
    }

    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 20px;
    }

    .back-to-top i {
        font-size: 16px;
    }
    
    /* Ensure floating buttons have the right position on very small screens */
    .floating-contact-buttons {
        right: 65px; /* Slightly adjusted for very small screens */
    }
    
    :root[dir="rtl"] .floating-contact-buttons {
        left: 65px; /* Slightly adjusted for very small screens */
    }

    .logo img {
        height: 35px;
    }
}

/* For the hamburger menu overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 997;
    display: none;
}

.menu-overlay.active {
    display: block;
}

/* Orientation: Landscape mode fixes */
@media (max-height: 500px) and (orientation: landscape) {
    .nav-links {
        padding-top: 60px;
        overflow-y: auto;
    }

    .nav-links a {
        padding: var(--spacing-sm) 0;
    }

    .hero {
        min-height: auto;
        padding: 100px 0 50px;
    }
}

/* Medium Height Screens */
@media (max-height: 700px) {
    .hero {
        min-height: auto;
        padding: 100px 0 50px;
    }
}

/* Dark Mode Support is now applied by default */