.gallery{

    padding-left: 12%;

    padding-right: 10%;

    padding-bottom: 10%;

    padding-top: 10%;

}

.modal-img{

    cursor: pointer;

    width: 100%;

}

.overlay-plus{

    position: absolute;

    width: 10%;

    top: 40%;

    left: 42%;

    opacity: 0;

    cursor: pointer;

}

.mrgin-tp{

    margin-top: 5%;

}

.modal-content{

    border: 0px;

    background-color: transparent;

}

.modal-body{

    background-color: #fff;

}

.modal-header .close{

    background-color: #08a1b3;

}

.close{

    color: #fff;

    opacity: 1;

}

.modal-header{

    border-bottom: 0px;

    background-color: transparent;

}

.modal-body h5{

    font-family: 'rubikregular';

    font-size: 14px;

    padding-top: 5%;

    line-height: 20px;

}

.carousel-item {

    -webkit-perspective: none !important; 

     perspective: none !important;

}

.side-img {

    position: absolute;

    width: 18%;

    left: 0%;

    top: 80%;

}

.projects-bottom-line {

    width: 82%;

}



@media screen and (max-width: 2560px){

    .projects-bottom-line {

        width: 55%;

    }

    .modal-content {   

        width: 194%;

        left: -35%;

        margin-top: 34%;

    }

    .modal-body h5 {

        font-size: 26px;

        padding-top: 5%;

        line-height: 34px;

        padding-bottom: 3%;

    }

}

@media screen and (max-width: 1920px){

    .projects-bottom-line {

        width: 66%;

    }

    .modal-content {

        width: 160%;

        left: -35%;

        margin-top: 0%;

    }

    .modal-body h5 {

        font-size: 24px;

        padding-top: 5%;

        line-height: 32px;

        padding-bottom: 3%;

    }

}

@media screen and (max-width: 1600px){

    .projects-bottom-line {

        width: 68%;

    }

    .modal-content {

        width: 140%;

        left: -25%;

        margin-top: 0%;

    }

    .modal-body h5 {

        font-size: 22px;

        padding-top: 5%;

        line-height: 30px;

        padding-bottom: 3%;

    }

}

@media screen and (max-width: 1440px){



}

@media screen and (max-width: 1366px){

    .projects-bottom-line {

        width: 74%;

        margin-top: 5%;

    }

    .modal-content {

        width: 120%;

        left: -10%;

        margin-top: 0%;

    }

    .modal-body h5 {

        font-size: 20px;

        padding-top: 5%;

        line-height: 28px;

        padding-bottom: 3%;

    }

}

@media screen and (max-width: 1280px){

    .projects-bottom-line {

        width: 77%;

        margin-top: 7%;

    }

    .modal-content {

        width: 125%;

        left: -10%;

        margin-top: 0%;

    }

}

@media screen and (max-width: 1240px){

    .projects-bottom-line {

        width: 80%;

        margin-top: 8%;

    }

    .modal-content {

        width: 115%;

        left: -5%;

        margin-top: 0%;

    }

    .modal-body h5 {

        font-size: 18px;

        padding-top: 5%;

        line-height: 26px;

        padding-bottom: 1%;

    }

}

@media screen and (max-width: 1024px){

    .projects-bottom-line {

        width: 82%;

        margin-top: 0%;

    }

    .modal-content {

        width: 100%;

        left: 0%;

        margin-top: 0%;

    }

    .modal-body h5 {

        font-size: 14px;

        padding-top: 5%;

        line-height: 20px;

        padding-bottom: 0%;

    }

}

@media screen and (max-width: 800px){



}

@media screen and (max-width: 768px){

    

}

@media screen and (max-width: 480px){

    .mrg-tp{

        margin-top: 5%;

    }

    .projects-bottom-line {

        width: 32%;

        margin-top: 0%;

    }

    .gallery {

        padding-left: 10%;

        padding-right: 10%;

        padding-bottom: 10%;

        padding-top: 10%;

    }

    .modal-content {

        width: 90%;

        left: 5%;

        margin-top: 30%;

    }

    .modal-body h5 {

        font-size: 18px;

        padding-top: 5%;

        line-height: 24px;

        padding-bottom: 0%;

    }

}

@media screen and (max-width: 414px){

    .projects-bottom-line {

        width: 35%;

        margin-top: 0%;

    }

    .modal-body h5 {

        font-size: 16px;

        padding-top: 5%;

        line-height: 22px;

        padding-bottom: 0%;

    }

}

@media screen and (max-width: 412px){



}

@media screen and (max-width: 393px){



}

@media screen and (max-width: 384px){

    .modal-body h5 {

        font-size: 15px;

        padding-top: 5%;

        line-height: 21px;

        padding-bottom: 0%;

    }

    .modal-header .close {

        padding: 0.5rem;

        margin: -1rem -1rem -1rem auto;

    }

    .close { 

        font-size: 1rem;

    }

}

@media screen and (max-width: 375px) and (max-height: 812px){

    .projects-bottom-line {

        width: 45%;

        margin-top: 0%;

    }

    .modal-body h5 {

        font-size: 14px;

        padding-top: 5%;

        line-height: 20px;

        padding-bottom: 0%;

    }

}

@media screen and (max-width: 375px) and (max-height: 667px){

    .projects-bottom-line {

        width: 37%;

        margin-top: 0%;

    }

}

@media screen and (max-width: 360px){

    .projects-bottom-line {

        width: 36%;

        margin-top: 0%;

    }

    .modal-body h5 {

        font-size: 13px;

        padding-top: 5%;

        line-height: 18px;

        padding-bottom: 0%;

    }

}

@media screen and (max-width: 320px){

    .projects-bottom-line {

        width: 36%;

        margin-top: 0%;

    }

    .modal-body h5 {

        font-size: 12px;

        padding-top: 5%;

        line-height: 18px;

        padding-bottom: 0%;

    }

}