@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Unbounded:wght@200..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");

html {
  scroll-behavior: auto;
  overflow-x: hidden !important;
}

body {
  width: 100%;
  height: auto;
  position: relative;
  font-family: "Urbanist";
}
a {
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  margin-bottom: 0;
}

#scroll-content {
  width: 100%;
  height: 100vh;
}
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999999999999999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.loaderTop,
.loaderBottom {
  width: 100%;
  overflow: hidden;
  height: 50%;
  background: var(--bg-color-2);
  display: flex;
  justify-content: center;
  transition: 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.loaderTop {
  align-items: end;
}
.loaderBottom {
  align-items: start;
}
.loaderBottomTxt,
.loaderTopTxt {
  transition: 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  line-height: 1;
  font-size: 200px;
  font-family: "Unbounded";
  font-weight: 900;
  background: var(--bg-color-2);
  text-shadow: rgb(82, 244, 27) 4px 0px 0px,
    rgb(82, 244, 27) 3.87565px 0.989616px 0px,
    rgb(82, 244, 27) 3.51033px 1.9177px 0px,
    rgb(82, 244, 27) 2.92676px 2.72656px 0px,
    rgb(82, 244, 27) 2.16121px 3.36588px 0px,
    rgb(82, 244, 27) 1.26129px 3.79594px 0px,
    rgb(82, 244, 27) 0.282949px 3.98998px 0px,
    rgb(82, 244, 27) -0.712984px 3.93594px 0px,
    rgb(82, 244, 27) -1.66459px 3.63719px 0px,
    rgb(82, 244, 27) -2.51269px 3.11229px 0px,
    rgb(82, 244, 27) -3.20457px 2.39389px 0px,
    rgb(82, 244, 27) -3.69721px 1.52664px 0px,
    rgb(82, 244, 27) -3.95997px 0.56448px 0px,
    rgb(82, 244, 27) -3.97652px -0.432781px 0px,
    rgb(82, 244, 27) -3.74583px -1.40313px 0px,
    rgb(82, 244, 27) -3.28224px -2.28625px 0px,
    rgb(82, 244, 27) -2.61457px -3.02721px 0px,
    rgb(82, 244, 27) -1.78435px -3.57996px 0px,
    rgb(82, 244, 27) -0.843183px -3.91012px 0px,
    rgb(82, 244, 27) 0.150409px -3.99717px 0px,
    rgb(82, 244, 27) 1.13465px -3.8357px 0px,
    rgb(82, 244, 27) 2.04834px -3.43574px 0px,
    rgb(82, 244, 27) 2.83468px -2.82216px 0px,
    rgb(82, 244, 27) 3.44477px -2.03312px 0px,
    rgb(82, 244, 27) 3.84068px -1.11766px 0px,
    rgb(82, 244, 27) 3.9978px -0.132717px 0px;
  z-index: 2;
  color: var(--bg-color-2);
}
.loaderTopTxt {
  transform: translateY(50%);
}
.loaderBottomTxt {
  transform: translateY(-50%);
}
.animateTxt {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
header {
  width: 100%;
  min-height: 100vh;
  background-image: url(../../images/header/headerBg.png);
  background-size: cover;
  padding-top: calc(15px + 21px);
}
/* Immagine di header ottimizzata per mobile */
/* Immagine di header ottimizzata per mobile */
@media (max-width: 768px) {
  header {
    background-image: url(../../images/header/headerbgmobile.png);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

@media (max-width: 470px) {
  header {
    background-position: right top;
  }
}

header nav {
  width: 100%;
  border: solid 8px var(--secondary-color);
  padding: 0 35px;
  background-color: var(--bg-color);
  border-radius: 60px;
  min-height: 120px;
}
.topBar {
  position: relative;
  min-height: 42px;
  border-radius: inherit;
  width: 100%;
  top: -25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--primary-gradiant);
  padding: inherit;
}
.discount {
  font-size: 14px;
  color: var(--text-color-2);
  font-weight: 500;
}
.topBar ul {
  display: flex;
  align-items: center;
  gap: 50px;
}
.topBar ul li {
  color: var(--text-color-2);
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.yoso-menu {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 35px;
  transition: var(--transition);
}
.sticky {
  transform: translateY(-100px);
  transition: none;
}
.yoso-menu.sticky {
  background-color: var(--bg-color);
  transform: translateY(0);
  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 10;
  box-shadow: 0px 22px 65px 0px rgba(32, 28, 29, 0.14) !important;
}
.logo {
  display: flex;
  line-height: 1;
  font-family: "Unbounded";
  font-weight: 800;
  color: var(--text-color-2);
  font-size: 40px;
  align-items: center;
}
.logo img {
  width: 35px;
}
.mainMenu {
  display: flex;
  height: auto;
  align-items: center;
  gap: 45px;
}
.mobileMenu {
  display: none;
  flex-direction: column;
  flex: 1;
  justify-content: end;
  align-items: end;
}
.hamburger {
  position: relative;
  width: 1em;
  height: 1em;
  font-size: inherit;
  transition: all 0.3s ease;
  cursor: pointer;
}
.hamburger-line {
  position: absolute;
  right: 0;
  width: 100%;
  height: 0.125em;
  border-radius: 0.125em;
  background: currentColor;
  transition: inherit;
}
.hamburger-line:nth-child(1) {
  top: 0.125em;
}
.hamburger.is-active .hamburger-line:nth-child(1),
.w-nav-button.w--open .hamburger-line:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotateZ(-135deg);
}
.hamburger-line:nth-child(2) {
  top: 0.438em;
}
.hamburger.is-active .hamburger-line:nth-child(2),
.w-nav-button.w--open .hamburger-line:nth-child(2) {
  right: 50%;
  width: 0;
}
.hamburger-line:nth-child(3) {
  top: 0.75em;
  width: 0.625em;
}
.hamburger.is-active .hamburger-line:nth-child(3),
.w-nav-button.w--open .hamburger-line:nth-child(3) {
  top: 50%;
  width: 100%;
  transform: translateY(-50%) rotateZ(135deg);
}
.mobileMenu .mainMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--bg-color-2);
  z-index: 100000000000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.mobileMenu .mainMenu li a {
  color: var(--bg-color);
  text-align: center;
  font-size: 40px;
  line-height: 1;
}
.mobileMenu .mainMenu .hamburger {
  color: var(--bg-color);
  position: absolute;
  top: 20px;
  right: 20px;
}
.mainMenu li {
  font-size: 17px;

  font-weight: 800;
}
.mainMenu li .dropdown-toggle.show.menuText .duplicateText {
  clip-path: circle(70.7% at 50% 50%);
}
.mainMenu li .dropdown-toggle.show.menuText .menuTextInner {
  color: transparent;
}
.mainMenu li a {
  transition: var(--transition);
  color: var(--text-color-2);
  cursor: pointer;
}
.mainMenu li .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
}
.mainMenu li .dropdown-menu {
  margin-top: 10px !important;
  padding: 0;
  border: 0;
}

.mainMenu li .dropdown-item {
  padding: 10px 15px;
  position: relative;
  transform-style: preserve-3d;
  font-weight: 600;
  font-size: 17px;
}
.mainMenu li .dropdown-item::after {
  content: "";
  width: 0;
  height: 100%;
  background: var(--primary-gradiant);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(-1px);
  transition: var(--transition);
}
.mainMenu li .dropdown-item:hover {
  background: none;
}
.mainMenu li .dropdown-item:hover::after {
  width: 100%;
}
.menuText {
  position: relative;
}
.menuText .menuTextInner {
  transition: var(--transition);
}
.menuText .duplicateText {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--text-color-2);
  background: var(--primary-gradiant);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: var(--transition);
  clip-path: circle(0% at 50% 50%);
}
.menuText:hover .menuTextInner {
  color: transparent;
}
.menuText:hover .duplicateText {
  clip-path: circle(70.7% at 50% 50%);
}
.search i {
  font-size: 22px;
  color: var(--text-color-2);
  position: relative;
  transition: var(--transition);
}
.search {
  cursor: pointer;
}
.search i:after {
  content: "\f002";
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  font-size: inherit;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--primary-gradiant);
  color: transparent;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: var(--transition);
  clip-path: circle(0% at 50% 50%);
}
.search i:hover {
  color: transparent;
  transform: scale(1.5);
}
.search i:hover::after {
  clip-path: circle(70.7% at 50% 50%);
}

