*, html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat",sans-serif
}

* {
    scroll-behaviour: smooth
}

.container {
    max-width: 90%;
    margin: 0 auto
}

@media(max-width: 412px) {
    .container {
        max-width: 98%
    }
}

.custom-btn-primary {
    background: #f26522;
    color: #fff;
    padding: 10px 20px;
    display: inline-block;
    border: 1px solid #f26522;
    font-weight: 500;
    font-size: 16px;
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: all .6s ease-in
}

@media(max-width: 1440px) {
    .custom-btn-primary {
        font-size: 14px
    }
}

@media(max-width: 667px) {
    .custom-btn-primary {
        font-size: 14px;
        padding: 5px 20px
    }
}

.custom-btn-primary:hover, .custom-btn-primary:active, .custom-btn-primary:focus {
    background: #1c75bc;
    color: #fff
}

.custom-btn-secoundary {
    background: #1c75bc;
    color: #fff;
    padding: 15px 30px;
    display: inline-block;
    border: 1px solid #1c75bc;
    font-weight: 500;
    font-size: 16px;
    border-radius: 33px;
    text-decoration: none;
    white-space: nowrap;
    transition: all .6s ease-in
}

@media(max-width: 1440px) {
    .custom-btn-secoundary {
        font-size: 14px
    }
}

@media(max-width: 667px) {
    .custom-btn-secoundary {
        font-size: 14px;
        padding: 10px 20px
    }
}

.custom-btn-secoundary:hover, .custom-btn-secoundary:active, .custom-btn-secoundary:focus {
    background: #f26522;
    color: #fff
}

.custom-btn-primary-sm {
    background: #f26522;
    color: #fff;
    padding: 5px 20px;
    display: inline-block;
    border: 1px solid #f26522;
    font-weight: 500;
    font-size: 14px;
    transition: all .6s ease-in
}

@media(max-width: 667px) {
    .custom-btn-primary-sm {
        padding: 5px 20px
    }
}

.custom-btn-primary-sm:hover, .custom-btn-primary-sm:active, .custom-btn-primary-sm:focus {
    background: #1c75bc;
    color: #fff
}

.custom-btn-white {
    background: #fff;
    color: #f26522;
    padding: 15px 30px;
    display: inline-block;
    border: 1px solid #fff;
    font-weight: 500;
    font-size: 18px;
    border-radius: 33px;
    text-decoration: none;
    white-space: nowrap;
    transition: all .6s ease-in
}

@media(max-width: 1440px) {
    .custom-btn-white {
        font-size: 14px
    }
}

@media(max-width: 667px) {
    .custom-btn-white {
        font-size: 14px;
        padding: 5px 20px
    }
}

.custom-btn-white:hover, .custom-btn-white:active, .custom-btn-white:focus {
    background: #1c75bc;
    color: #fff
}

.section-title {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
    font-family: "Montserrat-title"
}

    .section-title h2 {
        font-size: 48px;
        font-family: "Montserrat-title";
        position: relative
    }

@media(max-width: 1366px) {
    .section-title h2 {
        font-size: 40px
    }
}

@media(max-width: 1284px) {
    .section-title h2 {
        font-size: 32px
    }
}

@media(max-width: 1199px) {
    .section-title h2 {
        font-size: 28px
    }
}

@media(max-width: 667px) {
    .section-title h2 {
        font-size: 22px
    }
}

@media(max-width: 576px) {
    .section-title h2 {
        font-size: 18px
    }
}

.section-title h2 span {
    font-family: "Montserrat-title";
    color: #f26522
}

.section-title p {
    font-size: 16px;
    font-weight: 400
}

@media(max-width: 1440px) {
    .section-title p {
        font-size: 14px
    }
}

.section-title-sm {
    position: relative;
    z-index: 1
}

    .section-title-sm h2 {
        font-size: 32px;
        font-weight: 700;
        position: relative
    }

