/* =====================================
HOW IT WORKS RESPONSIVE
===================================== */

@media (max-width:768px){

    .how-section{

        padding:80px 0;

    }

    .step-card{

        padding:35px 25px;

    }

    .step-number{

        font-size:42px;

    }

    .step-icon{

        width:70px;

        height:70px;

        font-size:28px;

    }

}


/*====================================
ABOUT RESPONSIVE
====================================*/

@media(max-width:991px){

    .about-section{

        padding:80px 0;

    }

    .about-content{

        text-align:center;

    }

    .about-content h3{

        font-size:30px;

    }

    .about-list{

        display:inline-block;

        text-align:left;

        margin-top:30px;

    }

    .about-image{

        margin-bottom:20px;

    }

}

@media(max-width:576px){

    .about-content h3{

        font-size:26px;

    }

    .about-content p{

        font-size:16px;

    }

    .about-stat{

        padding:25px;

    }

}


/* ==========================
STATISTICS RESPONSIVE
========================== */

@media(max-width:991px){

    .stats-section{
        padding:80px 0;
    }

    .stat-card{
        padding:30px 20px;
    }

}

@media(max-width:576px){

    .stats-section{
        padding:70px 0;
    }

    .stat-card{
        padding:25px 18px;
    }

    .stat-icon{
        width:60px;
        height:60px;
        font-size:24px;
    }

    .stat-card h2{
        font-size:30px;
    }

    .stat-card p{
        font-size:15px;
    }

}


/* ==========================
TESTIMONIAL RESPONSIVE
========================== */

@media (max-width:991px){

    .testimonial-section{
        padding:80px 0;
    }

    .testimonial-card{
        padding:30px;
    }

}

@media (max-width:576px){

    .testimonial-section{
        padding:70px 0;
    }

    .testimonial-card{
        padding:25px;
        text-align:center;
    }

    .testimonial-text{
        min-height:auto;
    }

    .client{
        flex-direction:column;
        justify-content:center;
    }

    .client img{
        margin:0 0 15px;
    }

}



/* ==========================
FAQ RESPONSIVE
========================== */

@media(max-width:991px){

    .faq-section{
        padding:80px 0;
    }

}

@media(max-width:576px){

    .faq-section{
        padding:70px 0;
    }

    .accordion-button{
        font-size:16px;
        padding:18px;
    }

    .accordion-body{
        padding:18px;
        font-size:15px;
    }

}




/* ==========================
CTA RESPONSIVE
========================== */

@media (max-width:991px){

    .cta-box{
        padding:50px 35px;
        text-align:center;
    }

    .cta-box h2{
        font-size:34px;
    }

    .cta-box p{
        margin:auto;
        font-size:17px;
    }

}

@media (max-width:576px){

    .cta-section{
        padding:70px 0;
    }

    .cta-box{
        padding:40px 25px;
        border-radius:22px;
    }

    .cta-box h2{
        font-size:28px;
    }

    .cta-box p{
        font-size:16px;
    }

    .cta-box .btn{
        width:100%;
        margin-bottom:15px;
    }
}


/* ==========================
CTA BUTTONS RESPONSIVE
========================== */

@media (max-width:991px){

    .cta-buttons{
        align-items:center;
        margin-top:35px;
    }

    .cta-buttons .btn{
        width:280px;
        max-width:100%;
    }

}

@media (max-width:576px){

    .cta-box{
        padding:40px 25px;
        text-align:center;
    }

    .cta-box h2{
        font-size:30px;
        max-width:100%;
    }

    .cta-box p{
        font-size:16px;
        max-width:100%;
        margin:auto;
    }

    .cta-buttons{
        width:100%;
        gap:10px;
    }

    .cta-buttons .btn{
        width:100%;
         margin:0;
    }

}



/* ==========================
FOOTER RESPONSIVE
========================== */

@media (max-width:991px){

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

    .footer-text{
        margin:auto;
    }

    .social-links{
        justify-content:center;
    }

    .footer-contact li{
        justify-content:center;
    }

    .footer-bottom{
        flex-direction:column;
        gap:20px;
    }

}

@media (max-width:576px){

    .footer-section{
        padding:60px 0 25px;
    }

    .footer-section h4{
        font-size:24px;
    }

    .footer-section h5{
        margin-top:20px;
    }

    .social-links{
        flex-wrap:wrap;
    }

}




