/* Responsive styles for MTI Web Reader */

/* Base responsive classes */
.content {
    position: relative !important;
    top: 80px;
    padding: 0px !important;
}

.responsive-container {
    width: 100%;
    padding: 0px !important;
    margin-right: auto;
    margin-left: auto;
}

.responsive-heading {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.responsive-text {
    font-size: 1.25rem;
}

.responsive-card-title {
    font-size: 1.5rem;
}

.logo-responsive {
    max-height: 80px;
}

/* Mobile styles (small devices) */
@media (max-width: 576px) {
    .content {
        top: 55px;
        max-width: 100% !important;
    }

    .responsive-container {
        max-width: 100%;
    }
    
    .responsive-heading {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .responsive-text {
        font-size: 1rem;
    }
    
    .responsive-card-title {
        font-size: 1.2rem;
    }
    
    .logo-responsive {
        max-height: 60px;
    }
    
    .card {
        margin: 0 10px;
    }
    
    .form-control-lg {
        font-size: 1rem;
        padding: 0.375rem 0.75rem;
    }
    
    .btn-lg {
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
    }
}

/* Tablet styles (medium devices) */
@media (min-width: 577px) and (max-width: 991px) {
    .content {
        top: 55px;
        max-width: 100% !important;
    }
    
    .responsive-heading {
        font-size: 2rem;
    }
    
    .responsive-text {
        font-size: 1.1rem;
    }
    
    .responsive-card-title {
        font-size: 1.3rem;
    }
    
    .logo-responsive {
        max-height: 70px;
    }
}

/* Desktop styles (large devices) */
@media (min-width: 992px) {
    .responsive-container {
        max-width: 1200px;
    }
    
    .responsive-heading {
        font-size: 2.5rem;
    }
    
    .responsive-text {
        font-size: 1.25rem;
    }
    
    .responsive-card-title {
        font-size: 1.5rem;
    }
    
    .logo-responsive {
        max-height: 80px;
    }
}