.searchPopUp {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}
.showSearch {
  display: flex;
}
.searchPopUp form {
  width: 50%;
  height: 100px;
  border-radius: 50px;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}
.searchPopUp form input {
  flex: 1;
  height: 100%;
  background-color: transparent;
  border: 0;
}
.searchPopUp form input:focus {
  outline: none;
}
.searchPopUp form button {
  background: transparent;
  border: 0;
  font-size: 44px;
  color: rgb(112 112 112);
  position: relative;
  transition: var(--transition);
}
.searchPopUp form input,
.searchPopUp form input::placeholder {
  font-size: 30px;
}
.searchPopUp form input {
  color: #fff;
}
.searchPopUp form:focus-within button {
  color: var(--bg-color);
}
.close {
  position: absolute;
  top: 30px;
  right: 30px;
}
.close i {
  font-size: 50px;
  color: var(--bg-color);
}
.close i:after {
  content: "\f00d";
}

/* nav end */

.bottomImg img {
  box-shadow: 0px 9px 32px 0px rgba(0, 0, 0, 0.22);
}

.communityNumbers {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.communityImgs {
  display: flex;
  align-items: center;
  position: relative;
  left: -15px;
  margin: 10px 0;
  margin-top: 40px;
}
.communityImgs img {
  border: solid 2px rgb(239, 243, 244);
  border-radius: 50%;
  height: 44px;
  width: 44px;
  overflow: hidden;
  object-fit: cover;
  position: relative;
}
.communityImgs img:nth-child(2) {
  left: -20px;
}
.communityImgs img:nth-child(3) {
  left: -40px;
}
.communityNumbers article > * {
  font-weight: bold;
  color: var(--text-color);
}

/* hero Section End */

.tagline img {
  width: 20px;
}
.tagline p {
  font-size: 15px;
  font-family: "Unbounded";
  font-weight: 500;
  color: var(--text-color);
}
.tagline {
  display: flex;
  align-items: center;
  gap: 5px;
}
.yoso-h1,
.yoso-h2,
.yoso-h3,
.yoso-h4,
.yoso-h5,
.yoso-h6 {
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  color: var(--heading-color);
  margin: 6px 0 10px;   /* meno spazio sopra/sotto */
  line-height: 1.1;
}

.yoso-h1 {
  font-size: 70px;
}

.yoso-desc {
  font-size: 18px;
  color: var(--text-color);
  font-weight: normal;
  padding: 15px 0;
  line-height: 1.5;
}
.yoso-list li {
  display: flex;
  font-size: 18px;
  color: var(--text-color-2);
  font-weight: 800;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}
.yoso-list li i {
  font-size: 24px;
  color: transparent;
  background: var(--primary-gradiant);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.yoso-button {
  width: max-content;
  height: 65px;
  border-radius: 32px;
  background: var(--primary-gradiant);
  border: none;
  padding: 0 35px;
  display: flex;
  text-transform: uppercase;
  align-items: center;
  font-size: 13px;
  font-family: "unbounded";
  font-weight: 600;
  color: var(--text-color-2);
  gap: 10px;
  transition: 0.5s linear;
  position: relative;
}
.yoso-button i,
.yoso-button-3 i {
  font-size: 16px;
  transform: rotate(-45deg);
  transition: var(--transition);
  position: relative;
}
.yoso-button span,
.yoso-button-3 span i {
  display: inline-block;
  overflow: hidden;
  position: relative;
  margin-left: 7px;
}

.yoso-button span i:nth-child(1),
.yoso-button-3 span i:nth-child(1) {
  position: absolute;
  left: -10px;
  bottom: -10px;
  transform: translateX(-5px) rotate(-45deg);
}
.yoso-button span i:nth-child(2),
.yoso-button-3 span i:nth-child(2) {
  bottom: 0;
  left: 0;
}
.yoso-button:hover span i:nth-child(2),
.yoso-button-3:hover span i:nth-child(2) {
  left: 100px;
  bottom: 100px;
}
.yoso-button:hover span i:nth-child(1),
.yoso-button-3:hover span i:nth-child(1) {
  bottom: 5px;
  left: 5px;
}

.yoso-button:hover {
  background: #26262b;
  transition: 0.5s ease-in-out;
}

.featureslide {
  background: var(--primary-gradiant);
  height: 130px;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.featureslide marquee {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slideInner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 90px;
  width: 100%;
  height: 100%;
}
.slide {
  font-family: "Unbounded";
  font-size: 35px;
  font-weight: 800;
  color: var(--bg-color-2);
  display: flex;
  gap: 40px;
  align-items: center;
  margin-bottom: 0;
  width: max-content;
}
.slide::after {
  content: "";
  background-image: url(../../images/star.png);
  background-size: cover;
  width: 50px;
  height: 50px;
  display: inline-block;
}
.yoso-h2 {
  font-size: 45px;
}
.yoso-margin {
  margin: 110px 0;
}
.serviceSingle {
  width: 100%;
  height: auto;
  background-color: var(--secondary-color);
  border-radius: 30px;
  padding: 0 50px;
  position: relative;
  margin-top: 90px;
}
.serviceSingle > * {
  position: relative;
}
.serviceIcon {
  border: solid 10px var(--secondary-color);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-color);
  margin: 0 auto;
  transform: translateY(-40%);
  font-size: 38px;
  position: relative;
  color: var(--text-color-2);
  /* transform-style: preserve-3d; */
}
.serviceIcon::after {
  content: "";
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  position: absolute;
  top: -10px;
  left: -10px;
  background: transparent;
  border-radius: inherit;
  border: inherit;
  border-color: rgb(82, 244, 27);
  transition: var(--transition);
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
}
.serviceIcon img {
  width: 38px;
}
.yoso-h3 {
  font-size: 20px;
}
.yoso-list-2 li i {
  background: rgb(35, 140, 145);
  background-clip: text;
  font-size: 17px !important;
}
.yoso-button-2 {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color);
  font-size: 14px;
  color: var(--text-color-2);
  margin: 0 auto;
  transition: 0.5s linear;
  position: relative;
}
.serviceSingle::before {
  content: "";
  background: var(--primary-gradiant);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
  transition: var(--transition);
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
}
.serviceSingle:hover .serviceIcon::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.serviceSingle:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.aboutAgency {
  width: 100%;
  position: relative;
  min-height: 80vh;
  transform-style: preserve-3d;
}
.aboutAgency::before {
  content: "";
  width: 100%;
  height: 80%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../../images/bg.jpg);
  background-size: cover;
  transform: translateZ(-1px);
  background-color: var(--secondary-color);
}
.agencySide {
  width: 100%;
}
.agencySide img:nth-child(3) {
  height: 100%;
  display: block;
  margin: 0 auto;
}
.agencySide img:nth-child(1) {
  top: 40%;
}
.agencySide img:nth-child(2) {
  top: 65%;
}
.agencySide img:nth-child(4) {
  top: 60%;
}
.gallery .swiper-slide {
  transition-timing-function: cubic-bezier(0.76, 0.09, 0.215, 1);
}
.gallery {
  width: 100%;
  height: auto;
}

