/*
=============== 
Variables
===============
*/

:root {
    /* dark shades of primary color*/
    --clr-primary-1: #063251;
    --clr-primary-2: #2d87c8;
    --clr-primary-3: #49a6e9;
    --clr-primary-4: #6ebef7;
    /* primary/main color */
    --clr-primary-5: #49a6e9;
    /* lighter shades of primary color */
    --clr-primary-6: #6ebef7;
    --clr-primary-7: #8bcbf9;
    --clr-primary-8: #a5d5f8;
    --clr-primary-9: #c5e5fc;
    --clr-primary-10: #ebf7ff;
    /* darkest grey - used for headings */
    --clr-grey-1: #102a42;
    --clr-grey-2: #243a52;
    --clr-grey-3: #617d98;
    --clr-grey-4: #829ab0;
    /* grey used for paragraphs */
    --clr-grey-5: #617d98;
    --clr-grey-6: #bcccdc;
    --clr-grey-7: #dae2ec;
    --clr-grey-8: #bcccdc;
    --clr-grey-9: #bb2525;
    --clr-grey-10: #f1f5f8;
    --clr-white: #fff;
    --clr-red-dark: #bb2525;
    --clr-red-light: #e66b6b;
    --clr-green-dark: #25bb32;
    --clr-green-light: #6be675;
    --clr-black: #222;
    --transition: all 0.3s linear;
    --ff-poppins:'Poppins', sans-serif;
    --spacing: 0.25rem;
    --radius: 0.5rem;
    --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    --max-width: 1170px;
    --fixed-width: 620px;
}

/*
=============== 
Global Styles
===============
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    color: #fff !important;
}


/* *-========== Basic Style Code Start ==========*- */

.bg{
  height: 100%;
  width: 100%;
  position: fixed;
  margin: 0;
  z-index: -1;
  /* filter: blur(5px); */
  transition: background-color .5s;
}
body{
    background: #222 !important;
}
.section{
    backdrop-filter: blur(10px);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, .5);
    border-left: 1px solid rgba(255, 255, 255, .5);
}
svg{
  width: 100%;
  height: 100%;
  position: absolute;
  vertical-align: top;
  fill: blue;
  stroke-width: 5;
  stroke-dasharray: 20;
  transition: fill .5s;
}
path{
  cursor: pointer;
}
/* *-========== Basic Style Code End ==========*- */


/* *-========== helper code ==========*- */

.pt-50 {
    padding-top: 50px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-100 {
    padding-bottom: 100px;
}

.pt-100 {
    padding-top: 100px;
}

.px-100 {
    padding: 0 100px;
}

.py-100 {
    padding: 100px 0;
}

.py-50 {
    padding: 50px 0;
}

.px-50 {
    padding: 0 50px;
}

.mt-50 {
    margin-top: 50px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mt-100 {
    margin-top: 100px;
}

.mb-100 {
    margin-bottom: 100px;
}

.my-100 {
    margin: 100px 0;
}

.mx-100 {
    margin: 0 100px;
}

.brr-50 {
    border-radius: 50%;
}

.brr-50px {
    border-radius: 50px;
}

.brr-20 {
    border-radius: 20px;
}

.brr-5 {
    border-radius: 5px;
}

.brr-30 {
    border-radius: 30px;
}

.fs-18 {
    font-size: 18px;
}

.fs-15 {
    font-size: 15px;
}

.fs-14 {
    font-size: 14px;
}

.fs-13 {
    font-size: 13px;
}

.fs-12 {
    font-size: 12px;
}

.fs-11 {
    font-size: 11px;
}

.fs-10 {
    font-size: 10px;
}

.align_items_center {
    display: flex;
    align-items: center;
}

.justify_content_end {
    display: flex;
    justify-content: end;
}

.flx_direction_column {
    display: flex;
    flex-direction: column;
}

.first_bg {
    background-color: #FFD600 !important;
    color: #fff !important;
}
li::marker{
    color: #FFD600;
}
.first_color {
    color: #FFD600 !important;
}

.none {
    display: none !important;
}

.active {
    display: block !important;
}

.cursor_pointer {
    cursor: pointer;
}

.bsn:focus {
    box-shadow: none !important;
}

.border_t {
    border-top: 1px solid #dee2e6;
}

.border_b {
    border-bottom: 1px solid #dee2e6;
}

.border_l {
    border-left: 1px solid #dee2e6;
}

.border_r {
    border-right: 1px solid #dee2e6;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

img {
    display: block;
}

h1,
h2,
h3,
h4 {
    /* text-transform: capitalize; */
    line-height: 1.25;
    margin-bottom: 0.75rem;
    font-family: var(--ff-poppins);
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 0.875rem;
}

p {
    margin-bottom: 1.25rem;
    color: var(--clr-grey-5);
}

html {
    scroll-behavior: smooth;
}

.section {
    padding-bottom: 5rem;
}

.section-center {
    width: 90vw;
    margin: 0 auto;
    max-width: 1170px;
}

/* medium */
@media screen and (max-width:992px) {}

/* sm */
@media screen and (max-width:768px) {}

/* exsm */
@media screen and (max-width:575px) {}