.elementor-73 .elementor-element.elementor-element-33c86a6{width:var( --container-widget-width, 100.533% );max-width:100.533%;--container-widget-width:100.533%;--container-widget-flex-grow:0;}.elementor-73 .elementor-element.elementor-element-33c86a6.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-73 .elementor-element.elementor-element-2e6c7d8{width:var( --container-widget-width, 102.711% );max-width:102.711%;--container-widget-width:102.711%;--container-widget-flex-grow:0;}.elementor-73 .elementor-element.elementor-element-2e6c7d8.elementor-element{--flex-grow:0;--flex-shrink:0;}/* Start custom CSS for html, class: .elementor-element-33c86a6 *//* =====================================================
   STORE IPTV
   SUBSCRIPTION HERO
   BLACK + NEON GREEN
===================================================== */

.subscription-hero {

    position: relative;

    min-height: 760px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #050706;

}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.subscription-hero-glow {

    position: absolute;

    width: 700px;

    height: 700px;

    top: -220px;

    right: -150px;

    border-radius: 50%;

    background: rgba(0,255,136,.09);

    filter: blur(150px);

    pointer-events: none;

}


/* LEFT GLOW */

.subscription-hero::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    left: -250px;

    bottom: -250px;

    border-radius: 50%;

    background: rgba(0,255,136,.035);

    filter: blur(120px);

}


/* =====================================================
   GRID
===================================================== */

.subscription-hero-grid {

    position: absolute;

    inset: 0;

    opacity: .30;

    background-image:

        linear-gradient(
            rgba(0,255,136,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0,255,136,.035) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

    pointer-events: none;

}


/* =====================================================
   CONTAINER
===================================================== */

.subscription-hero-container {

    position: relative;

    z-index: 3;

    width: min(1200px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    align-items: center;

    gap: 60px;

}


/* =====================================================
   LEFT CONTENT
===================================================== */

.subscription-hero-content {

    max-width: 680px;

}


/* =====================================================
   BADGE
===================================================== */

.subscription-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 15px;

    margin-bottom: 25px;

    border:
        1px solid rgba(0,255,136,.30);

    border-radius: 50px;

    background:
        rgba(0,255,136,.045);

    color: #00ff88;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

}


.subscription-hero-badge span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #00ff88;

    box-shadow:
        0 0 12px #00ff88;

}


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

.subscription-hero h1 {

    margin: 0;

    color: #fff;

    font-size: clamp(52px, 6vw, 82px);

    line-height: .98;

    font-weight: 900;

    letter-spacing: -4px;

}


.subscription-hero h1 span {

    display: block;

    color: #00ff88;

    text-shadow:
        0 0 35px rgba(0,255,136,.18);

}


/* =====================================================
   DESCRIPTION
===================================================== */

.subscription-hero-content > p {

    max-width: 620px;

    margin: 28px 0 0;

    color: #89948e;

    font-size: 15px;

    line-height: 1.8;

}


/* =====================================================
   BUTTONS
===================================================== */

.subscription-hero-buttons {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 35px;

}


.subscription-btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 155px;

    padding: 15px 20px;

    border-radius: 10px;

    background: #00ff88;

    color: #020503;

    text-decoration: none;

    font-size: 12px;

    font-weight: 900;

    transition: .3s ease;

    box-shadow:
        0 0 30px rgba(0,255,136,.12);

}


.subscription-btn-primary span {

    font-size: 18px;

    transition: transform .3s ease;

}


.subscription-btn-primary:hover {

    background: #fff;

    transform: translateY(-3px);

}


.subscription-btn-primary:hover span {

    transform: translateX(4px);

}


.subscription-btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 135px;

    padding: 14px 20px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 10px;

    background:
        rgba(255,255,255,.025);

    color: #cbd1ce;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    transition: .3s ease;

}


.subscription-btn-secondary:hover {

    border-color:
        rgba(0,255,136,.4);

    color: #00ff88;

    background:
        rgba(0,255,136,.04);

}


/* =====================================================
   TRUST
===================================================== */

.subscription-trust {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 32px;

}


.subscription-trust div {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #68736d;

    font-size: 10px;

    font-weight: 700;

}


.subscription-trust strong {

    color: #00ff88;

    font-size: 13px;

}


/* =====================================================
   RIGHT IMAGE
===================================================== */

.subscription-hero-visual {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 540px;

}


/* GREEN IMAGE GLOW */

.hero-image-glow {

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(0,255,136,.13);

    filter: blur(90px);

}


/* =====================================================
   IMAGE FRAME
===================================================== */

.hero-image-frame {

    position: relative;

    width: 100%;

    max-width: 510px;

    height: 540px;

    overflow: hidden;

    border:
        1px solid rgba(0,255,136,.22);

    border-radius: 28px;

    background: #080d0a;

    box-shadow:

        0 30px 80px rgba(0,0,0,.65),

        0 0 50px rgba(0,255,136,.06);

    transform:
        perspective(1000px)
        rotateY(-3deg);

    transition:
        transform .5s ease,
        border-color .5s ease;

}


.hero-image-frame:hover {

    transform:
        perspective(1000px)
        rotateY(0deg)
        translateY(-6px);

    border-color:
        rgba(0,255,136,.5);

}


/* =====================================================
   IMAGE
===================================================== */

.hero-image-frame img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter:
        brightness(.72)
        saturate(.9);

    transform: scale(1.02);

    transition:
        transform .8s ease,
        filter .5s ease;

}


.hero-image-frame:hover img {

    transform: scale(1.06);

    filter:
        brightness(.82)
        saturate(1.05);

}


/* =====================================================
   IMAGE OVERLAY
===================================================== */

.hero-image-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            transparent 35%,
            rgba(2,7,4,.85) 100%
        ),

        linear-gradient(
            90deg,
            rgba(0,255,136,.08),
            transparent 60%
        );

    pointer-events: none;

}


/* =====================================================
   FLOATING CARD
===================================================== */

.hero-floating-card {

    position: absolute;

    left: 22px;

    bottom: 22px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 16px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 14px;

    background:
        rgba(3,8,5,.78);

    backdrop-filter: blur(15px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.45);

}


