@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

    :root {
        --fipi-primary: #1f1f4b;
        --fipi-secondary: #7590fd;
        --fipi-thirdiary: #c5b6b6;
        --fipi-accent: #ddaced;
        --fipi-bg-light: #eef1ff;
        --fipi-bg-lighter: #f8f9ff;
        --fipi-bg-light-50: rgba(238, 241, 255, 0.5);
        --fipi-bg-medium: #eff2ff;
        --dash-header-height: 56px;
    }

body *:not(h1, h2, h3, h4, h5, h6) {
    font-size: .9rem;
}

/* FONTS */
.noto-sans-thin {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
.noto-sans-extralight {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
.noto-sans-light {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
.noto-sans-regular {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
.noto-sans-medium {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
.noto-sans-semibold {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
.noto-sans-bold {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
.noto-sans-extrabold {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
.noto-sans-black {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.fipi-primary {
    color: var(--fipi-primary) !important;
}
.fipi-secondary {
    color: var(--fipi-secondary) !important;
}
.fipi-thirdiary {
    color: var(--fipi-thirdiary) !important;
}

.fipi-bg-primary {
    background-color: var(--fipi-primary) !important;
}
.fipi-bg-secondary {
    background-color: var(--fipi-secondary) !important;
}
.fipi-bg-thirdiary {
    background-color: var(--fipi-thirdiary) !important;
}

/* BTNS */
.fipi-grey-btn {
    background: rgba(128, 128, 128, 0.3) !important;
    color: whitesmoke !important;
}
.fipi-light-btn {
    background: var(--fipi-bg-light-50) !important;
    color: #000000 !important;
}
.fipi-primary-btn {
    background: var(--fipi-primary) !important;
    color: whitesmoke !important;
}
.fipi-secondary-btn {
    background: var(--fipi-secondary) !important;
    color: whitesmoke !important;
}
.fipi-secondary-soft-btn {
    background: var(--fipi-bg-light-50) !important;
    color: var(--fipi-secondary) !important;
}

.fipi-secondary-outline-btn {
    background: transparent !important;
    color: var(--fipi-secondary) !important;
    border: 2px solid var(--fipi-secondary) !important;
}

.fipi-black-btn {
    background: #000 !important;
    color: whitesmoke !important;
}
.fipi-black-btn:hover {
    background: rgba(0, 0, 0, 0.85) !important;
}

.fipi-black-outline-btn {
    background: transparent !important;
    color: #000 !important;
    border: 2px solid #000 !important;
}
.fipi-black-outline-btn:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* CSS */
body {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
}

/* DASH SIDEBAR */
.dash-sidebar-wrap{
    background: var(--fipi-bg-lighter);
    border-right: 1px solid rgba(31, 31, 75, 0.12);
    min-height: 100%;
}

.dash-sidebar{
    background: var(--fipi-bg-lighter);
    color: var(--fipi-primary);
    width: 100%;
    border: none;
}

.dash-sidebar-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(31, 31, 75, 0.08);
}

.dash-sidebar-title{
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(31, 31, 75, 0.55);
}

.dash-sidebar-body{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px;
}

.dash-sidebar-section{
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(31, 31, 75, 0.45);
    margin: 6px 6px 2px;
}

.dash-sidebar-link{
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--fipi-primary);
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
}

.dash-sidebar-link i{
    width: 18px;
    text-align: center;
    color: rgba(31, 31, 75, 0.65);
}

.dash-sidebar-link:hover{
    background: var(--fipi-bg-light);
    border-color: rgba(31, 31, 75, 0.08);
}

.dash-sidebar-link.active{
    background: rgba(117, 144, 253, 0.16);
    color: var(--fipi-primary);
    border-color: rgba(117, 144, 253, 0.3);
}

.dash-sidebar-link.active i{
    color: var(--fipi-secondary);
}

.dash-sidebar-link-ghost{
    background: transparent;
    border: 1px solid transparent;
}

.dash-sidebar-divider{
    height: 1px;
    background: rgba(31, 31, 75, 0.08);
    margin: 10px 6px 6px;
}

@media (max-width: 767px){
    .dash-sidebar-wrap{
        border-right: none;
        min-height: auto;
    }

    .dash-sidebar{
        height: 100%;
    }
}

.dash-layout{
    min-height: calc(100dvh - var(--dash-header-height));
}

.dash-sidebar-wrap,
.dash-main{
    min-height: 100%;
}

.section-title {
    font-size: clamp(1.6rem, 4vw + 1rem, 4rem);
    line-height: 1.05;
    overflow-wrap: break-word;
}

.section-padding {
    padding: 5rem 0rem !important;
}

/* TOP NAVBAR */

.fipi-topnav a,
.fipi-topnav button,
.fipi-topnav {
    color: whitesmoke;
}

.fipi-topnav li {
    margin-right: 0.7rem !important;
}

.fipi-nav-btn {
    padding: 0.5rem !important;
    background-color: whitesmoke !important;
    color: black !important;
    border-radius: 2rem !important;
    font-weight: 400;
}

.hero-section {
    background-color: var(--fipi-primary);
    padding: 7rem 0;
}

.hero-bg-card-left {
    height: 20rem;
    width: 100%;
    background-color: var(--fipi-accent);
    border-radius: 2rem 0.5rem 0.5rem 0.5rem;
}
.hero-bg-card-right {
    height: 30rem;
    width: 100%;
    background-color: var(--fipi-accent);
    border-radius: 0.5rem 2rem 0.5rem 0.5rem;
}

.hero-search-group .input-group {
    height: 4rem;
}
.hero-search-col {
    position: relative;
    z-index: 10;
    min-width: 133% !important; /* col-8 */
}

/* Make sure parent allows overflow */
.hero-search-col-row {
    overflow: visible;
}

.popular-search-btn {
    padding: 0.3rem 1.2rem !important;
    font-size: 0.8rem !important;
    margin-right: 0.5rem;
}

/* Service section */
.service-section {
    background-color: var(--fipi-primary);
}

.service-section > .container-fluid {
    background-color: var(--fipi-bg-light);
    border-radius: 5rem 5rem 0 0;
}

.service-card {
    padding: 1rem 2rem;
}

.service-card i {
    font-size: 2rem;
    margin-left: -0.33rem;
    color: var(--fipi-primary) !important;
}

/* PATENT SECTION */
.swiperPatent {
    position: relative;
    z-index: 10;
    min-width: 138% !important;
}

.patent-slide {
    max-width: 35rem;
}
.patent-slide > p {
    font-size: 0.9rem;
}
.patent-btn {
    padding: 0.6rem 2rem !important;
    font-size: 1.2rem !important;
    color: black !important;
    text-wrap: none;
}

.single-patent-btn {
    padding: 0.7rem 1.2rem !important;
    font-size: 0.7rem;
}

.patent-img {
    width: 25rem !important;
    height: auto !important;
    border-radius: 1rem;
}

/* bring-patent-section */
.bring-patent-section img {
    border-bottom-left-radius: 5rem;
    max-width: 100%;
    max-height: 720px;
    width: auto;
    height: auto;
    aspect-ratio: 540 / 720;
    display: block;
}
.bring-patent-section a {
    padding: 1rem 1.5rem;
}

.trending-section {
    background-color: var(--fipi-primary);
}

.trending-card {
    max-width: 19rem;
    max-height: auto;
}

.trending-card .card-review i,
.last-sold-card .fa-star {
    color: #e6b800 !important;
}

.trending-card .card-footer {
    display: flex;
    justify-content: center !important;
}

/* swiper treninf */
.swiper-pagination-trending {
    position: static !important;
    width: auto !important;
}
.swiper-pagination-trending .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}

.swiper-pagination-trending .swiper-pagination-bullet-active {
    opacity: 1;
}

/* sales section */
.sales-img {
    border-bottom-left-radius: 5rem;
}

/* sales overlay*/
.sales-section .col > .row,
.latest-patent-section .col > .row {
    position: relative;
    overflow: visible;
}

.sales-section .sales-over,
.latest-patent-section .sales-over {
    position: absolute;
    top: 50%;
    left: -10%;
    transform: translateY(-50%);
    display: inline-block;
    background: rgba(255, 255, 255, 0.98);
    padding: 1rem 1.25rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    z-index: 20;
    background-color: var(--fipi-primary);
    width: auto;
    max-width: calc(100% - 2rem);
}

.sales-section .sales-over ul,
.latest-patent-section .sales-over ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sales-section .sales-over li,
.latest-patent-section .sales-over li {
    margin-bottom: 1.1rem !important;
    margin-top: 1.1rem !important;
}
.sales-section .sales-over li p,
.latest-patent-section .sales-over li {
    margin: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: whitesmoke;
    font-weight: 600;
}

.sales-section .sales-over i,
.latest-patent-section .sales-over i {
    color: var(--fipi-secondary);
}

.sales-section .sales-content,
.latest-patent-section .sales-content {
    padding: 2rem 1rem;
}
.sales-section .sales-title,
.latest-patent-section .sales-title {
    font-size: 2.25rem;
    line-height: 1.05;
    margin-top: 0.25rem;
}
.sales-section .sales-desc {
    max-width: 38rem;
    margin-top: 1rem;
    color: rgba(0, 0, 0, 0.65);
}

.sales-over {
    position: relative;
    top: -50%;
    left: 0%;
    transform: translateY(-50%);
    background-color: var(--fipi-primary);
    z-index: 10;
    display: inline-block;
    width: auto;
    padding-right: 5rem !important;
}

.sales-over li {
    color: whitesmoke;
}

/* LAST SOLD SECTION */
.last-sold-section {
    background-color: var(--fipi-bg-light);
}
.last-sold-swiper .swiper-slide {
    max-width: 20rem;
}
.last-sold-card {
    background: #ffffff;
    border: none;
    max-width: 20rem;
    margin: 0 auto;
}
.last-sold-avatar,
.fipidea-avatar {
    width: 84px;
    height: 84px;
    background: var(--fipi-accent);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(31, 31, 75, 0.06);
}
.last-sold-tag {
    background: var(--fipi-bg-light-50);
    color: #000 !important;
    padding: 0.35rem 0.8rem;
    border-radius: 10rem;
    font-size: 0.85rem;
}
.last-sold-meta > div {
    min-width: 6rem;
}
.view-patent-btn {
    font-weight: 600;
    padding: 0.9rem 1.25rem;
}

/* last-sold swiper navigation */
.last-sold-swiper {
    position: relative;
}
.last-sold-swiper .swiper-slide,
.categories-swiper .swiper-slide {
    max-width: 20rem;
}
.swiper-last-sold-button-next,
.swiper-last-sold-button-prev,
.swiper-categories-button-next,
.swiper-categories-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fipi-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fipi-primary);
    box-shadow: 0 6px 18px rgba(31, 31, 75, 0.08);
    z-index: 30;
    cursor: pointer;
    padding: 0.5rem;
}
.swiper-last-sold-button-next,
.swiper-categories-button-next {
    right: 0.5rem;
}
.swiper-last-sold-button-prev,
.swiper-categories-button-prev {
    left: 0.5rem;
}
.swiper-last-sold-button-next::after,
.swiper-categories-button-next::after {
    content: "›";
    font-size: 2.05rem;
    color: inherit;
}
.swiper-last-sold-button-prev::after,
.swiper-categories-button-prev::after {
    content: "‹";
    font-size: 2.05rem;
    color: inherit;
}
.swiper-last-sold-pagination,
.swiper-categories-pagination {
    text-align: center;
    margin-top: 0.75rem;
}

.trusted-logos img {
    max-width: 100px;
    height: auto;
}

/* Categories section */
.categories-card {
    background: var(--fipi-accent) !important;
    border: none;
    max-width: 20rem;
    height: 20rem !important;
    margin: 0 auto;
}

/* fipidea section */
.fipidea-section {
    background-color: var(--fipi-bg-lighter);
    padding-bottom: 10rem !important;
}

.fipidea-card,
.swiper-fipidea .swiper-slide {
    max-width: 25rem;
    height: auto !important;
}

/* WORK CARD */
.work-card {
    background-color: var(--fipi-bg-light) !important;
    color: #000;
    position: relative;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-33%);
}

.package-card {
    border-radius: 2rem;
    background-color: var(--fipi-primary);
}

.package-card ul {
    padding: 0;
}

.package-card ul > li {
    margin-bottom: 0.5rem;
}

/* FAQ */
.accordionFaq .accordion-button,
.accordionFaq .accordion-button:not(.collapsed) {
    background: transparent !important;
}

.accordionFaq .accordion-item {
    padding: 2rem 1rem;
}

.accordionFaq .accordion-button {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.accordionFaq .accordion-button:not(.collapsed) {
    box-shadow: none !important;
}

.accordionFaq .accordion-collapse {
    border-top: 0 !important;
}

.accordionFaq .accordion-item:has(.accordion-button:not(.collapsed)) {
    background-color: var(--fipi-bg-light) !important;
}

.accordionFaq .accordion-button {
    font-size: 1.5rem;
    font-weight: 600;
}

/* metto il + invece che la freccia */
.accordionFaq .accordion-button:not(.collapsed)::after {
    background-image: none !important;
    content: "\f068" !important; /* - */
    font-family: "Font Awesome 7 Free" !important;
    font-weight: 900;
    font-size: 1.2rem;
    margin-left: 0.5rem;
    margin-left: auto;
}
.accordionFaq .accordion-button:is(.collapsed)::after {
    background-image: none !important;
    content: "\f067" !important; /* + */
    font-family: "Font Awesome 7 Free" !important;
    font-weight: 900;
    font-size: 1.2rem;
    margin-left: 0.5rem;
    margin-left: auto;
}

/* latest patent section */
.latest-patent-section .icon-circle {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    aspect-ratio: 1/1;
    color: var(--fipi-secondary);
    display: flex;
    justify-content: center;
}


.latest-patent-section {
    background-color: var(--fipi-bg-light);
}


/* FIPI FOOTER */
.fipi-footer-wrapper {
    border-top-left-radius: 5rem;
    border-top-right-radius: 5rem;
    background-color: var(--fipi-primary);
}

.fipi-footer {
    background-color: var(--fipi-bg-light);
}

.fipi-footer .subscribe-form input, .fipi-footer .subscribe-form button{
    background-color: var(--fipi-bg-light-50);
    border: 0;
    border-radius: 0;
    outline: none !important;
    color: whitesmoke   ;
    margin: 0 !important;

}

.page-404 h1 *, 
.page-404 h1 {
    font-size: 12rem;
    font-weight: 700;
}

.page-404 h1 > .accent {
    color: var(--fipi-secondary);
}

.page-faq *,
.page-about-us * {
    font-family: 'Google Sans';
}

.page-faq > .container {
    max-width: 800px;
}

.page-faq .accordion {
    --bs-accordion-btn-icon: url(../img/icons/plus.svg);
    --bs-accordion-btn-active-icon: url(../img/icons/minus.svg);
    --bs-accordion-btn-icon-width: 2rem;
    --bs-accordion-active-bg: #f0fbf9;
    --bs-accordion-btn-focus-box-shadow: 0;
    --bs-accordion-active-color: black;
}

.page-faq .accordion .accordion-button { 
    box-shadow: none;
}

.page-faq .accordion .accordion-collapse {
    background-color: #f0fbf9;
}

.page-faq .accordion .accordion-item {
    border: 0;
}

.page-about-us.hero {
    padding: 3rem 0;
    height: 65dvh;
    background-color: var(--fipi-primary);
}

.page-about-us.hero * {
    color: white;
}

.page-about-us.hero .images-container {
    gap: 30px;
}

#section-our-vision .image-container, #section-our-mission .image-container,
.page-about-us.hero .images-container .image-container {
    width: 300px;
    overflow: hidden;
    border-radius: 5px;
    background-color: #ddaced;
    height: 320px;
}

#section-our-vision .image-container, #section-our-mission .image-container {
    width: 95%;
    height: auto;
    border: 2px solid #ddaced;
    padding: 5px;
    background: transparent;
}

#section-our-vision .image-container > img, #section-our-mission .image-container > img,
.page-about-us.hero .images-container .image-container > img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    object-position: center;
}

#section-our-vision .image-container > img, #section-our-mission .image-container > img {
    border-radius: 5px;
}

.page-about-us.hero .images-container .image-container:nth-child(even) {
    height: 400px;
}

/* OUR FREELANCES SECTION */
#our-freelances {
    background-color: var(--fipi-bg-light);
}

