/**
 * Community Health Institute (CHI) Custom Styles
 * Brand Colors & Customizations
 */

:root {
    --chi-primary: #146912;
    --chi-secondary: #107D0A;
    --chi-text: #7A7A7A;
    --chi-accent: #B7B7B7;
    --chi-white: #FFFFFF;
    --chi-black: #000000;
    --chi-light-gray: #B7B7B7;
    --chi-bg-light: #F9F9F9;
    --chi-danger: #AE0306;
    --chi-primary-light: rgba(20, 105, 18, 0.1);
    --chi-primary-dark: #0d4d0c;
}

/* Override Theme Colors */
body {
    color: var(--chi-text);
}

/* Navigation: only show the chevron arrow on actual dropdown items */
.navbar-nav .nav-item .nav-link::before {
    display: none !important;
}
.navbar-nav .nav-item.dropdown .nav-link::before {
    display: block !important;
}

/* Primary Buttons */
.theme_btn,
.sub_btn,
.search_btn {
    background: var(--chi-primary) !important;
    border-color: var(--chi-primary) !important;
}

.theme_btn:hover,
.sub_btn:hover,
.search_btn:hover {
    background: var(--chi-secondary) !important;
    border-color: var(--chi-secondary) !important;
}

/* Border Buttons */
.theme_btn.border_btn {
    background: transparent !important;
    border: 2px solid var(--chi-primary) !important;
    color: var(--chi-primary) !important;
}

.theme_btn.border_btn:hover,
.theme_btn.border_btn.active {
    background: var(--chi-primary) !important;
    color: var(--chi-white) !important;
}

/* Free Button Style */
.free_btn {
    background: var(--chi-primary) !important;
}

.free_btn:hover {
    background: var(--chi-secondary) !important;
}

/* Gradient Backgrounds */
.gradient-bg {
    background: linear-gradient(135deg, var(--chi-primary) 0%, var(--chi-secondary) 100%) !important;
}

/* Section Titles */
.section-title h5.bottom-line {
    color: var(--chi-primary);
}

.section-title h5.bottom-line::after {
    background: var(--chi-primary);
}

/* Course Tags */
.course__tag span {
    background: var(--chi-primary-light);
    color: var(--chi-primary);
}

/* Feedback Tags */
.feedback-tag {
    background: var(--chi-primary);
}

/* Heart Icon */
.heart-icon i {
    color: var(--chi-danger);
}

/* Links */
a:hover {
    color: var(--chi-primary);
}

.sub-title a:hover {
    color: var(--chi-primary);
}

/* Main Navigation */
.main-menu .navbar-nav .nav-link:hover,
.main-menu .navbar-nav .nav-item.active .nav-link {
    color: var(--chi-primary);
}

/* Dropdown */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--chi-primary-light);
    color: var(--chi-primary);
}

/* Single Box Hover */
.single-box:hover {
    border-color: var(--chi-primary);
}

.single-box__icon img {
    filter: hue-rotate(70deg);
}

/* Category Hover */
.single-category:hover {
    border-color: var(--chi-primary);
}

/* What Box */
.what-box:hover {
    border-color: var(--chi-primary);
}

/* Video Play Button */
.video-wrapper a {
    background: var(--chi-primary);
}

.video-wrapper a:hover {
    background: var(--chi-secondary);
}

/* Social Media */
.social-media a:hover {
    background: var(--chi-primary);
    border-color: var(--chi-primary);
}

/* Footer Social */
.footer__social a:hover {
    background: var(--chi-primary);
    border-color: var(--chi-primary);
}

/* Portfolio/Filter Menu */
.portfolio-menu .gf_btn.active,
.portfolio-menu .gf_btn:hover {
    background: var(--chi-primary);
    color: var(--chi-white);
}

/* Learn Area */
.learn-area .theme_btn {
    background: var(--chi-primary) !important;
}

/* Course Meta Price */
.course__meta span:last-child {
    color: var(--chi-primary);
    font-weight: 600;
}

/* Instructor Social */
.z-instructors__thumb .social-media a:hover {
    background: var(--chi-primary);
}

/* Testimonial Quote */
.quote-icon img {
    filter: hue-rotate(70deg);
}

/* Blog Styles */
.z-blogs__content h5 {
    color: var(--chi-primary);
}

/* Subscribe Button */
.subscribe-form-box .sub_btn {
    background: var(--chi-primary) !important;
}

.subscribe-form-box .sub_btn:hover {
    background: var(--chi-secondary) !important;
}

