/* =====================================================
   ASIA BETON SLIDER MANAGER
   Visual hero styles below intentionally mirror the
   supplied Asia Beton hero code exactly.
===================================================== */

@font-face{
  font-family:'AsiaReadyHeroPeyda';
  src:url('/wp-content/uploads/fonts/PeydaWebFaNum-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'AsiaReadyHeroPeyda';
  src:url('/wp-content/uploads/fonts/PeydaWebFaNum-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'AsiaReadyHeroPeyda';
  src:url('/wp-content/uploads/fonts/PeydaWebFaNum-ExtraBold.woff2') format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}


/* =====================================================
   SLIDER SHELL — does not alter the original hero design
===================================================== */

.abs-slider,
.abs-slider *,
.abs-slider *::before,
.abs-slider *::after{
  box-sizing:border-box;
}

.abs-slider{
  position:relative;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#111;
  isolation:isolate;
  line-height:normal;
  font-family:'AsiaReadyHeroPeyda',Tahoma,sans-serif;
}

.abs-slider-viewport,
.abs-slider-track{
  position:relative;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}

.abs-slider-track{
  display:grid;
}

.abs-slide{
  position:relative;
  grid-area:1 / 1;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .55s ease,visibility .55s ease;
}

.abs-slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:2;
}

.abs-slide-link{
  position:absolute;
  inset:0;
  z-index:7;
  display:block;
}


/* =====================================================
   PICTURE — EXACT ORIGINAL VALUES
===================================================== */

.abs-slider .asia-hero-picture{
  position:relative;

  display:block;

  width:100%;
  max-width:100%;

  margin:0;
  padding:0;

  overflow:hidden;
}


/* =====================================================
   BACKGROUND IMAGE — DESKTOP — EXACT ORIGINAL VALUES
===================================================== */

.abs-slider .asia-hero-image{
  position:relative;

  z-index:1;

  display:block;

  width:100%;
  max-width:100%;
  height:auto;

  margin:0;
  padding:0;

  object-fit:contain;
  object-position:center;

  border:0;
}


/* =====================================================
   DARK SHAPE — DESKTOP — EXACT ORIGINAL VALUES
===================================================== */

.abs-slider .asia-ready-dark-shape{
  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  z-index:2;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(25,27,27,.89) 0%,
      rgba(31,33,33,.87) 50%,
      rgba(31,33,33,.82) 100%
    );

  clip-path:polygon(
    0 0,
    75% 0,
    21% 100%,
    0 100%
  );
}

.abs-slider .asia-ready-dark-shape::before{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.065) 1px,
      transparent 1.4px
    );

  background-size:10px 10px;

  opacity:.8;
}

.abs-slider .asia-ready-dark-shape::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.04) 65%,
      transparent 100%
    );
}


/* =====================================================
   RED BOX — DESKTOP — EXACT ORIGINAL VALUES
===================================================== */

.abs-slider .asia-ready-red-box{
  position:absolute;

  left:23%;
  top:15.5%;

  width:46.5%;
  height:29%;

  z-index:4;

  overflow:hidden;

  pointer-events:none;

  clip-path:polygon(
    0 0,
    100% 0,
    66% 100%,
    0 100%
  );

  background:
    linear-gradient(
      90deg,
      rgba(105,0,0,.96) 0%,
      rgba(116,0,0,.95) 64%,
      rgba(126,0,0,.90) 100%
    );
}

.abs-slider .asia-ready-red-box::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.045) 1px,
      transparent 1.3px
    );

  background-size:9px 9px;
}

.abs-slider .asia-ready-red-box::after{
  content:"";

  position:absolute;

  top:-5%;
  right:-2%;

  width:17%;
  height:115%;

  z-index:2;

  background:rgba(185,20,20,.28);

  transform:skewX(-29deg);

  pointer-events:none;
}


/* =====================================================
   TITLE — DESKTOP — EXACT ORIGINAL VALUES
===================================================== */

.abs-slider .asia-ready-title{
  position:absolute;

  left:4%;
  top:50%;

  transform:translateY(-50%);

  width:58%;

  z-index:5;

  margin:0;
  padding:0;

  color:#fff;

  font-family:'AsiaReadyHeroPeyda',Tahoma,sans-serif;

  font-size:clamp(27px,2.85vw,58px);

  font-weight:800;

  line-height:1.25;

  letter-spacing:-1px;

  text-align:center;

  direction:rtl;

  white-space:normal;

  text-shadow:
    0 2px 5px rgba(0,0,0,.18);
}


/* =====================================================
   MOBILE ELEMENTS — EXACT ORIGINAL VALUES
===================================================== */

.abs-slider .asia-ready-mobile-dark,
.abs-slider .asia-ready-mobile-red{
  display:none;
}


