/* style.css */

/* -------------------------------------------------------------------------- */
/*                                 CSS Variables                              */
/* -------------------------------------------------------------------------- */
:root {
    --font-primary: 'Playfair Display', serif;
    --font-secondary: 'Source Sans Pro', sans-serif;

    /* Gradient Color Scheme */
    --gradient-primary-start: #4E65FF; /* Vibrant Blue */
    --gradient-primary-mid: #7433FF; /* Purple */
    --gradient-primary-end: #B829FF;   /* Magenta */
    
    --gradient-accent-start: #FF8A00; /* Bright Orange */
    --gradient-accent-end: #FFC000;   /* Bright Yellow */

    --primary-color: var(--gradient-primary-mid);
    --secondary-color: var(--gradient-primary-start);
    --accent-color: var(--gradient-accent-start);

    --color-text-light: #FFFFFF;
    --color-text-dark: #222222;
    --color-text-medium: #555555;
    --color-text-subtle: #777777;

    --background-light: #F8F9FA;
    --background-dark: #1a1a1a; /* Darker for brutalism contrast */
    --card-background: #FFFFFF;
    --border-color: #DDDDDD;
    --brutal-border-color: var(--color-text-dark); /* For brutalist sharp borders */

    --primary-gradient: linear-gradient(135deg, var(--gradient-primary-start), var(--gradient-primary-mid), var(--gradient-primary-end));
    --accent-gradient: linear-gradient(135deg, var(--gradient-accent-start), var(--gradient-accent-end));

    --shadow-soft: 0 8px 25px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 10px rgba(0, 0, 0, 0.15);
    --shadow-brutal: 4px 4px 0px var(--brutal-border-color);

    --border-radius-sharp: 0px;
    --border-radius-soft: 8px;
    --border-radius-round: 50px;

    --transition-speed: 0.4s;
    --transition-easing: cubic-bezier(0.25, 0.8, 0.25, 1); /* Non-linear */
    --transition-non-linear: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* -------------------------------------------------------------------------- */
/*                                Global Styles                               */
/* -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-secondary);
    color: var(--color-text-dark);
    background-color: var(--background-light);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    padding-top: 0px !important;
}

.main-container {
    overflow-x: hidden; /* Prevents horizontal scroll from animations */
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    font-weight: 700;
    line-height: 1.3;
}

.title.is-1 { font-size: 3.5rem; }
.title.is-2 { font-size: 2.75rem; margin-bottom: 1.5rem;}
.title.is-3 { font-size: 2rem; }
.title.is-4 { font-size: 1.5rem; }
.title.is-5 { font-size: 1.25rem; }

.subtitle {
    font-family: var(--font-secondary);
    color: var(--color-text-medium);
    font-weight: 400;
}

.section-title {
    margin-bottom: 1rem !important; /* Bulma override */
    color: var(--color-text-dark);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.section-subtitle {
    margin-bottom: 3rem !important; /* Bulma override */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

p {
    margin-bottom: 1rem;
    color: var(--color-text-medium);
}

a {
    color: var(--primary-color);
    transition: color var(--transition-speed) var(--transition-easing);
}
a:hover {
    color: var(--gradient-primary-end);
}

/* General section styling */
.section {
    padding: 4rem 1.5rem; /* Default padding */
}

@media screen and (min-width: 769px) {
    .section {
        padding: 6rem 3rem;
    }
}


/* -------------------------------------------------------------------------- */
/*                             Button Styles (Global)                         */
/* -------------------------------------------------------------------------- */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-secondary);
    font-weight: 600;
    border-radius: var(--border-radius-round);
    padding: 0.8em 2em;
    transition: all var(--transition-speed) var(--transition-non-linear);
    border: 2px solid transparent;
    box-shadow: var(--shadow-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.button.is-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--color-text-light);
}
.button.is-primary:hover {
    background-color: var(--gradient-primary-end);
    border-color: var(--gradient-primary-end);
}

.button.is-primary.is-outlined {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.button.is-primary.is-outlined:hover {
    background-color: var(--primary-color);
    color: var(--color-text-light);
}
.hero .button.is-primary.is-outlined { /* Hero button specific */
    border-color: var(--color-text-light);
    color: var(--color-text-light);
}
.hero .button.is-primary.is-outlined:hover {
    background-color: var(--color-text-light);
    color: var(--primary-color);
}


.button.is-link {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--color-text-light);
}
.button.is-link:hover {
    background-color: var(--gradient-primary-start);
    border-color: var(--gradient-primary-start);
}

