/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.18.2
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
@font-face {
    font-family: 'Roboto';
    src:
        url('./assets/fonts/roboto/Roboto-Bold.woff2') format('woff2'),
        url('./assets/fonts/roboto/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-grey: #cccccc;
    --FontAwesome: 'Font Awesome 7 Pro';
    --font-html-size: 62.5%;
}

html {
    font-size: var(--font-html-size);
}

body {
    font-size: 1.6rem !important;
    line-height: 1.25;
}

h1,
.h1 {
    font-size: 4.8rem;
}
h2,
.h2 {
    font-size: 3.6rem;
}

.h3,
h3 {
    font-size: 2.4rem;
}

p {
    margin-bottom: 1.5rem;
}

b,
strong {
    font-weight: bold;
}

.alt-font-2 {
    font-family: 'Roboto', sans-serif;
}

.last-reset > :is(h1, h2, h3, h4, h5, h6),
.last-reset > p:not(style),
.last-reset > :last-child:not(style) {
    margin-bottom: 0;
}

.dark,
.dark p,
.dark td {
    color: var(--color-white);
}

.section-title {
    margin-bottom: 0;
}

.section-title b {
    height: 0;
}

.section-title-normal {
    border-bottom: 0;
}

.section-title-normal span {
    border-bottom: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-bottom: 0;
}

.section-title-bold span,
.section-title-bold-center span {
    border: 0;
    padding: 0;
    -webkit-text-stroke: 6px #fff;
    paint-order: stroke fill;
    letter-spacing: 1px;
}

.dark .section-title-bold span,
.dark .section-title-bold-center span {
    -webkit-text-stroke: 6px var(--fs-color-secondary);
}

.svg-title {
    width: 100%;
    height: auto;
}

.svg-title .title {
    font-size: 3.6rem;
    font-weight: bold;
    fill: var(--fs-color-secondary);
    stroke: var(--color-white);
    stroke-width: 8px;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

.dark .svg-title .title {
    fill: var(--color-white);
    stroke: var(--fs-color-secondary);
}

a.icon:not(.button),
button.icon:not(.button) {
    margin-left: 8px;
    margin-right: 8px;
}

.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
    font-weight: bold;
    letter-spacing: 0;
}

.social-icons a:first-child {
    margin-left: 0;
}

.col-child-left > .col-inner {
    margin-right: auto !important;
    margin-left: 0 !important;
}
.col-child-center > .col-inner {
    margin-right: auto !important;
    margin-left: auto !important;
}

.col-child-right > .col-inner {
    margin-right: 0 !important;
    margin-left: auto !important ;
}

.off-canvas-left .mfp-content,
.off-canvas-right .mfp-content {
    background-color: hsla(0, 0%, 100%, 1);
}

.off-canvas:not(.off-canvas-center) .nav-vertical li > a {
    font-size: 1em;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--color-black);
}

.nav-size-large > li > a {
    font-size: 1.25em;
}

.nav-size-xlarge > li > a {
    font-size: 1.5em;
}

.nav-spacing-large > li {
    margin: 0 16px;
}
.icon-envelop:before {
    content: '\f0e0';
    font-family: var(--FontAwesome);
    font-weight: 400;
}

.icon-phone:before {
    content: '\f095';
    font-family: var(--FontAwesome);
    font-weight: 700;
}

/*************** HEADER ***************/
.nav-column > li > a,
.nav-dropdown > li > a,
.nav-vertical-fly-out > li > a,
.nav > li > a {
    color: #333;
    transition: all 0.2s;
}

#header #top-bar {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}

#header #header-contact a {
    font-size: 16px;
    text-transform: initial;
}

#header .nav-divided > li + li > a:after {
    border: none;
}

#header #top-bar .flex-right {
    width: 35rem;
}

#header #top-bar .form-flat input {
    padding: 0 1.6rem;
}

#header #logo img {
    max-width: 365px;
}

.searchform-wrapper.form-flat .flex-col:last-of-type {
    margin-left: -3.5em;
}

.form-flat input:not([type='submit']),
.form-flat select,
.form-flat textarea {
    background-color: #ededed;
    border-color: #ededed;
    height: 33px;
}

.form-flat input::placeholder {
    color: #333;
}

/*************** END HEADER ***************/

