/* General Reset */
a {
    text-decoration: none;
}

/* Responsive Typography */
html {
    font-size: 62.5%; /* Default: 10px = 1rem */
}

@media (max-width: 1200px) {
    html {
        font-size: 56.25%; /* 9px = 1rem */
    }
}

@media (max-width: 992px) {
    html {
        font-size: 50%; /* 8px = 1rem */
    }
}

@media (max-width: 768px) {
    html {
        font-size: 43.75%; /* 7px = 1rem */
    }
}

@media (max-width: 576px) {
    html {
        font-size: 37.5%; /* 6px = 1rem */
    }
}

/* Responsive Layout Adjustments */
#topic {
    font-size: 2rem;
    height: auto;
    padding: 1rem;
}

#blogs {
    margin: 3rem 0;
}

#p1 {
    width: 90%;
    margin: 2rem auto;
    min-height: 20rem;
}

#p1:nth-of-type(even) {
    margin-left: auto;
}

#para {
    font-size: 1.2rem;
    height: auto;
    padding: 1rem;
}

.custom-btn {
    width: 8rem;
    height: 2.5rem;
    font-size: 1.2rem;
}

.author,
.Publish {
    font-size: 1.4rem;
    margin: 1rem auto;
    text-align: left;
    box-shadow: none;
}

.slider {
    flex-wrap: wrap;
    height: auto;
    padding: 1rem;
}

.anm {
    width: 100%;
    height: auto;
}

.slider div img {
    height: auto;
    width: 100%;
}

#sp {
    font-size: 1.5rem;
    padding: 1rem;
}

#x,
#y {
    float: none;
    width: 100%;
    margin: 1rem 0;
    border: none;
}

#img1 {
    min-height: auto;
    width: 30%;
    border-radius: 10px 10px 0 0;
    margin: 0 auto;
    box-shadow: 0 0 5px rgb(0, 0, 0);
    transition: transform 0.3s ease;
    cursor: pointer;
}
#img1:hover {
    transform: scale(1.05);
}
#img1:active {
    transform: scale(0.95);
}


#btn button {
    font-size: 1.5rem;
    padding: 0.5rem;
}

/* Responsive Carousel */
@media (max-width: 968px) {
    #p1 {
        width: 85%;
    }

    #p1:nth-of-type(even) {
        margin-left: 7.5%;
    }

    .batch .items {
        width: 18rem;
    }
}

@media (max-width: 768px) {
    #p1 {
        width: 95%;
    }

    #p1:nth-of-type(even) {
        margin-left: 2.5%;
    }

    .author,
    .Publish {
        font-size: 1rem;
        margin-left: 0.5rem;
    }
}

@media (max-width: 576px) {
    .slider {
        flex-direction: column;
        gap: 0.5rem;
    }

    .anm {
        width: 100%;
    }

    #sp {
        font-size: 1.2rem;
    }

    .author,
    .Publish {
        font-size: 0.8rem;
    }
}