.button.is-gradient, .is-gradient { /* For buttons and other elements wanting gradient */
    background-image: var(--primary-gradient);
    color: var(--color-text-light) !important; /* Ensure text is light on gradient */
    border: none;
}
.button.is-gradient:hover, .is-gradient:hover {
    background-image: linear-gradient(135deg, var(--gradient-primary-mid), var(--gradient-primary-end), #E040FB); /* Shift gradient on hover */
    box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}

/* Read more link style */
.read-more-link {
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
}
.read-more-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--gradient-accent-end);
    transition: width var(--transition-speed) var(--transition-easing);
}
.read-more-link:hover::after {
    width: 100%;
}

/* -------------------------------------------------------------------------- */
/*                                Form Styles                                 */
/* -------------------------------------------------------------------------- */
.input, .textarea, .select select {
    font-family: var(--font-secondary);
    border-radius: var(--border-radius-soft);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
    transition: all var(--transition-speed) var(--transition-easing);
    padding: 0.8em 1em;
}
.input:focus, .textarea:focus, .select select:focus,
.input:active, .textarea:active, .select select:active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.125em rgba(var(--primary-color), 0.25); /* Bulma-like focus */
}
.label {
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--color-text-dark);
}
.select::after { /* Style Bulma's select arrow */
    border-color: var(--primary-color);
}

/* -------------------------------------------------------------------------- */
/*                                Card Styles                                  */
/* -------------------------------------------------------------------------- */
.card {
    background-color: var(--card-background);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-medium);
    transition: transform var(--transition-speed) var(--transition-non-linear), box-shadow var(--transition-speed) var(--transition-easing);
    height: 100%; /* Make cards in a row equal height */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensures content respects border-radius */
}
.card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--shadow-soft);
}

.card-image { /* This is the container for the image */
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 200px; /* Fixed height for image containers in cards */
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, might crop */
    transition: transform 0.5s var(--transition-easing);
}
.card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to take remaining space */
    display: flex;
    flex-direction: column;
    text-align: left; /* Default, can be overridden */
}
.card-content .title, .card-content .subtitle {
    margin-bottom: 0.75rem;
}
.card-content p:last-child {
    margin-bottom: 0;
}
.card-content .button {
    margin-top: auto; /* Pushes button to bottom if card content is flex column */
}

/* Specific card types needing centering */
.feature-card .card-content,
.instructor-card .card-content,
.step-card,
.company-card .card-content {
    text-align: center;
    align-items: center; /* For flex items if direction is column */
}
.instructor-card .card-image { /* For rounded instructor images */
    height: auto; /* Allow natural aspect ratio or make it square */
    padding: 1rem;
}
.instructor-card .card-image img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin: 0 auto;
    border: 4px solid var(--background-light);
    box-shadow: var(--shadow-medium);
}

/* -------------------------------------------------------------------------- */
/*                              Header & Navbar                               */
/* -------------------------------------------------------------------------- */
.header {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 0.5rem 1rem; /* Reduced padding for fixed header */
    min-width: 100vw;
    margin-top: 0 !important; 
}
@media (max-width: 768px) {
    .header{
       
        padding: 10px !important;

    }
    .contact-content-section{
        
        padding-top: 60px !important;
    }
    
}
.navbar {
    background-color: transparent;
}
.navbar-item, .navbar-link {
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--color-text-dark);
    transition: color var(--transition-speed) var(--transition-easing);
}
.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
    background-color: transparent !important; /* Bulma override */
    color: var(--primary-color) !important;
}
.site-title {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color) !important;
}
.navbar-burger span {
    background-color: var(--primary-color);
    height: 2px; /* Thinner burger lines */
}
.navbar-menu {
    animation: fadeInDown 0.5s ease-out; /* Example animation */
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive Navbar: Bulma handles this, just ensure colors match */
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: rgba(255, 255, 255, 0.98);
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        padding: 0.5rem 0;
        border-radius: var(--border-radius-soft);
    }
}


/* -------------------------------------------------------------------------- */
/*                                Hero Section                                */
/* -------------------------------------------------------------------------- */
.hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    margin-top: 60px; /* Adjust if header height changes */
}
.hero::before { /* Overlay for text readability */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)); /* Darker overlay */
    z-index: 1;
}
.hero .hero-body {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero .container {
    max-width: 900px;
}
.hero .hero-title {
    color: var(--color-text-light) !important; /* Explicitly white */
    font-size: 3.5rem; /* Responsive font size */
    margin-bottom: 1rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}
.hero .hero-subtitle {
    color: var(--color-text-light) !important; /* Explicitly white */
    font-size: 1.5rem; /* Responsive font size */
    margin-bottom: 2rem;
    font-weight: 400;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.5);
}

@media screen and (min-width: 769px) {
    .hero .hero-title {
        font-size: 4.5rem;
    }
    .hero .hero-subtitle {
        font-size: 1.75rem;
    }
}

