button:active, button:focus{
    border: none !important;
    outline: none !important;
}
a:hover{
    text-decoration: underline;
    text-decoration-color: #07498B;
}


.show-case-title{
    padding: 2.343vw 0 2.76vw;
    display: flex;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.16) 0 0.05vw 0.7vw;
    /* border-bottom: solid #00000038 .1vw; */
}
.show-case-title h3, .show-case-title h6 {
    color: #07498B;
    font-family: 'Montserrat Black 900', sans-serif;
    font-weight: 700;

}
.show-case-title div{
    width: 19.74vw;
    text-align: center;
}
.design-btn, .code-btn{
    width: 9vw;
    height: 2.86vw;
    border-radius: .5vw;
    box-shadow: #D3D3D3 0 6px 11px;
    background-color: white;
    text-align: center;
    margin-right: 1.56vw;
}
button{
    border: none !important;
}
.tap-btn{
    margin: 2.34vw 0;
    display: flex;
    justify-content: flex-start;
}
.design-btn h6, .code-btn h6{
    line-height: 2.86vw;
    color: #07498B;
    /* transform: translateY(30%); */
}
.active-btn{
    background-color: #07498B !important;
    box-shadow: none;
}
.active-btn h6{
    color: white !important;
}
button:focus{
    transform: translateY(2px);
}
.tap-info{
    width: 100%;
    /* height: 28.85vw; */
    box-shadow: rgba(0, 0, 0, 0.16) 0 4px 3.2vw;
    margin-bottom: 2.6vw;
}
.tap-img{
    width: 100%;
    height: 12.76vw;
    background-color: #07498B;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tap-img img{
    margin: auto;
    width: 75.7%;
    height: auto;
}
.tap-title{
    width: 100%;
    height: 13.1vw;
    padding: 0 1.9vw;
}
.tap-title.framework{
    padding-top: 4vw;
}
.tap-title p{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3.125vw;
    font-family: 'Montserrat Regular', sans-serif;
    font-weight: 600;
}
.tap-title p, .tap-title h5{
    color: #07498B;
}
.tap-title h5{
    font-family: 'Montserrat ExtraBold', sans-serif;

}
.wed-btn{
    width: 6.1425vw;
    height: 2.13vw;
    background-color:  #1B9FDB;
    border-radius: .5vw;
    margin: 1.05vw 0;
    text-align: center;
}
.wed-btn h6{
    line-height: 2.13vw;
}
.tap-link{
    height: 3.125vw;
    width: 100%;
    border-top: solid 0.05vw #E0E0E0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vw 1.9vw 0 1.9vw;
}
.tap-link a p{
    color:#07498B ;
}
.tap-link a:nth-child(2){
    display: flex;
}
.tap-link img{
    width: auto;
    height: 1.1vw;
    margin-left: 1.1vw;
}
.tap-link a:hover{
    color: red;
}
.tiny-img{
    width: 100% !important;
    height: 100% !important;
}
.hh-img{
    width: 100% !important;
    height: 100% !important;
}
.php-img{
    width: 9vw !important;
}
.yii-img{
    width: 6.875vw !important;
}
.vue-img{
    width: 6vw !important;
}
.plluter-img{
    width: 7.55vw !important;
}
.new img:nth-child(2){
    display: none;
}



/* ===========================================START 770PX======================================================= */

@media (max-width: 770px) {
    .show-case-title div {
        width: 33.74vw;
    }
    
    .col-md-2{
        flex: 0 0 25%;
        max-width: 25%;
    }
    .design-btn, .code-btn {
        height: 6.86vw !important;
        border-radius: 1.5vw;
        width: 23vw;
    }
    .show-case-tap .col-md-4{
        flex: 0 0 50%;
        max-width: 50%;
    }
    .tap-img {
        height: 28.76vw;
    }
    #design .tap-img img{
        width: 90% ;
    }
    #code .tap-img img{
        width: 60% !important;
    }
    .tap-title {
        height: 35.1vw;
        padding-top: 2vw;
    }
    .tap-title p{
        height: 10.125vw;
    }
    #code .tap-title h5{
        margin-top: 5vw;
    }
    .wed-btn {
        width: 14.1425vw;
        height: 4.8vw;
        border-radius: 1.5vw;
        margin-bottom: 5vw;
    }
    .wed-btn h6{
        line-height: 4.8vw;
    }
    .tap-link {
        height: 8.125vw;
    }
    .tap-info {
        margin-bottom: 4.6vw;
    }
    .tap-btn{
        margin: 5.34vw 0;
    }
    .design-btn h6, .code-btn h6{
        line-height: 3.99vw;
        color: #07498B;
        /* transform: translateY(30%); */
    }

}

/* ===========================================================420PX==================================================================== */

@media (max-width: 420px) {
    .show-case-title {
        padding: 6.67vw 0 0 0;
        height: 34.6vw;
        align-items: center;
        box-shadow: rgba(0, 0, 0, 0.16) 0 1px 8px;

    }
    .show-case-title div {
        width: 80.5vw !important;
    }
    .col-md-2 {
        width: 100px;
        flex: none;
        max-width: none; 
        padding: 0 0 !important;
    }
    .design-btn, .code-btn {
        height: 12vw !important;
        border-radius: 2.67vw;
        width: 26.67vw;
        margin-right: 5.3vw;
    }
    /* .show-case-title div {
        width: 200px;
    } */
    .tap-btn h6{
        margin-top: 6px;
    }
    .tap-info {
        margin-bottom: 25px;
    }
    .tap-img {
        height: 65.3vw;
    }
    .tap-title {
        height: 56.8vw !important;
    }
    .tap-title p {
        height: 16vw;
        font-size: 3.73vw;
    }
    .tap-link a{
        margin-top: 2.67vw;
    }
    .tap-link a p {
        font-size: 13px;
    }
    .tap-link img {
        width: auto;
        height: 2.67vw;
        margin-top: 5px;
    }
    .show-case-tap .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .wed-btn {
        width: 26.67vw;
        height: 10.93vw;
        border-radius: 7px;
        margin: 3.2vw 0;
    }
    .wed-btn h6{
        font-size: 4.267vw;
        line-height: 10.93vw;
    }
    .tap-link {
        height: 15.47vw;
        justify-content: space-around;
    }
    .tap-title {
        padding: 0 8vw;
    }
    .new img:nth-child(2){
        display: block !important;
    }
    .new img:nth-child(1){
        display: none;
    }

}