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


 /* Top Navigation */
 .top-nav {
     background: white;
     padding: 15px 0;
     border-bottom: 1px solid #e5e7eb;
 }

 .nav-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .logo-section {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .logo-img {
     height: 45px;
 }

 .nav-title {
     font-size: 14px;
     color: #6b7280;
 }

 .nav-actions {
     display: flex;
     gap: 12px;
 }

 .btn-login {
     background: white;
     color: #268CC0;
     border: 1px solid #268CC0;
     border-radius: 6px;
     padding: 8px 20px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     gap: 10px;
     align-items: center;
 }

 .btn-signup {
     background: #268CC0;
     color: white;
     border: none;
     border-radius: 6px;
     padding: 8px 20px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
 }

 /* Filter Bar */
 .filter-bar {
     background: #e0f2fe;
     padding: 15px 0;
 }

 .filter-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     align-items: center;
 }

 .filter-btn {
     background: white;
     border: 1px solid #ccc;
     border-radius: 46px;
     padding: 8px 16px;
     font-size: 13px;
     color: #525252;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .filter-btn.active {
     background: #ffffff;
     color: #0A76C0;
     border-color: #ccc;
 }

 .filter-btn.active svg {
     color: #444;
 }

 .search-bar-wrapper {
     flex: 1;
     max-width: 400px;
     position: relative;
     margin-left: auto;
 }

 .search-input {
     width: 100%;
     padding: 8px 40px 8px 16px;
     border: 1px solid #ccc;
     border-radius: 25px;
     font-size: 13px;
 }

 .search-btn {
     position: absolute;
     right: 1px;
     top: 50%;
     transform: translateY(-50%);
     background: #268cc0;
     color: white;
     border: none;
     border-radius: 0 25px 25px 0;
     padding: 6px 12px;
     cursor: pointer;
 }

 /* Main Content */
 .main-content {
     max-width: 1400px;
     margin: 30px auto;
     padding: 0 20px;
 }

 .results-header {
     margin-bottom: 20px;
 }

 .results-count {
     font-size: 20px;
     font-weight: 700;
     color: #2c2c2c;
 }

 .date-range {
     font-size: 14px;
     color: #6b7280;
     margin-bottom: 15px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .date-nav-btn {
     background: none;
     border: none;
     color: #182C52;
     cursor: pointer;
     font-size: 18px;
 }

 /* Provider Cards */
 .provider-card {
     background: white;
     border: 1px solid #e5e7eb;
     border-radius: 12px;
     padding: 20px;
     margin-bottom: 20px;
     display: flex;
     gap: 20px;
     align-items: end;
 }

 .provider-left {
     flex: 0 0 48%;
 }

 .provider-header {
     display: flex;
     gap: 15px;
     margin-bottom: 15px;
 }

 .provider-photo {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     object-fit: cover;
 }

 .provider-info {
     width: 100%;
 }

 .provider-info h3 {
     font-size: 20px;
     font-weight: 500;
     color: #0A76C0;
     margin-bottom: 8px;
     cursor: pointer;
 }

 .provider-info h3:hover {
     text-decoration: underline;
 }

 .provider-title {
     font-size: 16px;
     color: #000;
     margin-bottom: 8px;
     font-weight: 500;
 }

 .rating {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
 }

 .stars {
     /* color: #fbbf24; */
     background-color: #536c771a;
     color: #000;
     display: flex;
     padding: 2px 8px 2px 6px;
     align-items: center;
     gap: 7px;
     border-radius: 30px;
     font-weight: 500;
 }

 .rating-score {
     font-weight: 600;
     color: #2c2c2c;
 }

 .beforedot {
     position: relative;
     padding-left: 10px;
 }

 .beforedot::before {
     position: absolute;
     content: '•';
     left: 0;
     top: 0px;
 }

 .review-count {
     color: #333;
     text-decoration: underline;
     font-weight: 500;

 }

 .provider-badges {
     display: flex;
     gap: 8px;
     margin-bottom: 12px;
 }

 .badge-custom {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     /* padding: 4px 10px; */
     border-radius: 4px;
     font-size: 12px;
     font-weight: 600;
 }

 .badge-video {}

 .camThumb {
     width: 18px;
     height: 18px;
     border-radius: 50%;
     border: 0.556px solid #0A76C0;
     background: #E9F6FF;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .badge-external {
     /* background: #f3f4f6; */
     /* color: #6b7280; */
 }

 .network-notice {
     background: #EFEFEF;
     padding: 12px 12px;
     border-radius: 6px;
     font-size: 14px;
     color: #000000;
     margin-bottom: 12px;
     display: flex;
     /* align-items: center; */
     gap: 6px;
 }

 .network-notice i {
     color: #0A76C0;
 }

 .network-link {
     color: #333333;
 }

 .provider-features {
     list-style: none;
     padding: 0;
     margin-bottom: 0px;
     gap: 10px;
 }

 .provider-features li {
     font-size: 14px;
     color: #333333;
     margin-bottom: 6px;
     padding-left: 12px;
     position: relative;
     font-weight: 500;
 }

 .provider-features li::before {
     content: '•';
     position: absolute;
     left: 0;
 }

 .btn-book {
     background: white;
     color: #268CC0;
     ;
     border: 1px solid #268CC0;
     ;
     border-radius: 50px;
     padding: 4px 12px;
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
     width: 100%;
     transition: all 0.2s;
     white-space: nowrap;
     margin-top: 1rem;
 }

 .btn-book:hover {
     background: #268CC0;
     ;
     color: white;
 }

 /* Calendar Grid */
 .calendar-grid {
     flex: 1;
     border-left: 1px solid #dbeafe;
     padding-left: 15px;
     display: grid;
     grid-template-rows: repeat(2, 1fr);
     gap: 8px;
 }

 .calendar-week {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 8px;
 }

 .calendar-header {
     text-align: center;
     font-size: 13px;
     font-weight: 600;
     color: #6b7280;
     padding: 16px 0 10px;
     background: #F3F3F3;
     border: 1px solid #F3F3F3;
     position: relative;
     border-radius: 4px;
 }

 .thumb-day-name {
     position: absolute;
     top: 4px;
     left: 4px;
     right: 4px;
     display: flex;
     gap: 6px;
     justify-content: space-between;
 }

 .calendar-date {
     text-align: center;
     font-size: 11px;
     padding: 4px;
     border-radius: 0;
     height: 100%;
     min-height: 72px;
     align-content: center;
 }

 .date-number {
     display: block;
     font-weight: 600;
     font-size: 14px;
     color: #2c2c2c;
     margin-bottom: 2px;
 }

 .date-available .date-number {
     display: block;
     font-weight: 600;
     font-size: 14px;
     color: #068feb;
     margin: 0 auto;
     background: #d3e6f7;
     width: 40px;
     height: 40px;
     text-align: center;
     padding: 9px;
     border-radius: 50%;
     /* border: 1px solid #068feb; */
 }

 .date-label-apointment {
     font-size: 11px;
     color: #6b7280;
     position: absolute;
     bottom: 4px;
     left: 4px;
     right: 4px;
 }

 .date-available {
     color: #0369a1;
     cursor: pointer;
 }

 .calendar-header:hover {
     background: #0A76C0;
     color: #fff;
 }

 .calendar-header:has(.date-unavailable) {
     opacity: 0.6;
 }

 .calendar-header:has(.date-unavailable):hover {
     background: aliceblue;
     color: #2c2c2c;
 }

 .calendar-header:has(.date-unavailable):hover .date-unavailable>.date-number,
 .calendar-header:has(.date-unavailable):hover .date-label-apointment {
     background: unset;
     color: #2c2c2c;
 }

 .calendar-header:hover .date-label-apointment {
     background: #0A76C0;
     color: #fff;
 }

 .calendar-header:hover .date-unavailable>.date-number {
     color: #ffffff;
 }

 .date-unavailable {
     color: #9ca3af;
 }


 /* Footer */
 .footer {
     background: white;
     padding: 30px 0 20px;
     border-top: 1px solid #e5e7eb;
     margin-top: 50px;
 }

 .footer-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
     text-align: center;
 }

 .footer-logo {
     height: 50px;
     margin-bottom: 20px;
 }

 .footer-links {
     display: flex;
     justify-content: center;
     gap: 25px;
     margin-bottom: 20px;
     flex-wrap: wrap;
 }

 .footer-links a {
     color: #023047;
     text-decoration: none;
     font-size: 14px;
 }

 .footer-links a:hover {
     color: #182C52;
 }

 .social-icons {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-bottom: 20px;
 }

 .social-icon {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: #ffffff;
     color: #023047;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background 0.2s;
 }

 .social-icon:hover {
     background: #182C52;
 }

 .copyright {
     font-size: 14px;
     color: #F9F9F9;
 }

 .dark-footer {
     background: #182C52;
     padding: 15px 0;
     color: white;
 }

 .pagination {
     display: flex;
     justify-content: flex-end;
     gap: 5px;
     margin-top: 20px;
 }

 .page-btn {
     border: 1px solid #d1d5db;
     background: white;
     padding: 8px 14px;
     border-radius: 6px;
     font-size: 14px;
     cursor: pointer;
     color: #2c2c2c;
 }

 .page-btn.active {
     background: #182C52;
     color: white;
     border-color: #182C52;
 }

 .page-btn:hover:not(.active) {
     background: #f8f9fa;
 }


 /* ----------------- main more filter UI css  --------------- */
 .main-m-filter {
     position: fixed;
     inset: 0;
     background: #00000080;
     display: none;
 }

 .main-m-filter.show {
     display: block;
 }

 .main-m-filter .filter-panel {
     background-color: #ffffff;
     width: 320px;
     height: 100vh;
     border-top-left-radius: 15px;
     border-bottom-left-radius: 15px;
     padding: 0 20px 20px 20px;
     display: flex;
     flex-direction: column;
     margin-left: auto;
 }

 .main-m-filter .filter-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 13px 0;
     gap: 10px;
 }

 .main-m-filter .filter-title {
     font-size: 24px;
     font-weight: 500;
     color: #333;
     margin: 0;
     flex: 1;
 }

 .main-m-filter .close-btn {
     width: 24px;
     height: 24px;
     border: none;
     background: none;
     padding: 0;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .main-m-filter .close-btn svg {
     width: 24px;
     height: 24px;
 }

 .main-m-filter .filter-content {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
 }

 .main-m-filter .filter-section {
     padding-bottom: 26px;
     border-bottom: 1px solid #e0e0e0;
     margin-bottom: 10px;
 }

 .main-m-filter .filter-section:first-child {
     padding-top: 0;
 }

 .main-m-filter .filter-section:not(:first-child) {
     padding-top: 12px;
 }

 .main-m-filter .filter-section:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }

 .main-m-filter .section-title {
     font-size: 16px;
     font-weight: 500;
     color: #333;
     margin: 0 0 20px 0;
 }

 .main-m-filter .filter-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .main-m-filter .filter-item {
     display: flex;
     /* align-items: center; */
     gap: 12px;
 }

 .main-m-filter .filter-item.align-start {
     align-items: flex-start;
 }

 .main-m-filter .form-check {
     margin: 0;
     padding: 0;
     min-height: auto;
     padding-top: 4px;
 }

 .main-m-filter .form-check-input {
     width: 16px;
     height: 16px;
     border: 1px solid #cacaca;
     border-radius: 4px;
     margin: 0;
     cursor: pointer;
     flex-shrink: 0;
 }

 .main-m-filter .form-check-input:checked {
     background-color: #0A76C0;
     border-color: #0A76C0;
 }

 .main-m-filter .form-check-input:focus {
     border-color: #0A76C0;
     box-shadow: 0 0 0 0.25rem rgba(10, 118, 192, 0.25);
 }

 .main-m-filter .filter-label {
     font-size: 16px;
     color: #333;
     margin: 0;
     cursor: pointer;
     font-weight: 500;
 }

 .main-m-filter .filter-count {
     color: #777;
     font-weight: 400;
 }

 /* Custom scrollbar */
 .main-m-filter .filter-content::-webkit-scrollbar {
     width: 6px;
 }

 .main-m-filter .filter-content::-webkit-scrollbar-track {
     background: transparent;
 }

 .main-m-filter .filter-content::-webkit-scrollbar-thumb {
     background: #cacaca;
     border-radius: 3px;
 }

 .main-m-filter .filter-content::-webkit-scrollbar-thumb:hover {
     background: #999;
 }




 @media (max-width: 1024px) {
     .provider-card {
         flex-direction: column;
     }

     .provider-left {
         flex: 1;
     }

     .calendar-week {
         grid-template-columns: repeat(4, 1fr);
     }
 }


 /* ==== 20-jan-2025 ====== */

 .rating-section {
     border-radius: 10px;
     background: #E2EBEF;
     padding: 20px;
     display: flex;
 }

 .rating-left-section h4 {
     color: #0A76C0;
     font-size: 44px;
     font-weight: 500;
 }

 .rating-left-section {
     padding-right: 20px;
 }

 .rating-right-section {
     padding-left: 20px;
     border-left: 1px solid #B4D0E3;
 }

 .review-text {
     color: #666;
     font-size: 16px;
     font-weight: 400;
 }

 .review-dat {
     color: #000;
     font-size: 16px;
     font-weight: 400;
 }

 .book-appointment-bg {
     border-radius: 10px;
     border: 1px solid #CBE1F0;
     padding: 20px;
     gap: 20px;
     margin-top: 30px;
 }

 .book-appointment-bg .badge-custom {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     border-radius: 4px;
     color: #000;
     font-size: 14px;
     font-weight: 500;
 }

 .Scheduling-text label,
 .new-patient-tabs label {
     color: #000;
     font-size: 16px;
     font-weight: 500;
 }

 .see-network {
     border-radius: 4px;
     border: 1px solid #DDD;
     padding: 10px 18px;
     margin-top: 20px;
 }

 .see-network p {
     color: #000;
     font-size: 16px;
     font-weight: 400;
 }

 .new-patient-tabs .nav-item {
     width: 50%;
 }

 .new-patient-tabs .nav-link {
     width: 100%;
     border-radius: 4px;
     border: 1px solid #DDD;
     color: #333;
     font-size: 16px;
     font-weight: 400;
 }

 .new-patient-tabs .nav-pills .nav-link.active,
 .new-patient-tabs .nav-pills .show>.nav-link {
     background: #0A76C0;
 }

 .back-btn {
     border-radius: 4px;
     border: 1px solid #333;
     padding: 8px 18px;
 }

 .right-tab .nav-tabs {
     background-color: #F3F3F3;
     border-bottom: 1px solid #999999;
 }

 .right-tab .nav-link {
     border-radius: 0;
     color: #818181;
     font-size: 14px;
     font-weight: 500;
     border-top: 0;
     border-left: 0;
     border-right: 0;
     width: 20%;
 }

 .right-tab .nav-tabs .nav-item.show .nav-link,
 .right-tab .nav-tabs .nav-link.active {
     color: #2C8DC9;
     background-color: #fff;
     border-bottom: 1px solid #2C8DC9;
 }

 .about-section h6 {
     color: #000;
     font-size: 18px;
     font-weight: 500;
 }

 .about-section p {
     color: #333;
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 8px;
 }

  .about-section h5 {
     color: #000;
     font-size: 16px;
     font-weight: 500;
 }

 .about-section ul li,
 .about-section span,
 .Getting-know-text p,
 .about-section .see-more {
     color: #555;
     font-size: 14px;
     font-weight: 400;
 }

 .about-section ul li::marker {
     color: #2C8DC9;
 }


 @media (max-width: 1024px) {
    .ipad-mobile{
        position: absolute;
        top: 15%;
        right: 20px;
      }

      .about-section ul {
        padding-left: 1rem;
      }    
}

@media only screen and (max-width: 460px) {

    .logo-section img{
        width: 150px;
    }

    .btn-login,
    .btn-signup  {
        padding: 8px;
    }

    .new-patient-tabs .nav-item,
    .right-tab .nav-link {
        width: 100%;
    }

    .provider-photo {
        width: 75px;
        height: 75px;
    }

    .provider-info h3 {
        font-size: 16px;
    }

    .provider-title {
        font-size: 14px;
    }
}




/* Base styles applied to both the initials box and the uploaded image */
.blue-oval-avatar, 
.img-circle-avatar {
    width: 80px !important;              /* Set your desired custom size here */
    height: 80px !important;             /* Must match width for a perfect circle */
    border-radius: 50% !important;        /* Forces round shape */
    flex-shrink: 0 !important;           /* Prevents warping inside layout flex rows */
}

/* Specific styling for the text initials background circle */
.blue-oval-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #2b82c9 !important; /* Medical blue hue */
    color: #ffffff !important;            /* Text color */
    font-weight: 700 !important;          
    font-size: 1.5rem !important;        
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Specific styling for the image tag to prevent face-stretching distortions */
.img-circle-avatar {
    object-fit: cover !important;        /* Crops image cleanly to fit the circle perfectly */
}