.contact-info-section {
    padding: 60px 0; /* py-5 equivalent */

    /* Background with image */
    position: relative;
    background: url('../assets/images/background/bg\ l-3.jpg') center/cover no-repeat;
    overflow: hidden;
    color: #fff; /* Text color */

    text-align: center; /* Centered text */
    border-radius: 16px; /* Rounded corners */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

/* Overlay for blur and white tint */
.contact-info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2); /* Soft white overlay */
    backdrop-filter: blur(8px); /* Blur effect */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
    border-radius: 16px;
    z-index: 0;
}

/* Make sure content stays above overlay */
.contact-info-section > * {
    position: relative;
    z-index: 1;
}





/* ====== styles for contact details====== */
.contact-card {
            transition: all 0.3s ease;
            background: #dee7f3;
        }

        .contact-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
 /* Icon wrapper invert on hover */
        .contact-card:hover .icon-wrapper {
            background: #fff;
            color: #221e1e;
        }

        .icon-wrapper {
            width: 70px;
            height: 70px;
            margin: 0 auto;
            border-radius: 50%;
            background: #f0f8ff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: rgb(172, 183, 21);
        }

        a {
            color: rgb(26 24 24);
            text-decoration: none;
        }
        .mb-1 a {
           font-size: 14px;
        }

        /* ====== styles for form details====== */
.contact-section {
    padding: 60px 0;

    /* Fallback background color */
    background-color: #e1e5f7;

    /* Modern background image with gradient overlay */
    background-image: 
        linear-gradient(rgba(225, 229, 247, 0.7), rgba(225, 229, 247, 0.7)), 
        url('../assets/images/background/bg\ l-3.jpg');

    background-size: cover;        /* Cover the entire section */
    background-position: center;   /* Center the image */
    background-repeat: no-repeat;  /* No repeat */
    background-attachment: fixed;  /* Optional parallax effect */

    /* Optional modern enhancements */
    border-radius: 16px;           /* Rounded edges */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* Subtle shadow */
    color: #333;                   /* Text color for contrast */
}


        .contact-card {
            background: #a1287f;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(245, 218, 64, 0.493);
            padding: 30px;
        }

        .btn-custom {
            background: rgb(111 101 16);
            color: #fff;
            border-radius: 30px;
            padding: 10px 25px;
            border: none;
            transition: 0.3s;
            cursor: pointer;
        }

        .btn-custom:hover {
            background: #000000;
        }