@use '../utils/' as *;

/*============= COMMON CSS AREA ===============*/
// HEADING AREA //
.heading1 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-4);
        border-radius: 8px;
        transition: all .4s;
        padding: 6px 10px;  
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
        img {
            margin: 0 6px 0 0;
        }
        &::after {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            transition: all .4s;
            background: var(--ztc-bg-bg-1);
            opacity: 10%;
            border-radius: 8px;
        }
    }
    h1 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s64);
        line-height: var(--ztc-font-size-font-s70);
        font-weight: var(--ztc-weight-bold);
        color: var(--ztc-text-text-2);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-3);
     }
}

.heading2 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-4);
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
        img {
            margin: 0 6px 0 0;
        }
        &::after {
            position: absolute;
            content: "";
            left: 0;
            top: -6px;
            width: 20px;
            height: 2px;
            transition: all .4s;
            background: var(--ztc-text-text-4);
        }
    }
    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-3);
     }
}

.heading3 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-5);
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
        img {
            margin: 0 6px 0 0;
        }
        &::after {
            position: absolute;
            content: "";
            left: 0;
            top: -6px;
            width: 20px;
            height: 2px;
            transition: all .4s;
            background: var(--ztc-bg-bg-10);
        }
    }
    h1 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s64);
        line-height: var(--ztc-font-size-font-s70);
        font-weight: var(--ztc-weight-bold);
        color: var(--ztc-text-text-1);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-1);
        opacity: 80% !important;
     }
}

.heading4 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-5);
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
        img {
            margin: 0 6px 0 0;
        }
        &::after {
            position: absolute;
            content: "";
            left: 0;
            top: -6px;
            width: 20px;
            height: 2px;
            transition: all .4s;
            background: var(--ztc-bg-bg-10);
        }
    }
    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-1);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-1);
        opacity: 80% !important;
     }
     h3 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s20);
        line-height: var(--ztc-font-size-font-s20);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-1);
        margin-top: 32px;
        margin-bottom: 8px;
     }
}

.heading5 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-5);
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
        img {
            margin: 0 6px 0 0;
        }
        &::after {
            position: absolute;
            content: "";
            left: 0;
            top: -6px;
            width: 20px;
            height: 2px;
            transition: all .4s;
            background: var(--ztc-bg-bg-10);
        }
    }
    h1 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s64);
        line-height: var(--ztc-font-size-font-s70);
        font-weight: var(--ztc-weight-bold);
        color: var(--ztc-text-text-2);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-3);
     }
}

.heading6 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-5);
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
        img {
            margin: 0 6px 0 0;
        }
        &::after {
            position: absolute;
            content: "";
            left: 0;
            top: -6px;
            width: 20px;
            height: 2px;
            transition: all .4s;
            background: var(--ztc-bg-bg-10);
        }
    }
    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-3);
     }
     h3 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s20);
        line-height: var(--ztc-font-size-font-s20);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        margin-top: 32px;
        margin-bottom: 8px;
     }
}

.heading7 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-6);
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        padding: 6px 10px;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
        img {
            margin: 0 6px 0 0;
        }
        &::after {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            transition: all .4s;
            background: var(--ztc-text-text-6);
            opacity: 8%;
            border-radius: 8px;
        }
    }
    h1 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s64);
        line-height: var(--ztc-font-size-font-s74);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
        span {
            color: var(--ztc-text-text-6);
            display: inline-block;
            position: relative;
            img {
                position: absolute;
                left: 0;
                bottom: 0;
            }
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-3);
     }
}

.heading8 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-6);
        border-radius: 8px;
        transition: all .4s;
        padding: 6px 10px;  
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
        &::after {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            transition: all .4s;
            background: var(--ztc-text-text-6);
            opacity: 8%;
            border-radius: 8px;
        }
        img {
            margin: 0 6px 0 0;
        }
    }
    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s60);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        margin-bottom: 16px;
        span {
            color: var(--ztc-text-text-6);
            display: inline-block;
            position: relative;
            img {
                position: absolute;
                left: 0;
                bottom: -10px;
                @media #{$xs} {
                    display: none;
                }
            }
        }
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-3);
     }
}

