/* Home Module Custom Styles */
body{
 color:rgb(255, 255, 255) !important;
}

/* Carousel indicators styling */
.carousel-indicators [data-bs-target]{
 background-color:#AEAEB2;
 border:0.5px solid #AEAEB2;
 opacity:1;
}

.carousel-indicators [data-bs-target].active{
 background-color:#8E8E93;
 border-color:#8E8E93;
 opacity:1;
}

/* Responsive carousel images */
.carousel-responsive-img{
 height:auto;
 min-height:400px;
 max-height:600px;
 object-fit:contain;
 object-position:center;
 transform:scale(0.9);
}

@media (max-width:768px){
 .carousel-responsive-img{
 min-height:300px;
 max-height:600px;
 transform:scale(0.9);
}
}

/* Background brush section */
.section-bg-brush{
 background:url('../images/bg-brush.png') center center / cover no-repeat;
 background-size:120%;
 background-repeat:no-repeat;
 background-position:center;
 min-height:1700px;
 display:flex;
 align-items:center;
 justify-content:center;
}

/* Wider container for articles-swiper */
.container-wide-articles{
 max-width:100%;
 width:85vw;
}

/* Add padding to articles-swiper only for desktop */
@media (min-width:992px){
 .articles-swiper{
 padding:30px;
}
}

@media (max-width:1200px){
 .section-bg-brush{
 background-size:420%;
}
 
 .container-wide-articles{
 width:95vw;
 padding-left:0;
 padding-right:0;
}
}

/* Article cards equal height */
.articles-swiper .swiper-slide{
 height:auto;
}

.articles-swiper .swiper-slide .card{
 height:470px;
 display:flex;
 flex-direction:column;
 max-width:270px;
 margin:50px auto 0 auto;
 overflow:visible;
 padding-top:150px;
}

.articles-swiper .swiper-slide .card-body{
 flex-grow:1;
 display:flex;
 flex-direction:column;
}

.articles-swiper .swiper-slide .card-body .card-text{
 flex-grow:1;
 margin-bottom:1rem;
}

.articles-swiper .swiper-slide .card-body .row{
 margin-top:auto;
}

/* Rounded circular images for article cards */
.articles-swiper .card-image-container{
 display:flex;
 justify-content:center;
 align-items:center;
 height:350px;
 width:350px;
 margin:0 auto -200px auto;
 position:relative;
 overflow:visible;
 z-index:10;
}

.articles-swiper .card-image-round{
 width:300px;
 height:300px;
 border-radius:50%;
 background-size:cover !important;
 background-position:center !important;
 background-repeat:no-repeat !important;
 transition:transform 0.3s ease;
 position:relative;
 z-index:10;
}

.articles-swiper .card-image-round:hover{
 transform:scale(1.05);
}

/* pharmacy image smaller size */
.pharmacy-small{
 max-width:300px;
 height:auto;
 display:inline-block;
}

@media (max-width:768px){
 .pharmacy-small{
 max-width:180px;
}
 
 .hyfolic-mobile{
 max-width:300px;
 height:auto;
 display:inline-block;
}
 
 .mobile-display-5{
 font-size:1.75rem !important;
}
}

/* chevron arrow for swiper navigation */
.custom-swiper-button{
 background:none !important;
 box-shadow:none !important;
 border:none !important;
 width:100px;
 height:100px;
 display:flex;
 align-items:center;
 justify-content:center;
 position:absolute;
 top:50%;
 z-index:20;
 transform:translateY(-50%);
 cursor:pointer;
 padding:0;
}

.chevron-arrow{
 width:60px;
 height:60px;
 object-fit:contain;
 filter:drop-shadow(0 2px 6px rgba(0,0,0,0.12));
 transition:transform 0.2s;
}

.chevron-arrow:hover{
 transform:scale(1.10);
}

/* Hide Swiper default arrow icons */
.swiper-button-next::after,
.swiper-button-prev::after{
 display:none !important;
}

@media (max-width:768px){
 .articles-swiper .card-image-container{
 height:240px;
 width:280px;
 margin:0 auto -160px auto;
}
 
 .articles-swiper .card-image-round{
 width:260px;
 height:260px;
}
 
 .articles-swiper .swiper-slide .card{
 max-width:240px;
 height:480px;
 margin:50px auto 0 auto;
 padding-top:120px;
}
 
 .custom-swiper-button{
 width:50px;
 height:50px;
}
 
 .chevron-arrow{
 width:50px;
 height:50px;
}
}