@media (max-width: 768px) { .form-group { margin-bottom: 15px; } .form-row .form-group { margin-bottom: 10px; } .card-body { padding: 15px; } #accordionSidebar { width: 100%; height: auto; position: relative; transition: none; } #content-wrapper { margin-left: 0; } } /* Intro Section Styling */ #home_intro { position: relative; background: linear-gradient(145deg, #f3f4f6, #ffffff); overflow: hidden; /* Prevents any overflowing content */ } #home_intro .background-shape { position: absolute; width: 150px; height: 150px; background: rgba(0, 123, 255, 0.2); border-radius: 50%; filter: blur(60px); z-index: 0; animation: float 5s ease-in-out infinite; } #home_intro .background-shape.shape-1 { top: -50px; left: -50px; } #home_intro .background-shape.shape-2 { bottom: -50px; right: -50px; animation-delay: 2s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(15px); } } /* Logo Styling */ .logos { display: flex; justify-content: center; align-items: center; gap: 40px; /* Increased space between logos */ flex-wrap: wrap; /* Allows wrapping on smaller screens */ max-width: 100%; overflow: hidden; } .logo { max-width: 300px; /* Larger logo size */ max-height: 200px; /* Larger height */ object-fit: contain; /* Maintain aspect ratio */ filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.1)); transition: transform 0.3s ease, filter 0.3s ease; } .logo:hover { transform: scale(1.1); filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.2)); } /* Typography and content alignment */ .intro-content { position: relative; z-index: 1; } /* Responsive Adjustments */ @media (max-width: 768px) { #home_intro { padding: 40px 20px; } .logos { gap: 20px; /* Reduced space between logos for smaller screens */ } .logo { max-width: 200px; /* Adjusted size for smaller screens */ max-height: 150px; } h1 { font-size: 2rem; } p { font-size: 1rem; } } ::-webkit-scrollbar-thumb { background: #4a90e2; } ::-webkit-scrollbar-thumb:hover { background: #357abd; }