@font-face {font-family: "fontello";src: url("./fonts/fontello.eot");src: url("./fonts/fontello.eot#iefix") format("embedded-opentype"),url("./fonts/fontello.woff") format("woff"),url("./fonts/fontello.ttf") format("truetype"),url("./fonts/fontello.svg#fontello") format("svg");font-weight: normal;font-style: normal;font-display: swap;}
.video-card {
display: flex;
background: #fff;
border: 1px solid #768899;
border-radius: 18px;
overflow: hidden;
margin: 40px auto;
max-width: 1200px;
transition: .35s;
box-shadow: 0 10px 30px rgb(0 55 100 / .08);
}
.video-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 45px rgb(0 55 100 / .12);
}
.video-thumb {
width: 340px;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.video-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: .5s;
}
.video-card:hover img {
transform: scale(1.05);
}
.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: #d70606 !important;
color: #fff !important;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 15px;
transition: .3s;
}
.video-card:hover .play-icon {
background: #8fc640 !important;
text-decoration: none !important;
}
.video-label {
position: absolute;
top: 18px;
left: 18px;
background: #dfca90;
color: #000000;
font-size: 12px;
font-weight: 700;
padding: 7px 14px;
border-radius: 30px;
letter-spacing: 1px;
}
.video-info {
padding: 10px 20px;
flex: 1;
margin-bottom: 20px;
}
.category {
color: #00a7b8;
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
}
.video-info h2 {
margin: 12px 0 0;
font-size: 20px;
line-height: 1.2;
}
.video-info p {
color: #5d6772;
line-height: 1.9;
font-size: 18px;
}
.video-footer {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.video-footer span {
color: #194a75;
font-weight: 500;
font-size: 15px;
}
.watch-btn {
text-decoration: none;
color: #194a75 !important;
font-weight: 700;
transition: .3s;
background: none !important;
}
.watch-btn:hover {
color: #8fc640 !important;
padding-right: 8px;
text-decoration: none !important;
}
.watch-btn::before {
content: '\f16a';
font-family: fontello;
margin-right: 9px;
color: #d70606;
}
.time::before {
content: '\e804';
font-family: fontello;
margin-right: 9px;
color: #194a75;
}
.textMain .btnMore {
text-align: center;
}
.textMain .btnMore {
margin-top:15px;
}
.textMain .btnMore a {
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
min-width:auto;
padding:16px 28px;
border-radius:50px;
background:#768899;
color:#fff;
text-decoration:none;
font-weight:700;
transition:all .3s ease;
}
.textMain .btnMore a::after {
content:'\2192';
font-size:18px;
transition:transform .3s ease;
}
.textMain .btnMore a:hover {
background:#2b2c2e;
}
.textMain .btnMore a:hover::after {
transform:translateX(5px);
}
@media(max-width: 767px) {
.video-card {
flex-direction: column;
}
.video-thumb {
width: 100%;
}
}
@media(max-width: 500px) {
.video-footer {
align-items: flex-start;
flex-direction: column;
}
}