/* Responsive Styles */
@media (max-width: 768px) {
    /* Hide Hero Section and About Section images on mobile */
    .hero-image,
    .image-wrapper,
    .hero-img,
    .curved-bg {
        display: none !important;
    }

    /* Hide about section image */
    .about-image {
        display: none !important;
    }

    /* Center text content when images are hidden */
    .hero-content,
    .about-section {
        text-align: center;
    }

    /* Hero Section */
    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .image-wrapper {
        margin-top: 2rem;
    }

    .curved-bg {
        border-radius: 20px;
    }

    .hero-img {
        border-radius: 20px;
    }

    /* Flash News */
    .news-ticker {
        flex-direction: column;
        text-align: center;
    }

    .news-label {
        border-right: none;
        border-bottom: 2px solid rgba(255, 255, 255, 0.3);
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .news-content {
        padding-left: 0;
    }

    /* About Section */
    .about-image {
        margin-bottom: 40px;
    }

    .experience-box {
        bottom: -20px;
        left: 15px;
        width: 140px;
        padding: 20px;
    }

    /* Feedback Section */
    .feedback-box {
        text-align: center;
    }

    .carousel-indicators {
        left: 50%;
        transform: translateX(-50%);
    }

    /* Contact Section */
    .contact-section {
        margin: 0;
        border-radius: 0;
        padding: 60px 0;
    }

    .contact-form {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        padding: 30px 20px;
        margin: 30px 0;
    }

    .btn-submit,
    .btn-outline-light {
        width: 100%;
    }

    /* Hide shapes on mobile for clarity */
    .bg-shape {
        display: none;
    }

    .bg-pattern {
        background-size: 35px 35px;
    }
}

@media (max-width: 576px) {
    .about-section {
        text-align: center;
    }

    .green-frame {
        display: none;
    }

    .experience-box {
        position: relative;
        margin: 20px auto 0;
        left: 0;
        bottom: 0;
    }

    .social-links {
        justify-content: center;
    }
}