/*
Theme Name: Learn to Speak Theme
Theme URI: https://catherinemai.me/
Version: 1.0
Description: CSS for Learn to Speak website.
Author: Catherine Mai
Author URI: https://catherinemai.me/
template: bb-theme
*/

:root {
	
	--blue: #2095C1;
	--red: #BE3545;
	--yellow: #F1D558;
	--green: #91AE51;
	--body-color: #E5E5E5;
	--black: #000000;
	
	
	--header: "Grandstander", sans-serif;
	--body: "Inter", sans-serif;
}

/* -----------------------------------------------------------
 * Global Website Styles
 * -----------------------------------------------------------*/
.over {
	z-index: 999;
	position: relative;
}

.under {
	z-index: -1;
	position: relative;
}

/* -----------------------------------------------------------
 * Headers and Font - Text
 * -----------------------------------------------------------*/
body {
	font-size: 18px;
	font-family: var(--body);
	line-height: 1.2;
	
	background-color: var(--body-color);
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing: 0;
	line-height: 1.2;
	font-family: var(--header);
	color: var(--black);
}

h1 {
	font-size: 45px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

a {
/* 	text-decoration: underline!important; */
}

a:hover {
/* 	text-decoration: none!important; */
}

.accent p,
.accent {
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 21px; /* 131.25% */
	letter-spacing: -0.16px;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	body {
		font-size: 16px;
	}

	h1, h2, h3, h4, h5, h6 {
		letter-spacing: 0;
		line-height: 1.1;
	}

	h1 {
		font-size: 36px;
	}

	h2 {
		font-size: 32px;
	}

	h3 {
		font-size: 21px;
	}

	h4 {
		font-size: 18px;
	}

	h5 {
		font-size: 14px;
	}

	.accent p {
		font-size: 16px;
	}
}

/* Buttons */
.fl-button,
.ninja-forms-form-wrap input[type="submit"] {
	border-radius: 100px!important;
	border: none!important;
	line-height: 18px;
    padding: 12px 24px;
}

.fl-button .fl-button-text,
.ninja-forms-form-wrap input[type="submit"] {
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 21px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.green .fl-button { background: var(--green)!important; }
.green .fl-button:hover { background: var(--blue)!important; }

.red    .fl-button { background: var(--red)!important; }
.red  .fl-button:hover { background: var(--yellow)!important; }

.blue   .fl-button { background: var(--blue)!important; }
.blue  .fl-button:hover { background: var(--red)!important; }

.yellow .fl-button { background: var(--yellow)!important; }
.yellow .fl-button:hover { background: var(--green)!important; }
.yellow .fl-button .fl-button-text {
	color: black!important;
}
.yellow .fl-button:hover .fl-button-text {
	color: white!important;
}

/* Contact Form button */
.contact-form .ninja-forms-form-wrap input[type="submit"] {
	background: var(--green)!important;
}

.contact-form .ninja-forms-form-wrap input[type="submit"]:hover {
	background: var(--blue)!important;
}

/* Text links */
#menu-header a:hover,
#menu-mobile-menu a:hover,
.link-hover-underline a:hover,
.link-hover-underline .fl-module-rich-text .fl-module-content .fl-rich-text a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* -----------------------------------------------------------
 * Footer
 * -----------------------------------------------------------*/
.footer-credits-row p {
	font-size: 12px;
}

/* -----------------------------------------------------------
 * Homepage
 * -----------------------------------------------------------*/
.homepage-about-box {
	height: fit-content;
}

.content-fit-height {
	height: fit-content;
}

/* Marquee */
  .marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 60px;
    overflow-x: hidden;
    background: #ffffff;
  }
 
  .marquee .track {
    position: absolute;
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 30s linear infinite;
    gap: 40px;
  }
 
  .marquee .logo {
    height: 60px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    /* Removes white/solid backgrounds from logo images so they sit
       cleanly on the page background. Works best on a light section. */
    mix-blend-mode: multiply;
    -webkit-user-drag: none;
    user-select: none;
  }
 
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
 
  /* Mobile: smaller logos, smaller gap */
  @media (max-width: 768px) {
    .marquee { height: 36px; }
    .marquee .track { gap: 20px; }
    .marquee .logo { height: 36px; }
  }

.homepage-icon img {
	width: 100px;
	max-width: 100%;
}

/* -----------------------------------------------------------
 * About
 * -----------------------------------------------------------*/
.education .pp-infobox-title-prefix {
	font-weight: 600;
	letter-spacing: 0;
	font-size: 18px;
	line-height: 1.1;
}

@media (max-width: 768px) {
	.education img {
		margin-bottom: 24px;
	}
}


/* -----------------------------------------------------------
 * Contact Form
 * -----------------------------------------------------------*/
.contact-form .nf-error-msg {
	margin-top: -24px;
	margin-bottom: 24px!important;
}
/* -----------------------------------------------------------
 * Services	
 * -----------------------------------------------------------*/
.white-links a {
	color: white;
	text-decoration: underline;
}

.white-links a:hover {
	text-decoration: none;
}

.links a {
	text-decoration: underline!important;	
}

.links a:hover {
	text-decoration: none!important;
}

/* Underline the text inside "linked" boxes by default */
.fl-module-box[role="link"] .links {
/* 	text-decoration: underline; */
	cursor: pointer;
}

/* Remove underline when hovering the whole clickable box */
.fl-module-box[role="link"]:hover .links {
	text-decoration: none;
}

.image-object-fit img {
	object-fit: contain;
}

/* -----------------------------------------------------------
 * Testimonials
 * -----------------------------------------------------------*/
.rotate-left {
	transform: rotate(-2.529deg);
}

.rotate-right {
	transform: rotate(3.416deg);
}

/* -----------------------------------------------------------
 * Blog Single
 * -----------------------------------------------------------*/
.blog-content img {
	margin: 24px 0;
	border-radius: 24px;
	width: 100%;
}

/* -----------------------------------------------------------
 * Blog Archive
 * -----------------------------------------------------------*/
.blog-grid img {
	border-radius: 24px;	
	margin-bottom: 24px;
}

.blog-grid img:hover,
.blog-grid img:hover {
	opacity: 0.6;
	transition: .3s ease;
}

.blog-grid img:hover h2 a {
	color: var(--blue);
}

.blog-grid .pp-post-author,
.blog-grid .pp-post-author a {
	color: 	var(--black)!important;
}

.blog-grid h2 a:hover {
	color: var(--blue);
}

/* -----------------------------------------------------------
 * CAREGIVER CLASSES & RESOURCES Archive
 * -----------------------------------------------------------*/
.resource-grid img {
	border-radius: 24px;	
	margin-bottom: 24px;
}

.resource-grid img:hover,
.resource-grid img:hover {
	opacity: 0.6;
	transition: .3s ease;
}

.resource-grid .description {
	margin-bottom: 24px;
}

.resource-grid .link a {
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 21px; /* 131.25% */
	letter-spacing: -0.16px;
	text-transform: uppercase;
	color: var(--black);
}

.resource-grid .link a:hover { 
	color: var(--blue);
}

.arrow-rotate i {
	transform: rotate(-45deg);
}

.arrow-rotate .fl-icon i:before {
	font-size: 45px!important;
}

@media (max-width: 768px) {
	.arrow-rotate .fl-icon i:before {
		font-size: 30px!important;
	}
}

.pdf-link-styling .fl-module-box {
	align-items: flex-end;
}    

.resource-link-box:hover {
	opacity: .8;
}

/* Overall Outline */
:where(.fl-builder-content, .fl-page) :is(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
    outline-style: none!important;
}