/*======= Latest News =======*/
.latest-news-box {
box-shadow: 0px 16px 32px rgba(228, 228, 228, 0.56);
.post-content {
padding: 25px 25px 30px;
background-color: $white;
.title {
font-size: 20px;
line-height: 1.3;
font-weight: 600;
@include respond-between(lg, xl) {
font-size: 18px;
}
@include respond-below(lg) {
font-size: 20px;
}
a {
color: $black;
}
}
.post-meta {
margin-bottom: 10px;
li {
display: inline-block;
}
a {
font-size: 14px;
font-weight: 600;
}
}
.read-more-btn {
margin-top: 25px;
color: $black;
font-size: 15px;
font-weight: 600;
i {
margin-left: 10px;
}
&:hover {
color: $primary-color;
}
}
}
}
.latest-news-box-two {
.post-meta {
margin-bottom: 10px;
li {
display: inline-block;
}
a {
font-size: 14px;
font-weight: 700;
}
}
.title {
font-size: 24px;
padding-bottom: 25px;
line-height: 1.3;
@include respond-between(lg, xl) {
font-size: 20px;
}
@include respond-below(lg) {
font-size: 20px;
}
a {
color: $black;
}
}
.news-btn {
font-size: 15px;
color: #232323;
background-color: transparent;
border: 1px solid $primary-color;
margin-top: 30px;
padding: 20px 35px;
line-height: 1;
border-radius: 5px;
font-weight: 700;
i {
position: relative;
top: 2px;
margin-left: 5px;
}
&:hover {
background-color: $primary-color;
border-color: $primary-color;
color: $white;
}
}
}
.latest-news-box-three {
position: relative;
overflow: hidden;
z-index: 1;
img {
width: 100%;
transform: scale(1) rotate(0deg);
@include transition(0.3s);
}
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
background-color: $secondary-color;
opacity: 0.4;
@include transition(0.3s);
}
.post-content {
position: absolute;
left: 40px;
bottom: 40px;
right: 40px;
z-index: 3;
@include transition(0.3s);
max-height: 95px;
overflow: hidden;
@include respond-between(lg, xl) {
left: 25px;
bottom: 30px;
right: 25px;
}
@include respond-below(sm) {
left: 25px;
bottom: 30px;
right: 25px;
}
.cat {
font-weight: 700;
color: $white;
font-size: 14px;
}
.title {
font-size: 24px;
padding-top: 10px;
@include respond-between(lg, xl) {
font-size: 20px;
}
@include respond-below(sm) {
font-size: 20px;
}
a {
color: $white;
}
}
}
.news-link {
color: $white;
font-size: 30px;
position: absolute;
line-height: 1;
bottom: 20px;
left: 40px;
@include transition(0.3s);
opacity: 0;
visibility: hidden;
z-index: 4;
@include respond-between(lg, xl) {
left: 25px;
}
@include respond-below(sm) {
left: 25px;
}
}
&:hover {
img {
transform: scale(1.2) rotate(5deg);
}
.post-content {
bottom: calc( 100% - 130px );
}
&::before {
opacity: 0.9;
background-color: $primary-color;
}
.news-link {
bottom: 40px;
visibility: visible;
opacity: 1;
}
}
}
.latest-news-box-four {
border: 10px solid #e3eeff;
padding: 40px;
@include transition(0.3s);
@include respond-between(lg, xl) {
padding: 30px;
border-width: 8px;
}
.meta li {
display: inline-block;
font-size: 14px;
padding-right: 15px;
padding-bottom: 5px;
color: $text-color-2;
@include respond-between(lg, xl) {
padding-right: 8px;
}
i {
padding-right: 5px;
color: $primary-color;
}
}
.title {
font-size: 22px;
margin-top: 5px;
margin-bottom: 20px;
a {
color: $black;
}
}
p {
font-size: 14px;
color: $text-color-2;
}
.news-link {
color: $text-color-2;
font-weight: 700;
transition: all 0.3s ease-out 0s;
margin-top: 10px;
i {
margin-right: 5px;
position: relative;
top: 1px;
}
}
&:hover {
border-color: $primary-color;
.news-link {
color: $primary-color;
}
}
}
.latest-news-white-box {
padding-bottom: 80px;
padding-top: 50px;
box-shadow: 0px 16px 32px 0px rgba(228, 228, 228, 0.56);
background-color: $white;
margin-right: 40px;
margin-left: 40px;
@include respond-between(lg, xl) {
margin-left: 10px;
margin-right: 10px;
padding-left: 20px;
padding-right: 20px;
}
@include respond-below(lg) {
padding-left: 20px;
padding-right: 20px;
}
@include respond-below(sm) {
margin-left: 10px;
margin-right: 10px;
}
}