ow/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/
/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/
 @import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
 @import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/
/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/
 @import url(animate.min.css);
 @import url(normalize.css);
 @import url(meanmenu.css);
 @import url(owl.carousel.min.css);
 @import url(slick.css);
 @import url(jquery-ui.css);
 @import url(nice-select.css);
/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/
 * {
     box-sizing: border-box !important;
     border: 0 solid;
}
*,*::after,*::before {
    /* --tw-translate-x:0; */
    /* --tw-translate-y:0; */
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-border-opacity: 1;
    border-color: rgba(229,231,235,var(--tw-border-opacity));
    --tw-shadow: 0 0 transparent;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59,130,246,0.5);
    --tw-ring-offset-shadow: 0 0 transparent;
    --tw-ring-shadow: 0 0 transparent;
    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
    --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
    --tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
 html {
     scroll-behavior: smooth;
}
 body {
     font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI emoji;
     line-height: 1.80857;
     overflow-x: hidden;
     background: black;
}
 a {
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}
 h1, h2, h3, h4, h5, h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     margin: 0 
}
 h1 {
     font-size: 24px 
}
 h2 {
     font-size: 22px 
}
 h3 {
     font-size: 18px 
}
 h4 {
     font-size: 16px 
}
 h5 {
     font-size: 14px 
}
 h6 {
     font-size: 13px 
}
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     opacity: 1 
}
 button:focus {
     outline: none;
}
 ul, li, ol {
     margin: 0px;
     padding: 0px;
     list-style: none;
}
 a {
     outline: none !important;
}
 a, .btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}
 :focus {
     outline: 0;
}
 .btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}
 .lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}
 .form-control:focus {
     border-color: #ffffff !important;
     box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}
 .navbar-form input {
     border: none !important;
}
 .badge {
     font-weight: 500;
}
 .full {
     float: left;
     width: 100%;
}
 .margin_top_30 {
     margin-top: 30px !important;
}
 .full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}
