/*
 * responsive.css
 *
 * This file contains responsive adjustments for HitekSoftware website.
 * It's consolidated from all previously generated HTML pages.
 */

/* ==================== General Responsive Adjustments ==================== */
@media (max-width: 1200px) {
    .container {
        padding: 0 25px; /* Increase padding on larger screens just slightly */
    }
}

/* ==================== Tablet & Smaller Desktop Adjustments (max-width: 1024px) ==================== */
@media (max-width: 1024px) {
    /* Header & Navigation */
    .main-header .container {
        padding: 0 20px; /* Ensure padding on sides */
    }
    .main-nav .nav-links {
        gap: 20px; /* Slightly reduced gap for more items */
    }
    .main-nav .nav-links li a,
    .main-nav .nav-links li .btn-primary {
        font-size: 0.9em; /* Further slightly smaller font size */
    }

    /* Hero Sections */
    .hero-section, .page-hero {
        height: 450px; /* Slightly shorter hero */
    }
    .hero-content h1 {
        font-size: 3.2em;
    }
    .hero-content p {
        font-size: 1.1em;
    }
    .page-hero {
        height: 300px;
    }
    .page-hero .hero-content h1 {
        font-size: 2.8em;
    }

    /* General Section Padding & Titles */
    .section {
        padding: 60px 0;
    }
    .section-title {
        font-size: 2.2em;
    }
    .section-subtitle {
        font-size: 1em;
        margin-bottom: 40px;
    }

    /* Content Two Columns */
    .content-two-col {
        flex-direction: column; /* Stack columns on tablets */
        gap: 40px;
        text-align: center;
    }
    .content-two-col .text-content {
        text-align: center;
    }
    .content-two-col .text-content h2 {
        text-align: center;
        font-size: 2.2em;
    }
    .content-two-col.reverse-cols {
        flex-direction: column; /* Keep stacked, no reverse */
    }

    /* Index Page Sections */
    .service-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
    .service-card {
        padding: 25px;
    }
    .service-card h3 {
        font-size: 1.6em;
    }

    .testimonial-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
    .testimonial-card {
        padding: 25px;
    }
    .testimonial-text {
        font-size: 1em;
    }

    .partners-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 30px;
    }

    .section-cta {
        padding: 80px 0;
    }
    .cta-content h2 {
        font-size: 2.5em;
    }
    .cta-content p {
        font-size: 1.1em;
    }

    /* Contact Page */
    .contact-form-grid {
        grid-template-columns: 1fr; /* Stack columns on smaller tablets */
        gap: 40px;
        margin-bottom: 60px;
    }
    .contact-form,
    .contact-info-block {
        padding: 30px; /* Slightly less padding */
    }
    .contact-form h3,
    .contact-info-block h3 {
        font-size: 1.6em;
        margin-bottom: 25px;
    }
    .map-placeholder {
        height: 350px; /* Shorter map on tablets */
    }

    /* About Page */
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
    }
    .team-member-card {
        padding: 25px;
    }
    .team-member-card img {
        width: 130px;
        height: 130px;
    }
    .team-member-card h3 {
        font-size: 1.5em;
    }

    /* Products Page */
    .product-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Scale down min width */
        gap: 25px;
    }
    .product-card {
        padding: 25px;
    }
    .product-card h3 {
        font-size: 1.6em;
    }

    /* Solutions Page */
    .solution-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Scale down min width */
        gap: 25px;
    }
    .solution-card {
        padding: 30px;
    }
    .solution-card h3 {
        font-size: 1.5em;
    }

    /* Industry Page */
    .industry-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Scale down min width */
        gap: 25px;
    }
    .industry-card {
        padding: 30px;
    }
    .industry-card h3 {
        font-size: 1.5em;
    }

    /* Careers Page */
    .benefits-grid,
    .job-listings-container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }

    .benefit-item {
        padding: 25px;
    }
    .benefit-item h4 {
        font-size: 1.2em;
    }

    .job-listing-card {
        padding: 25px;
    }
    .job-listing-card h3 {
        font-size: 1.5em;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 30px;
    }
}

