@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;600&display=swap');

/* Google Fonts */
:root {
    /* Color Palette derived from Logo */
    --primary-blue: #2e5280;
    /* Deep Blue from logo circle/text */
    --primary-dark: #1a3c61;
    /* Darker shade for hover */
    --accent-blue: #4a6fa5;
    /* Lighter blue for accents */
    --secondary-gray: #6e7378;
    /* Gray from logo square */
    --light-gray: #f4f6f9;
    /* Background light gray */
    --white: #ffffff;
    --text-main: #333333;
    --text-light: #666666;
    --text-slider1: #f6f2f2;
    --text-slider2: #0d0483b8;


    /* Spacing & Layout */
    --section-padding: 80px 0;
    --transition: all 0.3s ease;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    background-color: var(--white);
    scroll-behavior: smooth;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--primary-blue);
    font-weight: 700;
}
a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}
ul {
    list-style: none;
}
img {
    max-width: 100%;
    display: block;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* Utilities */
.btn {
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    transition: var(--transition);
    border: none;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}
.btn-primary {
    background-color: var(--primary-blue);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(46, 82, 128, 0.3);
}
.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 82, 128, 0.4);
}
.btn-block {
    display: block;
    width: 100%;
}
.section {
    padding: var(--section-padding);
}
.bg-light {
    background-color: var(--light-gray);
}
.section-header {
    text-align: center;
    margin-bottom: 60px;
}
.section-header h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
    color: var(--primary-blue);
}
.section-header .line {
    width: 80px;
    height: 4px;
    background: var(--secondary-gray);
    margin: 0 auto;
    border-radius: 2px;
}
.section-header p {
    margin-top: 15px;
    color: var(--text-light);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
/* Navigation */
.navbar {
    background-color: var(--white);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    height: 80px;
    display: flex;
    align-items: center;
}
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.logo img {
    height: 50px;
    /* Adjust based on actual logo ratio */
    width: auto;
}
.nav-links {
    display: flex;
    gap: 30px;
}
.nav-links li a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--secondary-gray);
    position: relative;
    padding-bottom: 5px;
}
.nav-links li a:hover,
.nav-links li a.active {
    color: var(--primary-blue);
}
.nav-links li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-blue);
    transition: var(--transition);
}
.nav-links li a:hover::after {
    width: 100%;
}
.menu-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--primary-blue);
    cursor: pointer;
}
/* Hero Slider Section */
.hero-slider {
    height: 100vh;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
    /* Account for navbar */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(244, 246, 249, 0.8));
}
.slider-container {
    height: 100%;
    position: relative;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    display: flex;
    align-items: center;
    /* Vertical Center */
    justify-content: flex-start;
    /* Horizontal Left */
    visibility: hidden;
    /* Hide non-active slides */
}
.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}
/* Abstract background shape for slides */
.slide::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 120%;
    background: var(--primary-blue);
    border-radius: 0 0 0 300px;
    opacity: 0.05;
    z-index: 0;
    transform: rotate(-10deg);
}
.hero-content {
    position: relative;
    z-index: 11;
    /* Above slide elements */
    max-width: 700px;
    /* Slightly wider for left align aesthetic */
    text-align: left;
    /* Explicitly left align text */
    margin-left: 120px;
    /* Align to the left of the container, avoiding the prev button */
}
/* Animations for content inside active slide */
.slide.active .hero-content h1 {
    animation: slideInDown 1s ease-out forwards;
}
.slide.active .hero-content p {
    animation: slideInUp 1s ease-out 0.3s forwards;
    opacity: 0;
    /* Star hidden for animation */
}
.slide.active .hero-content .btn {
    animation: fadeInUp 1s ease-out 0.6s forwards;
    opacity: 0;
    /* Start hidden */
}
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--text-slider1);
    text-shadow:
        -1px -1px 0 var(--primary-blue),
        1px -1px 0 var(--primary-blue),
        -1px 1px 0 var(--primary-blue),
        1px 1px 0 var(--primary-blue);
}
.hero-content h1 .highlight {
    color: var(--primary-blue);
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        0 0 10px rgba(255, 255, 255, 0.5);
    /* Plus a subtle glow */
}
.hero-content p {
    font-size: 1.1rem;
    color: var(--text-slider1);
    text-shadow:
        -1px -1px 0 var(--primary-blue),
        1px -1px 0 var(--primary-blue),
        -1px 1px 0 var(--primary-blue),
        1px 1px 0 var(--primary-blue);
    margin-bottom: 30px;
    margin-right: 20px;
}
/* Slider Controls */
.prev-btn,
.next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.5);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--primary-blue);
    z-index: 20;
    transition: var(--transition);
}
.prev-btn:hover,
.next-btn:hover {
    background: var(--primary-blue);
    color: var(--white);
}
.prev-btn {
    left: 20px;
}
.next-btn {
    right: 20px;
}
.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 20;
}
.dot {
    width: 12px;
    height: 12px;
    background: rgba(46, 82, 128, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}
.dot.active,
.dot:hover {
    background: var(--primary-blue);
    transform: scale(1.2);
}
/* Mobile adjustments for slider */
@media (max-width: 768px) {

    .prev-btn,
    .next-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}
/* Nosotros Section */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}
.about-text p {
    margin-bottom: 20px;
    font-size: 1.05rem;
    color: var(--text-light);
}
.img-placeholder {
    background-color: var(--secondary-gray);
    height: 350px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: 5rem;
    box-shadow: 20px 20px 0 var(--primary-blue);
    /* Stylish offset border */
}
/* MVP Section */
.mvp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.mvp-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: var(--transition);
    border-top: 5px solid transparent;
}
.mvp-card:hover {
    transform: translateY(-10px);
    border-top-color: var(--primary-blue);
}
.icon-box {
    width: 70px;
    height: 70px;
    background-color: rgba(46, 82, 128, 0.1);
    color: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 25px;
    transition: var(--transition);
}
.mvp-card:hover .icon-box {
    background-color: var(--primary-blue);
    color: var(--white);
}
.mvp-card h3 {
    margin-bottom: 15px;
}
.values-list {
    text-align: left;
    margin-top: 15px;
}
.values-list li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    color: var(--text-light);
}
.values-list li i {
    color: var(--secondary-gray);
    margin-right: 10px;
    font-size: 0.8rem;
}
/* Servicios Section (4 Spaces) */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.service-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    /* Ensure no underline on the card itself */
    color: inherit;
    /* Inherit text color */
}
.service-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}
.service-img {
    height: 180px;
    background-color: var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-size: 3rem;
    position: relative;
    overflow: hidden;
}
.service-img::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--primary-blue);
    opacity: 0;
    transition: var(--transition);
}
.service-card:hover .service-img::after {
    opacity: 0.1;
}
.service-card:hover .service-img i {
    transform: scale(1.1);
    transition: var(--transition);
}
.service-info {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.service-info h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}
.service-info p {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 0.95rem;
    flex-grow: 1;
}
.read-more {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--secondary-gray);
    display: flex;
    align-items: center;
}
.read-more i {
    margin-left: 5px;
    transition: var(--transition);
}
.read-more:hover {
    color: var(--primary-blue);
}
.read-more:hover i {
    margin-left: 10px;
}
/* Products Section */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px 0;
}
.product-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-blue));
    z-index: -1;
    transition: transform 0.5s ease;
    transform: scaleY(0);
    transform-origin: bottom;
}
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(46, 82, 128, 0.2);
    color: var(--white);
}
.product-card:hover::before {
    transform: scaleY(1);
}
.product-icon {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 25px;
    transition: var(--transition);
    display: inline-block;
    background: rgba(46, 82, 128, 0.1);
    padding: 20px;
    border-radius: 50%;
}
.product-card:hover .product-icon {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    transform: rotateY(180deg);
}
.product-card h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
    transition: var(--transition);
}
.product-card:hover h3 {
    color: var(--white);
}
.product-card p {
    color: var(--text-light);
    transition: var(--transition);
    font-size: 0.95rem;
}
.product-card:hover p {
    color: rgba(255, 255, 255, 0.9);
}
/* Contact Section */
.contact-section {
    background: linear-gradient(to right, var(--primary-blue), #1a3c61);
    color: var(--white);
    padding-bottom: 0;
    /* The form will overlap the footer slightly if we want a modern look, 
       but keeping it simple for now, standard padding */
    padding: 80px 0;
}
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}
.contact-info h2 {
    color: var(--white);
    margin-bottom: 20px;
}
.contact-info p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
    font-size: 1.1rem;
}
.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.info-item i {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--light-bg);
}
.social-links {
    margin-top: 40px;
}
.social-links a {
    display: inline-flex;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    transition: var(--transition);
}
.social-links a:hover {
    background: var(--white);
    color: var(--primary-blue);
    transform: translateY(-3px);
}
.contact-form {
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.form-group {
    margin-bottom: 20px;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    background: var(--white);
}
/* Footer */
footer {
    background-color: #f8f9fa;
    padding: 30px 0;
    text-align: center;
    color: var(--secondary-gray);
    font-size: 0.9rem;
    border-top: 1px solid #eee;
    /* Differentiate from body if needed */
}
/* Responsive */
@media (max-width: 992px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .about-content {
        grid-template-columns: 1fr;
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .mvp-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* Mobile menu implementation needed if JS is added, for now hiding */
    }

    .menu-toggle {
        display: block;
    }

    .hero {
        text-align: center;
        justify-content: center;
    }

    .hero-content {
        margin: 0;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }
}
/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =========================================
   Internal Page Styles (Added)
   ========================================= */
/* Textured Page Hero */
.page-hero {
    height: 40vh;
    background: linear-gradient(135deg, var(--primary-blue), #1a3c61);
    /* Pattern Overlay */
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px),
        linear-gradient(135deg, var(--primary-blue), #1a3c61);
    background-size: 20px 20px, 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding-top: 80px;
    position: relative;
    overflow: hidden;
}
.page-title {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.page-title h1 {
    color: var(--white);
    font-size: 3.5rem;
    margin-bottom: 0;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}
.breadcrumb {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
    display: inline-block;
}
.breadcrumb a:hover {
    color: var(--white);
    text-decoration: underline;
}
.product-detail-section {
    padding: 80px 0;
}
.product-intro {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 30px;
    line-height: 1.8;
}
/* Visual Placeholder */
.visual-placeholder {
    width: 100%;
    height: 400px;
    background-color: #f0f4f8;
    border-radius: 20px;
    border: 2px dashed #cbd5e0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
}
.visual-placeholder-content {
    text-align: center;
    color: var(--secondary-gray);
    z-index: 2;
    transition: var(--transition);
}
.visual-placeholder i {
    font-size: 4rem;
    margin-bottom: 15px;
    color: var(--primary-blue);
    opacity: 0.5;
}
.visual-placeholder::before {
    content: 'Colocar Imagen Aquí';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(46, 82, 128, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: bold;
    font-size: 1.2rem;
    opacity: 0;
    transition: var(--transition);
}
.visual-placeholder:hover {
    border-color: var(--primary-blue);
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.visual-placeholder:hover::before {
    opacity: 1;
}
/* Benefits Grid */
.benefits-container {
    margin-top: 50px;
}
.benefit-item {
    background: var(--white);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    border-left: 4px solid var(--primary-blue);
    transition: var(--transition);
}
.benefit-item:hover {
    transform: translateX(10px);
}
.benefit-item h4 {
    margin-bottom: 10px;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
}
.benefit-item h4 i {
    margin-right: 10px;
}
/* Technical Page (Sidebar Layout) */
.technical-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 60px;
    padding: 80px 0;
    align-items: start;
}
.side-nav {
    position: sticky;
    top: 100px;
    background: var(--light-gray);
    border-radius: 8px;
    overflow: hidden;
}
.side-nav ul {
    list-style: none;
}
.side-nav li a {
    display: block;
    padding: 15px 20px;
    color: var(--text-main);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 600;
    transition: var(--transition);
    font-size: 0.95rem;
}
.side-nav li a:hover,
.side-nav li a.active {
    background: var(--primary-blue);
    color: var(--white);
    padding-left: 25px;
}
.technical-content section {
    margin-bottom: 60px;
    scroll-margin-top: 100px;
}
.technical-content h2 {
    font-size: 2rem;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(46, 82, 128, 0.1);
}
.technical-content h3 {
    color: var(--secondary-gray);
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.4rem;
}
.technical-content p {
    margin-bottom: 15px;
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.8;
}
.technical-content ul {
    list-style: none;
    margin-bottom: 25px;
}
.technical-content ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: var(--text-light);
}
.technical-content ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--primary-blue);
    top: 2px;
}
.tech-image-rect {
    width: 100%;
    height: 300px;
    background: #eef2f7;
    border-radius: 8px;
    border: 1px solid #dce4ec;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    color: var(--secondary-gray);
    flex-direction: column;
}
.tech-image-rect i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: var(--accent-blue);
}
@media (max-width: 992px) {
    .technical-layout {
        grid-template-columns: 1fr;
    }

    .side-nav {
        position: static;
        margin-bottom: 40px;
    }
}
/* =========================================
   Image Effects (Solid Shadow & Ripple)
   ========================================= */
