#verifyBtn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #007bff;
    color: white;
    padding: 12px 18px;
    border: none;
    cursor: pointer;
    border-radius: 8px 0 0 8px;
    font-weight: bold;
    z-index: 999;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

#verifyBtn:hover {
    background: #0056b3;
}


/* --- Professional Color Palette & Global Reset --- */
        :root {
            --primary-color: #1a237e; /* Deep Navy Blue */
            --secondary-color: #00bcd4; /* Vibrant Teal/Cyan */
            --accent-color: #ffb300; /* Gold/Amber for highlights */
            --text-dark: #37474f; /* Dark Slate Text */
            --text-light: #ffffff;
            --light-bg: #e8f5e9; 
            --mid-bg: #f5f5f5;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            background-color: var(--mid-bg);
            scroll-behavior: smooth;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        a {
            color: var(--secondary-color);
            text-decoration: none;
            transition: color 0.3s;
        }

        a:hover {
            color: black;
        }

        .section-title {
            font-size: 2.2em;
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 40px;
            padding-top: 20px;
            font-weight: 700;
        }

        .section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background-color: var(--accent-color);
            margin: 10px auto 0;
            border-radius: 2px;
        }

        /* --- Navigation Bar --- */
        .navbar {
            background-color: var(--text-light);
            padding: 10px 0;
            position: fixed;
            width: 100%;
            background-color: gold;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            height: 45px;
            width: 45px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary-color);
            flex-shrink: 0;
        }

        .nav-links {
            list-style: none;
            display: flex;
            transition: max-height 0.5s ease-in-out;
        }

        .nav-links li {
            margin-left: 25px;
            flex-shrink: 0;
        }

        .nav-links a {
            color: var(--text-dark);
            font-weight: 600;
            padding: 8px 12px;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
        }

        .nav-links a:hover {
            background-color: var(--secondary-color);
            color: var(--text-light);
        }

        .cta-nav-button {
            background-color: var(--primary-color) !important;
            color: var(--text-light) !important;
            padding: 8px 15px !important;
            transition: background-color 0.3s, transform 0.3s; /* Added transition */
        }

        .cta-nav-button:hover {
            background-color: #0d47a1 !important;
            transform: scale(1.05); /* Added slight scale effect */
        }
        
        /* Mobile Nav Toggle */
        .menu-toggle {
            display: none;
            font-size: 1.5em;
            cursor: pointer;
            color: var(--primary-color);
            padding: 5px;
            z-index: 1001;
            transition: transform 0.3s;
        }
        
        .menu-toggle:hover {
            transform: rotate(90deg); /* Menu icon rotation on hover */
        }

        /* --- CTA Buttons --- */
        .cta-button {
            display: inline-block;
            padding: 12px 30px;
            margin: 15px 10px;
            border-radius: 50px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }

        .primary-cta {
            background-color: var(--accent-color);
            color: var(--primary-color);
        }

        .secondary-cta {
            background-color: var(--primary-color);
            color: var(--text-light);
        }
        
        /* --- Hero Section --- */
        .hero-section {
            background: linear-gradient(rgba(26, 35, 126, 0.85), rgba(26, 35, 126, 0.85)), url('YOUR_HERO_IMAGE_URL.jpg') center/cover;
            min-height: 100vh;
            display: flex;
            align-items: center;
            text-align: center;
            color: var(--text-light);
            padding-top: 80px;
        }

        .hero-section h1 {
            font-size: 4.5em;
            margin-bottom: 15px;
            font-weight: 900;
        }
        
        /* --- Features Section --- */
        .features-section { background-color: var(--light-bg); padding: 60px 0; text-align: center; }
        .feature-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; }
        
        .feature-item { 
            flex-basis: calc(25% - 30px); 
            background: var(--text-light); 
            padding: 30px 15px; 
            border-radius: 10px; 
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
            transition: transform 0.3s, box-shadow 0.3s, border-top 0.3s; /* Added transition */
            border-top: 4px solid var(--secondary-color); 
        }

        .feature-item:hover { 
            transform: translateY(-8px) scale(1.02); /* Lift and slight scale */
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25); /* Stronger shadow */
            border-top: 4px solid var(--accent-color); /* Color change on hover */
        }
        
        .feature-item i { font-size: 3em; color: var(--primary-color); margin-bottom: 15px; transition: color 0.3s; }
        
        .feature-item:hover i {
            color: var(--secondary-color); /* Icon color change */
        }

        /* --- Resources Section --- */
        .resources-section { background-color: var(--primary-color); color: var(--text-light); padding: 70px 0; text-align: center; }
        .resources-content { display: flex; align-items: center; justify-content: center; gap: 40px; max-width: 1000px; margin: 0 auto; text-align: left; }
        .resources-content i { font-size: 5em; color: var(--secondary-color); transition: color 0.3s, transform 0.3s; }

        .resources-content:hover i {
            color: var(--accent-color);
            transform: scale(1.1); /* Slight icon scale on section hover */
        }
        
        /* --- Courses Overview Section --- */
        .courses-overview-section { padding: 60px 0; }
        .course-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin-bottom: 30px; }
        
        .course-card { 
            background-color: var(--text-light); 
            color: var(--primary-color); 
            padding: 25px; 
            border-radius: 10px; 
            width: 250px; 
            text-align: center; 
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
            border-bottom: 5px solid var(--accent-color); 
            transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Added transitions */
            cursor: pointer;
        }

        .course-card:hover { 
            background-color: var(--primary-color); /* Primary color background */
            color: var(--text-light); /* Light text */
            transform: translateY(-8px); /* Lift higher */
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* Stronger shadow */
            border-bottom: 5px solid var(--secondary-color); /* Secondary color highlight */
        }
        
        .course-card:hover p {
            color: var(--secondary-color); /* Highlight text color */
        }

        /* --- Testimonial Section --- */
        .testimonial-section { background-color: var(--secondary-color); color: var(--primary-color); padding: 60px 0; text-align: center; }
        blockquote { 
            max-width: 800px; margin: 20px auto; font-style: italic; font-size: 1.3em; line-height: 1.5; padding: 25px; 
            border-left: 6px solid var(--primary-color); 
            background-color: rgba(255, 255, 255, 0.9); 
            border-radius: 8px; 
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s, transform 0.3s;
        }
        
        blockquote:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            transform: scale(1.01);
        }
        
        /* --- Detailed Courses Section --- */
        .detailed-courses-section { padding: 60px 0; background-color: var(--mid-bg); }
        
        .course-detail-item { 
            background-color: var(--text-light); 
            padding: 25px; 
            border-radius: 8px; 
            margin-bottom: 20px; 
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); 
            border-left: 5px solid var(--secondary-color);
            transition: border-left-color 0.3s, box-shadow 0.3s;
        }
        
        .course-detail-item:hover {
            border-left: 5px solid var(--accent-color);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }


