body {
    font-family: 'Jost', sans-serif;
    background-color: #ffffff; /* Ensures a white background for the page */
    overflow-x: hidden; /* Added to prevent unwanted horizontal scrolling */
}

/* --- PRELOADER STYLES --- */
#preloader-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10px;
    background-color: #11274d; /* Same as font color */
    width: 0; /* Controlled by JS */
}

/* Container for the percentage number and symbol */
#preloader-percentage-container {
    position: absolute;
    bottom: 24px; /* Moved further up */
    left: 0; /* Will be updated by JS */
    display: flex;
    align-items: baseline; /* Aligns number and % symbol at their baseline */
    transform: translateX(-100%); /* Aligns the right edge of the numbers with the right edge of the bar */
    white-space: nowrap;
    color: #11274d;
    font-weight: 300; /* Jost Light */
}

/* Wrapper for the number reel to create the "slot machine" window */
.number-reel-wrapper {
    height: 4.6rem; /* Matches the new font-size of the numbers */
    overflow: hidden;
}

/* The reel itself, which will be moved with transform */
#preloader-number-reel > span {
    display: block;
    font-size: 4.6rem; /* Increased by 120% from base */
    line-height: 1; /* To make height calculation easier */
}

#preloader-percent-symbol {
    font-size: 3.8rem; /* Increased by 30% */
    line-height: 1;
    margin-left: -0.2em; /* Pulls the symbol closer to the number */
}
/* Ensures the browser does not apply its own smooth scroll, to give full control to JS */
html {
    scroll-behavior: auto !important;
}
h2 {
    letter-spacing: 0.1em;
}
.cta-button {
    transition: all 0.3s ease;
}
.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}
/* Style for the navbar when scrolling */
header.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(5px);
    /* Sostituiamo il border-bottom con un box-shadow per una transizione più fluida */
    box-shadow: 0 1px 0px #e5e7eb, 0 2px 10px rgba(0, 0, 0, 0.1);
}
header.scrolled .header-link {
    color: #11274d;
}
header.scrolled .header-divider {
    background-color: #e5e7eb; /* gray-200 */
    opacity: 1;
}
/* Style for logos */
#logo-img, #logo-img-mobile {
    width: 150px;
    max-width: 100%;
    height: auto;
}

/* --- START: NEW - General Hover Styles for Header Links --- */

/* Change color on hover for all header links (both scrolled and transparent) */
/* When header is scrolled, link text becomes blue on hover */
header.scrolled .header-link:hover {
    color: #17789e;
}
/* When header is transparent, link text stays white on hover */
header:not(.scrolled) .header-link:hover {
    color: white;
}

/* --- START: Underline effect for header links --- */
nav a.header-link {
    position: relative;
}

nav a.header-link::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -17px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Underline for TRANSPARENT header (thin, white) */
header:not(.scrolled) nav a.header-link::after {
    height: 1px;
    background-color: white;
}

/* Underline for STICKY header (normal thickness, blue) */
header.scrolled nav a.header-link::after {
    height: 2px;
    background-color: #17789e;
}

/* Trigger the underline animation on hover OR if the link is for the active page */
nav a.header-link:hover::after,
nav a.header-link.active-nav-link::after {
    transform: scaleX(1);
}
/* --- END --- */

/* Text reveal animation (word-mask) */
.word-mask {
    display: inline-block;
    line-height: 1.1;
    overflow: hidden;
}

.word-mask span {
    display: inline-block;
    transform: translateY(110%);
}

