:root{
    --blue-primary:#007BFF;
    --blue-secondary:#3399FF;
    --color-gold:#FFC000;
    --color-white:#ffffff;
    --color-light-bg:#F8FAFC;
    --color-text-dark:#333333;
    --color-text-grey:#666666;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body { 
    font-family: Arial, sans-serif; 
    background: var(--color-light-bg); 
    color: var(--color-text-dark);
    padding-top: 60px;
}

/* HERO SECTION */
.about-hero {
    min-height: 150px;
    display: flex;
    background: var(--color-white);
    overflow: hidden;
}

/* الجزء الأيسر - المحتوى */
.about-hero-content {
    width: 50%;
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(
        135deg,
        var(--blue-primary) 0%,
        #0056c7 60%,
        #003f9e 100%
    );
    color: white;
}

.about-hero h1 {
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 600;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.about-hero p {
    font-size: clamp(15px, 2vw, 18px);
    max-width: 680px;
    margin: 0 auto;
    opacity: .9;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* الجزء الأيمن - الصورة */
.about-hero-image {
    width: 50%;
}

.about-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* GRID SECTION */
.industries{
    padding:90px 40px;
    background:var(--color-light-bg);
}

.industries .container{
    display:grid;
     width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));

}

/* CARDS STYLE */
.industry-card{
    background:var(--color-white);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.4s;
}

.industry-card:hover{
    transform:translateY(-10px);
}

.industry-card img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.industry-card h3{
    color:var(--blue-primary);
    font-size:28px;
    padding:25px 25px 15px;
}

.industry-card p{
    color:var(--color-text-grey);
    line-height:1.8;
    padding:0 25px 25px;
}

.industry-card{
    display: flex;
    flex-direction: column;
}

.industry-card a{
    display: inline-block;
    margin: auto 25px 30px; /* يدفع الزر إلى الأسفل */
    padding: 12px 25px;
    background: var(--blue-primary);
    color: var(--color-white);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: .3s;
    align-self: flex-start; /* يبقيه في الجهة اليسرى */
}

.industry-card a:hover{
    background: var(--blue-primary);
    color: white;
}

/* RESPONSIVE DESIGN FOR HERO */
@media (max-width: 768px) {
    .about-hero {
        flex-direction: column;
    }
    .about-hero-content, .about-hero-image {
        width: 100%;
    }
    .about-hero-content {
        padding: 40px 20px;
    }
    .about-hero-image {
        height: 250px;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:767px){

    body{
        padding-top:56px;
    }

    .container{
        padding:0 18px;
    }

    .industries{
        padding:60px 0;
    }

    .industries .container{

        grid-template-columns:1fr;

        gap:24px;
    }

    .industry-card{

        width:100%;
    }

    .industry-card img{

        height:220px;
    }

    .industry-card h3{

        font-size:1.5rem;

        padding:22px 22px 12px;
    }

    .industry-card p{

        font-size:1rem;

        padding:0 22px 22px;

        line-height:1.8;
    }

    .industry-card a{

        margin:auto 22px 22px;

        width:calc(100% - 44px);

        text-align:center;
    }

    /* HERO */

    .about-hero{

        flex-direction:column;
    }

    .about-hero-content,

    .about-hero-image{

        width:100%;
    }

    .about-hero-content{

        padding:60px 24px;
    }

    .about-hero-image{

        height:260px;
    }

}

/* =====================================================
   TABLET
===================================================== */

@media (min-width:768px) and (max-width:1023px){

    .container{

        padding:0 30px;
    }

    .industries{

        padding:80px 0;
    }

    .industries .container{

        grid-template-columns:repeat(2,1fr);

        gap:28px;
    }

    .industry-card img{

        height:240px;
    }

    .about-hero-content{

        padding:60px;
    }

}
/* =====================================================
   LARGE DESKTOP - تم التعديل
===================================================== */

@media (min-width: 1440px) {

    .container {
        max-width: 1650px;
        padding: 0 40px;
        margin: 0 auto; /* أضفنا هذه للتوسيط */
    }

    .industries {
        padding: 120px 0;
    }

    .industries .container {
        /* التغيير الأهم: استخدم auto-fill بدلاً من عدد ثابت */
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        /* أو استخدم هذا إذا كنت تريد 3 أعمدة لكنها تمتد */
        /* grid-template-columns: repeat(3, 1fr); */
        gap: 40px;
    }

    .industry-card {
        /* نجعل الكارد يأخذ العرض الكامل للخلية */
        width: 100%;
        /* نضيف هذا ليمتد عمودياً أيضاً */
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .industry-card img {
        height: 300px;
        width: 100%; /* نضمن أن الصورة تأخذ العرض الكامل */
    }

    .industry-card h3 {
        font-size: 2rem;
    }

    .industry-card p {
        font-size: 1.15rem;
        /* نجعل النص يتمدد لملء المساحة */
        flex: 1;
    }

    .industry-card a {
        /* نجعل الزر في الأسفل دائماً */
        margin-top: auto;
        align-self: flex-start;
    }
}

/* =====================================================
   ULTRA WIDE - تم التعديل
===================================================== */

@media (min-width: 1920px) {

    .container {
        max-width: 1840px;
        padding: 0 60px;
        margin: 0 auto;
    }

    .industries {
        padding: 140px 0;
    }

    .industries .container {
        /* نزيد حجم الكروت لتملأ المساحة بشكل أفضل */
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
        gap: 50px;
    }

    .industry-card {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .industry-card img {
        height: 360px;
        width: 100%;
    }

    .industry-card h3 {
        font-size: 2.4rem;
    }

    .industry-card p {
        font-size: 1.3rem;
        line-height: 2;
        flex: 1; /* يدفع الزر للأسفل */
    }

    .industry-card a {
        margin-top: auto;
        align-self: flex-start;
    }
}

/* =====================================================
   إضافة تحسين للشاشات المتوسطة أيضاً
===================================================== */

@media (min-width: 1024px) and (max-width: 1439px) {
    
        .container{

        padding:0 30px;
    }

    .industries{

        padding:90px 40;
    }

    .industries .container{

        grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
    gap:35px;
    }

    .industry-card img{

        height:240px;
    }

    .about-hero-content{

        padding: 80px;
    }

}