@media (min-width: 1921px) {
            .hero {
                display: flex;
                flex-direction: column;
                height: auto;
                margin: 150px 0;
                gap: 20px;
                text-align: left;
                padding: 0px 300px;
            }

            details {
                text-align: left;
                padding: 12px 16px;
                width: 100%;
                transition: background 1s ease;
            }

            strong {
                font-weight: 500;
            }

            summary {
                font-weight: 500;
                list-style: none;
                cursor: default
            }


            details[open] {
                background: #f0f0f0;
            }
        }
        @media (max-width: 1920px) {
            .hero {
                display: flex;
                flex-direction: column;
                height: auto;
                margin: 150px 0;
                gap: 20px;
                text-align: left;
                padding: 0px 300px;
            }

            details {
                text-align: left;
                padding: 12px 16px;
                width: 100%;
                transition: background 1s ease;
            }

            strong {
                font-weight: 500;
            }

            summary {
                font-weight: 500;
                list-style: none;
                cursor: default
            }


            details[open] {
                background: #f0f0f0;
            }
        }
        @media (max-width: 1440px) {
            .hero {
                display: flex;
                flex-direction: column;
                height: auto;
                margin: 150px 0;
                gap: 20px;
                text-align: left;
                padding: 0px 200px;
            }

            details {
                text-align: left;
                padding: 12px 16px;
                width: 100%;
                transition: background 1s ease;
            }

            strong {
                font-weight: 500;
            }

            summary {
                font-weight: 500;
                list-style: none;
                cursor: default
            }


            details[open] {
                background: #f0f0f0;
            }
        }
        @media (max-width: 1280px) {
            .hero {
                display: flex;
                flex-direction: column;
                height: auto;
                margin: 150px 0;
                gap: 20px;
                text-align: left;
                padding: 0px 100px;
            }

            details {
                text-align: left;
                padding: 12px 16px;
                width: 100%;
                transition: background 1s ease;
            }

            strong {
                font-weight: 500;
            }

            summary {
                font-weight: 500;
                list-style: none;
                cursor: default
            }


            details[open] {
                background: #f0f0f0;
            }
        }
        @media (max-width: 1040px) {
            .hero {
                display: flex;
                flex-direction: column;
                height: auto;
                margin: 150px 0;
                gap: 20px;
                text-align: left;
                padding: 0px 40px;
            }

            details {
                text-align: left;
                padding: 12px 16px;
                width: 100%;
                transition: background 1s ease;
            }

            strong {
                font-weight: 500;
            }

            summary {
                font-weight: 500;
                list-style: none;
                cursor: default
            }


            details[open] {
                background: #f0f0f0;
            }
        }