/*
=====================================================
WIZORA SERVICES BLOCK
=====================================================
*/


.wizora-services{

width:100%;

}



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


.services-container{

max-width:1200px;

width:100%;

margin:auto;

}



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


.services-title{

text-align:center;

font-size:42px;

font-weight:800;

margin:0 0 15px;

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

}



.services-subtitle{

text-align:center;

max-width:750px;

margin:0 auto 50px;

font-size:18px;

line-height:1.7;

color:#64748b;

}



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


.services-grid{

display:grid;

gap:30px;

}



/*
=====================================================
COLUMNS
=====================================================
*/


.services-columns-1 .services-grid{

grid-template-columns:1fr;

}



.services-columns-2 .services-grid{

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

}



.services-columns-3 .services-grid{

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

}



.services-columns-4 .services-grid{

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

}



.services-columns-5 .services-grid{

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

}



.services-columns-6 .services-grid{

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

}



/*
=====================================================
LIST LAYOUT
=====================================================
*/


.services-layout-list .services-grid{

display:flex;

flex-direction:column;

}



.services-layout-list .service-card{

display:flex;

align-items:center;

gap:25px;

}



.services-layout-list .service-card p{

flex:1;

}



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


.service-card{

position:relative;

background:#ffffff;

padding:35px;

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

transition:

transform .35s ease,

box-shadow .35s ease;

overflow:hidden;

}



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


.card-style-modern .service-card{

box-shadow:

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

}



.card-style-minimal .service-card{

border:1px solid #e5e7eb;

}



.card-style-bordered .service-card{

border:2px solid #e5e7eb;

}



.card-style-glass .service-card{

background:

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

backdrop-filter:

blur(12px);

border:

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

}



.card-style-shadow .service-card{

box-shadow:

0 25px 60px rgba(0,0,0,.15);

}



/*
=====================================================
HOVER EFFECT
=====================================================
*/


.hover-lift .service-card:hover{

transform:

translateY(-10px);

}



.hover-zoom .service-card:hover{

transform:

scale(1.04);

}



.hover-glow .service-card:hover{

box-shadow:

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

}



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


.service-icon{

width:75px;

height:75px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

var(--primary-color);

color:white;

font-size:32px;

margin-bottom:25px;

transition:.3s ease;

}



.service-icon i{

line-height:1;

}



.service-card:hover .service-icon{

transform:

rotate(8deg) scale(1.08);

}



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


.service-card h3{

font-size:24px;

font-weight:700;

margin:0 0 15px;

color:#111827;

}



.service-card p{

font-size:16px;

line-height:1.7;

color:#64748b;

margin-bottom:25px;

}



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


.service-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;

}



.service-button:hover{

opacity:.85;

}



/*
=====================================================
SCROLL REVEAL
=====================================================
*/


.service-card{

opacity:0;

transform:

translateY(35px);

}



.service-card.service-visible{

opacity:1;

transform:none;

}



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


@media(max-width:1024px){


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


grid-template-columns:

repeat(2,1fr);


}


}



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


@media(max-width:768px){


.services-grid{

grid-template-columns:1fr!important;

}



.services-title{

font-size:34px;

}



.services-subtitle{

font-size:16px;

}



.services-layout-list .service-card{

display:block;

}



.service-card{

padding:25px;

}


}