@media(max-width: 1660px) {
    .section-title-sm h2 {
        font-size: 28px
    }
}

@media(max-width: 1199px) {
    .section-title-sm h2 {
        font-size: 22px
    }
}

@media(max-width: 667px) {
    .section-title-sm h2 {
        font-size: 20px
    }
}

@media(max-width: 576px) {
    .section-title-sm h2 {
        font-size: 20px
    }
}

.section-title-sm h2 span {
    font-size: 40px;
    font-weight: 700;
    color: #f26522
}

@media(max-width: 1660px) {
    .section-title-sm h2 span {
        font-size: 38px
    }
}

@media(max-width: 1199px) {
    .section-title-sm h2 span {
        font-size: 28px
    }
}

@media(max-width: 667px) {
    .section-title-sm h2 span {
        font-size: 28px
    }
}

@media(max-width: 576px) {
    .section-title-sm h2 span {
        font-size: 20px
    }
}

header {
    position: relative;
    width: 100%;
    text-align: left;
    transition: position .45s;
    /*padding: 10px 0;*/
    z-index: 1
}

@media(max-width: 667px) {
    header {
        text-align: center
    }
}

/*header .logo img {
    min-width: 220px;
    margin-top: 50px
}

@media(max-width: 1366px) {
    header .logo img {
        padding: 5px 0;
        min-width: 180px
    }
}*/

@media(max-width: 1199px) {
    header .logo img {
        max-width: 100px;
        margin-top: 0px;
        height: auto;
    }
}

header .top-head {
    background-color: #f6f4f4
}

    header .top-head a {
        text-decoration: none
    }

        header .top-head a span {
            font-size: 14px;
            font-weight: 600;
            color: #0e0e0d
        }

@media(max-width: 1199px) {
    header .top-head a span {
        text-decoration: none;
        color: #fff
    }
}

@media(max-width: 1199px) {
    header .top-head a svg {
        height: 15px;
        width: 15px
    }
}

@media(max-width: 1199px) {
    header .top-head a svg path {
        fill: #fff
    }
}

@media(max-width: 1199px) {
    header .top-head {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        z-index: 10;
        background-color: #1c75bc
    }
}

@media(max-width: 576px) {
    header .top-head {
        gap: 100px
    }
}

@media(max-width: 576px) {
    header .top-head span {
        gap: 100px;
        display: none
    }
}

footer {
    background-color: #1c75bc;
    padding: 25px 0
}

    footer .copyright {
        font-size: 18px;
        display: flex;
        justify-content: space-between
    }

@media(max-width: 1284px) {
    footer .copyright {
        font-size: 16px
    }
}

@media(max-width: 576px) {
    footer .copyright {
        font-size: 14px
    }
}

@media(max-width: 667px) {
    footer .copyright {
        text-align: center;
        flex-wrap: wrap
    }
}

footer .copyright ul {
    margin-bottom: 0
}

    footer .copyright ul li {
        display: inline-block;
        color: #fff;
        font-size: 18px;
        margin-right: 25px
    }

@media(max-width: 1284px) {
    footer .copyright ul li {
        font-size: 16px
    }
}

@media(max-width: 576px) {
    footer .copyright ul li {
        font-size: 14px
    }
}

footer .copyright ul li a {
    color: #fff;
    text-decoration: none
}

@media(max-width: 576px) {
    footer .copyright ul li a {
        font-size: 14px
    }
}

.plan-feature-bx h3 {
    font-size: 18px;
    font-weight: 600;
    margin-top: auto;
    margin-bottom: auto
}

@media(max-width: 1366px) {
    .plan-feature-bx h3 {
        font-size: 16px
    }
}

@media(max-width: 1284px) {
    .plan-feature-bx h3 {
        font-size: 14px
    }
}

@media(max-width: 991px) {
    .plan-feature-bx h3 {
        margin-top: 10px
    }
}

.plan-feature-bx img {
    min-width: 50px;
    max-height: 60px
}