#our-freelances .freelancer-card {
    background: transparent;
    border-radius: 2rem;
    padding: 1rem;
    margin: 1rem;
    height: 100%;
    min-height: 520px;
    max-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#our-freelances .freelancer-image {
    width: 100%;
    height: 200px;
    background: var(--fipi-accent);
    border-radius: 2rem;
    margin: 0 auto;
    box-shadow: 0 6px 18px rgba(31, 31, 75, 0.1);
    flex-shrink: 0;
}

#our-freelances .freelancer-card p.mb-4 {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: center;
}

#our-freelances .freelancer-card h4 {
    color: var(--fipi-primary);
    font-size: 1.5rem;
}

#our-freelances .freelancer-card .btn {
    background: var(--fipi-secondary);
    color: whitesmoke;
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    margin-top: auto;
}

#our-freelances .freelancer-card .btn:hover {
    background: var(--fipi-primary);
    color: whitesmoke;
}

#our-freelances .freelancers-swiper {
    position: relative;
    padding: 0 50px;
}

#our-freelances .swiper-freelancers-button-next,
#our-freelances .swiper-freelancers-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fipi-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 6px 18px rgba(117, 144, 253, 0.3);
    z-index: 30;
    cursor: pointer;
}

#our-freelances .swiper-freelancers-button-next {
    right: 0;
}

