/*
==========================================
WHY CHOOSE US
==========================================
*/

.srb-why{

    position:relative;

    padding:120px 0;

    background:#ffffff;

    overflow:hidden;

}

.srb-why::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(15,124,144,.05);

    top:-180px;

    right:-180px;

}

.srb-why::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(19,181,234,.05);

    left:-150px;

    bottom:-150px;

}

.srb-why-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

    position:relative;

    z-index:2;

}

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

.srb-why-image{

    position:relative;

}

.srb-why-image img{

    width:100%;

    border-radius:28px;

    display:block;

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

/*
==========================================
Experience Card
==========================================
*/

.srb-exp-card{

    position:absolute;

    right:-30px;

    bottom:40px;

    width:180px;

    padding:30px;

    text-align:center;

    border-radius:24px;

    background:#fff;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    animation:srbFloatCard 5s ease-in-out infinite;

}

.srb-exp-card h2{

    font-size:52px;

    color:var(--srb-primary);

    line-height:1;

    margin-bottom:10px;

}

.srb-exp-card span{

    font-size:15px;

    font-weight:600;

    color:#667085;

}

@keyframes srbFloatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.srb-why-content{

    max-width:620px;

}

.srb-why-content .srb-section-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:var(--srb-primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.srb-why-content .srb-section-title{

    font-size:52px;

    line-height:1.15;

    font-weight:800;

    color:#17324d;

    margin-bottom:24px;

}

.srb-why-content .srb-section-text{

    font-size:18px;

    line-height:1.9;

    color:#667085;

    margin-bottom:40px;

}

/*
==========================================
Feature List
==========================================
*/

.srb-why-list{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-bottom:40px;

}

.srb-why-item{

    display:flex;

    gap:22px;

    align-items:flex-start;

    padding:22px;

    border-radius:18px;

    background:#fff;

    border:1px solid #edf2f7;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.04);

}

.srb-why-item:hover{

    transform:translateX(8px);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.srb-icon{

    width:62px;

    height:62px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:16px;

    background:var(--srb-primary);

    color:#fff;

    font-size:24px;

    font-weight:700;

}

.srb-why-item h4{

    font-size:22px;

    color:#17324d;

    margin-bottom:8px;

}

.srb-why-item p{

    color:#667085;

    line-height:1.8;

}

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

.srb-why-content .srb-btn{

    padding:18px 38px;

    font-size:16px;

    font-weight:700;

    border-radius:50px;

    box-shadow:0 20px 40px rgba(15,124,144,.20);

}

.srb-why-content .srb-btn:hover{

    transform:translateY(-4px);

}

/*
==========================================
Animation
==========================================
*/

.srb-why-image img{

    animation:srbImageFloat 7s ease-in-out infinite;

}

@keyframes srbImageFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}