.floating-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left: 2px;

    border-radius: 10px;

    background: #00ff88;

    color: #020503;

    font-size: 13px;

    box-shadow:
        0 0 20px rgba(0,255,136,.2);

}


.hero-floating-card strong {

    display: block;

    color: #fff;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

}


.hero-floating-card span {

    display: block;

    margin-top: 3px;

    color: #758079;

    font-size: 9px;

}


/* =====================================================
   SCROLL
===================================================== */

.subscription-scroll {

    position: absolute;

    z-index: 5;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

}


.subscription-scroll span {

    color: #4f5b54;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;

}


.scroll-line {

    width: 1px;

    height: 32px;

    background:
        linear-gradient(
            #00ff88,
            transparent
        );

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    .subscription-hero-container {

        grid-template-columns: 1fr;

        gap: 50px;

        padding: 100px 0;

    }

    .subscription-hero-content {

        max-width: 750px;

        margin: auto;

        text-align: center;

    }

    .subscription-hero-content > p {

        margin-left: auto;

        margin-right: auto;

    }

    .subscription-hero-buttons {

        justify-content: center;

    }

    .subscription-trust {

        justify-content: center;

    }

    .subscription-hero-visual {

        min-height: 450px;

    }

    .hero-image-frame {

        height: 450px;

    }

    .subscription-scroll {

        display: none;

    }

}


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

@media (max-width: 600px) {

    .subscription-hero {

        min-height: auto;

    }

    .subscription-hero-container {

        width: 92%;

        padding: 80px 0;

    }

    .subscription-hero h1 {

        font-size: 48px;

        letter-spacing: -2.5px;

    }

    .subscription-hero-content > p {

        font-size: 14px;

    }

    .subscription-hero-buttons {

        flex-direction: column;

    }

    .subscription-btn-primary,
    .subscription-btn-secondary {

        width: 100%;

        max-width: 270px;

    }

    .subscription-hero-visual {

        min-height: 390px;

    }

    .hero-image-frame {

        height: 390px;

        border-radius: 22px;

        transform: none;

    }

    .hero-image-frame:hover {

        transform: translateY(-4px);

    }

    .hero-floating-card {

        left: 14px;

        bottom: 14px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-32f1af4 */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg-main: #050706;
  --bg-secondary: #090D0B;
  --card: #0D1210;

  --green: #00FF88;
  --green-2: #00C96B;

  --white: #FFFFFF;
  --text-secondary: #929D97;
  --text-muted: #7E8B83;

  --border: rgba(255,255,255,0.08);
  --green-border: rgba(0,255,136,0.30);
}


/* ================================
   PLANS SECTION
================================ */

.plans-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0;

  background: var(--bg-main);

  font-family: "Inter", sans-serif;
  color: var(--white);
}


/* ================================
   CONTAINER
================================ */

.plans-container {
  position: relative;
  z-index: 2;

  width: 92%;
  max-width: 1180px;

  margin: 0 auto;
}


/* ================================
   GREEN GLOW
================================ */

.plans-glow {
  position: absolute;

  width: 420px;
  height: 420px;

  background: rgba(0,255,136,0.09);

  filter: blur(140px);

  border-radius: 50%;

  pointer-events: none;
}

.plans-glow-1 {
  top: 5%;
  left: -220px;
}

.plans-glow-2 {
  bottom: 0;
  right: -220px;
}


/* ================================
   HEADER
================================ */

.plans-header {
  max-width: 700px;

  margin: 0 auto 65px;

  text-align: center;
}


/* Badge */

.section-badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 8px 15px;

  margin-bottom: 20px;

  border: 1px solid rgba(0,255,136,0.25);

  border-radius: 50px;

  background: rgba(0,255,136,0.06);

  color: var(--green);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.4px;

  text-transform: uppercase;
}


/* Main Title */

.plans-header h2 {
  margin: 0;

  color: #FFFFFF !important;

  font-size: clamp(38px,5vw,64px);

  line-height: 1.05;

  letter-spacing: -3px;

  font-weight: 900;
}


/* Green Part */

.plans-header h2 span {
  display: block;

  background: linear-gradient(
    90deg,
    #00FF88 0%,
    #00C96B 100%
  );

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;
}


/* Description */

.plans-header p {
  max-width: 620px;

  margin: 22px auto 0;

  color: var(--text-secondary);

  font-size: 17px;

  line-height: 1.7;

  font-weight: 400;
}


/* ================================
   PLANS GRID
================================ */

.plans-grid {
  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 18px;

  align-items: stretch;
}


/* ================================
   PLAN CARD
================================ */

.plan-card {
  position: relative;

  display: flex;

  flex-direction: column;

  min-height: 570px;

  padding: 30px 26px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.025),
      transparent 45%
    ),
    var(--card);

  border: 1px solid var(--border);

  border-radius: 22px;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.25);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.plan-card:hover {
  transform: translateY(-6px);

  border-color: var(--green-border);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.4),
    0 0 35px rgba(0,255,136,0.07);
}


/* ================================
   FEATURED CARD
================================ */

.plan-card.featured {
  border-color: rgba(0,255,136,0.30);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0,255,136,0.08),
      transparent 40%
    ),
    var(--card);

  box-shadow:
    0 25px 70px rgba(0,0,0,0.4),
    0 0 40px rgba(0,255,136,0.07);
}


.plan-card.featured:hover {
  border-color: rgba(0,255,136,0.55);

  box-shadow:
    0 30px 75px rgba(0,0,0,0.45),
    0 0 50px rgba(0,255,136,0.12);
}


/* ================================
   POPULAR BADGE
================================ */

.popular-badge {
  position: absolute;

  top: -1px;

  left: 50%;

  transform: translateX(-50%);

  padding: 7px 14px;

  background: linear-gradient(
    90deg,
    var(--green),
    var(--green-2)
  );

  color: #031009;

  border-radius: 0 0 10px 10px;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1px;

  white-space: nowrap;
}


/* ================================
   PLAN TOP
================================ */

.plan-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 25px;
}


/* Icon */

.plan-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 48px;

  height: 48px;

  border-radius: 14px;

  color: var(--green);

  background: rgba(0,255,136,0.07);

  border: 1px solid rgba(0,255,136,0.12);
}


