.ikal-blog-section-inner {
width: 100%;
box-sizing: border-box;
padding: 65px 0 75px 0;
}
.ikal-blog-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 34px;
gap: 20px;
width: 100%;
box-sizing: border-box;
padding: 0 10px;
}
.ikal-blog-title-group {
max-width: 680px;
}
.ikal-blog-title {
font-family: 'Montserrat', sans-serif;
font-size: 32px;
font-weight: 700;
color: #000924;
margin: 0 0 10px 0;
line-height: 1.2;
letter-spacing: -0.3px;
}
.ikal-blog-subtitle {
font-family: 'Montserrat', sans-serif;
font-size: 14.5px;
font-weight: 400;
color: #64748b;
line-height: 1.5;
margin: 0;
}
.ikal-blog-view-all {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 600;
color: #0066da;
text-decoration: none;
white-space: nowrap;
transition: all 0.25s ease;
padding-bottom: 4px;
}
.ikal-blog-view-all:hover {
color: #004bb0;
}
.ikal-blog-view-arrow {
transition: transform 0.25s ease;
}
.ikal-blog-view-all:hover .ikal-blog-view-arrow {
transform: translateX(5px);
}
.ikal-blog-carousel-wrap {
position: relative;
width: 100%;
padding: 8px 52px;
box-sizing: border-box;
}
.ikal-blog-swiper {
overflow: hidden;
padding: 10px 4px 24px 4px !important;
}
.ikal-blog-slide {
height: auto !important;
display: flex !important;
box-sizing: border-box;
}
.ikal-blog-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
box-shadow: 0 2px 8px rgba(0, 20, 50, 0.03);
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.ikal-blog-card:hover {
transform: translateY(-6px);
border-color: rgba(0, 102, 218, 0.35);
box-shadow: 0 12px 28px rgba(0, 102, 218, 0.18), 0 4px 12px rgba(0, 102, 218, 0.08);
}
.ikal-blog-card-link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.ikal-blog-img-wrap {
position: relative;
width: 100%;
height: 180px;
overflow: hidden;
background: #e2e8f0;
}
.ikal-blog-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.ikal-blog-card:hover .ikal-blog-img {
transform: scale(1.06);
}
.ikal-blog-body {
padding: 18px 20px 20px 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
box-sizing: border-box;
}
.ikal-blog-category {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 600;
color: #0066da;
margin-bottom: 8px;
display: block;
letter-spacing: 0.2px;
}
.ikal-blog-card-title {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 700;
color: #000924;
line-height: 1.38;
margin: 0 0 14px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 42px;
transition: color 0.2s ease;
}
.ikal-blog-card:hover .ikal-blog-card-title {
color: #0066da;
}
.ikal-blog-meta {
margin-top: auto;
display: flex;
align-items: center;
padding-top: 4px;
}
.ikal-blog-date {
font-family: 'Montserrat', sans-serif;
font-size: 12.5px;
font-weight: 400;
color: #94a3b8;
}
/* Navigation chevrons (matching banner and other carousels) */
.ikal-blog-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff !important;
background: #081a2e !important;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(8, 26, 46, 0.16);
padding: 0;
}
.ikal-blog-arrow:hover {
background: #0066da !important;
border-color: #0066da !important;
color: #ffffff !important;
transform: translateY(-50%) scale(1.12);
box-shadow: 0 6px 18px rgba(0, 102, 218, 0.35);
}
.ikal-blog-arrow svg {
stroke: #ffffff !important;
}
.ikal-blog-prev {
left: 0;
}
.ikal-blog-next {
right: 0;
}
@media (max-width: 900px) {
.ikal-blog-header {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.ikal-blog-carousel-wrap {
padding: 8px 30px;
}
}
@media (max-width: 600px) {
.ikal-blog-title {
font-size: 26px;
}
.ikal-blog-carousel-wrap {
padding: 8px 0px;
}
.ikal-blog-arrow {
width: 38px;
height: 38px;
}
}
(function() {
function initBlogSwiper() {
if (typeof Swiper !== 'undefined') {
new Swiper('.ikal-blog-swiper', {
slidesPerView: 1.15,
spaceBetween: 16,
loop: true,
speed: 550,
autoplay: false,
navigation: {
nextEl: '.ikal-blog-next',
prevEl: '.ikal-blog-prev'
},
breakpoints: {
560: {
slidesPerView: 2,
spaceBetween: 18
},
860: {
slidesPerView: 3,
spaceBetween: 22
},
1100: {
slidesPerView: 4,
spaceBetween: 24
}
}
});
} else {
setTimeout(initBlogSwiper, 150);
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initBlogSwiper);
} else {
initBlogSwiper();
}
})();
