:root {
    --primary-color: #022237;
    --secondary-color: #FF21A8;
    --tertiary-color: #ffffff;
    --gray-color: #F4F5F0;
    --CRE_Sky-Blue: #068BE2;
    --s-gray-color: #303a08;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    box-sizing: border-box;
    max-width: 100%;
    font-family: 'Acumin Variable Concept';
    overflow-x: hidden !important;
    color: #022237;
    top: 0 !important;
    -webkit-tap-highlight-color: transparent;
    -ms-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
}

font {
    background-color: transparent !important;
    box-shadow: none !important;
}

html {
    -webkit-text-size-adjust: none;
    touch-action: manipulation;
}

.show_desktop {
    display: block !important;
}

.show_tablet {
    display: none !important;
}

.show_mobile {
    display: none !important;
}

.hide_mobile {
    display: block !important;
}

.hide_desktop {
    display: none !important;
}

.container {
    max-width: 76.389%;
    margin: auto;
}

.largeContainer {
    max-width: 90.28%;
    margin: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
}

a {
    color: #FF21A8;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a button {
    font-family: Work Sans;
}

.pink_btn {
    font-family: Work Sans;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
    border: 2px solid #FF21A8;
    background: #FF21A8;
    color: #F4F5F0;
    padding: 10px 30px;
    border: 2px solid #FF21A8;
    margin-left: 4px;
    cursor: pointer;
    top: 0;
    left: 0;
    transition: all 0.15s linear 0s;
    position: relative;
    box-shadow: -4px 4px 0 #ffffff;
}

.pink_btn a {
    color: var(--tertiary-color);
    font-family: Work Sans;
}

.pink_btn:hover {
    top: 3px;
    left: -3px;
    box-shadow: -2px 2px 0 #ffffff;
}

.pink_btn::after {
    transition: all 0.15s linear 0s;
    content: '';
    position: absolute;
    top: -1px;
    left: -5px;
    width: 6px;
    height: 6px;
    background-color: #fff;
    transform: rotate(45deg);
    z-index: -1;
}

.pink_btn::before {
    transition: all 0.15s linear 0s;
    content: '';
    position: absolute;
    bottom: -5px;
    right: -1px;
    width: 6px;
    height: 6px;
    background-color: #fff;
    transform: rotate(45deg);
    z-index: -1;
}

.pink_btn:hover::after {
    top: -1px;
    left: -3px;
    width: 2px;
    height: 2px;
}

.pink_btn:hover::before {
    bottom: -3px;
    right: -1px;
    width: 2px;
    height: 2px;
}

.white_btn,
.grey_btn {
    font-family: Work Sans;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
    border: 2px solid #FF21A8;
    background: #FFFFFF;
    color: #FF21A8;
    padding: 10px 30px;
    border: 2px solid #FF21A8;
    margin-left: 4px;
    cursor: pointer;
    top: 0;
    left: 0;
    transition: all 0.15s linear 0s;
    position: relative;
    box-shadow: -4px 4px 0 #FF21A8;
}

.white_btn a {
    color: var(--secondary-color);
}

.white_btn:hover {
    top: 3px;
    left: -3px;
    box-shadow: -2px 2px 0 #FF21A8;
}

.white_btn::after {
    transition: all 0.15s linear 0s;
    content: '';
    position: absolute;
    top: -1px;
    left: -5px;
    width: 6px;
    height: 6px;
    background-color: #FF21A8;
    transform: rotate(45deg);
    z-index: -1;
}

.white_btn::before {
    transition: all 0.15s linear 0s;
    content: '';
    position: absolute;
    bottom: -5px;
    right: -1px;
    width: 6px;
    height: 6px;
    background-color: #FF21A8;
    transform: rotate(45deg);
    z-index: -1;
}

.white_btn:hover::after {
    top: -1px;
    left: -3px;
    width: 2px;
    height: 2px;
}

.white_btn:hover::before {
    bottom: -3px;
    right: -1px;
    width: 2px;
    height: 2px;
}