.plan-icon svg {
  width: 23px;

  height: 23px;
}


/* Duration */

.plan-duration {
  color: var(--text-muted);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.2px;
}


/* ================================
   PLAN TITLE
================================ */

.plan-card h3 {
  margin: 0 0 10px;

  color: #FFFFFF !important;

  font-size: 25px;

  font-weight: 800;

  letter-spacing: -0.7px;
}


/* ================================
   DESCRIPTION
================================ */

.plan-description {
  min-height: 55px;

  margin: 0;

  color: var(--text-secondary);

  font-size: 13px;

  line-height: 1.6;
}


/* ================================
   PRICE
================================ */

.plan-price {
  display: flex;

  align-items: baseline;

  gap: 2px;

  margin-top: 28px;
}


.plan-price .currency {
  color: var(--green);

  font-size: 19px;

  font-weight: 800;

  align-self: flex-start;

  margin-top: 7px;
}


.plan-price strong {
  color: #FFFFFF !important;

  font-size: 46px;

  line-height: 1;

  font-weight: 900;

  letter-spacing: -2px;
}


.plan-price .period {
  margin-left: 5px;

  color: var(--text-muted);

  font-size: 11px;

  font-weight: 500;
}


/* ================================
   DIVIDER
================================ */

.plan-divider {
  height: 1px;

  margin: 28px 0 24px;

  background: var(--border);
}


/* ================================
   FEATURES
================================ */

.plan-features {
  display: flex;

  flex-direction: column;

  gap: 14px;

  margin: 0;

  padding: 0;

  list-style: none;
}


.plan-features li {
  display: flex;

  align-items: center;

  gap: 10px;

  color: #FFFFFF !important;

  font-size: 12px;

  line-height: 1.4;
}


.plan-features li span {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 18px;

  height: 18px;

  flex-shrink: 0;

  color: var(--green);

  font-size: 11px;

  font-weight: 900;

  background: rgba(0,255,136,0.07);

  border-radius: 50%;
}


/* ================================
   BUTTON
================================ */

.plan-button {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100%;

  margin-top: auto;

  padding: 14px 18px;

  border-radius: 12px;

  text-decoration: none;

  background: transparent;

  border: 1px solid rgba(255,255,255,0.12);

  color: #FFFFFF;

  font-size: 13px;

  font-weight: 800;

  transition: 0.25s ease;
}


.plan-button span {
  font-size: 17px;

  transition: transform 0.25s ease;
}


.plan-button:hover {
  transform: translateY(-3px);

  background: linear-gradient(
    90deg,
    var(--green),
    #00D875
  );

  border-color: transparent;

  color: #031009;

  box-shadow:
    0 10px 30px rgba(0,255,136,0.15);
}


.plan-button:hover span {
  transform: translateX(4px);
}


/* ================================
   FEATURED BUTTON
================================ */

.featured .plan-button {
  background: linear-gradient(
    90deg,
    var(--green),
    #00D875
  );

  color: #031009;

  border-color: transparent;

  box-shadow:
    0 8px 25px rgba(0,255,136,0.10);
}


.featured .plan-button:hover {
  box-shadow:
    0 12px 35px rgba(0,255,136,0.22);
}


/* ================================
   TABLET
================================ */

@media (max-width:1050px) {

  .plans-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .plan-card {
    min-height: 540px;
  }
}


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

@media (max-width:600px) {

  .plans-section {
    padding: 80px 0;
  }

  .plans-container {
    width: 92%;
  }

  .plans-header {
    margin-bottom: 45px;
  }

  .plans-header h2 {
    font-size: clamp(36px,11vw,48px);

    letter-spacing: -2px;
  }

  .plans-header p {
    font-size: 15px;
  }

  .plans-grid {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .plan-card {
    min-height: auto;

    padding: 27px 24px;
  }

  .plan-card h3 {
    font-size: 24px;

    color: #FFFFFF !important;
  }

  .plan-price strong {
    font-size: 43px;
  }
}


/* ================================
   SMALL MOBILE
================================ */

@media (max-width:390px) {

  .plans-section {
    padding: 70px 0;
  }

  .plan-card {
    padding: 24px 20px;
  }

  .plans-header h2 {
    font-size: 35px;
  }

  .plan-description {
    font-size: 12px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-21ff7a1 *//* =========================================
   DEVICES SECTION
========================================= */

.devices-section {
  position: relative;
  overflow: hidden;

  padding: 120px 0;

  background: #050706;

  font-family: "Inter", sans-serif;

  color: #fff;
}


/* =========================================
   CONTAINER
========================================= */

.devices-container {
  position: relative;
  z-index: 2;

  width: 92%;
  max-width: 1180px;

  margin: 0 auto;
}


/* =========================================
   GLOW
========================================= */

.devices-glow {
  position: absolute;

  width: 500px;
  height: 500px;

  top: 20%;
  left: 50%;

  transform: translateX(-50%);

  border-radius: 50%;

  background: rgba(0,255,136,0.07);

  filter: blur(150px);

  pointer-events: none;
}


/* =========================================
   HEADER
========================================= */

.devices-header {
  max-width: 720px;

  margin: 0 auto 65px;

  text-align: center;
}


.devices-badge {
  display: inline-flex;

  padding: 8px 15px;

  margin-bottom: 20px;

  border-radius: 50px;

  background: rgba(0,255,136,0.06);

  border: 1px solid rgba(0,255,136,0.25);

  color: #00FF88;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.4px;

  text-transform: uppercase;
}


.devices-header h2 {
  margin: 0;

  color: #FFFFFF !important;

  font-size: clamp(42px, 5vw, 64px);

  line-height: 1.05;

  font-weight: 900;

  letter-spacing: -3px;
}


.devices-header h2 span {
  display: block;

  background: linear-gradient(
    90deg,
    #00FF88,
    #00C96B
  );

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;
}


.devices-header p {
  max-width: 650px;

  margin: 22px auto 0;

  color: #929D97;

  font-size: 17px;

  line-height: 1.7;
}


/* =========================================
   GRID
========================================= */

.devices-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;
}


/* =========================================
   CARD — WHITE
========================================= */

.device-card {
  position: relative;

  overflow: hidden;

  background: #FFFFFF;

  border: 1px solid rgba(255,255,255,0.15);

  border-radius: 20px;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.device-card:hover {
  transform: translateY(-5px);

  border-color: rgba(0,255,136,0.50);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.35),
    0 0 35px rgba(0,255,136,0.10);
}


/* =========================================
   FEATURED
========================================= */

.featured-device {
  border-color: rgba(0,255,136,0.45);

  box-shadow:
    0 15px 45px rgba(0,0,0,0.15);
}


/* =========================================
   IMAGE
========================================= */

.device-image {
  position: relative;

  height: 175px;

  overflow: hidden;

  background: #050706;
}


.device-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}


.device-card:hover .device-image img {
  transform: scale(1.05);

  filter: brightness(1.05);
}


/* =========================================
   IMAGE OVERLAY
========================================= */

.device-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(5,7,6,0.05),
      rgba(5,7,6,0.20) 45%,
      rgba(5,7,6,0.95) 100%
    );
}