.solid-shadow-img {
    position: relative;
    display: inline-block;
    border-radius: 10px;
    /* Ensure ripple doesn't spill out of the border-radius if desired, 
       but for the shadow effect on the img, let's keep it visible. 
       Note: overflow:hidden clips the box-shadow if it's on the child img 
       but the parent clips it. We'll put the shadow on the img itself 
       and keep overflow visible, but the ripple might spill. 
       Actually, standard ripple is usually clipped. 
       Let's use a pseudo-element on top of the image for the ripple. */
    overflow: visible;
}
/* The Image Style */
.solid-shadow-img img {
    display: block;
    width: 100%;
    border-radius: 10px;
    /* The Solid Blue Shadow */
    box-shadow: 15px 15px 0 var(--primary-blue);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover Action */
.solid-shadow-img:hover img {
    transform: translate(-3px, -3px);
    /* Shadow grows slightly to emphasize lift */
    box-shadow: 18px 18px 0 var(--primary-blue);
}
/* Ripple Effect using pseudo-element on the link/container */
.solid-shadow-img::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    /* On top of image */
}
.solid-shadow-img:hover::after {
    animation: simpleRipple 0.6s linear;
}
@keyframes simpleRipple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }

    100% {
        width: 120%;
        height: 120%;
        opacity: 0;
    }
}
/* =========================================
   Reference Footer Style (Light & Compact)
   ========================================= */
