.tips-section {
    padding: var(--spacing-xl) 0; 
    background-color: var(--light-bg); 
}

.tips-container {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    gap: var(--spacing-md); 
}

.tips {
    
    flex: 1 1 calc(33.333% - var(--spacing-md)); 

    min-width: 280px; 

    padding: var(--spacing-md); 
    border-radius: 20px 70px ; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); 
    transition: var(--transition); 
    animation: fadeIn 1s ease-in-out;

}

.tips:hover {
    transform: translateY(+8px); 
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); 
}

.tip-icon {
    font-size: 3.5rem; 
    margin-bottom: var(--spacing-sm); 
    text-align: center; 
}

.tips h3 {
    font-family: var(--font-heading); 
    font-size: 1.6rem; 
    margin-bottom: var(--spacing-sm); 
    text-align: center; 
}

.tips p {
    line-height: 1.6; 
    color: #333; 
    text-align: left; 
}

.boeken {
    background: linear-gradient(90deg, #84c8f8, #bbdefb);
    
}

.boeken h3 {
    color: #023e83; 
}

.reistijd {
    background: linear-gradient(135deg, #fee0ff, #ffe0b2);
    
}

.reistijd h3 {
    color: #d34b02; 
}

.vaccin {
    background: linear-gradient(155deg, #5ce6a5, #c8e6c9);
    
}

.vaccin h3 {
    color: #129e19; 
}

.cultuur {
    background: linear-gradient(60deg, #66b862, #e1bee7);
    
}

.cultuur h3 {
    color: #240736; 
}

.mooi {
    background: linear-gradient(200deg, #f37ee9, #66c7bf);
    
}

.mooi h3 {
    color: #00695c; 
}

.inpakken {
    background: linear-gradient(330deg, #ecd610, #e24242);
    
}

.inpakken h3 {
    color: #d61515; 
}

@media (max-width: 768px) {
    
    .tips-container {
        gap: var(--spacing-sm); 
    }

    .tips {
        flex: 1 1 calc(50% - var(--spacing-sm));
        
    }

    .tip-icon {
        font-size: 3rem; 
    }
}

@media (max-width: 480px) {
    
    .tips {
        flex: 1 1 100%; 
        min-width: unset; 
    }

    .tips-container {
        gap: var(--spacing-sm); 
    }

    .tips {
        padding: var(--spacing-sm); 
    }

    .tip-icon {
        font-size: 2.5rem; 
    }

    .tips h3 {
        font-size: 1.4rem; 
    }
}