/* =========================================
   NUMBER
========================================= */

.device-number {
  position: absolute;

  top: 16px;
  right: 18px;

  color: rgba(255,255,255,0.70);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1px;
}


/* =========================================
   ICON
========================================= */

.device-icon {
  position: absolute;

  left: 25px;
  bottom: 18px;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  border-radius: 14px;

  background: rgba(0,255,136,0.10);

  border: 1px solid rgba(0,255,136,0.35);

  color: #00C96B;

  backdrop-filter: blur(8px);

  transition: 0.25s ease;
}


.device-icon svg {
  width: 27px;
  height: 27px;
}


.device-card:hover .device-icon {
  background: rgba(0,255,136,0.16);

  border-color: rgba(0,255,136,0.50);

  box-shadow:
    0 0 25px rgba(0,255,136,0.15);
}


/* =========================================
   CONTENT — DARK TEXT
========================================= */

.device-content {
  position: relative;

  padding: 26px;
}


.device-content h3 {
  margin: 0 0 12px;

  color: #050706 !important;

  font-size: 21px;

  font-weight: 800;

  letter-spacing: -0.6px;
}


.device-content p {
  min-height: 66px;

  margin: 0 0 18px;

  color: #59635E;

  font-size: 13px;

  line-height: 1.65;
}


/* =========================================
   LIST
========================================= */

.device-content ul {
  display: flex;

  flex-direction: column;

  gap: 10px;

  padding: 0;

  margin: 0;

  list-style: none;
}


.device-content li {
  color: #59635E;

  font-size: 11px;

  line-height: 1.4;
}


.device-content li::before {
  content: "✓";

  margin-right: 7px;

  color: #00B968;

  font-weight: 900;
}


/* =========================================
   ARROW
========================================= */

.device-arrow {
  position: absolute;

  right: 25px;
  bottom: 24px;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: rgba(0,255,136,0.08);

  border: 1px solid rgba(0,255,136,0.30);

  color: #00B968;

  text-decoration: none;

  font-size: 17px;

  transition: 0.25s ease;
}


.device-arrow:hover {
  transform: translateX(3px);

  background: rgba(0,255,136,0.16);

  border-color: rgba(0,255,136,0.50);

  color: #008F55;
}


/* =========================================
   BOTTOM
========================================= */

.devices-bottom {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 55px;

  margin-top: 45px;

  padding-top: 25px;

  border-top: 1px solid rgba(255,255,255,0.08);
}


.devices-bottom div {
  display: flex;

  align-items: center;

  gap: 9px;

  color: #7E8B83;

  font-size: 11px;

  font-weight: 500;
}


.devices-bottom span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #00FF88;

  box-shadow:
    0 0 12px rgba(0,255,136,0.5);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

  .devices-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
  }

}


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

@media (max-width: 600px) {

  .devices-section {
    padding: 80px 0;
  }

  .devices-header {
    margin-bottom: 45px;
  }

  .devices-header h2 {
    font-size: clamp(36px, 11vw, 48px);

    letter-spacing: -2px;
  }

  .devices-header p {
    font-size: 15px;
  }

  .devices-grid {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .device-image {
    height: 200px;
  }

  .device-content {
    padding: 24px;
  }

  .devices-bottom {
    flex-direction: column;

    gap: 14px;

    align-items: flex-start;

    margin-top: 35px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 390px) {

  .devices-section {
    padding: 70px 0;
  }

  .device-image {
    height: 180px;
  }

  .device-content {
    padding: 22px;
  }

  .devices-header h2 {
    font-size: 35px;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a784b41 *//* =========================================
   BENEFITS SECTION
========================================= */

.benefits-section {
  position: relative;
  overflow: hidden;

  padding: 120px 0;

  background: #050706;

  font-family: "Inter", sans-serif;

  color: #FFFFFF;
}


/* =========================================
   CONTAINER
========================================= */

.benefits-container {
  position: relative;
  z-index: 2;

  width: 92%;
  max-width: 1180px;

  margin: 0 auto;
}


/* =========================================
   GLOW
========================================= */

.benefits-glow {
  position: absolute;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  background: rgba(0,255,136,0.08);

  filter: blur(145px);

  pointer-events: none;
}

.benefits-glow-left {
  top: 15%;
  left: -250px;
}

.benefits-glow-right {
  bottom: 5%;
  right: -250px;
}


/* =========================================
   HEADER
========================================= */

.benefits-header {
  max-width: 720px;

  margin: 0 auto 65px;

  text-align: center;
}


/* =========================================
   BADGE
========================================= */

.benefits-badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 8px 15px;

  margin-bottom: 20px;

  background: rgba(0,255,136,0.06);

  border: 1px solid rgba(0,255,136,0.25);

  border-radius: 50px;

  color: #00FF88;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.4px;

  text-transform: uppercase;
}


/* =========================================
   MAIN TITLE
   Premium Features = WHITE
========================================= */

.benefits-header h2 {
  margin: 0;

  color: #FFFFFF !important;

  font-size: clamp(40px, 5vw, 64px);

  line-height: 1.05;

  letter-spacing: -3px;

  font-weight: 900;
}


/* =========================================
   Better Experience. = GREEN
========================================= */

.benefits-header h2 span {
  display: block;

  color: #00FF88 !important;

  background: none !important;

  -webkit-background-clip: initial !important;

  -webkit-text-fill-color: #00FF88 !important;

  background-clip: initial !important;
}


/* =========================================
   DESCRIPTION
========================================= */

.benefits-header p {
  max-width: 620px;

  margin: 22px auto 0;

  color: #929D97;

  font-size: 17px;

  line-height: 1.7;
}


/* =========================================
   BENEFITS GRID
========================================= */

.benefits-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}


/* =========================================
   BENEFIT CARD
========================================= */

.benefit-card {
  position: relative;

  min-height: 290px;

  padding: 30px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.025),
      transparent 50%
    ),
    #0D1210;

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 22px;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.benefit-card:hover {
  transform: translateY(-5px);

  border-color: rgba(0,255,136,0.30);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.35),
    0 0 35px rgba(0,255,136,0.06);
}


