.hero{
    background-image: url(../images/contact.webp);
    background-size: 100% 100%;
    width: 100%;
    height: 320px;
}
.hero h1{
    font-size: 4.2rem;
    font-weight: 700;
    color: var(--white);
    text-align: center;
}
.hero p{
        color: var(--white);
    text-align: center;
}
.num{
    font-size: 5rem;
}
/* our words */
.our-words{

}
.our-words .content{
    background-image: url(../images/mission.webp);
    aspect-ratio: 1;
    background-size: 100% 100%;
    position: relative;
    z-index: 34;
    cursor: pointer;
}
.our-words .content::before{
    content: ''
    ;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.699);
    z-index: -4;
}
.our-words .content h2{
    font-size: 1.8rem;
    font-style: italic;
    font-weight: 700;
    color: var(--main) !important;
}
.our-words .content p{
color: var(--main) !important;
}
.our-words .first h2,.our-words .first p{
color: var(--white) !important;
}

.our-words .content .overlay{
    right: .04rem;
    background-color: var(--white-light);
    z-index: -4;
    border: 1px solid var(--border);
    transition: all ease-in-out .4s;
}
.our-words .content:hover .overlay{
opacity: 0;
}
.our-words .content:hover h2,.our-words .content:hover p{
color: var(--white) !important;
}
.our-words .content:hover .logo-dark{
    display: none;
}
.our-words .content:hover .logo-light{
    display: block !important;
}
/* our values */
.our-values .content{
    background-color: var(--white-light);
    border: 1px solid var(--border);
    aspect-ratio: 1;
    transition: all ease-in-out .4s;
    cursor: pointer;
}
.our-values .content h2{
    font-size: 1.8rem;
    font-style: italic;
    font-weight: 700;
    color: var(--main) !important;
}
.our-values .content p{
color: var(--main) !important;
}
.our-values .content:hover{
    background-color: var(--main);
}
.our-values .content:hover h2,.our-values .content:hover p{
color: var(--white) !important;
}
.our-values .content:hover .logo-dark{
    display: none;
}
.our-values .content:hover .logo-light{
    display: block !important;
}
/* Our Achievements */
/* الـ CSS بتاعك الأصلي (ما نغيرش فيه حاجة) */
.our-achievements .time-icon{
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.our-achievements .line{
    border-left: 1px solid var(--sec);
}
.our-achievements .card {
    min-height: 220px;
    background-color: var(--white-light);
}
.our-achievements .card h2{
    font-size: 1.8rem;
    text-wrap: nowrap;
    

}
.our-achievements .full-box{
    position: relative;
}
.our-achievements .full-box::before{
    content: '';
    width: 100%;
    height: 10px;
   background: linear-gradient(30deg, rgba(210, 201, 0, 0) 0%, #D2C900 52.4%, rgba(210, 201, 0, 0) 100%);

    position: absolute;
    top: 110px;
    left: 0px;
}
/* الإضافات الجديدة فقط (للسحب بالإيد + إخفاء الـ Scrollbar) */
.our-achievements .achievements-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
    position: relative;
    /* إخفاء الـ Scrollbar تمامًا في كل المتصفحات */
    -ms-overflow-style: none;          /* IE and Edge */
    scrollbar-width: none;             /* Firefox */
}

.our-achievements .achievements-scroll::-webkit-scrollbar {
    display: none;                     /* Chrome, Safari, Opera */
}

/* جعل السحب بالإيد أنعم وأجمل */
.our-achievements .achievements-scroll {
    scroll-behavior: smooth !important;     /* لما تسحب عادي (مش بالإيد) */
    -webkit-overflow-scrolling: touch;      /* أهم حاجة على الموبايل */
    overscroll-behavior-x: contain;         /* يمنع التأثير اللي بيطلع لما توصل للآخر */
}
.our-achievements .achievements-scroll:active {
    cursor: grabbing;
}

/* مهم جدًا: عشان الـ boxes ما تلفش تحت بعض */
.our-achievements .inner {
    display: flex;
    gap: 24px;
    min-width: max-content;   /* <-- ده السر عشان يفضل أفقي مهما حصل */
    padding: 0 20px;
}

/* اختياري: حجم ثابت لكل كارت عشان السحب يبقى متساوي */
.our-achievements .box {
    flex: 0 0 340px;   /* تقدر تغير الرقم ده حسب حجم الكارت عندك */
    scroll-snap-align: start;
}
/* our barnces */
.our-branches .content{
    background-color: var(--main);
}
.our-branches .see-more{
    transition: .3s ease-in-out;
}
.our-branches .see-more:hover{
background-color: var(--sec);
border-color: var(--sec);
}