#our-freelances .swiper-freelancers-button-prev {
    left: 0;
}

#our-freelances .swiper-freelancers-button-next::after {
    content: "\f105";
    font-size: 1rem;
    color: inherit;
    font-family: FontAwesome;
}

#our-freelances .swiper-freelancers-button-prev::after {
    content: "\f104";
    font-size: 1rem;
    color: inherit;
    font-family: FontAwesome;
}

#our-freelances .swiper-freelancers-pagination {
    text-align: center;
    margin-top: 2rem;
}

#our-freelances .swiper-freelancers-pagination .swiper-pagination-bullet {
    background: var(--fipi-secondary);
    opacity: 0.3;
    width: 10px;
    height: 10px;
}

#our-freelances .swiper-freelancers-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--fipi-secondary);
}

/* OUR SERVICES SECTION */
#services {
    background-color: var(--fipi-bg-light);
}

#services .service-card {
    background: transparent;
    border-radius: 2rem;
    padding: 1rem;
    margin: 1rem;
    height: 100%;
    min-height: 520px;
    max-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#services .service-image {
    width: 100%;
    height: 200px;
    background: var(--fipi-accent);
    border-radius: 2rem;
    margin: 0 auto;
    box-shadow: 0 6px 18px rgba(31, 31, 75, 0.1);
    flex-shrink: 0;
}