/*************** END HEADER ***************/
#footer .footer-logo {
    max-width: 38rem;
    padding: 1.6rem 1rem;
    background-color: var(--color-white);
    border-radius: 12px;
}
#footer .footer-title {
    font-size: 2rem;
    font-weight: bold;
}

.absolute-footer.dark {
    color: var(--color-white);
}
.absolute-footer {
    color: rgba(0, 0, 0, 0.5);
    font-size: 1em;
    padding: 1.4rem 0 2rem;
}

.absolute-footer > .container {
    position: relative;
}

.absolute-footer > .container::before {
    content: '';
    position: absolute;
    top: -1.4rem;
    left: 1.5rem;
    width: calc(100% - 3rem);
    height: 1px;
    background-color: var(--color-white);
}

/*************** END FOOTER ***************/

/*************** HOME PAGE ***************/
.hero-section .hero-title {
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1.25;
}

.hero-section .hero-title .title-big-1 {
    font-size: 3.8rem;
}
.hero-section .hero-title .title-big-2 {
    font-size: 4rem;
    font-weight: 900;
}

.hero-section .hero-title .title-big-3 {
    font-size: 6.4rem;
}

.hero-section .hero-wave {
    position: absolute;
    top: 105px;
    right: 100%;
    max-width: 1635px;
    transform: translateX(calc((100vw - 120rem) / 2));
}
.hero-section .hero-semicircle {
    position: absolute;
    bottom: 0;
    max-width: 532px;
    left: calc((100vw - 120rem) / 2 + 120rem);
    transform: translateX(-8%);
}

.hero-section .hero-dots {
    position: absolute;
    top: 12px;
    bottom: 0;
    left: 0;
    right: 10px;
    width: auto !important;
    z-index: -1;
}

.hero-list {
    font-size: 2rem;
    font-weight: 700;
    color: var(--fs-color-secondary);
    font-style: italic;
    -webkit-text-stroke: 3px #fff;
    paint-order: stroke fill;
    text-shadow:
        2px 2px 2px #ffffff,
        0 4px 4px rgba(0, 0, 0, 0.5);
}

.hero-list ul {
    list-style: none;
}

.hero-list ul li {
    position: relative;
    margin-left: 0;
    padding-left: 3.2rem;
}
.hero-list ul li::before {
    content: '\f00c';
    font-family: var(--FontAwesome);
    position: absolute;
    left: 0;
    top: 0;
    text-shadow: 0px 0px 2px #ffffff;
}

.certificate-section .advantages-row {
    counter-reset: advantages;
}

.certificate-section .advantages-row > .col > .col-inner {
    aspect-ratio: 1/1;
    background: url(./assets/images/advantages-odd-bg.png) no-repeat top center / contain;
    padding: 25% 10% 10% 20%;
    font-size: 2rem;
    letter-spacing: -0.5px;
    line-height: 1.2;
    position: relative;
}

.certificate-section .advantages-row > .col:nth-child(even) > .col-inner {
    background-image: url(./assets/images/advantages-even-bg.png);
    padding: 30% 10% 10% 12%;
    color: var(--color-white);
}