@media(max-width: 667px) {
    .plan-feature-bx img {
        max-width: 50px;
        min-height: 50px;
        max-height: 50px
    }
}

.border-bottom-dotted {
    border-bottom: 2px dashed #e7e7e7;
    width: 200px;
    left: 275px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg)
}

@media(max-width: 991px) {
    .border-bottom-dotted {
        top: 40%
    }
}

.border-left-dotted {
    border-bottom: 2px dashed #e7e7e7;
    margin-bottom: 20px;
    margin-top: 20px
}

section {
    position: relative
}

    section .section-title-xl {
        position: relative;
        z-index: 1
    }

        section .section-title-xl h2 {
            font-size: 40px;
            font-weight: 700;
            position: relative
        }

@media(max-width: 1660px) {
    section .section-title-xl h2 {
        font-size: 38px
    }
}

@media(max-width: 1550px) {
    section .section-title-xl h2 {
        font-size: 28px
    }
}

@media(max-width: 1199px) {
    section .section-title-xl h2 {
        font-size: 28px
    }
}

@media(max-width: 667px) {
    section .section-title-xl h2 {
        font-size: 28px
    }
}

@media(max-width: 576px) {
    section .section-title-xl h2 {
        font-size: 20px
    }
}

section .section-title-xl h2 span {
    font-size: 40px;
    font-weight: 700;
    color: #f26522
}

@media(max-width: 1660px) {
    section .section-title-xl h2 span {
        font-size: 38px
    }
}

@media(max-width: 1550px) {
    section .section-title-xl h2 span {
        font-size: 28px
    }
}

@media(max-width: 1199px) {
    section .section-title-xl h2 span {
        font-size: 28px
    }
}

@media(max-width: 667px) {
    section .section-title-xl h2 span {
        font-size: 28px
    }
}

@media(max-width: 576px) {
    section .section-title-xl h2 span {
        font-size: 20px
    }
}

section .section-title-xl h3 {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.5
}

@media(max-width: 1660px) {
    section .section-title-xl h3 {
        font-size: 18px;
        line-height: 1.5
    }
}

@media(max-width: 991px) {
    section .section-title-xl h3 {
        font-size: 16px
    }
}

section .section-title-xl p {
    font-size: 16px;
    font-weight: 500
}

@media(max-width: 1440px) {
    section .section-title-xl p {
        font-size: 14px
    }
}

section.hero-banner {
    margin-top: -160px;
    background-position: right;
    background-size: cover;
    width: 100%;
    background-repeat: no-repeat
}

@media(max-width: 1024px) {
    section.hero-banner {
        margin-top: -100px
    }
}

@media(max-width: 667px) {
    section.hero-banner {
        margin-top: 0px
    }
}

section.hero-banner img {
    width: 100%
}

@media(max-width: 667px) {
    section.hero-banner img {
        min-height: 480px;
        object-position: right;
        object-fit: cover
    }
}

@media(max-width: 576px) {
    section.hero-banner img {
        min-height: 400px
    }
}

section.hero-banner .hero-banner-text {
    position: absolute;
    top: 30%
}

@media(max-width: 1550px) {
    section.hero-banner .hero-banner-text {
        font-size: 28px;
        top: 33%
    }
}

@media(max-width: 410px) {
    section.hero-banner .hero-banner-text {
        left: 15px
    }
}

@media(max-width: 667px) {
    section.hero-banner .hero-banner-text {
        border-radius: 10px;
        background-color: rgba(255,255,255,.87);
        padding: 20px 10px
    }
}

section.hero-banner .hero-banner-text .section-title-xl h2, section.hero-banner .hero-banner-text .section-title-xl span {
    font-size: 60px
}

@media(max-width: 1660px) {
    section.hero-banner .hero-banner-text .section-title-xl h2, section.hero-banner .hero-banner-text .section-title-xl span {
        font-size: 50px
    }
}

