.elementor-11561 .elementor-element.elementor-element-5b50f8b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11561 .elementor-element.elementor-element-d30e851{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-1px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11561 .elementor-element.elementor-element-d30e851:not(.elementor-motion-effects-element-type-background), .elementor-11561 .elementor-element.elementor-element-d30e851 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#03060A;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area .portfolio-slider-area .owl-nav button:hover{background-color:transparent;background-image:linear-gradient(90deg, #FF4308 0%, #FB8500 100%);}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area .portfolio-slider-area .portfolio-boxarea .arrow-content .arrow a span{background-color:transparent;background-image:linear-gradient(90deg, #FF4308 0%, #FB8500 100%);color:#FFFFFF;}.elementor-11561 .elementor-element.elementor-element-0332858{z-index:0;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area.sp6{padding:120px 0px 120px 0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area{height:950px;}.elementor-11561 .elementor-element.elementor-element-0332858 .heading1 h5{color:#FB8500;margin:0px 0px 24px 0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .heading1 h2{color:#FFFFFF;margin:0px 0px 0px 0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area .portfolio-slider-area .owl-nav button{color:#FFFFFF;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area .portfolio-slider-area .portfolio-boxarea .img1 img{height:510px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio-slider2-boxarea .portfolio-boxarea .img1 img{height:510px;}.elementor-11561 .elementor-element.elementor-element-0332858 .project-inner-section-area .tab-content .tab-pane .all-project-area .portfolio-boxarea .img1 img{height:510px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio-header.heading1{margin:0px 0px 60px 0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio-slider2-boxarea .portfolio-boxarea .content-area{margin:0px 0px 60px 0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .project-inner-section-area .tab-content .tab-pane .all-project-area .portfolio-boxarea{margin:0px 0px 60px 0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio-slider2-boxarea .portfolio-boxarea .content-area .arrow a i{color:#FFFFFF;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio-slider2-boxarea .portfolio-boxarea .content-area .arrow a svg path{stroke:#FFFFFF;}.elementor-11561 .elementor-element.elementor-element-0332858 .project-inner-section-area .tab-content .tab-pane .all-project-area .portfolio-boxarea .arrow-content .arrow a span{stroke:#FFFFFF;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area .portfolio-slider-area .portfolio-boxarea .arrow-content .content-area p{color:#000000;margin:0px 0px 16px 0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio-slider2-boxarea .portfolio-boxarea .content-area .content p{color:#000000;margin:0px 0px 16px 0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .project-inner-section-area .tab-content .tab-pane .all-project-area .portfolio-boxarea .arrow-content .content-area p{color:#000000;margin:0px 0px 16px 0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area .portfolio-slider-area .portfolio-boxarea .arrow-content .content-area a{color:#000000;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio-slider2-boxarea .portfolio-boxarea .content-area .content a{color:#000000;}.elementor-11561 .elementor-element.elementor-element-0332858 .project-inner-section-area .tab-content .tab-pane .all-project-area .portfolio-boxarea .arrow-content .content-area a{color:#000000;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area .portfolio-slider-area .portfolio-boxarea .arrow-content .content-area a:hover{color:#000000;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio-slider2-boxarea .portfolio-boxarea .content-area .content a:hover{color:#000000;}.elementor-11561 .elementor-element.elementor-element-0332858 .project-inner-section-area .tab-content .tab-pane .all-project-area .portfolio-boxarea .arrow-content .content-area a:hover{color:#000000;}.elementor-11561 .elementor-element.elementor-element-6a25e7c{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11561 .elementor-element.elementor-element-48c025c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11561 .elementor-element.elementor-element-7d7d3c0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1199px){.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area{height:960px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area .portfolio-slider-area .portfolio-boxarea .img1 img{height:510px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio-slider2-boxarea .portfolio-boxarea .img1 img{height:510px;}.elementor-11561 .elementor-element.elementor-element-0332858 .project-inner-section-area .tab-content .tab-pane .all-project-area .portfolio-boxarea .img1 img{height:510px;}}@media(max-width:991px){.elementor-11561 .elementor-element.elementor-element-d30e851{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area.sp6{padding:80px 0px 80px 0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area{height:920px;}}@media(max-width:767px){.elementor-11561 .elementor-element.elementor-element-d30e851{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area.sp6{padding:60px 0px 60px 0px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area{height:800px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area .portfolio-slider-area .portfolio-boxarea .img1 img{height:450px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio-slider2-boxarea .portfolio-boxarea .img1 img{height:450px;}.elementor-11561 .elementor-element.elementor-element-0332858 .project-inner-section-area .tab-content .tab-pane .all-project-area .portfolio-boxarea .img1 img{height:450px;}}@media(max-width:575px){.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area{height:690px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio1-section-area .portfolio-slider-area .portfolio-boxarea .img1 img{height:300px;}.elementor-11561 .elementor-element.elementor-element-0332858 .portfolio-slider2-boxarea .portfolio-boxarea .img1 img{height:300px;}.elementor-11561 .elementor-element.elementor-element-0332858 .project-inner-section-area .tab-content .tab-pane .all-project-area .portfolio-boxarea .img1 img{height:300px;}}/* Start custom CSS for container, class: .elementor-element-d30e851 */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Slider Arrows</title>

<style>
  body {
    background: #0b0d10;
    color: #fff;
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 40px;
  }

  .slider-container {
    position: relative;
    width: 80%;
    max-width: 900px;
    margin: auto;
    overflow: hidden;
  }

  .slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .slide {
    min-width: 100%;
  }

  .slide img {
    width: 100%;
    border-radius: 12px;
  }

  /* Arrow buttons */
  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #FB8500;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    z-index: 10;
    transition: all 0.3s ease;
  }

  .arrow:hover {
    background: #e47600;
  }

  .arrow.left {
    left: 10px;
  }

  .arrow.right {
    right: 10px;
  }
</style>
</head>

<body>
  <h2>OUR PORTFOLIO SHOWCASE</h2>
  
  <div class="slider-container">
    <button class="arrow left">&#10094;</button>
    <div class="slides">
      <div class="slide"><img src="https://via.placeholder.com/900x500/FFB6C1/000000?text=Slide+1"></div>
      <div class="slide"><img src="https://via.placeholder.com/900x500/87CEFA/000000?text=Slide+2"></div>
      <div class="slide"><img src="https://via.placeholder.com/900x500/98FB98/000000?text=Slide+3"></div>
    </div>
    <button class="arrow right">&#10095;</button>
  </div>

<script>
  const slides = document.querySelector('.slides');
  const slide = document.querySelectorAll('.slide');
  let index = 0;

  document.querySelector('.arrow.left').addEventListener('click', () => {
    index = (index <= 0) ? slide.length - 1 : index - 1;
    slides.style.transform = `translateX(${-index * 100}%)`;
  });

  document.querySelector('.arrow.right').addEventListener('click', () => {
    index = (index >= slide.length - 1) ? 0 : index + 1;
    slides.style.transform = `translateX(${-index * 100}%)`;
  });
</script>
</body>
</html>/* End custom CSS */