.hero-title.is-visible .word-mask span {
     animation: reveal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.animate-title.is-visible .word-mask span {
    animation: reveal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes reveal {
    to {
        transform: translateY(0);
    }
}

/* Generic animation for elements entering on scroll */
.animate-on-scroll, .animate-title {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animate-title {
     transform: translateY(0);
}

.animate-on-scroll.is-visible, .animate-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Styles for the scrolling text (Marquee) */
.marquee-viewport {
    width: 100%;
    overflow: hidden;
}
.marquee-container {
    display: flex;
    width: max-content;
    animation: scroll linear infinite;
}
.marquee-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}
.text-item {
    position: relative;
    font-weight: 200;
    font-size: clamp(40px, 10vw, 120px); /* Responsive font size */
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: rgba(3, 41, 74, 0.3);
    padding: 0;
    cursor: default;
    flex-shrink: 0;
}
.text-item:hover {
    cursor: none;
}
.text-item::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
    color: #15759b;
    transition: width 0.4s ease-out;
    white-space: nowrap;
}
.text-item:hover::before {
    width: 100%;
}
.marquee-icon {
    font-size: clamp(24px, 5vw, 45px); /* Responsive icon size */
    color: #15759b;
    margin: 0 clamp(20px, 4vw, 50px); /* Responsive margin */
    flex-shrink: 0;
}
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Image animation on scroll */
.image-animation-container {
    overflow: hidden;
}
.image-to-animate {
    opacity: 0;
    transform: translateY(100px) scale(1.1);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* La transizione per 'transform' è gestita da JS per la parallasse, quindi la rimuoviamo da qui */
    will-change: transform; /* Ottimizzazione per le performance */
}
.image-to-animate.is-visible {
    opacity: 1;
    /* La trasformazione iniziale ora include la scala per l'effetto parallasse */
    transform: scale(1.15); /* Ingrandisce l'immagine del 15% */
}

/* Styles for horizontal parallax text */
.parallax-text-container {
    width: 100%;
    text-align: center;
    margin-top: clamp(50px, 10vw, 100px); /* Top margin */
    margin-bottom: clamp(50px, 10vw, 100px); /* Bottom margin */
}

.parallax-text {
    font-size: clamp(50px, 15vw, 200px); /* Responsive font size */
    line-height: 1; 
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
    transition: transform 0.4s ease-out;
    z-index: 6;
}

.parallax-text-top {
    font-weight: 100; /* Jost ExtraLight */
    color: #03294A;
}

.parallax-text-bottom {
    font-weight: 300; /* Jost Regular */
    color: #15759B;
}

.card-shadow {
    box-shadow: 0 4px 35px rgba(0, 0, 0, 0.08);
}

/* Styles for the parallax effect on the full-width image */
.parallax-image-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}
.parallax-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 140%; /* Image taller than the container to allow for movement */
    object-fit: cover;
    will-change: transform, opacity; /* Performance optimization */
}

/* Styles for hero parallax images on internal pages */
.hero-parallax-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%; /* Make it taller to allow for parallax movement */
    object-fit: cover;
    will-change: transform; /* Optimize for animation */
}

/* --- CAROUSEL STYLES --- */
.home-carousel-container { /* Renamed for specificity */
    position: relative;
    width: 100%;
}
.home-carousel-container .swiper {
    /* Padding is now responsive, see media queries */ /* Scoped to home carousel */
    padding: 0 24px;
}
.swiper-slide {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background-size: cover;
    background-position: center;
    aspect-ratio: 16 / 9;
    width: 80vw;
    max-width: 1200px;
    display: flex;
    align-items: flex-end;
    color: white;
    transition: opacity 0.4s ease-in-out;
}
.home-carousel-container .swiper-slide::before { /* Scoped to home carousel */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, rgba(4, 41, 74, 0.7) 0%, rgba(4, 41, 74, 0.1) 100%);
    z-index: 1;
}
.home-carousel-container .slide-video { /* Scoped to home carousel */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0; /* Dietro l'overlay e il contenuto */
    opacity: 1; /* Sempre visibile */
    transition: opacity 0.4s ease-in-out;
}
.home-carousel-container .slide-content { /* Scoped to home carousel */
    position: relative;
    z-index: 2;
    padding: clamp(30px, 4vw, 50px);
    width: 100%;
}
.home-carousel-container .slide-title { /* Scoped to home carousel */
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 3.4375rem);
    line-height: 1.1;
    text-transform: uppercase;
}
.home-carousel-container .slide-description { /* Scoped to home carousel */
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 2vw, 1.125rem);
    margin-top: 1rem;
}
.home-carousel-container .slide-button { /* Scoped to home carousel */
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin-top: 2rem;
    padding: 15px 50px;
    border: 2px solid white;
    background-color: transparent;
    border-radius: 9999px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
}
.home-carousel-container .slide-button:hover { /* Scoped to home carousel */
    background-color: white;
    color: #04294a;
}

