@charset "UTF-8";
/* CSS Document */

:root {
	--arancio: #E37A3F;
	--rosso: #C2443E; /* #E4514A;*/
	--corallo: #A83B4E; /*#C7475E;*/
	--blu: #5D5FA6;
	--azzurro: #5C7FAD;
	--verde: #447965; /*#61A98D*/
	--verde-chiaro: #9ABD76;
	--grigio: #6C6C6C;
	--bs-btn-color: var(--grigio);
	--bs-font-sans-serif: arboria, sans-serif;
}

::selection {
    background: var(--verde-chiaro);
    color: var(--bs-white);
}
.row {
    margin-bottom: 20px!important;
}

.top-banner-vet {
    background-color: rgba(154,189,118,0.44);
    padding: 10px 20px;
	 display: flex;
	  justify-content: flex-end; /* 👈 spinge tutto a destra */
}

.top-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.top-banner-text {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.top-banner-btn {
    margin-left: auto; /* 👈 questo lo spinge tutto a destra */
    background-color: #ffffff;
    color: #2e7d32;
    padding: 8px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s ease;
}

.top-banner-btn:hover {
    background-color: #e8f5e9;
    transform: translateY(-1px);
}


.banner-luogo {text-align: center;
background-color:  rgba(154,189,118,0.44);padding: 40px; }

.top-urgent-bar {
  position: sticky;
  top: 0;
  z-index: 9999;

  width: 100%;
  background: var(--bs-primary);     /* colore brand */
  color: #fff;

  text-align: center;
  font-size: 20px;
  padding: 9px 15px;
  font-weight: 500;
  letter-spacing: 0.2px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.top-urgent-bar i {
  font-size: 16px;
}

.top-urgent-bar a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

.top-urgent-bar a:hover {
  opacity: 0.9;
}

@media (max-width: 576px) {
  .top-urgent-bar {
    font-size: 11px;
    padding: 9px;
  }
}


/************ color *************/
.btn-white {
  background-color: #ffffff;
  color: #6c757d;
  border: 1px solid #dee2e6;
}

.btn-white:hover {
  background-color: #5C7FAD!important;
  color: #6c757d;
}
.text-grigio{
	color: var(--grigio);
}

.text-arancio, a.text-arancio{
	color:var(--arancio);
}

.arancio-20{
	background-color: #F8E3D7;
}

.bg-arancio{
	background-color: var(--arancio);
}

.text-rosso, a.text-rosso{
	color: var(--rosso);
}

.rosso-20{
	background-color: #F7CAC8;
}

.rosso-20 .text-corallo{
	color: #822C3B;
}

.text-corallo, a.text-corallo{
	color: var(--corallo);
}

.corallo-20{
	background-color: #EEC6CE;
}

.corallo-20 .text-corallo{
	color:#903142;
}

.text-blu, a.text-blu{
	color: var(--blu);
}

.bg-blu{
	background-color: var(--blu);
}

.text-azzurro, a.text-azzurro{
	color:var(--azzurro);
}

.bg-azzurro{
	background-color: var(--azzurro);
}

.text-verde, a.text-verde{
	color: var(--verde);
}

.bg-verde{
	background-color: var(--verde);
}

.verde-20{
	background-color: #DFEEE8;
}

.text-verde-chiaro{
	color: var(--verde-chiaro);
}

.bg-verde-chiaro{
	background-color: var(--verde-chiaro);
}

ul.text-white li{
	color: white;
}


/************* tipografia ****************/
h1, h2, h3, h4, h5, h6{
	font-family: dm-serif-display, sans-serif;
	font-weight: 400;
	font-style: normal;
}

h1{
	font-size: 2.5rem;
	line-height: 2.5rem;
}

h2{
	font-size: 2rem;
	line-height: 2rem;
}

h3{
	line-height: 1.2;
}

h4{
	
	font-size: 1.1rem;
}

h5{
	font-weight: 200 !important;
	font-size: 1rem;
	line-height: 1;
}

p, ul, ul li{
	font-family: arboria, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1rem;
	color: var(--grigio);
}

.text-copy, .text-copy a{
	font-size: 12px;
}

.nav-link, .dropdown-item{
	font-size: 1rem;
	font-weight: 400;
}

.text-decoration-underline{
	text-underline-offset: 4px;
}

.card-body{
	line-height: 1.5;
}

/************* angoli stondati *****************/
.sezione-tonda{
	border-radius: 21rem 0 0 0;
}

.sezione-tonda img{
	border-radius: 5rem 0 0 0;
}

.card-tonda{
	border-radius: 5rem 0 0 0;
}

.card-tonda .card-body{
	padding: 2.5rem;
}

.card-tonda.gradient-verde img{
	border-radius: 5rem 0 0 0;
}

.btn-rounded{
	border-radius: 2rem 0 0 0;
}

/******* gradienti *********/
.gradient-rosa {
	background-image: linear-gradient(90deg,rgba(227, 122, 63, 1) 0%, rgba(229, 81, 75, 1) 33%, rgba(148, 53, 113, 1) 70%, rgba(93, 95, 166, 1) 100%);
}

.gradient-verde{
	background-image: linear-gradient(90deg,rgba(92, 127, 173, 1) 0%, rgba(97, 169, 141, 1) 54%, rgba(154, 189, 118, 1) 100%);
}

.gradient-verde-vert{
	background-image: linear-gradient(180deg,rgba(92, 127, 173, 1) 0%, rgba(97, 169, 141, 1) 54%, rgba(154, 189, 118, 1) 100%);	
}

.gradient-blu{
	background-image: linear-gradient(90deg,rgba(93, 95, 166, 1) 0%, rgba(92, 127, 173, 1) 100%);
}

.gradient-blu-vert{
	background-image: linear-gradient(180deg,rgba(93, 95, 166, 1) 0%, rgba(92, 127, 173, 1) 100%);
}

.gradient-rosa.btn-outline-gradient, .gradient-rosa.btn-outline-gradient span {
	background-image: linear-gradient(rgba(var(--bs-white-rgb), 0), rgba(var(--bs-white-rgb), 0)), linear-gradient(90deg,rgba(227, 122, 63, 1) 0%, rgba(229, 81, 75, 1) 33%, rgba(148, 53, 113, 1) 70%, rgba(93, 95, 166, 1) 100%);
}

.gradient-verde.btn-outline-gradient, .gradient-verde.btn-outline-gradient span {
	background-image: linear-gradient(rgba(var(--bs-white-rgb), 0), rgba(var(--bs-white-rgb), 0)), linear-gradient(90deg,rgba(92, 127, 173, 1) 0%, rgba(97, 169, 141, 1) 54%, rgba(154, 189, 118, 1) 100%);
}

.gradient-text {
  font-size: 1rem;
  background: linear-gradient(90deg,rgba(227, 122, 63, 1) 0%, rgba(229, 81, 75, 1) 33%, rgba(148, 53, 113, 1) 70%, rgba(93, 95, 166, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



/************** buttons ****************/
.btn:hover{
	color: white;
}

.btn{
	
	font-family: "arboria", sans-serif;
	font-size: 1rem;
	font-weight: 400;
}

/************** index *****************/
#recensioni.image-wrapper {
  position: relative;
  background-image: url('./assets/img/ciaobao-cane-bn.jpg');
  background-size: cover;
  background-position: center;
}

#vethome{
	    background: #DFEEE7;
    background: linear-gradient(180deg, rgba(223, 238, 231, 1) 70%, rgba(255, 255, 255, 0) 90%);
}

/* overlay bianco semi-trasparente */
#recensioni.image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7); /* bianco con 40% di opacità */
  z-index: 1;
}

/* assicura che i contenuti restino sopra */
#recensioni.image-wrapper > * {
  position: relative;
  z-index: 2;
}

/************** chi siamo ************/

.pricing.card p{
	line-height: 1.3;
}

/*********** privati +*******/
#result{
	font-size: 1rem;
	margin-top: 50px;
}