/* ==========================================
ADMIN RESPONSIVE
========================================== */

@media(max-width:992px){

    .sidebar{

        left:-280px;

    }

    .sidebar.show{

        left:0;

    }

    .topbar{

        left:0;

        width:100%;

        height:65px;

        padding:0 15px;

    }

    .topbar-left h3{

        font-size:20px;

    }

    .main-content{

        margin-left:0;

        margin-top:65px;

        padding:20px;

    }

    .profile-info{

        display:none;

    }

    .close-sidebar{

    display:flex;

    justify-content:center;

    align-items:center;

}

.close-sidebar{

    display:flex;

    justify-content:center;

    align-items:center;

}

}

@media(max-width:576px){

    .main-content{

        padding:15px;

    }

    .topbar{

        padding:0 12px;

    }

    .notification-btn,

    .profile-avatar,

    .menu-toggle{

        width:40px;

        height:40px;

    }

    .topbar-left{

        gap:10px;

    }

    .topbar-left h3{

        font-size:18px;

    }

}


@media(max-width:768px){

    .activity-item{

        align-items:flex-start;

        gap:12px;

    }

    .activity-icon{

        width:45px;

        height:45px;

        font-size:16px;

        flex-shrink:0;

    }

    .activity-details h4{

        font-size:16px;

    }

    .activity-details p{

        font-size:13px;

    }

    .activity-item span{

        display:block;

        margin-left:0;

        margin-top:6px;

        font-size:12px;

    }

      .section-header h3{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .quick-grid{

        grid-template-columns:repeat(2,1fr) !important;

        gap:15px;

    }

}


@media(max-width:768px){

.form-grid{

grid-template-columns:1fr;

}

.form-actions{

justify-content:center;

}

}


/* ==========================
   CREATE PLAN - MOBILE
========================== */

@media (max-width:768px){

    .form-grid{
        grid-template-columns:1fr;
    }

    .form-actions{
        flex-direction:column-reverse;
        width:100%;
        gap:12px;
    }

    .form-actions .back-btn,
    .form-actions .fund-btn{
        width:100%;
        justify-content:center;
    }

}



@media (max-width:768px){

.action-buttons{
    gap:6px;
}

.action-buttons a{
    width:35px;
    height:35px;
}

.action-buttons i{
    font-size:13px;
}

.primary-btn{
    width:35px;
    height:35px;
}

}

@media(max-width:768px){

    .member-details-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .member-profile{
        width:100%;
    }

    .member-avatar{
        width:50px;
        height:50px;
        font-size:20px;
    }

    .member-profile h2{
        font-size:20px;
    }

    .member-info-table th{
        width:40%;
    }

    .member-info-table th,
    .member-info-table td{
        padding:11px 8px;
        font-size:13px;
    }

}

@media(max-width:768px){

    .wallet-balance-card{
        padding:22px;
        border-radius:15px;
    }

    .wallet-balance-card h2{
        font-size:25px;
    }

    .wallet-icon{
        width:50px;
        height:50px;
        font-size:20px;
    }

    .wallet-balance-card span{
        font-size:13px;
    }

}



@media(max-width:768px){

    .profile-card{
        padding:20px;
        align-items:flex-start;
    }

    .profile-avatar-large{
        width:60px;
        height:60px;
        font-size:24px;
    }

    .profile-main-info h2{
        font-size:20px;
    }

    .profile-info-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

}


@media(max-width:768px){

    .profile-form-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .profile-form-actions{
        flex-direction:column-reverse;
    }

    .profile-save-btn,
    .profile-cancel-btn{
        width:100%;
    }

}


@media(max-width:768px){

    .profile-picture-upload{
        align-items:flex-start;
        flex-direction:column;
    }

}


/* =========================================================
   MEMBER SCHEMES - RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .scheme-showcase-grid {
        grid-template-columns: 1fr;
        max-width: 850px;
    }

    .scheme-showcase-image {
        min-height: 420px;
    }

    .scheme-showcase-image img {
        min-height: 420px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .scheme-showcase-heading {
        margin-bottom: 22px;
    }

    .scheme-showcase-heading h1 {
        font-size: 25px;
    }

    .scheme-showcase-heading p {
        font-size: 13px;
    }

    .scheme-showcase-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .scheme-showcase-image {
        min-height: 380px;
    }

    .scheme-showcase-image img {
        min-height: 380px;
    }

    .scheme-showcase-body {
        padding: 21px;
    }

    .scheme-showcase-header h2 {
        font-size: 21px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .scheme-showcase-heading h1 {
        font-size: 23px;
    }

    .scheme-showcase-heading p {
        font-size: 13px;
    }

    .scheme-showcase-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .scheme-showcase {
        border-radius: 16px;
    }

    /*
    Keep the entire uploaded image visible.
    */

    .scheme-showcase-image {
        min-height: 320px;
        height: auto;
    }

    .scheme-showcase-image img {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        object-fit: contain;
    }

    .scheme-showcase-image-empty {
        min-height: 320px;
    }

    .scheme-showcase-status {
        top: 12px;
        right: 12px;
    }

    .scheme-showcase-status span {
        padding: 7px 10px;
        font-size: 10px;
    }

    .scheme-showcase-body {
        padding: 18px;
    }

    .scheme-showcase-header h2 {
        font-size: 20px;
    }

    .scheme-showcase-description {
        font-size: 13px;
        line-height: 1.65;
        margin-bottom: 18px;
    }

    .scheme-showcase-info {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .scheme-showcase-info-box {
        padding: 12px;
    }

    .scheme-showcase-package {
        padding-top: 17px;
    }

    .scheme-showcase-package li {
        font-size: 12px;
    }

    .scheme-showcase-button {
        min-height: 46px;
        font-size: 13px;
    }

    .scheme-showcase-joined {
        min-height: 46px;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .scheme-showcase-heading h1 {
        font-size: 21px;
    }

    .scheme-showcase-body {
        padding: 15px;
    }

    .scheme-showcase-image {
        min-height: 280px;
    }

    .scheme-showcase-image-empty {
        min-height: 280px;
    }

    .scheme-showcase-header h2 {
        font-size: 18px;
    }

    .scheme-showcase-info-box {
        padding: 10px;
    }

    .scheme-showcase-info-icon {
        width: 31px;
        height: 31px;
        min-width: 31px;
    }

}

/* =========================================================
   ADMIN SCHEMES - RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .scheme-admin-grid {
        grid-template-columns: 1fr;
    }

    .scheme-admin-card {
        max-width: 850px;
        width: 100%;
    }

}


@media (max-width: 700px) {

    .scheme-admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .scheme-admin-header h1 {
        font-size: 24px;
    }

    .scheme-admin-add-btn {
        width: 100%;
        justify-content: center;
    }

    .scheme-admin-grid {
        gap: 18px;
    }

    .scheme-admin-image {
        height: 250px;
    }

    .scheme-admin-content {
        padding: 18px;
    }

    .scheme-admin-details {
        grid-template-columns: 1fr;
    }

    .scheme-admin-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .scheme-admin-summary-item {
        border-bottom: 1px solid #e5e7eb;
    }

    .scheme-admin-summary-item:nth-child(2) {
        border-right: none;
    }

    .scheme-admin-summary-item:nth-child(3),
    .scheme-admin-summary-item:nth-child(4) {
        border-bottom: none;
    }

}


@media (max-width: 480px) {

    .scheme-admin-header h1 {
        font-size: 22px;
    }

    .scheme-admin-header p {
        font-size: 12px;
    }

    .scheme-admin-image {
        height: 220px;
    }

    .scheme-admin-content {
        padding: 16px;
    }

    .scheme-admin-title-row h2 {
        font-size: 19px;
    }

    .scheme-admin-summary-item strong {
        font-size: 12px;
    }

    .scheme-admin-actions {
        flex-wrap: wrap;
    }

    .scheme-action-btn {
        min-width: calc(50% - 4px);
        flex: 1 1 calc(50% - 4px);
    }

}


/* =========================================================
   MOBILE SIDEBAR SCROLL
   ========================================================= */

@media (max-width: 768px) {

    .sidebar {
        height: 100vh;
        height: 100dvh;

        display: flex;
        flex-direction: column;

        overflow: hidden;
    }

    .sidebar-header {
        flex-shrink: 0;
    }

    .sidebar-menu {
        flex: 1;

        overflow-y: auto;
        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;

        padding-bottom: 30px;
    }

}


/* ==========================================
   MOBILE SIDEBAR SCROLL FIX
========================================== */

@media (max-width: 768px){

    .sidebar{

        height:100vh;
        height:100dvh;

        max-height:100dvh;

        display:flex;
        flex-direction:column;

        overflow:hidden;

    }

    .sidebar-header{

        flex-shrink:0;

    }

    .sidebar-menu{

        flex:1;

        min-height:0;

        overflow-y:auto;
        overflow-x:hidden;

        -webkit-overflow-scrolling:touch;

        touch-action:pan-y;

        padding-bottom:40px;

    }

}

/* Transaction History Header - Mobile */

@media (max-width: 600px) {

    .page-header h1 {
        font-size: 24px;
        line-height: 1.25;
    }

    .page-header h1 i {
        font-size: 19px;
    }

    .page-header p {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 0px;
    }

}


@media (max-width: 380px) {

    .page-header h1 {
        font-size: 19px;
    }

    .page-header h1 i {
        font-size: 17px;
    }

    .page-header p {
        font-size: 12px;
    }

}



/* =========================================================
   COMPLETE BLISS PUBLIC WEBSITE - MOBILE FIX
   ========================================================= */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}


/* =========================================================
   PUBLIC NAVBAR - TABLET / MOBILE
   ========================================================= */

@media (max-width: 991px) {

    .navbar {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .navbar .container {
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }

    .navbar-brand img {
        width: 58px !important;
        height: auto;
        flex-shrink: 0;
    }

    .navbar-brand h5 {
        font-size: 17px;
        line-height: 1.2;
    }

    .navbar-brand small {
        font-size: 12px;
    }

    .navbar-toggler {
        padding: 8px 10px;
        border-radius: 9px;
    }

    .navbar-collapse {
        margin-top: 15px;
        padding: 18px;
        background: #ffffff;
        border-radius: 14px;
        box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
    }

    .navbar-nav {
        width: 100%;
        margin-bottom: 15px;
    }

    .navbar-nav .nav-link {
        padding: 10px 5px;
        font-size: 14px;
    }

    .navbar-collapse > .d-flex {
        width: 100%;
        flex-direction: column;
        gap: 9px;
    }

    .navbar-collapse > .d-flex .btn {
        width: 100%;
        margin: 0 !important;
    }

}


/* =========================================================
   NEW PUBLIC HERO - TABLET
   ========================================================= */

@media (max-width: 991px) {

    .cb-public-hero {
        min-height: auto;
        padding: 55px 0 65px;
    }

    .cb-public-hero .container {
        max-width: 760px;
    }

    .cb-hero-content {
        width: 100%;
        text-align: center;
    }

    .cb-hero-badge {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        width: auto;
        max-width: 100%;

        margin: 0 auto;

        padding: 7px 13px 7px 8px;

        background: #ffffff;

        border: 1px solid #dbeafe;
        border-radius: 999px;

        color: #1d4ed8;

        font-size: 12px;
        line-height: 1.4;

        box-shadow:
            0 6px 20px
            rgba(15, 23, 42, 0.05);
    }

    .cb-hero-badge-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 28px;
        min-width: 28px;
        height: 28px;

        border-radius: 50%;

        background: #eff6ff;
    }

    .cb-hero-title {
        max-width: 650px;

        margin: 22px auto 18px;

        font-size: 48px;
        line-height: 1.08;

        letter-spacing: -2px;

        text-align: center;
    }

    .cb-hero-description {
        max-width: 630px;

        margin: 0 auto;

        font-size: 15px;
        line-height: 1.75;

        text-align: center;
    }

    .cb-hero-actions {
        width: 100%;

        margin-top: 28px;

        display: flex !important;
        justify-content: center;
        align-items: center;

        gap: 12px;
    }

    .cb-hero-btn {
        display: inline-flex !important;

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

        min-height: 50px;

        padding: 0 20px;

        border-radius: 11px;

        font-size: 13px;
        font-weight: 600;

        text-decoration: none !important;
    }

    .cb-hero-btn-primary {
        background: #2563eb !important;
        color: #ffffff !important;

        border: 1px solid #2563eb;

        box-shadow:
            0 12px 25px
            rgba(37, 99, 235, 0.20);
    }

    .cb-hero-btn-light {
        background: #ffffff !important;
        color: #344054 !important;

        border: 1px solid #dbe1e8;
    }

    .cb-hero-trust {
        width: 100%;
        max-width: 630px;

        margin: 30px auto 0;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .cb-hero-trust-item {
        display: flex !important;
        align-items: flex-start;

        gap: 10px;

        padding: 14px;

        text-align: left;

        background:
            rgba(255, 255, 255, 0.9);

        border: 1px solid #e5eaf0;
        border-radius: 13px;
    }

    .cb-trust-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 32px;
        min-width: 32px;
        height: 32px;

        border-radius: 9px;

        background: #ecfdf5;

        color: #16a34a;
    }

    .cb-hero-trust-item strong {
        display: block;

        margin-bottom: 3px;

        font-size: 12px;
        line-height: 1.4;
    }

    .cb-hero-trust-item span {
        display: block;

        font-size: 11px;
        line-height: 1.5;
    }

}


/* =========================================================
   NEW PUBLIC HERO - PHONES
   ========================================================= */

@media (max-width: 600px) {

    .cb-public-hero {
        padding: 38px 0 50px;
    }

    .cb-public-hero .container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }


    /* BADGE */

    .cb-hero-badge {
        font-size: 10px;

        padding: 6px 11px 6px 6px;
    }

    .cb-hero-badge-icon {
        width: 25px;
        min-width: 25px;
        height: 25px;

        font-size: 10px;
    }


    /* TITLE */

    .cb-hero-title {
        margin-top: 19px;
        margin-bottom: 16px;

        font-size: 39px;
        line-height: 1.08;

        letter-spacing: -1.5px;
    }


    /* DESCRIPTION */

    .cb-hero-description {
        width: 100%;

        font-size: 14px;
        line-height: 1.7;

        padding: 0;
    }


    /* BUTTONS */

    .cb-hero-actions {
        margin-top: 24px;

        display: flex !important;
        flex-direction: column;

        gap: 10px;

        width: 100%;
    }

    .cb-hero-btn {
        width: 100% !important;

        min-height: 49px;

        border-radius: 10px;

        font-size: 13px;
    }

    .cb-hero-btn-primary {
        background: #2563eb !important;
        color: #ffffff !important;
    }

    .cb-hero-btn-light {
        background: #ffffff !important;
        color: #344054 !important;
    }


    /* TRUST CARDS */

    .cb-hero-trust {
        grid-template-columns: 1fr !important;

        gap: 10px;

        margin-top: 22px;
    }

    .cb-hero-trust-item {
        width: 100%;

        padding: 13px;

        border-radius: 12px;

        background: #ffffff !important;

        border: 1px solid #e5eaf0;
    }

    .cb-hero-trust-item strong {
        font-size: 12px;
    }

    .cb-hero-trust-item span {
        font-size: 10px;
    }


    /* ==========================================
       HERO IMAGE
       ========================================== */

    .cb-hero-visual {
        position: relative;

        width: 100%;

        min-height: 0 !important;

        margin: 35px auto 0;

        padding-bottom: 52px;
    }

    .cb-hero-image-shape {
        display: none;
    }

    .cb-hero-main-image {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        height: 360px !important;

        margin: 0 auto;

        border-radius: 20px;

        overflow: hidden;

        box-shadow:
            0 20px 45px
            rgba(15, 23, 42, 0.15);
    }

    .cb-hero-main-image img {
        display: block;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }


    /* FLOATING CARDS */

    .cb-hero-floating-card {
        min-width: 0 !important;
        width: auto;

        padding: 10px 11px;

        border-radius: 12px;

        background:
            rgba(255, 255, 255, 0.96) !important;

        box-shadow:
            0 12px 30px
            rgba(15, 23, 42, 0.15);
    }

    .cb-card-top {
        top: 20px !important;
        left: 10px !important;
    }

    .cb-card-bottom {
        right: 10px !important;
        bottom: 18px !important;
    }

    .cb-floating-icon {
        width: 32px;
        min-width: 32px;
        height: 32px;

        font-size: 12px;
    }

    .cb-hero-floating-card small {
        font-size: 7px;
    }

    .cb-hero-floating-card strong {
        font-size: 9px;
    }

    .cb-hero-mini-card {
        display: none !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .navbar-brand img {
        width: 50px !important;
    }

    .navbar-brand h5 {
        font-size: 15px;
    }

    .navbar-brand small {
        font-size: 10px;
    }

    .cb-public-hero .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cb-hero-title {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .cb-hero-description {
        font-size: 13px;
    }

    .cb-hero-main-image {
        height: 330px !important;
    }

}