.gallerySingle {
  margin-bottom: 80px;
  padding: 0 20px;
  position: relative;
}
.aboutGallery {
  width: 80%;
  height: auto;
  background: var(--primary-gradiant);
  padding: 30px 30px;
  border-radius: 55px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  transform: translateY(-80%);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition);
}
.yoso-h6 {
  font-size: 14px;
}
.yoso-h4 {
  font-size: 23px;
  color: var(--heading-color);
}
.yoso-button-3 {
  width: 55px;
  height: 55px;
  background-color: var(--bg-color);
  border-radius: 50%;
  font-size: 14px;
  color: var(--text-color-2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.yoso-button-3 i {
  transform: rotate(-45deg);
}
.yoso-button-3:hover span i:nth-child(2) {
  left: 100px;
  bottom: 100px;
}

.yoso-button-3:hover span i:nth-child(1) {
  bottom: 15px;
  left: 15px;
}
.gallerySingle:hover .aboutGallery {
  transform: translateY(-70%);
  opacity: 1;
}
.yoso-padding {
  padding: 110px 0;
}
.yoso-awards {
  width: 100%;
  height: auto;
  background-image: url(../../images/bgDark.jpg);
  background-size: cover;
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
}

.darkTagline {
  background: var(--primary-gradiant);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.headingLight {
  color: var(--bg-color);
}
.awardSingle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 25px;
  border-bottom: solid 1px rgb(50, 50, 50);
  margin-top: 25px;
  position: relative;
}
.awardIcon {
  min-width: 103px;
  height: 103px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color);
  border: solid 1px transparent;
  transition: var(--transition);
}
.awardIcon img {
  width: 60px;
  transition: var(--transition);
}
.awardSingle::before {
  content: "";
  width: 0;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--primary-gradiant);
  transition: var(--transition);
}
.awardSingle .yoso-button-3 {
  transition: var(--transition);
  min-width: 55px;
}
.awardSingle:hover .awardIcon {
  background: transparent;
  border-color: rgb(82, 244, 27);
}
.awardSingle:hover .menuText .menuTextInner {
  color: transparent;
}
.awardSingle:hover .menuText .duplicateText {
  clip-path: circle(70.7% at 50% 50%);
}
.awardSingle:hover .yoso-button-3 {
  background: var(--primary-gradiant);
}
.awardSingle:hover .awardIcon {
  background-color: transparent;
  border-color: rgb(82, 244, 27);
}
.awardSingle:hover .awardIcon img {
  filter: brightness(0) saturate(100%) invert(69%) sepia(64%) saturate(932%)
    hue-rotate(53deg) brightness(104%) contrast(97%);
}
.awardSingle:hover::before {
  width: 100%;
}
.priceSingle {
  width: 100%;
  height: auto;
  background-color: var(--secondary-color);
  padding: 50px 45px;
  border-radius: 30px;
}
.price {
  font-family: "unbounded";
  font-size: 38px;
  font-weight: 800;
  color: var(--text-color-3);
}
.price span {
  font-weight: normal;
  font-size: 28px;
}
.priceImg {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 48px;
  border-bottom-left-radius: 0;
  margin: 25px 0;
}
.priceSingle .yoso-h4 {
  color: var(--text-color-3);
  margin: 0;
  font-family: "Urbanist";
}
.priceLine {
  width: 100%;
  height: 5px;
  background: var(--primary-gradiant);
  margin: 35px 0;
  margin-top: 30px;
}
.yoso-button-4 {
  width: 100%;
  height: 60px;
  border-radius: 30px;
  background-color: var(--text-color-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: "Urbanist";
  color: var(--bg-color);
  font-weight: 900;
  margin-top: 35px;
  position: relative;
  transition: var(--transition);
}
.yoso-button-4:hover {
  border-radius: 0;
  background: var(--primary-gradiant);
  color: var(--text-color-2);
}
.yoso-price .yoso-desc {
  font-size: 20px;
  color: rgb(100, 124, 158);
  font-weight: 600 !important;
  text-align: center;
  margin-top: 60px;
}
.yoso-desc a {
  color: var(--text-color-2);
  border-bottom: solid 1px var(--text-color-2);
}
.yoso-testimonials {
  width: 100%;
  height: auto;
  background-image: url(../../images/bg.jpg);
  background-size: cover;
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
}
.yoso-testimonials .yoso-desc {
  font-size: 20px;
  font-family: "Space Grotesk";
  font-weight: bold;
  width: 90%;
}
.testimonials {
  width: 100%;
  height: 100%;
}
.testimonials .swiper-wrapper {
  width: 100%;
  height: 450px;
}
.testimonials .testimonialImg {
  width: 100%;
  height: 450px;
  border-radius: 20px;
}
.testimonialsThumb {
  position: relative;
}
.testimonialsThumb img {
  width: 100%;
  height: 160px;
  border-radius: 20px;
}
.stars {
  display: flex;
  font-size: 18px;
  color: var(--text-color-2);
  align-items: center;
  justify-content: start;
  gap: 6px;
}
.clientName {
  font-family: "Space Grotesk";
  font-size: 20px;
  color: rgb(0 178 161);
  font-weight: bold;
}
.clientName span {
  font-size: 14px;
  color: rgb(115 120 121);
}
.prevNext {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.prevNext button {
  width: 50px;
  height: 50px;
  background-color: var(--bg-color-2);
  border-radius: 50%;
  border: none;
  color: var(--bg-color);
  font-size: 14px;
  transition: var(--transition);
}
.prevNext button.testimonial-next {
  background: var(--primary-gradiant);
  color: var(--text-color-2);
}
.prevNext button.testimonial-next:hover {
  transform: translateX(10px);
}
.prevNext button.testimonial-prev:hover {
  transform: translateX(-10px);
}
.testimonials .swiper-slide {
  opacity: 0 !important;
}
.testimonials .swiper-slide.swiper-slide-active {
  opacity: 1 !important;
}
.qouteSign {
  position: absolute;
  top: 5px;
  right: 15px;
}
.expIcon {
  min-width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 4px rgb(82, 244, 27);
  margin-right: 20px;
}
.expIcon i {
  width: 28px;
  height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: var(--text-color-2);
  background-color: rgb(173, 255, 1);
  border-radius: 50%;
}
.experienceTxt .yoso-h2 {
  font-size: 40px;
  margin: 0;
}

.experienceTxt .yoso-desc {
  margin-top: 10px;
  font-size: 14px;
  font-family: "Unbounded";
  margin: 0;
  padding: 0;
  width: 80%;
}
.BorderLine {
  height: 1px;
  min-width: 60px;
  background: var(--primary-gradiant);
}
.yoso-rotate-45 {
  transform: rotate(45deg);
}
.yoso-rotate-n-45 {
  transform: rotate(-45deg);
}

.tabs-inner {
  border-radius: 240px;
  width: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  transform-style: preserve-3d;
}
.tabs-inner::before {
  content: "";
  width: 100%;
  height: 93%;
  background-color: rgb(243, 248, 255);
  border-radius: inherit;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px);
}
.yoso-tab-button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.yoso-tab-button button {
  width: 100%;
  height: 55px;
  border-radius: 30px;
  border: 0;
  background: var(--bg-color);
  font-family: "Unbounded";
  font-size: 13px;
  font-weight: bold;
  color: var(--text-color-2);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.yoso-tab-button button.active {
  background: var(--primary-gradiant);
}
.yoso-tab-button button i {
  transition: var(--transition);
  opacity: 0;
  transform: translateX(-10px);
}
.yoso-tab-button button.active i {
  transform: translateX(0);
  opacity: 1;
}
.tab-pane .yoso-h4 {
  font-size: 25px;
  margin: 0;
  margin-bottom: 12px;
  margin-top: 20px;
}
.yoso-list-3 {
  margin-top: 30px;
}
.yoso-list-3 li {
  font-size: 17px;
  font-family: "Unbounded";
  color: var(--text-color-2);
  margin: 20px 0;
}
.yoso-list-3 li i {
  margin-right: 10px;
}
.yoso-break {
  width: 100%;
  margin-bottom: 80px;
  height: 3px;
  background-color: var(--text-color-3);
  position: relative;
}
.yoso-break img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  object-fit: cover;
}
.yoso-faqs {
  border: solid 8px rgb(152, 2226, 9);
  border-radius: 30px;
}
.yoso-faqs .yoso-h2 {
  font-size: 40px;
  line-height: 1.5;
}
.faq-item {
  border-bottom: solid 1px var(--text-color-2);
  padding: 0;
  margin-bottom: 30px;
}
.faq-item:nth-child(3) {
  border-bottom: 0;
}
.faq-header {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}
.faq-header button {
  background: transparent;
  width: 100%;
  height: auto;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  font-size: 23px;
  font-family: "Unbounded";
  font-weight: 600;
  text-align: start;
  gap: 20px;
}
.plusminus {
  position: relative;
  min-width: 40px;
  height: 40px;
  cursor: pointer;
  background: var(--primary-gradiant);
  border-radius: 50%;
  transition: var(--transition);
}
.faq-header button.collapsed .plusminus {
  background: var(--secondary-color);
}
.plusminus:before {
  transform: translate(-50%, -50%) rotate(-90deg);
  opacity: 0;
}
.plusminus:after {
  transform: translate(-50%, -50%) rotate(0);
}
.plusminus:before,
.plusminus:after {
  content: "";
  display: block;
  background-color: var(--text-color-2);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: var(--transition);
  width: 10px;
  height: 2px;
}
.faq-header button.collapsed .plusminus:before,
.faq-header button.collapsed .plusminus:after {
  background-color: rgb(129, 129, 129);
}
.faq-header button.collapsed .plusminus:before {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.faq-header button.collapsed .plusminus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-body {
  margin-bottom: 30px;
}
.postSingle {
  width: 100%;
  height: auto;
}
.postImg {
  width: 100%;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
}
.postImg img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.postTime {
  position: absolute;
  top: 0;
  left: 0;
  height: 75px;
  border-bottom-right-radius: 15px;
  width: 100px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: "Unbounded";
  font-size: 20px;
  font-weight: 600;
  color: var(--bg-color);
}
.postTime span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color-2);
}
.postTime .month {
  background: var(--primary-gradiant);
  font-size: 12px;
  color: var(--text-color-2);
}
.skillBlock {
  width: 100%;
  border-radius: 10px;
  background-color: var(--secondary-color);
  padding: 17px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.skillBlock img {
  width: 52px;
}
.skillBlock.flex-column img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin-bottom: 10px;
}
.skillBlock .yoso-desc {
  font-size: 16px;
}
.yoso-footer {
  width: 100%;
  height: auto;
  background: rgb(20, 6, 31);
}
.footerHeader {
  padding: 30px 0;
  width: 100%;
  height: auto;
  border-bottom: solid 1px rgb(65, 39, 99);
}
.footerHeader::before {
  content: "";
  height: 100%;
  width: 1px;
  position: absolute;
  top: 0;
  background-color: rgb(65, 39, 99);
  left: 50%;
  transform: translateX(-50%);
}
.yoso-footer .logo {
  color: var(--bg-color);
}
.yoso-h5 {
  font-size: 15px;
  margin: 0;
}
.newsLetter {
  background-color: rgb(32, 11, 58);
  width: 406px;
  height: 57px;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.newsLetter input {
  height: 100%;
  background-color: transparent;
  border: 0;
  flex: 1;
  padding-left: 40px;

  font-size: 11px;
  font-family: "Unbounded";
  color: rgb(84, 53, 125);
}
.newsLetter input:focus {
  outline: none;
}
.newsLetter input::placeholder {
  font-size: 11px;
  font-family: "Unbounded";
  color: rgb(84, 53, 125);
}
.newsLetter button {
  padding: 0 30px;
  height: 100%;
  border-radius: 30px;
  background-color: rgb(48, 18, 86);
  font-size: 13px;
  font-family: "Unbounded";
  color: var(--bg-color);
  border: 0;
}
.footerMain {
  padding: 100px 0;
}
.phoneIcon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary-gradiant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: var(--text-color-2);
}
.phoneDetails {
  font-family: "Unbounded";
  font-size: 12.5px;
  font-weight: normal;
  background: var(--primary-gradiant);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 15px;
}
.phoneDetails span {
  font-size: 15px;
  font-weight: bold;
  background: var(--bg-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footerMain .yoso-desc {
  color: var(--bg-color);
  width: 70%;
}
.footerLinks li {
  margin-top: 30px;
}
.footerLinks li a {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 8px;
  font-size: 15px;
  font-family: "Unbounded";
  color: var(--bg-color);
}
.footerLinks li a img {
  width: 8px;
  transition: var(--transition);
  transform: translateX(0);
  position: relative;
  z-index: 2;
}
.linkTxt {
  position: relative;
  display: inline-block;
}
.linkTxt .linkD {
  position: absolute;

  transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  left: 0;
}
.linkTxt .txtTop {
  top: 0;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  color: var(--bg-color);
}
.linkTxt .txtBottom {
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  color: var(--bg-color);
  bottom: 0;
}
.footerLinks li:hover a img {
  transform: translateX(200%);
  opacity: 0;
}
.footerLinks li:hover .linkTxt {
  color: transparent;
}
.footerLinks li:hover .linkTxt .txtTop {
  top: -3px;
}
.footerLinks li:hover .linkTxt .txtBottom {
  bottom: -3px;
}
.linkTxt::before {
  content: "";
  position: absolute;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%) skew(15deg);
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--primary-gradiant);
  transition: var(--transition);
}
.footerLinks li:hover .linkTxt::before {
  width: 90%;
  opacity: 1;
}
.copyright {
  width: 100%;
  min-height: 80px;
  background: var(--primary-gradiant);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.copyrightTxt {
  font-size: 13px;
  font-family: "Unbounded";
  font-weight: 500;
}
.socialIcon {
  font-size: 13px;
  font-family: "Unbounded";
  font-weight: 800;
  text-transform: uppercase;
}
.socialIcon i {
  margin-right: 8px;
  font-size: 15px;
}
.cursor {
  position: fixed;
  width: 30px;
  height: 30px;
  background: var(--primary-gradiant);
  border-radius: 50%;
  pointer-events: none;
  transition: 0.2s linear;
  /* transition: var(--transition); */
  z-index: 9999;
  opacity: 0.7;
}

.cursor.pointer-hover {
  transform: scale(2);
}
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background: var(--primary-gradiant);
  color: var(--text-color-2);
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  font-family: "Unbounded";
  z-index: 1000;
  transition: var(--transition);
}