.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.popup-box {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    width: 350px;
    text-align: center;
    position: relative;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {transform: scale(0.7);}
    to {transform: scale(1);}
}

.close-btn {
    position: absolute;
    right: 12px;
    top: 8px;
    font-size: 20px;
    cursor: pointer;
}

#rollInput {
    padding: 8px;
    width: 80%;
    margin-top: 10px;
}

button {
    margin-top: 10px;
    padding: 8px 15px;
    cursor: pointer;
}

#downloadBtn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px;
    background: green;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
}

.cert-visit-btn {
    cursor: pointer;
}


.certificate-redirect-card {
    background: linear-gradient(135deg, #0f4c81, #1e88e5);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 0 25px rgba(30,136,229,0.6);
    animation: glowPulse 2s infinite alternate;
}

@keyframes glowPulse {
    from {
        box-shadow: 0 0 15px rgba(30,136,229,0.5);
    }
    to {
        box-shadow: 0 0 35px rgba(30,136,229,1);
    }
}

.cert-visit-btn {
    background: #fff;
    color: #0f4c81;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.cert-visit-btn:hover {
    background: #ffd700;
    color: #000;
}



        /* --- Contact Section --- */
        .contact-section {
            padding: 60px 0;
            background-color: var(--text-light);
        }

        .contact-grid {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }

        .contact-form-card, .contact-info-card {
            flex: 1;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            /* Removed min-width to allow shrinking on very small screens */
        }
        
        /* Ensure inputs/buttons take up the correct width */
        .contact-form-card input, .contact-form-card textarea {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1em;
        }

        .contact-form-card .cta-button {
            width: 100%;
            margin: 0;
        }

        .contact-form-card {
            background-color: var(--mid-bg);
        }

        .contact-info-card {
            background-color: var(--primary-color);
            color: var(--text-light);
        }
        
        /* --- Map Section --- */
        .map-section { padding-top: 40px; padding-bottom: 0; }
        .map-section iframe { display: block; margin-top: 20px; }

        /* --- Footer --- */
        footer { background-color: #111; color: #ccc; text-align: center; padding: 20px 0; font-size: 0.9em; }

        /* --- CSS Animations (same as previous) --- */
        .animate-up, .animate-fade-in, .animate-scale-in, .animate-slide-in { opacity: 0; transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
        .animate-up { transform: translateY(20px); }
        .animate-scale-in { transform: scale(0.9); }
        .animate-slide-in { transform: translateX(-30px); }
        .visible { opacity: 1; transform: none; }
        .delay-1 { transition-delay: 0.15s; }
        .delay-2 { transition-delay: 0.30s; }
        .delay-3 { transition-delay: 0.45s; }
        .delay-4 { transition-delay: 0.60s; }
        .delay-5 { transition-delay: 0.75s; }

        /* ------------------- 📱 IMPROVED MOBILE RESPONSIVENESS (Media Queries) ------------------- */
        
        @media (max-width: 992px) {
            .hero-section h1 { font-size: 3.5em; }
            .feature-item { flex-basis: calc(50% - 30px); }
            .resources-content { flex-direction: column; text-align: center; }
        }

        @media (max-width: 768px) {
            .navbar .container { flex-wrap: wrap; padding-bottom: 0; }
            .menu-toggle { display: block; order: 2; }

            .nav-links {
                display: block; 
                width: 100%;
                max-height: 0; 
                overflow: hidden;
                flex-direction: column;
                margin-top: 10px;
                background-color: var(--mid-bg);
                border-top: 1px solid #ccc;
            }

            .nav-links.open {
                max-height: 300px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            }

            .nav-links li { margin: 0; border-bottom: 1px solid #eee; }
            .nav-links a { display: block; padding: 12px 20px; text-align: left; color: var(--primary-color); }
            .cta-nav-button { text-align: center; margin: 5px 0; border-radius: 0 !important; }

            .hero-section h1 { font-size: 2.8em; }
            .hero-section .tagline { font-size: 1.4em; }
            .cta-button { display: block; width: 80%; margin: 15px auto; }
            .feature-item { flex-basis: 100%; }
            .course-card { width: 45%; min-width: 180px; }
            .contact-grid { flex-direction: column; }
            .section-title { font-size: 2em; }
        }
        
        @media (max-width: 480px) {
             .course-card { width: 100%; min-width: unset; }
             .hero-section h1 { font-size: 2.2em; }
             
             .container { padding: 0 10px; }
             
             .contact-form-card, .contact-info-card { padding: 20px; }

             .contact-info-card p { font-size: 0.95em; }
        }
        /* --- Variable Declarations for Easy Customization --- */
:root {
    --primary-color: #007bff; /* Bright accent color (Blue) */
    --secondary-cta: #28a745; /* Green for the WhatsApp button */
    --bg-color-dark: #2c3e50; /* Dark background for the card */
    --text-color-light: #ecf0f1; /* Light text color */
    --input-bg: rgba(255, 255, 255, 0.1); /* Slightly transparent input background */
    --border-radius: 12px;
    --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.2);
    --shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* --- General Form Card Styling --- */
.contact-form-card {
    /* Set a dark, contrasting background */
    background-color: var(--bg-color-dark);
    color: var(--text-color-light);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-dark); /* Deep, modern shadow */
    max-width: 400px; /* Constrain the width for better readability */
    margin: 20px auto; /* Center the card on the page */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern, clean font */
    /* Optional: Add a subtle animation (if 'animate-fade-in' class is used) */
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* --- Heading Styling --- */
.contact-form-card h3 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 25px;
    font-size: 1.8em;
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    display: inline-block;
    width: 100%;
}

/* --- Form and Input Styling --- */
#enquiryForm {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing between form elements */
}

.contact-form-card input,
.contact-form-card textarea {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-color-light);
    font-size: 1em;
    transition: background-color 0.3s, box-shadow 0.3s, border 0.3s;
    outline: none; /* Remove default focus outline */
}

/* Placeholder styling for a lighter look */
.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Focus state for a 'hifi' glow effect */
.contact-form-card input:focus,
.contact-form-card textarea:focus {
    background-color: rgba(255, 255, 255, 0.15); /* Slightly brighter on focus */
    box-shadow: 0 0 0 2px var(--primary-color), 0 0 8px rgba(0, 123, 255, 0.6); /* Inner border and a glow */
}

.contact-form-card textarea {
    resize: vertical; /* Allow vertical resizing, but not horizontal */
    min-height: 100px;
}

/* --- Button Styling (CTA) --- */
.cta-button {
    cursor: pointer;
    border: none;
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1em;
    transition: background-color 0.3s, transform 0.1s, box-shadow 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

.secondary-cta {
    /* Specific styling for the WhatsApp button */
    background-color: var(--secondary-cta); /* Green for WhatsApp */
    color: white;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4); /* Green shadow */
}

.secondary-cta:hover {
    background-color: #218838; /* Slightly darker green on hover */
    transform: translateY(-2px); /* Subtle lift effect */
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.6);
}

