/**/
.highclass-sec { width: 100%; overflow: hidden; padding: 100px 0 70px; }
.highclass-heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 0 25px; } 
.highclass-heading h2 { font-family: 'Aviano'; font-weight: 900; color: #fff; font-size: 30px; line-height: 1; margin: 0; text-transform: uppercase}
.btn.hcmboxbutton { background: transparent; border: 1px solid #fff; border-radius: 0; min-width: 90px; box-shadow: none; outline: none; color: #fff; font-size: 12.5px; padding:5px 10px; white-space: nowrap;}
.btn.hcmboxbutton:hover { background:#ffffff; border-color:#ffffff; color:#000000;  }
.blogarticle { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; margin: 0 -13px; }
.blogarticle .item {width: 25%;padding: 25px 13px;} 
.article-box { position: relative; width: 100%; display: block; overflow: hidden;} 
.article-img { position: relative; width: 100%; overflow: hidden;} 
.article-img:after { content: ''; background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%); width: 100%; height: 45%; position: absolute; bottom: -5px; left: 0; right: 0; transform: rotate(180deg); }
.article-img .img-fluid { width: 100%; height: 100%; object-fit: cover; transition: all .5s; } 
.article-data { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 10px; text-align: center; z-index:9; } 
.article-data h3 { font-family: 'Aviano'; font-weight: 900; color: #fff; font-size: 22px; margin: 0 0 5px; }
.article-data h4 { color: #fff; font-size: 16px; margin: 0 0 10px; } 
.article-data p { color: #fff; font-size: 12.5px; }
.article-box:hover .article-img .img-fluid { transform: scale(1.1); opacity: 0.7; }



/*-------------------------------- Responsive Media Query --------------------------------*/
@media (min-width: 1600px){
.highclass-heading h2 { font-size: 35px; }
.article-data h3 { font-size: 23px; }
.article-data h4 { font-size: 18px; }

}


@media (min-width: 1900px){
.highclass-sec { padding: 120px 0 100px; }
.highclass-heading h2 { font-size: 37px; }
.article-data h3 { font-size: 25px; }
.article-data h4 { font-size: 20px; }

}


@media (min-width: 2200px){
.highclass-sec { padding: 150px 0; }
.highclass-heading { padding: 0 0 45px; } 
.highclass-heading h2 { font-size: 45px; }
.btn.hcmboxbutton { font-size: 16px; min-width: 150px; padding: 10px 10px; }
.blogarticle .item { padding: 15px 25px; }
.article-data h3 { font-size: 32px; }
.article-data h4 { font-size: 25px; }
.article-data p { font-size: 18px; }

}


@media (min-width: 2600px){
.highclass-heading { padding: 0 0 60px; } 
.highclass-heading h2 { font-size: 60px; }
.btn.hcmboxbutton { font-size: 22px; min-width: 200px; }
.article-data h3 { font-size: 45px; }
.article-data h4 { font-size: 30px; }
.article-data p { font-size: 22px; }

}


@media (min-width: 3000px){ 
.highclass-sec { padding: 200px 0; }
.highclass-heading h2 { font-size: 75px; }
.btn.hcmboxbutton { font-size: 25px; }
.article-data h3 { font-size: 50px; }
.article-data h4 { font-size: 40px; }
.article-data p { font-size: 25px; }

}


@media (max-width: 1199px){
.blogarticle .item { width: 50%; }
.highclass-heading h2 { font-size: 32px; }

}


@media (max-width: 860px){
.highclass-heading { padding: 0 0 15px; }
.highclass-heading h2 { font-size: 30px; padding-right: 15px; }
.article-data { position: relative; padding: 0 10px; min-height: 100px; margin-top: -40px; }
.article-data h3 { font-size: 30px; }
.article-data h4 { font-size: 20px; }
.article-data p { font-size: 16px; }

}


@media (max-width: 700px){
.highclass-heading h2 { font-size: 26px; }
.article-data h3 { font-size: 24px; }
.article-data h4 { font-size: 16px; }
.article-data p { font-size: 13px; }

}


@media (max-width: 500px){
.highclass-heading h2 { font-size: 20px; }
.article-data h3 { font-size: 18px; }
.article-data h4 { font-size: 15px; margin: 0 0 5px; }
.article-data p { font-size: 11px; }

}

@media (max-width: 400px){
.highclass-heading h2 { font-size: 18px;}
.article-data h3 { font-size: 16px; }


}