/* =====================================
   ADIL ORDA - Responsive Styles
===================================== */

@media (max-width: 1500px) {
    .container {
        width: 92%;
    }

    .hero,
    .about-image,
    .products-banner-image,
    .contacts-hero,
    .contacts-hero img {
        width: 92%;
        max-width: 1450px;
    }

    .hero {
        height: auto;
        aspect-ratio: 1450 / 780;
    }
}

@media (max-width: 1200px) {
    .header .container {
        width: 96%;
        gap: 18px;
    }

    .navigation ul {
        gap: 20px;
    }

    .navigation a {
        font-size: 15px;
    }

    .header-buttons a {
        padding: 10px 12px;
        font-size: 14px;
    }

    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }

    .product-card {
        width: 100%;
        max-width: 320px;
    }
}

/* Tablets and small laptops */
@media (max-width: 991px) {
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: 94%;
        padding: 0;
    }

    .header {
        position: static;
    }

    .header .container {
        flex-direction: column;
        gap: 16px;
        padding: 14px 0;
    }

    .navigation,
    .navigation ul,
    .header-buttons {
        width: 100%;
    }

    .logo img {
        height: 72px;
    }

    .navigation ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 20px;
    }

    .header-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .hero,
    .products-banner,
    .contacts-hero,
    .rfq-section {
        margin-top: 28px;
    }

    .hero {
        width: 94%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .slide img {
        object-fit: cover;
        object-position: center;
    }

    .about-page .container {
        margin: 32px auto;
    }

    .about-image {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .about-page h1,
    .products-title,
    .rfq-title {
        font-size: 34px;
    }

    .about-page p,
    .about-list,
    .products-subtitle,
    .rfq-subtitle {
        font-size: 18px;
        line-height: 1.65;
    }

    .products {
        padding: 45px 0;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        justify-items: stretch;
    }

    .products-grid-top,
    .products-grid-bottom {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        transform: none;
    }

    .rfq-section,
    .transport-request {
        width: 94%;
        padding: 28px;
    }

    .rfq-form input,
    .rfq-form select,
    .rfq-form textarea,
    .request-table input,
    .request-table select,
    .request-table textarea,
    .contact-form input,
    .contact-form textarea {
        min-width: 0;
        max-width: 100%;
    }

    .contact-card {
        width: 94%;
        border-radius: 12px;
    }
}

/* Phones */
@media (max-width: 600px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }

    body {
        font-size: 16px;
    }

    .container {
        width: 100%;
        padding: 0 16px;
    }

    .header .container {
        align-items: stretch;
        padding: 12px 16px;
    }

    .logo {
        text-align: center;
    }

    .logo img {
        width: auto;
        max-width: 190px;
        height: 64px;
    }

    .navigation ul {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 0;
    }

    .navigation li {
        list-style: none;
    }

    .navigation a {
        display: block;
        padding: 10px 12px;
        border: 1px solid #e8ece9;
        border-radius: 8px;
        text-align: center;
        font-size: 16px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .header-buttons {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .header-buttons a {
        width: 100%;
        border-radius: 8px;
        text-align: center;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .hero {
        width: 100%;
        margin: 18px 0 0;
        border-radius: 0;
        aspect-ratio: 4 / 3;
    }

    .slide img {
        object-fit: cover;
    }

    .about-page .container {
        margin: 24px auto;
    }

    .about-page h1,
    .products-title,
    .rfq-title {
        font-size: 28px;
        line-height: 1.2;
    }

    .about-page h2,
    .contact-card h2,
    .transport-request h2,
    .contact-form h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .about-page p,
    .about-list,
    .products-subtitle,
    .rfq-subtitle {
        font-size: 16px;
        line-height: 1.6;
    }

    .about-image,
    .products-banner-image,
    .contacts-hero img {
        width: 100%;
        border-radius: 0;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .products-banner,
    .contacts-hero {
        margin: 18px auto 24px;
    }

    .products {
        padding: 28px 0;
    }

    .products-grid,
    .products-grid-top,
    .products-grid-bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
        transform: none;
        justify-items: stretch;
    }

    .product-card {
        width: 100%;
        max-width: none;
        border-radius: 10px;
    }

    .product-card img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .product-card h3 {
        padding: 14px;
        font-size: 22px;
    }

    .details-btn,
    .quote-product-btn,
    .submit-btn,
    .contact-form button {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .product-details {
        padding: 18px;
        font-size: 15px;
    }

    .rfq-section,
    .transport-request {
        width: 100%;
        margin: 18px auto 32px;
        padding: 20px 16px;
        border-radius: 0;
        box-shadow: none;
    }

    .rfq-form h2 {
        margin: 28px 0 16px;
        font-size: 22px;
    }

    .rfq-form input,
    .rfq-form select,
    .rfq-form textarea,
    .request-table input,
    .request-table select,
    .request-table textarea,
    .contact-form input,
    .contact-form textarea {
        font-size: 16px;
        min-width: 0;
        max-width: 100%;
    }

    .rfq-form input[type="file"] {
        padding: 12px 10px;
        font-size: 14px;
        line-height: 1.4;
        overflow: hidden;
    }

    .rfq-form input[type="radio"],
    .rfq-form input[type="checkbox"] {
        flex: 0 0 auto;
        margin-top: 2px;
    }

    .rfq-form label:has(input[type="radio"]),
    .rfq-form label:has(input[type="checkbox"]) {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        line-height: 1.4;
    }

    .request-table,
    .request-table tbody,
    .request-table tr,
    .request-table td {
        display: block;
        width: 100%;
    }

    .request-table tr {
        margin-bottom: 12px;
    }

    .request-table td {
        border: 0;
        padding: 6px 0;
    }

    .request-table td:first-child {
        width: 100%;
        background: transparent;
    }

    .form-row {
        flex-direction: column;
        gap: 14px;
    }

    .contact-form {
        margin: 28px auto;
        padding: 0;
    }

    .contact-card {
        width: 100%;
        margin: 18px auto 0;
        padding: 24px 16px;
        border-radius: 0;
    }

    .contact-card p {
        font-size: 16px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    iframe {
        width: 100%;
        height: 300px;
    }

    footer {
        padding: 22px 16px;
        font-size: 14px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }
}

/* Very small phones */
@media (max-width: 420px) {
    .container {
        padding: 0 12px;
    }

    .header .container {
        padding: 10px 12px;
    }

    .logo img {
        max-width: 165px;
        height: 56px;
    }

    .navigation a,
    .header-buttons a {
        padding: 9px 10px;
        font-size: 15px;
    }

    .hero,
    .about-image,
    .products-banner-image,
    .contacts-hero img {
        aspect-ratio: 1 / 1;
    }

    .about-page h1,
    .products-title,
    .rfq-title {
        font-size: 25px;
    }

    .rfq-section,
    .transport-request {
        padding: 18px 12px;
    }

    .rfq-form h2 {
        font-size: 20px;
    }

    .rfq-form input,
    .rfq-form select,
    .rfq-form textarea,
    .contact-form input,
    .contact-form textarea {
        padding: 12px;
    }

    .submit-btn {
        padding: 14px 12px;
        font-size: 16px;
    }
}