/* =====================================================
WIZORA TITLE BLOCK
===================================================== */


.wizora-title{

padding:70px 20px;

opacity:0;

transform:translateY(40px);

transition:
opacity .7s ease,
transform .7s ease;

}



/* INNER */

.title-inner{

max-width:1000px;

margin:auto;

}



/* ALIGN */

.wizora-title.align-left{

text-align:left;

}


.wizora-title.align-center{

text-align:center;

}


.wizora-title.align-right{

text-align:right;

}



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


.title-badge{

display:inline-block;

padding:7px 18px;

border-radius:30px;

background:var(--primary-color);

color:white;

font-size:14px;

margin-bottom:20px;

transition:
transform .5s ease;

}



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


.title-heading{

font-size:48px;

line-height:1.15;

font-weight:800;

margin:0;

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

}



/* ==========================
DESCRIPTION
========================== */


.title-description{

font-size:20px;

line-height:1.7;

color:#64748b;

margin-top:20px;

}



/* ==========================
DIVIDER
========================== */


.title-divider{

height:4px;

background:var(--primary-color);

border-radius:20px;

margin:25px auto;

transform:scaleX(0);

transform-origin:center;

transition:
transform .8s ease .3s;

}



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


.title-style-modern .title-heading{

letter-spacing:-2px;

}



.title-style-gradient .title-heading{

background:linear-gradient(
90deg,
var(--primary-color),
var(--secondary-color)
);

-webkit-background-clip:text;

background-clip:text;

color:transparent;

}



.title-style-outline .title-heading{

-webkit-text-stroke:1px #111;

color:transparent;

}



.title-style-minimal .title-heading{

font-weight:500;

}



/* ==========================
VISIBLE STATE
========================== */


.wizora-title.title-visible{

opacity:1;

transform:none;

}



.title-visible .title-badge{

transform:translateY(-5px);

}



.title-visible .title-divider{

transform:scaleX(1);

}



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


@media(max-width:768px){


.wizora-title{

padding:45px 20px;

}


.title-heading{

font-size:36px;

}


.title-description{

font-size:18px;

}


}