#services .service-card p.mb-4 {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: center;
}

#services .service-card h4 {
    color: var(--fipi-primary);
    font-size: 1.5rem;
}

#services .service-card .btn {
    background: var(--fipi-secondary);
    color: whitesmoke;
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    margin-top: auto;
}

#services .service-card .btn:hover {
    background: var(--fipi-primary);
    color: whitesmoke;
}

#services .services-swiper {
    position: relative;
    padding: 0 50px;
}

#services .swiper-services-button-next,
#services .swiper-services-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fipi-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 6px 18px rgba(117, 144, 253, 0.3);
    z-index: 30;
    cursor: pointer;
}

#services .swiper-services-button-next {
    right: 0;
}

#services .swiper-services-button-prev {
    left: 0;
}

#services .swiper-services-button-next::after {
    content: "\f105";
    font-size: 1rem;
    color: inherit;
    font-family: FontAwesome;
}

#services .swiper-services-button-prev::after {
    content: "\f104";
    font-size: 1rem;
    color: inherit;
    font-family: FontAwesome;
}

#services .swiper-services-pagination {
    text-align: center;
    margin-top: 2rem;
}

#services .swiper-services-pagination .swiper-pagination-bullet {
    background: var(--fipi-secondary);
    opacity: 0.3;
    width: 10px;
    height: 10px;
}

