body
{
    font-family: 'Rubik', sans-serif;
    /* background-color: #E7F5FF; */
    color: #103A62;
}

html
{
    font-size: 62.5%;
}

.containerX
{
    padding: 10px 10%;
}

/*? Project */

.work-list
{
    /* background-color: #fff; */

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-gap: 50px;
    margin-top: 10px;
    margin-left: 25px;
    margin-right: 25px;
}

.work
{
    border-radius: 30px;
    border: 3px solid #1864ab;
    /*border: 1px solid ;*/
    position: relative;
    overflow: hidden;
}

.work img
{

    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.5s;
}


.icon-container
{
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    line-height: 60px;
    margin-top: 20px;
    margin-left: 5px;
    display: inline-block;
}


.icon-container i
{
    margin-left: 10px;
    font-size: 40px;
    /* Adjust the font size to control the icon size */
    color: #fff;
}

.copyright
{
    width: 100%;
    text-align: center;
    padding: 20px 0;
    background-color: #103A62;
    margin-top: 35px;


}

.copyright-p
{
    color: #fff;
    font-family: 'Rubik';
    font-size: 2rem;
    letter-spacing: 1px;


}


.hidden
{
    display: none;
}





nav .fa-solid
{
    display: none;
}

.header-p-mobile
{
    display: none;
    color: #103A62;

}

/*! ---------------CSS for Small Screen --------------- */
@media only screen and (max-width: 600px)
{



    .work-list
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* Center projects horizontally */
    }

    .work
    {
        position: relative;
        overflow: hidden;
        /*height: 50vh;*/
        height: 100%;
    }

    .work img
    {
        /*height: 50vh;*/
    }

    .layer
    {
        text-align: center;
        /* Center text content */
    }

    .icon-container
    {
        display: flex;
        justify-content: center;
        /* Center icons horizontally */
    }

    .container
    {
        padding: 0px;
    }
}


@media (max-width: 1300px)
{
    .work-list
    {
        /* background-color: #fff; */

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 30px;
        margin-left: 25px;
        margin-right: 25px;
    }



}