/* Profile Page Custom Styles */

/* Font Face */
@font-face {
    font-family: 'Zain';
    src: url('../font/Zain-Regular.ttf') format('truetype');
}

body {
    font-family: 'Zain', sans-serif;
}

/* RTL Styles */
[dir="rtl"] .ed-slider-content,
[dir="rtl"] .checkout-form-list label,
[dir="rtl"] .checkout-form-list input,
[dir="rtl"] .country-select label,
[dir="rtl"] .country-select select {
    text-align: right !important;
}

[dir="rtl"] .search-drop-down {
    right: 0;
    left: auto;
}

[dir="rtl"] .ed-slider-area .row {
    flex-direction: row-reverse;
}

/* RTL Global Overrides */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] .ms-md-5 {
    margin-right: 3rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .me-md-5 {
    margin-left: 3rem !important;
    margin-right: 0 !important;
}

[dir="rtl"] .text-md-start {
    text-align: right !important;
}

[dir="rtl"] .text-md-end {
    text-align: left !important;
}

/* Image styling */
.my-image-style {
    border: 3px solid #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.profile-image-custom {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 3px solid #f8f9fa;
    border-radius: 35px !important;
    transition: all 0.3s ease-in-out !important;
}

.it-team-thumb:hover .profile-image-custom {
    transform: none !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important;
}

.it-team-thumb::before, .it-team-thumb::after {
    display: none !important;
}

/* See more/less collapse styles */
.btn-link.collapsed .read-more { display: inline; }
.btn-link.collapsed .read-less { display: none; }
.btn-link:not(.collapsed) .read-more { display: none; }
.btn-link:not(.collapsed) .read-less { display: inline; }
.collapse-wrapper .btn-link { 
    text-decoration: none; 
    font-weight: 600; 
    cursor: pointer; 
    display: block; 
    margin-top: 10px; 
}

/* Tab Navigation styling */
.nav-tabs {
    border-bottom: 2px solid #EAEBED !important;
    gap: 0 !important;
    border: none !important;
}

.nav-tabs .nav-link {
    border: none !important;
    color: #4a5568 !important;
    font-weight: 600 !important;
    padding: 12px 25px !important;
    background: none !important;
    border-right: 1px solid #EAEBED !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
}

.nav-tabs .nav-link:last-child {
    border-right: none !important;
}

/* RTL Tab Styling */
[dir="rtl"] .nav-tabs .nav-link {
    border-right: none !important;
    border-left: 1px solid #EAEBED !important;
}

[dir="rtl"] .nav-tabs .nav-link:last-child {
    border-left: none !important;
}

.nav-tabs .nav-link:hover {
    color: var(--it-light-primary) !important;
}

.nav-tabs .nav-link.active {
    color: var(--it-light-primary) !important;
    background: none !important;
    border-bottom: 3px solid var(--it-light-primary) !important;
}

/* Standardized Tab Content Typography */
.tab-content .it-course-details-wrapper {
    background-color: #f8fafc !important;
    border-radius: 15px !important;
    padding: 2rem !important;
}

.tab-content h3, .tab-content h4, .tab-content h5, .tab-content h6 {
    color: var(--it-light-primary) !important;
    font-weight: 700 !important;
}

.tab-content h3 { font-size: 1.5rem !important; margin-bottom: 1.5rem !important; }
.tab-content h4 { font-size: 1.3rem !important; margin-bottom: 1.2rem !important; }
.tab-content h5 { font-size: 1.15rem !important; margin-bottom: 0.8rem !important; }
.tab-content h6 { font-size: 1rem !important; margin-bottom: 0.5rem !important; }

.tab-content p, 
.tab-content span:not([class*="year"]), 
.tab-content div:not([class*="timeline"]):not([class*="track"]):not([class*="icon-circle"]):not([class*="year-circle"]) {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #475569 !important;
}

/* Consistent Colors & Accents */
.tab-content .text-primary, 
.tab-content .text-warning, 
.tab-content .it-social-icon, 
.tab-content .text-dark.fw-bold, 
.tab-content .text-muted, 
.tab-content small, 
.tab-content .year-circle, 
.tab-content .badge {
    color: var(--it-light-primary) !important;
}

.tab-content .bg-primary-soft {
    background-color: rgba(44, 95, 158, 0.1) !important; /* RGB for Educom primary #2c5f9e */
}

.tab-content .border-primary, 
.tab-content .border-warning, 
.tab-content .border-start {
    border-color: var(--it-light-primary) !important;
}

.tab-content .badge {
    font-size: 0.85rem !important;
    padding: 0.5rem 1rem !important;
    background: rgba(44, 95, 158, 0.08) !important;
}

.tab-content .text-muted {
    opacity: 0.8 !important;
}

/* Timeline Custom Styles */
.corporate-timeline-wrapper {
    overflow-x: auto;
    padding: 20px 0;
    background: #fff;
}

.corporate-timeline-wrapper .d-flex {
    min-width: max-content;
    gap: 40px;
}

.timeline-item-modern, .timeline-modern-item {
    width: 240px;
    position: relative;
}

.year-circle, .icon-circle {
    width: 90px;
    height: 90px;
    border: 2px solid var(--it-light-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.year-circle {
    font-weight: 800;
    font-size: 1.4rem;
}

.icon-circle i {
    font-size: 2rem;
}

.timeline-track {
    height: 30px;
    position: relative;
    width: 100%;
}

.track-line {
    position: absolute;
    top: 15px;
    left: -10px;
    right: -10px;
    height: 2px;
    background: #e2e8f0;
    z-index: 1;
}

.track-dot {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: var(--it-light-primary);
    border-radius: 50%;
    z-index: 2;
    border: 4px solid white;
    box-shadow: 0 0 0 2px var(--it-light-primary);
}

.timeline-content-modern h5 {
    min-height: 2.8em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* RTL Timeline Fixes */
[dir="rtl"] .corporate-timeline-wrapper .d-flex {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .timeline-item-modern, 
[dir="rtl"] .timeline-modern-item {
    direction: rtl;
}

[dir="rtl"] .track-line {
    left: -10px;
    right: -10px;
}

/* Header & Meta Refinements */
.it-profile-image-box {
    width: 200px;
}

.it-team-author-name {
    font-weight: 700 !important;
    color: #333 !important;
}

.text-secondary {
    letter-spacing: 1px !important;
    color: var(--it-light-primary) !important;
}

/* Icon Flipping for RTL */
[dir="rtl"] .fa-angle-right, 
[dir="rtl"] .fa-chevron-right, 
[dir="rtl"] .fa-arrow-right {
    transform: scaleX(-1);
}

[dir="rtl"] .it-social-icon {
    margin-left: 1rem !important;
    margin-right: 0 !important;
}

[dir="rtl"] .it-funfact-icon {
    margin-left: 15px !important;
    margin-right: 0 !important;
}

[dir="rtl"] .it-funfact-content {
    text-align: right !important;
}

[dir="rtl"] .it-evn-details-text p, 
[dir="rtl"] .it-evn-details-text span {
    text-align: right !important;
}

[dir="rtl"] .badge i {
    margin-left: 5px !important;
    margin-right: 0 !important;
}

/* Ensure horizontal containers scroll from right in RTL */
[dir="rtl"] .corporate-timeline-wrapper {
    direction: rtl !important;
}

[dir="rtl"] .corporate-timeline-wrapper .d-flex {
    flex-direction: row !important; /* Since container is direction: rtl, row flows right-to-left */
}

/* Fix for profile header alignment in RTL */
/* Header Meta & Action Links */
.contact-info .it-profile-meta-item {
    font-size: 1rem;
    color: #475569;
}

.contact-info .it-profile-meta-item i {
    width: 24px;
    text-align: center;
    color: var(--it-light-primary);
    margin-right: 1rem;
}

.it-team-action-link {
    text-decoration: none !important;
    color: var(--it-light-primary) !important;
    font-weight: 500 !important;
    transition: all 0.3s ease-in-out;
}

.it-team-action-link:hover {
    opacity: 0.8;
}

.it-team-action-link i {
    font-size: 1.2rem;
}

[dir="rtl"] .contact-info .it-profile-meta-item i {
    margin-left: 1rem !important;
}

[dir="rtl"] .it-team-social-list .d-inline-block {
    margin-left: 2rem !important;
    margin-right: 0 !important;
}

[dir="rtl"] .it-team-action-link i {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}