/*
Theme Name: The Computer Tutor
Theme URI: https://www.mycomputertutor.biz
Author: Jason & Angie
Author URI: www.mycomputertutor.biz
Description: A custom theme made to pass core web vitals
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: mycomputertutor.biz
*/
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: regular;
  font-display: swap;
  src: local('Merriweather-Regular'),
       url(/wp-content/themes/thecomputertutor/fonts/Merriweather-Regular.woff2) format('woff2'),
}
@font-face {
  font-family: 'Merriweather';
  font-style: bold;
  font-display: swap;
  src: local('Merriweather-Bold'),
       url(/wp-content/themes/thecomputertutor/fonts/Merriweather-Bold.woff2) format('woff2'),
}
@font-face {
  font-family: 'Roboto-Regular';
  font-style: normal;
  font-weight: regular;
  font-display: swap;
  src: local('Roboto-Regular'),
       url(/wp-content/themes/thecomputertutor/fonts/Roboto-Regular.woff2) format('woff2'),
}
*,body,html {
	padding: 0px;
	margin: 0px;
}
h1,h2,h3,h4,h5,h6 {
	font-family: 'Merriweather', sans-serif;
}
div, p, a, li, span, strong, th, td, input, textarea {
	font-family: 'Roboto-Regular', sans-serif;
}
.container div, .container p, .container a, .container li, .container span, .container strong, .container th, .container td, .container input, .container textarea {
	font-size: 18px;
}
#logo a, #logo span {
	font-family: 'Merriweather', sans-serif;
	font-size: 20px !important;
}
body {
	background-color: #002133;
}
.mobile-hero {
	display: none !important;
}
#background-header-line1, #background-header-line2, #background-header-line3  {
	width: 100%;
	height: 3px;
	background-color: #fff;
	position: absolute;
	left: 0px;
	z-index: 0;
}
#background-header-line1 {
	top: 15px;
}
#background-header-line2 {
	top: 42.5px;
}

#background-header-line3 {
	top: 70px;
}
.container {
	max-width: 1200px;
	display: block;
	margin: 0 auto;
	position: relative;
	z-index: 99;
}
.container-100 {
	z-index: -1;
	position: relative;
	width: 100%;
}
header {
	padding: 20px 0px 20px 0px;
	overflow: hidden;
}
header a {
	color: #fff;
	text-decoration: none;
}
#logo {
	color: #fff;
    background-color: #002133;
    float: left;
    position: relative;
    top: 10px;
	width: 280px;
    padding-left: 10px;
}
#logo span {
	background-color: #fff;
	color: #002133;
	padding: 5px;
}
#desktop-nav {
	float: right;
	background-color: #002133;
    padding: 10px;
	position: relative;
    top: 2px;
}
#desktop-nav a {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 18px;
}
.full-sized-image {
	width: 100%;
	height: auto;
}

/* Footer */

#reviews {
	display:flex;
	flex-direction: row;
	height: 70vh;
	flex-direction: row;
    align-items: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
	overflow: hidden;
}

#review-image {
	background-image: url("/wp-content/uploads/2024/07/review-image.webp");
	width: 50%;
	background-position: center center;
	height: 100%;
	border-bottom: solid 2px #fff
}

#review-box {
	background-color: #fff;
	width: 50%;
	background-position: center center;
	height: 100%;
	border-bottom: solid 2px #fff;
	display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.star {
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .9em;
    margin-right: .9em;
    margin-bottom: 1.2em;
    border-right: .3em solid transparent;
    border-bottom: .7em solid #EBB203;
    border-left: .3em solid transparent;
    font-size: 30px;
}
.star:before, .star:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: .6em;
    left: -1em;
    border-right: 1em solid transparent;
    border-bottom: .7em solid #EBB203;
    border-left: 1em solid transparent;
    transform: rotate(-35deg);
}
.star:after {
    transform: rotate(35deg);
}
.outer-star-container {
	width: 75%;
	margin: 0 auto;
    display: block;
}
.outer-star-container p {
	color: #204A80;
	margin-top: 10px;
}

