.about__section {
padding: 0rem 0 5rem 0;
background-color: #006231;
position: relative;
}

.about__section .ab-shape {
color: white;
position: relative;
padding: 4rem 0rem 0 0;
border-radius: 2rem;
text-align: center;
}

.about__section .ab-shape:before {
position: absolute;
content: "";
top: 0%;
left: 0;
width: 100%;
height: 100%;
background: url("../../includes/images/aboutBackShap.png") no-repeat;
background-size: 100% 100%;
}
.about__section .ab-shape .row{
align-items:center;
}
.about__section .ab-shape h2 {
display: flex;
align-items: center;
justify-content: center;
font-family: "DecoType Thuluth";
font-size: 70px;
font-weight: 400;
margin-left: auto;
}

.about__section .ab-shape h2 img {
max-width: 400px;
}

.about__section .ab-shape .aboutImage {
position: relative;
padding: 30px;
}

.about__section .ab-shape .aboutImage:before {
position: absolute;
content: "";
top: 10%;
left: 0;
width: 100%;
height: 90%;
background: #DFDCD9;
z-index: -1
}


.CV .title h1 {
color: #FFF;
font-family: "DecoType Thuluth";
font-size: 4rem;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: center;
}

.timeline {
position: relative;
width: 90%;
margin: 0 auto;
padding: 50px 0;
}

/* الخط */
.timeline::after {
content: "";
position: absolute;
width: 3px;
background: #83C943;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

/* العناصر */
.timeline .items {
display: flex;
flex-direction: column;
gap: 80px;
}

.timeline-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;

}

/* الدائرة في بداية الخط */
.timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 18px;
background: #66B433;
/* نفس لون الخلفية */
border: 3px solid #66B433;
border-radius: 50%;
z-index: 2;
}

/* الدائرة في نهاية الخط */
.timeline-end {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 18px;
background: #66B433;
border: 3px solid #66B433;
border-radius: 50%;
z-index: 2;
}

/* توزيع يمين/شمال */
.timeline-item.right .title {
order: 1;
width: 40%;
text-align: right;
}

.timeline-item .title h1 {
color: #FFEA01;
font-family: "DecoType Thuluth";
font-size: 3.7rem;
font-style: normal;
font-weight: 400;
line-height: 67px;
text-align: right;
}

.timeline-item.right .content {
order: 2;
width: 40%;
text-align: right;
}

.timeline-item.left .title {
order: 2;
width: 40%;
text-align: right;
}

.timeline-item.left .content {
order: 1;
width: 40%;
text-align: right;
}

/* السنة كـ Marker */
.timeline-item .year-marker {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
background: #fff;
padding: 10px 20px 4px 20px;
border-radius: 10px;
z-index: 3;
border: 2px solid #FFEA01;
color: #006531;
font-family: "HT Baybars Display";
font-size: 18px;
font-style: normal;
font-weight: 900;
line-height: normal;
display: flex;
align-items: center;
justify-content: center;
}


/* العنوان */
.timeline h3 {
color: #FFF;
font-family: "HT Baybars Display";
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: normal;
}

.timeline h4 {
color: #FFEA01;
font-family: "HT Baybars Display";
font-size: 30px;
font-style: normal;
font-weight: 800;
line-height: normal;
}

/* النص */
.timeline p {
color: #FFF;
font-family: "HT Baybars Display";
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: normal;
padding-top: 10px;
}

/* ===== Responsive ===== */

.ab-shape>* {
position: relative;
z-index: 1;
}

.about__section .ab-heading {
color: #fff;
text-align: center;
}

.about__section .top-heading {
color: #fff;
width: 94%;
font-size: 28px;
}

@media(max-width:768px) {
.about__section .ab-shape {
padding: 2rem 0rem;
}
.about__section .ab-shape h2 {
font-size: 30px;
}
.timeline-item .title h1 {
    font-size: 3rem;
}
.timeline::before,.timeline-end{
    left: 3%;
}
.about__section .ab-shape h2 img {
max-width: 200px;
}
.about__section .top-heading {
width: 100%;
font-size: 18px;
line-height: 30px;
}
.timeline::after {
left: 10px;
}

.timeline-item {
flex-direction: column-reverse;
gap: 15px;
}
.timeline p {
    font-size: 15px;
}

.timeline-item .title,
.timeline-item .content {
width: 100% !important;
text-align: right !important;
}

.timeline-item .year-marker {
left: 0;
transform: none;
}
.ab-shape::before {
content: "";
position: absolute;
top: -5rem;
left: 0%;
width: 100%;
height: 10rem;
background: url(../../includes/images/polygon.png) no-repeat center top;
background-size: 79%;
}
}
/* زرار مخصص */
/*.custom-btn {*/
/*display: inline-flex;*/
/*align-items: center;*/
/*gap: 0.5rem;*/
/*position: relative;*/
/*overflow: hidden;*/
/*}*/
/*.custom-btn span:nth-child(2) {*/
/*background: #66B433;*/
/*color: #fff;*/
/*border-radius: 2rem;*/
/*padding: 0.5rem 1.5rem;*/
/*font-weight: bold;*/
/*}*/

/* أيقونات */
/*.custom-btn .icon-left,*/
/*.custom-btn .icon-right {*/
/*display: flex;*/
/*align-items: center;*/
/*justify-content: center;*/
/*width: 40px;*/
/*height: 40px;*/
/*border-radius: 50%;*/
/*transition: transform .3s ease, opacity .3s ease;*/
/*}*/
/*.custom-btn .icon-right {*/
/*background: var(--highlight-yellow);*/
/*}*/
/*.custom-btn .icon-left {*/
/*background: var(--main-green);*/
/*transform: translateX(20px);*/
/*opacity: 0;*/
/*}*/

/* عند الهوفر */
/*.custom-btn:hover .icon-right {*/
/*transform: translateX(-20px);*/
/*opacity: 0;*/
/*}*/
/*.custom-btn:hover .icon-left {*/
/*transform: translateX(0);*/
/*opacity: 1;*/
/*}*/

/* زرار readMore */
.readMore {
padding-top: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
/* اللينك في الكابشن: مخفي افتراضي */
.CV .caption .custom-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
position: relative;
overflow: hidden;
margin-top: 1rem;
opacity: 0;
transform: translateY(20px);
transition: all 0.4s ease;
}

/* لما اعمل hover على الكارت يظهر اللينك */
.CV .item:hover .caption .custom-btn {
opacity: 1;
transform: translateY(0);
}