@import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap");

@font-face {
    font-family: Product-Sans;
    src: url(../fonts/ProductSansBold.ttf);
    src: url(../fonts/ProductSansRegular.ttf);
}

:root {
    --blue-color: #0E1545;
    --orange-color: #e35016;
    --light-color: #9c9c9c;
    --light-blue-color: #e6f7f9;
    --grediant-color: linear-gradient(
        120deg,
        rgba(255, 255, 255, 1) 50%,
        rgba(0, 185, 232, 0.1) 69%,
        rgba(119, 0, 214, 0.2) 92%
    );
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: "Product-Sans";
    background: rgb(255, 255, 255);
}

*:focus {
    outline: 0px solid var(--blue-color);
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

p {
    color: var(--light-color);
    font-family: "Inter", sans-serif;
}

ul {
    list-style: none;
}

li {
    /* text-align: center; */
    padding-right: 2.5rem;
}

section {
    border: none !important;
    margin: 3.5rem 0 !important;
    /* margin: 5rem 0 !important; */
}

/* Navbar */
.web-navbar {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

.nav-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul {
    padding: 0;
}

li {
    margin: 0;
}

.dropdown-menu {
    left: -120px !important;
    border: none;
    width: 800px;
    padding: 0 24px;
}

.dropdown-item {
    padding: 16px;
    border-radius: 12px;
    text-align: left;
    font-size: 1.2rem !important;
}

.dropdown-item:active {
    background-color: #f9f9f9;
}

.dropdown-item:hover {
    color: var(--orange-color);
}

.dropdown-item p,
.dropdown-item p:hover {
    color: #c2c2c2;
}

.language-dropdown svg {
    /* padding-inline-start: 10px; */
    color: var(--light-color) !important;
}
.language {
    /* background-color: #fff; */
    margin-inline-end: 1rem !important;
    /* background-color: #fff !important; */
    color: var(--light-color) !important;
    border: none;
}
.active-language {
    display: none;
}

/* Go-live */

.title-go {
    background: linear-gradient(
        120deg,
        rgb(0, 204, 255) 0%,
        rgba(60, 74, 241, 1) 50%,
        rgba(119, 0, 214, 1) 100%);
    /* -webkit-background-clip: text; */
    background-clip: text;
    color: transparent;
}

/* Hero */
.hero {
    margin-top: 2rem;
    background: var(--grediant-color);
    /* height: 100vh; */
    /* overflow: hidden; */
}

.img-man {
    width: 700px;
    object-fit: contain;
}

.hero-logo img {
    top: -12px;
}

.herocard {
    top: 60%;
    left: 50px;
}

/* Logos */

section .logos-content img {
    background-size: contain;
    max-height: 80%;
}

/* Tabs */
.tabs {
    height: 500px;
}

.tabs-heading {
    color: var(--blue-color);
}
.tab-item {
    text-align: center !important;
}
.tab-line,
.line-active {
    background: #c3c3c3;
    width: 100%;
    height: 4px;
    border-radius: 50px;
}

.tab-active {
    color: var(--blue-color);
}

.tab-inactive {
    color: var(--light-color);
}

.line-active {
    height: 4px;
    border-radius: 50px;
    display: block;
    width: 100%;
    background: var(--blue-color);
}

.line-inactive {
    height: 4px;
    border-radius: 50px;
    display: block;
    width: 100%;
    background: white;
}

.content-para {
    height: 100px;
}

.para-active {
    display: block;
}

.para-inactive {
    display: none;
}

.body-img2 {
    right: 5px;
    bottom: -100px;
}

.body-img1 {
    right: 165px;
    top: -22px;
}

.body-card {
    top: 90px;
    right: 1px;
}

/* Feature */
.features {
    height: 550px;
}

/* Store */
.store {
    background: #1f2636;
    color: white;
}

/* API */

.api {
    background: var(--light-blue-color);
}

.api-img {
    width: 100%;
    height: 90%;
    top: 12%;
    left: 35%;
}

/* MMS Page */

/* Craete Section */
/* Analyze & Manage */
.checkout-hero,
.mms-hero {
    height: 90vh;
}
.checkout-hero h1{
    color: var(--blue-color);
}
.checkout-hero .btn-customize {
    background-color: var(--blue-color)!important;
}
.invoice-hero,
.subscription-hero,
.contact-sales {
    height: 80vh;
}

.mms-img {
    width: 850px;
    position: relative;
    top: 0;
    left: -10px;
}

.create-body {
    background: #f9f9f9;
    border-radius: 20px;
    box-shadow: 0px 0px 8px rgb(0, 0, 0, 0.2);
}

.create-container {
    padding: 0 !important;
}

.create-header,

.trusted-content h1 {
    color: var(--blue-color);
}
.organize-header{
    color: #fff;
}
.manage-body,
.analyse-body,
.monitor-body,
.elevate-body {
    /* height: 550px; */
    width: 50%;
    padding: 0;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 8px rgb(0, 0, 0, 0.2);

}

.analyse-header,
.build-store,
.step-header,
.aman {
    color: var(--blue-color);
}

/* Secure section */

.secure,
.monitor-body,
.bg-gradiant {
    background: linear-gradient(
        45deg,
        rgba(0, 185, 232, 0.1) 50%,
        rgba(255, 255, 255, .1) 69%,
        rgba(0, 8, 122, 0.2) 92%
    );
}

.secure-sub {
    color: var(--orange-color);
}

/* Transaction section */

.trans-list-para {
    color: #000;
    text-align: left !important;
}
.api-img-transaction {
    width: 100%;
    height: 90%;
    top: 12%;
    left: 35%;
}
/* Dashboard Element */

.element {
    background-color: #1f2636;
    background-image: url("/assets/home/element-img.svg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    height: 550px;
    background-position: center;
}

.element-img {
    top: -50px;
    left: 50px;
}

/* Online store Page */

/* Hero Section */

.store-hero {
    background-color: var(--light-blue-color);
    height: 80vh;
}
.store-heading{
    color: var(--blue-color);
}
.storeonline-content {
    margin-top: 1rem;
}
.store-bg {
    max-width: 600px;
    object-fit: contain;
    max-height: 400px;
}
.mms-bg {
    max-width: 600px;
    object-fit: contain;
}

/* Build store Section */
.build-card {
    bottom: -10%;
    left: -10%;
}

/* Organize section */
.organize {
    background: linear-gradient(90deg, #1f2636, #36415a);
    height: 400px;
}

.organize-para,
.elevate-header,
.elevate-para,
.scroll-para {
    color: #fff !important;
}

.organize-img {
    top: 5%;
    left: -6%;
}

.monitor-header {
    color: #0E1545;
}

.elevate-body {
    background-color: rgba(0, 8, 122, 0.2) !important;
    color: #fff;
}

/* Sales section */

.sales-sub
 {
    color: var(--blue-color);
}
.scroll-header{
    color: #fff;
}
/* Key Features Section  */
.key {
    background: #f9f9f9;
}

.key-feature div {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.key-feature h4{
    color: var(--blue-color);
}


.key-body h1,
.protect h1,
.invoicefeat-body h1 {
    color: var(--blue-color);
}

/* Invoicing Page */
/* Hero-section */
.hero-invoice,
.subscription-hero {
    margin-top: 2rem;
}
.invoice-heading{
    color: var(--blue-color);
}
.img-girl {
    width: 500px;
    object-fit: contain;
    object-position: center;
}

.invoicecard1 {
    top: 20%;
    left: 2px;
}

.invoicecard2 {
    top: 70%;
    right: 50px;
}

/* Protect Section */
.protect-body,
.path-body {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 8px rgb(0, 0, 0, 0.2);
}
.path-imgcontainer {
    max-width: 450px;
}
.protect-imgcontainer {
    max-width: 500px;
    max-height: 450px;
}

.protect-img {
    border-radius: 0 20px 0 20px;
    top: 50px;
    right: 60px;
}

/* Scroll Section */
.scroll {
    background: #1f2636 !important;
    color: #fff !important;
}

.scrollItems {
    height: 550px;
    overflow-y: auto;
}

.scrollItems::-webkit-scrollbar {
    width: 5px;
}

.scrollItems::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

.scrollItems::-webkit-scrollbar-thumb {
    background: var(--blue-color);
    border-radius: 10px;
}

.scrollImg img {
    height: 400px;
    width: 400px;
    object-fit: contain;
    /* background-color: transparent; */
}

/* Invoicing Features Section */
.invoice-feature h1,
.invoice-feature p,
.step-para {
    color: #1f2636;
}

.invoice-feature > p {
    height: 100px;
}

.invoice-feature {
    padding: 1rem;
    border-radius: 20px;
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.1);
}

.invoice-feature {
    background-color: #f7f7f7;
}

.support {
    background-color: #f4e8d5;
}

.report {
    background-color: #d7eff1;
}

.track {
    background-color: #fdeeee;
}

.managment {
    background-color: #fde0d2;
}

.data {
    background-color: #ebf5f2;
}

/* Invoice Types */
.invoice-hero,
.subscription-hero,
.scan-content {
    background: #f9f9f9;
}

.switch-contents {
    text-align: center;
    background-color: #f9f9f9;
    color: #787878;
    border-radius: 20px;
}

label {
    margin: 0 !important;
    padding: 1rem 2rem;
    cursor: pointer;
}

input[name="layout"] {
    display: none;
}



input:checked + label {
    padding: 1rem 2rem;
    border-radius: 20px;
    background: var(--blue-color);
    color: #fff;
    cursor: default;
}

.ques-invoice {
    font-weight: bold;
    color: #1f2636;
}

.container-types,
.linksm {
    background: #1f2636;
    padding: 2rem;
    border-radius: 20px;
    color: #fff !important;
}

.types-heading p {
    color: #fff;
}

.types-heading svg {
    width: 16px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 0.4rem;
    border-radius: 50%;
}

.single-container img {
    border-radius: 20px;
}

.type-active {
    display: block;
}

.type-inactive {
    display: none !important;
}

.single-container img {
    width: fit-content;
    object-fit: contain;
}

/* Subscripition Page */
/* Hero Section */
.netflix {
    top: -11rem;
}

.anghami {
    top: 11rem;
}

/* Path section */
.path-body {
        background: linear-gradient(
            45deg,
            rgba(0, 185, 232, 0.1) 50%,
            rgba(255, 255, 255, .1) 69%,
            rgba(0, 8, 122, 0.2) 92%
    );
}

/* Subscribtion Element */

.subscribe-element {
    background-color: #1f2636;
    background-image: url("/assets/home/subscribe-element.svg");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: cover;
    height: 450px;
}

.element-img {
    top: -50px;
    left: 50px;
}

/* Payment Links Page */
/* Links Section */

.link-content {
    background-image: url("/assets/home/link-img.png");
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
}

.overlay {
    border-radius: 20px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(32, 39, 55, 0.5);
}

.link p,
.link h2 {
    color: #fff;
}

.link svg {
    width: 40px;
    height: 40px;
}



/* Links Elment */
.element-links {
    background-color: #1f2636;
    background-image: url("/assets/home/link-element.svg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
}

.step-heading h1{
    color: var(--blue-color);
}
/* Scan Section */
.scan-content {
    height: 450px;
}

.scan svg {
    padding: 1rem;
    width: 35px;
    height: 35px;
    color: #fff;
    background: #96dbe3;
    border-radius: 10px;
}

/* Checkout Page */
/* Hero Section */
.img-checkout,
.img-payout {
    width: 450px;
    object-fit: contain;
}
.img-checkout img,
.img-payout img {
    border-radius: 20px;
}
.checkoutcard {
    bottom: 0;
    left: 80px;
}
.checkoutcard img {
    width: 200px;
}

/* Boost Section */
.boost-img {
    width: 450px;
}
.boost-card {
    bottom: 65%;
    left: 35%;
}

/* Checkout Features */
.checkout-features-img {
    max-width: 500px;
    object-fit: contain;
}
.checkout-features-img img {
    border-radius: 20px;
}
.checkout-feature-body {
    background: var(--light-blue-color);
    border-radius: 20px;
}
.security-content h1,
.speed-content h1,
.security-content p,
.speed-content p {
    color: #fff;
}

.security-content svg,
.speed-content svg {
    color: #fff !important;
    width: 24px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 0.6rem;
    border-radius: 50%;
}
.speed-body,
.security-body {
    color: #fff;
    max-height: 450px;
    width: 50%;
    padding: 0;
    border-radius: 20px;
    box-shadow: 0px 0px 8px rgb(0, 0, 0, 0.2);
}
.security-body {
    background: var(--orange-color);
}
.speed-body {
    background: #1f2636;
}

/* PCI Section */

.square {
    width: 250px;
    height: 250px;
    border: 2px dashed var(--orange-color);
    border-spacing: 6px;
    border-radius: 20px;
    /* Add space between lines */
    padding: 10px; /* Adjust the padding as needed */
}
.square .shield {
    color: var(--orange-color);
    width: 40px;
    height: 40px;
    background-color: #fff;
    top: -10px;
    left: -30px;
    box-shadow: 0px 0px 8px rgb(0, 0, 0, 0.2);
    border-radius: 50%;
    padding: 16px;
}
.square .confirm {
    color: var(--orange-color);
    background-color: #fff;
    width: 40px;
    height: 40px;
    padding: 16px;
    bottom: -10px;
    right: -30px;
    box-shadow: 0px 0px 8px rgb(0, 0, 0, 0.2);
    border-radius: 50%;
}
.pci {
    padding: 32px;
    width: 75px;
    height: 75px;
    background-color: #fff;
    box-shadow: 0px 0px 8px rgb(0, 0, 0, 0.2);
    border-radius: 50%;
    top: -10px;
    right: -30px;
}
.pci img {
    width: 50px;
    height: 50px;
}
.aman-pci {
    background-color: #fff;
    width: 75px;
    padding: 16px;
    bottom: -10px;
    left: -27px;
}

/* Customize Checkout */
.customize-imgcontainer {
    width: 450px;
    object-fit: contain;
}

.customize-imgcontainer img {
    width: 100%;
}

/* Payouts Page */
.onlinepay-imgcontainer {
    max-width: 600px;
    object-fit: contain;
}
.onlinepay-content h1{
    color: var(--blue-color);
}
.payout-feature-img {
    height: 200px;
}
.payout-logo {
    mix-blend-mode: overlay;
    bottom: 20px;
    right: 30px;
}
.payout-logo img {
    width: 150px;
}
.invoice-features h4{
    color: var(--blue-color);
}
.trusted-imgcontainer {
    max-width: 550px;
    object-fit: contain;
}
/* .feature-header {
    color: #9c9c9c;
} */

/* Contact Sales Page */
.contact-container {
    z-index: 1;
}
.contact-sales {
    height: fit-content;
}
.form-label {
    padding: 0.5rem 0 !important;
}
.form-contact input,
.form-contact textarea {
    background-color: #fff;
    border: 1px solid #d8d6de;
    color: #1f2636;
}
.form-contact {
    padding: 2rem;
    box-shadow: 0px 0px 8px rgb(0, 0, 0, 0.2);
}
.form-contact button {
    width: inherit;
}
.form-contact input::placeholder,
.form-contact textarea::placeholder {
    color: #d8d6de;
}
.contact-img {
    max-width: 500px;
    object-fit: contain;
}

/* Pricing Page */
.pricing {
    height: auto;
}

.pricing-card {
    margin-inline-end: 10px;
    min-height: 250px;
    padding: 16px;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0px 0px 8px rgb(0, 0, 0, 0.2);
    border-radius: 10px;
}

.price {
    color: var(--orange-color);
}

/* Buttons and Links */

.btn-customize {
    color: #fff;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    padding: 10px 2rem;
}

.btn-customize-primary {
    background: var(--blue-color);
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.btn-customize-orange {
    background: var(--blue-color);
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.dark {
    background-color: #1f2636;
}

.btn-lined-primary {
    border: solid 1px var(--blue-color);
    background: transparent;
    color: var(--blue-color);
}

.btn-lined-orange {
    border: solid 1px var(--blue-color);
    background: transparent;
    color: var(--blue-color);
}

.btn-lined-white {
    border: solid 1px #fff;
    background: transparent;
    color: #fff;
}

.btn-customize-primary:hover,
.btn-customize-orange:hover {
    opacity: 80%;
}

.btn-link-custom {
    transition: color 150ms ease-in-out;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #0E1545;
}

.btn-link-custom-white {
    transition: color 150ms ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
}

.arrow-svg {
    transition: transform 150ms ease-in-out, fill 150ms ease-in-out;
}

.btn-link-custom-white:hover {
    /* color: var(--blue-color); */
}

.btn-link-custom-white:hover .arrow-svg {
    /* color: var(--blue-color); */
    transform: translateX(-0.33333rem);
}

/* Hovers */

.item-hover:hover {
    /* color: var(--blue-color); */
}

.item-hover-primary:hover {
    /* color: var(--blue-color); */
}

.btn-link-custom:hover .arrow-svg {
    /* color: var(--orange-color); */
    transform: translateX(-0.33333rem);
}

/* Text */
.text-xxxl {
    font-weight: 600;
    font-size: 4rem;
    line-height: 1.2;
    margin: 40px 0 20px;
}

.text-xxl {
    font-weight: 600;
    font-size: 3rem;
    line-height: 1.2;
    margin: 40px 0 20px;
}

.text-xl {
    font-weight: normal;
    font-size: 2.2rem;
    line-height: 1.4;
    margin: 40px 0 20px;
}

.text-lg {
    font-weight: normal;
    font-size: 1.8rem;
    line-height: 1.4;
    margin: 30px 0 20px;
}

.text-md {
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 1.4;
    margin: 20px 0 10px;
}

.text-sm {
    font-weight: normal;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 10px 0 5px;
}

.text-center {
    text-align: center;
}

/* Responsive */

/* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .navbar-buttons a {
        font-size: 1rem;
    }
    .language-item {
        left: auto;
    }

    body {
        overflow-x: hidden;
    }
    .title-go {
        font-size: 3rem;
    }
    p {
        width: 100% !important;
        font-size: 0.8rem !important;
    }
    section,
    .subscribe-content {
        margin: 0;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    h2 {
        width: 100% !important;
        font-size: 2.2rem !important;
    }
    .hero-div {
        padding-top: 0 !important;
    }
    .hero-div h1,
    .step-heading h1,
    .contact-heading h1 {
        font-size: 3rem !important;
    }
    .hero-content,
    .contact-content {
        padding: 2rem !important;
    }
    /* .contact-content{
        margin-top: 4rem !important;
    } */
    .content-api h1,
    .secure-title,
    .invoicefeat-body h1,
    .protect-header,
    .organize-header,
    .monitor-header,
    .elevate-header,
    .key-body h1,
    .path-header,
    .build-text,
    .feature1-content h1,
    .pci-header,
    .step-heading h1,
    .checkoutfeat-body h1 {
        font-size: 2.2rem !important;
    }
    .hero-div p {
        font-size: 0.8rem !important;
    }
    .btn-customize {
        /* margin-inline-end: 1.5rem !important; */
        font-size: 0.8rem;
    }
    .btn-link-custom {
        font-size: 0.8rem;
    }
    .btn-link-custom-white {
        font-size: 0.8rem;
    }
    body {
        overflow-x: hidden !important;
    }
    .content-para {
        height: 50px;
    }
    .features {
        height: 100% !important;
    }
    .api,
    .scan-content {
        padding: 1rem !important;
    }
    .tab-link {
        font-size: 1rem !important;
    }
    .tab-img {
        display: none;
    }

    .api-sub,
    .api-head,
    .api-para,
    .store-heading,
    .store-para {
        text-align: center;
    }
    .create {
        padding: 0 !important;
    }
    .secure-heading,
    .organize,
    .elevate-content,
    .monitor-content,
    .analyse-content,
    .monitor-content {
        height: auto;
        padding: 12px !important;
    }
    .overlay {
        padding: 0.5rem !important;
    }

    .create-img,
    .analyze-img,
    .manage-img,
    .elevate-img,
    .monitor-img,
    .checkout-features-img,
    .img-checkout,
    .img-payout,
    .hero-bg {
        display: none !important;
    }
    .monitor-body,
    .analyse-body,
    .security-body {
        margin-inline-end: 0.5rem !important;
    }
    .steps {
        margin: 0;
    }
    .scrollItem {
        padding: 0 !important;
    }
    .create,
    .trans {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .store-bg,
    .mms-bg,
    .invoice-bg,
    .subscribe-bg {
        display: none !important;
    }
    .store-content p,
    .build-store p,
    .organize-para,
    .overlay h2,
    .pci-text {
        width: 100% !important;
    }
    .protect-imgcontainer,
    .path-imgconatiner {
        display: none !important;
    }

    .link h2,
    .step-header,
    .analyse-header,
    .manage-header,
    .create-header,
    .scroll-header {
        font-size: 1.8rem !important;
    }
    .checkout-features-img img {
        border-radius: 20px !important;
    }
    .pricing-plan {
        margin-top: 0 !important;
        flex-direction: column;
    }
    .pricing-card {
        margin-bottom: 10px;
        margin-inline-end: 0;
    }
}

/* // Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .language-item {
        left: auto;
    }
    section {
        margin: 2.5rem 0 !important;
    }
    .store-content p {
        width: 100% !important;
    }
    .hero-div {
        padding-bottom: 0 !important;
        flex-direction: row !important;
        height: 100% !important;
    }

    .logos {
        padding-top: 0 !important;
    }
    .checkout-content {
        margin-top: 4rem;
        padding: 0 2rem !important;
    }
    .payout-content {
        margin-bottom: 4rem !important;
        padding: 0 2rem !important;
    }

    .hero-content {
        padding: 4rem 2rem !important;
        margin-top: 4rem !important;
    }
    .mms-content {
        padding: 4rem 2rem !important;
    }
    .paylink-content {
        width: 100% !important;
        padding: 4rem 2rem !important;
        margin-top: 4rem !important;
    }
    .mms-img {
        width: 100% !important;
    }
    /* .hero-bg,
    .invoice-bg,
    .subscribe-bg {
        display: none !important;
    } */

    .hero-logo {
        max-height: 100%;
    }

    /* .text-xxxl {
        font-size: 4rem !important;
    }

    .text-xxl {
        font-size: 2.5rem !important;
    } */

    .tabs {
        height: 450px;
    }

    .tab-img {
        display: none;
    }

    .content-body {
        text-align: center;
    }

    .tab-btn {
        justify-content: center !important;
    }

    .tab-item:first-of-type {
        margin-bottom: 1rem !important;
    }

    .item {
        border: none !important;
    }

    .features {
        height: 650px;
        padding: 0 1rem !important;
    }

    .feature-header,
    .contact-heading,
    .contact-header {
        width: 100% !important;
    }

    .store-img {
        display: none !important;
    }

    .store-content {
        text-align: start !important;
    }

    .store-btn {
        justify-content: center;
    }

    .api-sub {
        font-size: 1.4rem !important;
    }

    .api-sub,
    .api-head,
    .api-para {
        text-align: center;
    }

    .api-logo,
    .api-btn {
        justify-content: center;
    }

    .create-img,
    .analyze-img,
    .manage-img {
        display: none !important;
    }
    .secure-content,
    .sales-content,
    .content-body {
        text-align: center;
    }

    .create-body,
    .secure-heading,
    .sales-heading {
        padding: 0 1rem;
    }

    .img-top,
    .img-bottom {
        display: none !important;
    }

    .link h2,
    .step-header {
        font-size: 1.8rem;
    }
    .checkout-features-img img {
        border-radius: 20px !important;
    }
}

/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .navbar-brand {
        margin-bottom: 0 !important;
    }
    .dropdown-menu {
        background: none !important;
        width: auto;
        padding: 0 8px !important;
    }
    .dropdown-menu li {
        display: flex;
        flex-direction: column;
    }
    .dropdown-item {
        opacity: 0.6;
        font-size: 1rem !important;
        padding: 4px;
    }
    .dropdown-item:hover {
        background: none !important;
    }
    .dropdown-item p {
        display: none;
    }
    .language-item {
        left: auto;
    }
    .text-xl {
        font-size: 2rem;
    }
    .text-xxl {
        font-size: 2.5rem;
    }
    .text-xxxl {
        font-size: 3rem !important;
    }

    /* .text-md {
        font-size: 0.9rem;
    } */
    .hero h1,
    .hero p,
    .mms-hero h1,
    .mms-hero p,
    .invoice-hero h1,
    .invoice-hero p,
    .subscription-hero h1,
    .subscription-hero p {
        text-align: center;
    }

    .hero-div {
        display: flex;
        flex-direction: column;
    }

    .hero-content,
    .invoice-content {
        width: 100% !important;
    }
    .form-contact {
        margin-top: 1rem !important;
    }
    .hero-btn,
    .invoice-btn,
    .subscribe-btn {
        justify-content: center !important;
        margin-top: 1.5rem !important;
    }

    .hero-logo {
        width: 20%;
    }

    .hero-bg,
    .invoice-bg,
    .subscribe-bg {
        align-items: center !important;
        overflow: hidden !important;
    }
    .store-bg img {
        width: 600px !important;
    }
    .invoice-img {
        margin-top: 6rem !important;
    }
    .hero-img {
        /* height: 100% !important; */
        margin-top: 1rem !important;
    }

    .img-man {
        height: 100% !important;
        transform: translateX(-5);
    }

    .logos-content {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .content-body {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .body-img1 {
        right: 140px;
        top: 15px;
    }

    .body-img2 {
        right: -5px;
        bottom: -130px;
    }

    .body-card {
        right: -30px;
    }

    .tab-btn {
        margin-top: 2rem !important;
    }

    .feature-header {
        font-size: 2.2rem;
        width: 100% !important;
    }

    .store-img:first-of-type {
        display: none;
    }

    .store-content {
        text-align: left !important;
    }

    .store-btn {
        justify-content: start !important;
    }

    .api-img,
    .api-img-transaction {
        display: none !important;
    }

    .api-sub,
    .api-head,
    .api-para {
        text-align: center;
    }

    .api-logo,
    .api-btn {
        justify-content: center;
    }

    .create-content p {
        width: 100% !important;
    }

    .img-top {
        flex-direction: column;
        align-items: start !important;
    }

    .img-bottom {
        display: none !important;
    }

    .secure-title,
    .secure-para,
    .sales-title,
    .sales-para {
        width: 100% !important;
    }

    .mms-bg img {
        bottom: -64px;
    }

    .store-bg {
        max-height: 300px;
    }

    .img-girl {
        width: 300px;
    }

    .invoicecard1 {
        display: none !important;
    }

    .scrollImg img {
        height: 360px;
        width: 350px;
    }

    .protect-img {
        border-radius: 20px !important;
        top: 0 !important;
        right: 0 !important;
    }

    .scroll-para {
        width: 100% !important;
    }

    .subscribe-content {
        width: 100% !important;
    }

    .netflix {
        top: -5rem;
    }

    .anghami {
        top: 18rem;
    }

    .linksm,
    .link-content,
    .analyse-body,
    .monitor-body,
    .speed-body,
    .manage-body,
    .elevate-body,
    .security-body {
        width: 100% !important;
    }
    .checkout-features-img img {
        border-radius: 20px !important;
    }
    .img-payout {
        width: 260px !important;
    }
    .customize-imgcontainer img {
        width: 50%;
    }
    .onlinepay-imgcontainer {
        max-width: inherit !important;
    }
    .customize-imgcontainer {
        width: 300px !important;
    }
    /* .contact-content {
        margin-top: 2rem !important;
    } */
}

/* // Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .language-item {
        left: auto;
    }
    .web-navbar a {
        padding: 8px !important;
    }
    .store-content {
        text-align: center;
    }

    .store-btn {
        justify-content: center;
    }

    .api-img,
    .api-img-transaction {
        width: 60%;
        height: 80%;
        top: 22%;
        left: auto;
    }

    .single-container img {
        width: 300px;
        object-fit: contain;
    }
    .checkout-features-img img {
        border-radius: 20px !important;
    }
    .checkoutcard {
        bottom: 0;
        left: -3rem;
    }
}

/* // X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
    .flag-icon {
        left: 500px;
    }
    .store-content {
        text-align: center;
    }

    .store-btn {
        justify-content: center;
    }
}