.main-footer {
    background-color: #ffffff;
    color: var(--text-main);
    padding-top: 20px;
    /* Reduced to ~1/3 of original */
    font-size: 0.85rem;
    border-top: 4px solid var(--primary-blue);
}
.footer-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr 1fr;
    gap: 15px;
    padding-bottom: 15px;
    /* Reduced */
}
/* Column 1: Logo & CTA */
.footer-col-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.footer-logo {
    height: 40px;
    margin-bottom: 10px;
}
.footer-cta-btn {
    background-color: var(--accent-blue);
    color: var(--white);
    padding: 6px 15px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: var(--transition);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    font-size: 0.8rem;
}
.footer-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
    color: var(--white);
}
.footer-cta-btn i {
    margin-left: 8px;
}
/* Column 2: Contact Info */
.footer-col-contact {
    text-align: center;
}
.footer-col-contact h4,
.footer-col-links h4 {
    color: var(--primary-blue);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 0;
}
.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact-list li {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    color: var(--text-light);
    line-height: 1.4;
    width: 100%;
    justify-content: center;
}
.contact-list li i {
    color: var(--accent-blue);
    font-size: 0.9rem;
    margin-right: 10px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
/* Column 3: Links */
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 10px;
}
.footer-links-list li {
    margin-bottom: 5px;
}
.footer-links-list li a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    font-size: 0.85rem;
}
.footer-links-list li a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}
/* Column 4: Top Button Only */
.footer-col-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.back-to-top {
    border: 2px solid var(--secondary-gray);
    color: var(--text-light);
    /* Visible dark text */
    padding: 6px 18px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    margin-bottom: 0;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    cursor: pointer;
    font-size: 0.8rem;
}
/* Hover: Faint Blue Background + Primary Blue Text/Border */
.back-to-top:hover {
    background-color: rgba(46, 82, 128, 0.1);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}