.heading9 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-bg-bg-17);
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        padding: 6px 10px;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
        background: var(--ztc-bg-bg-19);
        img {
            margin: 0 6px 0 0;
        }
    }
    h1 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s56);
        line-height: var(--ztc-font-size-font-s68);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-10);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
        span {
            color: var(--ztc-text-text-6);
            display: inline-block;
            position: relative;
            img {
                position: absolute;
                left: 0;
                bottom: -25px;
            }
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-10);
        opacity: 80%;
     }
}

.heading10 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-12);
        border-radius: 8px;
        transition: all .4s;
        padding: 6px 10px;  
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
        &::after {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            transition: all .4s;
            background: var(--ztc-bg-bg-20);
            border-radius: 8px;
        }
        img {
            margin: 0 6px 0 0;
        }
    }
    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        margin-bottom: 16px;
        span {
            color: var(--ztc-text-text-6);
            display: inline-block;
            position: relative;
            img {
                position: absolute;
                left: 0;
                bottom: -10px;
                @media #{$xs} {
                    display: none;
                }
            }
        }
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-3);
     }
     h3 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s40);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        margin-bottom: 24px;
     }
}

.heading11 {
    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-1);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-1);
        opacity: 80%;
     }
}

.heading12 {
    h5 {
        color: var(--ztc-text-text-15);
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        font-style: normal;
        font-weight: var(--ztc-weight-semibold);
        line-height: 16px;
        display: inline-block;
        position: relative;
        z-index: 1;
        margin-bottom: 16px;
        &::after {
            position: absolute;
            content: "";
            width: 30px;
            height: 2px;
            background: var(--ztc-text-text-15);
            left: -39px;
            top: 8px;
        }
        &::before {
            position: absolute;
            content: "";
            width: 30px;
            height: 2px;
            background: var(--ztc-text-text-15);
            right: -39px;
            top: 8px;
        }
    }
    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-3);
     }
}

.heading13 {
    h5 {
        color: var(--ztc-text-text-16);
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        font-style: normal;
        font-weight: var(--ztc-weight-semibold);
        line-height: 16px;
        display: inline-block;
        position: relative;
        z-index: 1;
        margin-bottom: 16px;
        &::after {
            position: absolute;
            content: "";
            width: 30px;
            height: 2px;
            background: var(--ztc-text-text-16);
            left: -39px;
            top: 8px;
        }
        &::before {
            position: absolute;
            content: "";
            width: 30px;
            height: 2px;
            background: var(--ztc-text-text-16);
            right: -39px;
            top: 8px;
        }
    }
    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
    h3 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s32);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-3);
     }
}

.heading14 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-17);
        border-radius: 32px;
        transition: all .4s;
        padding: 6px 10px;  
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
      background: #EFEEFC;
        img {
            margin: 0 6px 0 0;
        }
    }
    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        margin-bottom: 16px;
        span {
            color: var(--ztc-text-text-6);
            display: inline-block;
            position: relative;
            img {
                position: absolute;
                left: 0;
                bottom: -10px;
                @media #{$xs} {
                    display: none;
                }
            }
        }
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-3);
     }
     h3 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s40);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        margin-bottom: 24px;
     }
}

.heading15 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-14);
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
    }
    h1 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s64);
        line-height: 72px;
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-2);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }

    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-bold);
        color: var(--ztc-text-text-2);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-3);
     }
}

.heading16 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        background: var(--Linner-Color, linear-gradient(268deg, #408BFF 0.24%, #0A18A1 98.24%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        display: inline-block;
        padding: 8px 12px;
        &::after {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            border-radius: 4px;
            background: rgba(64, 139, 255, 0.10);            
        }
        img {
            margin: 0 4px 0 0;
        }
    }

    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-18);
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-3);
     }
}

.heading17 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: #055346;
        border-radius: 8px;
        border-radius: 5px;
        background: rgba(5, 83, 70, 0.10);
        transition: all .4s;
        position: relative;
        display: inline-block;
        padding: 8px 12px;
        img {
            margin: 0 4px 0 0;
        }
    }

    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s64);
        line-height: var(--ztc-font-size-font-s70);
        font-weight: var(--ztc-weight-bold);
        color: #055346;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s18);
        line-height: var(--ztc-font-size-font-s28);
        font-weight: var(--ztc-weight-regular);
        color: #5D6261;
     }
}