#services .swiper-services-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--fipi-secondary);
}

/* SUCCESS STORIES SECTION */
#success-stories {
    background-color: transparent;
}

#success-stories .success-stories-swiper {
    background-color: var(--fipi-primary);
    padding: 3rem 50px;
    position: relative;
}

#success-stories .success-story-card {
    background: transparent;
    padding: 3rem 2rem;
    border-radius: 0;
    height: 100%;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    max-width: 945px;
    margin-left: 15rem;
    padding-bottom: 0;
}

#success-stories .story-title {
    font-size: 1.7rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: white;
}

#success-stories .story-subtitle {
    font-size: .95rem;
    color: #b0b0b0;
    margin-bottom: 2rem;
    font-weight: 400;
}

#success-stories .story-content p {
    font-size: 1.3rem;
    line-height: 1.2;
    color: white;
    text-align: justify;
    margin-bottom: 0;
}

#success-stories .story-author {
    font-size: 1.1rem;
    color: white;
    text-align: right;
    margin-top: 2rem;
}


#success-stories .success-stories-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

#success-stories .swiper-success-stories-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
}

#success-stories .swiper-success-stories-button-next,
#success-stories .swiper-success-stories-button-prev {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fipi-secondary);
    z-index: 30;
    cursor: pointer;
    flex-shrink: 0;
}

