/* Global Colors */
:root {
    /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
    --background-color: #ffffff;

    /* Default Color - This is the default color used for the majority of the text content. */
    --default-color: #444444;

    /* Heading Color - This color is used for titles, headings and secondary elements. */
    --heading-color: #37517e;

    /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
    --accent-color: #47b2e4;

    /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
    --contrast-color: #ffffff;
}

/* Button and sitename settings */

.header .logo img {
    max-height: 65px;
    margin-right: 8px;
}

.btn-watch-video-sm {
    font-size: 16px;
    transition: 0.5s;
    font-size: 14px;
    color: white;
    font-weight: 600;
}

.btn-watch-video-sm i {
    color: var(--contrast-color);
    transition: 0.3s;
    margin-right: 8px;
}

.btn-watch-video-sm:hover {
    color: var(--accent-color);
}

.btn-watch-video-sm:hover i {
    color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.sitename span {
    color: #8CC63F;
}

.btn-getstarted,
.btn-getstarted:focus {
    color: var(--contrast-color);
    background: var(--accent-color);
    font-size: 14px;
    padding: 8px 25px;
    margin: 0 0 0 30px;
    border: 1px solid transparent;
    border-radius: 50px;
    transition: 0.3s;
}

.btn-getstarted:hover,
.btn-getstarted:focus:hover {
    color: var(--contrast-color);
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

/* Easy 1-2-3 Steps */
.faq-active .steps {
    display: block;
    visibility: visible;
    transition: 0.3s ease-in;
}

.steps {
    display: none;
    visibility: hidden;
}

/* Starter templates styles */

.starter {
    background: var(--heading-color);
    color: var(--contrast-color);
}

.starter h1 {
    color: var(--contrast-color);
    font-size: 44px;
    font-weight: 700;
    line-height: 56px;
}

/* Pricing plans custom css styles */

.pricing-tabs .nav-item .nav-link {
    color: white;
    padding: 10px 20px 10px 20px;
    background: var(--accent-color);
    transition: 0.4s;
}

.pricing-tabs .nav-item .nav-link.active {
    background: var(--heading-color);
    transition: 0.4s;
    color: white;
}

.tab-content>.tab-pane {
    transition: 0.2s all;
}


#individuals-tab {
    border-radius: 5px 0 0 5px;
}

#businesses-tab {
    border-radius: 0 5px 5px 0;
}

/* Pricing main divs */

.pricing-custom {
    background: linear-gradient(-45deg, #1391a5, #274685);
    color: #fff;
    padding: 50px 50px 30px 50px;
    border-radius: 4px 4px 0px 0px;
    color: #000000;
    background: #fff;
}

.pricing-wrapper {
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.pricing-details {
    background: rgba(71, 178, 228, 0.2);
    padding: 30px 15px 30px 15px;
    border-radius: 0px 0px 4px 4px;
    color: #000000;
}

.pricing-details hr {
    color: gray;
}

.pricing-details h6 {
    font-weight: 600;
    margin-bottom: 1.3rem;
    margin-top: 1.3rem;
}

.pricing-details .feature-list ul {
    list-style-type: disc;
    list-style-image: url('/assets/img/check.svg');
}

.pricing-details .feature-list ul li {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.pricing-custom h3 {
    color: var(--heading-color);
}

.pricing-custom .choose {
    font-size: 3rem;
    line-height: 0.5;
}

.pricing-custom .choose span {
    font-size: 1rem;
}

.pricing-custom .subtext {
    font-size: 0.9rem;
}

.pricing-custom .btn-white {
    background: var(--accent-color);
    color: white;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 10px 30px 10px 30px;
}

.pricing-custom .btn-white:hover {
    background: rgba(71, 178, 228, 0.8);
}

.pricing-custom.popular {
    background: #fff;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
    color: #000000;
    background: var(--heading-color);
    color: #fff;
    box-shadow: none;
}

.pricing-custom.popular .popularity {
    color: #b3b3b3;
}

.pricing-custom.popular h3 {
    color: #fff;
    background: none;
}

.pricing-custom.popular .btn-white {
    border: 2px solid #2d71a1;
}

/* Product css styles */
#signup-product {
    background: black;
    color: white;
    border: 2px solid black;
}

#signup-product:hover {
    background: rgb(29, 29, 29);
    border: 2px solid rgb(51, 51, 51);
}


.product-info .intro p {
    color: black;
    font-size: 1.2rem;
}

.product-info .intro .info-list ul {
    list-style-type: disc;
    list-style-image: url('/assets/img/check.svg');
}

.product-info .intro .info-list ul li {
    color: rgb(29, 28, 28);
}

/* Product features */

.product-features .nav .row {
    transition: 0s;
}

.product-features .nav .nav-link {
    text-align: left;
    color: white;
    border-radius: 0;
    background: var(--heading-color);
    font-size: 0.8rem;
    transition: 0.2s;
}

.product-features .nav .nav-link:hover {
    background: rgba(124, 195, 206, 0.2);
    color: black;
}

.product-features .nav .nav-link.active {
    background: var(--accent-color);
    color: black;
}

.product-features p {
    color: black;
}

.product-features .nav {
    margin-right: 2.5rem;
}

.product-features .nav-link i {
    margin-right: 10px;
    font-size: 1.2rem;
}

/* about css styles */
.about p {
    font-size: 1.2rem;
    color: black;
    margin-bottom: 2rem;
}

.about a {
    color: var(--heading-color)
}

.about a:hover {
    text-decoration: underline;
}

.about .about-icons {
    color: #37517E;
    font-size: 90px;
}

.bpn-row p {
    font-size: 18px !important;
}

/* customers */

.customers .container .grid div {
    text-align: center;
    margin-bottom: 1rem;
}

/* footer */

.footer-logo img {
    max-height: 100px;
}

.r150-policy {
    font-size: 12px;
}

.r150-policy a {
    font-size: 12px !important;
    text-transform: none !important;
}

/* dark div settings */
.dark-div {
  --background-color: color-mix(in srgb, var(--heading-color), transparent 95%);
}

.light-div {
    background-color: white !important;
}

/* easy123 new styles */

.easy-123 h3 {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    margin: 0 30px 0 0;
    letter-spacing: 3px;
    transition: 0.3s;
    cursor: pointer;
    margin-bottom: 10px;
  }

.easy-123 h4 {
    color: black;
}

.easy-123 .step {
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 10px;
}