html {
      background-color: var(--color-bg);

  }

  @font-face {
      font-family: 'Urbanist';
      font-style: italic;
      font-weight: 100 900;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x4DF02iFML4hGCyMqgXSFsjlC0V7q7Ag.woff2) format('woff2');
      unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  @font-face {
      font-family: 'Urbanist';
      font-style: italic;
      font-weight: 100 900;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x4DF02iFML4hGCyMqgXS9sjlC0V7o.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
      font-family: 'Urbanist';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x-DF02iFML4hGCyMqrbS1miXK2Z7s.woff2) format('woff2');
      unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  @font-face {
      font-family: 'Urbanist';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x-DF02iFML4hGCyMqlbS1miXK2.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }



  .nav-shadow {
      box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
  }

  .gr-root {
      display: flex;
      flex-direction: column;
  }

  /* COMMON SECTION STARTS */

  .gr-container-general-btn {
      margin: 0px;
      padding: 0px;
      display: flex;
      color: var(--color-white);
      font-size: var(--font-medium);
      text-align: center;
      border-radius: var(--roundness-full);
      padding: var(--dim-16px);

      cursor: pointer;
      outline: 0px;
      border: none;
      width: fit-content;
      height: fit-content;
      background-color: transparent;
      border: 1px solid var(--color-black-stroke);
      align-items: center;
      text-decoration: none;

      transform: scale(1);
  }



  .gr-container-general-btn>img {
      display: flex;
      width: 20px;
      object-fit: contain;
      height: 20px;
      margin-right: var(--dim-8px);
      filter: invert(1);
  }



  @media (hover: hover) and (pointer: fine) {

      .gr-container-general-btn:hover {
          color: var(--color-black) !important;
          background-color: var(--color-white) !important;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px !important;

          transform: scale(1.1);
      }

      .gr-container-general-btn:hover img {
          filter: invert(0);
      }


  }

  .gr-container-general-btn-active {
      border: 0px solid black;
      background-color: var(--color-brand);
      pointer-events: none;
      border: 1px solid var(--color-brand);
  }


  /* COMMON SECTION ENDS */
  /* ************************************************************** */
  /* ************************************************************** */
  /* ************************************************************** */
  /* NAVBAR SECTION STARTS */

  .navbar-container {
      margin: 0px;
      padding: 0px;
      display: flex;
      height: fit-content;
      position: relative;
      width: 100%;
      display: flex;
      margin: auto;
      max-width: var(--global-max-width);
      background-color: var(--color-black);

  }

  .navbar-container-inner {
      margin: 0px;
      padding: 0px;
      display: flex;
      height: 80px;
      position: relative;
      width: var(--global-width);
      display: flex;
      margin: 0 auto;
      max-width: var(--global-max-width);
      align-items: center;

  }


  .card-navbar-logo-container {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      flex-shrink: 0;
      width: fit-content;

  }

  .card-navbar-logo-container>p {
      margin: 0px;
      padding: 0px;
      color: var(--color-white);
      font-size: var(--font-large);
      font-weight: 900;
      text-transform: uppercase;
      -webkit-text-stroke: 0.5px var(--color-white);
      width: fit-content;
  }

  .card-navbar-poweredby {
      display: flex;
      align-items: center;
      width: 200px;
  }

  .card-navbar-poweredby>p {
      margin: 0px;
      padding: 0px;
      color: var(--color-white);
      font-size: var(--font-small);
      display: flex;
      flex-shrink: none;
  }

  .card-navbar-poweredby>img {
      height: 18px;
      margin-left: var(--dim-4px);
      cursor: pointer;
      object-fit: contain;
  }

  .navbar-item-container {
      margin: 0px;
      padding: 0px;
      display: flex;
      align-items: center;
      height: 100%;
      background-color: var(--color-white);

      height: 40px;
      border-radius: var(--roundness-full);
      padding: 0px var(--dim-8px);
      margin-left: auto;
  }
 
 
  .navbar-item {
      list-style: none;
      margin: 0px;
      padding: 0px;
      font-size: var(--font-small);
      cursor: pointer;
      color: var(--color-black);


  }


  @media (hover: hover) and (pointer: fine) {


      .navbar-item:hover {
          transition: 0.5s all ease;
          background-color: var(--color-hover);
          border-radius: var(--roundness-full);
      }


  }

  .navbar-item>a {
      font-size: var(--font-small);
  }

  .navbar-link {
      display: flex;
      justify-content: center;
      width: 100% !important;
      height: 100% !important;
      align-items: center;
      margin: 0px;
      padding: 0px;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: var(--roundness-full);
      padding: var(--dim-8px) var(--dim-12px);
      text-decoration: none;
      font-size: var(--font-medium);
      color: var(--color-black);

  }

  .active-navbar-item {
      background-color: var(--color-brand);
      border: 0px solid var(--color-stroke) !important;
  }

  .active-navbar-item>a {
      color: white;
  }

  /* NAVBAR SECTION ENDS */
  /* ************************************************************** */
  /* ************************************************************** */
  /* ************************************************************** */
  /* HEADER SECTION STARTS */

  .gr-header {

      margin: 0px;
      padding: 0px;
      display: flex;
      height: fit-content;
      width: 100%;
      display: flex;
      margin: auto;
      max-width: var(--global-max-width);
      background-color: var(--color-black-stroke);

  }

  .gr-header-inner {

      margin: 0px;
      padding: 0px;
      display: flex;
      height: fit-content;
      position: relative;
      width: var(--global-width);
      display: flex;
      margin: 0 auto;
      max-width: var(--global-max-width);
      flex-direction: column;
      padding: var(--dim-separator-gap) 0px;
  }


  .gr-header h1 {
      color: var(--color-white);
      font-size: var(--font-large-extra);
      margin-bottom: var(--dim-8px);
      width: fit-content;
  }

  .gr-header-br {
      display: none;
  }

  .gr-header p {
      color: var(--color-bg) !important;
      font-size: var(--font-medium);
      width: 60%;
  }


  .gr-header a {

      margin-top: var(--dim-32px);
      color: var(--color-black) !important;
      background-color: var(--color-white) !important;
  }

  .gr-header a img {
      filter: invert(0) !important;
  }




  .container {
      height: 170px;
      display: flex;
      position: absolute;
      right: 0%;

  }

  .cover {
      display: inline-block;
      width: 339px;
      height: 198px;
      border-radius: var(--roundness);
  }

  .gr-header-showpiece-showpiece {

      border-radius: var(--roundness);
      transform-style: preserve-3d;
      -webkit-tap-highlight-color: rgba(#000, 0);
  }

  .gr-header-showpiece-showpiece img {
      border-radius: var(--roundness);
      box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  }

  .gr-header-showpiece-showpiece-container {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: var(--roundness);
      transition: all 0.2s ease-out;
  }

  .gr-header-showpiece-showpiece-container.over .gr-header-showpiece-showpiece-shadow {
      box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  }

  .gr-header-showpiece-showpiece-layers {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: var(--roundness);
      overflow: hidden;
      transform-style: preserve-3d;
  }

  .gr-header-showpiece-showpiece-rendered-layer {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0%;
      left: 0%;
      background-repeat: no-repeat;
      background-position: center;
      background-color: transparent;
      background-size: cover;
      transition: all 0.1s ease-out;
      overflow: hidden;
      border-radius: var(--roundness);
  }

  .gr-header-showpiece-showpiece-shadow {
      position: absolute;
      top: 5%;
      left: 5%;
      width: 90%;
      height: 90%;
      transition: all 0.2s ease-out;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  }

  .gr-header-showpiece-showpiece-shine {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: var(--roundness);
      background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 60%);
  }

  /* HEADER SECTION ENDS */
  /* ************************************************************** */
  /* ************************************************************** */
  /* ************************************************************** */
  /* HERO SECTION STARTS */



  .gr-hero {
      margin: 0px;
      padding: 0px;
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      right: 0;
      left: 0;
      max-width: var(--global-max-width);
      height: fit-content;
      background-color: var(--color-white);

  }

  .gr-hero-inner {
      margin: 0px;
      padding: 0px;
      width: var(--global-width);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--dim-16px);
      margin: 0 auto;
      height: fit-content;
      padding: var(--dim-separator-gap) 0px;
      align-items: center;
      min-height: 500px;
  }

  .gr-hero-inner-left {
      display: flex;
      flex-direction: column;

  }

  .gr-hero-inner-left h2 {
      display: flex;
      color: var(--color-black);
      font-size: var(--font-large-extra);
      margin-bottom: var(--dim-8px);

  }

  .gr-hero-inner-left>p {
      display: flex;
      color: var(--color-gray);
      font-size: var(--font-medium);
      margin-bottom: var(--dim-32px);

  }

  .gr-hero-features {
      list-style: none;
      margin-bottom: var(--dim-32px);
  }

  .gr-hero-features li {
      display: flex;
      align-items: center;
      margin-bottom: var(--dim-8px);
  }

  .gr-hero-features li:last-child {
      margin-bottom: 0px;
  }

  .gr-hero-features li:before {
      content: "✓";
      color: var(--color-green);
      font-weight: bold;
      margin-right: var(--dim-8px);
  }

  .gr-hero-stats {
      display: flex;
      flex-direction: column;
  }

  .gr-hero-stats p {
      font-size: var(--font-medium);
      margin-bottom: var(--dim-8px);
  }

  .gr-hero-stats p:last-child {
      margin-bottom: 0px;
  }

  .gr-order-now-btn {
      margin-top: var(--dim-32px);
      color: var(--color-black) !important;
  }

  .gr-hero-inner-right {

      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--dim-16px);
  }

  .gr-hero-inner-right div {
      width: 100%;
      display: flex;
      border-radius: var(--roundness);
      border: 1px solid var(--color-stroke);
      padding: var(--dim-4px);
      box-sizing: border-box;
  }

  .gr-hero-inner-right div img {
      width: 100%;
      height: auto;
      display: flex;
      border-radius: var(--roundness);

  }

  /* HERO SECTION ENDS */
  /* ************************************************************** */
  /* ************************************************************** */
  /* ************************************************************** */
  /* CLIENTS SECTION STARTS */





  .gr-showcase-container {
      margin: 0px;
      padding: 0px;
      width: 100%;
      display: flex;
      right: 0;
      left: 0;
      max-width: var(--global-max-width);
      height: fit-content;
      margin: 0 auto;
      background-color: var(--color-black);
  }

  .gr-showcase-container-inner {
      margin: 0px;
      padding: 0px;
      width: var(--global-width);
      display: flex;
      height: fit-content;
      padding: var(--dim-separator-gap) 0px;
      margin: 0 auto;
      flex-direction: column;
  }

  .gr-showcase-title {
      text-align: center;
      color: var(--color-white);
      font-size: var(--font-large-extra);
      width: 100%;
      margin-bottom: var(--dim-64px);

  }





  .gr-showcase-swiper {
      width: 100%;
  }

  .gr-showcase-swiper .swiper-slide {
      width: 220px;
      display: flex;
      justify-content: center;
      border-radius: var(--roundness);
      padding: var(--dim-4px);
      border: 1px double var(--color-brand);
      box-sizing: border-box;

  }

  .swiper-wrapper {
      display: flex;
      align-items: center;
  }

  .gr-showcase-swiper img {
      display: flex;
      align-self: center;
      width: 100%;
      height: auto;
      border-radius: var(--roundness);
      object-fit: cover;
  }





  /* CLIENTS SECTION ENDS */
  /* ************************************************************** */
  /* ************************************************************** */
  /* ************************************************************** */
  /* CASE STUDIES SECTION STARTS */




  .gr-case-studies {
      margin: 0px;
      padding: 0px;
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      right: 0;
      left: 0;
      max-width: var(--global-max-width);
      height: fit-content;
      background-color: var(--color-bg);

  }

  .gr-case-studies-inner {
      margin: 0px;
      padding: 0px;
      width: var(--global-width);
      display: flex;
      margin: 0 auto;
      height: fit-content;
      padding: var(--dim-separator-gap) 0px;
      flex-direction: column;
      align-items: center;
  }

  .gr-case-studies-title {
      text-align: center;
      font-size: var(--font-large-extra);
      color: var(--color-black);
      margin-bottom: var(--dim-64px);
  }

  .gr-cases-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--dim-16px);
  }

  .gr-case-card {
      display: flex;
      flex-direction: column;
      background: var(--color-white);
      border-radius: var(--roundness);
      padding: var(--dim-32px);
      box-sizing: border-box;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px !important;

      height: 400px;
  }

  .gr-case-card p {

      font-size: var(--font-medium);
      display: flex;
      margin-top: var(--dim-16px);

  }

  .gr-case-icon {
      font-size: 40px;
      margin-bottom: var(--dim-16px);
  }

  .gr-case-title {
      color: var(--color-black) !important;
      font-size: var(--font-large)
  }

  .gr-case-title span {
      color: var(--color-brand);
      font-size: var(--font-small);
  }

  .gr-case-result {
      display: flex;
      background: var(--color-success);
      color: var(--color-black);
      border-radius: var(--roundness-full);
      display: inline-block;
      font-weight: bold;
      margin-top: auto;
  }


  /* CASE STUDIES SECTION ENDS */
  /* ************************************************************** */
  /* ************************************************************** */
  /* ************************************************************** */
  /* FEATURES SECTION STARTS */

  .gr-features {
      margin: 0px;
      padding: 0px;
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      right: 0;
      left: 0;
      max-width: var(--global-max-width);
      height: fit-content;
      background-color: var(--color-black);
  }

  .gr-features-inner {
      margin: 0px;
      padding: 0px;
      width: var(--global-width);
      display: flex;
      margin: 0 auto;
      height: fit-content;
      padding: var(--dim-separator-gap) 0px;
      flex-direction: column;
      align-items: center;
  }

  .gr-features-title {
      text-align: center;
      font-size: var(--font-large-extra);
      color: var(--color-white);
      margin-bottom: var(--dim-64px);

  }

  .gr-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;

      width: 100%;
      gap: var(--dim-16px);
  }

  .gr-feature-card {
      display: flex;
      flex-direction: column;
      border-radius: var(--roundness);
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      padding: var(--dim-16px);
      box-sizing: border-box;
      border: 1px solid var(--color-black-stroke);
      width: 100%;

  }

  .gr-feature-icon {
      width: 40px;
      height: 40px;
      color: var(--color-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
  }

  .gr-feature-card h3 {

      font-size: var(--font-large);
      display: flex;
      color: var(--color-white);
      margin-top: var(--dim-16px);
      margin-bottom: var(--dim-4px);

  }

  .gr-feature-card p {

      font-size: var(--font-small);
      display: flex;
      color: var(--color-white);
      text-align: center;

  }


  /* FEATURES SECTION ENDS */
  /* ************************************************************** */
  /* ************************************************************** */
  /* ************************************************************** */
  /* How it Works SECTION STARTS */

  .gr-hiw {
      margin: 0px;
      padding: 0px;
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      right: 0;
      left: 0;
      max-width: var(--global-max-width);
      height: fit-content;
      background-color: var(--color-white);
  }

  .gr-hiw-inner {
      margin: 0px;
      padding: 0px;
      width: var(--global-width);
      display: flex;
      margin: 0 auto;
      height: fit-content;
      padding: var(--dim-separator-gap) 0px;
      flex-direction: column;
      align-items: center;
  }

  .gr-hiw-title {
      text-align: center;
      font-size: var(--font-large-extra);
      color: var(--color-black);
      margin-bottom: var(--dim-64px);
  }

  .gr-hiw-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--dim-16px);
  }

  .gr-hiw-card {
      display: flex;
      flex-direction: column;
      border-radius: var(--roundness);
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      padding: var(--dim-16px);
      box-sizing: border-box;
      border: 1px solid var(--color-stroke);

  }

  .gr-hiw-icon {
      width: 40px;
      height: 40px;
      color: var(--color-black);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
  }

  .gr-hiw-card h3 {

      font-size: var(--font-large);
      display: flex;
      color: var(--color-black);
      margin-top: var(--dim-16px);
      margin-bottom: var(--dim-4px);

  }

  .gr-hiw-card p {

      font-size: var(--font-medium);
      display: flex;
      color: var(--color-black);
      text-align: center;

  }

  /* How it Works  SECTION ENDS */
  /* ************************************************************** */
  /* ************************************************************** */
  /* ************************************************************** */
  /* CTA SECTION STARTS */


  .gr-cta {
      margin: 0px;
      padding: 0px;
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      right: 0;
      left: 0;
      max-width: var(--global-max-width);
      height: fit-content;
      background-color: var(--color-brand);
  }

  .gr-cta-inner {
      margin: 0px;
      padding: 0px;
      width: var(--global-width);
      display: flex;
      margin: 0 auto;
      height: fit-content;
      padding: var(--dim-separator-gap) 0px;
      flex-direction: column;
      position: relative;


  }



  .gr-cta h2 {
      display: flex;
      font-size: var(--font-large-extra);
      color: var(--color-white);
      margin-bottom: var(--dim-8px);
  }

  .gr-cta p {
      display: flex;
      font-size: var(--font-medium);
      display: flex;
      color: var(--color-white);
      width: 40%;
  }


  .gr-cta-order-now-btn {
      color: var(--color-white);
      margin-top: var(--dim-32px);
      background-color: var(--color-white) !important;
      color: var(--color-black) !important;
      border: none !important;
  }

  .gr-cta-order-now-btn img {
      filter: invert(0) !important;

  }

  .gr-cta-call {
      font-size: var(--font-medium);
      display: flex;
      margin-top: var(--dim-16px);
  }

  .gr-cta-call a {
      display: flex;
      margin-left: var(--dim-8px);
      color: var(--color-white);
      text-decoration: none;
  }

  .gr-cta-call a:hover {
      cursor: pointer;
      text-decoration: underline;
  }

  .gr-cta-right {
      position: absolute;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--dim-16px);
      right: 0%;
  }

  .gr-cta-image {

      width: 100%;
      display: flex;
      border-radius: var(--roundness);

  }

  .gr-cta-image img {
      width: 100%;
      height: 140px;
      display: flex;
      border-radius: var(--roundness);

  }



  /* CTA SECTION ENDS */
  /* ************************************************************** */
  /* ************************************************************** */
  /* ************************************************************** */
  /* FAQ SECTION STARTS */

  .gr-faq {
      margin: 0px;
      padding: 0px;
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      right: 0;
      left: 0;
      max-width: var(--global-max-width);
      height: fit-content;
      background-color: var(--color-white);
  }

  .gr-faq-inner {

      margin: 0px;
      padding: 0px;
      width: var(--global-width);
      display: flex;
      margin: 0 auto;
      height: fit-content;
      padding: var(--dim-separator-gap) 0px;
      flex-direction: column;
  }

  .gr-faq-title {
      display: flex;
      font-size: var(--font-large-extra);
      color: var(--color-black);
      margin-bottom: var(--dim-16px);
  }

  .gr-faq-item {
      border-bottom: 1px solid var(--color-stroke);

      display: flex;
      flex-direction: column;
      padding: var(--dim-8px) 0px;
  }

  .gr-faq-question {
      font-weight: bold;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--font-small);
  }

  .gr-faq-answer {
      max-height: 0;
      overflow: hidden;
  }

  .gr-faq-answer p {
      font-size: var(--font-small);
      padding: var(--dim-8px) 0px;

  }

  .gr-faq-answer.open {
      max-height: 500px;
  }

  /* FAQ SECTION ENDS */
  /* ************************************************************** */
  /* ************************************************************** */

  /* ************************************************************** */
  /* ************************************************************** */
  /* FOOTER SECTION STARTS */


  .footer-container {
      margin: 0px;
      padding: 0px;
      display: flex;
      height: fit-content;
      position: relative;
      width: 100%;
      display: flex;
      max-width: var(--global-max-width);
      margin: auto;

      background: #1d183b;
      background: linear-gradient(45deg, #1d183b, #0c091c, #1d183b);
      background-size: 300% 300%;
      animation: diagonalFlow 5s ease-in-out infinite;

  }

  .footer-container-inner {
      margin: 0px;
      padding: 0px;
      width: var(--global-width);
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      height: fit-content;
      padding: var(--dim-32px) 0px;
  }

  .footer-top {
      display: flex;
      width: 100%;


  }

  .footer-main {

      display: flex;
      flex-direction: column;
  }


  .footer-section-title {
      margin: 0px;
      padding: 0px;
      font-size: var(--font-medium);
      color: var(--color-white);
      width: 80%;
  }



  .footer-logo-container {
      display: flex;
      flex-direction: column;
      margin-bottom: var(--dim-16px);


  }

  .footer-logo-container>p {
      margin: 0px;
      padding: 0px;
      color: var(--color-white);
      font-size: var(--font-large-extra);
      font-weight: 900;
      text-transform: uppercase;
      -webkit-text-stroke: 1px var(--color-white);
      width: fit-content;


  }

  .footer-poweredby {
      display: flex;
      align-items: center;
      width: 100%;

  }

  .footer-poweredby>p {
      margin: 0px;
      padding: 0px;
      color: var(--color-white);
      font-size: var(--font-small);
      display: flex;

  }

  .footer-poweredby>img {

      height: 18px;
      margin-left: var(--dim-4px);
      margin-right: var(--dim-4px);
      cursor: pointer;
      object-fit: contain;
  }


  .footer-social-icons {
      display: flex;
      margin-top: auto;
      margin-left: auto;
      justify-self: flex-end;
      align-items: flex-end;

  }

  .footer-social-icons>a {
      width: 40px;
      height: 40px;
      cursor: pointer;

      margin-left: var(--dim-16px);
  }

  @media (hover: hover) and (pointer: fine) {


      .footer-social-icons>a:hover {

          transform: scale(var(--scale-down-effect));
      }
  }


  .footer-social-icons>a>img {
      width: 40px;
      height: 40px;
  }










  .footer-section-ul {
      margin: 0px;
      padding: 0px;
      list-style: none;
      margin-top: var(--dim-16px);
  }

  .footer-section-li {
      margin: 0px;
      padding: 0px;
      font-size: var(--font-small);
      margin-bottom: var(--dim-2px);
      color: var(--color-white);
  }

  .footer-section-a {
      color: var(--color-black);
      text-decoration: none;
      cursor: pointer;
      color: var(--color-white);
      font-size: var(--font-small);
  }

  @media (hover: hover) and (pointer: fine) {
      .footer-section-a:hover {
          color: var(--color-brand);
          text-decoration: underline;
      }



  }


  .footer-middle {
      display: flex;
      margin-top: var(--dim-64px);
      margin-bottom: var(--dim-64px);
  }

  .footer-middle-section {
      width: 25%;
      display: flex;
      flex-direction: column;

  }

  .footer-bottom {
      width: 100%;
      height: fit-content;
      display: flex;
      align-items: center;
  }

  .footer-rights {
      margin: 0px;
      padding: 0px;
      color: var(--color-white);
      font-size: var(--font-medium);
  }

  .footer-payment-method {
      margin-left: auto;
  }

  .footer-company {
      color: var(--color-white);
  }


  .footer-no-pointer {
      pointer-events: none;
  }


  @media only screen and (max-width: 1250px) {


      .gr-features-grid {
          grid-template-columns: 1fr 1fr 1fr;
      }


      .gr-cta-right {
          grid-template-columns: 1fr;
      }

      .gr-cta p {
          width: 60%;
      }

      .gr-cta-image:nth-child(3),
      .gr-cta-image:nth-child(4) {


          display: none;

      }

  }

  @media only screen and (max-width: 1152px) {

      .gr-header-br {
          display: flex;
      }

      .gr-header p {
          width: 50%;
      }

      .gr-hero-inner {
          display: flex;
          align-items: flex-start;
      }

      .gr-hero-inner-left {
          flex: 1;
          width: 70%;

      }

      .gr-hero-inner-right {
          width: 200px;
          grid-template-columns: 1fr;
      }

      .gr-hero-inner-right div {
          padding: 0px;
      }


      .gr-cases-grid {
          grid-template-columns: 1fr 1fr;
      }

  }

  @media only screen and (max-width: 1100px) {

      .footer-top {
          flex-direction: column;
      }

      .footer-main {
          width: 100%;
      }

      .footer-social-icons {
          width: 100%;

          margin-top: var(--dim-16px);
          margin-left: 0px;
          justify-self: initial;
          align-items: initial;
          flex-wrap: wrap;

      }

      .footer-social-icons>a {
          margin-right: var(--dim-16px);
          margin-left: 0px;
          margin-bottom: var(--dim-16px);
      }

      .footer-middle {
          display: flex;
          margin-top: var(--dim-32px);
          margin-bottom: var(--dim-32px);
      }

      .footer-section-title {
          width: 100%;
      }



  }

  @media only screen and (max-width: 1060px) {


      .footer-middle-section {
          width: 25% !important;
      }

      .footer-middle {
          flex-wrap: wrap;
      }

      .footer-middle-margin-bottom-16 {
          margin-bottom: var(--dim-16px);
      }

      .footer-middle-margin-left-auto {
          margin-left: auto !important;
      }





  }

  @media only screen and (max-width: 920px) {


      .gr-features-grid {
          grid-template-columns: 1fr 1fr;
      }
  }

  @media only screen and (max-width: 900px) {


      .container {

          display: none;

      }

      .gr-header-br {
          display: none;
      }

      .gr-header p {
          width: 100%;
      }

      .gr-hero-br {
          display: none;
      }

      .gr-showcase-title,
      .gr-case-studies-title,
      .gr-features-title,
      .gr-hiw-title {
          text-align: start;
          margin-bottom: var(--dim-16px);
          width: 100%;
      }

      .gr-hiw-grid {
          grid-template-columns: 1fr 1fr;
      }

      .gr-cta-inner {
          flex-direction: column;


      }

      .gr-cta-right {
          display: none;
      }

      .gr-cta p {
          width: 100%;
      }
  }

  @media only screen and (max-width: 650px) {
      .gr-hero-inner {


          flex-direction: column;
      }

      .gr-hero-inner-left {
          width: 100%;

      }

      .gr-hero-inner-right {
          margin-top: var(--dim-16px);
          width: 100%;
          grid-template-columns: 1fr 1fr;
      }

      .gr-cases-grid {
          grid-template-columns: 1fr;
      }

      .gr-case-card {
          padding: var(--dim-16px);

          box-shadow: none !important;
          height: fit-content;
      }

      .gr-case-result {
          margin-top: var(--dim-16px);
      }

      /* .gr-hero-br {
          display: flex;
      } */

  }

  @media only screen and (max-width: 550px) {


      .gr-feature-card {
          justify-content: flex-start;
          align-items: flex-start;

      }

      .gr-feature-card p {
          text-align: start;

      }

      .gr-features-grid {
          grid-template-columns: 1fr;
      }

      .gr-hiw-card {
          justify-content: flex-start;
          align-items: flex-start;

      }

      .gr-hiw-card p {
          text-align: start;

      }

      .gr-hiw-grid {
          grid-template-columns: 1fr;
      }

      .footer-middle-section {
          width: 49% !important;
      }

      .footer-middle {
          flex-wrap: wrap;
      }

      .footer-middle-margin-bottom-16 {
          margin-bottom: var(--dim-16px);
      }

      .footer-middle-margin-left-auto {
          margin-left: auto !important;
      }

  }



  /* Add at the very top for direction support */
  html[dir="rtl"] {
      direction: rtl;
  }

  /* COMMON SECTION FIXES */
  .gr-container-general-btn>img {
      margin-right: var(--dim-8px);
      margin-inline-end: var(--dim-8px);
  }

  /* NAVBAR SECTION FIXES */
  .card-navbar-poweredby>img {
      margin-left: var(--dim-4px);
      margin-inline-start: var(--dim-4px);
  }

  .navbar-item-container {
      margin-left: auto;
      margin-inline-start: auto;
  }

  /* HERO SECTION FIXES */
  .gr-hero-features li:before {
      margin-right: var(--dim-8px);
      margin-inline-end: var(--dim-8px);
  }

  /* CTA SECTION FIXES */
  .gr-cta-call a {
      margin-left: var(--dim-8px);
      margin-inline-start: var(--dim-8px);
  }

  /* FOOTER SECTION FIXES */
  .footer-poweredby>img {
      margin-left: var(--dim-4px);
      margin-inline-start: var(--dim-4px);
      margin-right: var(--dim-4px);
      margin-inline-end: var(--dim-4px);
  }

  .footer-social-icons {
      margin-left: auto;
      margin-inline-start: auto;
  }

  .footer-social-icons>a {
      margin-left: var(--dim-16px);
      margin-inline-start: var(--dim-16px);
  }

  .footer-payment-method {
      margin-left: auto;
      margin-inline-start: auto;
  }

  /* Responsive fixes */
  @media only screen and (max-width: 1100px) {
      .footer-social-icons {
          margin-left: 0px;
          margin-inline-start: 0px;
      }

      .footer-social-icons>a {
          margin-right: var(--dim-16px);
          margin-inline-end: var(--dim-16px);
          margin-left: 0px;
          margin-inline-start: 0px;
      }
  }

  @media only screen and (max-width: 1060px) {
      .footer-middle-margin-left-auto {
          margin-left: auto !important;
          margin-inline-start: auto !important;
      }
  }

  /* Add RTL-specific fixes */
  html[dir="rtl"] .container {
      right: auto;
      left: 0%;
  }

  html[dir="rtl"] .gr-cta-right {
      right: auto;
      left: 0%;
  }

  /* Fix text alignment for RTL */
  html[dir="rtl"] .gr-showcase-title,
  html[dir="rtl"] .gr-case-studies-title,
  html[dir="rtl"] .gr-features-title,
  html[dir="rtl"] .gr-hiw-title,
  html[dir="rtl"] .gr-faq-title {
      text-align: right;
  }

  /* Fix float/direction for RTL */
  html[dir="rtl"] .gr-header p,
  html[dir="rtl"] .gr-cta p {
      text-align: right;
  }

  /* Fix flex order for RTL if needed */
  html[dir="rtl"] .navbar-item-container {
      margin-inline-start: 0;
      margin-inline-end: auto;
      margin-left: initial !important;
      
  }