.badge-container {
	display: flex; 
	flex-direction: row;
}
.badge-col {
	width: 50%;
	display: flex;
    flex-direction: row;
    align-items: center;
	justify-content: center;
}
footer hr {
	margin-top: 30px;
	margin-bottom: 30px;
}
#bottom-footer {
	margin-top: 30px;
}
#very-bottom-footer {
	margin-bottom: 30px;
}
#very-bottom-footer p {
	color: #fff;
	text-align: center;
	font-size: 18px;
	line-height: 28px;
}
#very-bottom-footer a {
	color: #fff;
}
.badge-col p {
	color: #fff;
	margin-left: 40px;
	font-size: 24px;
}
.badge-col span {
	width: 222px;
	text-align: center;
	display: block;
}
.blue-background-breakup {
	background-color: #204A80;
	text-align: center;
	color: #fff;
	font-size: 36px;
	padding: 20px;
	width: calc(100% - 40px);
	text-transform: uppercase;
}

.white-background {
	background-color: #fff;
	padding-top: 165px;
	position: relative;
	padding-bottom: 20px;
}
.center-text {
	text-align: center;
}
#mobile-nav a {
	display: block;
    padding-top: 15px;
    padding-bottom: 15px;
	background-color: #fff;
	color: #002133;
	padding-left: 10px;
	border-bottom: solid 3px #002133;
	font-weight: bold;
	text-decoration: none;
}
#mobile-nav {
	top: 70px;
	position: absolute;
    left: 0px;
    width: 100%;
    z-index: 999999;
	display: none;
}
#mobile-menu-toggle {
	position: absolute;
    right: 10px;
    top: 19px;
    color: #fff;
    font-size: 35px;
	cursor: pointer;
	display: none;
	background-color: #002133;
	padding: 0px 5px 0px 5px;
}
.outer-star-container h3 {
	font-size: 22px;
	color: #204A80;
}

@media(max-width:1250px) {
	.page-hero {
		width: 90%;
    	display: block;
    	margin: 0 auto;
    	margin-bottom: -150px;
	}
	.white-background-full {
		padding-left:40px;
		padding-right:40px;
	}
}
@media(max-width:979px){
	#reviews {
		height: auto;
	}
	#desktop-nav {
		display: none;
	}
	.page-hero {
		margin-top: 30px !important;
	}
	#mobile-menu-toggle {
		display: block;
	}
	#background-header-line2 {
		display: none;
	}
	#review-image {
		display: none;
	}
	#review-box {
		width: 100%;
		padding-top: 50px;
        padding-bottom: 50px;
	}
	.star {
		font-size: 20px;
	}
	.badge-container {
		flex-direction: column;
	}
	.badge-col  {
		width: 100%;
	}
	.badge-col:nth-child(1) {
		margin-bottom: 40px;
	}
}
@media(max-width:768px){
	h2 {
		font-size:24px;
		padding-left:10px;
		padding-right:10px;
	}	
	#very-bottom-footer p {
		padding-left: 20px;
		padding-right: 20px;
	}
	#very-bottom-footer p:nth-of-type(1) {
		margin-bottom: 20px;
	}
}
@media(max-width:600px){
	.desktop-hero {
		display: none !important;
	}
	.mobile-hero {
		display: block !important;
	}
	.white-background {
    	padding-top: 145px;
	}
	.outer-star-container {
		width: calc(100% - 40px);
		padding-left: 20px;
		padding-right: 20px;
	}
	h2 {
		margin-top: 20px;
	}
	.blue-background-breakup {
		font-size: 24px;
	}
}
@media(max-width:500px){
	.page-hero {
        margin-top: 30px !important;
		margin-bottom: -125px !important;
    }
	h2 {
		margin-top: 0px;
	}
}