/* -------------------------------------------------------------------------- */
/*                            Features Section                                */
/* -------------------------------------------------------------------------- */
.features-section .feature-card {
    /* Brutalist touch: slight border */
    border: 1px solid var(--border-color);
}
.features-section .feature-card .card-image {
    background-color: var(--background-light); /* Light bg for icons if not full */
    padding: 1rem; /* Padding around icon */
    height: 150px; /* Adjust icon container height */
}
.features-section .feature-card .card-image img {
    object-fit: contain; /* For icons */
    max-height: 80px; /* Max icon size */
    width: auto;
}
.features-section .feature-card .card-content .title {
    color: var(--primary-color);
}


/* -------------------------------------------------------------------------- */
/*                            Innovation Section                              */
/* -------------------------------------------------------------------------- */
.innovation-section .image-container img {
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-soft);
    /* Curved grid element: slight skew */
    /* transform: skewX(-3deg); */
    transition: transform 0.5s var(--transition-non-linear);
}
.innovation-section .image-container img:hover {
    transform: scale(1.03) /* skewX(0deg) */;
}

/* -------------------------------------------------------------------------- */
/*                            Portfolio Section (Catalog)                     */
/* -------------------------------------------------------------------------- */
.portfolio-section .filters-container {
    background-color: var(--card-background);
    padding: 2rem;
    border-radius: var(--border-radius-soft);
    margin-bottom: 3rem;
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--border-color);
}
.portfolio-section .company-card .card-image {
    background-color: #f0f0f0; /* Placeholder bg for logos */
    height: 180px;
}
.portfolio-section .company-card .card-image img {
    object-fit: contain; /* Logos should be contained */
    padding: 1rem; /* Padding for logos */
}

/* -------------------------------------------------------------------------- */
/*                            Methodology Section                             */
/* -------------------------------------------------------------------------- */
.methodology-section .step-card {
    padding: 2rem 1.5rem;
    background-color: var(--card-background);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-medium);
    height: 100%;
    border-left: 5px solid;
    border-image-slice: 1;
    border-image-source: var(--primary-gradient);
    transition: transform var(--transition-speed) var(--transition-non-linear);
}
.methodology-section .step-card:hover {
    transform: translateY(-5px);
}
.methodology-section .step-number {
    font-size: 3rem;
    font-family: var(--font-primary);
    font-weight: 700;
    margin-bottom: 1rem;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* -------------------------------------------------------------------------- */
/*                              Research Section                              */
/* -------------------------------------------------------------------------- */
.research-section .stats-widget {
    background-color: var(--card-background);
    padding: 1.5rem;
    border-radius: var(--border-radius-soft);
    text-align: center;
    box-shadow: var(--shadow-medium);
    border-top: 4px solid var(--accent-color);
}
.research-section .stats-widget .title {
    margin-bottom: 0.5rem;
}
.research-section .stats-widget .is-size-3 {
    font-family: var(--font-primary);
    color: var(--primary-color);
}

/* -------------------------------------------------------------------------- */
/*                             Instructors Section                            */
/* -------------------------------------------------------------------------- */
.instructors-section .instructor-card {
    /* Already centered by global card styles */
}
.instructors-section .instructor-card .card-content .subtitle {
    color: var(--accent-color);
}

/* -------------------------------------------------------------------------- */
/*                             Accolades Section                              */
/* -------------------------------------------------------------------------- */
.accolades-section .testimonial-card {
    background-color: var(--card-background);
    padding: 1.5rem;
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-medium);
    border-left: 4px solid var(--primary-color);
}
.accolades-section .testimonial-card .media-left img {
    border: 3px solid var(--primary-color);
}
.accolades-section .testimonial-card .content {
    font-style: italic;
    color: var(--color-text-medium);
}

