.projects{
    padding: 4rem 0;
}
.projects .card{
    border: 5px solid #dddddd;
    margin-bottom: 1.5rem;
    box-shadow: 2px 2px 5px #dddddd, -2px -2px 5px #dddddd;
    transition: 1s;
    background: #dddddd;
    border-radius: 0;
}
.projects .card:hover{
    border: 5px solid #fa7b0d;
}
.projects .photo{
    height: 400px;
    position: relative;
}
.projects .photo img{
    height: 100%;
    object-fit: cover;
    transition: 1s;
    box-shadow: 0 1px 1px rgb(0 0 0 / 22%);
}
.projects .title{
    padding: 1rem;
    position: absolute;
    right: 0;
    bottom: 0;
    background: #fff 0% 0% no-repeat padding-box;
    border-radius: 12px 0 0 0;
    opacity: .7;
}
.projects .title h3{
    margin: 0;
    font-size: 22px;
}
.projects .card .more{
    position: absolute;
    left: -25px;
    bottom: 35px;
    color: #fff;
    background: #fa7b0d;
    padding: 10px;
    border-radius: 2px;
    transition: 1s;
}
.projects .card:hover .more{
    left: 25px;
}
.projects .overlay{
    background-color: rgb(4 23 46 / 32%);
}




.modal .card{
    border: 0;
    overflow: hidden;
    box-shadow: 0 5px 25px #000;
}
.modal .modal-dialog{
    max-width: 900px;
}
.modal .card .imges{
    box-shadow: 0 5px 25px #d8d5d5;
    height: 400px;
}
.modal .card .imges img{
    height: 100%;
}
.modal .card .text h3{
    font-size: 25px;
}
.modal .card .text h4{
    font-size: 22px;
}
.modal .card .text p{
    font-size: 17px;
    text-align: justify;
}
.modal .card .text{
    padding: 1rem;
}



@media only screen and (min-width:320px) and (max-width:768px){
    .projects .photo{
        height: 250px;
    }
    .projects .card .more{
        left: 5px;
        top: 5px;
        bottom: auto;
        padding: 5px;
    }
    .projects .title h3{
        font-size: 16px;
    }


    .modal .card .imges{
        height: 150px;
    }
    .modal .card .text h3{
        font-size: 17px;
        text-align: center;
    }
    .modal .card .text h4{
        font-size: 16px;
        text-align: center;
    }
    .modal .card .text p{
        font-size: 14px;
    }

    .projects .card:hover .more{
        left: 5px;
    }
}