/* Ensure testimonial carousel slides have no overlay */
.testimonial-carousel .swiper-slide::before {
    display: none;
}

.testimonial-carousel .swiper {
    padding: 0 24px;
}

.testimonial-carousel .swiper-slide {
    width: 80%; /* Larghezza slide su mobile */
    max-width: 400px; /* Larghezza massima slide */
    height: auto; /* Altezza automatica basata sul contenuto */
    aspect-ratio: unset; /* Rimuove aspect-ratio se ereditato */
    border-radius: 0; /* Rimuove gli angoli arrotondati */
}

/* Di default, tutte le slide sono semi-trasparenti */
.testimonial-carousel .swiper-slide {
    opacity: 1;
    transition: opacity 0.4s ease; /* Aggiunge una transizione fluida */
}

/* Ripristinata la regola per rendere semi-trasparenti le slide non attive SOLO nel carosello della home */
.home-carousel-container .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.3;
}

/* --- START: NEW - Disable button on non-active slides --- */
.home-carousel-container .swiper-slide:not(.swiper-slide-active) .slide-button { /* Scoped to home carousel */
    pointer-events: none; /* Rende il pulsante non cliccabile */
    opacity: 0.5;         /* Rende il pulsante semitrasparente e visivamente disabilitato */
}
/* --- END: NEW --- */

.home-carousel-container .swiper-slide-prev,
.home-carousel-container .swiper-slide-next { /* Scoped to home carousel */
    cursor: pointer;
}

.home-carousel-container .swiper-pagination { /* Scoped to home carousel */
    position: static;
    margin-top: 2rem;
}
.home-carousel-container .swiper-pagination-bullet { /* Scoped to home carousel */
    background: #04294a;
    opacity: 0.5;
    width: 8px;
    height: 8px;
    transition: all 0.3s ease;
}
.home-carousel-container .swiper-pagination-bullet-active { /* Scoped to home carousel */
    opacity: 1;
    transform: scale(1.1);
}

/* --- START: TESTIMONIAL CAROUSEL ARROWS --- */
.testimonial-carousel .swiper-button-prev,
.testimonial-carousel .swiper-button-next {
    background-color: #15759b; /* Colore primario */
    width: 50px;
    height: 50px;
    border-radius: 8px; /* Angoli arrotondati */
    transition: opacity 0.3s ease;
    opacity: 0; /* Nascoste di default */
}

/* Aggiunge margine laterale ai pulsanti */
.testimonial-carousel .swiper-button-prev {
    left: 50px;
}
.testimonial-carousel .swiper-button-next {
    right: 50px;
}


.testimonial-carousel:hover .swiper-button-prev,
.testimonial-carousel:hover .swiper-button-next {
    opacity: 1; /* Visibili su hover del carosello */
}

.testimonial-carousel .swiper-button-prev::after,
.testimonial-carousel .swiper-button-next::after {
    /* Rimuoviamo le regole precedenti che non erano efficaci */
    display: none;
}

/* Stile per le nuove icone Font Awesome */
.testimonial-carousel .swiper-button-prev i,
.testimonial-carousel .swiper-button-next i {
    color: white; /* Frecce bianche */
    font-size: 20px; /* Dimensione delle frecce */
}

/* NUOVA REGOLA: Nasconde forzatamente qualsiasi SVG che Swiper inietta nei pulsanti */
.testimonial-carousel .swiper-button-prev svg,
.testimonial-carousel .swiper-button-next svg {
    display: none !important;
}

