/*** uncss> filename: widget.css ***/

        /*** uncss> filename: styles.css ***/
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #0f172a;
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
    padding: 1rem;
  }

  .section-header h3{
    color: white;
  }

  .container {
    max-width: 100%;
  }

  .container p {
    padding: 0 1rem;
  }
  /*  */
  img {
    max-width: 100%;
    border-radius: 8px;
  }


.container {
  margin: 0 auto;
  padding: 0 1rem;
}


  @media (min-width: 768px) {
    .container {
      padding: 0 2rem;
    }
  }
  /* Header */

  .header__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
  }

  .header__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 140px;
    height: 70px;
  }

  .header__nav {
    display: none;
    gap: 2rem;
  }

  @media (min-width: 768px) {
    .header__nav {
      display: flex;
    }
  }

  .header__nav a {
    text-decoration: none;
    color: #334155;
    font-weight: 500;
    transition: color 0.2s;
  }

  .header__nav a:hover {
    color: #2563eb;
  }

  /* Hero Section */

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .footer {
    background: #1e293b;
    color: #ffffff;
    padding: 3rem 0;
  }

  .footer__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  @media (min-width: 768px) {
    .footer__content {
      grid-template-columns: 1fr 2fr;
    }
  }

  .footer__brand .footer__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .footer__brand .footer__logo i {
    color: #60a5fa;
  }

  .footer__brand .footer__logo span {
    font-size: 1.25rem;
    font-weight: 700;
  }

  .footer__brand p {
    color: #94a3b8;
  }

  .footer__links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
  }

  .footer__column h4 {
    font-weight: 600;
    margin-bottom: 1rem;
  }

  .footer__column ul {
    list-style: none;
  }

  .footer__column ul li {
    margin-bottom: 0.5rem;
  }

  .footer__column ul li a {
    color: #94a3b8;
    text-decoration: none;
  }

  .footer__column ul li a:hover {
    color: #ffffff;
  }

  .footer__bottom {
    border-top: 1px solid #475569;
    margin-top: 2rem;
    padding-top: 2rem;
    text-align: center;
    color: #94a3b8;
  }

  /* Responsive Design */

  @media (max-width: 480px) {
    .container {
      padding: 0 1rem;
    }
  }

  /* Animation and Transition Classes */

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Focus states for accessibility */
  .btn:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }

  /* Loading states */
  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Hover effects */

  /* Print styles */
  @media print {
    .footer {
      display: none;
    }

    body {
      background: white;
    }
  }
   
/*!
 * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2022 Fonticons, Inc.
 */.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-calculator:before{content:"\f1ec"}.fa-sr-only-focusable:not(:focus),.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}:host,:root{--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fas{font-family:"Font Awesome 6 Free";font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f250,u+f252,u+f27a}

         /* Embed Code */
        .embed-code {
            background: #1e293b;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .embed-code__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }

        .embed-code__header label {
            font-size: 0.875rem;
            color: #ffffff;
            margin-bottom: 0;
        }

        .embed-code pre {
            margin: 0;
            overflow-x: auto;
        }

        .embed-code pre code {
            color: #4ade80;
            font-size: 0.875rem;
            white-space: pre-wrap;
        }

        /* Features List */
        .features-list {
            margin-bottom: 1.5rem;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
            color: #bfdbfe;
        }

        .feature-dot {
            width: 0.5rem;
            height: 0.5rem;
            background: #4ade80;
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* Widget Section */
  .widget-section {
    position: relative;
    padding: 4rem 0;
    color: #ffffff;
  }

  .widget-background {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .widget-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .widget-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(30, 58, 138, 0.9), rgba(67, 56, 202, 0.9));
  }

  .widget-grid {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
  }

  @media (min-width: 1024px) {
    .widget-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Widget Preview */
  .widget-preview h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }

  .widget-demo {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }


         /* Widget Options */
        .widget-options h4 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }