.elementor-2379 .elementor-element.elementor-element-c560f9b{--display:flex;}.elementor-2379 .elementor-element.elementor-element-0192fc4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2379 .elementor-element.elementor-element-725e6d8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2379 .elementor-element.elementor-element-1a83909 .elementor-button{background-color:var( --e-global-color-9870110 );font-family:"dana", Sans-serif;font-weight:500;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);border-radius:10000px 10000px 10000px 10000px;padding:17px 22px 17px 22px;}.elementor-2379 .elementor-element.elementor-element-1a83909{padding:0px 0px 0px 0px;top:0px;}.elementor-2379 .elementor-element.elementor-element-1a83909.elementor-element{--align-self:center;}body:not(.rtl) .elementor-2379 .elementor-element.elementor-element-1a83909{left:0px;}body.rtl .elementor-2379 .elementor-element.elementor-element-1a83909{right:0px;}.elementor-2379 .elementor-element.elementor-element-1a83909 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-2379 .elementor-element.elementor-element-1a83909 .elementor-button:hover, .elementor-2379 .elementor-element.elementor-element-1a83909 .elementor-button:focus{color:var( --e-global-color-accent );}.elementor-2379 .elementor-element.elementor-element-1a83909 .elementor-button:hover svg, .elementor-2379 .elementor-element.elementor-element-1a83909 .elementor-button:focus svg{fill:var( --e-global-color-accent );}.elementor-2379 .elementor-element.elementor-element-fc0aeee{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2379 .elementor-element.elementor-element-9f66f63 .elementor-button{background-color:var( --e-global-color-bb7124e );font-family:"dana", Sans-serif;font-weight:500;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);border-radius:10000px 10000px 10000px 10000px;padding:17px 22px 17px 22px;}.elementor-2379 .elementor-element.elementor-element-9f66f63{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;top:0px;}.elementor-2379 .elementor-element.elementor-element-9f66f63.elementor-element{--align-self:center;}body:not(.rtl) .elementor-2379 .elementor-element.elementor-element-9f66f63{left:0px;}body.rtl .elementor-2379 .elementor-element.elementor-element-9f66f63{right:0px;}.elementor-2379 .elementor-element.elementor-element-9f66f63 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-2379 .elementor-element.elementor-element-9f66f63 .elementor-button:hover, .elementor-2379 .elementor-element.elementor-element-9f66f63 .elementor-button:focus{color:var( --e-global-color-9870110 );}.elementor-2379 .elementor-element.elementor-element-9f66f63 .elementor-button:hover svg, .elementor-2379 .elementor-element.elementor-element-9f66f63 .elementor-button:focus svg{fill:var( --e-global-color-9870110 );}@media(min-width:768px){.elementor-2379 .elementor-element.elementor-element-725e6d8{--width:50%;}.elementor-2379 .elementor-element.elementor-element-fc0aeee{--width:50%;}}/* Start custom CSS for button, class: .elementor-element-1a83909 */<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gradient Border Hover Effect</title>
  <style>
    /* استایل‌های کلی برای قرارگیری کارت در مرکز صفحه */
    body {
      background-color: #0f0f10; /* پس‌زمینه تیره محیط */
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: system-ui, -apple-system, sans-serif;
    }

    /* استایل اصلی کارت */
    .upgrade-card {
      position: relative;
      width: 320px;
      padding: 24px;
      border-radius: 18px;
      background-color: #1e1e1f; /* رنگ پس‌زمینه کارت */
      color: #e3e3e3;
      cursor: pointer;
      box-sizing: border-box;
      
      /* حاشیه پیش‌فرض قبل از هاور (بسیار کم‌رنگ) */
      border: 1px solid rgba(255, 255, 255, 0.08); 
      transition: border-color 0.3s ease, transform 0.2s ease;
    }

    /* ایجاد حاشیه گرادیان با استفاده از شبه‌عنصر */
    .upgrade-card::before {
      content: "";
      position: absolute;
      inset: -1px; /* ایجاد فضای ۱ پیکسلی دور کارت */
      border-radius: 18px; /* هماهنگ با border-radius اصلی */
      padding: 1px; /* تعیین ضخامت خط حاشیه */
      
      /* گرادیان رنگی چند رنگ شبیه به طرح گوگل */
      background: linear-gradient(135deg, #4285f4, #a04ef6, #ec407a, #fbc02d, #34a853);
      
      /* ماسک کردن بخش میانی کارت برای نشان دادن فقط حاشیه */
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      
      pointer-events: none;
      opacity: 0; /* در حالت عادی غیرفعال است */
      transition: opacity 0.3s ease;
    }

    /* افکت زمان قرار گرفتن ماوس روی کارت */
    .upgrade-card:hover {
      border-color: transparent; /* پنهان کردن حاشیه پیش‌فرض توسی */
      transform: translateY(-2px); /* حرکت جزیی به سمت بالا */
    }

    /* ظاهر شدن نرم گرادیان در حالت هاور */
    .upgrade-card:hover::before {
      opacity: 1;
    }

    /* استایل‌های متن داخل کارت */
    .upgrade-card h3 {
      margin: 0 0 8px 0;
      font-size: 1.15rem;
      font-weight: 600;
      color: #ffffff;
    }

    .upgrade-card p {
      margin: 0;
      font-size: 0.95rem;
      color: #9aa0a6;
      line-height: 1.4;
    }
  </style>
</head>
<body>

  <div class="upgrade-card">
    <h3>Upgrade to unlock more</h3>
    <p>Access higher limits, Pro models, and more.</p>
  </div>

</body>
</html>/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'dana';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://drhzamani.com/wp-content/uploads/2025/12/dana-fanum-regular.woff2') format('woff2'),
		url('https://drhzamani.com/wp-content/uploads/2025/12/dana-fanum-regular.woff') format('woff');
}
@font-face {
	font-family: 'dana';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://drhzamani.com/wp-content/uploads/2025/12/dana-fanum-medium.woff2') format('woff2'),
		url('https://drhzamani.com/wp-content/uploads/2025/12/dana-fanum-medium.woff') format('woff');
}
@font-face {
	font-family: 'dana';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://drhzamani.com/wp-content/uploads/2025/12/dana-fanum-demibold.woff2') format('woff2'),
		url('https://drhzamani.com/wp-content/uploads/2025/12/dana-fanum-demibold.woff') format('woff');
}
/* End Custom Fonts CSS */