:root {
    /* project Colors */
    --link-c: #474d75;
    --dark-blue: #1843b6;
    --blue-sky: #3fb7fe;
    --green: #79a14e;
    /*old colors*/
    --main-color: #333;
    --yellow: #e3b700;
    --orange: #f15e0e;
    --pink: #f03d99;
    --soft-pink: #e1b7bf;
    --very-soft-pink: #fcf9f1;
    --dark-pink: #c262af;
    --grey: #d4c7e8;
    --red: #ec563d;
    --soft-red:#ef5a60;
    --violet: #790896;
    --black: #111;
    --text-c: #555c66;
    --bg-footer: #333;
    --light-text: #808080;
    --main-bg: #f5f7fa;/* icon bg */
    --shadow: rgb(0 0 0 / 20%);
    --input-border: #d9d9d9;
    --link-bg: #b9c1cc;
    --dark-grayish: #414c62;
    --olive: #ddc384;
    --grey-80: #808080;
    --box-bg: #d7ebc1;
}
/*Box*/
.d-flex {
    display: flex;
}
.d-block {
    display: block;
}
.d-none {
    display: none;
}
.btw-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.just-btw {
    justify-content: space-between;
}
.c-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
.align-start {
    align-items: flex-start;
}
.align-c {
    align-items: center;
}
.align-end {
    align-items: flex-end;
}
.just-c {
    justify-content: center;
}
.just-end {
    justify-content: flex-end;
}
.column {
    flex-direction: column;
}
.d-grid {
    display: grid;
}
.grid-250 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.grid-300 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.grid-400 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.grid-450 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}
.wrap {
    flex-wrap: wrap;
}
.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}
.gap-5 {
    gap: 5px;
}
.gap-10 {
    gap: 10px;
}
.gap-15 {
    gap: 15px;
}
.gap-20 {
    gap: 20px;
}
.gap-30 {
    gap: 30px;
}
.gap-40 {
    gap: 40px;
}
.gap-50 {
    gap: 50px;
}
.gap-60 {
    gap: 60px;
}
/* Padding */
.p-5 {
    padding: 5px;
}
.p-10 {
    padding: 10px;
}
.p-15 {
    padding: 15px;
}
.p-20 {
    padding: 20px;
}
.p-30 {
    padding: 30px;
}
.p-40 {
    padding: 40px;
}
.p-60 {
    padding: 60px;
}
.pt-5 {
    padding-top: 5px;
}
.pt-10 {
    padding-top: 10px;
}
.pt-15 {
    padding-top: 15px;
}
.pt-20 {
    padding-top: 20px;
}
.pt-30 {
    padding-top: 30px;
}
.pt-40 {
    padding-top: 40px;
}
.pt-50 {
    padding-top: 50px;
}
.pt-60 {
    padding-top: 60px;
}
.pt-80 {
    padding-top: 80px;
}
.pt-100 {
    padding-top: 100px;
}
.pr-10 {
    padding-right: 10px;
}
.pr-15 {
    padding-right: 15px;
}
.pr-20 {
    padding-right: 20px;
}
.pr-30 {
    padding-right: 30px;
}
.pr-40 {
    padding-right: 40px;
}
.pr-50 {
    padding-right: 50px;
}
.pr-60 {
    padding-right: 60px;
}
.pr-100 {
    padding-right: 100px;
}
.pb-5 {
    padding-bottom: 5px;
}
.pb-10 {
    padding-bottom: 10px;
}
.pb-15 {
    padding-bottom: 15px;
}
.pb-20 {
    padding-bottom: 20px;
}
.pb-30 {
    padding-bottom: 30px;
}
.pb-40 {
    padding-bottom: 40px;
}
.pb-50 {
    padding-bottom: 50px;
}
.pb-60 {
    padding-bottom: 60px;
}
.pb-80 {
    padding-bottom: 80px;
}
.pb-100 {
    padding-bottom: 100px;
}
.pb-200 {
    padding-bottom: 200px;
}
.pl-10 {
    padding-left: 10px;
}
.pl-15 {
    padding-left: 15px;
}
.pl-20 {
    padding-left: 20px;
}
.pl-30 {
    padding-left: 30px;
}
.pl-40 {
    padding-left: 40px;
}
.pl-50 {
    padding-left: 50px;
}
.pl-60 {
    padding-left: 60px;
}
.pl-100 {
    padding-left: 100px;
}
/* margin */
.auto {
    margin-left: auto;
    margin-right: auto;
}
.mt-10 {
    margin-top: 10px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-50 {
    margin-top: 50px;
}
.mt-50 {
    margin-top: 50px;
}
.mt-74 {
    margin-top: 74px;
}
.mt-100 {
    margin-top: 100px;
}
.mt-150 {
    margin-top: 150px;
}
.mt-200 {
    margin-top: 200px;
}
.mr-10 {
    margin-right: 10px;
}
.ml-auto {
    margin-left: auto;
}
.ml-20 {
    margin-left: 20px;
}
.ml-10 {
    margin-left: 10px;
}
.mb-5 {
    margin-bottom: 5px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-15 {
    margin-bottom: 15px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-50 {
    margin-bottom: 50px;
}
.mb-60 {
    margin-bottom: 60px;
}
.mb-100 {
    margin-bottom: 100px;
}
/* font */
.fs-13 {
    font-size: 13px;
}
.fs-14 {
    font-size: 14px;
}
.fs-15 {
    font-size: 15px;
}
.fs-16 {
    font-size: 16px;
}
.fs-18 {
    font-size: 18px;
}
.fs-20 {
    font-size: 20px;
}
.fs-25 {
    font-size: 25px;
}
.fs-30 {
    font-size: 30px;
}
.fs-40 {
    font-size: 40px;
}
.fs-50 {
    font-size: 50px;
}
.fs-60 {
    font-size: 60px;
}
.fs-80 {
    font-size: 80px;
}
.fs-100 {
    font-size: 100px;
}
.fs-200 {
    font-size: 200px;
}
.normal {
    font-weight: normal;
}
.lighter {
    font-weight: lighter;
}
.fw-300 {
    font-weight: 300;
}
.fw-600 {
    font-weight: 600;
}
.bold {
    font-weight: bold;
}
.bolder {
    font-weight: 800;
}
.italic {
    font-style: italic;
}
.text-c {
    text-align: center;
}
.text-r {
    text-align: right;
}
.line16 {
    line-height: 1.6;
}
.line17 {
    line-height: 1.7;
}
.line18 {
    line-height: 1.8;
}
.line20 {
    line-height: 2;
}
.letter-s1 {
    letter-spacing: 1px;
}
.letter-s2 {
    letter-spacing: 2px;
}
.letter-s3 {
    letter-spacing: 3px;
}
.letter-s5 {
    letter-spacing: 5px;
}
.capitalize {
    text-transform: capitalize;
}
.upper {
    text-transform: uppercase;
}
.underline {
    text-decoration: underline !important;
}
.caveat-family {
    font-family: 'Caveat', cursive;
}
/* colors */
.white-c {
    color: white;
}
.eee-c {
    color: #eee;
}
.link-c {
    color: var(--link-c);
}
.grey-b-c {
    color: var(--link-bg);
}
.yellow-c {
    color: var(--yellow);
}
.pink-c {
    color: var(--pink);
}
.dark-pink {
    color: var(--dark-pink);
}
.soft-pink {
    color: var(--soft-pink);
}
.red-c {
    color: var(--red);
}
.soft-red {
    color: var(--soft-red);
}
.grey-c {
    color: var(--light-text);
}
.grayish-c {
    color: var(--dark-grayish);
}
.green-c {
    color: var(--green);
}
.olive-c {
    color: var(--olive);
}
.default-c {
    color: var(--black);
}
.title-c {
    color: var(--black);
}
.blue-c {
    color: var(--dark-blue);
}
.blue-sky {
    color: var(--blue-sky);
}
.orange-c {
    color: var(--orange);
}
.violet-c {
    color: var(--violet);
}
.grey-80 {
    color: var(--grey-80);
}
/* Background */
.bg-n {
    background: none;
}
.main-bg {
    background-color: var(--main-bg);
}
.bg-white {
    background-color: white;
}
.bg-blue {
    background-color: var(--dark-blue);
}
.bg-pink {
    background-color: var(--pink);
}
.bg-dark-pink {
    background-color: var(--dark-pink);
}
.bg-soft-pink {
    background-color: var(--soft-pink);
}
.bg-very-soft-pink {
    background-color: var(--very-soft-pink);
}
.bg-red {
    background-color: var(--red);
}
.bg-soft-red {
    background-color: var(--soft-red);
}
.bg-blue-sky {
    background-color: var(--blue-sky);
}
.bg-black {
    background-color: var(--black);
}
.bg-grayish {
    background-color: var(--dark-grayish);
}
.bg-violet {
    background-color: var(--violet);
}
.footer-bg {
    background-color: var(--bg-footer);
}
.bg-yellow {
    background-color: var(--yellow);
}
.bg-orange {
    background-color: var(--orange);
}
.bg-green {
    background-color: var(--green);
}
.bg-eee {
    background-color: #eee;
}
.bg-olive {
    background-color: var(--olive);
}
.link-bg {
    background-color: var(--link-bg);
}
.box-bg {
    background-color: var(--box-bg)
}
.linear-bg {
    background: linear-gradient(to right, var(--dark-blue), var(--pink));
}
.bg-cover {
    background-size: 100% 100%;
}
.no-repeat {
    background-repeat: no-repeat;
}
/* sizes */
.w-full {
    width: 100%;
}
.w-fit {
    width: fit-content;
}
.h-full {
    height: 100%;
}
.h-fit {
    height: fit-content;
}
.dot {
    width: 5px;
    height: 5px;
}
.size-10 {
    width: 10px;
    height: 10px;
}
.size-20 {
    width: 20px;
    height: 20px;
}
.bullet-size {
    width: 20px;
    height: 20px;
}
.size-30 {
    width: 30px;
    height: 30px;
}
.size-40 {
    width: 40px;
    height: 40px;
}
.pattern-size {
    width: 60px;
    height: 60px;
    background-color: var(--yellow);
}
.size-80 {
    width: 80px;
    height: 80px;
}
   
.big-pattern {
    width: 100px;
    height: 100px;
    background-color: var(--yellow);
}
.size-100 {
    width: 100px;
    height: 100px;
}
.size-150 {
    width: 150px;
    height: 150px;
}
.size-200 {
    width: 200px;
    height: 200px;
}
.size-250 {
    width: 250px;
    height: 250px;
}
/* position */
.p-relative {
    position: relative;
}
.p-absolute {
    position: absolute;
}
.p-fixed {
    position: fixed;
}
/* transition */
.trans {
    transition: .3s;
}
/* border */
.rad-3 {
    border-radius: 3px;
}
.rad-6 {
    border-radius: 6px;
}
.rad-10 {
    border-radius: 10px;
}
.border-l-10 {
    border-left: 10px solid var(--blue-sky);
}
.rad-20 {
    border-radius: 20px;
}
.rad-30 {
    border-radius: 30px;
}
.rad-50 {
    border-radius: 50%;
}
.out-n {
    outline: none;
}
.border-n {
    border: none;
}
.border-sky {
    border: 2px solid var(--blue-sky);
}
.border-w {
    border: 2px solid white;
}
.border-green {
    border: 2px solid var(--green);
}
.border-dark-pink {
    border: 2px solid var(--dark-pink);
}
.border-very-soft-pink {
    border: 2px solid var(--very-soft-pink);
}
.border-v {
    border: 2px solid var(--violet);
}
.border-pink {
    border: 1px solid var(--pink);
}
.border-5-pink {
    border: 5px solid var(--pink);
}
.border-10-pink {
    border: 10px solid var(--pink);
}
.border-y {
    border: 2px solid var(--yellow);
}
.border-b-y {
    border-bottom: 2px solid var(--yellow);
}
.border-10-yellow {
    border: 10px solid var(--yellow);
}
.border {
    border: 2px solid var(--main-color)
}
.border-black {
    border: 2px solid var(--black)
}
.border-blue {
    border: 2px solid var(--dark-blue);
}
.border-b1-black {
    border-bottom: 1px solid var(--black);
}
.border-red {
    border: 2px solid var(--red);
}
.border-b-red {
    border-bottom: 2px solid var(--red);
}
.border-b-10-red {
    border-bottom: 10px solid var(--red);
}
.border-t {
    border-top: 1px solid var(--light-text)
}
.border-b-black {
    border-bottom: 2px solid var(--black)
}
.border-b-blue {
    border-bottom: 2px solid var(--dark-blue);
}
.border-grayish {
    border: 2px solid var(--dark-grayish);
}
.border-olive {
    border: 2px solid var(--olive);
}
.border-5-w {
    border: 5px solid white;
}
.border-b-w {
    border-bottom: 2px solid white;
}
.border-eee {
    border: 1px solid #eee;
}
.border-10-w {
    border: 10px solid white;
}
.border-link {
    border: 2px solid var(--link-bg);
}
.border-orange { 
    border: 2px solid var(--orange);
}
.border-10-orange {
    border: 10px solid var(--orange);
}
.border-20-orange {
    border: 20px solid var(--orange);
}
.border-top-violet {
    border-top: 2px solid var(--violet);
}
.border-top-10-violet {
    border-top: 10px solid var(--violet);
}
.fat-b-t-b {
    border-top: 12px solid var(--dark-blue);
}
.border-t-w {
    border-top: 1px solid white;
}
.out-w {
    outline: 1px dashed white;
}
.shadow {
    box-shadow: 5px 5px 20px var(--shadow);
}
/* helper classes */
.btn-shape {
    padding: 15px 40px;
}
.pointer {
    cursor: pointer;
}
.resize-n {
    resize: none;
}
@media (max-width: 600px) {
    .c-600 {
        text-align: center;
    }
}
@media (max-width: 767px) {
    .text-c-mobile {
        text-align: center;
    }
    .c-mobile {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    .auto-mobile {
        margin-left: auto;
        margin-right: auto;
    }
    .show-mobile {
        display: block !important;
    }
    .wrap-mobile {
        flex-wrap: wrap;
    }
    .hide-mobile {
        display: none;
    }
    .full-mobile {
        width: 100%;
    }
}
@media (max-width: 921px) {
    .wrap-small {
        flex-wrap: wrap;
    }
    .full-small {
        width: 100%;
    }
    .auto-small {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
.line {
    width: 200px;
    height: 1px;
}
 /* classes added by javascript  */
 .active {
    color: var(--link-bg);
 }
 .active-bullet {
    background-color: var(--soft-red);
 }