/*=========================================================
                    FOCUS SECTION
=========================================================*/

.focus-section{

    padding:10px;

    background:#ffffff;

    position:relative;

    overflow:hidden;

}

/*==================================================
            SECTION HEADER
==================================================*/

.focus-section-header{

    max-width:760px;

    margin:0 auto 70px;

}

.focus-section-header h2{

    font-family:'Manrope',sans-serif;

    font-size:52px;

    font-weight:800;

    color:#0F172A;

    margin-bottom:20px;

}

.focus-section-header p{

    font-size:18px;

    line-height:1.8;

    color:#64748B;

}

/*==================================================
                CARD
==================================================*/

.focus-card{

    background:#ffffff;

    border-radius:22px;

    padding:45px 35px;

    position:relative;

    overflow:hidden;

    transition:.4s;

    box-shadow:0 10px 30px rgba(15,23,42,.06);

    border:1px solid #EDF2F7;

    height:100%;

}

/* Top Blue Line */

.focus-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:5px;

    background:linear-gradient(
        90deg,
        #2563EB,
        #60A5FA
    );

    transition:.4s;

}

/* Hover */

.focus-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(37,99,235,.15);

}

.focus-card:hover::before{

    width:100%;

}

/*==================================================
                ICON
==================================================*/

.focus-icon{

    width:80px;

    height:80px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #2563EB,
        #3B82F6
    );

    color:#ffffff;

    font-size:34px;

    margin-bottom:30px;

    transition:.4s;

}

.focus-card:hover .focus-icon{

    transform:rotate(-8deg) scale(1.08);

}

/*==================================================
                TITLE
==================================================*/

.focus-card h4{

    font-size:26px;

    font-weight:700;

    margin-bottom:18px;

    color:#0F172A;

}

/*==================================================
                TEXT
==================================================*/

.focus-card p{

    color:#64748B;

    line-height:1.8;

    margin-bottom:35px;

}

/*==================================================
                LINK
==================================================*/

.focus-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#2563EB;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.focus-card a i{

    transition:.3s;

}

.focus-card:hover a{

    color:#1D4ED8;

}

.focus-card:hover a i{

    transform:translateX(6px);

}

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

@media(max-width:991px){

.focus-section{

    padding:90px 0;

}

.focus-section-header h2{

    font-size:42px;

}

}

@media(max-width:768px){

.focus-section-header{

    margin-bottom:45px;

}

.focus-section-header h2{

    font-size:34px;

}

.focus-section-header p{

    font-size:16px;

}

.focus-card{

    padding:35px 25px;

}

.focus-icon{

    width:70px;

    height:70px;

    font-size:28px;

}

}