.blog-carousel-section .filter-buttons {
padding: clamp(5px, 1.5rem, 15px) clamp(7.5px, 1.5rem, 15px);
border-radius: 30px;
transition: 0.5s ease;
}
.blog-carousel-section .filter-buttons:hover {
background-color: var(--white);
}
.blog-carousel-section .filter-buttons.active {
background-color: var(--white);
}
.blog-carousel-section .filter-buttons:not(.active):before {
width: 0;
}
.blog-carousel-section .filter-buttons:before {
content: "";
width: clamp(12px, 2.3rem, 23px);
height: clamp(12px, 2.3rem, 23px);
background-image: url(//akal.life/wp-content/uploads/2024/04/check.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
display: block;
margin-right: clamp(5px, 1rem, 10px);
transition: 0.5s ease;
}
.blog-carousel-section .swiper {
width: 100%;
height: 100%;
}
.blog-carousel-section .swiper-slide {
padding: clamp(10px, 2rem, 20px);
background-color: var(--white);
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 10px;
user-select: none;
}
.blog-carousel-section .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
height: clamp(150px, 27.5rem, 275px);
}
.blog-carousel-section .swiper-container {
margin-top: clamp(25px, 5rem, 50px);
}
.blog-carousel-section .main-btn {
margin: 0 clamp(10px, 2rem, 20px);
user-select: none;
}
.blog-carousel-section .swiper-slide {
transition: opacity 0.5s ease;
}
.blog-carousel-section .swiper-slide:not(.swiper-slide-active, .swiper-slide-prev, .swiper-slide-next) {
opacity: 0;
}
.blog-carousel-section .entry-content * {
font-size: clamp(12px, 1.4rem, 14px);
line-height: 1.4
}
.blog-carousel-section .details {
font-size: clamp(12px, 1.4rem, 14px);
}
.blog-carousel-section .date-holder {
margin-bottom: 5px;
margin-top: clamp(15px, 3rem, 30px);
}
.blog-carousel-section :is(.location-holder, .date-holder) svg {
margin-right: clamp(5px, 1rem, 10px);
width: clamp(12px, 3.4rem, 34px);
height: clamp(12px, 3.4rem, 34px);
}
.blog-carousel-section :is(.location-holder, .date-holder) svg path {
transition: 0.5s ease;
}
.blog-carousel-section .swiper-slide:hover :is(.location-holder, .date-holder) svg path {
fill: var(--primary-color);
}
.blog-carousel-section .swiper-slide .blog-heading {
display: -webkit-box;
max-width: 100%;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: clamp(15px, 3rem, 30px);
transition: 0.5s ease;
}
.blog-carousel-section .swiper-slide:hover .blog-heading {
color: var(--primary-color);
}
.blog-carousel-section .swiper-slide .entry-content {
display: -webkit-box;
max-width: 100%;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: clamp(7px ,1.5rem, 15px);
margin-bottom: clamp(7px, 3.5rem, 35px);
}
.blog-carousel-section .swiper-slide .entry-content figure {
display: none;
}
.blog-carousel-section .swiper-slide .entry-content * {
color: var(--text-color);
font-weight: 300;
}
.blog-carousel-section .swiper-pagination {
position: relative;
margin-top: clamp(15px ,4rem, 40px);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.blog-carousel-section .swiper-pagination-bullet {
transition: 0.5s ease;
background-color: var(--primary-color);
opacity: 0.3;
}
.blog-carousel-section .swiper-pagination-bullet-active {
width: clamp(12px, 1.8rem, 18px);
height: clamp(12px, 1.8rem, 18px);
background-color: var(--primary-color);
opacity: 1;
}
.blog-carousel-section .arrow-holder {
border-radius: 50%;
background-color: var(--white);
width: clamp(35px, 6.5rem, 65px);
height: clamp(35px, 6.5rem, 65px);
transition: 0.5s ease;
}
.blog-carousel-section .arrow-holder .arrow {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.5s ease;
}
.blog-carousel-section .arrow-holder .hidden-arrow {
left: 100%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.5s ease;
opacity: 0;
}
.blog-carousel-section .arrow-holder.next .hidden-arrow {
left: 0;
}
body:not(.touch) .blog-carousel-section .arrow-holder:hover {
background-color: var(--primary-color);
transform: scale(1.1);
}
body:not(.touch) .blog-carousel-section .arrow-holder:hover .hidden-arrow {
left: 50%;
opacity: 1;
}
body:not(.touch) .blog-carousel-section .arrow-holder.next:hover .arrow {
left: 100%;
}
body:not(.touch) .blog-carousel-section .arrow-holder:hover .arrow {
left: 0%;
opacity: 0;
}
.blog-carousel-section .swiper-button-disabled {
pointer-events: none;
opacity: 0.5;
}
.blog-carousel-section .post-tags {
top: clamp(15px, 3rem, 30px);
left: clamp(15px, 3rem, 30px);
}
.blog-carousel-section .post-tags span {
font-size: clamp(7px, 1.4rem, 14px);
border-radius: 100px;
background-color: var(--body-bg);
padding: clamp(5px, 1rem, 10px) clamp(10px, 2rem, 20px);
margin-right: 5px;
}
.blog-carousel-section .post-thumbnail:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
display: block;
background: linear-gradient(180deg, rgba(184, 37, 218, 0.00) 0%, rgba(184, 37, 218, 0.62) 100%);
opacity: 0;
transition: 0.5s ease;
pointer-events: none;
transition-delay: 0.3s;
z-index: 2;
}
.blog-carousel-section .post-thumbnail {
border-radius: 10px;
}
.blog-carousel-section .swiper-slide:hover .post-thumbnail:before {
opacity: 0.6;
}
.blog-carousel-section .post-thumbnail img {
transition: var(--main-transition);
}
.blog-carousel-section .swiper-slide:hover .post-thumbnail img {
transform: scale(1.15);
} @media (max-width: 767px) {
.blog-carousel-section .row {
display: block;
}
.blog-carousel-section .row .column1 {
margin-bottom: 5rem;
}
.blog-carousel-section .row .column2 {
justify-content: space-between;
}
.blog-carousel-section {
padding-top: 6rem;
padding-bottom: 10rem;
}
}