/* ============================================
   🎨 ELEGANT MONOCHROME THEME
   Clean & Sophisticated Design
   ============================================ */

:root {
    /* 🎨 Monochrome Color Palette */
    --primary-color: #4A5568;
    --secondary-color: #2D3748;
    --accent-color: #718096;
    --dark-bg: #2D3748;
    --darker-bg: #1A202C;
    --light-text: #F7FAFC;
    
    /* Additional Monochrome Colors */
    --soft-gray: #E2E8F0;
    --medium-gray: #A0AEC0;
    --dark-gray: #4A5568;
    --charcoal: #2D3748;
    --off-white: #F7FAFC;
    --steel-blue: #718096;
    
    /* Glass Effects */
    --glass-bg: rgba(45, 55, 72, 0.8);
    --glass-border: rgba(226, 232, 240, 0.2);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    
    /* Gradients */
    --primary-gradient: linear-gradient(135deg, #4A5568 0%, #2D3748 100%);
    --secondary-gradient: linear-gradient(135deg, #2D3748 0%, #4A5568 100%);
    --accent-gradient: linear-gradient(135deg, #718096 0%, #4A5568 100%);
    --card-gradient: linear-gradient(135deg, rgba(45,55,72,0.9) 0%, rgba(74,85,104,0.8) 100%);
    
    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-normal: 0.5s ease;
    
    /* Spacing */
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
}

/* ============================================
   🎨 GLOBAL TEXT MUTED OVERRIDE
   ============================================ */

/* Override Bootstrap's text-muted to use monochrome colors */
.text-muted {
    color: rgba(226, 232, 240, 0.7) !important;
}

/* Variations for different contexts */
.text-muted-light {
    color: #E2E8F0 !important;
}

.text-muted-dark {
    color: #A0AEC0 !important;
}

/* Ensure it works in all containers */
.card .text-muted,
.modal .text-muted,
.alert .text-muted,
.navbar .text-muted,
.footer .text-muted {
    color: rgba(226, 232, 240, 0.7) !important;
}

/* ============================================
   🎨 GLOBAL HEADING COLOR OVERRIDE
   ============================================ */

/* Override all headings to use dark gray instead of white */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.section-title, .page-title {
    color: #4A5568 !important;
}

/* Section titles and page headers */
.section-title, .page-title {
    color: #4A5568 !important;
}

/* Exception: Keep white text in gray background containers */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6,
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6,
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6,
.admin-card h1, .admin-card h2, .admin-card h3, .admin-card h4, .admin-card h5, .admin-card h6,
.activity-card h1, .activity-card h2, .activity-card h3, .activity-card h4, .activity-card h5, .activity-card h6,
.certificate-card h1, .certificate-card h2, .certificate-card h3, .certificate-card h4, .certificate-card h5, .certificate-card h6,
.project-card h1, .project-card h2, .project-card h3, .project-card h4, .project-card h5, .project-card h6,
.training-card h1, .training-card h2, .training-card h3, .training-card h4, .training-card h5, .training-card h6,
.education-card h1, .education-card h2, .education-card h3, .education-card h4, .education-card h5, .education-card h6,
.work-card h1, .work-card h2, .work-card h3, .work-card h4, .work-card h5, .work-card h6,
.biodata-card h1, .biodata-card h2, .biodata-card h3, .biodata-card h4, .biodata-card h5, .biodata-card h6,
.search-filter-section h1, .search-filter-section h2, .search-filter-section h3, .search-filter-section h4, .search-filter-section h5, .search-filter-section h6 {
    color: #F7FAFC !important;
}

/* ============================================
   GLOBAL RESET
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #2D3748 0%, #4A5568 50%, #718096 100%);
    color: var(--light-text);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    padding-top: 80px;
    position: relative;
}

/* Elegant Background Pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(247, 250, 252, 0.05) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(226, 232, 240, 0.05) 2px, transparent 2px);
    background-size: 60px 60px;
    z-index: -1;
    opacity: 0.6;
}

/* ============================================
   🎨 MONOCHROME FLOATING SHAPES BACKGROUND
   ============================================ */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(74, 85, 104, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(113, 128, 150, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(160, 174, 192, 0.05) 0%, transparent 50%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: -2;
}

/* Floating Glass Shapes */
.floating-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.floating-shape {
    position: absolute;
    background: rgba(45, 55, 72, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.05);
    border-radius: 50%;
    animation: floatGlass 20s infinite linear;
}

.floating-shape:nth-child(1) {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 25s;
    background: rgba(74, 85, 104, 0.05);
}

.floating-shape:nth-child(2) {
    width: 120px;
    height: 120px;
    top: 20%;
    right: 15%;
    animation-delay: -5s;
    animation-duration: 30s;
    background: rgba(113, 128, 150, 0.05);
}

.floating-shape:nth-child(3) {
    width: 60px;
    height: 60px;
    bottom: 30%;
    left: 20%;
    animation-delay: -10s;
    animation-duration: 35s;
    background: rgba(160, 174, 192, 0.05);
}

.floating-shape:nth-child(4) {
    width: 100px;
    height: 100px;
    bottom: 20%;
    right: 25%;
    animation-delay: -15s;
    animation-duration: 28s;
    background: rgba(226, 232, 240, 0.03);
}

.floating-shape:nth-child(5) {
    width: 140px;
    height: 140px;
    top: 50%;
    left: 50%;
    animation-delay: -20s;
    animation-duration: 40s;
    background: rgba(74, 85, 104, 0.03);
    transform: translate(-50%, -50%);
}

.floating-shape:nth-child(6) {
    width: 70px;
    height: 70px;
    top: 70%;
    right: 10%;
    animation-delay: -25s;
    animation-duration: 32s;
    background: rgba(113, 128, 150, 0.04);
}

@keyframes floatGlass {
    0% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-20px) rotate(90deg);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-10px) rotate(180deg);
        opacity: 0.3;
    }
    75% {
        transform: translateY(-30px) rotate(270deg);
        opacity: 0.6;
    }
    100% {
        transform: translateY(0px) rotate(360deg);
        opacity: 0.3;
    }
}

/* ============================================
   ELEGANT NAME ANIMATION
   ============================================ */
.hero-name-gradient {
    background: linear-gradient(90deg, 
        #F7FAFC 0%, 
        #4A5568 25%, 
        #E2E8F0 50%, 
        #4A5568 75%, 
        #F7FAFC 100%
    );
    background-size: 200% center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: elegantColorFlow 3s ease-in-out infinite;
}

@keyframes elegantColorFlow {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: #4A5568;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }

p {
    font-size: 1.1rem;
    color: #E2E8F0;
    line-height: 1.8;
}

/* ============================================
   SECTION TITLES
   ============================================ */
.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    text-align: center;
    margin-bottom: var(--space-xl);
    color: #4A5568;
    position: relative;
    display: inline-block;
    width: 100%;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #4A5568, #718096);
    border-radius: 2px;
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background: rgba(45, 55, 72, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(226, 232, 240, 0.3);
    border-radius: 24px;
    padding: var(--space-lg);
    transition: all var(--transition-normal);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(226, 232, 240, 0.1);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(226, 232, 240, 0.3), transparent);
}

.card:hover {
    transform: translateY(-12px);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(226, 232, 240, 0.2);
    border-color: rgba(74, 85, 104, 0.5);
    background: rgba(45, 55, 72, 0.95);
}

.card-title {
    color: #F7FAFC !important;
    font-weight: 700;
}

.card-text {
    color: #E2E8F0;
}

/* Ensure card content stays white */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    color: #F7FAFC !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 700;
    border-radius: 50px;
    transition: all var(--transition-fast);
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, #4A5568, #2D3748);
    color: white;
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2D3748, #4A5568);
    transform: translateY(-3px);
    box-shadow: 
        0 8px 25px rgba(74, 85, 104, 0.4);
    color: white;
}

