@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
* {margin:0;padding:0;box-sizing:border-box;font-family:'Cairo',sans-serif;}
body {background:#f0f8ff;color:#023e8a;}

header {
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    padding:15px 0;
    position:fixed;
    width:100%;
    top:0;
    z-index:999;
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
}
.logo {font-size:26px;color:#fff;font-weight:bold;}
nav a {color:#fff;margin:0 20px;text-decoration:none;font-weight:bold;}

.slider {margin-top:80px;height:500px;overflow:hidden;position:relative;}
.slide img {width:100%;height:100%;object-fit:cover;}
.slider::after {content:'';position:absolute;bottom:20px;left:50%;transform:translateX(-50%);}
.slider-dots {text-align:center;margin:20px 0;}
.dot {display:inline-block;width:12px;height:12px;background:#fff;border-radius:50%;margin:0 5px;opacity:0.5;cursor:pointer;}
.dot.active {background:#0077b6;opacity:1;}

.categories {padding:60px 5%;background:#fff;}
.cat-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:25px;}
.cat-box {
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,119,182,0.2);
    transition:0.4s;
    text-align:center;
    padding:20px;
}
.cat-box:hover {transform:translateY(-15px);box-shadow:0 20px 40px rgba(0,119,182,0.4);}
.cat-icon {width:100px;height:100px;object-fit:contain;border-radius:50%;border:5px solid #00b4d8;background:rgba(0,180,216,0.1);padding:10px;}

.cart-icon {position:fixed;bottom:20px;left:20px;background:#0077b6;color:#fff;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 5px 15px rgba(0,0,0,0.3);cursor:pointer;z-index:999;}

footer {background:#023e8a;color:#fff;padding:40px 0;text-align:center;}


/* assets/css/style.css - ستايل أزرق محيطي فخم لكل الموقع */
* {margin:0;padding:0;box-sizing:border-box;font-family:'Cairo',sans-serif;}
body {background:#f0f8ff;color:#023e8a;line-height:1.6;}
header {background:linear-gradient(135deg,#0077b6,#00b4d8);padding:15px 5%;position:fixed;top:0;width:100%;z-index:999;box-shadow:0 4px 20px rgba(0,0,0,0.2);display:flex;justify-content:space-between;align-items:center;}
.logo {font-size:26px;font-weight:900;color:#fff;}
nav a {color:#fff;margin:0 15px;text-decoration:none;font-weight:bold;font-size:16px;transition:0.3s;}
nav a:hover {text-shadow:0 0 10px #fff;transform:scale(1.1);}

.slider-container {position:relative;margin-top:70px;height:90vh;overflow:hidden;}
.slider {position:relative;width:100%;height:100%;}
.slide {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 1.5s ease;}
.slide.active {opacity:1;}
.slide img {width:100%;height:100%;object-fit:cover;}
.slider-overlay {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:10;width:90%;max-width:1000px;}
.glow-title {font-size:clamp(32px,8vw,80px);font-weight:900;color:#fff;text-shadow:0 0 20px #00b4d8,0 0 40px #0077b6,0 0 60px #00b4d8,0 0 80px #0077b6;animation:glow 2s infinite alternate;white-space:nowrap;}
@keyframes glow {from {text-shadow:0 0 20px #00b4d8;} to {text-shadow:0 0 80px #0077b6,0 0 100px #00b4d8;}}
.slider-dots {text-align:center;position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:10;}
.dot {display:inline-block;width:14px;height:14px;background:#fff;border-radius:50%;margin:0 8px;cursor:pointer;opacity:0.6;transition:0.3s;}
.dot.active {opacity:1;background:#00b4d8;transform:scale(1.3);}

.categories, .latest-products {padding:60px 5%;background:#fff;}
.section-title {text-align:center;font-size:clamp(28px,6vw,48px);color:#0077b6;margin-bottom:50px;font-weight:900;position:relative;}
.section-title::after {content:'';position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:100px;height:5px;background:#00b4d8;border-radius:50px;}

.cat-grid, .products-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;}
.cat-box, .product-card {background:#fff;border-radius:25px;overflow:hidden;box-shadow:0 15px 40px rgba(0,119,182,0.2);text-align:center;padding:25px;transition:0.4s;position:relative;}
.cat-box:hover, .product-card:hover {transform:translateY(-20px);box-shadow:0 25px 60px rgba(0,119,182,0.4);}
.cat-icon, .product-img {width:120px;height:120px;object-fit:contain;border-radius:50%;border:6px solid #00b4d8;background:rgba(0,180,216,0.1);padding:15px;margin:0 auto 20px;}
.cat-name, .product-name {font-size:20px;font-weight:bold;color:#023e8a;margin:15px 0;}
.product-price {font-size:22px;color:#4caf50;font-weight:900;}
.product-cat {background:#e3f2fd;color:#0077b6;padding:8px 15px;border-radius:20px;font-size:14px;font-weight:bold;margin:10px 0;display:inline-block;}
.add-to-cart {background:#0077b6;color:#fff;padding:12px 25px;border:none;border-radius:25px;cursor:pointer;font-weight:bold;transition:0.3s;}
.add-to-cart:hover {background:#023e8a;transform:scale(1.05);}

.cart-float {position:fixed;bottom:30px;left:30px;background:#0077b6;color:#fff;width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:0 10px 30px rgba(0,0,0,0.4);cursor:pointer;z-index:999;animation:pulse 2s infinite;}
@keyframes pulse {0%{box-shadow:0 0 0 0 rgba(0,119,182,0.7);}70%{box-shadow:0 0 0 20px rgba(0,119,182,0);}100%{box-shadow:0 0 0 0 rgba(0,119,182,0);}}

footer {background:#023e8a;color:#fff;padding:50px 5%;text-align:center;font-size:18px;}
footer a {color:#00b4d8;text-decoration:none;font-weight:bold;}

@media(max-width:768px){
    header{flex-direction:column;padding:15px;}
    nav{margin-top:10px;}
    nav a{display:block;margin:10px 0;}
    .slider-container{height:70vh;}
    .products-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
}

/* =================================
   تأثير الزوم البطيء للسلايدر (مُعدّل)
   (assets/css/index-style.css)
   ================================= */

.slide img {

    
    /* 💡 تطبيق تأثير الزوم (10 ثواني، تكبير 5% فقط) */
    animation: slowZoomSlight 10s infinite alternate ease-in-out;
    transform-origin: center center; 
}

/* 💡 تعريف تأثير الحركة (Keyframes) (تكبير قليل 5%) */
@keyframes slowZoomSlight {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05); /* زوم 5% فقط */
    }
}