#product {
    position: relative;
    padding: 50px 0px;
}


#product h1 {
    font-size: 56px;
    color: #004490;
}

#product h4 {
    color: #242424;
}

#product .pro-text h4 {
    color: #004490;
    /* width: 200px; */
}

#product .col-pro {
    position: relative;
    display: block;
    height: 600px;
}

.pbtn {
    margin-left: -60px;
    display: block;
    position: absolute;
    overflow: hidden;
    bottom: 10px;
    /* font-size: 14px; */
}

#product .btn-light {
    position: relative;
    padding: 12px 50px;
    color: #fff;
    background: #062550;
}

#product .btn-light::before {
    content: '';
    width: 0%;
    height: 1px;
    position: absolute;
    left: 10px;
    bottom: -10px;
    background: #062550;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#product .btn-light::after {
    content: '';
    width: 1px;
    height: 0%;
    position: absolute;
    right: -10px;
    top: 10px;
    background: #062550;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}

#product .btn-light:hover:before {
    content: '';
    width: 105%;
    height: 1px;
    position: absolute;
    left: 10px;
    bottom: -10px;
    background: #062550;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#product .btn-light:hover:after {
    content: '';
    width: 1px;
    height: 110%;
    position: absolute;
    right: -10px;
    top: 10px;
    background: #062550;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#product .col-pro {
    display: block;
    border: 1px solid #00000000;
    -webkit-transition: all .25s ease-in-out;
    -khtml-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

#product .col-pro:hover {
    border: 1px solid #004490;
    -webkit-transition: all .25s ease-in-out;
    -khtml-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.pro-p {
    display: block;
    border-bottom: 1px solid #004490;
}

.product-section-bg {
    background: #56a9de;
    padding: 100px 0px;
    position: relative;
    overflow: hidden;
}

#product-section .container-xxl {
    position: relative;
    z-index: 1;
}

#product-section .product-section-bg:before {
    content: '';
    width: 650px;
    height: 557px;
    background-image: url(../images/product-section-before.svg);
    opacity: 0.1;
    background-size: cover;
    position: absolute;
    right: 0px;
    top: 0px;
}

#product-section .page-header h2 {
    color: #ffffff;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}


#product-section .page-header h2:before {
    content: '';
    position: absolute;
    width: 33.33%;
    height: 1px;
    background: #ffffff;
    bottom: 0px;
}

#product-section p {
    color: #ffffff;
}

.product-item {
    display: block;
    position: relative;
    min-height: 430px;
}


.product-item .product-img {
    display: inline-block;
    overflow: hidden;
}

.product-item .product-text {
    padding: 15px;
    position: relative;
    z-index: 2;
}

.product-item .product-text h4 {
    color: #000;
    font-size: 18px;
    font-weight: 400;
    min-height: 70px;
    line-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}

.product-item .btn-product {
    display: inline-block;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    background-color: #000;
    border: 1px solid #ffffff;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0rem;
    position: relative;
    margin-right: 35px;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}

.product-item .btn-product .material-icons-sharp {
    position: absolute;
    top: -1px;
    right: -38px;
    font-size: 36px;
    border: 1px solid #ffffff;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}

.product-item:hover .btn-product,
.product-item:hover .btn-product .material-icons-sharp {
    background: #004490;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}

@media(min-width:992px) {

    #product h1 {
        font-size: 72px;
        color: #004490;
    }

    .pro-p {
        display: block;
        border: 1px solid #00000000;
        -webkit-transition: all .25s ease-in-out;
        -khtml-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }

    .pro-p:hover {
        border: 1px solid #004490;
        -webkit-transition: all .25s ease-in-out;
        -khtml-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }

}