/* =========================================
   FEATURED
========================================= */

.featured-benefit {
  border-color: rgba(0,255,136,0.22);

  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(0,255,136,0.09),
      transparent 45%
    ),
    #0D1210;
}


.featured-benefit:hover {
  border-color: rgba(0,255,136,0.45);

  box-shadow:
    0 25px 65px rgba(0,0,0,0.4),
    0 0 45px rgba(0,255,136,0.09);
}


/* =========================================
   CARD TOP
========================================= */

.benefit-top {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-bottom: 30px;
}


.benefit-number {
  color: rgba(255,255,255,0.13);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1px;
}


/* =========================================
   ICON
========================================= */

.benefit-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 55px;

  height: 55px;

  border-radius: 14px;

  background: rgba(0,255,136,0.07);

  border: 1px solid rgba(0,255,136,0.13);

  color: #00FF88;

  transition: 0.25s ease;
}


.benefit-icon svg {
  width: 26px;

  height: 26px;
}


.benefit-card:hover .benefit-icon {
  transform: translateY(-2px);

  background: rgba(0,255,136,0.10);

  border-color: rgba(0,255,136,0.30);

  box-shadow:
    0 0 25px rgba(0,255,136,0.07);
}


/* =========================================
   CARD TITLE
========================================= */

.benefit-card h3 {
  margin: 0 0 12px;

  color: #FFFFFF;

  font-size: 22px;

  font-weight: 800;

  letter-spacing: -0.6px;
}


/* =========================================
   DESCRIPTION
========================================= */

.benefit-card p {
  margin: 0;

  max-width: 320px;

  color: #929D97;

  font-size: 13px;

  line-height: 1.7;
}


/* =========================================
   BOTTOM CTA
========================================= */

.benefits-bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-top: 50px;

  padding: 25px 28px;

  background: #0D1210;

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 18px;
}


/* =========================================
   CTA TEXT
========================================= */

.benefits-bottom-text {
  display: flex;

  align-items: center;

  gap: 15px;
}


.mini-dot {
  width: 10px;

  height: 10px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #00FF88;

  box-shadow:
    0 0 15px rgba(0,255,136,0.5);
}


.benefits-bottom-text strong {
  display: block;

  margin-bottom: 4px;

  color: #FFFFFF;

  font-size: 14px;

  font-weight: 700;
}


.benefits-bottom-text p {
  margin: 0;

  color: #7E8B83;

  font-size: 12px;
}


/* =========================================
   CTA BUTTON
========================================= */

.benefits-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  flex-shrink: 0;

  padding: 13px 20px;

  border-radius: 12px;

  background: linear-gradient(
    90deg,
    #00FF88,
    #00D875
  );

  color: #031009;

  text-decoration: none;

  font-size: 12px;

  font-weight: 800;

  transition: 0.25s ease;

  box-shadow:
    0 8px 25px rgba(0,255,136,0.10);
}


.benefits-button span {
  font-size: 17px;

  transition: 0.25s ease;
}


.benefits-button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 35px rgba(0,255,136,0.20);
}


.benefits-button:hover span {
  transform: translateX(4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


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

@media (max-width: 600px) {

  .benefits-section {
    padding: 80px 0;
  }

  .benefits-header {
    margin-bottom: 45px;
  }

  .benefits-header h2 {
    font-size: clamp(36px, 11vw, 48px);

    letter-spacing: -2px;
  }

  .benefits-header p {
    font-size: 15px;
  }

  .benefits-grid {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .benefit-card {
    min-height: 260px;

    padding: 27px 24px;
  }

  .benefits-bottom {
    flex-direction: column;

    align-items: flex-start;

    padding: 24px;
  }

  .benefits-button {
    width: 100%;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 390px) {

  .benefits-section {
    padding: 70px 0;
  }

  .benefit-card {
    padding: 24px 20px;
  }

  .benefits-header h2 {
    font-size: 35px;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2e6c7d8 *//* =========================================
   HOW IT WORKS
========================================= */

.how-section {
  position: relative;
  overflow: hidden;

  padding: 120px 0;

  background: #090D0B;

  font-family: "Inter", sans-serif;

  color: #FFFFFF;
}


/* =========================================
   CONTAINER
========================================= */

.how-container {
  position: relative;
  z-index: 2;

  width: 92%;
  max-width: 1180px;

  margin: 0 auto;
}


/* =========================================
   GLOW
========================================= */

.how-glow {
  position: absolute;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  background: rgba(0,255,136,0.08);

  filter: blur(145px);

  pointer-events: none;
}

.how-glow-left {
  top: 5%;
  left: -250px;
}

.how-glow-right {
  bottom: 5%;
  right: -250px;
}


/* =========================================
   HEADER
========================================= */

.how-header {
  max-width: 720px;

  margin: 0 auto 70px;

  text-align: center;
}


/* =========================================
   BADGE
========================================= */

.how-badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 8px 15px;

  margin-bottom: 20px;

  background: rgba(0,255,136,0.06);

  border: 1px solid rgba(0,255,136,0.25);

  border-radius: 50px;

  color: #00FF88;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.4px;

  text-transform: uppercase;
}


/* =========================================
   MAIN TITLE
   How It Works = WHITE
========================================= */

.how-header h2 {
  margin: 0;

  color: #FFFFFF !important;

  font-size: clamp(40px, 5vw, 64px);

  line-height: 1.05;

  font-weight: 900;

  letter-spacing: -3px;
}


/* =========================================
   SECOND LINE
   Simple Setup. = GREEN
========================================= */

.how-header h2 span {
  display: block;

  color: #00FF88 !important;

  background: none !important;

  -webkit-background-clip: initial !important;

  -webkit-text-fill-color: #00FF88 !important;

  background-clip: initial !important;
}


/* =========================================
   HEADER DESCRIPTION
========================================= */

.how-header p {
  max-width: 620px;

  margin: 22px auto 0;

  color: #929D97;

  font-size: 17px;

  line-height: 1.7;
}


/* =========================================
   STEPS
========================================= */

.how-steps {
  display: grid;

  grid-template-columns:
    1fr 55px
    1fr 55px
    1fr 55px
    1fr;

  align-items: center;

  gap: 0;
}


/* =========================================
   STEP CARD
========================================= */

.how-step {
  position: relative;

  min-height: 330px;

  padding: 30px 25px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.025),
      transparent 50%
    ),
    #0D1210;

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 22px;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.how-step:hover {
  transform: translateY(-5px);

  border-color: rgba(0,255,136,0.30);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.35),
    0 0 35px rgba(0,255,136,0.06);
}


/* =========================================
   FEATURED STEP
========================================= */

.featured-step {
  border-color: rgba(0,255,136,0.25);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0,255,136,0.09),
      transparent 45%
    ),
    #0D1210;
}


.featured-step:hover {
  border-color: rgba(0,255,136,0.45);

  box-shadow:
    0 25px 65px rgba(0,0,0,0.4),
    0 0 45px rgba(0,255,136,0.09);
}


/* =========================================
   NUMBER
========================================= */

.step-number {
  position: absolute;

  top: 23px;
  right: 23px;

  color: rgba(255,255,255,0.12);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1px;
}


/* =========================================
   ICON
========================================= */

.step-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  margin-bottom: 25px;

  background: rgba(0,255,136,0.07);

  border: 1px solid rgba(0,255,136,0.13);

  border-radius: 15px;

  color: #00FF88;

  transition: 0.25s ease;
}