@media(max-width: 1440px) {
    section.hero-banner .hero-banner-text .section-title-xl h2, section.hero-banner .hero-banner-text .section-title-xl span {
        font-size: 40px
    }
}

@media(max-width: 1199px) {
    section.hero-banner .hero-banner-text .section-title-xl h2, section.hero-banner .hero-banner-text .section-title-xl span {
        font-size: 28px
    }
}

@media(max-width: 768px) {
    section.hero-banner .hero-banner-text .section-title-xl h2, section.hero-banner .hero-banner-text .section-title-xl span {
        font-size: 20px
    }
}

@media(max-width: 576px) {
    section.hero-banner .hero-banner-text .section-title-xl h2, section.hero-banner .hero-banner-text .section-title-xl span {
        font-size: 18px
    }
}

section.hero-banner .hero-banner-text .section-title-xl p {
    font-size: 28px
}

@media(max-width: 1550px) {
    section.hero-banner .hero-banner-text .section-title-xl p {
        font-size: 22px
    }
}

@media(max-width: 1366px) {
    section.hero-banner .hero-banner-text .section-title-xl p {
        font-size: 18px
    }
}

@media(max-width: 1199px) {
    section.hero-banner .hero-banner-text .section-title-xl p {
        font-size: 14px
    }
}

section.features-section .plan-offers {
    background-color: #fff;
    margin-top: -100px;
    border-radius: 10px;
    padding: 50px
}

@media(max-width: 991px) {
    section.features-section .plan-offers {
        margin-top: 0px
    }
}

@media(max-width: 991px) {
    section.features-section .plan-offers .feature-middle {
        margin-top: 50px !important
    }
}

@media(max-width: 576px) {
    section.features-section .plan-offers .feature-middle {
        margin-top: 20px !important;
        margin-bottom: 25px !important
    }
}

@media(max-width: 667px) {
    section.features-section .plan-offers {
        margin-top: -20px;
        padding: 20px 15px
    }
}

section.features-section .plan-offers p {
    color: #1c75bc;
    font-size: 22px;
    font-weight: 600;
    width: 80%;
    margin: 0 auto;
    line-height: 1.3
}

@media(max-width: 1366px) {
    section.features-section .plan-offers p {
        font-size: 18px
    }
}

section.deeper-discount-instructions {
    padding: 50px 0;
    margin: 0 auto
}

@media(min-width: 1550px) {
    section.deeper-discount-instructions {
        width: 80%
    }
}

section.deeper-discount-instructions .discount-step-bx {
    text-align: center;
    margin-top: 50px
}

    section.deeper-discount-instructions .discount-step-bx .step-img {
        height: 90px;
        width: 90px;
        background-color: #ececec;
        border-radius: 50%;
        margin: 0 auto;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center
    }

@media(max-width: 576px) {
    section.deeper-discount-instructions .discount-step-bx .step-img {
        height: 70px;
        width: 70px
    }
}

@media(max-width: 576px) {
    section.deeper-discount-instructions .discount-step-bx .step-img img {
        height: 30px;
        width: 30px
    }
}

section.deeper-discount-instructions .discount-step-bx .step-img::after {
    content: "-------------";
    color: #e7e7e7;
    position: absolute;
    right: -150px;
    top: 30%
}

@media(max-width: 991px) {
    section.deeper-discount-instructions .discount-step-bx .step-img::after {
        right: -100px
    }
}

@media(max-width: 576px) {
    section.deeper-discount-instructions .discount-step-bx .step-img::after {
        display: none
    }
}

section.deeper-discount-instructions .discount-step-bx h3 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 0;
    margin-top: 20px;
    color: #f26522
}

@media(max-width: 1199px) {
    section.deeper-discount-instructions .discount-step-bx h3 {
        font-size: 28px
    }
}

@media(max-width: 991px) {
    section.deeper-discount-instructions .discount-step-bx h3 {
        font-size: 22px
    }
}

