@media only screen and (max-width: 1024px)
{
    nav {
        padding: 3%;
    }

    .menuSection p {
        font-size: 11pt;
    }

    .newheadSection {
        padding: 15% 3% 10% 3%;
    }

    .newheadSection h1 {
        font-size: 35pt;
        width: 80%;
    }

    .newheadSection p {
        font-size: 15pt;
        width: 60%;
    }

    .playAppBtn img {
        width: 150px;
    }

    .crypto {
        padding: 6% 3%;
    }

    .giftcardsContainer {
        padding: 6% 3%;
    }

    .crypto h1 {
        font-size: 25pt;
        width: 85%;
        margin-left: 7.5%;
        margin-bottom: 10px;
    }

    .giftcardsContainer h3 {
        font-size: 25pt !important;
    }

    .delightDetails h3 {
        font-size: 20pt !important;
    }

    .delight {
        padding: 3% ;
        width: 100% !important;
    }

    .delightDetails p {
        font-size: 11pt;
    }

    .PaymentIcons div p {
        font-size: 11pt;
    }

    .PaymentIcons div i {
        width: 4vw;
        height: 4vw;
    }

    .doMore {
        padding: 6% 3%;
    }

    .more h1 {
        font-size: 25pt;
    }

    .nore-b {
        width: 50%;
    }

    .nore-b p {
        font-size: 11pt;
    }

    .manjorB div h3 {
        font-size: 13pt;
    }

    .manjorB div p {
        font-size: 10pt;
    }

    .manjorB div img {
        width: 40px;
    }

    .whyChoose h1 {
        font-size: 30pt;
    }

    .whyUs {
        padding: 6% 3%;
    }

    .steps h3 {
        font-size: 25pt;
    }

    .whyChoose p {
        font-size: 11pt;
    }

    .faqs, .partners {
        padding: 6% 3%;
    }

    .partnerContainer h3 {
        font-size: 25pt;
    }

    .amenities {
        padding: 4% 3% 0% 3%;
    }

    footer {
        padding: 6% 3%;
    }
}

@media only screen and (max-width: 1280px)
{
    nav {
        padding: 3%;
    }

    .left-section {
        display: none;
    }

    .right-section {
        width: 100%;
    }

    .buttonRow {
        flex-direction: row !important;
    }

    .menuSection p {
        font-size: 11pt;
    }

    .newheadSection {
        padding: 15% 3% 10% 3%;
    }

    .newheadSection h1 {
        font-size: 35pt;
        width: 80%;
    }

    .newheadSection p {
        font-size: 15pt;
        width: 60%;
    }

    .playAppBtn img {
        width: 150px;
    }

    .crypto {
        padding: 6% 3%;
    }

    .giftcardsContainer {
        padding: 6% 3%;
    }

    .crypto h1 {
        font-size: 25pt;
        width: 85%;
        margin-left: 7.5%;
        margin-bottom: 10px;
    }

    .giftcardsContainer h3 {
        font-size: 25pt !important;
    }

    .delightDetails h3 {
        font-size: 20pt !important;
    }

    .delight {
        padding: 3% ;
        width: 100% !important;
    }

    .delightDetails p {
        font-size: 11pt;
    }

    .PaymentIcons div p {
        font-size: 11pt;
    }

    .PaymentIcons div i {
        width: 4vw;
        height: 4vw;
    }

    .doMore {
        padding: 6% 3%;
    }

    .more h1 {
        font-size: 25pt;
    }

    .nore-b {
        width: 50%;
    }

    .nore-b p {
        font-size: 11pt;
    }

    .manjorB div h3 {
        font-size: 13pt;
    }

    .manjorB div p {
        font-size: 10pt;
    }

    .manjorB div img {
        width: 40px;
    }

    .whyChoose h1 {
        font-size: 30pt;
    }

    .whyUs {
        padding: 6% 3%;
    }

    .steps h3 {
        font-size: 25pt;
    }

    .whyChoose p {
        font-size: 11pt;
    }

    .faqs, .partners {
        padding: 6% 3%;
    }

    .partnerContainer h3 {
        font-size: 25pt;
    }

    .amenities {
        padding: 4% 3% 0% 3%;
    }

    footer {
        padding: 6% 3%;
    }
}

