/* =============================================================
   Smart Tech — typography scale
   -------------------------------------------------------------
   Merriweather for headings, Poppins for body copy.

   Loaded AFTER style.css and responsive.css, so it wins at equal
   specificity. Component rules that are more specific keep their
   own sizes on purpose (e.g. .section-title h2 stays 42px,
   .counter-item h3 stays 50px) — only the font family cascades
   into them. Widen a selector here if you want one of those to
   follow the scale instead.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,400&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
	--font-heading: "Merriweather", Georgia, "Times New Roman", serif;
	--font-body: "Poppins", sans-serif;
}

/* --- body copy ------------------------------------------------ */

body {
	font-family: var(--font-body);
	font-size: 16px;
}

p,
li,
td,
th,
dd,
dt,
blockquote,
label,
input,
select,
textarea {
	font-family: var(--font-body);
}

p {
	font-size: 16px;
}

/* --- headings ------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: var(--font-heading);
}

h1,
.h1 {
	font-size: 56px;
}

h2,
.h2 {
	font-size: 30px;
}

h3,
.h3 {
	font-size: 18px;
}

h4,
.h4 {
	font-size: 16px;
}

/* not in the spec — kept in proportion below h4 */
h5,
.h5 {
	font-size: 15px;
}

h6,
.h6 {
	font-size: 14px;
}

/* --- paragraphs inside card / box components ------------------ */

.feature-card p,
.feature-card-2 p,
.feature-card-3 p,
.feature-card-content p,
.feature-card-content-light p,
.blog-card p,
.blog-card-dark p,
.blog-card-content p,
.product-card p,
.product-card-details p,
.testimonial-flat-card p {
	font-size: 14px;
}

/* --- buttons -------------------------------------------------- */

.main-btn,
.btn,
button,
input[type="submit"],
input[type="button"] {
	font-family: var(--font-body);
}

.main-btn,
.btn,
input[type="submit"],
input[type="button"] {
	font-size: 15px;
}

/* --- footer --------------------------------------------------- */

footer h4,
.footer-address-text h4 {
	font-family: var(--font-heading);
	font-size: 16px;
}

footer a,
.footer-list li a,
.footer-address-text p a,
.footer-copyright-text a {
	font-family: var(--font-body);
	font-size: 14px;
}

/* --- small screens -------------------------------------------
   56px H1 does not fit a phone. Drop these two rules if you want
   the scale to stay fixed at every width.
   ------------------------------------------------------------- */

@media (max-width: 991px) {
	h1,
	.h1 {
		font-size: 42px;
	}
}

@media (max-width: 575px) {
	h1,
	.h1 {
		font-size: 32px;
	}

	h2,
	.h2 {
		font-size: 26px;
	}
}