/* -------------------------------------------------------------------------- */
/*                         External Links Section                             */
/* -------------------------------------------------------------------------- */
.external-links-section {
    background-color: var(--background-dark);
    color: var(--color-text-light);
}
.external-links-section .section-title,
.external-links-section .section-subtitle {
    color: var(--color-text-light);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.external-links-section .content ul {
    list-style: none;
    margin-left: 0;
}
.external-links-section .content li {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.external-links-section .content li:last-child {
    border-bottom: none;
}
.external-links-section .content a {
    color: var(--accent-color);
    font-weight: 600;
}
.external-links-section .content a:hover {
    color: var(--gradient-accent-end);
}
.external-links-section .content p {
    color: #cccccc; /* Lighter text on dark background */
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* -------------------------------------------------------------------------- */
/*                                Media Section                               */
/* -------------------------------------------------------------------------- */
.media-section .media-article { /* Bulma .box is used */
    padding: 1.5rem;
    transition: box-shadow var(--transition-speed) var(--transition-easing);
    border: 1px solid var(--border-color); /* Brutalist edge */
}
.media-section .media-article:hover {
    box-shadow: var(--shadow-soft);
}
.media-section .media-article .image img {
    border-radius: var(--border-radius-soft);
    object-fit: cover;
}

/* -------------------------------------------------------------------------- */
/*                               Contact Section                              */
/* -------------------------------------------------------------------------- */
.contact-section {
    background-color: #f0f4f8; /* Slightly different light background */
}
.contact-section .contact-details-card {
    background-color: var(--card-background);
    padding: 2rem;
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-medium);
    height: 100%;
    border-left: 5px solid;
    border-image-slice: 1;
    border-image-source: var(--accent-gradient);
}
.contact-section .contact-details-card p strong {
    color: var(--color-text-dark);
}
.contact-section .contact-details-card a {
    color: var(--accent-color);
}
.contact-section .contact-details-card a:hover {
    color: var(--gradient-accent-end);
}

/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */
.footer {
    background: var(--primary-gradient); /* Use primary gradient */
    padding: 4rem 1.5rem 2rem;
    color: var(--color-text-light);
}
.footer .title {
    color: var(--color-text-light) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.footer p, .footer li, .footer a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
}
.footer a:hover {
    color: var(--color-text-light);
    text-decoration: underline;
}
.footer .content p {
    color: var(--color-text-light); /* Ensure copyright is bright */
}
.footer hr {
    background-color: rgba(255,255,255,0.2);
}
.footer ul {
    list-style: none;
    margin-left: 0;
}
/* Footer social links - text only */
.footer .column:last-child ul li a {
    padding: 0.3rem 0;
    display: inline-block;
}

/* -------------------------------------------------------------------------- */
/*                         Specific Page Styles                             */
/* -------------------------------------------------------------------------- */
/* success.html */
body.success-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--primary-gradient);
    color: var(--color-text-light);
    padding: 2rem;
}
.success-page .success-container {
    background-color: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    padding: 3rem;
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-soft);
}
.success-page h1 {
    font-size: 3rem;
    color: var(--color-text-light);
    margin-bottom: 1rem;
}
.success-page p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2rem;
}
.success-page .button {
    background-color: var(--accent-color);
    color: var(--color-text-dark);
    border-color: var(--accent-color);
}
.success-page .button:hover {
    background-color: var(--gradient-accent-end);
}


/* privacy.html, terms.html */
body.privacy-page, body.terms-page, body.about-page, body.contacts-page {
    padding-top: 80px; /* To clear fixed header, adjust if header height changes */
}
.privacy-page .section, .terms-page .section,
.about-page .section, .contacts-page .section {
    background-color: var(--card-background);
    border-radius: var(--border-radius-soft);
    margin: 2rem auto;
    max-width: 960px;
    box-shadow: var(--shadow-medium);
}
.privacy-page h1, .terms-page h1,
.about-page h1, .contacts-page h1 { /* Main page title for these pages */
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
    text-align: center;
}
.privacy-page h2, .terms-page h2,
.about-page h2, .contacts-page h2 {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
}


/* -------------------------------------------------------------------------- */
/*                           Animation & Effects                              */
/* -------------------------------------------------------------------------- */
/* Example scroll animation class (to be triggered by JS) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--transition-easing), transform 0.8s var(--transition-non-linear);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Glassmorphism example (use sparingly) */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-soft);
    box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}

/* Brutalism: Sharp borders on some elements */
.brutal-card {
    border: 2px solid var(--brutal-border-color);
    box-shadow: var(--shadow-brutal);
    border-radius: var(--border-radius-sharp); /* Override soft radius */
}
.brutal-card:hover {
    box-shadow: 6px 6px 0px var(--primary-color); /* Shift shadow color on hover */
}

/* Curved Grids element: Example using clip-path */
.curved-grid-element {
    /* clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%); */
    /* Or a slightly skewed background */
    /* position: relative; */
}
/* .curved-grid-element::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: var(--primary-gradient);
    transform: skewY(-2deg);
    z-index: -1;
    border-radius: var(--border-radius-soft);
} */


/* -------------------------------------------------------------------------- */
/*                                 Utilities                                  */
/* -------------------------------------------------------------------------- */
.has-text-shadow {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-5 { margin-bottom: 3rem; }

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .title.is-1 { font-size: 2.5rem; }
    .title.is-2 { font-size: 2rem; }
    .section { padding: 3rem 1rem; }

    .hero .hero-title { font-size: 2.8rem; }
    .hero .hero-subtitle { font-size: 1.3rem; }

    .columns.is-multiline .column {
        margin-bottom: 1.5rem; /* Space between cards on mobile */
    }
}
*{
    opacity: 1 !important;
}