section.deeper-discount-instructions .discount-step-bx p {
    font-size: 20px;
    font-weight: 700
}

@media(max-width: 1199px) {
    section.deeper-discount-instructions .discount-step-bx p {
        font-size: 16px
    }
}

@media(max-width: 991px) {
    section.deeper-discount-instructions .discount-step-bx p {
        font-size: 14px
    }
}

section.deeper-discount-instructions .discount-step-bx:last-child .step-img::after {
    display: none !important
}

section.deeper-discount-cards {
    padding: 50px 0
}

    section.deeper-discount-cards h2 {
        color: #1c75bc
    }

    section.deeper-discount-cards .pricing-card {
        position: relative;
        background-color: #f9f9f9;
        border: 1px solid #e7e7e7;
        border-radius: 20px;
        height: 100%;
        padding: 15px;
        overflow: hidden;
        transition: box-shadow .3s
    }

@media(max-width: 767px) {
    section.deeper-discount-cards .pricing-card {
        overflow: visible
    }
}

section.deeper-discount-cards .pricing-card:hover {
    border: 1px solid rgba(28,117,188,.4392156863);
    box-shadow: 3px 10px 16px -3px rgba(199,199,199,.4392156863)
}

section.deeper-discount-cards .pricing-card.with-sidebar {
    padding-left: 70px
}

@media(max-width: 1440px) {
    section.deeper-discount-cards .pricing-card.with-sidebar {
        padding-left: 60px
    }
}

@media(max-width: 767px) {
    section.deeper-discount-cards .pricing-card.with-sidebar {
        padding: 15px
    }
}

section.deeper-discount-cards .pricing-card.with-sidebar .plan-sidebar {
    position: absolute;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right;
    left: 25px;
    top: 10px;
    background-color: #1c75bc;
    display: grid;
    text-align: center;
    color: #fff;
    padding: 10px 5px;
    font-weight: 700;
    font-size: 20px;
    width: 55%;
    top: -35px
}

@media(max-width: 1770px) {
    section.deeper-discount-cards .pricing-card.with-sidebar .plan-sidebar {
        width: 60%
    }
}

@media(max-width: 1660px) {
    section.deeper-discount-cards .pricing-card.with-sidebar .plan-sidebar {
        width: 65%
    }
}

@media(max-width: 1440px) {
    section.deeper-discount-cards .pricing-card.with-sidebar .plan-sidebar {
        width: 75%;
        font-size: 16px;
        left: 22px
    }
}

@media(max-width: 1366px) {
    section.deeper-discount-cards .pricing-card.with-sidebar .plan-sidebar {
        width: 85%
    }
}

@media(max-width: 1199px) {
    section.deeper-discount-cards .pricing-card.with-sidebar .plan-sidebar {
        width: 68%
    }
}

@media(max-width: 991px) {
    section.deeper-discount-cards .pricing-card.with-sidebar .plan-sidebar {
        width: 80%
    }
}

@media(max-width: 800px) {
    section.deeper-discount-cards .pricing-card.with-sidebar .plan-sidebar {
        width: 100%
    }
}

@media(max-width: 767px) {
    section.deeper-discount-cards .pricing-card.with-sidebar .plan-sidebar {
        width: 100%;
        position: static;
        transform: rotate(0deg);
        left: 0px;
        border-radius: 10px;
        margin-bottom: 20px;
        margin-top: -30px
    }
}

@media(max-width: 576px) {
    section.deeper-discount-cards .pricing-card.with-sidebar .plan-sidebar {
        font-size: 14px
    }
}

section.deeper-discount-cards .pricing-card.with-sidebar .plan-sidebar .sidebar-short {
    font-size: 12px;
    font-weight: 600
}

section.deeper-discount-cards .pricing-card.with-sidebar .plan-sidebar.bg-primary {
    background-color: #f26522 !important
}