.secondary-cta:active {
    transform: translateY(0); /* Press-down effect */
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);
}

/* --- Note Styling --- */
.contact-form-card .note {
    text-align: center;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7); /* Lighter, less prominent text */
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
}
/* --- Reusing Variables for Consistency --- */
:root {
    --primary-color: #007bff;
    --bg-color-dark: #2c3e50;
    --text-color-light: #ecf0f1;
    --border-radius: 12px;
    --shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* --- Contact Info Card Styling --- */
.contact-info-card {
    /* Match the form's base styling */
    background-color: var(--bg-color-dark);
    color: var(--text-color-light);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-dark);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Optional: Add a subtle animation delay */
    opacity: 0;
    animation: fadeIn 0.8s ease-out 0.2s forwards; /* Added a slight delay */
}

/* --- Heading Styling --- */
.contact-info-card h3 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 25px;
    font-size: 1.8em;
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

/* --- Paragraph/Info Line Styling --- */
.contact-info-card p {
    display: flex; /* Use flexbox for icon alignment */
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.05em;
    line-height: 1.4;
    transition: color 0.3s;
}

.contact-info-card p:hover {
    color: var(--primary-color); /* Subtle hover effect on the entire line */
}

/* --- Icon Styling (Font Awesome) --- */
.contact-info-card .fas,
.contact-info-card .fab {
    /* Color and spacing for icons */
    color: var(--primary-color);
    margin-right: 15px;
    width: 20px; /* Ensures consistent alignment */
    text-align: center;
    font-size: 1.2em;
}

