/*-----------------------------------------------------------------------------------

    Template Name: PuneUni
    Author: PuneUni

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

	-----------------
    01. THEME CSS
	-----------------
		1.1 Theme Default
		1.2 Common Classes
		1.3 Default Spacing

	-----------------
    02. COMPONENTS css
	-----------------
		2.1 Back to top
		2.2 Theme Settings
		2.3 Buttons
		2.4 Animations
		2.5 Preloader
		2.6 Background 
		2.7 Carousel
		2.8 Nice Select
		2.9 Pagination
		2.10 Offcanvas
		2.11 Breadcrumb
		2.12 Accordion
		2.13 Tab
		2.14 Modal
		2.15 Section Title
		2.16 Ragne Slider
		2.17 Select 2
		2.18 Flatpicker
		2.19 Search
	-----------------
    03. HEADER CSS
	-----------------
		3.1 Header Style 1

    ---------------------------------
	04. MENU CSS
	---------------------------------
		4.1 Main menu css
		4.2 Mobile css

	---------------------------------
	05. BLOG CSS
	---------------------------------
		5.1 Postbox css
		5.2 Recent Post css
		5.3 Sidebar css
		5.4 Blog css

	---------------------------------
	06. FOOTER CSS
	---------------------------------
		6.1 Footer Style 1

	---------------------------------
	07. PAGES CSS
	---------------------------------
		7.1 Hero css
		7.2 About css
		7.3 Instragram css
		7.4 Cta css
		7.5 Contact css
		7.6 Contact css
		7.7 Counter css
		7.8 Service css
		7.9 Program css
		8.0 Testimonial css
		8.1 Video css
		8.2 Event css
		8.3 Category css
		8.4 Funfact css
		8.5 Course css
		8.6 Banner css
		8.7 Brand css
		8.8 Team css
		8.9 Process css
		9.0 Slider css
		9.1 Price css
		9.2 Faq css
		9.3 Comming soon css
		9.4 login-register css
		9.5 Mission css
		9.6 campus css
		9.7 leadership css
		9.8 Become instractor
		9.9 History css
		10.0 Admission css
		10.1 Financial css
		10.2 shop css
		10.3 My Account css
		10.4 Cart css


**********************************************/

/*----------------------------------------*/

/*  1.1 Theme Default
/*----------------------------------------*/




@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Outfit:wght@300;400;500;600;700;800&family=Manrope:wght@200..800&display=swap");


@font-face {
    font-family: poppins1;
    src: url(../fonts/Poppins-Black.ttf);
}

@font-face {
    font-family: poppins2;
    src: url(../fonts/Poppins-Bold.ttf);
}

@font-face {
    font-family: poppins3;
    src: url(../fonts/Poppins-ExtraBold.ttf);
}

@font-face {
    font-family: poppins4;
    src: url(../fonts/Poppins-ExtraLight.ttf);
}

@font-face {
    font-family: poppins5;
    src: url(../fonts/Poppins-Light.ttf);
}

@font-face {
    font-family: poppins6;
    src: url(../fonts/Poppins-Medium.ttf);
}

@font-face {
    font-family: poppins7;
    src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
    font-family: poppins8;
    src: url(../fonts/Poppins-SemiBold.ttf);
}

@font-face {
    font-family: poppins9;
    src: url(../fonts/Poppins-Thin.ttf);
}




.tp-cart-checkout-shipping-option label::after,
.tp-cart-checkout-shipping-option label::before,
.tp-return-customer-forgot a::after,
.profile__tab .tp-tab-line,
.profile__main-thumb-edit label,
.tp-profile-input-eye span,
.tp-shop-widget-categories ul li a::after,
.tp-shop-widget-categories ul li a span,
.tp-product-details-review-input-eye span,
.tp-product-details-tab-line,
.tp-postbox-share button span,
.tp-product-tab-2 .nav-tabs .nav-link .tp-product-tab-tooltip,
.tp-tab-line {
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-accordion .accordion-button .tp-accordion-plus,
.tp-accordion .accordion-button .tp-accordion-plus::after,
.tp-accordion .accordion-button .tp-accordion-plus::before,
.back-to-top-wrapper,
a,
button,
p,
input,
select,
textarea,
li,
.transition-3 {
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.back-to-top-btn {
    -webkit-transition: transform 0.3s 0s ease-out;
    -moz-transition: transform 0.3s 0s ease-out;
    -ms-transition: transform 0.3s 0s ease-out;
    -o-transition: transform 0.3s 0s ease-out;
    transition: transform 0.3s 0s ease-out;
}

.tp-product-details-views>span svg,
.tp-pricing-5-list ul li span svg,
.tp-course-4-info-item>span>span svg,
.tp-blog-meta>span>span svg,
.tp-btn span {
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    -o-transform: translateY(-1px);
    transform: translateY(-1px);
}

.tpd-action-approv button svg,
.tp-cart-list tr td .tp-cart-action-btn svg,
.tp-order-details-icon span svg,
.tp-product-details-action-sm-btn svg,
.tp-product-details-wishlist-btn svg,
.tp-process-3-btn a svg,
.tp-event-4-content span img,
.tp-footer-4-top-btn span svg,
.tp-header-2-category p span img,
.tp-header-2-login button span svg,
.tp-header-4-btn-top a span svg,
.tp-header-4-btn-top a i svg,
.tp-header-4-search span svg,
.tp-pagination ul li a svg,
.tp-pagination ul li span svg {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

.tpd-order-date-input form span svg,
.tpd-action-btn button svg,
.tpd-action-btn a svg,
.tpd-action-click-tooltip button span svg,
.tpd-status button svg,
.tpd-status-complete button svg {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
}

.tp-footer-2 .tp-footer-widget-content>p,
.tp-footer-2 .tp-footer-widget-content>span,
.tp-footer-2 .tp-footer-widget-link ul li a,
.tp-footer-2 .tp-footer-contact>span,
.tp-footer-2 .tp-footer-contact>a,
.tp-footer-2 .tp-footer-contact-mail>a,
.tp-footer-2 .tp-footer-copyright span,
.tp-footer-3 .tp-footer-widget-content p,
.tp-footer-3 .tp-footer-widget-title,
.tp-footer-3 .tp-footer-widget ul li a,
.tp-footer-3 .tp-footer-newsletter-wrap p,
.tp-footer-3 .tp-footer-contact>span,
.tp-footer-3 .tp-footer-contact>a,
.tp-footer-3 .tp-footer-contact-mail a,
.tp-footer-3 .tp-footer-copyright span {
    font-family: var(--tp-ff-body);
}

.tp-program-wrap .tp-section-title,
.tp-footer-widget-content p,
.tp-footer-widget-title,
.tp-footer-widget ul li a,
.tp-footer-contact>span,
.tp-footer-contact>a,
.tp-footer-contact-mail a,
.tp-footer-copyright span {
    font-family: var(--tp-ff-primary);
}

.tp-banner-5-content span,
.tp-event-list-count,
.tp-counter-count,
.tp-counter-4-count,
.tp-about-exprience-text p,
.tp-about-exprience-count,
.tp-hero-subtitle,
.tp-section-subtitle {
    font-family: var(--tp-ff-secondary);
}

/* transform */

.tp-product-tab-2 .nav-tabs .nav-link:not(:first-child)::after,
.tp-breadcrumb__list span:not(:last-child)::after {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

:root {
    /**
  @font family declaration
  */
    font-family: poppins8;
    /**
  @color declaration
  */
    --tp-common-white: #ffffff;
    --tp-common-black: #000;
    --tp-common-black-1: #010F1C;
    --tp-grey-1: #F6F4EE;
    --tp-grey-2: #84807B;
    --tp-grey-3: #55585B;
    --tp-grey-4: #EFEDE7;
    --tp-grey-5: #636366;
    --tp-grey-6: #4F5158;
    --tp-red-1: #AF0E2E;
    --tp-red-2: #C41230;
    --tp-red-3: #B70A14;
    --tp-blue-1: #F1F3F9;
    --tp-heading-primary: #161613;
    --tp-heading-2: #031F42;
    --tp-heading-3: #0A1D3A;
    --tp-heading-4: #161821;
    --tp-text-body: #57595F;
    --tp-theme-primary: #AB0C2F;
    --tp-theme-secondary: #1A73E8;
    --tp-theme-3: #FF7162;
    --tp-theme-4: #B1040E;
    --tp-theme-5: #F0EC51;
    --tp-theme-6: #1E1E2F;
    --tp-theme-7: #4661FD;
    --tp-theme-8: #006B61;
    --tp-theme-9: #5956E9;
    --tp-dashboard-primary: #556DF5;
    --tp-dashboard-secondary: #5169F1;
    --tp-dashboard-3: #5B7D55;
    --tp-dashboard-danger: #FF4D4F;
    --tp-dashboard-sucess: #0F9F55;
    --tp-dashboard-warning: #F59B12;
    --tp-dashboard-info: #5974FF;
    --tp-border-primary: #EAEBED;
    --tp-border-2: #E4E2DC;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*---------------------------------
	typography css start 
---------------------------------*/

body {
    font-family: var(--tp-ff-body);
    font-size: 14px;
    font-weight: normal;
    color: var(--tp-text-body);
    line-height: 26px;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--tp-ff-heading);
    color: var(--tp-heading-primary);
    margin-top: 0px;
    font-weight: 600;
    line-height: 1.2;
    -webkit-transition: color 0.3s 0s ease-out;
    -moz-transition: color 0.3s 0s ease-out;
    -ms-transition: color 0.3s 0s ease-out;
    -o-transition: color 0.3s 0s ease-out;
    transition: color 0.3s 0s ease-out;
    letter-spacing: 1.2px;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 33px;
}

h3 {
    font-size: 28px;
    font-family: 'poppins2';
    letter-spacing: 1px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 21px;
    font-family: 'poppins7';
    letter-spacing: 1px;
    /* font-weight: bold !important; */
}

strong {
    font-family: 'poppins2';
}

h6 {
    font-size: 16px;
}

ul {
    margin: 0px;
    padding: 0px;
    font-family: poppins7;
}

p {
    font-family: poppins6;
    font-size: 13px;
    font-weight: 400;
    color: var(--tp-text-body);
    margin-bottom: 0;
    line-height: normal;
    letter-spacing: 0.5px;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

a:focus,
a:hover {
    color: inherit;
    text-decoration: none;
}

a,
button {
    color: inherit;
    outline: none;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

button:focus {
    outline: 0;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

/* input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=url],
textarea {
    outline: none;
    background-color: #fff;
    height: 54px;
    width: 100%;
    line-height: 56px;
    font-size: 14px;
    color: var(--tp-common-black);
    padding-left: 24px;
    padding-right: 24px;
    border: 1px solid #E4E2DC;
} */

input[type=text]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #95999D;
}

input[type=text]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=url]::-moz-placeholder,
textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: #95999D;
}

input[type=text]:-moz-placeholder,
input[type=email]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=number]:-moz-placeholder,
input[type=password]:-moz-placeholder,
input[type=url]:-moz-placeholder,
textarea:-moz-placeholder {
    /* Firefox 4-18 */
    color: #95999D;
}

input[type=text]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    /* IE 10+  Edge*/
    color: #95999D;
}

input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=url]::placeholder,
textarea::placeholder {
    /* MODERN BROWSER */
    color: #95999D;
}

[dir=rtl] input[type=text],
[dir=rtl] input[type=email],
[dir=rtl] input[type=tel],
[dir=rtl] input[type=number],
[dir=rtl] input[type=password],
[dir=rtl] input[type=url],
[dir=rtl] textarea {
    text-align: right;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=url]:focus,
textarea:focus {
    border-color: var(--tp-theme-primary);
}

input[type=text]:focus::placeholder,
input[type=email]:focus::placeholder,
input[type=tel]:focus::placeholder,
input[type=number]:focus::placeholder,
input[type=password]:focus::placeholder,
input[type=url]:focus::placeholder,
textarea:focus::placeholder {
    opacity: 0;
}

textarea {
    line-height: 1.4;
    padding-top: 17px;
    padding-bottom: 17px;
}

input[type=color] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 50%;
}

*::-moz-selection {
    background: var(--tp-common-black);
    color: var(--tp-common-white);
    text-shadow: none;
}

::-moz-selection {
    background: var(--tp-common-black);
    color: var(--tp-common-white);
    text-shadow: none;
}

::selection {
    background: var(--tp-common-black);
    color: var(--tp-common-white);
    text-shadow: none;
}

*::-moz-placeholder {
    color: var(--tp-common-black);
    font-size: 14px;
    opacity: 1;
}

*::placeholder {
    color: var(--tp-common-black);
    font-size: 14px;
    opacity: 1;
}

@media (min-width: 1400px) {
    .custom-container {
        max-width: 1424px;
    }
}

@media (min-width: 1400px) {
    .custom-container-larg {
        max-width: 1744px;
    }
}

@media (min-width: 1400px) {
    .custom-container-1300 {
        max-width: 1324px;
    }
}

.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

.z-index-3 {
    z-index: 3;
}

.z-index-4 {
    z-index: 4;
}

.z-index-5 {
    z-index: 5;
}

.z-index-6 {
    z-index: 6;
}

.z-index-7 {
    z-index: 7;
}

.z-index-8 {
    z-index: 8;
}

.z-index-9 {
    z-index: 9;
}

/*---------------------------------
    1.2 Common Classes
---------------------------------*/

.w-img img {
    width: 100%;
}

.m-img img {
    max-width: 100%;
}

.fix {
    overflow: hidden;
}

.clear {
    clear: both;
}

.z-index-1 {
    z-index: 1;
}

.z-index-11 {
    z-index: 11;
}

.overflow-y-visible {
    overflow-x: hidden;
    overflow-y: visible;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.include-bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* .tp-header-logo img {
    width: 125px;
} */

.demo {
    -webkit-transition: color 0.3s 0s linear;
    -moz-transition: color 0.3s 0s linear;
    -ms-transition: color 0.3s 0s linear;
    -o-transition: color 0.3s 0s linear;
    transition: color 0.3s 0s linear;
    -webkit-transition: color 0.3s linear, transform 0.2s ease;
    -moz-transition: color 0.3s linear, transform 0.2s ease;
    -ms-transition: color 0.3s linear, transform 0.2s ease;
    -o-transition: color 0.3s linear, transform 0.2s ease;
    transition: color 0.3s linear, transform 0.2s ease;
}

[dir=rtl] .demo {
    margin-left: 0;
    margin-right: 15px;
}

div.demo img {
    margin-left: 10px;
}

[tp-theme=tp-theme-dark] .demo {
    color: yellow;
}

/*----------------------------------------
    Body Overlay 
-----------------------------------------*/

.body-overlay {
    background-color: var(--tp-common-black);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.body-overlay:hover {
    cursor: url("../img/icon/cross-out.png"), pointer;
}

.body-overlay.opened {
    opacity: 0.7;
    visibility: visible;
}

.tp-product-quantity {
    width: 148px;
    position: relative;
}

.tp-product-quantity.cart {
    width: 100px;
}

.tp-product-quantity.cart .tp-cart-plus:hover,
.tp-product-quantity.cart .tp-cart-minus:hover {
    color: var(--tp-theme-8);
}

.tp-cart-plus,
.tp-cart-minus {
    width: 45px;
    height: 44px;
    line-height: 44px;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    color: var(--tp-common-black);
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.tp-cart-plus svg,
.tp-cart-minus svg {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

.tp-cart-plus:hover,
.tp-cart-minus:hover {
    cursor: pointer;
    color: var(--tp-theme-primary);
}

.tp-cart-plus.tp-cart-plus,
.tp-cart-minus.tp-cart-plus {
    left: auto;
    right: 0;
}

.tp-cart-plus.tp-cart-plus::after,
.tp-cart-minus.tp-cart-plus::after {
    left: 0;
    right: auto;
}

.tp-cart-input[type=text] {
    height: 34px;
    text-align: center;
    font-size: 14px;
    padding: 0 30px;
    width: 100px;
    border-radius: 20px;
    border: 1px solid #DADCE0;
    background-color: var(--tp-common-white);
}

/* dropcap */

.tp-dropcap::first-letter {
    font-size: 90px;
    font-weight: 500;
    float: left;
    text-align: center;
    color: var(--tp-common-black);
    margin-right: 5px;
    line-height: inherit;
    text-transform: capitalize;
}

.table> :not(caption)>*>* {
    background-color: transparent;
}

.class {
    stroke-dasharray: 189px, 191px;
    stroke-dashoffset: 0px;
}

/* gutter for x axis */

.tp-gx-10 {
    --bs-gutter-x: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-gx-10 {
        --bs-gutter-x: 10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-gx-10 {
        --bs-gutter-x: 10px;
    }
    
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-gx-10 {
        --bs-gutter-x: 5px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-gx-10 {
        --bs-gutter-x: 5px;
    }
}

.tp-gx-10 [class*=col-] {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

.tp-gx-20 {
    --bs-gutter-x: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-gx-20 {
        --bs-gutter-x: 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-gx-20 {
        --bs-gutter-x: 20px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-gx-20 {
        --bs-gutter-x: 15px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-gx-20 {
        --bs-gutter-x: 10px;
    }
}

.tp-gx-20 [class*=col-] {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

/* gutter for x axis */

.tp-gx-30 {
    --bs-gutter-x: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-gx-30 {
        --bs-gutter-x: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-gx-30 {
        --bs-gutter-x: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-gx-30 {
        --bs-gutter-x: 15px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-gx-30 {
        --bs-gutter-x: 10px;
    }
}

.tp-gx-30 [class*=col-] {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

/* gutter for x axis */

.tp-gx-50 {
    --bs-gutter-x: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-gx-50 {
        --bs-gutter-x: 50px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-gx-50 {
        --bs-gutter-x: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-gx-50 {
        --bs-gutter-x: 15px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-gx-50 {
        --bs-gutter-x: 10px;
    }
}

.tp-gx-50 [class*=col-] {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

/* gutter for x axis */

.tp-gx-90 {
    --bs-gutter-x: 90px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-gx-90 {
        --bs-gutter-x: 50px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-gx-90 {
        --bs-gutter-x: 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-gx-90 {
        --bs-gutter-x: 25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-gx-90 {
        --bs-gutter-x: 25px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-gx-90 {
        --bs-gutter-x: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-gx-90 {
        --bs-gutter-x: 10px;
    }
}

.tp-gx-90 [class*=col-] {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

/* gutter for x axis */

.tp-gx-60 {
    --bs-gutter-x: 60px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-gx-60 {
        --bs-gutter-x: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-gx-60 {
        --bs-gutter-x: 15px;
    }
}

/*---------------------------------
    1.3 Default Spacing
---------------------------------*/

.tp-categroy-plr-85 {
    padding-left: 85px;
    padding-right: 85px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-categroy-plr-85 {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/*----------------------------------------*/

/*  2.1 Back to top
/*----------------------------------------*/

.back-to-top-wrapper {
    position: fixed;
    right: 20px;
    bottom: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: block;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    border-radius: 50%;
}

@media only screen and (max-width: 767px) {
    .back-to-top-wrapper {
        right: 20px;
        bottom: 20px;
    }
}

.back-to-top-wrapper.back-to-top-btn-show {
    visibility: visible;
    opacity: 1;
    bottom: 50px;
}

.back-to-top-btn {
    display: inline-block;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: var(--tp-common-black);
    box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3);
    color: var(--tp-common-white);
    border-radius: 50%;
}

.back-to-top-btn svg {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

.back-to-top-btn:hover {
    -webkit-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    -o-transform: translateY(-4px);
    transform: translateY(-4px);
}

/*----------------------------------------*/

/*  2.2 Theme Settings
/*----------------------------------------*/

/*----------------------------------------*/

/*  2.3 Buttons
/*----------------------------------------*/

.tp-btn {
    color: var(--tp-common-white);
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
    padding: 13px 34px;
    border-radius: 6px;
    border: 2px solid var(--tp-theme-primary);
    background-color: var(--tp-theme-primary);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-btn:hover {
    box-shadow: 0 10px 15px -5px rgba(21, 36, 34, 0.1);
    color: var(--tp-common-white);
    background-color: #880824;
    border-color: #880824;
}

.tp-btn span {
    display: inline-block;
    margin-left: 5px;
    transform: translateY(-1px);
}

.tp-btn-sm {
    padding: 13px 35px;
}

.tp-btn-2 {
    display: inline-block;
    color: var(--tp-heading-2);
    font-size: 15px;
    font-weight: 500;
    border-radius: 100px;
    background: #FFC221;
    padding: 8px 31px;
    border: 2px solid #FFC221;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-btn-2:hover {
    background-color: transparent;
    border-color: var(--tp-heading-2);
    color: var(--tp-heading-2);
}

.tp-btn-3 {
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
    padding: 9px 32px;
    border-radius: 6px;
    color: var(--tp-common-white);
    background-color: var(--tp-theme-primary);
    transition: all 0.25s ease-in-out;
}

.tp-btn-3:hover {
    color: var(--tp-common-white);
    box-shadow: 0 0 0 0.2rem #AB0C2F !important;
}

.tp-btn-4 {
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    padding: 23px 41px;
    line-height: 1;
    display: inline-block;
    letter-spacing: 0.56px;
    text-transform: uppercase;
    color: var(--tp-heading-primary);
    background-color: var(--tp-theme-5);
    transition: all 0.25s ease-in-out;
}

.tp-btn-4:hover {
    color: var(--tp-heading-primary);
    box-shadow: 0 0 0 0.2rem var(--tp-theme-5) !important;
}

.tp-btn-5 {
    padding: 15px 37px;
    display: inline-block;
    color: var(--tp-common-white);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-btn-5:hover {
    border-color: var(--tp-common-white);
    color: var(--tp-common-white);
}

.tp-btn-white {
    font-size: 14px;
    font-weight: 600;
    border-radius: 7px;
    padding: 15px 45px;
    display: inline-block;
    letter-spacing: 0.56px;
    text-transform: uppercase;
    color: var(--tp-common-white);
    border: 2px solid var(--tp-common-white);
}

.tp-btn-white:hover {
    color: var(--tp-heading-primary);
    background-color: var(--tp-common-white);
}

.tp-btn-border {
    padding: 15px 32px;
    border-radius: 50px;
    background: var(--tp-theme-secondary);
    color: var(--tp-common-white);
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    border: 2px solid var(--tp-theme-secondary);
}

.tp-btn-border span {
    display: inline-block;
    margin-left: 3px;
}

.tp-btn-border:hover {
    background-color: transparent;
    color: var(--tp-theme-secondary);
}

.tp-btn-round {
    display: inline-block;
    line-height: 1;
    padding: 12px 28px;
    background-color: var(--tp-theme-secondary);
    font-size: 16px;
    font-weight: 600;
    color: var(--tp-common-white);
    border-radius: 50px;
    border: 2px solid var(--tp-theme-secondary);
}

.tp-btn-round:hover {
    background-color: transparent;
    color: var(--tp-theme-secondary);
}

.tp-btn-round span {
    display: inline-block;
    margin-left: 6px;
}

.tp-btn-round svg {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

.tp-btn-round.color-9 {
    border-color: var(--tp-theme-9);
    background-color: var(--tp-theme-9);
}

.tp-btn-round.color-9:hover {
    color: var(--tp-theme-9);
    background-color: transparent;
}

.tp-btn-circle {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border-radius: 50%;
    padding: 44px 31px;
    display: inline-block;
    background-color: #B1040E;
    color: var(--tp-common-white);
}

.tp-btn-circle span {
    display: block;
}

.tp-btn-circle:hover {
    color: var(--tp-common-white);
    background-color: #880824;
    border-color: #880824;
    box-shadow: 0 10px 15px -5px rgba(21, 36, 34, 0.1);
}

.tp-btn-circle:focus {
    color: var(--tp-common-white);
}

.tp-btn-tomato {
    font-size: 16px;
    font-weight: 600;
    border-radius: 18px;
    padding: 11px 28px;
    color: var(--tp-common-white);
    background-color: var(--tp-theme-3);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tp-btn-tomato:hover {
    color: var(--tp-common-white);
    background-color: var(--tp-common-black);
}

.tp-btn-inner {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    padding: 7px 24px;
    color: var(--tp-common-white);
    background-color: var(--tp-dashboard-secondary);
    box-shadow: 0px 1px 2px 0px rgba(20, 56, 181, 0.25), 0px 0px 1px 0px #1438B5;
}

.tp-btn-inner:hover {
    box-shadow: none;
    background: #425EFF;
    color: var(--tp-common-white);
}

.tp-btn-inner:focus {
    color: var(--tp-common-white);
}

/* offcanvas btn */



/*----------------------------------------*/

/*  2.4 Animations
/*----------------------------------------*/

/* pulse effect animation */

@-webkit-keyframes tp-pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }

    70% {
        -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@-moz-keyframes tp-pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }

    70% {
        -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@-ms-keyframes tp-pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }

    70% {
        -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes tp-pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }

    70% {
        -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes icon-bounce {

    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    60% {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}

.video-border-animation {
    position: relative;
}

.video-border-animation::after {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    width: 90%;
    height: 90%;
    transform: scale(1);
    border: 1px solid var(--tp-common-white);
    animation: video-border 1.5s linear infinite;
    border-radius: 50%;
}

@keyframes tp-rotate-video-text {
    from {
        transform: rotate(-45deg);
    }

    to {
        transform: rotate(315deg);
    }
}

@keyframes section-animation {
    0% {
        max-width: 0;
    }

    15% {
        max-width: 100%;
    }

    85% {
        opacity: 1;
    }

    90% {
        max-width: 100%;
        opacity: 0;
    }

    to {
        max-width: 0;
        opacity: 0;
    }
}

@keyframes tfLeftToRight {
    49% {
        transform: translateX(30%);
    }

    50% {
        opacity: 0;
        transform: translateX(-30%);
    }

    100% {
        opacity: 1;
    }
}

@keyframes hero-dot-1 {
    0% {
        transform: translateY(-80px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes hero-dot-2 {
    0% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(0px);
    }
}

@-webkit-keyframes video-border {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@-moz-keyframes video-border {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@-ms-keyframes video-border {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@keyframes video-border {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@-webkit-keyframes light {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
        color: white;
    }
}

@-moz-keyframes light {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
        color: white;
    }
}

@-ms-keyframes light {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
        color: white;
    }
}

@keyframes light {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
        color: white;
    }
}

@-webkit-keyframes neptune {
    0% {
        transform: translate(0px, 0px);
    }

    20% {
        transform: translate(20px, -5px);
    }

    40% {
        transform: translate(50px, 20px);
    }

    60% {
        transform: translate(20px, 50px);
    }

    80% {
        transform: translate(-20px, 30px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@-moz-keyframes neptune {
    0% {
        transform: translate(0px, 0px);
    }

    20% {
        transform: translate(20px, -5px);
    }

    40% {
        transform: translate(50px, 20px);
    }

    60% {
        transform: translate(20px, 50px);
    }

    80% {
        transform: translate(-20px, 30px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@-ms-keyframes neptune {
    0% {
        transform: translate(0px, 0px);
    }

    20% {
        transform: translate(20px, -5px);
    }

    40% {
        transform: translate(50px, 20px);
    }

    60% {
        transform: translate(20px, 50px);
    }

    80% {
        transform: translate(-20px, 30px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes neptune {
    0% {
        transform: translate(0px, 0px);
    }

    20% {
        transform: translate(20px, -5px);
    }

    40% {
        transform: translate(50px, 20px);
    }

    60% {
        transform: translate(20px, 50px);
    }

    80% {
        transform: translate(-20px, 30px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes a {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@-moz-keyframes a {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@-ms-keyframes a {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@keyframes a {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@-webkit-keyframes scroll-1 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@keyframes scroll-1 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@-moz-keyframes headerSlideDown {
    0% {
        margin-top: -150px;
    }

    100% {
        margin-top: 0;
    }
}

@-ms-keyframes headerSlideDown {
    0% {
        margin-top: -150px;
    }

    100% {
        margin-top: 0;
    }
}

@-webkit-keyframes headerSlideDown {
    0% {
        margin-top: -150px;
    }

    100% {
        margin-top: 0;
    }
}

@keyframes headerSlideDown {
    0% {
        margin-top: -150px;
    }

    100% {
        margin-top: 0;
    }
}

@-moz-keyframes headerSlideUp {
    0% {
        margin-top: 0;
    }

    100% {
        margin-top: -150px;
    }
}

@-ms-keyframes headerSlideUp {
    0% {
        margin-top: 0;
    }

    100% {
        margin-top: -150px;
    }
}

@-webkit-keyframes headerSlideUp {
    0% {
        margin-top: 0;
    }

    100% {
        margin-top: -150px;
    }
}

@keyframes headerSlideUp {
    0% {
        margin-top: 0;
    }

    100% {
        margin-top: -150px;
    }
}

@keyframes section_stroke {
    0% {
        stroke-dashoffset: 560;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes shine {
    100% {
        left: -200%;
    }
}

.line-dash-path {
    stroke-dasharray: 4;
    stroke-dashoffset: 350;
    -webkit-animation: tp-line-dash 30s linear forwards infinite;
    animation: tp-line-dash 30s linear forwards infinite;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-name: gradients;
    background: linear-gradient(45deg, #DF7BD2, #09B1AB, #DF7BD2, #FDBF62);
}

@keyframes tp-line-dash {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: 0px;
        stroke-dasharray: 3000;
    }
}

@keyframes gradients {
    0% {
        background-position: 0 0;
    }

    25% {
        background-position: 50% 0;
    }

    50% {
        background-position: 90% 0;
    }

    60% {
        background-position: 60%;
    }

    75% {
        background-position: 40%;
    }

    100% {
        background-position: 0 0;
    }
}

@keyframes tpswing {
    0% {
        transform: rotate(3deg);
    }

    100% {
        transform: rotate(-3deg);
    }
}

@-webkit-keyframes tpswing {
    0% {
        transform: rotate(3deg);
    }

    100% {
        transform: rotate(-3deg);
    }
}

@keyframes tpswings {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-20px) rotate(-10deg);
    }
}

@keyframes hero-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

/* 01. ========= Ball shape animation ========== */

@keyframes bannerAnimationTwo {
    0% {
        transform: translate(0px, 0px);
    }

    20% {
        transform: translate(450px, 0px);
    }

    40% {
        transform: translate(450px, -20px);
    }

    60% {
        transform: translate(250px, -20px);
    }

    80% {
        transform: translate(50px, -10px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes spin {
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes spin {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes img-border {
    0% {
        -webkit-border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
        -moz-border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
        border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
    }

    100% {
        -webkit-border-radius: 30% 70% 28% 72%/53% 69% 31% 47%;
        -moz-border-radius: 30% 70% 28% 72%/53% 69% 31% 47%;
        border-radius: 30% 70% 28% 72%/53% 69% 31% 47%;
    }
}

@keyframes radiusChange {
    0% {
        border-radius: 0px 0px 0px 0px;
    }

    40% {
        border-radius: 50px 0px 80px 0px;
    }

    80% {
        border-radius: 0px 50px 0px 80px;
    }

    100% {
        border-radius: 0px 0px 0px 0px;
    }
}

@keyframes tpupdown {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@keyframes morph {

    0%,
    100% {
        border-radius: 40% 60% 70% 30%/40% 40% 60% 50%;
    }

    34% {
        border-radius: 70% 30% 50% 50%/30% 30% 70% 70%;
    }

    67% {
        border-radius: 100% 60% 60% 100%/100% 100% 60% 60%;
    }
}

/* 04. ========= btn-arrow-animation ========== */

@keyframes tfLeftToRight {
    49% {
        transform: translateY(30%);
    }

    50% {
        opacity: 0;
        transform: translateY(-30%);
    }

    51% {
        opacity: 1;
    }
}

/* 04. ========= btn-arrow-animation ========== */

@keyframes bubbles {
    0% {
        bottom: 52px;
        left: 67px;
        opacity: 0;
    }

    50% {
        bottom: 62px;
        opacity: 1;
    }

    100% {
        bottom: 72px;
        left: 67px;
        opacity: 0;
    }
}

/* 04. ========= btn-arrow-animation ========== */

@keyframes ab2animation {
    0% {
        transform: translateX(0px);
    }

    25% {
        transform: translateX(-35px);
    }

    50% {
        transform: translateX(0px);
    }

    75% {
        transform: translateX(35px);
    }

    100% {
        transform: translateX(0px);
    }
}

/* 04. ========= light-animation ========== */

@keyframes opacity {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

/* 04. ========= light-animation ========== */

@keyframes animation-popup {
    0% {
        -webkit-transform: scale(0.7) rotate(0deg);
        transform: scale(0.7) rotate(0deg);
    }

    40% {
        -webkit-transform: scale(0.7) rotate(160deg);
        transform: scale(0.7) rotate(160deg);
    }

    80% {
        -webkit-transform: scale(1) rotate(360deg);
        transform: scale(1) rotate(360deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(360deg);
        transform: scale(1) rotate(360deg);
    }
}

/*----------------------------------------*/

/*  2.5 Preloader
/*----------------------------------------*/

#loading {
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999999;
    margin-top: 0px;
    top: 0px;
}

#loading-center {
    width: 100%;
    height: 100%;
    position: relative;
}

#loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.tp-preloader-logo {
    width: 180px;
    height: 180px;
    line-height: 180px;
    position: relative;
    text-align: center;
    margin: auto;
}

.tp-preloader-logo img {
    animation: zoom-in-zoom-out 2s ease-out infinite;
}

.tp-preloader-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tp-preloader-circle svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: tp-rotate 5s linear infinite;
    -moz-animation: tp-rotate 5s linear infinite;
    -ms-animation: tp-rotate 5s linear infinite;
    -o-animation: tp-rotate 5s linear infinite;
    animation: tp-rotate 5s linear infinite;
}

.tp-preloader-circle svg circle:last-child {
    stroke: var(--tp-theme-primary);
    stroke-dashoffset: 0;
    stroke-dasharray: 1128, 3150;
    -webkit-animation: tp-loading 4s linear infinite;
    -moz-animation: tp-loading 4s linear infinite;
    -ms-animation: tp-loading 4s linear infinite;
    -o-animation: tp-loading 4s linear infinite;
    animation: tp-loading 4s linear infinite;
    transform-origin: center center;
}

@-webkit-keyframes tp-loading {
    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 0, 3150;
    }

    100% {
        stroke-dashoffset: -1131;
        stroke-dasharray: 1128, 3138;
    }
}

@-moz-keyframes tp-loading {
    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 0, 3150;
    }

    100% {
        stroke-dashoffset: -1131;
        stroke-dasharray: 1128, 3138;
    }
}

@-ms-keyframes tp-loading {
    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 0, 3150;
    }

    100% {
        stroke-dashoffset: -1131;
        stroke-dasharray: 1128, 3138;
    }
}

@keyframes tp-loading {
    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 0, 3150;
    }

    100% {
        stroke-dashoffset: -1131;
        stroke-dasharray: 1128, 3138;
    }
}

@-webkit-keyframes tp-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes tp-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-ms-keyframes tp-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes tp-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.tp-preloader-content {
    text-align: center;
}

.tp-preloader-title {
    font-size: 100px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0px;
}

@media only screen and (max-width: 767px) {
    .tp-preloader-title {
        font-size: 70px;
    }
}

.tp-preloader-subtitle {
    font-size: 20px;
    margin-bottom: 0;
    margin-top: 20px;
    transform: translateX(4px);
    color: var(--tp-common-black);
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(0.9, 0.9);
    }

    100% {
        transform: scale(1, 1);
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #loading-center-absolute {
        width: 40%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #loading-center-absolute {
        width: 40%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #loading-center-absolute {
        width: 45%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    #loading-center-absolute {
        width: 50%;
    }
}

@media (max-width: 575px) {
    #loading-center-absolute {
        width: 90%;
    }
}

/*----------------------------------------*/

/*  2.6 Background
/*----------------------------------------*/

.grey-bg {
    background-color: var(--tp-grey-1);
}

.white-bg {
    background-color: var(--tp-common-white);
}

.black-bg {
    background-color: var(--tp-common-black);
}

.theme-bg {
    background-color: var(--tp-theme-primary);
}

.theme-bg-2 {
    background-color: var(--tp-theme-5);
}

.lightblue-bg {
    background-color: var(--tp-blue-1);
}

[data-bg-color=footer-bg-grey] {
    background-color: var(--tp-footer-grey-1);
}

/*----------------------------------------*/

/*  2.7 Carousel
/*----------------------------------------*/

/*----------------------------------------*/

/*  2.8 Nice Select
/*----------------------------------------*/

.nice-select {
    -webkit-tap-highlight-color: transparent;
    background-color: #fff;
    border-radius: 5px;
    border: solid 1px #e8e8e8;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    height: 42px;
    line-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto;
}

.nice-select:hover {
    border-color: #dbdbdb;
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
    border-color: #999;
}

.nice-select::after {
    position: absolute;
    content: "\f107";
    top: 50%;
    right: 0;
    font-family: var(--tp-ff-fontawesome);
    color: var(--tp-common-black);
    font-weight: 500;
    pointer-events: none;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    margin-top: 0;
    transform-origin: center;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.nice-select.open::after {
    -webkit-transform: translateY(-50%) rotate(-180deg);
    -moz-transform: translateY(-50%) rotate(-180deg);
    -ms-transform: translateY(-50%) rotate(-180deg);
    -o-transform: translateY(-50%) rotate(-180deg);
    transform: translateY(-50%) rotate(-180deg);
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
}

.nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none;
}

.nice-select.disabled::after {
    border-color: #cccccc;
}

.nice-select.wide {
    width: 100%;
}

.nice-select.wide .list {
    left: 0 !important;
    right: 0 !important;
}

.nice-select.right {
    float: right;
}

.nice-select.right .list {
    left: auto;
    right: 0;
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
}

.nice-select.small::after {
    height: 4px;
    width: 4px;
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
}

.nice-select .list {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
}

.nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.nice-select .option.selected {
    font-weight: bold;
}

.nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default;
}

.no-csspointerevents .nice-select .list {
    display: none;
}

.no-csspointerevents .nice-select.open .list {
    display: block;
}



.filter-overlay {
    background-color: var(--tp-common-black);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.filter-overlay.opened {
    opacity: 0.3;
    visibility: visible;
}

.filter-overlay:hover {
    cursor: url("../img/icon/cross-out.png"), pointer;
}


/*----------------------------------------*/

/*  2.12 Accordion
/*----------------------------------------*/

/*----------------------------------------*/

/*  2.13 Tab
/*----------------------------------------*/

/*----------------------------------------*/

/*  2.14 Modal
/*----------------------------------------*/

/*----------------------------------------*/

/*  2.15 Section Title
/*----------------------------------------*/

.tp-section-title {
    font-size: 60px;
    line-height: 1.07;
    letter-spacing: -0.6px;
}

@media only screen and (max-width: 767px) {
    .tp-section-title {
        font-size: 40px;
    }
}

.tp-section-title span {
    position: relative;
    color: var(--tp-theme-primary);
    display: inline-block;
}

.tp-section-title span svg {
    position: absolute;
    bottom: -10px;
    left: 37px;
    color: #161613;
}

@media only screen and (max-width: 767px) {
    .tp-section-title span svg {
        left: 0;
    }
}

.tp-section-title-white {
    font-size: 60px;
    font-weight: 600;
    color: var(--tp-common-white);
}

.tp-section-subtitle {
    color: var(--tp-theme-primary);
    font-size: 18px;
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.tp-section p {
    margin-left: 25px;
    font-size: 17px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-section p {
        margin-left: 0;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-section p br {
        display: none;
    }
}

.tp-section-2-subtitle {
    color: var(--tp-theme-3);
    font-size: 20px;
    display: inline-block;
}

.tp-section-2-title {
    font-size: 60px;
    line-height: 1.1;
    letter-spacing: -1.2px;
    font-weight: 500;
    color: var(--tp-heading-3);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-section-2-title {
        font-size: 55px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-section-2-title {
        font-size: 40px;
    }
}

.tp-section-2-title span {
    color: var(--tp-theme-primary);
    position: relative;
    display: inline-block;
}

.tp-section-3-subtitle {
    color: var(--tp-theme-secondary);
    font-size: 18px;
    font-weight: 400;
}

.tp-section-3-subtitle.color-9 {
    color: var(--tp-theme-9);
}

.tp-section-3-title {
    color: var(--tp-heading-2);
    font-size: 32px;
    font-weight: 800;
    font-family: poppins7;
}

@media only screen and (max-width: 767px) {
    .tp-section-3-title {
        font-size: 36px;
    }
}

.tp-section-3-title span {
    color: var(--tp-theme-secondary);
    position: relative;
    z-index: 1;
    display: inline-block;
}

.tp-section-3-title.color-9 span {
    color: var(--tp-theme-9);
}

.tp-section-4-title {
    font-size: 60px;
    line-height: 1.1;
    letter-spacing: -1.2px;
    font-weight: 500;
}

.tp-section-4-title span {
    position: relative;
    z-index: 1;
    color: var(--tp-theme-primary);
}

.tp-section-4-title span svg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.tp-section-4-title span svg path {
    stroke: #161613;
    stroke-dasharray: 2300;
    stroke-dashoffset: 3500;
    animation: dash 4s linear forwards;
}

.tp-section-5-subtitle {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.84px;
    text-transform: uppercase;
}

.tp-section-5-title {
    font-size: 60px;
    font-weight: 600;
    letter-spacing: -1.2px;
    line-height: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-section-5-title {
        font-size: 48px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-section-5-title {
        font-size: 54px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-section-5 p br {
        display: none;
    }
}

.tp-underline-shape-1 {
    position: absolute;
    bottom: -10px;
    left: 37px;
}

@media only screen and (max-width: 767px) {
    .tp-underline-shape-1 {
        left: 0;
    }
}

.tp-underline-shape-2 {
    position: absolute;
    bottom: -6px;
    left: 37px;
}

@media only screen and (max-width: 767px) {
    .tp-underline-shape-2 {
        bottom: -8px;
        left: 0;
    }
}

.tp-underline-shape-3 {
    position: absolute;
    bottom: -6px;
    left: 8px;
}

@media only screen and (max-width: 767px) {
    .tp-underline-shape-3 {
        left: 0;
    }
}

.tp-underline-shape-4 {
    position: absolute;
    bottom: -8px;
    left: -150px;
}

@media only screen and (max-width: 767px) {
    .tp-underline-shape-4 {
        bottom: -18px;
        left: 0;
    }
}

.tp-underline-shape-5 {
    position: absolute;
    bottom: -5px;
    left: 55px;
    z-index: -1;
}

@media only screen and (max-width: 767px) {
    .tp-underline-shape-5 {
        width: 100%;
    }
}

.tp-underline-shape-6 {
    position: absolute;
    bottom: -5px;
    left: 20px;
}

.tp-underline-shape-7 {
    position: absolute;
    bottom: -5px;
    left: -6px;
}

.tp-underline-shape-8 {
    position: absolute;
    bottom: -3px;
    left: -6px;
    z-index: -1;
}

.tp-underline-shape-9 {
    position: absolute;
    bottom: -6px;
    left: 35px;
    z-index: -1;
}

.tp-underline-shape-10 {
    position: absolute;
    bottom: -4px;
    left: 7px;
    z-index: -1;
}

.tp-underline-shape-11 {
    position: absolute;
    bottom: -7px;
    left: 17px;
    z-index: -1;
}

.tp-underline-shape-12 {
    position: absolute;
    bottom: -8px;
    left: 40px;
}

/*----------------------------------------*/

/*  2.178 Range Slider css start
/*----------------------------------------*/

/*----------------------------------------*/

/*  2.16 Select 2
/*----------------------------------------*/


/*----------------------------------------*/

/*  2.17 Flatpicker
/*----------------------------------------*/


/*----------------------------------------*/

/*  2.18 Search Css
/*----------------------------------------*/


/* HEADER CSS */

/*----------------------------------------*/

/*  3.1 Header Style 1
/*----------------------------------------*/

/* =========================
   HEADER CORE
========================= */

.header-area {
    position: relative;
    width: 100%;
    z-index: 99;
}

/* Sticky Header */
.tp-header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(7, 37, 68, 0.1);
    transition: all 0.3s ease;
}

/* Header Container */
.tp-header-2 {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Padding adjustments */
@media (max-width: 991px) {
    .tp-header-2 {
        padding: 15px 0;
    }
}

/* =========================
   HEADER LEFT
========================= */

.tp-header-2-left {
    display: flex;
    align-items: center;
}

/* Logo */
.tp-header-inner-logo img {
    max-height: 50px;
    width: auto;
}

/* =========================
   SEARCH BAR
========================= */

.search-form {
    display: flex;
    align-items: center;
    width: 100%;
}

.search-form input {
    font-size: 14px;
    color: #0F4E9B;
}

.search-form input::placeholder {
    color: #8B8B8B;
}

/* =========================
   MEGA MENU
========================= */

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    z-index: 999;
}

.mega-menu[aria-hidden="false"] {
    display: block;
}

.mega-inner {
    background: #fff;
    border-radius: 12px;
}

/* =========================
   RESPONSIVE (MOBILE)
========================= */

@media (max-width: 767px) {

    /* Stack logo + search */
    .tp-header-2-left {
        width: 100%;
    }

    .search-form {
        margin: 0 10px;
        max-width: 100%;
    }

    /* Hide desktop buttons */
    .tp-header-2-extra {
        display: none;
    }
}


/*----------------------------------------*/

/*  4.1 Main menu css
/*----------------------------------------*/

/*----------------------------------------*/

/*  4.2 Mobile menu css
/*----------------------------------------*/


/*----------------------------------------*/

/*  5.1 Postbox css
/*----------------------------------------*/


/*----------------------------------------*/

/*  5.2 Recent Post css
/*----------------------------------------*/


/*----------------------------------------*/

/*  5.3 Sidebar css
/*----------------------------------------*/


/*----------------------------------------*/

/*  6.1 Footer Style 1
/*----------------------------------------*/

.tp-footer-widget-content p {
    color: var(--tp-grey-3);
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 24px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-footer-widget-content p br {
        display: none;
    }
}

.tp-footer-widget-title {
    color: var(--tp-common-black-1);
    font-size: 20px;
    font-weight: 500;
}

.tp-footer-widget ul li {
    list-style: none;
}

.tp-footer-widget ul li:not(:last-child) {
    margin-bottom: 5px;
}

.tp-footer-widget ul li a {
    color: var(--tp-grey-3);
    font-size: 16px;
    font-family: var(--tp-ff-primary);
}

.tp-footer-widget ul li a:hover {
    color: var(--tp-theme-primary);
}

.tp-footer-widget.shop ul li a:hover {
    color: var(--tp-theme-8);
}

.tp-footer-contact>span {
    display: block;
    color: var(--tp-grey-3);
    font-size: 14px;
    margin-bottom: 3px;
    line-height: 1;
}

.tp-footer-contact>a {
    color: var(--tp-common-black-1);
    font-size: 22px;
    display: inline-block;
    font-weight: 500;
    margin-bottom: 10px;
}

.tp-footer-contact>a:hover {
    color: var(--tp-theme-primary);
}

.tp-footer-contact.shop>a:hover {
    color: var(--tp-theme-8);
}

.tp-footer-contact-mail a {
    color: var(--tp-grey-3);
    font-size: 16px;
}

.tp-footer-contact-mail a:hover {
    color: var(--tp-theme-primary);
}

.tp-footer-contact-mail a span {
    color: var(--tp-common-black-1);
    display: inline-block;
    margin-right: 3px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-footer-contact-mail.shop a:hover {
    color: var(--tp-theme-8);
}

.tp-footer-contact-mail.shop a:hover span {
    color: var(--tp-theme-8);
}

.tp-footer-newsletter-wrapper {
    position: relative;
}

.tp-footer-newsletter-wrapper.tp-footer-inner-input input {
    border: transparent;
    background: var(--tp-common-white);
    box-shadow: 0px 1px 2px 0px rgba(3, 11, 30, 0.14);
}

.tp-footer-newsletter-wrapper.tp-footer-inner-input input:focus {
    border: 1px solid var(--tp-theme-7);
    box-shadow: 0px 0px 0px 3px rgba(70, 97, 253, 0.16);
}

.tp-footer-newsletter-wrapper.tp-footer-inner-input .tp-footer-5-newsletter-submit .tp-btn-inner {
    box-shadow: 0px 0px 1px 0px #1438B5, 0px 1px 2px 0px rgba(20, 56, 181, 0.25);
}

.tp-footer-newsletter-wrapper.tp-footer-inner-input .tp-footer-5-newsletter-submit .tp-btn-inner:hover {
    box-shadow: none;
    background: #425EFF;
    color: var(--tp-common-white);
}

.tp-footer-newsletter-wrapper.tp-footer-shop-input input {
    border-radius: 0;
    background: var(--tp-common-white);
    border: 1px solid var(--tp-common-white);
    box-shadow: 0px 1px 2px 0px rgba(3, 11, 30, 0.14);
}

.tp-footer-newsletter-wrapper.tp-footer-shop-input input:focus {
    border-color: var(--tp-theme-8);
}

.tp-footer-newsletter-wrapper.tp-footer-shop-input .tp-footer-5-newsletter-submit .tp-btn-inner {
    border-radius: 0;
    color: #DDF49F;
    padding: 6px 22px;
    background-color: var(--tp-theme-8);
    box-shadow: 0px 1px 2px 0px rgba(1, 99, 90, 0.25), 0px 0px 1px 0px #01635A;
}

.tp-footer-newsletter-wrapper.tp-footer-shop-input .tp-footer-5-newsletter-submit .tp-btn-inner:hover {
    box-shadow: none;
    color: var(--tp-common-white);
    background-color: var(--tp-theme-6);
}

.tp-footer-newsletter-input input {
    border-radius: 6px;
    padding: 0 130px 0 24px;
    border: 2px solid #E4E2DC;
    background-color: transparent;
}

.tp-footer-newsletter-input input:focus {
    border-color: var(--tp-red-2);
}

.tp-footer-newsletter-submit {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

.tp-footer-newsletter-submit .tp-btn {
    padding: 6px 20px;
    background-color: var(--tp-red-2);
    border-color: var(--tp-red-2);
}

.tp-footer-newsletter-social a {
    height: 38px;
    width: 38px;
    line-height: 38px;
    text-align: center;
    display: inline-block;
    border: 1px solid var(--tp-border-2);
    border-radius: 50%;
    font-size: 16px;
}

.tp-footer-newsletter-social a:not(:last-of-type) {
    margin-right: 3px;
}

.tp-footer-newsletter-social.tp-footer-inner-social a {
    background: var(--tp-common-white);
    border: 1px solid var(--tp-common-white);
    box-shadow: 0px 1px 2px 0px rgba(3, 11, 30, 0.14);
}

.tp-footer-bottom {
    padding: 17px 0;
    background-color: var(--tp-grey-4);
}

.tp-footer-bottom-social a {
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    background-color: #EDEFF2;
    border-radius: 50%;
    display: inline-block;
    font-size: 14px;
    color: var(--tp-text-body);
    margin-right: 4px;
}

.tp-footer-bottom-social a:hover {
    background-color: var(--tp-theme-secondary);
    color: var(--tp-common-white);
}

.tp-footer-copyright span {
    color: #57595F;
    font-size: 16px;
    line-height: 24px;
}

.tp-footer-copyright span a:hover {
    color: var(--tp-theme-primary);
}

@media only screen and (max-width: 767px) {
    .tp-footer-copyright-payment {
        padding-top: 20px;
    }
}

.tp-footer-2 .tp-footer-widget-content>p {
    margin-bottom: 26px;
}

.tp-footer-2 .tp-footer-widget-link ul li a:hover {
    color: var(--tp-theme-secondary);
}

.tp-footer-2 .tp-footer-contact>a:hover {
    color: var(--tp-theme-secondary);
}

.tp-footer-2 .tp-footer-contact-mail>a:hover {
    color: var(--tp-theme-secondary);
}

.tp-footer-2 .tp-footer-bottom {
    padding: 20px 0;
    border-top: 1px solid rgba(30, 30, 47, 0.1);
    background-color: var(--tp-common-white);
}

@media only screen and (max-width: 767px) {
    .tp-footer-2 .tp-footer-bottom-social {
        text-align: start;
    }
}

@media only screen and (max-width: 767px) {
    .tp-footer-2 .tp-footer-copyright {
        /* padding: 20px 0; */
    }
}

.tp-footer-2 .tp-footer-copyright span a {
    color: var(--tp-theme-secondary);
}

.tp-footer-2 .tp-footer-copyright span a:hover {
    color: var(--tp-text-body);
}

a:hover.social-fb {
    border-color: #337FFF;
}

a:hover.social-twit {
    border-color: #33CCFF;
}

a:hover.social-lnkd {
    border-color: #006699;
}

a:hover.social-yout {
    border-color: #FF3000;
}

a.social-fb {
    color: #337FFF;
}

a.social-twit {
    color: #33CCFF;
}

a.social-lnkd {
    color: #006699;
}

a.social-yout {
    color: #FF3000;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-footer-col-3 {
        margin-left: -30px;
    }
}

.tp-footer-col-4 {
    margin-left: 28px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-footer-col-4 {
        margin-left: 0;
    }
}

.tp-footer-2-col-1 {
    margin-right: -18px;
}

@media only screen and (max-width: 767px) {
    .tp-footer-2-col-1 {
        margin-right: 0;
    }
}

.tp-footer-2-col-2 {
    margin-left: 100px;
}

@media only screen and (max-width: 767px) {
    .tp-footer-2-col-2 {
        margin-left: 0;
    }
}

.tp-footer-2-col-3 {
    margin-left: 22px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-footer-2-col-3 {
        margin-left: 0;
    }
}

.tp-footer-2-col-4 {
    margin-left: -30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (max-width: 767px) {
    .tp-footer-2-col-4 {
        margin-left: 0;
    }
}

.tp-footer-3-bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

.tp-footer-3 .tp-footer-main {
    padding-top: 190px;
    padding-bottom: 60px;
}

@media only screen and (max-width: 767px) {
    .tp-footer-3 .tp-footer-main {
        padding-bottom: 0;
    }
}

.tp-footer-3 .tp-footer-widget-content p {
    font-size: 17px;
    color: var(--tp-common-white);
}

.tp-footer-3 .tp-footer-widget-title {
    color: var(--tp-common-white);
    font-size: 22px;
}

.tp-footer-3 .tp-footer-widget ul li a {
    position: relative;
    color: var(--tp-common-white);
    font-weight: 500;
}

.tp-footer-3 .tp-footer-widget ul li a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: var(--tp-common-white);
    left: auto;
    right: 0;
    bottom: -2px;
    opacity: 0;
    transition: all 0.3s linear;
}

.tp-footer-3 .tp-footer-widget ul li a:hover::after {
    opacity: 1;
    width: 100%;
    left: 0;
    right: auto;
    transition: all 0.3s linear;
}

.tp-footer-3 .tp-footer-newsletter-wrap p {
    color: var(--tp-common-white);
}

.tp-footer-3 .tp-footer-newsletter-submit .tp-btn {
    font-size: 15px;
    font-weight: 600;
    padding: 6px 19px;
    border-radius: 14px;
    border: none;
    background-color: var(--tp-theme-3);
}

.tp-footer-3 .tp-footer-newsletter-input input {
    border-radius: 14px;
    border: 1px solid var(--tp-common-white);
    background-color: var(--tp-common-white);
}

.tp-footer-3 .tp-footer-newsletter-input input:focus {
    border: 1px solid var(--tp-theme-3);
}

.tp-footer-3 .tp-footer-newsletter-social a {
    color: var(--tp-common-white);
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
}

.tp-footer-3 .tp-footer-newsletter-social a:hover {
    background: rgba(255, 255, 255, 0.25);
}

.tp-footer-3 .tp-footer-contact>span,
.tp-footer-3 .tp-footer-contact>a {
    color: var(--tp-common-white);
}

.tp-footer-3 .tp-footer-contact a:hover {
    color: var(--tp-theme-3);
}

.tp-footer-3 .tp-footer-contact-mail a {
    color: var(--tp-common-white);
}

.tp-footer-3 .tp-footer-contact-mail a span {
    color: var(--tp-common-white);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-footer-3 .tp-footer-contact-mail a:hover {
    color: var(--tp-theme-3);
}

.tp-footer-3 .tp-footer-contact-mail a:hover span {
    color: var(--tp-theme-3);
}

.tp-footer-3 .tp-footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 28px 0;
}

.tp-footer-3 .tp-footer-copyright span {
    color: var(--tp-common-white);
}

.tp-footer-3-shape-1 {
    position: absolute;
    bottom: 3px;
    left: 60px;
    animation: tpswing 4s ease-in-out 0.1s forwards infinite alternate;
    transform-origin: bottom left;
    z-index: -1;
}

.tp-footer-3-shape-2 {
    position: absolute;
    top: -10px;
    left: 320px;
    z-index: -1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-footer-3-shape-2 {
        left: 120px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-footer-3-shape-2 {
        left: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-footer-3-shape-2 {
        display: none;
    }
}

.tp-footer-3-shape-3 {
    position: absolute;
    top: 155px;
    right: 225px;
    z-index: -1;
    animation: opacity 2s ease-in-out 0.1s forwards infinite alternate;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-footer-3-shape-3 {
        right: 10px;
    }
}

.tp-footer-3-shape-4 {
    position: absolute;
    bottom: 4px;
    left: 130px;
    animation: tpswing 2s ease-in-out 0.1s forwards infinite alternate;
    transform-origin: bottom right;
    z-index: -1;
}

@media only screen and (max-width: 767px) {
    .tp-footer-3-shape-4 {
        display: none;
    }
}

.tp-footer-3-shape-5 {
    position: absolute;
    bottom: 10px;
    right: 180px;
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: hero-bounce;
    z-index: -1;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-footer-3-shape-5 {
        right: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-footer-3-shape-5 {
        display: none;
    }
}

.tp-footer-3-col-2 {
    margin-left: -40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-footer-3-col-2 {
        margin-left: 0;
    }
}

.tp-footer-3-col-3 {
    margin-left: -15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-footer-3-col-3 {
        margin-left: 0;
    }
}

.tp-footer-3-col-4 {
    margin-left: 60px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-footer-3-col-4 {
        margin-left: 0;
    }
}

.tp-footer-4-bg {
    background-color: var(--tp-theme-4);
}

.tp-footer-4-bg.tp-footer-inner {
    background-color: var(--tp-heading-primary);
}

.tp-footer-4-top {
    padding-top: 67px;
    padding-bottom: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.tp-footer-4-top-title {
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    color: var(--tp-common-white);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-footer-4-top-title {
        margin-bottom: 30px;
    }
}

.tp-footer-4-top-form {
    position: relative;
}

.tp-footer-4-top-form input {
    border: none;
    height: 66px;
    padding-right: 140px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
    border: 1px solid transparent;
    color: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.1);
}

.tp-footer-4-top-form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.tp-footer-4-top-form input:focus {
    border: 1px solid var(--tp-common-white);
}

.tp-footer-4-top-btn {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 4px;
    padding: 19px 35px;
    font-size: 16px;
    font-weight: 400;
    color: var(--tp-heading-primary);
    border: 1px solid var(--tp-common-white);
    background-color: var(--tp-common-white);
}

.tp-footer-4-top-btn span {
    display: inline-block;
    margin-left: 4px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-footer-4-main {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

.tp-footer-4-btn a {
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    color: var(--tp-common-white);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
    padding: 11px 5px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-footer-4-btn a:hover,
.tp-footer-4-btn a.active {
    background-color: var(--tp-common-white);
    color: var(--tp-red-2);
}

.tp-footer-4-btn a.active:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.tp-footer-4-btn.tp-footer-btn-inner a {
    border: 1px solid #2E2E2B;
}

.tp-footer-4-btn.tp-footer-btn-inner a:hover,
.tp-footer-4-btn.tp-footer-btn-inner a.active {
    background-color: var(--tp-theme-4);
    color: var(--tp-common-white);
}

.tp-footer-4-info span {
    color: var(--tp-common-white);
    font-size: 16px;
    line-height: 26px;
    display: inline-block;
    margin-bottom: 15px;
}

.tp-footer-4-mail a {
    color: var(--tp-common-white);
    font-size: 16px;
    margin-bottom: 20px;
    display: inline-block;
}

.tp-footer-4-phone a {
    color: var(--tp-common-white);
    font-size: 20px;
    display: inline-block;
    margin-bottom: 7px;
}

.tp-footer-4-bottom {
    background-color: #900000;
    padding: 17px 0;
}

.tp-footer-4-bottom.tp-footer-inner-bottom {
    background-color: #292926;
}

.tp-footer-4-copyright span {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    display: inline-block;
    padding-left: 18px;
    margin-left: 18px;
    color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 767px) {
    .tp-footer-4-copyright span {
        padding: 15px 0 15px 10px;
    }
}

.tp-footer-4-copyright span:first-child {
    padding-left: 0;
    margin-left: 0;
}

.tp-footer-4-copyright span:first-child::before {
    display: none;
}

.tp-footer-4-copyright span::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 767px) {
    .tp-footer-4-copyright span::before {
        top: 10px;
        height: 60%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-footer-4-copyright span.span {
        display: none;
    }
}

.tp-footer-4-copyright a {
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-footer-4-copyright a:hover {
    color: var(--tp-common-white);
}

.tp-footer-4-social a {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    margin-left: 3px;
    color: var(--tp-common-white);
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-footer-4-social a:hover {
    background-color: #B1040E;
}

.tp-footer-widget-4 ul li:not(:last-child) {
    margin-bottom: 10px;
}

.tp-footer-widget-4 ul li a {
    color: var(--tp-common-white);
    position: relative;
    padding-left: 16px;
}

.tp-footer-widget-4 ul li a::before {
    position: absolute;
    content: "";
    height: 3px;
    width: 3px;
    border-radius: 50%;
    top: 10px;
    left: 0;
    background-color: var(--tp-common-white);
}

.tp-footer-widget-4 ul li a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: var(--tp-common-white);
    left: auto;
    right: 0;
    bottom: -2px;
    opacity: 0;
    transition: all 0.3s linear;
}

.tp-footer-widget-4 ul li a:hover {
    color: var(--tp-common-white);
}

.tp-footer-widget-4 ul li a:hover::after {
    opacity: 1;
    width: 100%;
    left: 0;
    right: auto;
    transition: all 0.3s linear;
}

.tp-footer-4-col-1 {
    margin-right: -23px;
}

@media only screen and (max-width: 767px) {
    .tp-footer-4-col-1 {
        margin-right: 0;
    }
}

.tp-footer-4-col-2 {
    margin-left: 128px;
    margin-right: 54px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-footer-4-col-2 {
        margin-left: 80px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-footer-4-col-2 {
        margin-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-footer-4-col-2 {
        margin-left: 30px;
    }
}

.tp-footer-4-col-3 {
    margin-left: 53px;
    margin-right: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-footer-4-col-3 {
        margin-left: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-footer-4-col-3 {
        margin-left: 0;
    }
}

.tp-footer-4-col-4 {
    margin-left: 79px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-footer-4-col-4 {
        margin-left: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-footer-4-col-4 {
        margin-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-footer-4-col-4 {
        margin-left: 30px;
    }
}

.tp-footer-5-newsletter-input input {
    border: 2px solid #E4E2DC;
    border-radius: 6px;
    height: 60px;
}

.tp-footer-5-newsletter-input input:focus {
    border-color: var(--tp-theme-5);
}

.tp-footer-5-newsletter-submit {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

.tp-footer-5-newsletter-submit .tp-btn-4 {
    color: var(--tp-heading-4);
    font-size: 13px;
    line-height: 0px;
    letter-spacing: 0.52px;
    padding: 21px 23px;
}

.tp-footer-5-bottom {
    padding: 17px 0;
    background-color: #E5EDCC;
}

.tp-footer-5-bottom.tp-footer-inner-bottom {
    background-color: #F3F4F8;
}

.tp-footer-5-bottom.tp-footer-shop-bottom {
    background-color: #F5F5F5;
    padding: 24px 0;
}

.tp-footer-5-col-2 {
    margin-left: -15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-footer-5-col-2 {
        margin-left: 0;
    }
}

.tp-footer-5-col-2 .tp-footer-widget-link ul li a {
    position: relative;
    color: var(--tp-grey-3);
}

.tp-footer-5-col-2 .tp-footer-widget-link ul li a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: var(--tp-grey-3);
    left: auto;
    right: 0;
    bottom: -2px;
    opacity: 0;
    transition: all 0.3s linear;
}

.tp-footer-5-col-2 .tp-footer-widget-link ul li a:hover::after {
    opacity: 1;
    width: 100%;
    left: 0;
    right: auto;
    transition: all 0.3s linear;
}

.tp-footer-5-col-3 {
    margin-left: -20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-footer-5-col-3 {
        margin-left: 0;
    }
}

.tp-footer-5-col-3 .tp-footer-widget-link ul li a {
    position: relative;
    color: var(--tp-grey-3);
}

.tp-footer-5-col-3 .tp-footer-widget-link ul li a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: var(--tp-grey-3);
    left: auto;
    right: 0;
    bottom: -2px;
    opacity: 0;
    transition: all 0.3s linear;
}

.tp-footer-5-col-3 .tp-footer-widget-link ul li a:hover::after {
    opacity: 1;
    width: 100%;
    left: 0;
    right: auto;
    transition: all 0.3s linear;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-footer-5-col-4 {
        margin-left: -60px;
    }
}

.tp-footer-shop-col-2 .tp-footer-widget-link ul li a {
    position: relative;
    color: var(--tp-grey-3);
}

.tp-footer-shop-col-2 .tp-footer-widget-link ul li a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: var(--tp-grey-3);
    left: auto;
    right: 0;
    bottom: -2px;
    opacity: 0;
    transition: all 0.3s linear;
}

.tp-footer-shop-col-2 .tp-footer-widget-link ul li a:hover::after {
    opacity: 1;
    width: 100%;
    left: 0;
    right: auto;
    transition: all 0.3s linear;
}

.tp-footer-shop-col-3 .tp-footer-widget-link ul li a {
    position: relative;
    color: var(--tp-grey-3);
}

.tp-footer-shop-col-3 .tp-footer-widget-link ul li a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: var(--tp-grey-3);
    left: auto;
    right: 0;
    bottom: -2px;
    opacity: 0;
    transition: all 0.3s linear;
}

.tp-footer-shop-col-3 .tp-footer-widget-link ul li a:hover::after {
    opacity: 1;
    width: 100%;
    left: 0;
    right: auto;
    transition: all 0.3s linear;
}

.tp-footer-inner {
    background-color: #F3F4F8;
    border-bottom: 1px solid rgba(0, 31, 63, 0.08);
}

.tp-footer-inner .tp-footer-col-1 .tp-footer-contact>a:hover {
    color: var(--tp-dashboard-secondary);
}

.tp-footer-inner .tp-footer-col-1 .tp-footer-contact-mail a:hover {
    color: var(--tp-dashboard-secondary);
}

.tp-footer-inner .tp-footer-col-2.tp-footer-widget ul li a:hover {
    color: var(--tp-dashboard-secondary);
}

.tp-footer-inner .tp-footer-col-3.tp-footer-widget ul li a:hover {
    color: var(--tp-dashboard-secondary);
}

.tp-footer-shop {
    background-color: #F5F5F5;
    border-bottom: 1px solid rgba(0, 31, 63, 0.08);
}

.tp-footer-shop-col-2 {
    margin-left: -40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-footer-shop-col-2 {
        margin-left: 0;
    }
}

.tp-footer-shop-col-3 {
    margin-left: -20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-footer-shop-col-3 {
        margin-left: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-footer-shop-col-4 {
        margin-left: -60px;
    }
}

/*----------------------------------------*/

/*  7.1 Hero css
/*----------------------------------------*/

.tp-hero-item {
    padding-top: 300px;
    padding-bottom: 254px;
    position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-item {
        padding-top: 210px;
        padding-bottom: 180px;
    }
}

.tp-hero-bg {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 6000ms ease, opacity 1000ms ease-in, -webkit-transform 6000ms ease;
}

.tp-hero-bg::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

.tp-hero-wrapper {
    margin-left: 98px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-wrapper {
        margin-left: 0;
    }
}

.tp-hero-subtitle {
    color: var(--tp-common-white);
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    text-transform: uppercase;
    display: inline-block;
}

.tp-hero-title {
    color: var(--tp-common-white);
    font-size: 100px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 27px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-title {
        font-size: 80px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-title {
        font-size: 70px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-hero-title {
        font-size: 66px;
    }
}

.tp-hero-2-wrap {
    position: relative;
}

.tp-hero-2-thumb {
    position: absolute;
    bottom: 0;
    right: 230px;
    z-index: -1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-2-thumb {
        right: 135px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (max-width: 767px) {
    .tp-hero-2-thumb {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-2-thumb {
        right: -30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-2-thumb img {
        max-width: 100%;
    }
}

.tp-hero-2-bg {
    position: relative;
    z-index: 1;
}

.tp-hero-2-subtitle {
    color: var(--tp-theme-secondary);
    font-size: 20px;
    display: inline-block;
    margin-bottom: 6px;
}

.tp-hero-2-title {
    font-size: 76px;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -1.52px;
    margin-bottom: 18px;
}

@media only screen and (max-width: 767px) {
    .tp-hero-2-title {
        font-size: 50px;
    }
}

.tp-hero-2-title span {
    color: var(--tp-theme-secondary);
    position: relative;
    z-index: 1;
}

.tp-hero-2-title span img {
    position: absolute;
    bottom: 0px;
    left: 35px;
}

@media only screen and (max-width: 767px) {
    .tp-hero-2-title span img {
        bottom: -5px;
        left: 0px;
    }
}

.tp-hero-2-content {
    padding-top: 162px;
    padding-bottom: 190px;
}

@media only screen and (max-width: 767px) {
    .tp-hero-2-content {
        padding-top: 110px;
        padding-bottom: 60px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-2-content {
        padding-top: 100px;
        padding-bottom: 70px;
    }
}

.tp-hero-2-content p {
    color: rgba(3, 31, 66, 0.7);
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 32px;
}

@media only screen and (max-width: 767px) {
    .tp-hero-2-content p br {
        display: none;
    }
}

.tp-hero-2-shape-1 {
    position: absolute;
    bottom: 0;
    right: 145px;
    z-index: -2;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-2-shape-1 {
        right: 5px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-hero-2-shape-1 {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-2-shape-1 {
        right: 0;
    }
}

.tp-hero-2-shape-1 span svg path.line-2 {
    stroke: #FFBF8E;
    stroke-dasharray: 2300;
    stroke-dashoffset: 3500;
    animation: dash 4s linear forwards;
}

.tp-hero-2-shape-2 {
    position: absolute;
    top: 160px;
    left: 110px;
    z-index: -1;
    animation: hero-dot-1 5s linear 0s infinite alternate;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-2-shape-2 {
        display: none;
    }
}

.tp-hero-2-shape-3 {
    position: absolute;
    bottom: 69px;
    left: 130px;
    z-index: -1;
    animation: hero-dot-2 4s linear 0s infinite alternate;
}

.tp-hero-2-shape-4 {
    position: absolute;
    left: 22%;
    top: 0;
}

@media only screen and (max-width: 767px) {
    .tp-hero-2-shape-4 {
        display: none;
    }
}

.tp-hero-2-course {
    margin-left: 12px;
}

@media only screen and (max-width: 767px) {
    .tp-hero-2-course {
        margin-left: 0;
    }
}

.tp-hero-2-course .tp-course-item {
    box-shadow: 4px 4px 10px 0px rgba(26, 12, 2, 0.15);
}

.tp-hero-2-course .tp-course-thumb {
    border-radius: 10px;
}

.tp-hero-2-course .tp-course-thumb img {
    border-radius: 10px;
}

.tp-hero-2-btn .tp-btn-border {
    padding: 12px 32px;
}

.tp-hero-3-bg {
    padding-top: 168px;
    padding-bottom: 142px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.tp-hero-3-title {
    color: #0A1D3A;
    font-size: 100px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -2px;
    line-height: 1.1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-3-title {
        font-size: 88px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-3-title {
        font-size: 80px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-hero-3-title {
        font-size: 70px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-hero-3-title {
        font-size: 50px;
    }
}

.tp-hero-3-content-shape {
    position: absolute;
    top: -3px;
    left: -15px;
    z-index: 0;
    animation: tpswing 3s ease-in-out 0.1s forwards infinite alternate;
    transform-origin: bottom left;
}

@media only screen and (max-width: 767px) {
    .tp-hero-3-content-shape {
        display: none;
    }
}

.tp-hero-3-thumb {
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-hero-3-thumb-2 {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

.tp-hero-3-thumb-2 img {
    max-width: 100%;
}

.tp-hero-3-thumb-3 img {
    max-width: 100%;
}

@media only screen and (max-width: 767px) {
    .tp-hero-3-shape {
        display: none;
    }
}

.tp-hero-3-shape-1 {
    position: absolute;
    top: 88px;
    right: 38px;
    animation: a 1.5s linear 0s infinite alternate;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-hero-3-shape-1 {
        right: 38%;
    }
}

.tp-hero-3-shape-2 {
    position: absolute;
    top: 29px;
    right: -10px;
    animation: a 2s linear 0s infinite alternate;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-hero-3-shape-2 {
        right: 32%;
    }
}

.tp-hero-3-shape-3 {
    position: absolute;
    top: 89px;
    right: -47px;
    animation: a 2s linear 0s infinite alternate;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-hero-3-shape-3 {
        right: 26%;
    }
}

.tp-hero-3-shape-4 {
    position: absolute;
    top: 175px;
    left: -55px;
    animation: neptune 10s infinite linear;
    z-index: 0;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-hero-3-shape-4 {
        left: -125px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-3-shape-4 {
        left: -155px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-3-shape-4 {
        top: 50px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-hero-3-shape-4 {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-3-apply-btn {
        margin-bottom: 30px;
    }
}

.tp-hero-3-apply-btn a {
    display: inline-block;
    padding: 53px 36px;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: var(--tp-common-white);
    background-color: #FF7162;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-hero-3-apply-btn a span {
    display: inline-block;
    margin-bottom: 7px;
}

.tp-hero-3-apply-btn a:hover {
    animation: morph 3s linear infinite;
    background-color: var(--tp-common-black);
    border-radius: 40% 60% 70% 30%/40% 50% 60% 50%;
}

.tp-hero-3-text {
    margin-left: 24px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-hero-3-text {
        margin-top: 30px;
        margin-left: 0;
    }
}

@media only screen and (max-width: 767px) {
    .tp-hero-3-text {
        margin-left: 0;
    }
}

.tp-hero-3-text p {
    color: #636366;
    font-size: 17px;
    line-height: 28px;
    margin-bottom: 34px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-hero-3-text p br {
        display: none;
    }
}

.tp-hero-4-bg {
    padding-top: 186px;
    padding-bottom: 200px;
    position: relative;
    z-index: 1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.tp-hero-4-bg::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-hero-4-bg {
        padding-top: 170px;
        padding-bottom: 160px;
    }
}

.tp-hero-4-title {
    font-size: 100px;
    font-weight: 700;
    line-height: 100px;
    letter-spacing: -4px;
    margin-bottom: 37px;
    margin-top: 5px;
    color: var(--tp-common-white);
}

.tp-hero-4-title::after {
    position: absolute;
    content: "";
    width: 296px;
    height: 25px;
    left: -6px;
    top: 70px;
    z-index: -1;
    background: #DD000D;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-4-title::after {
        height: 20px;
        width: 235px;
        top: 60px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-hero-4-title::after {
        width: 200px;
        top: 50px;
        height: 20px;
        left: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-4-title {
        font-size: 80px;
        line-height: 80px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-hero-4-title {
        font-size: 72px;
        line-height: 72px;
        margin-bottom: 30px;
    }
}

.tp-hero-4-btn {
    flex: 0 0 auto;
    margin-right: 43px;
    display: inline-block;
    padding: 9px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tp-hero-4-info-list ul li {
    font-size: 20px;
    font-weight: 500;
    list-style: none;
    position: relative;
    padding-left: 19px;
    letter-spacing: 0.5px;
    color: var(--tp-common-white);
}

.tp-hero-4-info-list ul li:not(:last-of-type) {
    margin-bottom: 7px;
}

.tp-hero-4-info-list ul li::before {
    position: absolute;
    content: "";
    height: 5px;
    top: 10px;
    left: 0;
    width: 5px;
    border-radius: 50%;
    background-color: var(--tp-common-white);
}

.tp-hero-6-content {
    padding-top: 235px;
    padding-bottom: 160px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-6-content {
        padding-top: 115px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-6-content {
        padding-bottom: 60px;
        padding-top: 100px;
    }
}

.tp-hero-6-content p {
    font-size: 18px;
    margin-bottom: 40px;
    color: var(--tp-heading-2);
    font-family: var(--tp-ff-manrope);
}

.tp-hero-6-subtitle {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 13px;
    margin-bottom: 15px;
    border-radius: 30px;
    display: inline-block;
    color: var(--tp-theme-9);
    font-family: var(--tp-ff-manrope);
    border: 1px solid rgba(3, 31, 66, 0.08);
}

.tp-hero-6-subtitle svg {
    margin-right: 8px;
    transform: translateY(-2px);
}

.tp-hero-6-title {
    font-size: 70px;
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 16px;
    letter-spacing: -2.8px;
    color: var(--tp-heading-2);
    font-family: var(--tp-ff-manrope);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-6-title {
        font-size: 55px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-hero-6-title {
        font-size: 50px;
    }
}

.tp-hero-6-title span {
    position: relative;
    color: var(--tp-theme-9);
}

.tp-hero-6-title span img {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: -1;
}

@media only screen and (max-width: 767px) {
    .tp-hero-6-title span img {
        bottom: -5px;
    }
}

.tp-hero-6-thumb {
    position: absolute;
    bottom: 0;
    right: 280px;
    z-index: 0;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-hero-6-thumb {
        right: 60px;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-hero-6-thumb {
        right: 155px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-6-thumb {
        right: 70px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-6-thumb {
        right: -50px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-6-thumb {
        position: static;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-6-thumb img {
        width: 90%;
    }
}

@media only screen and (max-width: 767px) {
    .tp-hero-6-thumb img {
        width: 100%;
    }
}

.tp-hero-6-bg {
    width: 500px;
    height: 509px;
    margin-right: 25px;
    margin-bottom: 24px;
    background-color: #FFD25D;
    border-radius: 67% 33% 35% 65%/37% 35% 65% 63%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-6-bg {
        display: none;
    }
}

.tp-hero-6-shape .shape-1 {
    position: absolute;
    top: -35px;
    left: -15px;
    animation: hero-dot-2 4s linear 0s infinite alternate;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-6-shape .shape-1 {
        display: none;
    }
}

.tp-hero-6-shape .shape-2 {
    position: absolute;
    bottom: 30%;
    right: -85px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-hero-6-shape .shape-2 {
        right: -45px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-6-shape .shape-2 {
        display: none;
    }
}

.tp-hero-6-shape .shape-3 {
    position: absolute;
    top: 125px;
    left: -12px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-6-shape .shape-3 {
        display: none;
    }
}

.tp-hero-6-btn {
    margin-right: 20px;
}

.tp-hero-6-btn .tp-btn-inner {
    font-size: 16px;
    padding: 14px 28px;
    border-radius: 12px;
    background-color: var(--tp-theme-9);
}

.tp-hero-6-btn .tp-btn-inner span {
    display: inline-block;
    margin-left: 5px;
    transform: translateY(-2px);
}

.tp-hero-6-user {
    position: absolute;
    bottom: 100px;
    left: -80px;
    z-index: 1;
    border-radius: 8px;
    padding: 18px 33px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--tp-common-white);
    background: rgba(255, 255, 255, 0.8);
    animation: tpupdown 1s infinite alternate;
    box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.1);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-6-user {
        left: 0;
        bottom: -100px;
    }
}

.tp-hero-6-user span {
    font-size: 18px;
    font-weight: 700;
    color: var(--tp-heading-2);
    font-family: var(--tp-ff-manrope);
}

.tp-hero-6-user-thumb {
    margin-left: 20px;
}

.tp-hero-6-user-thumb img {
    width: 34px;
    border-radius: 50%;
    margin-left: -18px;
    border: 3px solid #FEF2ED;
}

.tp-hero-6-user-text {
    margin-left: 8px;
}

.tp-hero-6-user-text p {
    font-size: 13px;
    font-weight: 700;
    line-height: 15px;
    margin: 0;
    color: var(--tp-heading-2);
    font-family: var(--tp-ff-manrope);
}

.tp-hero-6-user-text p i {
    font-style: normal;
    color: var(--tp-theme-9);
}

.tp-hero-6-video .video-border-animation {
    display: inline-block;
    height: 50px;
    width: 50px;
    line-height: 38px;
    text-align: center;
    border-radius: 50%;
    color: var(--tp-heading-primary);
    background-color: var(--tp-common-white);
    border: 4px solid #FFD25D;
}

.tp-hero-6-video .video-border-animation span {
    display: inline-block;
    transform: translateX(2px);
}

.tp-hero-6-video .video-border-animation::after {
    z-index: -1;
    border: 1px solid #FFD25D;
}

.tp-hero-7-ptb {
    padding-top: 195px;
}

.tp-hero-7-content {
    margin-bottom: 90px;
}

@media only screen and (max-width: 767px) {
    .tp-hero-7-content {
        margin-bottom: 70px;
    }
}

.tp-hero-7-content .tp-hero-6-subtitle {
    border-radius: 10px;
}

.tp-hero-7-content .tp-hero-6-title {
    margin-bottom: 50px;
}

@media only screen and (max-width: 767px) {
    .tp-hero-7-content .tp-hero-6-title br {
        display: none;
    }
}

.tp-hero-7-input {
    position: relative;
    margin: 0 38px;
}

@media only screen and (max-width: 767px) {
    .tp-hero-7-input {
        margin: 0;
    }
}

.tp-hero-7-input input {
    height: 66px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    padding-right: 60px;
    color: var(--tp-heading-2);
    border: 1px solid transparent;
    font-family: var(--tp-ff-manrope);
    background: var(--tp-common-white);
    box-shadow: 0px 20px 20px 0px rgba(5, 5, 39, 0.1);
}

.tp-hero-7-input input::placeholder {
    font-size: 16px;
    font-weight: 500;
    color: #8D8D95;
    font-family: var(--tp-ff-manrope);
}

.tp-hero-7-input input:focus {
    border-color: var(--tp-theme-9);
    box-shadow: 0 1px 2px 0 rgba(85, 109, 245, 0.08), 0 2px 6px 0 rgba(85, 109, 245, 0.04), 0 3px 6px 0 rgba(85, 109, 245, 0.08), 0 0 0 4px rgba(85, 109, 245, 0.1);
}

.tp-hero-7-input span {
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
    .tp-hero-7-item-box {
        flex-wrap: wrap;
        justify-content: start !important;
    }
}

.tp-hero-7-item:not(:last-of-type) {
    margin-right: 80px;
}

@media only screen and (max-width: 767px) {
    .tp-hero-7-item:not(:last-of-type) {
        margin-right: 25px;
        margin-bottom: 20px;
    }
}

.tp-hero-7-item-icon {
    margin-right: 18px;
}

.tp-hero-7-item-content span {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 15px;
    display: inline-block;
    color: var(--tp-heading-2);
    font-family: var(--tp-ff-manrope);
}

.tp-hero-7-item-content p {
    font-size: 15px;
    font-weight: 500;
    color: #7D7D84;
    line-height: 22px;
    margin: 0;
    font-family: var(--tp-ff-manrope);
}

.tp-hero-7-group .tp-hero-6-user {
    left: 15%;
    bottom: 25%;
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .tp-hero-7-group .tp-hero-6-user {
        left: 10%;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-hero-7-group .tp-hero-6-user {
        left: 8%;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-hero-7-group .tp-hero-6-user {
        left: 5%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-7-group .tp-hero-6-user {
        left: 20px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-7-group .tp-hero-6-user {
        display: none;
    }
}

.tp-hero-7-shape .shape-1 {
    position: absolute;
    top: 55%;
    right: 110px;
    animation: hero-dot-1 5s linear 0s infinite alternate;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-hero-7-shape .shape-1 {
        right: 30px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-7-shape .shape-1 {
        display: none;
    }
}

.tp-hero-7-shape .shape-2 {
    position: absolute;
    top: 50%;
    right: 20%;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-hero-7-shape .shape-2 {
        right: 18%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-7-shape .shape-2 {
        right: 15px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-7-shape .shape-2 {
        display: none;
    }
}

.tp-hero-7-shape .shape-3 {
    position: absolute;
    top: 72%;
    right: 20%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-7-shape .shape-3 {
        display: none;
    }
}

.tp-hero-7-shape .shape-4 {
    position: absolute;
    top: 220px;
    left: 144px;
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .tp-hero-7-shape .shape-4 {
        left: 90px;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-hero-7-shape .shape-4 {
        left: 60px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-hero-7-shape .shape-4 {
        left: 30px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-7-shape .shape-4 {
        left: 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-7-shape .shape-4 {
        display: none;
    }
}

.tp-hero-7-shape .shape-5 {
    position: absolute;
    top: 340px;
    right: 130px;
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .tp-hero-7-shape .shape-5 {
        right: 90px;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-hero-7-shape .shape-5 {
        right: 60px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-hero-7-shape .shape-5 {
        right: 30px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-7-shape .shape-5 {
        right: 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-7-shape .shape-5 {
        display: none;
    }
}

.tp-hero-7-shape .shape-6 {
    position: absolute;
    top: 30%;
    left: 5%;
    animation: hero-dot-2 4s linear 0s infinite alternate;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-hero-7-shape .shape-6 {
        display: none;
    }
}

/*----------------------------------------*/

/*  7.2 About css
/*----------------------------------------*/

.tp-about-bg {
    padding-bottom: 152px;
}

.tp-about-thumb-wrapper {
    display: flex;
}

.tp-about-thumb-1 img {
    width: 100%;
}

.tp-about-thumb-2 {
    margin-left: -82px;
    margin-top: 75px;
}

.tp-about-thumb-2 img {
    width: 100%;
}

.tp-about-shape-1 {
    position: absolute;
    bottom: 50px;
    left: -55px;
    z-index: -1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-about-shape-1 {
        bottom: 65px;
        left: -30px;
    }
}

.tp-about-shape-2 {
    position: absolute;
    left: -33px;
    top: 56px;
    z-index: -1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-about-shape-2 {
        left: -25px;
    }
}

.tp-about-wrap {
    position: relative;
    z-index: 1;
    margin-top: 23px;
}

.tp-about-wrapper {
    margin-left: 43px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-about-wrapper {
        margin-left: 0;
    }
}

.tp-about-wrapper .tp-section p {
    position: relative;
    padding-left: 22px;
}

@media only screen and (max-width: 767px) {
    .tp-about-wrapper .tp-section p {
        margin-left: 0;
    }
}

.tp-about-wrapper .tp-section p::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% - 14px);
    width: 2px;
    background-color: var(--tp-theme-primary);
}

.tp-about-list {
    margin-left: 46px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-about-list {
        margin-bottom: 10px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-about-list {
        margin-left: 0;
    }
}

.tp-about-list-icon {
    flex: 0 0 auto;
    margin-right: 20px;
}

.tp-about-list-icon span {
    display: inline-block;
    border-radius: 64px;
    border: 1px solid rgba(87, 89, 95, 0.1);
    height: 64px;
    width: 64px;
    line-height: 64px;
    text-align: center;
}

.tp-about-list-title {
    font-size: 18px;
    margin-bottom: 0;
    line-height: 1;
}

.tp-about-list-content p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 20px;
}

.tp-about-exprience {
    display: inline-block;
    position: absolute;
    right: -40px;
    bottom: 80px;
    padding: 7px 36px 20px 24px;
    border-radius: 6px;
    border: 1px solid rgba(1, 15, 28, 0.1);
    background: rgba(246, 244, 238, 0.6);
    backdrop-filter: blur(10px);
    min-width: 224px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-about-exprience {
        right: 0;
        bottom: 65px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-about-exprience {
        right: 0;
    }
}

.tp-about-exprience-text {
    align-items: end;
}

.tp-about-exprience-text p {
    color: var(--tp-theme-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    margin-bottom: 0;
    margin-left: 6px;
}

.tp-about-exprience-count {
    margin-bottom: 0;
    color: var(--tp-theme-primary);
    font-size: 90px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -2.7px;
    line-height: 0.74;
}

.tp-about-year-bg {
    margin-top: -80px;
    background: linear-gradient(#9B030C, #B1040E);
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-about-year-bg {
        padding-top: 140px;
    }
}

.tp-about-year-shape .shape-1 {
    position: absolute;
    top: 185px;
    left: 666px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-about-year-shape .shape-1 {
        display: none;
    }
}

.tp-about-year-shape .shape-2 {
    position: absolute;
    bottom: 22px;
    left: 404px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-about-year-shape .shape-2 {
        left: 0;
    }
}

@media only screen and (max-width: 767px) {
    .tp-about-year-shape .shape-2 {
        display: none;
    }
}

.tp-about-year-plr {
    overflow: hidden;
}

.tp-about-year-nav {
    margin-bottom: 100px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-about-year-nav {
        margin-bottom: 65px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-about-year-nav {
        margin-bottom: 40px;
    }
}

.tp-about-year-nav .slick-list {
    position: relative;
    padding: 74px 0 !important;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-about-year-nav .slick-list {
        padding: 30px 0 !important;
    }
}

@media only screen and (max-width: 767px) {
    .tp-about-year-nav .slick-list {
        padding: 15px 0 !important;
    }
}

.tp-about-year-nav .slick-list::after {
    position: absolute;
    content: "";
    top: 0;
    left: 360px;
    height: 1px;
    width: calc(100% - 720px);
    background: rgba(255, 255, 255, 0.44);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-about-year-nav .slick-list::after {
        left: 300px;
        width: calc(100% - 580px);
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-about-year-nav .slick-list::after {
        content: none;
    }
}

.tp-about-year-nav .slick-list::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 360px;
    height: 1px;
    width: calc(100% - 720px);
    background: rgba(255, 255, 255, 0.44);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-about-year-nav .slick-list::before {
        left: 300px;
        width: calc(100% - 580px);
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-about-year-nav .slick-list::before {
        content: none;
    }
}

.tp-about-year-nav .slick-list .slick-track {
    left: 95px;
}

.tp-about-year-nav .slick-list .slick-slide.slick-center .tp-about-year-nav-title {
    font-weight: 600;
}

.tp-about-year-box .slick-list .slick-slide.slick-active .tp-about-year-thumb {
    animation-fill-mode: both;
    animation-name: fadeInUp;
}

.tp-about-year-box .slick-list .slick-slide.slick-active .tp-about-year-content {
    animation-fill-mode: both;
    animation-name: fadeInUp;
}

.tp-about-year-thumb {
    padding-left: 100px;
    animation-delay: 0.5s;
    animation-duration: 0.7s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-about-year-thumb {
        padding-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-about-year-thumb {
        padding-bottom: 30px;
    }
}

.tp-about-year-thumb img {
    border-radius: 12px;
    filter: drop-shadow(14px 14px 14px rgba(50, 7, 16, 0.2));
}

.tp-about-year-content {
    animation-delay: 0.7s;
    animation-duration: 0.9s;
}

.tp-about-year-content-title {
    font-size: 34px;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: -0.68px;
    color: var(--tp-common-white);
}

.tp-about-year-content p {
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.8);
}

.tp-about-year-nav-title {
    font-size: 200px;
    font-weight: 200;
    line-height: 120px;
    margin: 0;
    letter-spacing: -8px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    color: var(--tp-common-white);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-about-year-nav-title {
        font-size: 170px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-about-year-nav-title {
        font-size: 155px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-about-year-nav-title {
        font-size: 120px;
        line-height: 100px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-about-year-nav-title {
        font-size: 100px;
        line-height: 50px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-about-year-nav-title {
        font-size: 80px;
        line-height: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-about-year-nav-title {
        font-size: 50px;
        line-height: 1;
        letter-spacing: -3px;
    }
}

.tp-about-team-shape {
    position: absolute;
    left: 130px;
    bottom: -90px;
    z-index: -1;
}

@media only screen and (max-width: 767px) {
    .tp-about-team-shape {
        display: none;
    }
}

.tp-about-team-item:hover .tp-about-team-thumb img {
    transform: scale(1.1);
}

.tp-about-team-content {
    position: absolute;
    top: 40px;
    left: 35px;
    transition: all 0.3s 0s ease-out;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-about-team-content {
        left: 20px;
    }
}

.tp-about-team-content p {
    font-size: 15px;
    font-weight: 400;
    color: var(--tp-common-white);
}

.tp-about-team-title {
    font-weight: 600;
    font-size: 26px;
    margin-bottom: 0;
    color: var(--tp-common-white);
}

.tp-about-team-thumb {
    border-radius: 10px;
    overflow: hidden;
}

.tp-about-team-thumb img {
    width: 100%;
    border-radius: 10px;
    transition: all 0.3s 0s ease-out;
}

.tp-about-campus-shape .shape-1 {
    position: absolute;
    top: 16%;
    right: 16%;
}

.tp-about-campus-shape .shape-2 {
    position: absolute;
    top: 50%;
    right: 54%;
}

.tp-about-campus-tab .nav {
    display: inline-block;
    margin-bottom: 65px;
    border-bottom: 0;
    padding-left: 75px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-about-campus-tab .nav {
        padding-left: 55px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-about-campus-tab .nav {
        margin-bottom: 50px;
    }
}

.tp-about-campus-tab .nav .nav-item:not(:last-of-type) {
    margin-bottom: 25px;
}

.tp-about-campus-tab .nav .nav-link {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    padding: 0;
    color: #3E4047;
    border-color: transparent;
    position: relative;
}

.tp-about-campus-tab .nav .nav-link:after {
    position: absolute;
    content: "";
    left: -75px;
    height: 1px;
    width: 0px;
    top: 50%;
    background: var(--tp-theme-4);
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
}

.tp-about-campus-tab .nav .nav-link.active {
    color: var(--tp-theme-primary);
    background-color: transparent;
}

.tp-about-campus-tab .nav .nav-link.active::after {
    width: 50px;
}

.tp-about-campus-heading {
    margin-bottom: 60px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-about-campus-heading {
        margin-bottom: 30px;
    }
}

.tp-about-campus-heading p {
    color: #3E4047;
    font-size: 17px;
    font-weight: 300;
    line-height: 24px;
}

.tp-about-campus-title {
    font-size: 60px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 18px;
    letter-spacing: -1.2px;
    color: var(--tp-heading-primary);
}

.tp-about-campus-box {
    padding-left: 75px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-about-campus-box {
        padding-top: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-about-campus-box {
        padding-left: 0;
    }
}

.tp-about-campus-thumb img {
    width: 100%;
    border-radius: 10px;
}

.tp-about-campus-location {
    position: relative;
}

.tp-about-campus-location a {
    display: inline-block;
    width: 234px;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    margin-left: 60px;
    color: var(--tp-text-body);
}

@media only screen and (max-width: 767px) {
    .tp-about-campus-location a {
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-about-campus-location a {
        margin-bottom: 0;
        margin-left: 55px;
    }
}

.tp-about-campus-location span {
    position: absolute;
    top: 0;
    left: 0px;
    display: inline-block;
    height: 44px;
    width: 44px;
    text-align: center;
    line-height: 40px;
    border-radius: 44px;
    margin-right: 10px;
    border: 1px solid rgba(22, 22, 19, 0.1);
}

.tp-about-campus-location span svg {
    color: #B1040E;
}

.tp-about-campus-btn .tp-btn {
    padding: 6px 20px;
    color: var(--tp-theme-primary);
    background-color: transparent;
    border: 1px solid var(--tp-theme-primary);
}

.tp-about-campus-btn .tp-btn:hover {
    color: var(--tp-common-white);
    background-color: var(--tp-red-2);
}

.tp-about-campus-content {
    position: absolute;
    bottom: 20px;
    left: 95px;
    right: 20px;
    margin: auto;
    border-radius: 8px;
    padding: 27px 30px 26px;
    background: var(--tp-common-white);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-about-campus-content {
        padding: 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-about-campus-content {
        left: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-about-campus-content {
        position: static;
        flex-wrap: wrap;
    }
}

.tp-about-4-head {
    font-size: 60px;
    font-weight: 300;
    line-height: 1.17;
    margin-bottom: 45px;
    letter-spacing: -1.2px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-about-4-head {
        font-size: 42px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-about-4-wrapper {
        margin-bottom: 40px;
    }
}

.tp-about-4-btn .tp-btn-3 {
    padding: 12px 44px;
}

.tp-about-4-video {
    display: inline-block;
    margin-left: 25px;
}

@media only screen and (max-width: 767px) {
    .tp-about-4-video {
        display: block;
        margin-left: 0;
        margin-top: 20px;
    }
}

.tp-about-4-video a {
    display: inline-block;
    color: #B1040E;
    border-radius: 100px;
    background: #E8C4C2;
    height: 50px;
    width: 70px;
    text-align: center;
    line-height: 48px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-about-4-video a span {
    display: inline-block;
    transform: translateX(2px);
}

.tp-about-4-video a:hover {
    background-color: #B1040E;
    color: var(--tp-common-white);
}

.tp-about-4-video>span {
    color: var(--tp-heading-primary);
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
    margin-left: 12px;
}

.tp-about-4-thumb-1 img,
.tp-about-4-thumb-2 img,
.tp-about-4-thumb-3 img,
.tp-about-4-thumb-4 img {
    max-width: 100%;
    border-radius: 10px;
}

@media only screen and (max-width: 767px) {
    .tp-about-pt {
        padding-top: 150px;
    }
}

.tp-about-bg-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: -1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-about-banner {
        margin-bottom: 60px;
    }
}

.tp-about-banner-bg {
    height: 660px;
}

.tp-about-banner span {
    font-size: 22px;
    font-weight: 300;
    color: #031F42;
    margin-bottom: 8px;
    display: inline-block;
    letter-spacing: -0.44px;
}

.tp-about-banner-title {
    color: #031F42;
    font-size: 70px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -1.4px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-about-banner-title {
        font-size: 57px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-about-banner-title {
        font-size: 55px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-about-banner-title {
        font-size: 45px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-about-banner-title br {
        display: none;
    }
}

.tp-about-banner-content {
    width: 510px;
    padding: 40px;
    border-radius: 10px;
    backdrop-filter: blur(15px);
    border: 1px solid var(--tp-common-white);
    background: rgba(255, 255, 255, 0.9);
    margin-top: 177px;
    margin-left: 95px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-about-banner-content {
        margin-left: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-about-banner-content {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-about-banner-content {
        width: 350px;
        margin-top: 60px;
    }
}

.tp-about-banner-content .span {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 12px;
    line-height: 20px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: var(--tp-common-white);
    background: var(--tp-dashboard-secondary);
}

.tp-about-banner-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #141820;
    margin-bottom: 30px;
}

.tp-about-banner-content a {
    position: relative;
    font-size: 12px;
    font-weight: 500;
    color: #141820;
    z-index: 2;
    text-transform: uppercase;
}

.tp-about-banner-content a span {
    margin-left: 2px;
    display: inline-block;
    height: 34px;
    width: 34px;
    color: #141820;
    text-align: center;
    line-height: 30px;
    border-radius: 34px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    border: 1px solid rgba(20, 24, 32, 0.14);
}

.tp-about-banner-content a:hover {
    color: var(--tp-dashboard-secondary);
}

.tp-about-banner-content a:hover span {
    color: var(--tp-common-white);
    background-color: var(--tp-dashboard-secondary);
}

.tp-about-banner-content-year {
    position: absolute;
    bottom: 50px;
    right: 30px;
}

@media only screen and (max-width: 767px) {
    .tp-about-banner-content-year {
        position: static;
    }
}

.tp-about-banner-content-year span {
    font-size: 220px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    background: url(../img/about/about/about-thumb-1.jpg);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-position: 75%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-about-banner-content-year span {
        background-position: 55%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-about-banner-content-year span {
        background-position: 15%;
    }
}

.tp-about-banner-content-year p {
    font-size: 14px;
    font-weight: 500;
    color: #141820;
    margin: 0;
}

.tp-about-tutor-subtitle {
    margin-bottom: 15px;
}

.tp-about-tutor-subtitle span {
    display: inline-block;
    height: 46px;
    width: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 50%;
    margin-right: 15px;
    background: linear-gradient(180deg, rgba(81, 105, 241, 0.1) 0%, rgba(190, 200, 255, 0.1) 100%);
}

.tp-about-tutor-subtitle p {
    color: #57595F;
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    letter-spacing: -0.4px;
}

.tp-about-tutor-title {
    font-size: 50px;
    font-weight: 600;
    color: #031F42;
    letter-spacing: -1px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-about-tutor-title {
        font-size: 44px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-about-tutor-title {
        font-size: 42px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-about-tutor-title br {
        display: none;
    }
}

.tp-about-tutor-content p {
    font-size: 18px;
    font-weight: 400;
    color: #686A6D;
    letter-spacing: -0.18px;
}

@media only screen and (max-width: 767px) {
    .tp-about-tutor-content p br {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-about-tutor-heading {
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-about-tutor-right {
        margin-bottom: 50px;
    }
}

/*----------------------------------------*/

/*  7.3 Instragram css
/*----------------------------------------*/

.tp-instagram-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    z-index: 1;
}

.tp-instagram-item::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-radius: 10px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.4);
}

.tp-instagram-item:hover::before {
    opacity: 1;
    visibility: visible;
}

.tp-instagram-item:hover .tp-instagram-shape {
    opacity: 1;
    margin-top: 0;
}

.tp-instagram-item:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.tp-instagram-item img {
    width: 100%;
    border-radius: 10px;
    transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
}

.tp-instagram-shape {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    cursor: pointer;
    margin-top: 15px;
    z-index: 3;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
}

/*----------------------------------------*/

/*  7.4 Cta css
/*----------------------------------------*/

.tp-cta-bg {
    padding-top: 60px;
    padding-bottom: 60px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.tp-cta-logo {
    flex: 0 0 auto;
    margin-right: 25px;
}

@media only screen and (max-width: 767px) {
    .tp-cta-logo {
        margin-bottom: 25px;
    }
}

.tp-cta-content span {
    color: var(--tp-common-white);
    font-family: var(--tp-ff-secondary);
    font-size: 24px;
    font-style: italic;
    font-weight: 500;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-cta-wrapper {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-cta-wrapper {
        flex-wrap: wrap;
    }
}

.tp-cta-title {
    color: var(--tp-common-white);
    font-family: var(--tp-ff-primary);
    font-size: 40px;
    font-weight: 500;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-cta-title {
        font-size: 34px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-cta-title {
        font-size: 36px;
        margin-bottom: 20px;
    }
}

.tp-cta-btn-wrap {
    position: relative;
    z-index: 1;
}

.tp-cta-btn .tp-btn {
    background-color: var(--tp-common-white);
    color: var(--tp-theme-primary);
}

.tp-cta-btn .tp-btn:hover {
    border-color: rgba(255, 255, 255, 0.92);
}

.tp-cta-btn .tp-btn span {
    display: inline-block;
    margin-left: 4px;
}

.tp-cta-shape-1 {
    position: absolute;
    top: -30px;
    right: 28px;
    z-index: -1;
}

.tp-cta-2-bg {
    padding-top: 72px;
    padding-bottom: 65px;
    background-color: #0F4E9B;
}

.tp-cta-2-title {
    color: var(--tp-common-white);
    font-size: 60px;
    font-weight: 300;
    letter-spacing: -1.2px;
    margin-bottom: 12px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-cta-2-title {
        font-size: 48px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-cta-2-title {
        font-size: 44px;
    }
}

.tp-cta-2-title span {
    color: #FF9933;
    font-size: 60px;
    display: inline-block;
    position: relative;
    font-weight: 700;
}

.tp-cta-2-wrapper p {
    color: var(--tp-common-white);
    font-size: 20px;
    letter-spacing: -0.4px;
    margin-bottom: 53px;
}

.tp-cta-2-form {
    position: relative;
}

.tp-cta-2-form span {
    color: #FFEE54;
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 238, 84, 0.2);
    text-align: center;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 12px;
}

@media only screen and (max-width: 767px) {
    .tp-cta-2-form span {
        left: 8px;
    }
}

.tp-cta-2-form span svg {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

.tp-cta-2-form input {
    color: var(--tp-common-white);
    font-size: 18px;
    height: 60px;
    background-color: transparent;
    border-radius: 200px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 0 150px 0 62px;
}

@media only screen and (max-width: 767px) {
    .tp-cta-2-form input {
        padding: 0 150px 0 55px;
    }
}

.tp-cta-2-form input:focus {
    border-color: var(--tp-common-white);
}

.tp-cta-2-form input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    font-size: 17px;
    color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 767px) {
    .tp-cta-2-form input::-webkit-input-placeholder {
        font-size: 14px;
    }
}

.tp-cta-2-form input::-moz-placeholder {
    /* Firefox 19+ */
    font-size: 17px;
    color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 767px) {
    .tp-cta-2-form input::-moz-placeholder {
        font-size: 14px;
    }
}

.tp-cta-2-form input:-moz-placeholder {
    /* Firefox 4-18 */
    font-size: 17px;
    color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 767px) {
    .tp-cta-2-form input:-moz-placeholder {
        font-size: 14px;
    }
}

.tp-cta-2-form input:-ms-input-placeholder {
    /* IE 10+  Edge*/
    font-size: 17px;
    color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 767px) {
    .tp-cta-2-form input:-ms-input-placeholder {
        font-size: 14px;
    }
}

.tp-cta-2-form input::placeholder {
    /* MODERN BROWSER */
    font-size: 17px;
    color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 767px) {
    .tp-cta-2-form input::placeholder {
        font-size: 14px;
    }
}

.tp-cta-2-btn {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 10px;
}

@media only screen and (max-width: 767px) {
    .tp-cta-2-btn {
        right: 6px;
    }
}

.tp-cta-2-btn .tp-btn-round {
    background-color: #FF9933;
    color: #1E1E2F;
}

.tp-cta-2-btn .tp-btn-round:hover {
    background-color: rgba(255, 194, 33, 0.9);
}

.tp-cta-2-info-list {
    margin-top: 22px;
    margin-bottom: 17px;
}

.tp-cta-2-info-list>span {
    color: var(--tp-common-white);
    font-size: 15px;
    font-weight: 500;
    opacity: 0.6;
    margin: 0 30px;
    display: inline-block;
}

@media only screen and (max-width: 767px) {
    .tp-cta-2-info-list>span {
        margin: 0 16px;
    }
}

.tp-cta-2-info-list>span>span {
    margin: 4px;
    display: inline-block;
}

.tp-cta-3-bg {
    position: relative;
    background: linear-gradient(180deg, rgba(246, 245, 239, 0) 0%, #F6F5EF 100%);
}

.tp-cta-3-section {
    margin-top: 70px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-cta-3-section {
        margin-top: 0;
        margin-bottom: 30px;
    }
}

.tp-cta-3-title {
    font-size: 34px;
    font-weight: 500;
    line-height: 40px;
    margin-bottom: 21px;
}

.tp-cta-3-border {
    height: 60px;
    width: 2px;
    background-color: #E4E3DD;
    display: inline-block;
    margin-bottom: 12px;
}

.tp-cta-3-wrap {
    position: relative;
    padding: 74px 40px;
    border-radius: 40px;
    background: #F6F5EF;
    margin-bottom: -99px;
    z-index: 2;
    border: 20px solid var(--tp-common-white);
}

@media only screen and (max-width: 767px) {
    .tp-cta-3-wrap {
        padding: 50px 30px;
    }
}

.tp-cta-3-form-input {
    margin-bottom: 24px;
}

.tp-cta-3-form-input input {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(17, 22, 29, 0.12);
}

.tp-cta-3-form-input input:focus {
    border-color: var(--tp-theme-3);
    box-shadow: 0px 1px 2px 0px rgba(65, 95, 251, 0.06), 0px 4px 10px 0px rgba(255, 113, 98, 0.06), 0px 0px 0px 3px rgba(255, 113, 98, 0.02);
}

.tp-cta-3-form-input input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #949597;
    font-size: 15px;
    line-height: 24px;
}

.tp-cta-3-form-input input::-moz-placeholder {
    /* Firefox 19+ */
    color: #949597;
    font-size: 15px;
    line-height: 24px;
}

.tp-cta-3-form-input input:-moz-placeholder {
    /* Firefox 4-18 */
    color: #949597;
    font-size: 15px;
    line-height: 24px;
}

.tp-cta-3-form-input input:-ms-input-placeholder {
    /* IE 10+  Edge*/
    color: #949597;
    font-size: 15px;
    line-height: 24px;
}

.tp-cta-3-form-input input::placeholder {
    /* MODERN BROWSER */
    color: #949597;
    font-size: 15px;
    line-height: 24px;
}

.tp-cta-3-form-input textarea {
    height: 160px;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(17, 22, 29, 0.12);
    resize: none;
}

.tp-cta-3-form-input textarea:focus {
    border-color: var(--tp-theme-3);
}

.tp-cta-3-btn button {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border-radius: 20px;
    padding: 14px 0 14px 0;
    background: #11161D;
    color: var(--tp-common-white);
    box-shadow: 0px 1px 3px 0px rgba(17, 22, 29, 0.12);
}

.tp-cta-3-btn button:hover {
    background-color: var(--tp-theme-3);
}

.tp-cta-3-shape-1 {
    position: absolute;
    bottom: -3px;
    right: 65px;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-cta-3-shape-1 {
        right: 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-cta-3-shape-1 {
        display: none;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-cta-3-shape-1 img {
        max-width: 200px;
    }
}

.tp-cta-3-shape-2 {
    position: absolute;
    top: 39px;
    right: 69px;
    animation: tpswing 1s ease-in-out 0.1s forwards infinite alternate;
    transform-origin: top left;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-cta-3-shape-2 {
        top: 33px;
        right: 40px;
    }
}

.tp-cta-3-shape-3 {
    position: absolute;
    bottom: 52px;
    left: 67px;
    animation: bubbles 3s linear 1s infinite;
}

.tp-live-bg {
    border-radius: 20px;
    background: var(--tp-common-white);
    box-shadow: 0px 20px 80px 0px rgba(3, 31, 66, 0.1);
    border: 25px solid var(--tp-common-white);
    z-index: 1;
    position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-live-bg {
        border: 10px solid var(--tp-common-white);
    }
}

.tp-live-bg::before {
    z-index: -1;
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    border-radius: 20px;
    height: calc(100% + 100px);
    width: calc(100% - 45px);
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 30px 50px -14px rgba(26, 31, 35, 0.07);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-live-bg::before {
        height: calc(100% + 70px);
        width: calc(100% - 110px);
    }
}

@media only screen and (max-width: 767px) {
    .tp-live-bg::before {
        height: calc(100% + 60px);
        width: calc(100% - 30px);
    }
}

.tp-live-content {
    margin-left: -5px;
    padding-top: 21px;
    padding-bottom: 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-live-content {
        margin-left: 25px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-live-content {
        margin-left: 0px;
        padding-bottom: 0;
    }
}

.tp-live-tag {
    display: inline-block;
    border-radius: 3px;
    background: rgba(23, 162, 184, 0.08);
    color: #17A2B8;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 10px;
    line-height: 1;
    margin-bottom: 15px;
}

.tp-live-teacher {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 10px;
    align-items: end;
    margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
    .tp-live-teacher {
        grid-template-columns: repeat(1, 1fr);
        grid-column-gap: 0;
    }
}

@media only screen and (max-width: 767px) {
    .tp-live-teacher-info {
        margin-bottom: 10px;
    }
}

.tp-live-teacher-thumb {
    flex: 0 0 auto;
    margin-right: 10px;
}

.tp-live-teacher-thumb img {
    height: 36px;
    width: 36px;
    object-fit: cover;
    border-radius: 50%;
}

.tp-live-teacher-text span {
    color: #7A7B81;
    font-size: 13px;
    font-weight: 300;
}

.tp-live-teacher-title {
    color: #57595F;
    font-size: 15px;
    font-weight: 500;
}

.tp-live-thumb {
    position: relative;
    display: inline-block;
}

.tp-live-thumb img {
    border-radius: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-live-thumb img {
        width: 100%;
    }
}

.tp-live-thumb-video {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 1;
}

.tp-live-thumb-text {
    position: absolute;
    bottom: 17px;
    right: 17px;
    z-index: 0;
}

.tp-live-thumb-text span {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    line-height: 34px;
    border-radius: 8px;
    opacity: 0.61;
    text-align: center;
    background: #1E1E2F;
    backdrop-filter: blur(5px);
    color: var(--tp-common-white);
    height: 36px;
    width: 100px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.tp-live-thumb-text span svg {
    margin-right: 5px;
    display: inline-block;
    transform: translateY(-3px);
}

.tp-live-rating {
    margin-left: -30px;
}

@media only screen and (max-width: 767px) {
    .tp-live-rating {
        margin-left: 0;
    }
}

.tp-live-rating p {
    color: #031233;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1;
}

.tp-live-rating p span {
    color: #57595F;
}

.tp-live-rating-star i {
    color: #FFB21D;
    font-size: 13px;
}

.tp-live-title {
    color: var(--tp-heading-2);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 28px;
}

@media only screen and (max-width: 767px) {
    .tp-live-title {
        margin-bottom: 12px;
        font-size: 20px;
    }
}

.tp-live-title a:hover {
    color: var(--tp-theme-secondary);
}

@media only screen and (max-width: 767px) {
    .tp-live-title br {
        display: none;
    }
}

.tp-live-total {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 5px;
    align-items: end;
}

@media only screen and (max-width: 767px) {
    .tp-live-total {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    .tp-live-total-student {
        margin-bottom: 20px;
    }
}

.tp-live-total-student span {
    display: block;
    color: #57595F;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    padding-left: 12px;
}

.tp-live-total-student span::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: #0CBC87;
}

.tp-live-join .tp-btn-border {
    padding: 10px 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-live-join .tp-btn-border {
        padding: 10px 18px;
    }
}

.tp-live-join .tp-btn-border span {
    margin-left: 0;
    margin-right: 3px;
    display: inline-block;
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

.tp-live-join .tp-btn-border i {
    padding-left: 56px;
}

.tp-live-btn-icon span {
    position: absolute;
    top: 7px;
    left: 7px;
    display: inline-block;
    height: 50px;
    width: 50px;
    line-height: 48px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(30, 30, 47, 0.61);
    backdrop-filter: blur(5px);
}

.tp-live-btn-time {
    position: absolute;
    right: 17px;
    bottom: 17px;
    display: inline-block;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(30, 30, 47, 0.61);
    backdrop-filter: blur(5px);
}

.tp-live-btn-time span {
    color: var(--tp-common-white);
    font-size: 15px;
    padding: 5px 15px;
    font-weight: 500;
    display: inline-block;
}

.tp-live-btn-time span i {
    margin-right: 3px;
}

.tp-live-7-item {
    padding: 15px;
    border-radius: 20px;
    border: 1px solid rgba(3, 31, 66, 0.08);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-live-7-item {
        flex-wrap: wrap;
    }
}

.tp-live-7-item-thumb {
    margin-right: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-live-7-item-thumb {
        margin-right: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-live-7-item-thumb {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }
}

.tp-live-7-item-thumb img {
    border-radius: 14px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-live-7-item-thumb img {
        width: 100%;
    }
}

.tp-live-7-item-content p {
    font-weight: 500;
    color: #636366;
    margin-bottom: 22px;
    font-family: var(--tp-ff-manrope);
}

@media only screen and (max-width: 767px) {
    .tp-live-7-item-content p {
        margin-bottom: 10px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-live-7-item-content p br {
        display: none;
    }
}

.tp-live-7-item-content a {
    position: relative;
    font-size: 16px;
    font-weight: 600;
    color: var(--tp-theme-9);
    font-family: var(--tp-theme-9);
}

.tp-live-7-item-content a span {
    margin-left: 5px;
    display: inline-block;
    transform: translateY(-2px);
}

.tp-live-7-item-content a::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    background-color: var(--tp-theme-9);
}

.tp-live-7-item-content a:hover::after {
    width: 100%;
}

.tp-live-7-title {
    margin-bottom: 20px;
}

.tp-live-7-subtitle {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 7px;
    display: inline-block;
    color: var(--tp-theme-9);
    font-family: var(--tp-ff-manrope);
}

.tp-plan-4-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s linear;
    transform: scale(1);
    background-size: cover;
    background-repeat: no-repeat;
}

.tp-plan-4-wrap {
    position: relative;
    z-index: 2;
    padding: 175px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-plan-4-wrap {
        padding: 150px 0;
    }
}

@media only screen and (max-width: 767px) {
    .tp-plan-4-wrap {
        padding: 140px 0;
    }
}

.tp-plan-4-wrap::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(22, 22, 19, 0.5);
    z-index: -1;
}

.tp-plan-4-section span {
    color: var(--tp-common-white);
    font-size: 16px;
    display: inline-block;
    margin-bottom: 6px;
}

.tp-plan-4-section-title {
    color: var(--tp-common-white);
    font-size: 60px;
    font-weight: 700;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-plan-4-section-title {
        font-size: 55px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-plan-4-section-title {
        font-size: 52px;
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-plan-4-section-title {
        font-size: 42px;
        margin-bottom: 30px;
    }
}

.tp-plan-4-wrapper {
    margin-left: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-plan-4-wrapper {
        margin-left: 0;
    }
}

.tp-plan-4-item.active {
    cursor: pointer;
}

.tp-plan-4-item.active .tp-plan-4-bg {
    opacity: 1;
    visibility: visible;
    transform: scale(1.03);
}

.tp-plan-4-content {
    border-radius: 10px;
    position: relative;
    display: block;
    min-height: 320px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    z-index: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-plan-4-content {
        min-height: 300px;
    }
}

.tp-plan-4-content::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    z-index: -1;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-plan-4-content:hover::before {
    background-color: var(--tp-theme-4);
    top: 10px;
    bottom: 10px;
    height: calc(100% - 20px);
    border-color: var(--tp-theme-4);
}

.tp-plan-4-content:hover span,
.tp-plan-4-content:hover p {
    opacity: 1;
}

.tp-plan-4-content span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 8px;
    opacity: 0;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-plan-4-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    margin-bottom: 0;
    font-weight: 500;
    opacity: 0;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-plan-4-title {
    color: var(--tp-common-white);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.tp-cta-7-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tp-cta-7-btn {
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    padding: 14px 26px;
    display: inline-block;
    color: var(--tp-heading-2);
    border: 1px solid #FFD25D;
    font-family: var(--tp-ff-manrope);
    background-color: #FFD25D;
}

.tp-cta-7-btn:not(:last-child) {
    margin-right: 10px;
}

.tp-cta-7-btn:focus {
    color: var(--tp-common-white);
}

.tp-cta-7-btn:hover {
    color: var(--tp-common-white);
    background-color: transparent;
    border-color: var(--tp-common-white);
}

.tp-cta-7-btn.two {
    color: var(--tp-common-white);
    background-color: transparent;
    border-color: var(--tp-common-white);
}

.tp-cta-7-btn.two:hover {
    color: var(--tp-heading-2);
    background-color: #FFD25D;
    border-color: #FFD25D;
}

.tp-cta-7-title {
    font-size: 66px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 50px;
    letter-spacing: -2.64px;
    color: var(--tp-common-white);
    font-family: var(--tp-ff-manrope);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-cta-7-title {
        font-size: 54px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-cta-7-title {
        margin-bottom: 30px;
        font-size: 45px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-cta-7-title br {
        display: none;
    }
}

.tp-cta-7-subtitle {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 18px;
    display: inline-block;
    color: var(--tp-common-white);
    font-family: var(--tp-ff-manrope);
}

/*----------------------------------------*/

/*  7.5 Contact css
/*----------------------------------------*/

.tp-contact-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-contact-p {
        padding-bottom: 80px;
    }
}

.tp-contact-shape {
    position: absolute;
    bottom: 180px;
    left: 0;
}

.tp-contact-shape span svg {
    width: 100%;
}

.tp-contact-shape span svg path {
    stroke: #F4E7FF;
    stroke-dasharray: 3500;
    stroke-dashoffset: 4500;
    animation: dash 4s linear forwards;
}

.tp-contact-shape-2 {
    position: absolute;
    top: 44%;
    right: 410px;
}

.tp-contact-heading {
    margin-bottom: 55px;
}

.tp-contact-heading p {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: -0.44px;
    color: var(--tp-text-body);
}

.tp-contact-title {
    font-size: 70px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -1.4px;
    color: var(--tp-heading-2);
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-contact-title {
        font-size: 62px;
    }
}

.tp-contact-from-box {
    border-radius: 20px;
    padding: 70px 80px 65px;
    backdrop-filter: blur(15px);
    fill: rgba(255, 255, 255, 0.1);
    filter: drop-shadow(0px 40px 80px rgba(51, 65, 140, 0.06));
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-contact-from-box {
        padding: 60px 50px 60px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-contact-from-box {
        padding: 30px;
    }
}

.tp-contact-from-title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--tp-heading-2);
}

.tp-contact-input-form label {
    color: #303651;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 10px;
}

.tp-contact-input-form input,
.tp-contact-input-form textarea {
    border-radius: 6px;
    border: 1px solid #E6E8F0;
    background: var(--tp-common-white);
    box-shadow: 0px 1px 1px 0px rgba(48, 54, 81, 0.06), inset 0px 1px 3px rgba(48, 54, 81, 0.06);
    transition: all 0.3s 0s ease-out;
}

.tp-contact-input-form input:focus,
.tp-contact-input-form textarea:focus {
    border-color: var(--tp-theme-7);
    box-shadow: 0px 1px 2px 0px rgba(65, 95, 251, 0.06), 0px 4px 10px 0px rgba(65, 95, 251, 0.06), 0px 0px 0px 3px rgba(65, 95, 251, 0.2);
}

.tp-contact-input-form textarea {
    resize: none;
    height: 160px;
}

.tp-contact-input-form .tp-contact-input {
    margin-bottom: 15px;
}

.tp-contact-input-form .tp-contact-input.schedule {
    margin-bottom: 20px;
}

.tp-contact-input-form .tp-contact-input.schedule label {
    font-size: 16px;
    margin-bottom: 7px;
    color: var(--tp-heading-primary);
}

.tp-contact-input-form .tp-contact-input.schedule label span {
    font-size: 15px;
    font-weight: 500;
    padding: 9px 25px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--tp-common-white);
    background: var(--tp-heading-primary);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-contact-input-form .tp-contact-input.schedule label span:hover {
    background-color: var(--tp-theme-primary);
}

.tp-contact-input-form .tp-contact-input.schedule label.hide {
    position: absolute;
    top: 52%;
    margin: 0;
    right: 10px;
}

.tp-contact-input-form .tp-contact-input.schedule input:focus {
    border-color: rgba(171, 12, 47, 0.4901960784);
    box-shadow: 0px 1px 2px 0px rgba(65, 95, 251, 0.06), 0px 4px 10px 0px rgba(65, 95, 251, 0.06), 0px 0px 0px 3px rgba(171, 12, 47, 0.2);
}

.tp-contact-input-form .tp-contact-input.schedule textarea {
    height: 140px;
}

.tp-contact-input-form .tp-contact-input.schedule textarea:focus {
    border-color: rgba(171, 12, 47, 0.4901960784);
    box-shadow: 0px 1px 2px 0px rgba(65, 95, 251, 0.06), 0px 4px 10px 0px rgba(65, 95, 251, 0.06), 0px 0px 0px 3px rgba(171, 12, 47, 0.2);
}

.tp-contact-input-form .tp-contact-input .icon {
    position: absolute;
    top: 50%;
    right: 18px;
}

.tp-contact-input-form.application {
    margin-bottom: 45px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-contact-input-form.application {
        margin-bottom: 20px;
    }
}

.tp-contact-input-remeber {
    margin-bottom: 25px;
}

.tp-contact-input-remeber input {
    display: none;
}

.tp-contact-input-remeber input:checked~label::after {
    background-color: var(--tp-theme-7);
    border-color: var(--tp-theme-7);
}

.tp-contact-input-remeber input:checked~label::before {
    visibility: visible;
    opacity: 1;
}

.tp-contact-input-remeber label {
    font-size: 15px;
    font-weight: 300;
    color: #57595F;
    position: relative;
    padding-left: 26px;
    z-index: 1;
}

.tp-contact-input-remeber label::after {
    position: absolute;
    content: "";
    top: 4px;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    z-index: -1;
    border-radius: 4px;
    border: 1px solid #DBDDE5;
    background: var(--tp-common-white);
    box-shadow: 0px 1px 4px 0px rgba(48, 54, 81, 0.06) inset, 0px 1px 1px 0px rgba(48, 54, 81, 0.06);
    -webkit-transition: all 0.2s 0s ease-out;
    -moz-transition: all 0.2s 0s ease-out;
    -ms-transition: all 0.2s 0s ease-out;
    -o-transition: all 0.2s 0s ease-out;
    transition: all 0.2s 0s ease-out;
}

.tp-contact-input-remeber label::before {
    position: absolute;
    content: url("../img/live/check.svg");
    top: 4px;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    color: var(--tp-common-white);
    -webkit-transition: all 0.2s 0s ease-out;
    -moz-transition: all 0.2s 0s ease-out;
    -ms-transition: all 0.2s 0s ease-out;
    -o-transition: all 0.2s 0s ease-out;
    transition: all 0.2s 0s ease-out;
}

.tp-contact-input-remeber label a:hover {
    color: var(--tp-theme-7);
}

.tp-contact-input-remeber label:hover {
    cursor: pointer;
}

.tp-contact-input-remeber.login label::after {
    top: 5px;
}

.tp-contact-input-remeber.login label::before {
    top: 5px;
}

.tp-contact-input-remeber.schedule label {
    font-size: 15px;
    font-weight: 400;
    color: #5B5D5F;
}

.tp-contact-input-remeber.schedule label::after {
    top: 4px;
}

.tp-contact-input-remeber.schedule label::before {
    top: 4px;
}

.tp-contact-input-remeber.schedule input:checked~label::after {
    background-color: var(--tp-theme-primary);
    border-color: var(--tp-theme-primary);
}

.tp-contact-input-remeber.schedule input:checked~label::before {
    visibility: visible;
    opacity: 1;
}

.tp-contact-input-remeber.request {
    margin-top: 5px;
}

.tp-contact-btn .tp-btn-inner {
    font-size: 17px;
    padding: 16px 66px;
    box-shadow: 0px 0px 1px 0px #092097, 0px 1px 2px 0px rgba(9, 32, 151, 0.25);
}

.tp-contact-btn .tp-btn-inner:hover {
    box-shadow: none;
    background: #425EFF;
    color: var(--tp-common-white);
}

.tp-contact-main-title {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 45px;
    letter-spacing: -0.52px;
    color: var(--tp-heading-2);
}

.tp-contact-info-item {
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #E6E8F0;
    background: var(--tp-common-white);
    box-shadow: 0px 1px 4px 0px rgba(48, 54, 81, 0.06) inset, 0px 1px 1px 0px rgba(48, 54, 81, 0.06);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-contact-info-item {
        padding: 18px;
    }
}

.tp-contact-info-item p {
    color: #727378;
    font-size: 15px;
    font-weight: 300;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.tp-contact-info-item a {
    position: relative;
    font-size: 18px;
    font-weight: 400;
    color: var(--tp-heading-2);
}

.tp-contact-info-item a::after {
    position: absolute;
    content: "";
    bottom: -2px;
    left: 0;
    height: 1px;
    width: 100%;
    background: #E6E8F0;
}

.tp-contact-info-item a::before {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    bottom: -2px;
    left: auto;
    right: 0;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    background: var(--tp-heading-2);
    z-index: 1;
}

.tp-contact-info-item a:hover::before {
    width: 100%;
    right: auto;
    left: 0;
}

.tp-contact-info-icon {
    margin-bottom: 30px;
}

.tp-contact-info-icon span {
    display: inline-block;
    text-align: center;
    line-height: 42px;
    height: 46px;
    width: 46px;
    border-radius: 6px;
    border: 1px solid #E6E8F0;
    background: var(--tp-common-white);
    box-shadow: 0px 1px 4px 0px rgba(48, 54, 81, 0.06) inset, 0px 1px 1px 0px rgba(48, 54, 81, 0.06);
}

.tp-contact-info-title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: var(--tp-heading-2);
}

.tp-contact-map-content {
    width: 100%;
    height: 500px;
}

.tp-contact-map-content iframe {
    height: 100%;
    width: 100%;
}

.tp-schedule-from-box {
    border-radius: 6px;
    padding: 100px;
    background-color: var(--tp-common-white);
    box-shadow: 0px 1px 1px 0px rgba(22, 22, 19, 0.14), 0px 1px 2px 1px rgba(22, 22, 19, 0.06);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-schedule-from-box {
        padding: 60px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-schedule-from-box {
        padding: 30px;
    }
}

.tp-schedule-btn .tp-btn {
    border-radius: 6px;
    padding: 12px 24px;
}

.tp-schedule-btn .tp-btn span {
    margin-left: 80px;
}

.tp-application-heading {
    margin-bottom: 85px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-application-heading {
        margin-bottom: 30px;
    }
}

.tp-application-heading.request {
    margin-bottom: 50px;
}

.tp-application-title {
    margin: 0;
    font-size: 70px;
    font-weight: 600;
    letter-spacing: -1.4px;
    color: var(--tp-heading-primary);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-application-title {
        font-size: 60px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-application-title {
        font-size: 50px;
    }
}

.tp-application-subtitle {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 0px;
    letter-spacing: -0.2px;
    color: rgba(22, 22, 19, 0.8);
}

.tp-application-from-box {
    padding: 100px;
    border-radius: 6px;
    background: var(--tp-common-white);
    box-shadow: 0px 1px 1px 0px rgba(22, 22, 19, 0.14), 0px 1px 2px 1px rgba(22, 22, 19, 0.06);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-application-from-box {
        padding: 70px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-application-from-box {
        padding: 60px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-application-from-box {
        padding: 30px;
    }
}

.tp-application-from-title {
    color: #000;
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 30px;
    letter-spacing: -0.52px;
}

.tp-application-select .nice-select {
    font-size: 16px;
    height: 54px;
    line-height: 54px;
    border-radius: 6px;
    border: 1px solid #E6E8F0;
    background: var(--tp-common-white);
    box-shadow: 0px 1px 4px 0px rgba(48, 54, 81, 0.06) inset, 0px 1px 1px 0px rgba(48, 54, 81, 0.06);
}

.tp-application-select .nice-select:focus {
    border-color: rgba(171, 12, 47, 0.4901960784);
    box-shadow: 0px 1px 2px 0px rgba(65, 95, 251, 0.06), 0px 4px 10px 0px rgba(65, 95, 251, 0.06), 0px 0px 0px 3px rgba(171, 12, 47, 0.2);
}

.tp-application-select .nice-select::after {
    color: #686A6D;
    right: 25px;
}

.tp-application-select .nice-select .list {
    box-shadow: none;
    stroke-width: 1px;
    stroke: #E6E8F0;
    padding: 10px 16px 10px;
    fill: var(--tp-common-white);
    filter: drop-shadow(0px 4px 14px rgba(8, 19, 34, 0.12));
}

.tp-application-select .nice-select .option {
    color: #757C8E;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    min-height: 0;
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 2px;
}

.tp-application-select .nice-select .option:hover {
    color: #4A4E68;
    background-color: #F4F5FA;
}

/*----------------------------------------*/

/*  7.6 Contact css
/*----------------------------------------*/

.tp-error-content p {
    color: #57575A;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 25px;
}

.tp-error-content .tp-btn-inner {
    padding: 8px 28px;
}

.tp-error-title {
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 44px;
    letter-spacing: -1.28px;
    color: var(--tp-common-black-1);
}

.tp-error-title-sm {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.26px;
    text-transform: uppercase;
    color: var(--tp-common-black-1);
}

.tp-error-thumb img {
    width: 100%;
}

.tp-privacy-heading {
    margin-bottom: 35px;
}

.tp-privacy-title {
    font-size: 60px;
    font-weight: 700;
    color: var(--tp-heading-primary);
}

@media only screen and (max-width: 767px) {
    .tp-privacy-title {
        font-size: 42px;
    }
}

.tp-privacy-box {
    padding: 36px 40px 40px 40px;
    background-color: var(--tp-common-white);
    box-shadow: 0px 1px 2px 0px rgba(18, 20, 32, 0.2);
}

.tp-privacy-content {
    margin-bottom: 40px;
}

.tp-privacy-content-title {
    font-size: 26px;
    margin-bottom: 15px;
    color: var(--tp-heading-primary);
}

.tp-privacy-content p {
    color: #57575A;
    margin-bottom: 15px;
}

.tp-privacy-content ul li {
    position: relative;
    list-style: none;
    font-size: 18px;
    color: #57575A;
    padding-left: 16px;
}

.tp-privacy-content ul li:not(:last-of-type) {
    margin-bottom: 7px;
}

.tp-privacy-content ul li::after {
    position: absolute;
    content: "";
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #57575A;
}

.tp-privacy-content-bottom p {
    font-style: italic;
    font-size: 14px;
}

/*----------------------------------------*/

/*  7.7 Counter css
/*----------------------------------------*/

.tp-counter-wrap {
    margin-top: -112px;
}

.tp-counter-bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 14px;
}

.tp-counter-item {
    padding-top: 43px;
    padding-bottom: 66px;
    position: relative;
    z-index: 1;
}

@media only screen and (max-width: 767px) {
    .tp-counter-item {
        padding-top: 25px;
        padding-bottom: 30px;
    }
}

.tp-counter-item::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    right: -15px;
    height: 120px;
    width: 2px;
    background: rgba(255, 255, 255, 0.14);
}

@media only screen and (max-width: 767px) {
    .tp-counter-item::before {
        display: none;
    }
}

.tp-counter-item.item-end::before {
    display: none;
}

.tp-counter-item p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0px;
    line-height: 1;
}

.tp-counter-count {
    margin-bottom: 3px;
    font-size: 100px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -3px;
    line-height: 1;
    color: var(--tp-common-white);
}

.tp-counter-4-bg {
    background-color: #EDEBE5;
    border-radius: 15px;
    padding: 82px 25px 73px 25px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-counter-4-bg {
        padding: 50px 25px 50px 25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-counter-4-item {
        margin-bottom: 30px;
    }
}

.tp-counter-4-icon {
    margin-bottom: 12px;
}

.tp-counter-4-icon span {
    display: inline-block;
    height: 80px;
    width: 80px;
    line-height: 78px;
    text-align: center;
    border-radius: 40px;
    background: linear-gradient(180deg, #FFFCF4 0%, rgba(246, 244, 239, 0) 100%);
}

.tp-counter-4-count {
    color: #161613;
    font-size: 100px;
    font-style: italic;
    font-weight: 300;
    letter-spacing: -3px;
    margin-bottom: 4px;
}

.tp-counter-4-content p {
    color: #484848;
    font-size: 16px;
    font-weight: 300;
    line-height: 30px;
    margin-bottom: 0;
}

.tp-counter-4-border {
    height: 1px;
    width: 220px;
    background: rgba(22, 22, 19, 0.08);
    margin: 0 auto;
    margin-bottom: 15px;
}

/*----------------------------------------*/

/*  7.8 Service css
/*----------------------------------------*/

.tp-service-bg {
    position: relative;
    z-index: 1;
    padding-bottom: 77px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.tp-service-wrap {
    border-radius: 14px;
    padding: 35px 30px 10px 30px;
    margin-bottom: 38px;
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-service-wrap {
        padding: 40px 15px 10px 15px;
    }
}

.tp-service-wrap::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 14px;
    background-color: #F6F4EE;
    box-shadow: 10px 10px 20px 0px rgba(36, 2, 7, 0.16);
    backdrop-filter: blur(5px);
    z-index: -1;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-service-item {
    margin-top: -70px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-service-item {
        margin-bottom: 70px;
    }
}

.tp-service-item:hover .tp-service-wrap::before {
    top: 10px;
    height: calc(100% - 20px);
}

.tp-service-item:hover .tp-service-icon {
    animation: icon-bounce 0.8s 1;
}

.tp-service-item:hover .tp-service-btn {
    transform: translateY(25px);
}

.tp-service-item:hover .tp-service-btn span::before {
    transform: scale(1.3);
}

.tp-service-item:hover .tp-service-btn span svg {
    transform: scale(1.167);
}

.tp-service-icon {
    height: 68px;
}

.tp-service-title {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 3px;
}

.tp-service-title a:hover {
    color: var(--tp-theme-primary);
}

.tp-service-btn {
    transform: translateY(35px);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-service-btn span {
    display: inline-block;
    position: relative;
    z-index: 1;
    height: 52px;
    width: 52px;
    line-height: 48px;
    border-radius: 50%;
    text-align: center;
}

.tp-service-btn span::before {
    position: absolute;
    border: 6px solid var(--tp-theme-primary);
    content: "";
    border-radius: 50%;
    z-index: -1;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--tp-common-white);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-service-btn span svg {
    transform: scale(1);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-service-content {
    padding: 10px 10px;
}

.tp-service-content p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.tp-service-all span {
    color: rgba(255, 255, 255, 0.8);
}

.tp-service-all span a {
    font-size: 18px;
    font-weight: 600;
    color: var(--tp-common-white);
    position: relative;
}

.tp-service-all span a:hover::after {
    opacity: 1;
    width: 100%;
    left: 0;
    right: auto;
    transition: all 0.2s linear;
}

.tp-service-all span a::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -2px;
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
}

.tp-service-all span a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: var(--tp-common-white);
    left: auto;
    right: 0;
    bottom: -2px;
    opacity: 0;
    transition: all 0.3s linear;
}

.tp-service-all span a svg {
    margin-left: 5px;
}

.tp-service-shape-1 {
    position: absolute;
    bottom: 90px;
    left: 85px;
    z-index: -1;
}

.tp-service-3-bg {
    padding-top: 85px;
    padding-bottom: 90px;
    position: relative;
    z-index: 1;
}

.tp-service-3-item {
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    background-color: transparent;
}

.tp-service-3-item:hover {
    background-color: var(--tp-common-white);
}

.tp-service-3-item:hover .tp-service-3-title {
    color: var(--tp-heading-3);
}

.tp-service-3-item:hover .tp-service-3-content p {
    color: #696969;
}

.tp-service-3-item:hover .tp-service-3-icon-active {
    opacity: 0;
    visibility: hidden;
}

.tp-service-3-item:hover .tp-service-3-icon-hover {
    opacity: 1;
    visibility: visible;
}

.tp-service-3-icon {
    margin-bottom: 43px;
    position: relative;
}

.tp-service-3-icon-active {
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-service-3-icon-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-service-3-item {
    padding: 50px 30px 25px 33px;
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-service-3-item {
        padding: 50px 20px 25px 25px;
    }
}

.tp-service-3-title {
    color: var(--tp-common-white);
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-service-3-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    line-height: 22px;
}

.tp-service-3-heading {
    position: absolute;
    top: 0;
    right: 90px;
    z-index: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-service-3-heading {
        right: 70px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-service-3-heading {
        display: none;
    }
}

.tp-service-3-shape-1 {
    position: absolute;
    top: 118px;
    left: 166px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-service-3-shape-1 {
        display: none;
    }
}

.tp-service-3-shape-2 {
    position: absolute;
    top: 127px;
    right: 250px;
    animation: opacity 2s ease-in-out 0.1s forwards infinite alternate;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-service-3-shape-2 {
        right: 120px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-service-3-shape-2 {
        top: 10px;
        left: 0;
        right: auto;
    }
}

.tp-service-3-shape-3 {
    position: absolute;
    bottom: 0;
    left: 30px;
}

@media only screen and (max-width: 767px) {
    .tp-service-3-shape-3 {
        display: none;
    }
}

.tp-service-3-shape-4 {
    position: absolute;
    bottom: 0;
    right: 200px;
    animation: tpswing 3s ease-in-out 0.1s forwards infinite alternate;
    transform-origin: bottom left;
    z-index: -1;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-service-3-shape-4 {
        right: 90px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-service-3-shape-4 {
        right: 50px;
    }
}

.tp-service-3-shape-5 {
    position: absolute;
    top: -93px;
    right: 354px;
    transform-origin: bottom left;
    z-index: -1;
    animation: tpswing 3s ease-in-out 0.1s forwards infinite alternate;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-service-3-shape-5 {
        right: 10px;
    }
}

.tp-service-5-wrap {
    border-bottom: 1px solid #E7EBEB;
}

.tp-service-5-item {
    padding-top: 60px;
    padding-bottom: 75px;
    border-right: 1px solid #E7EBEB;
}

.tp-service-5-item.service-5-border {
    border: none;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-service-5-item {
        border: none;
    }
}

@media only screen and (max-width: 767px) {
    .tp-service-5-item {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

.tp-service-5-icon {
    position: relative;
    display: inline-block;
    margin-bottom: 33px;
    z-index: 1;
}

.tp-service-5-icon::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: var(--tp-theme-5);
    z-index: -1;
}

.tp-service-5-title {
    color: var(--tp-heading-4);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 11px;
}

.tp-service-5-content p {
    color: #69696E;
    line-height: 24px;
    margin-bottom: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-service-5-content p br {
        display: none;
    }
}

.tp-marquee-scroll {
    background-color: var(--tp-theme-5);
}

.tp-marquee-scroll:hover .tp-marquee-item {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.tp-marquee-title {
    text-transform: uppercase;
    color: #161613;
    font-size: 22px;
    font-weight: 500;
    display: inline-block;
    white-space: nowrap;
}

.tp-marquee-title span {
    position: relative;
    color: #FF2051;
}

.tp-marquee-title span svg {
    position: absolute;
    left: -7px;
    bottom: -10px;
}

.tp-marquee-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    gap: 14px;
    white-space: nowrap;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: scroll-1 30s linear infinite;
    animation: scroll-1 30s linear infinite;
    padding: 30px 0 22px;
}

/*----------------------------------------*/

/*  7.9 Program css
/*----------------------------------------*/

.tp-program-item {
    padding: 15px 15px;
    border-radius: 14px;
}

.tp-program-item:hover .tp-program-thumb img {
    transform: scale(1.08);
}

.tp-program-thumb {
    border-radius: 8px;
    margin-bottom: 28px;
}

.tp-program-thumb img {
    border-radius: 8px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    width: 100%;
}

.tp-program-title {
    font-size: 22px;
}

.tp-program-title a:hover {
    color: var(--tp-theme-primary);
}

.tp-program-content {
    padding: 0 17px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-program-content p br {
        display: none;
    }
}

.tp-program-tag p {
    margin-bottom: 36px;
    font-size: 17px;
    color: var(--tp-common-black-1);
}

.tp-program-tag p span {
    display: inline-block;
    margin-right: 6px;
}

.tp-program-btn a {
    color: var(--tp-theme-primary);
    font-size: 16px;
    font-weight: 500;
    display: block;
    text-align: center;
    background-color: var(--tp-common-white);
    border-radius: 6px;
    line-height: 1;
    padding: 12px 20px;
}

.tp-program-btn a:hover {
    background-color: var(--tp-theme-primary);
    color: var(--tp-common-white);
}

.tp-program-dot {
    margin-bottom: 14px;
}

.tp-program-dot .swiper-pagination-bullet {
    height: 8px;
    width: 8px;
    background: #DDDBD6;
    margin: 0 5px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    transform: translateY(0px) scale(1);
    opacity: 1;
}

.tp-program-dot .swiper-pagination-bullet-active {
    transform: translateY(0px) scale(1.5);
    background: var(--tp-theme-primary);
}

.tp-program-all p {
    font-size: 17px;
}

.tp-program-all a {
    position: relative;
    color: var(--tp-theme-primary);
    font-weight: 500;
}

.tp-program-all a:hover::after {
    opacity: 1;
    width: 100%;
    left: 0;
    right: auto;
    transition: all 0.2s linear;
}

.tp-program-all a::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -2px;
    height: 1px;
    width: 100%;
    background: rgba(171, 12, 47, 0.3);
}

.tp-program-all a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: #ab0c2f;
    left: auto;
    right: 0;
    bottom: -2px;
    opacity: 0;
    transition: all 0.3s linear;
}

.tp-program-all a span {
    margin-left: 4px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    display: inline-block;
}

.tp-program-3-bg {
    position: relative;
    z-index: 1;
}

.tp-program-3-item {
    border-radius: 30px;
    border: 1px solid rgba(17, 22, 29, 0.04);
    box-shadow: 0px 1px 1px 0px rgba(17, 22, 29, 0.08);
    padding: 30px 30px 30px 30px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-program-3-item {
        padding: 30px 20px 30px 20px;
    }
}

.tp-program-3-item:hover {
    border: 1px solid rgba(3, 31, 66, 0.08);
    box-shadow: 0px 6px 10px 0px rgba(10, 29, 58, 0.1);
}

.tp-program-3-item:hover .tp-program-3-thumb img {
    transform: scale(1.06);
}

.tp-program-3-thumb {
    border-radius: 15px;
    margin-bottom: 27px;
    overflow: hidden;
}

.tp-program-3-thumb img {
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.tp-program-3-title {
    color: var(--tp-heading-3);
    font-size: 24px;
    font-weight: 700;
}

.tp-program-3-title a:hover {
    color: var(--tp-theme-3);
}

.tp-program-3-content>p {
    color: var(--tp-grey-5);
    font-size: 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-program-3-content>p br {
        display: none;
    }
}

.tp-program-3-schedule {
    margin-bottom: 36px;
}

.tp-program-3-schedule-item:not(:last-of-type) {
    margin-right: 24px;
    padding-right: 24px;
    border-right: 1px solid rgba(156, 41, 178, 0.2);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-program-3-schedule-item:not(:last-of-type) {
        padding-right: 15px;
        margin-right: 15px;
    }
}

.tp-program-3-schedule-item span {
    color: #75767A;
    font-size: 15px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 0;
}

.tp-program-3-schedule-item p {
    margin-bottom: 0;
    color: var(--tp-heading-3);
    font-size: 16px;
    line-height: 1;
}

.tp-program-3-btn a {
    display: block;
    text-align: center;
    border-radius: 16px;
    border: 1px solid rgba(3, 31, 66, 0.1);
    background: rgba(245, 245, 245, 0.1);
    color: #626569;
    font-size: 15px;
    font-weight: 500;
    padding: 11px 10px 12px 10px;
    line-height: 1;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-program-3-btn a:hover {
    background-color: var(--tp-theme-3);
    color: var(--tp-common-white);
}

.tp-program-3-shape-1 {
    position: absolute;
    top: 109px;
    right: 200px;
    animation: neptune 10s infinite linear;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-program-3-shape-1 {
        right: 150px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-program-3-shape-1 {
        display: none;
    }
}

.tp-program-3-shape-2 {
    height: 100px;
    width: 100px;
    background-color: #E0F0DD;
    border-radius: 50%;
    position: absolute;
    top: 340px;
    left: -50px;
    z-index: -1;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-program-4-section {
        margin-bottom: 30px;
    }
}

.tp-program-4-item {
    position: relative;
}

.tp-program-4-item:hover .tp-program-4-content {
    bottom: 0;
    overflow: hidden;
}

.tp-program-4-item:hover .tp-program-4-btn {
    opacity: 1;
    visibility: visible;
}

.tp-program-4-thumb {
    position: relative;
}

.tp-program-4-thumb::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
}

.tp-program-4-thumb img {
    width: 100%;
    border-radius: 10px;
}

.tp-program-4-content {
    position: absolute;
    bottom: -48px;
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    padding: 40px 40px 48px 38px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-program-4-content {
        padding: 30px;
    }
}

.tp-program-4-content>span {
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    display: inline-block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.9);
}

.tp-program-4-title {
    color: var(--tp-common-white);
    font-size: 30px;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 3px;
}

.tp-program-4-btn {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-program-4-arrow {
        margin-bottom: 30px;
    }
}

.tp-program-4-next,
.tp-program-4-prev {
    border-radius: 50%;
    display: inline-block;
}

.tp-program-4-next span,
.tp-program-4-prev span {
    display: inline-block;
    height: 44px;
    width: 44px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid rgba(171, 12, 47, 0.3);
    color: var(--tp-heading-primary);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-program-4-next span:hover,
.tp-program-4-prev span:hover {
    border-color: var(--tp-theme-primary);
    color: var(--tp-theme-primary);
}

.tp-program-4-next {
    margin-left: 4px;
}

.tp-program-4-next svg {
    display: inline-block;
    transform: translate(2px, 0px);
}

.tp-program-4-prev svg {
    display: inline-block;
    transform: translate(-1px, 0px);
}

/*----------------------------------------*/

/*  8.0 Testimonial css
/*----------------------------------------*/

.tp-testimonial-bg {
    background-position: left;
    background-repeat: no-repeat;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-testimonial-bg {
        background-position: left top;
    }
}

.tp-testimonial-themebg span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--tp-theme-primary);
    z-index: -1;
}

.tp-testimonial-themebg-shape {
    position: absolute;
    right: 0;
    bottom: -80px;
    z-index: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-testimonial-themebg-shape {
        display: none;
    }
}

.tp-testimonial-themebg-shape svg path {
    stroke: rgba(185, 26, 61, 0.7);
    stroke-dasharray: 2300;
    stroke-dashoffset: 3500;
    animation: dash 4s linear forwards;
}

@media only screen and (max-width: 767px) {
    .tp-testimonial-section {
        margin-bottom: 10px;
    }
}

.tp-testimonial-wrapper {
    margin-left: -24px;
    margin-right: -88px;
    margin-bottom: 134px;
    padding: 73px 88px 30px 58px;
    position: relative;
    z-index: 1;
    border-radius: 0px 0px 20px 20px;
    background: #FEFDFC;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-testimonial-wrapper {
        margin-left: -100px;
        margin-right: 20px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-testimonial-wrapper {
        margin-left: -150px;
        margin-right: 0;
        margin-bottom: 80px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-testimonial-wrapper {
        margin-left: -80px;
        margin-right: 0;
        margin-bottom: 80px;
        padding: 50px 30px 20px 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-testimonial-wrapper {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 80px;
        border-radius: 20px 20px 20px 20px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-testimonial-wrapper {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 80px;
        padding: 73px 30px 30px 30px;
        border-radius: 20px 20px 20px 20px;
    }
}

.tp-testimonial-wrapper .tp-section-title {
    font-size: 40px;
    letter-spacing: 0;
}

.tp-testimonial-shape-1 {
    position: absolute;
    top: 80px;
    right: 70px;
}

@media only screen and (max-width: 767px) {
    .tp-testimonial-shape-1 {
        top: 30px;
        right: 30px;
    }
}

.tp-testimonial-shape-2 {
    position: absolute;
    right: -60px;
    top: 140px;
    z-index: -1;
    animation: hero-dot-1 5s linear 0s infinite alternate;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-testimonial-shape-2 {
        right: -40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-testimonial-shape-2 {
        right: -38px;
    }
}

.tp-testimonial-shape-3 {
    position: absolute;
    right: -190px;
    top: 100px;
    z-index: -1;
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .tp-testimonial-shape-3 {
        right: -165px;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-testimonial-shape-3 {
        right: -80px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-testimonial-shape-3 {
        right: -40px;
        top: 180px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-testimonial-shape-3 {
        right: -30px;
        top: 200px;
    }
}

.tp-testimonial-shape-3 img {
    animation: animation-popup 2.5s linear 0s infinite alternate;
}

.tp-testimonial-item {
    padding: 26px 0;
}

.tp-testimonial-avatar {
    margin-bottom: 25px;
}

.tp-testimonial-avatar img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.tp-testimonial-avatar-title {
    color: var(--tp-common-black-1);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 0;
}

.tp-testimonial-avatar-info span {
    color: var(--tp-text-body);
    font-size: 16px;
    line-height: 1.1;
}

.tp-testimonial-content p {
    color: var(--tp-text-body);
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 27px;
}

.tp-testimonial-next,
.tp-testimonial-prev {
    border-radius: 50%;
    display: inline-block;
}

.tp-testimonial-next span,
.tp-testimonial-prev span {
    display: inline-block;
    height: 44px;
    width: 44px;
    line-height: 41px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid rgba(1, 15, 28, 0.1);
    color: var(--tp-heading-primary);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-testimonial-next span:hover,
.tp-testimonial-prev span:hover {
    border-color: var(--tp-theme-primary);
    background-color: var(--tp-theme-primary);
    color: var(--tp-common-white);
}

.tp-testimonial-next {
    margin-left: 4px;
}

.tp-testimonial-2-avatar-active .slick-track {
    padding-top: 15px;
    padding-bottom: 54px;
}

.tp-testimonial-2-avatar-active .slick-active.slick-center.tp-testimonial-2-avatar-item img {
    object-fit: cover;
    transform: scale(1.36);
    box-shadow: 0px 30px 30px -15px rgba(95, 50, 7, 0.4);
}

.tp-testimonial-2-avatar-active .slick-active.slick-initialized .slick-slide {
    height: 74px;
    width: 74px;
    border-radius: 50%;
    object-fit: cover;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    display: inline-block;
    margin: 0 10px;
}

.tp-testimonial-2-avatar-active .slick-prev,
.tp-testimonial-2-avatar-active .slick-next {
    top: 30px;
    right: -362px;
    position: absolute;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {

    .tp-testimonial-2-avatar-active .slick-prev,
    .tp-testimonial-2-avatar-active .slick-next {
        right: -200px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {

    .tp-testimonial-2-avatar-active .slick-prev,
    .tp-testimonial-2-avatar-active .slick-next {
        right: -100px;
    }
}

.tp-testimonial-2-avatar-active .slick-prev {
    left: -362px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-testimonial-2-avatar-active .slick-prev {
        left: -200px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-testimonial-2-avatar-active .slick-prev {
        left: -100px;
    }
}

.tp-testimonial-2-avatar-active .slick-arrow {
    display: inline-block;
    height: 46px;
    width: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 50px;
    border: 1px solid rgba(30, 30, 47, 0.1);
    color: var(--tp-text-body);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-testimonial-2-avatar-active .slick-arrow:hover {
    background-color: var(--tp-theme-secondary);
    color: var(--tp-common-white);
}

.tp-testimonial-2-avatar-active .slick-arrow svg {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

@media only screen and (max-width: 767px) {
    .tp-testimonial-2-avatar-active .slick-arrow {
        display: none !important;
    }
}

.tp-testimonial-2-avatar-item {
    text-align: center;
}

.tp-testimonial-2-avatar-item img {
    height: 74px;
    width: 74px;
    border-radius: 50%;
    object-fit: cover;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    display: inline-block;
}

.tp-testimonial-2-avatar-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 0;
}

.tp-testimonial-2-avatar-info {
    margin-bottom: 27px;
}

.tp-testimonial-2-avatar-info span {
    color: #636366;
    font-size: 16px;
    font-weight: 300;
}

.tp-testimonial-2-avatar-rating i {
    color: #FFB21D;
    font-size: 13px;
}

.tp-testimonial-2-content p {
    color: #636366;
    text-align: center;
    font-size: 22px;
    font-weight: 300;
    line-height: 32px;
}

.tp-testimonial-2-shape .shape-1 {
    position: absolute;
    bottom: -20px;
    right: 0px;
    z-index: -1;
}

.tp-testimonial-2-shape .shape-2 {
    position: absolute;
    top: -30px;
    left: 0px;
    z-index: -1;
}

.tp-testimonial-6-item {
    padding: 40px;
    border-radius: 14px;
    background: var(--tp-common-white);
    box-shadow: 0px 1px 3px 0px rgba(3, 31, 66, 0.14);
}

.tp-testimonial-6-item-shape {
    position: absolute;
    top: 20px;
    right: 20px;
}

.tp-testimonial-6-item-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--tp-theme-9);
    font-family: var(--tp-ff-manrope);
}

.tp-testimonial-6-item-content {
    margin-bottom: 40px;
}

.tp-testimonial-6-item-content p {
    font-weight: 500;
    color: #636366;
    font-family: var(--tp-ff-manrope);
}

.tp-testimonial-6-item-user-thumb {
    margin-right: 15px;
}

.tp-testimonial-6-item-user-thumb img {
    width: 60px;
}

.tp-testimonial-6-item-user-content p {
    margin: 0;
    line-height: 1;
    font-weight: 600;
    color: var(--tp-common-black);
    font-family: var(--tp-ff-manrope);
}

.tp-testimonial-6-item-user-content span {
    font-size: 14px;
    font-weight: 400;
    color: #636366;
    font-family: var(--tp-ff-manrope);
}

.tp-testimonial-6-wrapper {
    overflow: hidden;
}

.tp-testimonial-6-wrapper::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 240px;
    z-index: 2;
    background-image: linear-gradient(90deg, #F8F8FA 18%, rgba(248, 248, 250, 0) 106%);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-testimonial-6-wrapper::before {
        display: none;
    }
}

.tp-testimonial-6-wrapper::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 240px;
    z-index: 2;
    background-image: linear-gradient(270deg, #F8F8FA 18%, rgba(248, 248, 250, 0) 106%);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-testimonial-6-wrapper::after {
        display: none;
    }
}

.tp-testimonial-6-active {
    margin: 0 -100px;
}

.slide-transtion {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}

/*----------------------------------------*/

/*  8.1 Video css
/*----------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-video-wrap {
        padding-top: 120px;
        padding-bottom: 120px;
        justify-content: center;
    }
}

.tp-video-icon a {
    display: inline-block;
    margin-bottom: 50px;
}

.tp-video-icon a span {
    display: inline-block;
    color: var(--tp-theme-primary);
    height: 74px;
    width: 74px;
    line-height: 74px;
    text-align: center;
    border-radius: 50%;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    background-color: var(--tp-common-white);
    box-shadow: 0px 10px 10px 10px rgba(0, 0, 0, 0.2);
}

.tp-video-icon a span svg {
    display: inline-block;
    transform: translate(2px, -1px);
}

.tp-video-icon a:hover {
    transform: scale(1.1);
}

.tp-video-icon p {
    color: var(--tp-common-white);
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 0;
}

.tp-video-hover {
    position: relative;
}

.tp-video-hover:hover .tp-m-play-inner {
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
}

.tp-video-hover:hover .tp-circle-svg {
    animation-play-state: running;
}

.tp-video-inner-bg {
    height: 760px;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tp-video-5-bg {
    height: 800px;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tp-video-5-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tp-video-button .tp-m-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    line-height: 1;
}

.tp-video-button .tp-m-play-inner {
    position: relative;
    width: 152px;
    height: 152px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #F0EC51;
    -webkit-clip-path: circle(37% at 50% 50%);
    clip-path: circle(37% at 50% 50%);
    transition: -webkit-clip-path 0.35s ease;
    transition: clip-path 0.35s ease;
    transition: clip-path 0.35s ease, -webkit-clip-path 0.35s ease;
}

.tp-video-button .tp-m-play-inner.campus {
    background-color: var(--tp-common-white);
}

.tp-video-button .tp-m-play-inner>.tp-svg--play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tp-video-button .tp-circle-text {
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tp-video-button .tp-circle-svg {
    transform: rotate(-45deg);
    animation: tp-rotate-video-text 5s linear infinite;
    animation-play-state: paused;
}

/*----------------------------------------*/

/*  8.2 Event css
/*----------------------------------------*/

/*----------------------------------------*/

/*  8.3 Category css
/*----------------------------------------*/


/*----------------------------------------*/

/*  8.4 Funfact css
/*----------------------------------------*/


/*----------------------------------------*/

/*  8.5 Course css
/*----------------------------------------*/

.tp-course-item {
    border-radius: 20px;
    border: 1px solid rgba(3, 31, 66, 0.20);
    padding: 10px 10px 10px;
    
    background-color: var(--tp-common-white);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-course-item:hover {
    box-shadow: 0px 6px 10px 0px rgba(22, 18, 3, 0.1);
}

.tp-course-item:hover .tp-course-btn {
    transform: translateY(-30px);
}

.tp-course-item:hover .tp-course-content {
    transform: translateY(-60px);
}

.tp-course-content {
    position: relative;
    overflow: hidden;
    padding: 10px 15px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    background-color: var(--tp-common-white);
    font-size: 12px;
    line-height: 21px;
}

.tp-course-teacher {
    display: flex;
    padding: 0 19px;
    align-items: center;
    justify-content: space-between;
}

.tp-course-teacher img {
    height: 30px;
    width: 30px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
}

.tp-course-teacher span {
    font-size: 15px;
    display: inline-block;
}

.tp-course-teacher .discount {
    flex: 0 0 auto;
    color: #E71442;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.52px;
    border-radius: 6px;
    border: 1px solid rgba(231, 20, 66, 0.12);
    padding: 0 9px;
}

.tp-course-thumb {
    overflow: hidden;
    border-radius: 10px;
}

.tp-course-thumb img {
    /* height: 200px; */
    object-fit: fill;
    width: 100%;
    transition: all 0.5s ease-in-out;
    border-radius: 10px;
}

.tp-course-thumb.sidebar img {
    height: 100%;
}

.tp-course-tag span {
    display: inline-block;
    border-radius: 3px;
    background: rgba(23, 162, 184, 0.08);
    color: #17A2B8;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 10px;
    line-height: 1;
}

.tp-course-meta {
    margin-bottom: 9px;
}

.tp-course-meta span {
    color: #94928e;
}

.tp-course-meta span:not(:last-of-type) {
    margin-right: 16px;
}

.tp-course-meta span span {
    color: #94928E;
    font-size: 14px;
    display: inline-block;
    margin-right: 1px;
}

.tp-course-meta span span svg {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

.tp-course-title {
    color: var(--tp-heading-2);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    /* margin-bottom: 17px;
    padding-bottom: 22px; */
    /* border-bottom: 1px solid rgba(3, 31, 66, 0.08); */
}

.tp-course-title a:hover {
    color: var(--tp-dashboard-secondary);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-course-title a br {
        display: none;
    }
}

.tp-course-title.color a:hover {
    color: var(--tp-theme-9);
}

.tp-course-rating-star p {
    margin-bottom: 0;
    color: var(--tp-heading-2);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.tp-course-rating-star p span {
    font-size: 14px;
    font-weight: 300;
}

.tp-course-rating-icon i {
    font-size: 13px;
    color: #FFB21D;
}

.tp-course-pricing del {
    display: block;
    color: #94928E;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: -1px;
}

.tp-course-pricing span {
    font-size: 18px;
    font-weight: 600;
    color: var(--tp-dashboard-secondary);
}

.tp-course-pricing.home-2 span {
    color: var(--tp-theme-secondary);
}

.tp-course-pricing.color-9 span {
    color: var(--tp-theme-9);
}

.tp-course-btn {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: 0 34px;
    text-align: center;
    transform: translateY(50px);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-course-btn a {
    display: block;
    text-align: center;
    line-height: 1;
    padding: 10px 11px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 30px;
    color: var(--tp-common-white);
    background-color: #FF9933;
    border: none;
}

.tp-course-btn a:hover {
    background-color: var(--tp-heading-2);
}

/* .tp-course-btn.home-2 a {
    background-color: var(--tp-theme-secondary);
} */

.tp-course-btn.home-2 a:hover {
    background-color: var(--tp-heading-primary);
}

.tp-course-btn.color-9 a {
    background-color: var(--tp-theme-9);
}

.tp-course-btn.color-9 a:hover {
    background-color: var(--tp-heading-primary);
}

.tp-course-tab .nav-link {
    position: relative;
    color: #A0A2A4;
    font-size: 20px;
    line-height: 20px;
    padding: 11px 10px;
    margin: 0 6px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-course-tab .nav-link {
        font-size: 17px;
        padding: 10px 6px;
        margin: 0 3px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-tab .nav-link {
        margin: 0 0;
        margin-right: 5px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-course-tab .nav-link {
        font-size: 16px;
    }
}

.tp-course-tab .nav-link span {
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    transform: scale(0);
}

.tp-course-tab .nav-link.active {
    color: #031F42;
}

.tp-course-tab .nav-link.active span {
    opacity: 1;
    transform: scale(1);
}

.tp-course-4-item {
    border-radius: 16px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    padding: 20px 20px 20px 20px;
    background-color: var(--tp-common-white);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (max-width: 767px) {
    .tp-course-4-item {
        flex-wrap: wrap;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-4-item {
        margin-bottom: 30px;
    }
}

.tp-course-4-item:hover {
    box-shadow: 0px 6px 10px 0px rgba(10, 29, 58, 0.1);
}

.tp-course-4-thumb {
    width: 220px;
    object-fit: cover;
    flex: 0 0 auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (max-width: 767px) {
    .tp-course-4-thumb {
        width: 100%;
    }
}

.tp-course-4-thumb img {
    height: 100%;
    border-radius: 10px;
    width: 100%;
    object-fit: cover;
}

.tp-course-4-content {
    padding: 24px 8px 24px 28px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (max-width: 767px) {
    .tp-course-4-content {
        width: 100%;
        padding: 24px 0px 24px 0px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-course-4-content {
        width: 100%;
        padding: 24px 5px 24px 15px;
    }
}

.tp-course-4-content p {
    color: #5F5D59;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    margin-bottom: 24px;
}

.tp-course-4-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
}

.tp-course-4-title a:hover {
    color: var(--tp-theme-primary);
}

.tp-course-4-rating {
    margin-bottom: 8px;
}

.tp-course-4-rating i {
    color: #FFA41D;
}

.tp-course-4-rating span {
    color: #6D6C68;
    font-size: 14px;
    display: inset-block;
    margin-left: 4px;
}

.tp-course-4-info {
    margin-bottom: 18px;
}

.tp-course-4-info-item>span {
    display: inline-block;
    margin-right: 18px;
    color: #6D6C68;
    font-size: 14px;
}

.tp-course-4-info-item>span>span {
    display: inline-block;
    margin-right: 1px;
}

.tp-course-4-avatar {
    border-top: 1px solid #F1EFE9;
    padding-top: 20px;
}

.tp-course-4-avatar-thumb img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.tp-course-4-avatar-text {
    display: inline-block;
    margin-left: 10px;
}

.tp-course-4-avatar-text a {
    color: var(--tp-heading-primary);
    font-size: 15px;
}

.tp-course-4-avatar-text span {
    color: #6D6C68;
    font-size: 15px;
}

.tp-course-4-ammount {
    flex: 0 0 auto;
}

.tp-course-4-ammount span {
    color: var(--tp-heading-primary);
    font-size: 22px;
    font-weight: 500;
}

.tp-course-5-position .row .col-lg-4:nth-child(3n+2) {
    margin-top: -50px;
}

@media only screen and (max-width: 767px) {
    .tp-course-5-position .row .col-lg-4:nth-child(3n+2) {
        margin-top: 0;
    }
}

.tp-course-5-item {
    position: relative;
    z-index: 1;
}

.tp-course-5-item:hover .tp-course-5-hover {
    transform: rotate(-4deg);
    opacity: 1;
}

@media only screen and (max-width: 767px) {
    .tp-course-5-item:hover .tp-course-5-hover {
        transform: rotate(-3deg);
    }
}

.tp-course-5-item:hover .tp-course-5-content {
    box-shadow: none;
}

.tp-course-5-hover {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    background: var(--tp-theme-5);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    opacity: 0;
}

.tp-course-5-thumb {
    position: relative;
}

.tp-course-5-thumb img {
    width: 100%;
    border-radius: 20px 20px 0px 0px;
}

.tp-course-5-price {
    position: absolute;
    top: 16px;
    right: 16px;
}

.tp-course-5-price span {
    background-color: var(--tp-theme-5);
    display: inline-block;
    border-radius: 50%;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    color: var(--tp-heading-primary);
    font-size: 22px;
    font-weight: 600;
}

.tp-course-5-price span.free {
    background-color: #9CE28A;
}

.tp-course-5-content {
    margin-top: -20px;
    position: relative;
    z-index: 1;
    border-radius: 20px;
    border: 1px solid #E7EBEB;
    background: var(--tp-common-white);
    padding: 30px 30px 35px 33px;
    box-shadow: 0px 60px 44px -50px rgba(177, 177, 177, 0.2);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-course-5-avatar {
    margin-bottom: 12px;
}

.tp-course-5-avatar span {
    flex: 0 0 auto;
    margin-right: 9px;
}

.tp-course-5-avatar span img {
    height: 32px;
    width: 32px;
    border-radius: 50%;
}

.tp-course-5-avatar-title {
    color: var(--tp-text-body);
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 0;
}

.tp-course-5-title {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 24px;
}

.tp-course-5-title a {
    background-repeat: no-repeat;
    background-size: 0% 1px, 0 1px;
    background-position: 100% 100%, 0 100%;
    transition: background-size 0.4s linear;
    background-image: linear-gradient(#161613, #161613), linear-gradient(#161613, #161613);
}

.tp-course-5-title a:hover {
    background-size: 0% 1px, 100% 1px;
}

.tp-course-5-btn {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-6-ptb {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-6-heading {
        margin-bottom: 30px;
    }
}

a .course-pink {
    background-color: #EEBED3;
}

a .course-lightblue {
    background-color: #7FD6C2;
}

a .course-sky {
    background-color: #AAC4FA;
}

.tp-course-details-wrapper {
    padding-right: 72px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-wrapper {
        padding-right: 0;
    }
}

.tp-course-details-title {
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 20px;
    letter-spacing: -0.68px;
    color: var(--tp-heading-primary);
}

.tp-course-details-heading p {
    font-size: 20px;
    font-weight: 300;
    line-height: 30px;
    margin-bottom: 50px;
    color: var(--tp-heading-primary);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-heading p {
        margin-bottom: 25px;
    }
}

.tp-course-details-thumb {
    margin-bottom: 40px;
}

.tp-course-details-thumb img {
    border-radius: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-thumb img {
        width: 100%;
    }
}

.tp-course-details-list {
    margin-bottom: 26px;
}

.tp-course-details-list ul li {
    list-style: none;
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 20px;
    color: var(--tp-heading-primary);
}

.tp-course-details-list ul li span {
    margin-right: 10px;
}

.tp-course-details-box {
    margin-top: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-box {
        margin-top: 30px;
    }
}

.tp-course-details-box span {
    display: block;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 22px;
    color: #3E4047;
    letter-spacing: -0.36px;
}

.tp-course-details-table {
    border-radius: 10px;
    fill: var(--tp-common-white);
    box-shadow: 0px 2px 3px 0px rgba(48, 54, 81, 0.1) inset;
    filter: drop-shadow(0px 2px 2px rgba(48, 54, 81, 0.08));
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-table {
        overflow-x: scroll;
    }
}

.tp-course-details-table-head {
    background: var(--tp-theme-4);
    border-radius: 10px 10px 0px 0px;
}

.tp-course-details-table ul li {
    padding: 16px 30px;
    list-style: none;
}

.tp-course-details-table ul li:not(:last-of-type) {
    border-bottom: 1px solid rgba(22, 22, 19, 0.1);
}

.tp-course-details-table ul li:last-child {
    padding: 26px 30px !important;
    border-radius: 0px 0px 10px 10px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-table ul li {
        width: 800px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-social {
        margin-bottom: 30px;
    }
}

.tp-course-details-social a {
    display: inline-block;
    padding: 1px 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.26px;
    border-radius: 4px;
    margin-right: 4px;
    color: var(--tp-common-white);
    background-color: #1877F2;
}

.tp-course-details-social a span {
    margin-right: 5px;
    display: inline-block;
    transform: translateY(-2px);
}

.tp-course-details-social a.black {
    background-color: var(--tp-heading-primary);
}

.tp-course-details-social a.sky {
    background-color: #069;
}

.tp-course-table-row {
    display: flex;
    align-items: center;
}

.tp-course-table-inner {
    padding: 22px 30px !important;
    background-color: var(--tp-common-white);
}

.tp-course-id {
    width: 150px;
    flex: 0 0 auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-course-id {
        width: 130px;
    }
}

.tp-course-sub {
    width: 365px;
    flex: 0 0 auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-course-sub {
        width: 330px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-sub {
        width: 370px;
    }
}

.tp-course-type {
    width: 130px;
    flex: 0 0 auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-course-type {
        width: 115px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-type {
        width: 150px;
    }
}

.tp-course-credits {
    width: 95px;
    flex: 0 0 auto;
    margin-left: 10px;
}

.tp-table-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--tp-common-white);
}

.tp-table-inner {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    color: #3E4047;
}

.tp-course-requrement-wrapper {
    padding-right: 52px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-requrement-wrapper {
        padding-right: 0;
    }
}

.tp-course-requrement-title {
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 22px;
    letter-spacing: -0.68px;
    color: var(--tp-heading-primary);
}

.tp-course-requrement-heading p {
    font-size: 18px;
    font-weight: 300;
    line-height: 28px;
    margin-bottom: 25px;
    color: var(--tp-heading-primary);
}

.tp-course-requrement-bulet {
    margin-bottom: 35px;
}

.tp-course-requrement-bulet-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 0;
    letter-spacing: -0.36px;
    color: var(--tp-heading-primary);
}

.tp-course-requrement-bulet p {
    font-size: 17px;
    font-weight: 300;
    line-height: 24px;
    color: var(--tp-heading-primary);
}

.tp-course-requrement-bulet-content p {
    font-size: 16px;
    font-weight: 400;
    color: var(--tp-heading-primary);
}

.tp-course-requrement-bulet-content p span {
    margin-right: 10px;
    display: inline-block;
    transform: translateY(-1px);
}

.tp-course-requrement-widget-content {
    border-radius: 10px;
    padding: 36px 30px;
    background: var(--tp-common-white);
    box-shadow: 0px 2px 4px -2px rgba(3, 11, 30, 0.14), 0px 6px 6px -6px rgba(22, 22, 19, 0.14);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-course-requrement-widget-content {
        padding: 35px 26px;
    }
}

.tp-course-requrement-widget-content a {
    display: block;
    font-size: 17px;
    font-weight: 400;
    color: var(--tp-text-body);
}

.tp-course-requrement-widget-content a:not(:last-of-type) {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed rgba(22, 22, 19, 0.2);
}

.tp-course-requrement-widget-content a:hover {
    color: var(--tp-red-3);
}

.tp-course-requrement-widget-btn .btn-1 {
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    margin-bottom: 8px;
    background: transparent;
    color: var(--tp-heading-primary);
    border: 1px solid rgba(22, 22, 19, 0.1);
}

.tp-course-requrement-widget-btn .btn-1:hover {
    color: var(--tp-common-white);
    background-color: var(--tp-theme-4);
}

.tp-course-requrement-widget-btn .btn-2 {
    background-color: var(--tp-theme-4);
}

.tp-course-requrement-widget-contact {
    padding: 36px 30px;
    border-radius: 10px;
    background: #164951;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-course-requrement-widget-contact {
        padding: 35px 20px;
    }
}

.tp-course-requrement-widget-contact-title {
    color: #FFF7F1;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 18px;
    letter-spacing: -0.48px;
}

.tp-course-requrement-widget-contact p {
    color: #FFF7F1;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 20px;
}

.tp-course-requrement-widget-contact a {
    display: block;
    color: #FFF7F1;
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
}

.tp-course-requrement-widget-contact a:not(:last-of-type) {
    margin-bottom: 12px;
}

.tp-course-requrement-widget-contact a span {
    margin-right: 10px;
}

.tp-course-requrement-widget-faq {
    padding: 30px 30px 0;
    border-radius: 10px;
    background: rgba(176, 165, 131, 0.1);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-course-requrement-widget-faq {
        padding: 30px 20px 0;
    }
}

.tp-course-requrement-widget-faq-title {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.52px;
    margin-bottom: 12px;
    color: var(--tp-heading-primary);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-course-requrement-widget-faq-title {
        font-size: 25px;
    }
}

.tp-course-requrement-widget-faq p {
    font-weight: 400;
    font-size: 16px;
    color: var(--tp-heading-primary);
}

.tp-course-requrement-widget-faq p a {
    color: var(--tp-theme-4);
    text-decoration-line: underline;
}

.tp-course-requrement-widget-faq-thumb {
    text-align: end;
}

.tp-course-requrement-widget-faq-thumb img {
    filter: saturate(0);
}


.tp-course-categories-item {
    display: block;
    border-radius: 20px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    padding: 30px 30px 20px 30px;
    border: 1px solid rgba(3, 31, 66, 0.1);
}

.tp-course-categories-item:hover {
    transform: translateY(-4px);
    border-color: rgba(26, 115, 232, 0.5);
}

.tp-course-categories-item p {
    font-weight: 400;
    font-size: 14px;
    color: #85878c;
    margin-bottom: 0;
}

.tp-course-categories-icon span {
    height: 40px;
    width: 40px;
    border-radius: 10px;
    line-height: 39px;
    text-align: center;
    margin-bottom: 25px;
    display: inline-block;
    background-color: #a3d6c2;
}

.tp-course-categories-icon span.color-1 {
    background: #e4cd9f;
}

.tp-course-categories-icon span.color-2 {
    background: #e8cec3;
}

.tp-course-categories-icon span.color-3 {
    background: #e1d5f4;
}

.tp-course-categories-icon span.color-4 {
    background: #d1c5de;
}

.tp-course-categories-icon span.color-5 {
    background: #ccd9b8;
}

.tp-course-categories-icon span.color-6 {
    background: #c2dedd;
}

.tp-course-categories-icon span.color-7 {
    background: #d6c0a3;
}

.tp-course-categories-icon span.color-8 {
    background: #d6d2a3;
}

.tp-course-categories-icon span.color-9 {
    background: #a3a7d6;
}

.tp-course-categories-icon span.color-10 {
    background: #e0bfc9;
}

.tp-course-categories-icon span.color-11 {
    background: #d3d3d3;
}

.tp-course-categories-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
    color: var(--tp-heading-2);
}

.tp-course-banner-shape .shape-1 {
    position: absolute;
    bottom: 0;
    left: 418px;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-course-banner-shape .shape-1 {
        left: 210px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-course-banner-shape .shape-1 {
        left: 130px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-course-banner-shape .shape-1 {
        left: 100px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-course-banner-shape .shape-1 {
        left: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-banner-shape .shape-1 {
        display: none;
    }
}

.tp-course-banner-shape .shape-2 {
    position: absolute;
    bottom: 0;
    right: 108px;
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: hero-bounce;
}

.tp-course-banner-heading {
    margin-left: -25px;
    padding-right: 60px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-banner-heading {
        padding-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-banner-heading {
        margin-left: 0;
    }
}

.tp-course-banner-heading p {
    font-size: 17px;
    font-weight: 300;
    color: #4f5158;
    margin-bottom: 32px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-banner-heading p {
        margin-bottom: 15px;
    }
}

.tp-course-banner-heading .tp-footer-inner-input input {
    height: 60px;
    border-radius: 100px;
    box-shadow: 0 1px 2px 0 rgba(3, 11, 30, 0.14);
}

.tp-course-banner-heading .tp-footer-inner-input .tp-btn-inner {
    border-radius: 100px;
}

.tp-course-banner-title {
    font-size: 54px;
    font-weight: 600;
    color: var(--tp-heading-2);
    letter-spacing: -0.02em;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-banner-title {
        font-size: 42px;
    }
}

.tp-course-filter-space {
    padding-top: 150px;
    padding-bottom: 350px;
}

@media only screen and (max-width: 767px) {
    .tp-course-filter-space {
        padding-bottom: 390px;
    }
}

.tp-course-filter-bg {
    background: linear-gradient(180deg, #d5ddff 0%, #e8d5ff 100%);
}

@media only screen and (max-width: 767px) {
    .tp-course-filter-top-left {
        flex-wrap: wrap;
    }
}

.tp-course-filter-top-result p {
    margin: 0;
    font-weight: 400;
    font-size: 15px;
    color: #73757b;
}

.tp-course-filter-top-tab {
    height: 44px;
    border-radius: 100px;
    padding: 5px 6px 6px 6px;
    margin-right: 15px;
    background: rgba(10, 26, 47, 0.03);
    border: 1px solid rgba(10, 26, 47, 0.08);
}

.tp-course-filter-top-tab ul .nav-item .nav-link {
    font-weight: 400;
    font-size: 16px;
    color: #43444a;
    display: block;
    width: 90px;
    padding: 3px;
}

.tp-course-filter-top-tab ul .nav-item .nav-link svg {
    margin-right: 5px;
    transform: translateY(-3px);
}

.tp-course-filter-top-tab ul .nav-item .nav-link.active {
    border-radius: 100px;
    box-shadow: 0 1px 2px 0 rgba(3, 11, 30, 0.14);
    background: linear-gradient(180deg, #fff 0%, #f9f6ff 100%);
}

.tp-course-filter-top-right-search {
    position: relative;
    margin-right: 12px;
}

.tp-course-filter-top-right-search input {
    border: none;
    height: 44px;
    width: 300px;
    border-radius: 100px;
    padding: 0 40px 0 25px;
    border: 1px solid #e6e8f0;
}

.tp-course-filter-top-right-search input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #8B8B8B;
    font-size: 15px;
    font-weight: 400;
}

.tp-course-filter-top-right-search input::-moz-placeholder {
    /* Firefox 19+ */
    color: #8B8B8B;
    font-size: 15px;
    font-weight: 400;
}

.tp-course-filter-top-right-search input:-moz-placeholder {
    /* Firefox 4-18 */
    color: #8B8B8B;
    font-size: 15px;
    font-weight: 400;
}

.tp-course-filter-top-right-search input:-ms-input-placeholder {
    /* IE 10+  Edge*/
    color: #8B8B8B;
    font-size: 15px;
    font-weight: 400;
}

.tp-course-filter-top-right-search input::placeholder {
    /* MODERN BROWSER */
    color: #8B8B8B;
    font-size: 15px;
    font-weight: 400;
}

.tp-course-filter-top-right-search input:focus {
    border-color: var(--tp-theme-7);
    box-shadow: 0px 1px 2px 0px rgba(65, 95, 251, 0.06), 0px 4px 10px 0px rgba(65, 95, 251, 0.06), 0px 0px 0px 3px rgba(65, 95, 251, 0.2);
}

.tp-course-filter-top-right-search-btn {
    position: absolute;
    top: 50%;
    right: 18px;
    line-height: 1;
    transform: translateY(-50%);
}

.tp-course-filter-btn .tp-filter-btn {
    font-size: 16px;
    font-weight: 500;
    padding: 9px 34px;
    border-radius: 100px;
    border: 1px solid #e6e8f0;
    color: var(--tp-common-black);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-course-filter-btn .tp-filter-btn svg {
    margin-right: 5px;
    transform: translateY(-1px);
}

.tp-course-filter-btn .tp-filter-btn:hover {
    background-color: rgba(81, 105, 241, 0.06);
}

.tp-course-filter-item {
    border-radius: 14px;
    padding: 15px 15px 23px 15px;
    background-color: var(--tp-common-white);
    border: 1px solid rgba(3, 31, 66, 0.08);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-course-filter-item:hover {
    transform: translateY(-4px);
    box-shadow: 0px 6px 20px 0px rgba(22, 18, 3, 0.1);
}

.tp-course-filter-item:hover .tp-course-filter-thumb img {
    transform: scale(1.1);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-filter-item {
        flex-wrap: wrap;
    }
}

.tp-course-filter-content {
    width: 100%;
    padding: 20px 20px 0px 42px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-course-filter-content {
        padding: 20px 20px 0px 25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-course-filter-content {
        padding: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-course-filter-content {
        padding: 15px 0 0 0;
    }
}

.tp-course-filter-tag .tag-span {
    display: inline-block;
    border-radius: 3px;
    background: rgba(23, 162, 184, 0.08);
    color: #17A2B8;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 13px;
    line-height: 1;
    margin-right: 5px;
}

.tp-course-filter-tag .discount {
    flex: 0 0 auto;
    color: #E71442;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 9px;
    letter-spacing: 0.52px;
    border-radius: 6px;
    border: 1px solid rgba(231, 20, 66, 0.12);
}

.tp-course-filter-meta {
    margin-bottom: 10px;
}

.tp-course-filter-meta span {
    font-weight: 400;
    font-size: 15px;
    padding-right: 15px;
    color: var(--tp-text-body);
}

.tp-course-filter-meta span:nth-child(1) {
    margin-right: 20px;
    border-right: 1px solid #d9d9d9;
}

.tp-course-filter-meta span:not(:first-child) {
    color: #6C7275;
}

.tp-course-filter-meta span svg {
    margin-right: 2px;
    display: inline-block;
    transform: translateY(-1px);
}

.tp-course-filter-meta span img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.tp-course-filter-p p {
    margin-bottom: 40px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-filter-p p {
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-filter-p p br {
        display: none;
    }
}

.tp-course-filter-title {
    font-weight: 500;
    font-size: 34px;
    margin-bottom: 10px;
    color: var(--tp-heading-2);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-course-filter-title {
        font-size: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-filter-title {
        font-size: 26px;
    }
}

.tp-course-filter-title a:hover {
    color: var(--tp-theme-secondary);
}

.tp-course-filter-title.color a:hover {
    color: var(--tp-theme-9);
}

.tp-course-filter-thumb {
    width: 440px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-filter-thumb {
        width: 100%;
    }
}

.tp-course-filter-thumb img {
    width: 440px;
    height: 310px;
    border-radius: 10px;
    transition: all 0.3s 0s ease-out;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-filter-thumb img {
        height: auto;
        width: 100%;
    }
}

.tp-course-filter-pricing span {
    font-size: 20px;
    font-weight: 600;
    color: var(--tp-dashboard-secondary);
}

.tp-course-filter-pricing del {
    display: block;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    color: #94928E;
    margin-bottom: -1px;
}

.tp-course-filter-btn a {
    font-size: 16px;
    font-weight: 500;
    border-radius: 30px;
    display: inline-block;
    padding: 7px 40px 9px;
    color: var(--tp-grey-6);
    border: 1px solid rgba(3, 31, 66, 0.1);
}

.tp-course-filter-btn a:hover {
    color: var(--tp-common-white);
    background: var(--tp-dashboard-primary);
    box-shadow: 0 0 1px 0 #1438b5, 0 1px 2px 0 rgba(20, 56, 181, 0.25);
}

.tp-course-filter-btn.color a:hover {
    color: var(--tp-common-white);
    background: var(--tp-theme-9);
    box-shadow: 0 0 1px 0 #1438b5, 0 1px 2px 0 rgba(20, 56, 181, 0.25);
}

.tp-course-filter-select .nice-select {
    font-size: 16px;
    height: 44px;
    width: 200px;
    line-height: 44px;
    border-radius: 100px;
    color: #65676a;
    border: 1px solid #E6E8F0;
    box-shadow: 0 1px 2px 0 rgba(3, 11, 30, 0.14);
    background: linear-gradient(180deg, #fff 0%, #f9f6ff 100%);
}

.tp-course-filter-select .nice-select::after {
    color: #686A6D;
    right: 25px;
}

.tp-course-filter-select .nice-select .list {
    padding: 15px;
    border-radius: 10px;
    fill: #fff;
    stroke-width: 1px;
    stroke: #e6e8f0;
    box-shadow: 0 4px 14px 0 rgba(8, 19, 34, 0.12);
}

.tp-course-filter-select .nice-select .option {
    color: #757C8E;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    min-height: 0;
    border-radius: 100px;
    padding: 10px 16px;
    margin-bottom: 2px;
}

.tp-course-filter-select .nice-select .option:hover {
    color: #4A4E68;
    background-color: #F4F5FA;
}

.tp-course-grid-wrap {
    margin-bottom: 30px;
}

.tp-course-grid-box {
    margin-bottom: 35px;
}

.tp-course-grid-box .nav-item .nav-link {
    font-size: 16px;
    font-weight: 400;
    border-radius: 100px;
    margin-right: 6px;
    padding: 6px 24px 8px;
    display: inline-block;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    color: var(--tp-grey-6);
    background: var(--tp-common-white);
    border: 1px solid #e6e8f0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-grid-box .nav-item .nav-link {
        margin-bottom: 10px;
    }
}

.tp-course-grid-box .nav-item .nav-link.active {
    border-color: transparent;
    color: var(--tp-common-white);
    background-color: var(--tp-dashboard-primary);
}

.tp-course-grid-box .nav-item .nav-link:hover {
    border-color: transparent;
    color: var(--tp-common-white);
    background-color: var(--tp-dashboard-primary);
}

.tp-course-grid-categories {
    margin-bottom: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-grid-categories {
        flex-wrap: wrap;
    }
}

.tp-course-grid-select {
    margin-right: 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-grid-select {
        margin-bottom: 20px;
    }
}

.tp-course-grid-select p {
    display: inline-block;
    font-weight: 500;
    font-size: 12px;
    color: #73757b;
    margin-bottom: 3px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-grid-select p {
        display: block;
    }
}

.tp-course-grid-select .nice-select {
    width: 282px;
    height: 46px;
    line-height: 40px;
    font-size: 16px;
    color: #65676a;
    font-weight: 400;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px 0 rgba(3, 11, 30, 0.06);
}

.tp-course-grid-select .nice-select::after {
    right: 20px;
    color: #65676a;
}

.tp-course-grid-select .nice-select:focus {
    border-color: transparent;
}

.tp-course-grid-select .nice-select .list {
    padding: 15px;
    border-radius: 10px;
    fill: #fff;
    stroke-width: 1px;
    stroke: #e6e8f0;
    box-shadow: 0 4px 14px 0 rgba(8, 19, 34, 0.12);
}

.tp-course-grid-select .nice-select .option {
    color: #757C8E;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    min-height: 0;
    border-radius: 100px;
    padding: 10px 16px;
    margin-bottom: 2px;
}

.tp-course-grid-select .nice-select .option:hover {
    color: #4A4E68;
    background-color: #F4F5FA;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-course-grid-select .nice-select {
        width: 260px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-course-grid-select .nice-select {
        width: 215px;
    }
}

.tp-course-grid-item {
    padding: 15px;
    border-radius: 14px;
    background-color: var(--tp-common-white);
    border: 1px solid rgba(3, 31, 66, 0.08);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (max-width: 767px) {
    .tp-course-grid-item {
        flex-wrap: wrap;
    }
}

.tp-course-grid-title {
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 18px;
    color: var(--tp-heading-2);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-grid-title br {
        display: none;
    }
}

.tp-course-grid-title a:hover {
    color: var(--tp-dashboard-primary);
}

.tp-course-grid-title.color-9 a:hover {
    color: var(--tp-theme-9);
}

.tp-course-grid-teacher {
    margin-bottom: 25px;
    padding: 0 0px 25px;
    border-bottom: 1px solid rgba(3, 31, 66, 0.08);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-grid-thumb {
        width: 100%;
    }
}

.tp-course-grid-thumb img {
    height: 320px;
    width: 230px;
    border-radius: 8px;
    object-fit: contain;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-grid-thumb img {
        width: 100%;
        height: 100%;
    }
}

.tp-course-grid-content {
    padding: 25px 23px 0px 30px;
    width: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-course-grid-content {
        padding: 85px 30px 0px 30px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-course-grid-content {
        padding: 25px 0px 10px 5px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-grid-sidebar-left {
        flex-wrap: wrap;
    }
}

.tp-course-grid-sidebar-search input {
    font-size: 15px;
    width: 250px;
    height: 44px;
    color: #686A6D;
    border-radius: 6px;
    padding-right: 50px;
    border: 1px solid #e6e8f0;
    background: var(--tp-common-white);
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

.tp-course-grid-sidebar-search input:focus {
    border-color: var(--tp-theme-7);
    box-shadow: 0px 0px 0px 3px rgba(70, 97, 253, 0.16);
}

.tp-course-grid-sidebar-search input::placeholder {
    font-size: 15px;
    color: #686A6D;
}

.tp-course-grid-sidebar-search-btn {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
}

.tp-course-grid-sidebar-tab {
    margin-right: 10px;
}

.tp-course-grid-sidebar-tab .nav .nav-item .nav-link {
    height: 40px;
    width: 40px;
    display: inline-block;
    text-align: center;
    line-height: 1;
    border-radius: 4px;
    margin-right: 6px;
    border: 1px solid rgba(1, 15, 28, 0.1);
}

.tp-course-grid-sidebar-tab .nav .nav-item .nav-link svg {
    color: #818487;
}

.tp-course-grid-sidebar-tab .nav .nav-item .nav-link.active {
    border: 1px solid #010f1c;
}

.tp-course-grid-sidebar-tab .nav .nav-item .nav-link.active svg {
    color: #010f1c;
}

.tp-course-grid-sidebar-select {
    margin-right: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-grid-sidebar-select {
        margin-top: 20px;
    }
}

.tp-course-grid-sidebar-select .nice-select {
    height: 44px;
    line-height: 40px;
    border: 1px solid #e6e8f0;
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

.tp-course-grid-sidebar-select .nice-select p {
    color: #43444a;
}

.tp-course-grid-sidebar-select .nice-select:focus {
    border: 1px solid #e6e8f0;
}

.tp-course-list-thumb {
    width: 370px;
    height: 300px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-list-thumb {
        width: 100%;
        height: auto;
    }
}

.tp-course-list-thumb img {
    width: 370px;
    height: 300px;
    border-radius: 8px;
    object-fit: cover;
    display: inline-block;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-list-thumb img {
        height: 100%;
        width: 100%;
    }
}

.tp-course-list-title {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--tp-heading-2);
}

.tp-course-list-title a:hover {
    color: var(--tp-dashboard-secondary);
}

.tp-course-list-p p {
    font-weight: 300;
    padding-bottom: 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(3, 31, 66, 0.08);
}



@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-2-main-inner {
        padding-right: 0;
    }
}

.tp-course-details-2-main-title {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 24px;
    color: var(--tp-heading-2);
}

.tp-course-details-2-category {
    font-size: 14px;
    font-weight: 600;
    padding: 0px 22px;
    border-radius: 6px;
    margin-bottom: 15px;
    display: inline-block;
    background: #c354f6;
    color: var(--tp-common-white);
}

.tp-course-details-2-title {
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
    color: var(--tp-heading-2);
}

.tp-course-details-2-author-avater {
    margin-right: 14px;
}

.tp-course-details-2-author-avater img {
    width: 50px;
    height: 50px;
}

.tp-course-details-2-author-designation {
    font-weight: 400;
    font-size: 15px;
    color: #73757b;
    margin-bottom: 0;
    line-height: 1;
    display: inline-block;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-2-meta {
        margin-bottom: 10px;
    }
}

.tp-course-details-2-meta:not(:first-of-type) {
    margin-left: 50px;
}

.tp-course-details-2-meta-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--tp-heading-2);
}

.tp-course-details-2-meta-subtitle {
    font-weight: 400;
    font-size: 15px;
    color: #73757b;
    margin-bottom: 0;
    line-height: 1;
    display: inline-block;
}

.tp-course-details-2-widget {
    top: 120px;
    padding: 15px;
    border-radius: 10px;
    background-color: var(--tp-common-white);
    box-shadow: 0 0 24px 0 rgba(3, 31, 66, 0.1);
    margin-top: -300px;
    position: sticky;
    z-index: 9;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-2-widget {
        margin-top: 30px;
    }
}

.tp-course-details-2-widget-thumb img {
    border-radius: 8px;
    width: 100%;
}

.tp-course-details-2-widget-thumb a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    display: inline-block;
    border-radius: 100%;
    background-color: #fcfcfc;
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.3);
}

.tp-course-details-2-widget-thumb a::after {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    width: 90%;
    height: 90%;
    transform: scale(1);
    border: 1px solid var(--tp-common-white);
    animation: video-border 1.5s linear infinite;
    border-radius: 50%;
}

.tp-course-details-2-widget-content {
    padding: 30px 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (max-width: 767px) {
    .tp-course-details-2-widget-content {
        padding: 30px 0;
    }
}

.tp-course-details-2-widget-price {
    margin-bottom: 18px;
}

.tp-course-details-2-widget-price span {
    font-size: 30px;
    font-weight: 600;
    margin-right: 10px;
    color: var(--tp-heading-2);
}

.tp-course-details-2-widget-price del {
    font-size: 16px;
    font-weight: 400;
    color: #73757b;
}

.tp-course-details-2-widget-price p {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #e71442;
    padding: 0px 9px;
    margin-left: 5px;
    margin-bottom: 0;
    border-radius: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(231, 20, 66, 0.12);
}

.tp-course-details-2-widget-price .price {
    display: flex;
    align-items: center;
}

.tp-course-details-2-widget-price .share button span {
    margin: 0;
    line-height: 32px;
}

.tp-course-details-2-widget-btn {
    margin-bottom: 30px;
}

.tp-course-details-2-widget-btn a {
    display: block;
    font-size: 17px;
    font-weight: 500;
    border-radius: 6px;
    padding: 11px 15px;
    text-align: center;
    color: var(--tp-heading-2);
    border: 1px solid #e6e8f0;
    background: var(--tp-common-white);
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

.tp-course-details-2-widget-btn a:not(:last-of-type) {
    margin-bottom: 10px;
}

.tp-course-details-2-widget-btn a:hover {
    border: 1px solid var(--tp-dashboard-primary);
    color: var(--tp-common-white);
    background-color: var(--tp-dashboard-primary);
}

.tp-course-details-2-widget-btn a.active {
    border: none;
    color: var(--tp-common-white);
    background-color: var(--tp-dashboard-primary);
}

.tp-course-details-2-widget-btn a.active:hover {
    background: #425EFF;
    color: var(--tp-common-white);
}

.tp-course-details-2-widget-btn p {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 0;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #7e7f88;
}

.tp-course-details-2-widget-list h5 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--tp-heading-2);
}

.tp-course-details-2-widget-list-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(3, 31, 66, 0.1);
}

.tp-course-details-2-widget-list-item span {
    font-size: 15px;
    font-weight: 500;
    color: #4f5158;
}

.tp-course-details-2-widget-list-item span svg {
    margin-right: 5px;
    transform: translateY(-1px);
}

.tp-course-details-2-widget-share {
    margin-bottom: 15px;
}

.tp-course-details-2-widget-share .share {
    font-size: 15px;
    font-weight: 500;
    color: var(--tp-dashboard-primary);
}

.tp-course-details-2-widget-share .share span {
    display: inline-block;
    margin-right: 5px;
    transform: translateY(-1px);
}

.tp-course-details-2-widget-share .coupon {
    font-size: 15px;
    font-weight: 500;
    color: #ff843f;
    position: relative;
}

.tp-course-details-2-widget-share .coupon:hover::after {
    opacity: 0;
    transform: translateY(-2px);
}

.tp-course-details-2-widget-share .coupon::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background: #ff843f;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-course-details-2-widget-search input {
    height: 46px;
    border-radius: 6px;
    padding-right: 110px;
    border: 1px solid #e6e8f0;
    background: var(--tp-common-white);
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

.tp-course-details-2-widget-search input:focus {
    border-color: var(--tp-theme-7);
    box-shadow: 0px 0px 0px 3px rgba(70, 97, 253, 0.16);
}

.tp-course-details-2-widget-search button {
    position: absolute;
    top: 50%;
    right: 0;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    background: #031f42;
    padding: 10px 29px;
    transform: translateY(-50%);
    color: var(--tp-common-white);
}

.tp-course-details-2-widget-search button:hover {
    background-color: var(--tp-dashboard-primary);
}

.tp-course-details-2-text p {
    font-size: 17px;
    margin-bottom: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-2-text p br {
        display: none;
    }
}

.tp-course-details-2-text a {
    font-size: 16px;
    font-weight: 500;
    color: #3c66f9;
    display: inline-block;
    cursor: pointer;
}

.tp-course-details-2-text a span {
    margin-right: 5px;
    display: inline-block;
    transform: translateY(-2px);
}

.tp-course-details-2-text .content {
    position: relative;
    max-height: 160px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: max-height 0.3s ease;
}

.tp-course-details-2-text .content::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    height: 30px;
    width: 100%;
    background: linear-gradient(359deg, #FFF 37.73%, rgba(255, 255, 255, 0) 99.32%);
}

.tp-course-details-2-text .content.show {
    max-height: 500px;
}

.tp-course-details-2-text .show-more-button svg {
    margin-right: 5px;
}

.tp-course-details-2-nav {
    position: sticky;
    top: 120px;
    z-index: 3;
}

.tp-course-details-2-nav nav {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e6e8f0;
    background: var(--tp-common-white);
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

@media only screen and (max-width: 767px) {
    .tp-course-details-2-nav nav {
        padding: 12px 12px 0;
    }
}

.tp-course-details-2-nav nav ul li {
    display: inline-block;
}

@media only screen and (max-width: 767px) {
    .tp-course-details-2-nav nav ul li {
        margin-bottom: 12px;
    }
}

.tp-course-details-2-nav nav ul li.current a {
    color: var(--tp-common-white);
    background: var(--tp-dashboard-primary);
}

.tp-course-details-2-nav nav ul li.current a:hover {
    box-shadow: none;
    background: #425EFF;
    color: var(--tp-common-white);
}

.tp-course-details-2-nav nav ul li a {
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    border-radius: 8px;
    padding: 10px 49px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-course-details-2-nav nav ul li a {
        padding: 8px 30px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-course-details-2-nav nav ul li a {
        padding: 10px 20px;
    }
}

.tp-course-details-2-nav nav ul li a:hover {
    color: var(--tp-dashboard-primary);
    border-color: rgb(245, 246, 255);
    background-color: rgb(245, 246, 255);
}

.tp-course-details-2-content {
    padding-top: 60px;
}

.tp-course-details-2-content #reviews {
    padding-top: 95px;
}

@media only screen and (max-width: 767px) {
    .tp-course-details-2-content #reviews {
        flex-wrap: wrap;
        padding-top: 50px;
    }
}

.tp-course-details-2-list ul {
    display: inline-block;
    margin-bottom: 20px;
}

.tp-course-details-2-list ul li {
    list-style: none;
    font-size: 17px;
    font-weight: 400;
    color: var(--tp-text-body);
    width: 50%;
    float: left;
    margin-bottom: 5px;
}

@media only screen and (max-width: 767px) {
    .tp-course-details-2-list ul li {
        width: 100%;
    }
}

.tp-course-details-2-list p {
    font-size: 17px;
}

.tp-course-details-2-faq .accordion-item {
    border-radius: 6px;
    border: 1px solid #e6e8f0;
}

.tp-course-details-2-faq .accordion-item:not(:last-of-type) {
    margin-bottom: 16px;
}

.tp-course-details-2-faq .accordion-button {
    border-radius: 6px;
    padding: 19px 30px 19px 54px;
}

@media only screen and (max-width: 767px) {
    .tp-course-details-2-faq .accordion-button {
        padding: 18px 15px 18px 30px;
    }
}

.tp-course-details-2-faq .accordion-button .span {
    font-size: 18px;
    font-weight: 500;
    color: var(--tp-heading-2);
}

.tp-course-details-2-faq .accordion-button .lesson {
    font-size: 15px;
    font-weight: 400;
    color: #57595f;
    border-radius: 34px;
    padding: 5px 20px;
    border: 1px solid #e6e8f0;
}

.tp-course-details-2-faq .accordion-button:not(.collapsed) {
    box-shadow: none;
    padding: 19px 30px 19px 54px;
    border-bottom: 1px solid #e6e8f0;
    background-color: var(--tp-common-white);
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

@media only screen and (max-width: 767px) {
    .tp-course-details-2-faq .accordion-button:not(.collapsed) {
        padding: 18px 15px 18px 30px;
    }
}

.tp-course-details-2-faq .accordion-button:not(.collapsed) .span {
    color: var(--tp-dashboard-primary);
}

.tp-course-details-2-faq .accordion-button:not(.collapsed) .accordion-btn::before {
    background-color: var(--tp-common-white);
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    -ms-transform: translate(-50%, -50%) rotate(0deg);
    -o-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
}

.tp-course-details-2-faq .accordion-button:not(.collapsed) .accordion-btn::after {
    background-color: var(--tp-dashboard-primary);
}

.tp-course-details-2-faq .accordion-button:focus {
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

.tp-course-details-2-faq .accordion-button .accordion-btn {
    position: absolute;
    top: 50%;
    left: 30px;
    transition: 0.3s;
    display: inline-block;
    transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
    .tp-course-details-2-faq .accordion-button .accordion-btn {
        left: 15px;
    }
}

.tp-course-details-2-faq .accordion-button .accordion-btn::after,
.tp-course-details-2-faq .accordion-button .accordion-btn::before {
    position: absolute;
    content: "";
    width: 12px;
    height: 2px;
    left: 50%;
    top: 50%;
    border-radius: 2px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #031f42;
}

.tp-course-details-2-faq .accordion-button .accordion-btn::before {
    background-color: #031f42;
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -moz-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    -o-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
}

.tp-course-details-2-faq .accordion-button::after {
    content: none;
}

.tp-course-details-2-faq .accordion-body {
    padding: 18px 30px;
}

@media only screen and (max-width: 767px) {
    .tp-course-details-2-faq .accordion-body {
        padding: 15px 15px;
    }
}

.tp-course-details-2-faq-item:not(:last-of-type) {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f4f5fa;
}

.tp-course-details-2-faq-item .left span {
    font-size: 15px;
    color: #57595f;
    font-weight: 400;
}

.tp-course-details-2-faq-item .left span i {
    font-size: 16px;
    font-style: normal;
    color: var(--tp-heading-2);
}

.tp-course-details-2-faq-item .left span svg {
    transform: translateY(-2px);
    margin-right: 5px;
}

.tp-course-details-2-faq-item .right span {
    font-size: 14px;
    font-weight: 400;
    color: #697089;
}

.tp-course-details-2-faq-item .right span a {
    margin-left: 10px;
    display: inline-block;
    font-weight: 400;
    font-size: 15px;
    padding: 0px 11px;
    border-radius: 29px;
    background: rgba(81, 105, 241, 0.1);
    color: var(--tp-dashboard-primary);
}

.tp-course-details-2-faq-item .right span a svg {
    margin-right: 5px;
    transform: translateY(-1px);
}

@media only screen and (max-width: 767px) {
    .tp-course-details-2-instructor {
        flex-wrap: wrap;
    }
}

.tp-course-details-2-instructor h5 {
    font-size: 20px;
    font-weight: 500;
    color: #000;
    margin-bottom: 0;
}

.tp-course-details-2-instructor .pre {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--tp-text-body);
}

.tp-course-details-2-instructor-sub {
    margin-bottom: 10px;
}

.tp-course-details-2-instructor-sub span {
    font-size: 14px;
    font-weight: 400;
    color: #6c7275;
}

.tp-course-details-2-instructor-sub span svg {
    margin-right: 2px;
    transform: translateY(-2px);
}

.tp-course-details-2-instructor-sub span:not(:last-of-type) {
    margin-right: 15px;
}

.tp-course-details-2-instructor-text {
    margin-bottom: 25px;
}

.tp-course-details-2-instructor-text p {
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-2-instructor-text p br {
        display: none;
    }
}

.tp-course-details-2-instructor-social a {
    display: inline-block;
    height: 36px;
    width: 36px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    margin-right: 6px;
    border: 1px solid #e6e8f0;
    background: var(--tp-common-white);
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

.tp-course-details-2-instructor-social a:hover {
    background: var(--tp-dashboard-secondary);
    border: 1px solid var(--tp-dashboard-secondary);
    color: var(--tp-common-white);
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-2-instructor-thumb {
        margin-right: 20px;
        margin-bottom: 20px;
    }
}

.tp-course-details-2-review-rating {
    margin-bottom: 60px;
}

.tp-course-details-2-review-rating-info {
    border-radius: 6px;
    padding: 31px;
    border: 1px solid #e6e8f0;
    background-color: var(--tp-common-white);
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-2-review-rating-info {
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-details-2-review-rating-info {
        padding: 25px;
    }
}

.tp-course-details-2-review-rating-info h5 {
    font-size: 54px;
    font-weight: 500;
    margin-bottom: 0px;
    letter-spacing: -0.02em;
    color: var(--tp-heading-2);
}

.tp-course-details-2-review-rating-info p {
    font-size: 15px;
    font-weight: 400;
    color: #6c7275;
}

.tp-course-details-2-review-details {
    padding: 22px 30px;
    border-radius: 6px;
    border: 1px solid #e6e8f0;
}

.tp-course-details-2-review-item {
    margin-bottom: 5px;
}

.tp-course-details-2-review-progress {
    height: 6px;
    margin: 0 2px;
    overflow: hidden;
    background-color: #F4F4F4;
    width: calc(100% - 40px - 60px);
}

.tp-course-details-2-review-progress .single-progress {
    height: 100%;
    background-color: #FFB21D;
}

.tp-course-details-2-review-text {
    font-size: 15px;
    font-weight: 400;
    color: #a0a2a4;
}

.tp-course-details-2-review-percent h5 {
    font-size: 14px;
    font-weight: 400;
    color: #55585b;
}

.tp-course-details-2-review-thumb {
    margin-right: 20px;
}

.tp-course-details-2-review-item-reply {
    margin-bottom: 40px;
}

.tp-course-details-2-review-item-reply:nth-child(1) {
    padding-bottom: 40px;
    border-bottom: 1px solid #dce0ec;
}

.tp-course-details-2-review-item-reply p {
    margin-bottom: 22px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-2-review-item-reply p br {
        display: none;
    }
}

.tp-course-details-2-review-top {
    margin-bottom: 15px;
}

.tp-course-details-2-review-content h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--tp-heading-2);
}

.tp-course-details-2-review-star {
    display: inline-block;
}

.tp-course-details-2-review-star .span {
    font-size: 14px;
    font-weight: 400;
    color: #6c7275;
    margin-left: 5px;
}

.tp-course-details-2-review-react>span {
    font-size: 14px;
    font-weight: 400;
    margin-right: 8px;
    color: #6c7275;
}

.tp-course-details-2-review-react .react a {
    padding: 6px 13px 8px;
    border: 1px solid #E6E8F0;
}

.tp-course-details-2-review-react .react a:first-child {
    border-radius: 6px 0 0px 6px;
}

.tp-course-details-2-review-react .react a:last-child {
    margin-left: -1px;
    border-radius: 0px 6px 6px 0px;
}

.tp-course-details-2-review-react .react a:hover {
    border-color: var(--tp-dashboard-secondary);
    background: var(--tp-dashboard-secondary);
}

.tp-course-details-2-review-react .react a:hover span {
    color: var(--tp-common-white);
}

.tp-course-details-2-review-react .react a span {
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-course-details-2-review-reply-wrap {
    margin-bottom: 100px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-course-details-2-review-reply-wrap {
        margin-bottom: 50px;
    }
}

.tp-course-details-2-review-reply-btn a {
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 6px 20px;
    border-radius: 6px;
    border: 1px solid #e6e8f0;
}

.tp-course-details-2-review-reply-btn a:hover {
    color: var(--tp-dashboard-primary);
    background: rgba(85, 109, 245, 0.14);
}

.tp-course-details-2-comment-star img {
    margin-bottom: 25px;
}

.tp-course-details-2-related-border {
    border-top: 1px solid #d8dce8;
}

.tp-course-details-2-related-heading {
    margin-bottom: 40px;
}

.tp-course-details-2-related-heading p {
    font-weight: 300;
    font-size: 20px;
    color: #57595f;
}

.tp-course-details-2-related-title {
    font-size: 36px;
    font-weight: 600;
    color: var(--tp-heading-2);
}

.tp-course-details-3-main {
    padding-top: 120px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-details-3-main {
        padding-top: 30px;
    }
}

.tp-course-details-3-main .tp-course-details-2-nav nav ul li a {
    padding: 10px 45px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-course-details-3-main .tp-course-details-2-nav nav ul li a {
        padding: 10px 35px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-course-details-3-main .tp-course-details-2-nav nav ul li a {
        padding: 10px 25px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-course-details-3-main .tp-course-details-2-nav nav ul li a {
        padding: 8px 20px;
    }
}

.tp-course-details-3-title {
    font-size: 60px;
    line-height: 1.1;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
    color: var(--tp-common-white);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-course-details-3-title br {
        display: none;
    }
}

.tp-course-details-3-meta-wrapper {
    margin-bottom: 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-course-details-3-meta-wrapper {
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-course-details-3-meta-wrapper {
        margin-bottom: 30px;
    }
}

.tp-course-details-3-meta-wrapper .tp-course-details-2-author-designation {
    color: rgba(255, 255, 255, 0.7);
}

.tp-course-details-3-meta-wrapper .tp-course-details-2-meta-title {
    color: var(--tp-common-white);
}

.tp-course-details-3-meta-wrapper .tp-course-details-2-meta-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.tp-course-details-3-widget {
    position: sticky;
    top: 120px;
    padding: 30px;
    margin-right: 25px;
    border-radius: 20px;
    background-color: var(--tp-common-white);
    box-shadow: 0 4px 94px 0 rgba(7, 0, 36, 0.1);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-details-3-widget {
        margin-right: 0;
        margin-bottom: 0;
    }
}

.tp-course-details-3-widget-content {
    padding: 25px 0 0 0;
}

.tp-course-details-3-list {
    margin-top: 80px;
    padding-bottom: 110px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-details-3-list {
        padding-bottom: 0;
    }
}

.tp-course-details-3-list-item {
    padding-right: 80px;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-details-3-list-item {
        padding-right: 0;
        border-bottom: 1px solid rgb(87, 89, 95);
    }
}

.tp-course-details-3-list-item span {
    font-size: 20px;
    font-weight: 500;
    color: var(--tp-common-white);
}

.tp-course-details-3-list-item span.width {
    font-weight: 400;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-course-details-3-list-item span {
        color: var(--tp-heading-primary);
    }
}

/*----------------------------------------*/

/*  8.6 Banner css
/*----------------------------------------*/

.tp-banner-sm-2-wrap {
    background-color: #E2EFE4;
    border-radius: 20px;
    padding: 43px 0 52px 51px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    .tp-banner-sm-2-wrap {
        padding: 43px 0 52px 20px;
    }
}

.tp-banner-sm-2-wrap.tp-banner-sm-2-bg-2 {
    background-color: #FFF3F4;
}

.tp-banner-sm-2-wrap:hover .tp-banner-sm-2-shape-1 {
    transform: scale(1.08);
}

.tp-banner-sm-2-wrap.tp-banner-inner {
    background: #D1F2FD;
}

.tp-banner-sm-2-wrap.tp-banner-inner.tp-banner-sm-2-bg-2 {
    background-color: #FFDEF7;
}

.tp-banner-sm-2-wrap.tp-banner-inner .tp-banner-sm-2-btn a {
    border: 1px solid #073742;
    background-color: #073742;
}

.tp-banner-sm-2-wrap.tp-banner-inner .tp-banner-sm-2-btn a:hover {
    color: #073742;
    background-color: transparent;
}

.tp-banner-sm-2-title {
    color: #1E1E2F;
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 31px;
}

.tp-banner-sm-2-title span {
    font-weight: 600;
    display: inline-block;
    position: relative;
}

.tp-banner-sm-2-btn a {
    border-radius: 6px;
    background: #0C7D81;
    border: 2px solid #0c7D81;
    line-height: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--tp-common-white);
    padding: 11px 18px;
    display: inline-block;
}

.tp-banner-sm-2-btn a:hover {
    background-color: transparent;
    color: #0C7D81;
}

.tp-banner-sm-2-shape-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    z-index: -1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-banner-sm-2-shape-1 {
        right: -60px;
    }
}

@media only screen and (max-width: 767px) {
    .tp-banner-sm-2-shape-1 {
        right: -100px;
    }
}

.tp-banner-sm-2-shape-1 img {
    max-width: 100%;
}

.tp-banner-sm-2-bg-2 .tp-banner-sm-2-btn a {
    border: 2px solid #FD8B6C;
    background: #FD8B6C;
}

.tp-banner-sm-2-bg-2 .tp-banner-sm-2-btn a:hover {
    background-color: transparent;
    color: #FD8B6C;
}

.tp-banner-5-item {
    padding: 118px 25px 122px 25px;
    position: relative;
    z-index: 1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.tp-banner-5-item::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(16, 16, 16, 0.4);
    z-index: -1;
}

.tp-banner-5-content span {
    color: var(--tp-common-white);
    font-size: 28px;
    font-style: italic;
    display: inline-block;
    margin-bottom: 13px;
}

.tp-banner-5-content P {
    color: rgba(255, 255, 255, 0.8);
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 31px;
}

.tp-banner-5-content .tp-btn-4 {
    padding: 23px 44px;
}

.tp-banner-5-title {
    color: var(--tp-common-white);
    font-size: 60px;
    font-weight: 700;
    letter-spacing: -1.2px;
    text-transform: uppercase;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-banner-5-title {
        font-size: 48px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (max-width: 767px) {
    .tp-banner-5-title {
        font-size: 42px;
    }
}

.tp-banner-5-btn .tp-btn-5:hover {
    color: var(--tp-heading-primary);
    background-color: var(--tp-common-white);
}

/*----------------------------------------*/

/*  8.7 Brand css
/*----------------------------------------*/

.tp-brand-2-content p {
    margin-bottom: 27px;
}

.tp-brand-2-title {
    color: #1E1E2F;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
}

.tp-brand-2-title span {
    color: #0071DC;
    position: relative;
    display: inline-block;
}

.tp-brand-2-btn .tp-btn-round {
    padding: 13px 26px;
}

.tp-brand-2-item {
    margin-bottom: 35px;
}

.tp-brand-2-wrapper {
    display: grid;
    grid-column-gap: 90px;
    grid-template-columns: repeat(5, 1fr);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-brand-2-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-brand-2-wrapper {
        grid-column-gap: 60px;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-brand-2-wrapper {
        grid-column-gap: 65px;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    .tp-brand-2-wrapper {
        grid-column-gap: 50px;
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
    }
}

.tp-brand-5-bg {
    padding-top: 56px;
    padding-bottom: 64px;
}

.tp-brand-5-title {
    color: #161613;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 47px;
}

.tp-brand-5-item {
    text-align: center;
}

.tp-brand-5-item img {
    mix-blend-mode: luminosity;
    filter: grayscale(1);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-brand-6-heading {
        margin-bottom: 40px;
    }
}

.tp-brand-6-wrap {
    align-items: center;
    grid-column-gap: 0px;
    grid-template-columns: repeat(4, 1fr);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-brand-6-wrap {
        grid-gap: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-brand-6-wrap {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-brand-6-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    .tp-brand-6-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tp-brand-6-wrap .tp-brand-2-item {
    margin-bottom: 0;
    text-align: center;
    padding: 36px 25px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    border-right: 1px solid rgba(3, 31, 66, 0.08);
}

.tp-brand-6-wrap .tp-brand-2-item:nth-child(-n+4) {
    border-bottom: 1px solid rgba(3, 31, 66, 0.08);
}

.tp-brand-6-wrap .tp-brand-2-item:nth-child(1),
.tp-brand-6-wrap .tp-brand-2-item:nth-child(5) {
    border-left: 1px solid rgba(3, 31, 66, 0.08);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-brand-6-wrap .tp-brand-2-item {
        border: none !important;
        padding: 0;
        text-align: start;
    }
}

.tp-brand-6-wrap .tp-brand-2-item:hover {
    background-color: #F8F8FA;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-brand-6-wrap .tp-brand-2-item:hover {
        background-color: transparent;
    }
}

.tp-brand-6-wrap .tp-brand-2-item img {
    height: 75px;
}

.tp-gallary-3-wrap {
    margin-bottom: -152px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-gallary-3-wrap {
        margin-bottom: 100px;
    }
}

.tp-gallary-3-item-1,
.tp-gallary-3-item-4 {
    border-radius: 30px;
}

.tp-gallary-3-item-1 img,
.tp-gallary-3-item-4 img {
    border-radius: 30px;
    max-width: 100%;
}

.tp-gallary-3-item-2,
.tp-gallary-3-item-3 {
    border-radius: 36px;
}

.tp-gallary-3-item-2 img,
.tp-gallary-3-item-3 img {
    border-radius: 36px;
    animation: radiusChange 6s linear infinite;
    max-width: 100%;
}

.tp-gallary-3-item-1 {
    margin-top: 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-gallary-3-item-1 {
        margin-top: 0;
        text-align: center;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-gallary-3-item-1 {
        margin-top: 0;
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-gallary-3-item-2 {
        margin-bottom: 30px;
    }
}

.tp-gallary-3-item-3 {
    margin-top: 60px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-gallary-3-item-3 {
        margin-top: 0;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-gallary-3-item-3 {
        margin-bottom: 30px;
    }
}

.tp-gallary-3-item-4 {
    margin-top: 175px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-gallary-3-item-4 {
        margin-top: 0;
    }
}

.tp-subject-section span {
    display: inline-block;
    border-radius: 12px;
    background: #DF7BD2;
    color: var(--tp-common-white);
    font-size: 15px;
    font-weight: 600;
    padding: 2px 16px;
    margin-bottom: 16px;
}

.tp-subject-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 75px;
    grid-column-gap: 80px;
    margin-left: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-subject-wrap {
        margin-left: 0;
    }
}

@media only screen and (max-width: 767px) {
    .tp-subject-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tp-subject-bg {
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 256px;
    padding-bottom: 68px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-subject-bg {
        padding-top: 100px;
    }
}

.tp-subject-icon {
    margin-bottom: 17px;
}

.tp-subject-icon span {
    display: inline-block;
    height: 72px;
    width: 72px;
    line-height: 72px;
    text-align: center;
}

.tp-subject-title-sm {
    color: #0A1D3A;
    font-size: 18px;
    font-weight: 500;
}

span.pink-border {
    border-radius: 22px 45px 28px 22px;
    background: #DF7BD2;
}

span.gblue-border {
    border-radius: 40px 30px;
    background: #09B1AB;
}

span.yellow-border {
    border-radius: 20px 34px 34px 34px;
    background: #FA922C;
}

span.lyellow-border {
    border-radius: 20px 34px 34px 34px;
    background: #FDBF62;
}

span.blue-border {
    border-radius: 22px 45px 28px 22px;
    background: #47B1E4;
}

span.tomato-border {
    border-radius: 46px 30px;
    background: #F67568;
}

span.dark-border {
    border-radius: 20px 34px 34px 34px;
    background: #8E8E8E;
}

/*----------------------------------------*/

/*  8.8 Team css
/*----------------------------------------*/

.tp-team-2-item {
    position: relative;
    z-index: 1;
}

.tp-team-2-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 320px;
    width: 100%;
    /* background-color: #D9D0E6; */
    z-index: -1;
    border-radius: 20px;
}

/* .tp-team-2-bg.leaf {
    background-color: #C5D1B7;
}

.tp-team-2-bg.strom {
    background-color: #E3CFC8;
}

.tp-team-2-bg.geyser {
    background-color: #CBE0EF;
} */

.tp-team-2-thumb {
    pointer-events: none;
    text-align: center;
}

.tp-team-2-thumb img {
    max-width: 100%;
}

.tp-team-2-content {
    position: absolute;
    left: 20px;
    right: 20px;
    text-align: left;
    bottom: 10px;
    border-radius: 10px;
    /* background: #FFF;
    box-shadow: 0px 0px 40px 0px rgba(5, 27, 48, 0.06); */
    padding: 20px;
}

.tp-team-2-content span {
    color: #777781;
    font-size: 15px;
}

.tp-team-2-title {
    color: #1E1E2F;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
}

.tp-team-2-title a:hover {
    color: var(--tp-theme-secondary);
}

.tp-team-2-social {
    position: absolute;
    bottom: 270px;
    right: 10px;
    z-index: 2;
    cursor: pointer;
    transition: all 0.5s ease;
    border-radius: 30px 30px 2px 30px;
    background: #0071DC;
    box-shadow: 0px 1px 3px 0px rgba(43, 22, 5, 0.14);
}

.tp-team-2-social:hover a {
    opacity: 1;
}

.tp-team-2-social:hover .tp-team-2-social-wrap {
    border-radius: 30px 30px 0px 0px;
}

.tp-team-2-social:hover .tp-team-2-social-wrap i,
.tp-team-2-social:hover .tp-team-2-social-wrap svg {
    transform: rotate(135deg);
}

.tp-team-2-social:hover .tp-team-2-social-icon {
    transform: scaleY(1);
}

.tp-team-2-social-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    color: var(--tp-common-white);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    font-size: 13px;
    position: relative;
    z-index: 3;
    background: #0071DC;
    border-radius: 30px 30px 2px 30px;
}

.tp-team-2-social-wrap i,
.tp-team-2-social-wrap svg {
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    color: var(--tp-common-white);
}

.tp-team-2-social-wrap svg {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
    color: var(--tp-common-white);
}

.tp-team-2-social-icon {
    position: absolute;
    top: 25px;
    height: auto;
    background: #0071DC;
    padding: 10px 0 15px 0;
    border-radius: 0 0 30px 30px;
    transform: scaleY(0);
    transform-origin: top;
    transition: 0.3s;
    z-index: -1;
}

.tp-team-2-social-icon a {
    width: 40px;
    height: 26px;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
    display: block;
}

.tp-team-2-social-icon a i,
.tp-team-2-social-icon a span {
    color: var(--tp-common-white);
    opacity: 0.7;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-team-2-social-icon a:hover i,
.tp-team-2-social-icon a:hover span {
    opacity: 1;
}

@media only screen and (max-width: 767px) {
    .tp-team-2-arrow {
        margin-bottom: 30px;
    }
}

.tp-team-2-prev,
.tp-team-2-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* background: #f2f2f2; */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f4aa8;
  border: 1px solid #1f4aa8;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tp-team-2-prev:hover,
.tp-team-2-next:hover {
  background: #1f4aa8;
  color: #fff;
}


.tp-team-2-arrow span:hover {
    background-color: var(--tp-theme-secondary);
    color: var(--tp-common-white);
}

.tp-team-2-arrow span svg {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

.tp-team-2-next,
.tp-team-2-prev {
    margin-right: 10px;
    border-radius: 50px;
}

.tp-trainer-5-wrap {
    margin-left: 60px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tp-trainer-5-wrap {
        margin-left: 0;
    }
}

.tp-trainer-5-item {
    position: relative;
}

.tp-trainer-5-item:hover .tp-trainer-5-content {
    margin-bottom: 0;
}

.tp-trainer-5-box {
    overflow: hidden;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    border-radius: 10px;
}

.tp-trainer-5-thumb img {
    border-radius: 20px;
    width: 100%;
}

.tp-trainer-5-content {
    padding: 26px 25px 22px 25px;
    background: var(--tp-common-white);
    margin-bottom: -65px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-trainer-5-title {
    color: var(--tp-heading-4);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-trainer-5-title {
        font-size: 18px;
    }
}

.tp-trainer-5-info {
    border-bottom: 1px solid #F2EEEB;
    margin-bottom: 15px;
    padding-bottom: 16px;
}

.tp-trainer-5-info span {
    color: #777781;
    font-size: 15px;
    font-weight: 400;
}

.tp-trainer-5-social a {
    font-size: 14px;
    color: #777781;
}

.tp-trainer-5-social a:not(:last-of-type) {
    margin-right: 18px;
}

.tp-trainer-5-social a:hover {
    color: var(--tp-heading-4);
}

@media only screen and (max-width: 767px) {
    .tp-team-6-heading {
        margin-bottom: 30px;
    }
}

.tp-team-6-heading .tp-section-3-title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -2px;
    font-family: var(--tp-ff-manrope);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-team-6-heading .tp-section-3-title {
        font-size: 40px;
    }
}

.tp-team-6-heading .tp-section-3-title .tp-underline-shape-9 {
    left: 0;
}

.tp-team-6-wrapper .tp-event-details-item {
    border-color: transparent;
    background-color: #F8F8FA;
}

.tp-team-6-wrapper .tp-event-details-item:hover {
    box-shadow: none;
    transform: translateY(0px);
    border: 1px solid rgb(89, 86, 233);
}

.tp-team-6-wrapper .tp-event-details-item-social a:hover {
    background-color: var(--tp-theme-9);
}

.tp-team-6-nav .tp-team-2-arrow span:hover {
    background-color: var(--tp-theme-9);
}

/*----------------------------------------*/

/*  8.9 Process css
/*----------------------------------------*/

.tp-process-3-bg {
    position: relative;
    z-index: 1;
    padding-top: 110px;
    padding-bottom: 195px;
}

.tp-process-3-wrap p {
    font-size: 17px;
    margin-bottom: 25px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-process-3-wrap p br {
        display: none;
    }
}

.tp-process-3-item-1 {
    margin-top: 182px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-process-3-item-1 {
        margin-top: 40px;
        margin-bottom: 30px;
    }
}

.tp-process-3-item-2 {
    margin-left: 17px;
    margin-top: 62px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-process-3-item-2 {
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 30px;
    }
}

.tp-process-3-item-3 {
    margin-left: 72px;
    margin-top: -57px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-process-3-item-3 {
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 30px;
    }
}

.tp-process-3-icon {
    margin-bottom: 25px;
}

.tp-process-3-icon span {
    display: inline-block;
    height: 72px;
    width: 72px;
    line-height: 72px;
    text-align: center;
}

.tp-process-3-title {
    color: var(--tp-heading-3);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 11px;
}

.tp-process-3-content p {
    font-size: 17px;
    color: #696969;
    line-height: 24px;
}

.tp-process-3-btn {
    position: relative;
    z-index: 2;
}

.tp-process-3-btn a {
    position: relative;
    color: var(--tp-theme-3);
    font-size: 15px;
    font-weight: 600;
}

.tp-process-3-btn a span {
    display: inline-block;
    margin-left: 4px;
}

.tp-process-3-btn a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: var(--tp-theme-3);
    left: auto;
    right: 0;
    bottom: -2px;
    opacity: 0;
    transition: all 0.3s linear;
}

.tp-process-3-btn a:hover::after {
    opacity: 1;
    width: 100%;
    left: 0;
    right: auto;
    transition: all 0.3s linear;
}

.tp-process-3-wrapper {
    position: relative;
    z-index: 1;
}

.tp-process-3-shape-1 {
    position: absolute;
    top: -30px;
    left: 55px;
    z-index: -1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-process-3-shape-1 {
        left: 45px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-process-3-shape-1 {
        display: none;
    }
}

.tp-process-3-shape-2 {
    position: absolute;
    bottom: 0;
    right: -12px;
    z-index: -1;
}

.tp-process-3-shape-3 {
    position: absolute;
    bottom: 0;
    left: 30px;
    z-index: -1;
    animation: tpswing 1.8s ease-in-out 0.1s forwards infinite alternate;
    transform-origin: bottom left;
}

.tp-process-3-shape-4 {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.tp-process-3-shape-5 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    animation: tpswing 1.5s ease-in-out 0.1s forwards infinite alternate;
    transform-origin: bottom right;
}

.tp-process-3-shape-6 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    animation: tpswing 2s ease-in-out 0.1s forwards infinite alternate;
    transform-origin: bottom right;
}

.tp-process-3-shape-7 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.tp-process-3-shape-8 {
    position: absolute;
    bottom: 65px;
    left: 47%;
    z-index: -1;
    animation: tpswings 2s ease-in-out 0.1s forwards infinite alternate;
    transform-origin: bottom left;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-process-3-shape-8 {
        left: 37%;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-process-3-shape-8 {
        left: 28%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-process-3-shape-8 {
        left: 30%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-process-3-shape-8 {
        display: none;
    }
}

.tp-process-3-shape-9 {
    position: absolute;
    bottom: 62px;
    right: 22%;
    z-index: -1;
    animation-duration: 4s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: hero-bounce;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-process-3-shape-9 {
        right: 27%;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-process-3-shape-9 {
        right: 30%;
    }
}

.tp-process-3-shape-10 {
    position: absolute;
    bottom: 18px;
    left: 25%;
    z-index: -1;
    animation: tpswing 0.4s ease-in-out 0.1s forwards infinite alternate;
    transform-origin: bottom bottom;
}

.tp-process-3-shape-11 {
    position: absolute;
    bottom: 55px;
    left: 50%;
    z-index: -1;
    animation: tpswing 1s ease-in-out 0.1s forwards infinite alternate;
    animation: bannerAnimationTwo 8s linear 0.2s infinite alternate;
    transform-origin: bottom bottom;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tp-process-3-shape-11 {
        left: 40%;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-process-3-shape-11 {
        left: 32.5%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-process-3-shape-11 {
        left: 34%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tp-process-3-shape-11 {
        display: none;
    }
}

.tp-process-3-shape-11 img {
    width: 30px;
}

.tp-process-3-shape-12 {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background-color: #EFEDFF;
    position: absolute;
    right: -100px;
    top: 218px;
}

.tp-process-3-shape-13 {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: #E0F0DD;
    position: absolute;
    left: -50px;
    top: 340px;
    animation: spin 7s infinite linear;
    z-index: -1;
}

.tp-process-3-shape-14 {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #FFE9C8;
    position: absolute;
    left: 135px;
    top: 200px;
    animation: spin 6s infinite linear;
    z-index: -1;
}

.tp-process-3-shape-15 {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: linear-gradient(157deg, #FFCA91 11.73%, #FFE3C4 88.26%);
    position: absolute;
    left: 205px;
    bottom: 250px;
    animation: neptune 12s infinite linear;
}

.tp-process-3-shape-16 {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: linear-gradient(157deg, #FFCA91 11.73%, #FFE3C4 88.26%);
    position: absolute;
    left: 31%;
    top: 45%;
    animation: neptune 8s infinite linear;
}

.tp-process-3-shape-17 {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: linear-gradient(157deg, #FFCA91 11.73%, #FFE3C4 88.26%);
    position: absolute;
    right: 135px;
    bottom: 40%;
    animation: neptune 10s infinite linear;
}


/*----------------------------------------*/

/*  7.3 Sidebar
/*----------------------------------------*/

.tp-user-wrap {
    display: block;
    border-radius: 10px;
    padding: 28px 22px 12px 18px;
    background-color: var(--tp-common-white);
    box-shadow: 0 1px 1px 0 rgba(3, 11, 30, 0.14), 0 1px 2px 1px rgba(3, 11, 30, 0.06);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-user-wrap {
        padding: 22px 10px;
    }
}

.tp-user-banner {
    border: 1px solid #E6E8F0;
    border-radius: 8px;
    padding: 25px 0 27px 16px;
    position: relative;
    margin-top: 20px;
    z-index: 1;
}

.tp-user-banner-title {
    color: #303651;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 14px;
}

.tp-user-banner-text {
    width: 50%;
}

.tp-user-banner-shape {
    position: absolute;
    bottom: 8px;
    right: 0;
    z-index: -1;
}

.tp-user-menu {
    padding: 0px 0px 12px 0px;
}

.tp-user-menu-title {
    padding: 6px 16px 4px 16px;
    color: #8F9195;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24px;
    text-transform: uppercase;
}

.tp-user-menu-title.space-gap {
    margin-top: 10px;
    padding-bottom: 0;
}

.tp-user-menu ul li {
    list-style: none;
}

.tp-user-menu ul li:not(:last-of-type) {
    margin-bottom: 5px;
}

.tp-user-menu ul li a {
    display: flex;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    color: #4F5158;
    padding: 6px 16px 8px 16px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tp-user-menu ul li a span {
    display: inline-block;
    width: 30px;
    transform: translateY(-1px);
}

.tp-user-menu ul li a.active {
    border-radius: 8px;
    background: #556DF5;
    color: var(--tp-common-white);
    box-shadow: 0px 0px 1px 0px #1438B5, 0px 1px 2px 0px rgba(20, 56, 181, 0.25);
}

.tp-user-menu ul li a.active:hover {
    box-shadow: none;
    color: var(--tp-common-white);
    background: var(--tp-dashboard-primary);
}

.tp-user-menu ul li a:hover {
    color: var(--tp-dashboard-primary);
    background: rgba(85, 109, 245, 0.14);
}

.tpd-menu {
    padding: 0 85px;
    box-shadow: 0px 1px 1px 0px rgba(3, 11, 30, 0.14), 0px 1px 2px 1px rgba(3, 11, 30, 0.06);
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .tpd-menu {
        padding: 0 60px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tpd-menu {
        padding: 0 30px;
    }
}

.tpd-menu .tp-header-2-search {
    width: 320px;
}

.tpd-menu .tp-header-2-search input {
    color: var(--tp-heading-primary);
    font-size: 15px;
    font-weight: 400;
    width: 100%;
    padding: 0 30px 0 50px;
    border-radius: 1000px;
    background-color: #F3F4F9;
    border: 2px solid #F3F4F9;
}

.tpd-menu .tp-header-2-search input:focus {
    border-color: var(--tp-theme-secondary);
    background-color: var(--tp-common-white);
}

.tpd-menu .tp-header-2-search-btn {
    position: absolute;
    right: auto;
    left: 22px;
}

.tpd-menu .tp-header-2-search-btn span {
    display: inline-block;
    transform: translateY(-1px);
}

.tpd-menu .tp-header-2-btn {
    margin-left: 30px;
}

.tpd-menu .tp-header-2-cart {
    position: relative;
}

.tpd-menu .tp-header-2-cart::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    left: -24px;
    height: 34px;
    width: 1px;
    background: rgba(0, 31, 63, 0.12);
}

.tpd-profile-avatar img {
    height: 40px;
    width: 40px;
    object-fit: cover;
}

.tpd-main {
    position: relative;
    z-index: 1;
}

.tpd-user-sidebar {
    margin-right: 22px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-user-sidebar {
        margin-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-user-sidebar {
        margin-bottom: 30px;
    }
}

/*----------------------------------------*/

/*  7.4 Dashboard Reviews
/*----------------------------------------*/

.tpd-reviews-student {
    width: 258px;
    flex: 0 0 auto;
}

.tpd-reviews-date {
    margin-left: 12px;
    width: 225px;
    flex: 0 0 auto;
}

.tpd-reviews-date span {
    color: #57595F;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 8px;
    display: inline-block;
}

.tpd-reviews-date p {
    color: #8A8B90;
    font-size: 14px;
    margin-bottom: 0;
    line-height: 1;
}

.tpd-reviews-feedback {
    margin-left: 15px;
    width: calc(100% - 535px);
}

.tpd-reviews-feedback .span {
    font-size: 18px;
    font-weight: 400;
    color: #4F5158;
}

.tpd-reviews-thumb {
    flex: 0 0 auto;
    margin-right: 12px;
}

.tpd-reviews-thumb img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.tpd-reviews-thumb-title {
    color: #4F5158;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

.tpd-reviews-course-info p {
    color: #757C8E;
    margin-bottom: 0;
    font-size: 15px;
}

.tpd-reviews-course-info p span {
    color: #4F5158;
    font-size: 15px;
}

.tpd-reviews-comment {
    color: #4F5158;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
}

.tpd-course-wrap a {
    display: block;
    font-weight: 400;
    font-size: 15px;
    color: #6b7194;
    margin-bottom: 25px;
}

.tpd-course-wrap a span {
    margin-right: 6px;
    display: inline-block;
    transform: translateY(-2px);
}

.tpd-course-wrap a:hover {
    color: var(--tp-dashboard-primary);
}

.tpd-course-name {
    color: #4F5158;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

.tpd-course-title {
    color: #8A8B90;
    font-size: 15px;
}

.tpd-reviews-course {
    width: 430px;
    flex: 0 0 auto;
}

.tpd-reviews-feedback-2 {
    margin-left: 15px;
    width: 235px;
    flex: 0 0 auto;
}

.tpd-reviews-edit {
    width: calc(100% - 725px);
    margin-left: 15px;
    flex: 0 0 auto;
}

/*----------------------------------------*/

/*  7.5 Dashboard Quiz
/*----------------------------------------*/

.tpd-quiz-info {
    width: 270px;
    flex: 0 0 auto;
}

.tpd-quiz-info-sub {
    width: 340px;
    flex: 0 0 auto;
}

.tpd-quiz-ques {
    margin-left: 15px;
    width: 68px;
    flex: 0 0 auto;
}

.tpd-quiz-tm {
    margin-left: 15px;
    width: 63px;
    flex: 0 0 auto;
}

.tpd-quiz-no {
    width: 65px;
    flex: 0 0 auto;
}

.tpd-quiz-no-2 {
    width: 84px;
    flex: 0 0 auto;
}

.tpd-quiz-result {
    margin-left: 15px;
    width: 95px;
    flex: 0 0 auto;
}

.tpd-quiz-result-2 {
    width: 95px;
    flex: 0 0 auto;
}

.tpd-quiz-result-sub {
    margin-left: 15px;
    width: 90px;
    flex: 0 0 auto;
}

.tpd-quiz-details {
    margin-left: 15px;
    flex: 0 0 auto;
}

.tpd-quiz-title {
    color: #1E1E2F;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 8px;
    line-height: 1;
}

.tpd-quiz-title-2 {
    font-size: 16px;
    font-weight: 400;
    color: #57595F;
    margin-bottom: 0;
}

.tpd-quiz-title-2-color {
    font-size: 16px;
    font-weight: 400;
    color: #6B7194;
}

.tpd-quiz-attempts {
    margin-bottom: 30px;
}

.tpd-quiz-attempts .tp-dashboard-title {
    margin-bottom: 12px;
}

.tpd-quiz-time ul li {
    list-style: none;
    display: inline-block;
}

.tpd-quiz-time ul li:not(:first-of-type) {
    margin-left: 18px;
}

.tpd-quiz-time ul li p {
    color: #333;
    font-size: 15px;
    margin-bottom: 0;
}

.tpd-quiz-time ul li p span {
    color: #7C7F8C;
    font-size: 15px;
}

.tpd-quiz-date {
    width: 180px;
    flex: 0 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tpd-quiz-date {
        width: 190px;
    }
}

.tpd-quiz-date-2 {
    width: 148px;
    flex: 0 0 auto;
}

.tpd-quiz-date-3 {
    width: 165px;
    flex: 0 0 auto;
}

.tpd-quiz-ques-2 {
    width: 100px;
    flex: 0 0 auto;
    margin-left: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tpd-quiz-ques-2 {
        width: 70px;
    }
}

.tpd-quiz-ques-3 {
    width: 100px;
    flex: 0 0 auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tpd-quiz-ques-3 {
        width: 70px;
    }
}

.tpd-quiz-tm-2 {
    width: 90px;
    flex: 0 0 auto;
}

.tpd-quiz-tm-3 {
    width: 145px;
    flex: 0 0 auto;
}

.tpd-quiz-tm-4 {
    width: 160px;
    flex: 0 0 auto;
}

.tpd-quiz-pm {
    width: 90px;
    flex: 0 0 auto;
    margin-left: 15px;
}

.tpd-quiz-pm-2 {
    width: 160px;
    flex: 0 0 auto;
}

.tpd-quiz-ca {
    width: 90px;
    flex: 0 0 auto;
    margin-left: 15px;
}

.tpd-quiz-ca-sub {
    width: 65px;
    flex: 0 0 auto;
    margin-left: 15px;
}

.tpd-quiz-em {
    width: 90px;
    margin-left: 15px;
    flex: 0 0 auto;
}

.tpd-quiz-em-box .tpd-action-approv {
    margin-right: 8px;
}

.tpd-quiz-type {
    width: 80px;
    flex: 0 0 auto;
}

.tpd-quiz-type-2 {
    width: 110px;
    flex: 0 0 auto;
}

.tpd-student-info p {
    color: #757C8E;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    line-height: 1;
}

.tpd-student-info p span {
    color: #4F5158;
    font-size: 15px;
    font-weight: 400;
}

.tpd-select.w-120 .nice-select {
    height: 40px;
    padding-right: 65px;
    border-radius: 30px;
    color: #757C8E;
    font-size: 15px;
    font-weight: 400;
    border: none;
}

.tpd-select.w-120 .nice-select:focus {
    border: none;
}

.tpd-select.w-120 .nice-select::after {
    right: 18px;
    color: #57595F;
}

.tpd-select.w-120 .nice-select .list {
    width: 100%;
}

.tpd-select.w-120.w-300 .nice-select {
    width: 300px;
}

.tpd-select2-wrap .select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    width: 300px;
}

.tpd-select2-wrap .select2-container--open .select2-dropdown--below {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    width: 370px !important;
    display: inline-block;
}

.tpd-select2-wrap .select2-results {
    display: block;
    width: 370px;
}

.tpd-assign-info {
    width: 340px;
    flex: 0 0 auto;
}

.tpd-assign-info.analytic {
    width: 320px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tpd-assign-info.analytic {
        width: 285px;
    }
}

.tpd-assign-info.analytic p {
    display: inline-block;
}

.tpd-assign-info.analytic p:not(:last-of-type) {
    margin-right: 10px;
}

.tpd-assign-info.analytic .tpd-assign-title {
    color: #57595F;
    font-size: 18px;
}

.tpd-assign-mark {
    margin-left: 15px;
    width: 165px;
    flex: 0 0 auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tpd-assign-mark {
        width: 135px;
    }
}

.tpd-assign-mark.analytic {
    width: 130px;
}

.tpd-assign-mark.analytic .tpd-common-text {
    color: #57595F;
}

.tpd-assign-submit {
    margin-left: 15px;
    width: 155px;
    flex: 0 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tpd-assign-submit {
        width: 130px;
    }
}

.tpd-assign-details {
    margin-left: 15px;
}

.tpd-assign-details.analytic button {
    display: inline-block;
    margin-left: 15px;
}

.tpd-assign-details.analytic button:hover {
    color: #3C66F9;
}

.tpd-assign-title {
    color: #1E1E2F;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 4px;
    line-height: 1;
}

/*----------------------------------------*/

/*  7.6 Dashboard Order
/*----------------------------------------*/

.tpd-order-filter a {
    color: #4A4E68;
    font-size: 15px;
    font-weight: 400;
    display: inline-flex;
    background-color: var(--tp-common-white);
    margin-right: 8px;
    border-radius: 50px;
    padding: 7px 21.5px;
}

@media only screen and (max-width: 767px) {
    .tpd-order-filter a {
        margin-bottom: 20px;
    }
}

.tpd-order-filter a.active span {
    box-shadow: 0px 0px 1px 0px #1438B5;
    border: 6px solid #556DF5;
    border-color: #556DF5;
}

.tpd-order-filter a span {
    display: inline-block;
    height: 20px;
    width: 20px;
    text-align: center;
    border: 1px solid #B8BABC;
    border-radius: 50%;
    margin-right: 8px;
    transform: translateY(3px);
}

.tpd-order-id {
    width: 85px;
    flex: 0 0 auto;
}

.tpd-order-name {
    margin-left: 15px;
    width: 240px;
    flex: 0 0 auto;
}

.tpd-order-date {
    margin-left: 15px;
    width: 160px;
    flex: 0 0 auto;
}

.tpd-order-price {
    margin-left: 15px;
    width: 85px;
    flex: 0 0 auto;
}

.tpd-order-status {
    margin-left: 15px;
    width: 103px;
    flex: 0 0 auto;
}

.tpd-order-action {
    margin-left: 15px;
}

.tpd-order-date-input {
    display: flex;
    justify-content: end;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-order-date-input {
        justify-content: start;
        margin-bottom: 20px;
    }
}

.tpd-order-date-input form {
    width: 270px;
    position: relative;
}

.tpd-order-date-input form input {
    width: 270px;
    height: 40px;
    background-color: var(--tp-common-white);
    border-radius: 50px;
    border: 1px solid transparent;
}

.tpd-order-date-input form input:focus {
    border-color: #556DF5;
    box-shadow: 0 1px 2px 0 rgba(85, 109, 245, 0.08), 0 2px 6px 0 rgba(85, 109, 245, 0.04), 0 3px 6px 0 rgba(85, 109, 245, 0.08), 0 0 0 4px rgba(85, 109, 245, 0.1);
}

.tpd-order-date-input form input::placeholder {
    color: #757C8E;
    font-size: 15px;
    line-height: 1.2;
}

.tpd-order-date-input form span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

.tpd-order-short-list .tp-course-filter-select .nice-select {
    width: 120px;
    height: 40px;
    line-height: 40px;
    border: inherit;
    box-shadow: none;
    background: var(--tp-common-white);
}

/*----------------------------------------*/

/*  7.7 Dashboard Q & A
/*----------------------------------------*/

.tpd-instructor-qa-student {
    width: 246px;
    flex: 0 0 auto;
}

.tpd-instructor-qa-question {
    margin-left: 15px;
    width: 216px;
    flex: 0 0 auto;
}

.tpd-instructor-qa-reply {
    margin-left: 15px;
    width: 68px;
    flex: 0 0 auto;
    text-align: center;
}

.tpd-instructor-qa-status {
    margin-left: 15px;
    width: 68px;
    flex: 0 0 auto;
    text-align: center;
}

.tpd-instructor-qa-btn {
    width: 80px;
    flex: 0 0 auto;
    margin-left: 15px;
}

.tpd-instructor-qa-action {
    margin-left: 15px;
}

.tpd-student-qa-student {
    width: 475px;
    flex: 0 0 auto;
}

.tpd-student-qa-reply {
    margin-left: 15px;
    flex: 0 0 auto;
    width: 150px;
}

.tpd-student-qa-btn {
    margin-left: 15px;
    flex: 0 0 auto;
    width: 80px;
}

.tpd-student-qa-action {
    margin-left: 15px;
    flex: 0 0 auto;
}

.tpd-announcement {
    background-color: var(--tp-common-white);
    padding: 20px 24px;
    border-radius: 10px;
}

@media only screen and (max-width: 767px) {
    .tpd-announcement {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 767px) {
    .tpd-announcement-info {
        margin-bottom: 10px;
    }
}

.tpd-announcement-icon {
    flex: 0 0 auto;
    margin-right: 16px;
}

.tpd-announcement-icon span {
    display: inline-block;
    height: 60px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
    background-color: #EFF3FE;
}

.tpd-announcement-notification span {
    color: #757C8E;
    font-size: 16px;
    font-weight: 400;
}

.tpd-announcement-notification-title {
    color: #333;
    font-size: 20px;
    font-weight: 400;
}

.tpd-announcement-table.tpd-table ul li {
    list-style: none;
    padding: 17.5px 0;
}

.tpd-announcement-date {
    flex: 0 0 auto;
    width: 206px;
}

.tpd-announcement-announcement {
    margin-left: 15px;
    width: 420px;
    flex: 0 0 auto;
}

.tpd-announcement-announcement .tpd-course-name {
    color: #757C8E;
    font-size: 15px;
}

.tpd-announcement-btn {
    margin-left: 15px;
    flex: 0 0 auto;
    width: 80px;
}

.tpd-announcement-action {
    margin-left: 15px;
    flex: 0 0 auto;
}

.tpd-announcement-time {
    color: #8A8B90;
    font-size: 14px;
    font-weight: 400;
}

.tpd-withdraw-notification p {
    color: #757C8E;
    font-size: 15px;
    font-weight: 400;
}

.tpd-withdraw-notification p span {
    display: inline-block;
    margin-right: 5px;
}

.tpd-withdraw-notification p span svg {
    transform: translateY(-2px);
}

.tpd-withdraw-notification p a {
    color: #3C66F9;
    font-size: 15px;
    font-weight: 500;
}

.tpd-withdraw-title {
    color: #4F5158;
    font-size: 20px;
    font-weight: 400;
}

.tpd-withdraw-title span {
    font-weight: 700;
    display: inline-block;
    color: #4F5158;
}

.tpd-withdraw-bg img {
    width: 100%;
    margin-bottom: 22px;
    display: inline-block;
}

.tpd-withdraw-bg p {
    color: #4F5158;
    font-size: 17px;
    font-weight: 400;
}

/*----------------------------------------*/

/*  7.8 Dashboard Accordion
/*----------------------------------------*/

.tpd-accordion {
    padding-right: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-accordion {
        padding-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-accordion {
        padding-bottom: 40px;
    }
}

.tpd-accordion .accordion-item {
    margin-bottom: 6px;
    border-radius: 10px !important;
}

.tpd-accordion .accordion-button {
    border-radius: 10px !important;
    background: var(--tp-common-white);
    color: var(--tp-grey-6);
    font-size: 20px;
    font-weight: 500;
    box-shadow: none;
    padding: 23px 24px;
}

.tpd-accordion .accordion-button:focus {
    outline: 0;
    box-shadow: none;
}

.tpd-accordion .accordion-button.collapsed {
    box-shadow: 0px 1px 1px 0px rgba(3, 11, 30, 0.14), 0px 1px 2px 1px rgba(3, 11, 30, 0.06);
}

.tpd-accordion .accordion-body {
    padding: 0 60px 20px 24px;
}

.tpd-accordion .accordion-body.course-edit {
    padding: 0 30px 20px 30px;
}

.tpd-accordion .accordion-body.course-edit .tpd-new-course-box-1 {
    padding: 0;
}

.tpd-course-enroll-list {
    border-radius: 10px;
    padding: 45px 40px 45px 40px;
    background: var(--tp-common-white);
    box-shadow: 0px 1px 1px 0px rgba(3, 11, 30, 0.14), 0px 1px 2px 1px rgba(3, 11, 30, 0.06);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tpd-course-enroll-list {
        padding: 30px;
    }
}

.tpd-course-enroll-list .tp-dashboard-title {
    margin-bottom: 19px;
}

.tpd-course-enroll-list ul li {
    list-style: none;
    color: #57595F;
    font-size: 16px;
    line-height: 21px;
    display: flex;
}

.tpd-course-enroll-list ul li:not(:last-of-type) {
    margin-bottom: 20px;
}

.tpd-course-enroll-list ul li span {
    flex: 0 0 auto;
    margin-right: 5px;
}

.tpd-course-enroll-list.course-edit ul li {
    color: #6B7194;
}

.tpd-course-enroll-list.course-edit ul li span {
    margin-right: 12px;
    display: inline-block;
    transform: translateY(-2px);
}

.tpd-modal .modal-dialog {
    max-width: 620px;
}

.tpd-modal .modal-header {
    display: block;
    border-radius: 8px;
    background: #EBEEFF;
    margin: 12px;
    padding: 42px 20px 30px 48px;
    position: relative;
}

.tpd-modal .modal-header p {
    color: #75767C;
    font-size: 16px;
    font-weight: 400;
}

.tpd-modal-icon span {
    display: block;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    background-color: var(--tp-common-white);
    border-radius: 50%;
    margin-bottom: 26px;
}

.tpd-modal-title {
    color: #333;
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 3px;
}

.tpd-modal-btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.tpd-modal-content {
    padding: 12px 48px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.tpd-modal-course span {
    color: #757C8E;
    font-size: 14px;
    font-weight: 400;
}

.tpd-modal-course-title {
    color: var(--tp-grey-6);
    font-size: 18px;
    font-weight: 500;
}

.tpd-modal-info {
    margin-left: 15px;
}

.tpd-modal-info span {
    color: #757C8E;
    font-size: 14px;
    font-weight: 400;
}

.tpd-modal-date,
.tpd-modal-time {
    color: #4F5158;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 2px;
}

.tpd-modal .modal-footer {
    justify-content: space-between;
    border: none;
    padding: 16px 50px 50px 50px;
}

.tpd-modal-announcement .modal-dialog {
    border-radius: 16px;
    max-width: 620px;
}

.tpd-modal-announcement .modal-header {
    padding: 26px 50px 14px 60px;
    border: none;
}

@media only screen and (max-width: 767px) {
    .tpd-modal-announcement .modal-header {
        padding: 25px 45px 15px 20px;
    }
}

.tpd-modal-announcement .modal-body {
    border-radius: 10px;
    background: #EFF2FA;
    margin: 0 12px;
    padding: 30px 36px 48px 36px;
}

@media only screen and (max-width: 767px) {
    .tpd-modal-announcement .modal-body {
        padding: 20px;
    }
}

.tpd-modal-announcement .modal-footer {
    justify-content: space-between;
    border: none;
    padding: 17px 45px 17px 46px;
}

/*----------------------------------------*/

/*  7.9 Dashboard Setting
/*----------------------------------------*/

.tpd-setting-box {
    padding: 50px 50px;
    border-radius: 10px;
    background: var(--tp-common-white);
    box-shadow: 0 1px 1px 0 rgba(3, 11, 30, 0.14), 0 1px 2px 1px rgba(3, 11, 30, 0.06);
}

@media only screen and (max-width: 767px) {
    .tpd-setting-box {
        padding: 50px 20px;
    }
}

.tpd-setting-box.profile {
    padding: 12px;
}

.tpd-setting-from {
    padding: 0 40px;
}

.tpd-setting-from .tpd-input {
    margin-bottom: 20px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-setting-from {
        padding: 0 20px;
    }
}

.tpd-setting-btn {
    margin-top: 30px;
}

.tpd-setting-btn button {
    display: inline-block;
    font-weight: 600;
    font-size: 16px;
    padding: 12px 45px;
    border-radius: 4px;
    background: var(--tp-dashboard-primary);
    color: var(--tp-common-white);
    box-shadow: 0 0 1px 0 #1438b5, 0 1px 2px 0 rgba(20, 56, 181, 0.25);
}

.tpd-setting-btn button:hover {
    box-shadow: none;
    background: #425EFF;
}

.tpd-setting-cartificate {
    padding: 24px 40px 48px;
}

@media only screen and (max-width: 767px) {
    .tpd-setting-cartificate {
        padding: 15px 20px 30px;
    }
}

.tpd-setting-cartificate-upload {
    margin-bottom: 55px;
}

@media only screen and (max-width: 767px) {
    .tpd-setting-cartificate-upload {
        flex-wrap: wrap;
        margin-bottom: 30px;
    }
}

.tpd-setting-cartificate-title {
    font-weight: 600;
    font-size: 16px;
    color: #303651;
    margin-bottom: 20px;
}

.tpd-setting-cartificate-content p {
    font-weight: 400;
    font-size: 14px;
    color: #686a6d;
    margin-bottom: 15px;
}

.tpd-setting-cartificate-content .upload-btn {
    font-size: 14px;
    font-weight: 500;
    color: var(--tp-dashboard-primary);
    cursor: pointer;
    border-radius: 4px;
    background: #e9ecff;
    padding: 8px 16px 9px 16px;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tpd-setting-cartificate-content .upload-btn:hover {
    color: var(--tp-common-white);
}

.tpd-setting-cartificate-content .upload-btn span {
    display: inline-block;
    transform: translateY(-2px);
    margin-right: 4px;
}

.tpd-setting-cartificate-content .upload-btn label {
    cursor: pointer;
}

.tpd-setting-cartificate-content .upload-btn input {
    display: none;
}

.tpd-setting-cartificate-thumb {
    margin-right: 25px;
}

.tpd-setting-cartificate-btn button {
    font-weight: 600;
    font-size: 16px;
    padding: 12px 60px;
    border-radius: 4px;
    display: inline-block;
    background: var(--tp-dashboard-primary);
    color: var(--tp-common-white);
    box-shadow: 0 0 1px 0 #1438b5, 0 1px 2px 0 rgba(20, 56, 181, 0.25);
}

.tpd-setting-cartificate-btn button:hover {
    box-shadow: none;
    background: #425EFF;
}

.tpd-setting-password-content .tpd-input {
    margin-bottom: 20px;
}

.tpd-setting-social-title {
    font-size: 17px;
    font-weight: 600;
    color: #303651;
    margin-bottom: 40px;
}

.tpd-setting-social-icon {
    width: 120px;
    margin-right: 115px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tpd-setting-social-icon {
        margin-right: 85px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tpd-setting-social-icon {
        margin-right: 70px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tpd-setting-social-icon {
        margin-right: 60px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tpd-setting-social-icon {
        margin-right: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .tpd-setting-social-icon {
        margin-bottom: 10px;
    }
}

.tpd-setting-social-icon img {
    margin-right: 10px;
}

.tpd-setting-social-icon h4 {
    font-size: 15px;
    font-weight: 500;
    color: #303651;
    margin: 0;
}

.tpd-setting-social-icon h4 span {
    display: inline-block;
    transform: translateY(-2px);
    margin-left: 5px;
}

.tpd-setting-social-input .tpd-input input {
    height: 50px;
    width: 510px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tpd-setting-social-input .tpd-input input {
        width: 440px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tpd-setting-social-input .tpd-input input {
        width: 350px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-setting-social-input .tpd-input input {
        width: 300px;
    }
}

.tpd-setting-social-wrap {
    margin-bottom: 25px;
}

@media only screen and (max-width: 767px) {
    .tpd-setting-social-wrap {
        flex-wrap: wrap;
    }
}

.tpd-setting-withdraw-content .tpd-setting-from {
    padding: 0;
    padding-top: 40px;
}

.tpd-setting-withdraw-content-box-title {
    font-weight: 500;
    font-size: 16px;
    color: #303651;
    margin: 0;
    text-align: start;
    display: block;
}

.tpd-setting-withdraw-content-box-sub {
    font-weight: 400;
    font-size: 14px;
    color: #8f9195;
    display: block;
}

.tpd-setting-withdraw-title {
    font-size: 17px;
    font-weight: 600;
    color: #303651;
    margin-bottom: 25px;
}

.tpd-new-course-heading-title {
    font-size: 20px;
    font-weight: 600;
    color: #303651;
}

.tpd-new-course-box {
    margin-right: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 767px) {
    .tpd-new-course-box {
        margin-right: 0;
    }
}

.tpd-new-course-box .accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 10px;
}

.tpd-new-course-box .accordion-item .accordion-button {
    padding: 22px 34px;
    border-radius: 10px;
    border-bottom: 1px solid #e6e8f0;
}

.tpd-new-course-box .accordion-item .accordion-button:not(.collapsed) {
    border-radius: 0;
    box-shadow: none;
    padding: 22px 34px;
    background-color: transparent;
}

.tpd-new-course-box .accordion-item .accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}

.tpd-new-course-box .accordion-item .accordion-button .collapsed {
    border-radius: 10px !important;
}

.tpd-new-course-box-1 {
    padding: 5px 15px;
}

@media only screen and (max-width: 767px) {
    .tpd-new-course-box-1 {
        padding: 5px 0px;
    }
}

.tpd-new-course-box-1 .tpd-input {
    margin-bottom: 20px;
}

.tpd-new-course-box-1 .tpd-input input {
    height: 46px;
}

.tpd-new-course-box-1 .tpd-input textarea {
    height: 90px;
    resize: block;
}

.tpd-new-course-box-1 .tpd-input.height-auto textarea {
    height: 120px;
}

.tpd-new-course-box-1 .tpd-input.about-height textarea {
    height: 160px;
}

.tpd-new-course-box-1 p {
    font-size: 15px;
    font-weight: 400;
    color: #8f9195;
    margin-bottom: 30px;
}

.tpd-new-course-box-1 p a {
    color: var(--tp-dashboard-primary);
}

.tpd-new-course-box-1 .tpd-setting-cartificate-upload {
    margin: 0;
}

.tpd-new-course-box-2 {
    padding: 30px;
    margin: 0 15px;
    border-radius: 6px;
    border: 1px solid #e6e8f0;
    background: var(--tp-common-white);
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

@media only screen and (max-width: 767px) {
    .tpd-new-course-box-2 {
        margin: 0;
        padding: 15px;
    }
}

.tpd-new-course-box-2 .tp-dashboard-tab-list {
    margin-bottom: 30px;
    padding: 0;
}

.tpd-new-course-box-2 .tp-dashboard-tab-list ul {
    border-bottom: 1px solid #e6e8f0;
}

.tpd-new-course-box-2 .tp-dashboard-tab-list ul li span {
    display: inline-block;
    margin-right: 5px;
    transform: translateY(-2px);
}

.tpd-new-course-box-2 .tpd-input label {
    display: block;
}

.tpd-new-course-box-2 .tpd-input input {
    width: 370px;
    height: 46px;
    margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
    .tpd-new-course-box-2 .tpd-input input {
        width: 100%;
    }
}

.tpd-new-course-box-2 p {
    font-size: 14px;
    font-weight: 400;
    color: #85878b;
    margin-bottom: 25px;
}

.tpd-new-course-box-2 p span {
    display: inline-block;
    margin-right: 5px;
    transform: translateY(-2px);
}

@media only screen and (max-width: 767px) {
    .tpd-new-course-box-duration {
        flex-wrap: wrap;
    }
}

.tpd-new-course-box-duration .tpd-input input {
    display: block;
    width: 240px;
    margin-bottom: 10px;
    padding-right: 16px;
    padding-left: 20px;
}

.tpd-new-course-box-duration .tpd-input p {
    line-height: 1;
    margin: 0;
}

.tpd-new-course-setting-title {
    font-size: 18px;
    font-weight: 500;
    color: #303651;
}

.tpd-new-course-categories {
    padding: 30px 15px;
}

@media only screen and (max-width: 767px) {
    .tpd-new-course-categories {
        padding: 30px 0;
    }
}

.tpd-new-course-categories .tpd-select .nice-select {
    width: 100%;
    height: 46px;
    line-height: 40px;
    font-size: 16px;
    color: #8f9195;
    font-weight: 400;
    float: inherit;
    border: 1px solid #e6e8f0;
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

.tpd-new-course-categories .tpd-select .nice-select::after {
    right: 20px;
    color: #65676a;
}

.tpd-new-course-categories .tpd-select .nice-select .list {
    width: 100%;
    padding: 10px 0px;
}

@media only screen and (max-width: 767px) {
    .tpd-new-course-categories .tpd-input-box {
        flex-wrap: wrap;
    }
}

.tpd-new-course-categories .tpd-input-box .tpd-input {
    margin-right: 20px;
}

.tpd-new-course-categories .tpd-input-box .tpd-input input {
    width: 240px;
}

.tpd-new-course-categories .tpd-input-box .tpd-input label {
    display: block;
}

.tpd-new-course-categories .tpd-input {
    margin-bottom: 30px;
}

.tpd-new-course-categories .tpd-input.course-file {
    margin-bottom: 10px;
}

.tpd-new-course-categories .tpd-input input {
    height: 46px;
}

.tpd-new-course-categories .tpd-order-filter a {
    padding: 4px 21.5px;
    border-radius: 100px;
    background-color: #fff;
    border: 1px solid #e6e8f0;
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06);
}

.tpd-new-course-categories #tpd-new-course-file-input {
    display: none;
}

.tpd-new-course-select2 .select2-container--default .select2-selection--single {
    display: none;
    height: 0;
}

.tpd-new-course-select2 .tpd-input {
    margin: 0;
}

.tpd-new-course-file-content {
    border-radius: 6px;
    padding: 48px 10px;
    border: 1.5px dashed #cfd5e5;
    background-size: cover;
    background-repeat: no-repeat;
}

.tpd-new-course-file-content label {
    display: inline-block !important;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    padding: 7px 20px;
    cursor: pointer;
    width: 255px;
    border-radius: 6px;
    background-color: #76b559;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    margin-bottom: 15px;
    color: var(--tp-common-white);
    box-shadow: 0 10px 20px 0 rgba(20, 55, 3, 0.2);
}

.tpd-new-course-file-content label:hover {
    background-color: var(--tp-dashboard-primary);
}

.tpd-new-course-file-content p {
    font-size: 14px;
    font-weight: 600;
    color: #656872;
    margin: 0;
}

.tpd-new-course-wrapper .tpd-new-course-categories {
    padding: 6px 15px 25px;
}

.tpd-new-course-wrapper .tpd-new-course-categories .tpd-input {
    margin: 0;
}

.tpd-new-course-modal-btn {
    padding: 16px 15px 25px;
}

.tpd-new-course-modal-btn .btn-primary {
    background-color: var(--tp-dashboard-primary);
    box-shadow: 0 0 1px 0 #1438b5, 0 1px 2px 0 rgba(20, 56, 181, 0.25);
}

.tpd-new-course-modal-btn .btn-primary span {
    display: inline-block;
    margin-right: 5px;
    transform: translateY(-2px);
}

.tpd-new-course-modal-btn .btn-primary:hover {
    box-shadow: none;
}

.tpd-new-course-instructor {
    padding: 16px 15px 25px;
}

.tpd-new-course-instructor-user {
    width: 280px;
    padding: 13px 20px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid #e6e8f0;
    background: var(--tp-common-white);
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

.tpd-new-course-instructor-user span {
    font-size: 18px;
    font-weight: 400;
    color: #697089;
}

.tpd-new-course-instructor-user img {
    width: 42px;
    margin-right: 14px;
}

.tpd-new-course-instructor .btn-primary {
    color: var(--tp-dashboard-primary);
    padding: 7px 21px;
    background: #e9ecff;
    border-color: #e9ecff;
}

.tpd-new-course-instructor .btn-primary span {
    display: inline-block;
    margin-right: 5px;
    transform: translateY(-2px);
}

.tpd-new-course-instructor .upload-btn {
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: var(--tp-dashboard-primary);
    padding: 10px 19px;
    border-radius: 6px;
    background: #e9ecff;
}

.tpd-new-course-instructor .upload-btn label {
    cursor: pointer;
}

.tpd-new-course-instructor .upload-btn span {
    display: inline-block;
    margin-right: 5px;
    transform: translateY(-2px);
}

.tpd-new-course-instructor .upload-btn input {
    display: none;
}

@media only screen and (max-width: 767px) {
    .tpd-new-course-cartificate {
        margin-bottom: 30px;
    }
}

.tpd-new-course-cartificate img {
    width: 100%;
}

.tpd-input .switcher label * {
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: #5F6168;
    position: relative;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tpd-input .switcher label * {
        font-size: 13px;
    }
}

.tpd-input .switcher label * svg {
    position: absolute;
    top: 0;
    left: 0;
}

.tpd-input .switcher label input {
    display: none;
}

.tpd-input .switcher label input+span {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    background: #c2cae7;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    flex: 0 0 auto;
}

.tpd-input .switcher label input+span small {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    left: 4px;
    top: 3px;
    background: linear-gradient(180deg, #fff 0%, #d6dcef 100%);
    box-shadow: -1px 2px 3px 0 rgba(18, 20, 32, 0.3);
}

.tpd-input .switcher label input:checked+span {
    background: var(--tp-dashboard-primary);
}

.tpd-input .switcher label input:checked+span small {
    left: 56%;
}

.tpd-redio-style-span {
    top: 50%;
    width: 20px;
    right: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    display: inline-block;
    border: 1px solid #b8babc;
    transform: translateY(-50%);
    box-shadow: 0 0 1px 0 #1438b5;
}

.tpd-redio-style-span::after {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    content: "";
    top: 0;
    left: 0;
    background-color: var(--tp-dashboard-primary);
    display: inline-block;
    opacity: 0;
    transition: all 0.1s;
}

.tpd-redio-style-span::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s;
    margin: auto;
    padding: 0;
    outline: 0;
    overflow: hidden;
    box-sizing: border-box;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scale(0);
}

.tpd-redio-style .nav.nav-tabs {
    border: none;
}

.tpd-redio-style .nav.nav-tabs .nav-item {
    position: relative;
}

.tpd-redio-style .nav.nav-tabs .nav-item:not(:last-of-type) {
    margin-right: 20px;
}

.tpd-redio-style .nav.nav-tabs .nav-item .nav-link {
    border-radius: 6px;
    padding: 13px 84px 13px 21px;
    border: 1px solid #e6e8f0;
    background: var(--tp-common-white);
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tpd-redio-style .nav.nav-tabs .nav-item .nav-link {
        padding: 13px 65px 13px 21px;
    }
}

.tpd-redio-style .nav.nav-tabs .nav-item .nav-link.active .tpd-redio-style-span {
    border: none;
}

.tpd-redio-style .nav.nav-tabs .nav-item .nav-link.active .tpd-redio-style-span::after {
    opacity: 1;
}

.tpd-redio-style .nav.nav-tabs .nav-item .nav-link.active .tpd-redio-style-span::before {
    transform: scale(1);
    transition: all 0.4s;
}

.tpd-redio-style.tmy-tab .nav.nav-tabs .nav-item .nav-link {
    color: #4A4E68;
    font-size: 15px;
    font-weight: 400;
    box-shadow: none;
    border-radius: 50px;
    padding: 6px 30px 6px 40px;
    border-color: transparent;
}

.tpd-redio-style.tmy-tab .nav.nav-tabs .nav-item:not(:last-of-type) {
    margin-right: 8px;
}

.tpd-redio-style.tmy-tab .tpd-redio-style-span {
    left: 11px;
}

@media only screen and (max-width: 767px) {
    .tpd-redio-style.tmy-tab .tpd-redio-style-span {
        top: 11px;
        transform: translateY(0);
    }
}

/*----------------------------------------*/

/*  8.0 Dashboard Learning
/*----------------------------------------*/

.tpd-continue-learning-wrapper {
    position: relative;
    display: flex;
    width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-continue-learning-wrapper {
        flex-wrap: wrap-reverse;
    }
}

.tpd-continue-learning-sidebar {
    width: 400px;
    flex: 0 0 400px;
    background-color: var(--tp-common-white);
    box-shadow: 0 1px 1px 0 rgba(3, 11, 30, 0.14), 0 1px 2px 1px rgba(3, 11, 30, 0.06);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-continue-learning-sidebar {
        width: 100%;
        flex: 0 0 100%;
    }
}

.tpd-continue-learning-main {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-continue-learning-main {
        min-height: inherit;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tpd-continue-learning-main {
        width: 65%;
    }
}

.tpd-continue-learning-accordion {
    padding: 20px 24px;
}

.tpd-continue-learning-accordion .accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 10px;
    border: 1px solid #e6e8f0;
}

.tpd-continue-learning-accordion .accordion-item .accordion-button {
    padding: 15px 20px;
    border-radius: 10px;
    color: #697089;
    border-bottom: 1px solid #e6e8f0;
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
}

.tpd-continue-learning-accordion .accordion-item .accordion-button:not(.collapsed) {
    border-radius: 0;
    box-shadow: none;
    padding: 15px 20px;
    color: var(--tp-dashboard-primary);
    background-color: transparent;
}

.tpd-continue-learning-accordion .accordion-item .accordion-button:not(.collapsed)::before {
    color: var(--tp-dashboard-primary);
    transform: rotate(-90deg);
}

.tpd-continue-learning-accordion .accordion-item .accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}

.tpd-continue-learning-accordion .accordion-item .accordion-button .collapsed {
    border-radius: 10px !important;
}

.tpd-continue-learning-accordion .accordion-item .accordion-button::after {
    content: none;
}

.tpd-continue-learning-accordion .accordion-item .accordion-button::before {
    position: absolute;
    right: 20px;
    top: 15px;
    color: #57595f;
    content: "\f105";
    transform: rotate(0deg);
    font-family: fontawesome;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tpd-continue-learning-accordion .accordion-item .accordion-button span {
    margin-right: 25px;
    margin-left: auto;
    color: #8f9195;
}

.tpd-continue-learning-body {
    padding: 10px 0;
}

.tpd-continue-learning-body-item a {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    padding: 14px 18px;
}

.tpd-continue-learning-body-item a.active {
    background: #eff2fa;
}

.tpd-continue-learning-body-item a.active p {
    color: var(--tp-dashboard-primary);
}

.tpd-continue-learning-body-item a:hover {
    background: #eff2fa;
}

.tpd-continue-learning-body-item a:hover p {
    color: var(--tp-dashboard-primary);
}

.tpd-continue-learning-body-item a p {
    margin: 0;
    line-height: 1;
    font-weight: 400;
    font-size: 15px;
    color: #57595f;
}

.tpd-continue-learning-body-item a p span {
    display: inline-block;
    margin-right: 8px;
    transform: translateY(-2px);
}

.tpd-continue-learning-body-item a i {
    font-size: 18px;
    color: var(--tp-dashboard-primary);
    border-radius: 50%;
    box-shadow: 0 1px 1px 0 rgba(20, 56, 181, 0.25);
}

.tpd-continue-learning-body-item a .time p {
    font-weight: 400;
    font-size: 14px;
    margin-right: 5px;
    color: #697089;
    display: inline-block;
}

.tpd-continue-learning-popup {
    padding: 14px 25px;
    background: var(--tp-dashboard-primary);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-continue-learning-popup {
        display: none !important;
    }
}

.tpd-continue-learning-popup-main span {
    display: inline-block;
    height: 32px;
    width: 32px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background-color: #3a52d7;
    color: var(--tp-common-white);
}

.tpd-continue-learning-popup-main span.crose {
    color: var(--tp-dashboard-primary);
    background-color: rgba(255, 255, 255, 0.9);
}

.tpd-continue-learning-popup-main span svg {
    transform: translate(-2px, -1px);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.tpd-continue-learning-popup-main span .svg-2 {
    transform: translate(0px, 0px);
}

.tpd-continue-learning-popup-main span.active .svg-1 {
    transform: scaleX(-1);
}

.tpd-continue-learning-popup-main p {
    font-size: 18px;
    font-weight: 500;
    color: var(--tp-common-white);
    margin: 0 15px;
}

.tpd-continue-learning-about-bg {
    background-color: var(--tp-common-white);
}

.tpd-continue-learning-about-thumb img {
    width: 100%;
}

.tpd-continue-learning-about-wrapper {
    padding-left: 265px;
    margin-bottom: 40px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 992px) and (max-width: 1199px) {
    .tpd-continue-learning-about-wrapper {
        padding-left: 150px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .tpd-continue-learning-about-wrapper {
        padding-left: 100px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-continue-learning-about-wrapper {
        padding-left: 20px;
    }
}

.tpd-continue-learning-about-wrapper h4 {
    font-size: 20px;
    font-weight: 500;
    color: #333;
}

.tpd-continue-learning-about-wrapper p {
    font-weight: 400;
    font-size: 15px;
    color: #6b7194;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
only screen and (max-width: 767px) {
    .tpd-continue-learning-about-wrapper p br {
        display: none;
    }
}

.tpd-continue-learning-about-btn {
    padding: 18px 0;
    background: #eff2fa;
}

.tpd-continue-learning-about-btn .next {
    display: inline-block;
    margin-left: 8px;
}

.tpd-continue-learning-about-btn a {
    display: inline-block;
    border-radius: 6px;
    padding: 3px 13px;
    font-size: 15px;
    font-weight: 400;
    color: #000;
    border: 1px solid rgba(60, 102, 249, 0.2);
}

.tpd-continue-learning-about-btn a span {
    display: inline-block;
    margin: 0 5px;
    transform: translateY(-1px);
}

.tpd-continue-learning-about-btn a:hover {
    color: var(--tp-common-white);
    background: var(--tp-dashboard-primary);
    box-shadow: 0 0 1px 0 #1438b5, 0 1px 1px 0 rgba(20, 56, 181, 0.25);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
    .tpd-continue-learning-quiz {
        padding-top: 100px;
    }
}

.tpd-continue-learning-content span {
    font-weight: 400;
    font-size: 15px;
    color: #6b7194;
    display: inline-block;
}

.tpd-continue-learning-content h4 {
    font-weight: 600;
    font-size: 20px;
    color: #333;
    margin-bottom: 45px;
}

.tpd-continue-learning-q {
    padding: 16px 0;
    margin-bottom: 30px;
    border-top: 1px solid #dcdee6;
    border-bottom: 1px solid #dcdee6;
}

@media only screen and (max-width: 767px) {
    .tpd-continue-learning-q {
        flex-wrap: wrap;
    }
}

.tpd-continue-learning-q-item:not(:last-of-type) {
    margin-right: 150px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 992px) and (max-width: 1199px) {
    .tpd-continue-learning-q-item:not(:last-of-type) {
        margin-right: 80px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tpd-continue-learning-q-item:not(:last-of-type) {
        margin-right: 50px;
    }
}

.tpd-continue-learning-q-item p {
    font-weight: 400;
    font-size: 16px;
    color: #6b7194;
    margin: 0;
}

.tpd-continue-learning-q-item p span {
    color: #4a4e68;
}

@media only screen and (max-width: 767px) {
    .tpd-continue-learning-q-item p {
        margin-bottom: 20px;
    }
}

/*# sourceMappingURL=main.css.map */


/* Blue border for Courses button */
.tp-header-2-category p {
    border: 2px solid #0F4D9A;
    padding: 4px 10px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: black;
    font-weight: 600;
}

/* Align SVG icon properly */
.tp-header-2-category svg {
    width: 14px;
    height: 14px;
}

/* Buttons at the end of the header */
.tp-header-2-extra {
    margin-left: auto;
}

.btn-outline-primary {
    border: none;
    color: #0F4D9A;
    /* background: #000; */
    padding: 6px 12px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
}



.btn-primary {
    background: #FF9933;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    border: none;
    font-family: poppins7;
}

.btn-primary:hover {
    background-color: #0F4D9A;
}


.video-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    /* Adjust as needed */
    overflow: hidden;
    /* border-radius: 10px; */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;

    /* Make the video cover the entire iframe */
    transform: scale(2);
    /* Adjust scale to remove black bars */
    transform-origin: center;
}

/* Category Section */
.tp-category-item {
    display: flex;
    align-items: center;
    /* Centers vertically */
    justify-content: center;
    /* gap: 20px; */
    padding: 15px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    border: 1px solid #7296C3;
}

.tp-category-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.tp-category-icon {
    flex-shrink: 0;
    /* Prevents icon from shrinking */
}

.tp-category-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}

/* Removed Background Colors */
.tp-category-title,
.tp-category-text {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    /* Prevents text from breaking */
    padding: 10px 15px;
    border-radius: 5px;
}

/* Font Sizes Updated */
.tp-category-title h4 {
    font-size: 28px;
    /* Title size increased */
    font-weight: bold;
    text-align: center;
    margin: 0;
}

.tp-category-text h4 {
    font-size: 20px;
    /* Text size increased */
    text-align: center;
    margin: 0;
}

/* Banner Section */
.tp-category-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    background-size: cover;
    border-radius: 10px;
}

.tp-category-banner-text {
    font-weight: bold;
}

.tp-category-banner-title {
    font-size: 28px;
    /* Banner title size updated */
    /* font-weight: bold; */
    margin: 0;
}

.tp-category-banner-btn .tp-btn-2 {
    background: #ff5a5f;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
}

.tp-category-banner-btn .tp-btn-2:hover {
    background: #e0484d;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tp-category-content {
        flex-direction: column;
        text-align: center;
    }

    .tp-category-item {
        flex-direction: column;
        align-items: center;
    }

    .tp-category-title h4 {
        font-size: 24px;
        /* Smaller size on mobile */
    }

    .tp-category-text h4 {
        font-size: 18px;
        /* Adjusted for mobile */
    }

    .tp-category-banner {
        flex-direction: column;
        text-align: center;
    }
}

.custom-btn {
    display: inline-block;
    padding: 5px 20px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    background: #FF9933;
    border-radius: 25px;
    border: 2px solid transparent;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.custom-btn:hover {
    background: #fff;
    color: #ff5722;
    border: 2px solid #ff5722;
}

/* Base button style */
.btn-cstm {
    background-color: #FF9933;
    text-align: center;
    line-height: 1;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 30px;
    color: #fff;
    box-shadow: 0px 4px 10px 0px #00000040;
    font-family: poppins6;
    letter-spacing: 1px;
    border: none;
    transition: background-color 0.3s ease;
  }
  
  /* Hover state (only changes when not disabled) */
  .btn-cstm:hover:not(:disabled),
  .btn-cstm:focus:not(:disabled),
  .btn-cstm:active:not(:disabled) {
    background-color: #e17100;
    color: #fff;
  }
  
  /* Disabled/Processing state – same as normal */
  .btn-cstm:disabled,
  .btn-cstm[disabled] {
    background-color: #FF9933 !important;
    color: #fff !important;
    opacity: 1 !important;
    box-shadow: 0px 4px 10px 0px #00000040 !important;
    cursor: not-allowed !important;
    border: none !important;
  }
  

/* .carousel-universities{
 border: 2px solid #7296C3;
border-radius: 20px;

} */

.tp-header-2-category p:hover {
    background: none;
}

.faq-2 {
    background-color: #f8f9fa;
    border-radius: 10px;
    /* padding: 40px; */
}

#faq h2{
    font-family: poppins8;
}

.accordion-item {
    border: none;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}

.accordion-button {
    font-weight: bold;
    border-radius: 8px !important;
    padding: 15px;
}

.accordion-button:not(.collapsed) {
    font-weight: bold;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-body {
    border-radius: 0 0 8px 8px;
    padding: 15px;
    font-family: poppins7;
}


.yearssection h3 {
    color: #0F4E9B !important;
}

.video-wrapper {
    /* height: 360px; */
    overflow: hidden;
    position: relative;
}

.hero-video {
    width: 100%;
    height: 100%;
    /* object-fit: cover;
    object-position: center; */
}

@media (max-width: 767px) {}

::placeholder {
    color: black !important;
    opacity: 1;
    /* make sure it fully shows */
}


.villen-cards h5,
.villen-cards p {
    color: #fff !important;
}

.villain-box {
    background-color: #0e4d9a;
    color: white;
}

.underline {
    width: 80px;
    height: 2px;
    background-color: #FF9933;
}

.accordion-body ul {
    padding-left: 0;
    margin-left: 0;
    list-style-position: inside;
}

.villain-box h4 {
    color: #fff !important;
    margin: 0;
    font-size: 20px;
    font-family: poppins6;
}

.villain-box p {
    font-family: poppins7;
    font-size: 14px;
}

.custom-input {
    font-size: 0.85rem;
    border-radius: 0;
    background-color: #D8D8D8;
    border: 1px solid #ccc;
    color: #000;
}

.custom-input:focus {
    background-color: #D8D8D8;
    box-shadow: none;
    border-color: #999;
    outline: none;
}

.custom-input::placeholder {
    color: #555;
}


.upper-heading h2 {
    color: #0e4d9a;
    font-family: poppins7;
    text-shadow: 2px 2px 4px #00000040;


}

footer ul {
    font-family: poppins7;
}


/* internal pages styling */

.upper-heading-info {
    color: #fff !important;
}

.internal-hero {
    height: 280px;
    background: linear-gradient(to bottom, #7095C3, #F8C8D8, #FFAD5B);
    position: relative;
    overflow: visible;
}


.internal-hero-img img {
    display: flex;
    align-items: flex-end;
    /* Align icon to bottom */
}

.border-column {
    border-right: 1px solid #ccc;
}

.yearssection h5 {
    color: #0e4d9a;
    font-size: 16px;
}


@media (max-width: 767.98px) {

    /* Remove border on small screens (optional) */
    .border-column {
        border-right: none;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
}


.btn-outline-primary.active {
    background-color: #0e4d9a;
    /* Bootstrap primary color */
    border-color: #0d6efd;
}


.blue-cards {
    padding: 0 80px;
}

.shadow-wrapper {
    overflow: hidden;
    
    position: relative;
    z-index: 2;
    /* padding: 0 80px; */
 
}

.lets-blue-cards {
    padding: 20px 80px;
}

.tp-footer-main {
    padding: 60px 0;
}

.internal-hero-img {
    gap: 80px;
}

.center-img-responsive {
    width: 40%;
}

/* .yearssection {
    padding-top: 165px;
} */

.shadow-wrapper-2 {
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background-color: #fff;
    margin-top: -50px;
    position: relative;
    z-index: 2;
    padding: 0 3rem;
}

.villen-cards {
    padding: 0 80px;
}

.about-info-sec {
    padding-bottom: 40px;



}



.skill-pill {
    background-color: #f0f2f5;
    color: #1a4b94;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    display: inline-block;
    margin: 4px 4px 4px 0;
    white-space: nowrap;
    text-align: center;
    cursor: default;
}

.see-more {
    color: #1a4b94;
    font-size: 14px;
    margin-left: 4px;
    align-self: center;
    text-decoration: none;
}

.see-more:hover {
    text-decoration: underline;
}

.underline {
    height: 4px;
    width: 100px;
}

.custom-usp h4 {
    font-family: poppins7;
    color: #0F4E9B !important;
    font-weight: 800;
    font-size: 20px;
}

.yearssection h1 {
    font-family: poppins7;
    color: #0F4E9B !important;
    font-size: 3rem;
}


/* final Responsive Code */

@media only screen and (max-width:768px) {
    h2 {
        font-size: 26px;
    }

    h5 {
        font-size: 19px;
    }

    .tp-section-3-title {
        font-size: 20px;
    }

    h3 {
        font-size: 22px;
    }

    h4 {
        font-size: 16px;
    }

    p {
        font-size: 12px;
        margin: 0.2rem 0;
        line-height: 17px;
    }

    .tp-category-item {
        padding: 10px 15px;
    }

    .blue-cards {
        padding: 0;
    }

    .shadow-wrapper {
        margin: 0;
    }

    .btn-cstm {
        font-size: 15px;
        padding: 10px 30px;
    }

    .tp-course-title {
        font-size: 15px;
    }

    .lets-blue-cards {
        padding: 0 40px;
    }

    .image-form-row {
        padding: 20px;
    }

    .internal-hero-img {
        gap: 10px;
    }

    .center-img-responsive {
        width: 100%;
    }

    .yearssection h1 {
        font-size: 2rem;
    }

    .shadow-wrapper-2 {
        padding: 0;
    }

    .villen-cards {
        padding: 0;
    }

    .about-info-sec {
        padding-bottom: 0;
    }
}


.tp-header-inner-logo img {
    height: 30px;
}


.btn-outline-primary:hover {
    color: #0F4D9A;
    color: white !important;
    background-color: none;
}

.accordion-button.active-pill {
    background-color: #B4D5FF !important;
}

.accordion-button .toggle-icon {
    transition: transform 0.3s ease;
    font-size: 1rem;
}

.oracle-certifications .accordion-button{
    padding:  30px 20px;
}


.deployexpert h2 {
    font-family: poppins7;
}

.deployexpert button{
    color: #c24430;
    border-radius: 30px;
}

.deployexpert ul{
    line-height: 2;
}

.shadow-wrapper-2 h4{
    font-family: poppins7;
    font-size: 17px;
}

#certAccordion .accordion-header{
    font-family: poppins7;
}


@media only screen and (max-width:768px) {
    .btn-primary, .btn-outline-primary{
        text-wrap: nowrap;
        font-size: 12px;
        padding: 6px 10px;
    }
    .btn-primary-2{
        font-size: 12px;
    }

    .tp-header-inner-logo img {
        height: 24px;
    }
}


.form-control,
  .form-select {
    border-radius: 0;
    border: 1px solid #ddd;
    height: 45px; /* same height for all */
    font-size: 16px;
    padding-left: 12px;
  }

  .input-group .btn {
    border-radius: 0;
    height: 50px;
  }

  .form-check {
    margin-bottom: 8px;
  }

  .form-check-label {
    font-size: 12px;
    color: #333;
  }

  .btn-submit {
    background-color: #f7941d;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    border: none;
  }

/* Normal state */
.sticky-pills {
    position: sticky;
    top: 70px; /* adjust to your header height */
    z-index: 98;
    background: white;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* When scrolled & fixed style applied */
.sticky-pills.active {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 4px rgba(7, 37, 68, 0.1);
}

/* Inactive pill */
.pill-link {
    background: transparent !important;
    color: #57595f !important;
    border-color: #0e4d9a !important; /* optional, to keep border same as active */
    transition: 0.3s ease;
  }
  
  /* Active pill */
  .pill-link.active {
    background-color: #0e4d9a !important;
    color: #fff !important;
  }
  .pill-link.active p {
    color: #fff !important;
  }
  

/* Reset border radius for inputs, selects, and checkboxes */
.schedule-call-form .form-control,
.schedule-call-form .nice-select,
.schedule-call-form .form-check-input {
    border-radius: 0 !important;
}

/* Fix nice-select dropdown styling */
.schedule-call-form .nice-select {
    width: 100% !important;
    border: 1px solid #ccc;
    height: 45px;
    line-height: 43px;
    padding-left: 12px;
    font-size: 14px;
    background-color: #fff;
    position: relative;
    margin-bottom: 10px;
}

/* Fix dropdown arrow */
.schedule-call-form .nice-select::after {
    content: "\f107"; /* FA chevron-down */
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #666;
    pointer-events: none;
}

/* Rotate arrow when open */
.schedule-call-form .nice-select.open::after {
    transform: translateY(-50%) rotate(-180deg);
}

/* Fix list dropdown */
.schedule-call-form .nice-select .list {
    width: 100% !important;
    z-index: 9999;
}

/* Fix checkbox alignment */
.schedule-call-form .form-check {
    position: relative;
    z-index: 1; /* keeps it above dropdown */
}
 

/* Bigger and sharper checkboxes */
.custom-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 0; /* square like other fields */
    margin-top: 0; /* keeps aligned vertically */
  }
  
  /* Make label text muted and aligned properly */
  .form-check-label {
    line-height: 1.3;
  }
  .form-check {
    display: flex;
    align-items: center;  /* vertically align box + text */
  }
  
  .form-check-input {
    margin-top: 0;   /* remove unwanted top shift */
    margin-right: 10px; /* spacing between box & text */
  }
  
  .form-check-label {
    margin-bottom: 0; 
    text-align: left;
  }
  
  
form{
    font-family: poppins7;
}  

#enroll h3 {
    font-family: poppins8;
}

#enroll img {
    padding: 0 65px;
    border-right: 1px solid #0F4E9B;
}

.form-control:focus,
.nice-select:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #ced4da !important; /* keeps the normal border */
}

.tp-course-content p{
    font-size: 11px;
}

.tp-footer-widget-logo img{
    height: 35px;
}

.form-select {
    --bs-form-select-bg-img: none;
}
.hero-form {
    border: 1px solid #7296C3; /* normal border for all sides */
    border-radius: 10px;
    position: relative; /* needed for pseudo-element */
    overflow: hidden; /* ensures gradient stays inside rounded corners */
  }
  
  /* Bottom gradient border */
  .hero-form::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10px; /* thickness of bottom border */
    width: 100%;
    background: linear-gradient(to right, #0F4E9B, #F7A5BF, #FF9933);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
.main-card h2,.main-card h5{
    color: #0F4E9B;

}

.main-card h3{
    font-family: poppins8;

}


#courses ul {
    padding-left: 0; 
    list-style-position: inside;
  }
  

#streams  h6 {
    color: #0F4E9B;
}

#about, #colleges, #streams, #eligibility, #certificate, #faq, #enroll {
    scroll-margin-top: 140px; /* adjust to exact sticky height */
  }
  
/* For Bootstrap 3 custom validation look */
.was-validated .form-control:invalid {
    border-color: #dc3545; /* red */
  }
  
  .was-validated .form-control:valid {
    border-color: #28a745; /* green */
  }
  
  .invalid-feedback {
    display: none;
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 5px;
  }
  
  .was-validated .form-control:invalid ~ .invalid-feedback,
  .was-validated .form-check-input:invalid ~ .invalid-feedback {
    display: block;
  }

  .whatsapp-icon-container {
    position: fixed;
    bottom: 15%;
    right: 20px;
    z-index: 1000;
}

.whatsapp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: pointer;
}

.whatsapp-button:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.whatsapp-button i {
    font-size: 2.5rem;
}  

/* .offcanvas-start {
    width: 30vw !important;
    background-color: #f8f9fa;
}

.offcanvas-title {
    color: #0d6efd;
    font-weight: bold;
    font-size: 12px;
}

.offcanvas-header {
    border-bottom: 1px solid #dee2e6;
}

.offcanvas-body .btn-outline-primary {
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
    border: none;
    border-radius: 0;
    color: #495057;
    transition: all 0.3s ease;
}

.offcanvas-body .btn-outline-primary.active {
    font-weight: bold;
    color: #0d6efd;
}

.offcanvas-body .btn-outline-primary:hover {
    background-color: #e9ecef;
} */


/* Custom CSS for Mega Menu */

/* Ensure the mega menu dropdown is wide and 
  

/* --- Pills Container --- */
.scroll-pills {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .scroll-pills::-webkit-scrollbar {
    display: none;
  }
  .scroll-pills .btn {
    flex: 0 0 auto;
    font-weight: 500;
  }
  .pill-link span {
    font-size: 0.95rem;
  }
  
  /* --- Arrow Buttons --- */
  .scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    background: #0f4e9b87;
    color: #fff;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    z-index: 5;
    cursor: pointer;
    transition: transform 0.14s ease, opacity 0.14s ease;
  }
  .scroll-arrow:active {
    transform: translateY(-50%) scale(0.96);
  }
  .scroll-arrow.left {
    left: 8px;
  }
  .scroll-arrow.right {
    right: 8px;
  }
  
  /* Touch-friendly for smaller devices */
  @media (max-width: 360px) {
    .scroll-arrow {
      width: 48px;
      height: 48px;
      font-size: 22px;
    }
    .scroll-pills {
      padding: 8px 52px;
    }
    
  }

@media (max-width: 768px) { /* adjust breakpoint as needed */
    .sticky-pills {
        top: 60px;
    }
}  
  
#streams ul{
list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
}
  

.certificate-carousel .owl-dots {
    margin-top: 15px;
  }
  .certificate-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #538bd0 !important;
    transition: 0.3s;
  }
  .certificate-carousel .owl-dots .owl-dot.active span {
    background: #0e4d9a !important ;
    transform: scale(1.1);
  }
  .certificate-carousel .item img {
    width: 70% !important;
    margin: 0 auto;
    display: block;
  } 


/* Remove fixed height for header search input */
.search-form .form-control {
    height: auto !important;
    padding: 6px 10px !important;
  }

  .search-form .form-control::placeholder {
    color: #0F4E9B !important;
    opacity: 1;
  }

  
/* Mega menu placement */
.mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 9999;
    display: none;
    pointer-events: auto;
  }

  /* Smooth animation for mega menu */
.mega-menu {
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    display: block; /* IMPORTANT: keep block for animation */
  }
  
  /* When open */
  .mega-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  
  
  /* inner container */
  .mega-inner { border: 1px solid #e9eef8; }
  
  /* category links */
  .mega-links li a {
    display: block;
    padding: 10px 30px;
    color: #111827;
    cursor: pointer;
    font-size: 15px;
  }
  .mega-links li a.active {
    background-color: #0e4d9a !important;
    color: #fff !important;
    border-radius: 30px;
    padding: 10px 30px;
  }
  
  /* pills as vertical list */
  .pill-btn {
    text-align: left;
    border-radius: 30px;
    padding: 8px 12px;
    border: 1px solid #e6eefc;
    background: #fff;
    cursor: pointer;
    padding: 10px 15px;
  }
  .pill-btn.active {
    background: #eaf3ff;
    border-color: #b8d7ff;
    color: #0f4e9b;
    font-weight: 600;
    padding: 10px 30px;
    border-radius: 30px;
  }
  
  /* course / uni card */
  .uni-card {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    gap: 10px;
    cursor: pointer;
    align-items: center;
    background: #fff;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .uni-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(12,38,94,0.06);
  }
  .uni-thumb {
    min-width: 42px;
    min-height: 42px;
    border-radius: 6px;
    object-fit: cover;
    background: #f6f8fb;
    /*padding: 6px;*/
    
  }
  
  /* small text styling */
  .uni-title {     
    font-size: 15px;
    font-weight: Bold !important;
    margin: 0;
    color: #000;
    font-family: 'poppins7';
}
    
  .uni-sub { 
    font-size: 12px;
    color:#555;
    margin:0; }
  
  /* responsive tweaks */
  @media (max-width: 991px) {
    .mega-menu { position: static; top: auto; margin-top: 8px; }
    .mega-inner { padding: 16px; }
  }  

.mega-menu .col-border-right {
    border-right: 1px solid #e0e0e0; /* light grey separator */
}
  

.course-box {
    height: 110px;
    border-radius: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0px 4px 5.2px rgba(0, 0, 0, 0.25);
}


@media (max-width: 575.98px) {
    .group-blue {
        order: 1;
    }
    .group-red {
        order: 2;
    }
    .group-yellow {
        order: 3;
    }
}

/* .tp-team-2-item{
    box-shadow: 2px 2px  10px rgba(0, 0, 0, 0.25);
} */



.avoid-box{
    padding: 0 7rem;
}

.avoid-box h2{
    font-family: 'poppins6';

}

/* Course colors */
.bg-soft-blue { background-color:#E5EEFB !important; }
.bg-soft-red { background-color:#F9E1E7 !important; }
.bg-soft-yellow { background-color:#FFECD8 !important; }

/* Pills */
.btn-primary-2 {
    color:#0e4d9a;
    border-radius:50px;
    border:1px solid #0e4d9a;
    font-weight:600;
    background:transparent;
}

/* Pills animation */
.btn-primary-2,
.btn-outline-primary {
    transition: all .45s cubic-bezier(.4,0,.2,1);
}

.btn-outline-primary.active {
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
    transform: translateY(-1px);
}

/* Hover polish */
.btn-primary-2:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(14,77,154,.25);
}

/* COURSE ANIMATION CORE */
.course-item {
    opacity:0;
    transform: translateY(32px) scale(.96);
    filter: blur(8px);
    pointer-events:none;
    transition:
        opacity .6s cubic-bezier(.4,0,.2,1),
        transform .6s cubic-bezier(.4,0,.2,1),
        filter .6s cubic-bezier(.4,0,.2,1);
}

/* Hidden cards should NOT occupy space */
.course-item.hidden {
    position: absolute;
    opacity: 0;
    transform: translateY(20px) scale(.96);
    filter: blur(6px);
    pointer-events: none;
}

/* Visible cards behave normally */
.course-item.visible {
    position: relative;
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}

/* Hard hide – removes from layout immediately */
.course-item.force-hidden {
    position: absolute !important;
    opacity: 0 !important;
    transform: scale(.96);
    pointer-events: none;
}



.course-box {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition:
        transform .35s cubic-bezier(.4,0,.2,1),
        box-shadow .35s cubic-bezier(.4,0,.2,1);
}

/* lift only on hover */
.course-item.visible .course-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* shimmer layer */
.course-box::after {
    content: "";
    position: absolute;
    inset: -120%;
    background: linear-gradient(
        120deg,
        transparent 35%,
        rgba(255,255,255,.25) 45%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,.25) 55%,
        transparent 65%
    );
    opacity: 0;
    transform: translateX(-40%) translateY(-40%);
    pointer-events: none;
}

/* activate glitter only on hover */
.course-item.visible .course-box:hover::after {
    opacity: 1;
    animation: glitterSwipe 1.1s cubic-bezier(.4,0,.2,1);
}

@keyframes glitterSwipe {
    from {
        transform: translateX(-60%) translateY(-60%);
    }
    to {
        transform: translateX(60%) translateY(60%);
    }
}


/* Scroll progress bar */
#scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    width: 0%;
    background: linear-gradient(
    90deg,
    #0F4E9B 0%,
    #F7A5BF 45%,
    #FF9933 100%
    );
    z-index: 9999;
    transition: width 0.1s linear;
}

@media (max-width: 991px) {

    /* Bigger hamburger icon */
    .tp-header-2 button[data-bs-target="#mobileOffcanvas"] i {
      font-size: 26px;
    }
  
    .mobile-mega {
      margin-top: 10px;
    }
  
    .mobile-mega button {
      width: 100%;
      background: none;
      border: none;
      padding: 14px 8px;
      font-size: 15px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .stream-item {
      border-bottom: 1px solid #eee;
    }
  
    .label {
      display: inline-block;
    }
  
    /* Chevron animation */
    .arrow {
      font-size: 14px;
      transition: transform 0.3s ease;
    }
  
    .stream-item.active .arrow,
    .category-item.active .arrow {
      transform: rotate(180deg);
    }
  
    /* Accordion animation */
    .stream-children,
    .category-children {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.35s ease;
    }
  
    .stream-children.active,
    .category-children.active {
      max-height: 1000px;
    }
  
    .category-item {
      padding-left: 26px;
      font-size: 14px;
      color: #444;
    }
  
    .category-children a {
      display: block;
      padding: 10px 10px 10px 44px;
      font-size: 13px;
      color: #0F4E9B;
      text-decoration: none;
    }
  }

  
  #header-sticky {
    left: 0;
    right: 0;
    overflow-x: clip;
  }
  
  body.modal-open,
  body.offcanvas-open {
    padding-right: 0 !important;
  }
  
  @media (max-width: 991px) {
    html, body {
      overflow-x: clip;
    }
}
  
  
/* ===============================
   MOBILE USP CAROUSEL – FINAL
   =============================== */
   @media (max-width: 767px) {

    /* Hide desktop grid on mobile */
    #uspRow {
      display: none;
    }
  
    /* Wrapper must allow overflow */
    .usp-mobile-wrapper {
      overflow: visible !important;
      padding-bottom: 10px;
    }
  
    /* Owl outer wrapper fixes */
    .usp-mobile-wrapper .owl-stage-outer {
      overflow: visible !important;
      padding-top: 22px;     /* space for hover lift */
      padding-bottom: 10px;
    }
  
    /* Slide alignment */
    .usp-mobile-wrapper .usp-slide {
      display: flex;
      justify-content: center;
    }
  
    /* Card base style (matches reference image) */
    .usp-mobile-wrapper .tp-category-item {
      width: 85%;
      background: #fff;
      border-radius: 18px;
      padding: 22px 18px;
      transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
      will-change: transform;
    }
  
    /* Side cards (peek effect) */
    .usp-mobile-wrapper .owl-item:not(.center) .tp-category-item {
      opacity: 0.65;
      scale: 0.9;
    }
  
    /* Center card */
    .usp-mobile-wrapper .owl-item.center .tp-category-item {
      opacity: 1;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    }
  
    /* Hover lift (safe on mobile) */
    .usp-mobile-wrapper .tp-category-item:hover {
      transform: translateY(-8px);
    }
  
    /* Dots styling */
    .usp-mobile-wrapper .owl-dots {
      display: block !important;
      /* margin-top: 18px; */
      text-align: center;
    }
  
    .usp-mobile-wrapper .owl-dot span {
      width: 7px;
      height: 7px;
      margin: 0 4px;
      background: #d6d6d6;
      border-radius: 50%;
      display: inline-block;
    }
  
    .usp-mobile-wrapper .owl-dot.active span {
      background: #7a7a7a;
    }
}

.avoid-box h5{
    color: #0F4E9B !important; 
    font-family: poppins8;
}
  
/* ===============================
   AVOID SECTION – MOBILE ONLY
   Scoped & Safe
   =============================== */
   @media (max-width: 767px) {

    /* Hide image ONLY in avoid section */
    .avoid-section .row > .col-md-6:first-child {
      display: none;
    }
  
    /* Right side background stays */
    .avoid-section .row > .col-md-6:last-child {
      background-color: #EEF3FB !important;
    }

    .avoid-section {
        text-align: center;
    }
  
    /* Content wrapper */
    .avoid-section .avoid-box {
      padding: 28px 20px;
      text-align: center;
    }
  
    /* Heading */
    .avoid-section .avoid-box h2 {
      font-size: 20px;
      font-weight: 700;
    }
  
    /* Turn each block into card */
    .avoid-section .avoid-box > div.mb-4,
    .avoid-section .avoid-box > div:not(.avoid-cta-mobile):last-of-type {
      background-color: #244C94;
      border-radius: 14px;
      padding: 18px 16px;
      margin-bottom: 16px;
    }
  
    /* Card titles */
    .avoid-section .avoid-box h5 {
      color: #ffffff !important;
      font-size: 20px;
      margin-bottom: 6px;
      font-family: poppins7;
      padding-bottom: 5px;
    }
  
    /* Card text */
    .avoid-section .avoid-box p {
      color: rgba(255, 255, 255, 0.9) !important;
      font-weight: 500 !important;
      margin-bottom: 0;
    }
  
    /* CTA button */
    .avoid-section .avoid-btn {
      display: inline-block;
      padding: 12px 28px;
      background-color: #FFA94D;
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
      border-radius: 999px;
      text-decoration: none;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
    .orng-undrln{
        margin-left: auto;
        margin-right: auto;
    }

    .explore-courses h2{
        font-size: 20px;
    }

    
  }
    
/* Mobile-only course color ordering */
@media (max-width: 767px) {

    .explore-courses .course-item {
      order: 4; /* fallback */
    }
  
    .explore-courses .course-item:has(.bg-soft-blue) {
      order: 1;
    }
  
    .explore-courses .course-item:has(.bg-soft-red) {
      order: 2;
    }
  
    .explore-courses .course-item:has(.bg-soft-yellow) {
      order: 3;
    }
}
  

/* ===== TESTIMONIAL MOBILE SLIDER ===== */
@media (max-width: 767px) {

    .tp-team-2-active {
      overflow: visible;
    }
  
    /* hide arrows */
    .tp-team-2-arrow {
      display: none !important;
    }
  
    /* scale effect */
    .tp-team-2-active .swiper-slide {
      opacity: 0.9;
      transform: scale(0.8);
      transition: all 0.3s ease;
    }
  
    .tp-team-2-active .swiper-slide-active {
      opacity: 1;
      transform: scale(1);
    }
  
    /* pagination dots */
    .tp-team-2-pagination {
      margin-top: 24px;
      text-align: center;
    }
  
    .tp-team-2-pagination .swiper-pagination-bullet {
      width: 8px;
      height: 8px;
      background: #cfcfcf;
      opacity: 1;
      margin: 0 5px;
    }
  
    .tp-team-2-pagination .swiper-pagination-bullet-active {
      background: #0F4E9B;
    }

    #faq h2{
        font-size: 18px;
    }
    #faq {
        padding: 0;
    }

    #faq .accordion-button{
        font-size: 14px;
    }

    #faq .accordion-body{
        font-size: 12px;
    }

    .faq-2{
        background-color: #E5E5E5;
    }

    .villain-box h4{
        color: #ffffff !important;
        font-size: 18px;
        margin-bottom: 6px;
        font-family: poppins7;
        /* padding-bottom: 5px; */
    }
    .tp-footer-main{
        padding: 30px 0 10px 0;
    }
    .tp-footer-widget ul li a{
        font-size: 14px;
    }
    .tp-footer-copyright span{
        font-size: 10px;
    }
}

.call-btn-mobile {
    background-color: #E5EEFB;
    color: #1a4d9b;
    font-weight: 600;
    white-space: nowrap;   /* 🔑 prevents line break */
    text-decoration: none;
    border: 0.2px solid;
}

.call-btn-mobile i {
    font-size: 16px;
}

.call-btn-mobile:hover {
    background-color: #d7e4fa;
    color: #1a4d9b;
}


/* =========================
 PuneUni Mobile Offcanvas
========================= */

.pu-offcanvas {
    max-width: 100%;
  }
  
  .pu-offcanvas-header {
    border-bottom: 1px solid #eee;
    padding: 20px 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    z-index: 10;
  }
  
  
  .pu-offcanvas-logo {
    height: 30px;
  }
  
  .pu-offcanvas-body {
    padding: 10 30px;
  }
  
  /* Stream Button */
  .pu-stream-btn {
    width: 100%;
    background: #fff;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 10px 0px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .pu-stream-btn i {
    transition: transform 0.3s ease;
    font-size: 13px;
  }
  
  /* Panel */
  .pu-stream-panel {
    /* background: #fafafa; */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
    padding: 0 42px;
    color: #fafafa;    
  }
  
  .pu-stream-panel ul {
    /* padding: 10px 40px; */
    list-style: none;
  }
  
  
  .pu-stream-panel ul li {
    padding: 6px 0;
    font-size: 14px;
    color: #525252;
    /* border-bottom: 1px dashed #ddd; */
  }
  
  .pu-stream-panel ul li:last-child {
    border-bottom: none;
  }
  
  /* Active State */
  .pu-stream-btn.active i {
    /* transform: rotate(180deg); */
  }
  

  .pu-offcanvas .btn-close {
    background-color: #f2f4f8;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    opacity: 1;
    background-size: 12px;
  }
  
  .pu-offcanvas .btn-close:hover {
    background-color: #e6e9f0;
  }

  body.offcanvas-backdrop-open,
body.offcanvas-open {
  overflow: hidden !important;
}
.pu-stream-btn i {
    transition: transform 0.3s ease;
  }
  
  .pu-stream-btn.active i {
    /* transform: rotate(180deg); */
  }
  

  .pu-stream-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }
  
  .pu-stream-left {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
  }
  
  .pu-stream-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(15, 78, 155, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f4e9b;
    margin-right: 12px;
    font-size: 36px;
  }
  
  
  
  /* rotate arrow on open */
  .pu-stream-btn.active .pu-stream-arrow {
    transform: rotate(180deg);
  }
  

  .pu-offcanvas-heading {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
    color: #000;
}

.pu-institution-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pu-institution-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #000;
    font-size: 14px;
}

.pu-institution-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.pu-placeholder-logo {
    width: 28px;
    height: 28px;
    background: #e5e5e5;
    border-radius: 4px;
}

/* =========================
 Right Slide Navigation Panel
========================= */

/* =========================
 LEVEL 2 SLIDE – CLEAN UI
========================= */

.pu-slide-panel {
    position: absolute;
    top: 71px; /* offcanvas header */
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 9999;
    overflow-y: auto;
    padding: 10px 20px;
}

.pu-slide-panel.active {
    transform: translateX(0);
}

/* Top Back */
.pu-slide-top {
    padding: 0 0 20px 16px;
    font-family: 'poppins7';
}

.pu-slide-back {
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Heading */
.pu-slide-heading {
    padding: 0 16px;
}

.pu-slide-heading h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

/* Divider */
.pu-slide-divider {
    height: 1px;
    background: #e5e5e5;
    margin: 8px 0;
}

/* List */
.pu-slide-content {
    padding: 0px 16px;
}

.pu-slide-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #ededed;
    text-decoration: none;
    color: #000;
}

.pu-slide-item:last-child {
    border-bottom: none;
}

.pu-slide-item img {
    width: 40px;
    height: 40px;
    padding: 3px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid #f6f6f6;

}

.pu-slide-text strong2 {
    font-size: 15px;
    display: block;
    font-family: poppins7;
}

.pu-slide-text small {
    font-size: 13px;
    color: #666;
    font-family: poppins7;
}

.pu-footer {
    background: #EEEEEE;
    padding: 60px 0 0;
    font-size: 14px;
    color: #555;
  }
  
  .pu-footer-logo {
    max-width: 180px;
  }
  
  .pu-footer-desc {
    max-width: 420px;
    line-height: 1.6;
  }
  
  .pu-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1f4aa8;
    color: #fff;
    padding: 5px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    border: 1px solid #1f4aa8;
    transition: all 0.3s ease;
  }
  
  .pu-footer-btn:hover {
    background: transparent;
    color: #1f4aa8;
  }
  
  .pu-footer-btn:hover span {
    transform: translateX(4px);
  }
  
  
  .pu-footer-title {
    font-weight: 600;
    margin-bottom: 10px;
    font-family: poppins6;
  }
  
  .pu-social-icons {
    display: flex;
    gap: 12px;
    margin-top: 15px;
  }
  
  .pu-social-icons a {
    width: 40px;
    height: 40px;
    /* background: #f2f2f2; */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f4aa8;
    font-size: 18px;
    border: 1px solid #1f4aa8;
    transition: all 0.3s ease;
  }
  
  .pu-social-icons a:hover {
    background: #1f4aa8;
    color: #fff;
  }
  
  .pu-footer h6 {
    font-weight: bold;
    margin-bottom: 3px;
    font-family: poppins6;
  }
  
  .pu-footer p{
    line-height: 1.8;
    color: #7D7D7D;
  }

  .pu-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .pu-footer ul li {
    /* margin-bottom: 6px; */
    color: #7D7D7D;
  }

  .pu-footer-copyright{
    color: #7D7D7D;
    font-family: poppins5;
    font-size: 12px;
  }
  

  .pu-mandetory-section {
    background: #f5f6f8;
    font-family: poppins6;
  }



  /* mandetory pages */


.pu-mandetory-card {
background: #ffffff;
border-radius: 10px;
padding: 50px 120px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
font-family: poppins6;
}

.pu-mandetory-card .pu-title {
color: #1f4aa8;
font-size: 28px;
font-weight: 600;
}

.pu-mandetory-card h5 {
font-size: 17px;
font-weight: 600;
margin-top: 30px;
margin-bottom: 10px;
color: #111;
}

.pu-mandetory-card p {
font-size: 13px;
line-height: 1.7;
color: #000;

font-family: poppins5;

}

.pu-mandetory-card ul {
    list-style: inside;
    padding-left: 0;
  }
  
  .pu-mandetory-card ul li {
    position: relative;
    padding-left: 16px;
    font-family: poppins5;
    font-size: 13px;
    color: #000;
  }

/* Mobile spacing fix */
@media (max-width: 767px) {
.pu-mandetory-card {
    padding: 30px 25px;
}
.pu-mandetory-card .pu-title{
    font-size: 22px;
}
}


.hero-section{
    background-color: #D9D9D9;
    font-family: poppins6;
    
    
}

.hero-section h2{
    line-height: normal;
}

.hero-section {
    position: relative;
    overflow: hidden;
  }
  
  /* Right-side background image */
  .hero-section::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;               /* push slightly outside */
    transform: translateY(-50%);
    width: 420px;
    height: 500px;
    background: url("../img/parttime-btech/Vector\ 743.png") no-repeat center;
    background-size: contain;
    z-index: 0;
  }
  
  /* Ensure container stays above background */
  .hero-section .container {
    position: relative;
    z-index: 2;
  }
  



/* Mobile responsiveness for Forensic right content */
@media (max-width: 767px) {

    .hero-right-info h2 {
      font-size: 23px;
      line-height: 1.3;
    }
  
    .hero-right-info img {
      max-height: 31px !important;
    }
    
    .hero-section::after{
        display: none;
    }
  }
  



/* FAQ numbering using CSS counters */
#faqAccordion {
    counter-reset: faq-counter;
  }
  
  #faqAccordion .accordion-item {
    counter-increment: faq-counter;
  }
  
  #faqAccordion .accordion-button::before {
    content: counter(faq-counter) ". ";
    font-weight: 700;
    margin-right: 8px;
  }
  

/* Success Section */
.success-section {
    
    background: #ffffff;
  }
  
  .success-section h2, .success-section p{
    color: #0F4E9B;
  }

  /* Illustration */
  .success-img {
    max-height: 180px;
  }
  
  /* Underline */
  .success-underline {
    width: 130px;
    height: 4px;
    background-color: #ff9f2d;
    border-radius: 10px;
  }
  
  /* Button */
  .btn-success-custom {
    background-color: #FF9933;
    color: #fff;
    font-weight: 600;
    padding: 7px 20px !important;
    border-radius: 30px;
    border: none;
    box-shadow: 0 6px 15px rgba(255, 159, 45, 0.35);
    transition: all 0.3s ease;
  }
  
  .btn-success-custom:hover {
    background-color: #ff8a00;
    color: #fff;
    transform: translateY(-2px);
  }
  
  /* Mobile tweaks */
  @media (max-width: 767px) {
    .success-img {
      max-height: 140px;
    }
  
    .success-section p {
      font-size: 1px;
    }
    .success-section h2{
        font-size: 22px;
    }
    .hero-form::after{
        display: none;
    }
  }



  .main-card-2  h2{
    font-family: poppins7;
    color: #0F4E9B;
    line-height: 1.5;
  }

  .main-card-2  p{
    font-family: poppins7;
    line-height: 1.7;
  }
  
  
  
  footer h6 {
    margin-top: 20px;
  }
  
  
  
  

.application-btn {
    background-color: #fff;
    font-weight: 500;
    border: 2px solid #f7941d;
    color: #f7941d;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.application-btn:hover {
    box-shadow: 0 8px 20px rgba(247, 148, 29, 0.35);
    transform: translateY(-2px);
}

.icon-circle {
    width: 40px;
    height: 40px;
    border: 1px solid gray;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

.icon-circle i {
    font-size: 20px;
}

/* Optional subtle hover effect */
.icon-circle:hover {
    background-color: #FF9933;
    border-color: #FF9933;
    color: #fff;
}


/* Default border style */
.border-column {
    border-right: 1px solid #ddd;
}

/* Remove border on medium and above for mobile-only column */
@media (min-width: 768px) {
    .border-column-mobile {
        border-right: none;
    }
}

.stat-box {
    padding: 20px 10px;
}

/* ---------------- MOBILE (+ Divider) ---------------- */
@media (max-width: 767px) {

    /* Vertical center line */
    .stat-box:nth-child(odd) {
        border-right: 1px solid #dcdcdc;
    }

    /* Horizontal center line */
    .stat-box:nth-child(1),
    .stat-box:nth-child(2) {
        border-bottom: 1px solid #dcdcdc;
    }
}

/* ---------------- DESKTOP (Vertical Lines) ---------------- */
@media (min-width: 768px) {

    /* Add right border to all except last */
    .stat-box:not(:last-child) {
        border-right: 1px solid #dcdcdc;
    }

    /* Remove bottom borders if any */
    .stat-box {
        border-bottom: none;
    }
}



.role-link-list li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.role-link-list li a {
    text-decoration: none;
    color: #0F4E9B;
    font-weight: 500;
    transition: 0.3s ease;
}

.role-link-list li a:hover {
    padding-left: 8px;
    color: #000;
}
/* Default (small screens) → no border */
.right-border {
    border-left: none;
    padding: 0;
}

/* Large screens and above */
@media (min-width: 992px) {
    .right-border {
        border-left: 1px solid #ffffff;
        padding-left: 40px;
    }
}