.custom-breadcrumb {
    padding: 20px 8px 20px 8px;
}
.dashboard-homeicon {
    width: 25px;
}
.breadcrumb-text {
    font-size: 20px;
    font-weight: 700;
    padding-left: 10px;
    color: #343C6A;
}
/* apply for all mobile widths (0 - 991px) */
.services-overview {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
  }
  
  .service-left,
  .service-right {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* vertical divider fills the height of the flex container */
  .vertical-divider {
    width: 1px;
    background-color: #ccc;
    align-self: stretch;
    margin: 0 0.5rem;
  }
  .row.mt-4 .add-home-service-tour {
    margin-bottom: 18px;
    font-size: 18px;
}
a.footer-text {
    text-decoration: none !important;
  }
  .desktop-footer{
    display: block;
}
.mobile-footer{
    display: none;
}
/* Default: Bootstrap gap-3 stays */
.footer-mobile-view {
    gap: 1rem; /* This matches Bootstrap gap-3 */
  }

  /* Hide mobile footer by default, show desktop */
.footer-new-logo{
    width:117px;
    height:auto;
}
  
/*Account Billing*/
@media (max-width: 768px) {
    .pi-form-container-mobile{
    margin-top: 20px;
    
}
.footer-mobile-view .footer-text{
    font-size: 12px;
}
.custom-btn{
    padding: 3px 3px!important;
    border-radius: 6px;
    font-size: 12px!important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 1px!important;
}
.chatbot-icon img{
    height: 55px!important;
    max-width: none;
    min-width: 55px!important;
    min-height: 55px!important;
}
.welcome-card{
    padding: 13px 6px !important;
}
.welcome-card .d-flex.align-items-start {
    display: block!important;
}
.welcome-card .chatbot-icon {
    float: left;
    margin-right: 10px;
    margin-bottom: 4px;
}
.cmss-inner-box{
    background-color: #fff;
    width: 90% !important;
    height: 25% !important;
    margin-top: 28% !important;
    padding-bottom: 15px!important;
}
.category-btn {
    height: 52px;
    padding: 4px 9px !important;
    gap: 6px !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    border-radius: 9px;
    border: 1px solid 005382;
    background: #FFF;
}
.height-box{
    max-height: 803px !important;
}

.pi-form-container-mobile-acc{
    margin: 16px 0px 22px 0px;
}
.wel-card-mar{
    margin-top: 20px;
} 

.eye-symbol{
    text-decoration: underline;
    color:#005382;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
} 
.desktop-footer{
    display: none;
}
.mobile-footer {
    display: block;
    font-size: 10px;
    
}
 .footer-mobile-view {
    gap: 0.5rem !important; /* smaller gap for mobile */
}
.container-fluid {
    padding: 0 15px!important;
}

}
/*Media Query*/

@media (min-width: 992px) and (max-width: 1440px) {
}
@media (min-width: 769px) and (max-width: 991px) {
    /*Account Billing*/
    .wel-card-mar {
        margin-top: 53px!important;
    }
    .footer-new-logo{
        width:110px;
        height:auto;
    }
    .desktop-footer{
        font-size:12px;
    }
    .footer-text{
        font-size:14px;
    }
}
@media (max-width: 767px) {
    .welcome-text p {
        font-size: 14px !important;
        line-height: 24px !important;
    }
    .linked-sections-wrapper{
        padding:1px!important;
    }
    .mob-pd{
        padding:2px!important;
    }
    .not-rr {
        font-size: 14px !important;
    }
    .tour-buttons .btn {
        font-size: 15px!important;
    }
    .chatbot-icon img {
        width: 55px !important;
    }
    .row.mt-4 .add-home-service-tour {
        margin-bottom: 18px;
        font-size: 18px;
    }

    .disbled-bg-bg {
        font-size: 16px !important;
        line-height: 26px!important;
    }
    .chart-view-group {
        padding-top: 15px !important;
    }
    .w-30-cus,
    .w-80-cus {
        margin: 0 auto !important;
        border-radius: 10px !important;
    }

    .w-30-cus {
        width: 60% !important;
    }
    .w-80-cus {
        width: 60% !important;
    }
    .dashboard-wrapper {
        /* min-height: 100vh; */
        min-height: 0vh !important;
    }
    .toggle-icon .bi {
        transition: transform 0.3s ease;
    }

    .toggle-icon[aria-expanded="true"] .bi {
        transform: rotate(180deg);
    }
    .ironhorse-branding {
        border: 1px solid #dfeaf2;
        border-radius: 25px !important;
    }
    .payments-chart-section{
        border-radius: 25px !important;
    }
    .services-overview {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        width: 100%;
    }
    .service_card{
        width: 100%!important;
    }
    .btn-vm{
        width: 100%!important;
    }
    
    .service-left,
    .service-right {
        flex: 0 0 40%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .vertical-divider {
        width: 1px;
        background-color: #ccc;
        height: 110px; 
    }
    .service-left .service-icon img {
        width: 56px;  
        height: auto;
    }
    .hh-icon-chimney {
        top: 21px!important;
        left:6px;
        width:20px!important;
    }
    .hh-icon-smoke {
    top: 9px!important;
    width: 15px!important;
    left:5px!important;
    }
    .hh-icon-roof {
    top: 20px!important;
    width:100px!important;
    }
    .hh-icon-wifi {
    top: -3px!important;
    width:20px!important;
    }
    .service-icon-sec-dd {
        top: 86%!important;
        gap: 4px !important;
    }
    .service-icon-sec-dd img {
        width: 18px !important;
        height: 14px !important;
    }
    .service-count {
        font-size: 22px!important;
        font-weight: 600;
        line-height: 1;
    }

    .service-label {
        font-size: 16px!important;
        color: #666;
        padding-left: 5px!important;
        line-height: 1;
    }
    .hh-icon-door-group {
    position: absolute;
    top: 65px!important;
    left: 45px!important;

    }
    /* door.svg */
    .hh-icon-door-group img:first-child {
        height: 34px !important;
        width: 30px !important;
    }
    /* padlock.svg */
    .hh-icon-door-group .hh-icon-padlock {
        height: 15px !important;
        width: 30px !important;
    }
    .hh-icon-padlock {
        position: absolute!important;
        left: 11px!important;
        top: 11px!important;
    }
    /* hill.svg — group position */
    .hh-icon-hill-group {
        top: 80px !important;
    }
    /* hill.svg — first (left) hill */
    .hh-icon-hill-group img:first-child {
        width: 22px !important;
        height: auto !important;
        position: relative;
        top: 4px!important;
    }
    /* hill.svg — second (right) hill */
    .hh-icon-hill-group img:last-child {
        width: 22px !important;
        height: auto !important;
        position: relative;
        top: 4px!important;
    }
    .service-right h6 {
        font-size: 14px;   
        margin-bottom: 5px;
    }
    
    .service-right .fees-amount {
        font-size: 18px;   
        font-weight: 700;
    }
    .services-overview {
       min-height:0px!important;
       padding:38px!important;
    }
    .service-co-la{
        display: flex;
        flex-direction: row;
        align-items: baseline;
    }
    .payment-service {
        font-size: 14px!important;
        line-height: 24px!important;
        
    }
    .payment-amount {
        font-size: 14px!important;
        line-height: 24px!important;
       font-weight: 500!important;
    }
    .payment-date {
        font-size: 14px!important;
        line-height: 24px!important;
       font-weight: 500!important;
    }
    /* .custom-view-charts-btn {
        background-color: #00395A !important;
        border-color: #00395A !important;
    }
    .custom-view-charts-btn:hover {
        background-color: #002842 !important; 
        border-color: #002842 !important;
    } */
    .dash-cus{
        background-color: #F5F7FA;
    }
    /* .dashboard-main {
        margin-top:10px!important;
    } */
    .chart-header-custom{
        align-items: start;
    }
    .chart-view-select{
        padding: 4px 45px 4px 14px;
    }
/*Account Billing*/
    div.dataTables_length,
    .dataTables_wrapper .dataTables_length {
      display: none !important;
    }
    .update-payment-btn{
        font-size:11px!important;
    }
    .billing-value {
        font-size: 14px;
    }
    acf-inn-sec label {
        color: #001A29;
        font-size: 12px;
    }
    .para-copy{
        font-size:13px;
    }
    .billing-table-conatiner table th {
        font-size: 14px!important;
    }
    .dt-info{
        font-size: 12px;
    }
    .dt-length{
        font-size: 12px;
    }
    .dt-search{
        font-size: 12px;
    }
 /*My Account Billing*/
   .dashboard-section-footer{
    min-height: 100vh!important;
   }
   .save-btn button {
    padding: 5px 40px;
}
.mobile-footer {
    display: block;
    font-size: 10px;
    
    
}

.modal-title-new{
    font-size: 16px!important;
    /* padding-top: 20px; */
   }

  .curr-mob{
    font-size: 14px!important;
    padding-top: 0;
    font-weight:500;
    color:#232323;
    line-height:20px;
   }

  /* Additional Service Address Modal – mobile overrides */
  .svc-addr-modal-dialog {
    padding: 4px;
    margin: 4px auto;
  }

  .svc-addr-modal-content {
    padding: 24px 10px 50px 10px;
  }

  .svc-addr-modal-header {
    padding-bottom: 16px;
  }

  .svc-addr-modal-footer {
    gap: 16px;
    padding-top: 16px;
  }

}
@media (min-width: 360px) and (max-width: 520px) {
    .chart-title-custom {
        font-size: 22px !important;
        line-height: 30px !important;
    }
    .content-section .new-enrollment-form{
        margin-top: 0px!important;
    }
    .main-content-sec-global .pcus-top{
        padding-top: 7px!important;
        padding-bottom: 8px!important;
    }
    .mobile-no-padding {
        padding: 0 !important;
    }
    .custom-delete-modal{
        top: 80px!important;
        width: 95%!important;
        margin: 0 auto;
        height: 387px;
    }
    .desktop-br {
        display: none;
    }

    .mobile-text-canc{
        text-align: left!important;
    }
    .chart-view-group {
        padding-top: 15px !important;
    }
    .w-30-cus,
    .w-80-cus {
        margin: 0 auto !important;
        border-radius: 10px !important;
    }

    .w-30-cus {
        width: 60% !important;
    }
    .w-80-cus {
        width: 60% !important;
    }
    .ironhorse-branding {
        border: 1px solid #dfeaf2;
        border-radius: 25px !important;
    }
    .payments-chart-section{
        border-radius: 25px !important;
    }
   
/* .service-left .service-icon img {
    width: 85px;  
    height: auto;
} */

.service-count {
    font-size: 22px!important;
    font-weight: 600;
}

.service-label {
    font-size: 16px!important;
    color: #666;
    padding-left: 10px;
}

.service-right h6 {
    font-size: 14px;   
    margin-bottom: 5px;
}

.service-right .fees-amount {
    font-size: 18px;   
    font-weight: 700;
}
.services-overview {
   min-height:0px!important;
   padding: 20px 10px 14px 10px !important;
}
.service-co-la{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
.service-left,
.service-right {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.payment-service {
    font-size: 14px!important;
    line-height: 24px!important;
    
}
.payment-amount {
    font-size: 14px!important;
    line-height: 24px!important;
   font-weight: 500!important;
}
.payment-date {
    font-size: 14px!important;
    line-height: 24px!important;
   font-weight: 500!important;
}
.disbled-bg-bg {
    font-size: 16px !important;
    line-height: 26px!important;
}
/* .custom-view-charts-btn {
    background-color: #00395A !important;
    border-color: #00395A !important;
}
.custom-view-charts-btn:hover {
    background-color: #002842 !important; 
    border-color: #002842 !important;
} */
.dash-cus{
    background-color: #F5F7FA;
}
/* .dashboard-main {
    margin-top:10px!important;
} */
.chart-header-custom{
    align-items: start;
}
.chart-view-select{
    padding: 4px 50px 4px 14px;
}
.billing-table-conatiner table th {
    font-size: 12px!important;
}
.dt-info{
    font-size: 10px;
}
.dt-length{
    font-size: 12px;
}
.dt-search{
    font-size: 12px;
}
 /*My Account Billing*/ 

   .modal-body-mob{
    padding-top: 0;
   }
   .serviceAddressOth-mob, .apartmentAddress-mob, .serviceCity-mob, .serviceState-mob, .serviceZipcode-mob{
    font-size: 12px;
   }
   .modal-footer {
    padding:0px!important;
   }
   .dashboard-section-footer{
    min-height: 100vh!important;
   }
   .save-btn button {
    padding: 5px 40px;
}
.footer-mobile-view {
    gap: 0.5rem !important; /* smaller gap for mobile */
}
.mobile-footer {
    display: block;
    font-size: 10px;
    
}
  /* Vertical Divider */
  .vertical-divider {
    width: 1px;
    height: 140px;
    background: #ddd;
    margin: 0 15px;
    flex-shrink: 0; 
}
}
@media (min-width: 320px) and (max-width: 360px) {
    .update-payment-btn {
        font-size: 9px !important;
    }
    .detfs-eml {
        color: #005382;
        font-size: 13px;
    }
    .dashboard-section-footer{
        min-height: 100vh!important;
       }
       .save-btn button {
        padding: 5px 40px;
    }
    .footer-mobile-view {
        gap: 0.5rem !important; /* smaller gap for mobile */
    }
  /* Vertical Divider */
  .vertical-divider {
    width: 1px;
    height: 140px;
    background: #ddd;
    margin: 0 15px;
    flex-shrink: 0; 
}
}