/* BREADCRUMB */
    .breadcrumb {
      background: var(--gray-light);
      padding: 12px 40px;
      font-size: 13px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .breadcrumb a { color: var(--text-muted); text-decoration: none; }
    .breadcrumb a:hover { color: var(--blue); }
    .breadcrumb .sep { opacity: .5; }
    .breadcrumb .current { color: var(--blue); font-weight: 600; }

    /* HERO */
    .hero {
      position: relative;
      min-height: auto;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: 60px 40px 60px 80px;
      background: linear-gradient(
  to right top,
  rgb(157, 56, 7),
  rgb(185, 90, 5),
  rgb(226, 120, 20),
  rgb(244, 150, 41),
  rgb(255, 180, 80)
);
    }

    /* Orange circles matching original screenshot */
    .circle-top {
      position: absolute;
      top: -110px;
      right: -350px;
      width: 580px;
      height: 580px;
      background: #7f7f7f;
      border-radius: 50%;
      z-index: 0;
    }
    .circle-bottom {
      position: absolute;
      bottom: -300px;
      right: 240px;
      width: 400px;
      height: 400px;
      background: white;
      border-radius: 50%;
      z-index: 0;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 520px;
      animation: fadeUp .7s ease both;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .hero-content h1 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(34px, 4.5vw, 56px);
      font-weight: 900;
      line-height: 1.06;
      color: white;
      margin-bottom: 15px;
      letter-spacing: .3px;
    }

    .hero-content p {
      font-size: clamp(14px, 1.5vw, 15.5px);
      line-height: 1.75;
      color: rgba(255,255,255,.88);
      margin-bottom: 40px;
      max-width: 460px;
    }

    .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 34px;
      border-radius: 50px;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .4px;
      cursor: pointer;
      text-decoration: none;
      transition: transform .18s, box-shadow .18s, background .18s;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-2px); }

    .btn-orange {
      color: #000000;
      border: 2px solid #ffffff;
      background: #f5ac33;
      box-shadow: 0 4px 20px rgba(240,114,50,.4);
    }
    .btn-orange:hover {background: white;box-shadow: 0 6px 28px rgba(240,114,50,.55);color: black;}

a.btn.btn-orange {}

    .btn-outline {
      background: transparent;
      color: white;
      border: 2px solid white;
    }
    .btn-outline:hover { background: rgba(255,255,255,.1); }

    /* Hero devices */
    .hero-devices {
      position: absolute;
      right: 12%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      width: 37%;
      max-width: 600px;
      pointer-events: none;
      animation: devicesIn .9s .15s ease both;
    }

    @keyframes devicesIn {
      from { opacity: 0; transform: translateY(-46%) scale(.96); }
      to   { opacity: 1; transform: translateY(-50%) scale(1); }
    }

    .hero-devices img { width: 100%; height: auto; filter: drop-shadow(0 16px 36px rgba(0,0,0,.32)); }

    /* RESPONSIVE */
    @media (max-width: 1100px) {
      .hero { padding: 60px 40px; }
      .hero-devices { width: 52%; }
      .circle-top { width: 460px; height: 460px; top: -90px; right: -90px; }
      .circle-bottom { width: 320px; height: 320px; bottom: -170px; right: 130px; }
    }

    @media (max-width: 768px) {
      .hamburger { display: flex; }
      .breadcrumb { padding: 10px 16px; }

      .hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 48px 20px 24px;
        min-height: auto;
      }
      .circle-top { width: 280px; height: 280px; top: -50px; right: -60px; }
      .circle-bottom { width: 190px; height: 190px; bottom: auto; top: 55%; right: -30px; }

      .hero-content { max-width: 100%; }
      .hero-content p { margin: 0 auto 32px; }
      .hero-buttons { justify-content: center; }

      .hero-devices {
        position: relative;
        top: auto; right: auto;
        transform: none;
        width: 100%;
        max-width: 480px;
        margin-top: 36px;
        animation: fadeSimple .8s .2s ease both;
      }
      @keyframes fadeSimple {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
      }
    }

    @media (max-width: 480px) {
      .hero {padding: 82px 16px 16px;}
      .btn { padding: 12px 24px; font-size: 14px; }
      .circle-top { width: 200px; height: 200px; top: -30px; right: -40px; }
      .circle-bottom { display: none; }
    }




  