/**-- list icon --**/
 .ul_list_info_icon ul {
     list-style: none;
}
 .ul_list_info_icon ul li {
     display: inline;
     float: left;
     width: 100%;
}
 .ul_list_info_icon ul li img {
     width: 75px;
}
/*--------------------------------------------------------------------- header area ---------------------------------------------------------------------*/
 .logo_section {
     text-align: center;
}
 .logo {
     float: left;
}
 nav.main-menu {
     float: right;
     margin-left: 0;
}
 .menu-area-main li:hover a, .menu-area-main li:focus a {
     color: #f3a72d;
}
 .menu-area-main li a {
     color: #fff;
}
 .right_cart_section {
     float: right;
     width: auto;
}
 .right_cart_section ul {
     float: left;
     min-height: auto;
     margin: 0;
     padding: 12px 0 0;
}
 .right_cart_section .cart_icons {
     padding: 18px 0 0;
}
 .main-menu ul>li nth:child(5) a {
     padding-right: 0px;
}
 .right_cart_section ul li {
     float: left;
     font-size: 17px;
     font-weight: 400;
     color: #fff;
     margin-right: 30px;
}
 .right_cart_section ul.cart_update li {
     font-size: 13px;
     color: #ccc;
     line-height: normal;
     margin: 0;
     font-weight: 300;
}
 .right_cart_section ul.cart_update li span {
     font-size: 18px;
     font-weight: 300;
     color: #fff;
     line-height: 21px;
}
 .right_cart_section ul li i {
     margin-right: 10px;
     margin-top: 5px;
     float: left;
     color: #fff;
     font-size: 21px;
}
 .right_cart_section ul li a {
     color: #fff;
}
/*-- end header middle --*/
 .top-bar-info {
     background: #111111;
     padding: 5px 0px;
}
 .top-menu-left {
     float: left;
}
 .top-menu-left li {
     position: relative;
     display: inline-block;
     margin-right: 11px;
     padding-right: 12px;
}
 .top-menu-left li::before {
     content: '';
     position: absolute;
     right: 0;
     top: 9px;
     height: 10px;
     border-right: 1px dotted #999;
}
 .top-menu-left li:last-child::before {
     display: none;
}
 .top-menu-left li:last-child {
     padding: 0px;
     margin: 0px;
}
 .top-menu-left li a {
     color: #ffffff;
     font-size: 12px;
     text-transform: uppercase;
     text-decoration: none;
}
 .top-menu-left li a:hover {
     color: #38c8a8;
}
 .right-dropdown-language {
     float: right;
     margin-left: 12px;
}
 .dropdown-bar .dropdown-link {
     position: absolute;
     z-index: 1009;
     top: 40px;
     left: 0;
     right: auto;
     min-width: 50px;
     padding: 15px;
     background: #ffffff;
     list-style: none;
     border: 2px solid #38c8a8;
     opacity: 0;
     visibility: hidden;
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     -webkit-transition: opacity 0.2s ease 0s, visibility 0.2s linear 0s;
     -o-transition: opacity 0.2s ease 0s, visibility 0.2s linear 0s;
     transition: opacity 0.2s ease 0s, visibility 0.2s linear 0s;
     text-align: left;
}
 .dropdown-bar:hover .dropdown-link {
     opacity: 1;
     visibility: visible;
     top: 25px;
}
 .dropdown-bar.right-dropdown-language>a::after {
     font-family: 'FontAwesome';
     content: "\f107";
     text-decoration: none;
     padding-left: 4px;
     color: #ffffff;
}
 .right-dropdown-language>a {
     line-height: 10px;
     padding: 5px 5px;
     cursor: pointer;
}
 .dropdown-bar .dropdown-link li a {
     color: #111111;
     display: block;
     font-size: 12px;
     line-height: 15px;
     padding: 5px 0;
}
 .dropdown-bar .dropdown-link li a:hover {
     color: #38c8a8;
}
 .dropdown-bar .dropdown-link li a img {
     margin-right: 7px;
}
 .dropdown-bar .dropdown-link li.active {
     font-weight: bold;
}
 .right-dropdown-language .dropdown-link {
     min-width: 100px;
     padding: 7px 10px;
     color: #111111;
}
 .dropdown-bar {
     position: relative;
     padding: 0 5px;
     font-size: 13px;
}
 .dropdown-bar .dropdown-link.right-sd {
     left: auto;
     right: 0;
}
 .right-dropdown-currency {
     float: right;
     margin-left: 12px;
}
 .dropdown-bar.right-dropdown-currency>a::after {
     font-family: 'FontAwesome';
     content: "\f107";
     text-decoration: none;
     padding-left: 4px;
     color: #ffffff;
}
 .right-dropdown-currency>a {
     line-height: 10px;
     padding: 5px 5px;
     cursor: pointer;
     color: #ffffff;
}
 .right-dropdown-currency .dropdown-link {
     min-width: 100px;
     padding: 7px 10px;
     color: #111111;
}
 .right-dropdown-currency .dropdown-link {
     min-width: 55px;
     padding: 7px 10px;
}
 .right-dropdown-currency .dropdown-link li a span.symbol {
     margin-right: 7px;
}
 .modal-title {
     padding: 0px;
     color: #ffffff;
     font-size: 18px;
     text-transform: uppercase;
}
 .btn-template-outlined {
     background: #111111;
     color: #ffffff;
     border: none;
     border-radius: 0px;
}
 .btn-template-outlined i {
     padding-right: 10px;
}
 .text-muted {
     padding: 10px 0px;
}
 .slogan-line {
     float: right;
     color: #ffffff;
     font-size: 13px;
}
 .middle-area {
     padding: 30px 0px;
}
 .main-menu {
     text-align: center;
}
 .main-menu ul {
     margin: 0;
     list-style-type: none;
     margin-top: 12px;
}
 .main-menu ul>li {
     display: inline-block;
     position: relative;
}
 .main-menu ul>li a {
     padding: 7px 10px 7px 10px;
     line-height: 20px;
     font-size: 16px;
     display: block;
     font-weight: 500;
     margin: 0px 15px;
}
 .main-menu ul li:last-child a {
     padding-right: 0;
}
 .sub-down li {
     background: #ffffff;
}
 .main-menu ul>li .sub-down li a {
     color: #114c7d;
     font-size: 15px;
     text-transform: capitalize;
     font-weight: 300;
     padding: 12px 5px;
     position: relative;
     border-bottom: solid #eee 1px;
}
 .main-menu ul>li .sub-down li a:hover {
     color: #111111;
}
 .main-menu ul li:first-child {
     margin-left: 0;
}
 .main-menu ul>li>ul {
     opacity: 0;
     position: absolute;
     text-align: left;
     top: 100%;
     -webkit-transform: scaleY(0);
     transform: scaleY(0);
     -webkit-transform-origin: 0 0 0;
     transform-origin: 0 0 0;
     -webkit-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
     visibility: hidden;
     width: 240px;
     z-index: 999;
     background: #fff;
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
     box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
 .main-menu>ul>li:hover>ul {
     -webkit-transform: scaleY(1);
     transform: scaleY(1);
     visibility: visible;
     opacity: 1;
}
 .main-menu ul>li>ul>li {
     margin: 0px;
     position: relative;
     display: block;
}
 .main-menu ul>li>ul>li:hover>ul {
     -webkit-transform: scaleY(1);
     transform: scaleY(1);
     visibility: visible;
     opacity: 1;
     left: 100%;
     top: 10px;
}
 .main-menu ul>li>ul>li>a {
     background: none !important;
}
 .mean-container .mean-nav {
     margin-top: 0px;
     position: absolute;
     top: 100%;
}
 .main-menu ul>li {
     position: inherit;
     display: inline-block;
     vertical-align: middle;
}
 .main-menu ul>li:nth-child (6) {
     padding-right: 0px;
}
 .nav>li {
     position: inherit;
     display: inline-block;
     vertical-align: middle;
}
 .megamenu .sub-down {
     max-width: 1140px;
     width: 100%;
     left: 0;
     margin: 0 auto;
     right: 0;
     padding: 15px 0px;
}
 .simple-down {
     padding: 15px;
}
 .megamenu-categories {
     padding: 10px 0px;
}
 .sub-full.megamenu-categories li {
     display: block;
}
 .megamenu .sub-full.megamenu-categories ol li a {
     padding: 5px 0px;
     font-size: 15px !important;
     font-weight: 500;
}
 .sub-full.megamenu-categories ol li .category-title {
     padding: 15px 0px;
     font-size: 16px;
     font-weight: 600;
     text-transform: uppercase;
}
 .sub-full.megamenu-categories ol li .category-box a {
     padding: 5px 0px;
}
 .menu-add {
     padding: 30px 15px;
}
 .menu-add img {
     width: 100%;
}
 .banner-up-text {
     position: absolute;
     bottom: 10px;
     left: 0px;
     right: 0px;
     text-align: center;
}
 .text-a {
     color: #fff;
     text-transform: uppercase;
     font-size: 40px;
     line-height: 40px;
     font-weight: 700;
}
 .text-b {
     color: #fff;
     font-size: 28px;
     text-transform: uppercase;
     line-height: 30px;
     padding: 20px 0px;
}
 .text-c {
     color: #ffffff;
     font-size: 31px;
     font-weight: 300;
     text-transform: uppercase;
     line-height: 30px;
     padding-bottom: 20px;
}
 .sticky-wrapper .sticky-wrapper-header {
     z-index: 20 !important;
     background: #ffffff;
}
 .is-sticky .sticky-wrapper-header .middle-area {
     padding: 10px 0px 
}
 .sticky-wrapper:not(.is-sticky) {
     height: auto !important;
}
 .hover-btn {
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     position: relative;
     background: #111111;
     -webkit-transition-property: color;
     transition-property: color;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
}
 .hover-btn::before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: #38c8a8;
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
     -webkit-transform-origin: 50%;
     transform-origin: 50%;
     -webkit-transition-property: transform;
     transition-property: transform;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-timing-function: ease-out;
     transition-timing-function: ease-out;
     display: block !important;
}
 .hover-btn:hover::before, .hover-btn:focus::before, .hover-btn:active::before {
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
}
 .hover-btn:hover, .hover-btn:focus, .hover-btn:active {
     color: white;
     box-shadow: none;
}
 .btn-secondary.focus, .btn-secondary:focus {
     box-shadow: none;
}
 .img-responsive {
     max-width: 100%;
}
 .padding_right_15_inner {
     padding-right: 15px;
}
 .padding_left_15_inner {
     padding-left: 15px;
}
 .dark_bg {
     background: #114c7d;
}
/*--------------------------------------------------------------------- layout new css ---------------------------------------------------------------------*/
 .header {
     background: #070100;
     padding: 10px 0px;
}
 .logo a {
     font-size: 40px;
     font-weight: bold;
     text-transform: uppercase;
     color: #fff;
     line-height: 40px;
}
 .relative {
     position: absolute;
     top: 35%;
     transform: translateY(-50%);
     text-align: center;
     right: 0;
     left: 0;
}
 .Perfect {
    font-weight: 800;
    border-radius: 6px;
    padding: 0px 20px;
    letter-spacing: -.025em;
    font-size: 3.75rem;
    line-height: 1.25;
    color: transparent;
    background-clip: text;
    --tw-gradient-to: #f8ba53;
    --tw-gradient-from: #d97706;
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-stops: var(--tw-gradient-to), var(--tw-gradient-from), rgba(255, 255, 255, 0.7);
    display: block;
    font-family: font-family: Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}
