.about-main-wrapper {
direction: rtl;
}

.about-hero {
padding: 100px 20px;

text-align: center;
background:
linear-gradient(
rgba(10, 61, 98, 0.82),
rgba(10, 61, 98, 0.88)
),
url("../images/about_us/about_us.jpg") center/cover;
color: #fff;
}

.about-hero h1 {
margin: 20px 0;
font-size: 42px;
font-weight: 800;
 margin-top:50px !important;
}

.about-hero p {
max-width: 750px;
margin: 0 auto;
line-height: 2;
font-size: 17px;
}

.about-intro {
background: #fff;
}

.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}

.about-image img {
width: 100%;
margin-top : 50px;
height: 450px;
object-fit: cover;
border-radius: 20px;
}

.about-content h2,
.values-content h2,
.section-heading h2,
.mission-card h2 {
margin: 20px 0;
font-size: 32px;
line-height: 1.6;


}

.about-content p,
.values-content p,
.section-heading p,
.mission-card p {
color: #666;
line-height: 2.2;
font-size: 16px;
 margin-top: 30px;
}

.about-history {
background: #f7f9fb;
margin-top : 50px;
}

.section-heading {
max-width: 750px;
margin: 0 auto 50px;
text-align: center;
}

.history-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}

.history-card {
background: #fff;
padding: 35px;
border-radius: 18px;
text-align: center;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
 margin-top: 10px;
 margin-bottom: 30px;
}

.history-icon {
width: 65px;
height: 65px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0a3d62;
color: #fff;
font-size: 25px;
}

.history-card h3 {
margin-bottom: 15px;
}

.history-card p {
color: #666;
line-height: 2;
}

.about-values {
background: #fff;
}

.values-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
margin-top : 50px;
align-items: center;
}

.values-list {
display: flex;
flex-direction: column;
gap: 20px;
}

.value-item {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 20px;
border-radius: 15px;
background: #f7f9fb;
}

.value-icon {
min-width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0a3d62;
color: #fff;
}

.value-item h3 {
margin: 0 0 8px;
}

.value-item p {
margin: 0;
color: #666;
line-height: 1.8;
}

.about-mission {
background: #f7f9fb;
padding: 10px;

}

.mission-card {
max-width: 850px;
margin: auto;
padding: 60px;
text-align: center;
background: #fff;
border-radius: 22px;
margin-top : 50px;
margin-bottom : 50px;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);

}

.about-cta {
background: #0a3d62;
color: #fff;
text-align: center;
}

.cta-content {
max-width: 700px;
margin: auto;
}

.cta-content h2 {
font-size: 32px;
margin-bottom: 20px;
}

.cta-content p {
line-height: 2;
margin-bottom: 30px;
}

@media (max-width: 900px) {

.about-grid,
.values-grid {
    grid-template-columns: 1fr;
}

.history-content {
    grid-template-columns: 1fr;
}

.about-hero h1 {
    font-size: 32px;
    margin-top: 10px;
    
}

.about-content h2,
.values-content h2,
.section-heading h2,
.mission-card h2 {
    font-size: 26px;
}

.mission-card {
    padding: 35px 20px;
}

}

@media (max-width: 600px) {

.about-hero {
    padding: 70px 20px;
    
}

.about-image img {
    height: 300px;
    
}

}