@charset "UTF-8";




.sp {
    padding: 50px 0px;
}

@media (max-width: 768px) {
    .sp {
        padding: 30px 0px;
    }
}

.space16 {
    height: 16px;
}

.space10 {
    height: 10px;
}

@media (max-width: 767px) {
    .space10 {
        height: 5px;
    }
}

/*
 ::::::::::::::::::::::::::
  fonts area css
 ::::::::::::::::::::::::::
 */
:root {
    --ztc-text-text-1: #0D0E10;
    --ztc-text-text-2: #fff;
    --ztc-text-pera-text-1: #676879;
    --ztc-text-pera-text-2: #D2D1D5;
    --ztc-bg-main-bg-2: #6E18EF;
    --ztc-bg-main-bg-4: #A1E934;
    --ztc-bg-bg-1: #F8F9FA;
    --ztc-bg-color-w: #fff;
    --ztc-bg-bg-2: #E7EBF7;
    --ztc-bg-bg-3: #f5f5f8;
    --ztc-bg-bg-4: #1E182D;
    --ztc-bg-bg-5: #342F42;
    --ztc-bg-bg-6: #F2F4F7;
    --ztc-border-border-1: #f0f0f0;
    --ztc-border-border-2: #dfdcdc;
    --f-fw-regular: 400;
    --f-fw-medium: 500;
    --f-fw-semibold: 600;
    --f-fw-blod: 700;
    --f-fw-ex-bold: 800;
    --f-ff-font-1: 'Figtree', sans-serif;
    --f-fs-font-fs16: 16px;
    --f-fs-font-fs18: 18px;
    --f-fs-font-fs20: 20px;
    --f-fs-font-fs22: 22px;
    --f-fs-font-fs24: 24px;
    --f-fs-font-fs26: 26px;
    --f-fs-font-fs28: 28px;
    --f-fs-font-fs30: 30px;
    --f-fs-font-fs32: 32px;
    --f-fs-font-fs34: 34px;
    --f-fs-font-fs36: 36px;
    --f-fs-font-fs40: 40px;
    --f-fs-font-fs42: 42px;
    --f-fs-font-fs44: 44px;
    --f-fs-font-fs48: 48px;
    --f-fs-font-fs50: 50px;
    --f-fs-font-fs52: 52px;
    --f-fs-font-fs54: 54px;
    --f-fs-font-fs56: 56px;
    --f-fs-font-fs58: 58px;
    --f-fs-font-fs60: 60px;
    --f-fs-font-fs62: 62px;
    --f-fs-font-fs64: 64px;
    --f-fs-font-fs66: 66px;
    --f-fs-font-fs68: 68px;
    --f-fs-font-fs70: 70px;
    --f-fs-font-fs72: 72px;
    --f-fs-font-fs74: 74px;
    --f-fs-font-fs76: 76px;
    --f-fs-font-fs78: 78px;
    --f-fs-font-fs80: 80px;
    --f-fs-font-fs82: 82px;
    --f-fs-font-fs84: 84px;
    --f-fs-font-fs86: 86px;
    --f-fs-font-fs88: 88px;
}

/*
::::::::::::::::::::::::::
 COMMON AREA CSS
::::::::::::::::::::::::::
*/

.heading6-w span.span {
    display: inline-block;
    color: var(--color-heading);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    /* 100% */
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.151);
    padding: 8px 12px;
    margin-bottom: 16px;
}

.heading6-w h2 {
    color: var(--color-heading);
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
    margin-bottom: 15px;
    /* 100% */
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .heading6-w h2 {
        font-size: 30px;
        line-height: 38px;
    }
}

@media (max-width: 767px) {
    .heading6-w h2 {
        font-size: 30px;
        line-height: 38px;
    }
}

.heading6-w p {

    color: var(--color-paragraph);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin: 0px 0 10px;

    /* 150% */
}

/*
::::::::::::::::::::::::::
 CHOOSE AREA CSS
::::::::::::::::::::::::::
*/
.choose8 {
    position: relative;
}

.choose8::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 70%;
    background-color: #fff;
    z-index: -3;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .choose8::after {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .choose8::after {
        width: 100%;
    }
}

.choose8::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 30%;
    background-color: var(--dark);
    z-index: -3;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .choose8::before {
        width: 0%;
    }
}

@media (max-width: 767px) {
    .choose8::before {
        width: 0%;
    }
}

.choose8 .heading6-w {
    padding-left: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .choose8 .heading6-w {
        padding-left: 0px;
        padding-top: 30px;
    }
}

@media (max-width: 767px) {
    .choose8 .heading6-w {
        padding-left: 0px;
        padding-top: 30px;
    }
}

.choose8 .choose8-images {
    position: relative;
}

.choose8 .choose8-images .shape {
    background-color: #22852a;
    ;
    padding: 24px 32px;
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    position: absolute;
    bottom: 150px;
    right: 0;
}

.choose8 .choose8-images .shape h5 {
    color: #fff;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
    /* 100% */
}

.choose8 .choose8-images .shape p {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 100% */
    padding-top: 12px;
}

.choose8 .choose-box {
    display: flex;
    align-items: center;
    border-radius: 4px;
    background: var(--dark);
    padding: 20px 24px;
    margin-top: 20px;
    transition: all 0.4s;
}

.choose8 .choose-box .icon {
    width: 130px;
}

.choose8 .choose-box .icon img {
    transition: all 0.4s;
}

.choose8 .choose-box .heading {
    padding-left: 30px;
    margin-bottom: 0;
}

.choose8 .choose-box .heading h4 a {
    display: inline-block;
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    /* 100% */
}

.choose8 .choose-box p {
    color: #fff;
    margin: 0;

}

.choose8 .choose-box:hover {
    transition: all 0.4s;
    transform: translateY(-10px);
}

.choose8 .choose-box:hover .icon img {
    transform: rotateY(180deg);
    transition: all 0.4s;
}