.glass-btn,
.glass-btn-primary {
    background: rgba(45, 55, 72, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(226, 232, 240, 0.3);
    color: #F7FAFC;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    transition: all var(--transition-fast);
    text-decoration: none;
    display: inline-block;
}

.glass-btn-primary {
    background: linear-gradient(135deg, #4A5568, #2D3748);
    border: none;
}

.glass-btn:hover,
.glass-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(74, 85, 104, 0.4);
    color: #F7FAFC;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: var(--space-xl) 0;
}

.profile-image-container {
    position: relative;
    display: inline-block;
}

.profile-image {
    border-radius: 50%;
    border: 4px solid rgba(226, 232, 240, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-normal);
}

.profile-image:hover {
    border-color: rgba(74, 85, 104, 0.8);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}

/* ============================================
   BADGES
   ============================================ */
.glass-badge,
.glass-badge-primary {
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9em;
    font-weight: 600;
    background: rgba(45, 55, 72, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(226, 232, 240, 0.2);
    color: #F7FAFC;
}

.glass-badge-primary {
    background: rgba(74, 85, 104, 0.3);
    border-color: #4A5568;
    color: #4A5568;
}

/* ============================================
   FORMS
   ============================================ */
.form-control,
.form-select {
    background: rgba(45, 55, 72, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(226, 232, 240, 0.2);
    border-radius: 12px;
    color: #F7FAFC;
    padding: 12px 16px;
    transition: all var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    background: rgba(45, 55, 72, 0.2);
    border-color: #4A5568;
    box-shadow: 0 0 20px rgba(74, 85, 104, 0.3);
    color: #F7FAFC;
    outline: none;
}

.form-control::placeholder {
    color: rgba(247, 250, 252, 0.5);
}

.form-label {
    color: #F7FAFC;
    font-weight: 600;
    margin-bottom: 8px;
}

.search-filter-section {
    background: rgba(45, 55, 72, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.2);
    border-radius: 16px;
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--space-xl);
}

.page-item {
    list-style: none;
}

.page-link {
    background: rgba(45, 55, 72, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.3);
    border-radius: 12px;
    color: #F7FAFC;
    padding: 10px 16px;
    transition: all var(--transition-fast);
    text-decoration: none;
    font-weight: 600;
}

.page-link:hover {
    background: linear-gradient(135deg, #4A5568, #2D3748);
    border-color: transparent;
    color: #ffffff;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #4A5568, #2D3748);
    border-color: transparent;
}

/* ============================================
   CERTIFICATES & ACTIVITIES
   ============================================ */
.certificate-card-home,
.certificate-card,
.activity-item {
    background: rgba(45, 55, 72, 0.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(226, 232, 240, 0.2);
    border-radius: 16px;
    overflow: hidden;
    transition: all var(--transition-fast);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.certificate-card-home:hover,
.certificate-card:hover,
.activity-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.certificate-img-home,
.certificate-img,
.activity-img {
    transition: all var(--transition-fast);
}

.certificate-card-home:hover .certificate-img-home,
.certificate-card:hover .certificate-img,
.activity-item:hover .activity-img {
    transform: scale(1.1);
}

.certificate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

/* ============================================
   BIODATA
   ============================================ */
.biodata-card {
    background: rgba(45, 55, 72, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-radius: 24px;
    padding: var(--space-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.profile-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(226, 232, 240, 0.5);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(45, 55, 72, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(226, 232, 240, 0.3);
    color: #F7FAFC;
    font-size: 1.5rem;
    transition: all var(--transition-fast);
    margin: 0 8px;
}

.social-links a:hover {
    background: linear-gradient(135deg, #4A5568, #2D3748);
    border-color: transparent;
    transform: translateY(-5px);
    color: #F7FAFC;
}

/* ============================================
   EDUCATION TIMELINE
   ============================================ */
.education-timeline {
    position: relative;
    padding-left: 50px;
}

.education-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #2D3748;
    border-radius: 10px;
}

.education-item {
    position: relative;
    margin-bottom: var(--space-xl);
    background: rgba(45, 55, 72, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-radius: 16px;
    padding: var(--space-lg);
}

.education-item::before {
    content: '';
    position: absolute;
    left: -42px;
    top: 20px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2D3748;
    border: 4px solid var(--darker-bg);
    z-index: 1;
}

.education-item:hover {
    transform: translateX(10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* ============================================
   ALERTS
   ============================================ */
.alert {
    background: rgba(45, 55, 72, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.2);
    border-radius: 12px;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    color: #F7FAFC;
}

.alert-info {
    background: rgba(74, 85, 104, 0.2);
    border-color: #4A5568;
}

/* ============================================
   FOOTER - MONOCHROME THEME
   ============================================ */
.footer {
    background: linear-gradient(135deg, #2D3748 0%, #4A5568 100%);
    border-top: 3px solid #4A5568;
    padding: var(--space-xl) 0;
    margin-top: var(--space-xl);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
}

/* ============================================
   SCROLLBAR - MONOCHROME THEME
   ============================================ */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #2D3748;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #4A5568;
    border-radius: 10px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #4A5568 0%, #718096 100%);
    box-shadow: 0 0 10px rgba(74, 85, 104, 0.5);
}

/* ============================================
   UTILITIES
   ============================================ */
.text-white {
    color: #F7FAFC !important;
}

.text-muted {
    color: rgba(226, 232, 240, 0.7) !important;
}

.hover-lift {
    transition: all var(--transition-fast);
}

.hover-lift:hover {
    transform: translateY(-5px);
}

/* ============================================
   ANIMATIONS
   ============================================ */
.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-bounce-in {
    animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Large Tablets and Small Desktops */
@media (max-width: 1200px) {
    .hero-section {
        padding: 60px 0;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .hero-section {
        padding: 60px 0;
    }
    
    .profile-image {
        max-width: 300px;
        height: 300px;
    }
}

/* Tablets */
@media (max-width: 992px) {
    body {
        padding-top: 70px;
    }
    
    .hero-section {
        min-height: auto;
        padding: 40px 0;
    }
    
    .profile-image {
        max-width: 280px;
    }
   
    .glass-card-white {
        width: 280px;
        height: 280px;
    }

    .section-title {
        font-size: clamp(1.8rem, 4vw, 2.5rem);
        margin-bottom: 2rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
 
    .glass-btn,
    .glass-btn-primary {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    /* Navbar Mobile */
    .navbar-collapse {
        background: rgba(45, 55, 72, 0.95);
        backdrop-filter: blur(20px);
        padding: 20px;
        border-radius: 12px;
        margin-top: 10px;
        border: 1px solid rgba(226, 232, 240, 0.2);
    }
}

/* Mobile Tablets */
@media (max-width: 768px) {
    body {
        padding-top: 65px;
        font-size: 14px;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Hero Section Mobile */
    .hero-section {
        padding: 40px 0;
        min-height: 80vh;
    }
    
    .hero-content {
        text-align: center;
    }
    
    .hero-text {
        order: 2;
        margin-top: 30px;
    }
    
    .hero-image {
        order: 1;
    }
    
    .profile-image {
        max-width: 250px;
        margin: 0 auto;
    }
    
    .glass-card-white {
        width: 250px;
        height: 250px;
    }
    
    /* Typography Mobile */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.7rem; }
    
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    
    .display-3 {
        font-size: 2.5rem;
    }
    
    .lead {
        font-size: 1.1rem;
    }
    
    /* Cards Mobile */
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 16px;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .card-text {
        font-size: 0.9rem;
    }
    
    /* Buttons Mobile */
    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .glass-btn,
    .glass-btn-primary {
        padding: 10px 20px;
        font-size: 0.9rem;
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .d-flex.gap-3 {
        flex-direction: column;
        gap: 0.5rem !important;
    }
    
    /* Grid Mobile */
    .certificate-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
    
    /* Education Timeline Mobile */
    .education-timeline {
        padding-left: 30px;
    }
    
    .education-timeline::before {
        left: 10px;
        width: 2px;
    }
    
    .education-item::before {
        left: -22px;
        width: 16px;
        height: 16px;
    }
    
    .education-item {
        padding: 1rem;
    }
    
    /* Biodata Mobile */
    .biodata-card {
        padding: 1.5rem;
        text-align: center;
    }
    
    .profile-img {
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }
    
    .social-links {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .social-links a {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
        margin: 5px;
    }
    
    /* Forms Mobile */
    .form-control,
    .form-select {
        padding: 12px;
        font-size: 16px;
    }
    
    .form-label {
        font-size: 0.9rem;
    }
    
    /* Search Filter Mobile */
    .search-filter-section {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* Pagination Mobile */
    .pagination {
        gap: 4px;
    }
    
    .page-link {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    
    /* Floating Shapes Mobile - Reduced */
    .floating-shape {
        display: none;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    body {
        padding-top: 60px;
        font-size: 14px;
    }
    
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Hero Section Small Mobile */
    .hero-section {
        padding: 30px 0;
        min-height: 70vh;
    }
    
    .profile-image {
        max-width: 200px;
    }
    
    .glass-card-white {
        width: 200px;
        height: 200px;
    }
    
    /* Typography Small Mobile */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    .section-title {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }
    
    .display-3 {
        font-size: 2rem;
        line-height: 1.1;
    }
    
    .lead {
        font-size: 1.1rem;
    }
    
    /* Cards Small Mobile */
    .card {
        padding: 1rem;
        border-radius: 12px;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    .card-text {
        font-size: 0.85rem;
    }
    
    /* Buttons Small Mobile */
    .btn {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    
    .glass-btn,
    .glass-btn-primary {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    
    /* Biodata Small Mobile */
    .biodata-card {
        padding: 1rem;
    }
 
    .profile-img {
        width: 120px;
        height: 120px;
    }
    
    .social-links a {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    /* Forms Small Mobile */
    .form-control,
    .form-select {
        padding: 10px 12px;
        font-size: 16px;
    }
    
    /* Education Timeline Small Mobile */
    .education-timeline {
        padding-left: 25px;
    }
    
    .education-timeline::before {
        left: 8px;
        width: 2px;
    }
    
    .education-item::before {
        left: -18px;
        width: 12px;
        height: 12px;
    }
    
    .education-item {
        padding: 0.75rem;
    }
    
    /* Spacing Adjustments */
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .mb-5 {
        margin-bottom: 1.5rem !important;
    }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    .hero-section {
        padding: 20px 0;
    }
    
    .profile-image {
        max-width: 180px;
    }
    
    .glass-card-white {
        width: 180px;
        height: 180px;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .display-3 {
        font-size: 1.8rem;
    }
    
    .card {
        padding: 0.75rem;
    }
    
    .btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    
    .glass-btn,
    .glass-btn-primary {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}