:root {
    --primary-color: #b9c5d8;
    --primary-dark: #4d98ed;
    --primary-light: #4d98ed;
    --accent-color: #63A3EE;
    --highlight-color: #87b7ed;
    --text-color: #FE6C19;
    --background-color: rgba(255, 255, 255, .9);
    --transparent-color: #87b7edb8;
    --white: #ffffff;
}

* {transition: all 0.5s;}

html {
    background-color: var(--background-color);
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    background-color: var(--background-color);
}

table td, table th {
    padding: 10px;
}

table td.highlight, table th.highlight {background-color: var(--primary-light);color: white;border-radius: 5px;}

#showcase {
    overflow: hidden;
    padding: 300px 0;
    color: var(--text-color);
    text-align: center;
}

#showcase::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-image: url('/assets/images/happiness.jpg');*/
    background-image: url('/assets/images/mindmatch-home-header-background-old.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(1.5px);
    z-index: -1;
    /* RIMOSSA PER OVERFLOW PAGINA
    transform: scale(1.1); /* Questo evita bordi bianchi causati dalla sfocatura */
}
#showcase h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
#showcase p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}
.btn {
    display: inline-block;
    background: var(--accent-color);
    color: var(--white);
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}
.btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.a-link {
    font-family: 'Poppins', sans-serif;
    font-weight: bolder;
    font-size: 18px;
    color: var(--text-color);
}

.flex {display: flex;gap: 20px;}
.flex.split > * {flex-grow: 1;position: relative;}
.flex.split > *:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 5%;
    width: 2px;
    height: 90%;
    background-color:rgb(255, 255, 255, 0.3);
}

.centered-text {
    text-align: center;
}

.center-dom {
    display: block;
    margin: auto;
}

.center-content > * {
    width: auto;
    display: block;
    margin: auto;
}

p.inline:has(.bubble) {line-height: 50px;}
.bubble {padding: 10px 20px;border-radius: 360px;border: 1px solid white;}

.blue-div {
    background-color: var(--primary-dark);
}
section.blue-div > * {color: white;}

div.split {
    display: flex;
}
div.split > * {flex: 1;}

section {
    padding: 80px 50px;
}

section img {border-radius: 20px;}

div:has(.side-picture) {display: flex;}
div:has(.side-picture) > div {flex: 1;}

.features > .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 50px;
}

.bubbled-features .feature-bubble {color: black; padding: 10px; border-radius: 15px; border: 1px solid orange; margin: 10px;}

.features > .container > div > img {width: 400px;height: 300px;max-width: 100%;object-fit: cover;}

.features.features-grid > .container > div {
    flex: 1 0 45%;
    display: flex;
    gap: 20px;
}

.features.features-grid > .container > div > div {
    flex: 1;
}

.features:not(.features-grid) > .container > div > div {
    border-radius: 20px;
    background-color: var(--text-color);
    padding: 20px;
}
.features:not(.features-grid) > .container > div > div > * {color: white;}

@media (max-width: 1000px) {
    #quick-about > h1 {text-align: left;}
    #quick-about > .container > .card-feature {display: block !important;}

    #how-to-use-steps > .flex {flex-direction: column-reverse;}
    #how-to-use-steps > .flex > .side-picture > img {width: 100%;max-width: 300px;}
}

@media (max-width: 400px) {
    table {zoom: 0.9}
}