/*-------------- Match Magic Area Start  ---- --------*/
.match-magic-area {
    padding-top: 50px;
    padding-bottom: 60px; }
    @media (min-width: 992px) and (max-width: 1199px) {
      .match-magic-area {
        padding: 70px 0;
        padding-bottom: 40px; } }
    @media only screen and (max-width: 767px) {
      .match-magic-area {
        padding: 50px 0;
        padding-bottom: 20px;
        overflow: hidden; } }
    .match-magic-area .magic-wrapper {
      max-width: 1300px;
      margin: 0 auto;
      margin-top: 25px; }
      @media only screen and (max-width: 767px) {
        .match-magic-area .magic-wrapper {
          margin-top: 0; } }
      .match-magic-area .magic-wrapper .magic__item {
        width: 100%;
        position: relative;
        border-radius: 15px;
        background: radial-gradient(167.96% 54.74% at 61.8% 53.05%, #FBAC1C 16.91%, #D54B27 100%);
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        z-index: 1;
        padding-bottom: 30px;
        margin-bottom: 50px; }
        @media (min-width: 992px) and (max-width: 1199px) {
          .match-magic-area .magic-wrapper .magic__item {
            height: 190px;
            padding-bottom: 20px; } }
        @media (min-width: 768px) and (max-width: 991px) {
          .match-magic-area .magic-wrapper .magic__item {
            height: 150px;
            padding-bottom: 20px;
            margin-bottom: 0px; } }
        @media only screen and (max-width: 767px) {
          .match-magic-area .magic-wrapper .magic__item {
            height: 240px;
            padding-bottom: 20px;
            margin-bottom: 50px; } }
        .match-magic-area .magic-wrapper .magic__item img {
          position: absolute;
          bottom: 0;
          height: 340px;
          width: auto;
          z-index: -1;
          left: 50%;
          transform: translateX(-50%); }
          @media (min-width: 992px) and (max-width: 1199px) {
            .match-magic-area .magic-wrapper .magic__item img {
              height: 250px; } }
          @media (min-width: 768px) and (max-width: 991px) {
            .match-magic-area .magic-wrapper .magic__item img {
              height: 180px; } }
          @media only screen and (max-width: 767px) {
            .match-magic-area .magic-wrapper .magic__item img {
              height: 250px; } }
        .match-magic-area .magic-wrapper .magic__item a {
          display: inline-block;
          width: 280px;
          text-align: center;
          padding: 11px 12px; }
          @media (min-width: 992px) and (max-width: 1199px) {
            .match-magic-area .magic-wrapper .magic__item a {
              width: 240px; } }
          @media (min-width: 768px) and (max-width: 991px) {
            .match-magic-area .magic-wrapper .magic__item a {
              width: auto;
              padding: 8px 15px; } }
  
  /*-------------- Match Magic Area End  ---- --------*/

  /*----- Page Title Component ----*/
.inspiration__card {
    text-align: center; }
    @media only screen and (max-width: 767px) {
      .inspiration__card {
        margin-bottom: 50px; } }
    .inspiration__card h2 {
      color: #3A3A3C;
      text-align: center;
      font-family: "Barlow", sans-serif;
      font-size: 54px;
      font-weight: 700;
      line-height: 64px;
      /* 118.519% */ }
      @media (min-width: 1368px) and (max-width: 1499px) {
        .inspiration__card h2 {
          font-size: 40px;
          line-height: 50px; } }
      @media (min-width: 1200px) and (max-width: 1367px) {
        .inspiration__card h2 {
          font-size: 36px;
          line-height: 45px; } }
      @media (min-width: 992px) and (max-width: 1199px) {
        .inspiration__card h2 {
          font-size: 32px;
          line-height: 36px; } }
      @media (min-width: 768px) and (max-width: 991px) {
        .inspiration__card h2 {
          font-size: 30px;
          line-height: 36px; } }
      @media only screen and (max-width: 767px) {
        .inspiration__card h2 {
          font-size: 28px;
          line-height: 34px; } }
    .inspiration__card .inspiration__thumb {
      margin-top: 40px;
      position: relative;
      z-index: 1;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .inspiration__card .inspiration__thumb {
          max-width: 300px;
          margin: 0 auto;
          margin-top: 20px; } }
      .inspiration__card .inspiration__thumb img {
        max-height: 650px;
        width: auto; }
        @media (min-width: 1200px) and (max-width: 1367px) {
          .inspiration__card .inspiration__thumb img {
            max-height: 550px; } }
        @media (min-width: 992px) and (max-width: 1199px) {
          .inspiration__card .inspiration__thumb img {
            max-height: 450px; } }
        @media (min-width: 768px) and (max-width: 991px) {
          .inspiration__card .inspiration__thumb img {
            max-height: 400px; } }
        @media only screen and (max-width: 767px) {
          .inspiration__card .inspiration__thumb img {
            max-height: 320px; } }
      .inspiration__card .inspiration__thumb::after {
        border-radius: 15px;
        background: radial-gradient(152.67% 49.78% at 49.9% 50%, #FBAC1C 0%, #D54B27 100%);
        position: absolute;
        content: '';
        top: 0;
        z-index: -1;
        left: 0;
        width: 100%;
        height: 480px; }
        @media (min-width: 1200px) and (max-width: 1367px) {
          .inspiration__card .inspiration__thumb::after {
            height: 400px; } }
        @media (min-width: 992px) and (max-width: 1199px) {
          .inspiration__card .inspiration__thumb::after {
            height: 350px; } }
        @media (min-width: 768px) and (max-width: 991px) {
          .inspiration__card .inspiration__thumb::after {
            height: 300px; } }
        @media only screen and (max-width: 767px) {
          .inspiration__card .inspiration__thumb::after {
            height: 240px; } }
  
  @media (min-width: 768px) and (max-width: 991px) {
    .magic__card--single {
      max-width: 420px;
      margin: 0 auto;
      margin-bottom: 50px; } }
  
  @media only screen and (max-width: 767px) {
    .magic__card--single {
      max-width: 340px;
      margin: 0 auto;
      margin-bottom: 50px; } }
  
  .magic__card--single .card__count {
    margin-bottom: 10px; }
    .magic__card--single .card__count span {
      font-size: 22px;
      font-weight: 500;
      font-family: "Gantari", sans-serif;
      display: block;
      color: #000; }
      @media only screen and (max-width: 767px) {
        .magic__card--single .card__count span {
          font-size: 20px; } }
  
  .magic__card--single a {
    display: inline-block;
    width: 100%;
    text-decoration: none; }
    .magic__card--single a .magic__card {
      background-color: #FFBD72;
      padding: 16px;
      border-radius: 16px; }
      .magic__card--single a .magic__card .magic__card--header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0 20px; }
        .magic__card--single a .magic__card .magic__card--header h3 {
          font-size: 48px;
          color: #000;
          font-weight: 700;
          line-height: 48px;
          }
          @media (min-width: 1200px) and (max-width: 1367px) {
            .magic__card--single a .magic__card .magic__card--header h3 {
              font-size: 45px;
              line-height: 48px; } }
          @media (min-width: 992px) and (max-width: 1199px) {
            .magic__card--single a .magic__card .magic__card--header h3 {
              font-size: 36px;
              line-height: 42px; } }
          @media only screen and (max-width: 767px) {
            .magic__card--single a .magic__card .magic__card--header h3 {
              font-size: 32px;
              line-height: 36px; } }
        .magic__card--single a .magic__card .magic__card--header span {
          width: 52px;
          height: 52px;
          border: 2px solid #000;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 100%;
          flex-shrink: 0;
          position: relative;
          top: 4px;
          transition: .3s ease-in-out; }
          @media (min-width: 1200px) and (max-width: 1367px) {
            .magic__card--single a .magic__card .magic__card--header span {
              width: 48px;
              height: 48px; } }
          @media (min-width: 992px) and (max-width: 1199px) {
            .magic__card--single a .magic__card .magic__card--header span {
              width: 45px;
              height: 45px; } }
          @media (min-width: 768px) and (max-width: 991px) {
            .magic__card--single a .magic__card .magic__card--header span {
              width: 42px;
              height: 42px; } }
          .magic__card--single a .magic__card .magic__card--header span img {
            width: 16px;
            transition: .3s ease-in-out; }
            @media (min-width: 1200px) and (max-width: 1367px) {
              .magic__card--single a .magic__card .magic__card--header span img {
                width: 14px; } }
            @media (min-width: 992px) and (max-width: 1199px) {
              .magic__card--single a .magic__card .magic__card--header span img {
                width: 14px; } }
            @media only screen and (max-width: 767px) {
              .magic__card--single a .magic__card .magic__card--header span img {
                width: 14px; } }
      .magic__card--single a .magic__card .magic__card--thumb {
        height: 270px;
        border-radius: 16px;
        position: relative;
        width: 100%;
        background-color: #FF8A00;
        margin-top: 50px; }
        @media (min-width: 992px) and (max-width: 1199px) {
          .magic__card--single a .magic__card .magic__card--thumb {
            height: 220px; } }
        .magic__card--single a .magic__card .magic__card--thumb img {
          position: absolute;
          bottom: -15px;
          width: auto;
          max-height: 330px;
          left: 50%;
          transform: translateX(-50%); }
          @media (min-width: 992px) and (max-width: 1199px) {
            .magic__card--single a .magic__card .magic__card--thumb img {
              max-width: 280px; } }
      .magic__card--single a .magic__card:hover .magic__card--header span {
        transform: rotate(45deg);
        background-color: #000; }
        .magic__card--single a .magic__card:hover .magic__card--header span img {
          filter: invert(1); }