/* Base theme overrides */
:root {
--hiit-primary: #0d6efd;
--hiit-dark: #0c2b5a;
--hiit-accent: #22b07d;
--hiit-surface: #f6f8fc;
--bs-body-font-size: 1.125rem; /* 18px base font size */
--bs-body-font-weight: 400;
--bs-body-line-height: 1.6;
}
html {
font-size: 18px; /* Professional base font size */
}
body {
font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #1b1f2a;
font-size: 1rem; /* 18px */
line-height: 1.6;
font-weight: 400;
}
/* Professional heading sizes */
h1, .h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
h2, .h2 { font-size: 2rem; font-weight: 600; line-height: 1.3; }
h3, .h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.4; }
h4, .h4 { font-size: 1.5rem; font-weight: 500; line-height: 1.4; }
h5, .h5 { font-size: 1.25rem; font-weight: 500; line-height: 1.5; }
h6, .h6 { font-size: 1.125rem; font-weight: 500; line-height: 1.5; }
/* Enhanced paragraph and text */
p, .lead {
font-weight: 400;
line-height: 1.6;
}
.lead {
font-size: 1.25rem;
font-weight: 300;
}
/* Professional button styles */
.btn {
font-weight: 500;
letter-spacing: 0.025em;
border-radius: 0.5rem;
padding: 0.75rem 1.5rem;
transition: all 0.3s ease;
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1.125rem;
}
/* Form enhancements */
.form-control, .form-select {
font-size: 1rem;
font-weight: 400;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
border: 2px solid #e9ecef;
transition: all 0.3s ease;
}
.form-control:focus, .form-select:focus {
border-color: var(--hiit-primary);
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}
/* Navigation improvements */
.navbar-nav .nav-link {
font-weight: 500;
font-size: 0.9rem;
padding: 0.75rem 1rem;
}
/* Topbar */
.topbar {
background: #0c2b5a;
color: #fff !important;
font-size: 0.8rem !important;
font-weight: 400;
z-index: 10000 !important;
position: relative;
}
.topbar a { color: #fff !important; text-decoration: none; font-size: 0.8rem !important; }
.topbar .text-dark { color: #fff !important; font-size: 0.8rem !important; }
.navbar { z-index: 1030 !important; }
.navbar .navbar-nav .nav-link { color: #0c2b5a; font-size: 0.9rem; }
.navbar .navbar-nav .nav-link.active, .navbar .navbar-nav .nav-link:hover { color: var(--hiit-primary); }
.btn-accent { background: var(--hiit-accent); color: #fff; }
.btn-accent:hover { background: #199266; color: #fff; }
/* Hero */
.hero { background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%); }
.hero .search-box { background: #fff; border: 1px solid #e6e9ef; box-shadow: 0 10px 30px rgba(13, 110, 253, .08); }
.hero .headline { font-size: clamp(1.6rem, 2.5vw, 2.25rem); line-height: 1.2; }
.hero .subhead { color: #4c5567; }
.hero .bullet { display: inline-flex; align-items: center; gap: .5rem; margin-right: 1rem; margin-bottom: .5rem; color: #274060; font-size: .95rem; }
.hero .bullet .dot { width: .5rem; height: .5rem; background: var(--hiit-accent); border-radius: 50%; display: inline-block; }
.search-tag { background: #eef5ff; color: #0c2b5a; border-radius: 999px; padding: .375rem .75rem; font-size: .875rem; display: inline-block; }
.search-tag + .search-tag { margin-left: .5rem; }
/* Modern Search Section - College Vidya Style */
.hero-search { background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%); position: relative; overflow: hidden; }
.hero-search::before { content: ''; position: absolute; top: -50%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(13, 110, 253, 0.05) 0%, transparent 70%); border-radius: 50%; }
.hero-search::after { content: ''; position: absolute; bottom: -30%; left: -5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(34, 176, 125, 0.05) 0%, transparent 70%); border-radius: 50%; }
.hero-search .container { position: relative; z-index: 1; }
.modern-search-box { background: #ffffff; border: 2px solid #e6ebf3; box-shadow: 0 12px 40px rgba(13, 110, 253, 0.12); transition: all 0.3s ease; }
.modern-search-box:hover { box-shadow: 0 16px 50px rgba(13, 110, 253, 0.18); border-color: #cfe0ff; }
.modern-search-box:focus-within { border-color: #0d6efd; box-shadow: 0 16px 50px rgba(13, 110, 253, 0.25); }
.search-input-wrapper { position: relative; }
.search-input-wrapper .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #6b7280; pointer-events: none; z-index: 1; }
.search-input-wrapper .form-control { padding-left: 48px; background: transparent; font-size: 1rem; }
.search-input-wrapper .form-control:focus { box-shadow: none; outline: none; }
.chip-modern { background: #f0f4ff; color: #0c2b5a; border: 1px solid #e0e6f3; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease; font-weight: 500; }
.chip-modern:hover { background: #e6f0ff; border-color: #cfe0ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15); }
.chip-modern:active { transform: translateY(0); }
.trust-indicators { padding: 1rem 0; }
.trust-item { display: flex; align-items: center; gap: 0.5rem; color: #4b5563; }
.trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #22b07d; color: white; border-radius: 50%; font-size: 0.75rem; font-weight: bold; flex-shrink: 0; }
/* Custom Illustration Cards */
.stat-card-custom {
background: #ffffff;
border: 1px solid #e9eef5;
border-radius: 1rem;
padding: 0.75rem;
text-align: center;
transition: all 0.3s ease;
animation: statCardPop 0.6s ease-out backwards;
max-width: 200px;
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
box-sizing: border-box;
}
.stat-card-custom:nth-child(1) { animation-delay: 0.1s; }
.stat-card-custom:nth-child(2) { animation-delay: 0.2s; }
.stat-card-custom:nth-child(3) { animation-delay: 0.3s; }
.stat-card-custom:nth-child(4) { animation-delay: 0.4s; }
.stat-card-custom:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(13, 110, 253, 0.15);
border-color: #cfe0ff;
}
.stat-card-custom .stat-icon {
font-size: 1.25rem !important;
margin-bottom: 0.5rem !important;
}
.stat-card-custom .stat-number {
font-size: 1.1rem !important;
font-weight: 700 !important;
color: #0c2b5a !important;
margin-bottom: 0.25rem !important;
}
.stat-card-custom .stat-label {
font-size: 0.7rem !important;
color: #6b7280 !important;
font-weight: 500 !important;
line-height: 1.1 !important;
}
/* Search Illustration */
.search-illustration { position: relative; }
.illustration-card { background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%); border: 1px solid #e6ebf3; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.stat-card { background: #ffffff; border: 1px solid #e9eef5; border-radius: 1rem; padding: 1.5rem; text-align: center; transition: all 0.3s ease; animation: statCardPop 0.6s ease-out backwards; }
.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }
.stat-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(13, 110, 253, 0.15); border-color: #cfe0ff; }
.stat-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.stat-number { font-size: 1.75rem; font-weight: 700; color: #0c2b5a; margin-bottom: 0.25rem; }
.stat-label { font-size: 0.875rem; color: #6b7280; font-weight: 500; }
@keyframes statCardPop {
from { opacity: 0; transform: scale(0.9) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Responsive */
@media (max-width: 991px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.stat-card { padding: 1rem; }
.stat-icon { font-size: 1.5rem; }
.stat-number { font-size: 1.5rem; }
}
@media (max-width: 576px) {
.modern-search-box { padding: 0.5rem; }
.chip-modern { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
.trust-indicators { flex-direction: column; align-items: flex-start !important; }
}
/* Hero Carousel with Animated Graphics */
#heroCarousel {
position: relative;
overflow: hidden;
z-index: 1 !important;
margin-top: 0 !important;
}
/* Ensure carousel content stays below navbar */
.carousel-inner,
.carousel-item {
position: relative;
z-index: 1 !important;
}
/* Fix for any content that might be overlapping */
main,
.section {
position: relative;
z-index: 1;
}
#heroCarousel .carousel-item { position: relative; min-height: 500px; }
#heroCarousel .carousel-inner { position: relative; z-index: 1; }
/* Animated Background Graphics */
.hero-graphics { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
/* Floating Shapes */
.floating-shape { position: absolute; border-radius: 50%; opacity: 0.15; animation: float 20s infinite ease-in-out; }
.floating-shape.shape-1 { width: 300px; height: 300px; background: linear-gradient(135deg, #0d6efd 0%, #22b07d 100%); top: -100px; right: -50px; animation-delay: 0s; animation-duration: 25s; }
.floating-shape.shape-2 { width: 200px; height: 200px; background: linear-gradient(135deg, #22b07d 0%, #0d6efd 100%); bottom: -50px; left: 10%; animation-delay: 2s; animation-duration: 20s; }
.floating-shape.shape-3 { width: 150px; height: 150px; background: linear-gradient(135deg, #0d6efd 0%, #7cb0ff 100%); top: 40%; right: 15%; animation-delay: 4s; animation-duration: 22s; }
/* Animated Dots */
.animated-dots { position: absolute; width: 100%; height: 100%; }
.dot-particle { position: absolute; width: 8px; height: 8px; background: #0d6efd; border-radius: 50%; opacity: 0.3; animation: dotFloat 15s infinite ease-in-out; }
.dot-particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.dot-particle:nth-child(2) { top: 60%; left: 20%; animation-delay: 2s; width: 6px; height: 6px; }
.dot-particle:nth-child(3) { top: 30%; right: 15%; animation-delay: 4s; background: #22b07d; }
.dot-particle:nth-child(4) { bottom: 25%; right: 25%; animation-delay: 6s; width: 10px; height: 10px; }
.dot-particle:nth-child(5) { top: 70%; left: 30%; animation-delay: 3s; background: #7cb0ff; }
.dot-particle:nth-child(6) { top: 15%; right: 30%; animation-delay: 5s; width: 7px; height: 7px; }
/* Geometric Lines */
.geometric-lines { position: absolute; width: 100%; height: 100%; }
.line-element { position: absolute; background: linear-gradient(90deg, transparent, #0d6efd, transparent); height: 2px; opacity: 0.2; animation: lineSlide 12s infinite ease-in-out; }
.line-element:nth-child(1) { top: 25%; width: 200px; left: -200px; animation-delay: 0s; }
.line-element:nth-child(2) { top: 55%; width: 150px; right: -150px; animation-delay: 3s; animation-direction: reverse; }
.line-element:nth-child(3) { top: 75%; width: 180px; left: -180px; animation-delay: 6s; background: linear-gradient(90deg, transparent, #22b07d, transparent); }
/* Gradient Overlay Animation */
.gradient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(34, 176, 125, 0.05) 100%); animation: gradientShift 15s infinite alternate ease-in-out; }
/* Carousel Caption Enhancement */
#heroCarousel .carousel-caption { position: relative; z-index: 2; text-shadow: 0 2px 8px rgba(0,0,0,0.1); }
#heroCarousel .carousel-item.active .carousel-caption { animation: fadeInUp 0.8s ease-out; }
/* Animations */
@keyframes float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(20px, -30px) rotate(5deg); }
50% { transform: translate(-15px, 20px) rotate(-3deg); }
75% { transform: translate(30px, 10px) rotate(4deg); }
}
@keyframes dotFloat {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
50% { transform: translateY(-30px) scale(1.2); opacity: 0.6; }
}
@keyframes lineSlide {
0% { transform: translateX(0); opacity: 0; }
50% { opacity: 0.2; }
100% { transform: translateX(100vw); opacity: 0; }
}
@keyframes gradientShift {
0% { opacity: 0.5; transform: scale(1); }
100% { opacity: 0.8; transform: scale(1.1); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* Pulse Effect for Buttons */
#heroCarousel .btn { position: relative; overflow: hidden; transition: all 0.3s ease; }
#heroCarousel .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3); }
#heroCarousel .btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; }
#heroCarousel .btn:hover::before { width: 300px; height: 300px; }
/* Responsive adjustments */
@media (max-width: 768px) {
.floating-shape { transform: scale(0.6); }
.dot-particle { width: 6px; height: 6px; }
#heroCarousel .carousel-item { min-height: 400px; }
}
/* CV-like pills and chips */
.form-control.rounded-pill, .form-select.rounded-pill { padding-left: 1rem; padding-right: 1rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; background: #f0f4ff; color: #274060; border: 1px solid #e0e6f3; padding: .375rem .75rem; border-radius: 999px; font-size: .875rem; cursor: pointer; }
.chip.active { background: #e6f0ff; border-color: #cfe0ff; color: #0c2b5a; box-shadow: inset 0 0 0 1px #bcd2ff; }
.filters-sticky { position: sticky; top: 64px; z-index: 101; background: #fff; border-bottom: 1px solid #eef2f7; }
.filters-sticky .inner { padding: .75rem 0; }
.trust-badges { display: flex; gap: 1rem; flex-wrap: wrap; }
.trust-badges .item { display: inline-flex; align-items: center; gap: .5rem; color: #4c5567; font-size: .9rem; }
.trust-badges .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--hiit-accent); }
.hero-badges img { max-height: 32px; filter: grayscale(100%); opacity: .9; }
.hero-img { height: 62vh; min-height: 360px; }
/* Feature grid */
.feature-card { border: 1px solid #e9eef5; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
/* Mega menu */
.dropdown-mega {
position: static;
z-index: 10001 !important;
}
/* Ensure mega menu stays above all content */
.dropdown-menu-mega {
z-index: 10002 !important;
position: absolute;
width: 100%;
left: 0;
right: 0;
margin-top: 0 !important;
transform: none !important;
will-change: transform, opacity;
background: white;
border-top: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* Ensure dropdowns stay above content */
.dropdown-menu {
z-index: 10003 !important;
margin: 0;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
min-width: 200px;
}
/* Fix for carousel z-index */
#heroCarousel,
.carousel,
.carousel-inner,
.carousel-item {
position: relative;
z-index: 1 !important;
}
.dropdown-menu-mega {
left: 0;
right: 0;
border: none;
border-radius: 0;
padding: 1.25rem 0;
box-shadow: 0 8px 24px rgba(0,0,0,.1);
z-index: 1100 !important;
position: absolute;
margin-top: 0 !important;
transform: none !important;
will-change: transform, opacity;
}
.dropdown-menu-mega .col { padding: 0 1rem; }
.dropdown-menu-mega a { color: #1b1f2a; text-decoration: none; display: block; padding: .375rem 0; }
.dropdown-menu-mega a:hover { color: var(--hiit-primary); }
/* Hover dropdown for courses mega menu */
.dropdown-mega:hover > .dropdown-menu {
display: block;
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.dropdown-mega .dropdown-menu {
margin-top: 0;
transition: all 0.3s ease;
z-index: 1101 !important;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
display: block !important;
}
.dropdown-mega:hover > .nav-link {
color: var(--hiit-primary);
position: relative;
z-index: 1102;
}
/* All dropdown menus should be above content */
.navbar { z-index: 1090 !important; position: relative; }
.dropdown-menu {
z-index: 1100 !important;
margin-top: 0 !important;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.dropdown:hover > .dropdown-menu {
display: block;
opacity: 1 !important;
visibility: visible !important;
}
/* Testimonials */
.testimonial-card { border: 1px solid #e9eef5; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
/* FAQ */
.accordion-button:not(.collapsed) { background: #eef5ff; color: #0c2b5a; }
/* Footer */
footer a { text-decoration: none; color: #0c2b5a; }
footer a:hover { color: #0d6efd; }
/* College Vidya Style Footer */
footer { background: #1e2a3a; }
footer a { transition: all 0.3s ease; }
footer a:hover { color: #fff !important; opacity: 1 !important; }
footer .social-icon-cv { transition: all 0.3s ease; }
footer .social-icon-cv:hover { background: rgba(255,255,255,0.2) !important; transform: translateY(-2px); }
/* Newsletter Section */
.footer-newsletter { background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); position: relative; z-index: 1; }
.newsletter-form .form-control {
border: none;
border-radius: 50px 0 0 50px;
padding: 0.75rem 1.5rem;
font-size: 1rem;
background: rgba(255, 255, 255, 0.95);
}
.newsletter-form .form-control:focus {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
background: #fff;
}
.newsletter-form .btn {
border-radius: 0 50px 50px 0;
font-weight: 600;
letter-spacing: 0.5px;
box-shadow: none;
border: none;
}
.newsletter-form .btn:hover {
background: #fff;
color: #0d6efd;
transform: translateX(2px);
}
/* Footer Stats */
.footer-stats { position: relative; z-index: 1; }
.stat-box {
background: rgba(13, 110, 253, 0.15);
border: 1px solid rgba(13, 110, 253, 0.3);
border-radius: 12px;
padding: 1rem;
text-align: center;
transition: all 0.3s ease;
}
.stat-box:hover {
background: rgba(13, 110, 253, 0.25);
border-color: rgba(13, 110, 253, 0.5);
transform: translateY(-3px);
}
.stat-number {
font-size: 1.5rem;
font-weight: 700;
color: #0d6efd;
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Contact Items */
.contact-item {
display: flex;
gap: 1rem;
margin-bottom: 1.25rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
transition: all 0.3s ease;
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.contact-icon {
width: 40px;
height: 40px;
background: rgba(13, 110, 253, 0.2);
border: 1px solid rgba(13, 110, 253, 0.3);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #0d6efd;
}
.contact-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.contact-text strong {
color: #fff;
font-size: 0.875rem;
font-weight: 600;
}
.contact-text span,
.contact-text a {
color: rgba(255, 255, 255, 0.7);
font-size: 0.875rem;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-text a:hover {
color: #0d6efd;
}
.footer-main { border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 1; }
.footer-brand h4 { font-size: 1.75rem; }
.footer-contact svg { color: #0d6efd; }
.footer-contact a:hover { color: #0d6efd !important; text-decoration: underline; }
/* Social Icons */
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: #fff;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-icon:hover {
background: #0d6efd;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(13, 110, 253, 0.4);
border-color: #0d6efd;
}
/* Footer Links */
.footer-links li { margin-bottom: 0.75rem; }
.footer-links a {
color: rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
display: inline-block;
position: relative;
}
.footer-links a:hover {
color: #fff;
padding-left: 5px;
}
.footer-links a::before {
content: '→';
position: absolute;
left: -15px;
opacity: 0;
transition: all 0.3s ease;
}
.footer-links a:hover::before {
left: -10px;
opacity: 1;
}
/* Footer Bottom */
.footer-bottom {
background: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.7);
}
.footer-bottom a {
color: rgba(255, 255, 255, 0.7);
transition: color 0.3s ease;
}
.footer-bottom a:hover {
color: #fff;
}
/* Footer Accreditations */
.footer-accreds {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.footer-accreds .tile {
background: rgba(255, 255, 255, 0.1);
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.footer-accreds .tile:hover {
background: rgba(13, 110, 253, 0.2);
border-color: #0d6efd;
color: #fff;
}
@media (max-width: 768px) {
html { font-size: 16px; } /* Slightly smaller on mobile */
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.5rem; }
}
/* Metrics strip */
.metric { display: flex; align-items: center; gap: .75rem; justify-content: center; }
.metric .icon { width: 42px; height: 42px; border-radius: 50%; background: #eef5ff; display: inline-flex; align-items: center; justify-content: center; color: var(--hiit-primary); font-weight: 700; }
.metric .value { font-size: 1.25rem; font-weight: 700; }
.metric .label { color: #6b7280; font-size: .95rem; }
/* Logo/Accreditation carousel */
.logo-tile { background: #fff; border: 1px solid #e9eef5; border-radius: .5rem; height: 72px; display: flex; align-items: center; justify-content: center; padding: .75rem; }
.logo-tile img { max-height: 48px; max-width: 100%; object-fit: contain; filter: grayscale(10%); }
/* Side categories section */
.side-categories .nav-link { background: #fff; border: 1px solid #e6ebf3; margin-bottom: .5rem; border-radius: .75rem; color: #0c2b5a; display: flex; justify-content: space-between; align-items: center; }
.side-categories .nav-link.active { border-color: #cfe0ff; background: #eef5ff; color: #0c2b5a; box-shadow: inset 0 0 0 1px #bcd2ff; }
.course-tile { border: 1px solid #e9eef5; border-radius: .75rem; overflow: hidden; background: #fff; transition: transform .15s ease, box-shadow .15s ease; }
.course-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.course-tile .head { padding: .5rem .75rem; font-size: .8rem; color: #6b7280; display: flex; justify-content: space-between; }
.course-tile .body { padding: .75rem; min-height: 108px; display: flex; align-items: center; justify-content: center; text-align: center; }
.course-tile .foot { padding: .5rem .75rem; background: #f8fbff; border-top: 1px solid #e9eef5; text-align: center; }
/* Support platform section */
.support-strip { border: 1px solid #e6ebf3; border-radius: .75rem; background: #fff; }
.support-tile { text-align: center; padding: 1rem .5rem; }
.support-tile .num { color: var(--hiit-primary); font-weight: 700; font-size: .95rem; }
.support-tile .icon { width: 40px; height: 40px; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; background: #eef5ff; color: #0c2b5a; margin-bottom: .25rem; }
.promo-card { border: 1px solid #e6ebf3; border-radius: .75rem; overflow: hidden; background: #fff; }
.promo-card .body { padding: 1rem; }
.carousel-dots { text-align: center; margin-top: .5rem; }
.carousel-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: #c7d5f1; display: inline-block; margin: 0 .2rem; }
.carousel-dots .dot.active { background: var(--hiit-primary); }
/* Modern Experts Section */
.experts-section {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
position: relative;
overflow: hidden;
}
.experts-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.experts-grid-container {
position: relative;
z-index: 1;
}
/* Expert Split Flip Cards */
.experts-grid-container {
position: relative;
z-index: 1;
}
.experts-grid {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
min-height: 400px;
}
.expert-card-modern {
perspective: 1000px;
height: 380px;
width: 320px;
position: relative;
flex-shrink: 0;
}
.expert-stats-section {
position: relative;
z-index: 1;
margin-top: 40px !important;
}
/* Progress Bar */
.expert-progress-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
z-index: 10;
overflow: hidden;
}
.expert-progress-fill {
height: 100%;
background: linear-gradient(90deg, #28a745, #20c997);
width: 0%;
border-radius: 2px;
transition: width 5s linear;
}
.expert-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.expert-card-modern:hover .expert-card-inner {
transform: rotateY(180deg);
}
.expert-card-front,
.expert-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.expert-card-front {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
padding: 0;
}
.expert-card-back {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
transform: rotateY(180deg);
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
}
/* Front Side - Split Layout */
.expert-front-image {
flex: 0 0 0 120px;
height: 260px;
position: relative;
overflow: hidden;
border-radius: 20px 0 0 15px 20px;
}
.expert-front-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.expert-front-content {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.expert-name-modern {
font-size: 1.3rem;
font-weight: 700;
color: #1e3c72;
margin-bottom: 8px;
line-height: 1.2;
}
.expert-designation-modern {
font-size: 0.9rem;
color: #666;
margin-bottom: 15px;
font-weight: 500;
}
.expert-stats {
display: flex;
gap: 15px;
margin-top: 15px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
color: #333;
font-weight: 600;
}
.stat-item i {
color: #1e3c72;
font-size: 0.9rem;
}
.expert-status-badge-front {
position: absolute;
top: 15px;
right: 15px;
background: #28a745;
color: white;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Back Side - Description */
.expert-back-content {
text-align: center;
width: 100%;
}
.expert-description-back {
margin-bottom: 20px;
}
.expert-description-back i {
font-size: 2rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 15px;
}
.expert-description-back p {
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
font-style: italic;
}
.expert-contact-info {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.contact-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
opacity: 0.9;
}
.contact-item i {
font-size: 1rem;
}
.expert-connect-btn {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 12px 25px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
font-size: 0.9rem;
}
.expert-connect-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
/* Expert Stats Section - Larger with Side-by-Side Layout */
.expert-stats-section {
position: relative;
z-index: 1;
flex: 1;
margin-top: 0 !important;
min-width: 280px;
}
.stat-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 25px;
text-align: left;
transition: all 0.3s ease;
height: 100%;
min-height: 140px;
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.stat-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.stat-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
flex-shrink: 0;
}
.stat-content {
flex: 1;
text-align: left;
}
.stat-number {
font-size: 2.2rem;
font-weight: 700;
color: white;
margin-bottom: 5px;
line-height: 1;
}
.stat-label {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
margin: 0;
font-weight: 500;
}
.meet-experts-btn {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 12px 20px;
border-radius: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
font-size: 0.9rem;
}
/* =====================================================
UTILITY CLASSES - TO REPLACE INLINE STYLES
===================================================== */
/* Background Gradients */
.bg-gradient-primary {
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
}
.bg-gradient-hero {
background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%) !important;
}
.bg-gradient-modern-search {
background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%) !important;
}
/* Text Colors */
.text-gold {
color: #ffd700 !important;
}
.text-shadow-dark {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
}
/* Font Sizes */
.text-xs {
font-size: 0.6rem !important;
}
.text-sm {
font-size: 0.8rem !important;
}
.text-base {
font-size: 1rem !important;
}
.text-lg {
font-size: 1.125rem !important;
}
.text-xl {
font-size: 1.25rem !important;
}
.text-2xl {
font-size: 1.5rem !important;
}
/* Opacity */
.opacity-10 {
opacity: 0.1 !important;
}
.opacity-20 {
opacity: 0.2 !important;
}
.opacity-50 {
opacity: 0.5 !important;
}
/* Positioning & Sizing */
.w-12px {
width: 12px !important;
}
.h-12px {
height: 12px !important;
}
.w-300px {
width: 300px !important;
}
.h-300px {
height: 300px !important;
}
.w-400px {
width: 400px !important;
}
.h-400px {
height: 400px !important;
}
/* Border Styles */
.border-white-20 {
border: 8px solid rgba(255,255,255,0.2) !important;
}
.border-radius-50 {
border-radius: 50% !important;
}
.border-radius-20 {
border-radius: 20px !important;
}
/* Filters */
.blur-60 {
filter: blur(60px) !important;
}
.blur-80 {
filter: blur(80px) !important;
}
/* Position Utilities */
.top-minus-50 {
top: -50px !important;
}
.right-minus-50 {
right: -50px !important;
}
.bottom-minus-100 {
bottom: -100px !important;
}
.left-minus-100 {
left: -100px !important;
}
/* Animation Delays */
.animation-delay-2s {
animation-delay: 2s !important;
}
.animation-delay-4s {
animation-delay: 4s !important;
}
.animation-delay-6s {
animation-delay: 6s !important;
}
/* Hero Section Utilities */
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
}
.hero-floating-shape {
position: absolute;
background: white;
border-radius: 50%;
}
.hero-floating-shape-1 {
top: -50px;
right: -50px;
width: 300px;
height: 300px;
filter: blur(60px);
}
.hero-floating-shape-2 {
bottom: -100px;
left: -100px;
width: 400px;
height: 400px;
filter: blur(80px);
animation-delay: 2s;
}
/* Card Utilities */
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.card-hover:hover {
transform: translateY(-5px) !important;
box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
}
.glow-border {
border: 1px solid rgba(13, 110, 253, 0.2) !important;
box-shadow: 0 0 20px rgba(13, 110, 253, 0.1) !important;
}
.leadership-card {
background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%) !important;
}
/* Stats Utilities */
.stat-box-small {
text-align: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
padding: 0.5rem;
}
.stat-value {
font-weight: bold;
font-size: 0.8rem;
}
.stat-label {
font-size: 0.6rem;
}
/* Badge Utilities */
.badge-floating {
position: absolute;
top: 1rem;
right: 1rem;
}
.badge-dot {
background: white;
border-radius: 50%;
display: inline-block;
}
/* Email Template Styles (for contact forms) */
.email-template {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
}
.email-header {
text-align: center;
padding: 20px 0;
border-bottom: 2px solid #0d6efd;
}
.email-title {
color: #0d6efd;
margin: 0;
font-size: 2rem;
}
.email-subtitle {
color: #666;
margin: 10px 0;
font-size: 1.1rem;
}
.email-content {
padding: 20px 0;
}
.email-section-title {
color: #0d6efd;
margin-bottom: 10px;
}
.email-message-box {
background-color: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 4px solid #0d6efd;
margin-bottom: 20px;
}
.email-info-box {
background-color: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.email-footer {
text-align: center;
padding: 20px 0;
border-top: 1px solid #ddd;
color: #666;
font-size: 0.9rem;
}
/* Animation Utilities */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out forwards;
}
.float-animation {
animation: float 6s ease-in-out infinite;
}
/* Spacing Utilities */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.ml-1 { margin-left: 0.25rem !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.ml-3 { margin-left: 1rem !important; }
.mr-3 { margin-right: 1rem !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
/* Display Utilities */
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-none { display: none !important; }
/* Flex Utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.align-stretch { align-items: stretch !important; }
/* Position Utilities */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }
.static { position: static !important; }
/* Z-index Utilities */
.z-0 { z-index: 0 !important; }
.z-1 { z-index: 1 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
/* Overflow Utilities */
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-auto { overflow: auto !important; }
/* Cursor Utilities */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
/* User Select Utilities */
.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all { user-select: all !important; }
/* Pointer Events Utilities */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }
/* Responsive Utilities */
@media (max-width: 576px) {
.d-sm-none { display: none !important; }
.d-sm-block { display: block !important; }
.d-sm-flex { display: flex !important; }
}
@media (max-width: 768px) {
.d-md-none { display: none !important; }
.d-md-block { display: block !important; }
.d-md-flex { display: flex !important; }
}
@media (max-width: 992px) {
.d-lg-none { display: none !important; }
.d-lg-block { display: block !important; }
.d-lg-flex { display: flex !important; }
}
@media (max-width: 1200px) {
.d-xl-none { display: none !important; }
.d-xl-block { display: block !important; }
.d-xl-flex { display: flex !important; }
width: 100%;
margin-top: 8px;
}
.meet-experts-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
/* =====================================================
PAGE-SPECIFIC STYLES - EXTRACTED FROM INLINE BLOCKS
===================================================== */
/* About Page Styles */
.about-page main .mb-5 {
margin-bottom: 2.5rem !important;
}
.about-page main .mb-4 {
margin-bottom: 1.5rem !important;
}
.about-page main .mb-3 {
margin-bottom: 1.5rem !important;
}
.about-page main section .mb-5 {
margin-bottom: 2.5rem !important;
}
.about-page main .timeline-item {
margin-bottom: 1rem !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.about-page main .fade-in-up {
margin-bottom: 2rem !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.about-page .timeline-item .card {
margin-bottom: 0.5rem !important;
visibility: visible !important;
opacity: 1 !important;
}
.about-page .row.g-3 {
gap: 1rem !important;
}
.about-page main section {
visibility: visible !important;
opacity: 1 !important;
}
.about-page main .card {
visibility: visible !important;
opacity: 1 !important;
}
.about-page main .card-body {
visibility: visible !important;
opacity: 1 !important;
}
.about-page .content-section {
padding: 20px 0;
}
.about-page .content-card {
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
padding: 20px;
margin-bottom: 20px;
border: 1px solid #f0f0f0;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-page .content-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.about-page .content-row {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 20px;
}
.about-page .content-row.reverse {
flex-direction: row-reverse;
}
.about-page .content-image {
flex: 0 0 350px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.about-page .content-image img {
width: 100%;
height: 350px;
object-fit: cover;
}
.about-page .content-text {
flex: 1;
}
.about-page .content-text h3 {
color: #0d6efd;
font-weight: 700;
margin-bottom: 15px;
font-size: 1.5rem;
}
.about-page .content-text p {
color: #6c757d;
line-height: 1.6;
font-size: 1rem;
}
/* Contact Page Styles */
.contact-page .carousel-indicators {
margin-top: 60px !important;
bottom: -30px !important;
}
.contact-page .carousel-inner {
margin-bottom: 30px;
}
.contact-page .carousel-indicators button.active {
background-color: #ffd700 !important;
}
.contact-page .carousel-control-prev,
.contact-page .carousel-control-next {
transition: all 0.3s ease;
opacity: 0.7;
}
.contact-page .carousel-control-prev:hover,
.contact-page .carousel-control-next:hover {
opacity: 1;
}
/* Carousel Enhancements */
.carousel-enhanced .carousel-item {
position: relative;
min-height: 500px;
}
.carousel-enhanced .carousel-indicators button.active {
background-color: #ffd700 !important;
}
.carousel-enhanced .carousel-control-prev,
.carousel-enhanced .carousel-control-next {
transition: all 0.3s ease;
opacity: 0.7;
}
.carousel-enhanced .carousel-control-prev:hover,
.carousel-enhanced .carousel-control-next:hover {
opacity: 1;
}
.carousel-enhanced .carousel-inner {
margin-bottom: 30px;
}
/* Responsive Styles */
@media (max-width: 768px) {
.about-page .content-row,
.about-page .content-row.reverse {
flex-direction: column;
gap: 20px;
}
.about-page .content-image {
flex: 1;
}
.about-page .content-text h3 {
font-size: 1.3rem;
}
.about-page .content-text p {
font-size: 0.95rem;
}
}
@media (max-width: 992px) {
.carousel-enhanced .carousel-item h2 {
font-size: 1.8rem !important;
}
.carousel-enhanced .carousel-item h3 {
font-size: 1.5rem !important;
}
}
@media (max-width: 768px) {
.carousel-enhanced .carousel-item h2 {
font-size: 1.6rem !important;
}
.carousel-enhanced .carousel-item h3 {
font-size: 1.3rem !important;
}
.carousel-enhanced .carousel-item {
min-height: 400px;
}
}
@media (max-width: 576px) {
.carousel-enhanced .carousel-item h2 {
font-size: 1.4rem !important;
}
.carousel-enhanced .carousel-item h3 {
font-size: 1.2rem !important;
}
.carousel-enhanced .carousel-item .btn {
width: 100%;
}
}
@media (max-width: 400px) {
.carousel-enhanced .carousel-item h2 {
font-size: 1.2rem !important;
}
.carousel-enhanced .carousel-item h3 {
font-size: 1.1rem !important;
}
}
/* =====================================================
ADDITIONAL UTILITY CLASSES FOR INDEX.PHP
===================================================== */
/* Display & Flex */
.d-flex { display: flex !important; }
/* Animation Classes */
.animation-scroll { animation: scrollLeftSmooth 40s linear infinite !important; }
/* Size Classes */
.max-h-80px { max-height: 80px !important; }
.max-h-100px { max-height: 100px !important; }
.max-h-380px { max-height: 380px !important; }
.max-w-80px { max-width: 80px !important; }
.w-100px { width: 100px !important; }
.h-100px { height: 100px !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }
.w-100 { width: 100% !important; }
/* Object Fit */
.object-fit-cover { object-fit: cover !important; }
.object-fit-contain { object-fit: contain !important; }
/* Overflow */
.overflow-y-auto { overflow-y: auto !important; }
/* Colors */
.text-cyan { color: #00d4ff !important; }
.bg-gradient-blue-dark {
background: linear-gradient(135deg, #1e3c72, #2a5298) !important;
}
/* Shadow Effects */
.shadow-drop {
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important;
}
/* Animation Keyframes */
@keyframes scrollLeftSmooth {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Courses Page Styles */
.courses-page .carousel-indicators {
margin-top: 60px !important;
bottom: -30px !important;
}
.courses-page .carousel-inner {
margin-bottom: 30px;
}
.courses-page .carousel-indicators button.active {
background-color: #ffd700 !important;
}
.courses-page .carousel-control-prev,
.courses-page .carousel-control-next {
transition: all 0.3s ease;
opacity: 0.7;
}
.courses-page .carousel-control-prev:hover,
.courses-page .carousel-control-next:hover {
opacity: 1;
}
/* Additional utility class */
.w-auto { width: auto !important; }
/* Additional utility classes for admissions.php */
.w-70px { width: 70px !important; }
.h-70px { height: 70px !important; }
.fs-2rem { font-size: 2rem !important; }
.align-center { align-items: center !important; }
.justify-center { justify-content: center !important; }
/* Animation delay classes */
.animation-delay-1s { animation-delay: 1s !important; }
.animation-delay-2s { animation-delay: 2s !important; }
.animation-delay-3s { animation-delay: 3s !important; }
.animation-delay-4s { animation-delay: 4s !important; }
/* Admissions Page Styles */
.admissions-page .carousel-indicators {
margin-top: 60px !important;
bottom: -30px !important;
}
.admissions-page .carousel-inner {
margin-bottom: 30px;
}
.admissions-page .carousel-indicators button.active {
background-color: #ffd700 !important;
}
.admissions-page .carousel-control-prev,
.admissions-page .carousel-control-next {
transition: all 0.3s ease;
opacity: 0.7;
}
.admissions-page .carousel-control-prev:hover,
.admissions-page .carousel-control-next:hover {
opacity: 1;
}
/* Responsive Design */
@media (max-width: 768px) {
.experts-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.expert-card-modern {
height: 250px;
}
.expert-avatar {
width: 80px;
height: 80px;
}
.expert-name-modern {
font-size: 1rem;
}
.expert-stats {
gap: 10px;
}
.expert-stat-card {
padding: 20px;
min-height: 120px;
flex-direction: column;
text-align: center;
gap: 15px;
}
.stat-icon {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
.stat-content {
text-align: center;
}
.stat-number {
font-size: 1.8rem;
}
}
/* Stories (Trusted Voices) */
.stories-section .subtitle { color: #64748b; }
.story-card { background: #fff; border: 1px solid #e6ebf3; border-radius: 1.25rem; padding: .5rem; position: relative; }
.story-frame { border-radius: 1rem; overflow: hidden; background: #0d6efd0a; }
.story-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; color: #0d6efd; box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.story-badge { position: absolute; left: .75rem; top: .5rem; font-size: .75rem; background: #fff; border: 1px solid #e6ebf3; border-radius: 999px; padding: .1rem .5rem; color: #64748b; }
.story-cta { text-align: center; }
/* In the News section */
.news-section .kicker { color: #2563eb; font-weight: 600; font-size: .9rem; }
.press-card { border: 1px solid #e6ebf3; border-radius: .75rem; overflow: hidden; background: #fff; display: flex; flex-direction: column; height: 100%; }
.press-card .thumb { background: #eef3ff; }
.press-card .brand { padding: .5rem .75rem; border-top: 1px solid #e9eef5; font-weight: 700; color: #111827; }
.press-card .body { padding: .75rem; font-size: .95rem; color: #4b5563; }
.logo-pill { border: 1px solid #e6ebf3; border-radius: .75rem; background: #fff; padding: .5rem .75rem; display: inline-flex; align-items: center; justify-content: center; height: 44px; }
/* Students chosen section */
.chosen-section { background: #0b1424; color: #e8eefb; }
.chosen-section .big-num { font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 800; letter-spacing: .02em; color: #7cb0ff; }
.chosen-section .cta-pill { background: #1e40af; color: #fff; border: none; padding: .4rem .9rem; border-radius: .75rem; font-weight: 600; }
.chosen-tile { background: #0f1b31; border: 1px solid #1f2c49; border-radius: .75rem; padding: .5rem; text-align: center; }
.chosen-tile .avatar { border-radius: .5rem; background: #182743; }
.chosen-tile .logo { margin-top: .35rem; border-top: 1px solid #1f2c49; padding-top: .35rem; color: #cbd5e1; font-size: .8rem; }
/* Footer accreditations */
.footer-accreds { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .6rem; }
.footer-accreds .tile { background: #fff; border: 1px solid #e9eef5; border-radius: .65rem; height: 50px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #0c2b5a; letter-spacing: .2px; box-shadow: 0 2px 8px rgba(0,0,0,.04); transition: transform .15s ease, box-shadow .15s ease; animation: popIn .35s ease both; }
.footer-accreds .tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13,110,253,.15); }
.footer-accreds .tile.badge { color: #0b1324; }
@keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
footer .accred-wrap { background: linear-gradient(180deg,#f7faff 0%, #ffffff 60%); border: 1px solid #eef3ff; border-radius: .75rem; padding: .75rem; }
@media (max-width: 768px) { .footer-accreds { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* About page enhancements */
.card-soft { background: #fff; border: 1px solid #e6ebf3; border-radius: .75rem; box-shadow: 0 4px 14px rgba(0,0,0,.04); }
.card-soft .card-body { padding: 1rem; }
.timeline .step { position: relative; padding-left: 1.5rem; }
.timeline .step::before { content: ""; position: absolute; left: .4rem; top: .35rem; width: .5rem; height: .5rem; border-radius: 50%; background: #0d6efd; box-shadow: 0 0 0 4px #e9f1ff; }
.timeline .step .box { border: 1px solid #e6ebf3; border-radius: .75rem; background: #fff; padding: .75rem .9rem; }
.pill-badge { display: inline-block; padding: .15rem .6rem; border: 1px solid #d7e3ff; background: #f5f9ff; color: #0c2b5a; border-radius: 999px; font-size: .75rem; }
.partners-grid .item { border: 1px solid #e6ebf3; background: #fff; border-radius: .75rem; padding: 1rem; text-align: center; height: 100%; display:flex; align-items:center; justify-content:center; }
/* About Page Animations & Enhancements */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-50px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.fade-in-up { animation: fadeInUp 0.8s ease-out; }
.slide-in-left { animation: slideInLeft 0.8s ease-out; }
.slide-in-right { animation: slideInRight 0.8s ease-out; }
.scale-in { animation: scaleIn 0.6s ease-out; }
.pulse-animation { animation: pulse 2s infinite; }
.float-animation { animation: float 3s ease-in-out infinite; }
/* Card Hover Effects */
.card-hover {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}
.card-hover::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.card-hover:hover::before {
left: 100%;
}
.card-hover:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
}
/* Timeline Enhanced */
.timeline-item {
position: relative;
padding-left: 40px;
margin-bottom: 20px;
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
}
.timeline-item:nth-child(1) { animation-delay: 0.1s; }
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
.timeline-item:nth-child(3) { animation-delay: 0.3s; }
.timeline-item:nth-child(4) { animation-delay: 0.4s; }
.timeline-item:nth-child(5) { animation-delay: 0.5s; }
.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 4px solid #fff;
box-shadow: 0 0 0 4px #e3f2fd, 0 4px 8px rgba(0,0,0,0.1);
z-index: 2;
}
.timeline-item::after {
content: '';
position: absolute;
left: 9px;
top: 20px;
width: 2px;
height: calc(100% + 20px);
background: linear-gradient(180deg, #667eea 0%, #e3f2fd 100%);
z-index: 1;
}
.timeline-item:last-child::after {
display: none;
}
/* Gradient Text */
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
/* Icon Box */
.icon-box {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
margin: 0 auto 1rem;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
}
.icon-box:hover {
transform: translateY(-5px) rotate(5deg);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}
/* Achievement Cards */
.achievement-card {
position: relative;
overflow: hidden;
border-radius: 16px;
transition: all 0.4s ease;
}
.achievement-card::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
.achievement-card:hover::after {
opacity: 1;
}
/* Stats Counter Animation */
.stat-counter {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Experts Marquee Styles */
.experts-marquee-container {
overflow: hidden;
position: relative;
width: 100%;
background: transparent;
border-radius: 15px;
padding: 20px 0;
}
.experts-marquee {
display: flex;
animation: marquee 20s linear infinite;
width: fit-content;
}
.expert-card-marquee {
flex: 0 0 auto;
display: flex;
align-items: center;
background: transparent !important;
border-radius: 12px;
padding: 15px;
margin: 0 15px;
box-shadow: none !important;
min-width: 320px;
transition: transform 0.3s ease;
border: none !important;
}
.expert-card-marquee:hover {
transform: translateY(-5px);
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.expert-photo {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
border: 3px solid #f0f0f0;
background: #f8f9fa;
}
.expert-info {
flex: 1;
}
.expert-name {
font-weight: 600;
margin: 0 0 5px 0;
color: #333;
font-size: 1.1rem;
}
.expert-designation {
color: #667eea;
font-weight: 500;
margin: 0 0 5px 0;
font-size: 0.9rem;
}
.expert-description {
color: #666;
font-size: 0.85rem;
margin: 0 0 8px 0;
}
.expert-students {
color: #28a745;
font-size: 0.8rem;
font-weight: 600;
background: transparent;
padding: 4px 8px;
border-radius: 15px;
display: inline-block;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Student Photos Grid */
.student-photos-grid {
margin-bottom: 2rem;
}
.student-photo-card {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
background: #fff;
}
.student-photo-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.student-img {
width: 100%;
height: 150px;
object-fit: cover;
}
.company-badge {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(0,0,0,0.8);
color: white;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.7rem;
font-weight: 600;
backdrop-filter: blur(10px);
}
/* Accreditations Marquee */
.accreditations-marquee-container {
overflow: hidden;
position: relative;
width: 100%;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
border-radius: 15px;
padding: 30px 0;
mask-image: linear-gradient(90deg,
transparent 0%,
black 5%,
black 95%,
transparent 100%);
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
black 5%,
black 95%,
transparent 100%);
}
.accreditations-track {
display: flex;
animation: scrollLeftSmooth 40s linear infinite;
width: fit-content;
will-change: transform;
backface-visibility: hidden;
perspective: 1000px;
}
.accreditation-item {
flex: 0 0 auto;
width: 280px; /* Fixed width for equal card sizes */
margin: 0 20px;
}
.accreditation-card {
width: 100%;
height: 220px; /* Fixed height for equal card sizes */
border: none;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
overflow: hidden;
}
.accreditation-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.accreditation-logo {
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
margin: 0 auto 1rem;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
}
.accreditation-logo img {
transition: transform 0.3s ease;
width: 100%;
height: 100%;
object-fit: cover;
}
.accreditation-card:hover .accreditation-logo img {
transform: scale(1.05);
}
.accreditation-card .card-title {
font-size: 1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.5rem;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 48px;
}
.accreditation-card .card-text {
font-size: 0.875rem;
color: #6c757d;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 45px;
}
/* Pause animation on hover */
.accreditations-marquee-container:hover .accreditations-track {
animation-play-state: paused;
}
@keyframes scrollLeftSmooth {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Fallback animation - simple test */
@keyframes simpleScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100px);
}
}
/* Educational Partners Marquee */
.educational-partners-marquee-container {
overflow: hidden;
position: relative;
width: 100%;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
border-radius: 15px;
padding: 30px 0;
}
.educational-partners-track {
display: flex;
animation: scrollLeft 35s linear infinite;
width: fit-content;
}
.educational-partner-item {
flex: 0 0 auto;
width: 320px; /* Fixed width for equal card sizes */
margin: 0 20px;
}
.partner-card {
width: 100%;
height: 280px; /* Fixed height for equal card sizes */
border: none;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
overflow: hidden;
}
.partner-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* Feature Card Link Styles */
.feature-card-link {
text-decoration: none;
color: inherit;
transition: transform 0.3s ease;
}
.feature-card-link:hover {
transform: translateY(-5px) scale(1.02);
}
.feature-card-link:hover .feature-card {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.carousel-cards-wrapper {
min-width: max-content;
padding: 0 20px;
}
/* Feature Card Styles */
.feature-card {
min-width: 280px;
height: 220px;
border-radius: 16px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border: 2px solid transparent;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.feature-card:nth-child(2n) {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.feature-card:nth-child(3n) {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.feature-card:nth-child(4n) {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.feature-card:nth-child(5n) {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.feature-card:nth-child(6n) {
background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}
.feature-card:nth-child(7n) {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
.feature-card:nth-child(8n) {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}
.feature-card:nth-child(9n) {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}
.feature-card:nth-child(10n) {
background: linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%);
}
.feature-card:nth-child(11n) {
background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
}
.feature-card:nth-child(12n) {
background: linear-gradient(135deg, #f8b195 0%, #c06c84 100%);
}
.feature-card:hover {
transform: translateY(-12px) scale(1.05) rotateX(5deg);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
.feature-card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
}
.feature-card:hover .feature-card-overlay {
opacity: 1;
}
.feature-card-icon {
font-size: 2.8rem;
color: white;
margin-bottom: 0.5rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.feature-card-title {
color: white;
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 0.5rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.feature-card-description {
color: rgba(255, 255, 255, 0.9);
font-size: 0.85rem;
line-height: 1.4;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.feature-card-stats {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 8px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.feature-card-badge {
position: absolute;
bottom: 15px;
left: 15px;
padding: 6px 12px;
border-radius: 15px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.feature-card-badge.bg-success {
background: linear-gradient(135deg, #28a745, #20c997);
}
.feature-card-badge.bg-info {
background: linear-gradient(135deg, #17a2b8, #0dcaf0);
}
.feature-card-badge.bg-warning {
background: linear-gradient(135deg, #ffc107, #fd7e14);
}
.feature-card-badge.bg-danger {
background: linear-gradient(135deg, #dc3545, #e83e8c);
}
.feature-card-badge.bg-primary {
background: linear-gradient(135deg, #007bff, #6f42c1);
}
/* Ensure Bootstrap Icons are loaded and visible */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
/* Manual Carousel Container */
.cards-carousel-container {
position: relative;
overflow: hidden;
border-radius: 20px;
padding: 20px 60px;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
min-height: 220px;
}
.cards-carousel-content {
display: flex;
gap: 20px;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Updated Feature Card Styles - More Specific */
.cards-carousel-container .feature-card {
min-width: 320px;
max-width: 320px;
height: 180px;
border-radius: 16px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border: 2px solid #ddd;
display: flex !important;
align-items: center;
padding: 20px;
color: #333 !important;
background: linear-gradient(135deg, #FFE5E5 0%, #FFCCCC 100%);
visibility: visible !important;
opacity: 1 !important;
}
/* Individual card colors using data attributes - Light Professional Colors */
.cards-carousel-container .feature-card[data-index="0"] {
background: linear-gradient(135deg, #FFE5E5 0%, #FFD3D3 100%);
}
.cards-carousel-container .feature-card[data-index="1"] {
background: linear-gradient(135deg, #E5F9F6 0%, #D4F1F4 100%);
}
.cards-carousel-container .feature-card[data-index="2"] {
background: linear-gradient(135deg, #E5F2FF 0%, #C7EAFF 100%);
}
.cards-carousel-container .feature-card[data-index="3"] {
background: linear-gradient(135deg, #F0F9E5 0%, #E2F0CB 100%);
}
.cards-carousel-container .feature-card[data-index="4"] {
background: linear-gradient(135deg, #F5E5FF 0%, #F0D3FF 100%);
}
.cards-carousel-container .feature-card[data-index="5"] {
background: linear-gradient(135deg, #FFF5E5 0%, #FFE5CC 100%);
}
.cards-carousel-container .feature-card[data-index="6"] {
background: linear-gradient(135deg, #E5F9FF 0%, #D4E9FF 100%);
}
.cards-carousel-container .feature-card[data-index="7"] {
background: linear-gradient(135deg, #FFE5F5 0%, #FFD3E8 100%);
}
.cards-carousel-container .feature-card[data-index="8"] {
background: linear-gradient(135deg, #F0FFF5 0%, #D4FFE5 100%);
}
.cards-carousel-container .feature-card[data-index="9"] {
background: linear-gradient(135deg, #FFF9E5 0%, #FFF5CC 100%);
}
.cards-carousel-container .feature-card[data-index="10"] {
background: linear-gradient(135deg, #F5E5FF 0%, #EAD3FF 100%);
}
.cards-carousel-container .feature-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
border: none;
}
/* CAROUSEL CARDS - COMPLETELY RESET - HIGHEST SPECIFICITY */
.cards-carousel-container .feature-card {
min-width: 320px !important;
max-width: 320px !important;
height: 180px !important;
border-radius: 16px !important;
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
border: 2px solid #ddd !important;
padding: 50px 15px 25px 15px !important;
color: white !important;
text-align: left !important;
visibility: visible !important;
opacity: 1 !important;
display: block !important;
margin: 0 !important;
float: none !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
}
.cards-carousel-container .feature-card-icon {
font-size: 2.2rem !important;
color: #555 !important;
margin: -20px auto 12px auto !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
display: block !important;
text-align: center !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
background: none !important;
border: none !important;
padding: 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: 0 !important;
bottom: auto !important;
}
.cards-carousel-container .feature-card-icon i,
.cards-carousel-container .feature-card-icon .bi {
font-size: 2.2rem !important;
color: #555 !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
.cards-carousel-container .feature-card-content {
color: white !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 2 !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
flex: 1 !important;
}
.cards-carousel-container .feature-card-title {
font-weight: 700 !important;
font-size: 1.1rem !important;
margin: 0 auto 8px auto !important;
color: #333 !important;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
text-align: center !important;
line-height: 1.2 !important;
padding: 0 !important;
position: relative !important;
z-index: 2 !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
}
.cards-carousel-container .feature-card-description {
font-size: 0.85rem !important;
line-height: 1.3 !important;
margin: 0 auto 0 auto !important;
color: #555 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
text-align: center !important;
padding: 0 !important;
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
}
.cards-carousel-container .feature-card-stats {
font-size: 0.7rem !important;
font-weight: 600 !important;
background: rgba(255, 255, 255, 0.95) !important;
padding: 4px 8px !important;
border-radius: 8px !important;
display: inline-block !important;
color: #333 !important;
position: absolute !important;
top: 10px !important;
left: 10px !important;
visibility: visible !important;
opacity: 1 !important;
text-align: center !important;
z-index: 1000 !important;
margin: 0 !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
line-height: 1.2 !important;
height: auto !important;
min-height: auto !important;
white-space: nowrap !important;
}
.cards-carousel-container .feature-card-badge {
position: absolute !important;
top: 10px !important;
right: 10px !important;
padding:4px 8px !important;
border-radius: 8px !important;
font-size: 0.65rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
background: rgba(255, 255, 255, 0.95) !important;
color: #333 !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 2000 !important;
margin: 0 !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
white-space: nowrap !important;
}
/* Carousel Navigation Buttons */
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
color: white;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}
.carousel-prev {
left: 10px;
}
.carousel-next {
right: 10px;
}
.carousel-btn:hover {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 8px 25px rgba(13, 110, 253, 0.4);
background: linear-gradient(135deg, #0a58ca 0%, #0d6efd 100%);
}
.carousel-btn:active {
transform: translateY(-50%) scale(0.95);
}
/* Partner Logo Styles */
.partner-logo-wrapper {
position: relative;
flex-shrink: 0;
}
.partner-logo {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 8px;
border: 2px solid #f8f9fa;
}
.partner-type-badge {
position: absolute;
bottom: -3px;
right: -3px;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
font-size: 10px;
}
/* Stat Card Styles */
.stat-card {
background: white;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 2rem 1.5rem;
text-align: center;
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.stat-icon {
width: 50px;
height: 50px;
background: #f8f9fa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.25rem;
color: #6c757d;
}
.stat-number {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.875rem;
margin-bottom: 0;
font-weight: 500;
}
/* Text Overflow Fixes */
.partner-card .card-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
min-height: 60px;
}
.partner-card .small {
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: break-word;
}
.partner-card .card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
min-height: 48px;
}
.partner-card .badge {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}
/* Small Card Styles */
.partner-card-small {
background: white;
border: 1px solid #e9ecef;
border-radius: 10px;
transition: all 0.3s ease;
height: 100%;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.partner-card-small:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.12);
border-color: #007bff;
background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
}
.partner-logo-wrapper-small {
position: relative;
width: 45px;
height: 45px;
margin: 0 auto;
}
.partner-logo-small {
width: 45px;
height: 45px;
object-fit: cover;
border-radius: 8px;
border: 2px solid #f8f9fa;
transition: all 0.3s ease;
}
.partner-card-small:hover .partner-logo-small {
border-color: #007bff;
transform: scale(1.05);
}
.partner-type-badge-small {
position: absolute;
bottom: -2px;
right: -2px;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
font-size: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.card-title-small {
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.4rem;
line-height: 1.1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 32px;
color: #2c3e50;
}
.card-text-small {
font-size: 0.75rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 32px;
color: #6c757d;
}
/* Explore Button Styling */
.explore-btn {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border: none;
border-radius: 50px;
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
position: relative;
overflow: hidden;
}
.explore-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.explore-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
background: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
}
.explore-btn:hover::before {
left: 100%;
}
.explore-btn:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
}
/* Modal Card Styles */
.partner-card-modal {
background: white;
border: 1px solid #e9ecef;
border-radius: 12px;
transition: all 0.3s ease;
height: 100%;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
margin-bottom: 1rem;
}
.partner-card-modal:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
border-color: #007bff;
}
.partner-logo-wrapper-modal {
position: relative;
width: 60px;
height: 60px;
margin: 0 auto;
}
.partner-logo-modal {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 10px;
border: 3px solid #f8f9fa;
transition: all 0.3s ease;
}
.partner-card-modal:hover .partner-logo-modal {
border-color: #007bff;
transform: scale(1.05);
}
.partner-type-badge-modal {
position: absolute;
bottom: -3px;
right: -3px;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid white;
font-size: 9px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.card-title-modal {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 40px;
color: #2c3e50;
}
.card-text-modal {
font-size: 0.8rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 60px;
color: #6c757d;
text-align: center;
}
/* Modal Body Spacing */
.modal-body {
padding: 2rem;
}
/* Modal Z-Index Fix */
.modal {
z-index: 9999 !important;
}
.modal-backdrop {
z-index: 9998 !important;
}
/* Custom Column for 5 Cards */
@media (min-width: 1200px) {
.col-xl-2-4 {
flex: 0 0 auto;
width: 20%;
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.expert-card-marquee {
min-width: 280px;
margin: 0 10px;
}
.expert-photo {
width: 60px;
height: 60px;
}
.expert-name {
font-size: 1rem;
}
.expert-designation {
font-size: 0.85rem;
}
.carousel-cards-wrapper {
padding: 0 10px;
}
.feature-card {
min-width: 240px;
height: 180px;
}
.carousel-prev,
.carousel-next {
width: 35px;
height: 35px;
font-size: 1rem;
}
}
@media (max-width: 576px) {
.feature-card {
min-width: 200px;
height: 160px;
}
.feature-card-icon {
font-size: 2rem;
}
.feature-card-title {
font-size: 1rem;
}
.feature-card-description {
font-size: 0.8rem;
}
}
/* Glowing Border */
.glow-border {
position: relative;
border: 2px solid transparent;
background: linear-gradient(white, white) padding-box,
linear-gradient(135deg, #667eea, #764ba2) border-box;
border-radius: 16px;
}
/* Leadership Card */
.leadership-card {
position: relative;
overflow: hidden;
transition: all 0.4s ease;
}
.leadership-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.leadership-card:hover::before {
transform: scaleX(1);
}
.leadership-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
}
/* Responsive Animations */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Auto Scroll Animation for Accreditations */
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.scroll-container {
overflow: hidden;
position: relative;
width: 100%;
padding: 30px 0;
background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
}
.scroll-content {
display: flex;
gap: 1.5rem;
width: max-content;
}
.scroll-container:hover .scroll-content {
animation-play-state: paused;
}
/* Accreditation Logo Box */
.accred-logo-box {
background: white;
border: 2px solid #e0e0e0;
border-radius: 12px;
padding: 30px;
margin: 0 15px;
min-width: 220px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.accred-logo-box:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,102,204,0.2);
border-color: #0066cc;
cursor: pointer;
}
.accred-logo-box img {
max-width: 100%;
max-height: 90px;
object-fit: contain;
}
/* Enhanced Course Section */
.course-section-header {
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
color: white;
padding: 80px 0;
margin-bottom: 50px;
position: relative;
overflow: hidden;
border-radius: 0 0 50px 50px;
}
.course-section-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.2) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.course-section-header h2 {
font-size: 3rem;
font-weight: 900;
margin-bottom: 20px;
text-shadow: 0 4px 8px rgba(0,0,0,0.2);
position: relative;
z-index: 2;
}
.course-section-header p {
font-size: 1.3rem;
opacity: 0.95;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Enhanced Course Tiles */
.course-tile {
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 220px; /* Fixed height to keep cards in canvas */
border: 2px solid transparent;
position: relative;
display: flex;
flex-direction: column;
max-width: 100%; /* Ensure cards don't overflow */
}
.course-tile::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #0d6efd 0%, #0a58ca 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.course-tile:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 40px rgba(13, 110, 253, 0.3);
border-color: #0d6efd;
}
.course-tile:hover::before {
opacity: 1;
}
.course-tile .head {
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
color: white;
padding: 10px 12px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
position: relative;
overflow: hidden;
}
.course-tile .head span:first-child {
background: rgba(255,255,255,0.25);
padding: 4px 8px;
border-radius: 15px;
font-size: 0.7rem;
backdrop-filter: blur(10px);
}
.course-tile .head span:last-child {
background: rgba(255,255,255,0.15);
padding: 4px 10px;
border-radius: 12px;
font-size: 0.75rem;
backdrop-filter: blur(10px);
}
.course-tile .body {
padding: 15px 10px;
font-size: 0.85rem;
font-weight: 600;
color: #2d3748;
text-align: center;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #ffffff 0%, #f7fafc 100%);
position: relative;
}
.course-tile .body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(13, 110, 253, 0.3) 50%, transparent 100%);
}
.course-tile .foot {
padding: 12px 10px;
text-align: center;
background: linear-gradient(145deg, #f7fafc 0%, #edf2f7 100%);
border-top: 1px solid rgba(0,0,0,0.05);
margin-top: auto;
}
.course-tile .foot .btn {
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
color: white;
border: none;
padding: 6px 15px;
border-radius: 20px;
font-weight: 600;
font-size: 0.75rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}
.course-tile .foot .btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(13, 110, 253, 0.4);
}
/* Enhanced Side Categories */
.side-categories {
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
padding: 25px;
position: sticky;
top: 80px;
height: 600px; /* Match course content area height */
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
z-index: 10;
overflow-x: hidden;
}
.side-categories::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
padding: 2px;
background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
z-index: -1;
}
.side-categories .nav-link {
color: #4a5568;
border: none;
border-radius: 15px;
padding: 14px 18px;
margin-bottom: 10px;
font-weight: 600;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-align: left;
position: relative;
overflow: hidden;
background: rgba(255,255,255,0.5);
backdrop-filter: blur(10px);
}
.side-categories .nav-link:hover {
background: rgba(0, 102, 204, 0.1);
color: #0066cc;
transform: translateX(8px);
box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
}
.side-categories .nav-link.active {
background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
color: white;
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
transform: translateX(5px);
}
/* Course Content Area with Scrollbar */
.course-content-area {
max-height: 600px; /* Increased height for better visibility */
overflow-y: auto;
padding-right: 10px;
background: rgba(255, 255, 255, 0.5);
border-radius: 15px;
padding: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.course-content-area::-webkit-scrollbar {
width: 8px;
}
.course-content-area::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.course-content-area::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
border-radius: 10px;
}
.course-content-area::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #0a58ca 0%, #0d6efd 100%);
}
.side-categories::-webkit-scrollbar {
width: 6px;
}
.side-categories::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.side-categories::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
border-radius: 10px;
}
.side-categories::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #0a58ca 0%, #0d6efd 100%);
}
/* About Page Styles */
.timeline-item {
margin-bottom: 1rem;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease forwards;
}
.timeline-item:nth-child(1) { animation-delay: 0.1s; }
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
.timeline-item:nth-child(3) { animation-delay: 0.3s; }
.timeline-item:nth-child(4) { animation-delay: 0.4s; }
.timeline-item:nth-child(5) { animation-delay: 0.5s; }
.timeline-item:nth-child(6) { animation-delay: 0.6s; }
.timeline-item:nth-child(7) { animation-delay: 0.7s; }
.timeline-item:nth-child(8) { animation-delay: 0.8s; }
.timeline-item:nth-child(9) { animation-delay: 0.9s; }
.timeline-item:nth-child(10) { animation-delay: 1.0s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.achievement-card {
border-left: 4px solid #0d6efd !important;
transition: all 0.3s ease;
}
.achievement-card:hover {
transform: translateX(5px);
box-shadow: 0 8px 25px rgba(13, 110, 253, 0.15);
}
.leadership-card {
transition: all 0.3s ease;
border: 2px solid transparent;
}
.leadership-card:hover {
border-color: #0d6efd;
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(13, 110, 253, 0.2);
}
.glow-border {
position: relative;
overflow: hidden;
}
.glow-border::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(13, 110, 253, 0.1), transparent);
transition: left 0.5s ease;
}
.glow-border:hover::before {
left: 100%;
}
.stat-counter {
font-weight: 700;
color: #0d6efd;
}
/* Course Page Styles */
.bg-gradient-primary {
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
position: relative;
overflow: hidden;
z-index: 1 !important;
}
.bg-gradient-primary::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.icon-box {
width: 60px;
height: 60px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}
.icon-box:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}
.accordion-button:not(.collapsed) {
background-color: #f8f9fa;
color: #0d6efd;
font-weight: 600;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(0,0,0,.125);
}
.sticky-top {
position: sticky;
top: 0;
z-index: 1020;
}
/* Fix for hero carousel and sections overlapping navbar */
#heroCarousel,
.bg-gradient-primary,
section:first-of-type,
main > section:first-child,
header.bg-light {
margin-top: 0 !important;
}
/* Ensure proper spacing for content after navbar */
.navbar + * {
margin-top: 0;
}
@media (min-width: 992px) {
.sticky-sidebar {
position: sticky;
top: 100px;
z-index: 1;
}
}
/* Animated Gradient Background */
@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.bg-gradient-animated {
background: linear-gradient(-45deg, #0d6efd, #0a58ca, #0dcaf0, #0d6efd);
background-size: 400% 400%;
animation: gradient-shift 15s ease infinite;
}
/* Form Styling */
.form-control:focus,
.form-select:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.btn-primary {
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
border: none;
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3);
background: linear-gradient(135deg, #0a58ca 0%, #0d6efd 100%);
}
/* Badge Styling */
.badge {
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 50px;
}
/* Pulse Animation for CTA */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
.btn-light.btn-lg {
animation: pulse 2s infinite;
}
/* List Styling */
.list-unstyled li {
padding: 0.5rem 0;
border-bottom: 1px solid #f0f0f0;
}
.list-unstyled li:last-child {
border-bottom: none;
}
/* Card Shadow Variations */
.shadow-sm {
box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
.shadow-lg {
box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}
/* Smooth Scroll */
html {
scroll-behavior: smooth;
}
/* Tech Icon Box */
.tech-icon-box {
width: 80px;
height: 80px;
background: white;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.3s ease;
margin: 0 auto;
}
.tech-icon-box:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.tech-icon-box i {
transition: transform 0.3s ease;
}
.tech-icon-box:hover i {
transform: scale(1.1);
}
/* Small Icon Box for Sidebar */
.icon-box-sm {
width: 45px;
height: 45px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
/* Accordion Enhancements */
.accordion-item {
border-radius: 8px !important;
overflow: hidden;
margin-bottom: 0.5rem;
}
.accordion-button {
font-size: 1rem;
padding: 1rem 1.25rem;
}
.accordion-button i {
font-size: 1.2rem;
}
/* Modern Hero Section */
.hero-modern-section {
background: linear-gradient(135deg, #e8f4fd 0%, #ffffff 50%, #f0f9ff 100%);
padding: 40px 0 30px;
position: relative;
overflow: hidden;
}
.hero-modern-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(99,102,241,0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(99,102,241,0.03) 0%, transparent 50%);
opacity: 1;
}
.hero-content-modern {
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-block;
background: #0066cc;
padding: 8px 20px;
border-radius: 30px;
margin-bottom: 20px;
border: none;
}
.badge-text {
color: white;
font-weight: 600;
font-size: 0.9rem;
}
.hero-title {
font-size: 1.75rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 10px;
line-height: 1.2;
}
.hero-description {
font-size: 1rem;
color: #4a5568;
margin-bottom: 25px;
line-height: 1.5;
}
.hero-features-list {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
margin-bottom: 30px;
}
.feature-item {
display: flex;
align-items: center;
background: rgba(255,255,255,0.8);
backdrop-filter: blur(10px);
padding: 15px;
border-radius: 12px;
border: 1px solid rgba(0,102,204,0.2);
transition: all 0.3s ease;
}
.feature-item:hover {
transform: translateY(-3px);
background: rgba(255,255,255,0.95);
box-shadow: 0 8px 20px rgba(0,102,204,0.2);
}
.feature-icon {
width: 40px;
height: 40px;
background: linear-gradient(45deg, #0066cc, #0052a3);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
}
.feature-icon i {
color: white;
font-size: 1.5rem;
}
.feature-text h4 {
color: #1a202c;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 3px;
}
.feature-text p {
color: #4a5568;
font-size: 0.8rem;
margin: 0;
}
.hero-actions {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.btn-primary-modern {
background: linear-gradient(45deg, #0066cc, #0052a3);
color: white;
border: none;
padding: 12px 24px;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
box-shadow: 0 6px 15px rgba(0,102,204,0.3);
}
.btn-primary-modern:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,102,204,0.4);
}
.btn-outline-modern {
background: transparent;
color: #0066cc;
border: 2px solid #0066cc;
padding: 12px 24px;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
}
.btn-outline-modern:hover {
background: #0066cc;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,102,204,0.3);
}
/* Search Section Styling */
.hero-search {
background: linear-gradient(135deg, #f0f9ff 0%, #e8f4fd 50%, #ffffff 100%);
padding: 60px 0;
position: relative;
overflow: hidden;
}
.hero-search::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(0,102,204,0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0,102,204,0.03) 0%, transparent 50%);
opacity: 1;
}
.search-content h2 {
font-size: 2rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 15px;
}
.search-content p {
font-size: 1.1rem;
color: #4a5568;
margin-bottom: 25px;
}
.modern-search-box {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(20px);
border: 2px solid rgba(0,102,204,0.2);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
position: relative;
z-index: 2;
}
.search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.search-input-wrapper .form-control {
font-size: 1rem;
padding: 15px 20px 15px 50px;
border: none;
background: transparent;
}
.search-input-wrapper .form-control:focus {
outline: none;
box-shadow: none;
}
.search-icon {
position: absolute;
left: 20px;
color: #6b7280;
z-index: 1;
}
.popular-searches {
margin-bottom: 20px;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 15px;
border: 1px solid rgba(0,102,204,0.2);
position: relative;
z-index: 2;
}
.popular-searches span {
color: #1a202c;
font-weight: 600;
font-size: 0.95rem;
}
.chip-modern {
background: rgba(255,255,255,0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(0,102,204,0.3);
color: #1a202c;
padding: 10px 18px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
margin: 6px;
}
.chip-modern:hover {
background: #0066cc;
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0,102,204,0.3);
}
.trust-indicators {
margin-top: 20px;
background: rgba(255,255,255,0.8);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 15px;
border: 1px solid rgba(0,102,204,0.2);
position: relative;
z-index: 2;
}
.trust-item {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.trust-icon {
color: #10b981;
font-weight: 700;
font-size: 1.2rem;
background: rgba(16,185,129,0.2);
padding: 8px;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
}
.trust-item .small {
color: #4a5568;
font-weight: 500;
}
/* Search Illustration Section */
.search-illustration {
margin-top: 30px;
}
.illustration-card {
background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
backdrop-filter: blur(15px);
border-radius: 20px;
padding: 30px;
border: 1px solid rgba(0,102,204,0.3);
box-shadow: 0 15px 35px rgba(0,102,204,0.3);
}
.illustration-content {
background: transparent;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
justify-items: center;
max-width: 100%;
}
.stat-card {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 15px;
text-align: center;
border: 1px solid rgba(255,255,255,0.3);
transition: all 0.3s ease;
max-width: 160px;
width: 100%;
}
.stat-card:hover {
transform: translateY(-5px);
background: rgba(255,255,255,1);
box-shadow: 0 10px 25px rgba(0,102,204,0.2);
}
.stat-icon {
font-size: 2rem;
margin-bottom: 10px;
line-height: 1;
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: #1a202c;
margin-bottom: 5px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.stat-label {
font-size: 1rem;
font-weight: 600;
color: #4a5568;
}
/* Hero Visual Section */
.hero-visual-modern {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.hero-images-grid {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
width: 100%;
}
.hero-image-item {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
transition: transform 0.3s ease;
}
.hero-image-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}
.hero-grid-image {
width: 100%;
height: auto;
display: block;
border-radius: 15px;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(79,70,229,0.1) 0%, rgba(67,56,202,0.1) 100%);
border-radius: 15px;
}
.stats-cards {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.stat-card {
background: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
padding: 20px 25px;
border-radius: 15px;
text-align: center;
border: 1px solid rgba(255,255,255,0.2);
min-width: 120px;
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.2);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.stat-number {
font-size: 2rem;
font-weight: 800;
color: white;
margin-bottom: 5px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.stat-label {
font-size: 0.9rem;
color: rgba(255,255,255,0.9);
font-weight: 600;
}
.hero-carousel-section .carousel-caption h1,
.hero-carousel-section .carousel-caption h2 {
font-size: 2.5rem;
font-weight: 900;
margin-bottom: 1.5rem;
color: #ffffff;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
line-height: 1.1;
}
.hero-carousel-section .carousel-caption p {
font-size: 1.2rem;
margin-bottom: 1.5rem;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
line-height: 1.4;
}
.hero-carousel-section .hero-points {
margin-bottom: 1.5rem;
text-align: left;
}
.hero-carousel-section .hero-points ul {
list-style: none;
padding: 0;
margin: 0;
}
.hero-carousel-section .hero-points li {
font-size: 0.95rem;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
}
.hero-carousel-section .hero-points i {
color: #10b981;
margin-right: 0.5rem;
font-size: 1rem;
}
.hero-carousel-section .hero-buttons {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}
.hero-carousel-section .carousel-caption .btn {
padding: 0.875rem 2rem;
font-weight: 600;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}
.hero-carousel-section .carousel-caption .btn-primary {
background: #4f46e5;
border: none;
}
.hero-carousel-section .carousel-caption .btn-primary:hover {
background: #4338ca;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
}
.hero-carousel-section .carousel-caption .btn-outline-light {
background: transparent;
color: white;
border: 2px solid white;
}
.hero-carousel-section .carousel-caption .btn-outline-light:hover {
background: white;
color: #4f46e5;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}
.hero-carousel-section .carousel-caption .btn:hover {
background: #4338ca;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
}
.hero-carousel-section .carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
border: none;
margin: 0 5px;
}
.hero-carousel-section .carousel-indicators button.active {
background-color: #4f46e5;
}
.hero-carousel-section .carousel-control-prev,
.hero-carousel-section .carousel-control-next {
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
backdrop-filter: blur(10px);
}
.hero-carousel-section .carousel-control-prev-icon,
.hero-carousel-section .carousel-control-next-icon {
width: 20px;
height: 20px;
}
.hero-content {
position: relative;
z-index: 3;
padding: 3rem 0;
}
.hero-visual {
position: relative;
z-index: 3;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-content h1 {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
color: #1a202c;
}
.hero-content .lead {
font-size: 1.2rem;
font-weight: 400;
margin-bottom: 2rem;
color: #4a5568;
line-height: 1.5;
}
.hero-features {
background: rgba(255,255,255,0.8);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 2rem;
border: 1px solid rgba(0,0,0,0.1);
}
.hero-features li {
font-size: 1rem;
margin-bottom: 0.75rem;
color: #1a202c;
display: flex;
align-items: center;
font-weight: 500;
}
.hero-features i {
font-size: 1.2rem;
color: #6366f1 !important;
margin-right: 0.75rem;
}
.hero-buttons .btn {
padding: 1rem 2rem;
font-weight: 600;
border-radius: 12px;
transition: all 0.3s ease;
font-size: 1rem;
position: relative;
overflow: hidden;
}
.hero-buttons .btn-primary {
background: #4f46e5;
color: white;
border: none;
box-shadow: 0 4px 12px rgba(79,70,229,0.3);
}
.hero-buttons .btn-primary:hover {
background: #4338ca;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(79,70,229,0.4);
}
.hero-buttons .btn-outline-primary {
background: transparent;
color: #4f46e5;
border: 2px solid #4f46e5;
}
.hero-buttons .btn-outline-primary:hover {
background: #4f46e5;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(79,70,229,0.3);
}
/* Hero Visual Section */
.hero-visual {
position: relative;
z-index: 3;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
/* Phone Frame Design */
.phone-frame {
position: relative;
width: 350px;
height: 450px;
}
.hero-man-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
position: relative;
z-index: 1;
}
.phone-frame-border {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 280px;
height: 200px;
border: 8px solid #e5e7eb;
border-radius: 20px;
background: white;
z-index: 2;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.phone-screen {
width: 100%;
height: 100%;
border-radius: 12px;
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 1rem;
}
.video-counseling {
text-align: center;
color: #4f46e5;
font-weight: 600;
font-size: 0.9rem;
}
.video-counseling i {
font-size: 2rem;
margin-bottom: 0.5rem;
color: #4f46e5;
}
.video-counseling span {
display: block;
font-size: 0.8rem;
margin-top: 0.25rem;
}
/* Floating Cards - Enhanced Design */
.floating-card {
position: absolute;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
color: #333;
min-width: 200px;
animation: float 8s ease-in-out infinite;
transition: all 0.4s ease;
border: 1px solid rgba(255,255,255,0.3);
z-index: 4;
}
.floating-card:hover {
transform: scale(1.1) translateY(-10px);
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.floating-card.card-1 {
top: 20px;
right: 30px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
animation-delay: 0s;
transform: rotate(-5deg);
}
.floating-card.card-1:hover {
transform: scale(1.1) translateY(-10px) rotate(0deg);
}
.floating-card.card-2 {
top: 200px;
left: 20px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
animation-delay: 3s;
transform: rotate(3deg);
}
.floating-card.card-2:hover {
transform: scale(1.1) translateY(-10px) rotate(0deg);
}
.floating-card.card-3 {
bottom: 100px;
right: 50px;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
animation-delay: 6s;
transform: rotate(-3deg);
}
.floating-card.card-3:hover {
transform: scale(1.1) translateY(-10px) rotate(0deg);
}
.floating-card .card-title {
font-size: 1.1rem;
font-weight: 800;
margin-bottom: 0.5rem;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.floating-card .card-text {
font-size: 0.9rem;
opacity: 0.95;
margin-bottom: 0;
line-height: 1.4;
font-weight: 400;
}
.floating-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
border-radius: 20px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.floating-card:hover::before {
opacity: 1;
}
/* Progress Card - Enhanced */
.progress-card {
position: absolute;
bottom: 30px;
left: 30px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
min-width: 250px;
z-index: 4;
border: 1px solid rgba(255,255,255,0.3);
transform: rotate(-2deg);
transition: all 0.4s ease;
}
.progress-card:hover {
transform: rotate(0deg) scale(1.05);
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.progress-title {
font-size: 1rem;
font-weight: 700;
color: #333;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.progress-percentage {
font-size: 1.1rem;
font-weight: 800;
color: #667eea;
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.progress {
height: 12px;
background: rgba(0,0,0,0.1);
border-radius: 10px;
overflow: hidden;
position: relative;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
border-radius: 10px;
transition: width 1s ease;
position: relative;
overflow: hidden;
}
.progress-bar::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
}
/* Comprehensive Responsive Design */
/* Tablets and Large Mobile */
@media (max-width: 992px) {
/* Typography */
h1, .h1 { font-size: 2.2rem; }
h2, .h2 { font-size: 1.8rem; }
h3, .h3 { font-size: 1.6rem; }
/* Navigation */
.navbar-brand {
font-size: 1.2rem !important;
}
.navbar-nav .nav-link {
font-size: 0.85rem;
padding: 0.5rem 0.75rem;
}
/* Hero Section */
.hero-section {
min-height: auto;
padding: 4rem 0;
}
.hero-girl-img {
height: 350px;
}
/* Course Cards */
.course-tile {
margin-bottom: 1.5rem;
}
/* Stats Cards */
.stat-card {
margin-bottom: 1rem;
}
}
/* Tablets and Small Mobile */
@media (max-width: 768px) {
/* Base Typography */
html { font-size: 16px; }
body { font-size: 0.95rem; }
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.4rem; }
h4, .h4 { font-size: 1.2rem; }
/* Navigation */
.navbar {
padding: 0.5rem 1rem;
}
.navbar-brand {
font-size: 1rem !important;
line-height: 1.2;
}
.navbar-logo {
width: 40px;
height: 40px;
}
.navbar-nav .nav-link {
font-size: 0.9rem;
padding: 0.75rem 1rem;
}
/* Topbar */
.topbar {
font-size: 0.8rem;
padding: 0.5rem 0;
}
/* Hero Section */
.hero-section {
min-height: auto;
padding: 3rem 0;
}
.hero-visual {
height: auto;
margin-top: 2rem;
display: block;
}
.hero-girl-img {
height: 300px;
width: 100%;
margin-bottom: 2rem;
}
.floating-card {
position: relative;
margin-bottom: 1rem;
right: auto !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
animation: none;
display: inline-block;
margin-right: 0.5rem;
}
.floating-card:hover {
transform: scale(1.02);
}
.progress-card {
position: relative;
bottom: auto !important;
left: auto !important;
margin-top: 1rem;
width: 100%;
}
.hero-section h1 {
font-size: 1.8rem;
}
.hero-buttons .btn {
display: block;
width: 100%;
margin-bottom: 1rem;
}
/* About Page Carousel */
.carousel-item .container {
padding: 1rem;
}
.carousel-item h2 {
font-size: 1.5rem !important;
}
.carousel-item h3 {
font-size: 1.2rem !important;
}
.carousel-item p {
font-size: 0.9rem;
}
/* Course Section */
.course-tile {
margin-bottom: 1.5rem;
height: 200px; /* Slightly smaller on mobile */
max-width: 100%;
}
.course-tile .head {
padding: 0.75rem;
}
.course-tile .body {
padding: 0.75rem;
font-size: 0.8rem;
}
.course-tile .foot {
padding: 0.75rem;
}
/* Side Categories */
.side-categories {
margin-bottom: 2rem;
position: relative; /* Remove sticky on mobile */
top: 0;
max-height: none;
}
/* Stats */
.stat-counter {
font-size: 1.5rem !important;
}
/* Buttons */
.btn {
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
}
.btn-lg {
padding: 0.8rem 1.5rem;
font-size: 1rem;
}
/* Forms */
.form-control, .form-select {
padding: 0.6rem 0.8rem;
font-size: 0.9rem;
}
}
/* Small Mobile */
@media (max-width: 576px) {
/* Typography */
html { font-size: 14px; }
body { font-size: 0.9rem; }
h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.4rem; }
h3, .h3 { font-size: 1.2rem; }
h4, .h4 { font-size: 1.1rem; }
/* Navigation */
.navbar {
padding: 0.5rem;
}
.navbar-brand {
font-size: 0.9rem !important;
}
.navbar-logo {
width: 35px;
height: 35px;
}
/* Topbar */
.topbar {
text-align: center;
font-size: 0.75rem;
}
.topbar .d-flex {
flex-direction: column;
gap: 0.25rem;
}
/* Hero Section */
.hero-img { height: 40vh; }
.carousel-caption { bottom: 1rem; }
.carousel-caption h1, .carousel-caption h2 { font-size: 1.3rem; }
.carousel-caption p { font-size: 0.85rem; }
/* About Page */
.carousel-item .container {
padding: 0.5rem;
}
.carousel-item h2 {
font-size: 1.3rem !important;
}
.carousel-item h3 {
font-size: 1.1rem !important;
}
.carousel-item p {
font-size: 0.85rem;
}
.carousel-item .badge {
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
}
/* Stats Cards */
.stat-counter {
font-size: 1.2rem !important;
}
/* Course Cards */
.course-tile {
margin-bottom: 1rem;
}
.course-tile .head {
padding: 0.75rem;
}
.course-tile .body {
padding: 0.75rem;
}
.course-tile .foot {
padding: 0.75rem;
}
.course-tile .btn {
font-size: 0.8rem;
padding: 0.5rem 1rem;
}
/* Buttons */
.btn {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.btn-lg {
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
}
/* Forms */
.form-control, .form-select {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
/* Images */
.img-fluid {
max-width: 100%;
height: auto;
}
/* Spacing */
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.row {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
/* Extra Small Mobile */
@media (max-width: 400px) {
/* Typography */
h1, .h1 { font-size: 1.4rem; }
h2, .h2 { font-size: 1.2rem; }
h3, .h3 { font-size: 1.1rem; }
/* Navigation */
.navbar-brand {
font-size: 0.8rem !important;
}
.navbar-logo {
width: 30px;
height: 30px;
}
/* Buttons */
.btn {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.btn-lg {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
}
/* Large Desktop */
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
}
/* Extra Large Desktop */
@media (min-width: 1600px) {
.container {
max-width: 1440px;
}
}
/* Carousel Cards Styling */
.carousel-scroll-container {
overflow-x: auto;
padding: 1rem 0;
scrollbar-width: thin;
scrollbar-color: rgba(13, 110, 253, 0.3) transparent;
}
.carousel-scroll-container::-webkit-scrollbar {
height: 6px;
}
.carousel-scroll-container::-webkit-scrollbar-track {
background: rgba(13, 110, 253, 0.1);
border-radius: 3px;
}
.carousel-scroll-container::-webkit-scrollbar-thumb {
background: rgba(13, 110, 253, 0.3);
border-radius: 3px;
}
.carousel-scroll-container::-webkit-scrollbar-thumb:hover {
background: rgba(13, 110, 253, 0.5);
}
.carousel-cards-wrapper {
min-width: max-content;
padding: 0 1rem;
}
.carousel-card {
min-width: 280px;
max-width: 280px;
height: 320px;
border-radius: 20px;
padding: 1.5rem;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.carousel-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.carousel-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
pointer-events: none;
}
.card-content {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
z-index: 1;
}
.card-badge {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
color: white;
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
display: inline-block;
margin-bottom: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.card-title {
color: white;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 0.5rem;
line-height: 1.2;
}
.card-subtitle {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
margin-bottom: 2rem;
font-weight: 400;
}
.card-illustration {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0;
position: relative;
}
.card-illustration i {
font-size: 3.5rem;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
margin-bottom: 1rem;
}
.carousel-card:hover .card-illustration i {
transform: scale(1.1);
color: white;
}
.card-btn {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: white;
padding: 0.8rem 1.5rem;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
margin-top: auto;
position: relative;
overflow: hidden;
}
.card-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.card-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
color: white;
border-color: rgba(255, 255, 255, 0.5);
}
.card-btn:hover::before {
left: 100%;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.carousel-card {
min-width: 240px;
max-width: 240px;
height: 280px;
padding: 1.2rem;
}
.card-title {
font-size: 1.1rem;
}
.card-subtitle {
font-size: 0.85rem;
margin-bottom: 1.5rem;
}
.card-illustration i {
font-size: 3rem;
}
.card-btn {
padding: 0.6rem 1.2rem;
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.carousel-card {
min-width: 200px;
max-width: 200px;
height: 260px;
padding: 1rem;
}
.card-title {
font-size: 1rem;
}
.card-illustration i {
font-size: 2.5rem;
}
}
/* Modern Cards Styling */
.bg-gradient-dark {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
position: relative;
overflow: hidden;
}
.bg-gradient-dark::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.cards-scroll-container {
overflow: hidden;
position: relative;
width: 100%;
padding: 40px 0;
background: rgba(15, 23, 42, 0.5);
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.cards-scroll-content {
display: flex;
gap: 2rem;
width: max-content;
animation: cardsScroll 40s linear infinite;
}
.cards-scroll-container:hover .cards-scroll-content {
animation-play-state: paused;
}
@keyframes cardsScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.feature-card {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(51, 65, 85, 0.9));
border-radius: 20px;
padding: 2rem;
min-width: 320px;
max-width: 320px;
height: 380px;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
backdrop-filter: blur(20px);
}
.card-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.feature-card:hover .card-glow {
opacity: 0.3;
}
.feature-card:hover {
transform: translateY(-15px) scale(1.05);
border-color: var(--card-color-1);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3),
0 0 30px var(--card-color-1);
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--card-color-1), var(--card-color-2));
opacity: 0.8;
}
.card-icon-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.8rem;
position: relative;
z-index: 2;
}
.card-icon {
width: 75px;
height: 75px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
transition: all 0.3s ease;
}
.card-icon:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}
.card-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), transparent);
pointer-events: none;
}
.card-icon::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transform: rotate(45deg);
transition: all 0.6s ease;
opacity: 0;
}
.card-icon:hover::after {
opacity: 1;
animation: iconShine 0.6s ease;
}
@keyframes iconShine {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.card-badge {
background: linear-gradient(135deg, var(--badge-color-1), var(--badge-color-2));
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.card-badge.pulse {
animation: cardPulse 2s infinite;
}
.card-badge.live {
background: linear-gradient(135deg, #ef4444, #dc2626);
animation: livePulse 1.5s infinite;
}
.card-badge.new {
background: linear-gradient(135deg, #10b981, #059669);
}
.card-badge.urgent {
background: linear-gradient(135deg, #f97316, #ea580c);
animation: urgentPulse 1.5s infinite;
}
.card-badge.premium {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.card-badge.expert {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.card-badge.trending {
background: linear-gradient(135deg, #ec4899, #db2777);
}
.card-badge.global {
background: linear-gradient(135deg, #06b6d4, #0891b2);
}
@keyframes cardPulse {
0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
50% { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
}
@keyframes livePulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
@keyframes urgentPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
.card-content {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
}
.card-title {
font-size: 1.4rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 0.75rem;
line-height: 1.3;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.card-description {
color: #cbd5e1;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.2rem;
flex: 1;
}
.card-stats {
display: flex;
gap: 0.6rem;
margin-bottom: 1rem;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
.card-stats span {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: #e2e8f0;
background: rgba(255, 255, 255, 0.15);
padding: 0.5rem 0.9rem;
border-radius: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
font-weight: 500;
flex: 1;
justify-content: center;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-stats span:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.card-stats i {
font-size: 1rem;
color: var(--card-color-1);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
flex-shrink: 0;
}
.card-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
background: linear-gradient(135deg, var(--card-color-1), var(--card-color-2));
color: white;
text-decoration: none;
padding: 0.9rem 1.2rem;
border-radius: 18px;
font-weight: 700;
font-size: 0.85rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.1);
text-transform: uppercase;
letter-spacing: 0.3px;
width: 100%;
margin-top: auto;
white-space: nowrap;
min-height: 44px;
}
.card-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.card-btn:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4),
0 0 25px var(--card-color-1);
color: white;
border-color: rgba(255, 255, 255, 0.3);
}
.card-btn:hover::before {
left: 100%;
}
.card-btn i {
transition: transform 0.3s ease;
font-size: 1.1rem;
}
.card-btn:hover i {
transform: translateX(6px) scale(1.1);
}
/* Individual Card Themes */
.placement-feature {
--card-color-1: #f59e0b;
--card-color-2: #d97706;
--glow-color: rgba(245, 158, 11, 0.3);
--badge-color-1: #fbbf24;
--badge-color-2: #f59e0b;
}
.admission-feature {
--card-color-1: #10b981;
--card-color-2: #059669;
--glow-color: rgba(16, 185, 129, 0.3);
--badge-color-1: #34d399;
--badge-color-2: #10b981;
}
.results-feature {
--card-color-1: #ef4444;
--card-color-2: #dc2626;
--glow-color: rgba(239, 68, 68, 0.3);
--badge-color-1: #f87171;
--badge-color-2: #ef4444;
}
.team-feature {
--card-color-1: #8b5cf6;
--card-color-2: #7c3aed;
--glow-color: rgba(139, 92, 246, 0.3);
--badge-color-1: #a78bfa;
--badge-color-2: #8b5cf6;
}
.gallery-feature {
--card-color-1: #ec4899;
--card-color-2: #db2777;
--glow-color: rgba(236, 72, 153, 0.3);
--badge-color-1: #f472b6;
--badge-color-2: #ec4899;
}
.partners-feature {
--card-color-1: #06b6d4;
--card-color-2: #0891b2;
--glow-color: rgba(6, 182, 212, 0.3);
--badge-color-1: #22d3ee;
--badge-color-2: #06b6d4;
}
.blogs-feature {
--card-color-1: #84cc16;
--card-color-2: #65a30d;
--glow-color: rgba(132, 204, 22, 0.3);
--badge-color-1: #a3e635;
--badge-color-2: #84cc16;
}
.contact-feature {
--card-color-1: #f97316;
--card-color-2: #ea580c;
--glow-color: rgba(249, 115, 22, 0.3);
--badge-color-1: #fb923c;
--badge-color-2: #f97316;
}
/* Carousel Controls - Hide for cleaner look */
.carousel-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 2rem;
pointer-events: none;
z-index: 10;
opacity: 0;
visibility: hidden;
}
.carousel-control-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
pointer-events: all;
}
.carousel-control-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
/* Show controls on hover */
.cards-scroll-container:hover .carousel-controls {
opacity: 1;
visibility: visible;
}
/* Responsive Design */
@media (max-width: 768px) {
.feature-card {
min-width: 300px;
max-width: 300px;
height: 360px;
padding: 1.8rem;
}
.card-icon {
width: 65px;
height: 65px;
font-size: 1.7rem;
}
.card-icon-wrapper {
margin-bottom: 1.5rem;
}
.card-title {
font-size: 1.3rem;
}
.card-description {
font-size: 0.9rem;
margin-bottom: 1rem;
}
.card-stats {
gap: 0.5rem;
margin-bottom: 0.8rem;
}
.card-stats span {
font-size: 0.8rem;
padding: 0.4rem 0.7rem;
}
.card-btn {
padding: 0.8rem 1.4rem;
font-size: 0.9rem;
}
.carousel-controls {
padding: 0 1rem;
}
.carousel-control-btn {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.feature-card {
min-width: 260px;
max-width: 260px;
height: 340px;
padding: 1.5rem;
}
.card-icon {
width: 55px;
height: 55px;
font-size: 1.5rem;
}
.card-icon-wrapper {
margin-bottom: 1.2rem;
}
.card-title {
font-size: 1.2rem;
}
.card-description {
font-size: 0.85rem;
margin-bottom: 0.8rem;
}
.card-stats {
gap: 0.4rem;
margin-bottom: 0.8rem;
}
.card-stats span {
font-size: 0.75rem;
padding: 0.3rem 0.6rem;
}
.card-btn {
padding: 0.7rem 1.2rem;
font-size: 0.85rem;
gap: 0.6rem;
}
.carousel-controls {
padding: 0 0.5rem;
}
.carousel-control-btn {
width: 40px;
height: 40px;
font-size: 1rem;
}
}
@media (max-width: 360px) {
.feature-card {
min-width: 240px;
max-width: 240px;
height: 320px;
padding: 1.2rem;
}
.card-icon {
width: 50px;
height: 50px;
font-size: 1.3rem;
}
.card-title {
font-size: 1.1rem;
}
.card-description {
font-size: 0.8rem;
margin-bottom: 0.6rem;
}
.card-stats {
gap: 0.3rem;
margin-bottom: 0.6rem;
}
.card-stats span {
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
}
.card-btn {
padding: 0.6rem 1rem;
font-size: 0.8rem;
}
}