#para {
    color: white;
}

#head{
    color: wheat;
}



#serviceItem {
    position: relative;
    overflow: hidden;
    transition: transform 0.9s ease-in-out;
}

#serviceItem::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./images/bgmain.avif') no-repeat center center;
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: scale(2);
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    z-index: 0;
}

#serviceItem:hover::before {
    transform: scale(1);
    opacity: 1;
}

#serviceItem .service-content {
    position: relative;
    z-index: 1;
    transition: color 0.4s ease-in-out;
}

#serviceItem .service-title a {
    transition: color 0.4s ease-in-out;
}

#serviceItem:hover .service-title a {
    color: wheat; /* Hover hone par h3 (title) ka color wheat hoga */
}

#serviceItem .service-text {
    transition: color 0.4s ease-in-out;
}

#serviceItem:hover .service-text {
    color: white; /* Hover hone par p (paragraph) ka color white hoga */
}




#contactItem {
    position: relative;
    overflow: hidden;
    transition: transform 0.9s ease-in-out;
}

#contactItem::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./images/bgmain.avif') no-repeat center center;
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: scale(2);
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    z-index: 0;
}

#contactItem:hover::before {
    transform: scale(1);
    opacity: 1;
}

#contactItem .contact-info-content {
    position: relative;
    z-index: 1;
    transition: color 0.4s ease-in-out;
}

#contactItem .contact-info-content h5 {
    transition: color 0.4s ease-in-out;
}

#contactItem:hover .contact-info-content h5 {
    color: wheat; /* Hover hone par h5 (title) ka color wheat hoga */
}

#contactItem .contact-info-content p {
    transition: color 0.4s ease-in-out;
}

#contactItem:hover .contact-info-content p {
    color: white; /* Hover hone par paragraph ka color white hoga */
}
.contact-info-icon i {
    color: white; /* Ya koi aur contrasting color */
    font-size: 24px;
}

.contact-info-icon {
    position: relative;
    z-index: 2; /* Ensure icon stays on top */
}

#contactItem::before {
    z-index: 0; /* Background effect ko neeche rakho */
}



#contactItem:hover .contact-info-content a {
    color: wheat !important; /* Ya jo bhi color chahiye */
    text-decoration: underline; /* Optional: underline effect bhi de sakte ho */
}


/* Position relative for wrapper */
#lead-box {
    position: relative;
    overflow: hidden;
}

/* Overlay effect */
#lead-box::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 123, 255, 0.5); /* Customize overlay color here */
    transition: top 0.4s ease-in-out;
    z-index: 1;
}

/* On hover - slide down */
#lead-box:hover::before {
    top: 0;
}

/* Keep text above overlay */
#lead-box .elementor-image-box-content {
    position: relative;
    z-index: 2;
}


#para-social    {
    color: white;
}

#head-social    {
    color: wheat;
}