:root {
    --primary-color: #1c7f58;
    --secondary-color: #bdefce;
}

html {
    scroll-behavior: smooth;
}

h1 {
    font-size: 108px;
    font-weight: 600;
}

h2 {
    font-size: 52px !important;
    font-weight: 600 !important;
}

h3 {
    font-size: 20px;
    font-weight: 600;
}

h4 {
    font-size: 20px;
    font-weight: 600;
}

h5 {
    font-size: 18px;
    font-weight: 600;
}

p {
    font-size: 18px;
}

main section {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.bg-primary {
    background-color: var(--primary-color);
}

.bg-secondary {
    background-color: var(--secondary-color);
}

.text-primary {
    color: var(--primary-color);
}

.border-primary {
    border-color: var(--primary-color);
}

.home__h1 {
    font-size: 6vw !important;
    line-height: 120%;

    span {
        color: var(--primary-color) !important;
    }
}

.hero__slogan {
    font-size: 22px !important;
}

.bg-primary {
    background-color: var(--primary-color);
}

.bg-secondary {
    background-color: var(--secondary-color);
}

.text-primary {
    color: var(--primary-color);
}

.text-secondary {
    color: var(--secondary-color);
}

.container {
    max-width: 90vw;
    margin: auto;
}

.header_banner {
    background: #57c785;
    background: linear-gradient(
        90deg,
        rgba(87, 199, 133, 1) 0%,
        rgba(189, 239, 206, 1) 50%,
        rgba(87, 199, 133, 1) 100%
    );
}
.hero {
    min-height: 93vh;
    background-color: #efffee;
    background-image: url("../images/urdu-bg.jpg");
    background-size: 50% 100%;
    background-repeat: no-repeat;
    position: relative;

    * {
        position: relative;
        z-index: 1;
    }

    &::before {
        content: "";
        background: rgba(255, 255, 255, 0.97);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 50%;
    }
}

.sm__container {
    max-width: 80vw;
    width: 100%;
    margin: auto;
}

.h1_span {
    position: relative;
}

.h1_span::before {
    content: "";
    width: 100%;
    position: absolute;
    left: 0%;
    right: 0%;
    bottom: -2%;
    height: 5px;
    border-radius: 120px;
    width: 100%;
    border: 5px solid #0cc7be44;
    /* border: 5px solid #f0ffff; */
    border-bottom: none;
    border-radius: 100% 100% 0 0;
}

.section__header {
    text-align: center;
    margin-bottom: 50px;
    h2 {
        span {
            color: var(--primary-color);
        }
    }
    p {
        max-width: 700px;
        margin: auto;
    }
}

.quoteMsg {
    /* background-color: var(--secondary-color); */
    position: relative;
    z-index: 100;
    &::before {
        content: "";
        width: 50px;
        height: 5px;
        background-color: #ffd230;
        display: block;
        transform: translateX(-50%);
        margin-left: 50%;
        margin-bottom: 30px;
    }
    &::after {
        display: block;
        content: "";
        width: 50px;
        height: 5px;
        background-color: #ffd230;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: 40px;
    }
}

.uses__list {
    p {
        font-size: 16px !important;
        width: 80%;
    }
}

.active_use,
.uses__list > div:hover {
    background-color: #ecfff7;
    border-color: var(--primary-color);

    &::after {
        height: 100%;
    }
}

.uses__list > div {
    position: relative;
    &::before {
        content: "";
        width: 3px;
        border-radius: 12px;
        top: 0;
        height: 100%;
        background-color: var(--secondary-color);
        position: absolute;
        left: 0;
    }

    &::after {
        content: "";
        width: 3px;
        border-radius: 12px;
        height: 0%;
        background-color: var(--primary-color);
        position: absolute;
        left: 0;
        top: 0;
        transition: 0.3s ease;
    }

    transition: 0.3s ease;
    .use_img {
        transition: 0.3s ease;
        border: 2px solid var(--secondary-color) !important;
        background-color: var(--secondary-color) !important;
    }
}

.why__us__img {
    position: relative;
    &::before {
        content: "";
        bottom: -0px;
        left: 0;
        right: 0;
        top: 10px;
        position: absolute;
        background-color: var(--secondary-color);
        border-radius: 30px;
        z-index: 0;
    }

    img {
        z-index: 2;
        position: relative;
    }
    /* background-color: red; */
}

.why__section {
    padding: 40px 0px !important;
    background-size: 100% 100%;
    /* background-position-x: right; */
    background-repeat: no-repeat;

    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='80' height='80' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='M34.72 34.72l-10.08-3.36-3.52-10.24 10.24 3.52zm-8.96-4.8L32 32l-2.08-6.24-6.4-2.24zm19.52 4.8l3.36-10.08 10.24-3.52-3.52 10.24zm4.8-8.96L48 32l6.24-2.08 2.24-6.4zm8.96 33.28L48.8 55.52l-3.36-10.08 10.08 3.36zm-8.96-4.8l6.4 2.24-2.24-6.4L48 48zm-29.12 4.8l3.52-10.24 10.08-3.36-3.36 10.08zm4.8-8.96l-2.24 6.4 6.4-2.24L32 48zM40 25.92l-4.64-9.44L40 6.4l4.64 10.08zm-2.88-9.44L40 22.24l2.88-5.76L40 10.24zm26.4 28.16L54.08 40l9.44-4.64L73.6 40zM57.76 40l5.76 2.88L69.76 40l-6.24-2.88zM40 73.6l-4.64-10.08L40 54.08l4.64 9.44zm-2.88-10.08L40 69.76l2.88-6.24L40 57.76zM16.48 44.64L6.4 40l10.08-4.64L25.92 40zM10.24 40l6.24 2.88L22.24 40l-5.76-2.88z'  stroke-width='1' stroke='none' fill='%23fafafaff'/><path d='M23.2 16.16V3.84h12.32zM16.16 56.8H3.84V44.48zM56.8 76.16H44.48L56.8 63.84zm19.36-40.64L63.84 23.2h12.32zM56.8 16.16L44.48 3.84H56.8zM3.84 35.52V23.2h12.32zm31.68 40.64H23.2V63.84zM76.16 56.8H63.84l12.32-12.32zM13.28 8.32l5.44 5.44V8.32zm-4.96 58.4l5.44-5.44H8.32zm58.4 4.96l-5.44-5.44v5.44zm4.96-58.4l-5.44 5.44h5.44zm-10.4-4.96v5.44l5.44-5.44zM8.32 18.72h5.44l-5.44-5.44zm10.4 52.96v-5.44l-5.44 5.44zm52.96-10.4h-5.44l5.44 5.44z'  stroke-width='1' stroke='none' fill='%23f9f9f9ff'/><path d='M7.52 7.52A10.41 10.41 0 0010.72 0h-1.6c0 2.4-.96 4.64-2.72 6.4A8.97 8.97 0 010 9.12v1.6c2.88 0 5.6-1.12 7.52-3.2zM80 9.12c-2.4 0-4.64-.96-6.4-2.72A8.97 8.97 0 0170.88 0h-1.6c0 2.88 1.12 5.6 3.2 7.52a10.41 10.41 0 007.52 3.2zM73.6 73.6a8.97 8.97 0 016.4-2.72v-1.6c-2.88 0-5.6 1.12-7.52 3.2a10.41 10.41 0 00-3.2 7.52h1.6c0-2.4.96-4.64 2.72-6.4zM7.52 72.48A10.41 10.41 0 000 69.28v1.6c2.4 0 4.64.96 6.4 2.72A8.97 8.97 0 019.12 80h1.6c0-2.88-1.12-5.6-3.2-7.52zm-4-68.96A4.7 4.7 0 004.96 0H0v4.96a5.4 5.4 0 003.52-1.44zm72.96 0A4.7 4.7 0 0080 4.96V0h-4.96a5.4 5.4 0 001.44 3.52zm0 72.96A4.7 4.7 0 0075.04 80H80v-4.96a5.4 5.4 0 00-3.52 1.44zm-72.96 0A4.7 4.7 0 000 75.04V80h4.96a5.4 5.4 0 00-1.44-3.52z'  stroke-width='1' stroke='none' fill='%23f0fff3ff'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.review__card {
    background-color: #fff;
    max-width: 500px;
    position: relative;
    border-radius: 12px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    padding-bottom: 60px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 50px;
    &::before {
        content: "";
        position: absolute;
        top: 10px;
        height: 120px;
        width: 96%;
        margin: auto;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 12px;
        background-color: var(--primary-color);
        z-index: 1;
    }
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--primary-color) !important;
}

.courses__bg {
    background: url("../images/urdu-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    .section__header {
        position: relative;
        z-index: 1;
        padding-top: 80px;
    }

    position: relative;
    &::before {
        content: "";
        background: rgba(255, 255, 255, 0.98);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.vedio {
    padding-bottom: 80px;
    margin-top: 0px !important;
    flex-wrap: wrap;
    > div {
        position: relative;
        overflow: hidden;
        background: rgba(219, 255, 227, 0.3);
        min-width: 400px;
        min-height: 500px;
        max-width: 32%;
        display: flex;
        justify-content: center;
        align-items: center;

        > div {
            width: 90%;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            color: #000;
            padding: 0px 20px;

            h3 {
                font-size: 24px !important;
                margin-top: 30px;
                margin-bottom: 10px;
            }

            > div {
                min-height: 400px;
                background: #fff;
                border-radius: 12px;
                padding: 20px;
            }
        }
    }
    span {
        display: block;
        z-index: 4;
        cursor: pointer;
        margin: auto;
        position: relative;
        img {
            width: 32px;
        }

        &::before {
            content: "";
            width: 80px;
            height: 80px;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            background-color: #bfffcb;
            transform: translate(-50%, -50%);
            border-radius: 100px;
            z-index: -1;
        }
        &::after {
            content: "";
            width: 60px;
            height: 60px;
            background-color: rgb(144 255 166);

            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 100px;
            z-index: -1;
        }
    }
}

.pricing__icon {
    img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(650%) hue-rotate(39deg) brightness(110%)
            contrast(101%);
    }
}

.footer_icon {
    a {
        svg {
            width: 43px;
            fill: #000 !important;
        }
    }
}

.cta__section {
    &::before {
        content: "";
        filter: brightness(0) saturate(100%) invert(96%) sepia(45%) saturate(5296%) hue-rotate(326deg) brightness(100%)
            contrast(101%);
        width: 300px;
        background-image: url(../images/background-shapes.svg?V1.0);
        background-repeat: no-repeat;
        position: absolute;
        top: 0px;
        bottom: 0px;
        background-size: cover;
        background-position-y: center;
    }
    &::after {
        content: "";
        filter: brightness(0) saturate(100%) invert(96%) sepia(45%) saturate(5296%) hue-rotate(326deg) brightness(100%)
            contrast(101%);
        width: 300px;
        background-image: url(../images/background-shapes.svg?V1.0);
        background-repeat: no-repeat;
        position: absolute;
        top: 0px;
        bottom: 0px;
        background-size: cover;
        background-position-y: center;
        transform: rotate(180deg);
        right: 0px;
    }
}

.cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 600px;
}
.cta__section {
    overflow: hidden;
    position: relative;
    background-color: var(--primary-color);

    div {
        display: block;
        position: relative;
        z-index: 10 !important;
    }
}

.trial__icon {
    filter: brightness(0) saturate(100%) invert(62%) sepia(12%) saturate(4079%) hue-rotate(109deg) brightness(100%)
        contrast(62%);
}
@media only screen and (min-width: 1600px) {
    .hero {
        padding: 80px !important;
        min-height: fit-content !important;
    }
    .home__h1 {
        font-size: 60px !important;
    }

    .hero__images {
        div > div {
            width: 300px !important;
            height: 300px !important;
        }
        img {
            max-width: 300px !important;
            max-height: 300px !important;
        }
    }
}

@media only screen and (max-width: 1100px) {
    .hero {
        height: 80vh;
        background-color: #efffee;
        background-size: 100% 100%;
        /* background-position-x: right; */
        background-repeat: no-repeat;
        text-align: center;

        &::before {
            width: 100%;
        }
    }

    .hero__content > div {
        justify-content: center;
    }

    .home__h1 {
        font-size: 6rem !important;
    }

    .hero__images {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .home__h1 {
        font-size: 4rem !important;
    }

    .review__card {
        width: 100% !important;
        min-height: 450px;
    }

    .cta__section {
        div {
            text-align: center;
            font-size: 22px !important;
        }

        &::before,
        &::after {
            display: none !important;
        }
    }

    .vedio {
        text-align: center !important;
        & > div {
            > div {
                padding: 0px !important;
            }
        }
    }

.vedio {
    > div {
        min-height: fit-content !important;
        padding: 40px 0px;
    }}

    .vedio {
        & > div {
            & > div {
                > div {
                    padding: 10px !important;
                    min-height: fit-content !important;
                }
            }
        }
    }
}

@media screen and (max-width: 500px) {
    .vedio {
        > div {
            min-width: 300px !important;
        }
    }
    .home__h1 {
        font-size: 14vw !important;
    }

    .hero__slogan {
        font-size: 18px !important;
    }

    .hero__content > div {
        flex-direction: row;
        align-items: center;
    }

    header {
        background-color: #ffffff;
    }

    .hero {
        background-color: #efffee;
        background-image: url("../images/hero-bg-1.png");
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        background-position-x: -10px;
        background-position-y: -8px;

        .sm__container {
            margin-top: 20px !important;
            max-width: 98% !important;
        }

        .services__hero__btn {
            border-color: #000 !important;
            color: #000 !important;
            img {
                display: none;
            }
        }

        h1 {
            span {
                color: var(--primary-color) !important;
            }
        }
        &::before {
            content: "";
            background: #ffffff00;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
        }

        .hero__content > div {
            align-items: flex-start !important;
        }
    }

    h2 {
        font-size: 24px !important;
    }

    h3 {
        font-size: 20px !important;
    }

    .section__header {
        p {
            max-width: 80%;
        }
    }
    p {
        font-size: 16px !important;
    }

    .uses__list {
        > div {
            flex-direction: column;
            text-align: center;

            padding: 0px;
            p {
                width: 100%;
            }

            &::before {
                display: none;
            }

            &::after {
                display: none;
            }
        }
    }
}

/* plans */
.plan__card {
    max-width: 33%;
    min-width: 300px;
}

.bg-primary {
    background-color: var(--primary-color);
}

.plan__card,
.plan__card * {
    transition: 0.1s ease;
}

.shadow-cus {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

/* .plan__card:hover, */
.plan__active {
    background-color: var(--primary-color);

    .plan__body span {
        color: #fff !important;
    }

    .plan__header {
        background: #fff !important;
    }
}

/* .plan__card:hover{
    span img{
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(315deg) brightness(106%) contrast(102%);
    }
}
 */
.plan__card a {
    transition: 0.3s ease;
}
.plan__card a:hover {
    width: 92% !important;
}

.warning_msg {
    background-color: rgb(255, 236, 236);
    width: 100%;
    display: flex !important;

    .alert__detail {
        &::before {
            content: "!";
            width: 24px;
            height: 24px;
            border-radius: 3px;
            /* transform: rotate(45deg); */
            display: block;
            background: #bf0c0c;
            display: inline-flex;
            align-items: center;
            color: #fff;
            justify-content: center;
            margin-bottom: 5px;
            margin-right: 10px;
        }
    }
}

.success_msg {
    background-color: rgb(236, 255, 236);
    width: 100%;
    display: flex !important;

    .alert__detail {
        &::before {
            content: "!";
            width: 24px;
            height: 24px;
            border-radius: 3px;
            /* transform: rotate(45deg); */
            display: block;
            background: #29960e;
            display: inline-flex;
            align-items: center;
            color: #fff;
            justify-content: center;
            margin-bottom: 5px;
            margin-right: 10px;
        }
    }
}

.social__pages {
    strong {
        font-weight: 600 !important;
    }

    p {
        margin: 10px 0px;
    }
    h1 {
        font-size: 32px !important;
        font-weight: 400 !important;
    }

    h2 {
        font-size: 26px !important;
        font-weight: 400 !important;
    }

    h3 {
        font-size: 22px !important;
        font-weight: 400 !important;
    }

    h1,
    h2,
    h3 {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    ul,
    ol {
        margin-left: 20px;
        margin-bottom: 20px;
    }

    a {
        color: var(--primary-color);
    }
}