@import url('base.css');

.header-section {
    width: 100%;
    position: absolute;
    top: 54px;
}

.banner-section {
    width: 100%;
    padding: 181px 0px 111px 0px;
    background: url('../images/banner-bg.png') no-repeat;
    background-size: 100% 100%;
}

.banner-section .content-wrapper {
    margin-top: 65.5px;
}

.offering-section {
    padding: 54px 0px 42px 0px;
}

.offering-section .content-wrapper {
    margin-bottom: 45.13px;
}

.offering-list-wrapper li {
    border-radius: 24px;
    background: #FFFFFF;
    padding: 36px 24px 24px 24px;
    border: 1px dashed #0084B4;
    box-shadow: 8px 8px 24px 0px #0000001A;
    margin-bottom: 45.13px;
}

.offering-list-wrapper li:last-child {
    margin-bottom: 0px;
}

.offering-list-wrapper li .offer-label {
    width: max-content;
    border-radius: 12px;
    padding: 10px 20px;
    top: -21px;
    left: 36px;
}

/* .offering-img-wrapper {
    margin-top: 71.67px;
}

.offering-img-wrapper2 {
    margin-top: 101.95px;
} */

.top-bg-wrapper {
    width: 415px;
    height: 583px;
    position: absolute;
    right: 0px;
    top: 113px;
    background: url('../images/offering-leftbg.png') no-repeat;
    background-size: 415px 583px;
    z-index: -1;
}

.bottom-bg-wrapper {
    width: 253px;
    height: 382px;
    position: absolute;
    left: 0px;
    bottom: 220px;
    background: url('../images/offering-rightbg.png') no-repeat;
    background-size: 253px 383px;
    z-index: -1;
}

.how-it-works-section {
    padding: 42px 0px 47px 0px;
}

.how-work-card {
    padding: 28px;
    background: var(--bg-color1);
    border: 1px dashed #0084B4;
    border-radius: 36px;
}

.why-choose-section {
    padding: 47px 0px 84px 0px;
}

.why-choose-card {
    padding: 28px 17.5px;
    background: var(--white);
    border: 1px dashed #0084B4;
    border-radius: 24px;
    box-shadow: 8px 8px 24px 0px #0000001A;
}

.contact-card {
    width: 100%;
    padding: 38px 95px 39px 95px;
    background: url('../images/contact-bg.png') no-repeat;
    background-size: 100% 100%;
}

.why-choose-bg {
    width: 224px;
    height: 713px;
    position: absolute;
    left: 0px;
    bottom: 34px;
    background: url('../images/whychoose-bg.png') no-repeat;
    background-size: 224px 713px;
    z-index: -1;
}

.footer-section {
    padding: 28px 0px;
    background: var(--dark);
}


@media(max-width: 991px) {
    .header-section .logo-wrapper img {
        width: 112px;
        height: 48px;
    }

    .header-section .default-btn {
        font-size: 13px;
        padding: 12px 26.5px;
    }

    .banner-section {
        padding: 150px 0px 55px 0px;
        background: linear-gradient(180deg, #08A0E9 0%, #0084B4 100%);
    }

    .banner-section .content-wrapper {
        margin-top: 40.5px;
    }

    .top-bg-wrapper  {
        display: none;
    }

    .bottom-bg-wrapper {
       display: none;
    }

    .offering-img-wrapper, .offering-img-wrapper2 {
        margin-top: 0px;
    }

    .offering-section {
        padding: 34px 0px 34px 0px;
    }

    .how-it-works-section {
        padding: 34px 0px 34px 0px;
    }

    .why-choose-section {
        padding: 34px 0px 64px 0px;
    }

    .why-choose-card-wrapper {
        margin-bottom: 48px;
    }

    .contact-card {
        border-radius: 34px;
        padding: 28px 45px 29px 45px;
    }

    .section-heading2 span {
        font-size: 54px;
        line-height: 76px;
    }

    .offering-list-wrapper li .offer-label {
        padding: 7px 16px;
        font-size: 14px;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media(max-width: 575px) {
    .main-heading {
        font-size: 40px;
        line-height: 60px;
    }

    .section-heading {
        font-size: 36px;
        line-height: 50px;
    }

    .section-heading2 {
        font-size: 36px;
        line-height: 50px;
    }

    .section-heading2 span {
        font-size: 48px;
        line-height: 66px;
    }

    .why-choose-card h3 {
        font-size: 28px;
        line-height: 44px;
    }

    .why-choose-card-wrapper {
        margin-bottom: 20px;
    }

    .how-it-works-section {
        padding: 14px 0px 14px 0px;
    }

    .why-choose-section {
        padding: 14px 0px 44px 0px;
    }
}