/* Nasconde le frecce su mobile */
@media (max-width: 767px) {
    .testimonial-carousel .swiper-button-prev,
    .testimonial-carousel .swiper-button-next {
        display: none !important;
    }
}

/* --- END: TESTIMONIAL CAROUSEL ARROWS --- */

/* --- CONTACT FORM STYLES --- */
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    transition: color 0.3s ease;
}
.form-label.error {
    color: #ef4444;
}
.form-input-styled {
    width: 100%;
    background-color: #f6f6f6;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem; /* More rounded corners */
    padding: 0.75rem;
    font-size: 1rem;
    color: #11274d;
    transition: all 0.3s ease;
}
.form-input-styled:focus {
    outline: none;
    border-color: #15759b;
    box-shadow: 0 0 0 2px rgba(21, 117, 155, 0.3);
}
.form-input-styled.error {
    border-color: #ef4444;
}
.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid #d1d5db;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.custom-checkbox:checked {
    background-color: #15759b;
    border-color: #15759b;
}
.custom-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

/* --- CUSTOM CURSOR STYLES --- */
#custom-cursor-container {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
}

#custom-cursor {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    transition: width 0.4s ease, height 0.4s ease, transform 0.4s ease, background-color 0.4s ease, opacity 0.4s ease;
    transform: translate(-50%, -50%);
    opacity: 0; /* Hidden by default */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* Marquee hover effect (large solid circle) */
#custom-cursor-container.marquee-hover #custom-cursor {
    opacity: 1; /* Visible only on marquee hover */
    transform: translate(-50%, -50%) scale(20);
}

/* --- START: NEW Carousel Navigation Hover Effect --- */

/* Style for the new carousel hover state (ring effect) */
#custom-cursor-container.carousel-nav-hover #custom-cursor {
    opacity: 1;
    transform: translate(-50%, -50%) scale(15); /* Leggermente più grande per contenere meglio la freccia */
    background-color: white; /* Colore pieno */
}

/* Style for the arrows inside the cursor */
.cursor-arrow {
    position: absolute;
    font-size: 2px; /* Start small, will be visible due to parent scaling */
    color: #11274d; /* Changed to dark blue to be visible on the white cursor */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show the correct arrow based on the class added by JS */
#custom-cursor-container.show-left-arrow #cursor-arrow-left,
#custom-cursor-container.show-right-arrow #cursor-arrow-right {
    opacity: 1;
}
/* --- END: NEW Carousel Navigation Hover Effect --- */

/* --- MAP STYLES --- */
.map-container {
    position: relative;
}
.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0); /* Transparent */
    cursor: pointer;
}

/* --- START: Custom Hamburger Icon --- */
.hamburger-button {
    width: 24px;
    height: 16px; /* Altezza per 2 linee */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Spazio tra le due linee */
    cursor: pointer;
    padding: 0;
    background: transparent;
    border: none;
    position: relative;
    z-index: 101; /* Sopra l'overlay del menu */
}

.hamburger-line {
    width: 100%;
    height: 2px;
    background-color: currentColor; /* Eredita il colore dal genitore (.header-link) */
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center;
}

/* Quando il menu è aperto, il bottone hamburger diventa bianco */
body.mobile-menu-is-open .hamburger-button {
    color: white !important;
}

body.mobile-menu-is-open .hamburger-button .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.mobile-menu-is-open .hamburger-button .hamburger-line:nth-child(2) {
    transform: translateY(-7px) rotate(-45deg);
}
/* --- END: Custom Hamburger Icon --- */

/* --- MOBILE MENU STYLES --- */
#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Full viewport height */
    background-color: rgba(17, 39, 77, 0.95); /* Dark blue with transparency */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0; /* Reset padding, handled by inner containers */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.5s;
    overflow: hidden; /* The main container should not scroll */
    z-index: 100; /* Below hamburger and logo */
}