.heading18 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: #055346;
        border-radius: 8px;
        border-radius: 5px;
        background: rgba(5, 83, 70, 0.10);
        transition: all .4s;
        position: relative;
        display: inline-block;
        padding: 8px 12px;
        img {
            margin: 0 4px 0 0;
        }
    }

    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-semibold);
        color: #055346;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: #5D6261;
     }
}

.heading19 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        background: var(--ddd, linear-gradient(91deg, #FF0A54 0.78%, #FF6F00 99.88%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        display: inline-block;
        padding: 8px 12px;
        &::after {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            border-radius: 4px;
            background: rgba(255, 15, 81, 0.05);         
        }
        img {
            margin: 0 4px 0 0;
        }
    }

    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s60);
        line-height: var(--ztc-font-size-font-s66);
        font-weight: var(--ztc-weight-bold);
        color: #09171B;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s18);
        line-height: var(--ztc-font-size-font-s28);
        font-weight: var(--ztc-weight-medium);
        color: #5C6365;
     }
}

.heading20 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        background: var(--ddd, linear-gradient(91deg, #FF0A54 0.78%, #FF6F00 99.88%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        display: inline-block;
        padding: 8px 12px;
        &::after {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            border-radius: 4px;
            background: rgba(255, 15, 81, 0.05);         
        }
        img {
            margin: 0 4px 0 0;
        }
    }

    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-bold);
        color: #09171B;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-medium);
        color: #5C6365;
     }
}

.heading21 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-1);
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
        img {
            margin: 0 6px 0 0;
        }
        &::after {
            position: absolute;
            content: "";
            left: 0;
            bottom: -6px;
            width: 20px;
            height: 2px;
            transition: all .4s;
            background: #fff;
        }
    }
    h1 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s56);
        line-height: var(--ztc-font-size-font-s66);
        font-weight: var(--ztc-weight-bold);
        color: var(--ztc-text-text-1);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-bold);
        color: var(--ztc-text-text-1);
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: var(--ztc-text-text-1);
        opacity: 80%;
     }
}

.heading22 {
    h5 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s16);
        font-weight: var(--ztc-weight-medium);
        color: #4D44C5;
        border-radius: 8px;
        transition: all .4s;
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-bottom: 16px;
        img {
            margin: 0 6px 0 0;
        }
        &::after {
            position: absolute;
            content: "";
            left: 0;
            bottom: -6px;
            width: 20px;
            height: 2px;
            transition: all .4s;
            background: #4D44C5;
        }
    }

    h2 {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s52);
        font-weight: var(--ztc-weight-bold);
        color: #040306;
        margin-bottom: 16px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        line-height: var(--ztc-font-size-font-s26);
        font-weight: var(--ztc-weight-regular);
        color: #565659;
     }
}

