/* Footer Icons Styles for Saudi Services */

.footer-icons {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-icons h5 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 600;
}

.footer-icons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
    align-items: center;
}

.footer-icon-item {
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-icon-item:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}

.footer-icon-item img {
    height: 40px;
    width: auto;
    max-width: 80px;
    border-radius: 6px;
    background: white;
    padding: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-icons-grid {
        justify-content: center;
        gap: 10px;
    }
    
    .footer-icon-item img {
        height: 35px;
        max-width: 70px;
    }
    
    .footer-icons h5 {
        text-align: center;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .footer-icons-grid {
        gap: 8px;
    }
    
    .footer-icon-item img {
        height: 30px;
        max-width: 60px;
        padding: 3px;
    }
}

/* Default Icons as CSS Background Images */
.default-icon {
    display: inline-block;
    width: 80px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.default-icon.vat {
    background-color: #0066cc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect x='5' y='5' width='90' height='50' rx='5' fill='%230066cc'/%3E%3Ctext x='50' y='25' text-anchor='middle' fill='white' font-size='8' font-weight='bold'%3EVAT%3C/text%3E%3Ctext x='50' y='35' text-anchor='middle' fill='white' font-size='6'%3ECertificate%3C/text%3E%3C/svg%3E");
}

.default-icon.maroof {
    background-color: #00a651;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect x='5' y='5' width='90' height='50' rx='5' fill='%2300a651'/%3E%3Ctext x='50' y='35' text-anchor='middle' fill='white' font-size='12' font-weight='bold'%3E%D9%85%D8%B9%D8%B1%D9%88%D9%81%3C/text%3E%3C/svg%3E");
}

.default-icon.mawthooq {
    background-color: #1e4d72;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect x='5' y='5' width='90' height='50' rx='5' fill='%231e4d72'/%3E%3Ctext x='50' y='35' text-anchor='middle' fill='white' font-size='12' font-weight='bold'%3E%D9%85%D9%88%D8%AB%D9%88%D9%82%3C/text%3E%3C/svg%3E");
}

.default-icon.mada {
    background-color: #ff6b35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect x='5' y='5' width='90' height='50' rx='5' fill='%23ff6b35'/%3E%3Ctext x='50' y='35' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3E%D9%85%D8%AF%D9%89%3C/text%3E%3C/svg%3E");
}

.default-icon.visa {
    background-color: #1a1f71;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect x='5' y='5' width='90' height='50' rx='5' fill='%231a1f71'/%3E%3Ctext x='50' y='35' text-anchor='middle' fill='white' font-size='14' font-weight='bold'%3EVISA%3C/text%3E%3C/svg%3E");
}

.default-icon.mastercard {
    background-color: #eb001b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect x='5' y='5' width='90' height='50' rx='5' fill='%23eb001b'/%3E%3Ccircle cx='35' cy='30' r='12' fill='%23ff5f00'/%3E%3Ccircle cx='65' cy='30' r='12' fill='%23f79e1b'/%3E%3C/svg%3E");
}

.default-icon.stcpay {
    background-color: #662d91;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect x='5' y='5' width='90' height='50' rx='5' fill='%23662d91'/%3E%3Ctext x='50' y='30' text-anchor='middle' fill='white' font-size='10' font-weight='bold'%3ESTC%3C/text%3E%3Ctext x='50' y='42' text-anchor='middle' fill='white' font-size='8'%3EPAY%3C/text%3E%3C/svg%3E");
}

.default-icon.applepay {
    background-color: #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect x='5' y='5' width='90' height='50' rx='5' fill='%23000000'/%3E%3Ctext x='50' y='35' text-anchor='middle' fill='white' font-size='10' font-weight='bold'%3E Pay%3C/text%3E%3C/svg%3E");
}

.default-icon.tabby {
    background-color: #3ecf8e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect x='5' y='5' width='90' height='50' rx='5' fill='%233ecf8e'/%3E%3Ctext x='50' y='35' text-anchor='middle' fill='white' font-size='12' font-weight='bold'%3Etabby%3C/text%3E%3C/svg%3E");
}

.default-icon.tamara {
    background-color: #39d9a7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect x='5' y='5' width='90' height='50' rx='5' fill='%2339d9a7'/%3E%3Ctext x='50' y='35' text-anchor='middle' fill='white' font-size='12' font-weight='bold'%3Etamara%3C/text%3E%3C/svg%3E");
}

.default-icon.commercial {
    background-color: #2c5530;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect x='5' y='5' width='90' height='50' rx='5' fill='%232c5530'/%3E%3Ctext x='50' y='25' text-anchor='middle' fill='white' font-size='8' font-weight='bold'%3E%D8%A7%D9%84%D8%B3%D8%AC%D9%84%3C/text%3E%3Ctext x='50' y='35' text-anchor='middle' fill='white' font-size='8' font-weight='bold'%3E%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A%3C/text%3E%3C/svg%3E");
}