
/* areas single page */
  :root{
    --new_projects-primary: var(--clr-primary);
    --new_projects-black:var(--clr-black);
    --new_projects-text:var(--clr-black);
    --new_projects-muted:#6b7280;
    --new_projects-border:#e5e7eb;
    --new_projects-white: var(--clr-white);
    --new_projects-radius:16px;
    --new_projects-max:1200px;
    --new_projects-shadow: 0 18px 45px rgba(11,15,20,.10);
  }

  .new_projects_container{max-width:var(--new_projects-max);margin:0 auto;padding:0 16px;}

  .new_projects_area_hero{padding:22px 0;}
  .new_projects_area_banner {
      display: flex;
      border-radius: var(--new_projects-radius);
      overflow: hidden;
      box-shadow: var(--new_projects-shadow);
      background: var(--new_projects-white);
      border: 1px solid rgba(229,231,235,.9);
      min-height: 440px;
  }

  /* Left */
  .new_projects_area_left{
    flex: 1 1 44%;
    padding: 26px;
    background: var(--new_projects-black);
    color: var(--new_projects-white);
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap: 12px;
  }

  .new_projects_area_left:before{
    content:"";
    position:absolute;
    inset:-90px auto auto -90px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(1,174,229,.34), rgba(1,174,229,0) 62%);
    pointer-events:none;
  }

  .new_projects_area_kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    font-weight: 900;
    font-size: 12px;
    letter-spacing:.2px;
  }
  .new_projects_area_dot{
    width:10px;height:10px;border-radius:50%;
    background: var(--new_projects-primary);
    box-shadow: 0 0 0 6px rgba(1,174,229,.18);
  }

  .new_projects_area_title{
    margin:0;
    font-size: clamp(22px, 3.2vw, 44px);
    line-height: 1.05;
    letter-spacing: -.6px;
    font-weight: 1000;
  }

  .new_projects_area_sub{
    margin:0;
    max-width: 48ch;
    color: rgba(255,255,255,.82);
    font-weight: 700;
    line-height: 1.55;
    font-size: 14.5px;
  }

  .new_projects_area_actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top: 6px;
  }

  .new_projects_area_btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color:#fff;
    font-weight: 1000;
    text-decoration:none;
    transition:.18s ease;
    cursor:pointer;
  }
  .new_projects_area_btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);}

  .new_projects_area_btn_primary{
    border:0;
    background: var(--new_projects-primary);
    color:#fff;
    box-shadow: 0 14px 30px rgba(1,174,229,.25);
  }
.new_projects_area_btn_primary:hover {box-shadow: 0 18px 40px rgba(1,174,229,.32);color: var(--clr-white);background: var(--clr-black);}

  /* Right image */
  .new_projects_area_right{
    flex: 1 1 56%;
    min-height: 240px;
    position:relative;
    background:
      linear-gradient(90deg, rgba(11,15,20,.55), rgba(11,15,20,0) 46%),
      url("https://images.unsplash.com/photo-1526481280695-3c687fd643ed?auto=format&fit=crop&w=1600&q=70");
    background-size: cover;
    background-position: center;
  }

  /* Clean accent line */
  .new_projects_area_right:after{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;
    width:4px;
    background: var(--new_projects-primary);
    opacity:.95;
  }

  /* Responsive */
  @media (max-width: 900px){
    .new_projects_area_banner{flex-direction:column;}
    .new_projects_area_left{padding:20px;}
    .new_projects_area_right{min-height: 220px;}
    .new_projects_area_sub{max-width: 80ch;}
  }
  @media (max-width: 520px){
    .new_projects_area_actions{width:100%;}
    .new_projects_area_btn{width:100%;}
    .new_projects_area_left:before{width:200px;height:200px;}
  }

  /* about area start ============================================================*/
  :root{
  --area_single_primary:#EF3C26;
  --area_single_black:#111;
  --area_single_white:#fff;
  --area_single_text:#5f5f5f;
}