.step-icon svg {
  width: 27px;
  height: 27px;
}


.how-step:hover .step-icon {
  transform: translateY(-2px);

  background: rgba(0,255,136,0.10);

  border-color: rgba(0,255,136,0.30);

  box-shadow:
    0 0 25px rgba(0,255,136,0.07);
}


/* =========================================
   LABEL
========================================= */

.step-label {
  display: block;

  margin-bottom: 10px;

  color: #00FF88;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.3px;
}


/* =========================================
   STEP TITLE
========================================= */

.how-step h3 {
  margin: 0 0 12px;

  color: #FFFFFF;

  font-size: 21px;

  font-weight: 800;

  letter-spacing: -0.5px;
}


/* =========================================
   DESCRIPTION
========================================= */

.how-step p {
  margin: 0;

  color: #929D97;

  font-size: 13px;

  line-height: 1.7;
}


/* =========================================
   CONNECTOR
========================================= */

.step-connector {
  position: relative;

  height: 1px;

  background: rgba(0,255,136,0.20);
}


.step-connector span {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 7px;
  height: 7px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: #00FF88;

  box-shadow:
    0 0 12px rgba(0,255,136,0.45);
}


/* =========================================
   BOTTOM CTA
========================================= */

.how-bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-top: 50px;

  padding: 28px 30px;

  background: #0D1210;

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 20px;
}


/* =========================================
   STATUS
========================================= */

.how-status {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 8px;

  color: #00FF88;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.2px;
}


.how-status span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #00FF88;

  box-shadow:
    0 0 12px rgba(0,255,136,0.6);
}


/* =========================================
   BOTTOM TITLE
========================================= */

.how-bottom-info h3 {
  margin: 0;

  color: #FFFFFF;

  font-size: 20px;

  font-weight: 700;

  letter-spacing: -0.5px;
}


.how-bottom-info h3 strong {
  color: #00FF88;

  font-weight: 800;
}


/* =========================================
   BUTTON
========================================= */

.how-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  flex-shrink: 0;

  padding: 14px 21px;

  background: linear-gradient(
    90deg,
    #00FF88,
    #00D875
  );

  border-radius: 12px;

  color: #031009;

  text-decoration: none;

  font-size: 12px;

  font-weight: 800;

  transition: 0.25s ease;

  box-shadow:
    0 8px 25px rgba(0,255,136,0.10);
}


.how-button span {
  font-size: 17px;

  transition: 0.25s ease;
}


.how-button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 35px rgba(0,255,136,0.22);
}


