/* firearms.css - Default CSS layout */

/* Reset some basic elements */
    body, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

/* Body styling */
    body {
        background-color: blanchedalmond;
        width: 100%;
        font-family: "Chakra Petch", sans-serif;
    }

    h1 {
        font-size: 30px;
        text-align: center;
        font-family: "Chakra Petch", sans-serif;
    }

    h2 {
        font-size: 30px;
        text-align: center;
        font-family: "Chakra Petch", sans-serif;
        color: red;
    }

    h3 {
        font-size: 20px;
        font-family: "Chakra Petch", sans-serif;
    }

    ol {
        list-style-type: decimal;
        width: 50%;
        margin: 0 auto;
        padding-left: 2%;
        padding-top: 1%;
        font-weight: bold;
        font-size: 25px;
        font-family: "Chakra Petch", sans-serif;
        line-height: 150%;
    }

    li {
        padding-left: 10px;
    }

    .container {
        background: greenyellow;
        margin: 1%;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 5px 5px 5px rgba(0,0,0,0.1);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 15px;
        box-sizing: border-box;
    }

    .site-footer {
        background: greenyellow;
        border-radius: 10px;
        width: 1000px;
        max-width: 100%;
        margin: 5px auto 20px auto;
        padding: 15px 20px;
        box-shadow: 0 5px 5px 5px rgba(0,0,0,0.1);
        text-align: center;
        font-family: "Chakra Petch", sans-serif;
        font-size: 14px;
        color: #333;
        box-sizing: border-box;
    }

    .site-footer a {
        color: #0645AD;
        text-decoration: underline;
    }

    .site-footer a:hover {
        color: #0b0080;
    }

    .logo img {
        height: 150px;
        width: auto;
    }

    .heading_text {
        /* background-color:blue; */
        width: auto;
        margin-left: 0;
        text-align: center;
    }

    .site-title {
        font-size: 80px;
    }

    .brand_container {
        background: greenyellow;
        margin: 1%;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 5px 5px 5px rgba(0,0,0,0.1);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .brand2_container {
        background: greenyellow;
        margin: 1%;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 5px 5px 5px rgba(0,0,0,0.1);
    }

    .brand1 {
        /* background-color: turquoise; */
        border: 1px solid black;
        padding: 5px;
    }

    .brand1:hover img {
        transform: scale(1.075);
    }

    .brand2 {
        /* background-color:aquamarine; */
        border: 1px solid black;
        padding: 5px;
    }

    .brand2:hover img {
        transform: scale(1.075);
    }

    .brand3 {
        /* background-color:blue; */
        border: 1px solid black;
        padding: 5px;
    }

    .brand3:hover img {
        transform: scale(1.075);
    }

    .brand4 {
        /* background-color:blueviolet; */
        border: 1px solid black;
        padding: 5px;
    }

    .brand4:hover img {
        transform: scale(1.075);
    }

    .brand5 {
        /* background-color:brown; */
        border: 1px solid black;
        padding: 5px;
    }

    .brand5:hover img {
        transform: scale(1.075);
    }

    .brand6 {
        /* background-color:burlywood; */
        border: 1px solid black;
        padding: 5px;
    }

    .brand6:hover img {
        transform: scale(1.075);
    }

    .home_link {
        text-align: center;
        margin-top: 30px;
        font-size: 20px;
        font-family: "Chakra Petch", sans-serif;
        text-decoration: none;
        flex-basis: 100%;
        width: 100%;
    }

    .back_home {
        padding: 1%;
        font-family: "Chakra Petch", sans-serif;
        font-size: 20px;
        font-weight: bold;
        color: blue;
        text-decoration: none;
        cursor: pointer;
    }

    .back_home:hover {
        padding: 1%;
        font-family: "Chakra Petch", sans-serif;
        font-size: 20px;
        font-weight: bold;
        color: blue;
        text-decoration: none;
    }

    .brand_container2 {
        background: greenyellow;
        margin: 1%;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 5px 5px 5px rgba(0,0,0,0.1);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .brand7 {
        /* background-color: turquoise; */
        border: 1px solid black;
        padding: 5px;
    }

    .brand7:hover img {
        transform: scale(1.075);
    }

    .brand8 {
        /* background-color:aquamarine; */
        border: 1px solid black;
        padding: 5px;
    }

    .brand8:hover img {
        transform: scale(1.05);
    }

    .brand9 {
        /* background-color:blue; */
        padding: 5px;
    }

    .brand9:hover img {
        transform: scale(1.075);
    }

    .brand10 {
        /* background-color:blueviolet; */
        padding: 5px;
    }

    .brand10:hover img {
        transform: scale(1.075);
    }

    .brand11 {
        /* background-color:brown; */
        padding: 5px;
    }

    .brand11:hover img {
        transform: scale(1.075);
    }

    .brand12 {
        /* background-color:burlywood; */
        padding: 5px;
    }

    .brand12:hover img {
        transform: scale(1.075);
    }

    .firearms {
        text-align: center;
    }

    .firearms img {
        width: 700px;
        max-width: 100%;
        height: auto;
    }

    td {
        text-align: left;
        border: 3px solid #ccc;
    }

    table {
        margin: 20px auto;
        border-collapse: collapse;
        border: 3px solid #ccc;
    }

    td:first-child {
        min-width: 300px;
    }

    /* Safety net so any oversized source logo/photo can't force horizontal
       page overflow on narrow screens. */
    .brand1 img, .brand2 img, .brand3 img, .brand4 img, .brand5 img, .brand6 img,
    .brand7 img, .brand8 img, .brand9 img, .brand10 img, .brand11 img, .brand12 img {
        max-width: 100%;
        height: auto;
    }

/* ── Small-screen responsiveness (header logo/title, matching index.php etc.) ── */

    @media (max-width: 600px) {
        .container {
            padding: 12px;
        }

        .logo img {
            height: 90px;
        }

        .site-title {
            font-size: 42px;
        }

        table {
            display: block;
            max-width: 100%;
            overflow-x: auto;
        }

        td:first-child {
            min-width: 160px;
        }
    }