.area_single_section{
  background:var(--area_single_white);
  padding:80px 20px;
  font-family:'Poppins',sans-serif;
  color:var(--area_single_black);
}

.area_single_container{
  max-width:1200px;
  width:100%;
  margin:0 auto;
}

.area_single_header{
  margin-bottom:30px;
}

.area_single_label{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--area_single_primary);
  margin-bottom:12px;
}

.area_single_title{
  font-size:38px;
  font-weight:600;
  margin:0;
  line-height:1.2;
  position:relative;
  padding-left:20px;
}

.area_single_title:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:28px;
  background:var(--area_single_primary);
  border-radius:4px;
}

.area_single_content{
  max-width:100%;
}

.area_single_content p{
  font-size:16px;
  font-weight:400;
  line-height:1.9;
  color:var(--area_single_text);
  margin-bottom:22px;
}

/* Tablet */
@media (max-width:992px){
  .area_single_section{
    padding:60px 20px;
  }

  .area_single_title{
    font-size:30px;
  }

  .area_single_content{
    max-width:100%;
  }
}

/* Mobile */
@media (max-width:600px){
  .area_single_section{
    padding:40px 16px;
  }

  .area_single_title{
    font-size:24px;
    padding-left:16px;
  }

  .area_single_title:before{
    height:22px;
  }

  .area_single_content p{
    font-size:15px;
    line-height:1.8;
  }
}
  /* about area end ===================================================================*/

  /* area slider start==================================================== */
  .wrap-anywhere {
    width: 1200px;
  }
  figure.box-slide img {
    border-radius: 30px;
    border: 1px solid;
}

