/* =====================================================
   KNOW SERVICES V2
   LAYOUT
===================================================== */

/* =====================================================
   BODY
===================================================== */

body{

    min-width:320px;

    font-family:var(--font);

    background:var(--background);

    color:var(--text);

    overflow-x:hidden;

    position:relative;

}

/* =====================================================
   CONTAINERS
===================================================== */

.container{

    width:min(100% - 48px, var(--container));

    margin-inline:auto;

}

.container-wide{

    width:min(100% - 48px, 1500px);

    margin-inline:auto;

}

/* =====================================================
   SECTIONS
===================================================== */

section{

    position:relative;

    padding:120px 0;

}

.section-header{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.section-header .badge{
    margin-bottom:20px;
}

.section-title{

    font-size:clamp(2.2rem,4vw,3.5rem);

    line-height:1.1;

    font-weight:700;

    margin-bottom:20px;

}

.section-text{
	
	max-width:720px;
	
	margin-inline:auto;

    color:var(--text-muted);

    font-size:1.1rem;

    line-height:1.8;

}

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

.grid{

    display:grid;

    gap:32px;

}

.grid-2{

    display:grid;

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

    gap:32px;

}

.grid-3{

    display:grid;

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

    gap:32px;

}

.grid-4{

    display:grid;

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

    gap:28px;

}

/* =====================================================
   FLEX HELPERS
===================================================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/* =====================================================
   GAP HELPERS
===================================================== */

.gap-sm{

    gap:16px;

}

.gap-md{

    gap:24px;

}

.gap-lg{

    gap:40px;

}

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

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

/* =====================================================
   SPACING HELPERS
===================================================== */

.mt-sm{

    margin-top:16px;

}

.mt-md{

    margin-top:32px;

}

.mt-lg{

    margin-top:64px;

}

.mb-sm{

    margin-bottom:16px;

}

.mb-md{

    margin-bottom:32px;

}

.mb-lg{

    margin-bottom:64px;

}

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

.background-grid{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-2;

    background-image:

        linear-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px),

        linear-gradient(
            90deg,
            rgba(255,255,255,.03) 1px,
            transparent 1px);

    background-size:40px 40px;

}

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

.background-glow{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    background:

        radial-gradient(circle at top left,
            rgba(87,196,106,.12),
            transparent 35%),

        radial-gradient(circle at bottom right,
            rgba(53,167,255,.10),
            transparent 35%);

}

/* =====================================================
   RESPONSIVE IMAGES
===================================================== */

.img-fluid{

    width:100%;

    height:auto;

    display:block;

}

/* =====================================================
   HIDDEN
===================================================== */

.hidden{

    display:none !important;

}