/* Main Slider Layout */
.portfolio-slider-section {
    padding: 60px 0 !important;
    overflow: hidden !important;
}

/* Responsive Desktop Mockup Container */
.desktop-mockup-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
}

/* Monitor Frame Image */
.monitor-frame {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Inner Screen Area */
.screen-viewport
 {
    position: absolute !important;
    top: 3.6% !important;
    left: 2.8% !important;
    width: 94.4% !important;
    height: 73.5% !important;
    z-index: 1 !important;
    overflow: hidden !important;
    background-color: #000 !important;
}

/* Featured Image Fitting */
.screen-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: top center !important;
    display: block !important;
}

/* Typography & Layout Tweaks */
.portfolio-title {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
	color:#ea671b;
}

.portfolio-excerpt {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #ddd !important;
}

/* Owl Navigation Buttons */
.portfolio-slider .owl-nav button.owl-prev,
.portfolio-slider .owl-nav button.owl-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 45px !important;
    height: 45px !important;
    background: #ffa800 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
}

.portfolio-slider .owl-nav button.owl-prev {
    left: 10px !important;
}

.portfolio-slider .owl-nav button.owl-next {
    right: 10px !important;
}

/* Arrow Hover State (Changes color to dark dark/black on hover) */
.portfolio-slider .owl-nav button.owl-prev:hover,
.portfolio-slider .owl-nav button.owl-next:hover {
    background: #1a1a1a !important; /* Change color here if you want a different hover color */
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Arrow Icon Styles & Hover */
.portfolio-slider .owl-nav button.owl-prev i,
.portfolio-slider .owl-nav button.owl-next i {
    color: #ffffff !important;
    transition: color 0.3s ease-in-out !important;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
    .portfolio-content {
        text-align: center !important;
        margin-top: 20px !important;
    }

    .portfolio-title {
        font-size: 1.75rem !important;
    }

    .portfolio-slider .owl-nav button.owl-prev {
        left: -10px !important;
    }

    .portfolio-slider .owl-nav button.owl-next {
        right: -10px !important;
    }
}

@media (max-width: 576px) {
    .portfolio-slider-section {
        padding: 30px 0 !important;
    }

    .portfolio-title {
        font-size: 1.4rem !important;
    }

    .portfolio-slider .owl-nav button.owl-prev,
    .portfolio-slider .owl-nav button.owl-next {
        width: 35px !important;
        height: 35px !important;
        font-size: 14px !important;
    }
}


.owl-carousel .owl-stage-outer
{
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    height: 290px !important;
}



/* ============================================================
   ACE PORTFOLIO SLIDER
============================================================ */

.ace-portfolio-slides {
	position: relative;
	width: 100%;
}


/* ============================================================
   SLIDES
============================================================ */

.ace-portfolio-slide {
	display: none;
	width: 100%;
	opacity: 0;
	transform: translateY(15px);
}


/* ACTIVE SLIDE */

.ace-portfolio-slide.is-active {
	display: block;

	animation: acePortfolioFade 0.8s ease forwards;
}


/* ============================================================
   SMOOTH SLIDE ANIMATION
============================================================ */

@keyframes acePortfolioFade {

	from {
		opacity: 0;
		transform: translateY(15px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}

}

.ace-portfolio-controls{
    margin: 10px auto;
    text-align: center;
}