/******** hero sections ***********/
#hero-index{
	background-image: linear-gradient(90deg,rgba(190, 210, 232, 0.5) 0%, rgba(92, 127, 173, 0) 100%), url('../img/silhouette-big-dog.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding-top: 200px;
	height: 70vh;
}

#hero-index h1{
	font-size: 3rem;
	line-height: 3rem;
}

.hero{
	padding-top: 150px;
}

.hero figure img {
	margin-top: 80px;
}

#hero-chisiamo{
	background-image: url("../img/bg-chi-siamo.jpg");
	background-repeat: no-repeat;
    background-size: cover;
	background-position: bottom;
}

#hero-crem{
	background-image: url("../img/ciaobao-gruppo-cani.jpg");
	background-repeat: no-repeat;
    background-size: cover;
	background-position: bottom;
}

#hero-privati{
	background-image: url("../img/ciaobao-bg-privati.jpg");
	background-repeat: no-repeat;
    background-size: cover;
	background-position: bottom;
}

#hero-contatti{
	background-image: url("../img/ciaobao_contatti_bg.jpg");
	background-repeat: no-repeat;
    background-size: cover;
	background-position: bottom;
}

#hero-vet{
	background-image: url("../img/bg_ciaobao_vet.jpg");
	background-repeat: no-repeat;
    background-size: cover;
	background-position: bottom;
}

