/*
 Theme Name:   Baasbox
 Theme URI:    https://baasbox.com/
 Description:  Baasbox - WordPress Theme
 Author:       Baasbox S.R.L.
 Author URI:   https://baasbox.com/
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  baasbox
*/



@import url('//fonts.googleapis.com/css2?family=Pathway+Extreme:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Pathway+Extreme:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
@import url('../../../ajax/libs/font-awesome/5.15.4/css/all.min.css');
@import "https://baasbox.com/wp-content/themes/baasbox/compass";

/* Configurazione variabili colori del brand */
:root{
    --color-primary: #0059E6;
    --color-primary-light: #9CE0E8;
    --color-primary-dark: #2FB7C6;

    --color-secondary: #8982E6;
    --color-secondary-light: #FF9E9E;
    --color-secondary-dark: #FF3A3A;
}


*{
    box-sizing: border-box;
    font-family: 'Mulish', sans-serif;
    text-decoration: none;
}

body{
    background: #24252B;
}

body,
html{
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

.hidden{ display: none !important;}
.flex{ display: flex;}

.w-full{ width: 100%;}

.text-center *,
.text-center{ text-align: center;}
.container{
    padding: 0 16px;
    margin: 0 auto;
    width: 100%;
    max-width: 1240px;
}

br{
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    margin: 16px 0;
}

.row{
    display: flex;
    flex-wrap: wrap;
}

.section-no-padding-top,
.elementor-element:has(.section-no-padding-top){ padding-top: 0 !important}
.section-no-padding-bottom,
.elementor-element:has(.section-no-padding-bottom){ padding-bottom: 0 !important}

h1,h2,h3,h4,h5,h6{
    font-family: 'Pathway Extreme', sans-serif;
    margin: 0;
    padding: 0;
}

p, ul, li, ol{
    margin: 0;
    padding: 0;
    list-style: none;
}


.mt-3{ margin-top: 8px;}
.mt-4{ margin-top: 16px;}
.mt-5{ margin-top: 24px;}
.mt-6{ margin-top: 32px;}
.mt-7{ margin-top: 40px;}
.mt-8{ margin-top: 60px;}
.mt-9{ margin-top: 80px;}
.mt-10{ margin-top: 100px;}
.mb-3{ margin-bottom: 8px;}
.mb-4{ margin-bottom: 16px;}
.mb-5{ margin-bottom: 24px;}
.mb-6{ margin-bottom: 32px;}
.mb-7{ margin-bottom: 40px;}
.mb-8{ margin-bottom: 60px;}
.mb-9{ margin-bottom: 80px;}
.mb-10{ margin-bottom: 100px;}
@media(min-width: 960px){
    .mt-md-3{ margin-top: 8px;}
    .mt-md-4{ margin-top: 16px;}
    .mt-md-5{ margin-top: 24px;}
    .mt-md-6{ margin-top: 32px;}
    .mt-md-7{ margin-top: 40px;}
    .mt-md-8{ margin-top: 60px;}
    .mt-md-9{ margin-top: 80px;}
    .mt-md-10{ margin-top: 100px;}
    .mb-md-3{ margin-bottom: 8px;}
    .mb-md-4{ margin-bottom: 16px;}
    .mb-md-5{ margin-bottom: 24px;}
    .mb-md-6{ margin-bottom: 32px;}
    .mb-md-7{ margin-bottom: 40px;}
    .mb-md-8{ margin-bottom: 60px;}
    .mb-md-9{ margin-bottom: 80px;}
    .mb-md-10{ margin-bottom: 100px;}
}
@media(min-width: 1024px){
    .mt-lg-3{ margin-top: 8px;}
    .mt-lg-4{ margin-top: 16px;}
    .mt-lg-5{ margin-top: 24px;}
    .mt-lg-6{ margin-top: 32px;}
    .mt-lg-7{ margin-top: 40px;}
    .mt-lg-8{ margin-top: 60px;}
    .mt-lg-9{ margin-top: 80px;}
    .mt-lg-10{ margin-top: 100px;}
    .mb-lg-3{ margin-bottom: 8px;}
    .mb-lg-4{ margin-bottom: 16px;}
    .mb-lg-5{ margin-bottom: 24px;}
    .mb-lg-6{ margin-bottom: 32px;}
    .mb-lg-7{ margin-bottom: 40px;}
    .mb-lg-8{ margin-bottom: 60px;}
    .mb-lg-9{ margin-bottom: 80px;}
    .mb-lg-10{ margin-bottom: 100px;}
}
@media(min-width: 1140px){
    .mt-xl-3{ margin-top: 8px;}
    .mt-xl-4{ margin-top: 16px;}
    .mt-xl-5{ margin-top: 24px;}
    .mt-xl-6{ margin-top: 32px;}
    .mt-xl-7{ margin-top: 40px;}
    .mt-xl-8{ margin-top: 60px;}
    .mt-xl-9{ margin-top: 80px;}
    .mt-xl-10{ margin-top: 100px;}
    .mb-xl-3{ margin-bottom: 8px;}
    .mb-xl-4{ margin-bottom: 16px;}
    .mb-xl-5{ margin-bottom: 24px;}
    .mb-xl-6{ margin-bottom: 32px;}
    .mb-xl-7{ margin-bottom: 40px;}
    .mb-xl-8{ margin-bottom: 60px;}
    .mb-xl-9{ margin-bottom: 80px;}
    .mb-xl-10{ margin-bottom: 100px;}
}


.container{ margin: 0 auto; padding: 0  16px; max-width: 100%; }
@media(min-width: 1024px){
  .container{ padding: 0 80px;}
}

.text-center { text-align: center;}
.relative { position: relative;}

.h-full{ height: 100%;}
.h-screen{ height: 100dvh;}

.text-white{ color: #fff;}


/* REGOLE DISPLAY */
.hidden{ display: none;}
.block{ display: block;}
@media (min-width: 768px){
  .sm-hidden{ display: none;}
  .sm-block{ display: block;}
}

@media (min-width: 960px){
  .md-hidden{ display: none;}
  .md-block{ display: block;}
}
@media (min-width: 1140px){
  .lg-hidden{ display: none;}
  .lg-block{ display: block;}
}

.w-full{ width: 100%;}
.max-w-100{ max-width: 100px !important;}
.max-w-400{ max-width: 400px !important;}
.max-w-450{ max-width: 450px !important;}
.max-w-600{ max-width: 600px !important;}
.max-w-800{ max-width: 800px !important;}
.max-w-1000{ max-width: 1000px !important;}
.max-w-1200{ max-width: 1200px !important;}
.max-w-1400{ max-width: 1400px !important;}


/* REGOLE FLEX */
.row{ display: flex; }
.items-center{ align-items: center;}
.items-start{ align-items: flex-start;}
.items-end{ align-items: flex-end;}
.justify-center{ justify-content: center;}
.justify-between{ justify-content: space-between;}
.justify-around{ justify-content: space-around;}
.justify-start{ justify-content: flex-start;}
.justify-end{ justify-content: flex-end;}
.flex-wrap{ flex-wrap: wrap;}
.flex-wrap-reverse{ flex-wrap: wrap-reverse;}
.flex-nowrap{ flex-wrap: nowrap;}
.flex-column{ flex-direction: column;}
.gap-3{ gap: 8px;}
.gap-4{ gap: 16px;}
.gap-5{ gap: 24px;}
.gap-6{ gap: 32px;}
.gap-7{ gap: 40px;}
.flex-1{ flex: 1;}
.flex-none{ flex: none;}
.col-1{width: auto; flex: 1; max-width: 8.3333333333%;}
.col-2{width: auto; flex: 1; max-width: 16.6666666667%;}
.col-3{width: auto; flex: 1; max-width: 25%;}
.col-4{width: auto; flex: 1; max-width: 33.333333%;}
.col-5{width: auto; flex: 1; max-width: 41.6666666667%;}
.col-6{width: auto; flex: 1; max-width: 50%;}
.col-7{width: auto; flex: 1; max-width: 58.3333333333%;}
.col-8{width: auto; flex: 1; max-width: 66%;}
.col-9{width: auto; flex: 1; max-width: 75%;}
.col-10{width: auto; flex: 1; max-width: 83.3333333333%;}
.col-11{width: auto; flex: 1; max-width: 91.6666666667%;}
.col-12{width: auto; flex: 1; max-width: 100%;}
.d-none{display: none;}
.d-block{display: block;}

@media (min-width: 768px){
    .sm-row{ display: flex; }
    .sm-items-center{ align-items: center;}
    .sm-items-start{ align-items: flex-start;}
    .sm-items-end{ align-items: flex-end;}
    .sm-justify-center{ justify-content: center;}
    .sm-justify-between{ justify-content: space-between;}
    .sm-justify-around{ justify-content: space-around;}
    .sm-justify-start{ justify-content: flex-start;}
    .sm-justify-end{ justify-content: flex-end;}
    .sm-flex-wrap{ flex-wrap: wrap;}
    .sm-flex-wrap-reverse{ flex-wrap: wrap-reverse;}
    .sm-flex-nowrap{ flex-wrap: nowrap;}
    .sm-col-1{width: auto; flex: 1; max-width: 8.3333333333%;}
    .sm-col-2{width: auto; flex: 1; max-width: 16.6666666667%;}
    .sm-col-3{width: auto; flex: 1; max-width: 25%;}
    .sm-col-4{width: auto; flex: 1; max-width: 33.333333%;}
    .sm-col-5{width: auto; flex: 1; max-width: 41.6666666667%;}
    .sm-col-6{width: auto; flex: 1; max-width: 50%;}
    .sm-col-7{width: auto; flex: 1; max-width: 58.3333333333%;}
    .sm-col-8{width: auto; flex: 1; max-width: 66%;}
    .sm-col-9{width: auto; flex: 1; max-width: 75%;}
    .sm-col-10{width: auto; flex: 1; max-width: 83.3333333333%;}
    .d-none{display: none;}
    .d-block{display: block;}
}

@media (min-width: 960px){
    .md-row{ display: flex; }
    .md-items-center{ align-items: center;}
    .md-items-start{ align-items: flex-start;}
    .md-items-end{ align-items: flex-end;}
    .md-justify-center{ justify-content: center;}
    .md-justify-between{ justify-content: space-between;}
    .md-justify-around{ justify-content: space-around;}
    .md-justify-start{ justify-content: flex-start;}
    .md-justify-end{ justify-content: flex-end;}
    .md-flex-wrap{ flex-wrap: wrap;}
    .md-flex-wrap-reverse{ flex-wrap: wrap-reverse;}
    .md-flex-nowrap{ flex-wrap: nowrap;}
    .md-col-1{width: auto; flex: 1; max-width: 8.3333333333%;}
    .md-col-2{width: auto; flex: 1; max-width: 16.6666666667%;}
    .md-col-3{width: auto; flex: 1; max-width: 25%;}
    .md-col-4{width: auto; flex: 1; max-width: 33.333333%;}
    .md-col-5{width: auto; flex: 1; max-width: 41.6666666667%;}
    .md-col-6{width: auto; flex: 1; max-width: 50%;}
    .md-col-7{width: auto; flex: 1; max-width: 58.3333333333%;}
    .md-col-8{width: auto; flex: 1; max-width: 66%;}
    .md-col-9{width: auto; flex: 1; max-width: 75%;}
    .md-col-10{width: auto; flex: 1; max-width: 83.3333333333%;}
    .d-md-none{ display: none;}
    .d-md-block{ display: block;}

}
@media (min-width: 1140px){
    .lg-row{ display: flex; }
    .lg-items-center{ align-items: center;}
    .lg-items-start{ align-items: flex-start;}
    .lg-items-end{ align-items: flex-end;}
    .lg-justify-center{ justify-content: center;}
    .lg-justify-between{ justify-content: space-between;}
    .lg-justify-around{ justify-content: space-around;}
    .lg-justify-start{ justify-content: flex-start;}
    .lg-justify-end{ justify-content: flex-end;}
    .lg-flex-wrap{ flex-wrap: wrap;}
    .lg-flex-wrap-reverse{ flex-wrap: wrap-reverse;}
    .lg-flex-nowrap{ flex-wrap: nowrap;}
    .lg-col-1{width: auto; flex: 1; max-width: 8.3333333333%;}
    .lg-col-2{width: auto; flex: 1; max-width: 16.6666666667%;}
    .lg-col-3{width: auto; flex: 1; max-width: 25%;}
    .lg-col-4{width: auto; flex: 1; max-width: 33.333333%;}
    .lg-col-5{width: auto; flex: 1; max-width: 41.6666666667%;}
    .lg-col-6{width: auto; flex: 1; max-width: 50%;}
    .lg-col-7{width: auto; flex: 1; max-width: 58.3333333333%;}
    .lg-col-8{width: auto; flex: 1; max-width: 66%;}
    .lg-col-9{width: auto; flex: 1; max-width: 75%;}
    .lg-col-10{width: auto; flex: 1; max-width: 83.3333333333%;}
    .d-lg-none{ display: none;}
    .d-lg-block{ display: block;}
}

@media (min-width: 1441px){
    .xl-row{ display: flex; }
    .xl-items-center{ align-items: center;}
    .xl-items-start{ align-items: flex-start;}
    .xl-items-end{ align-items: flex-end;}
    .xl-justify-center{ justify-content: center;}
    .xl-justify-between{ justify-content: space-between;}
    .xl-justify-around{ justify-content: space-around;}
    .xl-justify-start{ justify-content: flex-start;}
    .xl-justify-end{ justify-content: flex-end;}
    .xl-flex-wrap{ flex-wrap: wrap;}
    .xl-flex-wrap-reverse{ flex-wrap: wrap-reverse;}
    .xl-flex-nowrap{ flex-wrap: nowrap;}
    .xl-col-1{width: auto; flex: 1; max-width: 8.3333333333%;}
    .xl-col-2{width: auto; flex: 1; max-width: 16.6666666667%;}
    .xl-col-3{width: auto; flex: 1; max-width: 25%;}
    .xl-col-4{width: auto; flex: 1; max-width: 33.333333%;}
    .xl-col-5{width: auto; flex: 1; max-width: 41.6666666667%;}
    .xl-col-6{width: auto; flex: 1; max-width: 50%;}
    .xl-col-7{width: auto; flex: 1; max-width: 58.3333333333%;}
    .xl-col-8{width: auto; flex: 1; max-width: 66%;}
    .xl-col-9{width: auto; flex: 1; max-width: 75%;}
    .xl-col-10{width: auto; flex: 1; max-width: 83.3333333333%;}
    .d-xl-none{ display: none;}
    .d-xl-block{ display: block;}
  }

/* REGOLE BOTTONI */
.btn{
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 1px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    background-color: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn:hover{
    background-color: var(--color-primary-dark);
}

.btn-primary{
    background-color: var(--color-primary);
    color: #fff;
}

.btn-primary:hover{
    background-color: #001C61;
}

.btn-secondary{
    background-color: transparent;
    color: #fff;
    text-transform: none;
    border: 1px solid #fff;
 
}

.btn-secondary:hover{
    border: 1px solid var(--AAA-General-Bianco, #FFF);
    background: rgba(255, 255, 255, 0.20);
}


.btn-outline{
    background-color: transparent;
    border: 1px solid  var(--color-primary);
    color:  var(--color-primary);
}

.btn-outline:hover{
    background-color: var(--color-primary);
    color: #fff;
    border: 1px solid  var(--color-primary);
}

.btn-disabled{
    cursor: default;
    pointer-events: none;
    background-color: #ccc;
    color: #fff;
}

/* Blog card template */
.grid-blog-card {
    border-radius: 8px;
    background: #121316;
    overflow: hidden;
}
.grid-blog-card .relative {
    position: relative;
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.grid-blog-card img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}
.grid-blog-card:hover img{
    transform: translate(-50%, -50%) scale(1.20);
} 
.grid-blog-card:hover .content .tags li {
    color: #FF526C;
}

.grid-blog-card .content {
    padding: 24px;
    color: #fff;
}
.grid-blog-card .content h3 {
    color: #FFF;
    font-family: "Pathway Extreme";
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
    margin: 0;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.grid-blog-card .content p {
    overflow: hidden;
    color: #C5C8D2;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.grid-blog-card .content .tags {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.grid-blog-card .content .tags li  {
    color: #6C6E76;
    font-family: "Pathway Extreme";
    font-size: 12px;
    font-weight: 500;
    line-height: 140%;
    cursor: pointer;
}


/* Wiki card template */
.list-wiki-card {
    border-bottom: 1px solid #6C6E76;
    padding-bottom: 40px;
}
.list-wiki-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.list-wiki-card h3 {
    color: #FFF;
    font-family: "Pathway Extreme";
    font-size: 21px;
    font-weight: 700;
    line-height: 140%;
    margin: 0;
    margin-bottom: 16px;
}
.list-wiki-card p {
    overflow: hidden;
    color: #C5C8D2;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
   
}

.list-wiki-card.loading .row{
    display: block;
}

.list-wiki-card.loading .row .skelethon-text{
    margin-bottom: 16px;
}

@media(min-width: 768px){
    .list-wiki-card h3 {
        font-size: 28px;
        line-height: 140%;
    }
}

@media(min-width: 960px){
    .list-wiki-card h3 {
        font-size: 32px;
        line-height: 140%;
    }
    .list-wiki-card {
        padding-bottom: 50px;
    }
}

@media(min-width: 1024px){
    .list-wiki-card {
        padding-bottom: 60px;
    }
}

@media(min-width: 1140px){
    .list-wiki-card {
        padding-bottom: 80px;
    }
    .list-wiki-card.loading .row{
        display: flex;
    
    }
}


/* Skelethon loader */
.skelethon-image{
    width: 100%;
    height: 100%;
    display: block;
    background: #333;
    position: relative;
    overflow: hidden;
    pointer-events: none;
    cursor: default;
    display: block;
}

.skelethon-text{
    overflow: hidden;
    background: #333;
    height: 16px;
    width: 100%;
    margin-bottom: 8px;
    position: relative;
    min-width: 100px;
    pointer-events: none;
    cursor: default;
    display: block;
}

.skelethon-image:before,
.skelethon-text:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        transform: translateX(-100%); 
    }
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(100%);
    }
}


/* -------------------------
    Max line
--------------------------- */

.max-line-1{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.max-line-2{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;}
.max-line-3{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal;}



@media(min-width: 1024px){
    .postid-14755 h3, .postid-14659 h3, .postid-662 h3{
        font-size: 32px !important;
        line-height: 140%;
    }
}

@media(max-width: 960px){
    .page-id-177 .elementor-widget-ctaContatti .btn, .page-id-14535 .elementor-widget-ctaContatti .btn{
        white-space: normal;
        word-wrap: break-word;
        text-align: left;
    }
}



/* Green Actitude */
.greenactitude-page .btn.btn-green{
    border-radius: 8px;
    background: var(--BBB-Secondari-Primario-scuro, #4D9C36);
    text-transform: none;
    margin-top: 16px;
}

.greenactitude-page img{
    margin-top: 16px;
}

.greenactitude-page h2{
    font-size: 24px;
    line-height: 140%;
    font-weight: 500;
    margin-bottom: 8px;
    font-family: 'Pathway Extreme', sans-serif;
}

.green-actitude{
    padding: 80px 0;
    text-align: center;
    min-height: 100vh;
    background-image: url('../../uploads/2024/04/greenac.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.green-actitude h1{
    color: var(--CCC-Neri-Nero-Pieno, #24252B);
    text-align: center;
    font-family: 'Pathway Extreme', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 120%; 
    margin-bottom: 16px;
    margin-top: 32px;
}

.progetto-ga{
    padding: 40px 0;
}

.label-ga{
    color: var(--AAA-Primari-Secondario, #541093);
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    text-transform: uppercase;
}

   
.row.moveto-ga{
    padding: 80px 16px;
    background-color: #F7F7FE;
    margin-top: 80px;
}

.numeri-ga{
    margin-top: 80px;
    padding: 40px 0;
    background-color: #F7F7FE;
}

.numeri-ga .num{
    color: var(--CCC-Neri-Nero-Pieno, #24252B);
    text-align: center;
    font-family: 'Mulish', sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 120%; 
}

.numeri-ga .des{
    color: var(--AAA-Primari-Secondario, #541093);
    text-align: center;
    font-family: 'Mulish', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
}

.actitude{
    padding: 40px 0;
}

.actitude h2{
    margin-bottom: 0;
}

.actitude .spelling{
    color: var(--CCC-Neri-Grigio-scuro, #6C6E76);
    font-family: 'Mulish', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 140%;
    margin-bottom: 24px;
}

.futuro-ga{
    padding: 40px 0;
    background-color: #F7F7FE;
}

.badge-ga{
    padding: 40px 0;
}

.map-ga img{
    margin-top: 0;
}

.numeri-ga .lg-col-5 div{
    margin-top: 24px;
}

.filosofia-ga .row:last-child{
    flex-direction: column-reverse;
    margin-top: 16px;
}


 .single-chart {
    width: 100%;
    margin-top: 48px;
  }

  .single-chart p{
    color: var(--CCC-Neri-Nero-Leggero, #34363F);
    text-align: center;
    font-family:'Mulish', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 150%; 
  }
  
  .circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    max-height: 250px;
  }
  
  .circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 2.8;
  }
  
  .circle {
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }
  
  .circular-chart.orange .circle {
    stroke: #541093;
  }
  
  .circular-chart.green .circle {
    stroke: #541093;
  }
  
  .circular-chart.blue .circle {
    stroke: #541093;
  }
  
  .percentage {
    color: #000;
    text-align: center;
    font-family: 'Mulish', sans-serif;
    font-size: 0.3em;
    font-weight: 600;
    line-height: 120%;
    text-anchor: middle;
  }



@media(min-width: 1024px){
    .green-actitude{
        padding: 120px 0;
    }
    .greenactitude-page h2{
        font-size: 32px;
        line-height: 140%;
    }
    
    .greenactitude-page img{
        margin-top: initial;
    }

    .green-actitude h1{
        font-size: 36px;
        font-weight: 600;
        line-height: 120%; 
    }

    .label-ga{
        font-size: 16px;
        line-height: 140%;
    }
    
    .progetto-ga{
        padding: 80px 0;
    }

    .filosofia-ga .row:last-child{
        flex-direction: initial;
        margin-top: initial;
    }
    
    
    .row.moveto-ga{
        background-image: url('../../uploads/2024/04/bg-moveto-1.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        padding: 140px 0;
    }
    
    .numeri-ga{
        padding: 80px 0;
    }
    
    .numeri-ga .lg-col-5{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 140px;
    }
    
    .numeri-ga .num{
        font-size: 60px; 
        line-height: 120%; 
    }
    
    .actitude{
        background-image: url('../../uploads/2024/04/actitude.png');
        background-position: right;
        background-size: contain;
        background-repeat: no-repeat;
        padding: 80px 0;
    }
    
    .actitude .spelling{
        font-size: 28px;
        font-weight: 300;
        line-height: 140%;
    }
    
    .futuro-ga{
        padding: 120px 0;
    }

    .futuro-ga p{
        text-align: center;
    }

    .futuro-ga .row{
        justify-content: center;
    }
    
    .badge-ga{
        padding: 80px 0;
    }
    
    .badge-ga .lg-col-6:last-child{
        text-align: end;
    }

    .filosofia-ga .row:first-child .lg-col-5{
        text-align: end;
    }

    .trees{
        display: flex;
        flex-flow: row nowrap;
        margin-top: 80px;
    }

    .single-chart {
        width: 33%;
        justify-content: space-around ;
        margin-top: initial;
    }

    .percentage {
        font-size: 0.4em;
        font-weight: 600;
        line-height: 120%;
      }
}