.back-to-top.show {
  display: block;
}
/* Titolo hero */
.yoso-h1 {
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 70px;
  color: var(--heading-color);
  margin: 15px 0;
}
/* Form preliminare preventivo */
.preventivo-form {
  background-color: var(--secondary-color);
  border-radius: 30px;
  padding: 35px 30px;
}

.preventivo-form .form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.preventivo-form .form-row.form-row-title {
  grid-template-columns: 1fr;
  margin-top: 10px;
}

.preventivo-form .form-row.form-row-title span {
  font-family: "Unbounded";
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-color);
}

.preventivo-form .form-group {
  display: flex;
  flex-direction: column;
}

.preventivo-form label {
  font-family: "Unbounded";
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-color-2);
  margin-bottom: 6px;
}

.preventivo-form input,
.preventivo-form select,
.preventivo-form textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid #dde4ef;
  padding: 10px 12px;
  font-size: 15px;
  font-family: "Urbanist";
  background-color: #ffffff;
  color: var(--text-color-3);
}

.preventivo-form input:focus,
.preventivo-form select:focus,
.preventivo-form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px rgba(0, 229, 134, 0.4);
}

.preventivo-form textarea {
  resize: vertical;
  min-height: 120px;
}

.preventivo-form .form-check-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-family: "Urbanist";
  color: var(--text-color);
}

