:root {
            --primary-color: #00939C;
            --secondary-color: #006670;
            --accent-color: #FF7F50;
            --light-bg: #e1f1f2;
            --dark-text: #2d3748;
            --gray-text: #718096;
            --white-color : #ffffff;
            --bs-primary-rgb: 4, 134, 149 !important;
            --bs-card-cap-color: #ffffff !important;
            --bs-link-color-rgb: 4, 134, 149;
            --tertiary-color: #66B2B2;
            --primary:#00939C;
     --primary-hover: #006670;
    --primary-pressed: #66B2B2;
        }
        
        body {
            font-family: 'Tajawal', sans-serif;
            color: var(--dark-text);
            background-color: var(--light-bg);;
            line-height: 1.6;
        }

h1, h2, h3, h4,h5 {
    color : var(--secondary-color) !important;
}
.card-title {
        color : var(--white-color) !important;
}
//e1f1f2

.breadcrumb a{
    color: #f00 !important;
}
 
 
        /* Modern Navbar */
        .navbar {
            background: white;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            padding: 0.5rem 1rem;
        }
        
        .navbar-brand img {
            height: 40px;
            transition: all 0.3s ease;
        }
        
        .navbar-brand img:hover {
            transform: scale(1.05);
        }
        
        .nav-item {
            margin: 0 0.5rem;
            position: relative;
        }
        
        .nav-link {
            color: var(--dark-text) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 6px;
            transition: all 0.3s ease;
        }
        
        .nav-link:hover, .nav-link:focus {
            color: var(--primary-color) !important;
            background: rgba(0, 163, 168, 0.1);
        }
        
        .nav-link.active {
            color: var(--primary-color) !important;
            font-weight: 700;
        }
        
        .nav-link i {
            margin-right: 0.5rem;
            font-size: 1.1rem;
        }
          .nav-link i, .dropdown-item i {
            margin-right: 0.5rem; /* Adjust as needed */
            white-space: nowrap;
        }    
          .nav-link  {
             white-space: nowrap;
        }          
        .dropdown-menu {
            border: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 0.5rem 0;
            position: absolute !important;
        }
        
        .dropdown-item {
            padding: 0.5rem 1.5rem;
            color: var(--dark-text);
            transition: all 0.2s ease;
        }
        
        .dropdown-item:hover {
            background: var(--primary-color);
            color: white;
        }
        
        /* Hero Section */
        .hero-section {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 4rem 0;
            position: relative;
            overflow: hidden;
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 40%;
            height: 100%;
            background: url('../images/medical-team.png') no-repeat right center;
            background-size: contain;
            opacity: 0.45;
        }
        
        .hero-content {
            max-width: 600px;
        }
        
        .hero-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color : var(--accent-color) !important;
        }
        
        .hero-subtitle {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }
        
        .search-container {
            background: white;
            border-radius: 50px;
            
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }
        
        .search-input {
            border: none;
            padding: 12px 20px;
            border-radius: 50px 0 0 50px;
            width: 70%;
            outline: none;
        }
        
        .search-btn {
            background: var(--accent-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 0 50px 50px 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .search-btn:hover {
            background: #ff5252;
        }
        
        /* Features Section */
        .features-section {
            padding: 4rem 0;
            background: var(--light-bg);
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 2rem;
            font-weight: 700;
            color: var(--dark-text);
            display: inline-block;
        }
        
        .section-title h2::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background: var(--primary-color);
            margin: 15px auto 0;
            border-radius: 2px;
        }
        
        .feature-card {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            height: 100%;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            width: 70px;
            height: 70px;
            background: rgba(0, 163, 168, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            color: var(--primary-color);
            font-size: 1.8rem;
        }
        
        .feature-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--dark-text);
        }
        
        .feature-desc {
            color: var(--gray-text);
            font-size: 0.95rem;
        }
        
        /* Categories Section */
        .categories-section {
            padding: 4rem 0;
        }
        
        .category-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
            border: none;
            text-decoration: none;
            color: var(--dark-text);
            display: block;
        }
        
        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            color: var(--primary-color);
        }
        
        .category-img {
            height: 120px;
            background: var(--tertiary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white-color);
            font-size: 2.5rem;
        }
        
        .category-body {
            padding: 1.5rem;
            text-align: center;
        }
        
        .category-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        /* Emergency Section */
        .emergency-section {
            background: linear-gradient(135deg, #ff6b6b, #ff4757);
            color: white;
            padding: 3rem 0;
            border-radius: 12px;
            margin: 3rem auto;
            position: relative;
            overflow: hidden;
        }
        
        .emergency-content {
            position: relative;
            z-index: 2;
        }
        
        .emergency-section::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        .emergency-section::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -80px;
            width: 250px;
            height: 250px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        .emergency-btn {
            background: white;
            color: #ff4757;
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .emergency-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .emergency-btn i {
            margin-right: 8px;
        }
        
        /* Doctors Section */
        .doctors-section {
            padding: 4rem 0;
            background: var(--light-bg);
        }
        
        .doctor-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
        }
        
        .doctor-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
.doctor-img {
    /* Remove max-height, as padding will control the height relative to width */
    /* max-height: 200px; */

    /* The core of the square aspect ratio trick */
    position: relative; /* Needed for padding-bottom trick */
    height: 0; /* Collapse height, padding will define it */
    padding-bottom: 100%; /* Makes the height equal to the width (1:1 aspect ratio) */

    /* Existing background properties */
    background: #eee; /* Fallback background color */
    background-size: cover; /* Ensures the image covers the entire square area */
    background-position: center; /* Centers the image within the square */
    background-repeat: no-repeat; /* Ensure image doesn't repeat */

    /* Optional: Add rounded corners for aesthetics, as per general instructions */
    border-radius: 0.5rem; /* Adjust as needed for desired roundness */
    overflow: hidden; /* Ensures background image doesn't spill out if border-radius is applied */
}
        
        .doctor-body {
            padding: 1.5rem;
        }
        
        .doctor-name {
            font-weight: 700;
            margin-bottom: 0.5rem;
            color : var(--primary-color);
        }
        
        .doctor-specialty {
            color: var(--primary-color);
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: block;
        }
        
        .doctor-rating {
            color: #ffc107;
            margin-bottom: 1rem;
        }
        
        .view-all {
            text-align: center;
            margin-top: 2rem;
        }
        
        .view-all-btn {
            color: var(--primary-color);
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .view-all-btn:hover {
            color: var(--secondary-color);
        }
        
        .view-all-btn i {
            margin-left: 8px;
            transition: all 0.3s ease;
        }
        
        .view-all-btn:hover i {
            transform: translateX(5px);
        }
        
        /* App Section */
        .app-section {
            background: linear-gradient(135deg, var(--dark-text), #1a202c);
            color: white;
            padding: 4rem 0;
            position: relative;
            overflow: hidden;
        }
        
        .app-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('images/dots-pattern.png') repeat;
            opacity: 0.1;
        }
        
        .app-content {
            position: relative;
            z-index: 2;
        }
        
        .app-badge {
            display: inline-block;
            margin-right: 15px;
            margin-top: 20px;
        }
        
        .app-badge img {
            height: 45px;
            transition: all 0.3s ease;
        }
        
        .app-badge:hover img {
            transform: scale(1.05);
        }
        
        .app-mockup {
            position: relative;
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        
        /* Footer */
        .footer {
            background: var(--dark-text);
            color: white;
            padding: 4rem 0 2rem;
        }
        
        .footer-logo {
            margin-bottom: 1.5rem;
        }
        
        .footer-logo img {
            height: 40px;
        }
        
        .footer-about {
            opacity: 0.8;
            margin-bottom: 1.5rem;
            font-size: 0.95rem;
        }
        
        .footer-title {
            font-weight: 600;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 10px;
            color: var(--accent-color)!important;
        }
        
        .footer-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 70px;
            height: 2px;
            background: var(--accent-color);
        }
        
        .footer-links {
            list-style: none;
            padding: 0;
        }
        
        .footer-links li {
            margin-bottom: 0.8rem;
        }
        
        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
        }
        
        .footer-links a:hover {
            color: white;
            transform: translateX(5px);
        }
        
        .footer-links a i {
            margin-right: 8px;
            width: 20px;
            text-align: center;
        }
        
        .footer-social {
            display: flex;
            margin-top: 1.5rem;
        }
        
        .footer-social a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            color: white;
            transition: all 0.3s ease;
        }
        
        .footer-social a:hover {
            background: var(--primary-color);
            transform: translateY(-3px);
        }
        
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 2rem;
            margin-top: 2rem;
            text-align: center;
            opacity: 0.7;
            font-size: 0.9rem;
        }
        
        /* Responsive Adjustments */
        @media (max-width: 992px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .hero-section::before {
                opacity: 0.1;
            }
        }
        
        @media (max-width: 768px) {
            .hero-section {
                text-align: center;
                padding: 3rem 0;
            }
            
            .hero-section::before {
                display: none;
            }
            
            .hero-content {
                max-width: 100%;
            }
            
            .search-container {
                flex-direction: column;
                background: transparent;
                box-shadow: none;
            }
            
            .search-input {
                width: 100%;
                border-radius: 50px;
                margin-bottom: 10px;
            }
            
            .search-btn {
                width: 100%;
                border-radius: 50px;
            }
            
            .section-title h2 {
                font-size: 1.8rem;
            }
        }
        
        /* Animation Classes */
        .fade-in {
            animation: fadeIn 1s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .slide-up {
            animation: slideUp 0.8s ease-out;
        }
        
        @keyframes slideUp {
            from { 
                opacity: 0;
                transform: translateY(30px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }
        
html, body {
    overflow-x: hidden;
    width: 100%;
}

.navbar-nav {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.navbar-collapse {
    position: relative;
    overflow: visible;
    max-width: 100vw;
    padding-right: 0;
    padding-left: 0;
}

.dropdown-menu {
    min-width: 200px;
}        
        
/* Custom styles for .btn-outline-primary to use your defined colors */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    color: var(--white-color); /* Text color on hover */
    background-color: var(--primary-color); /* Background color on hover */
    border-color: var(--primary-color); /* Border color on hover */
}

.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    color: var(--white-color);
    background-color: var(--secondary-color); /* A slightly darker primary for active/focus */
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 147, 156, 0.25); /* Custom focus ring using primary color RGB */
}

/* Ensure the disabled state also respects your colors if needed */
.btn-outline-primary:disabled {
    color: var(--primary-color);
    background-color: transparent;
    border-color: var(--primary-color);
    opacity: 0.65; /* Standard disabled opacity */
}

/* Custom styles for .btn-primary to use your defined colors */
.btn-primary {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    color: var(--white-color);
    background-color: var(--secondary-color); /* A slightly darker primary for hover */
    border-color: var(--secondary-color);
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary.active {
    color: var(--white-color);
    background-color: var(--secondary-color); /* Same as hover for consistency */
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 147, 156, 0.25); /* Custom focus ring using primary color RGB */
}

/* Ensure the disabled state also respects your colors */
.btn-primary:disabled {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    opacity: 0.65; /* Standard disabled opacity */
}
/* Custom styles for Bootstrap Pagination to use your defined colors */

/* Base style for page links */
.page-link {
    color: var(--primary-color); /* Text color for non-active links */
    border-color: var(--primary-color); /* Border color for non-active links */
    background-color: var(--white-color); /* Background for non-active links */
}

/* Hover state for page links */
.page-link:hover {
    color: var(--white-color); /* Text color on hover */
    background-color: var(--primary-color); /* Background color on hover */
    border-color: var(--primary-color); /* Border color on hover */
}

/* Active state for the current page link */
.active>.page-link, .page-link.active {
    color: var(--white-color); /* Text color for active link */
    background-color: var(--primary-color); /* Background color for active link */
    border-color: var(--primary-color); /* Border color for active link */
}

/* Focus state for page links (important for accessibility) */
.page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 147, 156, 0.25); /* Custom focus ring using primary color RGB */
    border-color: var(--primary-color); /* Keep border color consistent on focus */
}