section.area_single_slider {
    margin-bottom: 60px;
}
  section.area_single_slider {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box-slider{position:relative;width:100%;height:100%;min-height:0;overflow:hidden}
  .box-slider__viewport{width:100%;height:100%;overflow:hidden}
  .box-slider__track{
    display:flex;height:100%;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
    touch-action:pan-y;
  }
  .box-slide{flex:0 0 100%;min-width:100%;height:100%;margin:0}
  .box-slide img{width:100%;height:100%;object-fit:cover;display:block}

  /* ✅ pro arrows (SVG background, clean) */
  .box-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:44px;height:44px;border-radius:999px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(0,0,0,.28);
    cursor:pointer;
    backdrop-filter:blur(8px);
    display:grid;place-items:center;
    transition:transform .15s ease, background .15s ease, opacity .15s ease;
  }
  .box-nav:hover{background:rgba(0,0,0,.42);transform:translateY(-50%) scale(1.06)}
  .box-nav:active{transform:translateY(-50%) scale(.98)}
  .box-prev{left:14px}
  .box-next{right:14px}

  .box-prev::before,
  .box-next::before{
    content:"";
    width:18px;height:18px;
    background: no-repeat center/contain;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
  }
  .box-prev::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.5 5.5L8 12l6.5 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .box-next::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.5 5.5L16 12l-6.5 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* ✅ pro pagination: small dots, active becomes pill */
  .box-dots{
    position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
    display:flex;gap:8px;align-items:center;
    padding:8px 10px;border-radius:999px;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(8px);
  }
  .box-dot{
    width:8px;height:8px;border-radius:999px;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.22);
    cursor:pointer;
    transition:width .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
    opacity:.9;
  }
  .box-dot.is-active{
    width:26px;
    background:rgba(255,255,255,.92);
    border-color:rgba(255,255,255,.92);
    opacity:1;
  }

  /* responsive */
  @media (max-width:768px){
    .box-nav{width:40px;height:40px}
    .box-dots{bottom:10px}
  }
  /* area slider end==================================================== */

  /* faq start============================================= */
    :root {
        --acc_primary: #EF3C26;
        --acc_black: #0b0b0c;
        --acc_white: #ffffff;
        --acc_border: #e9eef3;
        --acc_shadow: 0 18px 55px rgba(16, 24, 40, .10);
        --acc_shadow_hover: 0 26px 85px rgba(16, 24, 40, .14);
        --acc_radius: 16px;
    }

    .area_faq_section {
        font-family: 'Poppins', sans-serif;
        background: var(--acc_white);
        padding: 40px 16px;
    }

    .area_faq_container {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
    }

    .area_faq_header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
    }

    .area_faq_title {
        margin: 0;
        font-size: 30px;
        font-weight: 600;
        color: var(--acc_black);
        letter-spacing: -.3px;
    }

    .area_faq_subtitle {
        margin: 6px 0 0 0;
        font-size: 14px;
        color: #5b6472;
        font-weight: 400;
    }

    /* Accordion list */
    .acc_list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .acc_item {
        background: var(--acc_white);
        border: 1px solid var(--acc_border);
        border-radius: var(--acc_radius);
        box-shadow: var(--acc_shadow);
        overflow: hidden;
        transition: box-shadow .25s ease, transform .25s ease;
    }

    .acc_item:hover {
        box-shadow: var(--acc_shadow_hover);
        transform: translateY(-1px);
    }

    /* Header button */
    .acc_btn {
        width: 100%;
        border: 0;
        background: transparent;
        padding: 18px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        cursor: pointer;
        text-align: left;
    }

    .acc_title {
        margin: 0;
        color: var(--acc_black);
        font-size: 18px;
        line-height: 1.35;
        font-weight: 600;
    }

    /* Icon */
    .acc_icon {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid var(--acc_border);
        background: #f7f7f8;
        display: grid;
        place-items: center;
        transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .acc_icon svg {
        width: 18px;
        height: 18px;
    }

    /* Content */
    .acc_panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s ease;
    }

    .acc_content {
        padding: 0 18px 18px 18px;
        color: #2b2f36;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;
    }

    /* Active state */
    .acc_item.is-open .acc_panel {
        max-height: 500px;
    }

    .acc_item.is-open .acc_icon {
        background: #fff;
        border-color: rgba(239, 60, 38, .35);
    }

    .acc_item.is-open .acc_icon svg path {
        stroke: var(--acc_primary);
    }

    /* Closed state icon like screenshot */
    .acc_item:not(.is-open) .acc_icon {
        background: var(--acc_black);
        border-color: var(--acc_black);
    }

    .acc_item:not(.is-open) .acc_icon svg path {
        stroke: #fff;
    }

    /* Focus */
    .acc_btn:focus-visible {
        outline: 3px solid rgba(239, 60, 38, .30);
        outline-offset: 3px;
        border-radius: 12px;
    }

    /* No FAQ box */
    .area_faq_empty {
        border: 1px dashed rgba(239, 60, 38, .35);
        border-radius: 16px;
        padding: 22px;
        background: #fff7f6;
        color: var(--acc_black);
    }

    .area_faq_empty h4 {
        margin: 0 0 6px 0;
        font-size: 16px;
        font-weight: 600;
    }

    .area_faq_empty p {
        margin: 0;
        font-size: 14px;
        opacity: .8;
    }

    /* Tablet */
    @media (max-width: 992px) {
        .area_faq_title {
            font-size: 26px;
        }

        .acc_title {
            font-size: 16px;
        }

        .acc_btn {
            padding: 16px;
        }

        .acc_content {
            padding: 0 16px 16px 16px;
        }

        .acc_icon {
            width: 42px;
            height: 42px;
        }
    }

    /* Mobile */
    @media (max-width: 600px) {
        .area_faq_section {
            padding: 28px 14px;
        }

        .area_faq_title {
            font-size: 22px;
        }

        .acc_title {
            font-size: 15px;
        }

        .acc_btn {
            padding: 14px;
        }

        .acc_content {
            font-size: 13.5px;
        }

        .acc_icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
        }
    }
  /* faq end============================================= */
  