.preventivo-form .form-check-group input {
  width: auto;
  margin-right: 6px;
  border-radius: 4px;
}

.preventivo-form .form-group-privacy {
  margin-top: 5px;
}

.preventivo-form .privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-family: "Urbanist";
  color: var(--text-color-2);
}

.preventivo-form .privacy-label input {
  margin-top: 3px;
}

/* Responsive form */
@media (max-width: 991.98px) {
  .preventivo-form {
    padding: 25px 20px;
  }

  .preventivo-form .form-row {
    grid-template-columns: 1fr;
  }
}
/* Form preliminare preventivo */
.preventivo-form {
  background-color: var(--secondary-color);
  border-radius: 30px;
  padding: 32px 30px 26px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.preventivo-note {
  font-size: 13px;
  font-family: "Urbanist";
  color: var(--text-color);
  margin-bottom: 12px;
}

.preventivo-form .form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.preventivo-form .form-row.form-row-title {
  grid-template-columns: 1fr;
  margin-top: 20px;
  margin-bottom: 6px;
}

.preventivo-form .form-row.form-row-title span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background-color: #e3f4d5;
  font-family: "Unbounded";
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-color-2);
}

.preventivo-form .form-group {
  display: flex;
  flex-direction: column;
}

.preventivo-form label {
  font-family: "Unbounded";
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-color-2);
  margin-bottom: 6px;
}

.field-hint {
  margin-top: 4px;
  font-size: 11px;
  font-family: "Urbanist";
  color: var(--text-color);
}

.preventivo-form input,
.preventivo-form select,
.preventivo-form textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid #dde4ef;
  padding: 10px 12px;
  font-size: 15px;
  font-family: "Urbanist";
  background-color: #ffffff;
  color: var(--text-color-3);
}

.preventivo-form input:focus,
.preventivo-form select:focus,
.preventivo-form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px rgba(0, 229, 134, 0.35);
}

.preventivo-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* checkbox in due colonne su desktop */
.preventivo-form .form-check-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 6px;
  font-size: 14px;
  font-family: "Urbanist";
  color: var(--text-color);
}

.preventivo-form .form-check-group label {
  text-transform: none;
  letter-spacing: 0;
  font-family: "Urbanist";
}

.preventivo-form .form-check-group input {
  width: auto;
  margin-right: 6px;
  border-radius: 4px;
}

.preventivo-form .privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-family: "Urbanist";
  color: var(--text-color-2);
  white-space: nowrap;        /* tutto su una riga */
}


.preventivo-form .privacy-label input {
  margin-top: 3px;
}

/* elenco step a sinistra */
.preventivo-steps {
  list-style: none;
  padding-left: 0;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: "Urbanist";
  font-size: 14px;
  color: var(--text-color-2);
}

.preventivo-steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-gradiant);
  font-size: 12px;
  font-weight: 700;
  margin-right: 8px;
}

/* Responsive */
@media (max-width: 991.98px) {
  .preventivo-form {
    padding: 24px 18px;
  }

  .preventivo-form .form-row {
    grid-template-columns: 1fr;
  }

  .preventivo-form .form-check-group {
    grid-template-columns: 1fr;
  }
}
/* Sezione confronto condominio */
.comparison-section {
  background-color: var(--bg-color);
}

/* riuso struttura serviceSingle */
.comparisonCard {
  margin-top: 40px;
}

