/*==================================================
FEATURES SECTION
==================================================*/

.features-section{

    position:relative;

    padding:170px 0 130px;

    background:#f7faf8;

    overflow:hidden;

}

/*==================================================
BACKGROUND
==================================================*/

.features-bg{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.features-bg::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-220px;

    top:-250px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(22,163,74,.14),
    transparent 70%);

}

.features-bg::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-180px;

    bottom:-250px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(34,197,94,.10),
    transparent 70%);

}

/*==================================================
HEADING
==================================================*/

.features-heading{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

    text-align:center;

    margin-bottom:80px;

}

.features-heading h2{

    font-size:clamp(42px,4vw,60px);

    color:#111827;

    line-height:1.1;

    margin:20px 0;

}

.features-heading p{

    color:#6b7280;

    font-size:17px;

    line-height:1.9;

}

/*==================================================
GLASS CONTAINER
==================================================*/

.features-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:28px;

    padding:35px;

    border-radius:34px;

    background:

    rgba(255,255,255,.42);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:

    0 30px 80px rgba(0,0,0,.08);

}

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

.feature-card{

    position:relative;

    display:flex;

    flex-direction:column;

    padding:28px;

    min-height:280px;

    overflow:hidden;

    border-radius:24px;

    background:

    rgba(255,255,255,.55);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

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

    transition:

    transform .45s cubic-bezier(.22,1,.36,1),

    box-shadow .45s,

    border-color .45s;

}

.feature-card:hover{

    transform:

    translateY(-10px);

    border-color:#22c55e;

    box-shadow:

    0 25px 60px rgba(22,163,74,.16);

}


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

.feature-icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:

    linear-gradient(135deg,
    #16a34a,
    #22c55e);

    color:white;

    font-size:26px;

    margin-bottom:28px;

    box-shadow:

    0 12px 28px rgba(22,163,74,.28);

}

/*==================================================
STATUS
==================================================*/

.feature-status{

    position:absolute;

    top:24px;

    right:24px;

    padding:8px 14px;

    border-radius:999px;

    background:#ecfdf3;

    color:#16a34a;

    font-size:12px;

    font-weight:600;

}

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

.feature-card h3{

    font-size:28px;

    color:#111827;

    margin-bottom:16px;

}

.feature-card p{

    color:#6b7280;

    line-height:1.8;

    flex:1;

}

/*==================================================
GLASS SHINE
==================================================*/

.feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.30),

        transparent 45%

    );

    pointer-events:none;

}

.feature-card::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    top:-160px;

    right:-140px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,255,255,.45),

    transparent 70%);

    transition:.45s;

}

.feature-card:hover::after{

    transform:scale(1.25);

}

/*==================================================
MOBILE SLIDER
==================================================*/

.featuresSwiper{

    display:none;

    position:relative;

    z-index:2;

}

.featuresSwiper .swiper-slide{

    height:auto;

}

.featuresSwiper .feature-card{

    height:100%;

}

.swiper-pagination{

    position:relative;

    margin-top:35px;

}

.swiper-pagination-bullet{

    width:10px;

    height:10px;

    opacity:1;

    background:#bfd7c6;

    transition:.35s;

}

.swiper-pagination-bullet-active{

    width:32px;

    border-radius:20px;

    background:#16a34a;

}

/*==================================================
LAPTOP
==================================================*/

@media (max-width:1200px){

    .features-grid{

        gap:22px;

        padding:28px;

    }

    .feature-card{

        min-height:260px;

        padding:24px;

    }

    .feature-card h3{

        font-size:24px;

    }

}

/*==================================================
TABLET
==================================================*/

@media (max-width:992px){

    .features-section{

        padding:130px 0 90px;

    }

    .features-grid{

        display:grid;

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

    }

    .features-heading{

        margin-bottom:60px;

    }

}

/*==================================================
MOBILE
==================================================*/

@media (max-width:768px){

    .features-section{

        padding:100px 0 70px;

    }

    .features-heading{

        margin-bottom:40px;

    }

    .features-heading h2{

        font-size:34px;

    }

    .features-heading p{

        font-size:15px;

    }

    .features-grid{

        display:none;

    }

    .featuresSwiper{

        display:block;

    }

    .feature-card{

        min-height:300px;

        padding:25px;

    }

    .feature-card h3{

        font-size:24px;

    }

}

/*==================================================
SMALL MOBILE
==================================================*/

@media (max-width:480px){

    .features-heading h2{

        font-size:30px;

    }

    .feature-card{

        min-height:280px;

        padding:22px;

    }

    .feature-icon{

        width:58px;

        height:58px;

        font-size:22px;

    }

    .feature-card h3{

        font-size:22px;

    }

}