#success-stories .swiper-success-stories-button-next:hover,
#success-stories .swiper-success-stories-button-prev:hover {
    color: white;
}

#success-stories .swiper-success-stories-button-next::after {
    content: "\f061";
    font-size: 1rem;
    color: inherit;
    font-family: FontAwesome;
}

#success-stories .swiper-success-stories-button-prev::after {
    content: "\f060";
    font-size: 1rem;
    color: inherit;
    font-family: FontAwesome;
}


#success-stories .swiper-success-stories-pagination .swiper-pagination-bullet {
    background: white;
    opacity: 1;
    width: 12px;
    height: 12px;
    margin: 0 8px;
}

#success-stories .swiper-success-stories-pagination .swiper-pagination-bullet-active {
    background: white;
    opacity: 1;
}

/* START TO EXPLORE SECTION */
#start-to-explore {
    background-color: transparent;
}

#start-to-explore h2 {
    color: var(--fipi-primary);
}

#start-to-explore .explore-card {
    background: var(--fipi-accent);
    border-radius: 1rem;
    padding: 1.5rem 1rem;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 8px rgba(221, 172, 237, 0.2);
}

#start-to-explore .explore-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(221, 172, 237, 0.3);
    background: linear-gradient(135deg, var(--fipi-accent) 0%, rgba(221, 172, 237, 0.9) 100%);
}

#start-to-explore .explore-card-content h5 {
    color: var(--fipi-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

#start-to-explore .explore-card-content p {
    color: var(--fipi-thirdiary);
    font-size: 0.8rem;
    margin-bottom: 0;
    line-height: 1.2;
}

/* Custom 5-column layout for desktop */
@media (min-width: 992px) {
    #start-to-explore .col-lg-2 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.card.card-login {
    background-color: var(--fipi-primary);
    width: 650px;
    min-height: 300px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50px;
}

.card.card-login * {
    color: white;
}

.card.card-login p,
.card.card-login label {
    font-size: .75rem;
}

.card.card-login input {
    width: 100%;
    border-radius: 25px;
    color: black;
    padding: 10px;
    outline: 0;
    border: 0;
    box-shadow: none;
}

.card.card-login .login-divider {
    position: relative;
    width: 100%;
    opacity: 1;
    z-index: 1;
    background-color: white;
    height: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card.card-login .login-divider > span {
    background-color: var(--fipi-primary);
    position: absolute;
    z-index: 2;
    color: white;
    text-align: center;
    padding: 0 10px;
}

.card.card-login .social-buttons-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

.card.card-login .social-buttons-wrapper > div {
    flex: 1 !important;
    width: auto !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.card.card-login .fb-login-button iframe {
    width: 100% !important;
    height: 50px !important;
    border-radius: 8px !important;
    border: none !important;
}

.card.card-login .apple-signin-button {
    background: #000 !important;
    color: white !important;
    border: 1px solid #000 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.card.card-login .google-signin-button iframe {
    width: 100% !important;
    height: 50px !important;
    border-radius: 8px !important;
    border: none !important;
}

/* Styling per pulsanti social personalizzati */
.card.card-login .btn-social {
    flex: 1;
    height: 50px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
    font-size: .75rem;
}

.card.card-login .btn-social:hover {
    opacity: 0.9;
}

.card.card-login .btn-facebook {
    background: #1877f2;
    color: white;
}

.card.card-login .btn-apple {
    background: #000;
    color: white;
}

.card.card-login .btn-google {
    background: white;
    color: #000 !important;
    border: 1px solid #dadce0;
    font-weight: 500;
}


#professionals .professional-card {
    height: 300px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--fipi-primary);
}