.how-button:hover span {
  transform: translateX(4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

  .how-steps {
    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
  }

  .step-connector {
    display: none;
  }

}


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

@media (max-width: 600px) {

  .how-section {
    padding: 80px 0;
  }

  .how-header {
    margin-bottom: 45px;
  }

  .how-header h2 {
    font-size: clamp(36px, 11vw, 48px);

    letter-spacing: -2px;
  }

  .how-header p {
    font-size: 15px;
  }

  .how-steps {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .how-step {
    min-height: 290px;

    padding: 27px 24px;
  }

  .how-bottom {
    flex-direction: column;

    align-items: flex-start;

    padding: 24px;
  }

  .how-button {
    width: 100%;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 390px) {

  .how-section {
    padding: 70px 0;
  }

  .how-step {
    padding: 24px 20px;
  }

  .how-header h2 {
    font-size: 35px;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9d8ed62 *//* =========================================
   FAQ SECTION
========================================= */

.faq-section {
  position: relative;
  overflow: hidden;

  padding: 120px 0;

  background: #050706;

  font-family: "Inter", sans-serif;

  color: #FFFFFF;
}


/* =========================================
   CONTAINER
========================================= */

.faq-container {
  position: relative;
  z-index: 2;

  width: 92%;
  max-width: 900px;

  margin: 0 auto;
}


/* =========================================
   GLOW
========================================= */

.faq-glow {
  position: absolute;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  background: rgba(0,255,136,0.07);

  filter: blur(145px);

  pointer-events: none;
}

.faq-glow-left {
  top: 10%;
  left: -250px;
}

.faq-glow-right {
  bottom: 5%;
  right: -250px;
}


/* =========================================
   HEADER
========================================= */

.faq-header {
  max-width: 700px;

  margin: 0 auto 60px;

  text-align: center;
}


/* =========================================
   BADGE
========================================= */

.faq-badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 8px 15px;

  margin-bottom: 20px;

  background: rgba(0,255,136,0.06);

  border: 1px solid rgba(0,255,136,0.25);

  border-radius: 50px;

  color: #00FF88;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.4px;

  text-transform: uppercase;
}


/* =========================================
   MAIN TITLE
   Frequently Asked = WHITE
========================================= */

.faq-header h2 {
  margin: 0;

  color: #FFFFFF !important;

  font-size: clamp(40px, 5vw, 62px);

  line-height: 1.05;

  font-weight: 900;

  letter-spacing: -3px;
}


/* =========================================
   Questions. = GREEN
========================================= */

.faq-header h2 span {
  display: block;

  color: #00FF88 !important;

  background: none !important;

  -webkit-background-clip: initial !important;

  -webkit-text-fill-color: #00FF88 !important;

  background-clip: initial !important;
}


/* =========================================
   HEADER DESCRIPTION
========================================= */

.faq-header p {
  max-width: 620px;

  margin: 22px auto 0;

  color: #929D97;

  font-size: 16px;

  line-height: 1.7;
}


/* =========================================
   FAQ LIST
========================================= */

.faq-list {
  display: flex;

  flex-direction: column;

  gap: 12px;
}


/* =========================================
   FAQ ITEM
========================================= */

.faq-item {
  background: #0D1210;

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 17px;

  overflow: hidden;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.faq-item:hover {
  border-color: rgba(0,255,136,0.20);
}


.faq-item[open] {
  border-color: rgba(0,255,136,0.25);

  box-shadow:
    0 15px 45px rgba(0,0,0,0.25),
    0 0 25px rgba(0,255,136,0.04);
}


/* =========================================
   SUMMARY
========================================= */

.faq-item summary {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 23px 25px;

  cursor: pointer;

  list-style: none;

  user-select: none;
}


.faq-item summary::-webkit-details-marker {
  display: none;
}


/* =========================================
   QUESTION
========================================= */

.faq-question {
  color: #FFFFFF;

  font-size: 14px;

  font-weight: 700;

  line-height: 1.5;
}


/* =========================================
   PLUS
========================================= */

.faq-plus {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 32px;
  height: 32px;

  flex-shrink: 0;

  border-radius: 10px;

  background: rgba(0,255,136,0.06);

  border: 1px solid rgba(0,255,136,0.12);

  color: #00FF88;

  font-size: 21px;

  font-weight: 400;

  line-height: 1;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}


.faq-item[open] .faq-plus {
  transform: rotate(45deg);

  background: rgba(0,255,136,0.10);
}


/* =========================================
   ANSWER
========================================= */

.faq-answer {
  padding: 0 25px 23px;
}


.faq-answer p {
  max-width: 720px;

  margin: 0;

  padding-top: 19px;

  border-top: 1px solid rgba(255,255,255,0.06);

  color: #929D97;

  font-size: 13px;

  line-height: 1.75;
}


/* =========================================
   BOTTOM CTA
========================================= */

.faq-bottom {
  display: flex;

  align-items: center;

  gap: 18px;

  margin-top: 40px;

  padding: 22px 24px;

  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(0,255,136,0.07),
      transparent 45%
    ),
    #0D1210;

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 18px;
}


/* =========================================
   CTA ICON
========================================= */

.faq-bottom-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 46px;
  height: 46px;

  flex-shrink: 0;

  border-radius: 13px;

  background: rgba(0,255,136,0.07);

  border: 1px solid rgba(0,255,136,0.13);

  color: #00FF88;
}


.faq-bottom-icon svg {
  width: 22px;
  height: 22px;
}


/* =========================================
   CTA TEXT
========================================= */

.faq-bottom-text {
  display: flex;

  flex-direction: column;

  gap: 4px;

  flex: 1;
}


.faq-bottom-text strong {
  color: #FFFFFF;

  font-size: 13px;

  font-weight: 800;
}


.faq-bottom-text span {
  color: #7E8B83;

  font-size: 11px;
}


/* =========================================
   BUTTON
========================================= */

.faq-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  flex-shrink: 0;

  padding: 13px 18px;

  background: linear-gradient(
    90deg,
    #00FF88,
    #00D875
  );

  border-radius: 12px;

  color: #031009;

  text-decoration: none;

  font-size: 11px;

  font-weight: 800;

  transition: 0.25s ease;

  box-shadow:
    0 8px 25px rgba(0,255,136,0.10);
}


.faq-button span {
  font-size: 16px;

  transition: 0.25s ease;
}


.faq-button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 35px rgba(0,255,136,0.22);
}


.faq-button:hover span {
  transform: translateX(4px);
}


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

@media (max-width: 600px) {

  .faq-section {
    padding: 80px 0;
  }

  .faq-header {
    margin-bottom: 45px;
  }

  .faq-header h2 {
    font-size: clamp(36px, 11vw, 48px);

    letter-spacing: -2px;
  }

  .faq-header p {
    font-size: 15px;
  }

  .faq-item summary {
    padding: 20px;

    gap: 15px;
  }

  .faq-question {
    font-size: 13px;
  }

  .faq-answer {
    padding: 0 20px 20px;
  }

  .faq-answer p {
    font-size: 12px;
  }

  .faq-bottom {
    flex-wrap: wrap;

    padding: 20px;
  }

  .faq-bottom-text {
    min-width: calc(100% - 65px);
  }

  .faq-button {
    width: 100%;

    margin-top: 5px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 390px) {

  .faq-section {
    padding: 70px 0;
  }

  .faq-header h2 {
    font-size: 35px;
  }

  .faq-item summary {
    padding: 18px;
  }

  .faq-plus {
    width: 30px;

    height: 30px;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1e8145d *//* =========================================
   CTA SECTION
========================================= */

.cta-section {
  position: relative;
  overflow: hidden;

  padding: 120px 0;

  background: #090D0B;

  font-family: "Inter", sans-serif;

  color: #FFFFFF;
}


/* =========================================
   CONTAINER
========================================= */

.cta-container {
  position: relative;
  z-index: 2;

  width: 92%;
  max-width: 1180px;

  margin: 0 auto;
}


/* =========================================
   GLOW
========================================= */

.cta-glow {
  position: absolute;

  border-radius: 50%;

  background: #00FF88;

  pointer-events: none;
}


.cta-glow-main {
  width: 500px;
  height: 500px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  opacity: 0.08;

  filter: blur(150px);
}


.cta-glow-left {
  width: 280px;
  height: 280px;

  left: -150px;
  bottom: -100px;

  opacity: 0.06;

  filter: blur(120px);
}


.cta-glow-right {
  width: 280px;
  height: 280px;

  right: -150px;
  top: -100px;

  opacity: 0.06;

  filter: blur(120px);
}


/* =========================================
   CTA CARD
========================================= */

.cta-card {
  position: relative;

  overflow: hidden;

  padding: 85px 40px;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0,255,136,0.09),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,0.025),
      transparent 60%
    ),
    #0D1210;

  border: 1px solid rgba(0,255,136,0.18);

  border-radius: 28px;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.35),
    0 0 60px rgba(0,255,136,0.05);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}


