/*
Style sheet
Created by Ayesha Bashir
*/

/*
***************************************************************
Screen Size max-1235px and min-1200px
***************************************************************
*/
@media (max-width: 1235px) {
    .icon-1 {
        margin-right: -45px;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        font-size: 1.12rem !important;
    }
}
/*
***************************************************************
Screen Size max-1200px and min-1024px
***************************************************************
*/
@media (max-width: 1200px) {
    .why-LeoSpot-banner-left p {
        padding: 20px 0px 20px 0;
    }
    section.union-section .text-section p {
        margin-right: 0;
    }
    section.union-section {
        margin: 200px 0 0px;
    }
    .step.step-3 {
        left: 230px;
        top: -30px;
    }
    .step.step-2 {
        right: 105px;
    }
    .step.step-1 {
        left: 0;
        bottom: 130px;
    }
    .description-div {
        height: 200px;
    }
    .button-section {
        display: block;
    }
    .button-section .footer-btn {
        margin-bottom: 10px;
    }
    .blog-page .stories-banner-right {
        width: 100%;
    }
    .stories-banner-left {
        padding: 0;
    }
    .blog-page .stories-banner-left p {
        padding: 20px 0;
    }
    .story-div {
        height: auto;
        margin-bottom: 70px;
    }
    h2.accordion-header {
        position: relative;
    }
    .accordion-button::after {
        right: 0;
        top: 15px;
    }
}
/*
***************************************************************
Screen Size max-1024px and min-991px
***************************************************************
*/
@media (max-width: 1024px) {
    .team-spend-section .section-title p {
        padding: 0 120px;
    }
    .team-speed-div {
        height: auto;
        margin: 50px 0;
    }
    .global-spend-content-div {
        margin: 80px 0 0;
    }
    .pink-img-bg .button-section {
        margin-right: 130px;
        margin-top: -60px;
    }
    .report-section {
        padding: 0 50px;
    }
    .count-div h3 {
        font-size: 72px !important;
    }
    .stories-count-div {
        padding: 0 20px;
    }
    section.clients-section {
        padding: 20px 0 0;
    }
    .subscription-detail ul {
        padding-right: 0;
    }
}
/*
***************************************************************
Screen Size  min-991px
***************************************************************
*/
@media (min-width: 991px) {
    div#navbarText {
        display: flex;
    }
}
/*
***************************************************************
Screen Size max-991px and min-767px
***************************************************************
*/

