@media(max-width:767px) {
    [class*="bg-style-"]::before {width: 100%;}
    .bg-style-2::before {
        clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%);
    }

    .bg-style-color-1:not(.bg-style-3)::before {
        background-color: rgba(9, 9, 29, 0.7);
    }
    
    .bg-style-color-2:not(.bg-style-3)::before {
        background-color: rgba(5, 83, 241, 0.7);
    }
    .bg-style-color-3:not(.bg-style-3)::before {
        background-color: rgba(20, 32, 82, 0.7);
    }
    .bg-style-3::before {
    height: 15%;
}
    .icon-style {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
    .table td, .table th {
  font-size: 12px;
}
    .projects-list .flex-wrap span + span {
  opacity: 1;
  visibility: visible;
  margin-left: 25px !important;
}
}

@media(min-width:768px) {
    .icon-style {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
}

@media(min-width:1378px) {
    .icon-style {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}

@media(min-width:768px) and (max-width:1180px){
    .bg-style-4::before {
  width: 75%;
}
    .projects-list .flex-wrap span + span {
  opacity: 1;
  visibility: visible;
  margin-left: 25px !important;
}
}