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

.why-section{

padding:90px 0;

background:#f8fafc;

}

.why-card{

position:relative;

overflow:hidden;

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

backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.35);

border-radius:22px;

padding:35px 25px;

text-align:center;

height:100%;

transition:.4s;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.why-card:hover{

transform:translateY(-12px);

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

}

.why-icon{

width:80px;

height:80px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

background:linear-gradient(135deg,#2563eb,#3b82f6);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:34px;

}

.why-card h4{

font-size:22px;

font-weight:700;

margin-bottom:15px;

}

.why-card p{

font-size:15px;

color:#64748b;

line-height:1.7;

margin:0;

}

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

.why-icon{

position:relative;

overflow:hidden;

animation:floatIcon 4s ease-in-out infinite;

transition:all .4s ease;

}

/* Glass Glow */

.why-icon::before{

content:"";

position:absolute;

width:140%;

height:140%;

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

top:-20%;

left:-120%;

transform:rotate(30deg);

transition:1s;

}

.why-card:hover .why-icon::before{

left:130%;

}

/* Hover Rotate */

.why-card:hover .why-icon{

transform:rotate(10deg) scale(1.08);

}

/* Floating Animation */

@keyframes floatIcon{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/*==================================================
TOP BORDER EFFECT
==================================================*/

.why-card::after{

content:"";

position:absolute;

left:0;

top:0;

width:0;

height:4px;

background:linear-gradient(

90deg,

#2563eb,

#60a5fa

);

transition:.45s;

}

.why-card:hover::after{

width:100%;

}

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

.why-card h4{

transition:.35s;

}

.why-card:hover h4{

color:#2563eb;

}

.why-card{

border:5px solid red !important;

}