@media (max-width: 768px) {
    .header {
        flex-direction: column;
        padding: 15px 20px;
        text-align: center;
    }

    .menu {
        margin-top: 10px;
    }

.menu a {
font-size: small;
}

    .banner {
        height: 200px !important;
        padding-top: 20px;
        padding: 20px 30px;
    }

    h1 {
        font-size: 1rem;
    }

    .banner h1 {
        font-size: 1.2rem;
    }

    .banner p {
        font-size: 0.8rem;
    }

    .banner button {
        font-size: 0.9rem;
        padding: 8px 15px;
    }

    .content-section {
        flex-direction: column;
        padding: 30px 20px;
        gap: 20px;
    }

    .left .advert img,
    .left .customer img {
        max-height: 250px;
    }

    .left,
    .right {
        flex: 100%;
        text-align: center;
    }

    .left .overlay {
        max-width: 90%;
        text-align: center;
    }

    .left .overlay h2 {
        font-size: 1.6rem;
    }

    .left .overlay p {
        font-size: 1rem;
    }

    .left .overlay button {
        font-size: 0.9rem;
        padding: 8px 15px;
    }

    .right h2 {
        font-size: 1.6rem;
        text-align: center;
    }

    .right p {
        font-size: 1rem;
        text-align: center;
    }

    .image-section {
        display: flex;
        gap: 10px;
        padding: 60px 10px;
    }

    table {
        font-size: 1rem;
    }

    .dropdown label {
        font-size: 1.2rem;
        padding: 15px;
    }

    .dropdown .content {
        padding: 15px;
    }

    .review-section {
        padding: 0px 0px;
    }

    .review-section h1 {
        font-size: 1.5rem;
        text-align: center;
    }

    .info-sections {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .info-section {
        width: 100%;
        text-align: center;
        flex-direction: column;
        align-items: center;
    }

    .cards-section {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

.card {
width: 300px;
}

    .marketing-points {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        font-size: 18px;
    }

    .more-info-section {
        margin-top: 20px;
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

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

    .info-container h1 {
        font-size: 1.5rem;
    }

    .info-container p {
        font-size: 1rem;
    }

    .info-container button {
        font-size: 0.9rem;
        padding: 8px 15px;
    }

    footer .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-section {
        width: 100%;
        margin-bottom: 10px;
    }

    .footer-section.left img {
        max-width: 150px;
    }

    .footer-section.right nav {
        display: none;
    }

    .watermark {
        margin-top: 20px;
        text-align: center;
    }

    .watermark img {
        max-width: 120px;
    }

#flip {
    height: 45px;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
}

#flip > div > div {
    color: var(--button-blue);
    padding: 0px 8px;
    height: 45px;
    margin-bottom: 45px;
    display: inline-block;
    font-weight: bold;
}

#flip div:first-child {
    animation: show 8s linear infinite;
}

@keyframes show {
    0% { margin-top: -30px; }
    40% { margin-top: -30px; }
    50% { margin-top: -0px; }
    90% { margin-top: -0px; }
    100% { margin-top: -30px; }
}

.dsu-container {
      height: 220px;
    }

    .dsu-text {
      max-width: 80%;
    }

    .dsu-text h1 {
      font-size: 30px;
    }

    .dsu-text p {
      font-size: 15px;
    }

    .dsu-badge {
      position: absolute;
      bottom: 30px;
      right: 30px;
      width: 100px;
      height: auto;
    }
}