@use '../../utils' as *;
/*----------------------------------------*/
/* 5.1 blog css start
/*----------------------------------------*/
.mt-blog-2-btn {
@media #{$xs} {
text-align: start !important;
}
}
.mt-blog {
&-content {
& button {
border-bottom: 1px solid #D8D8D8;
padding: 2px 0;
margin-bottom: 15px;
text-align: left;
@include transition(.5s);
&:last-child {
border: none;
}
& span {
color: var(--mt-common-black);
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 1.1;
text-transform: capitalize;
border-radius: 50px;
border: 1px solid #D8D8D8;
padding: 15px 35px;
margin-bottom: 10px;
display: inline-block;
}
& h3 {
color: var(--000000, #000);
font-size: 24px;
font-weight: 700;
line-height: 1.4;
text-transform: capitalize;
@include transition(.5s);
& a {
background-repeat: no-repeat;
background-size: 0% 1px, 0 1px;
background-position: 100% 100%, 0 100%;
transition: background-size 0.4s linear;
background-image: linear-gradient(#0e3631, #0e3631), linear-gradient(#0e3631, #0e3631);
}
}
&:hover {
& a {
background-size: 0% 1px, 100% 1px;
}
& h3 {
text-decoration: underline;
}
}
}
}
&-img {
text-align: right;
@media #{$xs} {
text-align: center;
}
&>img {
@media #{$xs} {
width: 100%;
}
}
}
&-imgbtn {
background: var(--000000, #000);
padding: 14px 24px;
text-align: center;
color: #fff;
&-float {
position: absolute;
right: 0;
bottom: 0;
}
}
&-2 {
&-item {
& img {
border-radius: 20px;
margin-bottom: 30px;
}
&.blog-border {
border-bottom: 1px solid var(--mt-border-1);
}
}
&-text {
& span {
color: var(--mt-common-white);
font-size: 16px;
font-weight: 400;
margin-bottom: 20px;
display: inline-block;
}
& h3 {
color: var(--FFFFFF, #FFF);
font-size: 24px;
font-weight: 700;
line-height: 34px;
& a {}
}
}
&-author {
& img {
border-radius: 10px;
margin-right: 14px;
}
&-text {
& h5 {
color: var(--mt-common-white);
font-size: 18px;
font-weight: 700;
line-height: 26px;
}
& span {
color: var(--CDCDCD, #CDCDCD);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
&-3 {
&-item {
@include transition(.3s);
&:hover {
& .mt-blog-3-btn a {
color: #FF2E00;
& span svg path {
fill: #FF2E00;
}
}
}
}
&-date {
background-color: #000;
display: inline-block;
padding: 5px 20px;
position: absolute;
right: 15px;
bottom: 0;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
&-text {
& h3 {
color: var(--FFFFFF, #FFF);
font-size: 24px;
font-weight: 700;
}
}
&-btn {
& a {
& svg {
margin-left: 7px;
}
}
}
}
&-4 {
&-item {
border: 1px solid var(--mt-border-2);
border-radius: 20px;
padding: 25px;
padding-bottom: 30px;
@include transition(.4s);
&:hover {
border: 1px solid transparent;
box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.05);
& .mt-blog-4-btn i {
background-color: var(--mt-theme-1);
color: var(--mt-common-white);
}
& .mt-blog-4-btn span {
margin-left: 0px;
}
& .mt-blog-4-btn i {
margin-left: 6px;
}
}
}
&-img {
& img {
border-radius: 20px;
@media #{$lg,$md,$xs} {
width: 100%;
}
}
}
&-tag {
& span {
border: 1px solid var(--mt-border-2);
border-radius: 50px;
color: var(--mt-text-2);
padding: 4px 15px;
margin: 0 3px;
}
}
&-btn {
& span {
font-family: var(--mt-ff-heading);
font-weight: 700;
color: var(--mt-common-black);
@include transition(.4s);
margin-left: -100px;
}
& i {
border: 1px solid var(--mt-border-2);
padding: 10px 30px;
border-radius: 50px;
color: #000;
font-size: 18px;
@include transition(.4s);
margin-left: 20px;
}
}
&-shape {
position: absolute;
bottom: 13%;
left: 0;
z-index: -1;
}
&-arrow {
& button {
border: 1px solid var(--mt-border-2);
padding: 10px 30px;
border-radius: 50px;
color: #000;
font-size: 18px;
@include transition(.4s);
margin-left: 20px;
&.active {
background-color: var(--mt-theme-1);
color: var(--mt-common-white);
}
}
}
}
&-5 {
&-item {
border: 1px solid #F8F8F8;
@include transition(.4s);
&:hover {
background: var(--FFFFFF, #FFF);
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.05);
& .mt-blog-5-img {
& img {
@include transform(scale(1.1));
}
}
& .mt-blog-5-text a {
background-size: 0% 2px, 100% 2px;
}
}
}
&-content {
padding: 20px;
padding-bottom: 25px;
}
&-meta {
gap: 10px;
&>span {
width: 6px;
height: 6px;
background: #767676;
border-radius: 50px;
}
}
&-cat span {
color: #767676;
}
&-date span {
color: #767676;
}
&-btn a {
color: #000;
& span {
margin-left: 5px;
}
}
&-text {
& h4 a {
background-repeat: no-repeat;
background-size: 0% 2px, 0 2px;
background-position: 100% 100%, 0 100%;
transition: background-size 0.4s linear;
background-image: linear-gradient(#000000, #0e3631), linear-gradient(#000000, #0e3631);
}
}
&-img {
overflow: hidden;
& img {
@include transition(.7s);
@media #{$md,$xs} {
width: 100%;
}
}
}
}
&-6 {
& .mt-blog-5 {
&-item {
border-radius: 24px;
background-color: #fff;
&:hover {
box-shadow: none;
}
}
&-img {
& a {
& img {
border-radius: 24px;
background: url(<path-to-image>) lightgray 50% / cover no-repeat;
box-shadow: 0px 17px 19px -10px rgba(29, 28, 60, 0.25);
@media #{$md,$xs} {
width: 100%;
}
}
}
}
}
& .mt-blog-main-wrap {
border-radius: 34px;
background-repeat: no-repeat;
background-size: cover;
@media #{$md,$xs} {
padding-right: 10px;
padding-left: 10px;
padding-bottom: 50px;
}
}
& .mtscreenshort-arrow::before {
content: "";
width: 70px;
left: 45.5%;
bottom: -12%;
@media #{$xl} {
bottom: -11%;
}
}
& .mt-blog-6-button {
&-prev {
@media #{$lg} {
right: 37%;
}
@media #{$md} {
right: 29%;
bottom: -102px;
}
}
&-next {
left: auto;
right: 55.5%;
@media #{$md} {
right: 55.5%;
bottom: -102px;
}
}
}
}
&-7 {
&-item {
border-radius: 14px;
padding: 5px 5px;
box-shadow: 0px 40px 60px rgba(140, 140, 140, 0.06);
background: #FFFFFF;
&:hover {
& .mt-blog-title {
color: var(--mt-theme-2);
}
}
}
&-img {
& img {
@media #{$xs} {
width: 100%;
}
}
}
&-title {
transition: 0.3s;
color: #051535;
font-size: 24px;
@media #{$xs} {
font-size: 20px;
}
}
&-meta {
& span {
color: #55607A;
font-size: 18px;
margin: 0px 5px;
}
}
}
&-8 {
& .mt-blog {
&-item {
border-radius: 30px 30px 30px 30px;
background: #F6F6F6;
&:hover {
& .mt-blog-img {
& img {
@include transform(scale(1.1));
}
}
& .mt-blog-btn {
& a {
color: var(--mt-theme-1);
}
}
}
}
&-content {
padding: 30px;
}
&-img {
overflow: hidden;
& img {
@include transition(.7s);
}
}
&-meta {
& a {
position: relative;
margin: 0px 10px;
& span {
font-size: 18px;
color: #5A6164;
}
&::before {
content: "";
width: 1px;
height: 70%;
background-color: #5A6164;
position: absolute;
left: 115%;
@include transform(translateY(5px));
}
&:last-child {
&:before {
display: none;
}
}
}
}
&-date {
& span {
color: #5A6164;
font-size: 17px;
}
}
&-btn {
& a {
color: #000;
@include transform(rotate(-45deg));
@include transition(.4s);
}
}
&-text {
& h4 {
font-size: 24px;
font-weight: 500;
line-height: 1.3;
color: #101010;
}
}
}
&.mtblogi-black {
& .mt-blog-item {
background: rgba(246, 246, 246, 0.10);
&:hover {
& .mt-blog-btn a {
color: var(--mt-theme-2);
}
}
}
& .mt-blog-text h4 {
color: var(--mt-common-white);
}
& .mt-blog-meta a span {
color: var(--mt-common-white);
}
& .mt-blog-date span {
color: var(--mt-common-white);
}
& .mt-blog-btn a {
color: var(--mt-common-white);
}
}
}
&-9 {
& .mt-blog {
&-item {
@media #{$xs} {
flex-wrap: wrap;
// display: inherit !important;
}
&:hover {
& .mt-blog-title {
color: var(--mt-theme-5);
}
& .mt-blog-img {
& img {
@include transform(scale(1.1));
}
}
}
}
&-meta {
& a {
color: rgba(255, 255, 255, 0.7);
margin: 0 5px;
& span {
margin-right: 5px;
color: var(--mt-theme-5);
}
}
}
&-img {
margin-right: -80px;
z-index: 2;
overflow: hidden;
flex: 0 0 auto;
@media #{$xs} {
flex: auto;
margin-right: 0;
}
& img {
@include transition(.7s);
@media #{$xs} {
width: 100%;
}
}
}
&-title {
color: #fff;
font-size: 24px;
@include transition(.4s);
}
&-btn {
color: #fff;
font-weight: 700;
font-size: 17px;
& span {
margin-left: 8px;
}
}
&-content {
border-radius: 10px;
background: linear-gradient(180deg, rgb(16, 65, 109), rgba(16, 65, 109, 0) 100%);
padding-top: 35px;
padding-right: 35px;
@media #{$xs} {
padding-left: 20px;
padding-right: 20px;
border-radius: 0;
}
& p {
color: rgba(255, 255, 255, 0.7);
line-height: 28px;
font-size: 17px;
}
}
}
}
&-10 {
& .mt-blog {
&-item {
background-color: #F8F8F8;
padding: 24px;
border-radius: 20px;
&:hover {
& .mt-blog-img {
& img {
@include transform(scale(1.2));
}
}
& .mt-blog-title a {
background-size: 0% 2px, 100% 2px;
}
& .mt-blog-btn a {
background-color: var(--mt-theme-1);
color: var(--mt-common-white);
}
}
}
&-img {
overflow: hidden;
& img {
@include transition(.7s);
}
}
&-meta {
& a {
margin: 0px 6px;
& i {
margin-right: 5px;
}
}
}
&-title {
& a {
background-repeat: no-repeat;
background-size: 0% 2px, 0 2px;
background-position: 100% 100%, 0 100%;
transition: background-size 0.4s linear;
background-image: linear-gradient(#0e3631, #0e3631), linear-gradient(#0e3631, #0e3631);
}
}
&-btn {
position: absolute;
bottom: 0%;
left: 50%;
@include transform(translateX(-50%));
& a {
width: 100px;
height: 60px;
line-height: 70px;
text-align: center;
background-color: var(--mt-common-white);
display: inline-block;
border-radius: 250px 250px 0px 0px;
font-size: 25px;
@include transition(.4s);
}
}
&-shape {
position: absolute;
left: 10%;
top: 10%;
animation: mt__scalingAnimation 9s infinite alternate;
@media #{$xl} {
left: 1%
}
@media #{$lg} {
left: 1%;
top: 5%;
}
@media #{$md} {
left: 1%;
top: 2%;
}
@media #{$xs} {
display: none;
}
&-2 {
position: absolute;
right: 12%;
top: 14%;
animation: mttranslateY2 4s infinite alternate;
@media #{$xl} {
right: 1%;
}
@media #{$lg} {
top: 5%;
right: 1%;
}
@media #{$md} {
top: 3%;
right: 1%;
}
@media #{$xs} {
display: none;
}
}
}
}
}
}
.swiper.mt-blog-4-active.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
padding: 10px;
}
.mtblog {
&__bg {
background-image: url(/assets/img/blog/blog-bg-2-1.png);
background-position: center;
background-repeat: no-repeat;
padding: 24px 40px 24px 24px;
border-radius: 10px;
@include transition(.4s);
z-index: 2;
position: relative;
@media #{$md} {
background-size: cover;
padding: 40px 60px;
}
@media #{$xs} {
background-size: cover;
padding: 40px 30px;
}
&:hover {
background-image: url(/assets/img/blog/blog-bg-2-2.png);
}
}
&__meta {
& cite {
width: 10px;
height: 1px;
display: inline-block;
background: var(--mt-text-body);
margin: 0 5px;
@include transform(translateY(-3px));
}
}
&__btn {
& a {
color: var(--mt-common-black);
font-weight: 700;
font-family: var(--mt-ff-heading);
}
}
&__shape {
position: absolute;
right: 0;
top: 0;
&-2 {
position: absolute;
left: 16%;
top: 5%;
animation: mt__scalingAnimation 9s linear infinite;
@media #{$xs} {
display: none;
}
}
}
&__2 {
background-color: rgba(13, 89, 239, 0.02);
& .mtblog {
&__item {
&.larges {
padding: 30px;
background-color: #fff;
border-radius: 24px;
border: 1px solid #E7E7E7;
box-shadow: 0px 22px 75px -4px rgba(4, 37, 82, 0.08);
}
&.smalles {
@media #{$xs} {
flex: 0 0 auto;
flex-wrap: wrap;
gap: 20px;
}
}
}
&__thumb {
flex: 0 0 auto;
@media #{$xs} {
width: 100%;
}
& a img {
@media #{$xs} {
width: 100%;
}
}
}
&__title {
font-size: 30px;
font-weight: 400;
line-height: 40px;
text-transform: math-auto;
}
&__btn {
& a {
color: #0D59EF;
font-size: 18px;
text-transform: uppercase;
& span {
width: 32px;
height: 32px;
line-height: 32px;
background-color: #0D59EF;
color: #Fff;
border-radius: 50px;
text-align: center;
display: inline-block;
margin-left: 10px;
}
}
}
&__shape-2 {
left: 13%;
top: 25%;
z-index: -1;
}
}
}
&__3 {
background-color: #fff;
& .mtblog {
&__item {
padding: 15px;
background-color: #fff;
border-radius: 24px;
border: 1px solid #E7E7E7;
box-shadow: 0px 22px 75px -4px rgba(4, 37, 82, 0.04);
&:hover {
& .mtblog__thumb {
& img {
@include transform(scale(1.1));
}
}
& .mtblog__title a {
background-size: 0% 2px, 100% 2px;
}
}
}
&__thumb {
overflow: hidden;
& img {
@include transition(.7s);
}
}
&__content {
padding: 0px 7px 10px 7px;
}
&__meta span {
color: #042552;
font-size: 18px;
& i {
margin: 0px 5px;
}
}
&__title {
font-weight: 700;
font-size: 30px;
line-height: 1.2;
& a {
background-repeat: no-repeat;
background-size: 0% 2px, 0 2px;
background-position: 100% 100%, 0 100%;
transition: background-size 0.4s linear;
background-image: linear-gradient(#000000, #0e3631), linear-gradient(#000000, #0e3631);
}
}
&__btn a {
color: #0D59EF;
font-size: 18px;
text-transform: capitalize;
}
}
}
&__4 {
& .mtblog {
&__item {
&:hover {
& .mtblog__thumb img {
@include transform(scale(1.2));
}
& .mtblog__title a {
background-size: 0% 2px, 100% 2px;
}
}
}
&__thumb {
flex: 0 0 auto;
overflow: hidden;
@media #{$lg,$md,$xs} {
background-repeat: no-repeat;
background-size: cover;
}
@media #{$xs} {
flex-wrap: wrap;
flex: auto;
}
& img {
@include transition(.7s);
@media #{$xs} {
width: 100%;
}
}
&::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(0, 2, 19, 0.20) 42.39%, #000 100%);
}
}
&__content {
padding: 32px;
position: absolute;
left: 0;
bottom: 0;
}
&__title {
font-size: 32px;
line-height: 42px;
@media #{$lg,$md,$xs} {
font-size: 25px;
line-height: 34px;
br {
display: none;
}
}
& a {
background-repeat: no-repeat;
background-size: 0% 2px, 0 2px;
background-position: 100% 100%, 0 100%;
transition: background-size 0.4s linear;
background-image: linear-gradient(#000000, #ffffff), linear-gradient(#000000, #ffffff);
}
}
&__meta {
& a {
margin-right: 15px;
color: #ffffffbb;
}
}
&__list {
border-bottom: 1px solid var(--mt-border-2);
padding-bottom: 20px;
&.mtborder {
border-bottom: 1px solid var(--mt-border-2) !important;
}
@media #{$xs} {
flex-wrap: wrap;
gap: 20px;
}
&:last-child {
border-bottom: 0px;
}
& .mtblog__content {
padding: 0;
position: inherit;
}
& .mtblog__title {
font-size: 24px;
line-height: 34px;
}
& .mtblog__meta {
& a {
color: #000;
}
}
& .mtblog__thumb {
flex: 0 0 auto;
@media #{$xs} {
flex: auto;
margin-right: 0px;
}
}
}
}
}
}