@charset "utf-8";
/* CSS Document */
 .banner {position:relative;width:100%;height:120vh;overflow:hidden;}
    .banner-slide {position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;background-size:cover;background-position:center;transition:opacity 1s ease-in-out;}
    .banner-slide.active {opacity:1;}
    .banner-content {
  position: absolute;
  bottom: 20%;
  right: 10%;
  color: #fff;
  max-width: 600px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-in-out;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  text-align: right;
  /* prevent clicks on hidden content */
  pointer-events: none;
}

.banner-content.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* clickable only when active */
}
    .banner-content h1 {font-size:60px;margin-bottom:20px;}
    .banner-content p {font-size:20px;margin-bottom:30px;}
    .btn {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  font-size: 20px;
  border: 1px solid #ffffff;
  margin-top: 10px;
  overflow: hidden;
  z-index: 1;
  font-family: 'Cairo', 'Amiri', sans-serif;
		font-weight: bold

}

/* Background overlay */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #ff5c23;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
  z-index: -1;
  border-radius: 30px;
}

.btn:hover::before {
  transform: scaleX(1);
}

    /* Banner arrows */
    .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #fff;
    background: rgba(0,0,0,0.0);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    user-select: none;
    transition: 0.3s;
    border: 1px solid #ffffff;
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
}

    .nav-arrow:hover {background:var(--primary-color);}
    .arrow-left {left:20px;}
    .arrow-right {right:20px;}

    /* Dots */
    .dots {position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10;}
    .dot {width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.6);cursor:pointer;transition:0.3s;}
    .dot.active {background:#ff7846;}

    /* Responsive tweaks */
    @media(max-width:992px){
		.banner-content h1{font-size:40px;}.banner-content p{font-size:18px;}.btn{padding:10px 25px;}}
    @media(max-width:768px){
		.banner-content {
			text-align: center;
			bottom: 30%;
		}
		.nav-arrow{display: none}
      .banner-content{bottom:15%;left:5%;max-width:90%;}
      .banner-content h1{font-size:32px;}
      .banner-content p{font-size:16px;}
      .nav-arrow{font-size:26px;padding:8px;}
      .dot{width:10px;height:10px;}
      .horizontal-scroll-container{padding:20px 5%;}
      .content-card{width:300px;}
		.banner {height:450px}
    }
    @media(max-width:480px){
		.banner-content {
			text-align: center;
			bottom: 30%;
		}
		.nav-arrow{display: none}
      .banner-content h1{font-size:26px;}
      .banner-content p{font-size:14px;}
      .btn{padding:8px 20px;font-size:14px;}
    }