/* Page Title Area */
.page-title-area {
    background: linear-gradient(135deg, rgba(20, 105, 18, 0.9) 0%, rgba(16, 125, 10, 0.9) 100%), url('../img/page-title-bg/01.jpg');
    background-size: cover;
    background-position: center;
}

/* Breadcrumb */
.breadcrumb-list .breadcrumb a:hover {
    color: var(--chi-white);
}

/* Course Details Tag Buttons */
.courses-tag-btn a {
    background: var(--chi-primary-light);
    color: var(--chi-primary);
}

.courses-tag-btn a:hover {
    background: var(--chi-primary);
    color: var(--chi-white);
}

/* Course Ingredients */
.courses-ingredients {
    background: var(--chi-bg-light);
    border-left: 4px solid var(--chi-primary);
}

.courses-ingredients ul li img {
    filter: hue-rotate(70deg);
}

/* Seller Rating Button */
.seller-rating .theme_btn {
    background: var(--chi-primary) !important;
}

/* Star Rating */
.star-icon a i {
    color: #ffc107;
}

/* Table Styles */
.curriculum-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.curriculum-table th {
    background: var(--chi-primary);
    color: var(--chi-white);
    padding: 15px;
    text-align: left;
    font-weight: 600;
}

.curriculum-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.curriculum-table tr:hover {
    background: var(--chi-primary-light);
}

/* Program Highlights */
.program-highlight-box {
    background: var(--chi-bg-light);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid var(--chi-primary);
}

.program-highlight-box h4 {
    color: var(--chi-primary);
    margin-bottom: 15px;
}

.program-highlight-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.program-highlight-box ul li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
}

.program-highlight-box ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--chi-primary);
    font-weight: bold;
}

/* Course Info Cards */
.course-info-card {
    background: var(--chi-white);
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    border-top: 4px solid var(--chi-primary);
}

.course-info-card h5 {
    color: var(--chi-primary);
    margin-bottom: 15px;
    font-weight: 600;
}

.course-info-card .info-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.course-info-card .info-item:last-child {
    border-bottom: none;
}

.course-info-card .info-item i {
    color: var(--chi-primary);
    margin-right: 15px;
    font-size: 18px;
    width: 25px;
}

/* Semester Tabs */
.semester-tabs {
    margin-bottom: 30px;
}

.semester-tabs .nav-tabs {
    border-bottom: 2px solid #eee;
}

.semester-tabs .nav-link {
    color: var(--chi-text);
    border: none;
    padding: 15px 25px;
    font-weight: 600;
}

.semester-tabs .nav-link.active,
.semester-tabs .nav-link:hover {
    color: var(--chi-primary);
    border-bottom: 3px solid var(--chi-primary);
    background: transparent;
}

/* Who Should Enroll */
.who-enroll-list {
    list-style: none;
    padding: 0;
}

