/* ===========================================================
   GP ANSOR WARULOR SYSTEM
   DESIGN SYSTEM
   LAYOUT
=========================================================== */

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

.container{

    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding-left:30px;
    padding-right:30px;

}

/* ==========================
   WRAPPER
========================== */

.wrapper{

    width:100%;
    position:relative;

}

/* ==========================
   SECTION
========================== */

.section{

    position:relative;
    width:100%;
    padding:90px 0;

}

.section-sm{

    padding:60px 0;

}

.section-lg{

    padding:120px 0;

}

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

.grid{

    display:grid;

}

.grid-2{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;

}

.grid-3{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.grid-4{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}

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

.flex{

    display:flex;

}

.flex-center{

    display:flex;
    align-items:center;
    justify-content:center;

}

.flex-between{

    display:flex;
    align-items:center;
    justify-content:space-between;

}

.flex-column{

    display:flex;
    flex-direction:column;

}

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

.gap-10{

    gap:10px;
}

.gap-15{

    gap:15px;
}

.gap-20{

    gap:20px;
}

.gap-25{

    gap:25px;
}

.gap-30{

    gap:30px;
}

.gap-40{

    gap:40px;
}

/* ==========================
   ALIGN
========================== */

.align-center{

    align-items:center;
}

.justify-center{

    justify-content:center;
}

.justify-between{

    justify-content:space-between;
}

/* ==========================
   WIDTH
========================== */

.w-100{

    width:100%;
}

.h-100{

    height:100%;
}

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

.mt-10{

    margin-top:10px;
}

.mt-20{

    margin-top:20px;
}

.mt-30{

    margin-top:30px;
}

.mt-40{

    margin-top:40px;
}

.mt-50{

    margin-top:50px;
}

.mb-20{

    margin-bottom:20px;
}

.mb-30{

    margin-bottom:30px;
}

.mb-40{

    margin-bottom:40px;
}

.mb-50{

   margin-bottom:50px;

}

.pt-50{

    padding-top:50px;
}

.pb-50{

    padding-bottom:50px;
}

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

.card{

    background:var(--white);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    overflow:hidden;

}

.card-body{

    padding:30px;
}

/* ==========================
   OVERFLOW
========================== */

.overflow-hidden{

    overflow:hidden;
}

.position-relative{

    position:relative;
}