/***Start yostcss****/

/*** Schema costi yost ****/

/* Stili Generali per Contenuti */
        .yost-promo-body-content {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 20px auto; /* Centra il blocco principale */
            max-width: 1200px; /* Limita la larghezza del contenuto generale */
            padding: 0 15px; /* Padding sui lati per schermi piccoli */
        }

        .yost-promo-heading {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 25px;
            font-size: 2em; /* Dimensione aumentata per heading principale */
        }

        .yost-promo-subheading {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.5em;
        }

        .yost-promo-paragraph {
            margin-bottom: 15px;
            text-align: center;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Stili per la Tabella */
        .yost-promo-table-container {
            overflow-x: auto; /* Permette lo scroll orizzontale su schermi piccoli */
            margin: 30px auto;
            max-width: 1200px; /* Larghezza massima per la tabella */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Ombra leggera */
            border-radius: 8px;
            background-color: #fff; /* Sfondo bianco per la tabella */
        }

        .yost-promo-table {
            width: 100%;
            border-collapse: collapse; /* Elimina gli spazi tra i bordi delle celle */
            min-width: 700px; /* Assicura che la tabella non sia troppo stretta su schermi piccoli */
        }

        .yost-promo-table th, .yost-promo-table td {
            padding: 15px 12px;
            text-align: left;
            border-bottom: 1px solid #ddd; /* Separatore tra le righe */
        }

        /* Intestazioni della tabella */
        .yost-promo-table th {
            background-color: #4CAF50; /* Colore di sfondo verde vivace */
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.9em;
            letter-spacing: 0.05em;
            position: sticky; /* Rende l'intestazione fissa durante lo scroll orizzontale */
            left: 0;
            z-index: 10;
        }

        .yost-promo-table th:first-child {
             background-color: #34495e; /* Colore più scuro per la prima colonna */
             border-top-left-radius: 8px;
        }
         .yost-promo-table th:last-child {
             border-top-right-radius: 8px;
        }

        /* Celle di descrizione (prima colonna) */
        .yost-promo-table td:first-child {
            font-weight: bold;
            color: #2c3e50;
            background-color: #f2f2f2; /* Sfondo leggermente diverso per la prima colonna */
            position: sticky; /* Rende la prima colonna fissa durante lo scroll orizzontale */
            left: 0;
            z-index: 5;
        }

        /* Allineamento prezzi */
        .yost-promo-table-price-col {
            text-align: center; /* Centra i valori numerici dei prezzi */
            font-weight: bold;
            color: #007bff; /* Un blu per i prezzi */
        }

        /* Stili per le righe */
        .yost-promo-table tbody tr:nth-child(even) {
            background-color: #f8f8f8; /* Sfondo alternato per le righe */
        }

        .yost-promo-table tbody tr:hover {
            background-color: #eef; /* Effetto hover sulla riga */
        }

        /* Stili specifici per le note */
        .yost-promo-note {
            font-size: 0.85em;
            color: #666;
            text-align: left;
            padding: 10px 0;
            max-width: 1200px;
            margin: 20px auto;
        }

        /* Stili per il riepilogo esempi di costo */
        .yost-promo-cost-examples {
            margin: 40px auto;
            max-width: 1200px;
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            justify-content: center;
        }

        .yost-promo-cost-box {
            flex: 1;
            min-width: 300px;
            max-width: 45%; /* Per affiancare due box su desktop */
            background-color: #fff;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            text-align: center;
        }

        .yost-promo-cost-box h4 {
            color: #007bff;
            margin-bottom: 15px;
            font-size: 1.3em;
        }

        .yost-promo-cost-box ul {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: left;
            font-size: 0.95em;
        }

        .yost-promo-cost-box ul li {
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 5px;
            border-bottom: 1px dotted #eee;
        }
        .yost-promo-cost-box ul li:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }
        .yost-promo-cost-box .yost-promo-total-cost {
            font-size: 1.4em;
            font-weight: bold;
            color: #4CAF50;
            margin-top: 20px;
            text-align: center;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .yost-promo-table th, .yost-promo-table td {
                padding: 10px 8px;
                font-size: 0.85em;
            }
            .yost-promo-cost-box {
                max-width: 100%; /* Su schermi piccoli i box si espandono a tutta larghezza */
            }
        }
        
  