.heading23 {
    h5 {
        color: var(--gray-700, #374151);
        font-family: var(--ztc-family-font1);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 14px;
        display: inline-block;
        transition: all .4s;
        border-radius: 30px;
        background: var(--primary-100, #E1EFFE);
        padding: var(--1, 4px) var(--2, 8px); 
        i {
            margin-left: 8px;
        }       
    }

    h2 {
        color: var(--Text-Color, #090B0E);
        font-family: var(--ztc-family-font1);
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%;
        letter-spacing: -0.36px;
        @media #{$xs} {
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-font-size-font-s40);
        }
    }
     p {
        color: var(--gray-500, var(--gray-500, #6B7280));
        font-family: var(--ztc-family-font1);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
     }
}
// BTN AREA //
.header-btn1 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    background: var(--ztc-bg-bg-1);
    color: var(--ztc-text-text-1);
    padding: 8px 16px;
    transition: all .4s;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    &:hover {
        &::after {
            visibility: visible;
            opacity: 1;
            width: 100%;
            left: 0;
            transition: all .4s;
        }
        span {
            transition: all .4s;
            transform: rotate(0deg);
        }
    }
    &::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 1px;
        left: 50%;
        transition: all .4s;
        top: 0;
        z-index: -1;
        background: var(--ztc-text-text-13);
        border-radius: 30px;
        visibility: hidden;
        opacity: 0;
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
    }
    span {
        height: 36px;
        width: 36px;
        display: inline-block;
        border-radius: 50%;
        transition: all .4s;
        line-height: var(--ztc-font-size-font-s36);
        text-align: center;
        background: var(--ztc-text-text-1);
        color: var(--ztc-text-text-4);
        transform: rotate(-45deg);
        position: relative;
        left: 8px;
    }
}

.header-btn2 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    background: var(--ztc-bg-bg-1);
    color: var(--ztc-text-text-1);
    padding: 8px 16px;
    transition: all .4s;
    border-radius: 30px;
    position: relative;
    background: transparent;
    z-index: 1;
    transition: all .4s;
    &:hover {
        color: var(--ztc-text-text-1) !important;
        transition: all .4s;
        transform: translateY(-5px);
        border: 1px solid var(--ztc-text-text-13);
        background: var(--ztc-text-text-13);
        span {
            background: var(--ztc-text-text-1) !important;
            transition: all .4s;
            color: var(--ztc-text-text-4) !important;
            transform: rotate(0deg);
        }
    }
    span {
        height: 36px;
        width: 36px;
        display: inline-block;
        border-radius: 50%;
        transition: all .4s;
        line-height: var(--ztc-font-size-font-s36);
        text-align: center;
        background: var(--ztc-text-text-1);
        color: var(--ztc-text-text-2);
        transform: rotate(-45deg);
        position: relative;
        left: 8px;
    }
}

.header-btn3 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-1);
    padding: 16px 24px;
    transition: all .4s;
    border: 1px solid var(--ztc-text-text-1);
    border-radius: 30px;
    position: relative;
    z-index: 1;
 
    &:hover {
        background: var(--ztc-text-text-5);
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
        border: 1px solid var(--ztc-text-text-5);
    }
}

.header-btn4 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-1);
    background: var(--ztc-text-text-5);
    padding: 16px 24px;
    transition: all .4s;
    border: 1px solid var(--ztc-text-text-5);
    border-radius: 30px;
    position: relative;
    z-index: 1;
    &:hover {
        color: var(--ztc-text-text-2);
        transition: all .4s;
        transform: translateY(-5px);
        border: 1px solid var(--ztc-text-text-1);
        background: var(--ztc-text-text-1);
    }
}

.header-btn5 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-2);
    padding: 16px 24px;
    transition: all .4s;
    border: 1px solid var(--ztc-text-text-2);
    border-radius: 30px;
    position: relative;
    z-index: 1;
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
        border: 1px solid var(--ztc-text-text-5);
        background: var(--ztc-text-text-5);
    }
}

.header-btn6 {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s18);
    font-family:var();
    color: var(--ztc-text-text-6);
    border-top: 1px solid var(--ztc-text-text-6);
    border-bottom: 1px solid var(--ztc-text-text-6);
    padding: 15px 0;
    font-weight: var(--ztc-weight-bold);
    transition: all .4s;
    line-height: var(--ztc-font-size-font-s18);
    &:hover {
        letter-spacing: 1px;
        color: var(--ztc-text-text-6);
        transition: all .4s;
    }
}

.header-btn7 {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s18);
    font-family:var();
    color: var(--ztc-text-text-2);
    border-top: 1px solid var(--ztc-text-text-2);
    border-bottom: 1px solid var(--ztc-text-text-2);
    padding: 15px 0;
    font-weight: var(--ztc-weight-bold);
    transition: all .4s;
    line-height: var(--ztc-font-size-font-s18);
    &:hover {
        letter-spacing: 1px;
        color: var(--ztc-text-text-2);
        transition: all .4s;
    }
}

.header-btn8 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-1);
    background: var(--ztc-text-text-6);
    padding: 16px 24px;
    transition: all .4s;
    border: 1px solid var(--ztc-text-text-6);
    border-radius: 30px;
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
    }
}

