/* Homepage Rebrand CSS - Move inline styles here from homepage.php */

body {
    font-family: 'Poppins', sans-serif;
}

/* Brand color helpers */
.bg-cream {
    background-color: #f1f7ff;
}
.bg-blue-500 {
    background-color: #2563eb;
}
.text-blue-500 {
    color: #2563eb;
}
.bg-medical-blue {
    background-color: #1e40af;
}
.text-medical-blue {
    color: #1e40af;
}
.text-darken {
    color: #2F327D;
}

/* Floating animations for homepage */
.floating { 
    animation-name: floating; 
    animation-duration: 3s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out;
}
@keyframes floating { 
    0% { transform: translateY(0px); } 
    50% { transform: translateY(-12px); } 
    100% { transform: translateY(0px); }  
}
.floating-4 { 
    animation-name: floating-4; 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out;
}
@keyframes floating-4 { 
    0% { transform: translateY(0px); } 
    50% { transform: translateY(-15px); } 
    100% { transform: translateY(0px); }  
}

/* Enhanced floating card styling */
.floating-card{
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.floating-card:hover{
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Dropdown animations */
.rotate-180{ transform: rotate(180deg); }

/* Accessibility & helper */
[x-cloak]{ display: none !important; }

.z-top { z-index: 9999; }

/* Homepage specific helpers */
.hero-bg { background-color: #0985e31b; }
.hero-image-wrapper { margin-bottom: -290px; z-index: 10; }
.hero-image-bottom-margin { margin-bottom: 9rem; }

/* Floating card positional helpers (desktop-first) */
.floating-quiz { top: 60px; left: 40px; }
.floating-exam { top: 35%; right: -70px; }
.floating-spotters { bottom: 100px; right: 20px; }
.floating-viva { bottom: 40px; left: -40px; }

/* Responsive adjustments moved from inline style blocks */
@media (max-width: 1024px) and (min-width: 769px) {
    #hero-image .floating-card {
        transform: scale(0.9);
    }
}
@media (max-width: 768px) {
    #hero-image .floating-card {
        transform: scale(0.8);
    }
}
@media (min-width: 1280px) {
    #hero-image .floating-quiz { top: 40px !important; left: 30px !important; }
    #hero-image .floating-exam { top: 45% !important; right: -80px !important; }
    #hero-image .floating-spotters { bottom: 120px !important; right: 10px !important; }
    #hero-image .floating-viva { bottom: 30px !important; left: -50px !important; }
}

/* Community card backgrounds */
.community-grey-hub { background-image: url('/assets/images/community-grey-hub.jpg'); }
.community-blog { background-image: url('/assets/images/community-blog.jpg'); }
.community-whatsapp { background-image: url('/assets/images/community-whatsapp.jpg'); }
.community-telegram { background-image: url('/assets/images/community-telegram.jpg'); }
.community-grey-hub-card { background-image: url('/assets/images/community-grey-hub-card.jpg'); }
.chem-cafes-card { background-image: url('/assets/images/Chemistry-Cafes-card.jpg'); }
.video-thumbnail-bg { background-image: url('/assets/images/video-thumbnail.jpg'); background-size: cover; background-position: center; }
/* Use a helper for background images, keep cover & center via utility classes */

/* Hero icon color backgrounds */
.icon-bg-purple { background: #5B72EE; }
.icon-bg-orange { background: #F48C06; }
.icon-bg-teal { background: #23BDEE; }
.icon-bg-blue { background: #29B9E7; }
.icon-bg-green { background: #10b981; }

/* Utility clase for centered container */
.max-width-1200 { max-width: 1200px; margin: 0 auto; }

/* Director block styles */
.director-card { background: #ffffff; border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); padding: 1.5rem; }
.director-card img { width: 96px; height: 96px; object-fit: cover; border-radius: 9999px; }
.director-card h3 { font-size: 1.125rem; font-weight: 600; }
.director-card .director-name { font-weight: 700; }
.director-card .director-bio { color: #4B5563; line-height: 1.6; }

/* ========== COMPONENT STYLES ========== */

/* Button Styles */
.btn-primary-lg {
    background-color: #2563eb;
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 9999px;
    padding: 1rem 2rem;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-primary-lg:hover {
    background-color: #1d4ed8;
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(37, 99, 235, 0.4);
}

.btn-primary-sm {
    background-color: #2563eb;
    color: white;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-primary-sm:hover {
    background-color: #1d4ed8;
}

.btn-secondary-lg {
    background-color: transparent;
    color: #2563eb;
    border: 2px solid #2563eb;
    font-weight: 600;
    border-radius: 9999px;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-secondary-lg:hover {
    background-color: #2563eb;
    color: white;
    transform: scale(1.05);
}

.btn-text-icon {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-text-icon:hover {
    transform: translateX(4px);
}

.btn-text-primary {
    background: none;
    border: none;
    color: #2563eb;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-text-primary:hover {
    color: #1d4ed8;
}

.btn-white-lg {
    background-color: white;
    color: #2563eb;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 9999px;
    padding: 1rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-white-lg:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.btn-white-outline-lg {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 9999px;
    padding: 1rem 2rem;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-white-outline-lg:hover {
    background-color: white;
    color: #2563eb;
    transform: scale(1.05);
}

/* Feature Cards */
.feature-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Community Cards */
.community-grey-hub,
.community-blog,
.community-whatsapp,
.community-telegram {
    background-size: cover;
    background-position: center;
}

/* Module Cards */
.module-card {
    transition: all 0.3s ease;
    border-radius: 1rem;
}
.module-card:hover {
    transform: translateY(-8px);
}

.module-header-blue { background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%); }
.module-header-purple { background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); }
.module-header-green { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); }
.module-header-orange { background: linear-gradient(135deg, #fed7aa 0%, #fdd6a6 100%); }

/* Stat Icon Backgrounds */
.stat-icon-bg-blue { background: rgba(37, 99, 235, 0.3); }
.stat-icon-bg-green { background: rgba(16, 185, 129, 0.3); }
.stat-icon-bg-purple { background: rgba(139, 92, 246, 0.3); }
.stat-icon-bg-orange { background: rgba(248, 113, 113, 0.3); }

/* Director Card Enhancements */
.director-image-container {
    position: relative;
}
.director-card-image {
    overflow: hidden;
    border-radius: 1rem;
}
.director-bio {
    line-height: 1.8;
    color: #4B5563;
}