:root{
  --brand:#009AED;
  --cream:#FFFAF3;
  --white:#ffffff;
  --ink:#111;
  --radius:24px;
}


/* Intro */
.bg-cream{ 
  background: var(--cream); 
}

.intro-title{
  font-family: Geologica, Montserrat, system-ui, sans-serif;
  font-weight: 700;                    
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15;
}

.intro-title span {
  color: var(--brand);
}

.about-illus{ 
  max-width: 600px; 
  opacity: .9; 
}

@media (max-width: 991.98px){
  .about-illus{ 
    width:78%; 
    margin-left:auto; 
    display:block; 
    margin-top:30px; 
  }
}


/* card mission */
.about-quote{ 
  margin-top: 50px; 
  margin-bottom: 50px; 
}
.quote-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 48px) clamp(22px, 4vw, 60px);
  box-shadow:  2px 2px 30px -1px #009AED;
  max-width: 860px;
  width: 700px;
}

@media (max-width: 767.98px) {
  .quote-card {
    top: 60px;
    margin-bottom: 4rem;
    width: 400px;
    height: 450px;
  }
}

.quote-title{
  font-family: Geologica, Montserrat, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  line-height: 1.25;
}
.quote-title em{ 
  color: var(--brand); 
  font-style: normal; 
}

.about-quote{ position: relative; }
.quote-card{ 
  position: relative; 
  z-index: 2; 
}



/* img png piccola */
.cosini-wrapper { position: relative; }          

.cosighibli{
  position: absolute;
  width: clamp(110px, 12vw, 160px);
  height: auto;
  z-index: 3;
  bottom: 170px;  
  left: 290px;       
}

@media (max-width: 767.98px){
  .cosighibli{
    bottom: 250px;  
    left: 40%;
    z-index: 999;
  }
}




.arrow-wrapper {
  position: relative;
  top: 55px;   
  margin-bottom: 1rem;
  z-index: 2;
  display: flex;
  justify-content: center; 
}

.arrow-wrapper .arrow-decor {
  max-width: 300px;
  width: 100%;
  height: auto;
  transform: rotate(140deg); 
}

@media (max-width: 767.98px) {
  .arrow-wrapper {
    justify-content: center;
    top: 55px;
  }
}