{
  "version": 3,
  "sources": ["src/app/customers/how-it-works/how-it-works.component.scss"],
  "sourcesContent": [".how-it-works {\n  .my-banner {\n    width: 100%;\n    min-height: auto;\n    object-fit: cover;\n    margin-bottom: -3em;\n    border-radius: 2em;\n    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;\n\n    @media only screen and (max-width: 991px) {\n      margin-top: 0.5em;\n      margin-bottom: -2em;\n    }\n  }\n\n\n  .img-circle {\n    border-radius: 50%;\n    width: 5rem;\n  }\n\n  .tabs-works {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    max-width: 767px;\n    margin: 1em auto;\n    gap: 1em;\n\n    @media only screen and (max-width: 767px) {\n      font-size: 0.5rem;\n      grid-template-columns: repeat(4, 1fr);\n    }\n\n    .tab {\n      text-align: center;\n\n      .icon {\n        aspect-ratio: 1/1;\n        border-radius: 0.5em;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        cursor: pointer;\n        background-color: rgba(var(--white-r),\n            var(--white-g),\n            var(--white-b),\n            0.5);\n        backdrop-filter: blur(10px);\n        -webkit-backdrop-filter: blur(10px);\n        border-radius: 0.5em;\n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n        border: 2px solid rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.5);\n      }\n\n      svg {\n        height: 6em;\n        margin-bottom: 0.5em;\n\n        path {\n          fill: var(--primary);\n        }\n      }\n\n      .text {\n        color: var(--primary);\n        font-size: 1.25em;\n        margin-top: 0.5em;\n        font-weight: 500;\n        line-height: 1.2;\n      }\n\n      &.active {\n        background-color: rgba(var(--secondary-r),\n            var(--secondary-g),\n            var(--secondary-b),\n            0.75);\n        box-shadow: 0 4px 10px rgba(var(--secondary-r), var(--secondary-g), var(--secondary-b), 0.75);\n\n        i,\n        .text {\n          color: var(--white);\n        }\n      }\n    }\n  }\n\n  .tab-extend {\n\n    .card {\n      min-width: 280px;\n      border-radius: 0.5em;\n      background-color: rgba(var(--white-r),\n          var(--white-g),\n          var(--white-b),\n          0.5);\n      backdrop-filter: blur(10px);\n      -webkit-backdrop-filter: blur(10px);\n      border-radius: 0.5em;\n      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n      border: 2px solid rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.5);\n      padding: 15px;\n      flex-shrink: 0;\n    }\n\n    .card p {\n      display: flex;\n      flex-direction: column;\n      /* Stack icon and text vertically */\n      align-items: center;\n      /* Center align the icon and text */\n      text-align: center;\n      /* Center text alignment */\n      font-size: 16px;\n      margin: 8px 0;\n    }\n\n    .card .icon {\n      font-size: 24px;\n      /* Increase icon size */\n      margin-bottom: 5px;\n      /* Space between icon and text */\n    }\n\n    .card h3 {\n      font-size: 20px;\n      color: var(--primary);\n      margin-bottom: 8px;\n      text-align: center;\n    }\n\n    .card p {\n      font-size: 16px;\n      color: #555;\n      margin: 5px 0;\n      display: flex;\n      align-items: center;\n    }\n\n    .icon {\n      margin-right: 8px;\n      font-size: 18px;\n    }\n\n    /* Responsive */\n    @media (max-width: 600px) {\n      .card {\n        min-width: 250px;\n        width: 240px;\n      }\n    }\n  }\n\n\n  .my-card {\n    background-color: var(--white);\n    color: var(--textColor);\n    border-radius: 1.5em;\n    position: relative;\n    margin: 3em 1em 5em;\n    transition: 0.25s;\n    cursor: pointer;\n    display: block;\n\n    &__content {\n      padding: 0 1.5em 1.5em 1.5em;\n      line-height: 1.5;\n\n      &--title {\n        padding: 0.25em 0.5em;\n        font-size: 1.4em;\n        background-color: var(--primary);\n        color: var(--white);\n        transform: rotate(-15deg) translateY(-2rem) translateX(-2em);\n        display: inline-block;\n        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n      }\n\n      &--desc {\n        font-size: 1.3em;\n\n        .icon {\n          font-weight: bold;\n          color: var(--primary);\n        }\n      }\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      z-index: -1;\n      top: -3px;\n      bottom: -3px;\n      left: -3px;\n      right: -3px;\n      border-radius: 1.6em;\n      box-shadow: 8px 8px 12px 0 rgba(0, 0, 0, 0.25);\n      background: linear-gradient(to bottom, var(--primary), var(--secondary));\n    }\n  }\n\n  section {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1.5em;\n    padding: 3em 0;\n\n    @media only screen and (max-width: 991px) {\n      grid-template-columns: repeat(1, 1fr);\n      font-size: 0.75rem;\n      padding: 1.5em 0;\n    }\n\n    .content {\n      // grid-column: span 2;\n      padding-top: 1em;\n\n      .meta {\n        font-size: 1.1em;\n        text-transform: uppercase;\n        color: var(--primary);\n        line-height: 1.2;\n      }\n\n      h2 {\n        font-size: 2em;\n        margin-bottom: 0.5em;\n        font-family: trebuchet;\n      }\n\n      p {\n        font-size: 1.25em;\n        line-height: 1.8;\n      }\n    }\n\n    img {\n      border-radius: 1em;\n      width: 100%;\n      // height: 24em;\n      // object-fit: cover;\n      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,\n        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;\n\n\n      @media only screen and (max-width: 765px) {\n\n        height: 100%;\n      }\n    }\n  }\n}\n\n.sell-and-buy {\n  padding: 4rem 0;\n\n  .animate {\n    svg {\n      // path {\n      //   opacity: 1;\n      //   transition: 1s ease-in-out;\n      // }\n      .fade-left {\n        transform: translateX(0);\n        opacity: 1;\n      }\n      .fade-up {\n        transform: translateY(0);\n        opacity: 1;\n      }\n      .fade-down {\n        transform: translateY(0);\n        opacity: 1;\n      }\n      .flip-left {\n        transform: rotate(0);\n        opacity: 1;\n      }\n      .zoom-in {\n        transform: scale(1);\n        opacity: 1;\n      }\n    }\n  }\n\n  .container {\n    display: grid;\n    gap: 1rem;\n    grid-template-columns: repeat(3, 1fr);\n    @media only screen and (max-width: 991px) {\n      grid-template-columns: 1fr;\n      gap: 3rem;\n    }\n  }\n\n  svg {\n    height: 10rem;\n    margin: auto;\n\n    // path {\n    //   opacity: 0;\n    //   transition: opacity 1s ease-in-out;\n    // }\n\n    .fade-left {\n      transform: translateX(-150px);\n      opacity: 0;\n      transition: transform 1s ease-in-out, opacity 1s ease-in-out;\n    }\n    .fade-up {\n      transform: translateY(150px);\n      opacity: 0;\n      transition: transform 1s ease-in-out, opacity 1s ease-in-out;\n    }\n    .fade-down {\n      transform: translateY(-150px);\n      opacity: 0;\n      transition: transform 1s ease-in-out, opacity 1s ease-in-out;\n    }\n\n    .flip-left {\n      transform: rotate(90deg);\n      opacity: 0;\n      transition: transform 1s ease-in-out, opacity 1s ease-in-out;\n    }\n\n    .zoom-in {\n      transform: scale(0.5);\n      opacity: 0;\n      transition: transform 1s ease-in-out, opacity 1s ease-in-out;\n    }\n  }\n\n  &__item {\n    text-align: center;\n    &--title {\n      font-size: 1.25rem;\n      margin-top: 1rem;\n      margin-bottom: 0.25rem;\n    }\n    &--desc {\n      font-size: 0.9rem;\n      line-height: 1.4;\n      color: #777;\n    }\n  }\n}"],
  "mappings": "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",
  "names": []
}