.cta-card:hover {
  border-color: rgba(0,255,136,0.30);

  box-shadow:
    0 35px 90px rgba(0,0,0,0.40),
    0 0 70px rgba(0,255,136,0.08);
}


/* =========================================
   DECORATIVE LINES
========================================= */

.cta-line {
  position: absolute;

  width: 180px;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,255,136,0.4),
    transparent
  );
}


.cta-line-top {
  top: 35px;
  left: 50%;

  transform: translateX(-50%);
}


.cta-line-bottom {
  bottom: 35px;
  left: 50%;

  transform: translateX(-50%);
}


/* =========================================
   BADGE
========================================= */

.cta-badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 8px 16px;

  margin-bottom: 22px;

  background: rgba(0,255,136,0.06);

  border: 1px solid rgba(0,255,136,0.25);

  border-radius: 50px;

  color: #00FF88;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}


/* =========================================
   HEADING
   First line = WHITE
   Span = GREEN
========================================= */

.cta-card h2 {
  max-width: 850px;

  margin: 0 auto;

  color: #FFFFFF !important;

  font-size: clamp(42px, 6vw, 76px);

  line-height: 1;

  font-weight: 900;

  letter-spacing: -4px;
}


/* =========================================
   GREEN HEADING
========================================= */

.cta-card h2 span {
  display: block;

  color: #00FF88 !important;

  background: none !important;

  -webkit-background-clip: initial !important;

  -webkit-text-fill-color: #00FF88 !important;

  background-clip: initial !important;
}


/* =========================================
   DESCRIPTION
========================================= */

.cta-card > p {
  max-width: 620px;

  margin: 25px auto 0;

  color: #929D97;

  font-size: 16px;

  line-height: 1.7;
}


/* =========================================
   BUTTONS
========================================= */

.cta-buttons {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  margin-top: 35px;
}


/* =========================================
   BUTTON BASE
========================================= */

.cta-primary,
.cta-secondary {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 50px;

  padding: 0 22px;

  border-radius: 12px;

  text-decoration: none;

  font-size: 13px;

  font-weight: 800;

  transition: 0.25s ease;
}


/* =========================================
   PRIMARY BUTTON
========================================= */

.cta-primary {
  background: linear-gradient(
    90deg,
    #00FF88,
    #00D875
  );

  color: #031009;

  border: 1px solid transparent;

  box-shadow:
    0 10px 30px rgba(0,255,136,0.12);
}


.cta-primary span {
  font-size: 18px;

  transition: 0.25s ease;
}


.cta-primary:hover {
  transform: translateY(-3px);

  box-shadow:
    0 14px 38px rgba(0,255,136,0.22);
}


.cta-primary:hover span {
  transform: translateX(4px);
}


/* =========================================
   SECONDARY BUTTON
========================================= */

.cta-secondary {
  color: #FFFFFF;

  background: rgba(255,255,255,0.02);

  border: 1px solid rgba(255,255,255,0.12);
}


.cta-secondary:hover {
  transform: translateY(-3px);

  color: #031009;

  background: #00FF88;

  border-color: #00FF88;

  box-shadow:
    0 10px 30px rgba(0,255,136,0.12);
}


/* =========================================
   TRUST
========================================= */

.cta-trust {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 28px;

  margin-top: 35px;
}


.cta-trust-item {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #7E8B83;

  font-size: 11px;

  font-weight: 600;
}


/* =========================================
   CHECK ICON
========================================= */

.cta-check {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: rgba(0,255,136,0.07);

  border: 1px solid rgba(0,255,136,0.10);

  color: #00FF88;

  font-size: 10px;

  font-weight: 900;
}


/* =========================================
   HOVER GLOW
========================================= */

.cta-card::before {
  content: "";

  position: absolute;

  top: -120px;
  left: 50%;

  width: 300px;
  height: 200px;

  transform: translateX(-50%);

  background: rgba(0,255,136,0.06);

  filter: blur(80px);

  pointer-events: none;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {

  .cta-section {
    padding: 90px 0;
  }


  .cta-card {
    padding: 70px 30px;
  }


  .cta-card h2 {
    font-size: clamp(40px, 9vw, 60px);

    letter-spacing: -3px;
  }

}


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

@media (max-width: 600px) {

  .cta-section {
    padding: 75px 0;
  }


  .cta-card {
    padding: 65px 20px;

    border-radius: 22px;
  }


  .cta-card h2 {
    font-size: clamp(36px, 11vw, 48px);

    letter-spacing: -2.5px;
  }


  .cta-card > p {
    font-size: 14px;
  }


  .cta-buttons {
    flex-direction: column;

    width: 100%;
  }


  .cta-primary,
  .cta-secondary {
    width: 100%;
  }


  .cta-trust {
    flex-direction: column;

    gap: 13px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 390px) {

  .cta-section {
    padding: 65px 0;
  }


  .cta-card {
    padding: 55px 18px;
  }


  .cta-card h2 {
    font-size: 35px;
  }


  .cta-badge {
    font-size: 9px;
  }

}/* End custom CSS */