.header-btn9 {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s18);
    font-family:var(--ztc-family-font1);
    color: var(--ztc-text-text-2);
    padding: 16px;
    font-weight: var(--ztc-weight-bold);
    transition: all .4s;
    line-height: var(--ztc-font-size-font-s18);
    background: var(--ztc-bg-bg-17);
    border-radius: 4px;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    &::after {
        position: absolute;
        content: "";
        height: 100%;
        left: 50%;
        top: 0;
        width: 1px;
        transition: all .4s;
        z-index: -1;
        background-color: var(--ztc-text-text-1);
        border-radius: 4px;
        visibility: hidden;
        opacity: 0;
    }
    i {
        margin-left: 4px;
        transform: rotate(-45deg);
    }
    &:hover {
        color: var(--ztc-text-text-2);
        transition: all .4s;
        transform: translateY(-5px);
        &::after {
            visibility: visible;
            opacity: 1;
            left: 0;
            top: 0;
            width: 100%;
            transition: all .4s;
        }
    }
}

.header-btn10 {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s18);
    font-family:var();
    color: var(--ztc-bg-bg-17);
    padding: 15px;
    font-weight: var(--ztc-weight-bold);
    transition: all .4s;
    line-height: var(--ztc-font-size-font-s18);
    border: 1px solid var(--ztc-bg-bg-17);
    border-radius: 4px;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    &::after {
        position: absolute;
        content: "";
        height: 100%;
        left: 50%;
        top: 0;
        width: 1px;
        transition: all .4s;
        z-index: -1;
        background-color: #A3FF00;
        border-radius: 4px;
        visibility: hidden;
        opacity: 0;
    }
    i {
        margin-left: 4px;
        transform: rotate(-45deg);
    }
    &:hover {
        color: var(--ztc-text-text-2);
        transition: all .4s;
        transform: translateY(-5px);
        &::after {
            visibility: visible;
            opacity: 1;
            left: 0;
            top: 0;
            width: 100%;
            transition: all .4s;
        }
    }
}

.header-btn11 {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s18);
    font-family:var();
    color: var(--ztc-text-text-2);
    padding: 16px;
    font-weight: var(--ztc-weight-bold);
    transition: all .4s;
    line-height: var(--ztc-font-size-font-s18);
    background: var(--ztc-bg-bg-17);
    border-radius: 4px;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    &::after {
        position: absolute;
        content: "";
        height: 100%;
        left: 50%;
        top: 0;
        width: 1px;
        transition: all .4s;
        z-index: -1;
        background-color: var(--ztc-bg-bg-18);
        border-radius: 4px;
        visibility: hidden;
        opacity: 0;
    }
    i {
        margin-left: 4px;
        transform: rotate(-45deg);
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        &::after {
            visibility: visible;
            opacity: 1;
            left: 0;
            top: 0;
            width: 100%;
            transition: all .4s;
        }
    }
}

.header-btn12 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    background: var(--ztc-text-text-6);
    color: var(--ztc-text-text-1);
    padding: 16px 24px;
    transition: all .4s;
    border-radius: 30px;
    position: relative;
    text-transform: capitalize;
    z-index: 1;
    i {
        margin-left: 4px;
        transform: rotate(-45deg);
        transition: all .4s;
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
        background: var(--ztc-text-text-2);
        
        i {
            transform: rotate(0);
            transition: all .4s;
        }
    }
}

.header-btn13 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    background: var(--ztc-bg-bg-24);
    color: var(--ztc-text-text-1);
    padding: 16px 20px;
    transition: all .4s;
    position: relative;
    text-transform: capitalize;
    z-index: 1;
    i {
        margin-left: 4px;
        transform: rotate(-45deg);
        transition: all .4s;
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
        background: var(--ztc-bg-bg-25);
        
        i {
            transform: rotate(0);
            transition: all .4s;
        }
    }
}

.header-btn14 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    background: var(--ztc-bg-bg-25);
    color: var(--ztc-text-text-1);
    padding: 16px 20px;
    transition: all .4s;
    position: relative;
    text-transform: capitalize;
    z-index: 1;
    i {
        margin-left: 4px;
        transform: rotate(-45deg);
        transition: all .4s;
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
        background: var(--ztc-bg-bg-24);
        
        i {
            transform: rotate(0);
            transition: all .4s;
        }
    }
}

