/* Reset Styles */
                * {
                    margin: 0;
                    padding: 0;
                }

                body {
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 16px;
                    line-height: 1.5;
                    letter-spacing: 1px;
                    /* Improves readability */
                }

                img {
                    max-width: 100%;
                    height: auto;
                }

                .text-center {
                    text-align: center;
                }

                /* Container fluid */
                .container-fluid {
                    width: 100%;
                    margin: auto;
                    max-width: 100%;
                }

                /* Container for layout */
                .container {
                    width: 1140px;
                    margin: auto;
                    max-width: 100%;
                    /* Prevents menu from overlapping content */
                }

                /* Row */
                .row {
                    display: flex;
                    flex-wrap: wrap;
                    /* Spacing fix */
                }

                /* Column */
                .col {
                    padding: 10px;
                    flex: 1;
                    /* Default to equal width */
                }

                /* Default column sizes (Mobile-first) */
                .col-12 {
                    flex: 0 0 100%;
                    max-width: 100%;
                }

                .col-6 {
                    flex: 0 0 100%;
                    max-width: 100%;
                }

                /* Full width on small screens */
                .col-4 {
                    flex: 0 0 100%;
                    max-width: 100%;
                }

                .col-3 {
                    flex: 0 0 100%;
                    max-width: 100%;
                }

                .col-9 {
                    flex: 0 0 100%;
                    max-width: 100%;
                }

                /* Tablet (≥ 768px) */
                @media (min-width: 768px) {
                    .col-9 {
                        flex: 0 0 50%;
                        max-width: 50%;
                    }

                    .col-6 {
                        flex: 0 0 50%;
                        max-width: 50%;
                    }

                    /* Two columns */
                    .col-4 {
                        flex: 0 0 50%;
                        max-width: 50%;
                    }

                    .col-3 {
                        flex: 0 0 50%;
                        max-width: 50%;
                    }
                }

                /* Desktop (≥ 1024px) */
                @media (min-width: 1024px) {
                    .col-9 {
                        flex: 0 0 75%;
                        max-width: 75%;
                    }

                    .col-6 {
                        flex: 0 0 50%;
                        max-width: 50%;
                    }

                    .col-4 {
                        flex: 0 0 33.33%;
                        max-width: 33.33%;
                    }

                    /* Three columns */
                    .col-3 {
                        flex: 0 0 25%;
                        max-width: 25%;
                    }

                    /* Four columns */
                }

                /* Box Styling */
                .box {
                    padding: 20px;
                }