.who-enroll-list li {
    padding: 12px 0;
    padding-left: 35px;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.who-enroll-list li::before {
    content: '👤';
    position: absolute;
    left: 0;
}

/* Career Pathways */
.career-list {
    list-style: none;
    padding: 0;
}

.career-list li {
    padding: 12px 0;
    padding-left: 35px;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.career-list li::before {
    content: '🎯';
    position: absolute;
    left: 0;
}

/* Registration Form */
.registration-form {
    background: var(--chi-white);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.registration-form h3 {
    color: var(--chi-primary);
    margin-bottom: 30px;
    text-align: center;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--chi-black);
}

.form-group label span.required {
    color: var(--chi-danger);
}

.form-control {
    width: 100%;
    padding: 12px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--chi-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--chi-primary-light);
}

.form-select {
    width: 100%;
    padding: 12px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    background-color: var(--chi-white);
    height: auto;
    line-height: 1.5;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
    padding-right: 40px;
}

.form-select:focus {
    border-color: var(--chi-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--chi-primary-light);
}

.form-select option {
    padding: 10px;
    line-height: 1.5;
}

/* CHI Header Top Bar */
.chi-topbar {
    background: var(--chi-primary);
    padding: 10px 0;
    color: var(--chi-white);
}

.chi-topbar a {
    color: var(--chi-white);
}

.chi-topbar a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Hero Section */
.chi-hero {
    background: linear-gradient(135deg, var(--chi-primary) 0%, var(--chi-secondary) 100%);
    padding: 100px 0;
    color: var(--chi-white);
}

.chi-hero h1 {
    color: var(--chi-white);
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

.chi-hero p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
}

/* Glass Effect Bubbles */
.glass-bubble {
    transition: all 0.3s ease;
    animation: float 3s ease-in-out infinite;
}

.glass-bubble:nth-child(2) {
    animation-delay: 0.5s;
}

.glass-bubble:nth-child(3) {
    animation-delay: 1s;
}

.glass-bubble:nth-child(4) {
    animation-delay: 1.5s;
}

.glass-bubble:nth-child(5) {
    animation-delay: 2s;
}

.glass-bubble:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Responsive Glass Bubbles */
@media (max-width: 991px) {
    .glass-bubble {
        display: none !important;
    }
    
    .slider__img__box {
        min-height: auto !important;
    }
}

/* Feature Cards */
.chi-feature-card {
    background: var(--chi-white);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.chi-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.chi-feature-card .icon {
    width: 80px;
    height: 80px;
    background: var(--chi-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.chi-feature-card .icon i {
    font-size: 35px;
    color: var(--chi-primary);
}

.chi-feature-card h4 {
    color: var(--chi-black);
    margin-bottom: 15px;
}

/* Course Cards CHI Style */
.chi-course-card {
    background: var(--chi-white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.chi-course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.chi-course-card .course-thumb {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.chi-course-card .course-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.chi-course-card:hover .course-thumb img {
    transform: scale(1.05);
}

.chi-course-card .course-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--chi-primary);
    color: var(--chi-white);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.chi-course-card .course-content {
    padding: 25px;
}

.chi-course-card .course-content h4 {
    margin-bottom: 15px;
    line-height: 1.4;
}

.chi-course-card .course-content h4 a {
    color: var(--chi-black);
}

.chi-course-card .course-content h4 a:hover {
    color: var(--chi-primary);
}

.chi-course-card .course-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #eee;
    margin-top: 15px;
}

.chi-course-card .course-meta span {
    display: flex;
    align-items: center;
    color: var(--chi-text);
    font-size: 14px;
}

.chi-course-card .course-meta span i {
    margin-right: 5px;
    color: var(--chi-primary);
}

.chi-course-card .course-price {
    color: var(--chi-primary);
    font-weight: 700;
    font-size: 18px;
}

/* About CHI Section */
.chi-about-section {
    background: var(--chi-bg-light);
}

.chi-about-content h2 {
    color: var(--chi-black);
    margin-bottom: 20px;
}

.chi-about-content h5 {
    color: var(--chi-primary);
    margin-bottom: 15px;
}

/* Stats Counter */
.chi-stats {
    background: var(--chi-primary);
    padding: 60px 0;
    color: var(--chi-white);
}

.chi-stat-item {
    text-align: center;
}

.chi-stat-item h2 {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

.chi-stat-item p {
    font-size: 16px;
    color: #ffffff;
    opacity: 0.9;
}

/* Accreditation Badge */
.accreditation-badge {
    display: inline-flex;
    align-items: center;
    background: var(--chi-primary-light);
    padding: 10px 20px;
    border-radius: 30px;
    margin: 5px;
}

.accreditation-badge i {
    color: var(--chi-primary);
    margin-right: 10px;
    font-size: 20px;
}

.accreditation-badge span {
    color: var(--chi-primary);
    font-weight: 600;
}

/* Contact Info */
.chi-contact-info {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.chi-contact-info i {
    width: 45px;
    height: 45px;
    background: var(--chi-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chi-primary);
    margin-right: 15px;
}

/* Responsive */
@media (max-width: 991px) {
    .chi-hero h1 {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .chi-hero h1 {
        font-size: 28px;
    }
    
    .registration-form {
        padding: 25px;
    }
    
    .curriculum-table {
        font-size: 14px;
    }
    
    .curriculum-table th,
    .curriculum-table td {
        padding: 10px 8px;
    }
}

/* ========================================
   IMPROVED HEADER NAVIGATION STYLES
   ======================================== */

/* Main Header Background */
.main-header-area {
    background: var(--chi-white);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.main-header-area.main-head-three {
    background: var(--chi-white);
}

/* Ensure navigation text is visible */
.main-menu .navbar-nav .nav-link {
    color: var(--chi-black) !important;
    font-weight: 600;
    padding: 10px 15px;
}

.main-menu .navbar-nav .nav-link:hover,
.main-menu .navbar-nav .nav-item.active .nav-link {
    color: var(--chi-primary) !important;
}

/* Programmes Mega Menu Dropdown */
.main-menu .navbar-nav .nav-item.dropdown .dropdown-menu {
    min-width: 380px;
    padding: 15px 0;
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    max-height: 70vh;
    overflow-y: auto;
}

/* Specific styling for programmes mega menu */
.main-menu .navbar-nav .dropdown-menu.programmes-mega-menu {
    min-width: 400px;
    max-height: 80vh;
    padding: 10px 0;
}

.main-menu .navbar-nav .dropdown-menu .dropdown-item {
    padding: 12px 25px;
    font-size: 14px;
    color: var(--chi-text);
    border-bottom: 1px solid #f5f5f5;
    white-space: normal;
    line-height: 1.4;
}

.main-menu .navbar-nav .dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
}

.main-menu .navbar-nav .dropdown-menu .dropdown-item:hover {
    background: var(--chi-primary-light);
    color: var(--chi-primary);
}

.main-menu .navbar-nav .dropdown-menu .dropdown-divider {
    margin: 8px 0;
    border-top: 1px solid #e9e9e9;
}

/* Custom scrollbar for dropdown */
.main-menu .navbar-nav .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.main-menu .navbar-nav .dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.main-menu .navbar-nav .dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--chi-primary);
    border-radius: 3px;
}

/* Header Button Styling */
.right-nav .theme_btn.free_btn {
    background: var(--chi-primary) !important;
    color: var(--chi-white) !important;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
}

.right-nav .theme_btn.free_btn:hover {
    background: var(--chi-secondary) !important;
}

/* Mobile Menu Hamburger */
.hamburger-menu a {
    color: var(--chi-primary) !important;
    font-size: 24px;
}

/* ========================================
   IMPROVED FORM STYLING
   ======================================== */

/* Better Select Styling */
.registration-form .form-select,
.registration-form select.form-control {
    height: 50px;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 50px;
}

/* Input Group Styling */
.registration-form .form-group {
    margin-bottom: 20px;
}

.registration-form .form-control,
.registration-form .form-select {
    height: 50px;
    padding: 0 18px;
    display: flex;
    align-items: center;
}

.registration-form textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: 15px 18px;
}

/* Radio and Checkbox Groups */
.registration-form .form-check {
    padding-left: 30px;
    margin-bottom: 10px;
}

.registration-form .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
    margin-left: -30px;
    border: 2px solid #ddd;
}

.registration-form .form-check-input:checked {
    background-color: var(--chi-primary);
    border-color: var(--chi-primary);
}

.registration-form .form-check-label {
    padding-top: 2px;
    cursor: pointer;
}

/* Form Section Headers */
.form-section-title {
    background: var(--chi-primary-light);
    padding: 15px 20px;
    margin: 25px -40px;
    margin-bottom: 25px;
    border-left: 4px solid var(--chi-primary);
}

.form-section-title h5 {
    margin: 0;
    color: var(--chi-primary);
    font-weight: 600;
}

@media (max-width: 767px) {
    .form-section-title {
        margin: 25px -25px;
    }
}

/* Nice Select Override for Better Alignment */
.nice-select {
    height: 50px !important;
    line-height: 48px !important;
    padding: 0 18px !important;
}

.nice-select .current {
    line-height: 48px !important;
}

/* Fix for select element text alignment */
select.form-control,
select.form-select {
    text-align: left;
    text-align-last: left;
}

/* ========================================
   ADDITIONAL SELECT/FORM FIXES
   ======================================== */

/* Override Bootstrap Select Defaults */
.form-select,
select.form-control {
    height: 50px !important;
    padding: 0 40px 0 18px !important;
    line-height: 50px !important;
    display: flex;
    align-items: center;
    background-position: right 15px center !important;
}

/* Ensure options display correctly */
.form-select option,
select.form-control option {
    padding: 10px 15px;
    line-height: 1.5;
    min-height: 40px;
}

/* Registration form specific select fixes */
.registration-form select {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 40px 0 18px !important;
}

/* Textarea should not use line-height fix */
.registration-form textarea.form-control {
    height: auto !important;
    line-height: 1.6 !important;
    padding: 15px 18px !important;
    min-height: 120px;
}

/* Input fields */
.registration-form input.form-control {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 18px !important;
}

/* Date input special handling */
.registration-form input[type="date"].form-control {
    line-height: normal !important;
    padding: 10px 18px !important;
}

/* File input */
.registration-form input[type="file"].form-control {
    height: auto !important;
    line-height: normal !important;
    padding: 12px 18px !important;
}