.mainTitle {
    font-family: Acumin Variable Concept;
    font-size: 80px;
    font-style: normal;
    font-weight: 800;
    line-height: 80px;
    text-transform: uppercase;
}

h1 {
    font-family: Acumin Variable Concept;
    font-size: 50px;
    font-style: normal;
    font-weight: 800;
    line-height: 60px;
    text-transform: uppercase;
}

h2 {
    font-family: Work Sans;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 47px;
}

h3 {
    font-family: Acumin Variable Concept;
    font-size: 36px;
    font-style: normal;
    font-weight: 800;
    line-height: 36px;
}

h4 {
    font-family: Work Sans;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
}

h5 {
    font-family: Work Sans;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}

h6 {
    font-family: Acumin Variable Concept;
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 18px;
}

.quote {
    font-family: Work Sans;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 56px;
}

.p18 {
    font-family: Work Sans;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.p16 {
    font-family: Work Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.p14 {
    font-family: Work Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
}

.p12 {
    font-family: Work Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.font_400 {
    font-weight: 400;
}

.font_500 {
    font-weight: 500;
}

.font_600 {
    font-weight: 600;
}

.font_700 {
    font-weight: 700;
}

.font_800 {
    font-weight: 800;
}

.sectionSpace {
    margin-bottom: 150px;
}

.dot {
    color: #FF21A8;
}

h6 .categorySeparator{
    background: var(--primary-color);
    width: 5px;
    height: 5px;
    display: inline-block;
    transform: translate(0px, -60%);
    margin: 0 2px 0px 4px;
}

img {
    vertical-align: bottom;
}

.circleLine,
.underLine,
.arrowLine,
.waveLine,
.loader {
    position: relative;
}

.homeCircleLine,
.homeArrowLine {
    position: relative;
    width: 300px;
}

.homeWaveLine {
    position: relative;
    width: 267px;
}

.underLine,
.sectionDownArrow,
.ribbonLine,
.titleWaveLine,
.starLine,
.processLine {
    position: relative;
}

/* .circleLine{
    background: url("data:image/svg+xml,%3Csvg width='274' height='89' viewBox='0 0 274 89' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M218.961 9.96761C183.655 5.95729 148.259 2.0683 112.658 3.62224C87.418 4.72396 60.7402 7.07111 36.4322 14.2737C25.5777 17.4899 12.3799 21.5084 6.05519 32.1801C-0.387378 43.0507 4.38737 50.8429 13.6079 58.2594C37.4177 77.4108 74.3145 81.5291 103.424 84.1647C133.815 86.9165 165.734 86.5622 195.73 80.5726C214.301 76.8643 232.214 70.1748 248.514 60.6114C257.827 55.1467 268.674 47.1185 270.642 35.693C273.786 17.4383 252.559 14.3265 239.303 12.6646C229.408 11.424 219.343 10.4544 209.38 10.0213C194.529 9.37553 165.907 10.4819 145.542 12.2286C122.231 14.2279 128.964 13.9949 96.5524 18.9131' stroke='%23FF21A8' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
} */
.circleLine svg {
    position: absolute;
    top: -23px;
    right: 31px;
    width: 189px;
    pointer-events: none;

}

.underLine svg {
    position: absolute;
    top: 44px;
    right: 26.5%;
    width: 300px;
    pointer-events: none;
}

.waveLine svg {
    position: absolute;
    top: 50%;
    left: -24px;
    width: 126px;
    transform: translate(0%, -50%);
}

.arrowLine svg {
    position: absolute;
    top: -45px;
    left: 0;
    width: 80px;
}

.sectionDownArrow.in-view svg {
    position: absolute;
    right: 6.37%;
    top: 44px;
    width: 100px;
}

.circleLine path,
.underLine path,
.waveLine path,
.arrowLine line,
.arrowLine polyline,
.sectionDownArrow.in-view path,
.loader path {
    fill: none;
    stroke-dasharray: 2000;
    /* stroke-dashoffset: 0; */
    transition: stroke-dashoffset 2s ease-in-out;
}

.circleLine:hover path {
    /* stroke-dashoffset: 0; */
    animation: draw 2s ease-in-out;
}

.waveLine:hover path,
.arrowLine:hover line,
.loader:hover path {
    animation: draw 3s ease-in-out;
}

.arrowLine:hover polyline {
    animation: draw 8s ease-in-out;
}

/* .sectionDownArrow.in-view path {
    animation: draw 20s ease-in-out;
} */

@keyframes draw {
    from {
        stroke-dashoffset: 2000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.hypen {
    width: 20px;
    height: 2px;
    background-color: var(--primary-color);
    color: var(--primary-color);
}

.ribbonLine img.ribbonLineImg {
    position: absolute;
    bottom: -48%;
    left: -50px;
    width: 270px;
    z-index: -1;
}


img.ribbonLineRightImg {
    position: absolute;
    bottom: -50%;
    right: -50px;
    width: 270px;
    z-index: -1;
}

img.ribbonLineCenterImg {
    position: absolute;
    top: 38%;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    width: 270px;
    z-index: -1;
}

.ribbonLine img.ribbonLineCenterImg{
    position: absolute;
    top: 38%;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    width: 270px;
    z-index: -1;
}

.ribbonLine2 img.ribbonLineImg {
    position: absolute;
    bottom: -30%;
    left: -50px;
    width: 300px;
    z-index: -1;
}

.ribbonLine2 img.ribbonLineRightImg {
    position: absolute;
    bottom: -20%;
    right: -50px;
    width: 300px;
    z-index: -1;
}
.ribbonLine2 img.ribbonLineCenterImg{
    position: absolute;
    bottom: -60%;
    left: 0;
    right: 0;
    z-index: -1;
    text-align: center;
    margin: auto;
    width: 300px;
}

.ribbonLine3 img.ribbonLineImg {
    position: absolute;
    bottom: -60%;
    right: -50px;
    z-index: -1;
    width: 300px;
}

.ribbonLine3 img.ribbonLineRightImg {
    position: absolute;
    bottom: -60%;
    width: 300px;
    right: -50px;
    z-index: -1;
}
.ribbonLine3 img.ribbonLineCenterImg{
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    width: 300px;
    z-index: -1;
}


.titleWaveLine img.waveLineImg {
    position: absolute;
    top: 72%;
    left: -50px;
    width: 215px;
    z-index: -1;
}

.titleWaveLine img.waveLineCenterImg {
    position: absolute;
    top: 72%;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    width: 215px;
    z-index: -1;
}

.titleWaveLine img.waveLineRightImg {
    position: absolute;
    bottom: -20%;
    right: -50px;
    width: 215px;
    z-index: -1;
}

.titleWaveLine.titleWaveLine1 img.waveLineImg {
    position: absolute;
    top: 75%;
    left: -20px;
    width: 200px;
    z-index: -1;
}

.titleWaveLine.titleWaveLine1 img.waveLineRightImg {
    position: absolute;
    top: 60%;
    right: -50px;
    width: 200px;
    margin-right: 0px;
    z-index: -1;
}

.titleWaveLine.titleWaveLine1 img.waveLineCenterImg {
    position: absolute;
    top: 75%;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    width: 200px;
    z-index: -1;
}

.starLine img.starLineImg {
    position: absolute;
    top: 14%;
    left: -70px;
    z-index: -1;
    width: 62px;
}

.starLine img.starLineCenterImg {
    position: absolute;
    top: 14%;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    width: 62px;
    z-index: -1;
}

.starLine img.starLineRightImg {
    position: absolute;
    top: 14%;
    right: -70px;
    width: 62px;
    z-index: -1;
}

.processLine img.processLineImg {
    position: absolute;
    top: 43%;
    left: -50px;
    z-index: -1;
    width: 75px;
}

.processLine img.processLineCenterImg {
    position: absolute;
    top: 73%;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    width: 75px;
    z-index: -1;
}

.processLine img.processLineRightImg {
    position: absolute;
    top: 43%;
    right: -50px;
    width: 75px;
    transform: rotate(270deg);
    z-index: -1;
}


.sectionTitle {
    margin: auto;
    position: relative;
    width: max-content;
}

.sectionTitle h1 {
    width: max-content !important;
    margin: auto;
}



@media (max-width: 1280px) {
    .container {
        max-width: 76.563%;
        margin: auto;
    }

    .largeContainer {
        max-width: 90.626%;
        margin: auto;
    }

    .sectionSpace {
        margin-bottom: 120px !important;
    }
}

@media (max-width: 1100px) {

    .container,
    .largeContainer {
        max-width: 89.092%;
        margin: auto;
    }

    .mainTitle {
        font-size: 70px;
        line-height: 70px;
    }

    h1 {
        font-size: 40px;
        line-height: 48px;
    }

    h2 {
        font-size: 34px;
        line-height: 40px;
    }

    h4 {
        font-size: 24px;
        line-height: 28px;
    }

    h6 {
        font-size: 18px;
        line-height: 18px;
    }

    .quote {
        font-size: 30px;
        line-height: 45px;
    }

    .ribbonLine img.ribbonLineImg,
    .ribbonLine img.ribbonLineRightImg,
    .ribbonLine img.ribbonLineCenterImg {
        width: 220px
    }

    .ribbonLine2 img.ribbonLineImg,
    .ribbonLine2 img.ribbonLineRightImg,
    .ribbonLine2 img.ribbonLineCenterImg,
    .ribbonLine3 img.ribbonLineImg,
    .ribbonLine3 img.ribbonLineRightImg,
    .ribbonLine3 img.ribbonLineCenterImg {
        width: 250px
    }

    .titleWaveLine img.waveLineImg,
    .titleWaveLine img.waveLineRightImg,
    .titleWaveLine img.waveLineCenterImg {
        width: 165px
    }

    .titleWaveLine.titleWaveLine1 img.waveLineImg,
    .titleWaveLine.titleWaveLine2 img.waveLineRightImg,
    .titleWaveLine.titleWaveLine1 img.waveLineCenterImg {
        width: 150px
    }

    .starLine img.starLineImg,
    .starLine img.starLineRightImg {
        width: 52px;
    }

    .processLine img.processLineImg,
    .processLine img.processLineRightImg {
        width: 65px;
    }

    .circleLine svg {
        position: absolute;
        top: -28px;
        right: 80px;
        width: 160px;
        pointer-events: none;
    }
}


@media (max-width: 991.98px) {
    .container {
        max-width: 87.5%;
        margin: auto;
    }

    .show_tablet {
        display: block !important;
    }

    .show_desktop {
        display: none !important;
    }

    .show_mobile {
        display: none !important;
    }

    .hide_desktop {
        display: block !important;
    }

    .sectionSpace {
        margin-bottom: 100px !important;
    }
}



@media (max-width: 767.98px) {

    .container,
    .largeContainer {
        max-width: 87.5%;
        margin: auto;
    }

    .show_tablet {
        display: none !important;
    }

    .show_desktop {
        display: none !important;
    }

    .show_mobile {
        display: block !important;
    }

    .hide_mobile {
        display: none !important;
    }

    .sectionSpace {
        margin-bottom: 80px !important;
    }

    .mainTitle {
        font-size: 40px;
        line-height: 40px;
    }

    h1 {
        font-size: 36px;
        line-height: 40px;
    }

    h2 {
        font-size: 30px;
        line-height: 36px;
    }

    h3 {
        font-size: 28px;
        line-height: 34px;
    }

    h4 {
        font-size: 24px;
        line-height: 28px;
    }

    h5 {
        font-size: 20px;
        line-height: 24px;
    }

    h6 {
        font-size: 16px;
        line-height: 16px;
    }

    .quote {
        font-size: 26px;
        line-height: 44px;
    }

    .p18 {
        font-size: 16px;
        line-height: 24px;
    }

    .p16 {
        font-size: 15px;
        line-height: 23px;
    }

    .p14 {
        font-size: 14px;
        line-height: 22px;
    }

    .p12 {
        font-size: 12px;
        line-height: 18px;
    }

    .white_btn,
    .pink_btn {
        font-size: 16px;
        line-height: 22px;
    }

    .arrowLine svg {
        top: unset;
        left: unset;
        width: 75px;
        right: 0px;
        bottom: 0;
    }

    .ribbonLine img.ribbonLineImg,
    .ribbonLine img.ribbonLineRightImg,
    .ribbonLine img.ribbonLineCenterImg {
        width: 220px
    }
    .ribbonLine img.ribbonLineImg, .ribbonLine img.ribbonLineRightImg,
    .ribbon img.ribbonLineCenterImg{
        left: 0;
        right: 0;
        /* bottom: -100%; */
        text-align: center;
        margin: auto;
    }

    .ribbonLine2 img.ribbonLineImg,
    .ribbonLine2 img.ribbonLineRightImg,
    .ribbonLine2 img.ribbonLineCenterImg,
    .ribbonLine3 img.ribbonLineImg,
    .ribbonLine3 img.ribbonLineRightImg,
    .ribbonLine3 img.ribbonLineCenterImg {
        width: 250px;
        left: 0px;
        right: 0px;
        margin: auto;

    }

    .titleWaveLine img.waveLineImg,
    .titleWaveLine img.waveLineRightImg,
    .titleWaveLine img.waveLineCenterImg,
    .titleWaveLine.titleWaveLine1 img.waveLineImg,
    .titleWaveLine.titleWaveLine1 img.waveLineRightImg,
    .titleWaveLine.titleWaveLine1 img.waveLineCenterImg {
        width: 150px
    }

    .titleWaveLine img.waveLineRightImg {
        left: 0;
        right: 0;
        margin: auto;
    }

    .titleWaveLine.titleWaveLine1 img.waveLineRightImg {
        left: 0;
        right: 0;
        margin: auto;
    }

    .titleWaveLine img.waveLineImg,
    .titleWaveLine.titleWaveLine1 img.waveLineImg {
        top: 75%;
        left: 0;
        right: 0;
        margin: auto
    }

    .starLine img.starLineImg,
    .starLine img.starLineRightImg {
        width: 42px;
    }

    .starLine img.starLineImg {
        left: 0;
        right: 0;
        margin: auto;
    }

    .starLine img.starLineRightImg {
        top: 50%;
        left: 0;
        right: 0;
        margin: auto;
        z-index: -1;
    }

    .processLine img.processLineImg,
    .processLine img.processLineRightImg {
        width: 50px;
        left: 0;
    }

    .processLine img.processLineImg {
        left: 0;
        right: 0;
        margin: auto;
        z-index: -1;
    }

    .processLine img.processLineRightImg {
        left: 0;
        right: 0;
        margin: auto;
        z-index: -1;
    }
    .sectionTitle {
        width: 100%;
    }

    .sectionTitle h1 {
        width: auto !important;
    }

    .mobWidth {
        width: 45%;
    }
    .ribbonLine2 img.ribbonLineCenterImg{
        bottom: -90%;
    }
}




@media (max-width: 575.98px) {

    .container,
    .largeContainer {
        max-width: 86.67%;
        margin: auto;
    }

    .ribbonLine2 img.ribbonLineRightImg {
        top: 100%;
    }

    .starLine img.starLineImg {
        position: absolute;
        top: 20%;
        left: 0;
        right: 0;
        margin: auto;
    }

    .mobWidth {
        width: 50%;
    }

    .sectionDownArrow.in-view svg{
        top: 74px;
    }

}


@media (min-width: 1441px) {

    body,
    .container {
        max-width: 85% !important;
        margin: auto;
    }
}


@media (min-width: 1100px) and (max-width: 1279.98px) {}

@media (min-width: 992px) and (max-width: 1099.98px) {}