/* ==========================================================
   INFOWORLD V2
   HERO.CSS
========================================================== */

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

.hero{

    margin:40px 0 60px;

}

.hero-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

    align-items:start;

}

/* ==========================================
   HERO SLIDER
========================================== */

.hero-slider{

    position:relative;

    overflow:hidden;

    border-radius:16px;

    background:#fff;

    box-shadow:var(--shadow);

}

.hero-slide{

    position:relative;

}

.hero-slide img{

    width:100%;

    height:520px;

    object-fit:cover;

}

/* ==========================================
   OVERLAY
========================================== */

.hero-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.10)
    );

    padding:45px;

}

/* ==========================================
   CONTENT
========================================== */

.hero-content{

    max-width:720px;

    color:#fff;

}

.hero-content .tag{

    margin-bottom:20px;

}

.hero-content h1{

    color:#fff;

    font-size:2.6rem;

    line-height:1.2;

    margin-bottom:18px;

}

.hero-content p{

    color:#e5e7eb;

    font-size:1.05rem;

    margin-bottom:25px;

}

/* ==========================================
   HERO BUTTON
========================================== */

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#0ea5e9;

    color:#fff;

    padding:14px 28px;

    border-radius:999px;

    font-weight:600;

    transition:.3s;

}

.hero-btn:hover{

    background:#0284c7;

    color:#fff;

}

/* ==========================================
   ARROW
========================================== */

.hero-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;

    height:48px;

    border-radius:50%;

    background:rgba(255,255,255,.9);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.3s;

    z-index:5;

}

.hero-arrow:hover{

    background:#fff;

}

.hero-prev{

    left:20px;

}

.hero-next{

    right:20px;

}

/* ==========================================
   DOT
========================================== */

.hero-dots{

    position:absolute;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    display:flex;

    gap:10px;

}

.hero-dot{

    width:12px;

    height:12px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.3s;

}

.hero-dot.active{

    background:#fff;

}

/* ==========================================
   SIDEBAR
========================================== */

.hero-sidebar{

    display:flex;

    flex-direction:column;

    gap:25px;

}

/* ==========================================
   WIDGET
========================================== */

.widget{

    background:#fff;

    border-radius:16px;

    box-shadow:var(--shadow-sm);

    overflow:hidden;

}

.widget-title{

    padding:18px 22px;

    font-size:1rem;

    font-weight:700;

    border-bottom:1px solid var(--border);

}

/* ==========================================
   TRENDING
========================================== */

.trending-list{

    padding:18px 22px;

}

.trending-item{

    display:flex;

    gap:16px;

    margin-bottom:18px;

    align-items:flex-start;

}

.trending-item:last-child{

    margin-bottom:0;

}

.trending-number{

    width:32px;

    height:32px;

    border-radius:50%;

    background:#0ea5e9;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    flex-shrink:0;

}

.trending-item a{

    font-weight:600;

    line-height:1.5;

}

.trending-item a:hover{

    color:#0ea5e9;

}

/* ==========================================
   EDITOR CHOICE
========================================== */

.editor-choice{

    padding:20px;

}

.editor-card{

    display:flex;

    gap:15px;

    margin-bottom:18px;

}

.editor-card:last-child{

    margin-bottom:0;

}

.editor-card img{

    width:110px;

    height:80px;

    border-radius:10px;

    object-fit:cover;

}

.editor-card h4{

    font-size:.95rem;

    line-height:1.5;

}

.editor-card a:hover{

    color:#0ea5e9;

}

/* ==========================================
   HOVER
========================================== */

.hero-slide img{

    transition:transform .5s;

}

.hero-slider:hover img{

    transform:scale(1.04);

}

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

@media(max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

}

.hero-sidebar{

display:grid;

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

}

}

@media(max-width:768px){

.hero{

margin:25px 0;

}

.hero-slide img{

height:340px;

}

.hero-overlay{

padding:25px;

}

.hero-content h1{

font-size:1.7rem;

}

.hero-sidebar{

grid-template-columns:1fr;

}

.hero-arrow{

display:none;

}

}
/* ==========================================
SLIDER
========================================== */

.hero-slide{

display:none;

animation:fadeSlider .6s ease;

}

.hero-slide:first-child{

display:block;

}

@keyframes fadeSlider{

from{

opacity:0;

transform:translateX(30px);

}

to{

opacity:1;

transform:none;

}

}