/* banner */
/* =====================================
   Banner Overlay Layer (PRO VERSION)
===================================== */

.banner-four-main-wrapper {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* DARK OVERLAY */
.banner-four-main-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55); /* transparency level */
    z-index: 1;
}

/* Keep content ABOVE overlay */
.banner-four-content {
    position: relative;
    z-index: 2;
}
.logo-area a img {
    height: 100px;
}

.service-rotator {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.service-rotator .label {
    opacity: 0.7;
}

.service-rotator a {
    color: #FF5E14;
    font-weight: 600;
    text-decoration: none;
    transition: all .4s ease;
}

.service-rotator a.fade {
    opacity: 0;
    transform: translateY(5px);
}

.service-rotator a.show {
    opacity: 1;
    transform: translateY(0);
}


/* breadcrumb */

.bg-image-breadcrumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* BLACK TRANSPARENT LAYER */
.bg-image-breadcrumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55); /* adjust darkness */
    z-index: -1;
}

/* select styles */
/* ================================
   Modern Select Styling (Banner Form)
================================== */
.banner-contact-form .single-wrapper select{
  width:100%;
  height:54px;
  padding:0 52px 0 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.10);
  color:#fff;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.2px;
  outline:none;
  cursor:pointer;

  /* remove default select UI */
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

  /* smooth feel */
  transition:all .25s ease;
  backdrop-filter: blur(10px);
}

/* Placeholder option color (some browsers) */
.banner-contact-form .single-wrapper select option[value=""]{
  color:#222;
}

/* Dropdown options (when opened) */
.banner-contact-form .single-wrapper select option{
  color:#111;
  background:#fff;
  font-weight:600;
}

/* Hover */
.banner-contact-form .single-wrapper select:hover{
  border-color:rgba(255,94,20,0.65);
  box-shadow:0 10px 24px rgba(0,0,0,0.18);
  transform:translateY(-1px);
}

/* Focus (keyboard / click) */
.banner-contact-form .single-wrapper select:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(255,94,20,0.22);
  background:rgba(255,255,255,0.14);
}

/* Disabled (if ever used) */
.banner-contact-form .single-wrapper select:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* ================================
   Custom Arrow Icon
================================== */
.banner-contact-form .single-wrapper{
  position:relative;
}

.banner-contact-form .single-wrapper:has(select)::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:12px;
  height:12px;
  border-right:2px solid rgba(255,255,255,0.9);
  border-bottom:2px solid rgba(255,255,255,0.9);
  transform:translateY(-60%) rotate(45deg);
  pointer-events:none;
  transition:transform .25s ease, border-color .25s ease;
}

.banner-contact-form .single-wrapper:has(select):hover::after{
  border-color:var(--color-primary);
  transform:translateY(-50%) rotate(45deg);
}

/* ================================
   Optional: Match Inputs/Textarea
   (keeps the whole form consistent)
================================== */
.banner-contact-form .single-wrapper input,
.banner-contact-form .single-wrapper textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.10);
  color:#fff;
  font-size:15px;
  font-weight:600;
  outline:none;
  transition:all .25s ease;
  backdrop-filter: blur(10px);
}

.banner-contact-form .single-wrapper input{
  height:54px;
  padding:0 16px;
}

.banner-contact-form .single-wrapper textarea{
  min-height:120px;
  padding:14px 16px;
  resize:vertical;
}

.banner-contact-form .single-wrapper input::placeholder,
.banner-contact-form .single-wrapper textarea::placeholder{
  color:rgba(255,255,255,0.75);
  font-weight:500;
}

.banner-contact-form .single-wrapper input:focus,
.banner-contact-form .single-wrapper textarea:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(255,94,20,0.22);
  background:rgba(255,255,255,0.14);
}

/* benefits section */
/* ===============================
HOME BENEFITS
================================*/
.home-benefits-area{
    background: var(--primary-100);
    position: relative;
    overflow: hidden;
}

.section-title{
    font-size: var(--h2);
    color: var(--color-heading-1);
    font-weight: var(--p-bold);
}

.benefit-desc{
    color: var(--color-body);
    margin-top:15px;
}

/* CARD */
.benefit-card{
    background: var(--color-white);
    padding:40px 30px;
    border-radius:14px;
    text-align:center;
    transition:var(--transition);
    box-shadow:var(--shadow-1);
    position:relative;
    overflow:hidden;
}

/* glow animation */
.benefit-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,94,20,.15),
        transparent
    );
    opacity:0;
    transition:.5s;
}

.benefit-card:hover::before{
    opacity:1;
}

.benefit-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

/* ICON */
.benefit-card i{
    font-size:42px;
    color:var(--primary-600);
    margin-bottom:20px;
    transition:.4s;
}

.benefit-card:hover i{
    transform:scale(1.2) rotate(5deg);
}

/* COUNTERS */
.counter-wrapper{
    background:var(--color-white);
    padding:50px;
    border-radius:14px;
    margin-top:80px;
    box-shadow:var(--shadow-1);
}

.counter{
    font-size:48px;
    color:var(--primary-600);
    font-weight:700;
}


/* other page footer */

.footer-one{
    background-color: var(--color-heading-1);
}


/* responsive */

@media (max-width: 768px) {
    .main-image{
        height: 700px;
    }

    .rounded-player-2.position-right-bottom{
        right: 130px;
    }

    .shape.two{
        right: 117px !important;
    }

    .icon{
        transform: rotate(0) !important;
    }

    h2{
        font-size: 30px !important;
    }

    .label.before{
        display: none;
    }

    .label.after{
        display: none;
    }
}

@media (max-width: 426px) {
    h2{
        font-size: 26px !important;
    }

    .main-image{
        height: 550px;
    }

    .rounded-player-2.position-right-bottom{
        right: 0px;
    }

    .shape.two{
        right: 0px !important;
    }
}

@media (max-width: 376px) {
    h1{
        font-size: 25px !important;
    }
    h2{
        font-size: 20px !important;
    }

    h3{
        font-size: 19px     !important;
    }

    h4{
        font-size: 18px !important;
    }

    .main-image{
        height: 450px;
    }
}

@media (max-width: 320px) {
    h1{
        font-size: 22px !important;
    }
    h2{
        font-size: 19px !important;
    }

    h3{
        font-size: 18px     !important;
    }

    h4, .accordion-one .accordion-item h2 button{
        font-size: 16px !important;
    }

    .main-image{
        height: 400px;
    }

    p, span, .next, .prev{
        font-size: 14px !important;
    }

}