.portfolio-section{
    position:relative;
    width:100%;
    padding:10px 15px;
    background:#f7f9fc;
}

.portfolioSwiper{
    width:100%;
}

.portfolio-card{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
    background:#fff;
}

.portfolio-card img{
    width:100%;
    height:450px;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.portfolio-card:hover img{
    transform:scale(1.05);
}

.portfolio-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:35px;
    color:#fff;
    background:linear-gradient(to top,rgba(0,0,0,.8),transparent);
}

.portfolio-overlay h3{
    margin:0;
    font-size:32px;
    font-weight:700;
}

.portfolio-overlay p{
    margin-top:10px;
    font-size:16px;
}

.portfolio-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border-radius:50%;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    z-index:100;
    transition:.3s;
}

.portfolio-nav:hover{
    background:#0d6efd;
    color:#fff;
}

.portfolio-prev{
    left:10px;
}

.portfolio-next{
    right:10px;
}

.portfolio-nav i{
    font-size:22px;
}

.portfolio-modal .modal-dialog {
    max-width: 1400px;
    width: 95%;
    height: 95vh;
    margin: 2.5vh auto;
}

.portfolio-modal .modal-content {
    height: 95vh;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
}

@media(max-width:992px){

.portfolio-section{
    padding:20px 60px;
}

.portfolio-card img{
    height:400px;
}

}

@media(max-width:768px){

.portfolio-section{
    padding:15px;
}

.portfolio-card img{
    height:260px;
}

.portfolio-nav{
    width:45px;
    height:45px;
}

}