/* When closing, we want to keep the menu in place and just fade it out */
#mobile-menu.is-closing {
    transform: translateY(0);
}

/* New wrapper to constrain content height to 90vh */
.mobile-menu-inner-wrapper {
    height: 90vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Allow scrolling inside this wrapper if content overflows */
}

/* Container for the menu links, with padding to clear the header */
.mobile-menu-inner-wrapper > .flex-col {
    padding: 8rem 32px 2rem 32px; /* Top padding for header, side padding for alignment, bottom for spacing */
    text-align: left;
    align-items: flex-start;
}

body.mobile-menu-is-open #mobile-menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Stop body scrolling when menu is open */
body.mobile-menu-is-open {
    overflow: hidden;
}

/* Style for the items inside the menu */
.mobile-menu-item {
    opacity: 0;
    transform: translateX(-30px); /* Parte da sinistra */
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile-menu-item.no-transition {
    transition: none;
}

/* When an item should be visible, we add this class via JS */
.mobile-menu-item.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Footer section inside mobile menu */
.mobile-menu-footer {
    margin-top: auto; /* Spinge il footer in basso */
    width: 100%;
    padding: 1.5rem 32px 4rem 32px; /* Increased bottom padding */
}

.mobile-menu-divider {
    width: 100%; /* Larghezza piena nel container con padding */
    border-color: rgba(255, 255, 255, 0.2);
}

/* Custom viewport height for hero section and mobile menu */
.hero-viewport-height {
    height: 90vh;
}

@media (min-width: 500px) {
    .hero-viewport-height,
    .mobile-menu-inner-wrapper {
        height: 100vh;
    }
}

@media (max-width: 900px) { /* For tablets */
    .swiper-slide {
        aspect-ratio: 1 / 1;
        height: auto;
    }
}
@media (max-width: 768px) { /* For mobile */
    .swiper {
        padding: 0; /* Remove padding to make slides full-width */
    }
    .parallax-text {
        font-size: 90px;
    }
    .swiper-slide {
        width: 100vw; /* Make slides full-width */
        aspect-ratio: 3 / 5; /* Make slides even taller */
    }
}

/* --- ACCORDION STYLES --- */
.accordion-item {
    border-bottom: 1px solid #e5e7eb;
}
.accordion-button {
    width: 100%;
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: clamp(1.125rem, 3vw, 1.5rem); /* Responsive font size */
    font-weight: 300; /* Light */
    color: #11274d;
    transition: background-color 0.2s ease;
}
.accordion-button:hover {
    background-color: #f9fafb;
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding: 0 1rem;
}
.accordion-content p {
    padding-bottom: 1.5rem;
    color: #585858;
    font-weight: 300;
    line-height: 1.6;
}
.accordion-icon {
    transition: transform 0.4s ease;
    font-size: 1.5rem;
    color: #15759b;
}
.accordion-button.active .accordion-icon {
    transform: rotate(45deg);
}
@media (max-width: 480px) {
    .parallax-text {
        font-size: 60px;
    }
}

/* --- RICH TEXT LIST STYLES --- */
main ul:not([class]),
main ol:not([class]),
.rich-text ul,
.rich-text ol {
    list-style-type: disc !important;
    margin-left: 1.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

main ol:not([class]),
.rich-text ol {
    list-style-type: decimal !important;
}

main ul:not([class]) li,
main ol:not([class]) li,
.rich-text li {
    margin-bottom: 0.25rem !important;
    display: list-item !important;
}

/* --- ABOUT CARD PROFESSIONISTI GRID STYLES --- */
main .about-card-list ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    list-style-type: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

main .about-card-list ul li {
    position: relative;
    padding-left: 1.25rem;
    display: block !important;
    margin-bottom: 0 !important;
}

main .about-card-list ul li::before {
    content: "•";
    color: #15759b;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.25rem;
    line-height: 1.2;
}

@media (max-width: 640px) {
    .about-card-list ul {
        grid-template-columns: 1fr;
    }
}