/*=========================================
  Main News Slider - Misr Al Watan
=========================================*/

.hero-slider{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#000;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.hero-slider .swiper{
    width:100%;
    height:520px;
}

.hero-slider .swiper-slide{
    position:relative;
    overflow:hidden;
}

.hero-slider img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.hero-slider .swiper-slide-active img{
    transform:scale(1.05);
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.88),
        rgba(0,0,0,.25),
        transparent
    );
}

.hero-caption{

    position:absolute;

    right:35px;

    left:35px;

    bottom:70px;

    z-index:5;

    color:#fff;

}

.hero-category{

    display:inline-block;

    background:#240dd4;

    padding:6px 15px;

    border-radius:30px;

    font-size:13px;

    margin-bottom:15px;

    font-weight:bold;

}

.hero-title{

    font-size:40px;

    line-height:1.4;

    font-weight:700;

    margin-bottom:15px;

}

.hero-title a{

    color:#fff;

    text-decoration:none;

}

.hero-title a:hover{

    color:#ffd200;

}

.hero-summary{

    color:#ddd;

    font-size:16px;

    line-height:1.9;

    margin-bottom:18px;

}

.hero-meta{

    display:flex;

    gap:20px;

    align-items:center;

    color:#eee;

    font-size:14px;

}

.hero-meta i{

    color:#ffcc00;

    margin-left:6px;

}
/*=========================================
  Main News Slider - Misr Al Watan
=========================================*/

.hero-slider{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#000;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.hero-slider .swiper{
    width:100%;
    height:520px;
}

.hero-slider .swiper-slide{
    position:relative;
    overflow:hidden;
}

.hero-slider img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.hero-slider .swiper-slide-active img{
    transform:scale(1.05);
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.88),
        rgba(0,0,0,.25),
        transparent
    );
}

.hero-caption{

    position:absolute;

    right:35px;

    left:35px;

    bottom:70px;

    z-index:5;

    color:#fff;

}

.hero-category{

    display:inline-block;

    background:#5209e5;

    padding:6px 15px;

    border-radius:30px;

    font-size:13px;

    margin-bottom:15px;

    font-weight:bold;

}

.hero-title{

    font-size:40px;

    line-height:1.4;

    font-weight:700;

    margin-bottom:15px;

}

.hero-title a{

    color:#fff;

    text-decoration:none;

}

.hero-title a:hover{

    color:#ffd200;

}

.hero-summary{

    color:#ddd;

    font-size:16px;

    line-height:1.9;

    margin-bottom:18px;

}

.hero-meta{

    display:flex;

    gap:20px;

    align-items:center;

    color:#eee;

    font-size:14px;

}

.hero-meta i{

    color:#ffcc00;

    margin-left:6px;

}
.swiper-button-next,
.swiper-button-prev{

    width:52px;

    height:52px;

    background:rgba(0,0,0,.45);

    border-radius:50%;

    backdrop-filter:blur(6px);

}

.swiper-button-next:hover,
.swiper-button-prev:hover{

    background:#c40000;

}

.swiper-button-next:after,
.swiper-button-prev:after{

    font-size:18px;

    color:#fff;

    font-weight:bold;

}

.swiper-pagination{

    bottom:15px !important;

}

.swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#fff;

    opacity:.4;

}

.swiper-pagination-bullet-active{

    opacity:1;

    width:35px;

    border-radius:20px;

    background:#d60000;

}

.hero-thumbs{

    margin-top:8px;

}

.hero-thumbs .swiper{

    height:110px;

}

.hero-thumbs .swiper-slide{

    cursor:pointer;

    opacity:.55;

    transition:.3s;

    border:3px solid transparent;

}

.hero-thumbs .swiper-slide-thumb-active{

    opacity:1;

    border-color:#d30000;

}

.hero-thumb{

    position:relative;

    height:100%;

    overflow:hidden;

}

.hero-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-thumb-title{

    position:absolute;

    bottom:0;

    right:0;

    left:0;

    padding:8px;

    background:linear-gradient(transparent,#000);

    color:#fff;

    font-size:13px;

    font-weight:bold;

    line-height:1.5;

}
/*====================================================
=            Responsive Design
====================================================*/

@media (max-width:1200px){

    .hero-slider .swiper{

        height:470px;

    }

    .hero-title{

        font-size:34px;

    }

}

@media (max-width:992px){

    .hero-slider .swiper{

        height:420px;

    }

    .hero-caption{

        right:25px;

        left:25px;

        bottom:50px;

    }

    .hero-title{

        font-size:30px;

    }

    .hero-summary{

        font-size:15px;

    }

}

@media (max-width:768px){

    .hero-slider .swiper{

        height:320px;

    }

    .hero-caption{

        right:18px;

        left:18px;

        bottom:30px;

    }

    .hero-category{

        font-size:11px;

        padding:5px 12px;

    }

    .hero-title{

        font-size:22px;

        line-height:1.6;

        margin-bottom:10px;

    }

    .hero-summary{

        display:none;

    }

    .hero-meta{

        gap:12px;

        font-size:12px;

        flex-wrap:wrap;

    }

    .swiper-button-next,
    .swiper-button-prev{

        width:40px;

        height:40px;

    }

    .swiper-button-next:after,
    .swiper-button-prev:after{

        font-size:14px;

    }

    .hero-thumbs{

        display:none;

    }

}

@media (max-width:480px){

    .hero-slider .swiper{

        height:260px;

    }

    .hero-title{

        font-size:18px;

    }

    .hero-caption{

        bottom:18px;

    }

}

/*====================================================
=            Animations
====================================================*/

.hero-caption{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-slider img{

    transition:transform .8s ease;

}

.hero-slider:hover img{

    transform:scale(1.06);

}

.hero-thumb img{

    transition:transform .4s ease;

}

.hero-thumb:hover img{

    transform:scale(1.08);

}

.hero-thumb-title{

    transition:.3s;

}

.hero-thumb:hover .hero-thumb-title{

    background:linear-gradient(transparent,#b30000);

}
/*====================================================
=            Animations
====================================================*/

.hero-caption{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-slider img{

    transition:transform .8s ease;

}

.hero-slider:hover img{

    transform:scale(1.06);

}

.hero-thumb img{

    transition:transform .4s ease;

}

.hero-thumb:hover img{

    transform:scale(1.08);

}

.hero-thumb-title{

    transition:.3s;

}

.hero-thumb:hover .hero-thumb-title{

    background:linear-gradient(transparent,#b30000);

}
/*====================================================
=            Effects
====================================================*/

.hero-slider{

    border:1px solid #ececec;

}

.hero-slider::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    box-shadow:inset 0 0 80px rgba(0,0,0,.25);

}

.hero-category{

    letter-spacing:.5px;

}

.hero-meta span{

    display:flex;

    align-items:center;

}

.hero-meta i{

    width:18px;

    text-align:center;

}

.hero-thumb{

    border-radius:10px;

}

.hero-thumb img{

    border-radius:10px;

}

.hero-slider a{

    transition:.3s;

}

.hero-slider a:hover{

    color:#ffd500;

}