126 lines
2.1 KiB
SCSS
126 lines
2.1 KiB
SCSS
@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;
|
|
}
|