.back-to-top i {
    margin-left: 6px;
}
/* Bottom Bar */
.footer-bottom {
    background-color: #f4f6f9;
    padding: 10px 0;
    color: #999;
    font-size: 0.75rem;
    border-top: 1px solid #eee;
}
.footer-bottom-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.legal-links a {
    color: #999;
    margin-right: 15px;
    text-decoration: none;
}
.legal-links a:hover {
    color: var(--primary-blue);
}
@media (max-width: 992px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .footer-col-actions {
        align-items: flex-start;
        grid-column: span 2;
        justify-content: flex-end;
    }
}
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-col-actions {
        grid-column: span 1;
        align-items: center;
    }

    .footer-links-list {
        columns: 1;
    }

    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
    }
}
/* =========================================
   Cookie Consent Banner
   ========================================= */
.cookie-consent {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: #222;
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    max-width: 1200px;
    margin: 0 auto;
}
.cookie-consent.show {
    opacity: 1;
    transform: translateY(0);
}
.cookie-content {
    flex: 1;
    margin-right: 20px;
}
.cookie-content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}
.cookie-content a {
    color: var(--accent-blue);
    text-decoration: underline;
}
.cookie-btn {
    background-color: var(--primary-blue);
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.cookie-btn:hover {
    background-color: var(--accent-blue);
    transform: scale(1.05);
}
@media (max-width: 768px) {
    .cookie-consent {
        flex-direction: column;
        text-align: center;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
    }

    .cookie-content {
        margin-right: 0;
        margin-bottom: 15px;
    }
}