@import url(./main.css);


/* Portfolio Section Mobile */

@media screen and (max-width: 768px) {
    .section-portfolio {
        display: none; /* Hides desktop portfolio on mobile */
    }
}

.swiper-container {
    padding: 5em; /* Add padding here instead of .swiper-wrapper */
    padding-bottom: 3em; /* Adjust content spacing inside */
}


/* Make sure the carousel container is positioned correctly */
/* .section-portfolio-mobile {
    position: relative; 
    overflow: hidden; 
    padding-bottom: 0em;
    border-top: 1px solid #373737;
    padding-bottom: 8em;
} */

.section-portfolio-mobile {
    position: relative;
    overflow: hidden;
    border-top: 1px solid #373737;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures content stays above the dots */
    height: auto; /* Ensures it adapts to content */
    padding-bottom: 8em; /* Only affects content, not dots */
}


/* Fix navigation arrows positioning */
.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translateY(-50%);
    z-index: 10; /* Ensures arrows appear on top */
    color: #e6db74  !important; /* Adjust color for visibility */
}

/* Fix dots (pagination) positioning */
.swiper-pagination {
    position: absolute;
    bottom: 20px; /* Keeps dots below the carousel */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* Change inactive dot color */
.swiper-pagination-bullet {
    margin: 0 6px !important;
    background-color: #9a99ff !important;  /* Change this to your preferred color */
    opacity: 0.5;
    width: 15px !important; /* Adjust size */
    height: 15px !important;
    transition: opacity 0.3s ease-in-out;
}

/* Change active dot color */
.swiper-pagination-bullet-active {
    margin: 0 6px !important;
    background-color: #e6db74 !important;
    opacity: 1;
}