/* Disabled state for page links (e.g., prev/next buttons) */
.page-item.disabled .page-link {
    color: var(--gray-text); /* Lighter text for disabled links */
    background-color: var(--light-bg); /* Lighter background for disabled links */
    border-color: var(--light-bg); /* Lighter border for disabled links */
    opacity: 0.7; /* Make them slightly transparent */
}


.password-strength-meter {
            height: 10px; /* Height of the bar */
            background-color: #e0e0e0; /* Default background */
            border-radius: 5px;
            margin-top: 5px;
            overflow: hidden; /* Ensure the bar stays within bounds */
        }
        .password-strength-bar {
            height: 100%;
            width: 0%; /* Initial width */
            transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Smooth transitions */
            border-radius: 5px;
        }

        /* Strength Levels Colors */
        .strength-weak { background-color: #dc3545; /* Red */ }
        .strength-medium { background-color: #ffc107; /* Orange */ }
        .strength-strong { background-color: #28a745; /* Green */ }
        .strength-very-strong { background-color: #1a7e32; /* Darker Green */ }

        .password-strength-text {
            font-size: 0.85em;
            margin-top: 5px;
            color: #6c757d;
        }
        .text-weak { color: #dc3545; }
        .text-medium { color: #ffc107; }
        .text-strong { color: #28a745; }
        .text-very-strong { color: #1a7e32; }
        .user-profile-panel {
            position: fixed;

        }
/* Text direction overrides - !important to override global RTL */
.text-direction-ltr {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
}

.text-direction-rtl {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: embed !important;
}

/* Specific fix for paragraphs within reviews */
.review-item p {
    margin-bottom: 0 !important;
}