*{
    margin: 0; /*يزيل الهامش الخارجي الافتراضي من جميع العناصر.*/
    padding: 0; /*  يزيل التباعد الداخلي الافتراضي من جميع العناصر*/
    font-family: 'Poppins', sans-serif;/*يعيّن الخط الأساسي للنصوص إلى "Poppins" (ويستخدم sans-serif كخيار احتياطي إن لم يتوفر الخط الأساسي).*/
    box-sizing: border-box; /*يّر طريقة حساب العرض والارتفاع للعناصر بحيث يشمل الحدود (border) والحشو (padding) داخل الأبعاد المحددة، مما يسهل التحكم في تصميم العناصر.*/
}
/* تهيئة تنسيق عام (reset أو normalize) للصفحة، حتى تكون كل العناصر متسقة وتبدأ من نفس القواعد التصميمية.

إذا كنت تصمم موقعًا من الصفر، فهذه خطوة شائعة لضمان اتساق الشكل على مختلف المتصفحات. */

html{
    scroll-behavior: smooth;
}
body {
    background: #080808; /*لون الصفحة اسود*/
    color: white; /*text color*/

}

#header{
    width: 100%;
    height: 100vh; /*اجعل ارتفاع العنصر يساوي 100% من ارتفاع الشاشة المرئية (viewport height).*/
    background-image: url(images/backgroundmain.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

}
.container{
    padding: 10px 10%; /*10 px space from bottom and top and 10% space from right and left*/
}
nav{
    display: flex; /*the objects will be side by side instead of being under eachother */
    align-items: center; /* محاذاة العناصر عموديًا في وسط الـnav */
    justify-content: space-between; /* توزيع العناصر أفقياً مع وجود مسافة متساوية بينها، بحيث الأول في اليسار والأخير في اليمين */
    flex-wrap: wrap; /* السماح للعناصر بالانتقال إلى سطر جديد إذا لم يكن هناك مساحة كافية (استجابة للشاشات الصغيرة) */
}
.logo{
    width: 180px;
}
nav ul li{
    display: inline-block; /* to inline the buttons horizontally*/
    list-style: none; /*تُستخدم لإزالة رموز التعداد (النقاط أو الأرقام) التي تظهر تلقائيًا عند استخدام قوائم مثل <ul> أو <ol>.*/
    margin: 10px 20px; /*10px from top and button and 20px from left and right*/
}
nav ul li a{
    color: white;
    text-decoration: none; /*removing the underline*/
    font-size: 18px;
    position: relative; /* يجعل الرابط مرجعًا لموضع العنصر ::after الذي سنضيفه */

    /*📌 ملاحظة على position: relative;:
هذا لا يغيّر شكل الرابط بحد ذاته، لكنه ضروري حتى يعرف ::after أين يتموضع بدقة نسبةً للرابط نفسه.*/
}
nav ul li a::after{
    content: ''; /* محتوى فارغ (ضروري لإنشاء العنصر الوهمي) */
    width: 0; /*بحيث يختفي ال خط اذا لم يوضع ال cursor عليه*/
    height: 3px; /* سماكة الخط أسفل الرابط */
    background: #ff004f; /* لون الخط الوردي/الأحمر */
    position: absolute; /* تحديد مكان العنصر بشكل دقيق نسبة للرابط */
    left: 0; /* يبدأ من الحافة اليسرى للرابط */
    bottom: -6px; /* يظهر تحت الرابط بمقدار 6px */
    transition: 0.5s; /*سرعة ظهور الخط تدريجيا*/

}
nav ul li a:hover::after{
width: 100%;
}
.header-text{
    margin-top: 20%; /*Space from top*/
    font-size: 30px;
}
.header-text h1{
    font-size: 60px;
    margin-top: 20px;
}
.header-text h1 span{
    color: #ff004f;
}
/*------------about----------*/
#about{
    padding: 80px 0;
    color: #ababab;
}
.row{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.about-col-1{
    flex-basis: 35%; /*يحدد حجم العمود بنسبة 35% داخل flex container*/
}
.about-col-1 img{
    width: 100%; /*يجعل الصورة تملأ العمود*/
    border-radius: 15px;
}
.about-col-2 {
    flex-basis: 60%;
}
.sub-title{
    font-size: 60px;
    font-weight: 600; /*عرض الخط*/
    color: white;
}
.tab-titles{
    display: flex;
    margin: 20px 0 40px; /*20 from top and 0 right and left and 40 from buttom*/
}
.tab-links{
    margin-right: 50px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
}
.tab-links::after{
    content: ''; /* محتوى فارغ (ضروري لإنشاء العنصر الوهمي) */
    width: 0; /*بحيث يختفي ال خط اذا لم يوضع ال cursor عليه*/
    height: 3px; /* سماكة الخط أسفل الرابط */
    background: #ff004f; /* لون الخط الوردي/الأحمر */
    position: absolute; /* تحديد مكان العنصر بشكل دقيق نسبة للرابط */
    left: 0; /* يبدأ من الحافة اليسرى للرابط */
    bottom: -8px; /* يظهر تحت الرابط بمقدار 8px */
    transition: 0.5s; /*سرعة ظهور الخط تدريجيا*/
}

.tab-links.active-link::after{
    width: 50%;
}
.tab-contents ul li {
    list-style: none;
    margin: 10px 0;
}
.tab-contents ul li span {
    color: #b54769;
    font-size: 14px;
}
.tab-contents{
    display: none; /*so that all the tabs will be hidden*/
}
.tab-contents.active-tab{
    display: block; /*so that the skills will be as first visible*/
}
/*------------------hobbies-----------------*/
#hobbies{
    padding: 30px 0;

}
.hobbies-list{
    display: grid; /* تحويل العنصر إلى grid layout لتوزيع العناصر بشكل شبكي */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /*كل عمود يصغر إلى 250px فقط، ولو فيه مساحة فاضية، ياخذ حصة عادلة منها (بـ 1fr).*/
    /*repeat: تكرار الأعمدة.*/     /*auto-fit: عدد الأعمدة يتحدد تلقائيًا بناءً على عرض الشاشة.*/
    grid-gap: 40px; /*وضع مسافة بين العناصر بالشبكة بقيمة 40px*/
    margin-top: 50px;

}
.hobbies-list div{
    background: #262626; /* لون خلفية غامق للصندوق */
    padding: 40px; /* مساحة داخلية بين النص وحدود الصندوق */
    font-size: 13px;
    font-weight: 300;
    border-radius: 10px;
    transition: background 0.5s, transform 0.5s; /*الخلفية تتغير من رمادي غامق إلى وردي بسلاسة.*/
}
.hobbies-list div i{
    font-size: 50px;
    margin-bottom: 30px;
}
.hobbies-list div h2{
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 15px;
}
.hobbies-list div a{
    text-decoration: none;
    color: white;
    font-size: 12px;
    margin-top: 20px;
    display: inline-block; /*استخدمنا inline-block لكي يصبح a كال box*/
    /*لأن العنصر <a> في الأساس inline.
والعناصر inline لا تقبل margin-top أو margin-bottom.*/

}
.hobbies-list div:hover{
    background: #ff004f; /* تغيير الخلفية عند مرور الماوس */
    transform: translateY(-10px); /* تحريك العنصر للأعلى 10px */
    /*transition في الكود السابق يضمن أن الحركة تكون سلسة وليست مفاجئة.*/

}
/*--------------portfolio-----------------------*/
#portfolio{
    padding: 50px 0;
}
.work-list{
    display: grid; /* تحويل العنصر إلى grid layout لتوزيع العناصر بشكل شبكي */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /*كل عمود يصغر إلى 250px فقط، ولو فيه مساحة فاضية، ياخذ حصة عادلة منها (بـ 1fr).*/
    /*repeat: تكرار الأعمدة.*/     /*auto-fit: عدد الأعمدة يتحدد تلقائيًا بناءً على عرض الشاشة.*/
    grid-gap: 40px; /*وضع مسافة بين العناصر بالشبكة بقيمة 40px*/
    margin-top: 50px;
}
.work{
    border-radius: 10px;
    position: relative;
    overflow: hidden; /* يخفي أي جزء من الصورة يخرج خارج حدود الصندوق */
}
.work img{
    width: 100%; /* تجعل الصورة تمتد بعرض الصندوق بالكامل */
    border-radius: 10px;
    display: block; /* يزيل المسافة الصغيرة التي تظهر تحت الصور (افتراضيًا الصور inline) */

    /*
     نحن نعامله مثل div في بعض الخصائص — خصوصًا أنه:

✅ يأخذ سطر كامل،
✅ لا يترك فراغًا تحته،
✅ ويمكن التحكم فيه بسهولة داخل layout مثل أي عنصر block.

    */
    height: 500px;
    transition: transform 0.5s;

}

