:root {
      --dv-green-dark: #769826;
      --dv-green: #A1CB35;
      --dv-yellow: #FFDE4E;
      --dv-orange: #FF9D4D;

      --dv-dark: #17210c;
      --dv-text: #536044;
      --dv-light: #f8fbed;
      --dv-white: #ffffff;
      --dv-border: #e3ebce;
      --dv-shadow: 0 18px 45px rgba(70, 92, 22, 0.12);
      --dv-radius: 18px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      font-family: "Manrope", sans-serif;
      color: var(--dv-dark);
      background: var(--dv-white);
      line-height: 1.7;
    }

    a,
    a:hover,
    a:focus {
      text-decoration: none;
      outline: none;
    }

    button,
    input,
    select,
    textarea {
      font-family: inherit;
    }

    section {
      position: relative;
      padding: 95px 0;
    }

    .section-light {
      background: var(--dv-light);
    }

    .section-heading {
      max-width: 720px;
      margin: 0 auto 50px;
      text-align: center;
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      padding: 8px 16px;
      color: var(--dv-green-dark);
      background: rgba(161, 203, 53, 0.14);
      border: 1px solid rgba(161, 203, 53, 0.25);
      border-radius: 50px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .section-heading h2 {
      margin: 0 0 16px;
      color: var(--dv-dark);
      font-size: 40px;
      font-weight: 800;
      line-height: 1.25;
    }

    .section-heading p {
      margin: 0;
      color: var(--dv-text);
      font-size: 16px;
    }

    .dv-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 52px;
      padding: 13px 26px;
      border: 0;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 800;
      transition: 0.3s ease;
    }

    .dv-btn-primary {
      color: var(--dv-white);
      background: linear-gradient(135deg, var(--dv-green-dark), var(--dv-green));
      box-shadow: 0 12px 25px rgba(118, 152, 38, 0.27);
    }

    .dv-btn-primary:hover,
    .dv-btn-primary:focus {
      color: var(--dv-white);
      transform: translateY(-3px);
      box-shadow: 0 16px 32px rgba(118, 152, 38, 0.35);
    }

    .dv-btn-secondary {
      color: var(--dv-dark);
      background: var(--dv-white);
      border: 1px solid var(--dv-border);
    }

    .dv-btn-secondary:hover,
    .dv-btn-secondary:focus {
      color: var(--dv-green-dark);
      transform: translateY(-3px);
      border-color: var(--dv-green);
    }

    .dv-btn-yellow {
      color: var(--dv-dark);
      background: linear-gradient(135deg, var(--dv-yellow), var(--dv-orange));
      box-shadow: 0 12px 25px rgba(255, 157, 77, 0.28);
    }

    .dv-btn-yellow:hover,
    .dv-btn-yellow:focus {
      color: var(--dv-dark);
      transform: translateY(-3px);
    }

    /* =========================================
       HERO
    ========================================= */

    .hero-section {
      min-height: 760px;
      padding: 105px 0 100px;
      overflow: hidden;
      background:
        radial-gradient(circle at 10% 20%, rgba(255, 222, 78, 0.32), transparent 25%),
        radial-gradient(circle at 90% 25%, rgba(161, 203, 53, 0.25), transparent 28%),
        linear-gradient(135deg, #fbfff1 0%, #ffffff 55%, #fff9e9 100%);
    }

    .hero-section:before {
      position: absolute;
      top: 95px;
      right: -90px;
      width: 360px;
      height: 360px;
      content: "";
      border: 80px solid rgba(255, 157, 77, 0.10);
      border-radius: 50%;
    }

    .hero-section:after {
      position: absolute;
      bottom: -100px;
      left: -100px;
      width: 300px;
      height: 300px;
      content: "";
      background: rgba(161, 203, 53, 0.10);
      border-radius: 50%;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding-top: 25px;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      padding: 9px 17px;
      color: var(--dv-green-dark);
      background: var(--dv-white);
      border: 1px solid var(--dv-border);
      border-radius: 50px;
      box-shadow: 0 10px 30px rgba(55, 75, 18, 0.07);
      font-size: 13px;
      font-weight: 800;
    }

    .hero-badge i {
      color: var(--dv-orange);
    }

    .hero-content h1 {
      max-width: 680px;
      margin: 0 0 22px;
      color: var(--dv-dark);
      font-size: 60px;
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -2px;
    }

    .hero-content h1 span {
      position: relative;
      color: var(--dv-green-dark);
    }

    .hero-content h1 span:after {
      position: absolute;
      right: 0;
      bottom: 4px;
      left: 0;
      z-index: -1;
      height: 11px;
      content: "";
      background: var(--dv-yellow);
      border-radius: 50px;
      opacity: 0.75;
    }

    .hero-content > p {
      max-width: 625px;
      margin-bottom: 30px;
      color: var(--dv-text);
      font-size: 17px;
      line-height: 1.9;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 35px;
    }

    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .hero-trust-item {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #4d593b;
      font-size: 13px;
      font-weight: 700;
    }

    .hero-trust-item i {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25px;
      height: 25px;
      color: var(--dv-green-dark);
      background: rgba(161, 203, 53, 0.18);
      border-radius: 50%;
    }

    .hero-login-wrapper {
      position: relative;
      z-index: 4;
      max-width: 470px;
      margin-left: auto;
    }

    .hero-login-wrapper:before {
      position: absolute;
      top: -25px;
      right: -25px;
      width: 90px;
      height: 90px;
      content: "";
      background: var(--dv-yellow);
      border-radius: 25px;
      opacity: 0.75;
      transform: rotate(18deg);
    }

    .hero-login-wrapper:after {
      position: absolute;
      bottom: -28px;
      left: -28px;
      width: 100px;
      height: 100px;
      content: "";
      background: var(--dv-green);
      border-radius: 50%;
      opacity: 0.16;
    }

    .login-card {
      position: relative;
      z-index: 2;
      padding: 35px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(161, 203, 53, 0.24);
      border-radius: 24px;
      box-shadow: 0 30px 80px rgba(73, 96, 24, 0.18);
    }

    .login-card-header {
      margin-bottom: 28px;
      text-align: center;
    }

    .login-card-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 58px;
      height: 58px;
      margin: 0 auto 15px;
      color: var(--dv-white);
      background: linear-gradient(135deg, var(--dv-green-dark), var(--dv-green));
      border-radius: 16px;
      box-shadow: 0 12px 25px rgba(118, 152, 38, 0.28);
      font-size: 22px;
    }

    .login-card h2 {
      margin: 0 0 8px;
      font-size: 25px;
      font-weight: 800;
    }

    .login-card-header p {
      margin: 0;
      color: var(--dv-text);
      font-size: 13px;
    }

    .login-card .form-group {
      margin-bottom: 18px;
    }

    .login-card label {
      margin-bottom: 8px;
      color: #354122;
      font-size: 12px;
      font-weight: 800;
    }

    .input-group-addon {
      min-width: 48px;
      color: var(--dv-green-dark);
      background: #f6faeb;
      border-color: var(--dv-border);
      border-radius: 11px 0 0 11px;
    }

    .login-card .form-control {
      height: 51px;
      color: var(--dv-dark);
      background: var(--dv-white);
      border-color: var(--dv-border);
      border-radius: 0 11px 11px 0;
      box-shadow: none;
      font-size: 13px;
    }

    .login-card .form-control:focus {
      border-color: var(--dv-green);
      box-shadow: 0 0 0 3px rgba(161, 203, 53, 0.13);
    }

    .login-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 4px 0 20px;
      font-size: 12px;
    }

    .login-options a {
      color: var(--dv-green-dark);
      font-weight: 800;
    }

    .login-card .dv-btn {
      width: 100%;
    }

    .login-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 21px 0;
      color: #879173;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .login-divider:before,
    .login-divider:after {
      flex: 1;
      height: 1px;
      content: "";
      background: var(--dv-border);
    }

    .login-signup {
      margin: 0;
      color: var(--dv-text);
      text-align: center;
      font-size: 13px;
    }

    .login-signup a {
      color: var(--dv-green-dark);
      font-weight: 800;
    }

    /* =========================================
       PLATFORM SHOWCASE
    ========================================= */

    .platform-section {
      padding: 45px 0;
      background: var(--dv-dark);
    }

    .platform-title {
      margin-bottom: 28px;
      color: rgba(255, 255, 255, 0.72);
      text-align: center;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.8px;
      text-transform: uppercase;
    }

    .platform-list {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 14px;
    }

    .platform-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      min-height: 72px;
      color: var(--dv-white);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      font-size: 13px;
      font-weight: 800;
      transition: 0.3s ease;
    }

    .platform-item:hover {
      color: var(--dv-dark);
      background: var(--dv-yellow);
      transform: translateY(-5px);
    }

    .platform-item i {
      font-size: 22px;
    }

    /* =========================================
       CARDS
    ========================================= */

    .dv-card {
      height: 100%;
      padding: 30px;
      background: var(--dv-white);
      border: 1px solid var(--dv-border);
      border-radius: var(--dv-radius);
      box-shadow: 0 12px 35px rgba(56, 74, 18, 0.07);
      transition: 0.35s ease;
    }

    .dv-card:hover {
      border-color: rgba(161, 203, 53, 0.6);
      box-shadow: var(--dv-shadow);
      transform: translateY(-8px);
    }

    .card-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      margin-bottom: 22px;
      color: var(--dv-green-dark);
      background: linear-gradient(135deg, rgba(161, 203, 53, 0.2), rgba(255, 222, 78, 0.3));
      border-radius: 17px;
      font-size: 23px;
    }

    .dv-card h3 {
      margin: 0 0 12px;
      font-size: 19px;
      font-weight: 800;
    }

    .dv-card p {
      margin: 0;
      color: var(--dv-text);
      font-size: 14px;
    }

    .service-row,
    .feature-row,
    .country-row,
    .review-row {
      display: flex;
      flex-wrap: wrap;
    }

    .service-col,
    .feature-col,
    .country-col,
    .review-col {
      display: flex;
      margin-bottom: 30px;
    }

    .service-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 20px;
      color: var(--dv-green-dark);
      font-size: 13px;
      font-weight: 800;
    }

    .service-link:hover {
      color: var(--dv-orange);
    }

    /* =========================================
       HOW IT WORKS
    ========================================= */

    .steps-wrapper {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 25px;
    }

    .steps-wrapper:before {
      position: absolute;
      top: 39px;
      right: 12%;
      left: 12%;
      z-index: 0;
      height: 2px;
      content: "";
      background: linear-gradient(90deg, var(--dv-green), var(--dv-yellow), var(--dv-orange));
    }

    .step-card {
      position: relative;
      z-index: 1;
      padding: 0 15px;
      text-align: center;
    }

    .step-number {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 78px;
      height: 78px;
      margin: 0 auto 25px;
      color: var(--dv-white);
      background: linear-gradient(135deg, var(--dv-green-dark), var(--dv-green));
      border: 8px solid var(--dv-white);
      border-radius: 50%;
      box-shadow: 0 10px 28px rgba(118, 152, 38, 0.25);
      font-size: 22px;
      font-weight: 800;
    }

    .step-card:nth-child(2) .step-number {
      color: var(--dv-dark);
      background: var(--dv-yellow);
    }

    .step-card:nth-child(3) .step-number {
      color: var(--dv-dark);
      background: var(--dv-orange);
    }

    .step-card h3 {
      margin: 0 0 10px;
      font-size: 18px;
      font-weight: 800;
    }

    .step-card p {
      margin: 0;
      color: var(--dv-text);
      font-size: 13px;
    }

    /* =========================================
       COUNTRY CARDS
    ========================================= */

    .country-card {
      position: relative;
      overflow: hidden;
    }

    .country-card:after {
      position: absolute;
      top: -30px;
      right: -30px;
      width: 100px;
      height: 100px;
      content: "";
      background: rgba(255, 222, 78, 0.16);
      border-radius: 50%;
    }

    .country-flag {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 68px;
      height: 52px;
      margin-bottom: 20px;
      background: var(--dv-light);
      border: 1px solid var(--dv-border);
      border-radius: 12px;
      font-size: 34px;
    }

    .country-card small {
      display: block;
      margin-top: 12px;
      color: var(--dv-green-dark);
      font-size: 12px;
      font-weight: 800;
    }

    /* =========================================
       STATISTICS
    ========================================= */

    .statistics-section {
      padding: 75px 0;
      overflow: hidden;
      color: var(--dv-white);
      background:
        radial-gradient(circle at 10% 0%, rgba(255, 222, 78, 0.16), transparent 30%),
        linear-gradient(135deg, var(--dv-dark), #31430e);
    }

    .statistics-section:before {
      position: absolute;
      top: -120px;
      right: -80px;
      width: 350px;
      height: 350px;
      content: "";
      border: 70px solid rgba(161, 203, 53, 0.08);
      border-radius: 50%;
    }

    .stat-item {
      position: relative;
      z-index: 2;
      padding: 25px 15px;
      text-align: center;
    }

    .stat-icon {
      margin-bottom: 15px;
      color: var(--dv-yellow);
      font-size: 30px;
    }

    .stat-number {
      display: block;
      margin-bottom: 6px;
      color: var(--dv-white);
      font-size: 38px;
      font-weight: 800;
      line-height: 1.1;
    }

    .stat-label {
      color: rgba(255, 255, 255, 0.67);
      font-size: 13px;
      font-weight: 700;
    }

    /* =========================================
       PRICING
    ========================================= */

    .pricing-card {
      position: relative;
      height: 100%;
      padding: 35px;
      background: var(--dv-white);
      border: 1px solid var(--dv-border);
      border-radius: 22px;
      box-shadow: 0 15px 40px rgba(56, 74, 18, 0.08);
      transition: 0.35s ease;
    }

    .pricing-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--dv-shadow);
    }

    .pricing-card.featured {
      border: 2px solid var(--dv-green);
      transform: scale(1.035);
    }

    .pricing-card.featured:hover {
      transform: scale(1.035) translateY(-8px);
    }

    .pricing-badge {
      position: absolute;
      top: -14px;
      right: 25px;
      padding: 7px 15px;
      color: var(--dv-dark);
      background: var(--dv-yellow);
      border-radius: 50px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.7px;
      text-transform: uppercase;
    }

    .pricing-name {
      margin-bottom: 10px;
      color: var(--dv-green-dark);
      font-size: 14px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .pricing-card h3 {
      margin: 0 0 10px;
      font-size: 25px;
      font-weight: 800;
    }

    .pricing-card > p {
      min-height: 50px;
      margin-bottom: 20px;
      color: var(--dv-text);
      font-size: 13px;
    }

    .price {
      margin-bottom: 24px;
      color: var(--dv-dark);
      font-size: 42px;
      font-weight: 800;
      line-height: 1;
    }

    .price sup {
      top: -14px;
      font-size: 17px;
    }

    .price span {
      color: var(--dv-text);
      font-size: 12px;
      font-weight: 700;
    }

    .pricing-list {
      min-height: 200px;
      margin: 0 0 25px;
      padding: 0;
      list-style: none;
    }

    .pricing-list li {
      display: flex;
      gap: 10px;
      margin-bottom: 13px;
      color: #4c583c;
      font-size: 13px;
    }

    .pricing-list i {
      margin-top: 4px;
      color: var(--dv-green-dark);
    }

    .pricing-card .dv-btn {
      width: 100%;
    }

    /* =========================================
       REVIEWS
    ========================================= */

    .review-card {
      position: relative;
    }

    .review-card:before {
      position: absolute;
      top: 17px;
      right: 24px;
      color: rgba(161, 203, 53, 0.15);
      content: "\f10e";
      font-family: "Font Awesome 6 Free";
      font-size: 45px;
      font-weight: 900;
    }

    .review-stars {
      margin-bottom: 17px;
      color: #f7b500;
      font-size: 12px;
    }

    .review-text {
      min-height: 120px;
      margin-bottom: 22px !important;
      color: #465235 !important;
      font-style: italic;
    }

    .review-user {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 18px;
      border-top: 1px solid var(--dv-border);
    }

    .review-avatar {
      display: flex;
      flex: 0 0 48px;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      color: var(--dv-white);
      background: linear-gradient(135deg, var(--dv-green-dark), var(--dv-green));
      border-radius: 14px;
      font-size: 15px;
      font-weight: 800;
    }

    .review-user h4 {
      margin: 0 0 2px;
      font-size: 14px;
      font-weight: 800;
    }

    .review-user span {
      color: var(--dv-text);
      font-size: 11px;
    }

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

    .faq-wrapper {
      max-width: 900px;
      margin: 0 auto;
    }

    .faq-panel {
      margin-bottom: 14px !important;
      overflow: hidden;
      background: var(--dv-white);
      border: 1px solid var(--dv-border) !important;
      border-radius: 14px !important;
      box-shadow: 0 8px 25px rgba(56, 74, 18, 0.05);
    }

    .faq-panel .panel-heading {
      padding: 0;
      background: var(--dv-white);
      border: 0;
    }

    .faq-panel .panel-title a {
      position: relative;
      display: block;
      padding: 21px 55px 21px 22px;
      color: var(--dv-dark);
      font-size: 14px;
      font-weight: 800;
    }

    .faq-panel .panel-title a:after {
      position: absolute;
      top: 50%;
      right: 20px;
      width: 30px;
      height: 30px;
      color: var(--dv-green-dark);
      content: "\f068";
      font-family: "Font Awesome 6 Free";
      font-size: 12px;
      font-weight: 900;
      line-height: 30px;
      text-align: center;
      background: rgba(161, 203, 53, 0.14);
      border-radius: 8px;
      transform: translateY(-50%);
    }

    .faq-panel .panel-title a.collapsed:after {
      content: "\2b";
    }

    .faq-panel .panel-body {
      padding: 0 22px 22px;
      color: var(--dv-text);
      border-top: 0 !important;
      font-size: 13px;
      line-height: 1.8;
    }

    /* =========================================
       FINAL CTA
    ========================================= */

    .cta-section {
      padding: 40px 0 90px;
      background: var(--dv-light);
    }

    .cta-box {
      position: relative;
      overflow: hidden;
      padding: 65px;
      color: var(--dv-white);
      background:
        radial-gradient(circle at 85% 20%, rgba(255, 222, 78, 0.28), transparent 28%),
        linear-gradient(135deg, var(--dv-green-dark), #516d13);
      border-radius: 28px;
      box-shadow: 0 30px 70px rgba(75, 101, 18, 0.25);
    }

    .cta-box:before {
      position: absolute;
      top: -100px;
      right: -80px;
      width: 270px;
      height: 270px;
      content: "";
      border: 55px solid rgba(255, 255, 255, 0.06);
      border-radius: 50%;
    }

    .cta-content {
      position: relative;
      z-index: 2;
    }

    .cta-box h2 {
      max-width: 600px;
      margin: 0 0 15px;
      font-size: 38px;
      font-weight: 800;
      line-height: 1.3;
    }

    .cta-box p {
      max-width: 620px;
      margin: 0;
      color: rgba(255, 255, 255, 0.75);
      font-size: 15px;
    }

    .cta-action {
      position: relative;
      z-index: 2;
      padding-top: 25px;
      text-align: right;
    }



    /* PerfectPanel login integration */
    .login-card .alert {
      position: relative;
      margin-bottom: 20px;
      padding: 14px 42px 14px 16px;
      border-radius: 11px;
      font-size: 12px;
      line-height: 1.6;
    }

    .login-card .alert-danger {
      color: #9f2525;
      background: #fff0f0;
      border: 1px solid #ffd3d3;
    }

    .login-card .alert-success {
      color: #376a19;
      background: #f2fbe9;
      border: 1px solid #d8efc4;
    }

    .login-card .alert .close {
      position: absolute;
      top: 8px;
      right: 12px;
      color: inherit;
      opacity: 0.65;
    }

    .remember-login {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin: 0;
      color: var(--dv-text);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
    }

    .remember-login input { margin: 0; }

    .login-captcha {
      margin-bottom: 20px;
      overflow: hidden;
    }

    .login-captcha iframe,
    .login-captcha > div,
    .google-login-wrapper iframe {
      max-width: 100% !important;
    }

    .google-login-wrapper {
      display: flex;
      justify-content: center;
      width: 100%;
      overflow: hidden;
    }

    .google-login-wrapper .g_id_signin { width: 100%; }

    .rtl-form {
      direction: rtl;
      text-align: right;
    }

    .rtl-form .input-group-addon {
      border-right: 1px solid var(--dv-border);
      border-left: 0;
      border-radius: 0 11px 11px 0;
    }

    .rtl-form .form-control { border-radius: 11px 0 0 11px; }

    .rtl-form .alert .close {
      right: auto;
      left: 12px;
    }


    /* =========================================
       RESPONSIVE
    ========================================= */

    @media (max-width: 1199px) {
      .hero-content h1 {
        font-size: 52px;
      }

      .platform-list {
        grid-template-columns: repeat(3, 1fr);
      }

      .pricing-card {
        padding: 28px;
      }
    }

    @media (max-width: 991px) {
      section {
        padding: 80px 0;
      }

      .hero-section {
        padding-top: 95px;
      }

      .hero-content {
        padding-top: 0;
        margin-bottom: 55px;
        text-align: center;
      }

      .hero-content h1,
      .hero-content > p {
        margin-right: auto;
        margin-left: auto;
      }

      .hero-actions,
      .hero-trust {
        justify-content: center;
      }

      .hero-login-wrapper {
        margin: 0 auto;
      }

      .steps-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 20px;
      }

      .steps-wrapper:before {
        display: none;
      }

      .pricing-card.featured,
      .pricing-card.featured:hover {
        transform: none;
      }

      .pricing-col {
        margin-bottom: 30px;
      }

      .cta-box {
        padding: 50px 40px;
        text-align: center;
      }

      .cta-box h2,
      .cta-box p {
        margin-right: auto;
        margin-left: auto;
      }

      .cta-action {
        text-align: center;
      }
    }

    @media (max-width: 767px) {
      section {
        padding: 65px 0;
      }

      .hero-section {
        min-height: auto;
        padding: 75px 0 75px;
      }

      .hero-content h1 {
        font-size: 39px;
        letter-spacing: -1px;
      }

      .hero-content > p {
        font-size: 15px;
      }

      .hero-actions {
        display: block;
      }

      .hero-actions .dv-btn {
        width: 100%;
        margin-bottom: 12px;
      }

      .hero-trust {
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: left;
      }

      .login-card {
        padding: 26px 20px;
        border-radius: 18px;
      }

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

      .platform-item {
        min-height: 62px;
        font-size: 12px;
      }

      .section-heading {
        margin-bottom: 38px;
      }

      .section-heading h2 {
        font-size: 30px;
      }

      .service-col,
      .feature-col,
      .country-col,
      .review-col {
        display: block;
      }

      .steps-wrapper {
        grid-template-columns: 1fr;
      }

      .step-card {
        padding: 0 30px;
      }

      .stat-item {
        padding: 25px 5px;
      }

      .stat-number {
        font-size: 30px;
      }

      .pricing-list {
        min-height: 0;
      }

      .cta-box {
        padding: 42px 22px;
        border-radius: 20px;
      }

      .cta-box h2 {
        font-size: 29px;
      }
    }

    @media (max-width: 480px) {
      .hero-content h1 {
        font-size: 34px;
      }

      .hero-trust {
        grid-template-columns: 1fr;
        justify-items: center;
      }

      .platform-list {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
      }

      .platform-item {
        flex-direction: column;
        gap: 5px;
        min-height: 80px;
      }

      .section-heading h2 {
        font-size: 27px;
      }
    }



    :root {
      --vibe-primary: #769826;
      --vibe-primary-light: #A1CB35;
      --vibe-yellow: #FFDE4E;
      --vibe-orange: #FF9D4D;
      --vibe-dark: #15200b;
      --vibe-dark-2: #22320f;
      --vibe-text: #536044;
      --vibe-muted: #7b876a;
      --vibe-bg: #f5f8ed;
      --vibe-card: #ffffff;
      --vibe-border: #e1e9cf;
      --vibe-danger: #d94b4b;
      --vibe-success: #5d8f21;
      --vibe-sidebar-width: 270px;
      --vibe-topbar-height: 72px;
      --vibe-radius: 16px;
      --vibe-shadow: 0 16px 42px rgba(55, 76, 17, .10);
    }

    * {
      box-sizing: border-box;
    }

    html {
      min-height: 100%;
      scroll-behavior: smooth;
    }

    body {
      min-height: 100%;
      margin: 0;
      color: var(--vibe-dark);
      background: var(--vibe-bg);
      font-family: inherit;
      line-height: 1.65;
      overflow-x: hidden;
    }

    body.vibe-public {
      background: #fff;
    }

    a,
    a:hover,
    a:focus {
      text-decoration: none;
      outline: none;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    /* ================================
       SHARED BRAND
    ================================= */

    .vibe-brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
      color: var(--vibe-dark) !important;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.4px;
    }

    .vibe-brand:hover,
    .vibe-brand:focus {
      color: var(--vibe-dark) !important;
    }

    .vibe-brand img {
      display: block;
      max-width: 170px;
      max-height: 44px;
    }

    .vibe-brand-mark {
      display: inline-flex;
      flex: 0 0 42px;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      color: #fff;
      background: linear-gradient(135deg, var(--vibe-primary), var(--vibe-primary-light));
      border-radius: 13px;
      box-shadow: 0 10px 22px rgba(118, 152, 38, .25);
      font-size: 18px;
    }

    .vibe-brand-dot {
      color: var(--vibe-orange);
    }

    /* ================================
       PUBLIC NAVBAR
    ================================= */

    .vibe-public-nav {
      min-height: 76px;
      margin: 0;
      background: rgba(255, 255, 255, .96);
      border: 0;
      border-bottom: 1px solid rgba(118, 152, 38, .13);
      border-radius: 0;
      box-shadow: 0 8px 30px rgba(41, 58, 12, .06);
      backdrop-filter: blur(15px);
      z-index: 1030;
    }

    .vibe-public-nav .navbar-header {
      min-height: 76px;
    }

    .vibe-public-nav .navbar-brand {
      display: flex;
      align-items: center;
      height: 76px;
      padding-top: 0;
      padding-bottom: 0;
    }

    .vibe-public-nav .navbar-nav > li > a {
      padding: 28px 14px;
      color: #465436;
      background: transparent !important;
      font-size: 13px;
      font-weight: 700;
      transition: .25s ease;
    }

    .vibe-public-nav .navbar-nav > li > a:hover,
    .vibe-public-nav .navbar-nav > li > a:focus,
    .vibe-public-nav .navbar-nav > li.active > a {
      color: var(--vibe-primary);
    }

    .vibe-public-nav .navbar-nav > li.active > a:after {
      position: absolute;
      right: 14px;
      bottom: 19px;
      left: 14px;
      height: 2px;
      content: "";
      background: var(--vibe-primary-light);
      border-radius: 20px;
    }

    .vibe-public-nav .navbar-toggle {
      margin-top: 19px;
      padding: 10px;
      border: 1px solid var(--vibe-border);
      border-radius: 10px;
    }

    .vibe-public-nav .navbar-toggle .icon-bar {
      background: var(--vibe-primary);
    }

    .vibe-public-nav .dropdown-menu {
      padding: 9px;
      border: 1px solid var(--vibe-border);
      border-radius: 12px;
      box-shadow: var(--vibe-shadow);
    }

    .vibe-public-nav .dropdown-menu > li > a {
      padding: 9px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
    }

    .vibe-public-nav .dropdown-menu > li > a:hover,
    .vibe-public-nav .dropdown-menu > li.active > a {
      color: var(--vibe-primary);
      background: rgba(161, 203, 53, .13);
    }

    /* ================================
       PRIVATE APP SHELL
    ================================= */

    .vibe-private-shell {
      min-height: 100vh;
      background:
        radial-gradient(circle at 90% 2%, rgba(255, 222, 78, .16), transparent 24%),
        var(--vibe-bg);
    }

    .vibe-private-topbar {
      position: fixed;
      top: 0;
      right: 0;
      left: var(--vibe-sidebar-width);
      z-index: 1040;
      min-height: var(--vibe-topbar-height);
      margin: 0;
      background: rgba(255, 255, 255, .96);
      border: 0;
      border-bottom: 1px solid var(--vibe-border);
      border-radius: 0;
      box-shadow: 0 8px 28px rgba(48, 68, 13, .06);
      backdrop-filter: blur(14px);
      transition: left .28s ease;
    }

    .vibe-private-topbar .container-fluid {
      padding-right: 24px;
      padding-left: 24px;
    }

    .vibe-private-topbar .navbar-header {
      min-height: var(--vibe-topbar-height);
    }

    .vibe-private-topbar .navbar-toggle {
      display: none;
    }

    .vibe-mobile-sidebar-toggle {
      display: none;
      float: left;
      width: 42px;
      height: 42px;
      margin: 15px 14px 0 0;
      padding: 0;
      color: var(--vibe-primary);
      background: #f8faef;
      border: 1px solid var(--vibe-border);
      border-radius: 11px;
      line-height: 40px;
      text-align: center;
    }

    .vibe-private-topbar .navbar-brand {
      display: none;
    }

    .vibe-topbar-title {
      display: inline-flex;
      align-items: center;
      min-height: var(--vibe-topbar-height);
      margin: 0;
      padding: 0;
      color: var(--vibe-dark);
      font-size: 18px;
      font-weight: 800;
    }

    .vibe-private-topbar .navbar-right {
      margin-right: 0;
    }

    .vibe-private-topbar .navbar-nav > li > a {
      padding-top: 25px;
      padding-bottom: 25px;
      color: #4d5a3e;
      background: transparent !important;
      font-size: 12px;
      font-weight: 700;
    }

    .vibe-private-topbar .navbar-nav > li > a:hover,
    .vibe-private-topbar .navbar-nav > li > a:focus,
    .vibe-private-topbar .navbar-nav > li.active > a {
      color: var(--vibe-primary);
    }

    .vibe-private-topbar .badge {
      padding: 7px 11px;
      color: var(--vibe-dark);
      background: linear-gradient(135deg, var(--vibe-yellow), var(--vibe-orange));
      border-radius: 30px;
      font-size: 11px;
    }

    .vibe-private-topbar .dropdown-menu {
      padding: 8px;
      border: 1px solid var(--vibe-border);
      border-radius: 12px;
      box-shadow: var(--vibe-shadow);
    }

    .vibe-private-topbar .dropdown-menu > li > a {
      padding: 9px 12px;
      border-radius: 8px;
      font-size: 12px;
    }

    .vibe-private-topbar .dropdown-menu > li > a:hover,
    .vibe-private-topbar .dropdown-menu > li.active > a {
      color: var(--vibe-primary);
      background: rgba(161, 203, 53, .14);
    }

    .vibe-private-sidebar {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 1050;
      display: flex;
      flex-direction: column;
      width: var(--vibe-sidebar-width);
      overflow: hidden;
      color: rgba(255, 255, 255, .72);
      background:
        radial-gradient(circle at 10% 10%, rgba(255, 222, 78, .10), transparent 24%),
        linear-gradient(180deg, #18230c, #101707);
      box-shadow: 16px 0 40px rgba(27, 39, 8, .13);
      transition: transform .28s ease;
    }

    .vibe-sidebar-brand {
      display: flex;
      flex: 0 0 var(--vibe-topbar-height);
      align-items: center;
      padding: 0 22px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .vibe-sidebar-brand .vibe-brand {
      color: #fff !important;
      font-size: 20px;
    }

    .vibe-sidebar-brand .vibe-brand img {
      max-width: 160px;
      max-height: 42px;
      filter: brightness(0) invert(1);
    }

    .vibe-sidebar-brand .vibe-brand-mark {
      width: 40px;
      height: 40px;
      flex-basis: 40px;
    }

    .vibe-sidebar-scroll {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 18px 14px 24px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, .18) transparent;
    }

    .vibe-sidebar-label {
      padding: 8px 12px 10px;
      color: rgba(255, 255, 255, .38);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
    }

    .vibe-sidebar-menu {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .vibe-sidebar-menu li {
      margin-bottom: 5px;
    }

    .vibe-sidebar-menu li a {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 46px;
      padding: 11px 13px;
      color: rgba(255, 255, 255, .68);
      border-radius: 11px;
      font-size: 12px;
      font-weight: 700;
      transition: .23s ease;
    }

    .vibe-sidebar-menu li a:hover,
    .vibe-sidebar-menu li.active a {
      color: #fff;
      background: linear-gradient(135deg, rgba(118, 152, 38, .95), rgba(161, 203, 53, .78));
      box-shadow: 0 11px 24px rgba(80, 108, 19, .22);
      transform: translateX(3px);
    }

    .vibe-sidebar-menu .navbar-icon {
      width: 24px;
      margin-right: 9px;
      color: var(--vibe-yellow);
      text-align: center;
      font-size: 15px;
    }

    .vibe-sidebar-menu li.active .navbar-icon,
    .vibe-sidebar-menu li a:hover .navbar-icon {
      color: #fff;
    }

    .vibe-sidebar-footer {
      flex: 0 0 auto;
      padding: 17px 18px;
      color: rgba(255, 255, 255, .42);
      border-top: 1px solid rgba(255, 255, 255, .07);
      font-size: 10px;
      text-align: center;
    }

    .vibe-private-main {
      min-height: calc(100vh - 1px);
      margin-left: var(--vibe-sidebar-width);
      padding-top: var(--vibe-topbar-height);
      transition: margin-left .28s ease;
    }

    .vibe-private-content {
      min-height: calc(100vh - var(--vibe-topbar-height) - 80px);
      padding: 30px 24px 45px;
    }

    .vibe-content-inner {
      width: 100%;
      max-width: 1600px;
      margin: 0 auto;
    }

    .vibe-sidebar-overlay {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1045;
      display: none;
      background: rgba(12, 19, 5, .56);
      opacity: 0;
      transition: opacity .25s ease;
    }

    body.vibe-sidebar-open .vibe-sidebar-overlay {
      opacity: 1;
    }

    /* ================================
       GLOBAL PRIVATE PAGE VIBE
       Applies to all standard pages:
       neworder, massorder, drip_feed,
       services, orders, subscriptions,
       addfunds, refunds, tickets,
       viewticket, faq, api, terms,
       affiliates, account, notifications,
       blog, blogpost, newpage,
       child_panel and refill.
    ================================= */

    .vibe-private-content .container,
    .vibe-private-content .container-fluid {
      width: 100%;
      max-width: none;
      padding-right: 0;
      padding-left: 0;
    }

    .vibe-private-content .row {
      margin-right: -10px;
      margin-left: -10px;
    }

    .vibe-private-content [class*="col-"] {
      padding-right: 10px;
      padding-left: 10px;
    }

    .vibe-private-content .well,
    .vibe-private-content .panel,
    .vibe-private-content .card,
    .vibe-private-content .table-responsive,
    .vibe-private-content .api-code,
    .vibe-private-content .ticket-message,
    .vibe-private-content .blog-item {
      background: var(--vibe-card);
      border: 1px solid var(--vibe-border);
      border-radius: var(--vibe-radius);
      box-shadow: 0 10px 30px rgba(55, 76, 17, .065);
    }

    .vibe-private-content .well {
      min-height: 20px;
      margin-bottom: 22px;
      padding: 24px;
    }

    .vibe-private-content .panel {
      overflow: hidden;
      margin-bottom: 22px;
    }

    .vibe-private-content .panel-heading {
      padding: 17px 20px;
      color: var(--vibe-dark);
      background: #fbfcf7;
      border-bottom: 1px solid var(--vibe-border);
      font-size: 14px;
      font-weight: 800;
    }

    .vibe-private-content .panel-title {
      font-weight: 800;
    }

    .vibe-private-content .panel-body {
      padding: 22px;
    }

    .vibe-private-content .form-group {
      margin-bottom: 18px;
    }

    .vibe-private-content .control-label,
    .vibe-private-content label {
      margin-bottom: 7px;
      color: #39472a;
      font-size: 12px;
      font-weight: 800;
    }

    .vibe-private-content .form-control {
      height: 48px;
      padding: 11px 14px;
      color: var(--vibe-dark);
      background: #fff;
      border: 1px solid var(--vibe-border);
      border-radius: 11px;
      box-shadow: none;
      font-size: 13px;
      transition: .2s ease;
    }

    .vibe-private-content textarea.form-control {
      min-height: 120px;
      height: auto;
      resize: vertical;
    }

    .vibe-private-content .form-control:focus {
      border-color: var(--vibe-primary-light);
      box-shadow: 0 0 0 3px rgba(161, 203, 53, .13);
    }

    .vibe-private-content .input-group-addon {
      color: var(--vibe-primary);
      background: #f6f9ec;
      border-color: var(--vibe-border);
    }

    .vibe-private-content .btn {
      min-height: 43px;
      padding: 10px 18px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 800;
      transition: .23s ease;
    }

    .vibe-private-content .btn-primary,
    .vibe-private-content .btn-success {
      color: #fff;
      background: linear-gradient(135deg, var(--vibe-primary), var(--vibe-primary-light));
      border-color: transparent;
      box-shadow: 0 10px 22px rgba(118, 152, 38, .22);
    }

    .vibe-private-content .btn-primary:hover,
    .vibe-private-content .btn-primary:focus,
    .vibe-private-content .btn-success:hover,
    .vibe-private-content .btn-success:focus {
      color: #fff;
      background: linear-gradient(135deg, #678721, #95bd30);
      border-color: transparent;
      transform: translateY(-2px);
    }

    .vibe-private-content .btn-default {
      color: var(--vibe-dark);
      background: #fff;
      border-color: var(--vibe-border);
    }

    .vibe-private-content .btn-default:hover,
    .vibe-private-content .btn-default:focus {
      color: var(--vibe-primary);
      background: #fafcf5;
      border-color: var(--vibe-primary-light);
    }

    .vibe-private-content .btn-danger {
      background: var(--vibe-danger);
      border-color: var(--vibe-danger);
    }

    .vibe-private-content .alert {
      padding: 14px 18px;
      border: 0;
      border-radius: 11px;
      font-size: 12px;
    }

    .vibe-private-content .alert-success {
      color: #416d1c;
      background: #eff8e6;
    }

    .vibe-private-content .alert-danger {
      color: #9a3030;
      background: #fff0f0;
    }

    .vibe-private-content .alert-warning {
      color: #82600e;
      background: #fff8da;
    }

    .vibe-private-content .alert-info {
      color: #41616d;
      background: #eaf7fb;
    }

    .vibe-private-content .table {
      margin-bottom: 0;
      background: #fff;
    }

    .vibe-private-content .table > thead > tr > th {
      padding: 14px 12px;
      color: #354126;
      background: #f5f8ed;
      border-bottom: 1px solid var(--vibe-border);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .25px;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .vibe-private-content .table > tbody > tr > td {
      padding: 14px 12px;
      color: #536044;
      border-top: 1px solid #edf1e4;
      font-size: 12px;
      vertical-align: middle;
    }

    .vibe-private-content .table > tbody > tr:hover {
      background: #fbfcf8;
    }

    .vibe-private-content .badge,
    .vibe-private-content .label {
      display: inline-block;
      padding: 6px 10px;
      border-radius: 30px;
      font-size: 10px;
      font-weight: 800;
    }

    .vibe-private-content .nav-tabs {
      margin-bottom: 20px;
      border-bottom: 1px solid var(--vibe-border);
    }

    .vibe-private-content .nav-tabs > li > a {
      margin-right: 5px;
      color: var(--vibe-text);
      border: 0;
      border-radius: 9px 9px 0 0;
      font-size: 12px;
      font-weight: 700;
    }

    .vibe-private-content .nav-tabs > li.active > a,
    .vibe-private-content .nav-tabs > li.active > a:hover,
    .vibe-private-content .nav-tabs > li.active > a:focus {
      color: var(--vibe-primary);
      background: rgba(161, 203, 53, .12);
      border: 0;
    }

    .vibe-private-content .pagination > li > a,
    .vibe-private-content .pagination > li > span {
      margin: 0 3px;
      color: var(--vibe-primary);
      background: #fff;
      border: 1px solid var(--vibe-border);
      border-radius: 8px;
      font-size: 11px;
    }

    .vibe-private-content .pagination > .active > a,
    .vibe-private-content .pagination > .active > span {
      color: #fff;
      background: var(--vibe-primary);
      border-color: var(--vibe-primary);
    }

    .vibe-private-content pre,
    .vibe-private-content code {
      color: #d9efb1;
      background: #18220e;
      border: 0;
      border-radius: 10px;
    }

    .vibe-private-content pre {
      padding: 18px;
      overflow: auto;
    }

    .vibe-private-content h1,
    .vibe-private-content h2,
    .vibe-private-content h3,
    .vibe-private-content h4,
    .vibe-private-content h5 {
      color: var(--vibe-dark);
      font-weight: 800;
    }

    .vibe-private-content a {
      color: var(--vibe-primary);
    }

    .vibe-private-content .modal-content {
      overflow: hidden;
      border: 0;
      border-radius: 17px;
      box-shadow: 0 25px 70px rgba(27, 39, 8, .23);
    }

    .vibe-private-content .modal-header,
    .vibe-private-content .modal-footer {
      border-color: var(--vibe-border);
    }

    /* Sign in / sign up pages */
    body.vibe-public .vibe-public-content {
      min-height: calc(100vh - 76px);
      background:
        radial-gradient(circle at 12% 12%, rgba(255, 222, 78, .24), transparent 26%),
        radial-gradient(circle at 88% 18%, rgba(161, 203, 53, .20), transparent 25%),
        linear-gradient(135deg, #fbfff1, #fff 58%, #fff9eb);
    }

    .vibe-public-content {
      min-height: 500px;
    }

    .vibe-public-content > .container:first-child {
      padding-top: 55px;
    }

    .vibe-public-content .well {
      padding: 30px;
      background: rgba(255, 255, 255, .97);
      border: 1px solid var(--vibe-border);
      border-radius: 20px;
      box-shadow: var(--vibe-shadow);
    }

    .vibe-public-content .form-control {
      height: 50px;
      border: 1px solid var(--vibe-border);
      border-radius: 11px;
      box-shadow: none;
    }

    .vibe-public-content .form-control:focus {
      border-color: var(--vibe-primary-light);
      box-shadow: 0 0 0 3px rgba(161, 203, 53, .13);
    }

    .vibe-public-content .btn-primary {
      min-height: 46px;
      padding: 11px 21px;
      color: #fff;
      background: linear-gradient(135deg, var(--vibe-primary), var(--vibe-primary-light));
      border: 0;
      border-radius: 10px;
      font-weight: 800;
      box-shadow: 0 10px 22px rgba(118, 152, 38, .22);
    }

    /* ================================
       FOOTER
    ================================= */

    .vibe-footer {
      position: relative;
      overflow: hidden;
      color: rgba(255, 255, 255, .69);
      background:
        radial-gradient(circle at 84% 0, rgba(255, 222, 78, .12), transparent 26%),
        #101707;
    }

    .vibe-public-footer {
      padding: 56px 0 0;
    }

    .vibe-private-footer {
      margin-top: 0;
      padding: 18px 24px;
      background: transparent;
      color: var(--vibe-muted);
      border-top: 1px solid var(--vibe-border);
      font-size: 11px;
    }

    .vibe-footer-brand {
      margin-bottom: 18px;
    }

    .vibe-footer-brand .vibe-brand {
      color: #fff !important;
    }

    .vibe-footer-text {
      max-width: 440px;
      margin: 0 0 20px;
      font-size: 14px;
      line-height: 1.9;
    }

    .vibe-footer-title {
      margin: 5px 0 18px;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
    }

    .vibe-footer-links {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .vibe-footer-links li {
      margin-bottom: 10px;
    }

    .vibe-footer-links a {
      color: rgba(255, 255, 255, .64);
      font-size: 14px;
      transition: .2s ease;
    }

    .vibe-footer-links a:hover {
      color: var(--vibe-yellow);
      padding-left: 4px;
    }

    .vibe-footer-bottom {
      margin-top: 45px;
      padding: 21px 0;
      border-top: 1px solid rgba(255, 255, 255, .08);
      font-size: 11px;
    }

    .vibe-private-footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1600px;
      margin: 0 auto;
    }

    /* ================================
       RTL
    ================================= */

    .rtl-navbar,
    body[dir="rtl"] {
      direction: rtl;
    }

    .rtl-navbar .navbar-right {
      float: left !important;
    }

    .rtl-navbar .navbar-left-block {
      float: right !important;
    }

    .rtl-content {
      direction: rtl;
      text-align: right;
    }

    body.vibe-rtl .vibe-private-sidebar {
      right: 0;
      left: auto;
    }

    body.vibe-rtl .vibe-private-topbar {
      right: var(--vibe-sidebar-width);
      left: 0;
    }

    body.vibe-rtl .vibe-private-main {
      margin-right: var(--vibe-sidebar-width);
      margin-left: 0;
    }

    body.vibe-rtl .vibe-sidebar-menu .navbar-icon {
      margin-right: 0;
      margin-left: 9px;
    }

    /* ================================
       RESPONSIVE
    ================================= */

    @media (max-width: 991px) {
      .vibe-private-sidebar {
        transform: translateX(-100%);
      }

      .vibe-private-topbar {
        left: 0;
      }

      .vibe-private-main {
        margin-left: 0;
      }

      body.vibe-sidebar-open {
        overflow: hidden;
      }

      body.vibe-sidebar-open .vibe-private-sidebar {
        transform: translateX(0);
      }

      body.vibe-sidebar-open .vibe-sidebar-overlay {
        display: block;
      }

      .vibe-mobile-sidebar-toggle {
        display: inline-block;
      }

      .vibe-private-topbar .navbar-brand {
        display: flex;
        align-items: center;
        height: var(--vibe-topbar-height);
        padding-top: 0;
        padding-bottom: 0;
      }

      .vibe-topbar-title {
        display: none;
      }

      body.vibe-rtl .vibe-private-sidebar {
        transform: translateX(100%);
      }

      body.vibe-rtl.vibe-sidebar-open .vibe-private-sidebar {
        transform: translateX(0);
      }

      body.vibe-rtl .vibe-private-topbar {
        right: 0;
      }

      body.vibe-rtl .vibe-private-main {
        margin-right: 0;
      }
    }

    @media (max-width: 767px) {
      .vibe-public-nav {
        min-height: 66px;
      }

      .vibe-public-nav .navbar-header {
        min-height: 66px;
      }

      .vibe-public-nav .navbar-brand {
        height: 66px;
      }

      .vibe-public-nav .navbar-toggle {
        margin-top: 14px;
      }

      .vibe-public-nav .navbar-collapse {
        max-height: calc(100vh - 66px);
        padding: 10px 20px 20px;
        background: #fff;
        border-color: var(--vibe-border);
      }

      .vibe-public-nav .navbar-nav {
        margin: 0;
      }

      .vibe-public-nav .navbar-nav > li > a {
        padding: 12px 5px;
      }

      .vibe-public-nav .navbar-nav > li.active > a:after {
        display: none;
      }

      .vibe-private-topbar .container-fluid {
        padding-right: 12px;
        padding-left: 12px;
      }

      .vibe-private-topbar .navbar-right {
        float: right;
        margin: 0;
      }

      .vibe-private-topbar .navbar-right > li {
        display: inline-block;
      }

      .vibe-private-topbar .navbar-nav > li > a {
        padding: 25px 8px;
      }

      .vibe-private-content {
        padding: 20px 12px 32px;
      }

      .vibe-private-content .well,
      .vibe-private-content .panel-body {
        padding: 18px;
      }

      .vibe-private-content .table-responsive {
        border: 1px solid var(--vibe-border);
      }

      .vibe-private-content .table > thead > tr > th,
      .vibe-private-content .table > tbody > tr > td {
        padding: 12px 10px;
      }

      .vibe-public-content > .container:first-child {
        padding-top: 32px;
      }

      .vibe-public-content .well {
        padding: 22px 18px;
      }

      .vibe-public-footer {
        padding-top: 42px;
      }

      .vibe-footer-column {
        margin-bottom: 28px;
      }

      .vibe-footer-bottom {
        margin-top: 20px;
        text-align: center;
      }

      .vibe-private-footer-inner {
        display: block;
        text-align: center;
      }

      .vibe-private-footer-inner span {
        display: block;
        margin: 3px 0;
      }
    }

    @media (max-width: 480px) {
      .vibe-private-sidebar {
        width: 86%;
        max-width: 300px;
      }

      .vibe-brand {
        font-size: 19px;
      }

      .vibe-brand img {
        max-width: 145px;
      }

      .vibe-mobile-sidebar-toggle {
        margin-right: 8px;
      }

      .vibe-private-topbar .navbar-nav > li > a {
        padding-right: 5px;
        padding-left: 5px;
        font-size: 10px;
      }
    }
 <!-- =========================================
       FAQ — CONFLICT-FREE ACCORDION
  ========================================== -->

      #faq .dv-faq-list {
        max-width: 900px;
        margin: 0 auto;
      }

      #faq .dv-faq-item {
        margin-bottom: 14px;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid var(--dv-border, #e3ebce);
        border-radius: 14px;
        box-shadow: 0 8px 25px rgba(56, 74, 18, 0.05);
      }

      #faq .dv-faq-title {
        margin: 0;
      }

      #faq .dv-faq-toggle {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        min-height: 70px;
        padding: 18px 20px 18px 22px;
        color: var(--dv-dark, #17210c);
        background: #ffffff;
        border: 0;
        outline: 0;
        text-align: left;
        font-family: inherit;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.5;
        cursor: pointer;
      }

      #faq .dv-faq-toggle:hover,
      #faq .dv-faq-toggle:focus {
        color: var(--dv-green-dark, #769826);
        background: #fbfdf6;
      }

      #faq .dv-faq-toggle:focus-visible {
        box-shadow: inset 0 0 0 3px rgba(161, 203, 53, 0.24);
      }

      #faq .dv-faq-icon {
        position: relative;
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        background: rgba(161, 203, 53, 0.14);
        border-radius: 9px;
      }

      #faq .dv-faq-icon::before,
      #faq .dv-faq-icon::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 2px;
        content: "";
        background: var(--dv-green-dark, #769826);
        border-radius: 20px;
        transform: translate(-50%, -50%);
        transition: transform 0.22s ease, opacity 0.22s ease;
      }

      #faq .dv-faq-icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
      }

      #faq .dv-faq-item.is-open .dv-faq-icon::after {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg);
      }

      #faq .dv-faq-answer {
        display: block;
        color: var(--dv-text, #536044);
        background: #ffffff;
        font-size: 14px;
        line-height: 1.85;
      }

      #faq .dv-faq-answer[hidden] {
        display: none !important;
      }

      #faq .dv-faq-answer-inner {
        padding: 0 22px 22px;
      }

      @media (max-width: 767px) {
        #faq .dv-faq-toggle {
          min-height: 64px;
          padding: 16px;
          font-size: 13px;
        }

        #faq .dv-faq-answer-inner {
          padding: 0 16px 18px;
        }
      }
/* ==========================================
   FAQ 2 COLUMN
========================================== */

.faq-row{
    margin-top:40px;
}

.faq-row .panel-group{
    margin-bottom:0;
}

.faq-panel{
    margin-bottom:18px !important;
}

.faq-panel .panel-title a{
    display:block;
    padding:18px 55px 18px 20px;
    min-height:72px;       /* Equal height */
    font-size:15px;
    font-weight:700;
}

.faq-panel .panel-body{
    padding:0 20px 20px;
    font-size:15px;
    line-height:1.8;
}

/* Mobile */

@media (max-width:991px){

    .faq-row>.col-md-6{
        margin-bottom:20px;
    }

}