/*
=====================================================
WIZORA FEATURES BLOCK
=====================================================
*/


.wizora-features{

width:100%;

}



.features-container{

width:100%;

max-width:1200px;

margin:auto;

}



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


.features-title{

text-align:center;

font-size:42px;

font-weight:800;

margin:0 0 15px;

color:var(--text-color,#111827);

}



.features-subtitle{

text-align:center;

max-width:750px;

margin:0 auto 50px;

font-size:18px;

line-height:1.7;

color:#64748b;

}



/*
=====================================================
GRID
=====================================================
*/


.features-grid{

display:grid;

gap:30px;

}



/* COLUMNS */


.features-columns-1 .features-grid{

grid-template-columns:1fr;

}


.features-columns-2 .features-grid{

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

}


.features-columns-3 .features-grid{

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

}


.features-columns-4 .features-grid{

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

}


.features-columns-5 .features-grid{

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

}


.features-columns-6 .features-grid{

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

}



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


.feature-card{

position:relative;

padding:30px;

height:100%;

border-radius:var(--card-radius,16px);

background:#ffffff;

transition:

transform .35s ease,

box-shadow .35s ease;

overflow:hidden;

}



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


.card-style-modern .feature-card{

box-shadow:

0 15px 40px rgba(0,0,0,.08);

}



.card-style-minimal .feature-card{

border:1px solid #e5e7eb;

}



.card-style-bordered .feature-card{

border:2px solid #e5e7eb;

}



.card-style-glass .feature-card{

background:

rgba(255,255,255,.15);

backdrop-filter:blur(12px);

border:

1px solid rgba(255,255,255,.3);

}



.card-style-shadow .feature-card{

box-shadow:

0 20px 50px rgba(0,0,0,.15);

}



/*
=====================================================
HOVER EFFECTS
=====================================================
*/


.hover-lift .feature-card:hover{

transform:translateY(-10px);

}



.hover-zoom .feature-card:hover{

transform:scale(1.03);

}



.hover-glow .feature-card:hover{

box-shadow:

0 0 35px var(--primary-color);

}



/*
=====================================================
IMAGE
=====================================================
*/


.feature-image{

width:100%;

height:220px;

overflow:hidden;

border-radius:12px;

margin-bottom:25px;

}



.feature-image img{

width:100%;

height:100%;

object-fit:cover;

}



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


.feature-icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

var(--primary-color);

color:white;

font-size:32px;

margin-bottom:20px;

}



.feature-icon i{

line-height:1;

}



/*
=====================================================
BADGE
=====================================================
*/


.feature-badge{

display:inline-block;

padding:

6px 14px;

border-radius:30px;

background:

var(--primary-color);

color:white;

font-size:13px;

margin-bottom:15px;

}



/*
=====================================================
CONTENT
=====================================================
*/


.feature-card h3{

font-size:24px;

font-weight:700;

margin:15px 0;

color:#111827;

}



.feature-card p{

font-size:16px;

line-height:1.7;

color:#64748b;

margin-bottom:25px;

}



/*
=====================================================
BUTTON
=====================================================
*/


.feature-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:

12px 25px;

border-radius:30px;

background:

var(--primary-color);

color:white;

font-weight:600;

transition:.3s ease;

}



.feature-button:hover{

opacity:.85;

}



/*
=====================================================
ANIMATION READY
=====================================================
*/


.feature-card{

opacity:0;

transform:translateY(30px);

}



.feature-card.feature-visible{

opacity:1;

transform:none;

}



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


@media(max-width:1024px){


.features-columns-4 .features-grid,
.features-columns-5 .features-grid,
.features-columns-6 .features-grid{

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

}


}



@media(max-width:768px){


.features-grid{

grid-template-columns:1fr!important;

}



.features-title{

font-size:34px;

}


.features-subtitle{
font-size:16px;

}


.feature-card{

padding:25px;

}



}