:root {
--brand_secondary: #419a9a; /* primary */
--brand_video_player_color: #EF8646; /* secondary */
--brand_heading: #000000; /* headings */
--brand_text: #000000; /* body */
--brand_even: #ffffff;
--brand_odd: #F4FCFC;
}
* { box-sizing: border-box !important; }
html { font-size: 16px; }
body { margin: 0; }
h1, .custom-section h1,
h2, .custom-section h2,
h3, .custom-section h3,
h4, .custom-section h4,
h5, .custom-section h5,
h6, .custom-section h6 {
font-family: 'Poppins', sans-serif;
}
button, .custom-section,
p, li, a, div,
.page-layout-v2 p,
.course-listing .course-listing-title,
.course-listing .course-listing-subtitle,
.navbar__menu__list button,
.navbar__menu__list>li>a,
.nav.navbar-nav>li .fedora-navbar-link {
font-family: 'Poppins', sans-serif;
}
.rounded-corners {
border-radius: 3px; /* This is for images - adjust the number of pixels to increase or decrease the curve */
}
/* logo size */
.logo-image {
width: 25%;
margin-bottom: 1%;
margin-top: 1%;
}
/* top Navigation */
@media screen and (max-width: 800px) {
.topnav {
display: none !important;
}
}
.navigation{
margin: 0 5%;
}
.topnav {
background-color: #fff;
width: 100%;
display: inline-block;
position: relative;
}
.topnav a {
float: right;
display: block;
text-align: center;
padding: 1% 1% 0% 1%;
text-decoration: none;
font-size: 15px;
font-weight: 200;
text-transform: uppercase;
}
.topnav a:hover {
text-decoration: underline;
color: #009999; /*brand green */
}
.orangeBut{
color: #f9423a !important; /*brand Orange */
margin-top: 3%;
}
.navBut{
margin-top: 3%;
}
.topnav .icon {
display: none;
}
.topnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-decoration: none;
}
.topnav ul .logo-image {
float: left;
}
.topnav input[type=text] {
float: right;
display: block;
color: #00857D; /*brand green */
text-align: center;
padding: 0;
text-decoration: none;
font-size: 15px;
font-weight: 200;
text-transform: uppercase;
margin-top: 4%;
}
/* Mobile menu */
.nav {
/*border-bottom: 1px solid #eaeaeb;*/
/* height: 70px;*/
line-height: 40px;
background-color: #fff !important;
display: none !important;
}
.menu {
margin: 0 ;
background-color: #fff !important;
position: relative;
z-index: 100;
text-transform: uppercase;
font-size: 14px;
font-weight: 200;
float: right;
margin-top: 22px;
}
.menu a {
clear: right;
max-width: 200px;
padding: 5px 5px 5px 0;
color: black;
font-size: 1.2em;
font-weight: 200;
text-decoration: none;
background-color: #fff !important;
}
.menu a:hover {
color: #009999; /*brand green */
background: #f0f0f0;
}
label {
/* margin: 0 40px 0 0;*/
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
position: relative;
z-index: 10000;
}
.mobile_logo {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-box-align: left;
-ms-flex-align: left;
align-items: left;
}
.mobile_logo img {
width: 20%;
height: 20%;
padding-top: 10px;
}
@media screen and (max-width: 800px) {
.nav {
display: block !important;
}
}
@media only screen and (max-width: 799px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
background-color: #fff !important;
}
.menu a {
display: block;
border-bottom: 1px solid #eaeaeb;
margin: 0;
background-color: #fff !important;
margin: 0 auto;
}
#toggle:checked + .menu {
display: contents;
}
}
/*
.navigation{
margin: 0 5%;
}
.topnav {
background-color: #fff;
width: 100%;
display: inline-block;
position: relative;
}
.topnav a {
float: right;
display: block;
color: #00857D; /*brand green */
/*text-align: center;
padding: 1% 1% 0% 1%;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
}
.topnav a:hover {
text-decoration: underline;
}
.orangeBut{
color: #f9423a !important; /*brand Orange */
/*margin-top: 3%;
}
.navBut{
margin-top: 3%;
}
.topnav .icon {
display: none;
}
.topnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-decoration: none;
}
.topnav ul .logo-image {
float: left;
}
.logo-image {
width: 25%;
margin-bottom: 1%;
margin-top: 1%;
}
@media screen and (max-width: 800px) {
.topnav {
display: none !important;
}
}
/* Mobile menu */
/*.nav {
/*border-bottom: 1px solid #eaeaeb;*/
/* height: 70px;*/
/* line-height: 40px;
background-color: #fff !important;
display: none !important;
}
.menu {
margin: 0 ;
background-color: #fff !important;
position: relative;
z-index: 100;
text-transform: uppercase;
font-size: 14px;
margin-top: 22px;
}
.menu a {
clear: right;
max-width: 200px;
padding: 5px 5px 5px 0;
color: #00857D; /*brand green */
/*font-size: 1.2em;
font-weight: normal;
text-decoration: none;
background-color: #fff !important;
}
.menu a:hover {
color: #0099ff;
background: #f0f0f0;
}
label {
/* margin: 0 40px 0 0;*/
/* font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
position: relative;
z-index: 10000;
}
.mobile_logo {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-box-align: left;
-ms-flex-align: left;
align-items: left;
}
.mobile_logo img {
width: 20%;
height: 20%;
padding-top: 10px;
}
@media screen and (max-width: 800px) {
.nav {
display: block !important;
}
}
@media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
background-color: #fff !important;
}
.menu a {
display: block;
border-bottom: 1px solid #eaeaeb;
margin: 0;
background-color: #fff !important;
margin: 0 auto;
}
#toggle:checked + .menu {
display: block;
}
}
*/
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; font-size: 67.5% !important; }
.custom-section button {
color: var(--brand_heading);
}
.primary-bg { background-color: var(--brand_secondary) !important; }
.primary-text { color: var(--brand_secondary) !important; }
.secondary-bg { background-color: var(--brand_video_player_color) !important; }
.secondary-text { color: var(--brand_video_player_color) !important; }
.custom-section {
background: white;
font-weight: 400;
line-height: 1.75;
font-size: 16px;
}
.course-mainbar td {
font-size: 16px;
padding: 5px 40px 5px 0;
}
.custom-section p,
.course-mainbar td {
margin: 0.75rem 0;
color: var(--brand_text);
}
.lecture-text-container p {
margin: 0.75rem 0;
color: var(--brand_text);
}
.lecture-text-container p:first-child + * {
margin-top: 0;
}
.custom-section h1,
.custom-section h2,
.custom-section h3,
.custom-section h4,
.custom-section h5,
.custom-section h6 {
margin: 3rem 0 1.38rem;
font-weight: 400;
line-height: 1.3;
color: var(--brand_heading);
}
.lecture-text-container h1,
.lecture-text-container h2,
.lecture-text-container h3,
.lecture-text-container h4,
.lecture-text-container h5,
.lecture-text-container h6 {
margin: 1.5rem 0 0.75rem;
font-weight: 600;
line-height: 1.3;
color: var(--brand_heading);
}
.custom-section h1,
.lecture-text-container h1 {
font-size: 48px;
}
.custom-section h1.large {
font-size: 64px;
font-weight: 200em;
}
.custom-section h2,
.lecture-text-container h2 {
font-size: 33px;
}
.custom-section h3,
.lecture-text-container h3 {
font-size: 27px;
}
.custom-section h4,
.lecture-text-container h4 {
font-size: 23px;
}
.custom-section h5,
.lecture-text-container h5 {
font-size: 19px;
color: var(--brand_secondary);
}
.custom-section h6,
.lecture-text-container h6 {
font-size: 17px;
text-transform: uppercase;
letter-spacing: 0.2rem;
color: black;
}
.custom-section h1 + h4,
.custom-section h2 + h3,
.custom-section h2 + h4,
.custom-section h4 + h2,
.custom-section h5 + h2,
.custom-section h6 + h1,
.custom-section h6 + h2,
.custom-section h6 + h3,
.custom-section h6 + h4 {
margin-top: 1.5rem;
}
.custom-section p + a .base-button {
margin-top: 1.75rem !important;
}
.custom-section h2 + hr {
margin-top: 0.25rem !important;
}
.custom-section h4 + h2 + p,
.custom-section h4 + h2 + ul,
.custom-section h4 + h2 + ol,
.custom-section h4 + h2 + div,
.custom-section h2 + h4 + p,
.custom-section h2 + h4 + ul,
.custom-section h2 + h4 + ol,
.custom-section h2 + h4 + div,
.custom-section h6 + h2 + p,
.custom-section h6 + h2 + ul,
.custom-section h6 + h2 + ol,
.custom-section h6 + h2 + div,
.custom-section h6 + h3 + h2 + p,
.custom-section h6 + h3 + h2 + ul,
.custom-section h6 + h3 + h2 + ol {
margin-top: 3.5rem;
}
.custom-section .custom-column i + p,
.custom-section h6 + h3 + h2 {
margin-top: 0;
}
.custom-section h1 + h4 {
margin-bottom: 3.5rem;
}
.custom-section li:not(:last-of-type) h4 + p,
.custom-section li:not(:last-of-type) h4 + p + p,
.custom-section li:not(:last-of-type) h4 + p + p + p {
margin-top: 0;
margin-bottom: 2.5rem !important;
}
.custom-section strong,
.custom-section b {
color: var(--brand_heading);
}
.custom-section small,
.custom-section .text_small {
font-size: 10px;
color: var(--brand_text);
}
.custom-section a:not(.base-button) {
color: var(--brand_video_player_color);
}
.custom-section a:hover {
text-decoration: underline;
}
.custom-section mark {
background-color: var(--brand_video_player_color);
display: inline-block;
padding: 0 0.75rem;
border-radius: 0.3rem;
color: var(--brand_text);
}
.custom-section ul {
list-style-position: inside;
list-style: disc;
padding: 0 0 0 3.5rem;
margin-bottom: 1.5rem;
color: var(--brand_text);
text-align: left;
}
.custom-section ul li,
.custom-section ol li {
margin: 1rem 0;
}
.custom-section ul li:first-of-type,
.custom-section ol li:first-of-type {
margin-top: 0;
}
.custom-section ul li:last-of-type,
.custom-section ol li:last-of-type {
margin-bottom: 0;
}
.custom-section ul.check,
.custom-section ul.cross {
list-style-type: none;
padding-left: 4rem;
}
.custom-section ul.check li::before {
content: "\f058";
font-family: "Font Awesome 5 Free";
margin-left: -2.8rem;
color: var(--brand_video_player_color);
list-style-position: outside;
position: absolute;
font-weight: 900;
}
.custom-section ul.check.primary li::before {
color: var(--brand_secondary);
}
.custom-section ul.cross li::before {
content: "\f057";
font-family: "Font Awesome 5 Free";
margin-left: -2.8rem;
color: var(--brand_video_player_color);
list-style-position: outside;
position: absolute;
font-weight: 900;
}
.custom-section ol {
list-style-position: outside;
padding: 0 0 0 0.9rem;
margin-bottom: 1.5rem;
color: var(--brand_text);
list-style: none;
counter-reset: steps;
text-align: left;
}
.custom-section ol li {
counter-increment: steps;
padding-left: 35px;
}
.custom-section ol li::before {
content: counter(steps);
margin-right: 0.7rem;
background: var(--brand_video_player_color);
width: 1.75em;
height: 1.75em;
border-radius: 100%;
display: inline-grid;
place-items: center;
padding: 2px 0.5px 0;
line-height: 1.2em;
position: absolute;
margin-left: -35px;
margin-top: 1px;
font-weight: 600;
font-size: 1.25rem;
color: white;
}
.custom-section .base-button {
transition: 0.2s;
font-size: 24px;
}
.custom-section .base-button:hover {
text-decoration: none;
transform: scale(1.1) !important;
}
.custom-section .page {
padding: 6%;
background: white;
}
.custom-section .small-page {
padding: 3%;
background: white;
border-radius: 3px;
}
.custom-section .bordered {
border: 1px solid #eeeeee;
}
.custom-section .custom-row:not(:first-of-type).page {
margin-top: 2.6rem
}
.custom-section .custom-row:not(:last-of-type).page {
margin-bottom: 2.6rem
}
.custom-section .shadow {
box-shadow: 0px 0px 15px rgb(0 0 0 / 5%);
}
.custom-section hr {
width: 100px;
background-color: var(--brand_secondary);
border: none;
height: 3px;
margin: 1.5rem 0 !important;
}
.center hr {
margin: 1.5rem auto !important;
}
.hamburger:before, .hamburger:after, .hamburger span {
background: var(--brand_text);
}
.custom-section.odd.overlap-primary-bottom { background: linear-gradient(to bottom, var(--brand_odd) 80%, var(--brand_secondary) 80%) !important; }
.custom-section.odd.overlap-secondary-bottom { background: linear-gradient(to bottom, var(--brand_odd) 80%, var(--brand_video_player_color) 80%) !important; }
.custom-section.even.overlap-primary-bottom { background: linear-gradient(to bottom, var(--brand_even) 80%, var(--brand_secondary) 80%) !important; }
.custom-section.even.overlap-secondary-bottom { background: linear-gradient(to bottom, var(--brand_even) 80%, var(--brand_video_player_color) 80%) !important; }
.custom-section.odd.overlap-even-bottom { background: linear-gradient(to bottom, var(--brand_odd) 80%, var(--brand_even) 80%) !important; }
.custom-section.even.overlap-odd-bottom { background: linear-gradient(to bottom, var(--brand_even) 80%, var(--brand_odd) 80%) !important; }
.custom-section.secondary-bg.overlap-even-bottom { background: linear-gradient(to bottom, var(--brand_video_player_color) 80%, var(--brand_even) 80%) !important; }
.custom-section.secondary-bg.overlap-odd-bottom { background: linear-gradient(to bottom, var(--brand_video_player_color) 80%, var(--brand_odd) 80%) !important; }
.custom-section.primary-bg.overlap-even-bottom { background: linear-gradient(to bottom, var(--brand_secondary) 80%, var(--brand_even) 80%) !important; }
.custom-section.primary-bg.overlap-odd-bottom { background: linear-gradient(to bottom, var(--brand_secondary) 80%, var(--brand_odd) 80%) !important; }
.custom-section.odd.overlap-primary-top { background: linear-gradient(to bottom, var(--brand_odd) 20%, var(--brand_secondary) 10%) !important; }
.custom-section.odd.overlap-secondary-top { background: linear-gradient(to bottom, var(--brand_odd) 20%, var(--brand_video_player_color) 20%) !important; }
.custom-section.even.overlap-primary-top { background: linear-gradient(to bottom, var(--brand_even) 20%, var(--brand_secondary) 20%) !important; }
.custom-section.even.overlap-secondary-top { background: linear-gradient(to bottom, var(--brand_even) 20%, var(--brand_video_player_color) 20%) !important; }
.custom-section.odd.overlap-even-top { background: linear-gradient(to bottom, var(--brand_odd) 20%, var(--brand_even) 20%) !important; }
.custom-section.even.overlap-odd-top { background: linear-gradient(to bottom, var(--brand_even) 20%, var(--brand_odd) 20%) !important; }
.custom-section.secondary-bg.overlap-even-top { background: linear-gradient(to bottom, var(--brand_video_player_color) 20%, var(--brand_even) 20%) !important; }
.custom-section.secondary-bg.overlap-odd-top { background: linear-gradient(to bottom, var(--brand_video_player_color) 20%, var(--brand_odd) 20%) !important; }
.custom-section.primary-bg.overlap-even-top { background: linear-gradient(to bottom, var(--brand_secondary) 20%, var(--brand_even) 20%) !important; }
.custom-section.primary-bg.overlap-odd-top { background: linear-gradient(to bottom, var(--brand_secondary) 20%, var(--brand_odd) 20%) !important; }
.custom-section.odd.overlap-primary-mid { background: linear-gradient(to bottom, var(--brand_odd) 50%, var(--brand_secondary) 50%) !important; }
.custom-section.odd.overlap-secondary-mid { background: linear-gradient(to bottom, var(--brand_odd) 50%, var(--brand_video_player_color) 50%) !important; }
.custom-section.even.overlap-primary-mid { background: linear-gradient(to bottom, var(--brand_even) 50%, var(--brand_secondary) 50%) !important; }
.custom-section.even.overlap-secondary-mid { background: linear-gradient(to bottom, var(--brand_even) 50%, var(--brand_video_player_color) 50%) !important; }
.custom-section.odd.overlap-even-mid { background: linear-gradient(to bottom, var(--brand_odd) 50%, var(--brand_even) 50%) !important; }
.custom-section.even.overlap-odd-top { background: linear-gradient(to bottom, var(--brand_even) 50%, var(--brand_odd) 50%) !important; }
.custom-section.secondary-bg.overlap-even-mid { background: linear-gradient(to bottom, var(--brand_video_player_color) 50%, var(--brand_even) 50%) !important; }
.custom-section.secondary-bg.overlap-odd-mid { background: linear-gradient(to bottom, var(--brand_video_player_color) 50%, var(--brand_odd) 50%) !important; }
.custom-section.primary-bg.overlap-even-mid { background: linear-gradient(to bottom, var(--brand_secondary) 50%, var(--brand_even) 50%) !important; }
.custom-section.primary-bg.overlap-odd-mid { background: linear-gradient(to bottom, var(--brand_secondary) 50%, var(--brand_odd) 50%) !important; }
.custom-section .light-text h1, .custom-section.light-text h1,
.custom-section .light-text h2, .custom-section.light-text h2,
.custom-section .light-text h3, .custom-section.light-text h3,
.custom-section .light-text h4, .custom-section.light-text h4,
.custom-section .light-text p, .custom-section.light-text p,
.custom-section .light-text li, .custom-section.light-text li,
.custom-section .light-text strong, .custom-section.light-text strong,
.custom-section .light-text b, .custom-section.light-text b,
.custom-section .light-text, .custom-section.light-text {
color: white !important;
}
.custom-section .light-text h5, .custom-section.light-text h5 {
color: var(--brand_video_player_color);
}
.custom-section .light-text i {
color: var(--brand_video_player_color);
}
.custom-section a,
.custom-section.primary a {
color: var(--brand_video_player_color);
}
.custom-section h1.primary,
.custom-section h2.primary,
.custom-section h3.primary,
.custom-section h4.primary,
.custom-section h5.primary,
.custom-section h6.primary {
color: var(--brand_secondary);
}
.custom-section h1.secondary,
.custom-section h2.secondary,
.custom-section h3.secondary,
.custom-section h4.secondary,
.custom-section h5.secondary,
.custom-section h6.secondary {
color: var(--brand_video_player_color);
}
.primary.light-text h6 {
color: white !important;
}
.custom-section.secondary h6:not(.secondary),
.custom-section.secondary a {
color: var(--brand_secondary);
}
.custom-section.center,
.custom-section .center {
text-align: center;
}
.custom-section .left {
text-align: left;
}
.custom-section .right {
text-align: right;
}
.custom-section .opacity-10 { opacity: 0.1; }
.custom-section .opacity-20 { opacity: 0.2; }
.custom-section .opacity-30 { opacity: 0.3; }
.custom-section .opacity-40 { opacity: 0.4; }
.custom-section .opacity-50 { opacity: 0.5; }
.custom-section .opacity-60 { opacity: 0.6; }
.custom-section .opacity-70 { opacity: 0.7; }
.custom-section .opacity-80 { opacity: 0.8; }
.custom-section .opacity-90 { opacity: 0.9; }
.custom-section .close-top,
.custom-section.close-top .custom-overlay {
margin-top: 0;
padding-top: 0;
}
.custom-section .close-bottom,
.custom-section.close-bottom .custom-overlay {
margin-bottom: 0;
padding-bottom: 0;
}
.custom-section .pad-0-bottom { padding-bottom: 0 !important; }
.custom-section .pad-10-bottom { padding-bottom: 10px !important; }
.custom-section .pad-20-bottom { padding-bottom: 20px !important; }
.custom-section .pad-30-bottom { padding-bottom: 30px !important; }
.custom-section .pad-40-bottom { padding-bottom: 40px !important; }
.custom-section .pad-50-bottom { padding-bottom: 50px !important; }
.custom-section .pad-60-bottom { padding-bottom: 60px !important; }
.custom-section .pad-70-bottom { padding-bottom: 70px !important; }
.custom-section .pad-80-bottom { padding-bottom: 80px !important; }
.custom-section .pad-90-bottom { padding-bottom: 90px !important; }
.custom-section .pad-100-bottom { padding-bottom: 100px !important; }
.custom-section .pad-110-bottom { padding-bottom: 110px !important; }
.custom-section .pad-120-bottom { padding-bottom: 120px !important; }
.custom-section .pad-130-bottom { padding-bottom: 130px !important; }
.custom-section .pad-140-bottom { padding-bottom: 140px !important; }
.custom-section .pad-150-bottom { padding-bottom: 150px !important; }
.custom-section .pad-160-bottom { padding-bottom: 160px !important; }
.custom-section .pad-170-bottom { padding-bottom: 170px !important; }
.custom-section .pad-180-bottom { padding-bottom: 180px !important; }
.custom-section .pad-190-bottom { padding-bottom: 190px !important; }
.custom-section .pad-200-bottom { padding-bottom: 200px !important; }
.custom-section .pad-0-top { padding-top: 0 !important; }
.custom-section .pad-10-top { padding-top: 10px !important; }
.custom-section .pad-20-top { padding-top: 20px !important; }
.custom-section .pad-30-top { padding-top: 30px !important; }
.custom-section .pad-40-top { padding-top: 40px !important; }
.custom-section .pad-50-top { padding-top: 50px !important; }
.custom-section .pad-60-top { padding-top: 60px !important; }
.custom-section .pad-70-top { padding-top: 70px !important; }
.custom-section .pad-80-top { padding-top: 80px !important; }
.custom-section .pad-90-top { padding-top: 90px !important; }
.custom-section .pad-100-top { padding-top: 100px !important; }
.custom-section .pad-110-top { padding-top: 110px !important; }
.custom-section .pad-120-top { padding-top: 120px !important; }
.custom-section .pad-130-top { padding-top: 130px !important; }
.custom-section .pad-140-top { padding-top: 140px !important; }
.custom-section .pad-150-top { padding-top: 150px !important; }
.custom-section .pad-160-top { padding-top: 160px !important; }
.custom-section .pad-170-top { padding-top: 170px !important; }
.custom-section .pad-180-top { padding-top: 180px !important; }
.custom-section .pad-190-top { padding-top: 190px !important; }
.custom-section .pad-200-top { padding-top: 200px !important; }
.custom-section.near-top .custom-overlay {
padding-top: 1.5rem;
}
.custom-section.near-bottom .custom-overlay {
padding-bottom: 1.5rem;
}
.custom-section.near-bottom .custom-row {
margin-bottom: -1.5rem;
}
.custom-overlay.light {
background: rgba(255,255,255,0.7)
}
.custom-section .dark-10 { background: rgba(0,0,0,0.1) }
.custom-section .dark-20 { background: rgba(0,0,0,0.2) }
.custom-section .dark-30 { background: rgba(0,0,0,0.3) }
.custom-section .dark-40 { background: rgba(0,0,0,0.4) }
.custom-section .dark-50 { background: rgba(0,0,0,0.5) }
.custom-section .dark-60 { background: rgba(0,0,0,0.6) }
.custom-section .dark-70 { background: rgba(0,0,0,0.7) }
.custom-section .dark-80 { background: rgba(0,0,0,0.8) }
.custom-section .dark-90 { background: rgba(0,0,0,0.9) }
.custom-section .light-10 { background: rgba(255,255,255,0.1) }
.custom-section .light-20 { background: rgba(255,255,255,0.2) }
.custom-section .light-30 { background: rgba(255,255,255,0.3) }
.custom-section .light-40 { background: rgba(255,255,255,0.4) }
.custom-section .light-50 { background: rgba(255,255,255,0.5) }
.custom-section .light-60 { background: rgba(255,255,255,0.6) }
.custom-section .light-70 { background: rgba(255,255,255,0.7) }
.custom-section .light-80 { background: rgba(255,255,255,0.8) }
.custom-section .light-90 { background: rgba(255,255,255,0.9) }
.custom-section .bottom-border-primary {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: var(--brand_secondary);
}
.custom-section .top-border-primary {
border-top-width: 5px;
border-top-style: solid;
border-top-color: var(--brand_secondary);
}
.custom-section .top-border-secondary {
border-top-width: 5px;
border-top-style: solid;
border-top-color: var(--brand_video_player_color);
}
.custom-section .bottom-border-secondary {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: var(--brand_video_player_color);
}
.custom-section .custom-accordion .accordion.left-border-primary,
.custom-section .left-border-primary {
border-left-width: 5px;
border-left-style: solid;
border-left-color: var(--brand_secondary);
}
.custom-section .custom-accordion .accordion.left-border-secondary,
.custom-section .left-border-secondary {
border-left-width: 5px;
border-left-style: solid;
border-left-color: var(--brand_video_player_color);
}
.custom-section .wrap {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
border-radius: 3px;
}
.custom-section .border-1 { border: 1px solid white; }
.custom-section .border-2 { border: 2px solid white; }
.custom-section .border-3 { border: 3px solid white; }
.custom-section .border-4 { border: 4px solid white; }
.custom-section .border-5 { border: 5px solid white; }
.custom-section .border-10 { border: 10px solid white; }
.custom-section .border-15 { border: 15px solid white; }
.custom-section .border-20 { border: 20px solid white; }
.custom-section .border-1-secondary { border: 1px solid var(--brand_video_player_color); }
.custom-section .border-2-secondary { border: 2px solid var(--brand_video_player_color); }
.custom-section .border-3-secondary { border: 3px solid var(--brand_video_player_color); }
.custom-section .border-4-secondary { border: 4px solid var(--brand_video_player_color); }
.custom-section .border-5-secondary { border: 5px solid var(--brand_video_player_color); }
.custom-section .border-10-secondary { border: 10px solid var(--brand_video_player_color); }
.custom-section .border-15-secondary { border: 15px solid var(--brand_video_player_color); }
.custom-section .border-20-secondary { border: 20px solid var(--brand_video_player_color); }
.custom-section .border-secondary { border-color: var(--brand_video_player_color); }
.custom-section .block-shadow-secondary { box-shadow: -15px -15px 0 var(--brand_video_player_color), 15px 15px 0 var(--brand_secondary); }
.custom-section .image-50 { padding-top: 50%; }
.custom-section .image-60 { padding-top: 60%; }
.custom-section .image-70 { padding-top: 70%; }
.custom-section .image-80 { padding-top: 80%; }
.custom-section .image-90 { padding-top: 90%; }
.custom-section .image-100 { padding-top: 100%; }
.custom-section .image-110 { padding-top: 110%; }
.custom-section .image-120 { padding-top: 120%; }
.custom-section .image-130 { padding-top: 130%; }
.custom-section .image-140 { padding-top: 140%; }
.custom-section .image-150 { padding-top: 150%; }
.custom-section .image-160 { padding-top: 160%; }
.custom-section .image-170 { padding-top: 170%; }
.custom-section .image-180 { padding-top: 180%; }
.custom-section .image-190 { padding-top: 190%; }
.custom-section .image-200 { padding-top: 200%; }
.custom-section .image-fix {
padding-top: 0;
position: -webkit-sticky; /* Safari */
position: sticky;
top: calc(80px + 15vh);
height: calc(70vh - 80px);
}
.custom-section .contain {
background-size: contain;
}
.custom-section .cover {
background-size: cover;
background-position: center;
}
.custom-section .image-thumb {
width: 150px !important;
height: 150px !important;
display: inline-block;
}
.custom-section .sticky {
height: inherit;
position: -webkit-sticky; /* Safari */
position: sticky;
top: calc(80px + 1vh);
}
.custom-section .vertical-top {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.custom-section .vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
}
.custom-section .circle {
border-radius: 100%;
box-sizing: content-box;
}
.custom-section .rounded {
border-radius: 3px;
}
.custom-section .border {
border: 1px solid #eaeaea;
}
.custom-section .secondary-corners {
background-image: linear-gradient(125deg, var(--brand_secondary) 10%, transparent 10.1%, transparent 85%, var(--brand_video_player_color) 85.1%);
}
.custom-section i.primary {
color: var(--brand_secondary);
}
.custom-section i.secondary {
color: var(--brand_video_player_color);
}
.primary.custom-row,
.primary.card {
background-color: var(--brand_secondary);
}
.custom-section .strike {
text-decoration: line-through;
color: #bbb !important;
}
.custom-section#pricing hr {
height: 1px;
max-width: none !important;
width: 100%;
background-color: #ddd;
margin: 0 !important;
}
.custom-section#pricing ul li {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.custom-section#pricing hr {
width: 102%;
margin-left: -1% !important;
}
.custom-section#pricing .page {
padding: 4%;
}
.custom-section#pricing .large {
font-size: 40px;
color: var(--brand_secondary);
}
.custom-section ul.hr li:after {
content: '';
width: calc(100% + 4rem);
height: 1px;
background-color: #ccc;
display: block;
margin: 1rem 0 1rem -4rem;
}
.custom-section#pricing .base-button {
margin: 2.5rem auto 1.5rem;
}
.custom-section#pricing img {
max-width: 170px;
}
#pricing h3 + p {
display: flex;
align-items: center;
justify-content: center;
}
#pricing h3 + p > * {
margin: 0 5px;
}
.bg-top {
background-position: center top !important;
}
.bg-bottom {
background-position: center bottom !important;
}
/* MOBILE STYLES */
@media (max-width: 768px) {
.no-mob {
display: none !important;
}
.mob-thumb {
max-width: 150px;
margin: 0 auto;
}
.reverse-col-mob .custom-column:first-of-type {
order: 2;
}
.reverse-col-mob .custom-column:last-of-type {
order: 1;
}
.mob-max {
max-width: 100%;
width: 100%;
margin: 0 auto;
}
.custom-section,
.custom-section .custom-accordion .accordion {
font-size: 17px !important;
}
.custom-section h1 {
font-size: 30px !important;
}
.custom-section h1.large {
font-size: 60px !important;
}
.custom-section h2 {
font-size: 27px !important;
}
.custom-section h3 {
font-size: 24px !important;
}
.custom-section h4 {
font-size: 21px !important;
}
.custom-section h5 {
font-size: 19px !important;
}
.custom-section h6 {
font-size: 17px !important;
letter-spacing: 0.19rem !important;
}
.custom-section small,
.text_small {
font-size: 7.84px !important;
}
.custom-section mark {
padding: 0 0.75rem;
}
.custom-section ul {
padding: 0 0 0 3.1rem;
margin-bottom: 1.333rem;
}
.custom-section ol {
padding: 0 0 0 0.8rem;
margin-bottom: 1.333rem;
}
.custom-section ol li {
padding-left: 2.3rem;
}
.custom-section ol li::before {
margin-right: 0.53rem;
width: 1.4em;
height: 1.4em;
line-height: 1rem;
margin-left: -2.6rem;
margin-top: 0.533rem;
font-size: 1.4rem;
}
.custom-section ol li::before {
color: var(--brand_even);
}
.custom-section .custom-overlay {
padding: 66px 20px;
}
.custom-section .pad-10-bottom { padding-bottom: calc(10px * 0.75) !important; }
.custom-section .pad-20-bottom { padding-bottom: calc(20px * 0.75) !important; }
.custom-section .pad-30-bottom { padding-bottom: calc(30px * 0.75) !important; }
.custom-section .pad-40-bottom { padding-bottom: calc(40px * 0.75) !important; }
.custom-section .pad-50-bottom { padding-bottom: calc(50px * 0.75) !important; }
.custom-section .pad-60-bottom { padding-bottom: calc(60px * 0.75) !important; }
.custom-section .pad-70-bottom { padding-bottom: calc(70px * 0.75) !important; }
.custom-section .pad-80-bottom { padding-bottom: calc(80px * 0.75) !important; }
.custom-section .pad-90-bottom { padding-bottom: calc(90px * 0.75) !important; }
.custom-section .pad-100-bottom { padding-bottom: calc(100px * 0.75) !important; }
.custom-section .pad-10-top { padding-top: calc(10px * 0.75) !important; }
.custom-section .pad-20-top { padding-top: calc(20px * 0.75) !important; }
.custom-section .pad-30-top { padding-top: calc(30px * 0.75) !important; }
.custom-section .pad-40-top { padding-top: calc(40px * 0.75) !important; }
.custom-section .pad-50-top { padding-top: calc(50px * 0.75) !important; }
.custom-section .pad-60-top { padding-top: calc(60px * 0.75) !important; }
.custom-section .pad-70-top { padding-top: calc(70px * 0.75) !important; }
.custom-section .pad-80-top { padding-top: calc(80px * 0.75) !important; }
.custom-section .pad-90-top { padding-top: calc(90px * 0.75) !important; }
.custom-section .pad-100-top { padding-top: calc(100px * 0.75) !important; }
.border-5 { border: calc(5px * 0.75) solid white; }
.border-10 { border: calc(10px * 0.75) solid white; }
.border-15 { border: calc(15px * 0.75) solid white; }
.border-20 { border: calc(20px * 0.75) solid white; }
.image-70 { padding-top: 60% }
.image-80 { padding-top: 60% }
.image-90 { padding-top: 60%; }
.image-100 { padding-top: 60%; }
.custom-section .base-button {
font-size: 20px;
}
.custom-section .custom-4.card,
.custom-section .custom-6.card {
width: 100%;
margin: 0.75rem 0;
}
}
@media (max-width: 450px) {
.custom-section,
.custom-section .custom-accordion .accordion {
font-size: 16px;
}
.custom-section h1 {
font-size: 28px !important;
}
.custom-section h1.large {
font-size: 50px !important;
}
.custom-section h2 {
font-size: 25px !important;
}
.custom-section h3 {
font-size: 22px !important;
}
.custom-section h4 {
font-size: 20px !important;
}
.custom-section h5 {
font-size: 18px !important;
}
.custom-section h6 {
font-size: 16px !important;
letter-spacing: 0.18rem !important;
}
.custom-section mark {
padding: 0 0.75rem;
}
.custom-section ul {
padding: 0 0 0 3.1rem;
margin-bottom: 1.333rem;
}
.custom-section ol {
padding: 0 0 0 0.8rem;
margin-bottom: 1.333rem;
}
.custom-section ol li {
padding-left: 2.3rem;
}
.custom-section ol li::before {
margin-right: 0.53rem;
width: 1.4em;
height: 1.4em;
line-height: 1rem;
margin-left: -2.3rem;
margin-top: 0.6rem;
font-size: 1.3rem;
}
.custom-section .custom-overlay {
padding: 50px 20px;
}
.custom-section .pad-10-bottom { padding-bottom: calc(10px * 0.5); }
.custom-section .pad-20-bottom { padding-bottom: calc(20px * 0.5); }
.custom-section .pad-30-bottom { padding-bottom: calc(30px * 0.5); }
.custom-section .pad-40-bottom { padding-bottom: calc(40px * 0.5); }
.custom-section .pad-50-bottom { padding-bottom: calc(50px * 0.5); }
.custom-section .pad-60-bottom { padding-bottom: calc(60px * 0.5); }
.custom-section .pad-70-bottom { padding-bottom: calc(70px * 0.5); }
.custom-section .pad-80-bottom { padding-bottom: calc(80px * 0.5); }
.custom-section .pad-90-bottom { padding-bottom: calc(90px * 0.5); }
.custom-section .pad-100-bottom { padding-bottom: calc(100px * 0.5); }
.custom-section .pad-10-top { padding-top: calc(10px * 0.5); }
.custom-section .pad-20-top { padding-top: calc(20px * 0.5); }
.custom-section .pad-30-top { padding-top: calc(30px * 0.5); }
.custom-section .pad-40-top { padding-top: calc(40px * 0.5); }
.custom-section .pad-50-top { padding-top: calc(50px * 0.5); }
.custom-section .pad-60-top { padding-top: calc(60px * 0.5); }
.custom-section .pad-70-top { padding-top: calc(70px * 0.5); }
.custom-section .pad-90-top { padding-top: calc(90px * 0.5); }
.custom-section .pad-100-top { padding-top: calc(100px * 0.5); }
.border-5 { border: calc(5px * 0.5) solid white; }
.border-10 { border: calc(10px * 0.5) solid white; }
.border-15 { border: calc(15px * 0.5) solid white; }
.border-20 { border: calc(20px * 0.5) solid white; }
.custom-section .small-page {
padding: 6%;
}
#pricing .page {
padding: 8%;
}
}
@media (max-width: 1173px) {
.wide.zoom {
transform: none;
margin-top: -50px;
margin-bottom: -40px;
z-index: 9999999;
position: relative
}
.custom-section .base-button {
font-size: 20px;
}
}
@media (min-width: 450px) {
.width-50 {
display: inline-block;
width: 50%;
}
.width-10 { width: 10%; margin-left: auto !important; margin-right: auto !important; }
.width-20 { width: 20%; margin-left: auto !important; margin-right: auto !important; }
.width-25 { width: 25%; margin-left: auto !important; margin-right: auto !important; }
.width-30 { width: 30%; margin-left: auto !important; margin-right: auto !important; }
.width-33 { width: 33%; margin-left: auto !important; margin-right: auto !important; }
.width-40 { width: 40%; margin-left: auto !important; margin-right: auto !important; }
.width-50 { width: 50%; margin-left: auto !important; margin-right: auto !important; }
.width-60 { width: 60%; margin-left: auto !important; margin-right: auto !important; }
.width-66 { width: 66%; margin-left: auto !important; margin-right: auto !important; }
.width-70 { width: 70%; margin-left: auto !important; margin-right: auto !important; }
.width-75 { width: 75%; margin-left: auto !important; margin-right: auto !important; }
.width-80 { width: 80%; margin-left: auto !important; margin-right: auto !important; }
.width-90 { width: 90%; margin-left: auto !important; margin-right: auto !important; }
.width-100 { width: 100%; margin-left: auto !important; margin-right: auto !important; }
}
@media (min-width: 769px) {
.zoom-10 {
transform: scale(1.1);
box-shadow: 0px -50px 75px -35px rgb(0 0 0 / 15%), 0px 50px 75px -35px rgb(0 0 0 / 15%);
transition: 1s;
}
.zoom-15 {
transform: scale(1.15);
box-shadow: 0px -50px 75px -35px rgb(0 0 0 / 15%), 0px 50px 75px -35px rgb(0 0 0 / 15%);
transition: 1s;
}
}
/* STRUCTURAL STYLING */
.odd {
background-color: var(--brand_odd);
}
.even {
background-color: var(--brand_even);
}
.custom-section {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.custom-overlay {
padding: 75px 20px;
}
.custom-row {
margin: 0 auto;
display: flex;
justify-content: center;
}
.custom-row + .custom-row {
margin-top: 0;
}
.custom-column {
padding: 2%;
}
.custom-4.card {
width: 31.5%;
margin: 0 1.5%;
}
.custom-4.card:first-of-type {
margin-left: 0;
}
.custom-4.card:last-of-type {
margin-right: 0;
}
.custom-4.card:first-of-type {
margin-right: 1.5%;
}
.custom-6.card {
width: 48.5%;
margin: 0 1.5%;
}
.custom-6.card:first-of-type {
margin-left: 0;
}
.custom-6.card:last-of-type {
margin-right: 0;
}
.custom-6.card:first-of-type {
margin-right: 1.5%;
}
.custom-column *:first-child {
margin-top: 0 !important;
}
.custom-column *:last-child {
margin-bottom: 0 !important;
}
.extra {
max-width: 1180px;
}
.wide {
max-width: 1020px;
}
.medium {
max-width: 850px;
}
.narrow {
max-width: 520px;
}
.custom-1 {
width: 8.3333333333%;
}
.custom-2 {
width: 16.666666667%;
}
.custom-3 {
width: 25%;
}
.custom-4 {
width: 33.3333333333333%
}
.custom-5 {
width: 41.6666666666667%;
}
.custom-6 {
width: 50%;
}
.custom-7 {
width: 58.333333333333%;
}
.custom-8 {
width: 66.666666666667%
}
.custom-9 {
width: 75%
}
.custom-10 {
width: 83.333333333333%;
}
.custom-11 {
width: 91.666666666666%;
}
.custom-12 {
width: 100%;
}
@media screen and (max-width: 768px) {
.custom-row {
flex-direction: column;
}
.custom-column {
padding-left: 0;
padding-right: 0;
}
.custom-1,
.custom-2,
.custom-3,
.custom-4,
.custom-5,
.custom-6,
.custom-7,
.custom-8,
.custom-9,
.custom-10,
.custom-11,
.custom-12 {
width: 100%;
}
}
/* ACCORDION CSS */
.custom-accordion {
margin: 35px auto 18px;
}
.custom-accordion .accordion {
background-color: white;
cursor: pointer;
width: 100%;
border: 1px solid #eee;
text-align: left;
outline: none;
font-size: 18px !important;
transition: 0.4s;
padding: 25px 50px 25px 25px;
border-radius: 4px;
overflow: hidden;
margin: 5px 0;
box-shadow: 0px 0px 15px rgba(0,0,0,0.05);
}
.custom-accordion .accordion:after {
content: '\002B';
color: var(--brand_secondary);
font-weight: 900 !important;
float: right;
margin-left: 5px;
margin-right: -25px;
}
.custom-accordion .active:after {
content: "\2212";
}
.custom-accordion .panel {
padding: 30px;
background-color: #fff;
max-height: 0;
overflow: hidden;
text-align: left;
transition: max-height 0.2s ease-out;
margin-bottom: 1rem;
box-shadow: 0px 0px 15px rgba(0,0,0,0.05);
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
border-left: 1px solid #eee;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.custom-section .custom-accordion .accordion.active,
.custom-section .custom-accordion .accordion:hover {
background-color: var(--brand_secondary);
color: white;
border-left-color: var(--brand_secondary);
}
.custom-section .accordion:not(.active) + .panel {
padding: 0 30px;
transition: 0.4s;
border: 0;
}
.custom-section .accordion:not(.active) + .panel ul.check li::before,
.custom-section .accordion:not(.active) + .panel ol {
display: none !important;
}
#custom-nav {
background-color: var(--brand_primary);
box-shadow: 0px 0px 5px rgb(0 0 0 / 8%);
border-bottom: 1px solid #eee;
z-index: 999999999;
width: 100%;
background-color: white;
}
#custom-nav .custom-row {
padding: 0 20px;
}
#custom-nav .custom-column {
padding: 0;
}
#custom-nav a:not(:last-of-type) {
color: var(--brand_navbar_fixed_text);
font-size: 16px;
text-decoration: none;
transition: 0.2s;
}
#custom-nav a:not(:last-of-type):hover {
opacity: 0.6;
}
.custom-nav {
width: 100% !important;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80px;
margin: 0 auto;
}
.custom-nav img {
max-height: 40px;
}
.custom-menu {
padding: 0 20px;
letter-spacing: 0px !important;
}
@media (max-width: 600px) {
.custom-nav img {
display: none;
}
.custom-nav {
justify-content: center;
}
}
.custom-section .base-button {
background-color: #DE6B07; /*var(--brand_video_player_color) !important; */
color: white !important;
padding: 13px 18px;
font-size: 20px;
font-weight: 300;
line-height: 24px;
border: 1px solid transparent;
cursor: pointer;
}
.base-button i {
color: white !important;
}
.custom-section .base-button.secondary,
.custom-section .base-button.secondary i {
background-color: var(--brand_video_player_color) !important;
color: var(--brand_text) !important;
}
#start {
top: -140px;
position: relative
}
@media (max-width: 768px) {
#start {
top: -80px;
position: relative
}
}
/* LAPTOP MOCKUP STYLES */
.custom-column .container .row:nth-of-type(2) {
width: 100%;
max-width: 500px;
}
#custom-intro .custom-column .css-mb .mb-screen img {
margin-top: 0;
}
.css-mb {
max-width: 1000px;
min-width: 50px;
margin: 0 auto;
}
.css-mb div {
box-sizing: border-box !important;
}
.css-mb .mb-display-position {
width: 80%;
margin: 0 auto;
}
.css-mb .mb-display {
position: relative;
width: 100%;
height: 0;
padding-bottom: 62.9442%;
background: #373435;
-webkit-border-top-left-radius: 3.5% 5.3075%;
-moz-border-radius-topleft: 3.5% 5.3075%;
border-top-left-radius: 3.5% 5.3075%;
-webkit-border-top-right-radius: 3.5% 5.3075%;
-moz-border-radius-toptight: 3.5% 5.3075%;
border-top-right-radius: 3.5% 5.3075%;
}
.css-mb .mb-display:before {
content: '';
display: block;
position: absolute;
top: 3%;
left: 50%;
width: 1%;
height: 1.5164%;
margin-left: -0.5%;
border-radius: 50%;
background: #525252;
}
.css-mb .mb-display:after {
content: '';
display: none;
position: absolute;
right: 0.4%;
top: 0.64%;
width: 62.5%;
height: 100%;
background: none;
background: -moz-linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%);
background: -webkit-linear-gradient(36deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%);
background: -o-linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%);
background: -ms-linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%);
background: linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%);
-webkit-border-top-right-radius: 5.3075%;
-moz-border-radius-toptight: 5.3075%;
border-top-right-radius: 5.3075%;
}
.css-mb.with-glare .mb-display:after { display: block; }
.css-mb .mb-screen-position {
position: absolute;
top: 8.0%;
width: 93.2%;
left: 3.4%;
height: 0;
margin: 0;
padding-bottom: 53.75%;
}
.css-mb .mb-screen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background: #4b4b4d;
}
.css-mb .mb-screen img {
max-width: 100%;
height: auto;
}
.css-mb .mb-screen iframe {
width: 100%;
height: 100%;
border: 0;
}
.css-mb .mb-body {
position: relative;
width: 100%;
height: 0;
padding-bottom: 2.3%;
background: #e6e7e8;
}
.css-mb .mb-body:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 50%;
width: 14.0740%;
height: 0;
padding-bottom: 1.4814%;
margin-left: -7.037%;
background: #a9abae;
-webkit-border-bottom-left-radius: 7.0370% 50%;
-moz-border-radius-bottomleft: 7.0370% 50%;
border-bottom-left-radius: 7.0370% 50%;
-webkit-border-bottom-right-radius: 7.0370% 50%;
-moz-border-radius-bottomtight: 7.0370% 50%;
border-bottom-right-radius: 7.0370% 50%;
}
.css-mb .mb-bottom-cover {
width: 100%;
height: 0;
padding-bottom: 0.7407%;
background: #a9abae;
-webkit-border-bottom-left-radius: 12% 600%;
-moz-border-radius-bottomleft: 12% 600%;
border-bottom-left-radius: 12% 600%;
-webkit-border-bottom-right-radius: 12% 600%;
-moz-border-radius-bottomtight: 12% 600%;
border-bottom-right-radius: 12% 600%;
}
/********/
.featured-product-card__content h3,
.featured-product-card__content p {
color: var(--brand_heading) !important;
}
.featured-product-card__content h4,
.course-listing .course-listing-subtitle {
color: var(--brand_text) !important;
}
.course-listing .course-listing-title {
color: #333 !important;
}
.course-listing .course-listing-subtitle {
color: #222 !important;
}
/******************
GENERAL
******************/
/* * {
margin: 0;
padding: 0;
box-sizing: border-box;
} */
header *,
.free-pdf-section *,
.free-materials-section *,
.testimonials-section *,
.contact-details-section *,
.footer *,
.courses-section *,
.system-section *,
.inside-the-courses-section *,
.exercise-section *,
.explanation-section *,
.image-text-section *,
.subscription-section *,
.faq-section *,
footer * {
box-sizing: border-box;
}
button {
margin: 0;
}
.bottom-bar {
z-index: 10;
}
body {
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-style: normal;
color: #282224;
margin: 0;
}
:root {
--beige: #D2C6BF;
--light-teal: #ACCCCD;
--teal: #009999;
--dark-teal: #045865;
--purple: #7988D3;
--coral: #E68867;
--light-coral: #E5A78F;
--bubble-svg: url('data:image/svg+xml,\');
--breakpoint-medium: 768px;
--breakpoint-large: 992px;
/* --breakpoint-small: 480px;
--breakpoint-medium: 768px;
--breakpoint-large: 1024px; */
}
.bg-white {
background-color: #FFFFFF !important;
}
.bg-beige {
background-color: var(--beige) !important;
}
.bg-light-teal {
background-color: var(--light-teal) !important;
}
.bg-teal {
background-color: var(--teal) !important;
}
.bg-dark-teal {
background-color: var(--dark-teal) !important;
}
.bg-light-coral {
background-color: var(--light-coral) !important;
}
.bg-coral {
background-color: var(--coral) !important;
}
.bg-purple {
background-color: var(--purple) !important;
}
.text-dark {
color: #282224 !important;
}
.text-white {
color: #FFFFFF !important;
}
h1, h2, h3, h5, h5, h6 {
font-family: "Gotu", sans-serif;
font-weight: 400;
font-style: normal;
}
p, span, input, input::placeholder, button, ul li, ol li {
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-style: normal;
}
.custom-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.custom-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.custom-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.custom-container {
max-width: 860px;
}
}
@media (min-width: 1200px) {
.custom-container {
max-width: 1020px;
}
}
@media (min-width: 1400px) {
.custom-container {
max-width: 1200px;
}
}
/* @media (min-width: 576px) {
.custom-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.custom-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.custom-container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.custom-container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.custom-container {
max-width: 1320px;
}
} */
.custom-container .custom-row {
display: flex;
flex-wrap: wrap;
margin-right: -15px !important;
margin-left: -15px !important;
flex-direction: row;
padding: 0 !important;
}
@media (max-width: 767px) {
.mobile-reverse .custom-row {
flex-direction: column-reverse !important;
}
}
.pb-0 {
padding-bottom: 0 !important;
}
/******************
NAVBAR
******************/
.navbar {
background-color: var(--dark-teal);
display: flex;
align-items: center;
padding: 10px 20px;
position: relative;
}
.navbar .custom-row {
flex-wrap: nowrap;
}
.navbar-logo {
display: flex;
align-items: center;
margin-right: 20px;
}
.navbar-logo img {
width: 40px;
height: 40px;
margin-right: 10px;
}
.navbar-search {
display: flex;
align-items: center;
margin-right: 20px;
}
.navbar-search,
.navbar-search form {
width: 100%;
max-width: 300px;
}
.navbar-search .search-container {
display: flex;
align-items: center;
background-color: #fff;
padding: 5px;
border-radius: 20px;
}
.navbar-search .search-icon {
color: #2d6c74;
margin-right: 8px;
display: flex;
align-items: center;
}
.navbar-search input[type="text"] {
border: none;
background: none;
outline: none;
font-size: 14px;
color: #2d6c74;
width: 100%;
margin: 0;
padding: 0;
}
.navbar-search input::placeholder {
color: #2d6c74;
font-size: 16px;
}
.navbar-links {
display: none;
gap: 20px;
align-items: center;
flex-grow: 1;
justify-content: flex-end;
}
.navbar-links a {
color: white;
text-decoration: none;
font-size: 14px;
}
.navbar-links a:hover {
color: #a9c1c0;
}
.navbar-toggle {
display: block;
background: none;
border: none;
cursor: pointer;
margin-left: auto;
padding: 0;
}
.navbar-toggle {
display: block;
background: none;
border: none;
cursor: pointer;
margin-left: auto;
padding: 0;
}
.navbar-toggle span {
display: block;
width: 25px;
height: 3px;
background-color: white;
margin: 4px 0;
transition: 0.4s;
}
.navbar-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.navbar-toggle.active span:nth-child(2) {
opacity: 0;
}
.navbar-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.mobile-menu {
display: none;
position: absolute;
bottom: 1px;
transform: translateY(100%);
left: 0;
width: 100%;
background-color: var(--dark-teal);
flex-direction: column;
align-items: flex-end;
padding: 20px;
z-index: 1000;
}
.mobile-menu a {
color: white;
text-decoration: none;
font-size: 18px;
padding: 10px 0;
width: 100%;
text-align: right;
}
.mobile-menu a:hover {
background-color: #a9c1c0;
}
@media (min-width: 768px) {
.navbar-links {
display: flex;
}
.navbar-toggle {
display: none;
}
.mobile-menu {
display: none;
}
.navbar-search,
.navbar-search form {
max-width: 200px;
}
}
/******************
FREE PDF SUBSCRIPTION BOX HOMEPAGE
******************/
.free-pdf-section {
background-color: #fff;
padding: 100px 0;
position: relative;
}
.free-pdf-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-image: url("https://www.perfect-english-grammar.com/image-files/xbubble-pattern-teal.webp.pagespeed.ic.2xdP-bE3ta.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.free-pdf-section .custom-container {
z-index: 1;
position: relative;
}
.subscription-box {
background-color: var(--coral);
padding: 50px 16px;
width: 100%;
max-width: 800px;
margin: 0 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.subscription-box h2 {
color: #333;
font-size: 32px;
line-height: 1.4;
margin-bottom: 20px;
width: 80%;
}
.subscription-box input[type="text"],
.subscription-box input[type="email"] {
width: 100%;
padding: 12px;
margin: 10px 0;
border-radius: 20px;
border: none;
font-size: 16px;
text-align: center;
}
@media (min-width: 768px) {
.subscription-box {
margin: 0 auto;
padding: 100px 40px;
}
}
/******************
FREE MATERIALS HOMEPAGE
******************/
.free-materials-section {
text-align: center;
padding: 100px 16px 100px;
background-color: var(--dark-teal);
}
.free-materials-section h2 {
font-size: 32px;
line-height: 1.4;
color: #fff;
text-align: center;
margin: 0 auto;
width: 100%;
}
.free-material-cards {
max-width: 1200px;
width: 100%;
margin: 50px auto 0;
display: grid;
grid-gap: 20px;
color: #fff;
padding: 16px;
grid-template-columns: repeat(2, 1fr);
place-items: center;
}
.free-material-card {
width: 100%;
height: 100%;
max-width: 360px;
max-height: 360px;
position: relative;
aspect-ratio: 1 / 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.free-material-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
background: #000000;
}
.free-material-card a {
text-decoration: none;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
z-index: 1;
}
.free-material-card h4 {
margin: 0;
font-size: 20px;
line-height: 1.2;
font-weight: 300;
text-transform: uppercase;
text-align: center;
color: #fff;
font-weight: 400;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 992px) {
.free-material-cards {
grid-template-columns: repeat(4, 1fr);
grid-gap: 30px;
}
.free-material-card h4 {
font-size: 24px;
}
}
/******************
TESTIMONIALS
******************/
.testimonials-section {
padding: 100px 16px 100px;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-color: #fff;
position: relative;
}
.white-pattern::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.03;
background-image: url("https://www.perfect-english-grammar.com/image-files/xbubble-pattern-white.webp.pagespeed.ic.-q1Jq_Obx4.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.light-teal-pattern::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-image: url("https://www.perfect-english-grammar.com/image-files/xbubble-pattern-teal.webp.pagespeed.ic.2xdP-bE3ta.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.coral-pattern::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-coral.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.testimonials-section .custom-container {
position: relative;
z-index:1;
}
.testimonials-section h2 {
font-size: 32px;
line-height: 1.4;
color: #333;
margin-bottom: 40px;
width: 100%;
text-align: center;
text-transform: uppercase;
}
.testimonial-cards {
max-width: 900px;
width: 100%;
display: grid;
grid-gap: 50px;
margin: 0 auto;
place-items: center;
}
.testimonial-card {
width: 100%;
height: 100%;
max-width: 300px;
max-height: 3000px;
-webkit-mask: var(--bubble-svg);
mask: var(--bubble-svg);
background-color: var(--coral);
position: relative;
aspect-ratio: 1 / 1;
margin: 0 auto;
}
.testimonial-content {
position: absolute;
font-size: 16px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 80%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 600;
text-align: center;
}
.testimonial-content .author {
margin-top: 30px;
}
.testimonial-button-container {
margin: 100px auto 50px;
}
.testimonial-button {
display: inline-block;
background-color: var(--dark-teal);
color: white;
padding: 10px 50px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
}
@media (min-width: 768px) {
.testimonial-cards {
grid-template-columns: repeat(3, 1fr);
}
.testimonial-card {
max-width: 366px;
max-height: 366px;
}
.testimonial-content {
font-size: 14px;
}
.testimonial-content .author {
margin-top: 15px;
}
}
@media (min-width: 1200px) {
.testimonial-cards {
grid-template-columns: repeat(3, 1fr);
}
.testimonial-card {
max-width: 366px;
max-height: 366px;
}
.testimonial-content {
font-size: 14px;
}
}
/******************
CONTACT DETAILS HOMEPAGE
******************/
.contact-details-section {
background-color: var(--light-teal);
padding: 100px 16px 100px;
position: relative;
}
.contact-details-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
background-image: url("https://www.perfect-english-grammar.com/image-files/xbubble-pattern-white.webp.pagespeed.ic.-q1Jq_Obx4.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.contact-details-section .custom-container {
z-index: 1;
position: relative;
}
.contact-details-section h2 {
width: 100%;
font-size: 40px;
color: #fff;
margin-bottom: 20px;
text-align: center;
}
.contact-info {
font-size: 16px;
line-height: 1.8;
width: fit-content;
margin: 20px auto;
}
.contact-info p {
display: flex;
margin-bottom: 10px;
}
.contact-info span {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
border-radius: 5px;
}
.contact-info span img {
width: 100%;
height: auto;
max-width: 18px;
height: 18px;
}
.contact-info a {
color: white;
text-decoration: none;
font-size: 16px;
color: #fff;
margin-left: 20px;
}
.contact-info a:hover {
text-decoration: underline;
}
/******************
FOOTER
******************/
.footer {
background-color: var(--dark-teal);
padding: 100px 16px 100px;
text-align: center;
width: auto;
height: auto;
float: none;
}
.footer-logo {
width: 100px;
margin: 0 auto;
}
.footer-logo img {
width: 100%;
height: auto;
}
.footer-text {
font-size: 18px;
color: #fff;
margin: 50px 0;
width: 100%;
}
.footer-text span {
width: 25px;
display: inline-block;
margin-left: 5px;
}
.footer-links {
font-size: 18px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
margin: 0 auto;
}
.footer-links a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 200;
padding:0;
}
.footer-links a:hover {
text-decoration: underline;
}
@media (min-width: 768px) {
.footer-links {
flex-direction: row;
}
}
/******************
COURSES
******************/
.courses-section {
text-align: center;
padding: 100px 16px 100px;
background-color: var(--grey);
}
.courses-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto;
width: 100%;
text-transform: uppercase;
}
.courses-cards {
max-width: 1200px;
width: 100%;
margin: 50px auto 0;
display: grid;
place-items: center;
grid-gap: 20px;
color: #fff;
padding: 16px;
grid-template-columns: repeat(1, 1fr);
}
.courses-card {
width: 100%;
height: 100%;
max-width: 364px;
max-height: 305px;
position: relative;
aspect-ratio: 16/9;
background-color: var(--teal);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.courses-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.courses-card a {
text-decoration: none;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
z-index: 1;
}
.courses-card h4 {
margin: 0;
font-size: 20px;
line-height: 1.2;
font-weight: 300;
text-transform: uppercase;
text-align: center;
color: #fff;
font-weight: 400;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 992px) {
.courses-cards {
grid-template-columns: repeat(4, 1fr);
grid-gap: 30px;
}
.courses-card h4 {
font-size: 24px;
}
}
/******************
SYSTEM
******************/
.system-section {
text-align: center;
padding: 100px 16px 100px;
background-color: var(--beige);
}
.system-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto 30px;
width: 100%;
text-transform: uppercase;
}
.system-list {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
.system-item {
display: flex;
align-items: center;
gap: 20px;
}
.system-icon {
width: 25px;
height: 25px;
-webkit-mask: var(--bubble-svg);
mask: var(--bubble-svg);
background-color: var(--coral);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
flex-shrink: 0;
}
.system-item p {
font-size: 16px;
color: #282224;
margin: 0;
text-align: left;
}
@media (min-width: 768px) {
.system-icon {
width: 50px;
height: 50px;
}
.system-item p {
font-size: 25px;
}
}
/******************
INSIDE THE COURSES
******************/
.inside-the-courses-section {
text-align: center;
padding: 100px 16px 100px;
background-color: var(--grey);
}
.inside-the-courses-section .custom-container {
position: relative;
}
.inside-the-courses-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto 50px;
width: 100%;
text-transform: uppercase;
}
.inside-the-courses-list {
max-width: 1200px;
margin: 0 auto;
width: 100%;
list-style-type: disc;
margin-left: 20px;
margin-right: 20px;
}
.inside-the-courses-list li {
margin-bottom: 10px;
font-size: 16px;
text-align: left;
}
.inside-the-courses-image {
margin: 0 auto 100px;
}
.inside-the-courses-image img {
width: 100%;
height: auto;
}
.inside-the-courses-section .floating-bubble {
display: none;
width: 100%;
height: 100%;
max-width: 400px;
max-height: 400px;
-webkit-mask: var(--bubble-svg);
mask: var(--bubble-svg);
background-color: var(--light-teal);
position: relative;
aspect-ratio: 1 / 1;
position: absolute;
bottom: 0;
left: -10%;
z-index: -1;
}
@media (min-width: 1200px) {
.inside-the-courses-list {
padding-bottom: 100px;
}
.inside-the-courses-section .floating-bubble {
display: block;
}
}
/******************
EXERCISE
******************/
.exercise-section #main-content {
line-height: 1.5;
text-align: left;
font-weight: 300;
padding: 100px 16px 100px;
width: 100%;
font-weight: 200;
}
.exercise-section #sidebar {
display: none;
}
.exercise-section #exercise {
margin: 50px 0;
}
.exercise-section #exercise .exercise {
width: 100%;
flex-direction: column;
display: flex;
align-items: center;
}
.exercise-section #main-content table {
max-width: 1000px;
width: 100%;
padding: 10px;
}
.exercise-section #main-content .userInput {
background: none !important;
}
.exercise-section #main-content input {
min-width: 150px;
border-radius: 0 !important;
border-style: solid !important;
border-width: 1px !important;
border-color: #000 !important;
outline: none !important;
padding: 5px;
}
.exercise-section #main-content button.exerciseButton {
background-color: var(--coral);
border: none;
color: #282224;
padding: 10px 30px;
margin: 10px;
text-decoration: none;
border-radius: 50px;
}
.exercise-section #main-content button {
background-color: #000;
border: none;
color: #FFF;
padding: 25px;
margin: 30px;
text-decoration: none;
}
.exercise-section #main-content h1 {
margin: 10px;
color: #282224;
font-size: 24px;
text-align: center;
line-height: 24px;
text-transform: uppercase;
}
.exercise-section #main-content h2,
.exercise-section #main-content h3 {
margin: 10px;
color: #282224;
font-size: 16px;
text-align: center;
line-height: 16px;
text-transform: uppercase;
}
.exercise-section #main-content p {
margin: 0 0 20px 0;
line-height: 32px;
}
.exercise-section #main-content ul li,
.exercise-section #main-content ol li {
line-height: 32px;
}
.exercise-section #main-content a {
color: #0a4049;
text-decoration: underline;
}
.exercise-section #main-content ul {
display: block;
list-style-type: disc;
margin-block-start: 16px;
margin-block-end: 16px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
.exercise-section #main-content ol {
display: block;
list-style-type: decimal;
margin-block-start: 16px;
margin-block-end: 16px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
@media (min-width: 768px) {
.exercise-section #main-content table tr td:nth-child(2) {
width: 245px;
}
.exercise-section #main-content table tr td:nth-child(2) > br {
display: none;
}
.exercise-section #main-content table tr td > button.exerciseButton {
display: inline-block;
margin-right: 10px;
text-align: center;
text-transform: uppercase;
}
.exercise-section #main-content table tr td > button.exerciseButton:last-child {
margin-right: 0;
}
}
/******************
EXPLANATION
******************/
.explanation-section #main-content {
line-height: 1.5;
text-align: left;
font-weight: 300;
padding: 70px 16px 70px;
width: 100%;
font-weight: 200;
}
.explanation-section #sidebar {
display: none;
}
.explanation-section #main-content table {
max-width: 1000px;
width: 100%;
padding: 10px;
margin: 0;
table-layout: fixed;
/* margin: auto; */
/* border-collapse: collapse; */
}
/* .explanation-section #main-content table td,
.explanation-section #main-content table th {
text-align: left;
padding: 3px;
} */
/* @media (min-width: 768px) {
.explanation-section #main-content table th,
.explanation-section #main-content table td {
width: 50%;
}
} */
.explanation-section #main-content h1 {
margin: 10px;
color: #282224;
font-size: 24px;
text-align: center;
line-height: 24px;
text-transform: uppercase;
}
.explanation-section #main-content h2 {
margin: 20px 0;
color: #282224;
font-weight: 300;
font-size: 20px;
text-align: center;
text-transform: uppercase;
}
.explanation-section #main-content h3 {
margin: 20px 0;
color: #282224;
font-weight: 300;
font-size: 16px;
text-align: center;
text-transform: uppercase;
}
.explanation-section #main-content p {
margin: 0 0 20px 0;
line-height: 32px;
}
.explanation-section #main-content ul li,
.explanation-section #main-content ol li {
line-height: 32px;
}
.explanation-section #main-content button {
background-color: #000;
border: none;
color: #fff;
padding: 25px;
margin: 30px;
text-decoration: none;
}
.explanation-section #main-content a {
color: #0a4049;
text-decoration: underline;
}
.explanation-section #main-content ul {
display: block;
list-style-type: disc;
margin-block-start: 16px;
margin-block-end: 16px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
.explanation-section #main-content ol {
display: block;
list-style-type: decimal;
margin-block-start: 16px;
margin-block-end: 16px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
/******************
IMAGE TEXT
******************/
.image-text-section {
/* background-color: var(--light-teal); */
padding: 50px 16px 50px;
text-align: center;
position: relative;
}
.image-text-section .image-text--image,
.image-text-section .image-text--text {
flex: 1 1 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.image-text-section .custom-container {
z-index: 1;
position: relative;
}
.image-text--text {
text-align: left;
padding-top: 30px;
padding-bottom: 30px;
}
.image-text--text.text-center {
text-align: center !important;
}
.image-text--text h1 {
font-size: 50px;
color: #282224;
line-height: 1.2;
margin: 0 0 20px;
text-align: left;
}
.image-text--text h1 span {
margin-top: 30px;
font-size: 40px;
line-height: 44px;
font-family: "Poppins", sans-serif;
font-weight: 200;
display: block;
}
.image-text--text h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
margin: 0 auto;
width: 100%;
margin-bottom: 20px;
text-align: left;
}
.image-text--text h2.h1 {
font-size: 40px;
}
.image-text--text p {
font-size: 20px;
line-height: 1.6;
margin-bottom: 20px;
}
.image-text--button-container {
margin-top: 10px;
align-self: start;
}
.image-text--button {
display: inline-block;
background-color: #d6865a;
color: white;
padding: 10px 70px;
border-radius: 25px;
text-decoration: none;
font-size: 22px;
}
.image-text--image img {
width: 100%;
height: auto;
margin: 0 auto;
}
.image-text--image.align-end {
align-self: flex-end !important;
}
@media (min-width: 768px) {
.image-text-section {
padding: 50px 16px 50px;
}
.image-text-section.image-text--button {
padding: 18px 40px;
font-size: 18px;
}
.image-text-section.guarantee-section {
padding: 100px 16px;
}
.image-text-section .image-text--image,
.image-text-section .image-text--text {
flex: 1 1 50%;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* .image-text-section.image-text-section-60-40 .image-text--image {
flex: 1 1 40%;
width: 40%;
}
.image-text-section.image-text-section-60-40 .image-text--text {
flex: 1 1 60%;
width: 60%;
} */
.image-text--text,
.image-text--image {
padding-right: 3%;
padding-left: 3%;
}
.image-text--text h2.h1 {
font-size: 62px;
}
}
@media (min-width: 992px) {
.hero-section--home .image-text--text h1 {
font-size: 70px;
}
/* .image-text--text {
padding-top: 50px;
padding-bottom: 100px;
} */
}
/******************
HERO EXERCISE
******************/
@media (min-width: 768px) {
.hero-section--exercise.image-text-section {
background-color: var(--beige);
/* background: linear-gradient(to right, var(--beige) 50%, var(--teal) 50%); */
position: relative;
overflow: hidden
}
.hero-section--exercise.image-text-section:after {
content: "";
position: absolute;
top: 0;
left: 50%;
/* transform: translateX(-50%); */
width: 100%;
height: 100%;
opacity: 0.4;
background-color: var(--teal);
z-index: 0;
}
.hero-section--exercise.image-text-section:before {
content: "";
position: absolute;
top: 0;
left: 50%;
/* transform: translateX(-50%); */
width: 100%;
height: 100%;
opacity: 0.6;
background-image: url("https://www.perfect-english-grammar.com/image-files/xbubble-pattern-teal.webp.pagespeed.ic.2xdP-bE3ta.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
z-index: 1;
}
/* .hero-section--exercise.image-text-section .image-text--image {
padding: 0 5%;
} */
.hero-section--exercise.image-text-section .image-text--image,
.hero-section--exercise.image-text-section .image-text--text {
flex: 1 1 50%;
width: 50%;
}
.hero-section--exercise.image-text-section h1 {
font-size: 36px;
}
}
@media (min-width: 992px) {
.hero-section--explanation.image-text-section h1 {
font-size: 50px;
}
}
/******************
HERO EXPLANATION
******************/
@media (min-width: 768px) {
.hero-section--explanation.image-text-section {
background: var(--coral);
/* background: linear-gradient(to right, var(--light-coral) 50%, var(--coral) 50%); */
position: relative;
overflow: hidden
}
.hero-section--explanation.image-text-section:after {
content: "";
position: absolute;
top: 0;
left: -50%;
/* transform: translateX(-50%); */
width: 100%;
height: 100%;
opacity: 0.9;
background-color: var(--light-coral);
z-index: 0;
/* background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-coral.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center; */
}
.hero-section--explanation.image-text-section:before {
content: "";
position: absolute;
top: 0;
left: -50%;
/* transform: translateX(-50%); */
width: 100%;
height: 100%;
opacity: 0.2;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-coral.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
z-index: 1;
}
/* .hero-section--explanation.image-text-section .image-text--image {
padding: 0 5%;
} */
.hero-section--explanation.image-text-section .image-text--image,
.hero-section--explanation.image-text-section .image-text--text {
flex: 1 1 50%;
width: 50%;
}
.hero-section--explanation.image-text-section h1 {
font-size: 36px;
}
}
@media (min-width: 992px) {
.hero-section--explanation.image-text-section h1 {
font-size: 50px;
}
}
/******************
SUBSCRIPTION
******************/
.subscription-section {
background-color: var(--coral);
padding: 100px 16px 100px;
text-align: center;
}
.subscription-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto;
width: 100%;
text-transform: uppercase;
margin-bottom: 30px;
}
.subscription-cards {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
width: 100%;
}
.subscription-card {
background-color: #fff;
border-radius: 10px;
padding: 40px 20px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 250px;
width: 100%;
display: flex;
flex-direction: column;
}
.subscription-card h3 {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.subscription-card .price {
font-size: 32px;
color: #333;
margin: 10px 0;
}
.subscription-card p {
font-size: 14px;
color: #555;
margin-bottom: 20px;
}
.subcription-card-button-container {
flex-grow: 1;
display: flex;
align-items: flex-end;
}
.subscription-card-button {
background-color: var(--teal);
border: none;
color: white;
padding: 10px 50px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
margin: 0 auto;
}
.subscription-card-button:hover {
background-color: #3a796f;
}
/* New styles for single subscription card */
.subscription-cards.single-card {
justify-content: center;
}
.subscription-cards.single-card .subscription-card {
max-width: 500px;
padding: 60px 50px;
}
.subscription-cards.single-card .subscription-card h3 {
font-size: 28px;
margin-bottom: 20px;
}
.subscription-cards.single-card .subscription-card .price-container {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 15px 0 25px;
}
.subscription-cards.single-card .subscription-card .price {
font-size: 48px;
font-weight: bold;
margin: 0;
font-family: "Gotu", sans-serif;
}
.subscription-cards.single-card .subscription-card .price-text {
font-size: 24px;
font-weight: 400;
margin: 0;
font-family: "Gotu", sans-serif;
}
.subscription-cards.single-card .subscription-card p {
font-size: 18px;
margin-bottom: 5px;
line-height: 1.3;
}
.subscription-cards.single-card .subscription-card .terms-group {
margin-bottom: 25px;
}
.subscription-cards.single-card .subscription-card-button {
padding: 15px 30px;
font-size: 18px;
margin-top: 20px;
}
@media (max-width: 768px) {
.subscription-cards.single-card .subscription-card {
max-width: 100%;
padding: 40px 30px;
}
.subscription-cards.single-card .subscription-card .price-container {
flex-direction: column;
gap: 0;
}
.subscription-cards.single-card .subscription-card .price-text {
font-size: 20px;
}
}
/******************
FAQ
******************/
.faq-section {
background-color: #FEFEFE;
padding: 100px 16px 100px;
text-align: center;
}
.faq-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto;
width: 100%;
text-transform: uppercase;
margin-bottom: 30px;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 850px;
}
.faq-item {
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
.faq-header {
background-color: #FEFEFE;
padding: 15px 20px;
width: 100%;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border: none;
font-size: 18px;
font-weight: 400;
line-height: normal;
gap: 15px;
}
.faq-header:hover {
background-color: #accccd;
}
.faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
/* transition: max-height 0.3s ease; */
background-color: #f9f9f9;
padding: 0 15px;
font-size: 18px;
line-height: normal;
color: #282224;
text-align: left;
}
.faq-content p {
color: #282224;
margin: 0;
}
.faq-item input[type="checkbox"] {
display: none;
}
.faq-item input[type="checkbox"]:checked ~ .faq-content {
max-height: 100%;
padding: 15px;
}
.faq-item input[type="checkbox"] + .faq-header::after {
content: "+";
font-size: 18px;
margin-left: auto;
}
.faq-item input[type="checkbox"]:checked + .faq-header::after {
content: "-";
}
.faq-item input[type="checkbox"]:checked + .faq-header {
background-color: #accccd;
}
/******************
CARD GRIDS FOR SYSTEM SECTION
******************/
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.system-section .card {
background-color: var(--beige);
border-radius: 10px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.system-section .icon-container {
width: 70px;
height: 70px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.system-section .card img {
max-width: 50px;
height: auto;
}
.system-section .card p {
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-size: 18px;
color: #282224;
margin: 0;
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.card-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/******************
BOTTOM BAR TEAL
******************/
.bottom-bar.bottom-bar--teal {
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--light-teal);
color: #282224;
box-sizing: border-box;
}
.bottom-bar.bottom-bar--teal .bottom-bar__content {
max-width: 700px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.bottom-bar.bottom-bar--teal .bottom-bar__content > * {
display: flex;
align-items: center;
}
.bottom-bar.bottom-bar--teal .bottom-bar__text {
padding-right: 10px;
font-size: 2vw;
font-weight: 400;
}
.bottom-bar.bottom-bar--teal a {
text-decoration: none;
color: #282224;
font-weight: 400;
}
.bottom-bar.bottom-bar--teal .bottom-bar__button {
background-color: var(--coral);
color: #282224 !important;
text-align: center;
padding: 5px 25px;
border-radius: 25px;
text-decoration: none;
cursor: pointer;
font-size: 2vw;
font-weight: 400;
transition: color 0.3s ease;
}
.bottom-bar.bottom-bar--teal .bottom-bar__button:hover {
color: #fff !important;
}
@media (min-width: 576px) {
.bottom-bar.bottom-bar--teal .bottom-bar__text,
.bottom-bar.bottom-bar--teal .bottom-bar__button {
font-size: 14px;
}
}