/* Scoped to: portfolio-template-pricing */
@media (width: 1440px) {
      [data-component-slug="portfolio-template-pricing"].pricing-section-wrapper, [data-component-slug="portfolio-template-pricing"] .pricing-section-wrapper {
        padding-left: 80px !important;
        padding-right: 80px !important;
      }
    }

    
    [data-component-slug="portfolio-template-pricing"].pricing-section-wrapper, [data-component-slug="portfolio-template-pricing"] .pricing-section-wrapper {
      padding-left: 286px;
      padding-right: 286px;
      padding-top: 200px;
      padding-bottom: 200px;
    }

    @media (max-width: 1100px) {
      [data-component-slug="portfolio-template-pricing"].pricing-section-wrapper, [data-component-slug="portfolio-template-pricing"] .pricing-section-wrapper {
        padding-left: 90px;
        padding-right: 90px;
      }
    }

    @media (max-width: 768px) {
      [data-component-slug="portfolio-template-pricing"].pricing-section-wrapper, [data-component-slug="portfolio-template-pricing"] .pricing-section-wrapper {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 140px;
        padding-bottom: 120px;
      }
    }

    
    [data-component-slug="portfolio-template-pricing"].pricing-bg, [data-component-slug="portfolio-template-pricing"] .pricing-bg {
      position: absolute;
      top: 0;
      left: 50%;
      width: 900px;
      max-width: 90%;
      transform: translateX(-50%);
      pointer-events: none;
      opacity: 0.9;
    }

    
    [data-component-slug="portfolio-template-pricing"].pricing-label, [data-component-slug="portfolio-template-pricing"] .pricing-label {
      display: inline-block;
      padding: 12px 28px;
      font-family: "Cabin", sans-serif;
      font-size: 32px;
      font-weight: 400;
      color: #fff;
      border-radius: 12px;
      text-align: center;

      position: relative;
      background: rgba(20, 20, 20, 0.55);
      backdrop-filter: blur(18px) saturate(120%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.05);
    }

    
    [data-component-slug="portfolio-template-pricing"].pricing-label::before, [data-component-slug="portfolio-template-pricing"] .pricing-label::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(to top left, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 40%);
    }

    [data-component-slug="portfolio-template-pricing"].pricing-label::after, [data-component-slug="portfolio-template-pricing"] .pricing-label::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 80%);
    }

    
    [data-component-slug="portfolio-template-pricing"].pricing-title, [data-component-slug="portfolio-template-pricing"] .pricing-title {
      font-family: "Cabin", sans-serif;
      font-size: 56px;
      font-weight: 500;
      line-height: 100%;
      color: #fff;
      text-align: center;
      margin-top: 24px;
    }

    @media (max-width: 768px) {
      [data-component-slug="portfolio-template-pricing"].pricing-title, [data-component-slug="portfolio-template-pricing"] .pricing-title {
        font-size: 42px;
      }
    }

    
    [data-component-slug="portfolio-template-pricing"].pricing-desc, [data-component-slug="portfolio-template-pricing"] .pricing-desc {
      font-family: "Cabin", sans-serif;
      font-size: 24px;
      font-weight: 400;
      text-align: center;
      color: #7e7e7e;
      line-height: 130%;
      max-width: 780px;
      margin: 24px auto 80px;
    }

    
    [data-component-slug="portfolio-template-pricing"].pricing-grid, [data-component-slug="portfolio-template-pricing"] .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 36px;
    }

    @media (max-width: 992px) {
      [data-component-slug="portfolio-template-pricing"].pricing-grid, [data-component-slug="portfolio-template-pricing"] .pricing-grid {
        grid-template-columns: 1fr;
      }
    }

    
    [data-component-slug="portfolio-template-pricing"].pricing-card, [data-component-slug="portfolio-template-pricing"] .pricing-card {
      padding: 32px 40px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(12px);
    }

    [data-component-slug="portfolio-template-pricing"].card-highlight, [data-component-slug="portfolio-template-pricing"] .card-highlight {
      background: #ffffff;
      color: #000;
    }

    
    [data-component-slug="portfolio-template-pricing"].card-title, [data-component-slug="portfolio-template-pricing"] .card-title {
      font-family: "Cabin", sans-serif;
      font-size: 20px;
      color: #fff;
    }

    [data-component-slug="portfolio-template-pricing"].card-highlight .card-title, [data-component-slug="portfolio-template-pricing"] .card-highlight .card-title {
      color: black;
    }

    [data-component-slug="portfolio-template-pricing"].card-price, [data-component-slug="portfolio-template-pricing"] .card-price {
      font-family: "Cabin", sans-serif;
      font-size: 40px;
      font-weight: 500;
      color: #fff;
      margin-top: 14px;
    }

    [data-component-slug="portfolio-template-pricing"].card-highlight .card-price, [data-component-slug="portfolio-template-pricing"] .card-highlight .card-price {
      color: black;
    }

    [data-component-slug="portfolio-template-pricing"].card-sub, [data-component-slug="portfolio-template-pricing"] .card-sub {
      font-size: 16px;
      font-weight: 500;
      margin-top: 6px;
      color: #7e7e7e;
    }

    
    [data-component-slug="portfolio-template-pricing"].card-btn, [data-component-slug="portfolio-template-pricing"] .card-btn {
      width: 100%;
      display: block;
      padding: 16px 24px;
      background: #d3ff5b;
      color: black;
      text-align: center;
      font-size: 24px;
      border-radius: 12px;
      margin-top: 28px;
    }

    
    [data-component-slug="portfolio-template-pricing"].card-includes-title, [data-component-slug="portfolio-template-pricing"] .card-includes-title {
      margin-top: 28px;
      font-size: 20px;
      font-weight: 500;
      color: #fff;
    }

    [data-component-slug="portfolio-template-pricing"].card-highlight .card-includes-title, [data-component-slug="portfolio-template-pricing"] .card-highlight .card-includes-title {
      color: #000;
    }

    [data-component-slug="portfolio-template-pricing"].include-item, [data-component-slug="portfolio-template-pricing"] .include-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 20px;
      font-weight: 500;
      margin-top: 10px;
      color: #fff;
    }

    [data-component-slug="portfolio-template-pricing"].card-highlight .include-item, [data-component-slug="portfolio-template-pricing"] .card-highlight .include-item {
      color: black;
    }

    [data-component-slug="portfolio-template-pricing"].not-include, [data-component-slug="portfolio-template-pricing"] .not-include {
      color: #7e7e7e;
    }

    
    @media (max-width: 992px) {
      [data-component-slug="portfolio-template-pricing"].pricing-card.card-highlight, [data-component-slug="portfolio-template-pricing"] .pricing-card.card-highlight {
        margin-top: 60px !important; 
      }

      [data-component-slug="portfolio-template-pricing"].pricing-card.card-highlight > div[data-node="popular_label"], [data-component-slug="portfolio-template-pricing"] .pricing-card.card-highlight > div[data-node="popular_label"] {
        top: -20px !important; 
        border-radius: 12px !important;
      }
    }

    
    @media (max-width: 600px) {
      [data-component-slug="portfolio-template-pricing"].pricing-card.card-highlight, [data-component-slug="portfolio-template-pricing"] .pricing-card.card-highlight {
        margin-top: 20px !important; 
      }

      [data-component-slug="portfolio-template-pricing"].pricing-card.card-highlight > div[data-node="popular_label"], [data-component-slug="portfolio-template-pricing"] .pricing-card.card-highlight > div[data-node="popular_label"] {
        top: -24px !important; 
        height: 48px !important;
        font-size: 18px !important;
      }
    }