/* static/css/pages/about.css */

/* --- Story Section --- */
/* --- Story Section --- */
.about-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

/* Base style for the divider */
.section-divider-start {
    width: 80px;
    height: 4px;
    background-color: #343a40; /* Black color */
    border-radius: 2px;
    margin-bottom: 1rem;
}

/* This is the key change. We target the parent div to align the child divider */
[dir="ltr"] .col-lg-6 {
    text-align: left;
}
[dir="ltr"] .col-lg-6 .section-divider-start {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .col-lg-6 {
    text-align: right;
}
[dir="rtl"] .col-lg-6 .section-divider-start {
    margin-right: 0;
    margin-left: auto;
}
html[dir="ltr"] .section-title.text-start {
    text-align: left !important;
}

/* RTL (Arabic) alignment */
html[dir="rtl"] .section-divider-start {
    margin: 0 auto 1rem 0; /* Aligns to the right in RTL */
}
html[dir="rtl"] .section-title.text-start {
    text-align: right !important;
}

/* --- Core Values Section --- */
.value-card {
    background: #fff;
    border-radius: 10px;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e9ecef;
}
.value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    /* Gold/Brown Gradient for Icons */
    background: linear-gradient(45deg, #b08d57, #9c7c4b);
    color: #fff;
    box-shadow: 0 5px 15px rgba(156, 124, 75, 0.4);
    transition: transform 0.3s ease;
}
.value-card:hover .value-icon {
    transform: scale(1.1) rotate(15deg);
}