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;
 }

 /* * {
      transition: 0.2s all ease !important;

    } */

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


 /* 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);
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     height: 40px;
     border-radius: var(--roundness-full);
     padding: 0px var(--dim-8px);
 }

 .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;
 }




 .card-language-container {
     display: flex;
     background-color: var(--color-lightgray);
     border-radius: var(--roundness-full);
     margin-left: auto;
 }

 .card-language-container {
     display: flex;
 }

 .card-language-ar {
     display: flex;
     padding: var(--dim-8px);
     cursor: pointer;

 }

 .card-language-ar>p {
     display: flex;
     font-size: var(--font-small);

 }

 .card-language-en {
     display: flex;
     padding: var(--dim-8px);
     cursor: pointer;

 }

 .card-language-en>p {
     display: flex;
     font-size: var(--font-small);
 }

 .card-language-active-ar {
     background-color: var(--color-brand);
     border-radius: var(--roundness-full) 0px 0px var(--roundness-full);
     pointer-events: none;
     caret-color: var(--color-brand);

 }

 .card-language-active-en {
     background-color: var(--color-brand);
     border-radius: 0px var(--roundness-full) var(--roundness-full) 0px;
     pointer-events: none;
     caret-color: var(--color-brand);
 }

 .card-language-active-ar>p,
 .card-language-active-en>p {
     color: var(--color-white);
 }



 /* NAVBAR SECTION ENDS */
 /* ************************************************************** */
 /* ************************************************************** */
 /* ************************************************************** */
 /* HERO SECTION STARTS */

 .hero-container {
     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);

 }

 .hero-container-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;
     min-height: 500px;
 }


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

 .hero-title>strong {
     text-align: center;
     color: var(--color-white);
     font-size: var(--font-large-extra);
     margin-bottom: var(--dim-16px);
     color: var(--color-brand);
     font-weight: 900;
     border-bottom: 4px solid var(--color-brand);
 }

 .hero-subtitle {
     text-align: center;
     color: var(--color-bg) !important;
     font-size: var(--font-medium);
     width: 60%;

 }


 .hero-demo {
     display: flex;
     width: 100%;
     margin-top: var(--dim-32px);

     align-items: center;
     flex-direction: column;
 }

 .hero-demo-btns {
     display: flex;
 }

 .hero-demo-btns>* {
     display: flex;
     margin: 0px var(--dim-8px) !important;

 }





 .hero-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);
 }

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



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

     .hero-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);
     }

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


 }

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




 .hero-demo-card {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: var(--dim-16px);
     margin-top: var(--dim-32px);
 }

 .hero-demo-card>img {
     width: 100%;
     cursor: pointer;
     border-radius: var(--roundness);
     height: auto;
     display: block;
 }

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

     .hero-demo-card>img:hover {
         width: 100%;
         height: fit-content;
         transform: scale(0.96);
         z-index: 4;
     }

 }



 .hero-profile-opener-container {
     display: flex;
     background-color: rgb(0, 0, 0, 0.9);
     border-radius: var(--roundness);
     position: fixed;
     width: 100%;
     height: 100%;
     z-index: 5;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     justify-content: center;
     align-items: center;
     display: none;

 }

 .hero-profile-opener-inner-container {

     display: flex;
     border-radius: var(--roundness);
     width: fit-content;
     height: fit-content;
     box-sizing: border-box;
     position: relative;
     width: 1040px;
     height: 500px;
     overflow: none;

     background-color: var(--color-bg);
     border-radius: var(--roundness);
     overflow: hidden !important;
 
 
    }

 .hero-profile-opener-middle {
     display: grid !important;
     grid-template-columns: 1fr 1fr;
     width: 620px;

     background-color: transparent;
     gap: var(--dim-16px);
     padding: var(--dim-16px);
     box-sizing: border-box;
     height: fit-content !important;
 }

 .hero-profile-opener-middle>div {
     display: flex;
     width: 100%;
     border-radius: var(--roundness);
 }

 .hero-profile-opener-middle>div>img {
     width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
     border-radius: var(--roundness);
 }







 .hero-profile-opener-left {


     display: flex;
     flex-direction: column;
     background-color: var(--color-white);
     width: 220px;
     padding: var(--dim-16px);
     box-sizing: border-box;
 }

 .hero-profile-opener-heading {
     color: var(--color-gray);
     font-size: var(--font-medium);
     width: fit-content;
     margin-bottom: var(--dim-2px);
 }

 .hero-profile-opener-title {
     display: flex;
     font-size: var(--font-large);
     margin-bottom: var(--dim-2px);
 }


 .hero-profile-opener-link {
     display: flex;
     font-size: var(--font-medium);
     color: var(--color-link);
     cursor: pointer;
     text-decoration: none;
     margin-bottom: var(--dim-8px);
 }

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

     .hero-profile-opener-link:hover {
         color: var(--color-link-dark);

         text-decoration: underline;
     }


 }



 .hero-profile-opener-subtitle-2 {
     display: flex;
     font-size: var(--font-medium);
 }

 .hero-profile-opener-image-container {
     display: flex;
     flex-direction: column;
     margin-top: var(--dim-16px);
     gap: var(--dim-16px);
     box-sizing: border-box;
 }

 .hero-profile-opener-image-container>img {

     display: flex;
     width: 192px;
     height: fit-content;
     border-radius: var(--roundness);
     border: 1px solid var(--color-stroke);
     padding: var(--dim-2px);
     box-sizing: border-box;
 }

 .hero-profile-opener-right {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background-color: var(--color-brand);
     width: 200px;
     padding: var(--dim-16px);
 }

 .hero-profile-close-container {

     position: absolute;
     right: 0%;
     width: 35px;
     height: 35px;
     cursor: pointer;
     background-color: var(--color-lightgray);
     border-radius: var(--roundness-full);
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid var(--color-stroke);
     margin-right: var(--dim-16px);
     margin-left: var(--dim-16px);
     margin-top: var(--dim-16px);
 }

 @media (hover: hover) and (pointer: fine) {
     .hero-profile-close-container:hover {

         background-color: var(--color-hover);
     }



 }


 .hero-profile-close {

     width: 18px;
     height: 18px;
     object-fit: contain;
 }



 .hero-profile-opener-qr-title {
     font-size: var(--font-medium);
     color: var(--color-white);
     display: flex;
     text-align: center;

 }

 .hero-profile-opener-qr-container {

     height: 160px;
     width: 160px;
     display: flex;
     border-radius: var(--roundness);
     border: 4px solid var(--color-brand-dark);
     padding: var(--dim-8px);
     margin: var(--dim-16px) auto;
     background-color: var(--color-white);
     box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px !important;

     justify-content: center;
     align-items: center;
 }







 /* HERO SECTION ENDS */
 /* ************************************************************** */
 /* ************************************************************** */
 /* ************************************************************** */
 /* FEATURES SECTION STARTS */



 .feature-container {
     margin: 0px;
     padding: 0px;
     width: 100%;
     display: flex;
     right: 0;
     left: 0;
     max-width: var(--global-max-width);
     height: fit-content;
     background-color: var(--color-bg);

     margin: 0 auto;


 }

 .feature-container-inner {

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

     margin: 0 auto;
 }

 .feature-container-left {
     display: flex;
     width: 50%;
     flex: 1;
     flex-direction: column;
     margin-right: var(--dim-32px);
     box-sizing: border-box;
     border-radius: var(--roundness);

 }

 .feature-title {
     font-size: var(--font-large-extra);

     margin-bottom: var(--dim-8px);


 }

 .feature-title>strong {
     text-align: center;
     color: var(--color-white);
     font-size: var(--font-large-extra);
     color: var(--color-black);
     font-weight: 900;
 }

 .feature-subtitle {
     display: flex;
     font-size: var(--font-medium);
     color: var(--color-gray);
     width: 100%;
 }


 .feature-grid-container {
     display: flex;
     flex-direction: column;
     width: 100%;
     grid-template-columns: 1fr 1fr;
     gap: var(--dim-8px);
     margin-top: var(--dim-16px);
 }

 .feature-grid-container-item {
     margin: 0px;
     padding: 0px;
     display: flex;
     height: fit-content;
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-stroke);
     top: var(--dim-4px);
     padding: var(--dim-8px) 0px;


 }

 .feature-grid-container-item:last-child {
     border-bottom: 0px solid var(--color-stroke);

 }

 .feature-grid-container-item>img {
     display: flex;
     width: 20px;
     height: 20px;


 }

 .feature-grid-container-item>p {
     font-size: var(--font-medium);
     font-weight: 800;
     margin-right: var(--dim-8px);
     margin-left: var(--dim-8px);
 }

 .feature-grid-container-item>p>span {
     font-size: var(--font-medium);
 }


 .feature-container-general-btn-container {
     display: flex;
     gap: var(--dim-8px);
     margin-top: var(--dim-16px);
     flex-wrap: wrap;
 }

 .feature-container-general-btn {
     margin: 0px;
     padding: 0px;
     display: flex;
     color: var(--color-black);
     font-size: var(--font-small);
     text-align: center;
     border-radius: var(--roundness-full);
     padding: var(--dim-8px);
     cursor: pointer;
     outline: 0px;
     border: none;
     width: fit-content;
     height: fit-content;
     background-color: transparent;
     border: 1px solid var(--color-stroke);
     align-items: center;
     text-decoration: none;
     transform: scale(1);
 }

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

     .feature-container-general-btn:hover {
         color: var(--color-black) !important;
         background-color: var(--color-hover) !important;

     }


 }



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

 .feature-container-right {
     display: flex;
     width: 60%;
     border-radius: var(--roundness);

     align-items: center !important;
     justify-content: center !important;
     position: relative;
     padding: var(--dim-16px);

 }


 .feature-phone {
     display: flex;
     width: 314px;
     width: 290px;
     height: 520px;

     border: 4px solid var(--color-black);
     border-radius: var(--roundness);
     position: relative;
     overflow: hidden;
     /* background: #000; */
     box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px !important;

     /* margin: var(--dim-32px) 0px; */
     margin-left: auto;
 }

 .feature-screen-video {
     pointer-events: none;
     width: 100%;
     height: fit-content;

     background-color: var(--color-white);
     /* object-fit: cover; */
 }

 .container {
     height: 150px;
     margin: var(--dim-separator-gap) 0px;

 }


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


 .feature-container-showpiece {

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

 .feature-container-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;
 }

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

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

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

 .feature-container-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);
 }

 .feature-container-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;
 }

 .feature-container-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%);
 }

 .feature-order-now {
     /* margin-top: auto; */
     background-color: var(--color-brand);
     border: none !important;
     padding: var(--dim-16px) !important;
     margin-top: var(--dim-32px);
 }



 .feature-order-now>img {

     display: flex !important;
 }

 /* FEATURES SECTION ENDS */
 /* ************************************************************** */
 /* ************************************************************** */
 /* ************************************************************** */
 /* CREATS SECTION STARTS */

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

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

     flex-direction: column;
 }

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

 .create-container-left {

     display: flex;
     flex-direction: column;
     flex: 1;
     margin-right: var(--dim-32px);

 }

 .create-title {
     display: flex;
     font-size: var(--font-large-extra);
     display: flex;
     margin-bottom: var(--dim-8px);
     color: var(--color-white);

 }

 .create-title>strong {
     text-align: center;
     color: var(--color-white);
     font-size: var(--font-large-extra);
     margin-bottom: var(--dim-16px);
     color: var(--color-brand);
     font-weight: 900;

 }

 .create-subtitle {
     display: flex;
     font-size: var(--font-medium);
     color: var(--color-white);
     width: 100%;
     width: 80%;
     margin-bottom: var(--dim-32px);
 }





 .create-data-container {
     display: flex;
     flex-wrap: wrap;
     gap: var(--dim-16px);

 }

 .create-section-1 {
     display: flex;

     gap: var(--dim-16px);
     flex-wrap: wrap;
     margin-bottom: var(--dim-16px);

 }

 .create-pick-image {
     display: flex;
     height: 100px;
     width: 100px;
     background-color: transparent;
     border-radius: var(--roundness);
     justify-content: center;
     align-items: center;
     cursor: pointer;
     border: 2px solid var(--color-white);

 }

 .create-pick-image>img {
     height: 30px;
     width: 30px;
     aspect-ratio: 1 / 1;
     filter: invert(1);
 }

 .create-section-2 {
     display: flex;
     gap: var(--dim-16px);
     flex-wrap: wrap;
     margin-bottom: var(--dim-16px);
     height: fit-content;
 }

 .create-section-3 {
     display: flex;
     gap: var(--dim-16px);
     flex-wrap: wrap;
     margin-bottom: var(--dim-16px);

 }

 .create-section-4 {
     display: flex;
     gap: var(--dim-16px);
     flex-wrap: wrap;

 }


 .create-data-item {
     display: flex;
     flex-direction: column;
     width: 200px !important;

 }


 .create-data-item>p {
     display: flex;
     font-size: var(--font-medium);
     color: var(--color-white);
     margin-bottom: var(--dim-8px);
 }

 .create-data-item>input {

     margin: 0px;
     padding: 0px;
     height: 100%;
     width: 100%;
     border-radius: var(--roundness);
     border: none;
     caret-color: var(--color-black) !important;
     outline: 0px;
     height: 50px;
     padding: 0px var(--dim-16px);
     box-sizing: border-box;

 }

 .create-data-item-active {
     outline: 4px solid var(--color-brand) !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) !important;

 }

 .create-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: var(--color-brand);
     align-items: center;
     text-decoration: none;

     transform: scale(1);
 }

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

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

     .create-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);
     }

     .create-container-general-btn:hover img {
         filter: invert(1);
     }



 }





 .create-container-right {

     display: flex;
     width: fit-content;
     height: fit-content;
     background-color: var(--color-white);

     border-radius: var(--roundness);
     box-sizing: border-box;
     position: relative;

 }

 .create-qr-code-redirect-container {
     width: 100%;
     height: 100%;
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--color-bg);
     z-index: 5 !important;
     border-radius: var(--roundness);
     flex-direction: column;
     box-sizing: border-box;


 }

 .create-qr-code-redirect-container-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
 }

 .create-qr-code-redirect {
     width: 180px;
     height: 180px;
     display: flex;
     background-color: var(--color-white);
     box-sizing: border-box;
     border-radius: var(--roundness);
     border: 1px solid var(--color-stroke);
     box-sizing: border-box;

 }

 .create-qr-code-redirect-container>div>p {
     margin-top: var(--dim-16px);
     font-size: var(--font-medium);
     display: flex;
     text-align: center;
 }


 .create-profile-close-container {

     width: 35px;
     height: 35px;
     cursor: pointer;
     background-color: var(--color-lightgray);
     border-radius: var(--roundness-full);
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid var(--color-stroke);
     margin-top: auto;
     margin-bottom: var(--dim-16px);
     box-sizing: border-box;
 }

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

     .create-profile-close-container:hover {

         background-color: var(--color-hover);
     }

 }


 .create-profile-close {

     width: 18px;
     height: 18px;
     object-fit: contain;
 }

 /* CREATS SECTION ENDS */
 /* ************************************************************** */
 /* ************************************************************** */
 /* ************************************************************** */
 /* SHOWCASE  SECTION STARTS */

 

 .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-white);
 }

 .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;
 }

 .showcase-title {
     text-align: center;
     color: var(--color-black);
     font-size: var(--font-large-extra);
     width: 100%;

 }

 .showcase-subtitle {
     font-size: var(--font-medium);
     color: var(--color-gray);

     margin: 0 auto;
     margin-bottom: var(--dim-32px);
     width: 60%;
     margin-top: var(--dim-8px);

     justify-content: center;
     text-align: center;
 }

 .showcase-industries-row {
     display: flex;
     gap: var(--dim-16px);
     align-items: center;
     justify-content: center;
     margin-bottom: var(--dim-64px);
     flex-wrap: wrap;
 }

 .showcase-industry-badge {
     display: flex;
     font-size: var(--font-medium);
     padding: var(--dim-8px);
     background-color: var(--color-white);
     border: 1px solid var(--color-stroke);
     border-radius: var(--roundness-full);
 }




 .showcase-swiper {
     width: 100%;
 }

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

 }

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

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


 /* Trust Badges */
 .showcase-trust-badges {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: var(--dim-16px);
     padding-top: var(--dim-32px);
     border-top: 1px solid var(--color-stroke);

     margin-top: var(--dim-64px);
 }


 .showcase-trust-item {
     text-align: center;
     flex-direction: column;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .showcase-trust-item img {
     display: flex;
     margin-bottom: var(--dim-16px);
     width: 40px;
     object-fit: contain;
     height: 40px;
 }

 .showcase-trust-item p {
     display: flex;
     color: var(--color-black);
     font-size: var(--font-medium);
 }



 /* SHOWCASE SECTION ENDS */
 /* ************************************************************** */
 /* ************************************************************** */
 /* ************************************************************** */
 /* PRODUCTS  SECTION STARTS */

 .products-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-white);
 }

 .products-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;
 }

 .products-title {
     display: flex;
     font-size: var(--font-large-extra);
     margin-bottom: var(--dim-32px);
     font-size: var(--font-large-extra);



 }

 .products-type-container {

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




 }

 .products-type-container>div {
     display: flex;
     flex-direction: column;
     border-radius: var(--roundness);
     height: fit-content;
     /* padding: var(--dim-16px); */
     box-sizing: border-box;
     /* border: 1px solid var(--color-stroke); */
     background-color: var(--color-white);


 }

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

     .products-type-container>div:hover img {
         box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

     }

 }


 .products-type-container>div>p:nth-child(1) {

     display: flex;
     font-size: var(--font-large);
 }

 .products-type-container>div>p:nth-child(2) {

     display: flex;
     font-size: var(--font-medium);
     margin-top: var(--dim-8px);
     color: var(--color-gray);
     height: 80px;
 }

 .products-type-container>div>p:nth-child(4) {

     display: flex;
     font-size: var(--font-medium);
     align-items: center;
     color: var(--color-black);
     margin-bottom: var(--dim-8px);
 }

 .products-type-container>div>p:nth-child(4)>strong {

     display: flex;
     font-size: var(--font-large-extra);
     color: var(--color-black);
     font-weight: 900;
     margin-left: var(--dim-8px);
     margin-right: var(--dim-8px);
 }

 .products-type-container>div>img {

     display: flex;
     width: 100%;
     height: fit-content;
     border-radius: var(--roundness);
     margin: var(--dim-16px) 0px;
     border: 1px solid var(--color-stroke);

 }

 .products-contact-support {
     color: var(--color-brand) !important;
     font-weight: 900;
     cursor: pointer;
 }

 @media (hover: hover) and (pointer: fine) {
     .products-contact-support:hover {
         text-decoration: underline;
     }


 }


 .products-feature-container {
     display: flex;
     width: 100%;
     margin-top: var(--dim-16px);
 }

 .products-feature-container>ul {
     list-style: none;
     width: 100%;
     margin-left: var(--dim-16px);
 }

 .products-feature-container>ul>li {
     list-style: none;
     display: flex;
     align-items: center;
     padding: var(--dim-8px) 0px;
     border-bottom: 1px solid var(--color-stroke);

 }

 .products-feature-container>ul>li:last-child {
     border-bottom: 0px solid var(--color-stroke);

 }

 .products-feature-container>ul>li:first-child {

     padding-top: 0px;
 }

 .products-feature-container>ul>li:last-child {

     padding-bottom: 0px;
 }

 .products-feature-container>ul>li>img {

     height: 18px;
     width: 18px;
     display: flex;
 }

 .products-feature-container>ul>li>p {

     font-size: var(--font-medium);
     display: flex;
     margin-right: var(--dim-8px);
     margin-left: var(--dim-8px);
 }

 /* PRODUCTS SECTION ENDS */
 /* ************************************************************** */
 /* ************************************************************** */
 /* ************************************************************** */
 /* ORDER  SECTION STARTS */
 .order-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-brand);
 }

 .order-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;
     position: relative;
 }

 .order-title {
     display: flex;
     font-size: var(--font-large-extra);
     display: flex;
     margin-bottom: var(--dim-8px);
     color: var(--color-white);

 }

 .order-title>strong {
     text-align: center;
     color: var(--color-white);
     font-size: var(--font-large-extra);
     margin-bottom: var(--dim-16px);
     color: var(--color-white);
     font-weight: 900;


 }

 .order-subtitle {
     font-size: var(--font-medium);
     color: var(--color-white);

     margin-bottom: var(--dim-32px);
     width: 60%;
 }

 .order-now {
     background-color: var(--color-white) !important;
     color: var(--color-black);
     border: none;
     padding: var(--dim-16px) !important;

 }

 .order-now>img {
     filter: invert(0);
     display: flex !important;
 }

 .order-img-container {
     display: flex;
     position: absolute;
     top: 25%;
     right: 0%;
     height: 200px;
     width: 350px;
     box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;


 }

 .order-img-container>img {
     object-fit: cover;
     width: 100%;
     height: 100%;
     border-radius: var(--roundness);
 }




 /*ORDER  SECTION ENDS */
 /* ************************************************************** */
 /* ************************************************************** */
 /* ************************************************************** */
 /* FAQ SECTION STARTS */
 .faqs-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-white)
 }

 .faqs-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;
 }

 .faqs-title {
     color: var(--color-black);
     font-size: var(--font-large-extra);
     margin-bottom: var(--dim-8px);
     color: var(--color-black);
 }

 .faqs-subtitle {
     font-size: var(--font-medium);
     color: var(--color-black);
     width: 100%;
     margin-bottom: var(--dim-32px);

 }

 .faqs-list {
     display: flex;
     flex-direction: column;
 }

 .faqs-question-container {
     display: flex;
     flex-direction: column;
     margin-bottom: var(--dim-8px);
     background-color: var(--color-lightgray);


     border-radius: var(--roundness);
 }

 .faqs-question {
     display: flex;
     width: 100% !important;
     align-items: center;
     cursor: pointer;
     height: 50px;
     min-height: 50px;
 }

 .faqs-question-text {
     margin: 0px;
     padding: 0px;
     font-size: var(--font-medium);
     padding: 0px var(--dim-16px)
 }

 .faqs-question>img {
     display: flex;
     margin-left: auto;
     width: 15px;
     height: 15px;
     margin-right: var(--dim-16px);
 }

 .faqs-question-answer {
     overflow: hidden;
     transition: height 200ms;
     width: 100% !important;
 }

 .faqs-question-answer>p {
     margin: 0px;
     padding: 0px;
     font-size: var(--font-small);

     padding: var(--dim-16px);
     padding-top: 0px;
 }

 .faqs-close {
     height: 0px;
 }

 /* FAQ SECTION ENDS */
 /* ************************************************************** */
 /* ************************************************************** */
 /* BLOGS SECTION STARTS */


 .blogs-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: transparent
 }

 .blogs-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;
 }

 .blogs-title {
     color: var(--color-black);
     font-size: var(--font-large-extra);
     color: var(--color-black);
     margin-bottom: var(--dim-32px);
 }



 .blogs-other-section {
     margin: 0px;
     padding: 0px;
     display: flex;
     height: fit-content;
     position: relative;
     align-items: center;
     display: grid;
     gap: var(--dim-16px);
     grid-template-columns: 1fr 1fr 1fr;
 }

 .blogs-other-section>div {
     height: fit-content;
     width: 100%;
     display: flex;
     flex-direction: column;

 }

 .blogs-other-section>div>img {
     height: 200px;
     width: 100%;
     object-fit: cover;
     border-radius: var(--roundness);

 }

 .blogs-other-section>div>a {
     height: fit-content;
     margin-top: var(--dim-16px);
     font-size: var(--font-medium);
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;

 }

 .blogs-other-section>div>a:hover {
     color: var(--color-link-dark);

 }

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

     .blogs-other-section {
         grid-template-columns: 1fr 1fr;
     }
 }

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

     .blogs-other-section {
         grid-template-columns: 1fr;
     }
 }

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

     .blogs-other-section {
         grid-template-columns: 1fr;
     }
 }






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

     .blogs-container-inner {
         width: var(--global-width);
     }

     .blog-content {
         width: 100%;
     }


 }

 /* BLOGS 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: 1600px) {




     .feature-container-right {
         width: 50%;
     }

     .feature-phone {
         width: 251px;
         height: 448px;
     }

     .cover {
         width: 246px;
         height: 144px;

     }


     .create-container-right {

         position: sticky;
         top: var(--dim-32px);

     }

     .create-container-left {


         margin-right: var(--dim-16px);

     }

 }

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


     .feature-container-right {
         width: 40%;
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
         padding: 0px;
     }

     .container {
         height: fit-content;

         margin: 0px;
         margin-bottom: var(--dim-32px);

     }

     .feature-phone {
         margin-left: initial !important;
         border: 2px solid var(--color-black);
     }



 }

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


     .hero-demo-card {
         grid-template-columns: 1fr 1fr 1fr;

     }

     .products-type-container {
         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%;
     }


     .hero-profile-opener-inner-container {
         width: 96%;
     }

     .showcase-subtitle {
         width: 100%;

     }




 }

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

     .hero-title {

         width: 90%;
     }

     .hero-subtitle {
         width: 90%;

     }

     .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;
     }

     .order-subtitle {
         width: 40%;
     }

     .order-img-container {
         height: 160px;
         width: 280px;
     }

     .create-subtitle {
         display: flex;
         width: 100%;

     }





 }

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


     .feature-title br {
         display: none;
     }

     .feature-title strong:nth-child(2) {

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

     .hero-demo-card {
         grid-template-columns: 1fr 1fr;

     }

     .navbar-link-faq {
         display: none;
     }

     .navbar-link-contact {
         display: none;
     }



     .hero-profile-opener-inner-container {

         width: 92%;
         height: fit-content;
         flex-direction: column;

     }


     .hero-profile-opener-left {

         width: 100%;
     }

     .hero-profile-opener-image-container {
         flex-direction: row;
         height: fit-content;
         height: 90%;
     }


     .hero-profile-opener-right {
         display: none !important;
     }

     .hero-profile-opener-middle {
         grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
         width: 100% !important;

     }

     .hero-profile-opener-right {

         width: 100%;
     }

     .products-type-container {
         grid-template-columns: 1fr;
     }



     .products-type-container>div>p:nth-child(2) {
         height: fit-content;
     }


     .order-img-container {

         display: none;
     }

     .order-subtitle {
         width: 100%;
     }

 }


 @media only screen and (max-width: 700px) {
     .hero-title {

         width: 100%;
         text-align: start;
     }

     .hero-title>strong {
         color: var(--color-white);
         border: none;
         font-weight: 600;
     }

     .hero-title br {

         display: none;
     }

     .hero-subtitle {
         width: 100%;
         text-align: start;

     }

     .showcase-title {

         width: 100%;
         text-align: start;
     }

     .showcase-subtitle {
         width: 100%;
         text-align: start;
     }

     .showcase-trust-badges {
         grid-template-columns: repeat(2, 1fr);
         border-top: 0px;
         margin-top: var(--dim-32px);
         padding-top: 0px;
     }

     .showcase-trust-item {
         height: 120px;
         border-radius: var(--roundness);
         border: 1px solid var(--color-stroke);

     }


     .showcase-industries-row {
         display: none;
     }


     .hero-demo-btns>p {
         flex-shrink: 0;

     }

     .hero-demo-btns {
         gap: var(--dim-4px);
         width: 100%;
     }

     .hero-demo-btns>* {
         margin: 0px;

     }
 }



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

     .feature-title br {
         display: flex;
     }

     .feature-title strong:nth-child(2) {

         margin-left: 0px;
     }


     .feature-container-inner {


         flex-direction: column;
     }

     .feature-container-left {
         width: 100%;

     }


     .feature-container-right {

         width: fit-content !important;

         margin-top: var(--dim-32px);
         /* flex-direction: row; */
         align-items: initial !important;


     }

     .create-container-right {

         width: 80%;
         height: 80%;

     }


     .feature-container-right {}

     .feature-phone {
         margin-top: var(--dim-64px) !important;
     }



     /* .feature-phone {
        margin-left: auto !important;
      }

      .container {
        margin: 0px !important;
        margin-right: auto !important;
      } */

 }

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


     .navbar-item-container {

         display: flex !important;
         position: relative !important;
         left: initial;
         transform: initial !important;
         top: initial !important;
         margin-left: auto !important;
         right: var(--dim-16px) !important
     }

     .card-language-container {
         margin-left: 0px !important
     }



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

     .hero-title {

         width: 100%;
     }

     .hero-subtitle {
         width: 100%;
     }

     .hero-container-general-btn {
         padding: 0px;
         border: 0px solid transparent;
     }



     .hero-container-general-btn>img {
         display: none;
     }

     .hero-container-general-btn-active {
         color: var(--color-brand) !important;
         background-color: transparent !important;
         border: 0px solid var(--color-brand) !important;
         box-shadow: initial !important
     }

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


         .hero-container-general-btn:hover {
             background-color: initial !important;
             box-shadow: initial !important;
             transform: scale(1) !important;
             color: var(--color-brand) !important;
         }
     }


     .create-container-inner {

         flex-direction: column;
     }

     .create-container-left {


         margin-right: 0px;

     }


     .create-container-right {

         position: initial !important;
         top: 0%;
         width: fit-content;
         height: fit-content;
         margin-top: var(--dim-32px);
         width: 100% !important;
         justify-content: center !important;
         padding: var(--dim-32px) !important;
     }


     .business-inner-container {
         width: 400px !important;
     }

     .cover-container {
         width: 400px !important;

     }

     .create-section-2,
     .create-section-3 {
         width: 100%;
         flex-wrap: nowrap;
         justify-content: space-between;
         display: grid;
         grid-template-columns: 1fr 1fr;
     }

     .create-section-2 *,
     .create-section-3 * {
         width: 100% !important;
     }

     .create-section-4 {

         width: 100% !important;
     }

     .create-container-general-btn {
         width: 100%;
         justify-content: center;
     }



 }

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

     /* .feature-phone {
        width: 176px;
        height: 314px;
      }

      .cover {
        width: 172px;
        height: 101px;
        transform: scale(1.2) !important;
        border-radius: 4px !important;
      } */

 }


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



     .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;
     }

     .navbar-link-pricing {
         display: none;
     }




     .hero-profile-opener-image-container {
         flex-direction: column;
     }

     .hero-profile-opener-image-container>img {

         width: 100%;




     }
 }


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

     .hero-profile-opener-middle {
         display: none !important;
     }



 }

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


     .showcase-trust-badges {
         display: flex;
         flex-direction: column;

     }

     .showcase-trust-item {

         display: flex;
         flex-direction: row;
         height: fit-content;
         align-items: center;
         justify-content: flex-start;
         border: none;

         margin-bottom: 0px;
     }

     .showcase-trust-item:last-child {
         border-bottom: 0px;
     }

     .showcase-trust-item img {

         align-items: center;
         width: 18px;
         height: 18px;
         margin-inline-end: var(--dim-8px);
         margin-bottom: 0px;
     }

 }

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


     .hero-demo-card {
         width: 100%;
     }

     /* .feature-phone {
        width: 141px;
        height: 251px;
      }

      .cover {
        width: 138px;
        height: 81px;
      } */

     .create-section-2,
     .create-section-3 {
         grid-template-columns: 1fr;
     }

     .business-inner-container {
         width: 380px !important;
     }

     .cover-container {
         width: 380px !important;

     }


     .hero-demo-btns {
         overflow-x: auto;
         padding-bottom: var(--dim-8px);
         overflow-y: hidden;
         white-space: nowrap;
         -webkit-overflow-scrolling: touch;
     }


 }

 @media only screen and (max-width: 440px) {
     .business-inner-container {
         width: 320px !important;
     }

     .cover-container {
         width: 320px !important;

     }
 }



 @media only screen and (max-width: 400px) {
     /* .feature-title br {
        display: none;
      } */

     /* .feature-title strong:nth-child(2) {

        margin-left: var(--dim-8px);
      } */


     .hero-demo-card>img {
         width: 100%;
     }

     .hero-demo-card {
         grid-template-columns: 1fr;

     }


     .card-navbar-poweredby p {
         display: none;
     }

     .card-navbar-poweredby img {

         margin-left: 0px;
     }

     .card-navbar-logo-container {
         width: 120px;
     }

 }

 /* ************************************************************** */
 /* ************************************************************** */
 /* ************************************************************** */