/* --- Link Styling (WhatsApp, Instagram) --- */
.contact-info-card a {
    color: #3498db; /* A slightly different blue for better link visibility */
    text-decoration: none; /* Remove underline */
    font-weight: 500;
    transition: color 0.3s, text-decoration 0.3s;
}

.contact-info-card a:hover {
    color: var(--text-color-light); /* Light text on hover */
    text-decoration: underline; /* Add underline on hover */
}

/* --- Separator Line Styling --- */
.contact-info-card hr {
    border-color: rgba(255, 255, 255, 0.2);
    margin: 25px 0;
}

/* --- Address Specific Styling --- */
.contact-info-card p:last-of-type {
    margin-bottom: 0; /* Remove margin from the last element (Address) */
    padding-top: 5px; /* Add some padding above the address */
}
footer {
    background-color:var(--bg-color-dark); 
    color: #e0e0e0; 
    padding: 40px 5%; 
    text-align: center;
    border-top: 5px solid var(--primary-color); 
}
/* --- Special Offer Banner Styling --- */
.special-offer-banner {
    /* Full width banner to command attention */
    max-width: 1000px;
    margin: 40px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px;
    background: linear-gradient(90deg, #dc3545, #c82333); /* Red gradient background */
    color: white;
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 10px 30px rgba(220, 53, 69, 0.5); /* Strong shadow for 3D effect */
    border: 3px solid #ffdd00; /* Yellow/Gold border for premium feel */
}

/* --- Offer Content (Text) Styling --- */
.offer-content {
    flex-grow: 1; /* Takes up most of the space */
}

.offer-tag {
    background-color: #ffdd00;
    color: #333;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: 800;
    font-size: 0.9em;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 10px;
}

.special-offer-banner h2 {
    font-size: 2.2em;
    font-weight: 900;
    margin: 0;
}

.special-offer-banner .price {
    color: #ffdd00; /* Highlight the price in Gold/Yellow */
    font-size: 1.2em;
    padding: 0 5px;
}

.special-offer-banner p {
    font-size: 1.1em;
    margin: 5px 0 0 0;
    opacity: 0.9;
}

/* --- Call to Action Button Styling --- */
.offer-cta {
    flex-shrink: 0; /* Prevents button from shrinking */
    margin-left: 30px;
}

.primary-cta {
    background-color: #ffdd00; /* Gold/Yellow button */
    color: #333;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.primary-cta:hover {
    background-color: #ffe44d;
    transform: translateY(-2px); /* Lift effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* --- Responsiveness for Smaller Screens --- */
@media (max-width: 768px) {
    .special-offer-banner {
        flex-direction: column; /* Stack vertically on small screens */
        text-align: center;
        padding: 25px;
    }

    .special-offer-banner h2 {
        font-size: 1.8em;
    }

    .offer-cta {
        margin-top: 20px;
        margin-left: 0;
        width: 100%; /* Full width button */
    }

    .primary-cta {
        width: 100%;
    }
}
/* Certificate Redirect Card Styling */
.certificate-redirect-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    border: 1px solid #e0e8f0;
    padding: 30px;
    border-radius: 20px;
    margin: 40px auto;
    max-width: 1000px;
    box-shadow: 0 15px 35px rgba(0, 78, 146, 0.1);
    gap: 20px;
    flex-wrap: wrap; /* Mobile friendly */
}

.cert-icon-box {
    background: #004e92;
    color: white;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 30px;
    box-shadow: 0 8px 20px rgba(0, 78, 146, 0.3);
}

.cert-text-content {
    flex: 1;
    min-width: 280px;
}

.cert-badge {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 10px;
}

.cert-text-content h3 {
    margin: 0 0 8px 0;
    color: #1e293b;
    font-size: 1.6rem;
    font-weight: 700;
}

.cert-text-content p {
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

.cert-visit-btn {
    background: #004e92;
    color: white !important;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.cert-visit-btn:hover {
    background: #003366;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .certificate-redirect-card {
        text-align: center;
        justify-content: center;
        padding: 25px;
    }
    .cert-icon-box {
        margin: 0 auto 10px;
    }
    .cert-visit-btn {
        width: 100%;
        justify-content: center;
    }
}