.header-btn15 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    background: var(--ztc-bg-bg-26);
    color: var(--ztc-text-text-1);
    padding: 8px 16px;
    transition: all .4s;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    &:hover {
        background: var(--ztc-bg-bg-27);
        color: var(--ztc-text-text-2);
        transition: all .4s;
        span {
            transition: all .4s;
            transform: rotate(0deg);
        }
    }
    &:hover {
        color: var(--ztc-text-text-2);
        transition: all .4s;
        transform: translateY(-5px);
    }
    span {
        height: 36px;
        width: 36px;
        display: inline-block;
        border-radius: 50%;
        transition: all .4s;
        line-height: var(--ztc-font-size-font-s36);
        text-align: center;
        background: var(--ztc-text-text-1);
        color: var(--ztc-text-text-2);
        transform: rotate(-45deg);
        position: relative;
        left: 8px;
    }
}

.header-btn16 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    background: var(--ztc-bg-bg-28);
    color: var(--ztc-text-text-1);
    padding: 8px 16px;
    transition: all .4s;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    &:hover {
        background: var(--ztc-text-text-2);
        color: var(--ztc-text-text-1);
        transition: all .4s;
        span {
            transition: all .4s;
            transform: rotate(0deg);
        }
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
    }
    span {
        height: 36px;
        width: 36px;
        display: inline-block;
        border-radius: 50%;
        transition: all .4s;
        line-height: var(--ztc-font-size-font-s36);
        text-align: center;
        background: var(--ztc-text-text-1);
        color: var(--ztc-text-text-2);
        transform: rotate(-45deg);
        position: relative;
        left: 8px;
    }
}

.header-btn17 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    background: var(--ztc-bg-bg-25);
    color: var(--ztc-text-text-1);
    padding: 8px 16px;
    transition: all .4s;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    &:hover {
        background: var(--ztc-text-text-2);
        color: var(--ztc-text-text-1);
        transition: all .4s;
        span {
            transition: all .4s;
            transform: rotate(0deg);
        }
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
    }
    span {
        height: 36px;
        width: 36px;
        display: inline-block;
        border-radius: 50%;
        transition: all .4s;
        line-height: var(--ztc-font-size-font-s36);
        text-align: center;
        background: var(--ztc-text-text-1);
        color: var(--ztc-text-text-2);
        transform: rotate(-45deg);
        position: relative;
        left: 8px;
    }
}

.header-btn18 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: #0F25A3;
    padding: 18px 24px;
    transition: all .4s;
    border-radius: 8px;
    position: relative;
    background: var(--ztc-text-text-1);
    z-index: 1;
    &::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 0;
        left: 0;
        top: 0;
        background: var(--Linner-Color, linear-gradient(268deg, #0A18A1 0.24%,  #408BFF 98.24%));
        transition: all .4s;
        z-index: -1;
        border-radius: 8px;
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        &::after {
            width: 100%;
            transition: all .4s;
        }
    }
    i {
        margin-left: 4px;
        display: inline-block;
        transform: rotate(-45deg);
    }
}

.header-btn19 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: #fff;
    padding: 18px 24px;
    transition: all .4s;
    border-radius: 8px;
    position: relative;
    background: var(--Linner-Color, linear-gradient(268deg, #408BFF 0.24%,  #0A18A1 98.24%));
    z-index: 1;
    &::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 0;
        left: 0;
        top: 0;
        background: var(--Linner-Color, linear-gradient(268deg, #0A18A1 0.24%,  #408BFF 98.24%));
        transition: all .4s;
        z-index: -1;
        border-radius: 8px;
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        &::after {
            width: 100%;
            transition: all .4s;
        }
    }
    i {
        margin-left: 4px;
        display: inline-block;
        transform: rotate(-45deg);
    }
}
.header-btn20 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: #000000;
    padding: 18px 24px;
    transition: all .4s;
    border-radius: 4px;
    position: relative;
    background: #DDFA63;
    z-index: 1;
    &::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 10px;
        left: 50%;
        top: 0; 
        transition: all .4s;
        background: #000000; 
        border-radius: 4px;
        z-index: -1;  
        visibility: hidden;
        opacity: 0;
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        &::after {
            visibility: visible;
            opacity: 1;
            transition: all .4s;
            left: 0;
            width: 100%;
        }
    }
    i {
        margin-left: 4px;
    }
}

