.custom-styles {
    /* Additional custom styles to enhance responsiveness */
    
    /* General styles */
    body {
        overflow-x: hidden;
    }
    
    /* Mobile-first approach */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Top bar responsive adjustments */
    @media (max-width: 576px) {
        .top-bar {
            font-size: 0.7rem;
        }
        
        .top-bar .container {
            flex-direction: column;
            padding: 5px 0;
        }
        
        .top-bar .d-flex {
            justify-content: center !important;
            margin-bottom: 5px;
        }
    }
    
    /* Navigation responsive adjustments */
    @media (max-width: 991px) {
        .navbar-collapse {
            background-color: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        
        .navbar-nav {
            margin-bottom: 15px;
        }
        
        .navbar-nav .nav-item {
            margin-bottom: 5px;
        }
    }
    
    /* Hero section responsive adjustments */
    @media (max-width: 767px) {
        .hero-section {
            text-align: center;
            padding: 3rem 0;
        }
        
        .hero-section h1 {
            font-size: 1.8rem;
        }
        
        .hero-section h2 {
            font-size: 2.2rem;
        }
        
        .hero-section p {
            font-size: 1rem;
        }
        
        .hero-image {
            margin-top: 2rem;
            max-width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
    }
    
    /* Legacy cards responsive adjustments */
    @media (max-width: 767px) {
        .legacy-card {
            margin-bottom: 20px;
        }
    }
    
    /* Student life cards responsive adjustments */
    .student-card {
        height: 100%;
        margin-bottom: 20px;
    }
    
    /* Form responsive adjustments */
    .enquiry-form {
        margin-top: 30px;
    }
    
    /* Footer responsive adjustments */
    @media (max-width: 767px) {
        footer h4 {
            margin-top: 20px;
        }
    }
    
    /* Image responsive adjustments */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Button responsive adjustments */
    .btn {
        white-space: normal;
    }
    
    /* Utility classes for responsive spacing */
    @media (max-width: 767px) {
        .mb-md-custom {
            margin-bottom: 2rem;
        }
        
        .text-center-sm {
            text-align: center;
        }
    }
}