/* ==================== Mobile Adjustments (max-width: 768px) ==================== */
@media (max-width: 768px) {
    /* Header & Navigation */
    .main-nav .nav-links {
        display: none; /* Hide desktop nav */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 75px; /* Below header */
        left: 0;
        background-color: #fff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        padding: 10px 0;
        border-radius: 0 0 8px 8px;
    }

    .main-nav .nav-links.active {
        display: flex; /* Show mobile nav when active */
    }

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

    .main-nav .nav-links li a {
        padding: 12px 20px; /* More padding for touch targets */
        width: 100%;
        font-size: 1.1em;
        box-sizing: border-box; /* Include padding in width */
    }

    .main-nav .nav-links .dropdown {
        position: static; /* Dropdowns become part of the flow */
        box-shadow: none;
        transform: none;
        opacity: 1;
        visibility: visible;
        padding: 0;
        min-width: unset;
        width: 100%;
        border-radius: 0;
        background-color: #f0f0f0; /* Slightly different background for dropdown */
    }

    .main-nav .nav-links .dropdown li a {
        padding-left: 40px; /* Indent dropdown items */
        font-size: 1em;
    }

    .main-nav .nav-links li .btn-primary {
        margin: 15px 20px; /* Space and indent for mobile button */
        width: calc(100% - 40px); /* Adjust width for padding */
        text-align: center;
        box-sizing: border-box;
    }

    .menu-toggle {
        display: flex; /* Show hamburger icon on mobile */
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Hero Sections */
    .hero-section, .page-hero {
        height: 400px;
    }
    .hero-content h1 {
        font-size: 2.5em;
    }
    .hero-content p {
        font-size: 1em;
        margin: 0 auto 30px;
    }
    .hero-buttons .btn {
        display: block;
        width: 80%;
        margin: 15px auto;
    }
    .page-hero {
        height: 250px;
    }
    .page-hero .hero-content h1 {
        font-size: 2.2em;
    }
    .page-hero .hero-content p {
        font-size: 0.95em;
    }

    /* General Section Padding & Titles */
    .section {
        padding: 40px 0;
    }
    .section-title {
        font-size: 2em;
    }
    .section-subtitle {
        font-size: 0.95em;
        margin-bottom: 30px;
    }

    /* Content Two Columns */
    .content-two-col {
        gap: 30px;
    }
    .content-two-col .text-content h2 {
        font-size: 2em;
    }
    .content-two-col .text-content p {
        font-size: 0.95em;
    }
    .content-two-col ul li {
        font-size: 0.95em;
    }

    /* Index Page Sections */
    .service-cards-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 20px;
    }
    .service-card {
        padding: 20px;
    }
    .service-card h3 {
        font-size: 1.4em;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .testimonial-card {
        padding: 20px;
    }
    .testimonial-text {
        font-size: 0.95em;
    }

    .partners-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
        gap: 20px;
    }
    .partner-logo img {
        max-height: 60px;
    }

    .section-cta {
        padding: 60px 0;
    }
    .cta-content h2 {
        font-size: 2.2em;
    }
    .cta-content p {
        font-size: 1em;
    }
    .cta-content .btn {
        width: 80%;
        margin: 0 auto;
        display: block;
    }

    /* Contact Page */
    .contact-form-grid {
        gap: 30px;
        margin-bottom: 40px;
    }
    .contact-form,
    .contact-info-block {
        padding: 25px; /* Even less padding on mobile */
    }
    .map-placeholder {
        height: 300px; /* Even shorter map on mobile */
        font-size: 1em;
    }
    .contact-info-block .social-links {
        justify-content: center; /* Center social icons on mobile */
    }
    .contact-form .btn-primary {
        width: 100%;
    }

    /* About Page */
    .team-grid {
        grid-template-columns: 1fr; /* Stack members vertically on mobile */
        gap: 25px;
    }
    .team-member-card img {
        width: 120px;
        height: 120px;
    }

    /* Products Page */
    .product-cards-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 25px;
    }
    .product-card {
        padding: 20px;
    }
    .product-card h3 {
        font-size: 1.4em;
    }
    .product-card img {
        height: 180px; /* Slightly shorter on mobile */
    }

    /* Solutions Page */
    .solution-cards-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 25px;
    }
    .solution-card {
        padding: 25px;
    }
    .solution-card h3 {
        font-size: 1.4em;
    }

    /* Industry Page */
    .industry-cards-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 25px;
    }
    .industry-card {
        padding: 25px;
    }
    .industry-card h3 {
        font-size: 1.4em;
    }

    /* Careers Page */
    .benefits-grid,
    .job-listings-container {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 20px;
    }
    .benefit-item {
        padding: 20px;
    }
    .benefit-item img {
        width: 50px;
        height: 50px;
    }
    .job-listing-card .btn-outline {
        width: 100%; /* Full width button on mobile */
        text-align: center;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr; /* Stack footer columns */
        gap: 20px;
        text-align: center;
    }
    .footer-col.about-col {
        text-align: center;
    }
    .social-links {
        justify-content: center;
    }
    .footer-col h4 {
        margin-bottom: 15px;
    }
    .footer-bottom {
        margin-top: 20px;
    }
}