.header-btn21 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: #fff;
    padding: 18px 24px;
    transition: all .4s;
    border-radius: 4px;
    position: relative;
    border-radius: 5px;
    background: var(--ddd, linear-gradient(91deg, #FF0A54 0.78%, #FF6F00 99.88%));
    z-index: 1;
    &::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 10px;
        left: 50%;
        top: 0; 
        transition: all .4s;
        background: #09171B; 
        border-radius: 4px;
        z-index: -1;  
        visibility: hidden;
        opacity: 0;
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
        &::after {
            visibility: visible;
            opacity: 1;
            transition: all .4s;
            left: 0;
            width: 100%;
        }
    }
    i {
        margin-left: 4px;
        transform: rotate(-45deg);
    }
}
.header-btn22 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: #fff;
    padding: 18px 24px;
    transition: all .4s;
    border-radius: 4px;
    position: relative;
    border-radius: 5px;
    background: #4D44C5;
    z-index: 1;
    &::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 10px;
        left: 50%;
        top: 0; 
        transition: all .4s;
        background: #040306; 
        border-radius: 4px;
        z-index: -1;  
        visibility: hidden;
        opacity: 0;
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
        &::after {
            visibility: visible;
            opacity: 1;
            transition: all .4s;
            left: 0;
            width: 100%;
        }
    }
    i {
        margin-left: 4px;
    }
}

.header-btn23 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: #4D44C5;
    padding: 18px 24px;
    transition: all .4s;
    border-radius: 4px;
    position: relative;
    border-radius: 5px;
    background: #fff;
    z-index: 1;
    &::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 10px;
        left: 50%;
        top: 0; 
        transition: all .4s;
        background: #040306; 
        border-radius: 4px;
        z-index: -1;  
        visibility: hidden;
        opacity: 0;
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
        &::after {
            visibility: visible;
            opacity: 1;
            transition: all .4s;
            left: 0;
            width: 100%;
        }
    }
    i {
        margin-left: 4px;
    }
}
.header-btn24 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    color: #090B0E;
    padding: 18px 24px;
    transition: all .4s;
    border-radius: var(--rounded-full, 9999px);
    position: relative;
    background: #fff;
    z-index: 1;
    &::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 10px;
        left: 50%;
        top: 0; 
        transition: all .4s;
        background: #090B0E; 
        border-radius: var(--rounded-full, 9999px);
        z-index: -1;  
        visibility: hidden;
        opacity: 0;
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
        &::after {
            visibility: visible;
            opacity: 1;
            transition: all .4s;
            left: 0;
            width: 100%;
        }
    }
    i {
        margin-left: 4px;
    }
}
.header-btn25 {
    display: inline-block;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    color: #fff;
    padding: 18px 24px;
    transition: all .4s;
    border-radius: var(--rounded-full, 9999px);
    position: relative;
    background: #1C64F2;
    z-index: 1;
    &::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 10px;
        left: 50%;
        top: 0; 
        transition: all .4s;
        background: #040306; 
        border-radius: var(--rounded-full, 9999px);
        z-index: -1;  
        visibility: hidden;
        opacity: 0;
    }
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        transform: translateY(-5px);
        &::after {
            visibility: visible;
            opacity: 1;
            transition: all .4s;
            left: 0;
            width: 100%;
        }
    }
    i {
        margin-left: 4px;
    }
}
.header-btn4.btn2 {
    &:hover {
        color: var(--ztc-text-text-1);
        transition: all .4s;
        background: var(--ztc-text-text-2);
    }
}

.bg-white {
    background: var(--ztc-text-text-1) !important;
}

.bg2 {
    background: var(--ztc-bg-bg-4);
}

.bg3 {
    background: #F6F8FA !important;
}
/*============= COMMON CSS AREA ENDS===============*/