@media (max-width: 991px) {
    a.navbar-brand {
        position: absolute;
        top: 0;
        left: 0;
    }
    button.navbar-toggler {
        position: absolute;
        right: 0;
        top: 10px;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-collapse.collapse.in {
        margin-top: 35px;
    }
    .collapse:not(.show) {
        display: none !important;
    }
    .finance-item-divs {
        display: block;
        top: 270px;
        bottom: auto;
        z-index: 9999;
        height: auto;
        left: 0;
        right: 0;
    }
    .title {
        height: auto;
    }
    .finance-item {
        border-bottom: 1px solid #75C9D2;
        border-right: none;
        padding: 30px 120px;
    }
    .finance-item:last-child {
        border-bottom: none;
    }
    .finance-ares {
        height: 430px;
        text-align: center;
    }
    section.finance-section {
        height: 1200px;
    }
    section.union-section .text-section {
        padding-right: 0 !important;
    }
    h3 {
        font-size: 42px !important;
        line-height: 50px !important;
    }
    .launch-count p {
        font-size: 42px;
    }
    .framework-section {
        margin: 80px 0px;
    }
    .step {
        padding: 20px;
        width: 230px;
    }
    .step p {
        font-family: robotoblack;
        font-size: 12px;
    }
    .step.step-1 {
        left: -25px;
        bottom: 140px;
    }
    .step.step-2 {
        right: 70px;
    }
    .step.step-3 {
        left: 190px;
        top: -20px;
    }
    .description-div {
        height: 290px;
    }
    .business-benefit-div .account-btn.learn-more {
        padding: 16px 34px;
    }
    .product-2-feature-section .img-side {
        width: 100%;
        padding: 40px 0;
    }
    .product-2-feature-section .left-content, .product-2-feature-section .right-content {
        padding: 50px 0;
    }
    .team-spend-section .section-title p {
        padding: 0 50px;
    }
    .team-spend-section {
        padding: 0;
    }
    .feature-section {
        margin: 100px 0;
    }
    .left-content {
        padding: 20px 0;
    }
    .img-side {
        padding: 30px;
        text-align: center;
    }
    .pink-img-bg .button-section {
        margin-right: 0;
        margin-top: 0;
    }
    .feature-div {
        padding: 20px 0;
    }
    .count-div h3 {
        font-size: 62px !important;
    }
    .count-div p {
        padding: 0px 20px;
    }
    .why-us-img {
        margin-top: 0;
    }
    .pricing-page .banner-section h3 {
        line-height: 54px !important;
        margin: 0 0 30px;
        padding: 0px 50px;
    }
    .price-title p {
        margin: 15px 0;
    }
    .feature-btn-div .schedule-btn, .feature-btn-div .learn-btn {
        margin-right: 0;
    }
}

/*
***************************************************************
Screen Size max-768px
***************************************************************
*/
@media (max-width: 767px) {
    .footer-lg {
        display: none;
    }
    .footer-sm {
        display: block;
        margin: 0 auto 20px;
    }
    .footer-right img {
        width: 100%;
        padding: 0;
    }
    footer {
        text-align: center;
    }
    .footer-left {
        padding: 0;
    }
    .footer-left p {
        padding: 0 50px;
    }
    .navbar-text {
        float: left !important;
    }
    .button-section {
        display: block;
    }
    .footer-btn .schedule-btn {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .white-bg {
        margin: 0;
    }
    .price-div {
        margin-bottom: 30px;
    }
    .pink-bg {
        padding: 0;
    }
    .stories-banner-left {
        text-align: center;
    }
    .customer-stories-page .banner-caption {
        padding: 10px 0 0px;
    }
    section.banner-section {
        margin-bottom: 0;
    }
    .stories-banner-right {
        width: 100%;
    }
    .stories-banner-left {
        padding: 20px 0;
    }
    .stories-count-div {
        padding: 20px 80px;
    }
    .customer-stories-tab {
        margin-top: 0;
    }
    .owl-nav {
        display: none;
    }
    section.clients-section {
        padding: 20px 0 50px;
    }
    .why-LeoSpot-banner-left {
        padding: 30px 0;
        text-align: center;
    }
    .why-LeoSpot-banner-left p {
        padding: 20px;
    }
    .why-us {
        margin: 50px 0;
        text-align: center;
    }
    .why-us h2 {
        margin-right: 0;
        margin-bottom: 30px;
    }
    .why-us-img {
        margin-top: 30px;
    }
    .why-us-row.mid .why-us h2 {
        text-align: center;
        margin-left: 0;
    }
    .why-us-row.mid .learn-btn {
        float: none;
    }
    .search-bar {
        padding: 30px 0;
        position: relative;
    }
    .help-banner-content {
        padding: 80px 0;
    }
    .search-bar input {
        padding: 20px 15px;
        font-size: 14px;
        border-radius: 20px;
    }
    .search-bar button {
        right: 0;
    }
    .search-bar button img {
        width: 20px;
        margin: 20px;
    }
    section.help-section {
        padding: 0 50px;
    }
    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .help-question-div {
        margin: 50px 0;
        padding: 30px;
    }
    .writer-img {
        width: 65px;
        height: 65px;
    }
    .help-answer p, .writer-articles p {
        font-size: 22px;
    }
    .help-icon-div img {
        width: 115px;
        margin-top: 10px;
    }
    section.faq-section {
        margin: 0;
    }
    .accordion-item {
        margin: 50px 0;
        padding: 20px 30px 30px;
    }
    .business-benefit-div .account-btn.learn-more {
        padding: 16px 32px;
    }
    button.accordion-button {
        font-size: 16px !important;
    }
    .light-yellow-bg {
        padding: 50px 0;
    }
    .auther-div p span {
        font-size: 12px;
    }
    .banner-tags {
        padding: 10px 20px;
    }
    .blog-page .stories-banner-right {
        width: 100%;
    }
    h5 {
        font-size: 32px !important;
        line-height: 50px !important;
    }
    .black-bg {
        background: black;
        padding: 0;
    }
    section.union-section .text-section p {
        font-size: 28px;
    }
    section.union-section .text-section {
        padding-right: 0;
        text-align: center;
    }
    section.union-section .text-section h3 {
        line-height: 45px !important;
    }
    section.union-section .text-section p {
        font-size: 14px;
    }
    section.union-section {
        margin: 200px 0 0;
    }
    .finance-bg {
        padding: 100px 0 0;
    }
    .launch-count p {
        font-size: 14px;
    }
    .launch-count {
        padding: 10px 60px 30px;
    }
    .framework-section .section-title h3 {
        line-height: 35px !important;
    }
    .framework-section {
        margin: 80px 20px;
    }
    .framework-section .section-title p {
        font-size: 14px;
    }
    .mid-section-icon img {
        transform: rotate(90deg);
        display: block;
        margin: 20px auto;
        width: 150px;
    }
    .left-section-content p, .right-section-content p {
        font-size: 14px;
    }
    .section-title h3 {
        line-height: 40px !important;
    }
    .section-title p {
        font-size: 14px;
    }
    .step p {
        font-family: robotoblack;
        font-size: 10px;
    }
    .step {
        padding: 10px;
        width: 200px;
    }
    .step.step-1 {
        left: -17px;
        bottom: 147px;
    }
    .step.step-2 {
        right: 25px;
        bottom: 100px;
    }
    .step.step-3 {
        left: 190px;
        top: 15px;
    }
    .step p:first-child {
        margin-bottom: 5px;
    }
    section.epr-system-section p {
        padding: 0;
        font-size: 14px;
    }
    .epr-img img {
        width: 50%;
        float: left;
        padding: 10px;
    }
    .epr-img {
        margin: 50px;
    }
    .business-benefit-div {
        margin-bottom: 30px;
    }
    .button-div .account-btn {
        padding: 16px 25px;
    }
    .blog-page .stories-banner-left p {
        padding: 20px;
    }
    img.img-fluid.img-1 {
        right: 0;
        width: 240px;
    }
    img.img-fluid.img-2 {
        left: -110px;
    }
    .feature-section {
        margin: 50px 0;
    }
    .description-div {
        height: auto;
        margin-bottom: 40px;
    }
    .pink-img-bg .section-title {
        margin-bottom: 0;
        padding: 0 30px;
    }
    .pink-img-bg .section-title p {
        padding: 0 20px;
    }
    .pink-img-bg {
        padding: 50px 0;
    }
    .left-content {
        padding: 20px;
    }
    .row.reverse-column {
        flex-flow: column-reverse;
    }
    .pink-img-bg .button-section {
        text-align: center;
        margin-right: 0;
        margin-top: 0;
        display: block;
    }
    .report-section {
        padding: 0;
    }
    header.primary-header .dropdown-item {
        color: white;
    }
    .banner-illustration.platinum-div {
        margin: 50px 0;
    }
    .product-2-feature-section .left-content, .product-2-feature-section .right-content {
        padding: 20px;
    }
    .product-2-feature-section .img-side {
        width: 100%;
        padding: 30px 0;
        text-align: center;
    }
    .section-content.product-2-feature-section >.row:nth-child(even) {
        flex-direction: column-reverse;
    }
    .team-spend-section .section-title p {
        padding: 0;
    }
    .team-speed-div {
        padding: 30px;
        margin: 20px 0;
        text-align: center;
        height: auto;
    }
    .team-spend-section {
        padding: 0;
    }
    .global-spend-content-div {
        margin: 0 30px;
        text-align: center;
    }
    .global-spend-div h4 {
        font-size: 22px !important;
    }
    .global-spend-div {
        padding: 10px 0;
    }
    img.img-fluid.platinum-card {
        margin-top: -175px;
        margin-left: 0;
    }
    .pricing-page .banner-section {
        margin: 30px 0;
    }
}
/*
***************************************************************
Screen Size max-600px
***************************************************************
*/
@media (max-width: 600px) {
    .finance-item {
        padding: 30px;
    }
}
/*
***************************************************************
Screen Size max-500px
***************************************************************
*/
@media (max-width: 500px) {
    p {
        font-size: 12px;
    }
    .pricing-page .banner-section h3 {
        font-size: 28px !important;
        padding: 0 !important;
        line-height: 40px !important;
    }
    .price-title h4 {
        font-size: 21px !important;
    }
    h4 {
        font-size: 21px !important;
    }
    .price-btn {
        font-size: 12px;
    }
    .subscription-detail ul li {
        font-size: 10px;
    }
    .schedule-btn, .learn-btn {
        font-size: 12px;
    }
    .account-btn {
        font-size: 12px;
    }
    h3 {
        font-size: 28px !important;
        line-height: 50px !important;
    }
    .count-div h3 {
        font-size: 56px !important;
    }
    .stories-count-div strong {
        font-size: 14px;
    }
    .count-div p {
        font-size: 14px;
    }
    .count-heading {
        height: auto;
    }
    .filter-btn {
        font-size: 14px;
    }
    .story-btn .account-btn {
        padding: 16px 25px;
    }
    section.clients-section p {
        font-size: 12px;
    }
    h2 {
        font-size: 26px !important;
    }
    .help-question h6 {
        font-family: robotomedium;
        font-size: 14px;
    }
    .help-answer p, .writer-articles p {
        font-size: 14px;
    }
    .writer-img {
        width: 35px;
        height: 120px;
    }
    .title {
        height: auto;
    }
    .finance-item {
        border-bottom: 1px solid #75C9D2;
        border-right: none;
    }
    .finance-item:last-child {
        border-bottom: none;
    }
    .finance-ares {
        height: 430px;
    }
    section.finance-section {
        height: 1200px;
    }
    .step.step-1 {
        left: 140px;
        bottom: 0;
    }
    .step.step-2 {
        right: 185px;
        bottom: 265px;
    }
    .step.step-3 {
        left: 90px;
        top: 20px;
    }
    section.help-section {
        padding: 0;
    }
}
/*
***************************************************************
Screen Size max-390px
***************************************************************
*/
@media (max-width: 390px) {
    .step.step-2 {
        right: 160px;
        bottom: 265px;
    }
}
/*
***************************************************************
Screen Size max-375px
***************************************************************
*/
@media (max-width: 375px) {
    .step.step-1 {
        left: 120px;
        bottom: 0;
    }
    .step.step-2 {
        right: 150px;
        bottom: 265px;
    }
    .step.step-3 {
        left: 105px;
        top: 30px;
    }
}
/*
***************************************************************
Screen Size max-360px
***************************************************************
*/
@media (max-width: 360px) {
    .step.step-1 {
        left: 120px;
        bottom: 30px;
    }
    .step.step-2 {
        right: 135px;
    }
    .step.step-3 {
        left: 90px;
        top: 35px;
    }
}
/*
***************************************************************
Screen Size max-320px
***************************************************************
*/
@media (max-width: 320px) {
    .step {
        width: 150px;
    }
    .step.step-1 {
        left: 110px;
        bottom: 25px;
    }
    .step.step-2 {
        right: 145px;
        bottom: 265px;
    }
    .step.step-3 {
        left: 110px;
        top: 10px;
    }
}