/*=========================
        HERO SECTION
=========================*/

.hero-section{
    min-height: 90vh;
    background: linear-gradient(120deg, #0f172a 50%, #fffdfd 50%);/*#0a1a3a  */
    padding-top: 80px;
    overflow: hidden;
 position: relative;
    
}
/*
background:
        url("../img/SCREENS-1.png") right center / 45% auto no-repeat,
        linear-gradient(120deg, #0f172a 50%, #fffdfd 50%);
 */

/* النص */
.text-content{
    color: #fff;
}

.text-content h1{
    font-size: 42px;
    font-weight: 800;
}

.text-content p{
    font-size: 16px;
    margin-top: 15px;
    opacity: 0.9;
}

/* الصور 
.hero-image{

    width:100%;
    height:550px;

    background:url("../img/SERVERS.jpeg") center center/cover no-repeat;

    border-radius:25px;

    box-shadow:0 25px 50px rgba(0,0,0,.18);

    transition:.4s;

}

.hero-image:hover{

    transform:translateY(-8px);

}
*/


/* الجزء الذي يحتوي على الصورة  سكشن سيرفر*/
.hero-image{

    min-height:333px;

    background:
        linear-gradient(rgba(2, 10, 32, 0), rgba(2, 10, 32, 0)),
        url("../img/SERVERS-1.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    border-radius:40px 0 0 40px;
    

}
/* الجزء الذي يحتوي على الصورة  سكشن الشاشات*/
.hero-bg{

    min-height:333px;

    background:
        linear-gradient(rgba(2, 10, 32, 0), rgba(252, 252, 252, 0)),
        url("../img/SCREENS-1.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    border-radius:40px 0 0 40px;
    

}


/*=========================
        RESPONSIVE
=========================*/

@media(max-width:991px){

.hero-section{

    background:#020a20;
    text-align:center;

}

.text-content{

    margin-bottom:50px;

}

.text-content h1{

    font-size:40px;

}
/*
 .hero-image{

        height:350px;
        margin-top:40px;

    }*/


    .hero-bg{

    min-height:350px;
    border-radius:0;

}
}






/*=========================
 PRODUCTS SECTION
=========================*/

.products-section{
    padding:80px 0;
    
    background:#f8fafc;
     
}

.section-title-overlap{
    margin-top: -60px; /* يرفع العنوان للأعلى */
    position: relative;
    z-index: 10;
}
/* العنوان 

.section-title h2{
    font-size:38px;
    font-weight:800;
    color:#64748b;

    
}*/






/* الكارت */

.product-card{

    background:rgb(255, 255, 255);
    border-radius:25px;
    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;
}


.product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.15);
}



/* صورة المنتج */

.product-img{

    height:280px;

    background:#fbfbfc00;

    display:flex;
    justify-content:center;
    align-items:center;

}


.product-img img{

    width:80%;
    height:90%;

    object-fit:contain;

}



/* المحتوى */

.product-content{

    padding:25px;

}


.product-content h3{

    font-size:25px;
    font-weight:800;
    color:#0f172a;

}


.model{

    color:#2563eb;
    font-weight:600;

}


.product-content p{

    color:#64748b;
    margin:15px 0;

}



/* معلومات المنتج */

.product-info{

    display:flex;

    justify-content:space-between;

    margin-bottom:20px;

    color:#334155;

}

.likes{
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    color:#64748b;
    font-size:18px;
    transition:.3s;
}
.likes i{
 font-size:22px;
    transition:.3s;
    color:#ef4444;

}

.likes.active{
    color:#ef4444;
}

.likes.active i{
    color:#ef4444;
    transform:scale(1.2);
}

/* زر الاتصال */

.contact-btn{

    display:block;

    text-align:center;

    padding:13px;

    background:#0f172a;

    color:white;

    border-radius:12px;

    text-decoration:none;

    transition:.3s;

}


.contact-btn:hover{

    background:#2563eb;
    color:white;

}































.floating1{

    position: sticky;

    top: 250px; /* انزلها أكثر */

    float: right;

    width: 240px;

    margin-right: 20px;

    

   

    padding: 20px;

    

    
}





.floating-category{

    position: sticky;

    top: 250px; /* انزلها أكثر */

    float: right;

    width: 240px;

    margin-right: 20px;

    background: #fff;

    border-radius: 18px;

    padding: 20px;

    box-shadow: 0 10px 35px rgba(0,0,0,.12);

    z-index: 100;
}
.mt-6 {
    margin-top: 12rem !important;
}
.mb-6 {
    margin-bottom:6rem !important;
}
.floating-category h6{

    font-weight:700;
    margin-bottom:18px;
    color:#0f172a;

}

.floating-category a{

    display:flex;
    align-items:center;
    gap:12px;

    text-decoration:none;

    color:#334155;

    padding:12px;

    margin-bottom:8px;

    border-radius:10px;

    transition:.3s;

}

.floating-category a:hover{

    background:#0f172a;

    color:#fff;

}

.floating-category i{

    width:20px;

    color:#05215c;

}

.floating-category a:hover i{

    color:#fff;

}

/* Mobile Products Fix */
@media (max-width: 768px) {

    /* إلغاء القائمة الجانبية في الموبايل */
    .floating-category {
        position: relative;
        float: none;
        width: 100%;
        margin: 20px 0;
        top: 0;
    }


.floating1 {
        
        float: none;
       
       
       
    }

    /* مسافة القسم */
    .products-section {
        padding: 40px 10px;
    }


    /* العنوان */
    .products-section h2 {
        font-size: 22px;
        text-align: center;
        white-space: nowrap;
    }


    /* الكارت */
    .product-card {
        border-radius: 18px;
    }


    /* صورة المنتج */
    .product-img {
        height: 220px;
    }


    .product-img img {
        width: 85%;
        height: 85%;
    }


    /* النص */
    .product-content {
        padding: 18px;
    }


    .product-content h3 {
        font-size: 20px;
        line-height: 1.4;
    }


    .product-content p {
        font-size: 14px;
        line-height: 1.8;
        text-align: justify;
    }


    .model {
        display: block;
        font-size: 14px;
    }


    /* السعر والقلب */
    .product-info {
        flex-direction: column;
        gap: 15px;
    }


}





 


/*2 صورة المنتج */

.product-img2{

    height:280px;

    background:#fafafa00;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

}


.product-img2 img{

    width:80%;
    height:90%;

    object-fit:contain;

}


/* الصور الصغيرة داخل الصورة */
.product-thumbs{
    display:flex;
    gap:10px;
    margin-top:15px;

    z-index:5;
     position:absolute;

    bottom:10px;
    left:20%;

    transform:translateX(-50%);
}


.product-thumbs img{

    width:45px;
    height:45px;

    object-fit:cover;

    border-radius:8px;

    cursor:pointer;

    border:2px solid #ddd;

}


.product-thumbs img:hover{

    transform:scale(1.05);

}