/* =====================================================
   TABLET — EXACT ORIGINAL VALUES
===================================================== */

@media(max-width:1100px) and (min-width:769px){

  .abs-slider .asia-ready-title{
    left:4%;
    width:58%;

    font-size:clamp(23px,3.4vw,42px);
  }

}


/* =====================================================
   MOBILE — EXACT ORIGINAL VALUES
===================================================== */

@media(max-width:768px){

  .abs-slider{
    width:100%;
    max-width:100%;

    overflow:hidden;
  }

  .abs-slider .asia-hero-picture{
    position:relative;

    display:block;

    width:100%;

    aspect-ratio:9 / 13;

    overflow:hidden;

    background:#111;
  }


  /* =========================
     MOBILE BACKGROUND
  ========================= */

  .abs-slider .asia-hero-image{
    position:absolute;

    inset:0;

    z-index:1;

    display:block;

    width:100%;
    height:100%;

    max-width:none;

    margin:0;

    object-fit:cover;

    object-position:58% center;
  }


  /* =================================================
     DESKTOP SHAPES OFF
  ================================================= */

  .abs-slider .asia-ready-dark-shape,
  .abs-slider .asia-ready-red-box{
    display:none;
  }


  /* =================================================
     MOBILE DARK SHAPE
  ================================================= */

  .abs-slider .asia-ready-mobile-dark{
    position:absolute;

    inset:0;

    z-index:2;

    display:block;

    width:100%;
    height:100%;

    pointer-events:none;
  }

  .abs-slider .asia-ready-mobile-dark img{
    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    object-fit:fill;

    border:0;
  }


  /* =================================================
     MOBILE RED SHAPE
  ================================================= */

  .abs-slider .asia-ready-mobile-red{
    position:absolute;

    left:5%;
    top:24%;

    z-index:4;

    display:block;

    width:92%;

    pointer-events:none;
  }

  .abs-slider .asia-ready-mobile-red-shape{
    position:relative;

    z-index:1;

    display:block;

    width:100%;
    height:auto;

    margin:0;
    padding:0;

    border:0;
  }


  /* =================================================
     MOBILE TITLE
  ================================================= */

  .abs-slider .asia-ready-mobile-title{
    position:absolute;

    left:5%;
    top:50%;

    transform:translateY(-50%);

    width:57%;

    z-index:5;

    margin:0;
    padding:0;

    color:#fff;

    font-family:'AsiaReadyHeroPeyda',Tahoma,sans-serif;

    font-size:clamp(21px,6.2vw,34px);

    font-weight:800;

    line-height:1.22;

    letter-spacing:-.5px;

    text-align:center;

    direction:rtl;

    white-space:normal;

    text-shadow:
      0 2px 5px rgba(0,0,0,.2);
  }

}


/* =====================================================
   SMALL MOBILE — EXACT ORIGINAL VALUES
===================================================== */

@media(max-width:480px){

  .abs-slider .asia-hero-picture{
    aspect-ratio:9 / 14;
  }

  .abs-slider .asia-hero-image{
    object-position:60% center;
  }

  .abs-slider .asia-ready-mobile-red{
    left:4%;
    top:25%;

    width:94%;
  }

  .abs-slider .asia-ready-mobile-title{
    left:5%;

    width:57%;

    font-size:clamp(18px,6vw,27px);
  }

}


/* =====================================================
   VERY SMALL MOBILE — EXACT ORIGINAL VALUES
===================================================== */

@media(max-width:360px){

  .abs-slider .asia-hero-picture{
    aspect-ratio:9 / 15;
  }

  .abs-slider .asia-ready-mobile-title{
    font-size:17px;
  }

}


/* =====================================================
   SLIDER CONTROLS
   These are outside the supplied hero visual layer.
===================================================== */

.abs-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:12;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background:rgba(0,0,0,.20);
  color:#fff;
  font-family:Tahoma,sans-serif;
  font-size:28px;
  line-height:38px;
  text-align:center;
  cursor:pointer;
}

.abs-prev{right:16px;}
.abs-next{left:16px;}

.abs-dots{
  position:absolute;
  z-index:12;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:7px;
}

.abs-dot{
  width:8px;
  height:8px;
  min-width:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  cursor:pointer;
}

.abs-dot.is-active{
  width:22px;
  background:#fff;
}

@media(max-width:768px){
  .abs-nav{
    width:36px;
    height:36px;
    font-size:24px;
    line-height:32px;
  }

  .abs-prev{right:9px;}
  .abs-next{left:9px;}

  .abs-dots{
    bottom:9px;
  }
}

@media(prefers-reduced-motion:reduce){
  .abs-slide{
    transition:none;
  }
}