/* === 1:1 styles from Top 4 Blocks.html === */

.tour-advantages-section{
padding: 3rem 0;
}

/* mimic bootstrap container spacing but independent */
.tour-advantages-container{
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}

/* 4 columns desktop, 2 tablet, 1 mobile */
.tour-advantages-grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
align-items: start;
}

.tour-adv-card{
display: flex;
flex-direction: column;
align-items: center;
background: transparent;
border-radius: 12px;
padding: 0;
box-shadow: none;
width: 100%;
text-align: center;
}

/* Icon circle with brand gradient */
.circle-gradient{
width: 68px;
height: 68px;
min-width: 58px;
border-radius: 50%;
background: linear-gradient(135deg, #004199 0%, #36b79b 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}

.circle-gradient img{
width: 50px;
height: 50px;
filter: brightness(0) invert(1);
object-fit: contain;
display: block;
}

/* Typography exactly like file */
.tour-adv-title{
font-size: 1.2rem;
font-weight: 700;
color: #333a4d;
margin: 0 0 0.35rem 0;
text-align: center;
}

.tour-adv-text{
font-size: 0.9rem;
color: #4b5563;
line-height: 1.6;
margin: 0;
font-weight: 300;
text-align: center;
}

/* Responsive */
@media (max-width: 1024px){
.tour-advantages-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 767.98px){
.circle-gradient{
width: 58px;
height: 58px;
}
.circle-gradient img{
width: 40px;
height: 40px;
}
}

@media (max-width: 520px){
.tour-advantages-grid{
grid-template-columns: 1fr;
}
.tour-advantages-section{
padding: 2.5rem 0;
}
.tour-adv-title{
font-size: 1.1rem;
}
.tour-adv-text{
font-size: 0.80rem;
}
}