.comparisonCard--bad {
  background-color: #fff4f2;
}

.comparisonCard--bad .serviceIcon {
  background-color: #ffe1dd;
}

.comparisonCard--good {
  background-color: var(--secondary-color);
}

.comparisonCard--good .serviceIcon {
  background-color: var(--bg-color);
}

/* liste dentro le card */
.comparison-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  color: var(--text-color-2);
  margin-top: 8px;
}

.comparison-list li i {
  margin-top: 3px;
  font-size: 14px;
}

.comparison-list--bad li i {
  color: #e75b5b;
}

.comparison-list--good li i {
  color: #09be7b;
}

/* mobile */
@media (max-width: 991.98px) {
  .comparisonCard {
    margin-top: 20px;
  }
}
/* Sezione "Lo stile con cui amministriamo" */
.yoso-style-box {
  background-color: var(--bg-color);
}

.style-card {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  padding: 45px 50px;
  background: linear-gradient(135deg, #f0f9e7 0%, #e4f7ff 100%);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.style-card::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 0%, rgba(0, 229, 134, 0.35), transparent 60%);
  top: -80px;
  left: -40px;
  pointer-events: none;
}

.style-card::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 100%, rgba(100, 221, 23, 0.25), transparent 60%);
  bottom: -120px;
  right: -40px;
  pointer-events: none;
}

.style-kicker {
  font-family: "Unbounded";
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-color);
  margin-bottom: 8px;
}

.style-title {
  margin-bottom: 10px;
}

.style-subtitle {
  font-size: 18px;
  color: var(--text-color-2);
}

.style-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.style-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 22px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
}

.style-point .yoso-h4 {
  margin: 0 0 6px 0;
}

.style-point .yoso-desc {
  font-size: 14px;
  padding: 0;
  margin: 0;
}

.style-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--primary-gradiant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Unbounded";
  font-weight: 700;
  font-size: 14px;
  color: var(--text-color-2);
}

/* Responsive */
@media (max-width: 991.98px) {
  .style-card {
    padding: 30px 24px;
  }
}
/* Sezione "La nostra storia" */
.storia-section {
  background-color: #f5f6f7;
}

/* griglia immagini */
.storia-gallery {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-auto-rows: 150px;
  gap: 18px;
}

.storia-item {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background-color: #dde4ef;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.09);
}

.storia-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 0.5s ease-out;
}

.storia-item:hover img {
  transform: scale(1.08);
}

/* una grande, una alta */
.storia-item--large {
  grid-row: span 2;
}

.storia-item--tall {
  grid-row: span 2;
}

/* responsive */
@media (max-width: 991.98px) {
  .storia-gallery {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 130px;
  }

  .storia-item--large,
  .storia-item--tall {
    grid-row: span 1;
  }
}

@media (max-width: 575.98px) {
  .storia-gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 170px;
  }
}
.footerBrand {
  display: block;
  width: 280px;
  height: auto;
}

/* Sezione contatti */
.contact-section {
  background-color: var(--bg-color);
}

/* bottoni più compatti */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.contact-actions .yoso-button {
  width: auto;
  padding-inline: 26px;
}

/* secondo bottone stile outline chiaro */
.contact-actions .contact-secondary {
  background: #ffffff;
  color: var(--text-color);
  border: 1px solid var(--primary-color);
}

/* card contatti */
.contact-card {
  background-color: #ffffff;
  border-radius: 26px;
  padding: 24px 26px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.contact-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-family: "Urbanist";
  color: var(--text-color-2);
  border-bottom: 1px solid #eef1f5;
  padding-bottom: 6px;
}

.contact-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.contact-label i {
  font-size: 14px;
  color: var(--primary-color);
}

.contact-list a {
  color: var(--text-color-2);
  text-decoration: none;
}

.contact-list a:hover {
  text-decoration: underline;
}

.contact-card .contact-note {
  font-size: 13px;
  margin-top: 14px;
}

/* mobile */
@media (max-width: 575.98px) {
  .contact-list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-actions .yoso-button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}




/* Testimonials in stile "awards" scuro */
.yoso-testimonials.yoso-awards {
  background: #020617;
}

.yoso-testimonials .yoso-desc.headingLight,
.yoso-testimonials .clientName.headingLight {
  color: #e5f0ff;
}

.yoso-testimonials .stars i {
  color: #22c55e;
}