/*######################### Fine schema costi yost ############################## */
      

/*######################### Titoli amdweb-consulenze-matteoduso ############################## */

.title-red
{
	color:#dd3c14;
	
}
.title-blu 
{
	color:#4287ae;
	
}
.title-ax
{
	color:#00CED1;
	
}
/*######################### fine titoli amdweb-consulenze-matteoduso ############################## */

/* INizio nuovo cod css */
/* Sezione risparmi */
.savings-section {
    padding: 50px 0;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
}

/* Contenitore della sezione */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Titolo della sezione */
.savings-section h2 {
    text-align: center;
    color: #FF0000;
    font-size: 28px;
    font-weight: bold;
}

/* Paragrafo con descrizione */
.savings-section p {
    text-align: center;
    font-size: 16px;
    margin: 20px 0;
}

/* Stile per la tabella */
.table-wrapper {
    margin: 20px 0;
    overflow-x: auto;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #ddd;
}

/* Intestazioni della tabella */
.pricing-table th {
    background-color: #FF0000;
    color: white;
    padding: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Celle della tabella */
.pricing-table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

/* Evidenziazione delle celle con sconto */
.pricing-table td.highlight {
    background-color: #FFEB3B;
    font-weight: bold;
}

/* Righe alternate per leggibilità */
.pricing-table tr:nth-child(even) {
    background-color: #f1f1f1;
}

/* Righe normali */
.pricing-table tr:nth-child(odd) {
    background-color: #fff;
}

/* Nota in basso */
.note {
    text-align: center;
    font-size: 16px;
    margin-top: 20px;
}

/* Bottone per l'azione */
.btn-primary {
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 20px auto;
    padding: 15px;
    background-color: #fc4141;
    color: #fff !important;  /* Forza il bianco anche quando l'utente passa il mouse */
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
}
.btn-primary:hover {
    background-color: #B20000;
}
.btn-primary-green {
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 20px auto;
    padding: 15px;
    background-color: #a3c41b;
    color: #fff !important;  /* Forza il bianco anche quando l'utente passa il mouse */
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
}
.btn-primary-green:hover {
    background-color: #216d03;
}
.btn-primary-blu {
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 20px auto;
    padding: 15px;
    background-color: #4287ae;
    color: #fff !important;  /* Forza il bianco anche quando l'utente passa il mouse */
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
}

.btn-primary-blu:hover {
    background-color: #036089;
}


/* Stile base del bottone */
.cta-button {
    display: inline-block;
    padding: 16px 32px;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff !important;
    background-color: #ff0000;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60px auto;
    width: fit-content;
}

/* Effetto hover */
.cta-button:hover {
    background-color: #cc0000;
    color: #000000 !important;
    transform: scale(1.05);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Effetto click */
.cta-button:active {
    transform: scale(0.98);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}
/* Colonne lnl*/
       
            .pricing-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 colonne */
            gap: 20px;
            max-width: 1200px;
            margin: 50px auto;
            padding: 0 20px;
        }
        .plan {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .plan-title {
            font-size: 22px;
            font-weight: bold;
            color: #FF0000;
            margin-bottom: 10px;
        }
        .price {
            font-size: 24px;
            color: #FF0000;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .features {
            list-style: none;
            padding: 0;
            margin-bottom: 20px;
            text-align: left;
        }
        .features li {
            padding: 8px 0;
            border-bottom: 1px solid #ddd;
            position: relative;
        }
        .features li::before {
            content: '\2022';
            color: #FF0000!important;
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }
        .activation-cost {
            font-weight: bold;
            color: #FF0000;
            margin-bottom: 15px;
        }
        .btn {
            display: block;
            padding: 10px 15px;
            background: #FF0000;
            color: white !important;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            text-align: center;
        }
        .btn:hover {
            background: #B20000;
color: white !important;
        }

        /* Media Queries per tablet e mobile */
        @media (max-width: 1024px) {
            .pricing-container {
                grid-template-columns: repeat(2, 1fr); /* 2 colonne per tablet */
            }
        }

        @media (max-width: 768px) {
            .pricing-container {
                grid-template-columns: 1fr; /* 1 colonna per dispositivi mobili */
            }
        }
/* DUE colonne slogan SMTP */
/* Container principale */
.yost-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 40px 20px;
    background-color: #f9f9f9;
}

/* Colonne (orizzontali) */
.yost-column {
    width: 48%;  /* Le colonne saranno affiancate e occupano il 48% dello spazio ciascuna */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Stile titoli */
.yost-column h2 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 15px;
}

/* Prezzo */
.yost-price {
    font-size: 1.4rem;
    color: #e74c3c; /* Rosso brillante per il prezzo */
    font-weight: bold;
    margin-bottom: 20px;
    display: inline-block;
}

/* Stile testo */
.yost-column p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Link */
.yost-link {
    display: inline-block;
    font-size: 1.1rem;
    color: #fff !important;
    background-color: #fc4141;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.yost-link:hover {
    background-color: #c0392b;
    transform: translateY(-3px);
}

.yost-link:active {
    background-color: #9b2d21;
    transform: translateY(0);
}
.yost-title-2c-red {
    font-size: 1.8rem;
    color: #fc4141;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Adattamento mobile: colonna unica su schermi piccoli */
@media (max-width: 768px) {
    .yost-container {
        flex-direction: column;  /* Su schermi più piccoli le colonne diventano una sopra l'altra */
    }

    .yost-column {
        width: 100%;  /* Le colonne occupano tutto lo spazio disponibile */
    }
}


/* FINE DUE colonne slogan SMTP */
/* FINE nuovo cod css */

/*######################### Slogan dopo social ############################## */

.yost-slogan-page {
	background: #f2f2f2;
	
	margin-bottom: 20px;

	padding-top: 60px;
	padding-bottom: 60px;
}
.yost-slogan-page-text {
	text-align: center;
	font-size: 22px;
	margin-bottom: 20px;
}
.bg-yost-col-slogan {
	background-color: white;
  /***  CSS Box Model  ***/

  padding:5px;

  /***  CSS Borders  ***/
  border:1px solid rgb(153, 153, 152);

  /***  CSS Rounded Corners  ***/
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;

  /***  CSS Box Shadow  ***/
  box-shadow: 5px 5px 8px 0px rgba(230, 230, 229, 1.000) ;

  -webkit-box-shadow: 5px 5px 8px 0px rgba(230, 230, 229, 1.000) ;

  -moz-box-shadow: 5px 5px 8px 0px rgba(230, 230, 229, 1.000) ;
  text-align: center;
  font-style: italic;
}

.titolo-yost-slogan {
	color: #ffffff;
	font-size: 52px;
	font-weight: bold;
	font-style: italic;
	background-color: #f48e2c;
	padding: 15px;
}
.titolo-yost-slogan2 {
	color: #ffffff;
	font-size: 52px;
	font-weight: bold;
	font-style: italic;
	background-color: red;
	padding: 15px;
}
.titolo-yost-slogan3 {
	color: #ffffff;
	font-size: 52px;
	font-weight: bold;
	font-style: italic;
	background-color: #19bfef;
	padding: 15px;
}
.titolo-yost-slogan4 {
	color: #ffffff;
	font-size: 52px;
	font-weight: bold;
	font-style: italic;
	background-color: #a3c41b;
	padding: 15px;
}
/*######################### Fine Slogan dopo social ############################## */
.price-lnl {
  font-size: 40px;
  font-weight: 700;
  text-align: right;
  color: #fc4141;
}
.slogan-red {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  color: #fc4141;
  margin-top: 20px;
	margin-bottom: 20px;
}
.titolo-apice {
  font-size: 20px;
  font-weight: 700;
  color: #fc4141;
}
/***Start Schema BLW****/
.YV-name {
    color: #a3c41b;
}
.YV-name-ec {
    color: #4087ac;
}
.YV-name, .YV-name-ec {
    font-size: 24px;
    font-weight: 700;
    
    text-align: center;
}
.YV-title {
    font-style: italic;
    text-align: center;
}
.price-vt {
    color: #a3c51c;
}

.price-ec {
    color: #4187ad;
}
.YV-price {
    font-size: 20px;
    text-align: center;
    color: #000;
}

/***Fine Schema BLW****/


.yostright {
    float: right;
}

  .img-centre {
  	text-align: center;
  }
  .titolo-slogan {
  	text-align: center!important;
  	font-size: 18px;
  	font-weight: bold;
  	font-style: italic;
  	padding:30px 30px!important;
  }
.y3col-titolo, .y2col-titolo, .y4col-titolo {
	font-weight: bold;
	margin: 10px;
}
.box-shado {
    background: rgb(238, 238, 238);
    width: 200px;
    padding: 10px;
    box-shadow: 5px 5px 10px 2px #333333;
    -webkit-box-shadow: 5px 5px 10px 2px #333333;
    -moz-box-shadow: 5px 5px 10px 2px #333333;
}.duecol, .trecol, .quattrocol {
	display: -webkit-box;  
	display: -ms-flexbox;  
	display: -webkit-flex; 
	display: flex;
	justify-content: center;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
.duecol .ycol1 {
	width: 50%;
}
.duecol .ycol1 .col{
	margin: 0 15px 30px;
	padding: 0;
}
.trecol .ycol1 {
	width: 33.33%;
}
.trecol .ycol1 .col{
	margin: 0 10px 30px;
	padding: 0;
}
.quattrocol .ycol1 {
	width: 25%;
}
.quattrocol .ycol1 .col{
	margin: 0 5px 30px;
	padding: 0;
}
.duecol.grid-right, .duecol.grid-left{
	display: block;
}
.duecol.grid-right:after, .duecol.grid-left:after {
	content: '';
	display: block;
	clear: both;
}
.duecol.grid-right .ycol1, .duecol.grid-left .ycol1 {
	float: left;
}
.duecol.grid-right .col, .duecol.grid-left .col {
	padding: 40% 0 0;
    height: 0;
    margin: 0;
    background: transparent;
    position: relative;
}
.duecol.grid-right .ycol1:first-child .col {
	padding: 80% 0 0;
}
.duecol.grid-left .ycol1:nth-child(2) {
	float: right;
}
.duecol.grid-left .ycol1:nth-child(2) .col {
	padding: 80% 0 0;
}
.duecol.grid-right .col .item, .duecol.grid-left .col .item {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0 15px 30px;
	overflow: hidden;
}

 
@media screen and (max-width:960px){
	.quattrocol .ycol1, .trecol .ycol1 {
		width: 50%;
	}
}	
@media screen and (max-width:768px){	
	.duecol, .trecol, .quattrocol {
		display: block;
		margin: 0;
	}
	.duecol .ycol1, .trecol .ycol1, .quattrocol	.ycol1{
	width: 100%;
	max-width: 350px;
	margin: auto;
}
	.duecol.grid-right .ycol1, .duecol.grid-left .ycol1,
	.duecol.grid-left .ycol1:nth-child(2) {
		float: none;
	}
	.duecol.grid-right .col, .duecol.grid-left .col {
		padding: 80% 0 0;
	}
}

/*
 * CLASSE CSS PER IL ROLLOVER DEL BOTTONE AXIOSEND
 */

.axiomsend-cta {
    background-color: #00CED1 !important; /* Colore normale: Turchese */
    color: white !important;
    padding: 15px 30px !important;
    text-decoration: none !important;
    font-size: 1.5em !important;
    border-radius: 5px !important;
    display: inline-block !important;
    font-weight: bold !important;
    transition: background-color 0.3s; /* Transizione fluida */
}

.axiomsend-cta:hover {
    background-color: #00a0a3 !important; /* Colore Hover: Turchese Scuro */
}

/***END yostcss****/