#head{
    color: black;
}
#para{
    /* color: #79838b; */
    color: black;
}

#li:hover{
    color: darkblue;
}

/* #sub{
    color: #c96060;
} */



#sub {
    color: #c96060; /* Default text color */
    transition: color 0.3s ease-in-out; /* Smooth transition */
}

#subbg:hover #sub {
    color: white; /* Change text color on hover */
}



/* #subpara:hover #subpara{
    color: white;
} */
/* #subbg{
    background-color: honeydew;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

#subbg:hover{
    background-color: black;
} */



#subbg {
    position: relative; /* Required for absolute positioning of ::before */
    background-color: honeydew;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Prevents overflow during animation */
    transition: background-color 0.3s ease-in-out;
}

#subbg:hover {
    background-color: black;
}

/* Adding a gradient overlay with smooth transition */
#subbg::before {
    content: "";
    position: absolute;
    top: -100%; /* Initially hidden above */
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #923c18, #76331d);
    transition: top 0.5s ease-in-out; /* Smooth transition */
    z-index: 0;
}

/* On hover, move the gradient into view */
#subbg:hover::before {
    top: 0;
}

#subpara {
    
    transition: color 0.3s ease-in-out; /* Smooth transition */
}

#subbg:hover #subpara {
    color: white; /* Change text color on hover */
}


#roadright:hover, #roadleft:hover{
    background-color: black;
}


/* forex-company-formation */

#roadright, #roadleft   {
    /* background-color: #9393ef; */
    background-color: snow;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
}



#roadright, #roadleft {
    position: relative;
    background-color: snow;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
    overflow: hidden; /* Pseudo-element ko box ke andar rakhne ke liye */
    transition: background-color 0.3s ease-in-out;
}


#roadleft::before {
    content: "";
    position: absolute;
    top: -100%; /* Initially hidden above */
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #FFA897, #FF6E9C);


    transition: top 0.5s ease-in-out;
    z-index: 0; /* Ensure it stays behind the content */
}

/* On hover, move the gradient into view */

#roadleft:hover::before {
    top: 0;
}



#roadright::before {
    content: "";
    position: absolute;
    top: 100%; /* Initially hidden above */
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #FFA897, #FF6E9C);
    transition: top 0.5s ease-in-out;
    z-index: 0; /* Ensure it stays behind the content */
}

#roadright:hover::before {
    top: 0; /* Move into view */
}

#roadright:hover p, #roadleft:hover p {
    color: white; /* White color on hover */
}



#research{
    background-color: lightcyan;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 1);

}

#research:hover{
    background-color: black;
}


#research {
    position: relative; /* Required for stacking */
    background-color: lightcyan;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
    overflow: hidden; /* Ensures effect stays inside */
    transition: background-color 0.3s ease-in-out;
    padding: 20px;
}

#research::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%; /* Initially hidden on the right */
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #90E0EF, #0077B6); /* Light blue gradient */
    transition: left 0.5s ease-in-out; /* Smooth transition from right to left */
    z-index: 0; /* Ensure it stays behind the content */
}

#research:hover::before {
    left: 0; /* Move gradient from right to left */
}

#research h3,
#research p {
    position: relative; /* Ensure text stays above the gradient */
    z-index: 1; /* Keep text above the background */
    color: black; /* Default color */
    transition: color 0.3s ease-in-out;
}

#research:hover h3,
#research:hover p {
    color: white; /* White text on hover */
}


/* mt */

/* Roadmap Transition Effect */
#roadmapTransition {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease-in-out;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
    border-radius:20px;
    padding: 8px;
}

#roadmapTransition:hover{
    background-color: black;
}

/* Background transition effect (initially hidden above) */
#roadmapTransition::before {
    content: "";
    position: absolute;
    top: -100%; /* Initially hidden above */
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #FFD3B6, #FFAAA5); /* Light gradient */
    transition: top 0.5s ease-in-out;
    z-index: 0;
}

/* On hover, move the gradient from top to bottom */
#roadmapTransition:hover::before {
    top: 0;
}

/* Ensure text remains visible */
#roadmapTransition h5,
#roadmapTransition p {
    position: relative;
    z-index: 1;
    color: black;
    transition: color 0.3s ease-in-out;
}

/* Change text color on hover */
#roadmapTransition:hover h5,
#roadmapTransition:hover p {
    color: #1E1E1E; 

}




#roadmapTransition1 {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease-in-out;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
    border-radius: 20px;
    padding: 8px;
}



#roadmapTransition1:hover{
    background-color: black;
}
/* Background transition effect (initially hidden below) */
#roadmapTransition1::before {
    content: "";
    position: absolute;
    top: 100%;  /* Initially hidden below */
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #FFD3B6, #FFAAA5);

    transition: top 0.5s ease-in-out;
    z-index: 0;
}

/* On hover, move the gradient from bottom to top */
#roadmapTransition1:hover::before {
    top: 0;
}

/* Ensure text remains visible */
#roadmapTransition1 h5,
#roadmapTransition1 p {
    position: relative;
    z-index: 1;
    color: black;
    transition: color 0.3s ease-in-out;
}

/* Change text color on hover */
#roadmapTransition1:hover h5,
#roadmapTransition1:hover p {
    
    color: #1E1E1E; /* Almost black, best contrast */

}