/* =========================================
   CONTERCO INDUSTRIES
   RESPONSIVE DESIGN SYSTEM
========================================= */


/* =========================================
   LARGE TABLETS / SMALL LAPTOPS
========================================= */

@media (max-width: 1200px) {

    .container {
        width: 90%;
        max-width: 1100px;
        margin: 0 auto;
    }

    .hero-content {
        max-width: 700px;
    }

    .hero h1 {
        font-size: 48px;
    }

    .product-grid,
    .solution-grid,
    .feature-grid,
    .jobs-grid,{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================
   TABLETS
========================================= */

@media (max-width: 900px) {

    .container {
        width: 90%;
    }

    /* Navigation */

    .nav-links {
        gap: 18px;
    }


    /* Hero */

    .hero {
        padding: 90px 25px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero-content {
        max-width: 650px;
    }


    /* Section headings */

    .section-title {
        font-size: 34px;
    }


    /* Grids */

    .product-grid,
    .solution-grid,
    .feature-grid,
    .jobs-grid,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }


    /* Infrastructure */

    .infrastructure-grid {
        grid-template-columns: 1fr;
    }


    /* Technology */

    .tech-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-heading {
        padding: 80px 20px 25px;
    }

    .section-heading h2 {
        font-size: 36px;
    }

    .job-filter {
        width: 90%;

        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(0, 1fr);

        gap: 12px;
    }

    .jobs-grid {
        width: 90%;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

}


/* =========================================
   MOBILE DEVICES
========================================= */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    .container {
        width: 92%;
        max-width: 100%;
        margin: 0 auto;
    }


    /* =====================================
       NAVIGATION
    ===================================== */

    .menu-toggle {
        display: block;
        cursor: pointer;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;

        width: 100%;

        background: #08121f;

        flex-direction: column;
        align-items: center;

        gap: 0;

        padding: 20px 0;

        display: none;

        z-index: 999;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 20px;
    }


    /* =====================================
       HERO
    ===================================== */

    .hero {
        width: 100%;
        min-height: auto;

        padding: 90px 20px 70px;

        text-align: center;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .hero h1 {
        font-size: 34px;
        line-height: 1.2;

        max-width: 100%;
    }

    .hero p {
        font-size: 16px;
        line-height: 1.6;

        max-width: 100%;
    }


    /* =====================================
       BUTTONS
    ===================================== */

    .hero .btn,
    .hero button {
        width: auto;
        max-width: 100%;
    }

    .btn {
        max-width: 100%;
    }


    /* =====================================
       SECTIONS
    ===================================== */

    section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 28px;
        line-height: 1.25;
    }

    .section-text {
        font-size: 15px;
        line-height: 1.6;
    }


    /* =====================================
       GRIDS
    ===================================== */

    .product-grid,
    .solution-grid,
    .feature-grid,
    .stats-grid,
    .jobs-grid,
    .tech-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }


    /* =====================================
       PRODUCT CARDS
    ===================================== */

    .product-card {
        width: 100%;
        padding: 25px;
        box-sizing: border-box;
    }

    .job-card {
        width: 100%;
        padding: 25px;
        box-sizing: border-box;
    }
    
    .product-card img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }


    /* =====================================
       MODEL PAGES
    ===================================== */

    .model-layout {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .specifications {
        grid-template-columns: 1fr;
    }


    /* =====================================
       TECHNOLOGY
    ===================================== */

    .tech-grid {
        grid-template-columns: 1fr;
    }

    .ai-dashboard {
        width: 100%;
        max-width: 100%;

        transform: scale(0.95);
        transform-origin: center;
    }


    /* =====================================
       FORMS
    ===================================== */

    .contact-form {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .section-heading {
        width: 100%;
        max-width: 100%;

        padding: 65px 20px 25px;

        box-sizing: border-box;
    }

    .section-heading h2 {
        width: 100%;
        max-width: 100%;

        margin: 10px 0 15px;

        font-size: 32px;
        line-height: 1.2;

        text-align: center;

        overflow-wrap: anywhere;
    }

    .section-heading p {
        width: 100%;
        max-width: 100%;

        font-size: 15px;
    }


    /* ===============================
       FILTER
    =============================== */

    .job-filter {
        width: calc(100% - 40px);
        max-width: none;

        margin: 0 20px 30px;

        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;

        box-sizing: border-box;
    }

    .job-filter input,
    .job-filter select {
        display: block;

        width: 100%;
        min-width: 0;
        max-width: 100%;

        box-sizing: border-box;

        padding: 14px;

        font-size: 15px;
    }


    /* ===============================
       JOBS
    =============================== */

    .jobs-grid {
        width: calc(100% - 40px);
        max-width: none;

        margin: 0 20px 40px;

        display: grid;

        grid-template-columns: 1fr;

        gap: 18px;

        box-sizing: border-box;
    }

    .job-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;

        padding: 22px;

        box-sizing: border-box;

        border-radius: 12px;
    }

    .job-card h3 {
        font-size: 22px;
        line-height: 1.3;
    }

    .job-card p,
    .job-card li {
        font-size: 15px;
        line-height: 1.6;
    }

    /* =====================================
       FOOTER
    ===================================== */

    .footer-grid {
        grid-template-columns: 1fr;

        text-align: center;

        gap: 30px;
    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 480px) {

    .container {
        width: 92%;
    }


    /* Logo */

    .logo {
        font-size: 20px;
    }


    /* Hero */

    .hero {
        padding: 75px 16px 55px;
    }

    .hero h1 {
        font-size: 30px;
    }

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


    /* Headings */

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }


    /* Cards */

    .card {
        padding: 18px;
        box-sizing: border-box;
    }

    .spec-card {
        padding: 15px;
        box-sizing: border-box;
    }


    /* Buttons */

    .btn {
        max-width: 100%;
    }


    /* Forms */

    input,
    textarea,
    select {
        max-width: 100%;
        box-sizing: border-box;
    }

    .section-heading {
        padding: 55px 15px 20px;
    }

    .section-heading h2 {
        font-size: 28px;
    }

    .section-heading p {
        font-size: 14px;
    }


    .job-filter {
        width: calc(100% - 30px);

        margin-left: 15px;
        margin-right: 15px;
    }

    .jobs-grid {
        width: calc(100% - 30px);

        margin-left: 15px;
        margin-right: 15px;
    }

    .job-card {
        padding: 18px;
    }

    .job-card h3 {
        font-size: 20px;
    }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 360px) {

    .container {
        width: 94%;
    }

    .hero {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero h1 {
        font-size: 27px;
    }

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

    .section-title {
        font-size: 25px;
    }

    .product-card {
        padding: 20px;
    }

    .section-heading {
        padding-left: 12px;
        padding-right: 12px;
    }

    .section-heading h2 {
        font-size: 25px;
    }

    .job-filter {
        width: calc(100% - 24px);

        margin-left: 12px;
        margin-right: 12px;
    }

    .jobs-grid {
        width: calc(100% - 24px);

        margin-left: 12px;
        margin-right: 12px;
    }

    .job-card {
        padding: 16px;
    }

}


/* =========================================
   ULTRA LARGE SCREENS
========================================= */

@media (min-width: 1600px) {

    .container {
        width: 90%;
        max-width: 1400px;
        margin: 0 auto;
    }

    .hero h1 {
        font-size: 70px;
    }

}