/*هذا الكود يصمم "طبقة شفافة" تظهر فوق صورة أو عنصر، وتستخدم عادة لعرض نص أو أزرار بشكل أنيق في وسط الصورة.
*/
.layer{
    width: 100%; /* العنصر ياخذ كل عرض وارتفاع العنصر الأب بالكامل، يعني يغطيه كليًا.*/
    height: 0%;
    background: linear-gradient(rgba(0,0,0,0.6), #ff004f);/*التدريج باللون */
    border-radius: 10px;
    position: absolute; /*هذا يخلي العنصر حر الحركة داخل العنصر الأب، يعني تقدر تحدد مكانه بالضبط باستخدام top, left, right,*/
    /*من دونه لا يمكن وضع النص داخل الصورة*/
    left: 0; /*يعني حط نفسك ملاصق تمامًا لليسار.*/
    bottom: 0; /*يعني حط نفسك ملاصق تمامًا لليسار.*/
    overflow: hidden;
    display: flex; /*Flexbox هو طريقة حديثة وذكية لترتيب العناصر داخل عنصر أب بشكل مرن وسهل. بدل ما تستخدم float أو position*/
    align-items: center; /* توسيط المحتوى عموديًا.*/
    justify-content: center; /*توسيط المحتوى أفقيًا.*/
    flex-direction: column; /* ترتيب العناصر عموديًا فوق بعض (مثل: عنوان، ثم زر، ثم وصف).*/
    padding: 0 40px;
    text-align: center; /*يجعل النص في المنتصف أفقيًا داخل .layer.*/
    font-size: 14px;
    transition: height 0.5s;

}
.layer h3{
    /*font-weight: 500;*/
    margin-bottom: 20px;

}
.layer a{
      margin-top: 20px;
    color: #ff004f;
    text-decoration: none;
    font-size: 18px;
    line-height: 60px; /*هذا يجعل النص يبدو وكأنه في منتصف الدائرة عموديًا. من خلال وضعه بنفس ال height الموجود تحت*/
    background: white;
    width: 60px;
    height: 60px;
    border-radius: 50%; /*CIRCLE*/
    text-align: center;
}
.work:hover img{
    transform: scale(1.1); /*zoom in with 10%*/
}
.work:hover .layer{
    height: 100%;
}
.btn{
    display: block; /*صبح العنصر كتلة مستقلة يمكن التحكم بها ك margin و width الخ*/
    margin: 50px auto; /*auto so it can be in the middel*/
    width: fit-content; /*عرضه يتناسب تمامًا مع حجم النص "See More" + الحشوة (padding).*/
    border: 1px solid #ff004f;
    padding: 14px 50px;
    border-radius: 6px;
    text-decoration: none;
    color: white;
    transition: background 0.5s;
}
.btn:hover{
    background: #ff004f;
}

/* ---------contact---------- */

.contact-left{
    flex-basis: 35%;
}
.contact-right{
    flex-basis: 60%;
}
.contact-left p{
    margin-top: 30px;
}
.contact-left p i{
    color: #ff004f;
    margin-right: 15px;
    font-size: 25px;
}
.social-icons{
    margin-top: 30px;

}
.social-icons a{
    text-decoration: none;
    font-size: 30px;
    margin-right: 15px;
    color: #ababab;
    display: inline-block; /* يبقى في نفس السطر مع غيره
– يمكنك تعيين width, height, padding, إلخ.*/
    transition: transform 0.5s;

}
.social-icons a:hover{
    color: #ff004f;
    transform: translateY(-5px);
}
.btn.btn2{
    display: inline-block;
    background: #ff004f;

}
.contact-right form {
    width: 100%;
}
form input, form textarea{
    width: 100%;
    border: 0;
    outline: none;
    background: #262626;
    padding: 15px;
    margin: 15px 0;
    color: white;
    font-size: 18px;
    border-radius: 6px;

}
form .btn2{
    padding: 14px 60px;
    font-size: 18px;
    margin-top: 20px;
    cursor: pointer;
}
.copyright{
    width: 100%;
    text-align: center;
    padding: 25px 0;
    background: #262626;
    font-weight: 300;
    margin-top: 20px;
}
.copyright i{
    color: #ff004f;
}
/*----------------------css for small screen------------------------*/
nav .fa-solid{
    display: none; /*the menu is not displayed on wide screens*/
}

@media only screen and (max-width: 600px) {
    #header{
        background-image: url(images/backgroundmainsmallscreens.jpg); /*onnodige stap*/
        background-size: cover;       /* تأكد من تغطية العنصر بالكامل */
        background-position: right center;  /* ضع الصورة في المنتصف */
        background-attachment: scroll; /* بدلاً من fixed لتعمل على الهواتف */
    }
    .header-text{
        margin-top: 100%;
        font-size: 16px;
    }
    .header-text h1{
        font-size: 30px;
    }
    nav .fa-solid{
        display: block;
        font-size: 25px;
    }
    nav ul{
        background: #ff004f;
        position: fixed; /*top, right, bottom, left ثابت لا يتحرك مع الصفحة  و يمكن التحكم به عن طريق(scrolling)*/
        top: 0; /*جعل العنصر يلتصق بأعلى الصفحة (أقصى الأعلى).*/
        right: -200px;  /*it wil become hidden bc the width is 200px*/
        width: 200px;
        height: 100vh; /*100vh = طول الشاشة بالكامل*/
        padding-top: 50px;
        z-index: 2;
        transition: right 0.5s;

    }
    nav ul li{
        display: block;
        margin: 25px; /*مسافة بين الازرار*/
    }
    nav ul .fa-solid{
        position: absolute;
        /*
        1. position: absolute
تعني أن الأيقونة ستتموضع داخل أقرب عنصر "أب" له position غير static (مثل relative أو fixed أو absolute).

في حالتك، الأب هو غالبًا nav ul، والذي له position: fixed، لذا:

الأيقونة سَتُوضَع داخل الـ <ul> لكن تُحدّد باستخدام top و left.
        */
        top: 25px;
        left: 25px;
        cursor: pointer;
    }
    .sub-title{
        font-size: 40px;
    }
    .about-col-1, .about-col-2{
        flex-basis: 100%;
    }
    .about-col-1{
        margin-bottom: 30px;
    }
    .about-col-2{
        font-size: 14px;
    }
    .tab-links{
        font-size: 16px;
        margin-right: 20px;
    }
    .contact-left, .contact-right{
        flex-basis: 100%;
    }
    .copyright{
        font-size: 14px;
    }
    .work img{
        height: 400px;
    }
}

#msg{
    color: #61b752;
    margin-top: -40px;
    display: block;
}