/* Mobile Responsive Fixes for Portfolio-5 Slider */

/* Improve text visibility on mobile with dark overlay */
@media (max-width: 768px) {
    .portfolio-5__item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
  
        z-index: 1;
    }

    /* Ensure content appears above the overlay */
    .portfolio-5__content {
        z-index: 10 !important;
    }

    /* Center content vertically on mobile instead of top positioning */
    .portfolio-5__content {
        top: 70% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        bottom: auto !important;
        width: 90%;
        max-width: 100%;
        /* text-align: center; */
    }

    /* Add text shadow for better readability */
    .portfolio-5__content-title {

        font-size: 48px !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Ensure description text doesn't overflow */
    .portfolio-5__desc {
        width: 100% !important;
        font-size: 18px !important;
        margin-top: 16px !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Fix list items on mobile */
    .portfolio-5__list {
        width: 100% !important;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px !important;
    }

    /* Ensure CTA button is visible */
    .cta-button {
        display: inline-block;
        margin-top: 20px;
        text-shadow: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* Prevent horizontal overflow */
    .portfolio-5,
    .portfolio-5 .swiper,
    .portfolio-5__item {
        max-width: 100vw !important;
        /* overflow-x: hidden !important; */
    }

    /* Ensure slide content wrapper doesn't overflow */
    .slide-content {
        max-width: 100vw !important;
        /* overflow: hidden !important; */
    }

    /* Fix grid mask overflow */
    .grid-mask {
        max-width: 100vw !important;
        /* overflow: hidden !important; */
    }

    /* Ensure container doesn't cause overflow */
    .portfolio-5__item .container {
        max-width: 100% !important;
        padding: 0 !important;
        /* overflow: hidden !important; */
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    /* Move content higher on small screens */
    .portfolio-5__content {
        top: 50% !important;
    }

    .portfolio-5__content-title {
        font-size: 42px !important;
        line-height: 1.2 !important;
    }

    .portfolio-5__desc {
        font-size: 16px !important;
        font-weight: 500;
        margin-top: 12px !important;
    }

    /* Adjust navigation arrows on very small screens */
    .portfolio-5__slider__arrow {
        left: 15px !important;
        bottom: 15% !important;
        gap: 10px !important;
    }

    .portfolio-5 .portfolio-5-pagination {
        left: 15px !important;
        bottom: 15% !important;
        gap: 8px !important;
    }

    .portfolio-5 .swiper-pagination-bullet {
        width: 50px !important;
        height: 8px !important;
    }
}

/* Tablet adjustments */
@media (min-width: 481px) and (max-width: 768px) {
    .portfolio-5__content-title {
        font-size: 48px !important;
    }

    .portfolio-5__desc {
        font-size: 19px !important;
    }
}

/* Fix for landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .portfolio-5__content {
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .portfolio-5__content-title {
        font-size: 32px !important;
        margin-bottom: 8px !important;
    }

    .portfolio-5__desc {
        font-size: 15px !important;
        margin-top: 8px !important;
    }

    .portfolio-5__slider__arrow {
        bottom: 20px !important;
    }

    .portfolio-5 .portfolio-5-pagination {
        bottom: 20px !important;
    }
}