/* ==========================================================
 *   ExotElectronics
 *   Component Spotlight Stylesheet
 *   File: /assets/css/component-spotlight.css
 *   ========================================================== */


/* ==========================================================
 *   Section
 *   ========================================================== */

.component-spotlight{

    padding:90px 20px;

    background:#ffffff;

}


/* ==========================================================
 *   Layout
 *   ========================================================== */

.spotlight-layout{

    display:grid;

    grid-template-columns:1.2fr 1fr;

    gap:60px;

    align-items:center;

}


/* ==========================================================
 *   Content
 *   ========================================================== */

.spotlight-content{

    max-width:650px;

}

.spotlight-badge{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:20px;

    border-radius:999px;

    background:#eff6ff;

    color:#2563eb;

    font-size:.9rem;

    font-weight:700;

}

.spotlight-content h2{

    margin:0 0 20px;

    font-size:2.5rem;

    line-height:1.2;

    color:#111827;

}

.spotlight-content p{

    margin-bottom:35px;

    font-size:1.1rem;

    line-height:1.8;

    color:#6b7280;

}


/* ==========================================================
 *   Image
 *   ========================================================== */

.spotlight-image{

    overflow:hidden;

    border-radius:20px;

    background:#f8fafc;

    box-shadow:0 18px 45px rgba(0,0,0,.10);

}

.spotlight-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.spotlight-image:hover img{

    transform:scale(1.05);

}


/* ==========================================================
 *   Button
 *   ========================================================== */

.component-spotlight .btn-primary{

    display:inline-block;

    padding:14px 30px;

    background:#2563eb;

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    border-radius:10px;

    transition:.25s;

}

.component-spotlight .btn-primary:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}


/* ==========================================================
 *   Responsive
 *   ========================================================== */

@media (max-width:992px){

    .spotlight-layout{

        grid-template-columns:1fr;

        gap:40px;

    }

    .spotlight-content{

        max-width:100%;

    }

}

@media (max-width:768px){

    .component-spotlight{

        padding:70px 20px;

    }

    .spotlight-content h2{

        font-size:2rem;

    }

    .spotlight-content p{

        font-size:1rem;

    }

}