#professionals .professional-card > div {
    width: 50%;
    position: relative;
}

#professionals .professional-card .image-container {
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    overflow: hidden;
    z-index: 2;
}

#professionals .professional-card .image-container > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#professionals .professional-card .circle-shape {
    position: absolute;
    width: 65%;
    height: auto;
    background-color: var(--fipi-secondary);
    aspect-ratio: 1;
    border-radius: 50%;
    bottom: -90%;
    z-index: 1;
}

@media (max-width: 767px) {
    #our-freelances .freelancers-swiper {
        padding: 0 20px;
    }

    #our-freelances .freelancer-card {
        margin: 0.5rem;
        padding: 2rem 1.5rem;
        min-height: 400px;
    }

    #our-freelances .freelancer-image {
        width: 250px;
        height: 150px;
    }

    #services .services-swiper {
        padding: 0 20px;
    }

    #services .service-card {
        margin: 0.5rem;
        padding: 2rem 1.5rem;
        min-height: 400px;
    }

    #services .service-image {
        width: 250px;
        height: 150px;
    }

    #success-stories .success-stories-swiper {
        padding: 2rem 20px;
    }

    #success-stories .success-story-card {
        padding: 2rem 1.5rem;
        min-height: 500px;
    }

    #success-stories .story-title {
        font-size: 2rem;
    }

    #success-stories .story-content p {
        font-size: 0.9rem;
    }

    #start-to-explore .explore-card {
        height: 100px;
        padding: 1rem 0.75rem;
    }

    #start-to-explore .explore-card-content h5 {
        font-size: 0.9rem;
    }

    #start-to-explore .explore-card-content p {
        font-size: 0.75rem;
    }
}



/* ----HORIZONTAL TIMELINE ---  */
.timeline-container {
  display: block;
  position: relative;
}

.timeline-container.timeline-horizontal ul.tl {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 20px 0;
  padding: 0;
}

.timeline-container.timeline-horizontal ul.tl li {
  list-style: none;
  position: relative;
  flex: 1 1 0;
  min-width: 220px;

  border: 0;

  padding: 30px 30px 0 0;
  display: flex;
  flex-direction: column;
}

/* line between nodes via pseudo-element */
.timeline-container.timeline-horizontal ul.tl li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 33%;
  width: 100%;
  height: 2px;
  background-color: var(--fipi-thirdiary);
}

/* no trailing line on the last item */
.timeline-container.timeline-horizontal ul.tl li:last-child::before {
  display: none;
}

/* hover glow now targets the pseudo-element */
.timeline-container.timeline-horizontal ul.tl li:hover::before {
  background-color: var(--fipi-secondary);
  transition: all 1000ms ease-in-out;
}

.timeline-container.timeline-horizontal ul.tl li:last-child {
  border-top: 0;
}

/* icon / node */
.timeline-container.timeline-horizontal ul.tl li .item-icon {
  position: absolute;
  left: 33%;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 500%;

  background: var(--fipi-primary);         
  color: var(--fipi-bg-lighter);

  height: 3rem;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hover glow on the line */
.timeline-container.timeline-horizontal ul.tl li:hover {
  border-color: var(--fipi-secondary);
  transition: all 1s ease-in-out;
}

/* text block */
.timeline-container.timeline-horizontal ul.tl li .item-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.timeline-container.timeline-horizontal ul.tl li .item-text > .item-title {
  font-weight: 600;
  color: var(--fipi-primary);
}

.timeline-container.timeline-horizontal ul.tl li .item-detail {
  color: var(--fipi-thirdiary);
}

.timeline-container.timeline-horizontal ul.tl li .item-timestamp {
  color: var(--fipi-secondary);
  font-size: 1.2rem;
  font-weight: 500;
  text-align: left;
  padding-left: 0;
}