.certificate-section .advantages-row > .col > .col-inner p {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.certificate-section .advantages-row > .col > .col-inner:after {
    counter-increment: advantages;
    content: counter(advantages);
    font-size: 2rem;
    line-height: 1;
    color: var(--fs-color-secondary);
    background-color: var(--color-white);
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 10rem;
    position: absolute;
    top: 13%;
    right: 11%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.certificate-section .advantages-row > .col:nth-child(even) > .col-inner:after {
    color: var(--fs-color-primary);
    top: 15%;
    right: 12%;
}

.wya-section .wya-wave {
    position: absolute;
    bottom: 40px;
    right: 100%;
    max-width: 1635px;
    transform: translateX(calc((100vw - 120rem) / 2));
}

.wya-section .wya-semicircle {
    position: absolute;
    top: -15px;
    left: calc((100vw - 120rem) / 2 + 120rem);
    max-width: 998px;
    transform: translateX(-28%);
}

.wya-section .wya-row > .col > .col-inner {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
}

.wya-section .wya-row .icon-box .icon-box-text {
    border-top: 3px solid var(--fs-color-secondary);
    padding: 2rem 1.2rem 0 1.2rem;
}

.wya-section .wya-cta {
    font-weight: 900;
    font-style: italic;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
}

.wya-section .wya-cta p {
    margin: 0;
}

.hazo-icon.arrow-right {
    display: inline-block;
    margin-left: 16px;
    width: 28px;
    height: 22px;
    position: relative;
    top: 2px;
    background: url(./assets/images/arrow-right.svg) no-repeat center center / contain;
}
.hazo-icon.equal-arrow-right {
    display: inline-block;
    width: 60px;
    height: 22px;
    position: relative;
    top: 2px;
    background: url(./assets/images/equal-arrow-right.svg) no-repeat center center / contain;
    margin-right: 12px;
}

.cta-btn-row .button {
    max-width: 31rem;
    font-size: 2.4rem;
    padding: 2rem;
    margin: 0;
    border-radius: 2rem;
    line-height: 1.25;
    min-height: auto;
    height: auto;
    letter-spacing: 0;
    border: none;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.cta-btn-row .button:hover {
    transform: translateY(-4px);
    box-shadow: -4px -4px 4px 0 rgba(0, 0, 0, 0.25);
}

.cta-btn-row .button span {
    line-height: inherit;
}

.modules-section {
}

/* container tab */
.tabbed-content .nav-pills {
    display: flex;
}

/* tab */
.tabbed-content .nav-pills > li {
    position: relative;
    flex: 1;
    height: 100%;
}

.tabbed-content .nav-pills > li > a {
    background: var(--fs-color-primary);
    color: #fff;
    padding: 20px 30px;
    display: block;
    position: relative;
    z-index: 2;
    font-weight: bold;
    line-height: 1.5;
}

.tabbed-content .nav-pills > li:nth-child(even) > a {
    background: var(--fs-color-secondary);
}

.tabbed-content .nav-pills > li > a span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* panel nền */
.tabbed-content .tab-panels {
    padding-top: 0;
}
.tabbed-content .tab-panels .panel {
    background: var(--fs-color-primary);
}

.tabbed-content .tab-panels .panel.active {
    padding: 30px;
    border-radius: 30px;
}

.tabbed-content .tab-panels .panel:nth-child(even) {
    background: var(--fs-color-secondary);
}

/* tạo phần cong lõm bên trái */
.tabbed-content .nav-pills > li::before {
    content: '';
    position: absolute;
    left: -50px;
    top: 50%;
    width: 100px;
    height: 100px;
    border-bottom-right-radius: 0;
    z-index: -5;
    transition: all 0.2s;
}

.tabbed-content .nav-pills > li:first-child::before {
    left: 0px;
}

.tabbed-content .nav-pills > li:nth-child(odd)::before {
    background: var(--fs-color-primary);
}

.tabbed-content .nav-pills > li:nth-child(even)::before {
    background: var(--fs-color-secondary);
}

/* tạo phần cong lõm bên phải */
.tabbed-content .nav-pills > li::after {
    content: '';
    position: absolute;
    right: -50px;
    top: 50%;
    width: 100px;
    height: 100px;
    border-bottom-left-radius: 0;
    z-index: -5;
    transition: all 0.2s;
}

/* tạo phần cong lõm bên phải */
.tabbed-content .nav-pills > li:nth-child(odd)::after {
    background: var(--fs-color-primary);
}

.tabbed-content .nav-pills > li:nth-child(even)::after {
    background: var(--fs-color-secondary);
}

.tabbed-content .nav-pills > li:last-child > a {
    border-bottom-right-radius: 0;
}

.tabbed-content .nav-pills > li:last-child::after {
    right: 0px;
}

.tabbed-content .nav-pills > li.active::before,
.tabbed-content .nav-pills > li.active::after {
    z-index: -1;
}

.modules-section .modules-row p {
    line-height: 1.25r;
}

.modules-section .module-list ul {
    font-size: 2rem;
    list-style: none;
    max-width: 80rem;
    margin: 0 auto 3rem;
}

.modules-section .module-list ul li::before {
    content: '\f14a';
    font-family: var(--FontAwesome);
    margin-right: 8px;
    color: var(--color-white);
    font-weight: bold;
}

.modules-section .tab-panels .tab-panels .panel:nth-child(even) .module-list ul li::before {
    color: var(--fs-color-secondary);
}

.modules-section .for-row .for-row-inner > .col.large-2 {
    flex-basis: 13rem;
    max-width: 13rem;
    margin-right: 3rem;
}

.modules-section .for-row .for-row-inner > .col.large-2 > .col-inner {
    border-right: 3px solid var(--color-white);
}

.modules-section
    .tabbed-content
    .tab-panels
    .panel:nth-child(even)
    .for-row
    .for-row-inner
    > .col.large-2
    > .col-inner {
    border-color: var(--fs-color-secondary);
}

.modules-section .for-row .for-row-inner > .col.large-10 {
    flex-basis: calc(100% - 16rem);
    max-width: calc(100% - 16rem);
}

.why-section .why-row > .col {
    padding: 0 3.5rem 7rem;
}

.why-section .why-row > .col > .col-inner {
    border-radius: 20px;
    padding: 2rem 10rem 4rem 5rem;
    box-shadow: 7px 7px 20px 0 rgba(0, 0, 0, 0.7);
    position: relative;
    min-height: 17rem;
    place-content: center;
}

.why-section .why-row > .col > .col-inner:before {
    content: '';
    display: block;
    width: 25%;
    aspect-ratio: 10 / 7.5;
    position: absolute;
    top: -2rem;
    left: -2rem;
    border-radius: 20px;
    background-color: red;
    z-index: -1;
}

.why-section .why-row > .col > .col-inner:after {
    content: '';
    display: block;
    width: 80%;
    aspect-ratio: 10 / 2.3;
    position: absolute;
    bottom: -2rem;
    right: -2rem;
    border-radius: 20px;
    background-color: #ff0000;
    z-index: -1;
}

html[ng-app='uxBuilder'] .why-section .why-row > .col > .col-inner:before,
html[ng-app='uxBuilder'] .why-section .why-row > .col > .col-inner:after {
    display: none;
}
.why-section .why-row > .col:nth-child(4n + 2) > .col-inner:before,
.why-section .why-row > .col:nth-child(4n + 2) > .col-inner:after,
.why-section .why-row > .col:nth-child(4n + 3) > .col-inner:before,
.why-section .why-row > .col:nth-child(4n + 3) > .col-inner:after {
    background-color: var(--fs-color-secondary);
}

.why-section .why-row .icon-box {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
}

.why-section .why-row .icon-box .icon-box-text {
    display: none;
}

.why-section .why-row > .col:nth-child(4n + 2) .icon-box .icon-inner,
.why-section .why-row > .col:nth-child(4n + 2) .icon-box .icon-inner,
.why-section .why-row > .col:nth-child(4n + 3) .icon-box .icon-inner,
.why-section .why-row > .col:nth-child(4n + 3) .icon-box .icon-inner {
    color: var(--fs-color-secondary) !important;
}

.live-section .live-row .live-image-col .speaker-box .box-image {
    width: 30rem;
    border-radius: 50%;
    border: 4px solid #feffff;
    padding: 6px;
    background: linear-gradient(180deg, #0a57ff, #bf2ef0);
}

.live-section .live-row .live-image-col .speaker-box .box-image img {
    border-radius: 50%;
    background: #feffff;
}

.live-section .live-row .live-image-col .speaker-box .box-text {
    width: fit-content;
    padding: 1rem 3rem;
    margin: 1rem auto;
    background: linear-gradient(75deg, #8703ff 0%, #0567ff 30%, #0567ff 100%);
}

.live-section .live-row .live-image-col .speaker-box .box-text h4 {
    font-size: 2.4rem;
}

.live-section .live-row .live-image-col .speaker-box .box-text p {
    font-size: 1.4rem;
    font-weight: bold;
}

.live-section .live-row .live-image-col .icons-box-col > .col-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem 4rem;
}

.live-section .live-row .live-image-col .icons-box-col .icon-box {
    width: fit-content;
}

.live-zoom-text {
    font-weight: 900;
    font-size: 6rem;
    text-transform: uppercase;
    display: inline-block;
    width: auto;
    background: #f3c623;
    border-radius: 40px;
    padding: 1rem 3rem;
}

.live-zoom-text .character {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent;
    background: linear-gradient(to right, #2c4ffc, #ba2ff0);
}

.live-zoom-text .space {
    width: 20px;
    display: inline-block;
}

.button.box-shadow-1 {
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.live-section .live-title h2 {
    font-size: 6.4rem;
    margin-bottom: 1rem;
}

.courses-section .courses-row > .col > .col-inner {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    overflow: hidden;
}

.courses-section .courses-row > .col > .col-inner > .row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
}

.courses-section .courses-row .course-title-col {
    margin-bottom: 2rem;
    flex: 0 0 auto;
}

.courses-section .courses-row .course-title-col > .col-inner {
    color: var(--color-white);
    min-height: 106px;
    place-content: center;
    padding: 1.5rem 3rem;
    text-align: center;
    background: url(./assets/images/course-title-col-bg.png) no-repeat bottom center / 100% 100%;
}

.courses-section .courses-row .course-title-col h3 {
    font-size: 2rem;
    color: var(--color-white);
}

.courses-section .courses-row .course-content-col {
    place-content: center;
        min-height: 24rem;
}

.courses-section .courses-row .course-content-col > .col-inner {
    padding: 0 3rem;

}

.courses-section .courses-row .course-button-col {
    flex: 0 0 auto;
}

.courses-section .courses-row .course-button-col > .col-inner {
    padding: 0 3rem;
}

.courses-section .discount-items-row > .col {
    padding-bottom: 0;
}

.courses-section .discount-items-row > .col > .col-inner {
    background-color: var(--fs-color-secondary);
    padding: 2rem;
    border-radius: 20px;
    position: relative;
    margin-top: 10rem;
}

.courses-section .discount-row .discount-badge {
    background: url(./assets/images/discount-badge.png) no-repeat center / contain;
    width: 160px;
    aspect-ratio: 10 / 6.2;
    color: var(--color-white);
    display: flex;
    align-items: center;
    font-weight: bold;
    position: absolute;
    bottom: calc(100% - 2rem);
    left: 2rem;
    padding-left: 28px;
    font-family: Roboto;
}
.courses-section .discount-row .discount-badge.size-big {
    width: 200px;
    padding-left: 36px;
}
.courses-section .discount-row .discount-badge p {
    max-width: 48px;
    margin-bottom: 1rem;
}

.courses-section .discount-row .discount-badge p strong {
    font-size: 4rem;
}

.discount-form-col > .col-inner {
    border-radius: 20px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
    padding: 4rem;
}

.discount-form-col .discount-form-title h3 {
    font-size: 2rem;
    font-family: 'Roboto', sans-serif;
}

.discount-form-col .discount-form-title strong {
    font-size: 3rem;
}

.discount-form-col form {
    margin: 0;
}

.discount-form-col form input[type='text'],
.discount-form-col form input[type='tel'],
.discount-form-col form input[type='email'],
.discount-form-col form select {
    border-radius: 10rem;
    box-shadow: none;
    border-color: var(--fs-color-primary);
}

.discount-form-col form .button {
    height: 4rem;
    border-radius: 10rem;
    font-size: 2rem;
    position: relative;
    border: none;
    margin: 0 auto;
    display: block;
    box-shadow: none !important;
}

.discount-form-col form .button:after {
    content: '';
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: 10rem;
    background: linear-gradient(to right, #fefefe 0%, var(--fs-color-alert) 60%, var(--fs-color-alert) 100%);

    background-size: 200% 100%;
    background-position: 0% 0;
    transition: background-position 0.5s ease;
}

.discount-form-col form .button:hover:after {
    background-position: -100% 0;
}

.discount-form-col form .button i {
    width: 26px;
    height: 20px;
    position: relative;
    top: -2px;
}

/*************** END HOME PAGE ***************/

@media only screen and (min-width: 1440px) {
    #header #masthead .header-inner {
        padding: 0 6rem;
    }
}

@media only screen and (min-width: 850px) {
    #header #masthead .header-inner {
        max-width: 100%;
    }
}

@media only screen and (max-width: 1599px) {
    #header #logo {
        width: 280px;
    }

    #header #logo img {
        max-width: 240px;
    }

    #header .nav-size-large > li > a {
        font-size: 1em;
    }

    .nav-size-xlarge > li > a {
        font-size: 1.25em;
    }

    .nav-spacing-large > li {
        margin: 0 12px;
    }

    .certificate-row > .col.large-5 {
        max-width: 800px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .certificate-row > .col {
        flex-basis: 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 1439px) {
    .hero-section .hero-title {
        font-size: 2.8rem;
    }
    .hero-section .hero-title .title-big-1 {
        font-size: 2.8rem;
    }
    .hero-section .hero-title .title-big-2 {
        font-size: 3.2rem;
    }
    .hero-section .hero-title .title-big-3 {
        font-size: 4.8rem;
    }
}

@media only screen and (max-width: 1199px) {
    .courses-row > .col {
        flex-basis: 50%;
        max-width: 50%;
    }
    .live-row  > .col {
        flex-basis: 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 1079px) {
    .certificate-section .advantages-row > .col {
        flex-basis: 50%;
        max-width: 50%;
    }

    .courses-section .courses-row .course-content-col > .col-inner,
    .courses-section .courses-row .course-button-col > .col-inner {
        padding: 0 2rem;
    }
}

@media only screen and (max-width: 849px) {
    /*************** ADD TABLET CSS HERE  ***************/
    #header .header-main {
        height: 90px;
    }
    .hero-section .hero-title {
        font-size: 2rem;
    }
    .hero-section .hero-title .title-big-1 {
        font-size: 2.4rem;
    }
    .hero-section .hero-title .title-big-2 {
        font-size: 2.8rem;
    }
    .hero-section .hero-title .title-big-3 {
        font-size: 4.2rem;
    }
    .select-resize-ghost,
    .select2-container .select2-choice,
    .select2-container .select2-selection,
    input[type='date'],
    input[type='email'],
    input[type='number'],
    input[type='password'],
    input[type='search'],
    input[type='tel'],
    input[type='text'],
    input[type='url'],
    select,
    textarea {
        font-size: 1.6rem;
    }

    .hero-list {
        font-size: 1.8rem;
    }
    h1,
    .h1 {
        font-size: 3.6rem;
    }
    h2,
    .h2 {
        font-size: 2.8rem;
    }

    .h3,
    h3 {
        font-size: 2rem;
    }
    .hazo-icon.arrow-right {
        width: 26px;
        height: 18px;
    }
    .hazo-icon.equal-arrow-right {
        width: 50px;
        height: 18px;
    }
    .cta-btn-row .button {
        max-width: 26rem;
        font-size: 2rem;
        padding: 1rem;
        border-radius: 1.2rem;
    }
    .wya-section .wya-cta {
        padding: 2rem 0;
    }
    .live-section .live-row .live-image-col .speaker-box .box-image {
        width: 24rem;
    }

    .live-zoom-text {
        font-size: 4.8rem;
    }
    .live-section .live-title h2 {
        font-size: 4.8rem;
    }
    .is-xlarge {
        font-size: 1.25em;
    }
    .tabbed-content .nav-pills {
        flex-wrap: wrap;
        align-items: stretch;
    }
    .tabbed-content .nav-pills > li > a {
        font-size: 1.4rem;
        padding: 1rem 2rem;
        height: 100%;
    }
        .certificate-section .advantages-row > .col > .col-inner {
        font-size: 1.8rem;
    }
}

@media only screen and (max-width: 679px) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .certificate-section .advantages-row > .col {
        flex-basis: 100%;
        max-width: 100%;
    }
    .courses-row > .col {
        flex-basis: 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 549px) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .hero-list {
        font-size: 1.6rem;
    }

    .why-section .why-row > .col > .col-inner {
        padding: 2rem 8rem 3rem 3rem;
        min-height: 17rem;
    }

    .live-section .live-row .live-image-col .speaker-box .box-image {
        width: 20rem;
    }

    .discount-form-col > .col-inner {
        padding: 3rem
    }
    .discount-form-col .discount-form-title h3 {
        font-size: 1.6rem;
    }
    .discount-form-col .discount-form-title strong {
        font-size: 2.4rem;
    }
        .live-zoom-text {
        font-size: 3.6rem;
    }
    .live-section .live-row .live-image-col .icons-box-col > .col-inner {
        flex-wrap: wrap;
    }
    .modules-section .for-row .for-row-inner > .col.large-2 {
        flex-basis: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 1.2rem;
    }
    .modules-section .for-row .for-row-inner > .col.large-2 > .col-inner {
        border-right: none;
    }
    .modules-section .for-row .for-row-inner > .col.large-10 {
        flex-basis: 100%;
        max-width: 100%;
    }    
    .hero-section .hero-title {
        font-size: 1.8rem;
    }
    .hero-section .hero-title .title-big-1 {
        font-size: 2rem;
    }
    .hero-section .hero-title .title-big-2 {
        font-size: 2.4rem;
    }
    .hero-section .hero-title .title-big-3 {
        font-size: 3.6rem;
    }

    .certificate-section .advantages-row > .col > .col-inner {
        font-size: 1.6rem;
    }
}