.Solution {
    font-weight: bold;
    border-radius: 6px;
    padding: 0px 20px;
    font-size: 55px;
    line-height: 1.25;
    color: white;
    display: block;
    background-clip: text;
}
.description {
    color: rgb(175, 174, 174);
    text-align: center;
    margin: auto;
    max-width: 36rem;
    font-size: 18px;
    padding-top: 40px;
    padding-bottom: 25px;
}
.top-content {
    display: flex;
    flex-direction: column;
    margin-left:auto;
    margin-right: auto;
    top: 35%;
    text-align: center;
    max-width: 86rem;
}
.screenshot1 {
    margin: auto;
    display: block;
    padding-bottom: 3rem;
}
.screenshot1 img {
    border-radius: 6px;
    max-width: 85%;
}
.middle-content {
    display: block;
    margin: auto;
    position: relative;
    width: 100%;
    padding-top: 4rem;
    padding-bottom: 8rem;
    overflow:hidden;
}
.middle-row {
    padding-left:2rem;
    padding-right:2rem;
    display:grid;
    grid-gap:6rem;
    gap:6rem;
    grid-template-columns:repeat(auto-fit,minmax(325px,1fr));
    align-items: flex-start;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    max-width: 86rem;
    margin-left:auto;
    margin-right:auto;
}
.middle-left {
    display:block;
}
.middle-right {
    display: block;
}
.screenshot2 {
    padding-left: 0;
    padding-right: 0;
    height: 100%;
    margin: 0;
    position: relative;
}
.screenshot2 img {
    width: 125%;
    height: 100%;
    left: 0;
    border-radius: 6px;
}
.expanded {
    color: rgb(255 236 217);
    padding: 2px;
}
.middle-perfect {
    font-weight: 800;
    border-radius: 6px;
    padding-bottom: 8px;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -.025em;
    color: transparent;
    background-clip: text;
    --tw-gradient-to: #f8ba53;
    --tw-gradient-from: #d97706;
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-stops: var(--tw-gradient-to), var(--tw-gradient-from), rgba(255, 255, 255, 0.7);
    display: block;
}
.bottom-content {
    --tw-gradient-to: #dd8f0c;
    --tw-gradient-from: #d97706;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to), #996207;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bottom-box {
    padding-top: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 80rem;
    padding-bottom: 4rem;
    margin-left: auto;
    margin-right: auto;
}
.bottom-title {
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity));
    letter-spacing: -.025em;
    font-weight: 800;
    font-size: 1.875rem;
    line-height: 2.25rem;
    margin: 0;
}
.bottom-grid {
    tab-size: 4;
    font-family: inherit;
    line-height: inherit;
    box-sizing: border-box;
    color: white;
    border: 0 solid;
    display: grid;
    margin-top: 4rem;
    grid-template-columns: repeat(auto-fit, minmax(325px,1fr));
    grid-column-gap: 2rem;
    column-gap: 2rem;
    grid-row-gap: 4rem;
    row-gap: 4rem;
}
.grid-icons {
    background-color: rgb(255 187 59 / 54%);
    border-radius: 6px;
    padding: 6px;
    font-size: 25px;
}
.grid-headings {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.grid-info {
    font-size: 1rem;
    color: #dfdfdf;
    line-height: 1.5rem;
    margin-top: .5rem;
}
.faq-content {
  background-color: black;
}
.faq-box {
    padding-top: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 4rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem;
}
.faq-title {
    --tw-text-opacity: 1;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgba(255,255,255,var(--tw-text-opacity));
    letter-spacing: -.025em;
    font-weight: 800;
    font-size: 1.68rem;
    text-decoration: underline;
    line-height: 2.25rem;
    margin: auto;
}
.faq-grid {
    tab-size: 4;
    font-family: inherit;
    line-height: inherit;
    box-sizing: border-box;
    color: white;
    border: 0 solid;
    display: grid;
    margin-top: 4rem;
    grid-template-columns: repeat(auto-fit, minmax(325px,1fr));
    grid-column-gap: 2rem;
    column-gap: 2rem;
    grid-row-gap: 4rem;
    row-gap: 4rem;
}
.faq-grid-headings {
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.75rem;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.faq-grid-info {
    font-size: 1rem;
    color: #bebebe;
    line-height: 1.5rem;
    margin-top: .5rem;
}
  .solution-content {
    background-color: black;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem;
    display: block;
  }
  .solution-box {
    grid-gap: 1rem;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit,minmax(325px,1fr));
    display: grid;
    --tw-gradient-to: #dd8f0c;
    --tw-gradient-from: #d97706;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to), #996207;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    border-radius: 6px;
    overflow: hidden;
  }
  .solution-buttons {
    color: #da7807;
    background: white;
    border-radius: 6px;
    font-weight:500;
    margin-right: .5rem;
    display:inline-flex;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-color: transparent;
    border-width: 1px;
    align-items: center;
  }
  .solution-buttons:hover {
    color: black;
  }
  .solution-left {
    padding: 5rem;
  }
  .solution-screenshot-box {
    box-sizing: border-box;
    border: 0 solid;
    margin-top: -1.5rem;
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    align-self: flex-end;
    --tw-aspect-w: 2;
    --tw-aspect-h: 1;
  }
  .solution-screenshot-box img {
    position: absolute;
    height: 98%;
    width: 98%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-position: left top;
    object-fit: cover;
    border-radius: 6px;
    --tw-aspect-h: 1;
    --tw-aspect-w: 2;
    box-sizing: border-box;
    border: 0 solid;
    
  }
.very-bottom {
    background-color: #424241;
    width: -webkit-fill-available;
    overflow: hidden;
}
.thanks {
    flex-direction: column;
    max-width: 80rem;
    display:flex;
    margin-left: auto;
    margin-right: auto;

}
.footer-box {
    width: 100%;
    color: white;
    font-size: .875rem;
    line-height: 1.25rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    justify-content: space-around;
    align-items: center;
    display:flex;
    margin-left: auto;
    margin-right: auto;
    list-style: none;

}
.space-x-2>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.5rem * var(--tw-space-x-reverse));
    margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
}
.space-x-6>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))
}
.footer-left {
    align-items: center;
    display: flex;
    font-size: .875rem;
    line-height: 1.25rem;
    list-style: none;
}
.footer-right {
    align-items: center;
    display: flex;
    font-size: .875rem;
    line-height: 1.25rem;
    list-style-type: none;
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.25rem;
    color: inherit;
}
.footer-right a {
    color: white;
}
.footer-right a:hover {
    color: #da7807;
}
.banner-main img {
    background-position: 50%;
    background-size: cover;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
    width: 0;
    height: 0;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}
.banner-gradient {
    background-image: linear-gradient(180deg, rgba(7, 10, 15, 0.5) 0%, rgb(0, 0, 0) 100%);   
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}