section.deeper-discount-cards .pricing-card .card-title {
    font-size: 50px;
    color: #f26522;
    font-weight: 800;
    margin-bottom: 10px
}

@media(max-width: 1560px) {
    section.deeper-discount-cards .pricing-card .card-title {
        font-size: 32px
    }
}

@media(max-width: 576px) {
    section.deeper-discount-cards .pricing-card .card-title {
        font-size: 26px
    }
}

section.deeper-discount-cards .pricing-card .card-title span {
    font-size: 26px;
    font-weight: 600;
    color: #1c75bc
}

@media(max-width: 1560px) {
    section.deeper-discount-cards .pricing-card .card-title span {
        font-size: 20px
    }
}

@media(max-width: 576px) {
    section.deeper-discount-cards .pricing-card .card-title span {
        font-size: 16px
    }
}

section.deeper-discount-cards .pricing-card .card-body a.discount-plan {
    background-color: #fff;
    border: 1px solid #e9e9e9;
    padding: 15px;
    text-decoration: none;
    color: #0e0e0d;
    border-radius: 10px;
    transition: box-shadow .5s;
    transition: background-color .5s ease
}

@media(max-width: 576px) {
    section.deeper-discount-cards .pricing-card .card-body a.discount-plan {
        padding: 10px
    }
}

section.deeper-discount-cards .pricing-card .card-body a.discount-plan .duration {
    font-size: 16px;
    color: #f26522;
    margin-bottom: 0;
    font-weight: 600;
    padding-bottom: 0
}

@media(max-width: 576px) {
    section.deeper-discount-cards .pricing-card .card-body a.discount-plan .duration {
        font-size: 14px
    }
}

section.deeper-discount-cards .pricing-card .card-body a.discount-plan .data {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0;
    padding-bottom: 0
}

@media(max-width: 1560px) {
    section.deeper-discount-cards .pricing-card .card-body a.discount-plan .data {
        font-size: 16px
    }
}

section.deeper-discount-cards .pricing-card .card-body a.discount-plan .data span {
    font-weight: 400;
    font-size: 12px;
    margin-bottom: 0;
    padding-bottom: 0
}

@media(max-width: 1440px) {
    section.deeper-discount-cards .pricing-card .card-body a.discount-plan .data span {
        display: block
    }
}

section.deeper-discount-cards .pricing-card .card-body a.discount-plan:hover {
    background-color: #1c75bc;
    cursor: pointer;
    border: 1px solid rgba(28,117,188,.4392156863);
    box-shadow: 3px 14px 16px -3px rgba(28,117,188,.4392156863)
}

    section.deeper-discount-cards .pricing-card .card-body a.discount-plan:hover p {
        color: #fff
    }

section.connecting-section {
    background-color: #f8f8f8
}

    section.connecting-section .connecting-body {
        padding: 30px 15px
    }

@media(max-width: 991px) {
    section.connecting-section .connecting-img {
        max-width: 400px;
        margin: 0 auto
    }
}

.social-media ul {
    display: flex;
    gap: 10px;
    padding-left: 0
}

@media(max-width: 667px) {
    .social-media ul {
        margin: 0 auto;
        margin-top: 30px
    }
}

.social-media ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    height: 55px;
    width: 55px;
    border-radius: 50%;
    border: 1px solid #f6f4f4;
    border: 1px solid #d2d2d2
}

@media(max-width: 576px) {
    .social-media ul li {
        height: 40px;
        width: 40px
    }
}

.social-media ul li:hover {
    background-color: #f26522
}

    .social-media ul li:hover svg, .social-media ul li:hover path, .social-media ul li:hover g {
        fill: #fff
    }

.social-media ul li a svg {
    min-height: 25px
}

@media(max-width: 576px) {
    .social-media ul li a svg {
        min-height: 15px
    }
}

@media(max-width: 991px) {
    .deeper-discount-instructions {
        padding: 30px 0 !important
    }
}
