/* =================================================
   FLOWSUITE HERO SYSTEM
   (TRANSPARENT BACKGROUNDS)
   ================================================= */


/* -------------------------------------------------
   BASE HERO
------------------------------------------------- */

.flowsuite-hero{

    width:100%;
    display:flex;
    align-items:center;

    background:transparent;

}



/* -------------------------------------------------
   HERO CONTAINER
------------------------------------------------- */

.flowsuite-hero-container{

    max-width:1200px;
    margin:auto;

    padding:80px 30px;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:60px;
    align-items:center;

}



/* -------------------------------------------------
   HERO HEIGHT VARIANTS
------------------------------------------------- */

/* full size */

.hero-maxsize{

    min-height:90vh;

}

/* medium */

.hero-medsize{

    min-height:55vh;

}

/* small */

.hero-smallsize{

    min-height:35vh;

}



/* -------------------------------------------------
   LIGHT HERO TEXT
------------------------------------------------- */

.hero-light-maxsize,
.hero-light-medsize,
.hero-light-smallsize{

    color:var(--fs-text-dark);

}



/* -------------------------------------------------
   DARK HERO TEXT
------------------------------------------------- */

.hero-dark-maxsize,
.hero-dark-medsize,
.hero-dark-smallsize{

    color:var(--fs-text-light);

}



/* -------------------------------------------------
   TYPOGRAPHY
------------------------------------------------- */

.flowsuite-hero-title{

    font-size:48px;
    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}



.flowsuite-hero-subtitle{

    font-size:22px;
    font-weight:500;

    margin-bottom:20px;

}



.flowsuite-hero-body{

    font-size:18px;
    line-height:1.7;

    margin-bottom:25px;

}



/* -------------------------------------------------
   BULLETS
------------------------------------------------- */

.flowsuite-hero-bullets{

    list-style:none;
    padding:0;

    margin:20px 0 30px 0;

}



.flowsuite-hero-bullets li{

    font-size:17px;
    line-height:1.8;

    padding-left:28px;

    position:relative;

}



/* bullet icon */

.flowsuite-hero-bullets li::before{

    content:"✔";

    position:absolute;
    left:0;

    color:var(--fs-gold);

}



/* -------------------------------------------------
   HERO IMAGE
------------------------------------------------- */

.flowsuite-hero-image img{

    width:100%;
    height:auto;

    border-radius:var(--fs-radius-lg);

}



/* -------------------------------------------------
   CTA AREA
------------------------------------------------- */

.flowsuite-hero-cta{

    margin-top:30px;

    display:flex;
    gap:16px;

    flex-wrap:wrap;

}



/* -------------------------------------------------
   RESPONSIVE
------------------------------------------------- */

@media (max-width:900px){

.flowsuite-hero-container{

    grid-template-columns:1fr;

    text-align:center;

}

.flowsuite-hero-cta{

    justify-content:center;

}

.flowsuite-hero-title{

    font-size:36px;

}

}