#hero-sedi{
	background-image: url("../img/bg_ciaobao_sedi.jpg");
	background-repeat: no-repeat;
    background-size: cover;
	background-position: bottom;
}

#hero-urne{
	background-image: url("../img/bg-ciaobao-urne.jpg");
	background-repeat: no-repeat;
    background-size: cover;
	background-position: bottom;
}


/************** bgs ******************/
.bg-pattern{
	background: url("../img/bg-pattern.jpg");
	background-size: cover;
}


/************** header **************/

section header.image-wrapper:not(.mobile) {
	background-attachment: scroll !important;
}

section header.image-wrapper, section .navbar {
	z-index: 2 !important;
}

section .navbar .hamburger, section .navbar [data-bs-toggle="offcanvas"], section .navbar .btn {
	pointer-events: none;
}

section .navbar .container {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

/* Stile per la voce attiva del menu */
.navbar-nav .nav-link.active,
.dropdown-menu .dropdown-item.active {
  font-weight: 600;
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(227, 122, 63, 1) 0%,
    rgba(229, 81, 75, 1) 33%,
    rgba(148, 53, 113, 1) 70%,
    rgba(93, 95, 166, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px; /* distanza dal testo */
}

/* Opzionale: effetto hover simile */
.navbar-nav .nav-link:hover,
.dropdown-menu .dropdown-item:hover {
  opacity: 0.85;
}



@media (min-width: 992px) {
	.navbar-collapse .navbar-nav>.nav-item>.nav-link {
		position: relative;
	}
	
	.navbar-collapse .navbar-nav>.nav-item+.nav-item>.nav-link:before {
		content: "";
        display: block;
        position: absolute;
        width: 3px;
        height: 3px;
        top: 50%;
        left: -2px;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 50%;
	}
}

/********* lista con icona ********/
.valori-lista, .lista2 {
  list-style: none; /* rimuove i punti standard */
  padding-left: 0;
}

.valori-lista li, .lista2 li {
  position: relative;
  padding-left: 40px; /* spazio per l’icona */
  margin-bottom: 12px;
}

.valori-lista li::before, .lista2 li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 24px;   
  height: 24px;  
  background-size: contain;
  background-repeat: no-repeat;
}

.valori-lista li::before{
	background-image: url("../img/icons/zampa_verde_bianca.svg");
}

.lista2 li::before{
	background-image: url("../img/icons/zampa_bianca.svg");
}

/************** footer **************/
.mt-n60p {
    transform: translateY(-60%);
}

  .progress-wrap.active-progress {
    opacity: 1;
  }


/************* accessibilità ***************/
.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip:focus {
  position: static;
  width: auto;
  height: auto;
	border: 1px solid var(--blu);
	padding: 2px;
	border-radius: 5px;
}



/*************+ mobile ********/
@media only screen and (max-width:992px){
	#hero-index{
		padding-top: 20px;
		height: auto;
	}
	
	#hero-index h1 {
		font-size: 2rem;
		line-height: 2rem;
	}
	
	.sezione-tonda {
    border-radius: 9rem 0 0 0;
	}
	
	.hero {
		padding-top: 0px;
	}
	
	#hero-chisiamo, #hero-sedi, #hero-privati, #hero-vet, #hero-contatti {
		background-position: bottom left;
	}
	
	h1 {
		font-size: 2rem;
		line-height: 2.3rem;
	}
	
	.mt-n19 {
    margin-top: 0 !important;
	}
}