@media (max-width: 767px) {
    .section-header {
        flex-direction: column;
        padding: 50px;
    }
    .domain button {
        width: auto
    }
    .domain button a{
        font-size: 12pt;
    }
    .subdomain h1 {
        font-size: 25pt;
    }
    
    .subdomain p {
        width: 100%;
        text-align: justify;
    }
    .subdomain button {
    font-size: 10pt;
    padding: 15px 0;
    }
    .domain h2 {
        font-size: 15pt;
        text-align: left;
    }
    .know-more a {
        font-size: 13pt;
    }
    .topics {
        padding-bottom: 50px;
    }
    .topics button {
        display: flex;
        flex-direction: column;
        width: 50%;
        font-size: 12pt;
        margin: 5px;
    }
    .topic-section {
        display: none;
        margin: 20px;
    }    
    main {
        padding: 50px;
    }

    #section-topic1 h2, #section-topic2 h2, #section-topic3 h2 {
        font-size: 20pt;
    }
    
    #section-topic1 p, #section-topic2 p, #section-topic3 p {
        text-align: left;
        font-size: 12pt;
    }
    #section-topic3 ul {
        flex-direction: column;
        justify-content: none;
        gap: 5px;
    }
    #section-topic3 ul li a{
        font-size: 12pt;
    }
    .scrollmobile {
        display: block;
    }
    .slider {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50px;
        scrollbar-width: none;
    }

    .slider::-webkit-scrollbar {
        display: none;
    }

    .thumbnail {
        flex: 0 0 100%; 
        scroll-snap-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .thumbnail-info {
        width: 100%;
    }
    
    #thumbnail-description {
        font-size: 12pt;
    }
    .thumbnail img:hover {
    transform: none;
    }
    .thumbnail.active {
        transform: none;
    }
    .slider.hover-slider {
        width: 100%;
    }

    .slider-images {
        width: 100%;
    }
    
    .slider-images img {
        aspect-ratio: 9 / 16;
    }
    
    .slider-btn {
        top: 40%;
    }
        
    .image-overlay h3 {
        padding: 10px;
        font-size: 12pt;
    }
    
    .image-overlay p {
        font-size: 8pt;
        width: 60%;
    }
    
    .hero-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio:  9 / 12;
    }
    
    .hero-overlay h2 {
        font-size:16pt;
    }
    
    .hero-overlay p {
        width: 80%;
        font-size: 12pt;
    }
}