/* ----------------------------------------------------------------
	Fonts

	Replace your Fonts as necessary
-----------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Bold.woff2') format('woff2'),
        url('../fonts/Lato-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
} */

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla-Regular.woff2') format('woff2'),
        url('../fonts/Karla-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

h1,
.hero-section h1,
.painpoints-section-title,
.painpoints-feature-title,
.painpoints-feature-text,
.section-title-trustedby,
.features-section .display-4,
.process-wrapper-ourprocess .process-heading-ourprocess,
.process-wrapper-ourprocess .card-title,
.process-wrapper-ourprocess .card-text,
.process-wrapper-ourprocess .btn-whatsapp,
.testimonial-section-testimonial .testimonial-title-testimonial,
.testimonial-section-testimonial .author-info-testimonial h5,
.pricing-section-pricelist .section-title-pricelist,
.pricing-section-pricelist .pricing-card-pricelist .card-title-pricelist,
.pricing-section-pricelist .start-from-pricelist,
.pricing-section-pricelist .per-project-pricelist,
.pricing-section-pricelist .pricing-card-pricelist .price-pricelist,
.about-section .section-title-about,
.cta-section .cta-card-content h1,
.main-footer .footer-heading-footer,
.footer-bottom-footer .contact-us a,
.business-card h2,
.v5-color-gradient,
.trusted-company-section .main-title-trusted-company,
.trusted-company-section .card-title-custom-trusted-company,
.trusted-company-section .collaboration-card-trusted-company .card-text,
.get-to-know .get-to-know-text-column .intro-text,
.why-us-section .why-us-legalities-card .card-header,
.why-us-section .why-us-feature-text h5,
.card .news-title,
.font-lato {
    font-family: 'Lato', sans-serif !important;
}

h2,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:not(.active),
.btn-gradient span,
.hero-section h2,
.btn-tanya-harga,
.painpoints-main-button,
.features-btn-icon,
.features-list p,
.features-item,
.btn-icon-link,
.testimonial-section-testimonial .author-info-testimonial span,
.testimonial-section-testimonial .testimonial-text-testimonial,
.pricing-section-pricelist .section-subtitle-pricelist,
.pricing-section-pricelist .pricing-card-pricelist .card-subtitle-pricelist,
.pricing-section-pricelist .btn-pilih-paket-pricelist,
.pricing-section-pricelist .feature-list-pricelist li,
.about-section .section-subtitle-about,
.about-section .section-text-about,
.scroll-to-top-footer .icon-circle-footer span,
.main-footer .tagline-footer,
.main-footer .footer-links-footer,
.footer-bottom-footer .copyright,
.primary-menu .menu-link,
.professional-feature-sub,
.business-card .subtitle,
.font-karla,
.get-to-know .get-to-know-content-text,
.why-us-section .why-us-list li,
.why-us-section .why-us-feature-text p,
.news-main-section .content-wrapper p,
.news-main-section .content-wrapper h1,
.news-main-section .content-wrapper h2,
.news-main-section .content-wrapper h3,
.news-main-section .content-wrapper h4,
.news-main-section .content-wrapper h5 {
    font-family: 'Karla', sans-serif !important;
}