@media (max-width: 480px) {
    /* Styles for small mobile devices */
    .menuSection {
        display: none;
    }

    nav {
        padding: 0% 4%;
    }

    .header {
        padding: 35% 4% 4% 4%;
    }

    .imageSide {
        width: 100%;
        margin-top: 20px;
    }

    .imageSide img {
        align-items: center !important;
        float: none;
        width: 100%;
    }

    .downloadBtns {
        display: flex;
        flex-direction: row !important;
    }

    .contentSide {
        width: 100%;
    }

    .contentSide h1 {
        font-size: 7vw;
    }

    .contentSide p {
        font-size: 3.8vw;
        width: 95%;
    }

    .downloadBtns a {
        width: 37%;
        margin-right: 10px;
    }

    .row {
        display: flex;
        flex-direction: column;
    }
    
    .doMore {
        padding: 6%;
    }

    .alignCenter {
        align-items: flex-start;
    }

    .more {
        width: 100%;
    }

    .more h1 {
        font-size: 5vw;
        width: 100%;
    }

    .more p {
        font-size: 3.2vw;
        margin-bottom: 10px;
    }

    .nore-b p {
        font-size: 3.5vw;
        float: left;
        margin-top: 15px;
        width: 100%;
    }

    .manjorB {
        margin-top: 25px;
    }

    .manjorB div {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .manjorB div h3 {
        margin-bottom: 5px;
        font-size: 4vw;
    }

    .manjorB div p {
        font-size: 3.5vw;
    }

    .manjorB div img {
        width: 8vw;
        margin-bottom: 10px;
    }

    .whyUs {
        padding: 6%;
    }

    .whyUs br {
        display: none;
    }

    .whyChoose h1 {
        font-size: 5vw;
    }

    .whyChoose .underline, .cryptoContent .underline {
        width: 25vw;
        margin-bottom: 20px;
    }

    .rowReversed {
        display: flex;
        flex-direction: column-reverse;
    }

    .whyChoose p {
        font-size: 2.3vw;
    }

    .SetupBtns {
        display: flex;
        flex-direction: row;
        margin-top: 20px;
    }

    .SetupBtns .buttonClass {
        font-size: 3vw !important;
    }

    .SetupBtns a {
        margin-right: 10px;
    }

    .delight {
        padding: 6%;
    }

    .Payment div {
        width: 100%;
        margin-right: 0;
    }

    .Payment img {
        width: 100%;
    }

    .delightDetails h3 {
        font-size: 5vw;
        margin-top: 20px;
    }

    .delightDetails p {
        font-size: 3.8vw;
    }

    .PaymentIcons .row {
        flex-direction: row;
        align-items: center;
    }
    
    .PaymentIcons div p {
        font-size: 3.4vw;
    }

    .PaymentIcons div i {
        width: 9vw;
        height: 9vw;
    }

    .stepsGIF, .steps {
        width: 100%;
    }

    .steps {
        margin-top: 35px;
    }

    .steps h3 {
        font-size: 5vw;
        margin-bottom: 30px;
    }
    
    .steps p {
        font-size: 3.8vw;
    }

    .step {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .partners {
        width: 100%;
        padding: 6%;
    }

    .partnerContainer h3 {
        font-size: 5vw;
        width: 100%;
    }

    .partnerListDisplay {
        display: flex;
        flex-direction: row;
        margin-top: 10px;
    }

    .partnerListDisplay img {
        width: 17vw;
        max-height: 9vw;
        margin-right: 30px;
        margin-bottom: 30px;
    }

    .mobileLogo {
        width: 6vw !important;
    }

    .glo {
        width: 12vw !important;
        height: 16.8vw !important;
    }

    .PHED {
        height: 10vw !important;
        width: 25vw !important;
    }

    .ie {
        height: 16vw !important;
        width: 11vw !important;
    }

    .ibedc {
        height: 8vw !important;
        width: 18vw !important;
    }

    .ekedc {
        height: 8vw !important;
        width: 14vw !important;
    }

    .bet9ja, .betking {
        height: 6vw !important;
    }

    .sporty {
        width: 26vw !important;
        height: 9vw !important;
    }

    .betking {
        width: 26vw !important;
        height: 9vw !important;
    }

    .crypto {
        padding: 4%;
    }

    .cryptoContent div {
        width: 100%;
    }

    .func {
        width: 150px !important;
        height: 150px !important;
        border-radius: 35px;
    }

    .cryptoFunc {
        flex-direction: row;
    }

    .func img {
        width: 13vw;
        margin-bottom: 15px;
    }

    .cryptoContent div p {
        font-size: 3vw !important;
    }

    .cryptoContent div h3 {
        font-size: 5vw;
    }

    .cryptoContent div p {
        font-size: 3.8vw;
        margin-bottom: 30px;
    }

    .assets {
        width: 100% !important;
    }

    .assetBal {
        padding: 4%;
    }
    
    .giftcardsContainer {
        padding: 4%;
    }

    .giftcardsContainer h3 {
        font-size: 7vw;
        width: 100%;
    }

    .giftcardsContainer img {
        width: 80vw;
    }

    footer {
        padding: 15% 4%;
    }

    .footerSections {
        width: 100%;
        margin-bottom: 40px;
    }

    .footerSections img {
        width: 35%;
    }

    .footerSections a p {
        font-size: 3.5vw;
    }

    footer hr {
        margin-top: 10px;
    }
    
    .verificationContainer h3 {
        font-size: 6vw;
        padding: 40px;
    }

    .verificationContainer {
        padding: 4%;
    }

    .verification {
        background: #cf1b2113;
    }

    .verification .cover {
        background-color: #ffffff00;
    }

    .verifyBtns .buttonClass {
        font-size: 4vw;
        margin-bottom: 20px;
    }

    .dashboardContainer {
        display: flex !important;
        flex-direction: column-reverse !important;
        justify-content: center;
        align-items: center;
    }

    .sidebar {
        width: 100%;
        height: 80px;
        bottom: 0px;
        display: flex;
        flex-direction: row !important;
        justify-content: space-around !important;
        z-index: 1;
        background-color: #fff;
        border: 1px solid #8888883b;
        color: #000;
        padding: 0;
    }

    .sidebarContent img {
        display: none !important;
    }

    .sidebarContent hr, .sidebarContent br {
        display: none;
    }

    .dashboardMain {
        width: 100%;
        margin-left: 0;
    }

    .sidebarContent {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .sidebarContent .row {
        margin-bottom: 0;
        margin-right: 35px;
        padding-left: 0;
        text-align: center;
    }

    .sidebarContent .row:last-child {
        margin-right: 0;
    }

    .sidebarContent .row p{
        font-size: 2.5vw;
        margin-top: 2px;
    }

    .dashboardContentContainer {
        margin-left: 0;
        width: 100%;
        padding: 0px 0px 0px 0px;
        background-color: #fff;
    }
    
    .cover {
        height: 25%;
    }

    .persona {
        padding: 0% 4%;
    }

    .cover2 {
        height: calc(75% - 20px);
        margin-top: 20px;
        overflow: auto;
    }

    .topBar, .topBar div {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .topBar .buttonClass {
        font-size: 10px;
    }

    .balBar {
        border-radius: 8px;
    }

    .balBar p {
        font-size: 3vw;
    }

    .balBar .row {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .trnHis {
        display: flex;
        flex-direction: row;
    }

    .trnHis p {
        font-size: 3vw;
    }

    .white {
        background-color: #fff;
        color: #000;
    }

    .widget {
        margin-bottom: 25px;
    }

    .widget p {
        font-size: 7pt;
    }

    .widget .row {
        flex-direction: row;
        gap: 10px;
    }

    .eachFeature {
        flex: 1 1 calc(20vw - 10px); 
        height: 20vw;
        border-radius: 8px;
    }

    .eachFeature i {
        font-size: 12pt; 
    }

    .eachFeature p {
        font-size: 7pt; 
    }

    .liverate {
        width: 100%;
    }    

    .usageScreen {
        padding: 4%;
        background-color: #fff;
    }

    .screenBar {
        flex-direction: row;
        align-items: center;
    }

    .cryptoListings {
        width: 100%;
    }

    .kaylaBitBar {
        padding: 15px !important;
    }

    .kaylaBitBar img {
        width: 7vw;
        height: 7vw;
    }

    .kaylaBitBar p {
        color: #1d1d1d;
        font-size: 4.1vw;
    }

    .alias {
        font-size: 3.4vw !important;
        margin-top: 3px;
    }

    .to-do {
        font-size: 3.6vw;
    }

    .walletCredentials {
        margin-top: 20px;
        justify-content: center;
        align-items: center;
    }

    .qrcode {
        width: 70vw;
        height: 70vw;
        background-color: #000;
        border-radius: 10px;
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    .walletDetails {
        width: 90%;
        margin-bottom: 150px;
    }

    .walletNote {
        font-size: 3.5vw !important;
    }

    .walletIdContainer {
        max-width: 100%;   /* Ensure container doesn't stretch too wide */
        overflow: hidden;  /* Optional: prevents any overflow */
        word-wrap: break-word; /* For older support */
        overflow-wrap: break-word; /* Newer syntax for better support */
    }
    
    .walletIdContainer p {
        word-break: break-all;  /* Force long words to break */
        white-space: normal;    /* Ensure normal white space behavior */
    }

    .fadedMain {
        width: fit-content;
    }

    .actionBtns {
        margin-top: 30px;
        text-align: center;
    }

    .actionBtns i {
        font-size: 8vw;
    }

    .contentSide h1 {
        line-height: 12vw !important;
        font-size: 11vw;
    }

    .recepientInfo {
        width: 100%;
        padding: 8%;
        max-width: 100%;   /* Ensure container doesn't stretch too wide */
        overflow: hidden;  /* Optional: prevents any overflow */
        word-wrap: break-word; /* For older support */
        overflow-wrap: break-word; /* Newer syntax for better support */
        position: absolute;
        bottom: 0 !important;
        border-radius: 25px 25px 0px 0px;
    }

    .recepientInfo p {
        word-break: break-all;  /* Force long words to break */
        white-space: normal;    /* Ensure normal white space behavior */
    }

    .trnsTypeCont {
        width: 100% !important;
    }

    .trnsType {
        font-size: 3.5vw !important;
    }

    .limitBar  {
        flex-direction: row;
    }

    .limitBar p {
        font-size: 3vw;
    }

    .trnsBtnsPrompt {
        flex-direction: row;
    }

    .alertPop {
        min-width: 90% !important;
        padding: 4%;
    }

    .trnsPinContainer {
        width: 100%;
        padding: 6%;
        bottom: 0 !important;
        position: fixed;
        border-radius: 20px 20px 0px 0px;
    }

    .trnsPinBtns {
        flex-direction: row;
    }

    #barIcon {
        display: block;
    }

    .barIcon, .barIconClose {
        font-size: 6.5vw;
    }

    #barIconClose {
        display: none;
    }

    #mobileMenuView {
        width: 100%;
        height: 100%;
        position: fixed !important;
        background-color: #fff;
        z-index: 1;
        padding: 30% 6%;
    }

    .mobileMenuView a {
        color: #000;
    }

    .logoSection img {
        width: 35vw;
    }

    .networks {
        flex-direction: row;
    }

    .network img {
        max-width: 100%;
        max-height: 22px;
    }

    .successReceipt {
        width: 91%;
        height: fit-content;
        padding: 15% 10%;
    }

    .trnsDetails div {
        flex-direction: row;
    }

    .trnsDetails div p {
        text-wrap: nowrap;
    }

    .mobilMenuView a p {
        margin-bottom: 0 !important;
        margin-left: 15px !important;
    }

    #addFundsForm {
        position: fixed;
        bottom: 0;
        width: 100%;
        border-radius: 15px 15px 0 0;
        padding: 6%;
    }

    .fixedRow {
        display: flex;
        flex-direction: row;
    }

    .faqs {
        flex-direction: column;
        padding: 6% 4% !important;
    }

    .w-50, .theFAQs {
        width: 100%;
    }

    .theFAQs {
        margin-top: 20px;
    }

    .faqs h1, .faqs p {
        width: 100%;
    }
    
    .faq .row {
        flex-direction: row !important;
        align-items: center !important;
    }

    .faq {
        padding: 6%;
    }

    .faqs h1 {
        font-size: 25pt;
    }

    .amenities .row {
        flex-direction: row;
    }

    .amenities {
        padding: 6% 6% 0 6%;
    }

    .joinContainer {
        display: flex;
        flex-direction: column-reverse !important;
    }

    .phoneImg {
        background-size: 100%;
        height: 450px;
        width: 100%;
    }

    .joinNote {
        width: 100%;
        margin-bottom: 30px;
    }

    .joinNote h1 {
        font-size: 25pt;
    }
    
    .screens .row.nowrap.overflow-auto {
        flex-direction: row !important;
    }

    .screens .imgBrands {
        min-width: 130px;
    }
    
    .crypto h1 {
        font-size: 25pt;
        line-height: 20pt;
    }

    .underline {
        width: 30% !important;
    }

    .crypto p {
        width: 100%;
    }

    .firstdomore {
        width: 100% !important;
        margin-bottom: 50px;
    }

    .iconBoxContainer img {
        width: 100%;
    }

    .giftcardsContainer .digitalAssetsLists {
        flex-direction: row;
    }

    .digitalAssetsLists .row {
        flex-direction: column;
    }

    .digitalAssetsLists .row {
        margin-right: 30px;
        margin-bottom: 30px;
        width: 40%;
        align-items: center;
    }

    .digitalAssetsLists p {
        margin-left: 0 !important;
        font-size: 10pt;
    }

    .iconBox {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .mobileRow {
        flex-direction: row !important;
        align-items: center !important;
    }
    
    #mobileMenuView .row {
        flex-direction: row !important;
        align-items: center !important;
        margin-bottom: 30px !important;
    }

    #mobileMenuView .row p {
        margin-left: 15px;
    }
    
    .delight, .doMore, .whyUs, .faqs, .partners, .crypto, .giftcardsContainer {
        padding: 15% 4% !important;
    }

    .amenities {
        padding: 4% 4% 0 4%;
    }

    .aml p {
        text-align: left !important;
    }

    .fs13 {
        font-size: 10pt !important;
    }
    
    .newDashBoard {
        padding: 3% 3% 0% 3%;
        margin-top: 0;
    }

    .newBalBoard {
        padding: 5%;
    }

    .newDashBoard .row, .newFuntionBtnRow .row {
        display: flex;
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center !important;
    }

    .newFuntionBtnRow {
        padding: 0% 3%;
        width: 100%;
    }

    .newFuntionBtnContainer {
        padding: 0% 5% 5% 5%;
    }

    .miniButton {
        font-size: 9pt;
        padding: 5px 8px;
    }

    .greetings p {
        font-size: 10pt;
    }

    .cover2 h3 {
        font-size: 12pt;
    }

    .ml15 {
        margin-left: 5pt !important;
    }

    .profilePage .row {
        display: flex;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }
    
    .profileInfoContainer, .supportContainer {
        padding: 4%;
        margin-top: 0;
    }

    .support .row, .profileInfo, .owner {
        padding: 5%;
    }

    .limitMgt {
        margin-bottom: 50px !important;
    }

    .giftCardChoice {
        padding: 5%;
        background-color: #fff;
    }

    #custom_giftcardBtn {
        display: flex;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 5%;
    }

    .iconContainer {
        margin-bottom: 15px;
    }

    .padding5 {
        padding: 5%;
    }

    .profilePicsContainer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .owner {
        margin-top: 0;
    }

    #sellSection, #buySection {
        padding: 5%;
    }
    
    #physicalSection div, .inputField, .textField{
        width: 100%;
    }

    .customOptions {
        width: 100% !important;
        background-color: #fff;
        border: 1px solid #e7e7e7;
        position: relative;
        padding: 5%;
        border-radius: 0 0 10px 10px;
    }

    #continueBtn {
        width: 100%;
    }

    .fixedPageTag {
        width: 100%;
        margin-left: 0;
    }

    .tabBtn {
        padding: 4% 8%;
        border-radius: 10px;
        display: flex;
        align-items: center;
    }

    .alertBoxContainer {
        width: 90%;
        background-color: #fff;
        padding: 20% 8%;
    }

    .modal {
        z-index: 1000;
    }

    .newheadSection {
        padding: 30% 4% 15% 4%;
    }

    .newheadSection h1 {
        width: 100%;
        text-align: left;
        font-size: 25pt;
    }

    .newheadSection p {
        width: 100%;
        text-align: left;
        margin-top: 20px;
    }

    .playAppBtn {
        flex-direction: row;
        width: 100%;
    }

    .playAppBtn img {
        width: 170px;
    }

    #airtimeModal {
        display: none;
        width: 100%;
        padding: 8% 4%;
        background-color: #fff;
        border-radius: 20px 20px 0px 0px;
        flex-direction: column;
        bottom: 0 !important;
        position: absolute;
    }
    
    .productImages {
        flex-direction: row;
    }

    .pin-input {
        width: 25%;
    }

    .productBtns {
        flex-direction: row !important;
    }
    
    .setTransactionContainer {
        align-items: flex-start;
    }

    .pinContainer {
        width: 100%;
        border: none;
    }

    .historyMatter {
        flex-direction: column !important;
        justify-content: flex-end;
    }

    .historyMatter p {
        margin: 0 !important;
    }

    .historyIndex div {
        padding: 5px 8px;
    }

    .text-success, .text-danger {
        margin-right: 10px;
        font-size: 15pt;
    }

    .theType {
        font-size: 10pt !important;
    }

    .thedeets {
        font-size: 8pt !important;
    }

    .theAmount {
        font-size: 10pt !important;
        font-weight: bold;
    }

    #transferNairaModal {
        width: 100%;
        border-radius: 20px 20px 0px 0px !important;
        bottom: 0;
        position: absolute;
        padding: 10% 4%;
    }

    #transferNairaModal .row {
        flex-direction: row;
    }
}