/* --- Base Styles --- */
.assurance-section { 
    padding: 60px 5%; 
    background: #fff; 
    border-top: 1px solid #eee;
}

.assurance-container { 
    display: flex; 
    max-width: 1200px; 
    margin: 0 auto; 
    align-items: center; 
    gap: 20px; /* Desktop par thoda gap rakha hai */
}

.assurance-left { 
    flex: 1; 
    border-right: 1px solid #ddd; 
    padding-right: 40px; 
}

.assurance-left h2 { 
    font-family: 'Cinzel', serif; 
    font-size: clamp(28px, 4vw, 36px); /* Dynamic font size for text scaling */
    margin: 0; 
    color: #1a1a1a;
    line-height: 1.2;
}

.assurance-left h2 span { 
    color: #C5A059; 
    font-weight: 400; 
}

.assurance-left p { 
    color: #888; 
    font-style: italic; 
    margin-top: 8px; 
    font-size: 14px;
}

.assurance-right { 
    flex: 2; 
    display: flex; 
    justify-content: space-around; 
    padding-left: 40px; 
    gap: 20px;
}

.assure-item { 
    text-align: center; 
    transition: transform 0.3s ease;
    flex: 1; /* Items ko barabar width deta hai */
}

.assure-item:hover {
    transform: translateY(-5px);
}

.icon-wrapper {
    font-size: 35px;
    color: #C5A059; 
    margin-bottom: 12px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.assure-item h5 { 
    font-family: 'Inter', sans-serif; 
    font-size: 11px; 
    color: #333; 
    margin: 0; 
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4;
}

/* --- Responsive Media Queries --- */

/* Tablet (iPad/Large Mobile) */
@media (max-width: 992px) {
    .assurance-left {
        padding-right: 20px;
    }
    .assurance-right {
        padding-left: 20px;
    }
    .assurance-left h2 {
        font-size: 28px;
    }
}

/* Small Mobile Devices (iPhone/Android) */
@media (max-width: 768px) {
    .assurance-container { 
        flex-direction: column; 
        text-align: center; 
    }

    .assurance-left { 
        border-right: none; 
        border-bottom: 1px solid #ddd; 
        padding: 0 0 30px 0; 
        margin-bottom: 30px; 
        width: 100%;
    }

    .assurance-right { 
        padding: 0; 
        width: 100%; 
        flex-direction: row; /* Mobile par icons line mein rahenge */
        flex-wrap: wrap; /* Agar space kam padi toh niche shift honge */
        justify-content: center;
        gap: 30px;
    }

    .assure-item {
        min-width: 120px; /* Mobile par items stack na ho jayein ek dum se */
    }
}

/* Ultra Small Screens (Narrow phones) */
@media (max-width: 480px) {
    .assurance-right {
        flex-direction: column; /* Bahut choti screen par stack kar denge */
        gap: 40px;
    }
    .assurance-left h2 {
        font-size: 24px;
    }
}