.webeddy-content .container {
    padding: 20px 80px 60px;
}

.webeddy-content a {
    color: #960878;
    font-weight: 700;
}

.webeddy-content p {
    font-size: 20px;
    line-height: 40px;
    font-weight: 500;
    text-align: justify;
    padding: 5px 0;
    color: #000000;
    margin: 0px;
}

.webeddy-content h1 {
    font-size: 35px;
    line-height: 50px;
    font-weight: 700;
    padding: 15px 0 0 0;
}

.webeddy-content h2 {
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    color: #000000;
    padding: 25px 0 15px 0px;
    margin: 0px;
}

.webeddy-content h3 {
    font-size: 26px;
    line-height: 40px;
    font-weight: 700;
    color: #000000;
    padding: 10px 0 10px 0px;
    margin: 0px;
}


.webeddy-content h4{
    font-size: 24px;
    line-height: 40px;
    font-weight: 700;
    padding: 20px 0 5px 0px;
    contain-intrinsic-block-size: auto 100px;
    margin: 0px;
}


.webeddy-content h5{
    font-size: 22px;
    line-height: 40px;
    color: black;
    font-weight: 700;
    padding: 20px 0 5px 0px;
    margin: 0px;
}


.webeddy-content h6{
    font-size: 20px;
    line-height: 40px;
    font-weight: 700;
    padding: 20px 0 5px 0px;
    margin: 0px;
}

.webeddy-content ol {
    padding: 0px !important;
}

.webeddy-content ol li {
    font-size: 20px;
    line-height: 35px;
    color: black;
    font-weight: 500;
    text-align: justify;
    border-radius: 15px;
    margin-left: 35px;
    padding: 10px 0;
    list-style: auto;
}



.webeddy-content ul li {
    font-size: 20px;
    line-height: 30px;
    color: black;
    font-weight: 500;
    text-align: justify;
    border-radius: 15px;
    margin-left: 35px;
    padding: 8px 0;
    list-style: disc;
}









/* Responsive Adjustments */
@media (max-width: 900px) {

.webeddy-content p {
    font-size: 15px;
    line-height: 29px;
    font-weight: 500;
    text-align: justify;
    padding: 0px 0px 13px 0;
    color: #000000;
    margin: 0px;
}
    .webeddy-content .container {
    padding: 20px 10px;
}

.webeddy-content h1 {
    font-size: 35px;
    line-height: 50px;
    font-weight: 700;
    padding: 15px 0 0 0;
}

.webeddy-content h2 {
    font-size: 21px;
    line-height: 30px;
    font-weight: 700;
    color: #000000;
    padding: 12px 0 10px 0px;
    margin: 0px;
}

.webeddy-content h3 {
    font-size: 17px;
    line-height: 30px;
    font-weight: 700;
    color: #000000;
    padding: 10px 0 10px 0px;
    margin: 0px;
}


.webeddy-content h4{
    font-size: 24px;
    line-height: 40px;
    font-weight: 700;
    padding: 20px 0 5px 0px;
    contain-intrinsic-block-size: auto 100px;
    margin: 0px;
}


.webeddy-content h5{
    font-size: 22px;
    line-height: 40px;
    color: black;
    font-weight: 700;
    padding: 20px 0 5px 0px;
    margin: 0px;
}


.webeddy-content h6{
    font-size: 20px;
    line-height: 40px;
    font-weight: 700;
    padding: 20px 0 5px 0px;
    margin: 0px;
}

.webeddy-content ol {
    padding: 0px !important;
}

.webeddy-content ol li {
    font-size: 16px;
    line-height: 30px;
    color: black;
    font-weight: 500;
    text-align: justify;
    border-radius: 15px;
    margin-left: 35px;
    padding: 5px 0;
    list-style: auto;
}



.webeddy-content ul li {
    font-size: 16px;
    line-height: 26px;
    color: black;
    font-weight: 500;
    text-align: justify;
    border-radius: 15px;
    margin-left: 20px;
    padding: 4px 0;
    list-style: disc;
}

}


table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin: 15px 0px;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f4f4f4;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f1f1f1;
}