.yoso-testimonials .testimonialImg {
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

.yoso-testimonials .testimonialsThumb img {
  border-radius: 18px;
  border: 2px solid transparent;
  opacity: 0.7;
}

.yoso-testimonials .testimonialsThumb .swiper-slide-thumb-active img {
  border-color: #22c55e;
  opacity: 1;
}



/* Card "Condominio stressato" tutta in rosso, anche in hover */
.comparisonCard--bad {
  background-color: #ffece7;
}

.comparisonCard--bad::before {
  background: linear-gradient(90deg, #f28b82 0%, #f6a5a6 100%);
}

/* Icona e anello */
.comparisonCard--bad .serviceIcon {
  background-color: #ffe1dd;
  border-color: #ffe1dd;
  color: #d64545;
}

.comparisonCard--bad .serviceIcon::after {
  border-color: #f28b82;
}



/* Override dimensione logo in navbar senza alterare il layout */
header .logo img{
  height: 60px;
  width: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 575.98px){
  header .logo img{
    height: 40px;
  }
}

/* ============================
   GIESSE custom: Europa Grotesk SH + link styles
   ============================ */

/* Europa Grotesk SH (bold) in assets/fonts */
@font-face {
  font-family: 'EuropaGroteskSH';
  src: url('../../fonts/europa-grotesk-sh-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Titoli principali */
h1,
h2,
h3,
h4,
.yoso-h1,
.yoso-h2,
.yoso-h3,
.yoso-h4 {
  font-family: 'EuropaGroteskSH', "Urbanist", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Navbar desktop + mobile */
.mainMenu,
.mainMenu li,
.mainMenu a,
.mainMenu .menuText,
.mainMenu .menuTextInner,
.desktopMenu.mainMenu,
.desktopMenu.mainMenu li,
.desktopMenu.mainMenu a,
.desktopMenu.mainMenu .menuText,
.desktopMenu.mainMenu .menuTextInner {
  font-family: 'EuropaGroteskSH', "Urbanist", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Peso leggermente più leggero rispetto all'800 originale */
.mainMenu li {
  font-weight: 600;
}

/* Topbar: lasciamo Urbanist per leggibilità */
.topBar,
.topBar .discount,
.topBar ul li {
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-weight: 600;
}

/* Link: niente blu di default, footer link chiari */
a {
  text-decoration: none;
  color: inherit;
}

a:hover,
a:focus {
  color: inherit;
  text-decoration: underline;
}

footer a {
  color: var(--bg-color);
}

footer a:hover,
footer a:focus {
  color: var(--bg-color);
  opacity: 0.85;
}

/* =======================
   GIESSE – Footer restyle (final)
   ======================= */
.yoso-footer {
  background: #151519;
}

.footerHeader {
  border-bottom-color: #26262b;
}

.phoneDetails {
  font-family: 'EuropaGroteskSH', "Urbanist", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 500;
  background: none;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
  margin-left: 12px;
}

.phoneDetails span {
  font-size: 14px;
  font-weight: 700;
  background: none;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
}

.footerMain .yoso-desc {
  color: #f3f3f3;
  width: 80%;
}

/* colonne di destra */
.footerLinks li a,
.footerLinks li a .linkTxt,
.footerLinks li a .txtTop,
.footerLinks li a .txtBottom {
  font-family: 'EuropaGroteskSH', "Urbanist", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #ffffff;
}

.footerLinks li {
  margin-top: 18px;
}

.footerLinks li a .txtTop {
  font-size: 13px;
  font-weight: 600;
}

.footerLinks li a .txtBottom {
  font-size: 12px;
  opacity: 0.8;
}

/* copyright bar */
.copyright {
  background: #111214;
}

/* Puntatori elenco footer in verde #beddc5, senza PNG */
.footerLinks li img {
  display: none;
}

.footerLinks li a::before {
  content: "›";
  display: inline-block;
  margin-right: 8px;
  font-size: 13px;
  color: #beddc5;
}

/* =======================
   GIESSE custom: spaziatura sezioni + tagline
   ======================= */

.yoso-padding {
  padding: 60px 0;
}

.yoso-margin {
  margin: 60px 0;
}

/* Tagline (micro-titoli con la stellina) in Europa + spaziatura più ampia */
.tagline p {
  font-family: 'EuropaGroteskSH', "Urbanist", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-color);
}

/* =======================
   GIESSE – Footer clean redesign
   ======================= */

.yoso-footer {
  background-color: #151519;
  color: #f5f5f5;
  padding: 60px 0;
}

.yoso-footer .footerBrand {
  max-width: 220px;
  height: auto;
}

.yoso-footer .footer-payoff {
  margin-top: 1.5rem;
  font-size: 14px;
  line-height: 1.6;
  color: #f3f3f3;
}

.yoso-footer .footer-contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.6rem;
  font-size: 14px;
  color: #f5f5f5;
}

.yoso-footer .footer-contact-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  opacity: 0.9;
  min-width: 70px;
}

.yoso-footer .footer-contact-main {
  font-weight: 600;
  color: #ffffff;
}

.yoso-footer .footer-contact-main:hover {
  color: #beddc5;
}

.yoso-footer .footerSocialIcons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #f5f5f5;
  font-size: 13px;
  margin-right: 6px;
  color: #f5f5f5;
}

.yoso-footer .footerSocialIcons a:hover {
  border-color: #beddc5;
  color: #beddc5;
}

/* Footer headings & links */
.footerNavTitle {
  font-family: 'EuropaGroteskSH', "Urbanist", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
}

.yoso-footer .footerLinks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yoso-footer .footerLinks li + li {
  margin-top: 0.45rem;
}

.yoso-footer .footerLinks a {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  color: #f3f3f3;
  text-decoration: none;
}

.yoso-footer .footerLinks a::before {
  content: "›";
  position: relative;
  display: inline-block;
  margin-right: 8px;
  color: #beddc5;
}

.yoso-footer .footerLinks a:hover {
  color: #beddc5;
}

/* Reset vecchi effetti testo spezzato nel footer */
.yoso-footer .linkTxt,
.yoso-footer .linkD,
.yoso-footer .txtTop,
.yoso-footer .txtBottom {
  all: unset;
}

/* Copyright strip */
.copyright {
  background-color: #111214;
  border-top: 1px solid #26262b;
}

.copyrightTxt {
  color: #9a9a9f;
  font-size: 12px;
}

/* Tagline micro-titoli */
.tagline p {
  font-family: 'EuropaGroteskSH', "Urbanist", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-color);
}

/* Spaziatura sezioni generiche */
.yoso-padding {
  padding: 60px 0;
}

.yoso-margin {
  margin: 60px 0;
}

/* =======================
   GIESSE – Disattiva animazioni testo + cursore custom
   ======================= */

/* Nessuna animazione di testo (line animation) */
.lineAnimation,
.menuTextInner,
.linkTxt,
.txtTop,
.txtBottom,
.duplicateText {
  animation: none !important;
  transform: none !important;
}

/* Nascondi elementi duplicati che creavano testi sovrapposti */
.duplicateText,
.txtTop,
.txtBottom,
.linkD {
  display: none !important;
}

/* Footer: assicurati che i link siano stabili e leggibili */
.yoso-footer .footerLinks a {
  position: static !important;
}

/* Disabilita cursore con pallino */
.mouseCursor,
.cursor-inner,
.cursor-outer {
  display: none !important;
}

/* Usa il cursore standard del browser ovunque */
html,
body {
  cursor: auto !important;
}

/* =======================
   GIESSE – Hover verde + cursore standard
   ======================= */

/* Testo al passaggio del mouse in verde #beddc5 */
.mainMenu li a:hover,
.mainMenu li a:focus,
.topBar ul li:hover,
.topBar ul li:focus,
a:hover,
a:focus {
  color: #beddc5 !important;
}

/* Nascondi definitivamente il cursore personalizzato (pallino) */
.cursor,
.cursor.pointer-hover {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Usa il cursore standard del browser */
html,
body,
* {
  cursor: auto !important;
}
/* Hover unificato in verde #beddc5 */
.mainMenu li a,
.yoso-footer .footerLinks a,
.topBar ul li,
.topBar ul li a {
  transition: color 0.25s ease;
}

.mainMenu li a:hover,
.mainMenu li a:focus,
.yoso-footer .footerLinks a:hover,
.yoso-footer .footerLinks a:focus,
.topBar ul li:hover,
.topBar ul li:focus,
.topBar ul li a:hover,
.topBar ul li a:focus {
  color: #beddc5 !important;
  text-decoration: none;
}
/* NAVBAR: forza hover verde su testo reale (.menuTextInner) */
.mainMenu li a .menuTextInner {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
}

/* Hover: testo verde #beddc5 */
.mainMenu li:hover a .menuTextInner,
.mainMenu li a:hover .menuTextInner,
.mainMenu li:focus-within a .menuTextInner {
  color: #beddc5 !important;
  -webkit-text-fill-color: #beddc5 !important;
  background: none !important;
}
/* Footer: elenchi più grandi e leggibili */
.yoso-footer .footerLinks a {
  font-size: 18px;      /* prima era ~13px */
  line-height: 1.7;     /* più aria tra le righe */
}
/* Sezione "Dicono di noi" con sfondo come il footer */
.yoso-testimonials {
  background-image: none !important;
  background-color: #151519 !important; /* stesso grigio del footer */
}
/* Navbar: centra verticalmente logo + menu nell'area bianca */
header nav .yoso-menu {
  margin-top: -10px;   /* alza tutto il blocco; regola il valore se serve */
}
/* =======================
   Mobile tuning (max 768px)
   ======================= */
@media (max-width: 768px) {
  /* 1. Spaziatura tra le sezioni più compatta */
  .yoso-padding {
    padding: 32px 0;   /* prima 60px */
  }

  .yoso-margin {
    margin: 32px 0;    /* prima 60px */
  }

  /* Se la prima sezione sotto l'hero avesse troppo spazio sopra */
  main > section:first-of-type.yoso-padding {
    padding-top: 24px;
  }

  /* 2. Sottotitoli / tagline più leggibili */

  /* tagline in alto alle sezioni (es. "LO STILE CON CUI AMMINISTRIAMO") */
  .tagline p {
    font-size: 13px;           /* leggermente più grande */
    letter-spacing: 0.14em;    /* più spazio fra i caratteri */
    line-height: 1.6;
    color: #444444;            /* un po' più scuro per più contrasto */
  }

  /* testi descrittivi piccoli sotto i titoli (es. frasi in grigio) */
  .yoso-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #333333;
  }
}
/* =======================
   Mobile spacing + sottotitoli
   ======================= */
@media (max-width: 768px) {

  /* Spaziatura verticale più compatta tra le sezioni */
  main > section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* La prima sezione subito sotto l'hero ancora un po' più vicina */
  main > section:first-of-type {
    padding-top: 16px !important;
  }
}
@media (max-width: 768px) {

  /* ... (regole di spacing qui sopra) ... */

  /* Sottotitoli nelle card (es. "Ascolto one-to-one", "Dialogo continuo") */
  h3,
  h4 {
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 1.5;
  }
}
/* =======================
   Mobile – sottotitoli + spazi
   ======================= */
@media (max-width: 768px) {

  /* Sottotitoli nelle card (es. "Ascolto one-to-one", "Dialogo continuo",
     "Trasformo frustrazione e conflitti in serenità e armonia") */
  h4.yoso-h4,
  h3.yoso-h4,
  h3.yoso-h4.style-subtitle {
    font-size: 14px !important;      /* da 12px a 14px */
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
  }
}
/* Mobile: "Dicono di noi" solo testo, senza immagini */
@media (max-width: 768px) {

  /* Nasconde l'ultima colonna della riga principale dei testimonials,
     che contiene foto e virgolette */
  .yoso-testimonials .row > [class*="col-"]:last-child {
    display: none !important;
  }

  /* Lascia il blocco testimonianza con altezza naturale */
  .yoso-testimonials .testimonials,
  .yoso-testimonials .testimonials .swiper,
  .yoso-testimonials .testimonials .swiper-wrapper,
  .yoso-testimonials .testimonials .swiper-slide {
    height: auto !important;
  }
}
/* Logo grande in navbar desktop */
.yoso-nav .logo img {
  height: 90px;         /* stessa altezza che avevi scelto */
  max-height: none;
}

/* Leggermente più piccolo su mobile, per non rubare troppo spazio */
@media (max-width: 991.98px) {
  .yoso-nav .logo img {
    height: 70px;
  }
}
/* ===== Logo GIESSE – dimensioni definitive ===== */






/* ===== Footer – centratura colonne navigazione / contatti (desktop) ===== */

@media (min-width: 992px) {
  /* Row principale del footer */
  .yoso-footer .footerMain .row.flex-wrap {
    justify-content: center;
    column-gap: 80px;      /* spazio orizzontale tra blocco logo e blocco link */
  }

  /* Colonna che contiene Navigazione + Contatti rapidi */
  .yoso-footer .footerMain .row.flex-wrap > .col-lg-6.col-xl-5 {
    max-width: 520px;      /* per non schiacciarsi troppo verso sinistra/destra */
  }
}
/* =======================
   LOGO HEADER DESKTOP
   ======================= */

/* primo header (barra principale) */
.yoso-nav .logo img {
  width: auto !important;   /* annulla il vecchio width:35px */
  height: 90px;             /* regola se vuoi più grande/piccolo */
  display: block;
  object-fit: contain;
}

/* dimensione un po' più contenuta su tablet/mobile */
@media (max-width: 991.98px) {
  .yoso-nav .logo img {
    height: 60px;
  }
}

/* togli il logo dalla barra sticky (secondo header) */
.yoso-menu.sticky .logo {
  display: none;
}
/* =======================
   FOOTER – POSIZIONE COLONNE
   ======================= */

@media (min-width: 992px) {
  /* riga principale del footer */
  .yoso-footer .footerMain > .row {
    justify-content: flex-start;  /* niente centraggio forzato */
  }

  /* colonna destra (Navigazione + Contatti rapidi) */
  .yoso-footer .footerMain > .row > .col-md-7 {
    margin-left: 100px;            /* sposta tutto il blocco verso destra */
  }
}
/* =======================
   FOOTER – HOVER VERDE
   ======================= */

/* disattiva l'effetto "split" e usa solo il colore verde */
.footerLinks li:hover .linkTxt,
.footerLinks li:hover .linkTxt .txtTop,
.footerLinks li:hover .linkTxt .txtBottom {
  color: #beddc5;   /* stesso verde chiaro che usi altrove */
  top: 0;
  bottom: 0;
}

/* mantieni la freccia visibile (niente translate/opacity) */
.footerLinks li:hover a img {
  transform: none;
  opacity: 1;
}

/* fallback nel caso qualche link non abbia .linkTxt */
.footerLinks a:hover,
.yoso-footer .footerLinks a:focus {
  color: #beddc5 !important;
  text-decoration: none;
}
/* =======================
   Disattiva hover in topBar
   ======================= */

.topBar ul li,
.topBar ul li a {
  color: var(--text-color-2);
}

/* Nessun cambio di colore / stile al passaggio del mouse */
.topBar ul li:hover,
.topBar ul li:focus,
.topBar ul li a:hover,
.topBar ul li a:focus {
  color: var(--text-color-2) !important;
  text-decoration: none !important;
}
/* =======================
   Cursore per topbar e menu
   ======================= */

/* Link e voci cliccabili della topbar */
.topBar a,
.topBar li {
  cursor: pointer !important;
}

/* Link e voci cliccabili del menu principale */
.yoso-nav .mainMenu li,
.yoso-nav .mainMenu li a {
  cursor: pointer !important;
}

/* Icona search / altri eventuali trigger in header */
.yoso-nav [role="button"],
.yoso-nav .searchTrigger,
.yoso-nav .navSearchBtn {
  cursor: pointer !important;
}
/* =======================
   Cursore per elementi cliccabili
   ======================= */

/* Tutti i link (e il loro contenuto) */
a,
a * {
  cursor: pointer !important;
}

/* Tutti i button (e il loro contenuto) */
button,
button * {
  cursor: pointer !important;
}

/* Elementi marcati con role="button" (es. icone, trigger vari) */
[role="button"],
[role="button"] * {
  cursor: pointer !important;
}

/* Input "button" e "submit" */
input[type="button"],
input[type="submit"] {
  cursor: pointer !important;
}