@charset "UTF-8";
/* ---------------------------------------------------------
* Name: UpSkill - Education Online Courses LMS HTML Template
* Version: 1.0.0
* Author: Themesflat
* Author URI: http://themesflat.com
* Abstracts variable
* Reset css styles
* Components
* section
* dashboard
* Responsive
------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
:root {
--Black: #000000;
--White: #ffffff;
--Primary: #131836;
--Secondary: #1c8a7c;
--Border: #E4E4E7;
--Soft-Text: #585D69;
--bg-1: #F3F3F3;
--bg-2: #1c8a7c;
--bg-3: #D7C7EA;
--bg-4: hsl(172.36deg 66.27% 32.55% / 75%);
--bg-5:#F5F5F2;
}
/*---------- Reset css styles ----------- */
/* Reset Browsers
-------------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
vertical-align: baseline;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
html {
margin-right: 0 !important;
font-size: 62.5%;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: var(--White);
line-height: 1;
padding-top: 116px !important;
}
body::-webkit-scrollbar {
width: 0px;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
display: block;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th,
td {
font-weight: normal;
text-align: left;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
blockquote,
q {
quotes: none;
}
a img {
border: 0;
}
img {
max-width: 100%;
height: auto;
}
select {
max-width: 100%;
}
/* General
-------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
font-family: "DM Sans", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 28px;
color: var(--Primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
overflow-y: auto;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
}
p {
font-weight: 400;
font-size: 14px;
line-height: 28px;
}
strong,
b,
cite {
font-weight: bold;
}
dfn,
cite,
em,
i,
blockquote {
font-style: italic;
display: contents;
}
abbr,
acronym {
border-bottom: 1px dotted #e0e0e0;
cursor: help;
}
.btn-link:focus,
.btn-link:hover,
mark,
ins {
text-decoration: none;
}
sup,
sub {
font-size: 75%;
height: 0;
line-height: 0;
position: relative;
vertical-align: baseline;
}
small {
font-size: 75%;
}
big {
font-size: 125%;
}
address {
font-style: italic;
margin: 0 0 20px;
}
code,
kbd,
tt,
var,
samp,
pre {
margin: 20px 0;
padding: 4px 12px;
background: #f5f5f5;
border: 1px solid #e0e0e0;
overflow-x: auto;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
border-radius: 0;
height: auto;
}
svg,
svg path {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* Elements
-------------------------------------------------------------- */
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
hr {
margin-bottom: 20px;
border: dashed 1px #ccc;
}
/* List */
ul,
ol {
padding: 0;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ul,
li > ol {
margin-bottom: 0;
}
li {
list-style: none;
}
ul li,
ol li {
padding: 0;
}
dl,
dd {
margin: 0 0 20px;
}
dt {
font-weight: bold;
}
del,
.disable {
text-decoration: line-through;
filter: alpha(opacity=50);
opacity: 0.5;
}
/* Table */
table,
th,
td {
border: 1px solid #343444;
}
table {
border-collapse: separate;
border-spacing: 0;
border-width: 1px 0 0 1px;
margin: 0 0 30px;
table-layout: fixed;
width: 100%;
}
caption,
th,
td {
font-weight: normal;
text-align: left;
}
th {
border-width: 0 1px 1px 0;
font-weight: bold;
}
td {
border-width: 0 1px 1px 0;
}
th,
td {
padding: 8px 12px;
}
/* Media */
embed,
object,
video {
margin-bottom: 20px;
max-width: 100%;
vertical-align: middle;
}
p > embed,
p > iframe,
p > object,
p > video {
margin-bottom: 0;
}
/* Forms
-------------------------------------------------------------- */
/* Fixes */
button,
input {
line-height: normal;
}
button,
input,
select,
textarea {
font-size: 100%;
line-height: inherit;
margin: 0;
vertical-align: baseline;
}
textarea {
overflow: auto;
/* Removes default vertical scrollbar in IE6/7/8/9 */
vertical-align: top;
/* Improves readability and alignment in all browsers */
}
input[type=checkbox] {
display: inline;
}
button,
input[type=button],
input[type=reset],
input[type=submit] {
line-height: 1;
cursor: pointer;
-webkit-appearance: button;
border: 0;
}
input[type=checkbox],
input[type=radio] {
padding: 0;
width: 20px;
height: 20px;
border-radius: 6px;
background: rgba(0, 0, 0, 0);
cursor: pointer;
vertical-align: sub;
/* Addresses excess padding in IE8/9 */
}
input[type=search] {
-webkit-appearance: textfield;
/* Addresses appearance set to searchfield in S5, Chrome */
}
input[type=search]::-webkit-search-decoration {
/* Corrects inner padding displayed oddly in S5, Chrome on OSX */
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Remove chrome yellow autofill */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;
}
/* Reset search styling */
input[type=search] {
outline: 0;
}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display: none;
}
/* Placeholder color */
::-webkit-input-placeholder {
color: #171412;
}
::-moz-placeholder {
color: #171412;
opacity: 1;
}
/* Since FF19 lowers the opacity of the placeholder by default */
:-ms-input-placeholder {
color: #171412;
}
/* Typography
-------------------------------------------------------------- */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: "DM Sans", sans-serif;
color: var(--Primary);
margin: 0;
text-rendering: optimizeLegibility;
}
h1,
.h1 {
font-size: 60px;
line-height: 81px;
}
h2,
.h2 {
font-size: 36px;
line-height: 50px;
}
h3,
.h3 {
font-size: 26px;
line-height: 28px;
}
h4,
.h4 {
font-size: 20px;
line-height: 30px;
}
h5,
.h5 {
font-size: 18px;
line-height: 30px;
}
h6,
.h6 {
font-size: 16px;
line-height: 28px;
}
.text-22 {
font-size: 22px;
line-height: 28px;
}
.text-15 {
font-size: 15px;
line-height: 22px;
}
.fw-4 {
font-weight: 400;
}
.fw-5 {
font-weight: 500;
}
.fw-6 {
font-weight: 600;
}
.fw-7 {
font-weight: 700;
}
.font-cardo {
font-family: "Cardo", serif !important;
}
.font-outfit {
font-family: "Outfit", serif !important;
}
.fs-15 {
font-size: 15px;
}
.fs-18 {
font-size: 18px;
}
.fs-20 {
font-size: 20px;
}
.h-full {
height: 100% !important;
}
/* link style
-------------------------------------------------------------- */
a {
text-decoration: none;
color: var(--Primary);
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a:hover, a:focus {
color: var(--Secondary);
outline: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* tf-container
-------------------------------------------------------------- */
.tf-container {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right: 14px;
padding-left: 14px;
width: 1428px;
max-width: 100%;
}
.tf-container .row {
margin-left: -14px !important;
margin-right: -14px !important;
}
.tf-container .row > * {
padding-left: 14px !important;
padding-right: 14px !important;
}
.tf-container.full {
width: 100%;
}
/* Extra classes
-------------------------------------------------------------- */
#wrapper {
width: 100vw;
}
.hidden {
display: none;
}
.block {
display: block;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed !important;
}
.position-unset {
position: unset !important;
}
.z-5 {
z-index: 5;
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.gap-10 {
gap: 10px;
}
.gap-20 {
gap: 20px;
}
.gap-40 {
gap: 40px;
}
.py-60 {
padding: 60px 0 !important;
}
.pt-0 {
padding-top: 0px !important;
}
.pt-25 {
padding-top: 25px;
}
.pt-40 {
padding-top: 40px;
}
.pt-60 {
padding-top: 60px !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.mb-8 {
margin-bottom: 8px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-60 {
margin-bottom: 60px;
}
.mt-0 {
margin-top: 0px;
}
.flex-grow {
flex-grow: 1 !important;
}
.row-reverse {
flex-direction: row-reverse !important;
}
.justify-start {
justify-content: start !important;
}
.justify-center {
justify-content: center !important;
}
.justify-end {
justify-content: flex-end !important;
}
.justify-between {
justify-content: space-between !important;
}
.items-center {
align-items: center !important;
}
.italic {
font-style: italic;
}
.cursor-pointer {
cursor: pointer;
}
.rounded-full {
border-radius: 9999px !important;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-x-auto::-webkit-scrollbar {
height: 3px;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
background: var(--Border);
border-radius: 999px;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-y-auto::-webkit-scrollbar {
width: 3px;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
background: var(--Border);
border-radius: 999px;
}
.line-clamp-2 {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
.tf-primary-color {
color: var(--Primary) !important;
}
.tf-secondary-color {
color: var(--Secondary) !important;
}
.text-white {
color: var(--White);
}
.bg-4 {
background-color: var(--bg-4);
}
.bg-white {
background-color: var(--White);
}
.bg-beige {
background-color: var(--bg-5);
}
.bg-main {
background-color: var(--bg-4) !important;
}
.letter-spacing-1 {
letter-spacing: 1px;
}
.letter-spacing-2 {
letter-spacing: -0.5px;
}
/*------------ Components ---------------- */
/*------------ header ---------------- */
.tf-top-bar {
background-color: var(--Secondary);
color: var(--White);
height: 29px;
}
.tf-top-bar p {
font-size: 13px;
}
.tf-top-bar.style-1 {
background-color: var(--Primary);
}
.tf-top-bar.style-2 {
background-color: var(--bg-2);
color: var(--Primary);
}
#header_main {
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
right: 0;
z-index: 100;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
-ms-transition: all 0.15s ease-out;
-o-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
border-bottom: 1px solid var(--Border);
}
#header_main .header-inner {
padding: 0 60px;
background-color: var(--White);
}
#header_main .header-inner .header-inner-wrap {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
#header_main .header-inner .header-right,
#header_main .header-inner .header-left {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
gap: 20px;
}
#header_main .header-inner .header-text {
font-size: 15px;
font-weight: 500;
}
#header_main .header-catalog > a {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 9px 22px;
border-radius: 4px;
color: var(--Primary);
}
#header_main .header-catalog > a i {
font-size: 10px;
}
#header_main .header-catalog > a::after {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
height: 66px;
}
#header_main .header-catalog > ul:hover {
border-radius: 4px 0 0 4px !important;
border-right: 0 !important;
}
#header_main .header-catalog ul {
position: absolute;
min-width: 330px;
border-radius: 4px;
background-color: var(--White);
border: 1px solid var(--Border);
opacity: 0;
visibility: hidden;
transform: translateY(21px);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
pointer-events: none;
}
#header_main .header-catalog ul .item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
height: 51px;
padding: 0 20px;
font-size: 16px;
font-weight: 500;
}
#header_main .header-catalog ul .title {
height: 60px;
padding-top: 9px;
font-size: 14px;
font-weight: 500;
}
#header_main .header-catalog ul .has-children > a {
position: relative;
}
#header_main .header-catalog ul .has-children > a::after {
position: absolute;
right: 20px;
font-family: "icomoon";
content: "\e91d";
font-size: 7px;
}
#header_main .header-catalog ul .has-children > a::before {
position: absolute;
content: "";
left: -1px;
bottom: 0px;
top: auto;
bottom: 0;
width: 2px;
height: 0;
background-color: var(--Secondary);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#header_main .header-catalog ul .has-children > a:hover {
background-color: var(--bg-4);
font-weight: 600;
}
#header_main .header-catalog ul .has-children > a:hover::before {
height: 100%;
top: 0px;
bottom: auto;
}
#header_main .header-catalog ul .has-children:hover .sub-menu {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: all;
}
#header_main .header-catalog ul .sub-menu {
/* background-color: var(--bg-4); */
border-radius: 0 4px 4px 0 !important;
border-left: 0 !important;
top: -1px;
left: 100%;
opacity: 0;
visibility: hidden;
width:500px;
}
#header_main .header-catalog:hover > a {
background-color: var(--bg-4);
}
#header_main .header-catalog:hover > ul {
opacity: 1;
visibility: visible;
transform: translateY(11px);
pointer-events: all;
}
#header_main .header-search {
max-width: 600px;
}
#header_main .header-btn {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 10px;
}
#header_main .navigation {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
#header_main .navigation > li {
position: relative;
height: 85px;
line-height: 85px;
}
#header_main .navigation > li.has-children {
padding-right: 15px;
}
#header_main .navigation > li.has-children::after {
position: absolute;
right: 0;
font-family: "icomoon";
content: "\e902";
font-size: 7px;
display: none;
}
#header_main .navigation > li > ul {
position: absolute;
left: -3px;
min-width: 280px;
padding: 20px;
border-radius: 4px;
background-color: var(--White);
border: 1px solid var(--Border);
opacity: 0;
visibility: hidden;
transform: translateY(0px);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
pointer-events: none;
box-shadow: 0px 6px 15px 0px rgba(64, 79, 104, 0.0509803922);
}
#header_main .navigation > li > ul > li:not(.has-item-children) {
border-radius: 4px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#header_main .navigation > li > ul > li:not(.has-item-children).current, #header_main .navigation > li > ul > li:not(.has-item-children):hover {
background-color: var(--bg-4);
}
#header_main .navigation > li > ul > li:not(.has-item-children).current a, #header_main .navigation > li > ul > li:not(.has-item-children):hover a {
color: var(--Secondary);
}
#header_main .navigation > li > ul a {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
height: 41px;
font-weight: 400;
font-size: 15px;
line-height: 40px;
padding: 0 20px;
}
#header_main .navigation > li:hover ul {
opacity: 1;
visibility: visible;
transform: translateY(-9px);
pointer-events: all;
}
#header_main .navigation > li:hover ul.mega-menu {
transform: translateX(-39.9%) translateY(-9px);
}
#header_main .navigation .mega-menu {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 910px;
gap: 60px;
padding: 35px 35px 27px;
transform: translateX(-39.9%) translateY(0px);
box-shadow: 0px 6px 15px 0px rgba(64, 79, 104, 0.0509803922);
}
#header_main .navigation .mega-menu li a {
height: unset;
padding: 6px 0;
line-height: 28px;
}
#header_main .navigation .mega-menu li.current a {
color: var(--Secondary);
}
#header_main .navigation .mega-menu .has-item-children {
width: 100%;
max-width: 240px;
}
#header_main .navigation .mega-menu .title {
font-weight: 500;
font-size: 18px;
line-height: 30px;
padding-bottom: 10px;
border-bottom: 1px solid var(--Border);
margin-bottom: 20px;
}
#header_main .navigation a,
#header_main .navigation li {
font-weight: 500;
font-size: 15px;
line-height: 86px;
}
#header_main .mobile-button {
width: 20px;
height: 10px;
position: relative;
flex-shrink: 0;
}
#header_main .mobile-button::before, #header_main .mobile-button::after {
position: absolute;
content: "";
left: 0;
right: 0;
height: 2px;
background-color: var(--Primary);
}
#header_main .mobile-button::before {
top: 0;
}
#header_main .mobile-button::after {
bottom: 0;
width: 16px;
}
#header_main.type-absolute {
position: absolute;
top: 0 !important;
border: 0;
}
#header_main.type-absolute .header-inner {
background-color: transparent;
}
#header_main.style-2 {
border-bottom: 0;
box-shadow: 0px 1px 4px 0px rgba(64, 79, 104, 0.05);
}
#header_main.style-2 .header-inner-wrap {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
#header_main.style-2 .navigation > li {
line-height: 90px;
height: 90px;
}
#header_main.style-3 .tf-button-default {
border-radius: 999px;
border: 0;
}
#header_main.style-3 .header-right {
width: 100%;
}
#header_main.style-3 .navigation .mega-menu {
left: 0;
transform: translateX(0) translateY(0px) !important;
}
#header_main.style-3 > li:hover .navigation .mega-menu {
transform: translateX(0) translateY(-9px) !important;
}
#header_main.style-4 .header-btn,
#header_main.style-4 .header-right {
gap: 40px;
}
#header_main.style-4 .header-search {
max-width: 300px;
}
#header_main.style-4 .header-search input {
border: 0;
}
#header_main.style-4 .header-login a {
padding-left: 0;
padding-right: 0;
border: 0;
background-color: transparent;
}
#header_main.style-4 .header-login a:hover {
color: var(--Secondary);
}
#header_main.style-4 .main-menu {
position: relative;
padding-left: 40px;
}
#header_main.style-4 .main-menu::after {
position: absolute;
content: "";
left: 0;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
height: 40px;
width: 1px;
background-color: var(--Border);
}
#header_main.style-6 .header-btn,
#header_main.style-6 .header-right {
gap: 20px;
}
#header_main.style-6 .header-search input {
border: 1px solid var(--Border);
}
#header_main.style-6 .header-register .tf-button-default {
background-color: var(--Secondary);
color: var(--White);
border-color: var(--Secondary);
}
#header_main.style-6 .header-register .tf-button-default:hover {
background-color: var(--Primary);
}
#header_main.style-6 .navigation > li {
line-height: 80px;
height: 80px;
}
#header_main.style-6 .navigation a, #header_main.style-6 .navigation li {
line-height: 80px;
}
#header_main.style-7 .header-inner-wrap {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
#header_main.style-7 .tf-button-default {
border-radius: 999px;
border: 0;
}
#header_main.style-7 .header-right {
width: 100%;
}
#header_main.style-7 > li:hover .navigation .mega-menu {
transform: translateX(0) translateY(-9px) !important;
}
#header_main.style-7 .header-join a,
#header_main.style-7 .header-search-icon i,
#header_main.style-7 .header-cart i {
color: var(--White);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#header_main.style-7 .header-join a:hover,
#header_main.style-7 .header-search-icon i:hover,
#header_main.style-7 .header-cart i:hover {
color: var(--Primary);
}
#header_main.style-7 .mobile-button::before, #header_main.style-7 .mobile-button::after {
background-color: var(--White);
}
#header_main.style-7 .header-login .tf-button-default {
border-radius: 4px;
border: 1px solid var(--White);
background-color: transparent;
color: var(--White);
}
#header_main.style-7 .header-login .tf-button-default:hover {
color: var(--Primary);
}
#header_main.style-7 .header-register .tf-button-default {
border-radius: 4px;
}
#header_main.style-7 .navigation > li::after,
#header_main.style-7 .navigation > li > a {
color: var(--White);
}
#header_main.style-8 .header-search {
max-width: 430px;
}
#header_main.style-8 .navigation {
position: relative;
padding-right: 20px;
}
#header_main.style-8 .navigation::after {
position: absolute;
content: "";
right: 0;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
height: 41px;
width: 1px;
background-color: var(--Border);
}
#header_main.style-9 .header-inner {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
background-color: var(--White);
padding: 0 40px;
}
#header_main.style-9 .navigation > li {
line-height: 80px;
height: 80px;
}
#header_main.style-9 .navigation a, #header_main.style-9 .navigation li {
line-height: 80px;
}
#header_main.style-10 .header-right {
width: 100%;
}
#header_main.style-10 .header-login a {
background-color: transparent;
border-color: var(--Primary);
}
#header_main.style-10 .header-login a:hover {
background-color: var(--bg-1);
}
#header_main.style-10 .header-inner-wrap {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
#header_main.style-10 .navigation .mega-menu {
left: 0;
transform: translateX(0) translateY(0px) !important;
}
#header_main.style-10 > li:hover .navigation .mega-menu {
transform: translateX(0) translateY(-9px) !important;
}
.mm-wrapper--position-left .mm-slideout,
.mm-wrapper--position-right .mm-slideout {
transform: none;
}
:root {
--mm-max-size: 360px !important;
}
#menu {
font-size: 16px;
font-weight: 500;
line-height: 19px;
color: var(--Secondary) !important;
background-color: var(--Primary) !important;
}
#menu > a.close {
position: absolute;
top: 10px;
left: unset;
right: 20px;
width: 30px;
height: 30px;
background-color: var(--bg-4);
border-radius: 50%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
#menu > a.close i {
font-size: 14px;
height: 14px;
color: var(--Primary);
}
#menu .mm-panels {
background-color: var(--White) !important;
}
#menu .mm-panels .mm-panel {
background-color: var(--White) !important;
}
#menu .mm-panels .mm-panel::-webkit-scrollbar {
width: 3px;
}
#menu .mm-panels .mm-panel::-webkit-scrollbar-thumb {
background: var(--Border);
border-radius: 999px;
}
#menu .mm-panels .mm-panel .mm-navbar {
background-color: var(--White) !important;
border-bottom: 1px solid var(--Border) !important;
}
#menu .mm-panels .mm-panel .mm-navbar .mm-navbar__title {
justify-content: start;
padding: 10px 20px;
height: 60px;
color: var(--Secondary) !important;
}
#menu .mm-panels .mm-panel .mm-listview {
padding: 30px 0px;
}
#menu .mm-panels .mm-panel .mm-listview .current {
background-color: var(--bg-4);
border-radius: 0px;
border-left: 2px solid var(--Secondary);
}
#menu .mm-panels .mm-panel .mm-listview .mm-listitem .mm-btn {
height: 51px;
}
#menu .mm-panels .mm-panel .mm-listview .mm-listitem .mm-btn::after {
position: absolute;
right: 20px;
font-family: "icomoon";
content: "\e91d";
font-size: 7px;
top: 50%;
right: 20px;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
border: 0;
width: unset;
height: unset;
}
#menu .mm-panels .mm-panel .mm-listview .mm-listitem::after {
display: none;
}
/*------------ footer ---------------- */
#footer.has-border-top .footer-wrap {
border-top: 1px solid var(--Border);
}
#footer .footer-body-wrap {
padding: 40px 0 40px;
}
#footer .footer-more-infor {
width: 100%;
max-width: 260px;
}
#footer .footer-more-infor .footer-logo {
margin-bottom: 36px;
margin-top: 8px;
}
#footer .footer-more-infor .address {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 13px;
margin-bottom: 26px;
}
#footer .footer-more-infor .address .icon {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
font-size: 22px;
color: var(--Soft-Text);
height: 22px;
}
#footer h5 {
margin-bottom: 21px;
}
#footer .footer-menu-list a {
line-height: 32px;
}
#footer .footer-subscribe {
width: 100%;
max-width: 329px;
}
#footer .footer-subscribe p {
margin-bottom: 25px;
}
#footer .footer-subscribe .form-subscribe {
margin-bottom: 30px;
}
#footer .footer-subscribe .get-app {
margin-bottom: 33px;
}
#footer .footer-bottom-wrap {
padding: 20px 0 20px;
border-top: 1px solid var(--Border);
}
#footer.style-2 .footer-body-wrap {
padding: 44px 0 68px;
}
#footer.style-2 .footer-bottom-wrap {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#footer.style-2 .footer-wrap {
background-color: var(--Primary);
}
#footer.style-2 .address i {
color: var(--White);
}
#footer.style-2 p {
color: var(--White);
}
#footer.style-2 .tf-social-icon a {
color: var(--White);
background-color: #242844;
}
#footer.style-2 h5 {
color: var(--White);
}
#footer.style-2 a {
color: var(--White);
}
#footer.style-2 a:hover {
color: var(--Secondary);
}
#footer.style-2 .form-subscribe input::placeholder,
#footer.style-2 .form-subscribe input {
color: var(--White) !important;
}
#footer.style-2 button {
color: var(--White);
}
#footer.style-2 button:hover {
color: var(--Secondary);
}
#footer.style-3 .footer-wrap {
background-color: var(--bg-4);
}
#footer.style-3 .footer-wrap .tf-social-icon a {
color: var(--bg-4);
background-color: var(--Primary);
}
#footer.style-3 .footer-body-wrap {
padding: 71px 0 67px;
}
#footer.style-4 .footer-wrap {
margin: 0 60px;
background-color: var(--Primary);
border-top-left-radius: 32px;
border-top-right-radius: 32px;
}
#footer.style-4 .footer-wrap .address i {
color: var(--White);
}
#footer.style-4 .footer-wrap p {
color: var(--White);
}
#footer.style-4 .footer-wrap .tf-social-icon a {
color: var(--White);
background-color: #242844;
}
#footer.style-4 .footer-wrap h5 {
color: var(--White);
}
#footer.style-4 .footer-wrap a {
color: var(--White);
}
#footer.style-4 .footer-wrap a:hover {
color: var(--Secondary);
}
#footer.style-4 .footer-body-wrap {
padding: 71px 0 69px;
}
#footer.style-4 .footer-bottom-wrap {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#footer.style-5 .footer-body-wrap {
padding: 23px 0 52px;
}
#footer.ft-h7 .footer-body-wrap {
padding: 67px 0 82px;
}
#footer.style-6 {
position: relative;
}
#footer.style-6 .footer-body-wrap {
padding: 64px 0 80px;
}
#footer.style-6 .footer-body-wrap .tf-social-icon a {
color: var(--Primary);
background-color: var(--White);
}
#footer.style-6 .tf-app-download li a {
background-color: var(--White);
}
#footer.style-6 .footer-img {
width: 216px;
position: absolute;
right: 0;
bottom: 0;
}
.tf-app-download {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tf-app-download li {
flex-shrink: 0;
width: 159.5px;
}
.tf-app-download li a {
padding: 10px 10px 10px 17px;
border-radius: 12px;
background-color: var(--bg-1);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
gap: 23px;
}
.tf-app-download li a .icon {
font-size: 15px;
color: var(--Primary);
width: 15px;
}
.tf-app-download li a .app {
position: relative;
}
.tf-app-download li a .app::before {
position: absolute;
content: "";
top: 0;
left: -13px;
height: 100%;
width: 1px;
background-color: var(--Primary);
opacity: 0.2;
}
.tf-app-download li a .app div:first-child {
font-weight: 400;
font-size: 12px;
line-height: 15px;
color: var(--Primary);
margin-bottom: 2px;
}
.tf-app-download li a .app div:last-child {
font-weight: 500;
font-size: 14px;
line-height: 19px;
color: var(--Primary);
}
.tf-app-download-style-2 li a {
background-color: var(--Primary);
}
.tf-app-download-style-2 li a .icon {
color: var(--White);
}
.tf-app-download-style-2 li a .app {
position: relative;
}
.tf-app-download-style-2 li a .app::before {
position: absolute;
content: "";
background-color: var(--White);
opacity: 0.1;
}
.tf-app-download-style-2 li a .app div:first-child {
color: var(--White);
}
.tf-app-download-style-2 li a .app div:last-child {
color: var(--White);
}
.tf-app-download-style-2.app-download-mobie {
gap: 30px;
}
.tf-app-download-style-2.app-download-mobie li {
width: 210px;
}
.tf-app-download-style-2.app-download-mobie li a {
padding: 12px 10px 12px 22px;
gap: 36px;
}
.tf-app-download-style-2.app-download-mobie li a .icon {
font-size: 22px;
width: 22px;
}
.tf-app-download-style-3 li a {
background-color: rgba(255, 255, 255, 0.07);
}
.tf-app-download-style-3 li a .icon {
color: var(--White);
}
.tf-app-download-style-3 li a .app {
position: relative;
}
.tf-app-download-style-3 li a .app::before {
position: absolute;
content: "";
background-color: var(--White);
opacity: 0.07;
}
.tf-app-download-style-3 li a .app div:first-child {
color: var(--White);
}
.tf-app-download-style-3 li a .app div:last-child {
color: var(--White);
}
/*------------ tabs ---------------- */
.widget-tabs.style-row .widget-menu-tab {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 41px;
border-bottom: 1px solid var(--Border);
}
.widget-tabs.style-row .widget-menu-tab .item-title {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
padding-bottom: 21px;
flex-shrink: 0;
font-size: 20px;
list-style: 30px;
font-weight: 500;
}
.widget-tabs.style-row .widget-menu-tab .item-title::after {
position: absolute;
content: "";
bottom: 0px;
left: auto;
right: 0;
width: 0;
height: 1px;
background-color: var(--Secondary);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.widget-tabs.style-row .widget-menu-tab .item-title.active, .widget-tabs.style-row .widget-menu-tab .item-title:hover {
color: var(--Secondary);
}
.widget-tabs.style-row .widget-menu-tab .item-title.active::after, .widget-tabs.style-row .widget-menu-tab .item-title:hover::after {
width: 100%;
left: 0px;
right: auto;
}
.widget-tabs.style-small .widget-menu-tab {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 41px;
}
.widget-tabs.style-small .widget-menu-tab .item-title {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
flex-shrink: 0;
font-size: 20px;
list-style: 30px;
font-weight: 500;
color: var(--Soft-Text);
}
.widget-tabs.style-small .widget-menu-tab .item-title::after {
position: absolute;
content: "";
bottom: 0px;
left: auto;
right: 0;
width: 0;
height: 1px;
background-color: var(--Secondary);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.widget-tabs.style-small .widget-menu-tab .item-title.active, .widget-tabs.style-small .widget-menu-tab .item-title:hover {
color: var(--Secondary);
}
.widget-tabs.style-small .widget-menu-tab .item-title.active::after, .widget-tabs.style-small .widget-menu-tab .item-title:hover::after {
width: 100%;
left: 0px;
right: auto;
}
.widget-tabs.style-small.type-left .widget-menu-tab {
justify-content: flex-start;
}
.widget-tabs.style-small.type-center .widget-menu-tab {
justify-content: center;
}
/*------------ button ---------------- */
.tf-button-default {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
width: max-content;
border: 1px solid var(--Border);
background-color: var(--White);
border-radius: 4px;
padding: 5px 19.5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.tf-button-default:hover {
background-color: var(--bg-1);
color: var(--Primary);
}
.tf-button-default.active {
background-color: var(--Primary);
border-color: var(--Primary);
color: var(--White);
}
.tf-button-default.active:hover {
background-color: #0d112b;
}
.tf-mobile-sidebar-btn {
display: none;
cursor: pointer;
padding: 8px;
margin: 0;
color: #fff;
background: var(--Secondary);
position: fixed;
top: 30%;
z-index: 6;
font-size: 18px;
line-height: 1;
opacity: 0.85;
}
.tf-mobile-sidebar-btn.btn-right {
right: 0;
border-radius: 4px 0 0 4px;
}
.tf-btn-arrow {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
width: max-content;
gap: 10px;
font-weight: 500;
font-size: 16px;
line-height: 28px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.tf-btn-arrow i {
font-size: 14px;
}
.tf-btn-arrow:hover {
color: var(--Secondary);
}
.tf-btn {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
width: max-content;
gap: 10px;
font-weight: 500;
font-size: 16px;
line-height: 28px;
color: var(--White);
background-color: var(--Secondary);
border-radius: 4px;
border: 1px solid var(--Secondary);
padding: 12px 35px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.tf-btn i {
font-size: 14px;
}
.tf-btn:hover {
background-color: var(--Secondary);
color: var(--White);
border-color: var(--Secondary);
}
.tf-btn.style-secondary {
background-color: var(--Secondary);
color: var(--White);
border-color: var(--Secondary);
}
.tf-btn.style-secondary:hover {
background-color: #e95e25;
}
.tf-btn.style-third {
background-color: var(--White);
color: var(--Primary);
}
.tf-btn.style-third:hover {
background-color: var(--Primary);
border-color: var(--Primary);
color: var(--White);
}
.tf-btn.style-fourth {
background-color: var(--White);
color: var(--Secondary);
border-color: var(--Secondary);
}
.tf-btn.style-fourth:hover {
background-color: var(--bg-4);
}
.tf-btn.style-fifth {
background-color: var(--bg-1);
color: var(--Primary);
}
.tf-btn.style-fifth:hover {
background-color: #d1d1d1;
}
.switch-item[type=checkbox] {
position: relative;
width: 55px;
min-width: 55px;
height: 30px;
-webkit-appearance: none;
background: var(--bg-4);
border-radius: 999px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-right: 0;
}
.switch-item[type=checkbox]::before {
content: "";
width: 24px;
height: 24px;
border-radius: 50%;
position: absolute;
top: 3px;
left: 3px;
background: var(--White);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.switch-item[type=checkbox]:checked {
background-color: var(--Primary);
}
.switch-item[type=checkbox]:checked::before {
left: 28px;
}
.btn-style-2 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 12px;
}
.btn-style-2 .btn {
padding: 7px 7px 3px 7px;
border: 1px solid var(--Border);
border-radius: 12px;
}
.btn-style-2 .btn i {
font-size: 15px;
}
.btn-style-2 .btn-edit {
background-color: var(--bg-4);
}
.btn-style-2 .btn-edit:hover {
color: var(--bg-4);
background-color: var(--Primary);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btn-style-2 .btn-remove:hover {
color: var(--White);
background-color: var(--Secondary);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/*------------ range slider ---------------- */
/*range-slider
---------------------*/
.range-slider #range-two-val {
margin-bottom: 10px;
height: 6px;
box-shadow: none;
border: 0;
background-color: var(--Border);
}
.range-slider #range-two-val .noUi-connects .noUi-connect {
background-color: var(--Secondary);
}
.range-slider #range-two-val .noUi-origin .noUi-handle {
cursor: pointer;
width: 16px;
height: 16px;
background-color: var(--White);
border: 2px solid var(--Secondary);
border-radius: 50%;
right: -8px;
}
.range-slider #range-two-val .noUi-origin .noUi-handle::after, .range-slider #range-two-val .noUi-origin .noUi-handle::before {
display: none;
}
.range-slider .value {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.range-slider .value > div {
font-size: 15px;
font-weight: 400;
line-height: 28px;
color: var(--Primary);
}
/*------------ form ---------------- */
form {
position: relative;
z-index: 30;
}
form textarea,
form input[type=text],
form input[type=password],
form input[type=datetime],
form input[type=datetime-local],
form input[type=date],
form input[type=month],
form input[type=time],
form input[type=week],
form input[type=number],
form input[type=email],
form input[type=url],
form input[type=search],
form input[type=tel],
form input[type=color] {
outline: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
padding: 8px 19px;
font-size: 14px;
font-weight: 400;
line-height: 28px;
background-color: var(--White);
border: 1px solid var(--Border);
border-radius: 4px;
color: var(--Soft-Text);
overflow: hidden;
margin-bottom: 0;
}
form textarea::placeholder,
form input[type=text]::placeholder,
form input[type=password]::placeholder,
form input[type=datetime]::placeholder,
form input[type=datetime-local]::placeholder,
form input[type=date]::placeholder,
form input[type=month]::placeholder,
form input[type=time]::placeholder,
form input[type=week]::placeholder,
form input[type=number]::placeholder,
form input[type=email]::placeholder,
form input[type=url]::placeholder,
form input[type=search]::placeholder,
form input[type=tel]::placeholder,
form input[type=color]::placeholder {
font-size: 14px;
font-weight: 400;
line-height: 28px;
color: var(--Soft-Text);
}
form textarea.style-default,
form input[type=text].style-default,
form input[type=password].style-default,
form input[type=datetime].style-default,
form input[type=datetime-local].style-default,
form input[type=date].style-default,
form input[type=month].style-default,
form input[type=time].style-default,
form input[type=week].style-default,
form input[type=number].style-default,
form input[type=email].style-default,
form input[type=url].style-default,
form input[type=search].style-default,
form input[type=tel].style-default,
form input[type=color].style-default {
padding: 0;
border: 0 !important;
border-radius: 0;
background-color: transparent;
}
form textarea.style-1,
form input[type=text].style-1,
form input[type=password].style-1,
form input[type=datetime].style-1,
form input[type=datetime-local].style-1,
form input[type=date].style-1,
form input[type=month].style-1,
form input[type=time].style-1,
form input[type=week].style-1,
form input[type=number].style-1,
form input[type=email].style-1,
form input[type=url].style-1,
form input[type=search].style-1,
form input[type=tel].style-1,
form input[type=color].style-1 {
font-size: 15px;
border-radius: 0;
padding: 18px 0 3px;
border: 0;
border-bottom: 2px solid var(--Soft-Text);
color: var(--Soft-Text);
}
form button,
form input[type=button],
form input[type=reset],
form input[type=submit] {
background-color: transparent;
overflow: hidden;
padding: 0;
}
form textarea {
height: 140px;
}
form .cols {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 22px 30px;
width: 100%;
}
form .cols.cols-two > * {
width: 50%;
}
.form-search fieldset input {
padding-right: 45px;
}
.form-search .button-submit {
position: absolute;
right: 20px;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
height: 20px;
}
.form-search .button-submit button {
padding: 0;
}
.form-search .button-submit i {
color: var(--Soft-Text);
}
fieldset {
margin-bottom: 0px;
width: 100%;
}
.form-subscribe {
padding-bottom: 13px;
border-bottom: 1px solid var(--Border);
}
.form-subscribe input {
font-size: 15px !important;
color: var(--Primary) !important;
padding-right: 70px !important;
}
.form-subscribe input ::placeholder {
font-size: 15px !important;
color: var(--Primary) !important;
}
.form-subscribe .button-submit {
position: absolute;
right: 0px;
top: 0px;
}
.tf-field {
position: relative;
}
.tf-field .tf-input {
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.tf-field .tf-input:not(:placeholder-shown), .tf-field .tf-input:focus {
border-color: var(--Primary);
}
.tf-field .tf-input:not(:placeholder-shown) ~ .tf-field-label, .tf-field .tf-input:focus ~ .tf-field-label {
top: 6px;
}
.tf-field .tf-input:not(:placeholder-shown) ~ .tf-field-label.type-textarea, .tf-field .tf-input:focus ~ .tf-field-label.type-textarea {
top: -7px;
}
.tf-field .tf-input::placeholder {
color: transparent;
}
.tf-field .tf-field-label {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0px;
transition: all 0.1s ease;
cursor: text;
}
.tf-field .tf-field-label.type-textarea {
top: 3px;
transform: translateY(0);
}
.form-search-courses fieldset input {
padding-right: 90px;
padding-left: 70px;
height: 80px;
border: 0;
font-size: 15px;
color: var(--Primary);
}
.form-search-courses fieldset input::placeholder {
font-size: 15px;
color: var(--Primary);
}
.form-search-courses .icon {
position: absolute;
left: 30px;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.form-search-courses .icon i {
font-size: 20px;
}
.form-search-courses .button-submit {
position: absolute;
right: 10px;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.form-search-courses .button-submit button {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: var(--Primary);
padding: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.form-search-courses .button-submit button:hover {
background-color: #0d112b;
}
.form-search-courses .button-submit i {
color: var(--White);
}
.form-search-course {
position: relative;
border: 1px solid var(--Border);
border-radius: 12px;
}
.form-search-course fieldset input {
padding-right: 90px;
padding-left: 70px;
height: 80px;
border: 0;
font-size: 15px;
color: var(--Primary);
}
.form-search-course fieldset input::placeholder {
font-size: 15px;
color: var(--Primary);
}
.form-search-course .icon {
position: absolute;
left: 30px;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.form-search-course .icon i {
font-size: 20px;
}
.form-search-course .button-submit {
position: absolute;
right: 10px;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.form-search-course .button-submit button {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--Primary);
padding: 20px 30px;
border-radius: 12px;
color: var(--White);
gap: 10px;
}
.form-search-course .button-submit i {
color: var(--White);
}
.form-get-it-now .cols {
margin-bottom: 23px;
}
/*------------ nice select ---------------- */
.nice-select {
border-radius: 12px;
border: 1px solid var(--Primary) !important;
padding: 15px 21px !important;
}
.nice-select.border-radius-1 {
border-radius: 120px;
padding: 12.5px 25px;
}
.nice-select::after {
right: 10px;
border-color: var(--Secondary);
}
.nice-select > span {
font-weight: 400;
font-size: 16px;
line-height: 28px;
color: var(--Primary);
}
.nice-select > .list {
margin-top: 11px;
border: 1px solid var(--Border);
border-radius: 16px;
max-height: unset;
padding: 28px 20px 20px 21px;
}
.nice-select > .list .option {
padding: 0 15px;
border-radius: 12px;
font-weight: 400;
font-size: 15px;
color: var(--Primary);
position: relative;
}
.nice-select > .list .option.selected {
color: var(--Primary);
font-weight: 400;
}
.nice-select > .list .option.selected::after {
position: absolute;
font-family: "icomoon" !important;
content: "\e90a";
right: 18px;
top: 50%;
transform: translateY(-50%);
}
.nice-select > .list.style-radio {
padding: 28px 20px 30px 21px;
}
.nice-select > .list.style-radio .option {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
padding-left: 41px !important;
}
.nice-select > .list.style-radio .option::after {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid var(--Border);
}
.nice-select > .list.style-radio .option.selected::after {
border: 4px solid var(--Primary);
}
.nice-select.open {
border-color: var(--Border) !important;
z-index: 50;
}
.nice-select.style-white span.current {
color: var(--White) !important;
}
.nice-select.style-white::after {
border-color: var(--White) !important;
}
.nice-select.default {
padding: 0;
padding-right: 18px;
border: 0 !important;
}
.nice-select.default::after {
right: 0;
top: 44%;
right: 2px;
}
.nice-select.default ul.list {
width: 220px;
right: 0;
left: unset;
}
.tf-select select {
position: relative;
border-radius: 12px;
border: 1px solid var(--Border) !important;
padding: 12px 20px;
font-size: 15px;
line-height: 28px;
color: var(--Secondary);
outline: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.tf-select select:focus {
border-color: var(--Secondary) !important;
}
.tf-field-label {
position: relative;
}
.tf-field-label .tf-input {
padding: 12px 18px;
}
.tf-field-label .tf-input:focus {
border-color: var(--Black);
}
.tf-field-label .tf-input:not(:placeholder-shown) ~ .tf-label, .tf-field-label .tf-input:focus ~ .tf-label {
top: 0;
transform: translateY(-50%);
padding: 0 8px;
background-color: var(--White);
}
.tf-field-label .tf-input::placeholder {
color: transparent;
}
.tf-field-label .tf-label {
position: absolute;
top: 11px;
left: 18px;
transition: all 0.1s ease;
cursor: text;
font-size: 15px;
font-weight: 400;
line-height: 28px;
color: var(--Secondary);
}
.tf-select-label {
position: relative;
z-index: 2;
}
.tf-select-label .select-label {
position: absolute;
top: 11px;
left: 18px;
transition: all 0.1s ease;
cursor: text;
font-size: 15px;
font-weight: 400;
line-height: 28px;
color: var(--Secondary);
z-index: 51;
}
.tf-select-label.focused .select-label {
top: 0;
transform: translateY(-50%);
padding: 0 8px;
background-color: var(--White);
}
select {
appearance: none;
}
/*------------ slider ---------------- */
.swiper-wrapper .swiper-slide {
width: auto;
}
.widget-saying-list .swiper-slide {
margin-top: 20px;
}
.widget-saying-list .swiper-slide.swiper-slide-active {
margin-top: 0px !important;
}
.widget-saying-list .swiper-slide.swiper-slide-prev, .widget-saying-list .swiper-slide.swiper-slide-next {
margin-top: 10px !important;
}
.widget-saying-middle .widget-saying-prev {
margin-left: 36px;
}
.widget-saying-middle .widget-saying-next {
margin-right: 36px;
}
.swiper-pagination.pagination-slider {
position: unset;
padding-top: 40px;
height: 68px;
}
.swiper-pagination.pagination-slider.pt-32 {
padding-top: 32px;
}
.swiper-pagination.pagination-slider.pagination-white .swiper-pagination-bullet {
background-color: var(--Border);
}
.swiper-pagination.pagination-slider.pagination-white .swiper-pagination-bullet:hover::before, .swiper-pagination.pagination-slider.pagination-white .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
border-color: #505050;
border-top-color: #d9d9d9;
}
.swiper-pagination.pagination-slider .swiper-pagination-bullet {
margin: 10px 13px;
background-color: var(--Primary);
position: relative;
opacity: 1 !important;
}
.swiper-pagination.pagination-slider .swiper-pagination-bullet::before {
position: absolute;
content: "";
width: 28px;
height: 28px;
border: 1px solid transparent;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-80deg);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.swiper-pagination.pagination-slider .swiper-pagination-bullet:hover::before, .swiper-pagination.pagination-slider .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
border-color: #122223;
border-top-color: #d9d9d9;
transform: translate(-50%, -50%) rotate(-45deg);
}
.btns-style-arrow {
width: 55px;
height: 36px;
margin: 0;
border-radius: 30px;
background-color: var(--White);
border: 1px solid var(--Border);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btns-style-arrow:hover {
border-color: var(--Primary);
background-color: var(--bg-4);
}
.btns-style-arrow::after {
font-size: 12px;
color: #1a1a1a;
font-weight: 700;
}
.btns-style-arrow.no-border {
border: 0;
}
.btns-style-arrow.swiper-button-prev {
left: -71px;
}
.btns-style-arrow.swiper-button-next {
right: -71px;
}
.swiper-bottom {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 20px;
align-items: center;
margin-top: 23px;
}
.swiper-bottom > div {
position: unset;
}
.gallery {
width: 100%;
padding: 0px 120px;
position: relative;
}
.gallery-thumbs {
width: 100%;
padding: 0;
margin-bottom: 12px;
}
.gallery-thumbs .swiper-slide {
width: 120px;
height: 120px;
text-align: center;
overflow: hidden;
opacity: 0.6;
margin-top: 20px;
}
.gallery-slider {
z-index: 2;
position: relative;
}
.gallery-slider .widget-saying-content {
margin-top: 17px;
}
.gallery .swiper-slide-active {
opacity: 1;
margin-top: 0px !important;
}
.gallery .swiper-slide.swiper-slide-prev, .gallery .swiper-slide.swiper-slide-next {
margin-top: 10px !important;
}
.gallery .swiper-slide img {
height: 80px;
border-radius: 30px;
opacity: 0.4;
}
.gallery .widget-saying-button {
width: 35px;
height: 33px;
top: 65px;
z-index: 1;
position: absolute;
}
.gallery .widget-saying-button::before, .gallery .widget-saying-button::after {
content: "";
}
/*------------ off canvas ---------------- */
.offcanvas {
z-index: 3000;
}
.offcanvas-backdrop {
cursor: url("../icons/cursor-close.svg"), auto;
}
.offcanvas-backdrop.show {
opacity: 1;
}
.offcanvas-search {
height: max-content !important;
}
.offcanvas-search > .btn-close::before {
position: absolute;
right: 10px;
top: 10px;
background-color: var(--bg-4);
width: 30px;
height: 30px;
font-size: 14px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
z-index: 1;
}
.offcanvas-search .offcanvas-body {
padding: 60px 0;
}
.offcanvas-search .form-search-courses input {
border: 1px solid var(--Border);
border-radius: 8px;
}
.offcanvas-search .form-search-courses .button-submit button {
border-radius: 8px;
background-color: var(--Secondary);
}
/*------------ product ---------------- */
.course-item.h240 .features {
height: 240px !important;
}
.course-item.h240 .bottom {
padding-top: 12px;
}
.course-item.h190 .features {
height: 190px;
}
.course-item .features {
position: relative;
border-radius: 4px;
overflow: hidden;
}
.course-item .features .box-tags {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
}
.course-item .features .box-wishlist {
position: absolute;
top: 10px;
right: 10px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border-radius: 50%;
background: rgba(19, 24, 54, 0.3019607843);
box-shadow: 0px 6px 15px 0px rgba(64, 79, 104, 0.0509803922);
color: var(--White);
opacity: 0;
visibility: hidden;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.course-item .features .box-wishlist i {
font-size: 16px;
}
.course-item .features .box-wishlist.active {
background-color: var(--White);
color: var(--Secondary);
}
.course-item .content {
padding-top: 15px;
}
.course-item .content > p {
margin-bottom: 15px;
}
.course-item .meta {
margin-bottom: 6px;
color: var(--Soft-Text);
gap: 12px;
}
.course-item .meta .meta-item i {
font-size: 14px;
}
.course-item .bottom {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--Border);
padding-top: 13px;
}
.course-item h6, .course-item h5 {
margin-bottom: 10px;
}
.course-item h6 a, .course-item h5 a {
background-repeat: no-repeat;
background-position-y: 0px;
background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
background-size: 0 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.course-item .ratings {
margin-bottom: 2px;
}
.course-item .price {
color: var(--Secondary);
}
.course-item .author {
color: var(--Soft-Text);
margin-bottom: 10px;
}
.course-item .author a:hover {
color: var(--Secondary);
}
.course-item .box-tags {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.course-item .box-tags .item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
padding: 1px 10px;
border-radius: 4px;
}
.course-item .box-tags .item.best-seller {
background-color: #eceba2;
}
.course-item .box-tags .item.featured {
background-color: var(--Secondary);
color: var(--White);
}
.course-item:hover .features .box-wishlist {
opacity: 1;
visibility: visible;
}
.course-item:hover h6 a {
background-size: 100% 100%;
transition-delay: 0.3s;
}
.course-item.style-2 {
border-radius: 12px;
overflow: hidden;
background-color: var(--White);
}
.course-item.style-2 .features {
border-radius: 0;
}
.course-item.style-2 .features img {
min-height: 240px;
object-fit: cover;
}
.course-item.style-2 .content {
padding: 20px 20px 12px 20px;
}
.course-item.style-2 .price {
font-size: 18px;
line-height: 30px;
}
.course-item.style-2 .bottom {
padding-top: 11px;
}
.course-item.style-2.has-bg {
background-color: #f6f7f9;
}
.course-item.style-2.has-bg .content {
padding-top: 21px;
}
.course-item.style-2.has-bg .content .meta {
margin-top: -7px;
}
.course-item.style-2.has-boxshadow {
box-shadow: 0px 1px 4px 0px rgba(64, 79, 104, 0.0509803922);
}
.course-item.style-2.has-boxshadow .content .meta {
margin-top: -4px;
}
.course-item.style-2.has-padding .features {
margin: 10px 10px 0 10px;
border-radius: 4px;
}
.course-item.style-2.has-padding .content {
padding-top: 21px;
}
.course-item.style-2.has-padding .content .meta {
margin-top: -6px;
}
.course-item.style-2.has-border {
border: 1px solid var(--Border);
}
.course-item.style-3 .features {
border-radius: 12px 12px 0 0;
}
.course-item.style-3 .content {
padding: 14px 20px 13px 20px;
border: 1px solid var(--Border);
border-top: 0;
border-radius: 0 0 12px 12px;
}
.course-item.style-row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 20px;
padding-bottom: 19px;
margin-bottom: 20px;
border-bottom: 1px solid var(--Border);
}
.course-item.style-row .features {
max-width: 320px;
height: auto;
flex: none;
}
.course-item.style-row .content {
padding-top: 0;
width: 100%;
}
.course-item.style-row .content h5 {
margin-bottom: 2px;
}
.course-item.style-row .content .short-description {
margin-bottom: 3px;
}
.course-item.style-row .top {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-top: -8px;
margin-bottom: 6px;
}
.course-item.title-small h6 {
font-size: 16px;
line-height: 28px;
}
.counter .number-counter .icon {
margin-bottom: 19px;
}
.wrap-courses.last-no-border {
margin-bottom: 21px;
}
.wrap-courses.last-no-border .course-item:last-child {
border-bottom: none;
padding-bottom: 0px;
}
.wrap-courses.style-right {
padding-right: 3px;
}
.wrap-courses.style-left {
padding-left: 3px;
}
/*------------ blog ---------------- */
.hover-img .image-wrap {
overflow: hidden;
}
.hover-img .image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;
transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;
transition: transform 500ms ease;
object-position: left;
}
.hover-img:hover .image-wrap img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
-webkit-transition: all 2s cubic-bezier(0.3, 1, 0.35, 2) 0s;
transition: all 2s cubic-bezier(0.3, 1, 0.35, 2) 0s;
}
.meta {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
gap: 10px;
flex-wrap: wrap;
}
.meta .meta-item {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
gap: 7px;
}
.meta .meta-item i {
font-size: 16px;
}
.meta .meta-item:not(:last-child) {
padding-right: 10px;
}
.meta .meta-item:not(:last-child)::after {
position: absolute;
content: "";
right: 0;
width: 1px;
height: 16px;
background-color: var(--Border);
}
.meta a:hover {
color: var(--Secondary) !important;
}
.blog-article-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 11px;
}
.blog-article-item .article-thumb {
border-radius: 4px;
width: 100%;
height: 260px;
}
.blog-article-item .article-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 4px;
}
.blog-article-item .article-label {
color: var(--Soft-Text);
}
.blog-article-item h3 {
line-height: 36px;
}
.blog-article-item.style-row {
flex-direction: row;
gap: 40px;
}
.blog-article-item.style-row .article-thumb {
height: 350px;
width: 450px;
flex-shrink: 0;
width: 47.9%;
}
.blog-article-item.style-row .article-content {
padding-top: 26px;
gap: 13px;
flex-grow: 1;
}
.blog-article-item.style-row .article-content > p {
font-size: 15px;
}
.blog-article-item.style-row .article-content > a {
margin-top: 5px;
}
.blog-article-item.style-row .meta-item {
color: var(--Soft-Text);
}
.blog-article-item.style-large {
gap: 31px;
}
.blog-article-item.style-large .article-thumb {
height: unset;
}
.blog-article-item.style-large .article-content {
gap: 12px;
}
.blog-article-item.style-large .article-content .meta {
margin: 4px 0 5px;
}
.blog-article-item.style-large .meta-item {
color: var(--Soft-Text);
}
.blog-article-item.padding-content {
border: 1px solid var(--Border);
border-radius: 12px;
overflow: hidden;
}
.blog-article-item.padding-content .article-thumb {
border-radius: 0;
}
.blog-article-item.padding-content .article-content {
padding: 0 19px 12px;
}
.blog-article-item.style-2 {
overflow: hidden;
background-color: var(--White);
border-radius: 12px;
box-shadow: 0px 1px 4px 0px rgba(64, 79, 104, 0.05);
gap: 0;
}
.blog-article-item.style-2 .article-thumb {
border-radius: 0px;
}
.blog-article-item.style-2 .article-content {
padding: 12px 20px;
}
/*------------ testimonial ---------------- */
.testimonials-item {
padding: 40px;
background-color: var(--White);
}
.testimonials-item .testimonials-item-header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
padding-bottom: 40px;
}
.testimonials-item .testimonials-item-header .testimonials-item-img {
height: 80px;
width: 80px;
}
.testimonials-item .testimonials-item-header .testimonials-item-img img {
border-radius: 30px;
}
.testimonials-item .testimonials-item-header .testimonials-item-info {
padding: 0 0 0 30px;
}
.testimonials-item .testimonials-item-header .testimonials-item-info .name {
font-size: 18px;
line-height: 30px;
}
.testimonials-item .testimonials-item-text {
padding-bottom: 40px;
}
.testimonials-item .testimonials-item-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.testimonials-item .testimonials-item-content .icon i {
font-size: 25px;
color: var(--Border);
}
.testimonials-item-style-2 {
background-color: #FFFFFF;
padding: 40px 40px 30px 40px;
border-radius: 12px;
box-shadow: 0px 1px 4px 0px rgba(64, 79, 104, 0.05);
}
.testimonials-item-style-2 .testimonials-item-header {
display: flex;
gap: 30px;
align-items: center;
margin-bottom: 32px;
}
.testimonials-item-style-2 .testimonials-item-header .image-wrap img {
width: 80px;
height: 80px;
border-radius: 30px;
}
.testimonials-item-style-2 p {
font-size: 16px;
color: var(--Primary);
margin-bottom: 24px;
}
.testimonials-item-style-2 .statings-wrap {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.testimonials-item-style-2 .statings-wrap .icon {
font-size: 25px;
color: var(--Border);
}
/*------------ accordion ---------------- */
.tf-accordion .tf-accordion-item {
position: relative;
}
.tf-accordion .tf-accordion-item .tf-accordion-header {
padding-bottom: 20px;
}
.tf-accordion .tf-accordion-item .tf-accordion-header .tf-accordion-button {
padding-right: 20px;
font-size: 18px;
font-weight: 500;
line-height: 30px;
}
.tf-accordion .tf-accordion-item .tf-accordion-header .tf-accordion-button::after {
content: "\e90f";
font-family: "icomoon";
transition: all 0.3s ease-in-out;
font-size: 12px;
}
.tf-accordion .tf-accordion-item .tf-accordion-header .tf-accordion-button:is(.collapsed)::after {
content: "\e90f";
transform: rotate(180deg);
}
.tf-accordion .tf-accordion-item .tf-accordion-content p {
font-size: 15px;
}
.tf-accordion-default {
padding: 42px 60px 26px;
background-color: var(--bg-4);
border-radius: 12px;
}
.tf-accordion-default .tf-accordion-item {
position: relative;
padding: 11px 0 20px;
border-bottom: 1px solid var(--Border);
}
.tf-accordion-default .tf-accordion-item .tf-accordion-button .rectangle-314 {
margin-right: 10px;
padding: 0 2px;
border-radius: 4px;
background-color: var(--Secondary);
transition: all 0.3s ease-in-out;
}
.tf-accordion-default .tf-accordion-item .tf-accordion-button::after {
content: "\e90f";
position: absolute;
right: 0;
font-family: "icomoon";
}
.tf-accordion-default .tf-accordion-item .tf-accordion-button.collapsed .rectangle-314 {
padding: 0 2px;
background-color: var(--Primary);
}
.tf-accordion-default .tf-accordion-item:last-child {
border: none;
padding-bottom: 10px;
}
.tf-accordion-style-2 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 20px;
}
.tf-accordion-style-2 .tf-accordion-item {
padding: 22px 0px 19px 30px;
border: 1px solid var(--Border);
border-radius: 12px;
}
.tf-accordion-style-2 .tf-accordion-item .tf-accordion-header {
padding-bottom: 0px;
}
.tf-accordion-style-2 .tf-accordion-item .tf-accordion-header .tf-accordion-button {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.tf-accordion-style-2 .tf-accordion-item .tf-accordion-header span {
padding: 0 30px 0 0;
}
.tf-accordion-style-2 .tf-accordion-content {
padding-right: 10px;
}
.tf-accordion-style-2 .tf-accordion-content p {
margin-top: 20px;
}
.tf-accordion-style-3 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 20px;
}
.tf-accordion-style-3 .tf-accordion-item {
padding: 30px 30px 15px 30px;
border: 1px solid var(--Border);
border-radius: 4px;
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-header {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-header .tf-accordion-button {
position: relative;
padding: 0 30px;
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-header .tf-accordion-button::after {
position: absolute;
left: 0;
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .list:first-child {
border-top: 1px solid var(--Border);
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .list {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 10px;
padding: 20px 0;
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .list .icon > i {
font-size: 15px;
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .list .text {
font-size: 15px;
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .list .tf-accordion-btn {
position: absolute;
right: 0;
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .btn-add {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 10px;
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .btn-add .btn-article {
background-color: var(--bg-1);
color: var(--Primary);
border-color: var(--Primary);
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .btn-add .btn-article:hover {
background-color: var(--Primary);
color: var(--White);
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .btn-add .btn-Description {
background-color: var(--bg-4);
color: var(--Secondary);
border-color: var(--Secondary);
}
.tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .btn-add .btn-Description:hover {
background-color: var(--Secondary);
color: var(--White);
}
/*------------ shop ---------------- */
.shop-item {
display: block;
padding: 40px 40px 0 40px;
}
.shop-item .shop-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;
transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;
transition: transform 500ms ease;
}
.shop-item:hover img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
-webkit-transition: all 2s cubic-bezier(0.3, 1, 0.35, 2) 0s;
transition: all 2s cubic-bezier(0.3, 1, 0.35, 2) 0s;
}
.shop-item .content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: center;
}
.shop-item .content .fw-5 {
font-size: 18px;
line-height: 30px;
}
.shop-item .content .price {
color: var(--Secondary);
}
.shop-item .content .ratings {
padding-bottom: 10px;
}
.shop-item:hover img {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.order-comleted .order-header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 48px;
}
.order-comleted .order-header .icon {
height: 80px;
width: 80px;
border-radius: 50%;
background-color: var(--bg-4);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 13px;
}
.order-comleted .order-header .icon i {
font-size: 40px;
color: var(--Secondary);
}
.order-comleted .order-header h2 {
font-weight: 700;
margin-bottom: 5px;
}
.order-comleted .order-header .text-content {
font-size: 15px;
}
.order-comleted .order-info {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
padding: 33px 60px 32px;
background-color: var(--bg-4);
border: 2px dashed var(--Secondary);
border-radius: 8px;
margin-bottom: 57px;
margin-left: 10px;
margin-right: 10px;
}
.order-comleted .sidebar-shop {
border-radius: 12px;
}
.order-comleted .sidebar-shop .your-order {
padding: 34px 40px 32px;
border: 1px solid var(--Border);
border-radius: 12px;
margin-left: 11px;
margin-right: 11px;
}
.order-comleted .sidebar-shop .your-order .title {
font-size: 22px;
font-weight: 500;
margin-bottom: 23px;
}
.order-comleted .sidebar-shop .your-order .item-order {
padding-bottom: 20px;
}
.order-comleted .divider {
padding-bottom: 11px;
border-bottom: 1px solid var(--Border);
margin-bottom: 11px;
}
.order-comleted .text {
font-weight: 500;
font-size: 15px;
}
.order-comleted .text-1 {
font-size: 15px;
margin-bottom: 2px;
}
.order-comleted .text-2 {
font-weight: 500;
font-size: 20px;
line-height: 30px;
color: var(--Secondary);
}
/*------------ map ---------------- */
/* MAP */
.map-wrap {
position: relative;
z-index: 20;
}
.map-wrap #map {
height: 700px;
}
#map {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#map .infoBox {
margin-left: 170px;
margin-bottom: -100px;
}
.map-marker-container {
position: absolute;
margin-top: 10px;
transform: translate3d(-50%, -100%, 0);
}
.map-marker-container .marker-container {
position: relative;
top: 25px;
left: 10px;
width: 46px;
height: 46px;
z-index: 1;
border-radius: 50%;
cursor: pointer;
-webkit-perspective: 1000;
}
.map-marker-container .marker-container .marker-card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
position: absolute;
z-index: 1;
}
.map-marker-container .marker-container .marker-card .face {
position: absolute;
width: 20px;
height: 20px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
color: #fff;
z-index: 100;
border-radius: 50%;
box-sizing: content-box;
background-clip: content-box;
line-height: 46px;
font-size: 24px;
}
.map-marker-container .marker-container .marker-card .face.front img {
position: absolute;
left: -25px;
top: -19px;
height: 70px;
width: 70px;
}
.map-marker-container .marker-container .marker-card .face::after {
position: absolute;
top: 50%;
left: 50%;
width: 25px;
height: 25px;
border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transform: translate(-20%, -20%);
box-shadow: 0px 0px 0px 10px rgba(226, 116, 71, 0.2);
-webkit-animation: ripple 2s infinite;
animation: ripple 2s infinite;
}
.map-marker-container .marker-container .marker-card .face::after {
content: "";
position: absolute;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.map-marker-container .marker-container .marker-card .face > div {
position: absolute;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 99;
}
.map-listing-item {
position: relative;
}
.map-listing-item .inner-box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 10px;
background: #ffffff;
width: max-content;
box-shadow: 0px 10px 25px rgba(54, 95, 104, 0.1);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 10px;
padding: 10px;
}
.map-listing-item .inner-box .infoBox-close {
position: absolute;
right: 10px;
top: 10px;
width: 26px;
height: 26px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
color: var(--Secondary);
font-size: 20px;
border-radius: 50%;
z-index: 9;
text-align: center;
cursor: pointer;
transition: all 300ms ease;
}
.map-listing-item .inner-box .image-box .image {
width: 75px;
height: 75px;
}
.map-listing-item .inner-box .image-box .image img {
max-width: 100%;
border-radius: 8px;
transition: all 500ms ease;
}
.map-listing-item .inner-box .content {
position: relative;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.map-listing-item .inner-box .content .icon-box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.map-listing-item .inner-box .content .icon-box .item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.map-listing-item .inner-box .content .icon-box .item p {
font-family: "DM Sans", sans-serif;
}
.map-listing-item .inner-box .content .icon-box .item i {
font-size: 17px;
}
.map-listing-item .inner-box .content .price {
font-weight: 500;
font-size: 17px;
line-height: 28px;
color: var(--Third);
}
.map-listing-item .inner-box .content h4 {
font-weight: 500;
font-size: 15px;
line-height: 18px;
color: var(--Secondary);
margin-bottom: 0 !important;
}
.cluster-map-visible {
text-align: center;
font-size: 20px !important;
color: #ffffff !important;
font-weight: 500 !important;
border-radius: 50%;
width: 40px !important;
height: 40px !important;
line-height: 40px !important;
background-color: var(--Secondary);
box-shadow: 0 7px 30px var(--Secondary);
box-sizing: content-box;
background-clip: content-box;
}
@keyframes ripple {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
50% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
/*------------ zoom ---------------- */
.tf-zoom-main {
position: sticky;
top: 30px;
z-index: 50;
}
.tf-zoom-main .drift-zoom-pane {
top: 0;
left: 0;
height: 520px;
max-width: 520px;
width: 100%;
background: #fff;
-webkit-transform: translate3d(0, 0, 0);
box-shadow: 0 1px 5px rgba(127, 127, 127, 0.0196078431), 0 5px 18px rgba(127, 127, 127, 0.2);
z-index: 3;
}
.drift-bounding-box.drift-open {
background: rgba(255, 255, 255, 0.2509803922);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
z-index: 5000;
}
.drift-zoom-pane {
z-index: 5000;
}
.section-image-zoom .other-image-zoom {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.section-image-zoom.zoom-active .other-image-zoom {
opacity: 0.3;
}
.pswp__bg {
background: white;
}
.pswp__icn {
fill: rgb(34, 34, 34);
color: white;
}
.pswp__icn .pswp__icn-shadow {
stroke: white;
stroke-width: 1px;
fill: none;
}
.pswp__counter {
color: #222;
text-shadow: 1px 1px 3px #ffffff;
}
.tf-model-viewer {
width: 100%;
height: 100%;
position: relative;
}
.tf-model-viewer model-viewer {
display: block;
position: relative;
z-index: 5;
width: 100%;
height: 100%;
}
.tf-model-viewer model-viewer.disabled {
pointer-events: none;
}
.tf-model-viewer.active model-viewer {
pointer-events: all;
}
.tf-model-viewer.active .wrap-btn-viewer {
display: none;
}
/*------------ widgets ---------------- */
.tf-social-icon.style-2 a {
background-color: var(--bg-4);
}
.tf-social-icon a {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--bg-1);
font-size: 17px;
line-height: 12px;
}
.breadcrumbs .icon-home {
font-size: 14px;
}
.breadcrumbs .icon-arrow-right {
font-size: 8px;
}
.wg-pagination {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
flex-wrap: wrap;
gap: 10px;
}
.wg-pagination li {
min-width: 40px;
text-align: center;
color: var(--Primary);
font-size: 15px;
}
.wg-pagination li a {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
gap: 10px;
border-radius: 40px;
color: var(--Primary);
}
.wg-pagination li a i {
font-size: 18px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.wg-pagination li:hover a {
background: var(--bg-1);
}
.wg-pagination li.active a {
background: var(--Primary);
color: #fff !important;
}
.wg-pagination li.active i {
color: #fff !important;
}
.wg-pagination li:last-child a, .wg-pagination li:first-child a {
border: 1px solid var(--Border);
width: 61px;
height: 40px;
}
.wg-pagination li:last-child a i, .wg-pagination li:first-child a i {
font-size: 10px;
}
.wg-pagination li:last-child:hover a, .wg-pagination li:first-child:hover a {
border: 1px solid var(--Primary);
background-color: var(--bg-4);
}
.wg-pagination li:last-child {
margin-left: 10px;
}
.wg-pagination li:first-child {
margin-right: 10px;
}
.tf-collapse-item .tf-collapse-icon:before {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.tf-collapse-item.collapsed .tf-collapse-icon::before {
transform: rotate(180deg);
}
.recent-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 20px;
}
.recent-item .image {
width: 70px;
flex-shrink: 0;
height: 70px;
border-radius: 4px;
}
.recent-item .content {
padding-top: 2px;
}
.recent-item p {
color: var(--Soft-Text);
}
.tags-list {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.tags-list .tags-item {
border: 1px solid var(--Border);
border-radius: 4px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
color: var(--Primary);
}
.tags-list .tags-item:hover {
background-color: var(--bg-4);
border-color: var(--Primary);
}
.tags-list.style-large .tags-item {
padding: 10px 24px;
font-size: 15px;
}
.blockquote {
margin-top: 50px;
margin-bottom: 53px;
border-radius: 8px;
padding: 52px 60px;
background-color: var(--bg-4);
}
.blockquote .desc {
margin-bottom: 13px;
}
.blockquote .name {
font-weight: 500;
font-size: 16px;
}
.wrap-list-text-check {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 12px;
}
.wrap-list-text-check .list-text-item .icon {
font-size: 15px;
line-height: 11px;
}
.wrap-list-text-dot {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 8px;
}
.wrap-list-text-dot .list-text-item {
padding-left: 16px;
position: relative;
}
.wrap-list-text-dot .list-text-item::before {
position: absolute;
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--Primary);
left: 0;
top: 11px;
}
.profile-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 30px;
}
.profile-item .image {
width: 140px;
height: 140px;
border-radius: 50%;
flex-shrink: 0;
}
.profile-item .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-item .content {
padding-top: 10px;
}
.profile-item .content h5 {
margin-bottom: 4px;
}
.profile-item .content .sub {
margin-bottom: 3px;
}
.post-control a {
margin-bottom: 3px;
gap: 5px;
}
.post-control a i {
font-size: 10px;
}
.review-rating {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}
.review-rating .course-rating {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}
.review-rating .course-rating .course-rating {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.review-rating .course-rating .course-rating i {
font-size: 11px;
}
.review-rating .course-rating .rating::before {
position: absolute;
content: "";
width: 4px;
height: 4px;
background-color: var(--Primary);
border-radius: 50%;
top: 11px;
left: -10px;
}
.review-rating .ratings {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 7px;
}
.review-rating .ratings i {
font-size: 11px;
}
.review-rating .rating::before {
position: absolute;
content: "";
width: 4px;
height: 4px;
background-color: var(--Primary);
border-radius: 50%;
top: 11px;
left: -10px;
}
.ratings {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 7px;
}
.ratings i {
font-size: 11px;
}
.helpful-wrap {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 34px;
color: var(--Soft-Text);
}
.helpful-wrap i {
font-size: 17px;
}
.review-wrap .review-title {
margin-bottom: 15px;
}
.review-wrap .review-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 30px;
}
.review-wrap .review-item:not(:last-child) {
padding-bottom: 23px;
border-bottom: 1px solid var(--Border);
margin-bottom: 22px;
}
.review-wrap .review-item .image {
width: 60px;
height: 60px;
flex-shrink: 0;
padding: 5px;
border: 1px solid var(--Secondary);
border-radius: 50%;
margin-top: 8px;
}
.review-wrap .review-item .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.review-wrap .review-item .content .text,
.review-wrap .review-item .content a,
.review-wrap .review-item .content .ratings,
.review-wrap .review-item .content h5 {
margin-bottom: 3px;
}
.review-wrap .review-item .content .helpful-wrap {
margin-top: 5px;
}
.review-wrap > a {
margin-top: 24px;
}
.checkbox-item label {
padding-left: 26px;
cursor: pointer;
position: relative;
}
.checkbox-item label input {
position: absolute;
opacity: 0;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.checkbox-item label input:checked ~ .btn-checkbox {
background-color: var(--Primary);
}
.checkbox-item label input:checked ~ .btn-checkbox:after {
display: block;
}
.checkbox-item label input:checked ~ .btn-radio:after {
display: block;
}
.checkbox-item label .btn-checkbox {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-color: transparent;
border-radius: 4px;
border: 1px solid var(--Border);
}
.checkbox-item label .btn-checkbox:after {
content: "\e90a";
font-family: "icomoon" !important;
position: absolute;
font-size: 8px;
top: -7px;
left: 4px;
color: var(--White);
display: none;
}
.checkbox-item label .btn-radio {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-color: transparent;
border-radius: 50%;
border: 1px solid var(--Border);
}
.checkbox-item label .btn-radio::after {
position: absolute;
display: none;
content: "";
height: 16px;
width: 16px;
top: 0;
left: 0;
border-radius: 50%;
border: 3px solid black;
background-color: var(--White);
}
.add-review-wrap {
padding: 43px 39px 59px;
border-radius: 12px;
border: 1px solid var(--Border);
}
.add-review-wrap .add-review-title {
margin-bottom: 15px;
}
.add-review-wrap > p {
margin-bottom: 13px;
}
.add-review-wrap .ratings {
margin-bottom: 22px;
}
.add-review-wrap .cols {
margin-bottom: 22px;
}
.add-review-wrap textarea {
height: 136px;
}
.add-review-wrap .checkbox-item {
margin-top: 24px;
margin-bottom: 24px;
}
.box-icon .icon svg {
width: 10px;
height: 10px;
}
/*review-item
-----------------------------------------------------------*/
.review-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 30px;
}
.review-item .avatar {
height: 60px;
width: 60px;
padding: 5px;
border: 2px solid var(--Secondary);
border-radius: 50%;
flex: none;
}
.review-item .comment-box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 3px;
color: var(--Primary);
}
.review-item .comment-box .author-name {
font-weight: 500;
}
.review-item .comment-box .evaluate {
font-weight: 500;
font-size: 15px;
}
.review-item .comment-box .comment {
font-size: 15px;
padding-bottom: 8px;
}
.review-item .comment-box .reaction {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 30px;
}
.review-item .comment-box .reaction li {
display: inline-flex;
align-items: center;
color: var(--Soft-Text);
gap: 10px;
cursor: pointer;
}
.review-item .comment-box .reaction li.active {
color: var(--Secondary);
}
.review-item.style-reply .tf-btn {
padding: 0px 14px;
font-size: 14px;
background-color: var(--bg-4);
color: var(--Primary);
}
.review-item.style-reply .space-comment {
position: relative;
transition-timing-function: linear !important;
}
.review-item.style-reply .space-comment .form-controls {
resize: none;
height: 150px;
font-size: 14px;
line-height: 28px;
padding-top: 10px;
padding-left: 19px;
margin-top: 16px;
}
.review-item.style-reply .space-comment .btn-send {
position: absolute;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
cursor: pointer;
top: 23%;
right: 2%;
border-radius: 50%;
background-image: linear-gradient(rgb(253, 53, 226), rgb(255, 121, 26));
}
.review-item.style-reply .space-comment .btn-send i {
color: var(--White);
font-size: 16px;
}
/*meta
--------------------------*/
.entry-meta {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.entry-meta li {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 7px;
font-size: 14px;
color: var(--Soft-Text);
height: 18px;
}
.entry-meta li:not(:last-child) {
padding-right: 10px;
border-right: 1px solid var(--Border);
}
/*
instructors-item
*/
.instructors-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
gap: 20px;
}
.instructors-item .image-wrapper {
max-width: 100px;
max-height: 100px;
border-radius: 8px;
overflow: hidden;
}
.instructors-item .entry-content .entry-title {
font-weight: 500;
}
.instructors-item .entry-content .short-description {
color: var(--Soft-Text);
}
.instructors-item.style-2 .image-wrapper {
max-width: 210px;
max-height: 210px;
}
.instructors-item.style-2 .entry-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 12px;
}
.instructors-item.style-2 .entry-content .short-description {
font-size: 15px;
}
.instructors-item.style-2 .entry-content .entry-meta li {
font-size: 15px;
color: var(--Primary);
}
.instructors-item.style-2 .entry-content .description {
font-size: 15px;
}
.instructors-item.style-column {
flex-direction: column;
align-items: center;
gap: 18px;
}
.instructors-item.style-column .entry-meta {
margin-bottom: 11px;
}
.instructors-item.style-column .entry-meta li {
font-size: 14px;
gap: 8px;
}
.instructors-item.style-column .entry-title {
margin-bottom: 2px;
}
.instructors-item.style-column p {
margin-bottom: 3px;
}
/*academy-item
----------------------------------------------------------------*/
.wrap {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
}
.academisc-item {
position: relative;
overflow: hidden;
}
.academisc-item:before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
content: "";
background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 40%);
border-radius: 12px;
}
.academisc-item .image-wrap {
max-height: 260px;
max-width: 100%;
border-radius: 12px;
overflow: hidden;
}
.academisc-item .content {
position: absolute;
text-align: center;
left: 0;
right: 0;
bottom: 0;
}
.academisc-item .content p {
font-size: 18px;
padding: 14px 25px;
font-weight: 500;
color: var(--White);
}
/*Count-down
------------------------------------------------------------------------*/
.js-countdown .countdown__timer {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.js-countdown .countdown__timer .countdown__item {
display: inline-block;
padding: 14px 38px 40px 38px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
}
.js-countdown .countdown__timer .countdown__item:nth-child(1), .js-countdown .countdown__timer .countdown__item:nth-child(2), .js-countdown .countdown__timer .countdown__item:nth-child(3), .js-countdown .countdown__timer .countdown__item:nth-child(4) {
position: relative;
}
.js-countdown .countdown__timer .countdown__item:nth-child(1)::before, .js-countdown .countdown__timer .countdown__item:nth-child(2)::before, .js-countdown .countdown__timer .countdown__item:nth-child(3)::before, .js-countdown .countdown__timer .countdown__item:nth-child(4)::before {
content: "Days";
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 14px;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #fff;
line-height: 28px;
}
.js-countdown .countdown__timer .countdown__item:nth-child(2)::before {
content: "Hours";
}
.js-countdown .countdown__timer .countdown__item:nth-child(3)::before {
content: "minutes";
}
.js-countdown .countdown__timer .countdown__item:nth-child(4)::before {
content: "seconds";
}
.js-countdown .countdown__timer .countdown__item .countdown__value {
display: inline-block;
font-size: 36px;
font-weight: 700;
line-height: 50px;
color: var(--White);
width: 46px;
}
/*widget-counter
------------------------------------------------------------------------*/
.counter {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.counter .number-counter {
text-align: center;
color: var(--Primary);
}
.counter .number-counter .counter-content {
font-size: 36px;
font-weight: 700;
line-height: 50px;
}
.counter .number-counter p {
font-size: 15px;
}
.counter.style-2 {
flex-wrap: wrap;
gap: 23px 30px;
justify-content: start;
}
.counter.style-2 .number-counter {
padding-left: 18px;
text-align: start;
border-left: 2px solid var(--Secondary);
min-width: 250px;
}
.counter.style-2 .number-counter .counter-content {
font-size: 20px;
line-height: 30px;
font-weight: 500;
margin-bottom: 4px;
}
.counter.style-3 .number-counter {
text-align: left;
}
.counter.style-3 .number-counter .counter-content {
margin-bottom: 8px;
font-size: 26px;
font-weight: 500;
line-height: 28px;
}
/* wg-Filter
----------------------------------------------------------------
*/
.offcanvas-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.group-filter {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.group-filter .wg-filter .tf-btn {
background-color: var(--White);
color: var(--Primary);
padding: 8px 22px;
border-color: var(--Border);
font-size: 15px;
}
.group-filter .tf-btn:hover, .group-filter .tf-btn.active,
.group-filter .nice-select:hover,
.group-filter .nice-select.active {
background-color: var(--bg-4);
border-color: var(--Primary);
}
.group-filter .nice-select {
cursor: pointer;
position: relative;
padding: 9px 20px !important;
border-radius: 8px;
border: 1px solid var(--Border) !important;
}
.group-filter .nice-select .current {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-weight: 500;
font-size: 15px;
}
.group-filter .nice-select .current i {
font-size: 6px;
}
.group-filter .nice-select .current i::before {
transform: rotate(0deg);
transition: all 0.3s ease-in-out;
}
.group-filter .nice-select .list {
width: 310px;
position: absolute;
padding: 18px 7px 12px 9px;
background-color: var(--White);
border-radius: 4px;
top: 100%;
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.group-filter .nice-select .list .option {
position: relative;
}
.group-filter .nice-select .list .option .content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 3px 0 5px;
}
.group-filter .nice-select .list .option.selected::after {
background-color: var(--Primary);
}
.group-filter .nice-select .list .option.selected::before {
position: absolute;
content: "\e90a";
font-family: "icomoon" !important;
left: 16px;
height: 20px;
line-height: 18px;
z-index: 1;
color: #f5f6ff;
}
.group-filter .nice-select .list.style-radio .option::after {
border-radius: 4px;
}
.group-filter .nice-select .list.style-radio .option.selected::after {
border: 4px solid var(--Primary);
}
.group-filter .nice-select.open {
border: 1px solid var(--Primary) !important;
background-color: var(--bg-4);
}
.group-filter .nice-select.open .current i::before {
transform: rotate(-180deg);
}
.group-filter .nice-select.open .list {
opacity: 1;
visibility: visible;
}
/*shop-single
---------------------------------------------------*/
.shop-single .widget-content-image {
height: 100%;
padding: 59px 97px;
border-radius: 16px;
border: 1px solid var(--Border);
}
.shop-single .widget-content-image img {
width: 100%;
object-fit: cover;
height: 100%;
}
.shop-single .shop-detail-content {
padding: 116px 0 116px 80px;
}
.shop-single .shop-detail-content .ratings {
margin-bottom: 21px;
}
.shop-single .shop-detail-content .product-title {
margin-bottom: 5px;
font-weight: 700;
}
.shop-single .shop-detail-content .author {
margin-bottom: 12px;
color: var(--Soft-Text);
}
.shop-single .shop-detail-content .tf-price {
margin-bottom: 20px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
gap: 10px;
}
.shop-single .shop-detail-content .tf-price .price-on-sale {
color: var(--Secondary);
font-weight: 500;
font-size: 26px;
line-height: 28px;
}
.shop-single .shop-detail-content .tf-price .compare-at-price {
color: var(--Soft-Text);
font-weight: 400;
font-size: 15px;
line-height: 28px;
text-decoration: line-through;
}
.shop-single .shop-detail-content .description {
font-size: 15px;
margin-bottom: 13px;
color: var(--Primary);
}
.shop-single .shop-detail-content .tf-btn {
width: 260px;
padding: 6px 26px !important;
}
.shop-single .shop-detail-content .tf-btn i {
font-size: 20px;
}
.shop-single .shop-detail-content .product_meta .item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 20px;
color: var(--Primary);
}
.shop-single .shop-detail-content .product_meta .item p {
font-size: 15px;
}
.shop-single .shop-detail-content .product_meta .item > p:first-child {
width: 91px;
}
/*Icon-box
---------------------------------------------------*/
.icons-box {
text-align: center;
}
.icons-box .icons {
display: inline-block;
position: relative;
}
.icons-box .icons.has-ellipse {
margin-bottom: 42px;
}
.icons-box .icons.has-ellipse::after {
content: "";
position: absolute;
top: 28px;
left: 2px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--bg-4);
z-index: -1;
}
.icons-box .content h4 {
margin-bottom: 14px;
}
.icons-box .content p {
font-size: 15px;
}
.icons-box.style-2 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
gap: 20px;
padding: 19px;
border: 1px solid var(--Border);
border-radius: 12px;
transition: all 0.3s ease-in-out;
}
.icons-box.style-2 .icons {
width: 50px;
height: 50px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.icons-box.style-2:hover {
box-shadow: 0px 6px 15px 0px rgba(64, 79, 104, 0.05);
}
.icons-box.style-3 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
text-align: start;
gap: 20px;
}
.icons-box.style-3.text-p p {
font-size: 20px;
font-weight: 500;
line-height: 30px;
}
.icons-box.style-3 .icons {
font-size: 24px;
padding: 18px;
height: 60px;
width: 60px;
color: var(--White);
border-radius: 24px;
background-color: rgba(255, 255, 255, 0.15);
}
.icons-box.style-3 p {
font-size: 16px;
color: var(--White);
}
.icons-box.style-3 span {
color: var(--White);
font-size: 15px;
font-weight: 400;
line-height: 28px;
}
.icons-box.style-4 .icons, .icons-box.style-5 .icons {
font-size: 30px;
padding: 20px;
height: 70px;
width: 70px;
border-radius: 120px;
background-color: var(--bg-4);
}
.icons-box.style-4 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
text-align: start;
padding: 40px 36px 38px;
gap: 20px;
border: 1px solid var(--Border);
border-radius: 8px;
}
.icons-box.style-4 .content {
font-size: 16px;
font-weight: 400;
}
.icons-box.style-4 .content span {
color: var(--Secondary);
}
.icons-box.style-5 {
text-align: start;
padding: 20px 20px 20px 20px;
border-radius: 12px;
border: 1px solid var(--Border);
transition: all 0.3s ease-in-out;
}
.icons-box.style-5:hover {
box-shadow: 0px 4px 6px 0px rgba(64, 79, 104, 0.05);
}
.icons-box.style-5 .icons {
margin-bottom: 15px;
}
.icons-box.style-5 .content h4 {
font-weight: 500;
margin-bottom: 8px;
}
.icons-box.style-6 {
text-align: left;
}
.icons-box.style-6 .icons {
margin-bottom: 12px;
}
.icons-box.style-6 .content h5 {
margin-bottom: 3px;
}
.icons-box.style-7 {
text-align: center;
}
.icons-box.style-7 .icons {
margin-bottom: 22px;
}
.icons-box.style-7 .content h5 {
margin-bottom: 3px;
}
.icons-box.style-8 .icons.has-ellipse::after {
background-color: var(--White);
z-index: 1;
}
.icons-box.style-8 .icons.has-ellipse svg {
z-index: 2;
position: relative;
}
/*List-text-check
----------------------------------------------------
*/
.wrap-list-text-check1 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.wrap-list-text-check1 li {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 15px;
font-size: 15px;
font-weight: 400;
}
.wrap-list-text-check1 li i {
display: inline-block;
text-align: center;
line-height: 20px;
width: 20px;
height: 20px;
background-color: var(--Primary);
border-radius: 50%;
color: var(--White);
}
.wrap-list-text-check1 li:not(:last-child) {
margin-right: 10px;
}
.wrap-list-text-check1.style-column {
flex-direction: column;
}
.wrap-list-text-check1.style-column li:not(:last-child) {
margin-right: 0;
margin-bottom: 10px;
}
/*page-404-wrap
-----------------------------------------*/
.page-404-wrap {
padding: 60px 0;
}
.page-404-wrap .thumds {
max-width: 768px;
margin-bottom: 30px;
}
.page-404-wrap .errors-404-content {
color: var(--Primary);
}
.page-404-wrap .errors-404-content h3 {
font-weight: 500;
color: var(--Primary);
margin-bottom: 30px;
}
.page-404-wrap .errors-404-content p {
font-size: 16px;
margin-bottom: 30px;
font-weight: 400;
}
.form-newsletter {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.form-newsletter .icon {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--Secondary);
border-radius: 50%;
width: 60px;
height: 60px;
margin-bottom: 39px;
font-size: 30px;
color: var(--White);
}
.form-newsletter h2 {
margin-bottom: 9px;
}
.form-newsletter p {
margin-bottom: 41px;
}
.form-newsletter .form-subscribe {
width: 100%;
max-width: 600px;
padding-bottom: 0;
border: none;
box-shadow: 0px 6px 15px 0px rgba(64, 79, 104, 0.05);
border-radius: 120px;
}
.form-newsletter .form-subscribe .name input {
border-radius: 120px;
height: 70px;
border: 1px solid var(--Border);
padding: 8px 160px 8px 29px !important;
}
.form-newsletter .form-subscribe .button-submit {
top: 50%;
transform: translateY(-50%);
right: 10px;
}
.form-newsletter .form-subscribe .button-submit .tf-btn {
height: 50px;
max-width: 147px;
border-radius: 120px;
padding: 15px 20px;
}
.form-newsletter .form-subscribe .button-submit .tf-btn i {
font-size: 20px;
}
/*Wrap-video
-------------------------------*/
.widget-video {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.widget-video .popup-youtube {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
padding: 22px;
border-radius: 25px;
background-color: var(--White);
}
/*about*/
.flat-about {
padding: 160px 0 150px;
}
.flat-about .heading-content .box-sub-tag {
margin-bottom: 18px;
}
.flat-about .heading-content h2 {
font-weight: 700;
}
.flat-about .content-right {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 100%;
justify-content: flex-end;
}
.flat-about .content-right p {
max-width: 448px;
font-size: 15px;
text-align: end;
margin-top: auto;
}
.flat-about .inner {
margin-top: 47px;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 30px 30px;
grid-template-rows: repeat(2, 1fr);
grid-template-areas: "aa aa bb bb cc dd" "ee ff bb bb gg gg ";
}
.flat-about .inner .item-1 {
grid-area: aa;
}
.flat-about .inner .item-2 {
grid-area: bb;
}
.flat-about .inner .item-3 {
grid-area: cc;
}
.flat-about .inner .item-4 {
grid-area: dd;
}
.flat-about .inner .item-5 {
grid-area: ee;
}
.flat-about .inner .item-6 {
grid-area: ff;
}
.flat-about .inner .item-7 {
grid-area: gg;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(rgb(26 139 125), rgb(71 212 164));
}
.flat-about .inner .item-7 p {
text-align: center;
padding: 0 46px;
font-size: 26px;
font-weight: 400;
color: var(--White);
line-height: 37px;
letter-spacing: -0.7px;
}
.flat-about .inner .about-item {
border-radius: 10px;
overflow: hidden;
}
.flat-about .inner .about-item img {
object-fit: cover;
width: 100%;
height: 100%;
}
/*quantity
----------------------------------------------------------------
*/
.wg-quantity {
position: relative;
width: max-content;
}
.wg-quantity .btn-quantity {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 27px;
height: 27px;
background-color: var(--White);
border-radius: 50%;
font-size: 20px;
cursor: pointer;
}
.wg-quantity .btn-quantity.minus-btn {
left: 10px;
}
.wg-quantity .btn-quantity.plus-btn {
right: 10px;
}
.wg-quantity input {
padding: 11px 15px !important;
max-width: 127px !important;
text-align: center;
}
.manh-work {
padding: 20px 0px;
}
.box-agent {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.box-agent .agent-img-list {
display: flex;
align-items: center;
}
.box-agent .agent-img-list .agent-img-item {
height: 50px;
width: 50px;
border: 1px solid var(--Secondary);
border-radius: 50px;
padding: 4px;
background-color: var(--White);
}
.box-agent .agent-img-list .agent-img-item:not(:first-child) {
margin-left: -9px;
}
.box-agent .rate {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 10px;
}
.box-agent .rate .ratings {
color: var(--Secondary);
gap: 10px;
}
.box-agent .rate .ratings i {
font-size: 10px;
}
.box-agent .rate .number-rate {
font-size: 15px;
line-height: 18px;
}
.box-agent.style2 .agent-img-item:last-child {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
color: var(--White);
font-size: 14px;
background-color: var(--Secondary);
border: 4px solid var(--White);
}
.box-sub-tag {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: flex-start;
width: max-content;
padding: 4px 24px 4px 4px;
border-radius: 120px;
border: 1px solid var(--Border);
background-color: var(--White);
gap: 10px;
}
.box-sub-tag .sub-tag-icon {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 30px;
width: 30px;
color: var(--Secondary);
background-color: #fdeee9;
border-radius: 120px;
}
.box-sub-tag.style2 {
background-color: var(--Primary);
color: white;
}
.box-sub-tag.style2 .sub-tag-icon {
background-color: #43485f;
color: white;
}
.box-sub-tag-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: flex-start;
width: max-content;
}
.box-sub-tag-item .sub-tag-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 10px 20px 10px 10px;
background-color: white;
color: black;
border-radius: 120px;
width: max-content;
gap: 10px;
}
.box-sub-tag-item .sub-tag-item > p {
letter-spacing: 0.4px;
}
.box-sub-tag-item .sub-tag-item .sub-tag-icon {
color: white;
background-color: var(--Secondary);
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 13px;
}
.box-sub-tag-item .sub-tag-item .sub-tag-icon .flaticon-check {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.box-sub-tag-item .sub-tag-item .sub-tag-icon .flaticon-check.style3 {
border: none;
}
.box-sub-tag-item .sub-tag-item .sub-tag-icon .flaticon-check.style3 .sub-tag-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 10px 20px 10px 10px;
background-color: white;
color: black;
border-radius: 120px;
gap: 10px;
}
.box-sub-tag-item .sub-tag-item .sub-tag-icon .flaticon-check.style3 .sub-tag-item .sub-tag-icon {
color: white;
background-color: var(--Secondary);
}
.box-sub-tag-item .sub-tag-item .sub-tag-icon .flaticon-check.style3 .sub-tag-item .sub-tag-icon .flaticon-check {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.box-sub-tag-item .sub-tag-item .sub-tag-icon .flaticon-check.style3:not(:last-child) {
margin-bottom: 20px;
}
.tags-list .tag-list {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.tags-list .tag-list .tag-list-item {
border-radius: 4px;
border: 1px solid var(--Border);
padding: 0px 14px;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.tags-list .tag-list .tag-list-item a {
color: var(--Primary);
}
.tags-list .tag-list .tag-list-item:hover {
background-color: var(--bg-4);
border-color: var(--Primary);
}
.tags-list.style2 .tag-list .tag-list-item {
border-radius: 120px;
background-color: rgba(255, 255, 255, 0.7);
}
.tags-list.style3 .tag-list .tag-list-item {
border-radius: 120px;
background-color: rgba(255, 255, 255, 0.7);
border-color: var(--Primary);
}
.tags-list.style3 .tag-list .tag-list-item:hover {
background-color: var(--bg-4);
}
.event-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
background-color: #f5f6ff;
}
.events-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
padding: 37px 40px 32px;
border-radius: 12px;
gap: 20px;
background-color:var(--bg-4);
width: 100%;
align-items: center;
}
.events-item .event-item-content .event-item-sub {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}
.events-item .event-item-content .event-item-sub .item-sub-address {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
white-space: nowrap;
}
.events-item .event-item-content .event-item-sub .item-sub-address .flaticon-location {
display: flex;
}
.events-item .event-item-content .event-item-sub .item-sub-address::after {
content: "";
width: 1px;
height: 100%;
height: 16px;
background-color: black;
}
.events-item .event-item-content .event-item-sub .item-sub-time {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.events-item .event-item-content .event-item-sub .item-sub-time .flaticon-clock {
display: flex;
}
.events-item .event-item-content .event-item-title {
margin-bottom: 15px;
}
.events-item .event-item-content .tf-btn {
font-size: 16px;
font-weight: 500;
line-height: 28px;
color: var(--Primary);
border: none;
padding: 0px;
background-color: transparent;
}
.events-item .event-item-date {
padding: 12px 40px 9px 40px;
background-color: #fff;
color: var(--Primary);
margin: 4px 0px 7px 0px;
border-radius: 8px;
}
.events-item.style2 {
justify-content: flex-start;
padding: 0px;
flex-direction: column;
gap: 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--Border);
}
.events-item.style2 .event-item-img {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: flex-end;
position: relative;
margin: -1px -1px 0;
}
.events-item.style2 .event-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.events-item.style2 .event-item-img .event-item-date {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 15px 20px 11px;
position: absolute;
margin: 10px;
}
.events-item.style2 .event-item-img .event-item-date .date-text {
line-height: 28px;
}
.events-item.style2 .event-item-img .event-item-date h2 {
font-size: 26px;
}
.events-item.style2 .event-item-img .event-item-date h6 {
font-size: 15px;
}
.events-item.style2 .event-item-content {
padding: 13px 20px 4px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
.events-item.style2 .event-item-content .event-item-sub {
margin-bottom: 10px;
}
.events-item.style2 .event-item-content .event-item-sub .item-sub-time {
white-space: nowrap;
}
.events-item.style3 {
display: flex;
gap: 20px;
justify-content: flex-start;
}
.events-item.style3 .event-item-img {
flex: none;
}
.events-item.style3 .event-item-img img {
height: 120px;
width: 120px;
object-fit: cover;
border-radius: 8px;
}
.events-item.style3 .event-item-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 5px;
}
.events-item.style3 .event-item-content .item-sub-time::after {
content: "";
width: 1px;
height: 100%;
height: 16px;
background-color: black;
}
.events-item.style3 .event-item-content .item-sub-day {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.events-item.style4 {
flex-wrap: nowrap;
border-radius: 8px;
padding: 20px;
gap: 22px;
justify-content: flex-start;
align-items: center;
box-shadow: 0px 6px 15px 0px rgba(64, 79, 104, 0.05);
}
.events-item.style4 .event-item-img {
width: 120px;
height: 120px;
flex-shrink: 0;
}
.events-item.style4 .event-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.events-item.style4 .event-item-content .event-item-sub {
margin-bottom: 9px;
}
.events-item.style4 .event-item-content .event-item-sub .item-sub {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
white-space: nowrap;
position: relative;
}
.events-item.style4 .event-item-content .event-item-sub .item-sub:not(:last-child):after {
content: "";
width: 1px;
height: 100%;
height: 16px;
background-color: black;
}
.events-item.style4 .event-item-content .event-item-title {
margin-bottom: 5px;
}
.pricing-item {
display: flex;
flex-direction: column;
border-radius: 12px;
white-space: nowrap;
max-width: 420px !important;
gap: 0px !important;
padding: 28px 40px 40px 40px;
}
.pricing-item .pricing-price {
padding-bottom: 31px;
border-bottom: 1px solid var(--Border);
}
.pricing-item .pricing-price .price-month {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-end;
justify-content: flex-start;
margin-bottom: 4px;
}
.pricing-item .pricing-price .price-month h2,
.pricing-item .pricing-price .price-month h6 {
font-family: Outfit;
}
.pricing-item .pricing-benefit-list {
display: flex;
flex-direction: column;
gap: 0px;
padding: 35px 0px 34px 0px;
}
.pricing-item .pricing-benefit-list .benefit-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
}
.pricing-item .pricing-benefit-list .benefit-item:not(:last-child) {
margin-bottom: 19px !important;
}
.pricing-item .pricing-benefit-list .benefit-item p {
font-size: 15px;
}
.pricing-item .pricing-benefit-list .benefit-item i {
display: inline-flex;
height: 17px;
width: 17px;
background-color: var(--Secondary);
border-radius: 12px;
color: var(--White);
justify-content: center;
align-items: center;
font-size: 7px;
}
.pricing-item .pricing-benefit-list .benefit-item i::before {
padding: 0px 10px;
}
.pricing-item .tf-btn {
width: 100%;
}
.pricing-item.basic-plan {
margin-left: auto;
padding: 28px 28px 40px 52px !important;
}
.pricing-item.pro-plan {
margin: 0px auto;
}
.pricing-item.dia-plan {
padding: 28px 52px 40px 28px !important;
}
.pricing-item.style2 {
background-color: var(--bg-4);
}
.message-box-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 30px;
border-radius: 28px;
background-color: rgba(205, 233, 246, 0.5);
color: #4780aa;
}
.message-box-item i {
cursor: pointer;
}
.message-box-item.style2 {
background-color: rgba(247, 243, 215, 0.5);
color: #927238;
}
.message-box-item.style3 {
background-color: rgba(236, 200, 197, 0.5);
color: #ab3331;
}
.message-box-item.style4 {
background-color: rgba(222, 242, 215, 0.5);
color: #5b7052;
}
.login-wrap,
.contact-wrap {
background-color: var(--bg-4);
}
.login-wrap .img-left,
.contact-wrap .img-left {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-end;
justify-content: start;
position: relative;
margin-right: -26px;
width: 100%;
height: 760px;
}
.login-wrap .img-left img,
.contact-wrap .img-left img {
height: 100%;
width: 100%;
object-fit: cover;
margin-right: -26px;
}
.login-wrap .img-left .blockquite,
.contact-wrap .img-left .blockquite {
max-width: 498px;
position: absolute;
padding: 60px 0px 50px 60px;
color: var(--White);
}
.login-wrap .img-left .blockquite p,
.contact-wrap .img-left .blockquite p {
font-size: 16px;
}
.login-wrap .img-left .blockquite .author,
.contact-wrap .img-left .blockquite .author {
padding-top: 28px;
}
.login-wrap .content-right,
.contact-wrap .content-right {
background-color: var(--White);
padding: 74px 60px 63px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-direction: column;
margin-left: -28px;
}
.login-wrap .content-right h2,
.contact-wrap .content-right h2 {
font-family: Cardo;
}
.login-wrap .content-right .register,
.contact-wrap .content-right .register {
display: flex;
padding-bottom: 30px;
gap: 5px;
}
.login-wrap .content-right .register a,
.contact-wrap .content-right .register a {
color: var(--Secondary);
}
.login-wrap .content-right .form-login,
.login-wrap .content-right .contact-form,
.contact-wrap .content-right .form-login,
.contact-wrap .content-right .contact-form {
display: flex;
flex-direction: column;
gap: 30px;
margin-bottom: 20px;
}
.login-wrap .content-right .form-login .checkbox-item,
.login-wrap .content-right .contact-form .checkbox-item,
.contact-wrap .content-right .form-login .checkbox-item,
.contact-wrap .content-right .contact-form .checkbox-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.login-wrap .content-right .form-login .checkbox-item a,
.login-wrap .content-right .contact-form .checkbox-item a,
.contact-wrap .content-right .form-login .checkbox-item a,
.contact-wrap .content-right .contact-form .checkbox-item a {
color: var(--Secondary);
}
.login-wrap .content-right .button-submit,
.contact-wrap .content-right .button-submit {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: var(--Primary);
border-radius: 8px;
}
.login-wrap .content-right .button-submit button,
.contact-wrap .content-right .button-submit button {
color: var(--White);
}
.login-wrap .content-right p,
.contact-wrap .content-right p {
text-align: center;
}
.login-wrap .content-right .login-social,
.contact-wrap .content-right .login-social {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
gap: 15px;
flex-wrap: wrap;
}
.login-wrap .content-right .login-social .login-social-icon .tf-btn,
.contact-wrap .content-right .login-social .login-social-icon .tf-btn {
background-color: transparent;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
border-color: var(--Border);
gap: 5px;
color: var(--Primary);
}
.tooltips-list {
display: flex;
gap: 10px;
padding: 10px 0px;
flex-wrap: wrap;
}
.tooltips-list .tooltips-item div {
padding: 10px 30px;
background-color: var(--bg-4);
border-radius: 8px;
}
.tooltip .tooltip-inner {
font-family: DM Sans;
padding: 0px 10px;
font-size: 14px;
font-weight: 400;
line-height: 30px;
}
.shop-cart-wrap {
padding: 60px 0;
}
.shop-cart-wrap .table-shop-cart {
overflow-x: auto;
white-space: nowrap;
display: block;
margin-bottom: 20px;
}
.shop-cart-wrap .table-shop-cart .shop-cart-head {
display: flex;
background-color: var(--bg-4);
border-radius: 8px;
padding: 21px 30px;
gap: 10px;
width: 100%;
}
.shop-cart-wrap .table-shop-cart .shop-cart-head .item {
font-size: 16px;
font-weight: 500;
}
.shop-cart-wrap .table-shop-cart .shop-cart-head li:nth-child(1) {
width: 343px;
}
.shop-cart-wrap .table-shop-cart .shop-cart-head li:nth-child(2) {
width: 130px;
}
.shop-cart-wrap .table-shop-cart .shop-cart-head li:nth-child(3) {
width: 130px;
}
.shop-cart-wrap .table-shop-cart .shop-cart-head li:nth-child(4) {
width: 130px;
}
.shop-cart-wrap .table-shop-cart .shop-cart-head li:nth-child(5) {
width: 80px;
}
.shop-cart-wrap .table-shop-cart .shop-cart-inner {
display: flex;
flex-direction: column;
width: 940px;
}
.shop-cart-wrap .table-shop-cart .shop-cart-inner li .shop-cart-item {
display: flex;
align-items: center;
padding: 20px 30px;
gap: 10px;
border-bottom: 1px solid var(--Border);
}
.shop-cart-wrap .table-shop-cart .shop-cart-inner li .shop-cart-item .cart-item-img {
width: 50px;
height: 60px;
}
.shop-cart-wrap .table-shop-cart .shop-cart-inner li .shop-cart-item .cart-item-img img {
width: 100%;
height: 100%;
}
.shop-cart-wrap .table-shop-cart .shop-cart-inner li .shop-cart-item li:nth-child(2) {
width: 282px;
}
.shop-cart-wrap .table-shop-cart .shop-cart-inner li .shop-cart-item li:nth-child(3) {
width: 120px;
}
.shop-cart-wrap .table-shop-cart .shop-cart-inner li .shop-cart-item li:nth-child(4) {
position: relative;
width: max-content;
}
.shop-cart-wrap .table-shop-cart .shop-cart-inner li .shop-cart-item li:nth-child(4) input {
width: 100px !important;
text-align: center;
}
.shop-cart-wrap .table-shop-cart .shop-cart-inner li .shop-cart-item li:nth-child(5) {
padding-left: 43px;
width: 100px;
}
.shop-cart-wrap .table-shop-cart .shop-cart-inner li .shop-cart-item li:nth-child(6) {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 0px 1px 0px 95px;
height: 30px;
width: 30px;
gap: 10px;
border-radius: 12px;
border: 1px solid var(--Border);
}
.shop-cart-wrap .shop-cart-bottom {
display: flex;
gap: 30px;
padding-bottom: 40px;
white-space: nowrap;
width: auto;
}
.shop-cart-wrap .shop-cart-bottom .coupon-btn {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 28px;
}
.shop-cart-wrap .sidebar-shop {
display: flex;
flex-direction: column;
gap: 35px;
padding: 40px;
border: 1px solid var(--Border);
}
.shop-cart-wrap .sidebar-shop .cart-total-bill {
display: flex;
flex-direction: column;
gap: 20px;
}
.shop-cart-wrap .sidebar-shop .cart-total-bill p {
font-size: 15px;
}
.shop-cart-wrap .sidebar-shop .cart-total-bill .line {
border-top: 1px solid var(--Border);
}
.shop-cart-wrap .sidebar-shop .cart-total-bill .sub-total,
.shop-cart-wrap .sidebar-shop .cart-total-bill .total {
display: flex;
justify-content: space-between;
align-items: center;
}
.shop-cart-wrap .sidebar-shop .tf-btn {
background-color: var(--Secondary);
border-color: transparent;
padding: 12px 0;
font-size: 16px;
color: var(--White);
flex-wrap: nowrap;
width: 100%;
}
.form-checkout h6 {
margin-bottom: 34px;
}
.form-checkout fieldset {
margin-bottom: 21px;
}
.form-checkout fieldset label {
transform: translateY(-25%);
}
.form-checkout .cols {
gap: 30px;
}
.form-checkout .tf-select-label {
padding-top: 20px;
height: 50px;
margin-bottom: 18px;
}
.form-checkout .tf-select-label::after {
border-bottom: 1.7px solid #3a3a3c;
border-right: 1.7px solid #3a3a3c;
content: "";
height: 8px;
width: 8px;
margin-top: -13px;
pointer-events: none;
position: absolute;
right: 3px;
top: 31px;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.form-checkout .tf-select-label .default {
padding: 0px 0px 0px;
margin: 0px 0px 16px;
width: 100%;
border-radius: 0px;
border: none !important;
border-bottom: 2px solid var(--Primary) !important;
color: var(--Primary);
}
.form-checkout .tf-select-label .default option {
color: var(--Primary);
}
.form-checkout .tf-select-label.focused {
border-color: var(--Primary);
}
.form-checkout .tf-select-label.focused::after {
transform: rotate(-135deg);
}
.form-checkout .tf-select-label.focused .select-label {
left: 0px;
padding: 0px !important;
background-color: var(--White);
transform: translateY(-70%);
}
.form-checkout .tf-select-label.focused .default {
border-color: var(--Primary) !important;
color: var(--Primary);
font-size: 15px;
}
.form-checkout .tf-select-label .select-label {
left: 0px;
top: 15px;
color: var(--Primary);
line-height: 20px;
}
.form-checkout .sidebar-shop-checkout {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 40px;
max-width: 400px;
margin-left: auto;
}
.form-checkout .sidebar-shop-checkout .sidebar-checkout-item {
padding: 40px 40px 20px;
border: 1px solid var(--Border);
border-radius: 12px;
}
.form-checkout .sidebar-shop-checkout .sidebar-checkout-item.payment {
padding: 33px 40px 5px;
}
.form-checkout .sidebar-shop-checkout .sidebar-checkout-item .title {
margin-bottom: 23px;
}
.form-checkout .sidebar-shop-checkout .sidebar-checkout-item .product-subtotal {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
font-weight: 500;
padding-bottom: 10px;
border-bottom: 1px solid var(--Border);
margin-bottom: 13px;
}
.form-checkout .sidebar-shop-checkout .sidebar-checkout-item .product-list {
margin-bottom: 23px;
}
.form-checkout .sidebar-shop-checkout .sidebar-checkout-item .product-list li:not(:last-child) {
margin-bottom: 3px;
}
.form-checkout .sidebar-shop-checkout .sidebar-checkout-item .product-list .product-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
}
.form-checkout .sidebar-shop-checkout .sidebar-checkout-item .checkout-total-bill {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 12px;
}
.form-checkout .sidebar-shop-checkout .sidebar-checkout-item .checkout-total-bill li {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
border-bottom: 1px solid var(--Border);
}
.form-checkout .sidebar-shop-checkout .sidebar-checkout-item .checkout-total-bill li p {
font-weight: 500;
}
.form-checkout .sidebar-shop-checkout .sidebar-checkout-item .checkout-total-bill .total p {
color: var(--Secondary);
}
.form-checkout .sidebar-shop-checkout .payment-item p {
font-size: 15px;
}
.form-checkout .sidebar-shop-checkout .payment-item .descripton {
margin-bottom: 13px;
}
.form-checkout .sidebar-shop-checkout .tf-btn {
width: 100%;
background-color: var(--Secondary);
border-color: transparent;
}
.form-checkout .sidebar-shop-checkout .tf-btn a {
color: var(--White);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.form-checkout .sidebar-shop-checkout .tf-btn a i {
display: inline;
}
.form-checkout .shop-checkout-additional {
margin-top: 32px;
}
.form-checkout .shop-checkout-additional h6 {
margin-bottom: 37px;
}
.radio-item label {
padding-left: 26px;
cursor: pointer;
position: relative;
}
.radio-item label input {
position: absolute;
opacity: 0;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.radio-item label input:checked ~ .btn-radio {
border: 4px solid black;
background-color: var(--White);
}
.radio-item label input:checked ~ .btn-radio:after {
display: block;
}
.radio-item label .btn-radio {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-color: var(--White);
border-radius: 50%;
border: 1px solid var(--Border);
}
.sidebar-course {
max-width: 400px;
margin-left: auto;
border: 1px solid var(--Border);
border-radius: 12px;
background-color: var(--White);
}
.sidebar-course .widget-video {
margin: 0 auto;
padding: 20px;
border-radius: 12px;
}
.sidebar-course .sidebar-course-content {
padding: 30px 40px 5px 39px;
display: flex;
flex-direction: column;
}
.sidebar-course .sidebar-course-content .course-price {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 30px;
}
.sidebar-course .sidebar-course-content .course-price .price {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.sidebar-course .sidebar-course-content .course-price .price h3 {
color: var(--Secondary);
}
.sidebar-course .sidebar-course-content .course-price .price h6 {
text-decoration: line-through;
}
.sidebar-course .sidebar-course-content .course-price .sale-off {
border-radius: 4px;
padding: 0px 15px;
border: 1px solid var(--Secondary);
background-color: var(--bg-4);
color: var(--Secondary);
}
.sidebar-course .sidebar-course-content .tf-btn {
font-weight: 500;
width: 100%;
}
.sidebar-course .sidebar-course-content .tf-btn.add-to-cart {
margin-bottom: 19px;
}
.sidebar-course .sidebar-course-content .tf-btn.buy-now {
background-color: var(--White);
color: var(--Primary);
margin-bottom: 11px;
}
.sidebar-course .sidebar-course-content .course-text {
font-size: 14px;
text-align: center;
margin-bottom: 13px;
}
.sidebar-course .sidebar-course-content .course-list ul {
padding-top: 4px;
display: flex;
flex-direction: column;
gap: 9px;
}
.sidebar-course .sidebar-course-content .course-list ul li {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 9px;
}
.sidebar-course .sidebar-course-content .course-list ul li i {
font-size: 18px;
}
.sidebar-course .sidebar-course-content .course-list ul li p {
font-size: 15px;
}
.sidebar-course .course-social {
text-align: center;
padding: 20px 0 25px;
border-top: 1px solid var(--Border);
}
.sidebar-course .course-social h6 {
padding-bottom: 10px;
}
.sidebar-course .course-social ul {
justify-content: center;
display: flex;
gap: 8px;
}
.sidebar-course .course-social ul li {
border: 1px solid var(--Border);
border-radius: 120px;
}
.sidebar-course .course-social ul li a {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 12px;
}
.sidebar-course .course-social ul li a i {
font-size: 14px;
}
.box-review {
padding: 20px;
background-color: var(--White);
border-radius: 12px;
}
.box-review .review-head {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 20px;
padding-bottom: 8px;
}
.box-review .review-head .head-icon {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 2px;
}
.box-review .review-head .head-icon i {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
background-color: #00b67a;
font-size: 17px;
color: var(--White);
}
.box-review .review-head .head-verified {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
color: var(--Soft-Text);
}
.box-review .review-head .head-verified i {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
height: 17px;
width: 17px;
background-color: var(--Soft-Text);
color: var(--White);
border-radius: 50%;
}
.box-review .review-inner {
padding-bottom: 35px;
}
.box-review .review-inner p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.teachers-upskill {
position: relative;
}
.teachers-upskill .image {
border-radius: 12px;
}
.teachers-upskill .image img {
width: 100%;
border-radius: 12px;
}
.teachers-upskill .country {
width: 32px;
height: 32px;
position: absolute;
top: 18px;
right: 19px;
border-radius: 120px;
border: 2px solid var(--White);
display: flex;
}
.teachers-upskill .name {
display: flex;
border-radius: 120px;
background: var(--White);
position: absolute;
bottom: 23px;
padding: 3px 12px;
left: 20px;
gap: 7px;
align-items: center;
justify-content: center;
}
.teachers-upskill .name svg {
color: var(--Secondary);
}
.teachers-upskill .name span {
font-size: 15px;
font-weight: 400;
line-height: 28px;
}
.item-event-btn {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-top: 34px;
}
.item-event-btn .tf-btn {
padding: 0px;
background-color: transparent;
color: var(--Primary);
border: unset;
}
.our-event-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 40px;
}
.our-event-item .event-item-date {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
gap: 40px;
padding-right: auto;
}
.our-event-item .event-item-date .date-time {
padding: 11px 30px;
border-radius: 40px 40px 8px 8px;
background-color: #f6d6c6;
}
.our-event-item .event-item-date .date-time .fw-5 {
color: #eb6644;
}
.our-event-item .event-item-date a {
font-size: 20px;
font-weight: 500;
line-height: 30px;
color: var(--Primary);
}
.our-event-item .event-item-sub {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
white-space: nowrap;
flex-wrap: wrap;
}
.our-event-item .event-item-sub .item-sub-time {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.our-event-item .event-item-sub .item-sub-time:first-child {
padding-right: 10px;
border-right: 1px solid var(--Primary);
height: 17px;
}
.our-event-item .event-item-sub .tf-btn {
background-color: var(--White);
color: var(--Primary);
border: none;
font-weight: 500;
}
.our-event-item:hover .event-hover {
opacity: 1;
visibility: visible;
}
.our-event-item .event-hover {
width: 200px;
height: 240px;
position: absolute;
left: 50%;
top: -30%;
transform: translateX(-50%);
transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
overflow: hidden;
z-index: 2;
visibility: hidden;
}
.our-event-item.style-1 {
padding-bottom: 19px;
border-bottom: 1px solid #EEDDC3;
}
.our-event-item.style-1:not(:last-child) {
margin-bottom: 20px;
}
.our-event-item.style-1 .event-item-sub .tf-btn {
background-color: unset;
padding: 0px;
}
.progress {
border-radius: 8px;
height: 6px;
margin: 12px 0px;
}
.progress .progress-bar {
width: 80%;
border-radius: 8px;
background-color: var(--Secondary);
}
.exam-progress {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 10px 0;
}
.categories-item {
border-radius: 12px;
border: 1px solid var(--Border);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0 0px 28px 0;
}
.categories-item .categories-item-content {
gap: 20px;
}
.categories-item .categories-item-content .text {
font-weight: 500;
font-size: 16px;
}
.categories-item-default {
align-items: center;
gap: 20px;
}
.categories-item-default .categories-item-image img {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
max-height: 90px;
margin: -1px 0 -1px -1px;
}
.categories-item-style-2 {
justify-content: center;
align-items: center;
flex-direction: column;
padding: 0px 0px 20px 0px;
border: 1px solid var(--Border);
}
.categories-item-style-2 .categories-item-image img {
height: auto;
border-radius: 8px;
}
.categories-item-style-2 .categories-item-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: center;
}
.categories-item-style-3 {
display: flex;
gap: 11.2px;
align-items: center;
flex-wrap: wrap;
}
.categories-item-style-3 .categories-list {
border-radius: 12px;
border: 1px solid #e4e4e7;
display: inline-flex;
align-items: center;
gap: 15px;
padding: 14px 19.1px;
}
.categories-item-style-3 .categories-list span {
font-size: 16px;
font-weight: 500;
line-height: 28px;
}
.categories-item-style-4 {
border-radius: 12px;
border: 1px solid var(--Border);
padding: 10px;
}
.categories-item-style-4 .categories-image {
display: block;
overflow: hidden;
border-radius: 8px;
margin-bottom: 12px;
}
.categories-item-style-4 .categories-image img {
height: 100%;
min-height: 150px;
object-fit: cover;
}
.categories-item-style-4 .categories-label {
margin-top: 4px;
margin-bottom: 2px;
}
.categories-item-style-4 .categories-label a {
font-size: 14px;
font-weight: 400;
line-height: 28px;
color: var(--Primary);
}
.categories-item-style-4 .categories-label a i {
margin-left: 7px;
display: inline-block;
}
.sort-by-wrap {
margin-top: -8px;
}
.sort-by-wrap .sort-wrap {
flex-wrap: wrap;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
}
.sort-by-wrap .sort-wrap .nice-select {
position: relative;
padding: 0 16px 0 0 !important;
cursor: pointer;
}
.sort-by-wrap .sort-wrap .nice-select::after {
content: "\e902";
font-size: 6px;
top: 0%;
right: 0;
position: absolute;
font-family: "icomoon";
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sort-by-wrap .sort-wrap .nice-select .list {
position: absolute;
opacity: 0;
visibility: hidden;
}
.sort-by-wrap .sort-wrap .nice-select.open .list {
opacity: 1;
visibility: visible;
background-color: var(--White);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
padding: 18px 7px 12px 9px;
border-radius: 4px;
}
.sort-by-wrap .sort-wrap .nice-select.open .list .option {
position: relative;
}
.sort-by-wrap .sort-wrap .nice-select.open .list .option.selected {
color: var(--Secondary);
}
.sort-by-wrap .sort-wrap .nice-select.open .list .option.selected::after {
content: "\e90a";
font-family: "icomoon";
position: absolute;
transform: translateY(-50%);
}
.sort-by-wrap .sort-wrap .nice-select.open::after {
content: "\e902";
font-size: 6px;
top: 0%;
rotate: 180deg;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sort-by-wrap .text-1 {
font-size: 15px;
}
.sort-by-wrap .text-2 {
padding: 0 7px 0 40px;
font-size: 15px;
color: var(--Soft-Text);
}
.widget-saying .widget-saying-header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-bottom: 30px;
}
.widget-saying .widget-saying-header h2 {
font-weight: 700;
font-size: 36px;
line-height: 50px;
margin-bottom: 10px;
}
.widget-saying .widget-saying-header p {
font-size: 15px;
line-height: 28px;
font-weight: 400;
color: var(--Soft-Text);
}
.widget-saying .widget-saying-middle {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 17px;
gap: 80px;
}
.widget-saying .widget-saying-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.widget-saying .widget-saying-item img {
height: 80px;
border-radius: 30px;
margin-bottom: 34px;
opacity: 0.5;
}
.widget-saying .widget-saying-item .info {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
opacity: 0;
visibility: hidden;
}
.widget-saying .widget-saying-item .info span {
font-size: 14px;
font-weight: 400;
line-height: 28px;
margin-top: -3px;
margin-bottom: 21px;
}
.widget-saying .widget-saying-item .info .name {
font-size: 18px;
font-weight: 400;
line-height: 28px;
}
.widget-saying .swiper-slide.swiper-slide-active img {
opacity: 1;
visibility: visible;
height: 120px;
border-radius: 40px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.widget-saying .swiper-slide.swiper-slide-active .info {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.widget-saying .widget-saying-content p {
text-align: center;
font-size: 26px;
font-weight: 500;
line-height: 45px;
}
.widget-saying .swiper-slide.swiper-slide-prev img {
height: 100px;
border-radius: 35px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.widget-saying .swiper-slide.swiper-slide-next img {
height: 100px;
border-radius: 35px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.browse-course-banner {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
padding: 40px;
background-color: var(--bg-4);
border-radius: 24px;
gap: 40px;
}
.browse-course-banner .icon {
padding: 14.5px 19px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--Secondary);
}
.browse-course-banner .icon > i {
color: var(--bg-4);
font-size: 25.63px;
}
.browse-course-banner .browse-course-banner-text {
font-weight: 500;
font-size: 20px;
line-height: 30px;
}
.browse-course-banner > a {
position: absolute;
right: 40px;
border-radius: 120px;
}
.instagram-item {
border-radius: 12px;
overflow: hidden;
}
.instagram-item:hover .image-wrap:before {
opacity: 0.6;
visibility: visible;
z-index: 1;
}
.instagram-item .image-wrap {
display: block;
position: relative;
}
.instagram-item .image-wrap:before {
background: var(--Secondary);
right: 0;
left: 0;
bottom: 0;
top: 0;
content: "";
position: absolute;
transition: all 0.4s ease-in-out;
opacity: 0;
visibility: hidden;
}
.tags {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 35px;
}
.tags .tag {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 10px;
}
.tags .tag i {
font-size: 18px;
}
.badge-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
padding: 30px 56px 30px 30px;
gap: 23px;
box-shadow: 0px 6px 15px 0px rgba(64, 79, 104, 0.05);
border-radius: 12px;
background-color: var(--White);
}
.badge-item .badge-item-icon {
padding: 23px 24px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.badge-item .badge-item-icon i {
color: var(--White);
font-size: 15px;
}
.badge-item .content .title {
font-weight: 600;
font-size: 20px;
margin-bottom: -2px;
letter-spacing: -1.3px;
}
.badge-item .content .text {
font-size: 11px;
line-height: 28px;
color: var(--Soft-Text);
}
.badge-item-default .badge-item-icon {
background-color: var(--bg-2);
}
.badge-item-style-2 .badge-item-icon {
background-color: var(--Secondary);
}
.widget-learn-wrap {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 52px;
}
.learn-item-default {
gap: 44px;
padding: 17px 19px;
border-radius: 8px;
background-color: var(--White);
}
.learn-item-default .image-box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
margin-bottom: 15px;
}
.learn-item-default p {
color: var(--Primary);
text-align: center;
}
.learn-item-style-2 {
text-align: center;
}
.learn-item-style-2 > a {
margin-bottom: 13px;
display: block;
}
.learn-item-style-2 > a img {
height: 56px;
width: 56px;
border-radius: 100%;
}
.campus-life-item img {
margin-bottom: 20px;
border-radius: 8px;
}
.campus-life-item a {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 10px;
}
.campus-life-item a h4 {
font-weight: 500;
color: var(--White);
}
.campus-life-item a i {
color: var(--White);
}
.we-offer-wrap {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 37.33px;
}
.offer-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.offer-item .offer-item-img img {
border-radius: 200px 200px 8px 8px;
}
.offer-item .offer-item-content {
text-align: center;
}
.offer-item .offer-item-content h4 {
font-weight: 500;
margin-bottom: 5px;
}
.offer-item .offer-item-content p {
font-size: 15px;
}
.instructors-teacher-wrap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 25px;
}
.instructors-teacher-item .instructors-img {
margin-bottom: 13px;
}
.instructors-teacher-item .instructors-img img {
border-radius: 200px 200px 8px 8px;
}
.instructors-teacher-item .instructors-content h4 {
font-weight: 500;
margin-bottom: 5px;
}
.instructors-teacher-item .instructors-content p {
font-size: 14px;
}
.author-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 13px;
}
.author-item .author-item-img {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
padding: 1px;
background: linear-gradient(to bottom right, hsl(17, 73%, 58%), hsl(17, 83%, 69%));
border-radius: 50%;
}
.author-item .author-item-img img {
width: 33.33px;
height: 33.33px;
border: 3.33px solid var(--White);
background-color: var(--White);
border-radius: 50%;
object-fit: cover;
}
.author-item a {
font-size: 15px;
}
.author-item .text-1 {
color: var(--Soft-Text);
font-size: 15px;
}
.program-information-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 10px;
}
.program-information-item .top {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 10px;
}
.program-information-item .top span {
font-size: 15px;
}
.program-information-item .bottom {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 10px;
}
.program-information-item .bottom .program-information-btn {
padding: 0 10px;
color: var(--Secondary);
background-color: var(--bg-4);
border: 1px solid var(--Secondary);
border-radius: 4px;
}
.program-information-item .bottom .program-information-btn:hover {
color: var(--White);
background-color: var(--Secondary);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.selling-course-item .list {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0 30px 0;
border-bottom: 1px solid var(--Border);
}
.profile-wrap {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 30px;
padding-bottom: 38px;
border-bottom: 1px solid var(--Border);
}
.profile-wrap .profile-img {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
background: linear-gradient(to bottom right, hsl(308, 98%, 60%), hsl(25, 100%, 55%));
border-radius: 50%;
width: 120px;
height: 120px;
}
.profile-wrap .profile-img img {
height: 100%;
width: 100%;
border-radius: 50%;
border: 10px solid var(--White);
background-color: var(--White);
object-fit: cover;
}
.profile-wrap .profile-info h4 {
font-weight: 500;
}
.profile-wrap .profile-info p {
font-size: 15px;
color: var(--Soft-Text);
}
.profile-wrap .profile-btn {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 10px;
position: absolute;
right: 15px;
}
.profile-wrap .profile-btn .btn {
position: relative;
font-size: 14px;
line-height: 28px;
cursor: pointer;
}
.profile-wrap .profile-btn .btn-delete {
color: var(--Secondary);
border-color: var(--Secondary);
}
.profile-wrap .profile-btn .btn-delete:hover {
color: var(--White);
background-color: var(--Secondary);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.profile-wrap .profile-btn .btn-update {
border-color: var(--Primary);
}
.profile-wrap .profile-btn .btn-update:hover {
color: var(--White);
background-color: var(--Primary);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.profile-wrap input {
display: none;
}
.progress-bars .progress-bars-line {
display: block;
height: 10px;
border-radius: 10px;
background-color: var(--Border);
}
.progress-bars .progress-bars-line > div {
position: relative;
display: block;
height: 10px;
border-radius: 10px;
background-color: var(--Primary);
}
.progress-bars .progress-bars-line > div .progress-bars-number {
position: absolute;
right: -3px;
top: -30px;
}
.progress-wrap {
position: fixed;
bottom: 30px;
right: 30px;
height: 50px;
width: 50px;
cursor: pointer;
display: block;
border-radius: 30px;
-webkit-box-shadow: inset 0 0 0 2px rgba(130, 130, 130, 0.2);
box-shadow: inset 0 0 0 2px rgba(130, 130, 130, 0.2);
z-index: 100;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
background: var(--Secondary);
}
.progress-wrap::after {
position: absolute;
content: "\e905";
font-family: "icomoon";
rotate: -45deg;
text-align: center;
line-height: 50px;
font-size: 12px;
color: var(--White);
left: 0;
top: 0;
height: 50px;
width: 50px;
cursor: pointer;
display: block;
z-index: 1;
-webkit-transition: all 400ms linear;
-o-transition: all 400ms linear;
transition: all 400ms linear;
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.progress-wrap svg path {
fill: none;
}
.progress-wrap svg.progress-circle path {
box-sizing: border-box;
stroke: var(--Secondary);
stroke-width: 5;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-duration: 0.4s;
transition-timing-function: linear;
}
/* preload */
/* -------------------------------- */
.preload-container {
position: fixed;
top: 0px;
left: 0px;
z-index: 999999999999999;
height: 100%;
width: 100%;
background-color: var(--White);
}
.preload-container .middle {
top: 50%;
left: 50%;
width: 50px;
position: absolute;
z-index: 100;
margin: -30px 0 0 -30px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
content: url(../images/logo/favicon.png);
animation: preload 1.2s linear infinite alternate;
}
.wrap-instructor {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.section-categories-course .heading-section,
.section-categories-topics .heading-section,
.section-categories-instructors .heading-section {
margin-bottom: 37px;
}
.section-categories-course .heading-section h3,
.section-categories-topics .heading-section h3,
.section-categories-instructors .heading-section h3 {
margin-bottom: 16px;
}
.section-categories-course {
padding-bottom: 48px;
}
.section-categories-course .widget-tabs .widget-menu-tab {
margin-bottom: 38px;
gap: 22px;
}
.section-categories-course .widget-tabs .widget-menu-tab .item-title {
font-size: 14px;
line-height: 28px;
}
.section-categories-topics {
padding-bottom: 56px;
}
.section-categories-topics .heading-section {
margin-bottom: 38px;
}
.section-categories-topics .tags-list {
gap: 10px;
}
.section-categories-instructors {
padding-bottom: 54px;
}
.section-categories-instructors .wrap-instructor .entry-content .entry-meta {
margin-top: 4px;
margin-bottom: 5px;
}
.section-categories-instructors .wrap-instructor .entry-content p {
line-height: 24px;
}
.top-wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
flex-wrap: wrap;
}
.top-wrapper .sort-by-wrap .sort-wrap {
gap: 30px;
}
.top-wrapper .sort-by-wrap .sort-wrap .sort-by {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.top-wrapper .sort-by-wrap .sort-wrap .sort-by .text-2 {
padding-left: 0;
}
.grid-list-items-4 {
display: grid;
gap: 30px 40px;
grid-template-columns: repeat(4, 1fr);
margin-bottom: 33px;
}
.page-title.style-3 .tags-list {
flex-direction: column;
}
.page-title.style-3 .tags-list.style3 .tag-list .tag-list-item {
background-color: rgb(214, 235, 244);
}
.page-title.style-3 .tags-list.style3 .tag-list .tag-list-item:hover {
background-color: var(--bg-2);
}
.page-title.page-help {
padding: 61px 0 24px;
}
.page-title.page-help .content {
margin-left: auto;
margin-right: auto;
max-width: 925px;
}
.page-title.page-help .content h6 {
margin-bottom: 22px;
}
.page-title.page-help .content form {
border-radius: 999px;
overflow: hidden;
box-shadow: 0px 1px 4px 0px rgba(64, 79, 104, 0.1019607843);
margin-bottom: 35px;
}
.page-title.page-ui-elements .content .breadcrumbs, .page-title.checkout .content .breadcrumbs, .page-title.about .content .breadcrumbs, .page-title.instructor .content .breadcrumbs, .page-title.event .content .breadcrumbs, .page-title.become-teacher .content .breadcrumbs {
margin-top: 7px;
margin-bottom: 49px;
}
.page-title.page-ui-elements .content h2, .page-title.checkout .content h2, .page-title.about .content h2, .page-title.instructor .content h2, .page-title.event .content h2, .page-title.become-teacher .content h2 {
margin-bottom: 8px;
}
.page-title.become-teacher {
padding-bottom: 60px;
}
.page-title.become-teacher h6 {
margin-bottom: 22px;
}
.grid-list-items-5 {
display: grid;
gap: 31px 25px;
grid-template-columns: repeat(5, 1fr);
margin-bottom: 23px;
}
.tf-pagination-wrap {
max-width: 300px;
margin: 0 auto;
text-align: center;
}
.tf-pagination-wrap p {
margin-bottom: 12px;
}
.tf-pagination-wrap .progress {
width: 150px;
margin: 0 auto;
margin-bottom: 20px;
height: 2px;
}
.tf-pagination-wrap .tf-btn {
width: 100%;
background-color: var(--white);
color: var(--Primary);
border-radius: 8px;
}
.loadmore-item .fl-item {
display: none;
}
.grid-list-items-3 {
display: grid;
gap: 31px 40px;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 32px;
}
.grid-list-items-3.style-left {
padding-left: 2px;
}
.list-style-v3,
.list-style-v6 {
padding: 107px 0 118px;
background-color: var(--bg-4);
margin-bottom: 50px;
}
.list-style-v6 .grid-list-items-4,
.list-style-v7 .grid-list-items-4 {
gap: 26.67px;
}
.list-style-v1 {
padding-bottom: 40px;
}
.list-style-v2 {
padding-bottom: 54px;
}
.list-style-v4 {
padding-bottom: 49px;
}
.list-style-v5 {
padding-bottom: 60px;
}
.list-style-v7 {
padding-bottom: 48px;
}
.grid-list-items-5.list,
.grid-list-items-4.list {
margin-bottom: 0px;
}
.checkout-billing .tf-field {
height: 50px;
}
.section-vison .images {
border-radius: 12px;
overflow: hidden;
max-width: 686px;
height: 650.02px;
}
.section-vison .images img {
height: 100%;
width: 100%;
object-fit: cover;
}
.section-vison .content {
padding-top: 136.51px;
padding-bottom: 136.51px;
}
.section-vison .content .box-sub-tag {
margin-bottom: 20px;
}
.section-vison .content h2 {
margin-bottom: 8px;
}
.section-vison .content .text-content {
margin-bottom: 11px;
letter-spacing: 0.5px;
}
.section-vison .content ul {
display: flex;
flex-direction: column;
gap: 7px;
padding-bottom: 2px;
font-size: 15px;
}
.section-vison .content ul li::before {
content: "•";
color: black;
font-size: 20px;
margin-right: 9px;
}
.section-counter.page-about .counter .counter-content {
font-size: 26px !important;
line-height: 28px !important;
font-weight: 500 !important;
margin-bottom: 7px !important;
}
.contact-wrap .img-left img {
border-radius: 12px 0px 0px 12px;
}
.contact-wrap .content-right {
background-color: var(--bg-4) !important;
border-radius: 0 12px 12px 0;
}
.contact-wrap .content-right h2 {
margin-bottom: 9px;
}
.contact-wrap .content-right .register {
letter-spacing: 0.5px;
padding-bottom: 20px !important;
}
.contact-wrap .content-right .contact-form .tf-input {
background-color: #c9e3e0;
}
.contact-wrap .content-right p {
text-align: start !important;
}
.section-why.page-contact .icons-box .icons.has-ellipse::after {
top: 20px;
}
.section-items.page-help .wrap-icons-box {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 22px 10px;
max-width: 1290px;
margin: 0 auto;
}
.section-faq.page-help .tf-accordion {
max-width: 800px;
margin: 0 auto;
}
.top-wrapper.page-event, .top-wrapper.page-instructor {
margin-bottom: 38px;
}
.top-wrapper.page-event .group-filter form, .top-wrapper.page-instructor .group-filter form {
width: 300px;
}
.section-instructor.page-instructor .grid-layout-5 {
gap: 20px 26px;
margin-bottom: 32px;
}
.section-instructor.page-instructor .instructors-item .image-wrap {
height: 260px;
border-radius: 4px;
}
.section-event.page-event {
background-color: var(--white);
}
.section-event.page-event .grid-layout-4 {
gap: 28px 28px;
margin-bottom: 42px;
}
.section-top-course.page-become-teacher .widget-menu-tab {
margin-bottom: 60px;
}
.section-top-course.page-become-teacher .content {
max-width: 550px;
margin: 0 auto;
}
.section-top-course.page-become-teacher .content p {
font-size: 15px;
}
.section-top-course.page-become-teacher .content span {
font-size: 16px;
font-weight: 500;
line-height: 28px;
}
.section-top-course.page-become-teacher .content .paragraph-1 {
margin-bottom: 28px;
}
.section-top-course.page-become-teacher .image {
max-width: 560.5px;
max-height: 490.34px;
margin-left: 6px;
overflow: hidden;
}
.section-counter.page-become-teacher .wrap-couter {
padding: 78px 90px 77px;
background-color: var(--Primary);
border-radius: 12px;
}
.section-counter.page-become-teacher .wrap-couter .counter .number-counter .counter-content {
color: var(--White);
}
.section-counter.page-become-teacher .wrap-couter .counter .number-counter p {
color: var(--White);
}
.page-title.style-9 {
margin: 60px auto 0;
max-width: 1800px;
border-radius: 24px;
padding: 120px 186px;
}
.page-title.style-9.bg-5 {
background-color: #D6EBF4;
}
.page-title.style-9.bg-5 .author-item .author-item-img img {
border: 10px solid #D6EBF4;
}
.page-title.style-9::before {
background-size: contain;
top: -100px;
}
.page-title.style-9 .author-item .author-item-img img {
border: 10px solid var(--bg-4);
}
.page-title.style-9 .entry-meta li {
font-size: 15px;
}
.pd-bt-20 {
padding-bottom: 20px;
}
.fs-22 {
font-size: 22px;
}
.fs-16 {
font-size: 16px;
}
.section-icons {
padding-bottom: 40px;
}
.pb-13 {
padding-bottom: 13px;
}
.section-learn {
padding: 34px 40px 25px 40px;
border: 1px solid var(--Border);
border-radius: 12px;
}
.section-learn .wg-pagination {
padding: 10px;
}
.section-right {
padding: 40px 40px 40px 40px;
margin-left: auto;
max-width: 1000px;
border: 1px solid var(--Border);
border-radius: 12px;
}
.section-right .item-title {
padding-bottom: 23px;
}
.section-right .section-inner {
padding: 10px 0;
border-radius: 12px;
}
.section-right .course-item {
padding: 0px 0 30px 0;
margin-bottom: 10px;
}
.section-right .course-item img {
height: 210px;
}
.section-right .course-item .line-clamp-2 {
margin-bottom: -1px;
}
.section-right .filter {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding-bottom: 32px;
}
.section-right .widget-menu-tab {
margin-bottom: 40px;
}
.section-right .shop-checkout {
padding-bottom: 22px;
}
.section-dashboard-right {
margin-left: auto;
max-width: 1000px;
}
.section-dashboard-right .section-icons .icons-items {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 20px;
padding-bottom: 20px;
}
.section-dashboard-right .section-icons .icons-items .icons-box {
width: 320px;
height: 150px;
}
.section-dashboard-right .my-20 {
margin: -1.7px 0;
}
.section-dashboard-right .table-selling-course {
overflow-x: auto !important;
}
.section-dashboard-right .table-selling-course::-webkit-scrollbar {
width: 0px;
}
.section-dashboard-right .table-selling-course > * {
width: 920px;
}
.section-dashboard-right .table-selling-course > .head {
padding: 26px 30px 28px;
border-radius: 16px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
background-color: var(--bg-4);
}
.section-dashboard-right .table-selling-course > .head .item {
font-size: 16px;
font-weight: 500;
line-height: 19px;
}
.section-dashboard-right .table-selling-course > .head .item:nth-child(1) {
width: 545px;
}
.section-dashboard-right .table-selling-course > .head .item:nth-child(2) {
width: 156px;
}
.section-dashboard-right .table-selling-course > .head .item:nth-child(3) {
width: 120px;
}
.section-dashboard-right .table-selling-course > .head .item:nth-child(4) {
width: 201px;
text-align: end;
}
.section-dashboard-right .filter {
border: none;
}
.my-20 {
margin: 20px 0;
}
.ptable-20 {
padding: 20px;
}
.section-reviews-right {
padding: 32px 40px 0 38px;
}
.section-reviews-right .review-item {
padding: 23px 0 30px 0;
border-bottom: 1px solid var(--Border);
gap: 31px;
}
.section-reviews-right .review-item:last-child {
border: none;
}
.section-reviews-right .review-item .avatar {
margin-top: 8px;
}
.section-wishlist-right {
padding: 32px 40px 30px 38px;
}
.section-wishlist-right .course-item {
padding: 0px 0 23px 0;
}
.section-wishlist-right .filter {
margin-bottom: 30px;
}
.section-quizzes-right .heading-section {
padding-bottom: 12px;
border-bottom: 1px solid var(--Border);
}
.section-quizzes-right .list-quizzes {
margin: 21px 0 -22px 0;
padding: 20px 0 20px 0;
border-bottom: 1px solid var(--Border);
}
.section-quizzes-right .list-quizzes .img-name {
width: 411px;
}
.section-quizzes-right .list-quizzes .img-name img {
margin-right: 28px;
max-width: 100px;
}
.section-quizzes-right .list-quizzes .icons {
width: 438px;
}
.section-quizzes-right .list-quizzes .selling-course-btn {
width: 72px;
}
.section-quizzes-right .list-quizzes:last-child {
border: none;
}
.section-quizzes-right .list-quizzes li img {
max-height: 84px;
}
.section-quizzes-right .list-quizzes:first-child {
padding-top: 20px;
}
.section-quizzes-right .meta-item i,
.section-quizzes-right .meta-item p {
color: var(--Soft-Text);
}
.section-quizzes-right .box-1 {
margin-bottom: 60px;
padding: 32px 40px 23px 38px;
}
.section-quizzes-right .box-1 .table-box-1 {
overflow-x: auto;
overflow-y: hidden;
}
.section-quizzes-right .box-1 .table-box-1::-webkit-scrollbar {
width: 0px;
}
.section-quizzes-right .box-1 .table-box-1 > * {
width: 920px;
}
.section-quizzes-right .box-2 {
margin-bottom: 60px;
padding: 32px 40px 38px 38px;
}
.section-quizzes-right .box-2 .table-box-2 {
overflow-x: auto !important;
}
.section-quizzes-right .box-2 .table-box-2::-webkit-scrollbar {
width: 0px;
}
.section-quizzes-right .box-2 .table-box-2 > * {
width: 920px;
}
.section-quizzes-right .box-2 .table-box-2 > .head {
padding: 25px 30px 27px;
border-radius: 16px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
background-color: var(--bg-4);
margin-bottom: 16px;
}
.section-quizzes-right .box-2 .table-box-2 > .head .item {
font-size: 16px;
font-weight: 500;
line-height: 19px;
}
.section-quizzes-right .box-2 .table-box-2 > .head .item:nth-child(1) {
width: 371px;
}
.section-quizzes-right .box-2 .table-box-2 > .head .item:nth-child(2) {
width: 161px;
}
.section-quizzes-right .box-2 .table-box-2 > .head .item:nth-child(3) {
width: 161px;
}
.section-quizzes-right .box-2 .table-box-2 > .head .item:nth-child(4) {
width: 150px;
}
.section-quizzes-right .box-2 .filter {
border: none;
padding-bottom: 20px;
margin-bottom: 22px;
}
.section-quizzes-right .box-2 .heading-section {
margin-bottom: 41px;
}
.section-quizzes-right .box-2 .list-head {
padding: 20px 30px;
border-radius: 12px;
margin-bottom: 22px;
}
.section-quizzes-right .box-2 .list .name {
width: 371px;
}
.section-quizzes-right .box-2 .list .score {
width: 159px;
}
.section-quizzes-right .box-2 .list .attempt {
width: 160px;
}
.section-quizzes-right .box-2 .list .finishing-time {
width: 140px;
}
.section-quizzes-right .box-3 {
padding: 39px 40px 0px 38px;
}
.section-quizzes-right .box-3 .heading-section {
padding-bottom: 18px;
margin-bottom: 40px;
}
.section-quizzes-right .box-3 .heading-section h6 img {
max-height: 80px;
border-radius: 4px;
margin-right: 15px;
}
.section-quizzes-right .box-3 .heading-section span {
color: var(--Secondary);
}
.section-quizzes-right .box-3 .line {
padding-bottom: 15px;
}
.section-quizzes-right .box-3 .quiz {
padding-bottom: 40px;
}
.section-quizzes-right .box-3 .quiz .question {
padding: 26px 30px;
background-color: var(--bg-4);
border-radius: 8px;
}
.section-quizzes-right .box-3 .quiz .answers {
padding-top: 15px;
}
.section-quizzes-right .box-3 .quiz .answers.style-2 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 10px;
}
.section-quizzes-right .box-3 .quiz a {
margin-top: 20px;
margin-left: auto;
}
.section-quizzes-right .box-3 .quiz .radio-item {
padding: 14px 22px;
}
.section-quizzes-right .box-3 .quiz .answer {
padding: 11px 20px;
border: 1px solid var(--Border);
border-radius: 8px;
}
.section-quizzes-right .box-3 .quiz .selected {
border-color: var(--Primary);
}
.section-quizzes-right .box-3 .quiz .checkbox-item {
padding: 14px 20px;
}
.section-quizzes-right .list .table-head-title {
width: 60%;
}
.section-quizzes-right .list .table-head-number-sales {
width: 20%;
}
.section-quizzes-right .list .table-head-number-amount {
width: 20%;
}
.section-quizzes-right .list .table-head-action {
width: 20%;
}
.section-order-right {
padding: 32px 40px 18px 38px;
}
.section-order-right .heading-section {
margin-bottom: 42px;
}
.table-order {
overflow-x: auto !important;
}
.table-order::-webkit-scrollbar {
width: 0px;
}
.table-order > * {
min-width: 920px;
}
.table-order > .head {
padding: 25px 30px 27px;
border-radius: 16px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
background-color: var(--bg-4);
margin-bottom: 16px;
}
.table-order > .head .item {
font-size: 16px;
font-weight: 500;
line-height: 19px;
}
.table-order > .head .item:nth-child(1) {
width: 102px;
}
.table-order > .head .item:nth-child(2) {
width: 318px;
}
.table-order > .head .item:nth-child(3) {
width: 170px;
}
.table-order > .head .item:nth-child(4) {
width: 171px;
}
.table-order > .head .item:nth-child(5) {
width: 100px;
}
.section-setting-right {
padding: 32px 40px 40px 40px;
}
.section-setting-right .profile-wrap {
margin-bottom: 30px;
}
.section-setting-right .item-title {
padding-bottom: 23px;
}
.section-setting-right .tf-field {
padding: 10px 0;
}
.fs-26 {
font-size: 26px;
}
.fs-14 {
font-size: 14px;
}
.fw-4 {
font-weight: 400;
}
.mb-16 {
margin-bottom: 16px;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mb-40 {
margin-bottom: 40px !important;
}
.mb-52 {
margin-bottom: 52px !important;
}
.pb-26 {
padding-bottom: 26px;
}
.w-full {
width: 100%;
}
.w-447 {
width: 447px;
margin: 0 187px;
}
.w-568 {
width: 568px;
}
.p-60 {
padding: 60px;
}
.lh-45 {
line-height: 45px;
}
.section-add-course-right {
padding: 30px 40px 40px 40px;
}
.section-add-course-right .widget-menu-tab {
margin-bottom: 43px;
}
.section-add-course-right .tf-field {
margin-bottom: 29px;
}
.section-add-course-right .shop-checkout {
padding-bottom: 6px;
}
.section-add-course-right .section-right .item-title {
padding-bottom: 23px;
}
.section-add-course-right .style-secondary {
padding: 12px 135px;
}
.section-add-course-right .tf-accordion-style-3 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.section-add-course-right .tf-accordion-style-3 .tf-accordion-item {
padding: 26px 30px 29px 25px;
border: 1px solid var(--Border);
border-radius: 4px;
margin-bottom: 30px;
}
.section-add-course-right .tf-accordion-style-3 .tf-accordion-item .tf-accordion-header {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.section-add-course-right .tf-accordion-style-3 .tf-accordion-item .tf-accordion-header .tf-accordion-button {
position: relative;
padding: 0 24px;
}
.section-add-course-right .tf-accordion-style-3 .tf-accordion-item .tf-accordion-header .tf-accordion-button::after {
position: absolute;
left: 0;
}
.section-add-course-right .tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .list:first-child {
border-top: 1px solid var(--Border);
}
.section-add-course-right .tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .list {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 10px;
padding: 22px 0px 0px 0px;
}
.section-add-course-right .tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .list .icon > i {
font-size: 15px;
}
.section-add-course-right .tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .list .text {
font-size: 15px;
}
.section-add-course-right .tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .list .tf-accordion-btn {
position: absolute;
right: 0;
}
.section-add-course-right .tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .btn-add {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 10px;
margin-top: 21px;
}
.section-add-course-right .tf-accordion-style-3 .tf-accordion-item .tf-accordion-content .btn-add .tf-btn {
padding: 4px 16px;
}
.btn-mobile-instructors {
background-color: var(--Primary);
color: var(--White);
padding: 0 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
position: fixed;
left: 0;
top: 50%;
display: none;
}
.mobi-instructors-dashboard {
background-color: var(--White);
border-radius: 12px;
padding-bottom: 20px;
}
.mobi-instructors-dashboard .dashboard-title {
color: rgba(255, 255, 255, 0.5);
padding: 21px 30px 11px;
}
.mobi-instructors-dashboard .dashboard-item {
padding: 13.5px 30px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 10px;
color: var(--Primary);
font-size: 16px;
font-weight: 500;
position: relative;
}
.mobi-instructors-dashboard .dashboard-item i {
font-size: 20px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.mobi-instructors-dashboard .dashboard-item::before {
position: absolute;
content: "";
left: 0px;
bottom: 0px;
top: auto;
bottom: 0;
width: 2px;
height: 0;
background-color: var(--Secondary);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.mobi-instructors-dashboard .dashboard-item.active, .mobi-instructors-dashboard .dashboard-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.mobi-instructors-dashboard .dashboard-item.active::before, .mobi-instructors-dashboard .dashboard-item:hover::before {
height: 100%;
top: 0px;
bottom: auto;
}
.selling-course-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
}
.selling-course-item .image {
width: 100px;
height: 80px;
}
.selling-course-item .title {
padding-left: 30px;
}
.selling-course-item > div:nth-child(2) {
width: 371px;
}
.selling-course-item > div:nth-child(3) {
width: 130px;
}
.selling-course-item > div:nth-child(4) {
width: 197px;
}
.selling-course-item > div:nth-child(5) {
width: 70px;
}
.order-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
padding: 19.2px 30px;
}
.order-item .title {
padding-left: 30px;
}
.order-item > div:nth-child(1) {
width: 102px;
}
.order-item > div:nth-child(2) {
width: 318px;
}
.order-item > div:nth-child(3) {
width: 170px;
}
.order-item > div:nth-child(4) {
width: 171px;
}
.order-item > div:nth-child(5) {
width: 100px;
}
.box-2-item {
padding: 20px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
}
.box-2-item .image {
width: 50px;
}
.box-2-item .image img {
border-radius: 50%;
}
.box-2-item .title {
padding-left: 20px;
}
.box-2-item > div:nth-child(2) {
width: 333px;
}
.box-2-item > div:nth-child(3) {
width: 160px;
}
.box-2-item > div:nth-child(4) {
width: 161px;
}
.box-2-item > div:nth-child(5) {
width: 140px;
}
.wg-accordions {
padding-left: 8px;
}
.wg-tabs .widget-tabs {
padding-bottom: 20px;
gap: 10px;
}
.wg-tabs .widget-tabs .widget-menu-tab {
padding-bottom: 20px;
}
.wg-tabs .widget-tabs .widget-menu-tab.style-2 .item-title {
padding: 6px 20px;
font-size: 15px;
}
.wg-tabs .widget-tabs.style-small .widget-menu-tab {
margin-bottom: 20px;
padding: 0;
gap: 31px;
}
.wg-tabs .widget-tabs.style-small .widget-menu-tab .item-title {
font-size: 15px;
padding-bottom: 10px;
}
.wg-tabs .widget-content-inner {
padding: 0 15px;
}
.widget-tabs.style-2 .widget-menu-tab {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
padding-bottom: 20px;
gap: 10px;
}
.widget-tabs.style-2 .widget-menu-tab .item-title {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
position: relative;
padding: 6px 20px;
flex-shrink: 0;
font-size: 15px;
list-style: 30px;
font-weight: 500;
}
.widget-tabs.style-2 .widget-menu-tab .item-title.active, .widget-tabs.style-2 .widget-menu-tab .item-title:hover {
color: var(--Secondary);
border: 1px solid var(--Border);
border-radius: 32px;
}
.widget-tabs.style-2 .widget-menu-tab .item-title.active::after, .widget-tabs.style-2 .widget-menu-tab .item-title:hover::after {
width: 100%;
left: 0px;
right: auto;
}
.widget-tabs.style-2 .widget-menu-tab .widget-content-inner {
padding: 0 15px;
}
.wg-table .table-order .head {
margin: 0;
}
.wg-table .order-item {
padding: 11px 30px;
}
.wg-message-boxes .message-box-item {
margin-bottom: 21px;
padding: 22px 30px;
border-radius: 16px;
}
.wg-buttons .button-items {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 43px;
}
.wg-form .wg-radiobox {
padding-bottom: 18px;
}
.wg-form .wg-checkbox {
padding-bottom: 16px;
}
.wg-form .wg-switch .head {
padding-bottom: 13px;
}
.wg-form .wg-switch .switch-items {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 20px;
}
.wg-form .tf-select,
.wg-form .tf-input.style-1 {
padding: 24px 0 3px !important;
}
.wg-form .radio-item {
padding: 7px 0;
}
.wg-form .checkbox-item {
padding: 7.5px 0;
}
.wg-form .tf-select-label {
padding-top: 20px;
height: 50px;
margin-bottom: 18px;
}
.wg-form .tf-select-label::after {
border-bottom: 1.7px solid #3a3a3c;
border-right: 1.7px solid #3a3a3c;
content: "";
height: 8px;
width: 8px;
margin-top: -13px;
pointer-events: none;
position: absolute;
right: 3px;
top: 31px;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.wg-form .tf-select-label .default {
padding: 0 0 0 0;
margin: 0px 0px 16px;
width: 100%;
border-radius: 0px;
border: none !important;
border-bottom: 2px solid var(--Border) !important;
color: var(--Primary);
}
.wg-form .tf-select-label .default option {
color: var(--Primary);
}
.wg-form .tf-select-label.focused {
border-color: var(--Primary);
}
.wg-form .tf-select-label.focused::after {
transform: rotate(-135deg);
}
.wg-form .tf-select-label.focused .select-label {
left: 0px;
padding: 0px !important;
background-color: var(--White);
transform: translateY(-70%);
}
.wg-form .tf-select-label.focused .default {
border-color: var(--Primary) !important;
color: var(--Primary);
font-size: 15px;
}
.wg-form .tf-select-label .select-label {
left: 0px;
top: 15px;
color: var(--Primary);
line-height: 20px;
}
.wg-range-slider .heading-section {
padding-bottom: 7px;
}
.wg-progress-bars .heading-section {
padding: 10px 0 21px 0;
}
.wg-progress-bars .progess-bars-item {
margin-left: 182px;
}
.wg-progress-bars .progress-bars {
padding-bottom: 10px;
}
.wg-progress-bars .progress-bars .progress-bars-line {
display: block;
height: 6px;
border-radius: 10px;
background-color: var(--Border);
}
.wg-progress-bars .progress-bars .progress-bars-line > div {
position: relative;
display: block;
height: 6px;
border-radius: 10px;
background-color: var(--Secondary);
}
.wg-progress-bars .progress-bars .progress-bars-line > div .progress-bars-number {
position: absolute;
right: -3px;
top: -30px;
}
.wg-typography .head {
padding-bottom: 10px;
}
.wg-typography .desc {
margin-bottom: 25px;
}
.wg-typography .blockquote {
padding: 44px 60px;
border-radius: 8px;
background-color: var(--bg-4);
margin-bottom: 51px;
}
.wg-typography .learn .head {
padding-bottom: 16px;
}
.wg-typography .learn ul li {
padding-bottom: 12px;
}
/*------------ sections ---------------- */
.tf-spacing-1 {
padding-top: 60px;
padding-bottom: 160px;
}
.tf-spacing-2 {
padding-top: 52px;
padding-bottom: 160px;
}
.tf-spacing-3 {
padding-top: 60px;
padding-bottom: 149px;
}
.tf-spacing-4 {
padding-top: 160px;
padding-bottom: 160px;
}
.tf-spacing-5 {
padding-top: 147.5px;
padding-bottom: 144.5px;
}
.tf-spacing-6 {
padding-top: 60px;
padding-bottom: 141px;
}
.tf-spacing-7 {
padding-top: 60px;
padding-bottom: 146px;
}
.tf-spacing-8 {
padding-top: 149px;
padding-bottom: 150px;
}
.tf-spacing-10 {
padding-bottom: 60px;
padding-top: 60px;
}
.tf-spacing-11 {
padding-top: 148px;
padding-bottom: 160px;
}
.tf-spacing-12 {
padding-top: 149px;
padding-bottom: 141px;
}
.tf-spacing-20 {
padding-top: 48px;
padding-bottom: 140px;
}
.tf-spacing-21 {
padding-bottom: 40px;
padding-top: 40px;
}
.tf-spacing-22 {
padding-top: 55px;
padding-bottom: 133px;
}
.tf-spacing-23 {
padding-top: 142px;
padding-bottom: 139px;
}
.tf-spacing-24 {
padding-top: 140px;
padding-bottom: 139px;
}
.tf-spacing-25 {
padding-top: 160px;
padding-bottom: 150px;
}
.tf-spacing-26 {
padding-top: 0;
padding-bottom: 153px;
}
.tf-spacing-27 {
padding-top: 151px;
padding-bottom: 145px;
}
.tf-spacing-28 {
padding-top: 0;
padding-bottom: 123px;
}
.tf-spacing-29 {
padding-top: 0;
padding-bottom: 134px;
}
.tf-spacing-30 {
padding-top: 0;
padding-bottom: 148px;
}
.tf-spacing-31 {
padding-top: 0;
padding-bottom: 138px;
}
.tf-spacing-32 {
padding-top: 0;
padding-bottom: 141px;
}
.tf-spacing-33 {
padding-top: 0;
padding-bottom: 136px;
}
.tf-spacing-31 {
padding-top: 160px;
padding-bottom: 136px;
}
.tf-spacing-32 {
padding-top: 143px;
padding-bottom: 120px;
}
.tf-spacing-33 {
padding-top: 129px;
padding-bottom: 139px;
}
.tf-spacing-34 {
padding-top: 155px;
padding-bottom: 155px;
}
.tf-spacing-35 {
padding-top: 88px;
padding-bottom: 90px;
}
.tf-spacing-36 {
padding-top: 149px;
padding-bottom: 153px;
}
.lesp-1 {
letter-spacing: 1px;
}
.w-800 {
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.pt-66 {
padding-top: 66px;
}
.pb-0 {
padding-bottom: 0;
}
.bdru-12 {
border-radius: 12px;
}
.text-white {
color: var(--White);
}
.grid-layout-4 {
display: grid;
gap: 22px 28px;
grid-template-columns: repeat(3, 1fr);
}
.grid-layout-4.gap40 {
gap: 32px 40px;
}
.grid-layout-5 {
display: grid;
gap: 22px 28px;
grid-template-columns: repeat(5, 1fr);
}
.grid-layout-5.gap40 {
gap: 32px 40px;
}
.heading-section {
margin-bottom: 32px;
}
.heading-section h2 {
margin-bottom: 7px;
font-weight: 700;
}
.heading-section p {
font-size: 15px;
}
.heading-section h3 {
margin-bottom: 7px;
}
.heading-section.style-white .sub,
.heading-section.style-white h2 {
color: var(--White);
}
.main-content {
padding-top: 149px;
}
.main-content.pb-63 {
padding-bottom: 63px;
}
.main-content.pb-182 {
padding-bottom: 182px;
}
.section-instructors {
position: relative;
}
.section-instructors .instructors-teacher-img {
width: 179px;
position: absolute;
top: 38px;
left: 25px;
}
.section-instructors .item-event-btn {
margin-top: 26px;
}
.instructors-dashboard {
background-color: var(--Primary);
border-radius: 12px;
padding-bottom: 20px;
}
.instructors-dashboard .dashboard-title {
color: rgba(255, 255, 255, 0.5);
padding: 21px 30px 11px;
}
.instructors-dashboard .dashboard-item {
padding: 13.5px 30px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 10px;
color: var(--White);
font-size: 16px;
font-weight: 500;
position: relative;
}
.instructors-dashboard .dashboard-item i {
font-size: 20px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.instructors-dashboard .dashboard-item::before {
position: absolute;
content: "";
left: 0px;
bottom: 0px;
top: auto;
bottom: 0;
width: 2px;
height: 0;
background-color: var(--Secondary);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.instructors-dashboard .dashboard-item.active, .instructors-dashboard .dashboard-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.instructors-dashboard .dashboard-item.active::before, .instructors-dashboard .dashboard-item:hover::before {
height: 100%;
top: 0px;
bottom: auto;
}
.page-title {
padding: 53px 0 51px;
background-color: var(--bg-4);
position: relative;
}
.page-title::before {
position: absolute;
content: "";
inset: 0;
background-image: url(../images/page-title/inner-page.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.page-title .breadcrumbs {
margin-bottom: 47px;
height: 14px;
}
.page-title h2 {
margin-bottom: 8px;
}
.page-title.has-bg4 {
background-color: var(--bg-4) !important;
padding: 60px 0 !important;
}
.page-title.no-border .content {
border: none !important;
padding-bottom: 0px !important;
}
.page-title.has-tags-bg-white .tags-list .tag-list-item {
background-color: var(--White) !important;
}
.page-title.has-tags-bg-white .tags-list .tag-list-item:hover {
background-color: var(--bg-2) !important;
}
.page-title.has-tags-bg-sky .tag-list .tag-list-item {
background-color: rgb(214, 235, 244) !important;
}
.page-title.has-tags-bg-sky .tag-list .tag-list-item:hover {
background-color: var(--bg-2) !important;
}
.page-title.page-help {
padding: 61px 0 24px;
}
.page-title.page-help .content {
margin-left: auto;
margin-right: auto;
max-width: 925px;
}
.page-title.page-help .content h6 {
margin-bottom: 22px;
}
.page-title.page-help .content form {
border-radius: 999px;
overflow: hidden;
box-shadow: 0px 1px 4px 0px rgba(64, 79, 104, 0.1019607843);
margin-bottom: 35px;
}
.page-title.page-become-teacher {
padding-bottom: 60px;
}
.page-title.page-become-teacher h6 {
margin-bottom: 22px;
}
.page-blog-grid {
padding-top: 52px;
}
.page-blog-grid .wg-pagination {
margin-top: 34px;
}
.page-blog-list {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
gap: 30px;
}
.page-blog-list > .left {
width: 100%;
max-width: 940px;
}
.page-blog-list > .right {
width: 100%;
max-width: 350px;
height: max-content;
}
.page-blog-list .wrap-blog-list .blog-article-item:not(:last-child) {
margin-bottom: 28px;
}
.page-blog-list .wg-pagination {
margin-top: 40px;
}
.page-blog-list.blog-list-v2 .wrap-blog-list .blog-article-item:not(:last-child) {
margin-bottom: 21px;
}
.page-blog-list.blog-list-v2 .wg-pagination {
margin-top: 33px;
}
.tf-sidebar {
padding: 15px;
border: 1px solid var(--Border);
border-radius: 8px;
}
.tf-sidebar.filter {
border-radius: unset;
}
.tf-sidebar.course.right {
margin-left: 9px;
}
.tf-sidebar.course .sidebar-item ul {
display: flex;
flex-direction: column;
gap: 8px;
}
.tf-sidebar.course .sidebar-item ul li p {
font-size: 15px;
}
.tf-sidebar .checkbox-item span {
float: right;
}
.tf-sidebar .widget {
padding-bottom: 40px;
margin-bottom: 30px;
border-bottom: 1px solid var(--Border);
}
.tf-sidebar .widget.heading-title {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.tf-sidebar .widget.heading-title i {
display: inline-block;
height: 30px;
width: 30px;
text-align: center;
line-height: 35px;
background-color: var(--bg-4);
font-size: 14px;
border-radius: 50%;
}
.tf-sidebar .sidebar-search {
margin-bottom: 31px;
}
.tf-sidebar .sidebar-search .form-search input {
border-radius: 8px;
}
.tf-sidebar .sidebar-item:not(:last-child) {
padding-bottom: 20px;
border-bottom: 1px solid var(--Border);
margin-bottom: 33px;
}
.tf-sidebar .sidebar-item.pb-36 {
padding-bottom: 36px;
}
.tf-sidebar .sidebar-item .showmore-item .fl-item2 {
display: none;
}
.tf-sidebar .sidebar-item .showmore-item2 .fl-item3 {
display: none;
}
.tf-sidebar .sidebar-item .showmore-item3 .fl-item4 {
display: none;
}
.tf-sidebar .sidebar-item .showmore-item4 .fl-filter-item5 {
display: none;
}
.tf-sidebar .sidebar-item .showmore-item5 .fl-filter-item6 {
display: none;
}
.tf-sidebar .sidebar-item .showmore-item6 .fl-filter-item7 {
display: none;
}
.tf-sidebar .ratings {
gap: 10px;
}
.tf-sidebar .sidebar-title {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
cursor: pointer;
}
.tf-sidebar .sidebar-title i {
font-size: 10px;
color: var(--Black);
}
.tf-sidebar .sidebar-categories .sidebar-title {
margin-bottom: 13px;
}
.tf-sidebar .sidebar-categories ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 8px;
}
.tf-sidebar .sidebar-categories ul .number {
color: var(--Soft-Text);
}
.tf-sidebar .sidebar-recent ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 21px;
}
.tf-sidebar .showmore {
margin-top: 4px;
cursor: pointer;
}
.tf-sidebar .showmore .title {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
gap: 10px;
color: var(--Secondary);
}
.tf-sidebar .showmore i {
display: block;
font-size: 9px;
padding-top: 3px;
transform: rotate(0deg);
transition: all 0.3s ease-in-out;
}
.tf-sidebar .showmore i.rotate {
transform: rotate(180deg);
transition: all 0.3s ease-in-out;
}
.tf-sidebar .sidebar-item:last-child {
border-bottom: none;
padding-bottom: 0px;
margin-bottom: 0;
}
.page-blog-single {
padding: 0 60px;
}
.page-blog-single .image-head {
/* border-radius: 16px; */
overflow: hidden;
margin-bottom: 34px;
}
.page-blog-single .blog-single-wrap {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
}
.page-blog-single .blog-single-wrap .meta {
margin-bottom: 13px;
}
.page-blog-single .blog-single-wrap h2 {
margin-bottom: 40px;
}
.page-blog-single .blog-single-wrap .title {
margin-bottom: 16px;
}
.page-blog-single .blog-single-wrap .wrap-list-text-check {
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 53px;
}
.page-blog-single .blog-single-wrap .wrap-list-text-check .list-text-item {
width: 47.9%;
}
.page-blog-single .blog-single-wrap .image-wrap {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 35px;
margin-bottom: 45px;
}
.page-blog-single .blog-single-wrap .image-wrap .image-item {
width: 100%;
text-align: center;
}
.page-blog-single .blog-single-wrap .image-wrap .image-item img {
width: 100%;
height: 350px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 11px;
}
.page-blog-single .blog-single-wrap .wrap-list-text-dot {
margin-top: -1px;
margin-bottom: 51px;
}
.page-blog-single .blog-single-wrap > .bottom {
padding-top: 30px;
padding-bottom: 30px;
border-top: 1px solid var(--Border);
border-bottom: 1px solid var(--Border);
margin-bottom: 60px;
margin-top: 60px;
}
.page-blog-single .blog-single-wrap .profile-item {
margin-bottom: 60px;
}
.page-blog-single .blog-single-wrap > .post-control {
padding-top: 51px;
padding-bottom: 50px;
border-top: 1px solid var(--Border);
border-bottom: 1px solid var(--Border);
margin-bottom: 54px;
}
.page-blog-single .blog-single-wrap .review-wrap {
margin-bottom: 60px;
}
.page-title-home1 .content {
padding-top: 150px;
padding-bottom: 150px;
}
.page-title-home1 .content .box-sub-tag {
margin-bottom: 22px;
}
.page-title-home1 .content h1 {
margin-bottom: 10px;
}
.page-title-home1 .content h6 {
margin-bottom: 31px;
}
.page-title-home1 .content .bottom-btns {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 30px 18px;
}
.page-title-home1 .image {
position: relative;
max-width: 480px;
margin-left: auto;
margin-top: -25px;
}
.page-title-home1 .image .item1 {
position: absolute;
top: 53px;
left: -57px;
width: 121px;
}
.page-title-home1 .image .item2 {
position: absolute;
bottom: 74px;
left: -20px;
width: 108px;
}
.page-title-home1 .image .item3 {
position: absolute;
bottom: 55px;
right: -24px;
width: 115px;
}
.page-title-home1 .bot-categories {
position: relative;
padding: 0 60px;
border-top: 1px solid var(--Border);
border-bottom: 1px solid var(--Border);
}
.page-title-home1 .bot-categories h6 {
text-align: center;
}
.page-title-home1 .bot-categories .icon {
margin-bottom: 12px;
height: 34px;
}
.page-title-home1 .bot-categories .item {
position: relative;
padding: 40px 0 26px;
text-align: center;
}
.page-title-home1 .bot-categories .item::before {
position: absolute;
content: "";
top: 0px;
left: auto;
right: 0;
width: 0;
height: 1px;
background-color: var(--Primary);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.page-title-home1 .bot-categories .item:hover::before {
width: 100%;
left: 0px;
right: auto;
}
.page-title-home2 {
background-color: #fff4f0;
}
.page-title-home2 .content {
padding-top: 228px;
padding-bottom: 225px;
}
.page-title-home2 .content .box-sub-tag {
padding: 5px 24px 5px 4px;
border: 0;
box-shadow: 0px 1px 4px 0px rgba(64, 79, 104, 0.0509803922);
margin-bottom: 21px;
}
.page-title-home2 .content h1 {
letter-spacing: 2.3px;
margin-bottom: 30px;
}
.page-title-home2 .content h6 {
margin-bottom: 31px;
}
.page-title-home2 .content .bottom-btns {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 30px 20px;
}
.page-title-home2 .content .bottom-btns .widget-video {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-title-home2 .content .bottom-btns .widget-video > a {
position: unset;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
width: 46px;
height: 46px;
}
.page-title-home2 .image {
position: relative;
max-width: 600px;
margin-left: auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 10px;
}
.page-title-home2 .image > div {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 9px;
}
.page-title-home2 .image img {
border-radius: 12px;
}
.page-title-home2 .image .box {
width: 100%;
max-width: 221.54px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
padding: 43px 10px 0px;
height: 221px;
align-items: center;
border-radius: 12px;
background-color: #1c8a7c;
}
.page-title-home2 .image .box .icon {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
font-size: 28px;
border-radius: 50%;
background-color: #f8eee1;
margin-bottom: 7px;
}
.page-title-home2 .image .box.box2 {
background-color: var(--bg-3);
}
.page-title-home2 .image .box.box2 .icon {
background-color: #e4d5f6;
}
.page-title-home2 .wrap-brand {
padding-bottom: 59px;
}
.page-title-home3 {
position: relative;
padding: 247px 0 184px;
background-image: url(../images/page-title/page-title-home3-1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.page-title-home3 .content {
max-width: 686px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.page-title-home3 .content h1 {
margin-bottom: 13px;
line-height: 78px;
letter-spacing: 2px;
}
.page-title-home3 .content h6 {
margin-bottom: 32px;
}
.page-title-home3 .content form {
border-radius: 999px;
overflow: hidden;
box-shadow: 0px 1px 4px 0px rgba(64, 79, 104, 0.1019607843);
margin-bottom: 35px;
}
.page-title-home3 .content .wrap-list-text-check1 {
justify-content: center;
}
.page-title-home3 .content .wrap-list-text-check1 li:not(:last-child) {
margin-right: 20px;
}
.page-title-home3 .image-bg .image1 {
position: absolute;
width: 100px;
height: 100px;
top: 145px;
left: 100px;
}
.page-title-home3 .image-bg .image2 {
position: absolute;
width: 200px;
height: 200px;
top: 201px;
left: 342px;
}
.page-title-home3 .image-bg .image3 {
position: absolute;
width: 150px;
height: 150px;
bottom: 229px;
left: 100px;
}
.page-title-home3 .image-bg .image4 {
position: absolute;
width: 100px;
height: 100px;
bottom: 87px;
left: 359px;
}
.page-title-home3 .image-bg .image5 {
position: absolute;
width: 100px;
height: 100px;
top: 155px;
right: 442px;
}
.page-title-home3 .image-bg .image6 {
position: absolute;
width: 200px;
height: 200px;
top: 211px;
right: 100px;
}
.page-title-home3 .image-bg .image7 {
position: absolute;
width: 150px;
height: 150px;
bottom: 219px;
right: 392px;
}
.page-title-home3 .image-bg .image8 {
position: absolute;
width: 100px;
height: 100px;
bottom: 77px;
right: 183px;
}
.page-title-home4 {
position: relative;
}
.page-title-home4 .image-bg .image1 {
position: absolute;
width: 15px;
height: 51px;
top: 230px;
left: 128px;
}
.page-title-home4 .image-bg .image2 {
position: absolute;
width: 89px;
top: 644px;
left: 729px;
}
.page-title-home4 .image-bg .image3 {
position: absolute;
width: 66.85px;
height: 90.87px;
top: 166.87px;
left: 902.15px;
}
.page-title-home4 .image-bg .image4 {
position: absolute;
width: 128px;
height: 126.05px;
top: 178px;
right: 536px;
}
.page-title-home4 .image-bg .image5 {
position: absolute;
top: 0;
right: 0;
width: 747px;
}
.page-title-home4 .image-bg .image6 {
position: absolute;
width: 137px;
height: 140px;
bottom: 12px;
right: 181px;
}
.page-title-home4 .image-bg .image7 {
position: absolute;
width: 67.69px;
height: 108.07px;
top: 416.07px;
right: 113px;
}
.page-title-home4 .content {
padding-top: 311px;
padding-bottom: 200px;
}
.page-title-home4 .content h1 {
margin-bottom: 11px;
}
.page-title-home4 .content h6 {
margin-bottom: 30px;
}
.page-title-home4 .content .bottom-btns {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 30px 20px;
}
.page-title-home4 .content .bottom-btns .tf-btn {
border-radius: 12px;
}
.page-title-home4 .image {
position: relative;
max-width: 620px;
margin-left: auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 20px;
}
.page-title-home4 .image > div {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.page-title-home4 .image .image1 {
position: relative;
height: max-content;
}
.page-title-home4 .image .image1 img {
border-radius: 92px 24px 92px 24px;
}
.page-title-home4 .image .image1::before {
position: absolute;
content: "";
top: 20px;
right: 20px;
bottom: -20px;
left: -20px;
border-radius: 92px 24px 92px 24px;
border: 1px solid var(--Secondary);
z-index: -1;
}
.page-title-home4 .image .image2 img {
border-radius: 80px 8px 80px 8px;
}
.page-title-home4 .image .image3 img {
border-radius: 8px 80px 8px 80px;
}
.page-title-home5 {
background-image: url(../images/page-title/page-title-home5.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.page-title-home5 .content {
padding-top: 250px;
padding-bottom: 242px;
}
.page-title-home5 .content .box-sub-tag {
border: 0;
box-shadow: 0px 1px 4px 0px rgba(64, 79, 104, 0.0509803922);
margin-bottom: 24px;
}
.page-title-home5 .content h1 {
margin-bottom: 13px;
line-height: 78px;
letter-spacing: 1.9px;
}
.page-title-home5 .content h6 {
margin-bottom: 30px;
}
.page-title-home5 .content .bottom-btns {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 30px 20px;
}
.page-title-home5 .content .bottom-btns .widget-video {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.page-title-home5 .content .bottom-btns .widget-video > a {
position: unset;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
padding: 16px;
}
.page-title-home5 .content .bottom-btns .widget-video > a i {
font-size: 14px;
}
.page-title-home5 .image {
max-width: 581px;
margin-left: auto;
margin-top: 38px;
}
.page-title-home6 .content {
padding-top: 147px;
padding-bottom: 160px;
max-width: 591px;
}
.page-title-home6 .content h1 {
margin-bottom: 13px;
line-height: 78.2px;
text-transform: capitalize;
letter-spacing: 2.3px;
}
.page-title-home6 .content h6 {
margin-bottom: 30px;
}
.page-title-home6 .content p {
color: var(--Soft-Text);
}
.page-title-home6 .content p span {
color: var(--Primary);
}
.page-title-home6 .content form {
margin-bottom: 33px;
}
.page-title-home6 .content form input {
border: 1px solid var(--Border);
border-radius: 12px;
padding-right: 160px;
}
.page-title-home6 .content form .button-submit button {
width: unset;
border-radius: 12px;
gap: 10px;
padding: 0 30px;
color: var(--White);
font-size: 16px;
}
.page-title-home6 .image {
margin-left: -25px;
margin-bottom: -3px;
padding-top: 85px;
}
.page-title-home7 {
background-image: url(../images/section/start-banner-1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.page-title-home7::after {
position: absolute;
content: "";
bottom: 0;
left: 0;
right: 0;
height: 144px;
background-color: var(--White);
clip-path: polygon(0 76.39%, 100% 0%, 100% 100%, 0% 100%);
z-index: 5;
}
.page-title-home7 .content-page-title {
padding-top: 196px;
padding-bottom: 240px;
}
.page-title-home7 .content-page-title .widget.box-sub-tag {
box-shadow: 0px 1px 4px 0px rgba(64, 79, 104, 0.0509803922);
background-color: transparent;
margin-bottom: 23px;
}
.page-title-home7 .content-page-title .widget.box-sub-tag .sub-tag-icon {
background-color: var(--White);
}
.page-title-home7 .content-page-title .widget.box-sub-tag p {
color: var(--White);
}
.page-title-home7 .content-page-title h1 {
margin-bottom: 13px;
line-height: 78.12px;
letter-spacing: 2.5px;
color: var(--White);
}
.page-title-home7 .content-page-title h6 {
margin-bottom: 30px;
color: var(--White);
}
.page-title-home7 .content-page-title .bottom-btns {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 30px 20px;
margin-bottom: 31px;
}
.page-title-home7 .content-page-title .bottom-btns > a {
border: 0;
border-radius: 12px;
padding: 14px 35px;
}
.page-title-home7 .content-page-title .counter.style-2 .number-counter {
min-width: 204px;
border-left: 2px solid var(--White);
}
.page-title-home7 .content-page-title .counter.style-2 .number-counter .counter-content,
.page-title-home7 .content-page-title .counter.style-2 .number-counter p {
color: var(--White);
}
.page-title-home7 .content-page-title .widget-video {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.page-title-home7 .content-page-title .widget-video > a {
position: unset;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
padding: 16px;
border: 1px solid var(--White);
background-color: transparent;
color: var(--White);
}
.page-title-home7 .content-page-title .widget-video > a i {
font-size: 14px;
}
.page-title-home7 .content-page-title .widget-video > a:hover {
color: var(--Primary);
}
.page-title-home7 .image-page-title {
position: absolute;
top: 149px;
right: -41px;
max-width: 740px;
}
.page-title-home7 .image-page-title .course-item.style-2.has-padding .features {
margin: 20px 20px 0 20px;
}
.page-title-home7 .image-page-title .course-item.style-2.has-padding .features img {
min-height: 240px;
}
.page-title-home7 .image-page-title .course-item.style-2 .content {
padding-top: 10px;
}
.page-title-home7 .image-page-title .course-item.style-2 .content h6 {
font-size: 18px;
font-weight: 500;
line-height: 30px;
margin-bottom: 10px;
}
.page-title-home7 .swiper-slide-next {
opacity: 0.5;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.page-title-home8 {
background-color: var(--bg-4);
position: relative;
}
.page-title-home8 .content {
padding-top: 50px;
padding-bottom: 50px;
}
.page-title-home8 .content .box-sub-tag {
box-shadow: 0px 1px 4px 0px rgba(64, 79, 104, 0.0509803922);
border: 0px;
margin-bottom: 25px;
}
.page-title-home8 .content .box-sub-tag .sub-tag-icon {
background-color: var(--bg-1);
color: var(--Primary);
}
.page-title-home8 .content h1 {
margin-bottom: 17px;
letter-spacing: 2.2px;
line-height: 78.12px;
}
.page-title-home8 .content h6 {
margin-bottom: 30px;
}
.page-title-home8 .content .wrap-list-text-check1 {
margin-bottom: 36px;
}
.page-title-home8 .content .wrap-list-text-check1.style-column li:not(:last-child) {
margin-bottom: 12px;
}
.page-title-home8 .content .bottom-btns {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 30px 20px;
}
.page-title-home8 .content .bottom-btns .widget-video {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.page-title-home8 .content .bottom-btns .widget-video > a {
position: unset;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
padding: 16px;
}
.page-title-home8 .content .bottom-btns .widget-video > a i {
font-size: 14px;
}
.page-title-home9 {
/* margin-left: 60px;
margin-right: 60px; */
position: relative;
}
.page-title-home9 .image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.page-title-home9 .image::before {
position: absolute;
content: "";
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
/* border-radius: 0px 0px 32px 32px; */
}
.page-title-home9 .image img {
width: 100%;
height: 100%;
object-fit: cover;
/* border-radius: 0px 0px 32px 32px; */
}
.page-title-home9 .content {
padding-top: 304px;
padding-bottom: 303px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
}
.page-title-home9 .content .widget.box-sub-tag {
box-shadow: 0px 1px 4px 0px rgba(64, 79, 104, 0.0509803922);
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.1019607843);
margin-bottom: 23px;
}
.page-title-home9 .content .widget.box-sub-tag .sub-tag-icon {
background-color: rgba(255, 255, 255, 0.1019607843);
color: var(--White);
}
.page-title-home9 .content .widget.box-sub-tag p {
color: var(--White);
}
.page-title-home9 .content h1 {
letter-spacing: 2.3px;
margin-bottom: 22px;
color: var(--White);
line-height: 78.12px;
text-transform: capitalize;
}
.page-title-home9 .content .bottom-btns {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 30px 20px;
}
.page-title-home9 .content .bottom-btns > a {
border: 0;
border-radius: 8px;
}
.page-title-home9 .content .widget-video {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.page-title-home9 .content .widget-video > a {
position: unset;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
padding: 27px;
border-radius: 100%;
}
.page-title-home9 .content .widget-video > a i {
font-size: 16px;
}
.page-title-home9 .content .widget-video h6 {
color: var(--White);
}
.page-title-home9 .bottom-wrap {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 0px 80px;
}
.page-title-home9 .bottom-wrap .item {
width: 100%;
padding: 30px 0 32px;
border-top: 2px solid rgba(255, 255, 255, 0.3019607843);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
}
.page-title-home9 .bottom-wrap .item h4 {
color: var(--White);
}
.page-title-home9 .bottom-wrap .item:hover {
border-color: var(--White);
}
.page-title-home9 .swiper-pagination {
bottom: 0;
left: 0;
right: 0;
padding: 0px 15px;
display: flex;
gap: 80px;
justify-content: space-between;
width: 100%;
align-items: center;
}
.page-title-home9 .swiper-pagination .swiper-pagination-bullet {
width: 100%;
height: auto;
display: block;
border-radius: 0;
background: transparent !important;
opacity: 1 !important;
font-family: "DM Sans";
font-size: 20px;
font-weight: 500;
color: var(--White);
line-height: 30px;
padding: 32px 0px;
border-top: 2px solid rgba(255, 255, 255, 0.3);
text-align: left;
}
.page-title-home9 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
border-top: 2px solid var(--White);
}
.page-title-home9 .swiper-slide .fade-item {
-webkit-transform: translate(0px, 150px);
-moz-transform: translate(0px, 150px);
-ms-transform: translate(0px, 150px);
-o-transform: translate(0px, 150px);
transform: translate(0px, 150px);
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.page-title-home9 .swiper-slide .fade-item.fade-item-1 {
transition-delay: 0.1s;
}
.page-title-home9 .swiper-slide .fade-item.fade-item-2 {
transition-delay: 0.2s;
}
.page-title-home9 .swiper-slide .fade-item.fade-item-3 {
transition-delay: 0.3s;
}
.page-title-home9 .swiper-slide .fade-item.fade-item-4 {
transition-delay: 0.4s;
}
.page-title-home9 .swiper-slide.swiper-slide-active .fade-item {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
opacity: 1;
visibility: visible;
}
.page-title-home10 {
position: relative;
}
.page-title-home10::before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
height: 82.76%;
background-color: var(--bg-4);
}
.page-title-home10 .image-bg .image1 {
position: absolute;
width: 179px;
height: 368px;
top: 75px;
}
.page-title-home10 .image-bg .image2 {
position: absolute;
width: 260px;
height: 295px;
top: 90px;
right: 0;
}
.page-title-home10 .image-bg .image3 {
position: absolute;
width: 211px;
height: 160px;
top: 403px;
right: 179px;
z-index: 2;
}
.page-title-home10 .content {
padding-top: 147px;
padding-bottom: 62px;
}
.page-title-home10 .content h1 {
margin-bottom: 15px;
font-size: 55px;
line-height: 71.61px;
letter-spacing: 2px;
}
.page-title-home10 .content h6 {
margin-bottom: 33px;
}
.page-title-home10 .content .bottom-btns {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
gap: 30px 20px;
}
.page-title-home10 .content .bottom-btns a {
border: 0;
border-radius: 8px;
}
.page-title-home10 .image-bot {
max-width: 1700px;
margin-left: auto;
margin-right: auto;
border-radius: 32px;
overflow: hidden;
}
.page-title.categories {
margin-bottom: 55px;
}
.page-title.all-course {
padding: 60px 0 51px;
}
.page-title.all-course h2 {
font-size: 42px;
line-height: 56.87px;
}
.page-title.basic .content .breadcrumbs {
margin-top: 7px;
margin-bottom: 49px;
}
.page-title.basic .content h2 {
margin-bottom: 8px;
}
.page-title.style-2, .page-title.style-3 {
padding: 60px 0;
background-color: var(--White);
}
.page-title.style-2 h2, .page-title.style-3 h2 {
font-size: 42px;
line-height: 56.87px;
margin-bottom: 7px;
}
.page-title.style-2 p, .page-title.style-3 p {
font-size: 15px;
margin-bottom: 43px;
}
.page-title.style-2 .tags-list, .page-title.style-3 .tags-list {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 21px;
}
.page-title.style-2::before {
display: none;
}
.page-title.style-2 .content {
padding-bottom: 60px;
border-bottom: 1px solid var(--Border);
}
.page-title.style-3 {
max-width: 1800px;
margin: 0 auto;
border-radius: 24px;
background-color: rgb(214, 235, 244);
margin-top: 60px;
}
.page-title.style-3::before {
background-size: contain;
}
.page-title.style-3 .tags-list .tag-list-item {
background-color: rgb(214, 235, 244);
}
.page-title.style-4 h2, .page-title.style-5 h2, .page-title.style-6 h2, .page-title.style-7 h2, .page-title.style-8 h2 {
margin-bottom: 8px;
}
.page-title.style-4 .except, .page-title.style-5 .except, .page-title.style-6 .except, .page-title.style-7 .except, .page-title.style-8 .except {
font-size: 16px;
color: var(--Primary);
margin-bottom: 22px;
}
.page-title.style-4 .entry-meta, .page-title.style-5 .entry-meta, .page-title.style-6 .entry-meta, .page-title.style-7 .entry-meta, .page-title.style-8 .entry-meta {
flex-wrap: wrap;
}
.page-title.style-4 .entry-meta li, .page-title.style-5 .entry-meta li, .page-title.style-6 .entry-meta li, .page-title.style-7 .entry-meta li, .page-title.style-8 .entry-meta li {
color: var(--Primary);
}
.page-title.style-4 .author-item .author-item-img img, .page-title.style-5 .author-item .author-item-img img, .page-title.style-6 .author-item .author-item-img img, .page-title.style-7 .author-item .author-item-img img, .page-title.style-8 .author-item .author-item-img img {
height: 40px;
width: 40px;
}
.page-title.style-4 {
background-color: var(--White);
}
.page-title.style-4::before {
display: none;
}
.page-title.style-4 .author-item {
padding-bottom: 60px;
border-bottom: 1px solid var(--Border);
}
.page-title.style-5::before {
background-size: contain;
}
.page-title.style-6 {
max-width: 1800px;
margin: 0 auto;
border-radius: 24px;
background-color: rgb(214, 235, 244);
}
.page-title.style-6::before {
background-size: contain;
}
.page-title.style-7 {
background: linear-gradient(to bottom right, rgb(253, 53, 226), rgb(255, 121, 26));
}
.page-title.style-8 {
background-color: var(--Primary);
}
.page-title.style-8 .right-sale {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 20px;
padding-left: 48px;
}
.page-title.style-8 .right-sale .course-price {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.page-title.style-8 .right-sale .course-price .price {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.page-title.style-8 .right-sale .course-price .price h3 {
color: var(--Soft-Text);
color: var(--White);
}
.page-title.style-8 .right-sale .course-price .price h6 {
color: var(--Soft-Text);
text-decoration: line-through;
}
.page-title.style-8 .right-sale .course-price .sale-off {
border-radius: 4px;
padding: 0px 15px;
border: 1px solid var(--White);
color: var(--White);
}
.page-title.style-8 .right-sale .tf-btn {
width: 100%;
font-weight: 500;
}
.page-title.style-8 .right-sale .tf-btn.add-to-cart {
background-color: var(--Secondary);
}
.page-title.style-8 .right-sale .tf-btn.add-to-cart a {
color: var(--White);
}
.page-title.style-8 .right-sale .tf-btn.buy-now {
border: 1px solid var(--White);
}
.page-title.style-7::before, .page-title.style-8::before {
background-size: contain;
}
.page-title.style-7 .breadcrumbs,
.page-title.style-7 .breadcrumbs i,
.page-title.style-7 h2,
.page-title.style-7 .except,
.page-title.style-7 .entry-meta li, .page-title.style-8 .breadcrumbs,
.page-title.style-8 .breadcrumbs i,
.page-title.style-8 h2,
.page-title.style-8 .except,
.page-title.style-8 .entry-meta li {
color: var(--White);
}
.page-title.style-7 .entry-meta li .ratings path, .page-title.style-8 .entry-meta li .ratings path {
stroke: white;
}
.page-title.style-7 .author-item .text span,
.page-title.style-7 .author-item .text a, .page-title.style-8 .author-item .text span,
.page-title.style-8 .author-item .text a {
color: var(--White);
}
.page-title.style-9 .content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
gap: 30px;
}
.page-title.style-9 .content .author-item {
flex: none;
}
.page-title.style-9 .content .author-item .author-item-img {
padding: 2px;
background: linear-gradient(to bottom right, rgb(253, 53, 226), rgb(255, 121, 26));
}
.page-title.style-9 .content .author-item .author-item-img img {
height: 116px;
width: 116px;
}
.page-title.style-9 .content .title h2 {
font-size: 42px;
line-height: 56.87px;
}
.page-title.style-9 .content .title .entry-meta li {
color: var(--Primary);
}
.page-title.style-9 .right-content {
width: 100%;
}
.page-title.style-9 .right-content .tf-btn {
padding-left: 49px;
padding-right: 49px;
margin-left: auto;
border: none;
}
.section-top-course .heading-section {
margin-bottom: 23px;
}
.section-top-course .widget-menu-tab {
margin-bottom: 39px;
}
.section-top-course .widget-menu-tab .item-title {
padding-bottom: 23px;
}
.section-popular-course .heading-section {
margin-bottom: 30px;
}
.section-popular-course .heading-section .sub {
margin-top: 7px;
}
.section-popular-course .heading-section h2 {
margin-bottom: -1px;
}
.section-popular-course .widget-tabs .widget-menu-tab {
gap: 20px;
margin-bottom: 10px;
border: 0;
}
.section-popular-course .widget-tabs .widget-menu-tab .item-title {
font-size: 15px;
line-height: 28px;
font-weight: 500;
}
.section-categories .wrap-icon-box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 28px;
}
.section-video-box {
background-color: var(--bg-4);
}
.section-video-box .content {
max-width: 486px;
}
.section-video-box .content .box-sub-tag {
margin-bottom: 18px;
}
.section-video-box .content h2 {
margin-bottom: 9px;
}
.section-video-box .content .text-content {
margin-bottom: 31px;
font-size: 15px;
}
.section-video-box .widget-video {
padding-left: 2px;
}
.section-icon {
background-color: var(--Secondary);
padding: 40px 0;
}
.section-icon .wrap-icon-box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.section-icon .wrap-icon-box .icons-box {
width: 100%;
}
.section-icon .wrap-icon-box .icons-box p {
letter-spacing: 0.15px;
}
.section-about-box .box-img {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: start;
gap: 19px;
}
.section-about-box .box-img .image {
max-width: 340px;
max-height: 340px;
overflow: hidden;
border-radius: 12px;
}
.section-about-box .box-img .wrap-image-agent {
padding-bottom: 7px;
width: 42.2%;
}
.section-about-box .box-img .wrap-image-agent .image {
margin-bottom: 10px;
padding-right: 0px;
}
.section-about-box .box-img .wrap-image-agent .box-agent {
padding: 16px 20px;
border: 1px solid var(--Border);
border-radius: 12px;
}
.section-about-box .box-img .wrap-images {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 20px;
}
.section-about-box .content-wrap {
padding-top: 48px;
}
.section-about-box .content-wrap .box-sub-tag {
margin-bottom: 18px;
}
.section-about-box .content-wrap .title-content {
margin-bottom: 9px;
}
.section-about-box .content-wrap .text-content {
margin-bottom: 30px;
font-size: 15px;
}
.section-about-box .content-wrap .counter {
margin-bottom: 31px;
gap: 30px;
}
.section-about-box .content-wrap .counter .number-counter {
border: none;
padding-left: 0;
}
.section-about-box .content-wrap .counter .number-counter svg {
margin-bottom: 15px;
}
.section-about-box .content-wrap .counter .number-counter .counter-content {
font-size: 22px;
line-height: 28px;
margin-bottom: 7px;
}
.section-about-box .content-wrap .counter.style-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px 0px;
}
.section-about-box.style-1 .content-wrap {
padding-top: 3px;
padding-left: 10px;
}
.section-about-box.style-1 .content-wrap .tf-btn {
border-radius: 12px;
}
.section-about-box.style-1 .wrap-images .image {
border-radius: 24px 92px 24px 92px;
}
.section-about-box.style-1 .wrap-images .image:last-child {
border-radius: 92px 24px 92px 24px;
}
.section-about-box.style-1 .box-img {
padding-left: 9px;
}
.section-about-box.style-1 .box-img .wrap-image-agent {
padding-bottom: 0;
position: relative;
}
.section-about-box.style-1 .box-img .wrap-image-agent .image {
max-height: unset;
margin-bottom: 0;
border-radius: 92px 24px 92px 24px;
}
.section-about-box.style-1 .box-img .wrap-image-agent::before {
position: absolute;
content: "";
top: -20px;
right: 20px;
bottom: 20px;
left: -20px;
border-radius: 92px 24px 92px 24px;
border: 1px solid var(--Secondary);
z-index: -1;
}
.section-event {
/* background-color: var(--bg-4); */
}
.section-event .wrap-item {
display: grid;
gap: 28px;
grid-template-columns: repeat(2, 1fr);
}
.section-event .wrap-item .events-item {
width: 100%;
}
.section-event .wrap-item-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.section-event.style-2 {
background-color: transparent;
}
.section-event.style-2 .swiper-container {
margin-bottom: 33px;
}
.section-event.style-2 .event-btn {
margin-bottom: 3px;
}
.section-latest-blog {
position: relative;
}
.section-latest-blog .latest-blog-img {
position: absolute;
right: 0;
bottom: 12px;
width: 246px;
}
.section-latest-blog .heading-section {
margin-bottom: 30px;
}
.section-latest-blog .swiper-container {
margin-bottom: 33px;
}
.section-latest-blog .latest-blog-btn {
margin-bottom: 3px;
}
.section-why .heading-section {
margin-bottom: 40px;
}
.section-key .key-image {
width: 49%;
}
.section-key .key-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px 0px 0px 12px;
}
.section-key .content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
padding: 50px 80px 50px 64px;
background-color: var(--bg-4);
border-radius: 0px 12px 12px 0px;
width: 51%;
}
.section-key .content h2 {
margin-bottom: 8px;
}
.section-key .content > p {
margin-bottom: 23px;
}
.section-saying .widget-saying {
padding: 0px 150px;
}
.section-we-offer {
position: relative;
}
.section-we-offer .we-offer-img {
position: absolute;
bottom: 0;
left: 0;
}
.section-we-offer .we-offer-img img {
width: 330px;
}
.section-about-box .about-box-image {
padding-right: 120px;
padding-bottom: 138px;
position: relative;
}
.section-about-box .about-box-image img {
border-radius: 12px;
}
.section-about-box .about-box-image .about-box-img-2 {
width: 340px;
position: absolute;
right: -13px;
bottom: 0;
}
.section-about-box .about-box-content {
padding-top: 113px;
padding-left: 121px;
padding-right: 40px;
}
.section-about-box .about-box-content .box-sub-tag {
margin-bottom: 18px;
}
.section-about-box .about-box-content .counter.style-2 {
gap: 37px 30px;
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 38px;
}
.section-about-box .about-box-content .counter.style-2 .number-counter .counter-content {
line-height: 17px;
margin-bottom: 16px;
}
.section-about-box .about-box-content .counter.style-2 .number-counter p {
line-height: 15px;
}
.section-about-box .about-box-content .about-box-btn .tf-btn {
background-color: var(--Secondary);
border: 1px solid var(--Secondary);
}
.section-get-started .get-started-wrap .wrap-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
background-color: #d6ebf4;
padding: 10px 80px 21px 80px;
width: 51%;
}
.section-get-started .get-started-wrap .wrap-content h2 {
margin-bottom: 17px;
}
.section-get-started .get-started-wrap .wrap-content p {
margin-bottom: 31px;
}
.section-get-started .get-started-wrap .img-right {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: relative;
align-items: flex-end;
width: 49%;
}
.section-get-started .get-started-wrap .img-right img {
width: 100%;
height: 100%;
object-fit: cover;
}
.section-get-started .get-started-wrap .img-right .tags-list {
position: absolute;
padding: 30px;
}
.section-get-started .get-started-wrap .img-right .tags-list .tag-list-item {
padding: 4px 18px;
}
.section-get-started .get-started-wrap .img-right .tags-list a {
font-size: 15px;
line-height: 30px;
}
.section-get-started .get-started-image {
position: relative;
max-width: 650px;
}
.section-get-started .get-started-image .badge {
position: absolute;
bottom: 35px;
left: 120px;
}
.section-get-started .get-started-image .badge-1 {
position: absolute;
top: 0px;
right: 0;
max-width: 280px;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgb(228, 228, 231);
}
.section-get-started .get-started-content {
padding-top: 90px;
}
.section-get-started .get-started-content .title {
margin-bottom: 19px;
letter-spacing: 1px;
}
.section-get-started .get-started-content p {
margin-bottom: 26px;
}
.section-get-started .get-started-content .get-started-btn {
border-radius: 120px;
}
.section-get-started .get-started-content p,
.section-get-started .get-started-content i,
.section-get-started .get-started-content span {
font-size: 15px;
}
.section-get-started.style5 *.row {
align-items: center;
}
.section-get-started.style5 .getstared-image {
padding-right: 45px;
padding-top: 3px;
}
.section-get-started.style5 .getstared-content {
padding-left: 119px;
margin-top: -6px;
}
.section-get-started.style5 .getstared-content .title {
letter-spacing: 0.9px;
margin-bottom: 20px;
}
.section-get-started.style5 .getstared-content p {
font-size: 15px;
color: var(--Soft-Text);
margin-bottom: 26px;
}
.section-get-started.style6 .getstared-image {
padding-right: 37px;
}
.section-get-started.style6 .getstared-content {
padding-left: 121px;
margin-top: -14px;
padding-right: 40px;
}
.section-get-started.style6 .getstared-content .title {
margin-bottom: 9px;
}
.section-get-started.style6 .getstared-content p {
margin-bottom: 30px;
}
.section-get-started.style7 .getstared-image {
position: relative;
padding-right: 180px;
padding-left: 25px;
margin-bottom: 37.5px;
}
.section-get-started.style7 .getstared-image .image-video-started {
width: 280px;
position: absolute;
right: 8%;
top: 6.2%;
border-radius: 12px;
box-shadow: 0px 6px 15px 0px rgba(64, 79, 104, 0.05);
}
.section-get-started.style7 .getstared-image .badge-item-style-2 {
width: 317px;
position: absolute;
bottom: -6.5%;
left: 2px;
}
.section-get-started.style7 .getstared-content {
margin-top: -12px;
padding-left: 120px;
padding-right: 0px;
}
.section-get-started.style7 .getstared-content .title {
margin-bottom: 19px;
}
.section-get-started.style7 .getstared-content p {
margin-bottom: 26px;
}
.section-get-started.style8 .image {
position: relative;
}
.section-get-started.style8 .image > img {
border-radius: 12px;
}
.section-get-started.style8 .image .box-sub-tag-item {
position: absolute;
bottom: 40px;
left: 40px;
}
.section-get-started.style8 .image .box-sub-tag-item .sub-tag-item:not(:last-child) {
margin-bottom: 15px;
}
.section-get-started.style8 .content {
padding-left: 120px;
}
.section-get-started.style8 .content .box-sub-tag {
margin-bottom: 27px;
}
.section-get-started.style8 .content h2 {
margin-bottom: 19px;
}
.section-get-started.style8 .content > p {
margin-bottom: 30px;
}
.section-become-instructor .main-section {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 30px;
background-color: var(--bg-4);
padding: 71px 10px 76px 80px;
position: relative;
flex-wrap: wrap;
border-radius: 12px;
}
.section-become-instructor .main-section .content-inner {
display: flex;
flex-direction: column;
max-width: 660px;
}
.section-become-instructor .main-section .content-inner h2 {
margin-bottom: 18px;
}
.section-become-instructor .main-section .content-inner p {
margin-bottom: 27px;
}
.section-become-instructor .main-section .content-user {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-end;
padding-bottom: 4px;
}
.section-become-instructor .main-section .content-user .tf-btn {
padding-left: 30px;
padding-right: 30px;
}
.section-become-instructor .main-section .content-user .box-agent {
gap: 40px;
flex-direction: column;
}
.section-become-instructor .main-section .content-img {
position: absolute;
right: 47px;
bottom: 0;
max-height: 401px;
max-width: 354px;
}
.section-become-instructor .main-section .content-img .item-2 {
position: absolute;
top: 148px;
left: 52px;
width: 74px;
}
.section-become-instructor .main-section .content-img .item-3 {
position: absolute;
bottom: 136px;
right: 0;
width: 64px;
}
.section-become-instructor .image-left {
max-width: 420px;
}
.section-become-instructor .content-right {
padding-top: 108px;
padding-left: 2.5px;
}
.section-become-instructor .content-right .content-user {
margin-bottom: 27px;
}
.section-become-instructor .content-right h2 {
margin-bottom: 19px;
}
.section-become-instructor .content-right > p {
margin-bottom: 31px;
letter-spacing: 0.43px;
}
.section-become-instructor-2 .content-left {
padding-top: 80px;
padding-right: 55px;
}
.section-become-instructor-2 .content-left .box-sub-tag {
margin-bottom: 27px;
}
.section-become-instructor-2 .content-left h2 {
margin-bottom: 20px;
}
.section-become-instructor-2 .content-left > p {
margin-bottom: 31px;
}
.section-become-instructor-2 .content-left .counter.style-3 {
padding-top: 33px;
border-top: 1px solid var(--Border);
justify-content: flex-start;
gap: 0px 82px;
}
.section-become-instructor-2 .image-right {
padding-left: 86px;
}
.section-foundational-skills .foundational-skills-image {
margin-right: 46px;
padding: 20px;
border-radius: 24px;
border: 1px solid var(--Border);
box-shadow: 0px 6px 15px 0px rgba(64, 79, 104, 0.05);
}
.section-foundational-skills .foundational-skills-image img {
border-radius: 12px;
}
.section-foundational-skills .foundational-skills-content {
padding-left: 36px;
padding-top: 40px;
padding-bottom: 40px;
}
.section-foundational-skills .foundational-skills-content .foundational-skills-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px 40px;
}
.section-learn-h7 {
padding-top: 283px;
padding-bottom: 296px;
position: relative;
}
.section-learn-h7:before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
height: 144px;
background-color: var(--White);
clip-path: polygon(0 0%, 100% 0%, 100% 24%, 0% 100%);
z-index: 5;
}
.section-learn-h7::after {
position: absolute;
content: "";
bottom: 0;
left: 0;
right: 0;
height: 144px;
background-color: var(--White);
clip-path: polygon(0 76.39%, 100% 0%, 100% 100%, 0% 100%);
z-index: 5;
}
.section-start-banner {
padding-top: 0px;
}
.section-start-banner .main-section {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 92px 120px 92px 120px;
background-image: url(../images/section/start-banner.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 12px;
flex-wrap: wrap;
}
.section-start-banner .main-section .heading-section h2 {
margin-bottom: 18px;
}
.section-start-banner .main-section .tf-btn {
margin-bottom: 9px;
width: 100%;
max-width: 260px;
}
.section-start-banner-h7 {
padding-top: 212px;
padding-bottom: 210px;
position: relative;
background-image: url(../images/section/start-banner-1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.section-start-banner-h7:before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
height: 144px;
background-color: var(--White);
clip-path: polygon(0 0%, 100% 0%, 100% 24%, 0% 100%);
z-index: 5;
}
.section-start-banner-h7::after {
position: absolute;
content: "";
bottom: -1px;
left: 0;
right: 0;
height: 144px;
background-color: var(--Primary);
clip-path: polygon(0 76.39%, 100% 0%, 100% 100%, 0% 100%);
z-index: 5;
}
.section-start-banner-h7 .start-banner-inner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.section-start-banner-h7 .start-banner-inner .box-sub-tag {
background: transparent;
margin-bottom: 28px;
}
.section-start-banner-h7 .start-banner-inner .box-sub-tag .sub-tag-title {
color: var(--White);
}
.section-start-banner-h7 .start-banner-inner h2,
.section-start-banner-h7 .start-banner-inner .sub {
color: var(--White);
}
.section-start-banner-h7 .start-banner-inner h2 {
text-transform: capitalize;
margin-bottom: 18px;
}
.section-start-banner-h7 .start-banner-inner .tf-btn {
padding: 12px 54px;
border-radius: 12px;
color: var(--Primary);
background-color: var(--White);
border: 1px solid transparent;
}
.section-start-banner-h7 .start-banner-inner .tf-btn:hover {
color: var(--White);
background-color: var(--Primary);
border: 1px solid transparent;
}
.section-start-banner-h8 {
padding-top: 80px;
padding-bottom: 80px;
}
.section-start-banner-h8 .start-banner-inner {
display: flex;
flex-direction: column;
align-items: center;
}
.section-start-banner-h8 .start-banner-inner .box-sub-tag {
background: #034e3a;
margin-bottom: 28px;
color: #fff;
}
.section-start-banner-h8 .start-banner-inner .heading-section h2 {
margin-bottom: 20px;
font-weight: 600;
}
.section-start-banner-h8 .start-banner-inner .tf-btn {
padding: 12px 54px;
border-radius: 4px;
color: var(--Primary);
background-color: var(--White);
border: 1px solid transparent;
}
.section-start-banner-h8 .start-banner-inner .tf-btn:hover {
color: var(--White);
background-color: var(--Primary);
border: 1px solid transparent;
}
.section-review .heading-section {
margin-bottom: 20px;
}
.section-form-home-8 {
position: relative;
background-image: url(../images/section/img-create-account.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.section-form-home-8:before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
height: 100%;
background-color: var(--Black);
opacity: 0.4;
}
.section-form-home-8 .forms-courses {
background-color: var(--White);
border-radius: 24px;
padding: 50px 60px 60px 60px;
}
.section-form-home-8 .forms-courses h3 {
font-size: 20px;
font-weight: 500;
line-height: 35px;
text-transform: capitalize;
padding-right: 6em;
margin-bottom: 30px;
}
.section-form-home-8 .content {
padding-top: 86px;
}
.section-form-home-8 .content h2 {
margin-bottom: 18px;
}
.section-form-home-8 .content p {
margin-bottom: 30px;
}
.section-search-tags .heading-section h2 {
font-weight: 500;
margin-bottom: 9px;
}
.section-search-tags .tags-list {
max-width: 1041px;
margin-left: auto;
margin-right: auto;
}
.section-search-tags .tags-list .tag-list {
gap: 20px;
justify-content: center;
}
.section-search-tags .tags-list .tag-list .tag-list-item {
padding: 10.5px 25px;
}
.section-search-tags .tags-list .tag-list .tag-list-item a {
font-size: 15px;
font-weight: 500;
line-height: 28px;
}
.section-mobile-app .content-left {
padding-top: 109px;
padding-bottom: 111px;
}
.section-mobile-app .content-left .box-sub-tag {
margin-bottom: 18px;
}
.section-mobile-app .content-left h2 {
margin-bottom: 9px;
}
.section-mobile-app .content-left > p {
margin-bottom: 31px;
}
.section-mobile-app .content-left .tf-app-download.tf-app-download-style-2 {
gap: 30px;
}
.section-mobile-app .content-left .tf-app-download.tf-app-download-style-2 li {
width: 210px;
}
.section-mobile-app .content-left .tf-app-download.tf-app-download-style-2 li a {
padding: 13px 10px 10px 24px;
gap: 37px;
}
.section-mobile-app .content-left .tf-app-download.tf-app-download-style-2 li a .icon {
font-size: 22px;
width: 20px;
}
.section-mobile-app .image-right {
padding-top: 80px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: end;
justify-content: end;
gap: 31px;
}
.section-mobile-app .image-right > div {
border-radius: 24px 24px 0 0;
overflow: hidden;
border: 3px solid var(--Primary);
border-bottom: 0;
}
.section-mobile-app .image-right .img1 {
max-width: 239px;
}
.section-mobile-app .image-right .img2 {
max-width: 216px;
margin-right: -3px;
}
.section-mobile-app.style2 .image {
padding-top: 18px;
padding-left: 11px;
}
.section-mobile-app.style2 .content-left {
padding-bottom: 107px;
}
.section-mobile-app.style2 .mobile-app-wrap {
padding-left: 120px;
padding-right: 40px;
border-radius: 24px;
}
.section-mobile-app.style2 .mobile-app-wrap .image {
padding-top: 17px;
padding-left: 0px;
margin-right: -9px;
margin-left: -62px;
}
.section-academisc {
padding-top: 215px;
}
.section-about-box-style2 .image {
display: flex;
justify-content: space-between;
gap: 20px;
padding-right: 105px;
}
.section-about-box-style2 .image img {
border-radius: 12px;
}
.section-about-box-style2 .image .image-one {
margin-top: 60px;
}
.section-about-box-style2 .content {
padding-top: 57px;
padding-right: 52px;
padding-left: 3px;
}
.section-about-box-style2 .content .box-sub-tag {
margin-bottom: 17px;
}
.section-about-box-style2 .content h2 {
margin-bottom: 9px;
}
.section-about-box-style2 .content > p {
margin-bottom: 28px;
}
.section-about-box-style2 .content .tf-btn {
background-color: var(--Secondary);
border-radius: 8px;
border: 1px solid var(--Secondary);
}
.form-newsletter-h9 .form-newsletter .icon {
background-color: var(--Primary);
}
.form-newsletter-h9 .form-newsletter .form-subscribe .button-submit .tf-btn {
border-radius: 12px;
background-color: var(--Secondary);
border: 1px solid var(--Secondary);
}
.form-newsletter-h9 .form-newsletter .form-subscribe .name input {
border-radius: 8px;
}
.campus-life-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.section-campus-life {
padding-top: 149px;
padding-bottom: 153px;
}
.sp-border {
margin: 0px 60px;
border-radius: 32px;
}
.sp-border-46 {
margin: 0px 46px;
}
.section-categories .categories-btn {
margin-top: 7px;
}
.section-logo h6 {
margin-bottom: 30px;
}
.section-logo h6.text {
letter-spacing: -0.4px;
margin-bottom: 36px;
}
.section-popular-courses .widget-tabs .widget-menu-tab {
gap: 20px;
margin-bottom: 40px;
border: 0;
}
.section-popular-courses .widget-tabs .widget-menu-tab .item-title {
font-size: 15px;
line-height: 28px;
font-weight: 500;
color: var(--Primary);
}
.section-popular-courses .widget-tabs .widget-menu-tab .item-title.active {
color: var(--Primary);
}
.section-popular-courses .widget-tabs .widget-menu-tab .item-title:hover {
color: var(--Primary);
}
.section-popular-courses .widget-tabs .widget-menu-tab .item-title::after {
background-color: var(--Primary);
}
.section-popular-courses.style-7 {
padding-top: 150px;
padding-bottom: 100px;
position: relative;
}
.section-popular-courses.style-7:before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
height: 144px;
background-color: var(--White);
clip-path: polygon(0 0%, 100% 0%, 100% 24%, 0% 100%);
z-index: 5;
}
.section-popular-courses.style-7::after {
position: absolute;
content: "";
bottom: 0;
left: 0;
right: 0;
height: 144px;
background-color: var(--White);
clip-path: polygon(0 76.39%, 100% 0%, 100% 100%, 0% 100%);
z-index: 5;
}
.section-popular-courses.style-7 .slider-courses-8 .course-item.style-2 .features img {
height: 240px;
width: 100%;
}
.widget-saying-list {
min-height: 250px;
margin-bottom: -10px;
}
.section-faq.style-2 .tf-accordion-default .tf-accordion-item {
padding: 23px 0 8px 0;
}
.section-faq.style-2 .tf-accordion-content p {
font-size: 15px;
}
.section-faq.style-2 .tf-accordion-button::after {
font-size: 14px;
}
.section-faq-h6 .faq-content {
padding-right: 0;
}
.section-faq-h6 .faq-content .heading-section h2 {
margin-bottom: 18px;
}
.section-faq-h6 .faq-image {
padding-left: 113px;
padding-top: 23px;
margin-bottom: 4px;
}
.section-faq-h8 .faq-content {
padding-right: 120px;
padding-top: 62px;
}
.section-faq-h8 .faq-content .box-sub-tag {
margin-bottom: 28px;
}
.section-faq-h8 .faq-content .heading-section h2 {
margin-bottom: 18px;
text-transform: capitalize;
}
.section-faq-h8 .faq-image img {
border-radius: 12px;
}
.section-course-style5 .heading-section h2 {
letter-spacing: 0.9px;
text-transform: capitalize;
}
.section-counter {
background-color: var(--White);
}
.section-counter img {
padding-bottom: 32px;
}
.section-counter .counter {
width: 100%;
}
.section-counter .number-counter {
text-align: center;
width: 100%;
max-width: 250px;
}
.section-counter.style-2 .counter .counter-content {
font-weight: 700;
font-size: 26px;
line-height: 28px;
}
.section-counter.style-2 .counter p {
margin-bottom: 3px;
}
.section-teachers .teachers-content {
padding-top: 57px;
}
.section-teachers .teachers-content .teachers-btn {
border-radius: 120px;
}
.section-teachers .teachers-content .title {
margin-bottom: 19px;
letter-spacing: 1px;
}
.section-teachers .teachers-content p {
color: var(--Soft-Text);
margin-bottom: 27px;
font-size: 15px;
}
.section-teachers .teachers-right {
position: relative;
display: flex;
gap: 20px;
justify-content: flex-end;
}
.section-teachers .teachers-right .users-box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
padding: 20px;
border-radius: 12px;
border: 1px solid var(--Border);
}
.section-teachers .teachers-right .users-box span {
font-size: 14px;
font-weight: 500;
padding-left: 15px;
}
.section-teachers .teachers-right .user-box-2 {
padding: 18px 19px 8px 19px;
border-radius: 12px;
border: 1px solid var(--Border);
max-width: 300px;
height: max-content;
}
.section-teachers .teachers-right .user-box-2 img {
border-radius: 12px;
margin-bottom: 15px;
}
.section-teachers .teachers-right .user-box-2 h6 {
margin-bottom: 3px;
}
.section-teachers .teachers-right .user-box-2 p {
margin-bottom: 3px;
}
.section-teachers .teachers-right .user-box-2 .top {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
margin-bottom: 5px;
}
.section-teachers .teachers-right .user-box-2 .top i,
.section-teachers .teachers-right .user-box-2 .top span {
color: var(--Soft-Text);
}
.section-teachers .teachers-right .user-box-2 .top .item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 10px;
align-items: center;
padding-right: 10px;
border-right: 1px solid var(--Border);
}
.section-teachers .teachers-right .user-box-2 .top .item:last-child {
padding-left: 10px;
border: none;
}
.section-teachers .teachers-right .max-right {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 20px;
}
.section-teachers-1 .teachers-content {
padding-top: 80px;
}
.section-teachers-1 .teachers-content .title {
margin-bottom: 19px;
letter-spacing: 1px;
}
.section-teachers-1 .teachers-content p {
color: var(--Soft-Text);
margin-bottom: 30px;
font-size: 15px;
}
.section-teachers-1 .teachers-image .teachers-upskill-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 20px;
padding-left: 6px;
}
.section-teachers-1 .teachers-image .teachers-upskill-wrap .teachers-upskill:first-child {
margin-left: 30px;
margin-top: 18px;
}
.section-teachers-1 .teachers-image .teachers-upskill-wrap .teachers-upskill:last-child {
margin-right: 30px;
margin-bottom: 18px;
}
.main-course-single-v3 {
padding-top: 60px !important;
}
.tf-accordion-content.style-course-single ul li {
gap: 10px !important;
}
.section-page-title {
padding: 0px !important;
}
.section-page-title .author-item {
padding-bottom: 0px !important;
border: none !important;
}
.section-page-title.style-4 .content {
border-bottom: 1px solid var(--Border);
}
.section-page-title.style-4 .content, .section-page-title.style-5 .content, .section-page-title.style-6 .content, .section-page-title.style-7 .content, .section-page-title.style-8 .content {
padding: 61px 0px 58px;
}
.section-page-title.style-4 .content .breadcrumbs, .section-page-title.style-5 .content .breadcrumbs, .section-page-title.style-6 .content .breadcrumbs, .section-page-title.style-7 .content .breadcrumbs, .section-page-title.style-8 .content .breadcrumbs {
margin-bottom: 49px !important;
}
.section-page-title.style-4 .content .entry-meta, .section-page-title.style-5 .content .entry-meta, .section-page-title.style-6 .content .entry-meta, .section-page-title.style-7 .content .entry-meta, .section-page-title.style-8 .content .entry-meta {
gap: 0px !important;
font-size: 15px;
margin-bottom: 28px !important;
}
.section-page-title.style-4 .content .entry-meta p, .section-page-title.style-5 .content .entry-meta p, .section-page-title.style-6 .content .entry-meta p, .section-page-title.style-7 .content .entry-meta p, .section-page-title.style-8 .content .entry-meta p {
font-size: 15px;
}
.section-page-title.style-4 .content .entry-meta li:not(:first-child), .section-page-title.style-5 .content .entry-meta li:not(:first-child), .section-page-title.style-6 .content .entry-meta li:not(:first-child), .section-page-title.style-7 .content .entry-meta li:not(:first-child), .section-page-title.style-8 .content .entry-meta li:not(:first-child) {
padding-left: 10px;
}
.section-page-title.style-4 .content .entry-meta li:not(:first-child) .flaticon-book, .section-page-title.style-5 .content .entry-meta li:not(:first-child) .flaticon-book, .section-page-title.style-6 .content .entry-meta li:not(:first-child) .flaticon-book, .section-page-title.style-7 .content .entry-meta li:not(:first-child) .flaticon-book, .section-page-title.style-8 .content .entry-meta li:not(:first-child) .flaticon-book {
font-size: 16px;
}
.section-page-title.style-4 .content .entry-meta li:not(:first-child) .flaticon-user,
.section-page-title.style-4 .content .entry-meta li:not(:first-child) .flaticon-clock, .section-page-title.style-5 .content .entry-meta li:not(:first-child) .flaticon-user,
.section-page-title.style-5 .content .entry-meta li:not(:first-child) .flaticon-clock, .section-page-title.style-6 .content .entry-meta li:not(:first-child) .flaticon-user,
.section-page-title.style-6 .content .entry-meta li:not(:first-child) .flaticon-clock, .section-page-title.style-7 .content .entry-meta li:not(:first-child) .flaticon-user,
.section-page-title.style-7 .content .entry-meta li:not(:first-child) .flaticon-clock, .section-page-title.style-8 .content .entry-meta li:not(:first-child) .flaticon-user,
.section-page-title.style-8 .content .entry-meta li:not(:first-child) .flaticon-clock {
font-size: 18px;
}
.section-page-title.style-8 .content {
border: none !important;
}
.section-page-title.style-8 .right-sale {
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: space-between;
justify-content: center;
max-width: 400px;
margin-left: auto;
padding-left: 0px !important;
}
.section-page-course {
padding-top: 0px !important;
padding-bottom: 110px;
}
.section-page-course h2 {
margin-bottom: 16px !important;
}
.section-page-course .course-single-inner {
max-width: 900px;
margin-right: auto;
}
.section-page-course .course-single-inner > div:not(:last-child) {
padding: 53px 0px 53px;
border-bottom: 1px solid var(--Border);
}
.section-page-course .course-single-inner.ver-5 .widget-video {
padding: 60px 0px 34px !important;
border: none !important;
}
.section-page-course .course-single-inner.ver-5 .widget-video img {
border-radius: 12px;
width: 100%;
max-height: 500px;
object-fit: cover;
}
.section-page-course .course-single-inner.ver-5 .widget-tabs {
border: none !important;
position: sticky;
padding: 0px 0px !important;
top: 0;
z-index: 31;
height: 50%;
background-color: var(--White);
}
.section-page-course .course-single-inner.ver-5 .widget-tabs .widget-menu-tab {
padding-top: 20px;
}
.section-page-course .course-single-inner .page-head {
margin-bottom: 60px;
}
.section-page-course .course-single-inner .page-head .author-item {
padding: 0px !important;
border: none !important;
}
.section-page-course .course-single-inner .page-learn {
padding: 54px 0px 53px !important;
}
.section-page-course .course-single-inner .page-learn.course-single-v5 .learn-inner ul:last-child {
padding-left: 20px;
}
.section-page-course .course-single-inner .page-learn .widget-video {
margin-bottom: 54px;
}
.section-page-course .course-single-inner .page-learn .widget-video img {
width: 100%;
max-height: 500px;
object-fit: cover;
}
.section-page-course .course-single-inner .page-learn .widget-menu-tab {
margin-bottom: 53px !important;
}
.section-page-course .course-single-inner .page-learn .learn-inner {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
gap: 117px;
}
.section-page-course .course-single-inner .page-learn .learn-inner ul {
display: flex;
flex-direction: column;
gap: 0px !important;
}
.section-page-course .course-single-inner .page-learn .learn-inner ul li {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 10px;
font-size: 15px;
}
.section-page-course .course-single-inner .page-learn .learn-inner ul li:not(:last-child) {
padding-bottom: 12px !important;
}
.section-page-course .course-single-inner .page-learn .learn-inner ul li i {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
padding-top: 7px;
}
.section-page-course .course-single-inner .page-requirement {
padding-bottom: 44px !important;
}
.section-page-course .course-single-inner .page-requirement ul {
display: flex;
flex-direction: column;
gap: 7px;
padding-bottom: 2px;
font-size: 15px;
}
.section-page-course .course-single-inner .page-requirement ul li::before {
content: "•";
color: black;
font-size: 20px;
margin-right: 9px;
}
.section-page-course .course-single-inner .page-desc {
padding-top: 54px !important;
padding-bottom: 67px !important;
}
.section-page-course .course-single-inner .page-desc .showmore-paragraph {
display: none;
}
.section-page-course .course-single-inner .page-desc .more-text {
padding-top: 10px !important;
}
.section-page-course .course-single-inner .page-desc .more-text .btn-show-more-decs,
.section-page-course .course-single-inner .page-desc .more-text .btn-hide-decs {
color: var(--Secondary);
cursor: pointer;
}
.section-page-course .course-single-inner .page-desc .more-text .btn-show-more-decs i,
.section-page-course .course-single-inner .page-desc .more-text .btn-hide-decs i {
display: inline;
font-size: 8px;
padding-left: 5px;
}
.section-page-course .course-single-inner .page-course-content {
padding-bottom: 59px !important;
}
.section-page-course .course-single-inner .page-course-content h2 {
margin-bottom: 23px !important;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion {
margin-bottom: 26px !important;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item {
padding: 21px 30px 10px 28px !important;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item .tf-accordion-header {
padding: 0px 0px 12px !important;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item .tf-accordion-header .tf-accordion-button {
padding: 0px 23px !important;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item .tf-accordion-header .tf-accordion-button::after {
font-size: 12px !important;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item .tf-accordion-header .sub-header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
white-space: nowrap;
right: 0;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item .tf-accordion-header .sub-header p:first-child::after {
content: "•";
font-size: 20px;
margin-left: 8px;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item .tf-accordion-content {
display: flex;
flex-direction: column;
border-top: 1px solid var(--Border);
padding: 18px 0px 10px 0px;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item .tf-accordion-content ul {
justify-content: space-between !important;
padding: 0px !important;
border: none !important;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item .tf-accordion-content ul:not(:last-child) {
padding-bottom: 14px !important;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item .tf-accordion-content ul li {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: none;
gap: 12px;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item .tf-accordion-content ul li.icon {
overflow: hidden;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item .tf-accordion-content ul li.icon .text {
white-space: nowrap;
text-overflow: ellipsis;
width: 100% !important;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-item .tf-accordion-content ul li .preview {
padding: 0px 8px;
border: 1px solid var(--Secondary);
background-color: var(--bg-4);
color: var(--Secondary);
border-radius: 4px;
}
.section-page-course .course-single-inner .page-course-content .tf-accordion.style-course-single .tf-accordion-collapse {
transition: all 0.3s ease-in-out;
}
.section-page-course .course-single-inner .page-course-content .tf-btn {
padding: 13px 35px 12px 35px !important;
width: 100%;
background-color: var(--White);
color: var(--Primary);
}
.section-page-course .course-single-inner .page-instructor {
padding-bottom: 59px !important;
}
.section-page-course .course-single-inner .page-instructor h2 {
margin-bottom: 16px !important;
}
.section-page-course .course-single-inner .page-instructor .instructors-item {
gap: 30px;
}
.section-page-course .course-single-inner .page-instructor .instructors-item .image-wrapper {
padding-top: 4px;
}
.section-page-course .course-single-inner .page-instructor .instructors-item .entry-content {
gap: 0px;
}
.section-page-course .course-single-inner .page-instructor .instructors-item .entry-content .entry-title {
padding-bottom: 3px;
}
.section-page-course .course-single-inner .page-instructor .instructors-item .entry-content .short-description {
padding-bottom: 11px;
}
.section-page-course .course-single-inner .page-instructor .instructors-item .entry-content .entry-meta {
padding-bottom: 12px;
}
.section-page-course .course-single-inner .page-instructor .instructors-item .entry-content .description {
padding-bottom: 10px;
}
.section-page-course .course-single-inner .page-my-course {
padding-bottom: 51px !important;
}
.section-page-course .course-single-inner .page-my-course .heading-section {
margin-bottom: 24px !important;
}
.section-page-course .course-single-inner .page-my-course .image-wrap {
width: 100%;
height: auto;
}
.section-page-course .course-single-inner .page-my-course .swiper-course-single .swiper-slide {
max-width: 260px !important;
}
.section-page-course .course-single-inner .review-wrap {
padding-top: 54px !important;
padding-bottom: 60px !important;
border: none !important;
}
.section-page-course .course-single-inner .review-wrap .course-rating {
gap: 6px;
}
.section-page-course .course-single-inner .review-wrap .course-rating i {
font-size: 11px;
}
.section-page-course .course-single-inner .add-review-wrap {
padding-top: 43px !important;
}
.section-page-course .sidebar-course {
box-shadow: 0px 0px 15px 0px rgba(19, 24, 54, 0.08);
border-radius: 12px;
padding: 0px 0px !important;
position: sticky;
top: 0px;
height: max-content;
margin-top: -294px;
top: 20px;
z-index: 0;
transition: all 0.3s ease-in-out;
}
.section-page-course .sidebar-course .widget-video {
border-radius: 12px 12px 0px 0px !important;
padding-bottom: 0px !important;
}
.section-page-course .sidebar-course .widget-video img {
border-radius: 12px;
width: 100%;
max-height: 260px;
object-fit: cover;
}
.section-page-course .sidebar-course.course-single-v1 {
margin-top: -369px !important;
}
.section-page-course .sidebar-course.course-single-v1 .widget-video {
padding: 0px;
}
.section-page-course .sidebar-course.course-single-v1 .widget-video img {
border-radius: 12px 12px 0px 0px !important;
}
.section-page-course .sidebar-course.course-single-v2, .section-page-course .sidebar-course.course-single-v3 {
margin-top: -295px !important;
}
.section-page-course .sidebar-course.course-single-v2 .widget-video, .section-page-course .sidebar-course.course-single-v3 .widget-video {
padding: 20px 20px 0px 20px !important;
}
.section-page-course .sidebar-course.course-single-v2 .widget-video img, .section-page-course .sidebar-course.course-single-v3 .widget-video img {
max-width: 360px;
max-height: 260px;
}
.section-page-course .sidebar-course.course-single-v4 {
margin-top: -261px !important;
}
.section-page-course .sidebar-course.no-video {
display: flex;
flex-direction: column;
gap: 40px;
border: none;
margin-top: 60px !important;
margin-right: 0px !important;
box-shadow: none;
}
.section-page-course .sidebar-course.no-video .sidebar-course-content {
border: 1px solid var(--Border);
border-radius: 12px;
box-shadow: 0px 0px 15px 0px rgba(19, 24, 54, 0.08);
padding: 30px 40px 30px 39px;
}
.section-page-course .sidebar-course.no-video .sidebar-course-content ul {
gap: 10px;
}
.section-page-course .sidebar-course.no-video .course-social {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
gap: 10px;
padding: 31px 0px 35px !important;
border-radius: 12px;
border: 1px solid var(--Border);
box-shadow: 0px 0px 15px 0px rgba(19, 24, 54, 0.08);
}
.section-page-course .sidebar-course .course-social {
padding: 21px 0 25px !important;
border-radius: 0px 0px 12px 12px;
}
.section-shop-page .course-top-wrapper.shop-list {
margin-bottom: 38px !important;
display: flex;
justify-content: space-between;
align-items: center;
}
.section-shop-page .grid-list-items-5.grid-shop-list {
margin-bottom: 79px !important;
gap: 18px 25px !important;
}
.section-shop-page .grid-list-items-5.grid-shop-list .shop-item {
padding: 20px 20px 20px 20px !important;
}
.section-shop-page .grid-list-items-5.grid-shop-list .shop-item:hover .tf-btn {
background-color: var(--Primary);
color: var(--White);
}
.section-shop-page .grid-list-items-5.grid-shop-list .shop-item .shop-item-img {
padding: 21px 20px 10px 19px !important;
}
.section-shop-page .grid-list-items-5.grid-shop-list .shop-item .content {
padding-top: 22px !important;
}
.section-shop-page .grid-list-items-5.grid-shop-list .shop-item .content .price {
margin-bottom: 0px !important;
}
.section-shop-page .grid-list-items-5.grid-shop-list .shop-item .content .name-book {
font-size: 16px;
height: 28px;
margin-bottom: 3px !important;
}
.section-shop-page .grid-list-items-5.grid-shop-list .shop-item .tf-btn {
width: 100% !important;
font-weight: 400;
padding: 12px 35px 10px 35px !important;
}
.section-shop-page .grid-list-items-5.grid-shop-list .shop-item .tf-btn i {
font-size: 20px;
}
.section-product-top {
padding: 60px 0px 42px;
}
.section-product-top .shop-single {
padding-bottom: 0px !important;
padding-top: 0px !important;
}
.section-product-top .shop-detail-content {
padding: 107px 0 116px 81px !important;
}
.section-product-top .shop-detail-content .ratings {
margin-bottom: 11px !important;
}
.section-product-top .shop-detail-content .product-title {
margin-bottom: 7px !important;
}
.section-product-top .shop-detail-content .author {
margin-bottom: 17px !important;
}
.section-product-top .shop-detail-content .tf-price {
margin-bottom: 15px !important;
}
.section-product-top .shop-detail-content .description {
margin-bottom: 22px !important;
}
.section-product-top .shop-detail-content .form-add-to-card {
gap: 16px !important;
margin-bottom: 23px !important;
}
.section-product-bottom {
padding-bottom: 60px;
}
.section-product-bottom .widget-menu-tab {
justify-content: center;
}
.section-product-bottom .widget-menu-tab .product-title {
padding-bottom: 25px !important;
}
.section-product-bottom .widget-menu-tab,
.section-product-bottom .widget-content-tab {
margin-bottom: 50px;
}
.section-product-bottom .form-add-review .field-title {
padding: 23px 0 0px;
}
.section-product-bottom .form-add-review .field-title #field4 {
padding: 23px 0 0px;
}
.section-product-bottom .form-add-review .checkbox-item {
margin-top: 20px;
margin-bottom: 23px;
}
.section-product-bottom .form-add-review .button-submit {
width: max-content;
}
.section-product-bottom .form-add-review .button-submit .tf-btn {
font-size: 16px;
padding: 12px 52px !important;
}
.section-related-product.shop-single-related .shop-item {
padding: 20px 20px 20px 20px !important;
}
.section-related-product.shop-single-related .shop-item:hover .tf-btn {
background-color: var(--Primary);
color: var(--White);
}
.section-related-product.shop-single-related .shop-item .shop-item-img {
padding: 21px 20px 10px 19px !important;
}
.section-related-product.shop-single-related .shop-item .content {
padding-top: 20px !important;
}
.section-related-product.shop-single-related .shop-item .content .price {
margin-bottom: 0px !important;
}
.section-related-product.shop-single-related .shop-item .content .ratings {
padding-bottom: 12px !important;
}
.section-related-product.shop-single-related .shop-item .content .name-book {
font-size: 16px;
height: 28px;
margin-bottom: 3px !important;
}
.section-related-product.shop-single-related .shop-item .tf-btn {
width: 100% !important;
font-weight: 400;
padding: 12px 35px 10px 35px !important;
}
.section-related-product.shop-single-related .shop-item .tf-btn i {
font-size: 20px;
}
.section-shop-cart .table-shop-cart {
max-width: 940px;
margin-right: auto;
margin-right: -24px;
}
.section-shop-cart .table-shop-cart .shop-cart-head {
gap: 0px !important;
width: 940px;
padding: 21px 30px 23px 30px !important;
}
.section-shop-cart .table-shop-cart .shop-cart-head li:nth-child(1) {
width: 371px !important;
}
.section-shop-cart .table-shop-cart .shop-cart-head li:nth-child(2) {
width: 140px !important;
}
.section-shop-cart .table-shop-cart .shop-cart-head li:nth-child(3) {
width: 140px !important;
}
.section-shop-cart .table-shop-cart .shop-cart-head li:nth-child(4) {
width: 140px !important;
}
.section-shop-cart .shop-cart-item {
gap: 0px !important;
}
.section-shop-cart .shop-cart-item li:nth-child(2) {
width: 322px !important;
padding-left: 22px;
font-size: 16px;
line-height: 28px;
font-weight: 500;
}
.section-shop-cart .shop-cart-item li:nth-child(3) {
width: 140px !important;
font-size: 15px;
}
.section-shop-cart .shop-cart-item li:nth-child(5) {
padding-left: 40px !important;
}
.section-shop-cart .shop-cart-item li:nth-child(6) {
margin-left: 109px !important;
}
.section-shop-cart .shop-cart-bottom {
width: 940px !important;
}
.section-shop-cart .shop-cart-bottom .update-cart {
padding: 10px 34px !important;
}
.section-shop-cart .sidebar-shop {
margin-left: auto !important;
padding: 33px 38px 40px 40px !important;
max-width: 400px !important;
gap: 0px !important;
}
.section-shop-cart .sidebar-shop .cart-total-title {
padding-bottom: 25px;
}
.section-shop-cart .sidebar-shop .cart-total-bill {
gap: 0px !important;
}
.section-shop-cart .sidebar-shop .cart-total-bill .sub-total {
padding-bottom: 10px;
}
.section-shop-cart .sidebar-shop .cart-total-bill .total {
padding: 10px 0px 34px;
}
.section-shop-cart .sidebar-shop .tf-btn {
font-weight: 400 !important;
}
.page-title-shop-list .breadcrumbs,
.page-title-shop-single .breadcrumbs,
.page-title-shop-cart .breadcrumbs {
margin: 7px 0px 49px !important;
}
.main-shop-list {
padding-top: 0px !important;
}
.content-shop-single {
padding-top: 0px !important;
}
.page-pricing-title {
padding: 60px 0px 51px !important;
}
.page-pricing-title .breadcrumbs {
margin-bottom: 49px !important;
}
.section-pricing-page .heading-section {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.section-pricing-page .heading-section h2 {
margin-bottom: 28px;
}
.choose-sale {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-bottom: 7px;
}
.choose-sale .switch-item[type=checkbox] {
background-color: var(--Primary) !important;
}
.choose-sale .switch-item[type=checkbox]:checked {
background-color: var(--bg-4) !important;
}
.choose-sale .sale-off {
border: 1px solid var(--Secondary);
background-color: var(--bg-4);
padding: 0px 15px;
border-radius: 60px;
color: var(--Secondary);
}
.section-faq-page .page-faq-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
flex-direction: column;
/* max-width: 800px; */
margin: 0px auto;
}
.section-faq-page .page-faq-content.faq-1 {
/* margin-bottom: 150px; */
}
.section-faq-page .page-faq-content .heading-section {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-bottom: 30px;
}
.section-faq-page .page-faq-content .tf-accordion {
padding: 34px 60px 30px 60px;
}
.section-faq-page .page-faq-content .tf-accordion .tf-accordion-header {
padding-bottom: 20px;
}
.section-faq-page .page-faq-content .tf-accordion .tf-accordion-item {
padding: 23px 0 4px 0 !important;
}
.section-faq-page .page-faq-content .tf-accordion .tf-accordion-item .tf-accordion-collapse {
transition: all 0.3s ease-in-out !important;
}
.section-faq-page .page-faq-content .tf-accordion .tf-accordion-item .tf-accordion-content {
margin-bottom: 18px !important;
}
.page-404 {
padding: 0px !important;
}
.page-404 .page-404-wrap {
padding: 220px 0 191px 0;
background-color: var(--bg-4);
}
.page-404 .page-404-wrap .errors-404-content h3 {
margin-bottom: 20px !important;
}
.page-404 .page-404-wrap .errors-404-content p {
margin-bottom: 20px !important;
}
.page-404 .page-404-wrap .errors-404-content .tf-btn {
width: 100%;
}
.page-title-terms {
padding: 59px 0 51px !important;
}
.page-title-terms .breadcrumbs {
margin-bottom: 49px !important;
}
.section-page-terms {
padding: 70px 0px 70px 0px;
}
.section-page-terms .content {
/* max-width: 935px; */
margin: 0px auto;
}
.section-page-terms .content h2 {
padding-bottom: 14px;
}
.section-page-terms .content .text-1 {
padding-bottom: 30px;
}
.section-page-terms .content .basic-terms {
padding-bottom: 43px;
}
.section-page-terms .content .right-and-restriction {
padding-bottom: 46px;
}
.section-page-terms .content .right-and-restriction ul {
display: flex;
flex-direction: column;
gap: 5px;
}
.section-page-terms .content .right-and-restriction ul li::before {
content: "• ";
color: black;
font-size: 22px;
margin-right: 3px;
}
.page-login {
padding-top: 0px !important;
}
.page-login .login-content {
display: flex;
}
.page-login .login-wrap .img-left {
justify-content: flex-start;
}
.page-login .login-wrap .img-left img {
width: 100%;
max-height: 760px;
margin-right: 0px !important;
border-radius: 12px 0px 0px 12px;
}
.page-login .login-wrap .img-left .blockquite {
bottom: 0;
left: 0;
padding: 0px 60px 51px 60px;
}
.page-login .login-wrap .img-left .blockquite p {
font-size: 16px;
font-weight: 400;
}
.page-login .login-wrap .img-left .blockquite .author {
padding-top: 28px;
font-weight: 500;
}
.page-login .login-wrap .content-right {
height: 100%;
border-radius: 0px 12px 12px 0px;
margin-left: -29px !important;
justify-content: flex-start;
padding: 137px 60px 60px 60px;
}
.page-login .login-wrap .content-right .login-title {
padding-bottom: 8px;
}
.page-login .login-wrap .content-right .register {
padding-bottom: 21px;
}
.page-login .login-wrap .content-right .form-login {
gap: 0px;
}
.page-login .login-wrap .content-right .form-login .field-username {
margin-bottom: 29px;
}
.page-login .login-wrap .content-right .form-login .field-pass {
margin-bottom: 25px;
}
.page-login .login-wrap .content-right .form-login .checkbox-item {
margin-bottom: 24px;
}
.page-login .login-wrap .content-right .form-login .button-submit {
border-radius: 4px;
}
.page-login .login-wrap .content-right .login-social {
padding-top: 11px;
}
.page-login .login-wrap .content-right .login-social .login-social-icon {
width: 185px !important;
height: 50px !important;
}
.page-login .login-wrap .content-right .login-social .login-social-icon .tf-btn {
width: 100%;
height: 100%;
border-radius: 8px;
gap: 10px !important;
font-size: 15px !important;
padding: 0px !important;
align-items: center;
justify-content: center;
}
.page-login .login-wrap .content-right .login-social .login-social-icon .tf-btn .flaticon-facebook-1,
.page-login .login-wrap .content-right .login-social .login-social-icon .tf-btn .icon-apple {
font-size: 16px;
}
.page-login .login-wrap .content-right .login-social .login-social-icon .tf-btn .icon-google {
font-size: 14px;
}
.page-register {
padding-top: 0px !important;
}
.page-register .section-page-register.login-wrap {
padding: 160px 0px !important;
}
.page-register .section-page-register.login-wrap .img-left {
justify-content: flex-start;
}
.page-register .section-page-register.login-wrap .img-left img {
width: 100%;
max-height: 760px;
margin-right: 0px !important;
border-radius: 12px 0px 0px 12px;
}
.page-register .section-page-register.login-wrap .img-left .blockquite {
bottom: 0;
left: 0;
padding: 0px 60px 51px 60px;
}
.page-register .section-page-register.login-wrap .img-left .blockquite p {
font-size: 16px;
font-weight: 400;
}
.page-register .section-page-register.login-wrap .img-left .blockquite .author {
padding-top: 28px;
font-weight: 500;
}
.page-register .section-page-register.login-wrap .content-right {
height: 100%;
border-radius: 0px 12px 12px 0px;
margin-left: -29px;
justify-content: flex-start;
padding: 79px 60px 60px 60px;
}
.page-register .section-page-register.login-wrap .content-right .login-title {
padding-bottom: 8px;
}
.page-register .section-page-register.login-wrap .content-right .register {
padding-bottom: 21px;
}
.page-register .section-page-register.login-wrap .content-right .form-login {
gap: 0px;
}
.page-register .section-page-register.login-wrap .content-right .form-login .field-username {
margin-bottom: 30px;
}
.page-register .section-page-register.login-wrap .content-right .form-login .field-email {
margin-bottom: 32px;
}
.page-register .section-page-register.login-wrap .content-right .form-login .field-pass {
margin-bottom: 30px;
}
.page-register .section-page-register.login-wrap .content-right .form-login .field-pass-again {
margin-bottom: 30px;
}
.page-register .section-page-register.login-wrap .content-right .form-login .button-submit {
border-radius: 4px;
}
.page-register .section-page-register.login-wrap .content-right .login-social {
padding-top: 11px;
}
.page-register .section-page-register.login-wrap .content-right .login-social .login-social-icon {
width: 185px !important;
height: 50px !important;
}
.page-register .section-page-register.login-wrap .content-right .login-social .login-social-icon .tf-btn {
width: 100%;
height: 100%;
border-radius: 8px;
gap: 10px !important;
font-size: 15px !important;
padding: 0px !important;
align-items: center;
justify-content: center;
}
.page-register .section-page-register.login-wrap .content-right .login-social .login-social-icon .tf-btn .flaticon-facebook-1,
.page-register .section-page-register.login-wrap .content-right .login-social .login-social-icon .tf-btn .icon-apple {
font-size: 16px;
}
.page-register .section-page-register.login-wrap .content-right .login-social .login-social-icon .tf-btn .icon-google {
font-size: 14px;
}
.lesson-wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
}
.instructor-page-title.page-title {
padding: 60px 0 29px;
}
.main-content-page-lesson {
padding-top: 0px !important;
max-width: 1920px;
width: 100%;
display: flex;
}
.main-content-page-lesson .lesson-page-sidebar {
position: sticky;
height: max-content;
top: 0px;
z-index: 50;
width: 100%;
max-width: 469px;
padding: 34px 30px 30px 30px;
transition: left 0.3s ease-in-out;
}
.main-content-page-lesson .lesson-page-sidebar .sidebar-title {
margin-bottom: 23px;
display: flex;
justify-content: space-between;
}
.main-content-page-lesson .lesson-page-sidebar .sidebar-title i.sidebar-title-close {
display: none;
}
.main-content-page-lesson .lesson-page-sidebar .sidebar-search-lesson {
margin-bottom: 30px;
}
.main-content-page-lesson .lesson-page-sidebar .sidebar-search-lesson input {
border-radius: 8px;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item {
border-radius: 8px !important;
padding: 22px 20px 9px 30px !important;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-header {
flex-direction: column;
padding-bottom: 11px !important;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-header .tf-accordion-button {
font-size: 16px !important;
line-height: 28px !important;
padding: 0px;
padding-left: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: -5px;
width: 100% !important;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-header .tf-accordion-button::after {
font-size: 13px;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-header .sub-header {
display: flex;
gap: 6px;
white-space: nowrap;
right: 0;
align-items: flex-end;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-header .sub-header p:first-child::after {
content: "•";
font-size: 20px;
margin-left: 6px;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-collapse {
transition: all 0.3s ease-in-out;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-collapse .tf-accordion-content {
white-space: nowrap;
overflow: hidden;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-collapse .tf-accordion-content .flaticon-lock {
font-size: 16px;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-collapse .tf-accordion-content ul {
padding: 0px !important;
align-items: flex-start !important;
flex-direction: column;
gap: 0px;
padding-top: 23px !important;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-collapse .tf-accordion-content ul:last-child {
padding-bottom: 11px !important;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-collapse .tf-accordion-content ul .icon {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 1px;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-collapse .tf-accordion-content ul .icon span {
width: 100%;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-collapse .tf-accordion-content ul .sub-list {
display: flex;
gap: 10px;
align-items: center;
}
.main-content-page-lesson .lesson-page-sidebar .page-lesson-accordion .tf-accordion-item .tf-accordion-collapse .tf-accordion-content ul .sub-list .preview {
padding: 0px 9px;
border: 1px solid var(--Secondary);
background-color: var(--bg-4);
color: var(--Secondary);
border-radius: 4px;
}
.main-content-page-lesson .lesson-page-content {
width: 100%;
border-left: 1px solid var(--Border);
position: relative;
right: 0%;
transition: all 0.3s ease-in-out;
}
.main-content-page-lesson .lesson-page-content .lesson-top {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--Primary);
padding: 19px 30px 20px 30px;
}
.main-content-page-lesson .lesson-page-content .lesson-top .top-left {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.main-content-page-lesson .lesson-page-content .lesson-top .top-left h4 {
color: var(--White);
}
.main-content-page-lesson .lesson-page-content .lesson-top .top-left .btns-style-arrow {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.2);
border: none;
margin-right: 60px;
padding: 0 20px;
width: 50px;
height: 34px;
transition: all 0.3s ease-in-out;
}
.main-content-page-lesson .lesson-page-content .lesson-top .top-left .btns-style-arrow i {
font-size: 9px;
color: var(--White);
}
.main-content-page-lesson .lesson-page-content .lesson-top .icon-right {
cursor: pointer;
}
.main-content-page-lesson .lesson-page-content .lesson-top .icon-right .btn-nav-lesson {
width: 20px;
height: 10px;
position: relative;
}
.main-content-page-lesson .lesson-page-content .lesson-top .icon-right .btn-nav-lesson::before {
position: absolute;
content: "";
left: 0;
right: 0;
height: 2px;
background-color: var(--White);
}
.main-content-page-lesson .lesson-page-content .lesson-top .icon-right .btn-nav-lesson::after {
position: absolute;
content: "";
left: 0;
right: 0;
height: 2px;
bottom: 0;
background-color: var(--White);
}
.main-content-page-lesson .lesson-page-content .lesson-top .icon-right .flaticon-close-1 {
color: var(--White);
}
.main-content-page-lesson .lesson-page-content .lesson-video.widget-video {
border-radius: 0px !important;
}
.main-content-page-lesson .lesson-page-content .lesson-video.widget-video img {
width: 100%;
max-height: 700px;
object-fit: cover;
}
.main-content-page-lesson .lesson-page-content .lesson-inner.course-single-inner {
max-width: 900px !important;
margin: 0px auto !important;
padding: 0px 4px;
}
.main-content-page-lesson .lesson-page-content .lesson-inner .page-learn .learn-inner {
gap: 77px;
}
.main-content-page-lesson .lesson-page-content .lesson-inner .page-btn {
display: flex;
justify-content: space-between;
padding-top: 60px;
gap: 10px;
flex-wrap: wrap;
}
.main-content-page-lesson .lesson-page-content .lesson-inner .page-btn .tf-btn {
max-width: 300px;
}
.main-content-page-lesson .lesson-page-content .lesson-inner .page-btn .tf-btn.btn-prev {
background-color: var(--White);
color: var(--Primary);
width: 100%;
}
.main-content-page-lesson .lesson-page-content .lesson-inner .page-btn .tf-btn.btn-next {
width: 100%;
}
.section-page-instructor-single {
padding: 56px 0px 160px 0px;
}
.section-page-instructor-single .instructor-single-inner {
max-width: 900px;
margin-right: auto;
}
.section-page-instructor-single .instructor-single-inner .instructor-about {
border-bottom: 1px solid var(--Border);
padding-bottom: 49px;
}
.section-page-instructor-single .instructor-single-inner .instructor-about h2 {
margin-bottom: 15px;
}
.section-page-instructor-single .instructor-single-inner .instructor-about .text-1 {
margin-bottom: 28px;
}
.section-page-instructor-single .instructor-single-inner .instructor-my-course {
padding: 53px 0px 51px 0px;
border-bottom: 1px solid var(--Border);
}
.section-page-instructor-single .instructor-single-inner .instructor-my-course h2 {
margin-bottom: 24px;
}
.section-page-instructor-single .instructor-single-inner .instructor-my-course .content {
padding-top: 0px !important;
}
.section-page-instructor-single .instructor-single-inner .instructor-review-wrap {
padding: 54px 0px 60px 0px;
}
.section-page-instructor-single .instructor-single-inner .instructor-review-wrap .course-rating {
gap: 5px !important;
}
.section-page-instructor-single .sidebar-instructor {
padding: 17px 20px 30px 20px;
box-shadow: 0 6px 15px 0px rgba(19, 24, 54, 0.08);
border-radius: 12px;
max-width: 400px;
margin-left: auto;
margin-top: -227px;
background-color: var(--White);
position: sticky;
top: 20px;
}
.section-page-instructor-single .sidebar-instructor .instructor-img img {
border-radius: 12px;
}
.section-page-instructor-single .sidebar-instructor .sidebar-instructor-content {
padding: 34px 20px 33px 20px;
border-bottom: 1px solid var(--Border);
}
.section-page-instructor-single .sidebar-instructor .sidebar-instructor-content h5 {
margin-bottom: 25px;
}
.section-page-instructor-single .sidebar-instructor .sidebar-instructor-content ul li {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
}
.section-page-instructor-single .sidebar-instructor .sidebar-instructor-content ul li:not(:last-child) {
margin-bottom: 8px;
}
.section-page-instructor-single .sidebar-instructor .sidebar-instructor-content ul li a {
font-size: 15px;
}
.section-page-instructor-single .sidebar-instructor .sidebar-instructor-content ul li i {
font-size: 16px;
}
.section-page-instructor-single .sidebar-instructor .instructor-social {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
padding: 32px 0px 0px;
}
.section-page-instructor-single .sidebar-instructor .instructor-social ul {
display: flex;
gap: 10px;
}
.section-page-instructor-single .sidebar-instructor .instructor-social ul li a {
height: 40px;
width: 40px;
border: 1px solid var(--Border);
border-radius: 50%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.section-page-instructor-single .sidebar-instructor .instructor-social ul li a i.icon-twitter {
font-size: 10px;
}
.section-page-instructor-single .sidebar-instructor .instructor-social ul li a i.flaticon-instagram, .section-page-instructor-single .sidebar-instructor .instructor-social ul li a i.flaticon-linkedin-1 {
font-size: 12px;
}
.event-single-page-title {
padding: 60px 0 27px !important;
}
.event-single-page-title .breadcrumbs {
margin-bottom: 48px !important;
}
.section-page-event-single {
padding: 56px 0px 160px 0px;
}
.section-page-event-single .event-single-inner {
max-width: 900px;
margin-right: auto;
}
.section-page-event-single .event-single-inner .event-decs {
padding-bottom: 49px;
border-bottom: 1px solid var(--Border);
}
.section-page-event-single .event-single-inner .event-decs h2 {
margin-bottom: 15px;
}
.section-page-event-single .event-single-inner .event-decs .text-1 {
margin-bottom: 28px;
}
.section-page-event-single .event-single-inner .event-content {
padding: 54px 0px 50px 0px;
border-bottom: 1px solid var(--Border);
}
.section-page-event-single .event-single-inner .event-content h2 {
margin-bottom: 15px;
}
.section-page-event-single .event-single-inner .event-content ul li {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
padding-left:20px;
}
.section-page-event-single .event-single-inner .event-content ul li:not(:last-child) {
margin-bottom: 8px;
}
.section-page-event-single .event-single-inner .event-content ul li::before {
content: "•";
color: black;
font-size: 26px;
margin-right: 7px;
position: absolute;
top: 0;
left: 0;
}
.section-page-event-single .event-single-inner .event-speaker {
padding: 53px 0px 47px 0px;
border-bottom: 1px solid var(--Border);
}
.section-page-event-single .event-single-inner .event-speaker h2 {
margin-bottom: 24px;
}
.section-page-event-single .event-single-inner .event-speaker .speaker-swiper {
width: max-content !important;
margin-right: 59px !important;
}
.section-page-event-single .event-single-inner .event-speaker .speaker-img {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.section-page-event-single .event-single-inner .event-speaker .speaker-img img {
border-radius: 50%;
max-height: 170px;
max-width: 170px;
object-position: center;
object-fit: cover;
}
.section-page-event-single .event-single-inner .event-speaker .author {
margin-top: 12px;
text-align: center;
}
.section-page-event-single .event-single-inner .event-speaker .author a {
margin-bottom: 2px;
}
.section-page-event-single .event-single-inner .event-review-wrap {
padding: 54px 0px 60px 0px;
}
.section-page-event-single .event-single-inner .event-review-wrap .course-rating {
gap: 6px;
}
.section-page-event-single .sidebar-event {
max-width: 400px;
margin: -228px 0px 0px auto;
padding: 20px;
border-radius: 12px;
border: 1px solid var(--Border);
box-shadow: 0px 6px 15px 0px rgba(19, 24, 54, 0.08);
background-color: var(--White);
position: sticky;
top: 20px;
}
.section-page-event-single .sidebar-event .event-img img {
border-radius: 12px;
}
.section-page-event-single .sidebar-event .sidebar-event-content {
padding: 30px 20px 10px 19px;
}
.section-page-event-single .sidebar-event .sidebar-event-content h5 {
margin-bottom: 26px;
}
.section-page-event-single .sidebar-event .sidebar-event-content ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.section-page-event-single .sidebar-event .sidebar-event-content ul li {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
border-bottom: 1px solid var(--Border);
}
.section-page-event-single .sidebar-event .sidebar-event-content ul li:not(:first-child) {
padding-top: 16px;
}
.section-page-event-single .sidebar-event .sidebar-event-content ul li .cost {
font-size: 18px;
font-weight: 500;
line-height: 30px;
color: var(--Secondary);
}
.section-page-event-single .sidebar-event .sidebar-event-content ul li .icon-left {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.section-page-event-single .sidebar-event .sidebar-event-content ul li .icon-left i {
font-size: 18px;
}
.section-page-event-single .sidebar-event .sidebar-event-content ul li p {
font-family: DM Sans;
font-size: 15px;
}
.section-page-event-single .sidebar-event .sidebar-event-content .tf-btn {
margin-top: 42px;
width: 100%;
}
.section-page-event-single .sidebar-event .sidebar-event-content .event-social {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
padding: 32px 0px 0px;
}
.section-page-event-single .sidebar-event .sidebar-event-content .event-social .social-list {
display: flex;
gap: 10px;
flex-direction: row;
padding: 0px;
border: none;
}
.section-page-event-single .sidebar-event .sidebar-event-content .event-social .social-list .social-list a {
height: 40px;
width: 40px;
border: 1px solid var(--Border);
border-radius: 50%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.section-page-event-single .sidebar-event .sidebar-event-content .event-social .social-list .social-list a i.icon-twitter {
font-size: 10px;
}
.section-page-event-single .sidebar-event .sidebar-event-content .event-social .social-list .social-list a i.flaticon-instagram, .section-page-event-single .sidebar-event .sidebar-event-content .event-social .social-list .social-list a i.flaticon-linkedin-1 {
font-size: 12px;
}
/*-------------- Responsive ----------------- */
/* Media Queries
-------------------------------------------------------------- */
@media (min-width: 1441px) {
.widget-instagram.pb-0 .grid-sw-7 {
gap: 16px;
grid-template-columns: repeat(6, 1fr);
}
.grid-sw-4 {
display: grid;
gap: 22px 28px;
grid-template-columns: repeat(3, 1fr);
}
.grid-ct-5 {
display: grid;
gap: 25px;
grid-template-columns: repeat(5, 1fr);
}
.grid-ct-11 {
display: grid;
gap: 75px;
grid-template-columns: repeat(11, 1fr);
}
.grid-sw-7 {
display: grid;
gap: 15px;
grid-template-columns: repeat(7, 1fr);
}
.grid-sw-5 {
display: grid;
gap: 22px 28px;
grid-template-columns: repeat(5, 1fr);
}
.page-title-home1 .bot-categories {
justify-content: center;
position: relative;
}
.page-title-home1 .bot-categories::before {
left: 0;
background-image: linear-gradient(to right, #fff 0%, transparent 100%);
}
.page-title-home1 .bot-categories::after {
background-image: linear-gradient(to right, transparent 0%, #fff 100%);
right: 0;
}
.page-title-home1 .bot-categories:before, .page-title-home1 .bot-categories:after {
position: absolute;
top: 0;
content: "";
z-index: 2;
width: calc((100vw - 1430px) / 2);
height: 100%;
}
.page-title-home2 .wrap-brand .slide-brand::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-image: linear-gradient(to left, rgb(255, 244, 240), rgba(255, 244, 240, 0), rgba(255, 244, 240, 0), rgb(255, 244, 240));
}
.shop-checkout .checkout-billing {
margin-right: -16px;
}
.tf-sidebar {
max-width: 320px;
}
.section-vison .content {
padding-right: 80px;
}
.contact-wrap .content-right {
width: 714px;
padding: 75px 59px 64px 60px;
}
}
@media (min-width: 992px) {
.page-title-home4 .image {
padding-top: 100px;
}
.page-title-home8 {
background-image: url(../images/page-title/page-title-home8.jpg);
background-repeat: no-repeat;
background-position: 100% 100%;
background-size: 827px;
}
.page-title-home8 .content {
padding-top: 147px;
padding-bottom: 182px;
}
#header_main.style-10 .header-inner .header-left, #header_main.style-7 .header-inner .header-left, #header_main.style-3 .header-inner .header-left {
width: 100%;
}
#header_main.style-9 .header-inner {
border-radius: 0 0 24px 24px;
}
}
@media (max-width: 1440px) {
.section-shop-cart .shop-cart-bottom {
width: auto !important;
}
.login-social {
justify-content: center !important;
}
.section-page-register.login-wrap .img-left {
height: 100%;
}
.section-page-register.login-wrap .img-left img {
max-height: none !important;
}
.lesson-page-content .lesson-inner.course-single-inner {
padding: 30px !important;
}
.section-shop-page .grid-list-items-5 {
grid-template-columns: repeat(4, 1fr) !important;
gap: 0px !important;
}
.section-icon .wrap-icon-box .icons-box p br {
display: none;
}
.section-shop-cart .table-shop-cart {
margin-right: 0px;
}
.section-we-offer .we-offer-img img,
.section-latest-blog .latest-blog-img,
#footer.style-6 .footer-img {
display: none;
}
#footer.style-4 .footer-wrap {
margin: 0 15px;
}
.sp-border-46 {
margin: 0px 0px;
}
.page-title-home9,
.sp-border {
margin-left: 15px;
margin-right: 15px;
}
.section-become-instructor .main-section .content-img {
display: none;
}
.btns-style-arrow {
display: none;
}
.badge-item {
padding: 10px;
gap: 10px;
}
.shop-cart-wrap .table-shop-cart .shop-cart-head {
width: max-content;
}
.shop-cart-wrap .table-shop-cart .shop-cart-bottom .form-coupon .tf-field {
width: 100%;
}
.shop-cart-wrap .table-shop-cart .shop-cart-bottom .form-coupon .btn-submit-coupon {
width: 100%;
}
.events-item.style2 .event-item-content .event-item-sub {
flex-wrap: wrap;
}
.page-title-home7 .image-page-title {
right: -220px;
}
#header_main .header-inner {
padding: 0 20px;
}
#header_main .header-inner .header-left {
gap: 13px;
}
#header_main .header-inner .header-btn,
#header_main .header-inner .header-right {
gap: 10px;
}
#header_main .header-catalog > a {
padding: 9px 10px;
gap: 5px;
}
#header_main .navigation {
gap: 10px;
}
#header_main .navigation > li.has-children {
padding-right: 10px;
}
#header_main .navigation .mega-menu {
width: 800px;
}
#header_main .header-search {
max-width: 200px;
}
#header_main .mega-menu {
width: 800px;
padding: 30px 20px;
gap: 30px;
}
#header_main.style-4 .main-menu {
padding-left: 20px;
}
#header_main.style-4 .header-search {
max-width: 150px;
}
#header_main.style-5 .navigation .mega-menu {
left: 0;
transform: translateX(0) translateY(0px) !important;
}
#header_main.style-5 > li:hover .navigation .mega-menu {
transform: translateX(0) translateY(-9px) !important;
}
}
@media (max-width: 1200px) {
.section-page-login.login-wrap .img-left img {
max-height: max-content;
}
.lesson-page-sidebar {
position: absolute !important;
top: 0;
opacity: 0;
visibility: hidden;
transition: left 0.3s ease-in-out;
}
.lesson-page-sidebar .sidebar-title .sidebar-title-close {
display: block !important;
cursor: pointer;
}
.lesson-page-sidebar.open-lesson-sidebar {
position: relative;
opacity: 1;
visibility: visible;
background-color: var(--White);
max-width: none;
width: 100% !important;
}
.lesson-page-content {
border: none !important;
}
.lesson-page-content.lesson-page-close {
display: none;
right: -100%;
transition: all 0.3s ease-in-out;
}
.lesson-page-content .lesson-top .icon-right .flaticon-close-1 {
display: none;
}
.lesson-page-content .lesson-top .icon-right .btn-nav-lesson {
display: block;
}
.gallery {
padding: 0px 0px;
}
#header_main.style-9 .header-inner {
padding: 0 15px;
}
.events-item .event-item-date {
padding: 12px 20px 9px 20px;
}
.section-about-box .about-box-content {
padding-top: 50px;
padding-left: 30px;
padding-right: 0px;
}
.counter.style-2 .number-counter {
min-width: 100%;
}
.section-about-box .image {
padding-right: 20px;
}
.section-form-home-8 .forms-courses h3 {
padding-right: 0em;
}
.section-get-started.style8 .content {
padding-left: 30px;
}
.section-faq-h8 .faq-content {
padding-right: 30px;
}
.section-get-started.style7 .getstared-content {
margin-top: 0px;
padding-left: 0px;
padding-right: 0px;
}
.section-get-started.style7 .getstared-image {
position: relative;
padding-right: 50px;
padding-left: 0px;
}
.section-mobile-app.style2 .mobile-app-wrap {
padding-left: 14px;
padding-right: 0px;
}
.page-title-home10 > .image-bg,
.page-title-home4 > .image-bg,
.page-title-home3 > .image-bg {
display: none;
}
.grid-layout-4 {
grid-template-columns: repeat(2, 1fr);
}
#footer .footer-more-infor,
#footer .footer-subscribe {
max-width: 200px;
}
.blog-article-item.style-row {
gap: 20px;
}
.blog-article-item.style-row .article-content {
padding-top: 10px;
gap: 7px;
}
.grid-layout-4,
.grid-list-items-4 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1024px) {
.section-key .key-wrap {
flex-wrap: wrap;
}
.section-key .key-wrap .key-image {
width: 100%;
height: 500px;
}
.section-key .key-wrap .key-image img {
border-radius: 12px 12px 0px 0px;
}
.section-key .key-wrap .content {
width: 100%;
padding: 50px;
border-radius: 0px 0px 12px 12px;
}
.section-shop-page .grid-list-items-5 {
grid-template-columns: repeat(3, 1fr) !important;
gap: 0px !important;
}
.pricing-item {
padding: 20px !important;
}
.pricing-item.dia-plan {
padding: 28px 28px 40px 28px !important;
}
.pricing-item.basic-plan {
padding: 28px 28px 40px 28px !important;
}
.section-faq-h6 .faq-image {
padding-left: 0px;
padding-top: 23px;
margin-bottom: 0px;
}
.section-faq-h6 .faq-content {
padding-right: 30px;
}
.section-get-started.style5 .getstared-content {
padding-left: 30px;
margin-top: 0px;
}
.page-title-home4 .content {
padding-top: 170px;
padding-bottom: 110px;
}
.section-event .wrap-item-grid {
grid-template-columns: repeat(1, 1fr);
}
.widget.event-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.grid-list-items-5 .grid-list-items-5,
.grid-layout-5 .grid-list-items-5 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 991px) {
.section-get-started .get-started-wrap {
flex-wrap: wrap-reverse;
flex-direction: column;
}
.section-get-started .get-started-wrap .wrap-content {
padding: 70px 60px !important;
width: 100% !important;
border-radius: 12px 12px 0px 0px;
}
.section-get-started .get-started-wrap .img-right {
width: 100% !important;
height: 500px;
}
.section-get-started .get-started-wrap .img-right img {
border-radius: 0px 0px 12px 12px;
}
.section-become-instructor .main-section {
padding: 40px !important;
}
.section-page-title .content {
padding: 30px 0px !important;
}
.section-page-title.style-8 .content {
margin-bottom: 0px !important;
}
.section-page-title .right-sale {
margin: 0px auto 60px auto !important;
}
.section-page-course .course-single-inner {
padding-bottom: 60px;
margin-right: 0px !important;
max-width: max-content;
}
.section-page-course .course-single-inner > div:not(:last-child) {
padding: 30px 0px !important;
}
.section-page-course .course-single-inner > div:not(:last-child) {
padding: 30px 0px !important;
}
.section-page-course .course-single-inner .page-learn .learn-inner {
gap: 0px !important;
}
.section-page-course .course-single-inner .page-learn .learn-inner ul:first-child {
margin-right: auto;
}
.section-page-course .course-single-inner.ver-5 .widget-video {
padding: 30px 0px !important;
}
.section-page-course .sidebar-course.course-single-v1 {
margin: 0px !important;
}
.section-page-course .sidebar-course.course-single-v2, .section-page-course .sidebar-course.course-single-v3 {
margin: 0px !important;
}
.section-page-course .sidebar-course.course-single-v2 img, .section-page-course .sidebar-course.course-single-v3 img {
max-width: none !important;
}
.section-page-course .sidebar-course.no-video {
margin-top: 0px !important;
}
.section-product-top .shop-detail-content {
padding-left: 0px !important;
}
.section-product-bottom .button-submit {
width: 100% !important;
}
.section-shop-cart .sidebar-shop {
margin-left: 0px !important;
max-width: none !important;
width: 100% !important;
}
.section-pricing-page .pricing-item.basic-plan, .section-pricing-page .pricing-item.pro-plan, .section-pricing-page .pricing-item.basic-plan {
margin: 0px !important;
padding: 30px !important;
}
.section-pricing-page .pricing-item.basic-plan .pricing-price, .section-pricing-page .pricing-item.pro-plan .pricing-price, .section-pricing-page .pricing-item.basic-plan .pricing-price {
padding-bottom: 20px;
}
.section-pricing-page .pricing-item.basic-plan .pricing-benefit-list, .section-pricing-page .pricing-item.pro-plan .pricing-benefit-list, .section-pricing-page .pricing-item.basic-plan .pricing-benefit-list {
padding: 20px 0px;
}
.section-pricing-page .pricing-item.basic-plan .pricing-benefit-list .benefit-item, .section-pricing-page .pricing-item.pro-plan .pricing-benefit-list .benefit-item, .section-pricing-page .pricing-item.basic-plan .pricing-benefit-list .benefit-item {
margin-bottom: 10px !important;
}
.login-wrap.section-page-login .img-left, .login-wrap.section-page-register .img-left {
height: auto !important;
}
.login-wrap.section-page-login .img-left img, .login-wrap.section-page-register .img-left img {
max-height: 500px !important;
border-radius: 12px 12px 0px 0px !important;
}
.login-wrap.section-page-login .content-right, .login-wrap.section-page-register .content-right {
height: 100%;
border-radius: 0px 0px 12px 12px !important;
padding: 40px !important;
margin-left: 0px !important;
}
.section-page-terms {
padding: 60px 0px !important;
}
.course-top-wrapper.shop-list .sort-wrap {
justify-content: flex-end !important;
}
.section-page-instructor-single,
.section-page-event-single {
padding: 60px 0px;
}
.section-page-instructor-single .instructor-single-inner,
.section-page-instructor-single .event-single-inner,
.section-page-event-single .instructor-single-inner,
.section-page-event-single .event-single-inner {
padding-bottom: 30px !important;
}
.section-page-instructor-single .instructor-single-inner h2,
.section-page-instructor-single .event-single-inner h2,
.section-page-event-single .instructor-single-inner h2,
.section-page-event-single .event-single-inner h2 {
font-size: 22px !important;
}
.section-page-instructor-single .instructor-single-inner .event-decs,
.section-page-instructor-single .event-single-inner .event-decs,
.section-page-event-single .instructor-single-inner .event-decs,
.section-page-event-single .event-single-inner .event-decs {
padding: 0px 0px 30px;
}
.section-page-instructor-single .instructor-single-inner .event-content,
.section-page-instructor-single .instructor-single-inner .event-speaker,
.section-page-instructor-single .instructor-single-inner .event-review-wrap,
.section-page-instructor-single .event-single-inner .event-content,
.section-page-instructor-single .event-single-inner .event-speaker,
.section-page-instructor-single .event-single-inner .event-review-wrap,
.section-page-event-single .instructor-single-inner .event-content,
.section-page-event-single .instructor-single-inner .event-speaker,
.section-page-event-single .instructor-single-inner .event-review-wrap,
.section-page-event-single .event-single-inner .event-content,
.section-page-event-single .event-single-inner .event-speaker,
.section-page-event-single .event-single-inner .event-review-wrap {
padding: 30px 0px;
}
.section-page-instructor-single .sidebar-instructor,
.section-page-instructor-single .sidebar-event,
.section-page-event-single .sidebar-instructor,
.section-page-event-single .sidebar-event {
margin: 0px !important;
max-width: none;
width: 100%;
}
.section-page-instructor-single .sidebar-instructor .instructor-img img,
.section-page-instructor-single .sidebar-instructor .event-img img,
.section-page-instructor-single .sidebar-event .instructor-img img,
.section-page-instructor-single .sidebar-event .event-img img,
.section-page-event-single .sidebar-instructor .instructor-img img,
.section-page-event-single .sidebar-instructor .event-img img,
.section-page-event-single .sidebar-event .instructor-img img,
.section-page-event-single .sidebar-event .event-img img {
width: 100%;
max-height: 500px;
object-fit: cover;
}
.page-404-wrap {
padding: 60px 0px !important;
}
.our-event-item .event-hover {
display: none;
}
#footer.style-2 .footer-body-wrap {
padding: 44px 0 20px;
}
.icons-box.style-3 {
flex-direction: column;
text-align: center;
}
.page-title-home5 .image {
max-width: 581px;
margin: 0 auto;
}
.section-about-box.style-1 .content-wrap {
padding-top: 50px;
padding-left: 0px;
}
.section-about-box .box-img {
align-items: center;
justify-content: center;
}
.page-title-home4 {
margin-bottom: 50px;
}
.page-title-home4 .image {
margin: 0 auto;
}
.main-content.pb-182 {
padding-bottom: 80px;
}
.instructors-teacher-wrap {
grid-template-columns: repeat(3, 1fr);
}
.section-instructors .instructors-teacher-img {
display: none;
}
.section-about-box .content {
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}
.section-academisc {
padding-top: 80px;
}
.main-content {
padding-top: 80px;
}
.tf-spacing-25,
.tf-spacing-4,
.tf-spacing-5,
.tf-spacing-11,
.tf-spacing-1,
.tf-spacing-12,
.tf-spacing-26,
.tf-spacing-31,
.section-campus-life,
.tf-spacing-8,
.tf-spacing-32,
.tf-spacing-6,
.tf-spacing-3,
.tf-spacing-7,
.tf-spacing-33,
.tf-spacing-23,
.tf-spacing-36 {
padding-top: 80px;
padding-bottom: 80px;
}
.section-popular-courses.style-7,
.section-learn-h7,
.section-start-banner-h7 {
padding-top: 120px;
padding-bottom: 120px;
}
.section-popular-courses.style-7:before,
.section-popular-courses.style-7::after,
.section-learn-h7:before,
.section-learn-h7::after,
.section-start-banner-h7:before,
.section-start-banner-h7::after {
height: 60px;
}
.page-title-home7 .content-page-title {
padding: 100px 0 50px !important;
}
.section-get-started.style5 .getstared-content {
padding-left: 0px;
margin-top: 0px;
}
.section-become-instructor-2 .content-left {
padding-top: 0px;
padding-right: 0px;
}
.widget-learn-wrap {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.section-foundational-skills .foundational-skills-content {
padding-left: 0px;
}
br {
display: none;
}
#footer.style-4 .footer-wrap {
margin: 0;
border-radius: 0;
}
.browse-course-banner {
padding: 10px;
gap: 10px;
}
.browse-course-banner .browse-course-banner-text {
width: 40%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.browse-course-banner > a {
right: 10px;
}
.browse-course-banner .tf-btn > span {
display: none;
}
.shop-checkout .sidebar-shop-checkout {
max-width: max-content;
}
.sidebar-course {
max-width: 100%;
}
.events-item.style2 .event-item-img img {
width: 100%;
}
.pricing-group .pricing-item {
gap: 20px;
}
.pricing-group .pricing-item .pricing-price {
padding-bottom: 15px;
}
.pricing-group .pricing-item .pricing-benefit-list {
gap: 10px;
}
.login-wrap .img-left,
.contact-wrap .img-left {
margin-right: 0px;
}
.login-wrap .img-left img,
.contact-wrap .img-left img {
margin-right: 0px;
max-height: 660px;
border-radius: 12px 12px 0 0;
}
.login-wrap .content-right,
.contact-wrap .content-right {
margin: 0px;
border-radius: 0 0 12px 12px;
}
.page-title-home10 .image-bot {
border-radius: 8px;
}
.page-title-home9 {
margin-left: 0;
margin-right: 0;
}
.page-title-home9 .content {
padding: 180px 0 180px;
}
.page-title-home9 .swiper-pagination .swiper-pagination-bullet {
font-size: 16px;
line-height: 24px;
padding: 12px 0px;
}
.page-title-home9 .swiper-pagination {
gap: 40px;
padding: 0px 20px;
}
.page-title-home9 .bottom-wrap {
flex-wrap: wrap;
}
.page-title-home9 .bottom-wrap .item {
padding: 10px 0;
}
.page-title-home7::after {
display: none;
}
.page-title-home7 .swiper-slide-next {
opacity: 1;
}
.page-title-home7 .image-page-title {
position: unset;
max-width: unset;
padding: 0 20px 40px;
}
.page-title-home3 {
padding: 100px 0 50px;
}
.page-title-home7 .content-page-title {
padding: 40px 0 20px;
}
.page-title-home7 .image-page-title {
margin-right: auto;
margin-left: auto;
margin-bottom: 40px;
}
.page-title-home1 .image {
margin-top: 0;
}
.page-title-home4 .content {
padding: 100px 0 50px;
}
.page-title-home5 .content {
padding: 150px 0 50px;
}
.page-title-home6 .image {
padding-top: 30px;
margin-bottom: 0px;
}
.page-title-home7 .content,
.page-title-home6 .content,
.page-title-home2 .content,
.page-title-home1 .content {
padding: 40px 0 20px;
}
.page-title-home7 .image,
.page-title-home6 .image,
.page-title-home2 .image,
.page-title-home1 .image {
margin-right: auto;
margin-left: auto;
margin-bottom: 40px;
}
.page-title-home1 .bot-categories {
padding-left: 30px;
padding-right: 30px;
}
.page-title-home1 .image {
margin-right: auto;
margin-bottom: 40px;
}
.page-title-home1 .bot-categories {
padding-left: 30px;
padding-right: 30px;
}
.page-blog-single {
padding: 0 20px;
}
.page-blog-list {
flex-direction: column;
}
.page-blog-list > .right {
max-width: unset;
}
.tf-container {
padding-left: 20px;
padding-right: 20px;
}
#header_main .header-inner .header-right,
#header_main .header-inner .header-left {
gap: 20px;
}
#header_main .header-inner .header-inner-wrap {
padding: 20px 0;
}
#header_main .header-login,
#header_main .header-register,
#header_main .main-menu,
#header_main .header-catalog,
#header_main .header-search {
display: none;
}
#footer .footer-body-wrap {
flex-wrap: wrap;
gap: 35px;
}
#footer .footer-body-wrap > div {
width: calc(50% - 40px);
max-width: unset;
}
#footer .footer-body-wrap .footer-subscribe {
width: 100%;
}
#footer .footer-body-wrap h5,
#footer .footer-body-wrap .footer-logo {
margin-bottom: 25px;
}
#footer .footer-bottom-wrap {
padding: 10px 0 11px;
}
#footer br {
display: none;
}
.flat-about .content-right {
padding-left: 0;
margin-bottom: 30px;
}
.flat-about .inner {
margin-top: 30px;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
grid-template-rows: repeat(4, 1fr);
grid-template-areas: "aa bb" "cc dd" "ee ff" "gg gg ";
}
.shop-single .shop-detail-content {
padding: 50px 0 0;
}
.form-newsletter .icon,
.form-newsletter p {
margin-bottom: 0;
}
.page-title.style-8 .content {
margin-bottom: 30px;
}
.page-title.style-8 .right-sale {
padding-left: 0;
}
.page-title.style-9 .content, .page-title.style-10 .content {
margin-bottom: 30px;
}
.page-title.style-9 .right-content .tf-btn, .page-title.style-10 .right-content .tf-btn {
width: 100%;
}
}
@media (max-width: 767px) {
.section-page-title .content .entry-meta li {
margin-bottom: 10px;
}
.course-single-inner .page-learn .learn-inner {
gap: 5px !important;
flex-wrap: wrap;
}
.course-single-inner .page-learn .learn-inner ul:first-child {
padding-bottom: 10px;
}
.section-shop-page .grid-list-items-5 {
grid-template-columns: repeat(2, 1fr) !important;
}
.section-pricing-page .pricing-item {
width: 100% !important;
max-width: 100% !important;
}
.section-shop-cart .shop-cart-bottom {
flex-wrap: wrap;
}
.section-shop-cart .shop-cart-bottom .cols {
width: 100%;
}
.section-shop-cart .shop-cart-bottom .coupon-btn {
width: 100%;
}
.section-shop-cart .shop-cart-bottom .coupon-btn .tf-btn {
width: 100%;
}
.section-page-course .course-single-inner h2 {
font-size: 22px !important;
font-weight: 500 !important;
line-height: 28px !important;
}
.section-faq-page .faq-1 {
margin-bottom: 60px !important;
}
.section-faq-page .tf-accordion-default {
padding: 30px 40px !important;
}
.campus-life-wrap {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
}
.section-about-box-style2 .content {
padding-right: 0px;
padding-left: 0px;
}
.section-about-box-style2 .image {
padding-right: 0px;
}
.section-faq-h6 .faq-content {
padding-right: 0px;
}
.choose-sale {
margin-top: 20px;
}
.section-teachers .teachers-right {
justify-content: center;
}
.section-teachers .teachers-content {
padding-top: 0px;
padding-bottom: 50px;
}
.section-get-started .get-started-content {
padding-top: 30px;
}
.section-get-started .get-started-image .badge-1 {
display: none;
}
.section-become-instructor .image-left {
max-width: 100%;
width: 100%;
}
.section-become-instructor .content-right {
padding-top: 30px;
padding-left: 0px;
}
.section-event .wrap-item {
grid-template-columns: repeat(1, 1fr);
}
.section-why .row .col-md-4:not(:last-child) .icons-box, .section-why .row .col-sm-4:not(:last-child) .icons-box {
margin-bottom: 40px;
}
.instructors-teacher-wrap {
grid-template-columns: repeat(2, 1fr);
}
.we-offer-wrap {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.section-about-box .about-box-content {
padding-left: 0px;
}
.section-about-box .about-box-image .about-box-img-2 {
display: none;
}
.section-about-box .about-box-image {
padding-right: 0px;
padding-bottom: 0px;
}
.section-why-kindergarten .row *.col-sm-6 {
margin-bottom: 30px;
}
.section-about-box .image {
padding-right: 0px;
margin-bottom: 50px;
}
.section-faq-h8 .faq-content {
padding-right: 0px;
padding-bottom: 30px;
}
.section-form-home-8 .forms-courses {
padding: 50px 30px 60px 30px;
}
.section-form-home-8 .content {
padding-top: 50px;
padding-bottom: 30px;
}
.section-teachers-1 .teachers-content {
padding-top: 0px;
padding-bottom: 30px;
}
.section-get-started.style8 .content {
padding-left: 0px;
padding-top: 30px;
}
.section-get-started.style7 .getstared-image .image-video-started {
display: none;
}
.section-foundational-skills .foundational-skills-image {
margin-right: 0px;
}
.section-become-instructor-2 .image-right {
padding-left: 0px;
}
.counter.style-3 .number-counter {
width: auto;
}
.section-become-instructor-2 .content-left .counter.style-3 {
gap: 0px 50px;
}
.section-get-started.style7 .getstared-image {
padding-right: 0px;
}
.section-get-started.style7 .getstared-content {
margin-top: 50px;
}
.section-mobile-app .content-left {
padding-top: 60px;
padding-bottom: 60px !important;
}
.section-get-started.style5 .getstared-image {
padding-right: 0px;
padding-top: 0px;
}
.widget-saying .widget-saying-content p {
font-size: 20px;
line-height: 40px;
}
.main-content {
padding-top: 50px;
}
.heading-section {
margin-bottom: 20px !important;
}
.heading-section h2 {
font-size: 26px !important;
line-height: 36px !important;
margin-bottom: 0 !important;
}
.tf-spacing-1,
.tf-spacing-2,
.tf-spacing-3,
.tf-spacing-4,
.tf-spacing-5,
.tf-spacing-6,
.tf-spacing-7,
.tf-spacing-8,
.tf-spacing-10,
.tf-spacing-11,
.tf-spacing-12,
.tf-spacing-20,
.tf-spacing-21,
.tf-spacing-22,
.tf-spacing-23,
.tf-spacing-24,
.tf-spacing-25,
.tf-spacing-26,
.tf-spacing-31,
.tf-spacing-33,
.tf-spacing-36 {
padding-top: 30px;
padding-bottom: 30px;
}
.profile-wrap .profile-info {
max-width: 30%;
}
.profile-wrap .profile-btn {
flex-direction: column;
}
.tf-accordion-default {
padding: 10px 15px;
}
.tf-accordion-style-2 .tf-accordion-item {
padding: 20px 0 12.5px 15px;
}
.tf-accordion-style-3 .tf-accordion-item {
padding: 15px 20px 15px 20px;
}
.tf-accordion-style-3 .list {
padding: 0 15px;
}
.order-comleted .order-info {
padding: 20px 10px;
}
.order-comleted .order-info .item {
max-width: 25%;
}
.order-comleted .sidebar-shop .your-order {
padding: 10px 15px;
}
h1 {
font-size: 36px;
line-height: 50px !important;
}
h2 {
font-size: 36px !important;
line-height: 50px !important;
}
.course-item.style-row {
flex-direction: column;
}
.blog-article-item.style-row {
flex-direction: column;
}
.blog-article-item.style-row .article-thumb {
width: unset;
}
.tf-spacing {
padding: 40px 0;
}
.grid-layout-4 {
grid-template-columns: repeat(1, 1fr);
}
.widget-tabs.style-row .widget-menu-tab {
margin-bottom: 20px;
}
.widget-tabs.style-row .widget-menu-tab .item-title {
padding-bottom: 10px;
}
.widget-tabs.style-small.type-center .widget-menu-tab {
justify-content: start;
padding-bottom: 10px;
margin-bottom: 20px;
}
#footer .footer-body-wrap {
padding: 40px 0;
}
#footer .footer-body-wrap > div {
width: 100%;
}
.counter {
flex-wrap: wrap;
}
.counter .number-counter {
width: 50%;
margin-bottom: 30px;
}
.counter.style-2 {
gap: 20px;
}
.counter.style-2 .number-counter {
margin-bottom: 0;
}
.instructors-item.style-2 {
flex-direction: column;
}
.instructors-item.style-2 .image-wrapper {
max-width: 100%;
max-height: 100%;
}
}
@media (max-width: 575px) {
.section-teachers .teachers-right .user-box-2 {
max-width: 100%;
}
.section-teachers .teachers-right {
flex-direction: column;
}
.section-campus-life .row *.col-sm-4 {
margin-bottom: 30px;
}
}
@media (max-width: 550px) {
.section-shop-page .sort-by-wrap .text-show {
display: none;
}
.section-shop-page .grid-list-items-5 {
grid-template-columns: repeat(1, 1fr) !important;
}
.page-title-home9 .swiper-pagination {
gap: 0px;
}
.page-title-home9 .swiper-pagination {
flex-direction: column;
}
.events-item.style4 {
flex-direction: column;
}
.events-item.style4 .event-item-img {
width: 100%;
height: auto;
flex-shrink: unset;
}
.events-item.style4 {
padding: 30px 20px 30px;
}
.events-item.style4 {
align-items: flex-start;
}
.section-foundational-skills .foundational-skills-content .foundational-skills-wrap {
grid-template-columns: repeat(1, 1fr);
}
.widget-learn-wrap {
grid-template-columns: repeat(2, 1fr);
}
.tf-accordion-style-3 span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tf-accordion-style-3 .text {
width: 60%;
}
.tf-accordion-style-3 .tf-btn {
padding: 10px;
}
.selling-course-item {
gap: 10px;
padding-bottom: 10px;
}
.selling-course-item .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.selling-course-item .selling-course-btn {
flex-direction: column;
}
.badge-item {
padding: 10px;
gap: 10px;
}
.profile-wrap {
gap: 10px;
}
.profile-wrap p {
display: none;
}
.wrap-list-text-check1 {
flex-direction: column;
gap: 10px;
}
.shop-sigle h2 {
font-size: 26px;
line-height: 36px;
}
.shop-sigle h3 {
font-size: 21px;
line-height: 30px;
}
.wg-counter .counter {
flex-wrap: wrap;
}
.review-item {
flex-direction: column;
gap: 10px;
}
.login-wrap .content-right .login-social {
flex-wrap: wrap;
justify-content: center;
}
.shop-cart-wrap .shop-cart-bottom {
display: flex;
flex-wrap: wrap;
}
.shop-cart-wrap .shop-cart-bottom .update-cart {
width: 100%;
}
}
@media (max-width: 480px) {
form .cols {
flex-direction: column;
}
.section-get-started .get-started-image .badge {
left: 50px;
}
.section-categories .wrap-icon-box {
margin-bottom: 15px;
gap: 15px;
}
.events-item .event-item-content .event-item-sub {
gap: 0px;
margin-bottom: 10px;
}
.section-key .key-wrap .content {
padding: 30px;
}
.section-get-started .get-started-wrap .wrap-content {
padding: 30px 30px !important;
}
.section-become-instructor .main-section {
padding: 30px !important;
}
h2 {
font-size: 26px !important;
line-height: 40px !important;
}
.we-offer-wrap,
.instructors-teacher-wrap {
grid-template-columns: repeat(1, 1fr);
}
.section-get-started.style7 .getstared-image .badge-item-style-2 {
width: auto;
}
}
@media (max-width: 1150px) {
.mobi-instructors-dashboard {
opacity: 1;
}
.btn-mobile-instructors {
display: block;
}
}
.dashboard_navigationbar .dropbtn {
display: none;
}
@media (max-width: 1149px) {
.section-dashboard-right {
margin-left: 0px;
max-width: 100%;
width: 100%;
margin-top: 40px;
}
.section-dashboard-right .section-icons .icons-items .icons-box {
width: 100%;
height: auto;
}
.instructors-dashboard .dashboard-title {
display: none;
}
.dashboard_navigationbar {
position: relative;
margin-bottom: 30px;
}
.dashboard_navigationbar .dropbtn {
background-color: var(--Primary);
border-radius: 12px;
color: var(--White);
display: block;
font-size: 16px;
height: 70px;
margin-bottom: 10px;
outline: none;
padding: 20px 30px;
position: relative;
text-align: left;
width: 100%;
cursor: pointer;
}
.dashboard_navigationbar .instructors-dashboard {
box-shadow: none;
display: none;
height: auto;
overflow: auto;
position: absolute;
top: 0;
}
.dashboard_navigationbar .instructors-dashboard.show {
display: block;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 1s;
overflow: hidden;
position: relative;
min-height: auto;
min-width: auto;
width: 100%;
}
}
@media (max-width: 1024px) {
.section-get-started .get-started-wrap .wrap-content {
padding: 10px 40px 21px 40px;
}
.section-become-instructor .main-section {
padding: 71px 10px 76px 40px;
}
.section-start-banner .main-section {
padding: 80px 40px 80px 40px;
}
.section-get-started.style6 .getstared-content {
padding-left: 0px;
margin-top: 0px;
padding-right: 0px;
}
.section-dashboard-right {
margin: 0;
}
.section-dashboard-right .section-learn {
padding: 15px;
}
.section-dashboard-right .section-icons .icons-items {
flex-direction: column;
}
.section-dashboard-right .section-icons .icons-items .icons-box {
width: 100%;
height: 150px;
}
.section-right {
margin: 0;
}
.page-title.style-10 {
margin: 0;
border-radius: 0;
padding: 0px;
}
.page-title.style-9 {
padding: 40px 0px;
}
.instructors-dashboard {
display: none;
}
.col-3 {
display: none;
}
.mobi-instructors-dashboard {
opacity: 1;
}
}
@media (max-width: 991px) {
.table-selling-course {
width: 88vw;
}
.table-order {
width: 88vw;
}
.table-box-1 {
width: 88vw;
}
.table-box-2 {
width: 88vw;
}
}
@media (max-width: 767px) {
.page-title.style-9 .content .author-item .author-item-img img {
height: 80px;
width: 80px;
}
.section-right {
padding: 15px;
}
.section-right .course-item img {
height: auto;
}
.wg-progress-bars .progess-bars-item {
margin-left: 0;
}
.wg-progress-bars .progess-bars-item .progress-bars {
width: 90vw;
}
.range-slider {
width: 90vw;
margin-left: 0;
}
.button-items {
flex-direction: column;
}
.section-get-started.style6 .getstared-image {
padding-right: 0px;
}
.section-get-started .row {
flex-direction: column;
gap: 10px;
}
.tf-accordion-style-3 .tf-accordion-button {
width: 50%;
}
.tf-accordion-style-3 .tf-accordion-button .text {
width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.widget-saying .widget-saying-button {
display: none;
}
.list-style-v3,
.list-style-v6 {
padding: 40px 0 40px;
}
.page-title .breadcrumbs {
margin-bottom: 20px !important;
}
}
@media (max-width: 550px) {
.section-add-course-right .style-secondary {
padding: 10px;
}
.section-add-course-right {
width: 90vw;
}
.section-add-course-right .tf-btn {
padding: 10px;
}
}
@media (max-width: 1150px) {
.tf-mobile-sidebar-btn {
display: block;
}
.tf-sidebar.course {
display: none;
}
}
@media (max-width: 991px) {
.page-title-home2 .wrap-brand .slide-brand::before {
display: none;
}
.section-categories .wrap-icon-box {
margin-bottom: 30px;
}
.section-video-box .content {
margin-bottom: 30px;
}
.section-icon .wrap-icon-box {
flex-wrap: wrap;
gap: 30px;
}
.grid-list-items-3,
.grid-list-items-4,
.grid-layout-4,
.grid-list-items-5,
.grid-layout-5 {
grid-template-columns: repeat(2, 1fr);
}
.top-wrapper {
flex-direction: column;
align-items: flex-start;
}
.top-wrapper .group-filter {
margin-bottom: 20px;
width: 100%;
}
.top-wrapper .group-filter .nice-select {
width: 100%;
}
.top-wrapper .group-filter .nice-select .list {
width: 100%;
}
.top-wrapper .group-filter form {
width: 100% !important;
}
.flat-about {
padding-top: 40px;
padding-bottom: 30px;
}
.section-why.page-about .icons-box, .section-why.page-contact .icons-box {
margin-bottom: 30px;
}
.section-vison .content {
padding: 30px 0 0 0;
}
.section-vison.page-about,
.section-counter.page-about,
.widget-saying.page-about,
.section-instructor.page-about,
.section-logo.page-about {
padding: 40px 0;
}
.section-start-banner .heading-section {
margin-bottom: 30px !important;
}
.section-items.page-help .wrap-icons-box {
grid-template-columns: repeat(2, 1fr);
gap: 20px 20px;
}
.sort-by-wrap {
width: 100%;
}
.sort-by-wrap .sort-wrap {
justify-content: space-between;
}
.section-instructor .instructors-item .image-wrap {
width: 100%;
}
.section-top-course.page-become-teacher .content {
max-width: 100%;
margin: 0 0 20px 0;
}
.top-wrapper.page-event .nice-select.default .list, .top-wrapper.page-instructor .nice-select.default .list {
left: 0;
}
.section-why.page-contact .icons-box {
margin-bottom: 40px;
}
.contact-wrap .img-left {
height: auto;
}
.section-vison.page-about .images {
max-width: 100%;
height: 100%;
}
}
@media (max-width: 767px) {
.login-wrap .img-left .blockquite, .contact-wrap .img-left .blockquite {
padding: 20px 0px 20px 30px;
}
.course-item.style-row .features {
max-width: 100%;
height: auto;
}
.page-title.style-2 {
padding: 40px 0;
}
.page-title.style-3 {
margin-top: 30px;
}
.section-start-banner .main-section {
padding: 30px;
}
.section-items.page-help .wrap-icons-box {
grid-template-columns: repeat(1, 1fr);
gap: 20px;
}
}
@media (max-width: 550px) {
.grid-list-items-3,
.grid-list-items-4,
.grid-layout-4,
.grid-list-items-5,
.grid-layout-5 {
grid-template-columns: repeat(1, 1fr);
}
.section-categories-instructors,
.section-categories-topics,
.section-categories-course {
padding-bottom: 30px;
}
.section-counter.page-become-teacher .wrap-couter {
padding: 20px;
}
.section-become-instructor .main-section {
padding: 30px;
}
}
@media (max-width: 375px) {
.sort-by-wrap .sort-wrap {
gap: 10px !important;
}
}
@media (max-width: 410px) {
.sort-by-wrap {
margin-top: 10px;
}
.sort-by-wrap .text-2 {
padding-left: 0px;
}
.sort-by-wrap .nice-select.default .list {
left: 0;
}
}
.gmap_canvas {
height: 500px;
}
.gmap_canvas iframe {
width: 100%;
height: 100%;
object-fit: cover;
}
.form-checkout.type2 input{
background-color: #c9e3e0 !important;
}
.form-checkout.type2 textarea{
background-color: #c9e3e0 !important;
}
.form-checkout.type2 select{
background-color: #c9e3e0 !important;
}
.form-checkout.type2 .tf-select-label.focused .select-label{
background-color: #c9e3e0 !important;
}
select.select {
border-bottom: 2px solid #585d69 !important;
width: 100%;
border: none;
margin-top: 15px;
}
.form-control:focus {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border-color: #86b7fe00;
outline: 0;
box-shadow: none !important;
}
.ml-main {display: flex;justify-content: space-between;}
.ml-left {width: 50%;}
.ml-right {width: 50%;padding: 20px;position: relative;}
.ml-left img {width: 100%;object-fit: cover;height: 100%;}
.ml-btn {position: absolute;right: 10px;top: 10px;}
#brochureForm .modal-body input {border: none !important;border-bottom: 1px solid #000 !important;border-radius: 0 !important;padding: 10px 0 !important;}
#brochureForm textarea {border: none !important;border-bottom: 1px solid #000 !important;border-radius: 0 !important;resize: none;padding: 10px 0;}
#brochureForm .modal-body button {background: #1c8a7c; padding: 10px 20px;font-size: 14px;margin-top: 18px;border-color: #1c8a7c;}
.ml-right h2 {font-size: 22px;line-height: 1.2;font-weight: 500;margin-bottom: 10px;color: #1c8a7c;}
.ml-right p {font-size: 15px;line-height: 1.3;color: #6c757d;}
.section-page-terms .content h3 {font-size: 26px;font-weight: 500;margin: 20px 0;}
.section-page-terms .content h4 {font-size: 26px;font-weight: 500;margin: 20px 0;}
.section-page-terms .content p {font-size: 17px;line-height: 1.5;}
.section-page-terms .content ul li {font-size: 17px;padding-left: 20px;position: relative;}
.section-page-terms .content p+p {margin-top: 15px;}
.section-page-terms .content ul li:after {content: '.';position: absolute;left: 0;font-size: 45px;top: -12px;}
#logo-header {width:220px !important;}
table, th, td {border: 1px solid #fff !important;}
.course-table th {background-color: #1c8a7c;color: #fff;padding: 15px;text-align: left;font-weight: 400;font-size: 19px;}
.course-table td {padding: 12px 15px;}
.course-table tr:last-child td {border-bottom: none;}
.course-table .course-name {font-weight: 600;color: #2c3e50;font-size: 17px;}
.course-table .price {font-weight: 700;color: #1c8a7c;font-size: 18px;}
.course-table .duration {color: #7f8c8d;font-size: 16px;}
.course-table .description {font-size: 16px;color: #555;}
@media (max-width: 991px) {
#logo-header {width:160px !important;}
#header_main .header-inner .header-inner-wrap{gap:15px;}
.ml-main {flex-direction: column;}
.ml-left {width: 100%;}
.ml-right { width: 100%;}
.ml-right h2 {font-size: 20px !important;margin-bottom: 0px !important;}
.ml-right form .modal-body {padding: 0 !important;}
}