⚝
One Hat Cyber Team
⚝
Your IP:
216.73.216.144
Server IP:
157.245.143.252
Server:
Linux www 6.11.0-9-generic #9-Ubuntu SMP PREEMPT_DYNAMIC Mon Oct 14 13:19:59 UTC 2024 x86_64
Server Software:
nginx/1.26.0
PHP Version:
8.3.11
Buat File
|
Buat Folder
Eksekusi
Dir :
~
/
var
/
www
/
audiostanding.com
/
public
/
frontend
/
css
/
View File Name :
main.css
/*============================================ Theme Name: SkillGro - Online Courses & Education Template Author : ThemeGenix Support: themegenix@gmail.com Description: SkillGro - Online Courses & Education Template Version: 1.0 ==============================================*/ /* CSS Index ============================================== 01. Theme Default CSS 02. Header 03. Mobile Menu 04. Banner 05. Slider 06. Brand 07. About 08. Courses 09. Categories 10. Online 11. Testimonial 12. Instructor 13. Mentor 14. CTA 15. Fact 16. Events 17. Quick Action 18. FAQ 19. Shop 20. Blog 21. Newsletter 22. Contact 23. 404 Error 24. Footer ==============================================*/ /*============================================ /* 01. Theme Default CSS ==============================================*/ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap"); :root { --tg-body-font-family: "Inter", sans-serif; --tg-heading-font-family: "Poppins", sans-serif; --tg-icon-font-family: "Font Awesome 5 Free"; --tg-body-font-size: 16px; --tg-body-line-height: 1.75; --tg-heading-line-height: 1.3; --tg-body-color: #6d6c80; --tg-heading-color: #161439; --tg-theme-primary: #5751e1; --tg-theme-secondary: #ffc224; --tg-common-color-blue: #050071; --tg-common-color-blue-2: #282568; --tg-common-color-indigo: #9b51e0; --tg-common-color-purple: #8121fb; --tg-common-color-pink: #d63384; --tg-common-color-red: #e11b24; --tg-common-color-orange: #fd7e14; --tg-common-color-yellow: #f8bc24; --tg-common-color-yellow-2: #fbe67b; --tg-common-color-green: #12bb6a; --tg-common-color-teal: #219653; --tg-common-color-cyan: #0dcaf0; --tg-common-color-white: #fff; --tg-common-color-gray: #f7f7f9; --tg-common-color-gray-2: #efeefe; --tg-common-color-gray-3: #7f7e97; --tg-common-color-gray-4: #acaacc; --tg-common-color-gray-5: #b2bbcc; --tg-common-color-dark: #1c1a4a; --tg-common-color-black: #06042e; --tg-common-color-black-2: #161439; --tg-common-color-black-3: #000; --tg-border-1: #c9c9dd; --tg-border-2: #d0dae9; --tg-border-3: #e2e2e2; --tg-border-4: #d7dce3; --tg-border-5: #2f466a; --tg-fw-extra-bold: 800; --tg-fw-bold: 700; --tg-fw-semi-bold: 600; --tg-fw-medium: 500; --tg-fw-regular: 400; --tg-fw-light: 300; /* --tg-theme-primary: red; --tg-theme-secondary: pink; --tg-common-color-blue: yellow; --tg-common-color-blue-2: orange; --tg-common-color-dark: #1C1A4A; */ } /*============================= Typography css start ===============================*/ body { font-family: var(--tg-body-font-family); font-size: var(--tg-body-font-size); font-weight: var(--tg-fw-regular); color: var(--tg-body-color); line-height: var(--tg-body-line-height); overflow-x: hidden !important; } img, .img { max-width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } a, button { color: var(--tg-theme-primary); outline: none; text-decoration: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } a:focus, .btn:focus, .button:focus { text-decoration: none; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } a:hover, button:hover { color: var(--tg-theme-secondary); text-decoration: none; } button:focus, input:focus, input:focus, textarea, textarea:focus { outline: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--tg-heading-font-family); color: var(--tg-heading-color); margin-top: 0px; font-weight: var(--tg-fw-semi-bold); line-height: var(--tg-heading-line-height); text-transform: unset; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } .list-wrap { margin: 0px; padding: 0px; } .list-wrap li { list-style: none; } p { font-family: var(--tg-body-font-family); font-size: var(--tg-body-font-size); line-height: var(--tg-body-line-height); font-weight: var(--tg-fw-regular); color: var(--tg-body-color); margin-bottom: 15px; } hr { border-bottom: 1px solid var(--tg-common-color-gray); border-top: 0 none; margin: 30px 0; padding: 0; } label { color: var(--tg-heading-color); cursor: pointer; font-size: var(--tg-body-font-size); font-weight: var(--tg-fw-regular); } 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(--tg-theme-primary); color: var(--tg-common-color-white); text-shadow: none; } ::-moz-selection { background: var(--tg-theme-primary); color: var(--tg-common-color-white); text-shadow: none; } ::selection { background: var(--tg-theme-primary); color: var(--tg-common-color-white); text-shadow: none; } /*============================= - Input Placeholder ===============================*/ input, textarea { color: var(--tg-body-color); } *::-moz-placeholder { color: var(--tg-body-color); font-size: var(--tg-body-font-size); opacity: 1; } *::placeholder { color: var(--tg-body-color); font-size: var(--tg-body-font-size); opacity: 1; } /*============================= - Common Classes ===============================*/ .fix { overflow: hidden; } .clear { clear: both; } /*============================= - Bootstrap Custom =============================*/ .container { padding-left: 15px; padding-right: 15px; } .row { --bs-gutter-x: 30px; } .gutter-y-30 { --bs-gutter-y: 30px; } .gx-0 { --bs-gutter-x: 0; } .gutter-20 { --bs-gutter-x: 20px; } .container { max-width: 1440px; } @media (max-width: 1500px) { .container { max-width: 1320px; } } @media (max-width: 1199.98px) { .container { max-width: 960px; } } @media (max-width: 991.98px) { .container { max-width: 720px; } } @media (max-width: 767.98px) { .container { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .container { max-width: 540px; } } .custom-container { max-width: 1680px; } @media (max-width: 1800px) { .custom-container { max-width: 1680px; } } @media (max-width: 1500px) { .custom-container { max-width: 1320px; } } @media (max-width: 1199.98px) { .custom-container { max-width: 960px; } } @media (max-width: 991.98px) { .custom-container { max-width: 720px; } } @media (max-width: 767.98px) { .custom-container { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .custom-container { max-width: 540px; } } .include-bg { background-position: center; background-size: cover; background-repeat: no-repeat; } /*============================= 1. Button style ===============================*/ .tg-button-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .btn { user-select: none; -moz-user-select: none; background: var(--tg-theme-primary) none repeat scroll 0 0; border: medium none; color: var(--tg-common-color-white); cursor: pointer; display: inline-block; font-size: 16px; font-weight: var(--tg-fw-semi-bold); font-family: var(--tg-heading-font-family); letter-spacing: 0; line-height: 1.12; margin-bottom: 0; padding: 16px 30px; text-align: center; text-transform: capitalize; touch-action: manipulation; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; vertical-align: middle; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; -ms-border-radius: 50px; border-radius: 50px; white-space: nowrap; box-shadow: 4px 6px 0px 0px var(--tg-common-color-blue); overflow: hidden; } .btn:hover, .btn:focus-visible { background: var(--tg-theme-secondary); color: var(--tg-heading-color); box-shadow: 0 0 0 0 var(--tg-common-color-blue); } .btn .text { display: block; } .btn.tg-svg { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px; } .btn .svg-icon { width: 14px; display: block; margin-top: -3px; } .btn.btn-border { background: var(--tg-common-color-white); border: 1px solid var(--tg-theme-primary); color: var(--tg-theme-primary); padding: 19px 23px 16px 23px; } .btn.btn-border svg path { stroke: var(--tg-theme-primary); } .btn.btn-border:focus-visible, .btn.btn-border:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .btn.btn-border:focus-visible svg path, .btn.btn-border:hover svg path { stroke: var(--tg-common-color-white); } .btn.white-btn { background: var(--tg-common-color-white); color: var(--tg-theme-secondary); } .btn.white-btn svg path { stroke: var(--tg-theme-secondary); } .btn-two { background: var(--tg-theme-secondary); border: 2px solid var(--tg-common-color-black-3); -webkit-box-shadow: 4px 4px 0px 0px #3d3d3d; -moz-box-shadow: 4px 4px 0px 0px #3d3d3d; -ms-box-shadow: 4px 4px 0px 0px #3d3d3d; -o-box-shadow: 4px 4px 0px 0px #3d3d3d; box-shadow: 4px 4px 0px 0px #3d3d3d; color: var(--tg-common-color-black-3); } .btn-two svg { color: var(--tg-common-color-black-3) !important; } .btn-two:hover, .btn-two:focus-visible { background: var(--tg-theme-primary); color: var(--tg-common-color-white); box-shadow: 0 0 0 0 var(--tg-common-color-blue); border-color: var(--tg-theme-primary); } .btn-two:hover svg, .btn-two:focus-visible svg { color: var(--tg-common-color-white) !important; } .arrow-btn { --arrow-hover-move-x: -110%; display: inline-flex; align-items: center; gap: 10px; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; } .arrow-btn svg { color: var(--tg-common-color-white); width: 15px; transition: all 0.3s ease-out 0s; transform: translateY(-1px); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); } .arrow-btn svg path { transition: transform 0.38s cubic-bezier(0.37, 0.08, 0.02, 0.93), opacity 0.18s ease-out; -webkit-transition: transform 0.38s cubic-bezier(0.37, 0.08, 0.02, 0.93), opacity 0.18s ease-out; -moz-transition: transform 0.38s cubic-bezier(0.37, 0.08, 0.02, 0.93), opacity 0.18s ease-out; -ms-transition: transform 0.38s cubic-bezier(0.37, 0.08, 0.02, 0.93), opacity 0.18s ease-out; -o-transition: transform 0.38s cubic-bezier(0.37, 0.08, 0.02, 0.93), opacity 0.18s ease-out; } .arrow-btn svg path:nth-of-type(1) { transform: translateX(0); opacity: 1; transition-delay: 0.15s, 0.15s; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } .arrow-btn svg path:nth-of-type(2) { transform: translateX(calc(1 * var(--arrow-hover-move-x))); opacity: 0.5; transition-delay: 0s, 0s; -webkit-transform: translateX(calc(1 * var(--arrow-hover-move-x))); -moz-transform: translateX(calc(1 * var(--arrow-hover-move-x))); -ms-transform: translateX(calc(1 * var(--arrow-hover-move-x))); -o-transform: translateX(calc(1 * var(--arrow-hover-move-x))); } .arrow-btn:focus-visible svg, .arrow-btn:hover svg { color: var(--tg-heading-color); } .arrow-btn:focus-visible svg path:nth-of-type(1), .arrow-btn:hover svg path:nth-of-type(1) { transform: translateX(calc(-1 * var(--arrow-hover-move-x))); opacity: 0; transition-delay: 0s, 0s; -webkit-transform: translateX(calc(-1 * var(--arrow-hover-move-x))); -moz-transform: translateX(calc(-1 * var(--arrow-hover-move-x))); -ms-transform: translateX(calc(-1 * var(--arrow-hover-move-x))); -o-transform: translateX(calc(-1 * var(--arrow-hover-move-x))); } .arrow-btn:focus-visible svg path:nth-of-type(2), .arrow-btn:hover svg path:nth-of-type(2) { transform: translateX(0) translateY(0); opacity: 1; transition-delay: 0.15s, 0.15s; -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); -ms-transform: translateX(0) translateY(0); -o-transform: translateX(0) translateY(0); } /*============================= 00. Preloader ===============================*/ #preloader { background-color: var(--tg-common-color-white); height: 100%; width: 100%; position: fixed; margin-top: 0px; top: 0px; z-index: 9999; } #preloader .loader .loader-container { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100px; height: 100px; border: 3px solid var(--tg-common-color-gray); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } #preloader .loader .loader-container::before { position: absolute; content: ""; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100px; height: 100px; border-top: 3px solid var(--tg-theme-primary); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; animation: loaderspin 1.8s infinite ease-in-out; -webkit-animation: loaderspin 1.8s infinite ease-in-out; } #preloader .loader .loader-icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80px; text-align: center; } #preloader .loader .loader-icon img { animation: loaderpulse alternate 900ms infinite; width: 40px; } @keyframes loaderspin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes loaderspin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes loaderpulse { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } /*============================= - Background color ===============================*/ .grey-bg { background: var(--tg-common-color-gray); } .white-bg { background: var(--tg-common-color-white); } .black-bg { background: var(--tg-common-color-black); } /*========================= 04. Breadcrumb ===========================*/ .breadcrumb__bg { background-size: cover; background-position: center; padding: 107px 0; position: relative; z-index: 1; overflow: hidden; } @media (max-width: 1500px) { .breadcrumb__bg { padding: 100px 0; } } .breadcrumb__bg-two { padding: 61px 0; } .breadcrumb__bg-two .breadcrumb__shape-wrap img:nth-child(3) { display: none; } .breadcrumb__bg-three { min-height: 300px; } .breadcrumb__content .title { margin-bottom: 10px; font-size: 40px; line-height: 1.2; text-transform: capitalize; } @media (max-width: 1199.98px) { .breadcrumb__content .title { font-size: 36px; } } @media (max-width: 767.98px) { .breadcrumb__content .title { font-size: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb__content .title { font-size: 36px; } } .breadcrumb__content .breadcrumb { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; margin-bottom: 0; gap: 10px; } .breadcrumb__content .breadcrumb>* { font-size: 16px; color: var(--tg-theme-primary); } .breadcrumb__content .breadcrumb>* a { color: var(--tg-common-color-dark); } .breadcrumb__content .breadcrumb .breadcrumb-separator { line-height: 1; font-size: 16px; font-weight: 700; margin-top: 2px; opacity: 0.5; color: var(--tg-common-color-gray-3); } .breadcrumb__shape-wrap img { position: absolute; z-index: -1; } .breadcrumb__shape-wrap img:nth-child(1) { left: 100px; top: 62px; } @media (max-width: 1500px) { .breadcrumb__shape-wrap img:nth-child(1) { left: 69px; top: 52px; } } .breadcrumb__shape-wrap img:nth-child(2) { right: 32%; top: 21%; } @media (max-width: 1500px) { .breadcrumb__shape-wrap img:nth-child(2) { right: 38%; } } @media (max-width: 991.98px) { .breadcrumb__shape-wrap img:nth-child(2) { right: 31%; } } @media (max-width: 767.98px) { .breadcrumb__shape-wrap img:nth-child(2) { display: none; } } .breadcrumb__shape-wrap img:nth-child(3) { right: 20%; bottom: 15%; } @media (max-width: 1500px) { .breadcrumb__shape-wrap img:nth-child(3) { right: 23%; bottom: 13%; } } .breadcrumb__shape-wrap img:nth-child(4) { right: 8%; top: 8%; } @media (max-width: 991.98px) { .breadcrumb__shape-wrap img:nth-child(4) { right: 11%; top: 16%; } } .breadcrumb__shape-wrap img:nth-child(5) { right: 0; top: 0; } @media (max-width: 1199.98px) { .breadcrumb__shape-wrap img:nth-child(5) { right: -30px; width: 400px; height: 285px; } } @media (max-width: 991.98px) { .breadcrumb__shape-wrap img:nth-child(5) { display: none; } } /*============================= 00. Select2 CSS ===============================*/ .tgmenu__search-form .select2-container { margin-left: -29px; } .tgmenu__search-form .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 37px; padding-right: 28px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; font-size: 14px; font-family: var(--tg-heading-font-family); color: var(--tg-heading-color); font-weight: 500; } .tgmenu__search-form .select2-container .select2-selection--single { height: auto; } .course-category-dropdown { background: var(--tg-common-color-white); border: 1px solid var(--tg-border-2); margin: 0 0; } .course-category-dropdown .select2-results__options { margin-top: 7px; } .course-category-dropdown .select2-results__option { padding: 1px 10px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .course-category-dropdown .select2-results__option--selectable:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } /*============================= 00. Scroll Top ===============================*/ .scroll__top { width: 40px; height: 40px; line-height: 40px; position: fixed; bottom: -10%; right: 50px; font-size: 16px; border-radius: 4px; z-index: 99; color: var(--tg-common-color-white); text-align: center; cursor: pointer; background: var(--tg-theme-primary); transition: 1s ease; border: none; } @media (max-width: 1199.98px) { .scroll__top { right: 25px; bottom: 25px; } } @media (max-width: 991.98px) { .scroll__top { right: 30px; } } @media (max-width: 767.98px) { .scroll__top { right: 15px; width: 30px; height: 30px; line-height: 30px; text-align: center; } } .scroll__top.open { bottom: 30px; } @media (max-width: 767.98px) { .scroll__top.open { bottom: 15px; } } .scroll__top::after { position: absolute; z-index: -1; content: ""; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 1; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%); } .scroll__top:hover { background: var(--tg-theme-secondary); color: var(--tg-common-color-white); } /*============================= 00. Section Title ===============================*/ .section__title .sub-title { display: inline-block; line-height: 1.62; background: var(--tg-common-color-gray-2); -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; padding: 3px 16px; font-weight: var(--tg-fw-medium); color: var(--tg-theme-primary); margin: 0 0 14px; } .section__title .title { font-size: 36px; line-height: 1.33; margin: 0 0; letter-spacing: -0.75px; text-transform: capitalize; } @media (max-width: 767.98px) { .section__title .title { font-size: 29px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title .title { font-size: 36px; } } .section__title .title span:not(.svg-icon) { position: relative; color: var(--tg-common-color-white); padding: 0 13px 0 20px; font-weight: var(--tg-fw-bold); display: inline-block; z-index: 1; } .section__title .title span:not(.svg-icon)>svg { position: absolute; left: 0; top: -5px; width: 100%; height: 59px; z-index: -1; color: var(--tg-theme-secondary); } @media (max-width: 767.98px) { .section__title .title span:not(.svg-icon)>svg { height: 45px; top: -2px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title .title span:not(.svg-icon)>svg { top: 0; } } .section__title .title .svg-icon { position: absolute; right: -50px; top: -50px; width: 61px; height: 68px; } .section__title .title .svg-icon svg { display: block; width: 100%; height: 100%; } .section__title .title .svg-icon path { stroke: var(--tg-heading-color); } .section__title p { margin-bottom: 0; margin-top: 15px; } @media (max-width: 767.98px) { .section__title p br { display: none; } } .section__title.white-title .sub-title { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .section__title.white-title .title { color: var(--tg-common-color-white); } .section__title.white-title .title span:not(.svg-icon) { color: var(--tg-common-color-white); } .section__title.white-title p { color: #acaacc; } .section__title .desc { margin: 10px 0 0; } /*============================= 02. Header ===============================*/ .transparent-header { position: absolute; left: 0; top: 0px; width: 100%; z-index: 9; height: auto; } @media (max-width: 767.98px) { .transparent-header { top: 0; } } .tg-header__top { background-color: var(--tg-common-color-black); padding: 11px 0; } @media (max-width: 991.98px) { .tg-header__top { display: none; } } .tg-header__top-info { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px 27px; } @media (max-width: 991.98px) { .tg-header__top-info { display: none; } } .tg-header__top-info li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; color: #e6eaef; font-size: 14px; font-weight: var(--tg-fw-medium); gap: 7px; } .tg-header__top-info li img { opacity: 0.6; } .tg-header__top-info li i { color: var(--tg-common-color-white); font-size: 20px; } .tg-header__top-info li a { color: #e6eaef; } .tg-header__top-info li a:hover { color: var(--tg-common-color-white); } @media (max-width: 991.98px) { .tg-header__top-info li::after { display: none; } .tg-header__top-info li:last-child { display: none; } } .tg-header__top-right { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px 27px; justify-content: flex-end; } @media (max-width: 991.98px) { .tg-header__top-right { justify-content: center; } } .tg-header__top-social { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px 12px; justify-content: flex-end; } @media (max-width: 767.98px) { .tg-header__top-social { justify-content: center; } } .tg-header__top-social li { color: var(--tg-common-color-white); font-size: 14px; font-weight: var(--tg-fw-medium); } .tg-header__top-social li:first-child { opacity: 0.5; } .tg-header__top-social li a { color: #e7effc; } .tg-header__top-social li a:hover { color: var(--tg-common-color-white); } .tg-header__phone { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px; color: #e6eaef; font-size: 14px; font-weight: var(--tg-fw-medium); } .tg-header__phone a { color: #e6eaef; } .tg-header__phone a:hover { color: var(--tg-common-color-white); } .tg-header__phone img { opacity: 0.6; } .tg-header__area { padding: 5px 0; } .header_language_area { gap: 20px; } .header_language_area ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 20px; } .header_language_area ul li { position: relative; } .header_language_area ul li a { display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--tg-common-color-white); text-transform: capitalize; font-family: var(--tg-heading-font-family); } .header_language_area ul li a span { width: 20px; height: 20px; margin-right: 5px; margin-top: -4px; } .header_language_area ul li a span img { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .header_language_area ul li:hover>a { color: var(--tg-theme-secondary); } .header_language_area .droap_language { position: absolute; top: 100%; left: -15px; margin-top: 2px; background: var(--tg-common-color-white); padding: 10px 15px 10px 15px; min-width: 150px; border: 1px solid #f5f5f5; box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15); border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; transform: scale(1, 0); transform-origin: 0 0; display: block; visibility: hidden; opacity: 0; z-index: 99; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .header_language_area .droap_language li a { color: var(--tg-heading-color); padding: 7px 0px; } .header_language_area .droap_language li a:hover { color: var(--tg-theme-primary); } .header_language_area .droap_language li a span img { border: 1px solid #ddd; } .header_language_area ul>li:hover .droap_language { opacity: 1; visibility: visible; transform: scale(1); } .header_language_area ul li.currency .droap_language { min-width: 100px; } .tgmobile__menu .header_language_area { padding: 10px 15px 10px 15px; justify-content: center; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 15px; background: var(--tg-common-color-gray); } .tgmobile__menu .header_language_area ul { gap: 10px; width: 100%; } .tgmobile__menu .header_language_area ul form { width: 48%; } .tgmobile__menu .header_language_area ul li a { color: var(--tg-heading-color); } .tg-header__top .header_language_area ul .nice-select { background: none; border-radius: 0; border: 0; border-left: 1px solid #eeeeee40 !important; height: 24px; line-height: 24px; padding-left: 20px; padding-right: 0; width: 90px; } .tg-header__top .header_language_area ul .nice-select:after { border-bottom: 1px solid var(--tg-common-color-white); border-right: 1px solid var(--tg-common-color-white); height: 6px; width: 6px; right: 3px; } .tg-header__top .header_language_area ul span.current { color: var(--tg-common-color-white); opacity: 0.9; } .tg-header__top .tg-header__top-social li:first-child { opacity: 0.9; } .tg-header__top .header_language_area ul .list { gap: 0 !important; min-width: 110px; margin-top: 12px; } .tg-header__top .header_language_area ul .option { padding-left: 20px; padding-right: 20px; width: 100%; } .tg-header__top .tgmenu__search-form .form-select { padding: 0; } .nice-select .option.selected { font-weight: 600; color: var(--tg-common-color-black); } .tgmenu__search .nice-select { height: auto; line-height: inherit; padding-left: 15px; padding-right: 15px; } .tgmenu__search-form .select-grp { padding: 6px 0 6px 17px !important; } .nice-select .option.disabled { color: var(--tg-common-color-black); } .tgmenu__search-form .select-grp { width: 170px !important; } .tgmenu__search-form .select2-container .select2-selection--single .select2-selection__rendered { background-image: none !important; } .tgmenu__search .form-select { --bs-form-select-bg-img: none; } .tgmenu__search .nice-select:after { height: 6px; width: 6px; right: 20px; border-bottom: 1px solid var(--tg-common-color-black); border-right: 1px solid var(--tg-common-color-black); } .courses__item-content .title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tgmenu__search-form input { padding: 9px 50px 10px 20px; } .pagination-wrap .pagination { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 10px; margin: 0; } .pagination-wrap .page-link, .pagination-wrap .page-item span { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #e6e9ef; -ms-border-radius: 50% !important; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; -o-border-radius: 50% !important; border-radius: 50% !important; font-size: 18px; color: var(--tg-heading-color); font-family: var(--tg-heading-font-family); font-weight: var(--tg-fw-medium); border: none !important; } .pagination-wrap .page-link:hover, .pagination-wrap li.active .page-link { color: var(--tg-common-color-white); background: var(--tg-theme-primary); } .pagination-wrap .page-item i, .pagination-wrap .page-item span i { font-size: 13px; } .about__content ul, .about__content ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 15px; margin-top: 25px; } .about__content ul li, .about__content ol li { position: relative; padding-left: 45px; font-family: var(--tg-heading-font-family); color: var(--tg-heading-color); font-size: 18px; font-weight: var(--tg-fw-semi-bold); margin: 0 0; } .about__content ul li::after, .about__content ol li::after { position: absolute; content: "\f054"; font-family: "font awesome 5 free"; font-weight: 600; font-size: 14px; width: 30px; height: 30px; line-height: 30px; text-align: center; color: var(--tg-heading-color); background: var(--tg-theme-secondary); border: 1px solid #282568; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.25); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; top: -1px; left: 0; } .about__content ul li:hover::after { box-shadow: none; } .highlight { display: inline-block !important; font-weight: var(--tg-fw-semi-bold) !important; } .courses__item-content .title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .latest-comments .comments-text .avatar-name .date { display: inline-block; margin-left: 10px !important; } .latest-comments .comments-text { width: 100%; } .latest-comments .comments-text .avatar-name { justify-content: space-between; } .cart__table tr { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .cart__table tr th { background: var(--tg-common-color-gray-2); border-bottom: 1px solid var(--tg-common-color-gray-2); } .cart__table tr th, .cart__table tr td { padding: 0; } .cart__table td.product__thumb { width: 130px; min-width: 100px; height: 110px; padding: 10px 0px; } .cart__table .product__thumb a { display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; } .cart__table .product__thumb a img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: 100%; } .cart__table .product__name a { color: var(--tg-common-color-black); font-size: 18px; font-weight: 600; } .cart__collaterals-wrap { height: auto !important; border-radius: 10px !important; } .cart__collaterals-wrap .list-wrap li { padding: 12px 5px !important; } .blog__details-content ul, .blog__details-content ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 15px; margin-top: 35px; } .blog__details-content ul li, .blog__details-content ol li { position: relative; padding-left: 45px; font-family: var(--tg-heading-font-family); color: var(--tg-heading-color); font-size: 18px; font-weight: var(--tg-fw-semi-bold); margin: 0 0; } .blog__details-content ul li::after, .blog__details-content ol li::after { position: absolute; content: "\f054"; font-family: "font awesome 5 free"; font-weight: 600; font-size: 14px; width: 30px; height: 30px; line-height: 30px; text-align: center; color: var(--tg-heading-color); background: var(--tg-theme-secondary); border: 1px solid #282568; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.25); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; top: -1px; left: 0; } .list-wrap li { list-style: none; padding: 0 !important; } .list-wrap li::after { display: none; } .dashboard__sidebar-menu .list-wrap li { padding-bottom: 10px !important; } .dashboard_courses .courses__item:hover { filter: none; -webkit-filter: none; } @media (max-width: 1500px) { .tg-header__area { padding: 10px 0; } } @media (max-width: 1199.98px) { .tg-header__area { padding: 20px 0; } } .tg-header__area .mobile-nav-toggler { position: relative; font-size: 30px; cursor: pointer; line-height: 1; color: var(--tg-theme-primary); display: none; } @media (max-width: 1199.98px) { .tg-header__area .mobile-nav-toggler { display: block; } } .tg-header__area.sticky-menu { padding: 0 0; } @media (max-width: 1199.98px) { .tg-header__area.sticky-menu { padding: 20px 0; } } .tg-header__style-two .tgmenu__search-form { width: 400px; } @media (max-width: 1500px) { .tg-header__style-two .tgmenu__search-form { width: 290px; } } @media (max-width: 1199.98px) { .tg-header__style-two .tgmenu__search-form { width: 400px; } } @media (max-width: 991.98px) { .tg-header__style-two .tgmenu__search-form { width: auto; } } .tg-header__style-two .tgmenu__navbar-wrap ul { margin: 0 auto 0 50px; } @media (max-width: 1500px) { .tg-header__style-two .tgmenu__navbar-wrap ul { margin: 0 auto 0 25px; } } .tgmenu__nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; } @media (max-width: 991.98px) { .tgmenu__nav { justify-content: space-between; } } .tgmenu__navbar-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-grow: 1; } .tgmenu__navbar-wrap ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding: 0; flex-direction: row; flex-wrap: wrap; margin: 0 auto 0 73px; } @media (max-width: 1500px) { .tgmenu__navbar-wrap ul { margin: 0 auto 0 20px; } } .tgmenu__navbar-wrap ul li { display: block; position: relative; list-style: none; } .tgmenu__navbar-wrap ul li a { font-size: 16px; font-weight: var(--tg-fw-medium); text-transform: capitalize; color: var(--tg-heading-color); font-family: var(--tg-heading-font-family); padding: 37px 10px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; line-height: 1; position: relative; z-index: 1; } @media (max-width: 1500px) { .tgmenu__navbar-wrap ul li a { padding: 37px 7px; } } .tgmenu__navbar-wrap ul li .sub-menu { position: absolute; left: 0; top: 100%; min-width: 230px; border: 1px solid #f5f5f5; background: var(--tg-common-color-white); margin: 0; -webkit-transform: scale(1, 0); -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); transform-origin: 0 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15); -moz-box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15); box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15); -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; padding: 18px 0; display: block; visibility: hidden; opacity: 0; z-index: 9; } .tgmenu__navbar-wrap ul li .sub-menu .sub-menu { right: auto; left: 100%; top: 0; } .tgmenu__navbar-wrap ul li .sub-menu li { margin-left: 0; text-align: left; display: block; } .tgmenu__navbar-wrap ul li .sub-menu li a { padding: 8px 15px 8px 25px; line-height: 1.4; display: block; color: var(--tg-heading-color); text-transform: capitalize; font-size: 15px; } .tgmenu__navbar-wrap ul li .sub-menu li:hover>a, .tgmenu__navbar-wrap ul li .sub-menu li.active>a { color: var(--tg-theme-primary); } .tgmenu__navbar-wrap ul li:hover>.sub-menu { opacity: 1; visibility: visible; transform: scale(1); } .tgmenu__navbar-wrap>ul>li.active a, .tgmenu__navbar-wrap>ul>li:hover a { color: var(--tg-theme-primary); } .tgmenu__main-menu li.menu-item-has-children .dropdown-btn { display: none; } .tgmenu__main-menu li.menu-item-has-children>a::after { content: "\f105"; display: block; font-family: "flaticon_skill_grow"; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); font-size: 14px; font-weight: var(--tg-fw-bold); margin-left: 6px; } @media (max-width: 1500px) { .tgmenu__main-menu li.menu-item-has-children>a::after { margin-left: 4px; } } .tgmenu__main-menu li.menu-item-has-children>.sub-menu .menu-item-has-children { position: relative; } .tgmenu__main-menu li.menu-item-has-children>.sub-menu .menu-item-has-children>a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; } .tgmenu__main-menu li.menu-item-has-children>.sub-menu .menu-item-has-children>a::after { content: "\f105"; font-family: "flaticon_skill_grow"; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); font-size: 14px; font-weight: var(--tg-fw-bold); margin-left: 6px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .tgmenu__main-menu li.menu-item-has-children>.sub-menu .menu-item-has-children:hover a::after, .tgmenu__main-menu li.menu-item-has-children>.sub-menu .menu-item-has-children.active a::after { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .tgmenu__search { margin-inline-end: 25px; } @media (max-width: 1500px) { .tgmenu__search { margin-inline-end: 15px; } } @media (max-width: 1199.98px) { .tgmenu__search { margin-left: auto; } } .tgmenu__search-form { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 535px; border-radius: 100px; border: 1px solid #d3d2df; } @media (max-width: 1800px) { .tgmenu__search-form { width: 485px; } } @media (max-width: 1500px) { .tgmenu__search-form { width: 310px; } } @media (max-width: 1199.98px) { .tgmenu__search-form { width: 500px; } } @media (max-width: 991.98px) { .tgmenu__search-form { width: auto; } } .tgmenu__search-form .select-grp { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; background: transparent; border: none; padding: 12px 0 12px 17px; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; border-radius: 0; width: 153px; flex: 0 0 auto; position: relative; } @media (max-width: 1500px) { .tgmenu__search-form .select-grp { padding: 12px 0 12px 12px; width: 140px; } } .blog__details-bottom .tg-post-tag ul.list-wrap, .blog__details-bottom .tg-post-social ul.list-wrap { margin-top: 0 !important; } .tgmenu__search-form .select-grp::after { content: ""; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 20px; background: #bdbabb; } @media (max-width: 991.98px) { .tgmenu__search-form .select-grp::after { display: none; } } .tgmenu__search-form .select-grp svg { width: 16px; height: 16px; flex: 0 0 auto; } .tgmenu__search-form .select-grp path { fill: var(--tg-theme-primary); } .tgmenu__search-form .form-select { outline: none; box-shadow: none; border: none; padding-left: 8px; color: var(--tg-heading-color); font-family: var(--tg-heading-font-family); font-size: 14px; background: transparent; } .tgmenu__search-form .form-select .current { font-size: 14px; font-weight: 500; position: relative; top: 1px; } .tgmenu__search-form .input-grp { position: relative; flex-grow: 1; margin-left: -1px; } @media (max-width: 991.98px) { .tgmenu__search-form .input-grp { display: none; } } .tgmenu__search-form input { display: block; width: 100%; background: transparent; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; border-radius: 0; padding: 12px 50px 12px 20px; height: 50px; font-size: 15px; font-family: var(--tg-heading-font-family); } @media (max-width: 1500px) { .tgmenu__search-form input { padding: 12px 50px 10px 10px; } } @media (max-width: 1199.98px) { .tgmenu__search-form input { padding: 12px 50px 10px 20px; } } .tgmenu__search-form input::placeholder { color: #8d9db5; font-size: 14px; } .tgmenu__search-form [type="submit"] { position: absolute; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 4px; width: 44px; height: 44px; border: none; padding: 0 0; background: var(--tg-theme-primary); font-size: 20px; color: var(--tg-common-color-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .tgmenu__search-form [type="submit"]:hover { background: var(--tg-theme-secondary); color: var(--tg-heading-color); } .tgmenu__search-bar { flex-grow: 1; } @media (max-width: 1500px) { .tgmenu__search-bar { max-width: 240px; } } @media (max-width: 1199.98px) { .tgmenu__search-bar { max-width: 100%; } } @media (max-width: 991.98px) { .tgmenu__search-bar { display: none; } } .tgmenu__search-bar form { position: relative; } .tgmenu__search-bar form input { display: block; width: 100%; background: var(--tg-common-color-white); border: 1px solid var(--tg-border-2); -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; -ms-border-radius: 50px; border-radius: 50px; padding: 12px 50px 10px 20px; height: 45px; font-size: 15px; font-family: var(--tg-heading-font-family); } .tgmenu__search-bar form input::placeholder { color: #8d9db5; font-size: 14px; } .tgmenu__search-bar form [type="submit"] { position: absolute; top: 50%; -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); -o-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); right: 10px; border: none; padding: 0 0; background: transparent; font-size: 24px; color: #8d9db5; } .tgmenu__search-bar form [type="submit"]:hover { color: var(--tg-theme-primary); } @media (max-width: 1199.98px) { .tgmenu__action { margin: 0 25px 0 0; } } @media (max-width: 767.98px) { .mini-cart-icon.user_icon { display: none; } .tgmenu__action { margin-left: auto; } } .tgmenu__action>ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 8px; } .tgmenu__action>ul li { position: relative; padding: 0 6px 0 0; flex: 0 0 auto; } .tgmenu__action>ul li .cart-count { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #7f7e97; color: #7f7e97; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .tgmenu__action>ul li .cart-count span { position: absolute; top: -9px; right: 0; width: 22px; height: 22px; font-size: 14px; font-weight: 500; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: var(--tg-theme-secondary); color: var(--tg-heading-color); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; z-index: 1; } .tgmenu__action>ul li .cart-count:hover { background: var(--tg-theme-primary); border-color: var(--tg-theme-primary); color: var(--tg-common-color-white); } .tgmenu__action .user_icon { padding-right: 0; } .tgmenu__action .user_icon a img { width: 18px; } .tgmenu__action .user_icon:hover>a { background: var(--tg-theme-primary); border-color: var(--tg-theme-primary); } .tgmenu__action .user_icon:hover a img { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7414%) hue-rotate(155deg) brightness(90%) contrast(118%); } .user_icon .menu_user_list { padding: 15px 15px 15px 25px; position: absolute; width: 220px; top: 100%; right: 0; z-index: 9; margin-top: 15px; border-radius: 6px; background: var(--tg-common-color-white); box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15); border: 1px solid #f5f5f5; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; opacity: 0; visibility: hidden; transform-origin: 0 0; transform: scale(1, 0); -webkit-transform: scale(1, 0); -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .user_icon .menu_user_list li a { line-height: 2.7; display: block; color: var(--tg-heading-color); text-transform: capitalize; font-size: 15px; font-weight: 500; } .user_icon .menu_user_list li a:hover { color: var(--tg-theme-primary); } .user_icon:hover .menu_user_list { opacity: 1; visibility: visible; transform: scale(1); } .user_icon .menu_user_list::after { position: absolute; content: ""; width: 0; height: 0; top: -15px; right: 10px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 15px solid #d4d1f9; } .tgmenu__action>ul li:first-child { margin-left: 0; } @media (max-width: 1500px) { .tgmenu__action>ul li.free-btn { display: none; } } .tgmenu__action>ul li.login-btn { padding: 0 0; margin-inline-start: 15px; } @media (max-width: 1500px) { .tgmenu__action>ul li.login-btn { margin-inline-start: 0; } } @media (max-width: 1199.98px) { .tgmenu__action>ul li.login-btn { display: none; } } .tgmenu__action>ul li.login-btn a { display: block; border-radius: 50px; padding: 12px 26px; border: 1px solid rgba(6, 35, 91, 0.19); background: var(--tg-theme-secondary); font-size: 15px; color: var(--tg-heading-color); font-weight: 600; line-height: 18px; } .tgmenu__action>ul li.login-btn a:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .tgmenu__action-two .mini-cart-icon { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-end; gap: 8px; } .tgmenu__action-two .mini-cart-icon .cart-count-two { position: relative; font-size: 30px; line-height: 0; color: var(--tg-common-color-black-2); } .tgmenu__action-two .mini-cart-icon .cart-count-two .mini-cart-count { position: absolute; width: 23px; height: 23px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; background: var(--tg-theme-primary); color: var(--tg-common-color-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; top: -10px; right: -13px; } .tgmenu__action-two .mini-cart-icon .cart-count-two:hover { color: var(--tg-theme-secondary); } .tgmenu__action-two .mini-cart-icon strong { font-size: 14px; font-weight: 500; color: var(--tg-common-color-black-2); line-height: 1.2; } .tgmenu__categories { margin-right: 12px; } @media (max-width: 1199.98px) { .tgmenu__categories { margin-left: auto; } } .tgmenu__categories .dropdown-toggle { font-family: var(--tg-heading-font-family); border: 1px solid var(--tg-border-2); background-color: var(--tg-common-color-white); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; color: var(--tg-body-color); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 9px 17px; gap: 11px; } .tgmenu__categories .dropdown-toggle svg { color: var(--tg-theme-primary); } .tgmenu__categories .dropdown-toggle::after { content: ""; display: block; margin: 0 0; border: none; background-image: url(../img/icons/down_arrow.svg); width: 12px; height: 6px; } .tgmenu__categories .dropdown-menu { width: 100%; min-width: 100%; background-color: var(--tg-common-color-white); border: 1px solid var(--tg-border-2); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .tgmenu__categories .dropdown-item { color: var(--tg-body-color); } .tgmenu__categories .dropdown-item:hover, .tgmenu__categories .dropdown-item:focus { background-color: var(--tg-theme-primary); color: var(--tg-common-color-white); } .sticky-menu { position: fixed; left: 0; margin: auto; top: 0; width: 100%; z-index: 99; background: var(--tg-common-color-white); -webkit-animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown; animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown; -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1); box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1); border-radius: 0; } .sticky-menu ul li .sub-menu { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -o-border-radius: 0 0 6px 6px; -ms-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } #header-fixed-height.active-height { display: block; height: 90px; } /*============================= 03. Mobile Menu ===============================*/ .mobile_menu_login { list-style: none; gap: 10px; justify-content: center; padding: 0; margin: 0px 15px; border-radius: 6px; margin-bottom: 15px; } .mobile_menu_login li { width: 48%; } .mobile_menu_login li a { text-transform: capitalize; font-size: 16px; font-weight: 500; color: var(--tg-theme-primary); transition: all linear 0.3s; display: block; text-align: center; padding: 7px 5px; background: var(--tg-common-color-gray-2); border-radius: 6px; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .mobile_menu_login li a:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .tgmobile__search { padding: 0 15px 15px 15px; } .tgmobile__search form { position: relative; display: flex; flex-wrap: wrap; gap: 10px; } .tgmobile__search .form-select { width: 100% !important; font-size: 15px; padding: 9px 13px; } .tgmobile__search input { display: block; width: 100%; padding: 10px 45px 10px 14px; font-size: 15px; height: 42px; background: var(--tg-common-color-gray); color: var(--tg-common-color-black-3); border: var(--bs-border-width) solid var(--bs-border-color); border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; } .tgmobile__search input::placeholder { font-size: 15px; color: var(--tg-body-color); } .tgmobile__search button { position: absolute; top: 66px; padding: 0; right: 13px; line-height: 1; background: transparent; color: var(--tg-heading-color); border: none; } .tgmobile__menu .nice-select .current { color: var(--tg-common-color-black-3); } .tgmobile__menu .nice-select:after { border-bottom: 1px solid #000; border-right: 1px solid #000; right: 16px; height: 6px; width: 6px; } .tgmobile__menu { position: fixed; right: 0; top: 0; width: 300px; padding-right: 30px; max-width: 100%; height: 100%; z-index: 99; border-radius: 0px; transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); -ms-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86) e; -o-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transform: translateX(101%); -moz-transform: translateX(101%); -ms-transform: translateX(101%); -o-transform: translateX(101%); transform: translateX(101%); } .tgmobile__menu .nice-select .option { width: 100%; } .tgmobile__menu .navbar-collapse { display: block !important; } .tgmobile__menu .nav-logo { position: relative; padding: 30px 25px; text-align: left; } .tgmobile__menu .nav-logo img { width: 150px; } .tgmobile__menu .navigation { position: relative; display: block; width: 100%; float: none; margin: 0; padding: 0; } .tgmobile__menu .navigation li { position: relative; display: block; border-top: 1px solid rgba(0, 0, 0, 0.1); } .tgmobile__menu .navigation li.active>a { color: var(--tg-theme-primary); } .tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn { position: absolute; right: 20px; top: 6px; width: 32px; height: 32px; text-align: center; font-size: 16px; line-height: 32px; color: var(--tg-heading-color); background: var(--tg-common-color-gray); cursor: pointer; border-radius: 2px; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; z-index: 5; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; } .tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn .plus-line { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(0); -ms-transform: translate(-50%, -50%) rotate(0); transform: translate(-50%, -50%) rotate(0); border-radius: 10px; width: 12px; height: 2px; background-color: var(--tg-common-color-black); -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; } .tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn .plus-line::after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(0); -ms-transform: translate(-50%, -50%) rotate(0); transform: translate(-50%, -50%) rotate(0); border-radius: 10px; width: 2px; height: 12px; background-color: var(--tg-common-color-black); -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; } .tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn.open { background-color: var(--tg-theme-primary); } .tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn.open .plus-line { background-color: var(--tg-common-color-white); } .tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn.open .plus-line::after { display: none; } .tgmobile__menu .navigation li>a { position: relative; display: block; line-height: 1.5; padding: 10px 60px 10px 25px; font-size: 16px; font-weight: 500; color: var(--tg-heading-color); text-transform: capitalize; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; border: none; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; } .tgmobile__menu .navigation li>a::before { content: ""; position: absolute; left: 0; top: 0; height: 0; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; width: 2px; background: var(--tg-theme-primary); pointer-events: none; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; } .tgmobile__menu .navigation li ul li>a { margin-left: 20px; } .tgmobile__menu .navigation li ul li ul li a { margin-left: 40px; } .tgmobile__menu .navigation li ul li ul li ul li a { margin-left: 60px; } .tgmobile__menu .navigation li>ul { display: none; } .tgmobile__menu .navigation li>ul>li>ul { display: none; } .tgmobile__menu .navigation ul { padding: 0; margin: 0; } .tgmobile__menu .navigation ul li a { display: block; } .tgmobile__menu .navigation ul li ul li>a { font-size: 16px; margin-left: 20px; text-transform: capitalize; } .tgmobile__menu .navigation:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .tgmobile__menu .navigation>li>ul>li:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } .tgmobile__menu .navigation>li.active>a::before { height: 100%; } .tgmobile__menu .close-btn { position: absolute; right: 15px; top: 28px; line-height: 30px; width: 35px; text-align: center; font-size: 14px; color: var(--tg-theme-primary); cursor: pointer; padding: 8px; z-index: 10; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; } .tgmobile__menu .close-btn i[class^="flaticon-"]:before { font-weight: var(--tg-fw-bold) !important; } .tgmobile__menu-backdrop { position: fixed; right: 0; top: 0; width: 100%; height: 100%; z-index: 4; transition: all 700ms ease; -moz-transition: all 700ms ease; -webkit-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.5); } .tgmobile__menu .social-links ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: relative; text-align: center; padding: 30px 20px 20px; align-items: center; justify-content: center; flex-wrap: wrap; } .tgmobile__menu .social-links ul li { position: relative; display: inline-block; margin: 0px 6px 10px; } .tgmobile__menu .social-links ul li a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; position: relative; line-height: 32px; font-size: 16px; color: var(--tg-body-color); -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; border: 1px solid #efefef; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; } .tgmobile__menu .social-links ul li a img { filter: brightness(0) saturate(100%) invert(47%) sepia(9%) saturate(703%) hue-rotate(204deg) brightness(88%) contrast(91%); } .tgmobile__menu .social-links ul li a:hover { border-color: var(--tg-theme-primary); background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .tgmobile__menu .social-links ul li a:hover img { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(82deg) brightness(105%) contrast(105%); } .tgmobile__menu .tgmenu__action { padding: 0 0; margin: 0 0; } .tgmobile__menu .tgmenu__action>ul { margin: 0 0; padding: 30px 20px 0; justify-content: center; gap: 0 15px; } .tgmobile__menu .tgmenu__action>ul li { margin: 0 0; } .tgmobile__menu .tgmenu__action>ul .header-btn { display: block; } .tgmobile__menu-box { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; background: var(--tg-common-color-white); padding: 0px 0px; z-index: 5; box-shadow: -9px 0 14px 0px rgba(0, 0, 0, 0.06); } .tgmobile__menu-outer .mobile-nav-toggler { position: relative; float: right; font-size: 40px; line-height: 50px; cursor: pointer; display: none; color: var(--tg-common-color-white); margin-right: 30px; top: 15px; } .mobile-menu-visible { overflow: hidden; } .mobile-menu-visible .tgmobile__menu { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .mobile-menu-visible .tgmobile__menu-backdrop { opacity: 1; visibility: visible; } .mobile-menu-visible .tgmobile__menu .close-btn { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } /*============================= 04. Banner ===============================*/ .banner-bg { min-height: 520px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-end; padding: 60px 0 0; position: relative; overflow: hidden; } @media (max-width: 1500px) { .banner-bg { min-height: auto; } } .banner-bg .line-shape { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; } @media (max-width: 767.98px) { .banner-bg .line-shape { display: none; } } .banner-bg-two { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-end; position: relative; overflow: hidden; padding: 80px 0 60px; background-size: cover; background-position: bottom; z-index: 1; } @media (max-width: 1500px) { .banner-bg-two { padding: 60px 0 60px; } } @media (max-width: 991.98px) { .banner-bg-two { padding: 60px 0 25px; } } .banner-bg-two .line-shape-two { position: absolute; left: 0; top: 20%; z-index: -1; pointer-events: none; } @media (max-width: 767.98px) { .banner-bg-two .line-shape-two { display: none; } } .banner__content { margin: 60px 0 100px; position: relative; z-index: 3; } @media (max-width: 1500px) { .banner__content { margin: 60px 0 70px; } } @media (max-width: 1199.98px) { .banner__content { margin: 40px 0 60px; } } @media (max-width: 991.98px) { .banner__content { text-align: center; } } @media (max-width: 767.98px) { .banner__content { margin: 0 0 60px; } } .banner__content .sub-title { display: inline-block; line-height: 1; background: var(--tg-common-color-gray); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; padding: 7px 15px; font-weight: var(--tg-fw-medium); color: var(--tg-theme-primary); margin: 0 0 16px; } .banner__content .title { font-size: 40px; line-height: 1.5; font-weight: var(--tg-fw-medium); margin: 0 0 12px; } @media (max-width: 1199.98px) { .banner__content .title { font-size: 35px; } } @media (max-width: 767.98px) { .banner__content .title { font-size: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .banner__content .title { font-size: 40px; } } .banner__content .title span:not(.svg-icon) { position: relative; color: var(--tg-common-color-white); padding: 0 13px 0 20px; font-weight: var(--tg-fw-bold); z-index: 1; } .banner__content .title span:not(.svg-icon)>svg { position: absolute; left: 0; top: 3px; width: 100%; height: 100%; z-index: -1; color: var(--tg-theme-secondary); } .banner__content .title .svg-icon { position: absolute; right: -50px; top: -50px; width: 61px; height: 68px; } @media (max-width: 767.98px) { .banner__content .title .svg-icon { display: none; } } .banner__content .title .svg-icon svg { display: block; width: 100%; height: 100%; } .banner__content .title .svg-icon path { stroke: var(--tg-heading-color); } .banner__content p { max-width: 90%; margin: 0 0 0; font-size: 18px; line-height: 1.6; } @media (max-width: 1199.98px) { .banner__content p { max-width: 100%; } } .banner__content-two { margin: 120px 0 60px; } @media (max-width: 1500px) { .banner__content-two { margin: 80px 0 60px; } } @media (max-width: 991.98px) { .banner__content-two { margin: 0 0 60px; text-align: center; } } .banner__content-two .title { margin-bottom: 25px; font-size: 44px; font-weight: 700; } @media (max-width: 1199.98px) { .banner__content-two .title { font-size: 38px; } } @media (max-width: 767.98px) { .banner__content-two .title { font-size: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .banner__content-two .title { font-size: 40px; } } .banner__content-two .title span { position: relative; color: var(--tg-common-color-white); padding: 0 13px 0 20px; font-weight: var(--tg-fw-bold); z-index: 1; } @media (max-width: 767.98px) { .banner__content-two .title span { padding: 0 10px 0 10px; } } .banner__content-two .title span svg { position: absolute; left: 0; top: 3px; width: 100%; height: 100%; z-index: -1; color: var(--tg-theme-secondary); } .banner__btn-wrap { margin: 34px 0 0; } @media (max-width: 991.98px) { .banner__btn-wrap { margin: 28px 0 0; } .banner__btn-wrap .tg-button-wrap { justify-content: center; } } .banner__btn-two { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 25px; flex-wrap: wrap; } @media (max-width: 991.98px) { .banner__btn-two { justify-content: center; } } .banner__btn-two .play-btn { font-size: 15px; font-weight: 500; font-family: var(--tg-heading-font-family); line-height: 1.3; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 15px; color: var(--tg-heading-color); } .banner__btn-two .play-btn i { width: 54px; height: 54px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: var(--tg-theme-secondary); border: 1px solid var(--tg-heading-color); color: var(--tg-heading-color); font-size: 16px; -webkit-box-shadow: 4px 4px 0px 0px #3d3d3d; -moz-box-shadow: 4px 4px 0px 0px #3d3d3d; -ms-box-shadow: 4px 4px 0px 0px #3d3d3d; -o-box-shadow: 4px 4px 0px 0px #3d3d3d; box-shadow: 4px 4px 0px 0px #3d3d3d; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .banner__btn-two .play-btn:hover { color: var(--tg-theme-secondary); } .banner__btn-two .play-btn:hover i { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .banner__images { position: relative; padding-right: 118px; text-align: right; z-index: 1; } @media (max-width: 1199.98px) { .banner__images { padding-right: 105px; } } @media (max-width: 991.98px) { .banner__images { margin: 0 auto; text-align: center; max-width: 80%; padding: 0; } } @media (max-width: 767.98px) { .banner__images { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .banner__images { max-width: 90%; } } .banner__images .main-img { max-width: inherit; } @media (max-width: 1500px) { .banner__images .main-img { max-width: 100%; } } .banner__images .shape { position: absolute; z-index: -1; } .banner__images .shape.big-shape { max-width: 618px; bottom: -85px; right: -22px; } .banner__images .shape.bg-dots { max-width: 495px; right: 30px; bottom: -33px; z-index: -2; } @media (max-width: 767.98px) { .banner__images .shape.bg-dots { max-width: 100%; right: 0; bottom: 18%; } } .banner__images .shape.small-shape { max-width: 136px; left: 35px; bottom: -24px; z-index: -2; } @media (max-width: 1199.98px) { .banner__images .shape.small-shape { left: 10px; } } .banner__images-two { position: relative; text-align: center; margin-right: 60px; } @media (max-width: 1199.98px) { .banner__images-two { margin-right: 0; } } @media (max-width: 1500px) { .banner__images-two img { width: 400px; } } @media (max-width: 1199.98px) { .banner__images-two img { width: 350px; } } .banner__images-two .big-shape { position: absolute; z-index: -1; left: 8%; top: 2%; color: #ffc738; } @media (max-width: 1500px) { .banner__images-two .big-shape { top: 5%; } } @media (max-width: 1199.98px) { .banner__images-two .big-shape { left: 0; width: 400px; top: 2%; } .banner__images-two .big-shape svg { width: 100%; height: 100%; } } @media (max-width: 767.98px) { .banner__images-two .big-shape { width: 100%; max-width: 400px; } } .banner__images-two .svg-icon { width: 42px; height: 42px; position: absolute; left: 35%; top: -5%; } @media (max-width: 991.98px) { .banner__images-two .svg-icon { left: 30%; top: -8%; } } .banner__images-two .svg-icon svg { width: 100%; height: 100%; color: #031333; display: block; } .banner__images-two .about__enrolled { left: 0; top: 41%; bottom: auto; } @media (max-width: 1199.98px) { .banner__images-two .about__enrolled { display: none; } } .banner__student { display: inline-flex; align-items: center; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; border: 1px solid var(--tg-common-color-gray-5); background: var(--tg-common-color-white); -webkit-box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.15); -ms-box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.15); -o-box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.15); position: absolute; right: 18%; top: 16%; padding: 15px 18px; gap: 10px; } @media (max-width: 1199.98px) { .banner__student { right: 0; top: 13%; } } .banner__student .icon { width: 50px; height: 50px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: var(--tg-common-color-green); color: var(--tg-common-color-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 4px 4px 0px rgba(33, 150, 83, 0.5); -moz-box-shadow: 4px 4px 0px rgba(33, 150, 83, 0.5); -ms-box-shadow: 4px 4px 0px rgba(33, 150, 83, 0.5); -o-box-shadow: 4px 4px 0px rgba(33, 150, 83, 0.5); box-shadow: 4px 4px 0px rgba(33, 150, 83, 0.5); border: 1px solid #149959; } .banner__student .content { text-align: left; } .banner__student .content span { display: block; line-height: 1; font-size: 14px; font-weight: 500; margin-bottom: 8px; } .banner__student .content .title { margin-bottom: 0; font-size: 24px; font-family: var(--tg-body-font-family); font-weight: 800; line-height: 1; } .banner__author { position: absolute; top: 30px; left: 23px; width: 175px; padding: 11px 30px 11px 14px; text-align: left; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; gap: 6px; } .about__enrolled.students.aos-init.aos-animate { bottom: 311px; left: -18px; } .banner__student.instructor.aos-init.aos-animate { right: -4%; top: 70%; } .highlight { background-color: var(--tg-theme-secondary); border-radius: 16px 15px 35px 35px; clip-path: polygon(50% 0, 100% 10%, 100% 10%, 94% 93%, 50% 100%, 6% 93%, 0 10%, 0 10%); padding: 0px 20px 8px 20px !important; line-height: 51px; } @media (max-width: 1199.98px) { .banner__author { top: -30px; left: -10px; width: 155px; padding: 10px 10px 10px 10px; } } @media (max-width: 991.98px) { .banner__author { top: 0px; left: 10px; } } @media (max-width: 767.98px) { .banner__author { display: none; } } .banner__author-item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 8px; } .banner__author-item .image { flex: 0 0 auto; } .banner__author-item .image img { max-width: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .banner__author-item .name { flex-grow: 1; margin-bottom: 0; font-size: 14px; } .banner__author .arrow-shape { position: absolute; left: calc(100% - 11px); top: 9px; z-index: -1; } /*============================= 05. Slider ===============================*/ .slider__active [data-animation-in] { opacity: 0; } .slider__item { align-items: center; background-position: center; background-size: cover; padding: 135px 0 140px; min-height: 600px; position: relative; z-index: 1; } @media (max-width: 1500px) { .slider__item { padding: 110px 0 120px; min-height: 560px; } } .slider__item .top-shape, .slider__item .bottom-shape { position: absolute; pointer-events: none; z-index: -1; } .slider__item .top-shape { left: 4%; top: 11%; } @media (max-width: 1500px) { .slider__item .top-shape { max-width: 80px; } } .slider__item .bottom-shape { left: 0; bottom: 0; } @media (max-width: 1500px) { .slider__item .bottom-shape { max-width: 350px; } } .slider__content { overflow: hidden; } .slider__content .sub-title { display: inline-block; line-height: 1.3; background: var(--tg-common-color-gray); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; padding: 5px 15px; font-weight: var(--tg-fw-medium); color: var(--tg-theme-primary); margin: 0 0 13px; } @media (max-width: 1500px) { .slider__content .sub-title { padding: 0 0; background: transparent; font-weight: var(--tg-fw-semi-bold); } } .slider__content .title { font-size: 48px; margin: 0 0 30px; letter-spacing: -1px; text-transform: capitalize; } @media (max-width: 767.98px) { .slider__content .title { font-size: 38px; margin: 0 0 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__content .title { font-size: 40px; margin: 0 0 30px; } } .slider__content .title span:not(.svg-icon) { color: var(--tg-theme-primary); position: relative; display: inline-block; z-index: 1; } .slider__content .title .svg-icon { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); text-align: center; margin: 0 auto; bottom: -14px; height: 25px; width: 145px; pointer-events: none; z-index: -1; } @media (max-width: 767.98px) { .slider__content .title .svg-icon { bottom: -15px; } } .slider__content .title .svg-icon svg { display: block; width: 100%; height: 100%; } .slider__content .title .svg-icon path { stroke: var(--tg-common-color-yellow); } .slider__content .list-wrap { margin: 0 0 30px; } .slider__content .list-wrap li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; font-family: var(--tg-heading-font-family); color: #39557e; gap: 7px; margin: 0 0 3px; } .slider__content .list-wrap li:last-child { margin: 0 0; } .slider__content .list-wrap li i { color: var(--tg-common-color-yellow); margin: 6px 0 0; } /*============================= 06. Brand ===============================*/ .brand-area { background: var(--tg-common-color-black); padding: 20px 0; margin-left: -5px; margin-right: -5px; } .brand-area .container-fluid { padding: 0 0; } .brand-area-two { transform: rotate(-3.5deg); position: relative; z-index: 2; margin-top: -80px; } @media (max-width: 767.98px) { .brand-area-two { transform: rotate(0); } } .brand__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 0 35px; } .brand__item a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 42px; align-items: center; justify-content: center; } .brand__item a:hover img { opacity: 0.7; } .marquee_mode { overflow: hidden; position: relative; } .marquee_mode .js-marquee { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 0 35px; } /*============================= 07. About ===============================*/ .about__images { margin-left: 196px; margin-right: -25px; position: relative; } @media (max-width: 1199.98px) { .about__images { margin-left: 50px; margin-right: 0; } } @media (max-width: 991.98px) { .about__images { margin-left: 0; margin-bottom: 50px; } } .about__images .shape { position: absolute; top: 36px; right: 132px; z-index: 1; } @media (max-width: 1199.98px) { .about__images .shape { right: 95px; } } @media (max-width: 991.98px) { .about__images .shape { right: 135px; } } @media (max-width: 767.98px) { .about__images .shape { right: 80px; } } .about__images .popup-video { position: absolute; width: 76px; height: 76px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: var(--tg-common-color-white); color: var(--tg-common-color-red); z-index: 1; } .about__images .popup-video:hover { color: var(--tg-common-color-white); background: var(--tg-common-color-red); } .about__images-three { position: relative; } @media (max-width: 991.98px) { .about__images-three { margin-bottom: 50px; } } .about__images-three img { -webkit-border-radius: 400px; -moz-border-radius: 400px; -o-border-radius: 400px; -ms-border-radius: 400px; border-radius: 400px; } .about__images-three .svg-icon { width: 55px; height: 55px; position: absolute; right: 5%; top: 2%; } @media (max-width: 1199.98px) { .about__images-three .svg-icon { right: 0; top: 0; } } .about__images-three .svg-icon svg { width: 100%; height: 100%; color: var(--tg-theme-primary); } .about__images-three .popup-video { width: 60px; height: 60px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: var(--tg-common-color-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .about__images-three .popup-video svg { width: 16px; color: var(--tg-theme-primary); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .about__images-three .popup-video:hover { background: var(--tg-theme-primary); } .about__images-three .popup-video:hover svg { color: var(--tg-common-color-white); } .about__enrolled { position: absolute; left: -90px; bottom: 35px; background: var(--tg-common-color-white); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; border: 1px solid #b2bbcc; box-shadow: -8px 8px 0px 0px rgba(0, 0, 0, 0.15); text-align: center; padding: 12px 20px; } @media (max-width: 1199.98px) { .about__enrolled { left: -50px; bottom: 30px; } } @media (max-width: 991.98px) { .about__enrolled { display: none; } } .about__enrolled .title { font-size: 16px; font-weight: var(--tg-fw-medium); color: var(--tg-theme-primary); margin: 0 0 2px; } .about__enrolled .title span { font-weight: var(--tg-fw-bold); color: var(--tg-heading-color); } .about__enrolled img { max-width: 155px; } .about__content { margin-left: 65px; margin-right: 110px; } @media (max-width: 1199.98px) { .about__content { margin: 0 0; } } .about__content .section__title { margin: 0 0 12px; } .about__content .desc { margin: 0 0 22px; } .about__content .tg-button-wrap { margin-top: 40px; } .about__content-three { margin-left: 40px; width: 90%; } @media (max-width: 1199.98px) { .about__content-three { margin-left: 0; width: 100%; } } .about__content-three .desc { margin-bottom: 22px; } .about__content-three .about__info-list { margin-bottom: 30px; } .about__info-list-item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-start; gap: 13px; margin: 0 0 15px; } .about__info-list-item:last-child { margin: 0 0; } .about__info-list-item i { width: 30px; height: 30px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex: 0 0 30px; background: var(--tg-theme-secondary); border: 1px solid #282568; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.25); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; color: var(--tg-heading-color); } .about__info-list-item p { font-family: var(--tg-heading-font-family); color: var(--tg-heading-color); font-size: 18px; font-weight: var(--tg-fw-semi-bold); margin: 0 0; } .about__info-list-item:hover i { box-shadow: none; } .mfp-iframe-holder .mfp-content { max-width: 1200px; } /*============================= 08. Courses ===============================*/ .section-pt-120 { padding-top: 120px; } @media (max-width: 767.98px) { .section-pt-120 { padding-top: 100px; } } .section-pb-90 { padding-bottom: 90px; } @media (max-width: 767.98px) { .section-pb-90 { padding-bottom: 70px; } } .section-pb-120 { padding-bottom: 120px; } @media (max-width: 767.98px) { .section-pb-120 { padding-bottom: 100px; } } .courses-area { position: relative; background-position: center; background-size: cover; z-index: 1; } @media (max-width: 767.98px) { .courses-area { padding: 100px 0; } } .courses-area .section__title-wrap { margin: 0 0 50px; } @media (max-width: 767.98px) { .courses-area .section__title-wrap { margin: 0 0 40px; } } @media (max-width: 1199.98px) { .courses-area .section__title-wrap { margin: 0 0 30px; } } .courses__nav .nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0; padding: 0 0 18px; border: none; gap: 5px 35px; position: relative; z-index: 1; } .courses__nav .nav::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #d9d9f3; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; z-index: -1; } @media (max-width: 767.98px) { .courses__nav .nav { gap: 15px 20px; padding: 0 0 7px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .courses__nav .nav { padding: 0 0 15px; } } .courses__nav .nav .nav-item .nav-link { font-weight: var(--tg-fw-medium); color: #7f7e97; padding: 0 0; border: none; position: relative; background: transparent; } .courses__nav .nav .nav-item .nav-link::after { content: ""; position: absolute; left: 0; bottom: -18px; right: 0; width: 0; height: 6px; background: var(--tg-theme-primary); -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; margin: 0 auto; z-index: 1; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767.98px) { .courses__nav .nav .nav-item .nav-link::after { bottom: -7px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .courses__nav .nav .nav-item .nav-link::after { bottom: -15px; } } .courses__nav .nav .nav-item .nav-link.active { color: var(--tg-heading-color); } .courses__nav .nav .nav-item .nav-link.active::after { width: 60px; } .courses__item { margin: 0 0 30px; background: var(--tg-common-color-white); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; padding: 25px 25px 32px; border: 1px solid #b5b5c3; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } @media (max-width: 1199.98px) { .courses__item { padding: 25px 20px 32px; } } .courses__item:hover { filter: drop-shadow(10px 10px 0px #cac9d6); } .courses__item-two { padding: 0; } .courses__item-three { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 30px; padding: 25px 30px 25px 25px; } @media (max-width: 1199.98px) { .courses__item-three { gap: 20px; padding: 20px 20px 20px 20px; } } @media (max-width: 767.98px) { .courses__item-three { flex-direction: column; } } .courses__item-three .courses__item-thumb { margin: 0; flex: 0 0 auto; } .courses__item-three .courses__item-thumb a { height: 100%; } .courses__item-three .courses__item-thumb img { width: 280px; object-fit: cover; height: 100%; min-height: 210px; } @media (max-width: 767.98px) { .courses__item-three .courses__item-thumb img { width: 100%; } } .courses__item-three .courses__item-content { flex-grow: 1; } .courses__item-three .courses__item-content .info { margin-bottom: 0; margin-top: 8px; } .courses__item-three .courses__item-tag { gap: 15px; } .courses__item-three .courses__item-meta { margin: 0 0 8px; } .courses__item-three .courses__item-meta .price { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; font-size: 20px; font-weight: 700; color: var(--tg-theme-primary); gap: 8px; } .courses__item-three .courses__item-meta .price del { font-size: 14px; font-weight: 500; color: #b2bbcc; } .courses__item-thumb { position: relative; margin: 0 0 20px; } .courses__item-thumb-two { padding: 25px 25px 0 25px; } @media (max-width: 1500px) { .courses__item-thumb-two { padding: 20px 20px 0 20px; } } .courses__item-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; } @media (max-width: 767.98px) { .courses__item-thumb img { height: auto; } } .courses__item-content .title { font-size: 18px; font-weight: var(--tg-fw-semi-bold); line-height: 1.4; margin: 10px 0 15px 0px; } .courses-widget .form-check-input[type="checkbox"] { width: 16px; height: 16px; } .courses__item-content .title a { display: inline; background-image: linear-gradient(var(--tg-heading-color), var(--tg-heading-color)), linear-gradient(var(--tg-heading-color), var(--tg-heading-color)); background-size: 0% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.4s linear; -webkit-transition: background-size 0.4s linear; -moz-transition: background-size 0.4s linear; -ms-transition: background-size 0.4s linear; -o-transition: background-size 0.4s linear; } .courses__item-content .title a:hover { color: inherit; background-size: 0 2px, 100% 2px; } .courses__item-content-two { padding: 0 25px 20px 0px; position: relative; } @media (max-width: 1500px) { .courses__item-content-two { padding: 0 20px 20px; } } .courses__item-content-two .price { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 8px; font-size: 18px; font-weight: 600; color: var(--tg-theme-primary); } .courses__item-content-two .price del { font-size: 14px; font-weight: 400; color: var(--tg-common-color-gray-3); } .courses__item-content-bottom { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .courses__item-content-bottom>.author-two a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--tg-body-color); } .courses__item-content-bottom>.author-two a img { border-radius: 50%; width: 32px; height: 32px; object-fit: cover; } .accordion-button:not(.collapsed) { background-color: transparent; box-shadow: none; } .courses__item-content-bottom>.author-two a:hover { color: var(--tg-theme-secondary); } .courses__item-meta { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 15px; flex-wrap: wrap; } .courses__item-meta li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .courses__item-meta li i { margin-right: 7px; } .courses__item-tag a { font-size: 13px; font-weight: var(--tg-fw-medium); color: var(--tg-heading-color); background: #efeff2; display: block; line-height: 1; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; -ms-border-radius: 50px; border-radius: 50px; padding: 7px 13px; } .courses__item-tag a:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .courses__item .avg-rating { color: #7f7e97; font-size: 14px; line-height: 1; } .courses__item .avg-rating i { color: var(--tg-common-color-yellow); letter-spacing: 0; margin-right: 5px; } .courses__item .author { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 15px; margin: 0 0; line-height: 1; gap: 5px; } .courses__item .author a { flex: 0 0 auto; color: var(--tg-heading-color); } .courses__item .author a:hover { color: var(--tg-theme-primary); } .courses__item-bottom { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; margin: 23px 0 0; } .courses__item-bottom .button a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding: 10px 19px; align-items: center; gap: 6px; border-radius: 50px; border: 1px solid #000; background: var(--tg-theme-secondary); box-shadow: 4px 4px 0px 0px #3d3d3d; font-family: var(--tg-heading-font-family); font-size: 14px; line-height: 18px; font-weight: var(--tg-fw-semi-bold); color: var(--tg-heading-color); } .courses__item-bottom .button a:hover { box-shadow: none; } .courses__item-bottom .price { font-size: 20px; line-height: 1; color: var(--tg-theme-primary); font-weight: var(--tg-fw-bold); margin: 0 0; } @media (max-width: 991.98px) { .courses__item-bottom .price { font-size: 18px; } } .courses__item-bottom .price del { font-size: 16px; color: #8d9db5; margin-right: 4px; } .courses__item-bottom-two { border-top: 1px solid #b5b5c3; padding: 13px 25px 0px 0px; } @media (max-width: 1500px) { .courses__item-bottom-two { padding: 13px 20px; } } .courses__item-bottom-two .list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 30px; } @media (max-width: 1199.98px) { .courses__item-bottom-two .list-wrap { gap: 10px 20px; } } .courses__item-bottom-two .list-wrap li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; position: relative; font-size: 16px; color: var(--tg-common-color-dark); gap: 7px; } .courses__item-bottom-two .list-wrap li i { color: var(--tg-common-color-gray-3); font-size: 20px; line-height: 0; } .courses__item-bottom-two .list-wrap li::before { content: ""; position: absolute; right: -17px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #8c9ab4; } @media (max-width: 1199.98px) { .courses__item-bottom-two .list-wrap li::before { right: -12px; } } .courses__item-bottom-two .list-wrap li:last-child::before { display: none; } @media (max-width: 767.98px) { .courses__nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; gap: 15px; } } .courses__nav .courses-button-prev { width: 60px; height: 60px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: var(--tg-theme-primary); color: var(--tg-common-color-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; line-height: 0; font-size: 24px; border: 1.2px solid var(--tg-common-color-black-3); box-shadow: -3.6px 2.4px 0px 0px #23232b; position: absolute; left: -90px; top: 50%; z-index: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 1500px) { .courses__nav .courses-button-prev { left: -15px; } } @media (min-width: 1400px) and (max-width: 1600px) { .courses__nav .courses-button-prev { left: -50px; width: 45px !important; height: 45px !important; font-size: 20px !important; } .courses__nav .courses-button-next { right: -50px !important; width: 45px !important; height: 45px !important; font-size: 20px !important; } .google_drive_modal .modal-dialog { max-width: 1000px !important; } } @media (min-width: 1200px) and (max-width: 1399.99px) { .courses__nav .courses-button-prev { left: -11px; width: 35px !important; height: 35px !important; font-size: 16px; } .courses__nav .courses-button-next { right: -11px !important; width: 35px !important; height: 35px !important; font-size: 16px !important; } } @media (min-width: 768px) and (max-width: 1199.99px) { .courses__nav .courses-button-prev { left: -25px; width: 35px !important; height: 35px !important; font-size: 15px !important; } .courses__nav .courses-button-next { right: -25px !important; width: 35px !important; height: 35px !important; font-size: 15px !important; } } @media (max-width: 767.98px) { .courses__nav .courses-button-prev { position: relative; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); left: 0; } } .courses__nav .courses-button-prev i { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } .courses__nav .courses-button-prev:hover { box-shadow: none; } .courses__nav .courses-button-next { width: 60px; height: 60px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: var(--tg-theme-primary); color: var(--tg-common-color-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; line-height: 0; font-size: 24px; border: 1.2px solid var(--tg-common-color-black-3); box-shadow: 3.6px 2.4px 0px 0px #23232b; position: absolute; right: -90px; top: 50%; z-index: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 1500px) { .courses__nav .courses-button-next { right: -15px; } } @media (max-width: 767.98px) { .courses__nav .courses-button-next { position: relative; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); right: 0; } } .courses__nav .courses-button-next:hover { box-shadow: none; } .courses-top-wrap { margin-bottom: 30px; } .courses-top-left p { margin-bottom: 0; font-size: 16px; font-family: var(--tg-heading-font-family); color: var(--tg-common-color-dark); text-transform: capitalize; } @media (max-width: 767.98px) { .courses-top-left p { margin-bottom: 15px; text-align: center; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .courses-top-left p { text-align: center; margin-bottom: 15px; } } .courses-top-right { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .courses-top-right .sort-by { font-size: 16px; font-family: var(--tg-heading-font-family); display: block; color: var(--tg-common-color-gray-3); } .courses-top-right-select { width: 185px; position: relative; } .courses-top-right-select select { background-color: transparent; border: 1px solid #dcdbe5; color: var(--tg-common-color-dark); font-weight: 500; font-size: 15px; text-transform: capitalize; border-radius: 4px; outline: none; padding: 10px 32px 10px 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; line-height: 1.2; height: 40px; } .courses-top-right-select::after { content: "\f078"; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-family: "Font Awesome 5 Free"; font-weight: 700; right: 12px; font-size: 12px; color: var(--tg-theme-primary); } .courses__sidebar { margin-right: 20px; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .courses__sidebar_button { position: relative; padding: 20px; background: var(--tg-common-color-gray-2); border-radius: 10px; margin-bottom: 25px; cursor: pointer; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .courses__sidebar_button h4 { margin: 0; font-size: 18px; font-weight: 600; text-transform: capitalize; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .courses__sidebar_button::after { position: absolute; content: ""; width: 16px; height: 2px; background: var(--tg-common-color-black); top: 50%; right: 11px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .courses__sidebar_button::before { position: absolute; content: ""; width: 2px; height: 15px; background: var(--tg-common-color-black); top: 26px; right: 26px; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .courses__sidebar_area.show .courses__sidebar_button::before { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } .courses__sidebar_area.show .courses__sidebar_button { background: var(--tg-theme-primary); } .courses__sidebar_area.show .courses__sidebar_button h4 { color: var(--tg-common-color-white); } .courses__sidebar_area.show .courses__sidebar_button::after, .courses__sidebar_area.show .courses__sidebar_button::before { background: var(--tg-common-color-white); } @media (max-width: 1199.98px) { .courses__sidebar { margin: 0 0 0 0; } } @media (max-width: 991.98px) { .courses__sidebar { margin: 80px 0 0; } } .courses-widget { background: var(--tg-common-color-gray); padding: 30px 30px; margin-bottom: 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } .courses-widget:last-child { margin-bottom: 0; } .courses-widget ul li { margin-bottom: 15px; } .courses-widget ul li:last-child { margin-bottom: 0; } .courses-widget .form-check { display: flex; align-items: center; line-height: 1; margin-bottom: 0; padding: 0; min-height: inherit; } .courses-widget .form-check-input { border-radius: 4px; border: 1px solid #9d9cae; margin: 0 10px 0 0; width: 16px; height: 16px; } .courses-widget .form-check-input:checked { background-color: var(--tg-theme-primary); } .courses-widget .form-check-input:focus { box-shadow: none; border-color: var(--tg-theme-primary); } .courses-widget .form-check-label { flex-grow: 1; font-size: 16px; font-weight: 400; color: var(--tg-body-color); user-select: none; } .courses-widget .form-check .rating { display: flex; align-items: center; } .courses-widget .form-check .rating ul { display: flex; align-items: center; line-height: 1; color: #f8bc24; gap: 4px; } .courses-widget .form-check .rating ul li { margin-bottom: 0; } .courses-widget .form-check .rating ul li.delete { color: #d7d7d7; } .courses-widget .form-check .rating span { color: #5a7093; margin-left: 5px; } .courses-widget .show-more { font-family: var(--tg-heading-font-family); font-size: 15px; font-weight: 500; line-height: 1; margin-top: 20px; } .courses-slider-active .slick-arrow { position: absolute; left: -10px; top: 50%; -webkit-transform: translateY(-50%) translateX(-30px); -moz-transform: translateY(-50%) translateX(-30px); -ms-transform: translateY(-50%) translateX(-30px); -o-transform: translateY(-50%) translateX(-30px); transform: translateY(-50%) translateX(-30px); width: 50px; height: 50px; background: var(--tg-common-color-gray); border: 1px solid #ffffff; box-shadow: 0px 10px 20px #dfdfdf; border-radius: 50%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; padding: 0 0; z-index: 2; } .courses-slider-active .slick-arrow:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .courses-slider-active .slick-arrow.slick-next { left: auto !important; right: -10px; -webkit-transform: translateY(-50%) translateX(30px); -moz-transform: translateY(-50%) translateX(30px); -ms-transform: translateY(-50%) translateX(30px); -o-transform: translateY(-50%) translateX(30px); transform: translateY(-50%) translateX(30px); } .courses-slider-active:hover .slick-arrow { -webkit-transform: translateY(-50%) translateX(0); -moz-transform: translateY(-50%) translateX(0); -ms-transform: translateY(-50%) translateX(0); -o-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); opacity: 1; visibility: visible; } .courses-slider-active .col { padding-left: 15px; padding-right: 15px; } .courses-slider-active .courses__item-two { border: 1px solid #e8e8e8; border-radius: 6px; box-shadow: none; padding: 15px; } .courses-slider-active .courses__item-two-thumb .author { position: absolute; right: 15px; bottom: -25px; z-index: 2; } .courses-slider-active .courses__item-two-thumb .author img { max-width: 50px; max-height: 50px; width: auto; height: auto; border: 3px solid #ffffff; border-radius: 50px; } .courses-slider-active .courses__item-two-content { padding: 16px 7px 5px 7px; } .courses-slider-active .courses__item-bottom .price { font-size: 20px; margin: 0 20px 0 0; } .courses-slider-active .courses__item-bottom .price del { font-size: 15px; margin-right: 6px; } .courses__nav-tabs { gap: 10px; border: none; margin-left: 10px; } .courses__nav-tabs .nav-item { margin: 0 0; } .courses__nav-tabs .nav-item .nav-link { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #6196ea; border-radius: 4px; color: var(--tg-theme-primary); } .courses__nav-tabs .nav-item .nav-link svg { flex: 0 0 auto; } .courses__nav-tabs .nav-item .nav-link.active { border-color: var(--tg-theme-primary); background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .courses__list-wrap .courses__item-two { border: 1px solid #e8e8e8; border-radius: 6px; box-shadow: none; padding: 15px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 25px; } @media (max-width: 767.98px) { .courses__list-wrap .courses__item-two { gap: 20px; flex-direction: column; } } .courses__list-wrap .courses__item-two-thumb { flex: 0 0 auto; } .courses__list-wrap .courses__item-two-thumb a { height: 100%; } .courses__list-wrap .courses__item-two-thumb img { width: 270px; height: 100%; object-fit: cover; } @media (max-width: 1199.98px) { .courses__list-wrap .courses__item-two-thumb img { width: 235px; } } @media (max-width: 991.98px) { .courses__list-wrap .courses__item-two-thumb img { width: 270px; } } @media (max-width: 767.98px) { .courses__list-wrap .courses__item-two-thumb img { width: 100%; } } .courses__list-wrap .courses__item-two-content { padding: 0 15px 0 0; } @media (max-width: 767.98px) { .courses__list-wrap .courses__item-two-content { padding: 0 7px 5px 7px; } } .courses__list-wrap .courses__item-two-content .title { font-size: 20px; margin: 0 0 10px; } .courses__list-wrap .courses__item-two-content p { line-height: 1.65; } .courses__list-wrap .courses__item-two-content .courses__item-rating { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 6px; } .courses__list-wrap .courses__item-two-content .courses__item-rating i { font-size: 15px; margin: 0 0; } .courses__list-wrap .courses__item-two-content .courses__item-rating .rating-count { margin: 0 0; } .courses__list-wrap .courses__item-two-content .courses__item-tag { margin: 0 0 8px; font-size: 14px; } .courses__list-wrap .courses__item-two-content .courses__item-meta { margin: 0 0 14px; } .courses__list-wrap .courses__item-bottom { padding: 12px 0 0; margin: 0 0 0; } .courses__list-wrap .courses__item-bottom .author img { max-width: 35px; } .courses__details-thumb { margin-bottom: 30px; position: relative; } .courses__details-thumb a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); width: 100px; height: 100px; background: var(--tg-theme-secondary); color: var(--tg-common-color-black-3); text-align: center; line-height: 100px; border-radius: 50%; font-size: 22px; } .courses__details-thumb a::after { position: absolute; content: ""; width: 100%; height: 100%; background: var(--tg-theme-secondary); top: 0; left: 0; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; z-index: -1; animation: play_animi linear 1.7s infinite; -webkit-animation: play_animi linear 1.7s infinite; } @keyframes play_animi { from { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 1; } to { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); opacity: 0; } } .courses__details-thumb img { -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; min-height: 250px; max-height: 640px; object-fit: cover; } .courses__details-content .courses__item-meta { justify-content: flex-start; gap: 15px; margin-bottom: 10px !important; } .courses__details-content .courses__item-meta .avg-rating { color: #7f7e97; font-size: 14px; line-height: 1; } .courses__details-content .courses__item-meta .avg-rating i { color: var(--tg-common-color-yellow); } .courses__details-content .title { margin-bottom: 15px; font-size: 30px; } @media (max-width: 767.98px) { .courses__details-content .title { font-size: 26px; } } .courses__details-content .nav-tabs { border: none; gap: 12px; margin-bottom: 40px; } .courses__details-content .nav-tabs .nav-link { background: #e6e9ef; font-size: 16px; font-weight: 600; text-transform: capitalize; font-family: var(--tg-heading-font-family); border: none; color: var(--tg-body-color); -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; padding: 14px 30px; line-height: 1; display: block; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .courses__details-content .nav-tabs .nav-link:hover, .courses__details-content .nav-tabs .nav-link.active { color: var(--tg-common-color-white); background: var(--tg-theme-primary); -webkit-box-shadow: 4px 6px 0px 0px #050071; -moz-box-shadow: 4px 6px 0px 0px #050071; -ms-box-shadow: 4px 6px 0px 0px #050071; -o-box-shadow: 4px 6px 0px 0px #050071; box-shadow: 4px 6px 0px 0px #050071; } .courses__details-meta .list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px 30px; flex-wrap: wrap; margin-bottom: 45px; } .courses__details-meta .list-wrap li { color: #7f7e97; position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 8px; } .courses__details-meta .list-wrap li::before { content: ""; position: absolute; right: -17px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; background: #8c9ab4; } .courses__details-meta .list-wrap li:last-child::before { display: none; } .courses__details-meta .list-wrap li i { font-size: 20px; } .courses__details-meta .list-wrap .author-two { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 5px; } .courses__details-meta .list-wrap .author-two img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin-right: 5px; } .courses__details-meta .list-wrap .author-two a { color: var(--tg-heading-color); } .courses__details-sidebar { background: var(--tg-common-color-white); border: 1px solid #dfdfdf; -webkit-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); margin-left: 20px; padding: 30px 30px 40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } @media (max-width: 1500px) { .courses__details-sidebar { margin-left: 0; padding: 30px 20px 40px; } } @media (max-width: 991.98px) { .courses__details-sidebar { padding: 30px 30px 40px; margin: 80px 0 0; } } .courses__details-video { position: relative; margin-bottom: 20px; } .courses__details-video img { width: 100%; min-height: 200px; object-fit: cover; border-radius: 8px; } .courses__details-video .popup-video { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: var(--tg-common-color-white); z-index: 3; } .courses__details-video .popup-video:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .courses__details-social { border-bottom: 1px solid #dfdfdf; margin-bottom: 30px; padding-bottom: 30px; } .courses__details-social .title { margin-bottom: 12px; font-weight: 500; font-size: 16px; } .courses__details-social .list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px; } .courses__details-social .list-wrap li a { width: 42px; height: 42px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: #e6e9ef; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; color: var(--tg-body-color); } .courses__details-social .list-wrap li a:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .courses__details-enroll .tg-button-wrap { justify-content: center; } .courses__overview-wrap { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; border: 1px solid #dfdfdf; background: var(--tg-common-color-white); -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); padding: 35px 40px 25px 40px; } @media (max-width: 1199.98px) { .courses__overview-wrap { padding: 30px 30px 30px; } } .courses__overview-wrap .title { margin-bottom: 12px; font-size: 24px; } .courses__overview-wrap>p { margin-bottom: 20px; } .courses__overview-wrap>p.last-info { margin-bottom: 0; } .courses__overview-wrap .about__info-list { margin-bottom: 15px; } .courses__curriculum-wrap { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; border: 1px solid #dfdfdf; background: var(--tg-common-color-white); -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); padding: 35px 40px 35px; } @media (max-width: 1199.98px) { .courses__curriculum-wrap { padding: 30px 30px 30px; } } .courses__curriculum-wrap .title { margin-bottom: 12px; font-size: 24px; } .courses__curriculum-wrap>p { margin-bottom: 20px; } .courses__curriculum-wrap .accordion-item { margin: 0; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; border-radius: 0; overflow: hidden; } .courses__curriculum-wrap .accordion-item:last-child { margin: 0 0; } .courses__curriculum-wrap .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .courses__curriculum-wrap .accordion-button { border: none; box-shadow: none; font-size: 20px; color: var(--tg-heading-color); padding: 16px 0 16px 0; font-weight: 500; border-bottom: 1px solid #dcdceb; } .courses__curriculum-wrap .accordion-button::after { content: "\f067"; font-family: var(--tg-icon-font-family); font-weight: 700; background-image: none; width: auto; height: auto; } .courses__curriculum-wrap .accordion-button:not(.collapsed) { background: transparent; color: var(--tg-theme-primary); } .courses__curriculum-wrap .accordion-button:not(.collapsed)::after { content: "\f068"; } .courses__curriculum-wrap .accordion-body { padding: 0 0; } .courses__curriculum-wrap .course-item { padding: 13px 15px !important; background: #f8f8ff; margin-bottom: 2px; } .courses__details-meta { padding-bottom: 15px; } @media (max-width: 767.98px) { .courses__curriculum-wrap .course-item { padding: 17px 20px; } } .courses__curriculum-wrap .course-item:last-child { margin-bottom: 0; } .courses__curriculum-wrap .course-item .course-item-link { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; color: var(--tg-common-color-dark); cursor: no-drop; } .courses__curriculum-wrap .course-item .course-item-link:hover { color: var(--tg-theme-primary); } .courses__curriculum-wrap .course-item .item-name { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px; margin-right: 20px; } @media (max-width: 767.98px) { .courses__curriculum-wrap .course-item .item-name { line-height: 1.4; } } .courses__curriculum-wrap .course-item .item-name::before { content: ""; display: block; background-image: url(../img/icons/play.svg); width: 30px; height: 30px; flex: 0 0 auto; } .courses__curriculum-wrap .course-item-meta { margin-left: auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; line-height: 1; gap: 20px; flex: 0 0 auto; } .courses__curriculum-wrap .course-item-meta .duration { margin: 2px 0 0; } .courses__curriculum-wrap .course-item.open-item .course-item-link { cursor: pointer; } .courses__instructors-wrap { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; border: 1px solid #dfdfdf; background: var(--tg-common-color-white); -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); padding: 35px 40px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 30px; align-items: center; } @media (max-width: 1199.98px) { .courses__instructors-wrap { padding: 30px 30px 30px; } } @media (max-width: 767.98px) { .courses__instructors-wrap { flex-direction: column; } } .courses__instructors-thumb { flex: 0 0 auto; } .courses__instructors-thumb img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; width: 225px; height: 225px; object-fit: cover; } .courses__instructors-content .title { margin-bottom: 5px; font-size: 20px; } .courses__instructors-content>p { margin-bottom: 15px; } .courses__instructors-content .designation { display: block; color: var(--tg-theme-primary); line-height: 1; margin-bottom: 6px; } .courses__instructors-content .avg-rating { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; color: var(--tg-common-color-gray-3); font-size: 15px; gap: 8px; margin-bottom: 8px; } .courses__instructors-content .avg-rating i { color: var(--tg-common-color-yellow); } .courses__rating-wrap { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; border: 1px solid #dfdfdf; background: var(--tg-common-color-white); -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); padding: 35px 40px 70px 40px; } @media (max-width: 1199.98px) { .courses__rating-wrap { padding: 30px 30px 50px 30px; } } .courses__rating-wrap .title { margin-bottom: 30px; font-size: 24px; } .courses__cost-wrap { -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; background: var(--tg-theme-primary); -webkit-box-shadow: 0px 3px 15px 0px rgba(13, 9, 99, 0.26); -moz-box-shadow: 0px 3px 15px 0px rgba(13, 9, 99, 0.26); -ms-box-shadow: 0px 3px 15px 0px rgba(13, 9, 99, 0.26); -o-box-shadow: 0px 3px 15px 0px rgba(13, 9, 99, 0.26); box-shadow: 0px 3px 15px 0px rgba(13, 9, 99, 0.26); padding: 20px 20px 20px; margin-bottom: 20px; } .courses__cost-wrap span { display: block; font-weight: 500; color: var(--tg-common-color-white); line-height: 1; margin-bottom: 10px; } .courses__cost-wrap .title { margin-bottom: 0; font-size: 30px; color: var(--tg-common-color-white); line-height: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 5px; } .courses__cost-wrap .title del { font-size: 20px; font-weight: 500; color: #9490fa; } .courses__information-wrap .title { font-size: 16px; margin-bottom: 15px; } .courses__information-wrap .list-wrap li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; color: var(--tg-common-color-dark); gap: 15px; border-bottom: 1px solid #d9d9d9; margin-bottom: 15px; padding-bottom: 15px !important; line-height: 1; } .courses__information-wrap .list-wrap li { flex-wrap: wrap; gap: 10px 15px; } .courses__information-wrap .list-wrap li.d-block svg { margin-right: 11px; } .courses__information-wrap .list-wrap li .course-level-list { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 0px; } .courses__information-wrap .list-wrap li .course-level-list .level { display: inline-block !important; width: auto; margin: 0; background: #5751e11c; padding: 4px 10px 5px 10px; color: var(--tg-theme-primary); border-radius: 3px; } .course-language-list span { background: #5751e11c; padding: 4px 10px 5px 10px; color: var(--tg-theme-primary) !important; border-radius: 3px; } .course-language-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: start; padding-left: 36px; } .course-language-list span { margin-top: 7px; margin-left: 0 !important; } .courses__information-wrap .list-wrap li span { display: block; margin-left: auto; color: var(--tg-common-color-gray-3); } .courses__information-wrap .list-wrap li svg { color: var(--tg-common-color-gray-3); } .courses__payment { border-bottom: 1px solid #d9d9d9; margin-bottom: 25px; padding-bottom: 30px; } .courses__payment .title { margin-bottom: 12px; font-weight: 500; font-size: 16px; } .widget-title { font-size: 20px; margin-bottom: 20px; } .tab-content { position: relative; } .course-rate { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 36px; } .all-courses-area .pagination-wrap { margin-top: 30px; } .courses__overview-wrap h1, .courses__overview-wrap h2, .courses__overview-wrap h3 { font-size: 24px; } .courses__overview-wrap h4, .courses__overview-wrap h5, .courses__overview-wrap h6 { font-size: 20px; } .courses__overview-wrap ul li, .courses__overview-wrap ol li { position: relative; margin-top: 10px; } li.level-wrapper b { font-weight: 400; display: inline-flex; align-items: center; gap: 15px; } .nice-select .option.focus, .nice-select .option.selected.focus { color: var(--tg-theme-primary); } .nice-select .option:hover { background-color: var(--tg-theme-primary) !important; color: #fff !important; } .nice-select .option { color: #000; } .level-wrapper { display: flex; justify-content: space-between; } @media (max-width: 767.98px) { .course-rate { flex-direction: column; } } .course-rate__summary { background: var(--tg-common-color-white); border: 1px solid #e6eaef; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.09); border-radius: 8px; width: 180px; text-align: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; padding: 33px 20px; gap: 3px; } .course-rate__summary-value { color: #082a5e; font-weight: 600; font-size: 64px; line-height: 0.8; } .course-rate__summary-stars { font-size: 15px; color: #f8bc24; } .course-rate__summary-text { color: #5a7093; } .course-rate__details { flex-grow: 1; } @media (max-width: 767.98px) { .course-rate__details { width: 100%; } } .course-rate__details-row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; line-height: 1; gap: 10px; margin: 0 0 17px; } .course-rate__details-row:last-child { margin: 0 0; } .course-rate__details-row-star { font-size: 20px; } .course-rate__details-row-star i { font-size: 17px; color: #f8bc24; margin-left: 3px; } .course-rate__details-row-value { position: relative; margin-right: 20px; flex-grow: 1; } .course-rate__details-row-value .rating-gray { background: #e0e3eb; border-radius: 50px; height: 7px; } .course-rate__details-row-value .rating { position: absolute; left: 0; top: 0; height: 7px; background: #f8bc24; border-radius: 50px; } .course-rate__details-row-value .rating-count { position: absolute; top: 50%; transform: translateY(-50%); right: -20px; font-size: 20px; } .course-review-head { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; border-top: 1px solid #dfdfdf; padding-top: 55px; margin-top: 60px; gap: 20px; } @media (max-width: 767.98px) { .course-review-head { flex-wrap: wrap; } } .course-review-head .review-author-thumb { width: 80px; flex: 0 0 auto; } .course-review-head .review-author-thumb img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .course-review-head .review-author-content .author-name { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; margin-bottom: 12px; } .course-review-head .review-author-content .author-name .name { margin-bottom: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px 20px; font-size: 18px; font-weight: 500; color: var(--tg-body-color); } .course-review-head .review-author-content .author-name .name span { font-size: 14px; font-weight: 400; color: var(--tg-common-color-gray-3); } .course-review-head .review-author-content .author-name .author-rating { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 3px; color: var(--tg-common-color-yellow); } .course-review-head .review-author-content .title { margin-bottom: 12px; font-size: 18px; } .course-review-head .review-author-content p { margin-bottom: 0; } .shine__animate-link { display: block; overflow: hidden; position: relative; z-index: 1; height: 170px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; } .shine__animate-link.blog { height: 224px; } .shine__animate-link::before { position: absolute; top: 0; left: -100%; display: block; content: ""; width: 50%; height: 100%; background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); } .shine__animate-item:hover .shine__animate-link::before { -webkit-animation: hoverShine 1.2s; animation: hoverShine 1.2s; } /*============================= 09. Categories ===============================*/ .section-py-120 { padding: 120px 0; } @media (max-width: 767.98px) { .section-py-120 { padding: 100px 0; } } .categories__wrap { background: var(--tg-common-color-gray); -webkit-border-radius: 500px; -moz-border-radius: 500px; -o-border-radius: 500px; -ms-border-radius: 500px; border-radius: 500px; padding: 52px 145px 45px; position: relative; } @media (max-width: 1199.98px) { .categories__wrap { padding: 52px 100px 45px; } } @media (max-width: 991.98px) { .categories__wrap { padding: 45px 90px 45px; } } @media (max-width: 767.98px) { .categories__wrap { padding: 30px 20px 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; } } .categories__item { text-align: center; } .categories__item .icon { width: 150px; height: 150px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; border: 1px solid var(--tg-border-1); border-radius: 150px; background: linear-gradient(180deg, var(--tg-common-color-white) 0%, #f1f1fa 100%); font-size: 55px; color: #7f7e97; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; margin: 0 0 12px; } @media (max-width: 767.98px) { .categories__item .icon { width: 130px; height: 130px; font-size: 45px; margin: 0 auto 12px; } } .categories__item .icon::before { content: ""; position: absolute; top: 26px; right: 26px; background-image: url(../img/icons/cat_star.svg); background-repeat: no-repeat; background-size: contain; width: 30px; height: 26px; pointer-events: none; } .categories__item .name { display: block; font-family: var(--tg-heading-font-family); font-size: 18px; font-weight: var(--tg-fw-medium); line-height: 1.5; color: var(--tg-heading-color); margin: 0 0 7px; } .categories__item .courses { display: block; line-height: 1.3; font-family: var(--tg-heading-font-family); color: var(--tg-body-color); } .categories__item:hover .icon { background: var(--tg-theme-primary); box-shadow: 6px 5px 0px 0px rgba(0, 0, 0, 0.25); color: var(--tg-common-color-white); } @media (max-width: 767.98px) { .categories__nav { display: none; } } .categories__nav button { position: absolute; left: 50px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 50px; height: 50px; background: var(--tg-theme-secondary); padding: 0 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; border: 1px solid #333; box-shadow: -3px 2px 0px 0px #382900; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 1199.98px) { .categories__nav button { left: 30px; } } @media (max-width: 1199.98px) { .categories__nav button { left: 20px; } } .categories__nav button.categories-button-next { left: auto; right: 50px; box-shadow: 2px 4px 0px 0px #382900; } @media (max-width: 1199.98px) { .categories__nav button.categories-button-next { right: 30px; } } @media (max-width: 1199.98px) { .categories__nav button.categories-button-next { right: 20px; } } .categories__nav button:hover { box-shadow: none; } /*============================= 11. Testimonial ===============================*/ .section-pb-57 { padding-bottom: 57px; } .testimonial__item { background: #f6f5fe; padding: 40px 45px 40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; position: relative; z-index: 1; } @media (max-width: 1199.98px) { .testimonial__item { padding: 30px 20px 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial__item { padding: 30px 30px 30px; } } .testimonial__item-top { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .testimonial__item-wrap { position: relative; } .testimonial__item::before { content: "\f10e"; font-size: 48px; line-height: 1; color: #d9d6f5; font-family: var(--tg-icon-font-family); position: absolute; right: 43px; top: 45px; font-weight: 700; z-index: -1; } @media (max-width: 1199.98px) { .testimonial__item::before { top: 30px; right: 20px; font-size: 45px; } } .testimonial__author { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 20px; align-items: center; } @media (max-width: 767.98px) { .testimonial__author { gap: 15px; } } .testimonial__author-thumb img { border: 3px solid #fff; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .testimonial__author-content .rating { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 3px; font-size: 15px; color: var(--tg-common-color-yellow); margin-bottom: 10px; } .testimonial__author-content .title { font-size: 20px; margin-bottom: 0; } .testimonial__icon { font-size: 48px; line-height: 0; color: #d9d6f5; } .testimonial__content p { margin-bottom: 0; } @media (max-width: 767.98px) { .testimonial__nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 30px; } } .testimonial__nav button { padding: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; border: 2px solid var(--tg-common-color-dark); width: 50px; height: 50px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: var(--tg-theme-primary); color: var(--tg-common-color-white); font-size: 20px; line-height: 0; -webkit-box-shadow: 3.6px 2.4px 0px 0px #23232b; -moz-box-shadow: 3.6px 2.4px 0px 0px #23232b; -ms-box-shadow: 3.6px 2.4px 0px 0px #23232b; -o-box-shadow: 3.6px 2.4px 0px 0px #23232b; box-shadow: 3.6px 2.4px 0px 0px #23232b; position: absolute; right: -75px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 3; } @media (max-width: 1500px) { .testimonial__nav button { right: -20px; } } @media (max-width: 767.98px) { .testimonial__nav button { position: inherit; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .testimonial__nav button.testimonial-button-prev { right: auto; left: -75px; -webkit-box-shadow: -3.6px 2.4px 0px 0px #23232b; -moz-box-shadow: -3.6px 2.4px 0px 0px #23232b; -ms-box-shadow: -3.6px 2.4px 0px 0px #23232b; -o-box-shadow: -3.6px 2.4px 0px 0px #23232b; box-shadow: -3.6px 2.4px 0px 0px #23232b; } @media (max-width: 1500px) { .testimonial__nav button.testimonial-button-prev { left: -20px; } } .testimonial__nav button.testimonial-button-prev i { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .testimonial__nav button:hover { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .swiper-container { overflow: hidden; } /*============================= 12. Instructor ===============================*/ .instructor__area { padding: 120px 0 85px; } @media (max-width: 767.98px) { .instructor__area { padding: 100px 0 65px; } } .instructor__area-two { background: var(--tg-common-color-blue-2); } .instructor__area-four { background: var(--tg-common-color-gray); } .instructor__bg { background-size: cover; background-position: center; padding: 265px 0 120px; margin-top: -145px; position: relative; z-index: 1; } .instructor__content-wrap { width: 87%; } @media (max-width: 1199.98px) { .instructor__content-wrap { width: 100%; margin-bottom: 50px; } } .instructor__content-wrap p { margin-bottom: 20px; } .instructor__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 15px; align-items: center; margin-bottom: 35px; } @media (max-width: 991.98px) { .instructor__item { justify-content: center; display: block; text-align: center; } } .instructor__item-two { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 30px; align-items: center; border: 1px solid #bdbdbd; background: var(--tg-common-color-white); -webkit-border-radius: 16px; -moz-border-radius: 16px; -o-border-radius: 16px; -ms-border-radius: 16px; border-radius: 16px; padding: 0 60px 0 25px; position: relative; z-index: 3; overflow: hidden; min-height: 260px; margin-bottom: 30px; } @media (max-width: 991.98px) { .instructor__item-two { padding: 0 35px 0 25px; } } @media (max-width: 767.98px) { .instructor__item-two { min-height: auto; padding: 30px; } } .instructor__item-two:hover .instructor__thumb-two .shape-one { color: var(--tg-theme-primary); } .instructor__item-three { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; margin-bottom: 40px; } @media (max-width: 767.98px) { .instructor__item-three { flex-wrap: wrap; } } .instructor__thumb { position: relative; width: 185px; height: 185px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; } .instructor__thumb a { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .instructor__thumb a img { width: 100% !important; height: 100% !important; object-fit: cover !important; } @media (max-width: 991.98px) { .instructor__thumb { margin: 0 auto 20px; } } .instructor__thumb::before { content: ""; position: absolute; width: 100%; height: 100%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; background: linear-gradient(156deg, #f7f6f9 10.62%, #e9f5f5 90.16%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; z-index: -1; } .instructor__thumb-two { width: auto; flex: 0 0 auto; margin-top: auto; } .instructor__thumb-two img { max-width: 230px; } @media (max-width: 767.98px) { .instructor__thumb-two { display: none; } } .instructor__thumb-two .shape-one { position: absolute; left: 0; bottom: 0; z-index: -1; color: var(--tg-theme-secondary); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .instructor__thumb-two .shape-two { position: absolute; left: 34px; top: 5px; z-index: -1; width: 40px; height: 48px; } .instructor__thumb-two .shape-two .svg-icon { width: 100%; height: 100%; display: block; } .instructor__thumb-two .shape-two .svg-icon path { stroke: var(--tg-theme-secondary); } .instructor__thumb-three { width: 50%; flex: 0 0 auto; text-align: center; position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; max-width: 465px; min-height: 450px; max-height: 450px; overflow: hidden; } .instructor__thumb-three img { width: 100% !important; height: 100% !important; object-fit: cover !important; } @media (max-width: 767.98px) { .instructor__thumb-three { width: 100%; } } .instructor__thumb-three .shape-one { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; z-index: -1; color: var(--tg-theme-secondary); } @media (max-width: 991.98px) { .instructor__thumb-three .shape-one { width: 100%; } .instructor__thumb-three .shape-one svg { width: 100%; height: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .instructor__thumb-three .shape-one { width: 400px; } } .instructor__content .title { margin-bottom: 8px; font-size: 20px; font-weight: 600; } .instructor__content span { display: block; color: var(--tg-theme-primary); font-family: var(--tg-heading-font-family); line-height: 1.2; margin-bottom: 10px; } .instructor__content .avg-rating { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 15px; color: var(--tg-common-color-gray-3); gap: 5px; margin-bottom: 10px; line-height: 1.2; /* margin-top: 15px; */ } @media (max-width: 991.98px) { .instructor__content .avg-rating { justify-content: center; } } .instructor__content .avg-rating i { color: var(--tg-common-color-yellow); } .instructor__content-two .title { margin-bottom: 5px; font-size: 28px; } @media (max-width: 1199.98px) { .instructor__content-two .title { font-size: 26px; } } @media (max-width: 767.98px) { .instructor__content-two .title { font-size: 24px; } } .instructor__content-two p { margin-bottom: 20px; } .instructor__content-three { margin-left: 40px; margin-top: 40px; } @media (max-width: 767.98px) { .instructor__content-three { margin-left: 0; } } .instructor__content-three .ratting { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; color: var(--tg-common-color-yellow); gap: 3px; line-height: 1; font-size: 15px; } .instructor__content-three .ratting-wrap { display: inline-flex; align-items: center; border: 1px solid var(--tg-common-color-gray-3); -webkit-border-radius: 35px; -moz-border-radius: 35px; -o-border-radius: 35px; -ms-border-radius: 35px; border-radius: 35px; background: var(--tg-common-color-white); padding: 7px 10px; gap: 8px; margin-bottom: 20px; } .instructor__content-three .ratting-wrap span { font-size: 14px; color: var(--tg-common-color-gray-3); line-height: 1; } .instructor__content-three .title { margin-bottom: 10px; font-size: 24px; } .instructor__content-three .designation { display: block; line-height: 1; font-size: 18px; font-weight: 400; color: var(--tg-theme-primary); font-family: var(--tg-heading-font-family); margin-bottom: 15px; } .instructor__content-three p { margin-bottom: 22px; width: 80%; } @media (max-width: 991.98px) { .instructor__content-three p { width: 100%; } } .instructor__content-three .instructor__social { margin-bottom: 35px; } @media (max-width: 991.98px) { .instructor__content-three .instructor__social .list-wrap { justify-content: flex-start; } } .instructor__content-three .instructor__social .list-wrap li a { width: 50px; height: 50px; font-size: 20px; } .instructor__social .list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 8px; } @media (max-width: 991.98px) { .instructor__social .list-wrap { justify-content: center; } } .instructor__social .list-wrap li a { width: 36px; height: 36px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; border: 0.835px solid #9292b4; background: var(--tg-common-color-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; box-shadow: 2.50435px 3.33913px 0px 0px rgba(0, 0, 0, 0.25); font-size: 18px; color: var(--tg-common-color-gray-3); } .instructor__social .list-wrap li a:hover { background: var(--tg-theme-primary); box-shadow: none; border-color: var(--tg-theme-primary); color: var(--tg-common-color-white); } .instructor-nav .swiper-wrapper { display: inline-flex; align-items: center; gap: 30px; } .instructor-nav .swiper-wrapper button { background: transparent; padding: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: relative; width: 100px; height: 100px; background: #d9d9d9; border: 2px solid #ababab; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; overflow: hidden; filter: grayscale(1); line-height: 1; } .instructor-nav .swiper-wrapper .swiper-slide { width: auto !important; } .instructor-nav .swiper-slide-thumb-active button { filter: grayscale(0); background: var(--tg-common-color-white); border-color: var(--tg-theme-primary); } .instructor-active { overflow: hidden; } .instructor-slider-dot { text-align: center; -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; -ms-border-radius: 100px; border-radius: 100px; border: 1px solid #d0d0d0; background: var(--tg-common-color-white); padding: 40px 120px; margin: 0 25px; position: relative; height: 190px; } @media (max-width: 1500px) { .instructor-slider-dot { margin: 0 0; } } @media (max-width: 1199.98px) { .instructor-slider-dot { padding: 40px 85px; } } @media (max-width: 767.98px) { .instructor-slider-dot { padding: 40px 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; } } @media (max-width: 767.98px) { .instructor-slider-dot { padding: 40px 40px; } } @media (max-width: 767.98px) { .instructor__nav-two { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .instructor__nav-two { display: block; } } .instructor__nav-two .instructor-button-next, .instructor__nav-two .instructor-button-prev { width: 50px; height: 50px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: var(--tg-theme-secondary); border: 2px solid #333; position: absolute; left: 40px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 18px; color: var(--tg-common-color-black); -webkit-box-shadow: 2px 4px 0px 0px #382900; -moz-box-shadow: 2px 4px 0px 0px #382900; -ms-box-shadow: 2px 4px 0px 0px #382900; -o-box-shadow: 2px 4px 0px 0px #382900; box-shadow: 2px 4px 0px 0px #382900; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 1199.98px) { .instructor__nav-two .instructor-button-next, .instructor__nav-two .instructor-button-prev { left: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .instructor__nav-two .instructor-button-next, .instructor__nav-two .instructor-button-prev { right: 15px; } } .instructor__nav-two .instructor-button-next i, .instructor__nav-two .instructor-button-prev i { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .instructor__nav-two .instructor-button-next:hover, .instructor__nav-two .instructor-button-prev:hover { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .instructor__nav-two .instructor-button-next { left: auto; right: 40px; } @media (max-width: 1199.98px) { .instructor__nav-two .instructor-button-next { right: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .instructor__nav-two .instructor-button-next { right: 15px; } } .instructor__nav-two .instructor-button-next i { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .instructor__shape img { position: absolute; right: 24%; top: 40%; z-index: -1; } @media (max-width: 1500px) { .instructor__shape img { right: 17%; } } @media (max-width: 1199.98px) { .instructor__shape img { right: 10%; } } @media (max-width: 991.98px) { .instructor__shape img { right: 4%; width: 100px; top: 32%; } } .instructor__details-info { background: var(--tg-common-color-dark); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; padding: 50px 50px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 45px; margin-bottom: 30px; } @media (max-width: 991.98px) { .instructor__details-info { padding: 35px 30px; gap: 25px; } } @media (max-width: 767.98px) { .instructor__details-info { padding: 25px 25px; flex-direction: column; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .instructor__details-info { padding: 35px 30px; } } .instructor__details-thumb { width: 250px; height: 250px; overflow: hidden; flex: 0 0 auto; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; position: relative; z-index: 1; } .instructor__details-thumb::after { content: ""; position: absolute; width: 100%; height: 100%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; background: linear-gradient(156deg, #f7f6f9 10.62%, #e9f5f5 90.16%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; z-index: -1; } .instructor__details-thumb img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; width: 100% !important; height: 100% !important; object-fit: cover !important; } .instructor__details-content .title { margin-bottom: 8px; font-size: 24px; color: var(--tg-common-color-white); } .instructor__details-content .designation { display: block; font-size: 16px; color: var(--tg-common-color-white); font-family: var(--tg-heading-font-family); line-height: 1; margin-bottom: 22px; } .instructor__details-content>.list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 15px 30px; margin-bottom: 20px; flex-wrap: wrap; } .instructor__details-content>.list-wrap>li { color: #efeefe; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 8px; line-height: 1; position: relative; } .instructor__details-content>.list-wrap>li::before { content: ""; position: absolute; right: -17px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: var(--tg-common-color-white); } .instructor__details-content>.list-wrap>li:last-child::before { display: none; } .instructor__details-content>.list-wrap>li i { font-size: 20px; line-height: 1; } .instructor__details-content>.list-wrap>li a { color: #efeefe; } .instructor__details-content>.list-wrap>li a:hover { color: var(--tg-theme-secondary); } .instructor__details-content>.list-wrap>li.avg-rating { font-size: 14px; gap: 5px; } .instructor__details-content>.list-wrap>li.avg-rating i { color: var(--tg-common-color-yellow); font-size: 14px; } .instructor__details-content p { margin-bottom: 25px; color: var(--tg-common-color-white); } .instructor__details-social .list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .instructor__details-social .list-wrap li a { width: 42px; height: 42px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: var(--tg-common-color-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .instructor__details-social .list-wrap li a:hover { background: var(--tg-theme-secondary); color: var(--tg-heading-color); } .instructor__details-biography { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; border: 1px solid #dfdfdf; background: var(--tg-common-color-white); -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); padding: 35px 40px; margin-bottom: 30px; } .instructor__details-content .badges { display: flex; flex-wrap: wrap; align-items: center; list-style: none; gap: 10px 20px; margin-bottom: 15px; } .instructor__details-content .badges li { width: 70px; } .instructor__details-content>.list-wrap { margin-bottom: 20px !important; } .wsus__course_header_btn, .wsus__course_sidebar_btn { width: 40px; height: 40px; line-height: 40px; text-align: center; background: var(--tg-common-color-white); color: var(--tg-common-color-blue); position: absolute; top: 22px; right: 30px; z-index: 9999; cursor: pointer; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; display: none; } .wsus__course_header_btn:hover, .wsus__course_sidebar_btn:hover { background-color: var(--tg-common-color-black-2); color: var(--tg-common-color-white); } .wsus__course_sidebar_btn { background: var(--tg-common-color-red); color: var(--tg-common-color-white); top: 10px; right: 10px; } .wsus__course_sidebar_btn:hover { background: var(--tg-common-color-blue); } .wsus__course_video .review-part { display: flex; flex-wrap: wrap; background: #ebeaff33; padding: 25px; margin-top: 20px; border: 1px solid rgb(30 30 47 / 6%); border-radius: 10px; } .wsus__course_video .review-holder p.text-center { margin-bottom: 0; } .wsus__course_video .video_review .course-review-head { padding-top: 0; padding-bottom: 0; border: none; width: 100%; } .wsus__course_video .review-author-content { width: 100%; } .announcement_item { border: 1px solid #ddd; padding: 25px; border-radius: 10px; margin-bottom: 25px; } .announcement_item span { display: block; margin-bottom: 10px; color: var(--tg-common-color-indigo); } @media (max-width: 767.98px) { .instructor__details-biography { padding: 30px 25px; } } .instructor__details-biography .title { margin-bottom: 14px; font-size: 24px; } .instructor__details-biography p { margin-bottom: 8px; } .instructor__details-biography p:last-child { margin-bottom: 0; } .instructor__details-Skill { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; border: 1px solid #dfdfdf; background: var(--tg-common-color-white); -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08); padding: 35px 40px 25px; margin-bottom: 45px; } @media (max-width: 767.98px) { .instructor__details-Skill { padding: 30px 25px 15px; } } .instructor__details-Skill .title { margin-bottom: 14px; font-size: 24px; } .instructor__details-Skill p { margin-bottom: 18px; } .instructor__details-courses .main-title { margin-bottom: 5px; font-size: 30px; } .instructor__details-courses p { margin-bottom: 0; } .instructor__details-nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-end; gap: 10px; } @media (max-width: 767.98px) { .instructor__details-nav { margin-top: 25px; justify-content: flex-start; } } .instructor__details-nav button { width: 50px; height: 50px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; border: 2px solid var(--tg-common-color-dark); background: var(--tg-theme-primary); color: var(--tg-common-color-white); font-size: 20px; -webkit-box-shadow: 3.6px 2.4px 0px 0px #23232b; -moz-box-shadow: 3.6px 2.4px 0px 0px #23232b; -ms-box-shadow: 3.6px 2.4px 0px 0px #23232b; -o-box-shadow: 3.6px 2.4px 0px 0px #23232b; box-shadow: 3.6px 2.4px 0px 0px #23232b; } .instructor__details-nav button.courses-button-prev { -webkit-box-shadow: -3.6px 2.4px 0px 0px #23232b; -moz-box-shadow: -3.6px 2.4px 0px 0px #23232b; -ms-box-shadow: -3.6px 2.4px 0px 0px #23232b; -o-box-shadow: -3.6px 2.4px 0px 0px #23232b; box-shadow: -3.6px 2.4px 0px 0px #23232b; } .instructor__details-nav button.courses-button-prev i { transform: rotate(180deg); } .instructor__details-nav button:hover { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .instructor__progress-wrap .list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; margin: 0 -28px; } @media (max-width: 767.98px) { .instructor__progress-wrap .list-wrap { margin: 0 -10px; } } .instructor__progress-wrap .list-wrap li { width: 50%; flex: 0 0 auto; padding: 0 28px; } @media (max-width: 767.98px) { .instructor__progress-wrap .list-wrap li { padding: 0 10px; width: 100%; } } .instructor__sidebar { background: var(--tg-common-color-white); border: 1px solid #dfdfdf; -webkit-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; padding: 30px 25px 35px; /* margin-left: 20px; */ } @media (max-width: 1199.98px) { .instructor__sidebar { margin-left: 0; margin-top: 80px; } } .instructor__sidebar .title { font-size: 20px; margin-bottom: 10px; } .instructor__sidebar p { margin-bottom: 15px; } .instructor__sidebar .form-grp { margin-bottom: 8px; } .instructor__sidebar .form-grp textarea, .instructor__sidebar .form-grp input { border: none; background: #f4f3f8; width: 100%; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; font-size: 14px; padding: 10px 20px; color: var(--tg-heading-color); height: 45px; } .instructor__sidebar .form-grp textarea::placeholder, .instructor__sidebar .form-grp input::placeholder { font-size: 14px; color: #6d6c80; } .instructor__sidebar .form-grp textarea { min-height: 112px; max-height: 112px; } .instructor__sidebar .btn { width: 100%; justify-content: center; margin-top: 10px; } .progress-item { margin-bottom: 20px; } .progress-item .title { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; margin-bottom: 10px; font-size: 16px; font-weight: 500; } .progress-item .title span { margin-left: auto; } .progress-item .progress { height: 10px; background: #ebebeb; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; } .progress-item .progress .progress-bar { -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; background-color: var(--tg-theme-secondary); } .progress-item-two { margin-bottom: 0; margin-top: 18px; } .progress-item-two .title { font-size: 12px; letter-spacing: 0.5px; opacity: 0.5; font-weight: 600; margin-bottom: 8px; } .progress-item-two .progress { height: 6px; } .progress-item-two .progress .progress-bar { background-color: #3eb75e; } /*============================= 14. CTA ===============================*/ .cta__wrapper { background-image: url(../img/bg/cta_bg.png); background-color: var(--tg-theme-primary); background-size: cover; background-position: center; position: relative; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; padding: 46px 60px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; column-gap: 40px; overflow: hidden; margin: 0 0 -85px; z-index: 2; } @media (max-width: 1199.98px) { .cta__wrapper { flex-wrap: wrap; gap: 25px 70px; } } @media (max-width: 767.98px) { .cta__wrapper { padding: 45px 30px; } } .cta__wrapper .section__title { width: 26%; flex: 0 0 auto; } @media (max-width: 1199.98px) { .cta__wrapper .section__title { width: 100%; flex: 0 0 auto; } } .cta__wrapper .section__title .title { font-size: 30px; } .cta__wrapper .object { position: absolute; z-index: -1; } .cta__desc { flex-grow: 1; } @media (max-width: 1199.98px) { .cta__desc { width: 60%; flex: 0 0 auto; } } @media (max-width: 991.98px) { .cta__desc { width: 100%; flex: 0 0 auto; } } .cta__desc p { color: var(--tg-common-color-white); font-weight: var(--tg-fw-medium); margin: 0 0; } .cta-area-two { padding: 150px 0 160px; background-color: #072656; overflow: hidden; z-index: 1; } .cta__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-size: cover; mix-blend-mode: luminosity; background-attachment: fixed; opacity: 0.2; z-index: -1; } .cta__content { text-align: center; } .cta__content p { text-transform: uppercase; color: var(--tg-common-color-white); font-weight: var(--tg-fw-medium); letter-spacing: 0.1em; margin: 0 0 13px; } .cta__content .title { color: var(--tg-common-color-white); font-size: 48px; margin: 0 0 8px; } @media (max-width: 767.98px) { .cta__content .title { font-size: 38px; margin: 0 0 12px; } } .cta__content .sub-title { font-size: 30px; font-weight: var(--tg-fw-light); color: var(--tg-common-color-white); margin: 0 0 40px; } @media (max-width: 767.98px) { .cta__content .sub-title { font-size: 22px; } } .cta__shapes>*:nth-child(1) { left: 0; top: 0; opacity: 0.1 !important; } @media (max-width: 1199.98px) { .cta__shapes>*:nth-child(1) { max-width: 220px; } } .cta__shapes>*:nth-child(2) { top: 31%; left: 10%; max-width: 125px; } @media (max-width: 1199.98px) { .cta__shapes>*:nth-child(2) { top: 20%; left: 5%; max-width: 100px; } } @media (max-width: 767.98px) { .cta__shapes>*:nth-child(2) { top: 7%; max-width: 80px; } } .cta__shapes>*:nth-child(3) { right: 0; bottom: 0; } @media (max-width: 1199.98px) { .cta__shapes>*:nth-child(3) { max-width: 180px; } } @media (max-width: 767.98px) { .cta__shapes>*:nth-child(3) { max-width: 120px; } } .cta-area-three { position: relative; z-index: 3; } .cta-area-three::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; background-color: var(--tg-common-color-dark); z-index: -1; } @media (max-width: 991.98px) { .cta-area-three::before { height: 150px; } } .cta-area-three .cta__wrapper { margin: 0 0; } /*============================= 15. Fact ===============================*/ .fact__inner-wrap { background: var(--tg-common-color-blue-2); padding: 70px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -o-border-radius: 40px; -ms-border-radius: 40px; border-radius: 40px; -webkit-box-shadow: 0px 25px 70px 0px rgba(40, 37, 104, 0.4); -moz-box-shadow: 0px 25px 70px 0px rgba(40, 37, 104, 0.4); -ms-box-shadow: 0px 25px 70px 0px rgba(40, 37, 104, 0.4); -o-box-shadow: 0px 25px 70px 0px rgba(40, 37, 104, 0.4); box-shadow: 0px 25px 70px 0px rgba(40, 37, 104, 0.4); z-index: 3; position: relative; } @media (max-width: 1199.98px) { .fact__inner-wrap { padding: 60px 40px 30px; } } .fact__inner-wrap .row [class*="col-"]:last-child .fact__item::before { display: none; } .fact__inner-wrap-two { background: var(--tg-common-color-blue-2); -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; padding: 60px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; position: relative; z-index: 3; } @media (max-width: 1500px) { .fact__inner-wrap-two { gap: 50px; } } @media (max-width: 1199.98px) { .fact__inner-wrap-two { padding: 70px 50px 50px 50px; } } @media (max-width: 991.98px) { .fact__inner-wrap-two { padding: 60px 40px 30px 40px; flex-wrap: wrap; gap: 0; justify-content: center; } } @media (max-width: 767.98px) { .fact__inner-wrap-two { padding: 60px 30px 30px 30px; } } .fact__inner-wrap-two .section__title { width: 46%; flex: 0 0 auto; } @media (max-width: 1199.98px) { .fact__inner-wrap-two .section__title { width: 100%; text-align: center; } } .fact__item { text-align: center; /* margin-bottom: 30px; */ position: relative; } .fact__item::before { content: ""; position: absolute; right: -15px; top: -10%; width: 2px; height: 108px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%); } @media (max-width: 991.98px) { .fact__item::before { display: none; } } .fact__item .count { margin-bottom: 10px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; color: var(--tg-common-color-white); font-size: 46px; line-height: 0.84; font-family: var(--tg-body-font-family); } @media (max-width: 1199.98px) { .fact__item .count { font-size: 48px; } } @media (max-width: 767.98px) { .fact__item .count { font-size: 30px; } .fact__item { margin-bottom: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .fact__item .count { font-size: 36px; } } .fact__item p { margin-bottom: 0; font-weight: 500; color: var(--tg-common-color-white); line-height: 1.2; } .fact__item-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; gap: 110px; } @media (max-width: 991.98px) { .fact__item-wrap { gap: 60px; } } @media (max-width: 767.98px) { .fact__item-wrap { gap: 30px; } } .fact__item-wrap .fact__item::before { right: -45px; top: -9%; } @media (max-width: 991.98px) { .fact__item-wrap .fact__item::before { display: none; } } .fact__item-wrap .fact__item:last-child::before { display: none; } .fact__img-wrap { position: absolute; right: 0; bottom: 0; } @media (max-width: 1199.98px) { .fact__img-wrap { display: none; } } .fact__img-wrap img { right: 30px; position: relative; } .fact__img-wrap .shape-one { position: absolute; right: 0; bottom: 0; z-index: -1; } .fact__img-wrap .shape-two .svg-icon { width: 40px; height: 40px; position: absolute; left: -7px; top: -22px; z-index: -1; } .fact__img-wrap .shape-two .svg-icon svg { width: 100%; height: 100%; } /*============================= 15. Features ===============================*/ .features__area { background: var(--tg-common-color-blue-2); padding: 120px 0 90px; } @media (max-width: 767.98px) { .features__area { padding: 100px 0 70px; } } .features__area-three { background: var(--tg-common-color-gray); } .features__item { text-align: center; margin-bottom: 30px; } .features__item .features__icon { margin-bottom: 10px; } .features__item:hover .features__icon { -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px); -o-transform: translateY(5px); transform: translateY(5px); } .features__item-two { -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; border: 1px solid #c9e4e9; background: #f1fdff; box-shadow: 8px 8px 0px 0px #c9e4e9; padding: 40px 40px 40px 50px; position: relative; z-index: 1; margin-bottom: 30px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 1199.98px) { .features__item-two { padding: 30px 25px 30px 25px; } } .features__item-two:hover { box-shadow: none !important; } .features__item-two:hover .features__item-shape { color: #1bcbe3; } .features__item-shape { position: absolute; right: 28px; top: 21px; z-index: -1; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; color: rgba(39, 39, 47, 0.2); } .features__item-wrap .row [class*="col-"]:nth-child(2) .features__item-two { border: 1px solid #c8c1ed; background: #edeaff; box-shadow: 8px 8px 0px 0px #d9d5f1; } .features__item-wrap .row [class*="col-"]:nth-child(2) .features__item-two .features__icon-two { background: #5751e1; } .features__item-wrap .row [class*="col-"]:nth-child(2) .features__item-two:hover .features__item-shape { color: #5751e1; } .features__item-wrap .row [class*="col-"]:nth-child(3) .features__item-two { border: 1px solid #ebe0c4; background: #fff7e2; box-shadow: 8px 8px 0px 0px #e5decb; } .features__item-wrap .row [class*="col-"]:nth-child(3) .features__item-two .features__icon-two { background: #ffc224; } .features__item-wrap .row [class*="col-"]:nth-child(3) .features__item-two:hover .features__item-shape { color: #ffc224; } .features__icon { margin-bottom: 22px; min-height: 93px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .features__icon-two { width: 70px; height: 70px; padding: 15px; flex: 0 0 auto; color: var(--tg-common-color-white); background: #1bcbe3; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .features__icon-two img, .features__icon-two svg { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(82deg) brightness(105%) contrast(105%); } .features__content .title { color: var(--tg-common-color-white); margin-bottom: 8px; font-size: 20px; font-weight: var(--tg-fw-semi-bold); } .features__content p { margin-bottom: 0; color: var(--tg-common-color-gray-4); } .features__content-two .content-top { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 15px; margin-bottom: 18px; } .features__content-two .title { margin-bottom: 0; font-size: 22px; } .features__content-two p { margin-bottom: 0; color: var(--tg-common-color-dark); text-transform: capitalize; } /*============================= 16. Events ===============================*/ .event__area { position: relative; z-index: 1; } .event__area::before { content: ""; position: absolute; right: 18%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 790px; height: 430px; background: #f2f4f6; -webkit-border-radius: 80px; -moz-border-radius: 80px; -o-border-radius: 80px; -ms-border-radius: 80px; border-radius: 80px; z-index: -1; } .fact__item-wrap { gap: 80px; } @media (max-width: 1199.98px) { .event__area::before { right: 10%; } } @media (max-width: 991.98px) { .event__area::before { display: none; } } .event__inner-wrap .row .col-30 { width: 30%; flex: 0 0 auto; } @media (max-width: 1199.98px) { .event__inner-wrap .row .col-30 { width: 100%; } } .event__inner-wrap .row .col-70 { width: 70%; flex: 0 0 auto; } @media (max-width: 1199.98px) { .event__inner-wrap .row .col-70 { width: 100%; } } .event__content { margin-bottom: 30px; } @media (max-width: 1199.98px) { .event__content { text-align: center; margin-bottom: 50px; } .event__content .tg-button-wrap { justify-content: center; } } .event__content p { margin-bottom: 25px; } .event__item { border: 1px solid #b5b5c3; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; padding: 20px 20px 20px 25px; background: var(--tg-common-color-white); margin-bottom: 30px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .event__item:hover { -webkit-box-shadow: 10px 10px 0px #cac9d6; -moz-box-shadow: 10px 10px 0px #cac9d6; -ms-box-shadow: 10px 10px 0px #cac9d6; -o-box-shadow: 10px 10px 0px #cac9d6; box-shadow: 10px 10px 0px #cac9d6; } .event__item-thumb { -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; overflow: hidden; } .event__item-thumb img { width: 100%; height: 212px; object-fit: cover; } .event__item-content { position: relative; padding: 30px 0 0; } .event__item-content .date { font-size: 14px; font-weight: 600; font-family: var(--tg-heading-font-family); color: var(--tg-heading-color); background: var(--tg-theme-secondary); display: block; line-height: 1; border: 1px solid var(--tg-heading-color); -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; padding: 8px 13px; position: absolute; left: 0; top: -20px; z-index: 2; -webkit-box-shadow: 4px 4px 0px 0px #3d3d3d; -moz-box-shadow: 4px 4px 0px 0px #3d3d3d; -ms-box-shadow: 4px 4px 0px 0px #3d3d3d; -o-box-shadow: 4px 4px 0px 0px #3d3d3d; box-shadow: 4px 4px 0px 0px #3d3d3d; } .event__item-content .title { font-size: 18px; margin-bottom: 15px; line-height: 1.4; } .event__item-content .title a { display: inline; background-image: linear-gradient(var(--tg-heading-color), var(--tg-heading-color)), linear-gradient(var(--tg-heading-color), var(--tg-heading-color)); background-size: 0% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.4s linear; -webkit-transition: background-size 0.4s linear; -moz-transition: background-size 0.4s linear; -ms-transition: background-size 0.4s linear; -o-transition: background-size 0.4s linear; } .event__item-content .title a:hover { color: inherit; background-size: 0 2px, 100% 2px; } .event__item-content .location { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 15px; color: var(--tg-body-color); gap: 5px; line-height: 1; } .event__item-content .location i { font-size: 18px; line-height: 0; color: var(--tg-theme-primary); } .event__item-content .location:hover { color: var(--tg-theme-secondary); } .event__item-wrap .row { --bs-gutter-x: 20px; } .event__shape img { position: absolute; right: 9%; bottom: 13%; z-index: -1; } .event__details-thumb { margin-bottom: 60px; } @media (max-width: 767.98px) { .event__details-thumb { margin-bottom: 30px; } } .event__details-thumb img { -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; min-height: 300px; object-fit: cover; } .event__details-content .title { margin-bottom: 15px; font-size: 36px; } @media (max-width: 1500px) { .event__details-content .title { font-size: 32px; } } @media (max-width: 1199.98px) { .event__details-content .title { font-size: 30px; } } @media (max-width: 767.98px) { .event__details-content .title { font-size: 28px; } } .event__details-content .title-two { font-size: 24px; margin-bottom: 15px; } .event__details-content p { margin-bottom: 0; } .event__details-content-wrap .row .col-70 { width: 70%; flex: 0 0 auto; } @media (max-width: 1199.98px) { .event__details-content-wrap .row .col-70 { width: 65%; } } @media (max-width: 991.98px) { .event__details-content-wrap .row .col-70 { width: 100%; } } .event__details-content-wrap .row .col-30 { width: 30%; flex: 0 0 auto; } @media (max-width: 1199.98px) { .event__details-content-wrap .row .col-30 { width: 35%; } } @media (max-width: 991.98px) { .event__details-content-wrap .row .col-30 { width: 100%; } } .event__details-content-top { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 15px; margin-bottom: 10px; } .event__details-content-top .tag { font-size: 13px; font-weight: 500; background: var(--tg-theme-primary); color: var(--tg-common-color-white); display: block; padding: 8px 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; line-height: 1; } .event__details-content-top .tag:hover { background: var(--tg-theme-secondary); color: var(--tg-heading-color); } .event__details-content-top .avg-rating { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 14px; gap: 5px; color: var(--tg-common-color-gray-3); } .event__details-content-top .avg-rating i { color: var(--tg-common-color-yellow); line-height: 1; } .event__details-overview { margin-bottom: 20px; } .event__details-inner { margin: 25px 0 20px; } .event__details-inner .row .col-39 { width: 38.8%; flex: 0 0 auto; } @media (max-width: 1199.98px) { .event__details-inner .row .col-39 { width: 100%; } } .event__details-inner .row .col-61 { width: 61.2%; flex: 0 0 auto; } @media (max-width: 1199.98px) { .event__details-inner .row .col-61 { width: 100%; } } .event__details-inner img { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; width: 100%; } @media (max-width: 1199.98px) { .event__details-inner img { margin-bottom: 30px; } } .event__details-inner-content .title { margin-bottom: 25px; font-size: 24px; text-transform: capitalize; } .event__details-inner-content .about__info-list-item { margin: 0 0 10px; } .event__details-inner-content .about__info-list-item:last-child { margin: 0; } .event__details-inner-content .about__info-list-item i { width: 24px; height: 24px; flex: 0 0 auto; } .event__details-inner-content .about__info-list-item p { font-size: 16px; } .event__meta .list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px 35px; flex-wrap: wrap; border-bottom: 1px solid #d9d9d9; padding-bottom: 25px; margin-bottom: 28px; } .event__meta .list-wrap li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; position: relative; gap: 8px; color: var(--tg-common-color-gray-3); } .event__meta .list-wrap li::before { content: ""; position: absolute; right: -19px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; background: #8c9ab4; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .event__meta .list-wrap li:last-child::before { display: none; } .event__meta .list-wrap li i { font-size: 20px; line-height: 0; } .event__meta .list-wrap li.author img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .event__meta .list-wrap li.author a { color: var(--tg-common-color-dark); } .event__meta .list-wrap li.author a:hover { color: var(--tg-theme-primary); } .event__meta .list-wrap li.location i { color: var(--tg-theme-primary); } .event__sidebar { margin: -190px 50px 0 20px; } @media (max-width: 1199.98px) { .event__sidebar { margin: -190px 0 0 0; } } @media (max-width: 991.98px) { .event__sidebar { margin: 80px 0 0 0; } } .event__sidebar .courses__details-sidebar { margin: 0; } .event__widget { margin-bottom: 30px; } .event__widget:last-child { margin-bottom: 0; } .event__map { background: var(--tg-common-color-white); border: 1px solid #dfdfdf; -webkit-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; padding: 30px 30px; } .event__map .title { font-size: 20px; margin-bottom: 20px; } .event__map .map { width: 100%; height: 240px; } .event__map .map iframe { width: 100%; height: 100%; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; } /*============================= 18. FAQ ===============================*/ .faq__area { background: var(--tg-common-color-gray); padding: 260px 0 120px; margin-top: -140px; position: relative; z-index: 1; overflow: hidden; } @media (max-width: 767.98px) { .faq__area { padding: 240px 0 100px; } } .faq__area::before { content: ""; position: absolute; left: 45px; bottom: 20%; width: 500px; height: 500px; background: #e9e2f9; filter: blur(200px); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; z-index: -1; } .faq__area::after { content: ""; position: absolute; right: 54px; top: 110px; width: 500px; height: 500px; background: #e9e2f9; filter: blur(200px); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; z-index: -1; } .faq__img { position: relative; z-index: 1; width: 450px; height: 562px; border-radius: 1000px; background: var(--tg-common-color-white); box-shadow: 9px 8px 0px #171717; margin: 0 auto; overflow: hidden; } @media (max-width: 1199.98px) { .faq__img { width: 400px; height: 550px; } } @media (max-width: 767.98px) { .faq__img { width: 100%; height: 500px; max-width: 400px; } } .faq__img img { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; max-width: 370px; } .faq__img .shape-one { position: absolute; left: 27%; top: 11%; z-index: -1; } @media (max-width: 1199.98px) { .faq__img .shape-one { left: 25%; top: 9%; } } @media (max-width: 767.98px) { .faq__img .shape-one { left: 16%; top: 11%; } } .faq__img .shape-one svg { color: var(--tg-common-color-yellow-2); } .faq__img .shape-two { width: 61px; height: 46px; position: absolute; right: 25%; top: 10%; } @media (max-width: 1199.98px) { .faq__img .shape-two { right: 18%; } } .faq__img .shape-two .svg-icon { width: 100%; height: 100%; display: block; } .faq__img .shape-two .svg-icon path { stroke: var(--tg-common-color-black); } .faq__img-two { background: #f3f3f3; box-shadow: 9px 8px 0px #b8b8b8; } .faq__img-wrap { position: relative; margin-top: 45px; } @media (max-width: 991.98px) { .faq__img-wrap { margin-bottom: 50px; } } @media (max-width: 991.98px) { .faq__img-wrap { margin-top: 0; } } .faq__content { width: 80%; } @media (max-width: 1199.98px) { .faq__content { width: 100%; } } .faq__content p { margin-bottom: 10px; } .faq__wrap .accordion-item { background-color: transparent; border: none; border-radius: 0; } .faq__wrap .accordion-item .accordion-button { background-color: transparent; border: none; border-bottom: 1px solid var(--tg-common-color-gray-5); padding: 22px 0; font-size: 20px; font-weight: 500; font-family: var(--tg-heading-font-family); border-radius: 0; color: var(--tg-body-color); position: relative; } @media (max-width: 767.98px) { .faq__wrap .accordion-item .accordion-button { padding: 22px 30px 22px 0; } } .faq__wrap .accordion-item .accordion-button::after { content: "\f105"; background-image: none; font-family: "flaticon_skill_grow"; font-size: 20px; position: absolute; right: 0; top: 25px; color: var(--tg-common-color-dark); box-shadow: none; background: transparent; font-weight: 700; } .faq__wrap .accordion-item .accordion-button:not(.collapsed) { box-shadow: none; color: var(--tg-theme-primary); } .faq__wrap .accordion-item .accordion-button:not(.collapsed)::after { transform: rotate(-90deg); color: var(--tg-theme-primary); } .faq__wrap .accordion-item .accordion-button:focus { box-shadow: none; } .faq__wrap .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .faq__wrap .accordion-body { padding: 15px 0 0; } .faq__wrap .accordion-body p { margin-bottom: 0; color: var(--tg-common-color-dark); } .curved-circle { font-size: 20px; font-weight: 700; text-transform: uppercase; color: var(--tg-common-color-dark); right: 50%; transform: translateX(-50%); top: -8%; letter-spacing: 5px; } @media (max-width: 1199.98px) { .curved-circle { font-size: 15px; top: -6%; letter-spacing: 3px; } } @media (max-width: 767.98px) { .curved-circle { display: none; } } /*============================= 19. Shop ===============================*/ .shop-top-wrap { margin-bottom: 30px; } .shop-top-left p { margin-bottom: 0; font-size: 18px; } @media (max-width: 767.98px) { .shop-top-left p { margin-bottom: 15px; text-align: center; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .shop-top-left p { margin-bottom: 0; text-align: left; } } .shop-top-right { position: relative; width: 190px; margin-left: auto; } @media (max-width: 767.98px) { .shop-top-right { margin: 0 auto; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .shop-top-right { margin: 0 0 0 auto; } } .shop-top-right select { background-color: var(--tg-common-color-gray); border: none; color: var(--tg-body-color); font-weight: 400; font-size: 16px; text-transform: capitalize; border-radius: 4px; outline: none; padding: 12px 37px 9px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; line-height: 1.2; height: 40px; } .shop-top-right::after { content: "\f078"; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-family: "Font Awesome 5 Free"; font-weight: 700; right: 15px; font-size: 14px; color: var(--tg-theme-primary); } .shop-item { border: 1px solid #e8e8e8; border-radius: 6px; padding: 25px 25px 30px; margin-bottom: 30px; background: var(--tg-common-color-white); } @media (max-width: 1199.98px) { .shop-item { padding: 20px 20px 25px; } } @media (max-width: 991.98px) { .shop-item { padding: 25px 25px 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .shop-item { padding: 20px 20px 25px; } } .shop-item:hover .shop-thumb img { opacity: 0.8; } .shop-item:hover .shop-action li { opacity: 1; visibility: visible; transform: translateY(0); } .shop-thumb { position: relative; text-align: center; margin-bottom: 25px; } .shop-thumb img { -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; } .shop-thumb .flash-sale { position: absolute; left: 0; top: 0; line-height: 1; padding: 6px 13px; background: var(--tg-theme-primary); color: var(--tg-common-color-white); text-transform: uppercase; font-size: 14px; font-weight: 700; border-radius: 4px; z-index: 1; } .shop-thumb .flash-sale.hot { background: var(--tg-theme-secondary); color: var(--tg-heading-color); } .shop-action { display: flex; align-items: center; position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%; gap: 10px; } .shop-action li { opacity: 0; visibility: hidden; transform: translateY(20px); transition: visibility 0.3s ease-out 0.1s, opacity 0.3s ease-out 0.15s, transform 0.3s ease-out 0.1s; -webkit-transition: visibility 0.3s ease-out 0.1s, opacity 0.3s ease-out 0.15s, transform 0.3s ease-out 0.1s; -moz-transition: visibility 0.3s ease-out 0.1s, opacity 0.3s ease-out 0.15s, transform 0.3s ease-out 0.1s; -ms-transition: visibility 0.3s ease-out 0.1s, opacity 0.3s ease-out 0.15s, transform 0.3s ease-out 0.1s; -o-transition: visibility 0.3s ease-out 0.1s, opacity 0.3s ease-out 0.15s, transform 0.3s ease-out 0.1s; } .shop-action li:nth-child(2) { transition-delay: 0.15s; } .shop-action li:nth-child(3) { transition-delay: 0.2s; } .shop-action a { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: var(--tg-common-color-white); color: var(--tg-theme-primary); font-size: 15px; line-height: 0; } .shop-action a:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .shop-content { text-align: center; } .shop-content .price { font-weight: 500; font-size: 18px; margin-bottom: 0; color: var(--tg-theme-primary); } .shop-content .price del { color: var(--tg-body-color); margin-left: 5px; opacity: 0.7; } .shop-content .title { margin-bottom: 10px; font-weight: 500; font-size: 18px; } .shop-content .title a:hover { color: var(--tg-theme-primary); } .shop-content .rating { display: flex; align-items: center; justify-content: center; font-size: 15px; color: #f8bc24; gap: 3px; line-height: 1; margin: 0 0 10px; } .shop-content .rating .avg { color: var(--tg-body-color); } @media (max-width: 991.98px) { .shop-sidebar { margin-top: 80px; } } .shop-widget { -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); -ms-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); -o-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; padding: 30px 30px; background: #f7f7fa; margin-bottom: 30px; } .shop-widget:last-child { margin-bottom: 0; } @media (max-width: 1199.98px) { .shop-widget { padding: 25px 20px; } } @media (max-width: 991.98px) { .shop-widget { padding: 25px 30px; } } .shop-widget ul li { margin-bottom: 15px; } .shop-widget ul li:last-child { margin-bottom: 0; } .shop-widget .form-check { display: flex; align-items: center; line-height: 1; margin-bottom: 0; padding: 0; min-height: inherit; } .shop-widget .form-check-input { border-radius: 4px; border: 1px solid #b2bdcd; margin: 0 10px 0 0; width: 16px; height: 16px; } .shop-widget .form-check-input:focus { box-shadow: none; border-color: var(--tg-theme-primary); } .shop-widget .form-check-label { flex-grow: 1; font-size: 16px; font-weight: 400; color: var(--tg-body-color); user-select: none; } .shop-widget .form-check .rating { display: flex; align-items: center; } .shop-widget .form-check .rating ul { display: flex; align-items: center; line-height: 1; color: #f8bc24; gap: 4px; } .shop-widget .form-check .rating ul li { margin-bottom: 0; } .shop-widget .form-check .rating ul li.delete { color: #d7d7d7; } .shop-widget .form-check .rating span { color: #5a7093; margin-left: 5px; } @media (max-width: 1500px) { .shop-details-images-wrap { flex-direction: column-reverse; } } .shop-details-images-wrap .nav-tabs { border-bottom: none; gap: 15px; margin: 0 0; width: 119px; flex: 0 0 119px; flex-direction: column; } @media (max-width: 1500px) { .shop-details-images-wrap .nav-tabs { width: 100%; flex: 0 0 auto; flex-direction: row; } } .shop-details-images-wrap .nav-item { width: 120px; flex: 0 0 auto; } @media (max-width: 767.98px) { .shop-details-images-wrap .nav-item { width: auto; flex: 1 0 0%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .shop-details-images-wrap .nav-item { width: 120px; flex: 0 0 auto; } } .shop-details-images-wrap .nav-link { margin-bottom: 0; background: transparent; border: 1px solid #e4e4e4; border-radius: 6px; padding: 0 0; overflow: hidden; opacity: 0.5; } .shop-details-images-wrap .nav-link.active { border-color: var(--tg-theme-primary); opacity: 1; } .shop-details-images-wrap .tab-content img { border-radius: 6px; border: 1px solid #e4e4e4; } @media (max-width: 767.98px) { .shop-details-images-wrap .tab-content img { width: 100%; } } .shop-details-content { margin-left: 25px; } @media (max-width: 1199.98px) { .shop-details-content { margin-left: 0; } } @media (max-width: 991.98px) { .shop-details-content { margin: 60px 0 0; } } .shop-details-content>.title { font-weight: 600; font-size: 30px; margin-bottom: 12px; } @media (max-width: 767.98px) { .shop-details-content>.title { font-size: 26px; } } .shop-details-content .product-review { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } @media (max-width: 767.98px) { .shop-details-content .product-review { margin-bottom: 15px; } } .shop-details-content .product-review .rating { display: flex; align-items: center; color: #f8bc24; gap: 3px; } .shop-details-content .product-review span { color: #5a7093; } .shop-details-content .price { margin-bottom: 20px; font-weight: 500; font-size: 24px; color: var(--tg-theme-primary); } .shop-details-content p { margin-bottom: 35px; } @media (max-width: 767.98px) { .shop-details-content p { margin-bottom: 30px; } } .shop-details-qty { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 40px; } .shop-details-qty .title { font-weight: 500; font-size: 18px; color: var(--tg-theme-primary); display: block; } .shop-details-qty .wishlist-btn { background: #f6f7fa; border: 1px solid #e4e4e4; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .shop-details-qty .wishlist-btn:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); border-color: var(--tg-theme-primary); } .shop-details-bottom .list-wrap li { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; } .shop-details-bottom .list-wrap li:last-child { margin-bottom: 0; } .shop-details-bottom .list-wrap li .title { font-weight: 500; font-size: 16px; display: block; color: var(--tg-heading-color); } .shop-details-bottom .list-wrap li .code, .shop-details-bottom .list-wrap li a { color: var(--tg-body-color); } .shop-details-bottom .list-wrap li a:hover { color: var(--tg-theme-primary); } .cart-plus-minus { position: relative; width: 116px; flex: 0 0 auto; } .cart-plus-minus input { width: 100%; border: 1px solid #d7d7d7; border-radius: 5px; height: 50px; text-align: center; padding: 0 30px; font-weight: 500; font-size: 16px; color: var(--tg-heading-color); } .cart-plus-minus .qtybutton { position: absolute; top: 0; left: 0; width: 31px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: #838383; cursor: pointer; border-right: 1px solid #d7d7d7; user-select: none; -moz-user-select: none; line-height: 0; } .cart-plus-minus .qtybutton.inc { left: auto; right: 0; border-right: none; border-left: 1px solid #d7d7d7; } .cart-plus-minus .qtybutton.dec { font-size: 26px; } .product-desc-wrap { margin-top: 100px; } .product-desc-wrap .tab-content p { margin-bottom: 0; } .product-desc-wrap .nav-tabs { border-bottom: 2px solid #e6eaef; gap: 30px; margin-bottom: 25px; } .product-desc-wrap .nav-tabs .nav-link { margin-bottom: 0; background: transparent; border: none; border-radius: 0; padding: 0 5px 10px; font-weight: 500; font-size: 19px; font-family: var(--tg-heading-font-family); color: var(--tg-body-color); position: relative; } .product-desc-wrap .nav-tabs .nav-link.active { color: var(--tg-theme-primary); } .product-desc-wrap .nav-tabs .nav-link.active::before { opacity: 1; } .product-desc-wrap .nav-tabs .nav-link::before { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--tg-theme-primary); transition: 0.3s linear; opacity: 0; } .product-desc-review { padding: 25px 30px; border: 1px solid #e6eaef; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } .product-desc-review .left-rc { margin-bottom: 10px; } .related-product-area { position: relative; margin-top: 120px; } @media (max-width: 767.98px) { .related-product-area { margin-top: 90px; } } .related-product-area .shop-thumb img { margin: 0 auto; } .shop-active [class*="col-"] { padding: 0 15px; } .shop-active .slick-arrow { position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: var(--tg-common-color-gray); color: var(--tg-theme-primary); border: 1px solid var(--tg-common-color-white); box-shadow: 0px 10px 20px #dfdfdf; display: flex; align-items: center; justify-content: center; z-index: 3; } .shop-active .slick-arrow:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .shop-active .slick-arrow.slick-next { left: auto; right: -10px; } /*============================= 20. Blog ===============================*/ .blog__post-area { position: relative; padding: 240px 0 90px; background: var(--tg-common-color-gray); z-index: 1; margin-top: -150px; } @media (max-width: 767.98px) { .blog__post-area { padding: 220px 0 70px; } } .blog__post-area::before { content: ""; position: absolute; left: 50px; top: 50px; width: 473px; height: 473px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #e9e2f9; filter: blur(200px); z-index: -1; } .blog__post-area::after { content: ""; position: absolute; right: 10%; bottom: 20px; width: 473px; height: 473px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #e9e2f9; filter: blur(200px); z-index: -1; } .blog__post-area-two { padding: 120px 0 90px; margin-top: 0; } @media (max-width: 767.98px) { .blog__post-area-two { padding: 100px 0 70px; } } .blog__post-item { border: 1px solid #b5b5c3; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background: var(--tg-common-color-white); padding: 20px 25px 35px; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; margin-bottom: 30px; } .blog__post-item:hover { -webkit-box-shadow: 10px 10px 0px 0px #cac9d6; -moz-box-shadow: 10px 10px 0px 0px #cac9d6; -ms-box-shadow: 10px 10px 0px 0px #cac9d6; -o-box-shadow: 10px 10px 0px 0px #cac9d6; box-shadow: 10px 10px 0px 0px #cac9d6; } .blog__post-thumb { margin-bottom: 22px; position: relative; } .blog__post-thumb img { -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; width: 100%; height: 100%; object-fit: cover; } .blog__post-thumb .post-tag { font-size: 13px; font-weight: 500; line-height: 1; color: var(--tg-common-color-white); background: var(--tg-theme-primary); position: absolute; left: 22px; top: 17px; padding: 9px 14px; border-radius: 30px; z-index: 1; } .blog__post-thumb .post-tag:hover { background: var(--tg-theme-secondary); color: var(--tg-heading-color); } .blog__post-content .title { margin-bottom: 0; font-size: 20px; font-weight: 600; } .blog__post-content .title a { display: inline; background-image: linear-gradient(var(--tg-heading-color), var(--tg-heading-color)), linear-gradient(var(--tg-heading-color), var(--tg-heading-color)); background-size: 0% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.4s linear; } .blog__post-content .title a:hover { color: inherit; background-size: 0 2px, 100% 2px; } .blog__post-meta { margin-bottom: 10px; } .blog__post-meta .list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-direction: row; gap: 15px; flex-wrap: wrap; } .blog__post-meta .list-wrap li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 14px; font-weight: 500; line-height: 1; } .blog__post-meta .list-wrap li i { font-size: 20px; color: var(--tg-theme-primary); margin-right: 8px; } .blog__post-meta .list-wrap li a { color: var(--tg-body-color); margin-left: 5px; } .blog__post-meta .list-wrap li a:hover { color: var(--tg-theme-primary); } .blog-sidebar { margin-left: 15px; } @media (max-width: 1199.98px) { .blog-sidebar { margin-left: 0px; } } .blog-widget { background: var(--tg-common-color-gray); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; padding: 30px 30px; margin-bottom: 30px; } .blog-widget:last-child { margin-bottom: 0; } .blog-widget .shop-cat-list .list-wrap li { line-height: 1; margin-bottom: 20px; } .blog-widget .shop-cat-list .list-wrap li:last-child { margin-bottom: 0; } .blog-widget .shop-cat-list .list-wrap li a { display: inline-flex; align-items: center; line-height: 1; font-size: 16px; color: var(--tg-body-color); gap: 5px; } .blog-widget .shop-cat-list .list-wrap li a i { color: var(--tg-theme-primary); font-size: 20px; line-height: 0; } .blog-widget .shop-cat-list .list-wrap li a:hover { color: var(--tg-theme-primary); } .blog-widget .tagcloud { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } .blog-widget .tagcloud a { font-size: 16px; color: var(--tg-theme-primary); display: block; background: var(--tg-common-color-white); padding: 10px 15px; line-height: 1; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } .blog-widget .tagcloud a:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .blog__details-thumb { margin-bottom: 30px; } .blog__details-thumb img { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; min-height: 300px; max-height: 600px; width: 100% !important; height: 100% !important; object-fit: cover; } .blog__details-content .title { margin-bottom: 10px; font-size: 36px; } @media (max-width: 1500px) { .blog__details-content .title { font-size: 32px; } } @media (max-width: 1199.98px) { .blog__details-content .title { font-size: 30px; } } @media (max-width: 767.98px) { .blog__details-content .title { font-size: 26px; } } .blog__details-content>p { margin-bottom: 10px; } .blog__details-content .inner-title { margin-bottom: 10px; font-size: 30px; } @media (max-width: 767.98px) { .blog__details-content .inner-title { font-size: 24px; } } .blog__details-content-inner { margin: 30px 0 25px; } .blog__details-content-inner>p { margin-bottom: 20px; } .blog__details-bottom { border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; padding: 20px 0; margin: 40px 0 30px; } .blog__details-bottom .tg-post-tag { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .blog__details-bottom .tg-post-tag .tag-title { margin-bottom: 0; font-size: 17px; } .blog__details-bottom .tg-post-tag .list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; flex-direction: row; gap: 8px; } .blog__details-bottom .tg-post-tag .list-wrap li a { background: var(--tg-theme-primary); color: var(--tg-common-color-white); display: block; font-size: 15px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; -ms-border-radius: 50px; border-radius: 50px; padding: 10px 21px; line-height: 1.2; } .blog__details-bottom .tg-post-tag .list-wrap li a:hover { background: var(--tg-theme-secondary); color: var(--tg-heading-color); } .blog__details-bottom .tg-post-social { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px; } @media (max-width: 767.98px) { .blog__details-bottom .tg-post-social { margin-top: 15px; } } .blog__details-bottom .tg-post-social .social-title { margin-bottom: 0; font-size: 17px; } .blog__details-bottom .tg-post-social .list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px; } .blog__details-bottom .tg-post-social .list-wrap li a { font-size: 20px; color: var(--tg-body-color); } .blog__details-bottom .tg-post-social .list-wrap li a:hover { color: var(--tg-theme-secondary); } .blog__post-author { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 41px 45px; background: #f7f7fa; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; gap: 30px; margin-bottom: 40px; } @media (max-width: 1199.98px) { .blog__post-author { padding: 30px 25px; } } @media (max-width: 767.98px) { .blog__post-author { flex-wrap: wrap; gap: 25px; } } .blog__post-author-thumb { width: 115px; flex: 0 0 auto; } .blog__post-author-thumb img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .blog__post-author-content .designation { display: block; line-height: 1; color: var(--tg-common-color-dark); margin-bottom: 5px; } .blog__post-author-content .name { font-size: 24px; margin-bottom: 10px; font-weight: 500; } .blog__post-author-content p { margin-bottom: 0; } .widget_search { padding: 0 0; } .widget-title { margin-bottom: 20px; font-size: 20px; } .sidebar-search-form form { position: relative; } .sidebar-search-form input { background: var(--tg-common-color-gray); width: 100%; border: none; padding: 15px 45px 15px 20px; color: var(--tg-body-color); font-size: 16px; line-height: 1; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; } .sidebar-search-form input::placeholder { color: var(--tg-body-color); font-size: 16px; opacity: 0.8; } .sidebar-search-form button { border: none; padding: 0; background: transparent; font-size: 22px; line-height: 0; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); } .rc-post-item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 15px; margin-bottom: 20px; } .rc-post-item:last-child { margin-bottom: 0; } .rc-post-thumb { flex: 0 0 auto; } .rc-post-thumb a .h_60px { width: 80px !important; height: 75px !important; object-fit: cover; } .rc-post-thumb img { -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } .rc-post-content .date { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 6px; line-height: 1; font-size: 13px; font-weight: 500; color: var(--tg-common-color-gray-3); margin-bottom: 12px; } .rc-post-content .date i { color: var(--tg-theme-primary); font-size: 14px; } .rc-post-content .title { font-size: 14px; font-weight: 500; text-transform: capitalize; margin-bottom: 0; } blockquote { background: #efeefe; margin: 40px 90px; padding: 35px 120px 35px 45px; position: relative; z-index: 1; } @media (max-width: 1500px) { blockquote { margin: 40px 50px; } } @media (max-width: 1199.98px) { blockquote { margin: 40px 20px; padding: 35px 100px 35px 30px; } } @media (max-width: 767.98px) { blockquote { margin: 40px 0; padding: 30px 30px 30px 30px; } } blockquote::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; background: var(--tg-theme-primary); } blockquote::after { content: "\f10e"; position: absolute; right: 30px; top: 22px; line-height: 1; font-size: 62px; color: #ceccfd; font-family: var(--tg-icon-font-family); font-weight: 700; z-index: -1; } @media (max-width: 767.98px) { blockquote::after { right: 17px; top: 17px; font-size: 40px; } } blockquote>p { margin-bottom: 0; font-size: 20px; font-weight: 500; font-style: italic; color: var(--tg-common-color-dark); font-family: var(--tg-heading-font-family); } @media (max-width: 1199.98px) { blockquote>p { font-size: 18px; } } .comment-wrap-title .title { margin-bottom: 50px; font-size: 24px; } .comment-respond { background: #f7f7fa; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; -ms-border-radius: 12px; border-radius: 12px; padding: 32px 45px 50px; } @media (max-width: 1199.98px) { .comment-respond { padding: 32px 25px 50px; } } .comment-reply-title { margin-bottom: 5px; font-size: 30px; text-transform: capitalize; } @media (max-width: 1199.98px) { .comment-reply-title { font-size: 26px; } } .comment-form .row { --bs-gutter-x: 20px; } .comment-form .row [class*="col-"] { padding: 0 10px; } .comment-notes { margin-bottom: 15px; } .comment-field { margin-bottom: 15px; } .comment-field input, .comment-field textarea { width: 100%; display: block; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; background: var(--tg-common-color-white); border: 1px solid #e1e4e7; font-size: 16px; color: var(--tg-body-color); padding: 15px 15px; line-height: 1.2; height: 50px; } .comment-field input::placeholder, .comment-field textarea::placeholder { opacity: 0.8; font-size: 16px; color: var(--tg-body-color); } .comment-field textarea { min-height: 130px; max-height: 130px; } .comment-field.checkbox-grp { display: flex; align-items: center; margin: 15px 0 32px; } .comment-field.checkbox-grp input { width: 22px; margin-right: 9px; height: 22px; cursor: pointer; } .comment-field.checkbox-grp label { font-weight: 400; font-size: 16px; color: var(--tg-body-color); user-select: none; } .latest-comments .list-wrap li { padding-bottom: 30px; margin-bottom: 45px; border-bottom: 1px solid #e8e8e8; } .latest-comments .list-wrap li:last-child { margin-bottom: 0; border-bottom: none; } .latest-comments .list-wrap li:last-child .comments-box { margin-left: 45px; } @media (max-width: 767.98px) { .latest-comments .list-wrap li:last-child .comments-box { margin-left: 0; } } .latest-comments .comments-box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-start; gap: 25px; } @media (max-width: 767.98px) { .latest-comments .comments-box { gap: 20px; flex-wrap: wrap; } } .latest-comments .comments-avatar { flex: 0 0 auto; width: 115px; } .latest-comments .comments-avatar img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .latest-comments .comments-text .avatar-name { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; margin-bottom: 10px; } .latest-comments .comments-text .avatar-name .name { font-size: 20px; margin-bottom: 0; } .latest-comments .comments-text .avatar-name .date { font-size: 14px; margin-left: auto; font-weight: 500; } .latest-comments .comments-text p { margin-bottom: 15px; } .latest-comments .comments-text .comment-reply .comment-reply-link { font-size: 14px; font-weight: 500; text-transform: uppercase; background: #f7f7fb; display: inline-block; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; line-height: 1; padding: 10px 18px; } .latest-comments .comments-text .comment-reply .comment-reply-link:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .pagination__wrap ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 10px; } .pagination__wrap ul li a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #e6e9ef; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; -o-border-radius: 50% !important; -ms-border-radius: 50% !important; border-radius: 50% !important; font-size: 18px; color: var(--tg-heading-color); font-family: var(--tg-heading-font-family); font-weight: var(--tg-fw-medium); } .pagination__wrap ul li span { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #e6e9ef; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50% !important; font-size: 18px; color: var(--tg-heading-color); font-family: var(--tg-heading-font-family); font-weight: var(--tg-fw-medium); } .page-item.active span { background: var(--tg-theme-primary) !important; border: 1px solid var(--tg-theme-primary) !important; } .pagination__wrap ul li a:hover { color: var(--tg-common-color-white); background: var(--tg-theme-primary); } .pagination__wrap ul li.active a { color: var(--tg-common-color-white); background: var(--tg-theme-primary); } /*============================= 21. Newsletter ===============================*/ .newsletter__area { background: var(--tg-theme-primary); position: relative; padding: 35px 0 0; z-index: 1; overflow: hidden; } @media (max-width: 991.98px) { .newsletter__area { padding: 40px 0; } } .newsletter__img-wrap { position: relative; text-align: center; max-width: 430px; } @media (max-width: 991.98px) { .newsletter__img-wrap { display: none; } } .newsletter__img-wrap img:not(:nth-child(1)) { position: absolute; } .newsletter__img-wrap img:nth-child(2) { left: 5%; bottom: 0; z-index: -1; } @media (max-width: 1199.98px) { .newsletter__img-wrap img:nth-child(2) { left: 15%; } } .newsletter__img-wrap img:nth-child(3) { right: 16%; top: 18%; z-index: -1; } @media (max-width: 1199.98px) { .newsletter__img-wrap img:nth-child(3) { right: 5%; } } @media (max-width: 991.98px) { .newsletter__content { text-align: center; } } .newsletter__content .title { margin-bottom: 25px; color: var(--tg-common-color-white); font-size: 36px; font-weight: 400; text-transform: capitalize; line-height: 1.2; } @media (max-width: 1199.98px) { .newsletter__content .title { font-size: 34px; } } .newsletter__content .title span { font-weight: 700; } .newsletter__form { width: 80%; } @media (max-width: 1199.98px) { .newsletter__form { width: 100%; } } .newsletter__form form { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px; } @media (max-width: 767.98px) { .newsletter__form form { flex-wrap: wrap; justify-content: center; } } .newsletter__form form input { width: 100%; border: 1px solid var(--tg-common-color-dark-2); background: var(--tg-common-color-dark-2); -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; -ms-border-radius: 50px; border-radius: 50px; color: var(--tg-common-color-white); font-size: 16px; padding: 18px 20px; line-height: 1.4; height: 60px; flex-grow: 1; } .newsletter__form form input::placeholder { color: #9e9bf1; font-size: 16px; text-transform: capitalize; } .newsletter__form form .btn { background: var(--tg-theme-secondary); min-width: 198px; border: 1px solid #141109; padding: 20px 30px; color: var(--tg-heading-color); box-shadow: 4px 6px 0px 0px #3d3d3d; } .newsletter__form form .btn:hover { box-shadow: none; } .newsletter__shape img { position: absolute; right: 14%; top: 0; z-index: -1; } @media (max-width: 1500px) { .newsletter__shape img { right: 0; } } @media (max-width: 1199.98px) { .newsletter__shape img { display: none; } } /*============================= 15. Work ===============================*/ .work__images { margin: 0 auto; text-align: center; } @media (max-width: 991.98px) { .work__images { margin-bottom: 50px; } } .work__images .shape { right: 220px; } @media (max-width: 767.98px) { .work__images .shape { right: 88px; } } .work__content { width: 85%; } @media (max-width: 1199.98px) { .work__content { width: 100%; } } .work__content>p { margin-bottom: 25px; } .work__list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; margin: 0 -15px; } .work__list-box { width: 50%; flex: 0 0 auto; padding: 0 15px; margin-bottom: 30px; } .work__list-box-top { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 20px; align-items: center; margin-bottom: 18px; } @media (max-width: 1199.98px) { .work__list-box-top { display: block; } } .work__list-box-top .title { font-size: 20px; margin-bottom: 0; } .work__list-box .icon { width: 60px; height: 60px; flex: 0 0 auto; align-items: center; justify-content: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #ff6666; border: 1px solid #ce3b3b; font-size: 35px; line-height: 0; color: var(--tg-common-color-white); -webkit-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.25); -ms-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.25); -o-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.25); box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.25); } @media (max-width: 1199.98px) { .work__list-box .icon { margin-bottom: 20px; } } .work__list-box p { margin-bottom: 0; } .work__list-box:nth-child(2) .icon { background: #1bcbe3; border: 1px solid #019aaf; } /*============================= 22. Contact ===============================*/ .contact-info-wrap .list-wrap li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 40px 40px !important; margin-bottom: 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; border: 1px solid #e1e1e1; background: #f7f7fa; gap: 25px; } @media (max-width: 1199.98px) { .contact-info-wrap .list-wrap li { padding: 25px 25px; gap: 15px; flex-wrap: wrap; } } @media (max-width: 991.98px) { .contact-info-wrap .list-wrap li { flex-wrap: nowrap; } } @media (max-width: 767.98px) { /* .contact-info-wrap .list-wrap li { flex-direction: column; align-items: flex-start; } */ } @media (max-width: 767.98px) { /* .contact-info-wrap .list-wrap li { flex-direction: row; align-items: center; } */ } .contact-info-wrap .list-wrap li:last-child { margin-bottom: 0; } .contact-info-wrap .list-wrap li .icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tg-theme-primary); color: var(--tg-common-color-white); font-size: 20px; line-height: 0; flex: 0 0 auto; } .contact-info-wrap .list-wrap li .content .title { font-size: 20px; margin-bottom: 5px; } .contact-info-wrap .list-wrap li .content p { margin-bottom: 0; font-weight: 500; line-height: 1.4; } .contact-info-wrap .list-wrap li .content a { display: block; font-weight: 500; color: var(--tg-body-color); line-height: 1.4; } .contact-info-wrap .list-wrap li .content a:hover { color: var(--tg-theme-primary); } .contact-form-wrap { -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; -ms-border-radius: 12px; border-radius: 12px; border: 1px solid #e1e1e1; background: #f7f7fa; padding: 30px 40px 42px; } @media (max-width: 1199.98px) { .contact-form-wrap { padding: 30px 25px 40px; } } @media (max-width: 991.98px) { .contact-form-wrap { padding: 30px 30px 40px; margin-top: 60px; } } @media (max-width: 767.98px) { .contact-form-wrap { padding: 25px 20px 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .contact-form-wrap { padding: 30px 25px 40px; } } .contact-form-wrap .title { margin-bottom: 5px; position: relative; font-size: 30px; } @media (max-width: 1199.98px) { .contact-form-wrap .title { font-size: 28px; } } @media (max-width: 767.98px) { .contact-form-wrap .title { font-size: 24px; } } .contact-form-wrap p { margin-bottom: 15px; } .contact-form-wrap .form-grp { margin-bottom: 20px; } .contact-form-wrap .form-grp input, .contact-form-wrap .form-grp textarea { width: 100%; border: 1px solid #e1e4e7; border-radius: 5px; display: block; background: var(--tg-common-color-white); font-weight: 400; font-size: 16px; color: var(--tg-body-color); padding: 11px 20px; height: 50px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; cursor: text; } .contact-form-wrap .form-grp input::placeholder, .contact-form-wrap .form-grp textarea::placeholder { font-weight: 400; font-size: 16px; color: var(--tg-body-color); opacity: 0.8; } .contact-form-wrap .form-grp input:focus, .contact-form-wrap .form-grp textarea:focus { border-color: var(--tg-theme-primary); } .contact-form-wrap .form-grp textarea { min-height: 230px; max-height: 230px; } .contact-form-wrap .row { --bs-gutter-x: 20px; } .contact-map { width: 100%; height: 555px; margin-top: 70px; } @media (max-width: 1199.98px) { .contact-map { height: 430px; } } @media (max-width: 767.98px) { .contact-map { height: 380px; } } .contact-map iframe { width: 100%; height: 100%; filter: grayscale(1); -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; -ms-border-radius: 12px; border-radius: 12px; } .ajax-response.error, .ajax-response.success { margin: 20px 0 0 !important; } .ajax-response.error { color: red; } .ajax-response.success { color: green; } /*============================= 05. SignUp ===============================*/ .singUp-wrap { background: #f7f7fa; border: 1px solid #e1e1e1; border-radius: 8px; padding: 30px 50px 40px; } @media (max-width: 767.98px) { .singUp-wrap { padding: 30px 20px 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .singUp-wrap { padding: 30px 30px 30px; } } .singUp-wrap .title { font-size: 36px; margin-bottom: 10px; } @media (max-width: 767.98px) { .singUp-wrap .title { font-size: 26px; } } .singUp-wrap p { margin-bottom: 25px; } @media (max-width: 767.98px) { .singUp-wrap p br { display: none; } } .account__social-btn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: var(--tg-common-color-white); border: 1px solid #e1e1e1; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; font-size: 16px; gap: 10px; color: var(--tg-common-color-dark); padding: 10px 20px; } .account__social-btn:hover { color: var(--tg-theme-primary); border-color: var(--tg-theme-primary); } .account__divider { position: relative; text-align: center; padding-block-end: 35px; margin-block-start: 35px; } .account__divider::before { content: ""; height: 1px; width: 100%; left: 0; top: 0; background: #e1e1e1; position: absolute; } .account__divider span { font-size: 16px; color: var(--tg-heading-color); padding: 20px; top: -35px; left: 45%; position: absolute; background: #f7f7fa; } .account__form .form-grp { margin-bottom: 20px; } .account__form .form-grp label { font-size: 18px; font-weight: 600; line-height: 1; margin-bottom: 10px; } .account__form .form-grp input { width: 100%; padding: 14px 20px; font-size: 16px; color: var(--tg-heading-color); border: 1px solid #e1e1e1; background: var(--tg-common-color-white); -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; line-height: 1; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .account__form .form-grp input::placeholder { font-weight: 400; font-size: 16px; color: var(--tg-body-color); opacity: 0.8; text-transform: capitalize; } .account__form .form-grp input:focus { border-color: var(--tg-theme-primary); } .account__form .btn { width: 100%; justify-content: center; margin-top: 30px; } .account__switch { margin-top: 30px; } .account__switch p { margin-bottom: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 5px; } .account__switch p a { color: var(--tg-theme-primary); text-decoration: underline; } .account__switch p a:hover { color: var(--tg-theme-secondary); } .account__check { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 15px; justify-content: space-between; } .account__check-remember { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 5px; } .account__check-remember input { width: 20px; height: 20px; margin-inline-end: 3px; } .account__check-remember input:focus { box-shadow: none; } .account__check-remember input:checked { background-color: var(--tg-theme-primary); border-color: var(--tg-theme-primary); } .account__check-remember label { user-select: none; } .account__check-forgot a { color: var(--tg-theme-primary); font-size: 16px; text-decoration: underline; } .account__check-forgot a:hover { color: var(--tg-theme-primary); } /*============================= 15. Check Out ===============================*/ .coupon__code-info { background: #f5f5f5; padding: 20px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 5px; margin-bottom: 25px; } @media (max-width: 767.98px) { .coupon__code-info { flex-wrap: wrap; } } .coupon__code-info a:hover { text-decoration: underline; color: var(--tg-theme-primary); } .coupon__code-form { margin-bottom: 35px; } .coupon__code-form p { margin-bottom: 15px; } .coupon__code-form input { width: 100%; background: #f5f5f5; height: 55px; border: none; color: var(--tg-heading-color); padding: 0 20px; border-radius: 30px; margin-bottom: 15px; } .customer__form-wrap { border: 1px solid #ebebeb; padding: 30px; } @media (max-width: 767.98px) { .customer__form-wrap { padding: 25px 20px; } } .customer__form-wrap .title { display: block; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid #ebebeb; color: var(--tg-heading-color); font-family: var(--tg-heading-font-family); line-height: 1; } @media (max-width: 767.98px) { .customer__form-wrap .title { font-size: 1.3rem; } } .customer__form-wrap .title.title-two { margin-top: 20px; } .customer__form-wrap .form-grp { margin-bottom: 15px; } .customer__form-wrap .form-grp.select-grp { position: relative; } .customer__form-wrap .form-grp.select-grp::after { content: "\f078"; position: absolute; bottom: 13px; font-family: "Font Awesome 5 Free"; font-weight: 700; right: 20px; font-size: 14px; color: var(--tg-theme-primary); } .customer__form-wrap .form-grp label { display: block; margin-bottom: 5px; font-size: 15px; color: var(--tg-body-color); } .customer__form-wrap .form-grp textarea, .customer__form-wrap .form-grp input { width: 100%; color: var(--tg-heading-color); height: 53px; padding: 0 20px; background: #f5f5f5; border: none; } .customer__form-wrap .form-grp textarea { padding: 10px 20px 0; min-height: 120px; max-height: 120px; } .customer__form-wrap .form-grp select { background-color: #f5f5f5; border: none; color: var(--tg-heading-color); font-weight: 400; font-size: 16px; text-transform: capitalize; border-radius: 0; outline: none; padding: 12px 37px 9px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; line-height: 1.2; height: 53px; cursor: pointer; } .order__info-wrap { border: 2px solid var(--tg-theme-primary); height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 30px; } @media (max-width: 991.98px) { .order__info-wrap { margin-top: 50px; } } @media (max-width: 767.98px) { .order__info-wrap { padding: 25px 20px; } } .order__info-wrap>.title { font-size: 1.5rem; font-weight: 700; text-transform: uppercase; padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid #ebebeb; } .order__info-wrap .list-wrap { margin-bottom: 20px; } .order__info-wrap .list-wrap li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ebebeb; color: var(--tg-body-color); font-weight: 600; font-size: 15px; gap: 8px; padding: 12px 0; } .order__info-wrap .list-wrap li span { color: var(--tg-heading-color); display: block; line-height: 1; font-weight: 700; } .order__info-wrap .list-wrap li.title span { color: var(--tg-body-color); } .order__info-wrap .list-wrap li:last-child span { font-size: 1.25rem; } .order__info-wrap p { margin-bottom: 15px; } .order__info-wrap p a { text-decoration: underline; } .order__info-wrap p a:hover { color: var(--tg-theme-primary); } .order__info-wrap .btn { width: 100%; margin-top: 10px; text-align: center; } /*============================= 15. Cart ===============================*/ .cart__table thead th { padding: 12px 12px; font-size: 15px; font-weight: 600; } @media (max-width: 767.98px) { .cart__table thead th.product__subtotal, .cart__table thead th.product__price { display: none; } } .cart__table tbody tr { position: relative; } .cart__table tbody td { padding: 12px 17px; text-align: left; line-height: 1.1; border: none; border-top: 1px solid #ebebeb; vertical-align: middle; color: var(--tg-body-color); } @media (max-width: 767.98px) { .cart__table tbody td { padding: 12px 10px; } } .cart__table tbody td:first-child { padding-left: 0; } .cart__table tbody td a { color: var(--tg-theme-primary); } .cart__table tbody td.product__name { font-weight: 500; } .cart__table tbody td.product__remove { padding-right: 5px; text-align: right; } .cart__table tbody td.product__remove a { font-size: 25px; } .cart__table tbody td.product__quantity { text-align: right; padding-right: 0; } .cart__table .product__thumb img { max-width: 70px; } @media (max-width: 767.98px) { .cart__table .product__price { display: none; } } @media (max-width: 767.98px) { .cart__table .product__remove a { position: absolute; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; color: #fff; background-color: red; font-size: 15px !important; left: 0; margin-top: -10px; } } @media (max-width: 767.98px) { .cart__table .product__subtotal { display: none; } } .cart__table .product__remove { padding: 0 !important; width: 0 !important; } .cart__actions { padding-top: 25px !important; padding-bottom: 10px !important; padding-right: 0 !important; } .cart__actions-form { display: inline-flex; align-items: center; gap: 10px; } @media (max-width: 767.98px) { .cart__actions-form { width: 100%; } } .cart__actions-form input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; margin-bottom: 0; height: 50px; background: #f5f5f5; color: var(--tg-heading-color); padding: 0 20px; border: 0; border-radius: 30px; padding-right: 0; } .cart__collaterals-wrap { border: 1px solid #ebebeb; border-radius: 0; padding: 1.25rem; height: 100%; margin-left: 50px; } @media (max-width: 1199.98px) { .cart__collaterals-wrap { margin-left: 0; } } @media (max-width: 991.98px) { .cart__collaterals-wrap { margin-top: 50px; } } .cart__collaterals-wrap .title { font-size: 1.5rem; font-weight: 700; text-transform: uppercase; padding-bottom: 0.9375rem; border-bottom: 1px solid #ebebeb; } .cart__collaterals-wrap .list-wrap { padding-bottom: 0.9375rem; } .cart__collaterals-wrap .list-wrap li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px; justify-content: space-between; border-bottom: 1px solid #ebebeb; color: var(--tg-heading-color); font-size: 15px; font-weight: 600; padding: 12px 5px; } .cart__collaterals-wrap .list-wrap li span { color: var(--tg-body-color); font-weight: 400; } .cart__collaterals-wrap .list-wrap li span.amount { font-weight: 600; color: var(--tg-heading-color); font-size: 1.25rem; } .cart__collaterals-wrap .btn { width: 100%; text-align: center; justify-content: center; } .f-right { float: right; } @media (max-width: 767.98px) { .f-right { float: none; } } @media (max-width: 767.98px) { .update__cart-btn { text-align: center !important; width: 100%; margin-top: 20px; } } @media (max-width: 767.98px) { .update__cart-btn .btn { width: 100%; text-align: center; justify-content: center; } } /*============================= 15. Dashboard ===============================*/ .dashboard__area { margin-top: -100px; position: relative; z-index: 2; } .dashboard__top-wrap { position: relative; } .dashboard__top-bg { background-size: cover; background-position: center center; position: relative; margin-bottom: 30px; border-radius: 10px; min-height: 205px; z-index: 1; } .dashboard__top-bg::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; display: block; z-index: -1; content: ""; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5) 90%); transition: opacity 0.65s cubic-bezier(0.05, 0.2, 0.1, 1); cursor: pointer; border-radius: 10px; -webkit-transition: opacity 0.65s cubic-bezier(0.05, 0.2, 0.1, 1); -moz-transition: opacity 0.65s cubic-bezier(0.05, 0.2, 0.1, 1); -ms-transition: opacity 0.65s cubic-bezier(0.05, 0.2, 0.1, 1); -o-transition: opacity 0.65s cubic-bezier(0.05, 0.2, 0.1, 1); } .dashboard__instructor-info { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-end; gap: 20px; justify-content: space-between; position: absolute; padding: 45px 40px 40px; left: 0; bottom: 0; right: 0; z-index: 1; background-color: #00000026; border-radius: 10px; } @media (max-width: 991.98px) { .dashboard__instructor-info { padding: 0 30px 30px; } } @media (max-width: 767.98px) { .dashboard__instructor-info { flex-wrap: wrap; padding: 0 20px 30px; gap: 15px; } } .dashboard__instructor-info-left { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 20px; } @media (max-width: 767.98px) { .dashboard__instructor-info-left { flex-wrap: wrap; gap: 8px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .dashboard__instructor-info-left { gap: 20px; } } .dashboard__instructor-info-left .thumb { width: 120px; height: 120px; } .dashboard__instructor-info-left .thumb img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; width: 100% !important; height: 100% !important; object-fit: cover !important; background: var(--tg-common-color-white); border: 2px solid var(--tg-common-color-white); padding: 4px; } .dashboard__instructor-info-left .content .title { font-size: 20px; color: var(--tg-common-color-white); margin-bottom: 12px; text-transform: capitalize; } @media (max-width: 767.98px) { .dashboard__instructor-info-left .content .title { font-size: 18px; margin-bottom: 8px; } } .dashboard__instructor-info-left .content .list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 15px; } .dashboard__instructor-info-left .content .list-wrap li { color: var(--tg-common-color-white); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 5px; } @media (max-width: 767.98px) { .dashboard__instructor-info-left .content .list-wrap li { font-size: 13px; } } .dashboard__instructor-info-left .content .list-wrap li svg { color: var(--tg-common-color-white); width: 18px; height: 18px; } @media (max-width: 767.98px) { .dashboard__instructor-info-left .content .list-wrap li svg { width: 16px; height: 16px; } } .dashboard__instructor-info-right { margin-bottom: 20px; } @media (max-width: 767.98px) { .dashboard__instructor-info-right { margin-bottom: 0; } } .dashboard__sidebar-wrap { padding: 30px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; box-shadow: 0px 6px 34px rgba(215, 216, 222, 0.41); background: var(--tg-common-color-white); overflow: hidden; border: 4px solid #d9d9f3; position: sticky; top: 120px; } @media (max-width: 1199.98px) { .dashboard__sidebar-wrap { padding: 20px 15px; } } @media (max-width: 991.98px) { .dashboard__sidebar-wrap { padding: 30px; } } @media (max-width: 767.98px) { .dashboard__sidebar-wrap { padding: 25px 20px; } } .dashboard__sidebar-title .title { margin-bottom: 0; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; opacity: 0.5; } .dashboard__sidebar-menu .list-wrap li { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #d3d2df; } .dashboard__sidebar-menu .list-wrap li:last-child { border: none; margin-bottom: 0; padding-bottom: 0; } .dashboard__sidebar-menu .list-wrap li a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 10px; color: var(--tg-body-color); font-size: 16px; font-weight: 500; } .dashboard__sidebar-menu .list-wrap li a i { line-height: 0; font-size: 18px; } .dashboard__sidebar-menu .list-wrap li a:hover { color: var(--tg-theme-primary); } .dashboard__sidebar-menu .list-wrap li.active a { color: var(--tg-theme-primary); } .dashboard__content-wrap { background: var(--tg-common-color-white); border-radius: 6px; box-shadow: 0px 6px 34px rgba(215, 216, 222, 0.41); padding: 30px; overflow: hidden; } @media (max-width: 1199.98px) { .dashboard__content-wrap { padding: 30px 20px; } } @media (max-width: 991.98px) { .dashboard__content-wrap { margin-top: 40px; } } .dashboard__content-wrap-two { padding: 30px 30px 0 30px; } @media (max-width: 1199.98px) { .dashboard__content-wrap-two { padding: 30px 20px 0 20px; } } .dashboard__content-wrap .row>*:nth-child(2) .dashboard__counter-item { background: rgba(185, 102, 231, 0.1294117647); } .dashboard__content-wrap .row>*:nth-child(2) .dashboard__counter-item .icon { color: #b966e7; background: rgba(185, 102, 231, 0.1294117647); } .dashboard__content-wrap .row>*:nth-child(2) .dashboard__counter-item .content .count { color: #b966e7; } .dashboard__content-wrap .row>*:nth-child(2) .dashboard__counter-item .content p { color: #b966e7; } .dashboard__content-wrap .row>*:nth-child(3) .dashboard__counter-item { background: rgba(128, 0, 128, 0.1294117647); } .dashboard__content-wrap .row>*:nth-child(3) .dashboard__counter-item .icon { color: #800080; background: rgba(128, 0, 128, 0.1294117647); } .dashboard__content-wrap .row>*:nth-child(3) .dashboard__counter-item .content .count { color: #800080; } .dashboard__content-wrap .row>*:nth-child(3) .dashboard__counter-item .content p { color: #800080; } .dashboard__content-wrap .row>*:nth-child(4) .dashboard__counter-item { background: rgba(219, 112, 147, 0.1294117647); } .dashboard__content-wrap .row>*:nth-child(4) .dashboard__counter-item .icon { color: #db7093; background: rgba(219, 112, 147, 0.1294117647); } .dashboard__content-wrap .row>*:nth-child(4) .dashboard__counter-item .content .count { color: #db7093; } .dashboard__content-wrap .row>*:nth-child(4) .dashboard__counter-item .content p { color: #db7093; } .dashboard__content-wrap .row>*:nth-child(5) .dashboard__counter-item { background: rgba(233, 150, 122, 0.1294117647); } .dashboard__content-wrap .row>*:nth-child(5) .dashboard__counter-item .icon { color: #e9967a; background: rgba(233, 150, 122, 0.1294117647); } .dashboard__content-wrap .row>*:nth-child(5) .dashboard__counter-item .content .count { color: #e9967a; } .dashboard__content-wrap .row>*:nth-child(5) .dashboard__counter-item .content p { color: #e9967a; } .dashboard__content-wrap .row>*:nth-child(6) .dashboard__counter-item { background: rgba(255, 143, 60, 0.062745098); } .dashboard__content-wrap .row>*:nth-child(6) .dashboard__counter-item .icon { color: #ff8f3c; background: rgba(255, 143, 60, 0.062745098); } .dashboard__content-wrap .row>*:nth-child(6) .dashboard__counter-item .content .count { color: #ff8f3c; } .dashboard__content-wrap .row>*:nth-child(6) .dashboard__counter-item .content p { color: #ff8f3c; } .dashboard__content-title .title { margin-bottom: 25px; font-size: 20px; text-transform: capitalize; padding-bottom: 20px; border-bottom: 2px solid rgba(230, 227, 241, 0.31); } .dashboard__counter-item { background: rgba(47, 87, 239, 0.13); border-radius: 5px; text-align: center; padding: 30px 30px 50px; z-index: 1; overflow: hidden; position: relative; border: 2px dashed #e6e3f1; transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0px 6px 34px rgba(215, 216, 222, 0.41); margin-bottom: 30px; -webkit-transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1); -moz-transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1); -ms-transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1); } @media (max-width: 1199.98px) { .dashboard__counter-item { padding: 30px 20px; } } .dashboard__counter-item:hover { transform: translateY(-3px); } .dashboard__counter-item .icon { position: relative; background: rgba(47, 87, 239, 0.13); width: 100px; height: 100px; padding: 25px; border-radius: 100%; display: flex; align-items: center; justify-content: center; box-shadow: 0 13px 14px 0 rgba(129, 104, 145, 0.05); margin: 0 auto 25px; font-size: 30px; line-height: 0; color: #5751e1; } .icon-container, #basic-addon1 { background-color: var(--tg-theme-primary) !important; } div.switcher label input:checked+span, .form-check-input:checked { background-color: var(--tg-theme-primary) !important; border-color: var(--tg-theme-primary) !important; } .accordion-button.course-section-btn:focus, .form-control:focus { border: none; box-shadow: none; } .dashboard__counter-item .content .count { margin-bottom: 10px; font-family: var(--tg-heading-font-family); font-size: 50px; font-weight: 700; color: #5751e1; line-height: 1; } @media (max-width: 1199.98px) { .dashboard__counter-item .content .count { font-size: 35px; } } .dashboard__counter-item .content p { margin-bottom: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.5; color: #5751e1; } .invoice hr { display: none; } .dashboard__review-table .table { margin-bottom: 0; } @media (max-width: 767.98px) { .dashboard__review-table .table { min-width: 780px; } } .dashboard__review-table thead { vertical-align: middle; } .dashboard__review-table thead th { color: var(--tg-heading-color); font-weight: 700; font-size: 16px; background: rgba(47, 87, 239, 0.1294117647); padding: 10px 20px; border: none; } @media (max-width: 1199.98px) { .dashboard__review-table thead th { padding: 10px 10px; } } .dashboard__review-table tbody tr:nth-child(even) td { background: var(--tg-common-color-gray); } .dashboard__review-table tbody tr td { padding: 10px 20px; border: none; vertical-align: middle; } @media (max-width: 1199.98px) { .dashboard__review-table tbody tr td { padding: 10px 10px; } } .dashboard__review-table tbody tr td>a { color: var(--tg-heading-color); font-weight: 500; background: var(--tg-common-color-gray-2); display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 50%; font-size: 12px; } .dashboard__review-table tbody tr td>a:first-child { background: var(--tg-theme-primary); color: var(--tg-common-color-white) !important; } .dashboard__review-table tbody tr td>a:last-child { background: var(--tg-theme-primary); color: var(--tg-common-color-white) !important; } .dashboard__review-table tbody tr td>a:hover { color: var(--tg-theme-primary); } .dashboard__review-table tbody tr td p { margin-bottom: 0; } .dashboard__review-table tbody tr td p.color-black { color: var(--tg-heading-color); } .dashboard__review-table tbody tr td .course-feedback { color: var(--tg-body-color); } .dashboard__review-table tbody tr td .course-feedback a { color: var(--tg-heading-color); font-weight: 500; font-size: 15px; } .dashboard__review-table tbody tr td .course-feedback a:hover { color: var(--tg-theme-primary); } .dashboard__review-action { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 20px; justify-content: flex-end; } @media (max-width: 1199.98px) { .dashboard__review-action { gap: 10px; } } .dashboard__review-action a { height: 30px; line-height: 0; font-size: 14px; padding: 0 14px; background: rgba(47, 87, 239, 0.1294117647); color: var(--tg-theme-primary); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; } .dashboard__review-action a:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); transform: translateY(-2px); } .dashboard__review-action a:nth-child(2) { color: #ff0003; background: rgba(255, 0, 3, 0.062745098); } .dashboard__review-action a:nth-child(2):hover { background: #ff0003; color: var(--tg-common-color-white); } .dashboard__quiz-info .title { margin-bottom: 0; font-size: 16px; font-family: var(--tg-body-font-family); font-weight: 500; } .dashboard__quiz-info span { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 5px; color: var(--tg-body-color); } .dashboard__quiz-info span a { color: var(--tg-heading-color); } .dashboard__quiz-info span a:hover { color: var(--tg-theme-primary); } .dashboard__quiz-result { background: rgba(62, 183, 94, 0.062745098); padding: 5px 7px; font-size: 12px; display: flex; height: 22px; align-items: center; border-radius: 6px; justify-content: center; width: max-content; color: #3eb75e; } .dashboard__quiz-result.fail { background: rgba(255, 0, 3, 0.062745098); color: #ff0003; } .dashboard__quiz-result.processing { background: rgba(47, 87, 239, 0.1294117647); color: #2f57ef; } .dashboard__quiz-result.hold { background: rgba(255, 143, 60, 0.062745098); color: #ff8f3c; } .dashboard__nav-wrap .nav-tabs { border-bottom: 3px solid #d9d9f3; gap: 5px 30px; flex-wrap: wrap; margin: 0; margin-bottom: 30px; } @media (max-width: 767.98px) { .dashboard__nav-wrap .nav-tabs { justify-content: center; } } .dashboard__nav-wrap .nav-tabs .nav-link { font-weight: var(--tg-fw-medium); color: #7f7e97; border: none; position: relative; background: transparent; padding: 16px 15px; } .dashboard__nav-wrap .nav-tabs .nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; right: 0; width: 0; height: 3px; background: var(--tg-theme-primary); -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; margin: 0 auto; z-index: 1; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .dashboard__nav-wrap .nav-tabs .nav-link.active { color: var(--tg-theme-primary); } .dashboard__nav-wrap .nav-tabs .nav-link.active::after { width: 100%; } .profile__content-wrap .list-wrap li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 4px 30px; font-size: 18px; line-height: 1.6; margin-bottom: 18px; } .instructor__profile-form.course-form label { display: block; font-size: 14px; margin-bottom: 10px; font-weight: 600; text-transform: capitalize; color: var(--tg-heading-color); font-family: var(--tg-heading-font-family); } .instructor__profile-form.course-form .filter-holder .card { border: 2px solid #e6e3f1; margin-top: 20px; } .instructor__profile-form.course-form .select2-container--default .select2-selection--single { border: 2px solid #e6e3f1; height: 50px !important; border-radius: 6px; } .instructor__profile-form.course-form .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: 20px; } .instructor__profile-form.course-form .select2-container--default .select2-selection--single .select2-selection__arrow b { margin-left: -15px; margin-top: 9px; } .instructor__profile-form-wrap .from-group .form-control.file-manager-input { border: 2px solid #e6e3f1; } .instructor__profile-form.course-form .tox-tinymce { border: 2px solid #e6e3f1; } @media (max-width: 767.98px) { .profile__content-wrap .list-wrap li { flex-direction: column; font-size: 16px; } } .profile__content-wrap .list-wrap li span { min-width: 290px; } @media (max-width: 1199.98px) { .profile__content-wrap .list-wrap li span { min-width: 220px; } } .profile__content-wrap .list-wrap li:last-child { margin-bottom: 0; } .review__wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 5px; } .review__wrap .rating { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 13px; color: var(--tg-common-color-yellow); } .review__wrap span { font-size: 14px; font-weight: 500; } .review__wrap-two span { color: var(--tg-common-color-white); } .instructor__cover-bg { position: relative; background-size: cover; background-position: center center; min-height: 203px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; margin-bottom: 30px; } .instructor__cover-info { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 0 40px 30px; position: absolute; left: 0; right: 0; bottom: 0; } @media (max-width: 767.98px) { .instructor__cover-info { padding: 0 25px 25px; } } .instructor__cover-info-left { position: relative; } .instructor__cover-info-left .thumb { width: 120px; height: 120px; } .instructor__cover-info-left .thumb img { border-radius: 50%; width: 100%; background: var(--tg-common-color-white); border: 2px solid var(--tg-common-color-white); padding: 4px; } .instructor__cover-info-left button { position: absolute; right: 10px; bottom: 25px; width: 40px; height: 40px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: var(--tg-common-color-white); border: none; color: var(--tg-theme-primary); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; font-size: 14px; padding: 0; } .instructor__cover-info-left button:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .instructor__profile-form .form-grp { margin-bottom: 15px; } .instructor__profile-form .form-grp label { display: block; font-size: 14px; margin-bottom: 10px; font-weight: 600; text-transform: capitalize; color: var(--tg-heading-color); font-family: var(--tg-heading-font-family); } .instructor__profile-form .form-grp textarea, .instructor__profile-form .form-grp input { width: 100%; background: transparent; border: 2px solid #e6e3f1; border-radius: 6px; line-height: 23px; padding: 10px 20px; font-size: 14px; color: var(--tg-heading-color); height: 50px; display: block; transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; } .instructor__profile-form .form-grp textarea:focus, .instructor__profile-form .form-grp input:focus { border-color: var(--tg-theme-primary); } .instructor__profile-form .form-grp textarea::placeholder, .instructor__profile-form .form-grp input::placeholder { font-size: 14px; } .instructor__profile-form .form-grp textarea { min-height: 140px; max-height: 140px; } .instructor__profile-form .form-grp select { background-color: transparent; border: 2px solid #e6e3f1; color: var(--tg-heading-color); font-weight: 400; font-size: 16px; text-transform: capitalize; border-radius: 6px; outline: none; padding: 10px 37px 10px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; line-height: 1.2; height: 50px; cursor: pointer; transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; } .instructor__profile-form .form-grp select:focus { border-color: var(--tg-theme-primary); } .instructor__profile-form .form-grp.select-grp { position: relative; } .instructor__profile-form .form-grp.select-grp::after { content: "\f078"; position: absolute; bottom: 13px; font-family: "Font Awesome 5 Free"; font-weight: 700; right: 20px; font-size: 14px; color: var(--tg-theme-primary); } .load-more-btn .link-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--tg-heading-color); font-weight: 600; } .load-more-btn .link-btn svg { width: 14px; height: 14px; } .load-more-btn .link-btn:hover { color: var(--tg-theme-primary); } /*============================= 15. Lesson ===============================*/ .lesson__content>.title { margin-bottom: 20px; font-size: 20px; padding: 17px 20px; border-bottom: 1px solid #dcdceb; } .lesson__content .accordion-item { border: none; background: transparent; } .lesson__content .accordion-button { border: none; box-shadow: none; font-size: 16px; color: var(--tg-heading-color); padding: 18px 50px 18px 20px; font-weight: 500; border-bottom: 1px solid #dcdceb; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .lesson__content .accordion-button span { margin-left: auto; font-size: 14px; } .lesson__content .accordion-button:not(.collapsed) { background: transparent; color: var(--tg-theme-primary); } .lesson__content .accordion-button:not(.collapsed)::after { content: "\f068"; } .lesson__content .accordion-button::after { content: "\f067"; font-family: var(--tg-icon-font-family); font-weight: 700; background-image: none; width: auto; height: auto; position: absolute; right: 20px; top: 17px; font-size: 16px; } .lesson__content .accordion-body { padding: 0; } .lesson__content .course-item { padding: 13px 20px; background: #f8f8ff; margin-bottom: 2px; } .lesson__content .course-item-link { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--tg-common-color-dark); cursor: no-drop; } .lesson__content .course-item-link .item-name { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 10px; align-items: center; } .lesson__content .course-item-link .item-name::before { content: ""; display: block; background-image: url(../img/icons/play.svg); width: 30px; height: 30px; flex: 0 0 auto; } .lesson__content .course-item-link.active { color: var(--tg-theme-primary); cursor: pointer; } .lesson__content .course-item-meta { margin-left: auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; line-height: 1; gap: 10px; flex: 0 0 auto; } .lesson__content .course-item-meta .duration { margin: 2px 0 0; } .lesson__video-wrap { margin-bottom: 40px; position: relative; } .lesson__video-wrap:hover .lesson__next-prev-button button { opacity: 1; visibility: visible; } .lesson__video-wrap-top { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; background: var(--tg-theme-primary); padding: 13px 20px; justify-content: space-between; gap: 10px; } .lesson__video-wrap-top-left { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 20px; } .lesson__video-wrap-top-left a { width: 35px; height: 35px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1294117647); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; color: var(--tg-common-color-white); flex: 0 0 auto; } .lesson__video-wrap-top-left a i { transform: rotate(180deg); } .lesson__video-wrap-top-left span { display: block; color: var(--tg-common-color-white); font-size: 18px; font-weight: 500; font-family: var(--tg-heading-font-family); } @media (max-width: 767.98px) { .lesson__video-wrap-top-left span { font-size: 16px; } } .lesson__video-wrap-top-right a { width: 35px; height: 35px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1294117647); color: var(--tg-common-color-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; flex: 0 0 auto; } .lesson__video-wrap .plyr__poster { background-size: cover; } .lesson__video-wrap .plyr__control--overlaid { padding: 24px; background: var(--tg-theme-primary); } .lesson__video-wrap .plyr__control--overlaid:hover { background: var(--tg-theme-secondary); } .lesson__details-content { margin-right: 50px; } @media (max-width: 991.98px) { .lesson__details-content { margin: 0 30px; } } @media (max-width: 767.98px) { .lesson__details-content { margin: 0 15px; } } .lesson__next-prev-button button { position: absolute; left: 20px; top: 50%; transform: translateY(-50%) rotate(180deg); width: 40px; height: 40px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: rgba(255, 255, 255, 0.1294117647); color: var(--tg-common-color-white); line-height: 0; font-size: 18px; border: 1px solid rgba(255, 255, 255, 0.27); opacity: 0; visibility: hidden; } .lesson__next-prev-button button.next-button { left: auto; right: 20px; transform: translateY(-50%) rotate(0deg); } .lesson__next-prev-button button:hover { background: var(--tg-theme-primary); border-color: var(--tg-theme-primary); } .plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded="true"] { background: var(--tg-theme-primary); } .plyr--full-ui input[type="range"] { color: var(--tg-theme-primary); } /*============================= 23. 404 Error ===============================*/ .error-area { padding: 120px 0; } @media (max-width: 1500px) { .error-area { padding: 100px 0; } } .error-img { text-align: center; width: 648px; height: 323px; margin: 0 auto 65px; } @media (max-width: 1500px) { .error-img { margin-bottom: 45px; } } @media (max-width: 991.98px) { .error-img { margin-bottom: 40px; } } @media (max-width: 767.98px) { .error-img { margin-bottom: 30px; width: 100%; height: 100%; } } .error-img svg { width: 100%; height: 100%; color: var(--tg-theme-secondary); } .error-content .title { margin-bottom: 60px; font-weight: 600; font-size: 40px; } @media (max-width: 1199.98px) { .error-content .title { margin-bottom: 35px; font-size: 35px; } } @media (max-width: 767.98px) { .error-content .title { font-size: 30px; margin-bottom: 30px; } } .error-content .title span { display: block; margin-top: 10px; } @media (max-width: 767.98px) { .error-content .title span { margin-top: 5px; } } .error-content .tg-button-wrap { justify-content: center; } /*============================= 24. Footer ===============================*/ .footer__area { background: var(--tg-common-color-black); } .footer__area-two { margin-top: -160px; background: var(--tg-common-color-black); } .footer__area-two .footer__top { padding: 250px 0 60px; } .footer__top { padding: 100px 0 60px; } .footer__area.footer__area-two .footer__top { padding-top: 230px; } @media (max-width: 767.98px) { .footer__top { padding: 80px 0 40px; } } .footer__top .row [class*="col-"]:nth-child(2) .footer__widget { margin-left: 60px; } @media (max-width: 991.98px) { .footer__top .row [class*="col-"]:nth-child(2) .footer__widget { margin-left: 0; } } .footer__top .row [class*="col-"]:nth-child(3) .footer__widget { margin-left: 60px; } @media (max-width: 991.98px) { .footer__top .row [class*="col-"]:nth-child(3) .footer__widget { margin-left: 0; } } .footer__widget { margin-bottom: 35px; } .footer__widget-title { color: var(--tg-common-color-white); font-size: 22px; font-weight: 600; position: relative; padding-bottom: 20px; margin-bottom: 20px; } .footer__widget-title::before { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 4px; border-radius: 2px; background: var(--tg-theme-primary); } .footer__content p { margin-bottom: 12px; color: var(--tg-common-color-gray-5); width: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer__content p { width: 100%; } } .footer__content .list-wrap li { color: var(--tg-common-color-gray-5); font-weight: 500; margin-bottom: 7px; } .footer__content .list-wrap li:last-child { margin-bottom: 0; } .footer__link .list-wrap li { margin-bottom: 10px; } .footer__link .list-wrap li:last-child { margin-bottom: 0; } .footer__link .list-wrap li a { font-size: 16px; font-weight: 500; color: var(--tg-common-color-gray-5); position: relative; } .footer__link .list-wrap li a::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: currentColor; transform-origin: right top; transform: scale(0, 1); transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24); -webkit-transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24); -moz-transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24); -ms-transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24); -o-transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24); } .footer__link .list-wrap li a:hover { color: var(--tg-theme-secondary); } .footer__link .list-wrap li a:hover::before { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .footer__contact-content p { margin-bottom: 10px; color: var(--tg-common-color-gray-5); } .footer__social { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 15px; margin-bottom: 35px; } .footer__social li a { color: var(--tg-common-color-gray-5); } .footer__social li a:hover { color: var(--tg-theme-secondary); } .footer__bottom { background: var(--tg-common-color-dark); padding: 35px 0; } @media (max-width: 991.98px) { .footer__bottom { padding: 25px 0; } } .footer__bottom-menu .list-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-end; gap: 32px; } @media (max-width: 767.98px) { .footer__bottom-menu .list-wrap { justify-content: center; } } .footer__bottom-menu .list-wrap li a { color: #8c9ab4; position: relative; } .footer__bottom-menu .list-wrap li a::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: currentColor; transform-origin: right top; transform: scale(0, 1); transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24); -webkit-transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24); -moz-transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24); -ms-transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24); -o-transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24); } .footer__bottom-menu .list-wrap li a::after { content: ""; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); width: 2px; height: 12px; background: #8c9ab4; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .footer__bottom-menu .list-wrap li a:hover { color: var(--tg-theme-secondary); } .footer__bottom-menu .list-wrap li a:hover::before { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); } .footer__bottom-menu .list-wrap li:last-child a::after { display: none; } .app-download { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 8px; } .app-download a img { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .copy-right-text p { margin-bottom: 0; color: #8c9ab4; } @media (max-width: 767.98px) { .copy-right-text p { margin-bottom: 5px; text-align: center; } } /*============================= 00. Keyframe Animation ===============================*/ @-webkit-keyframes hoverShine { 100% { left: 125%; } } @keyframes hoverShine { 100% { left: 125%; } } .rotateme { -webkit-animation-name: rotateme; animation-name: rotateme; -webkit-animation-duration: 180s; animation-duration: 180s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @keyframes rotateme { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @-webkit-keyframes rotateme { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .alltuchtopdown { -webkit-animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate; animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate; animation-duration: 3s; } @keyframes alltuchtopdown { 0% { -webkit-transform: rotateX(0deg) translateY(0px); -moz-transform: rotateX(0deg) translateY(0px); -ms-transform: rotateX(0deg) translateY(0px); -o-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(-20px); -moz-transform: rotateX(0deg) translateY(-20px); -ms-transform: rotateX(0deg) translateY(-20px); -o-transform: rotateX(0deg) translateY(-20px); transform: rotateX(0deg) translateY(-20px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); -moz-transform: rotateX(0deg) translateY(0px); -ms-transform: rotateX(0deg) translateY(0px); -o-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @-webkit-keyframes alltuchtopdown { 0% { -webkit-transform: rotateX(0deg) translateY(0px); -moz-transform: rotateX(0deg) translateY(0px); -ms-transform: rotateX(0deg) translateY(0px); -o-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(-20px); -moz-transform: rotateX(0deg) translateY(-20px); -ms-transform: rotateX(0deg) translateY(-20px); -o-transform: rotateX(0deg) translateY(-20px); transform: rotateX(0deg) translateY(-20px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); -moz-transform: rotateX(0deg) translateY(0px); -ms-transform: rotateX(0deg) translateY(0px); -o-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } /*# sourceMappingURL=main.css.map */ @media (min-width: 1600px) and (max-width: 1800px) { header .xl_container { max-width: 1500px; } } @media (min-width: 1400px) and (max-width: 1600px) { header .xl_container { max-width: 1300px; } } @media (min-width: 1200px) and (max-width: 1400px) { header .xl_container { max-width: 1080px; } } /*================================ COURSE VIDEO START ================================*/ .wsus__course_header { background: var(--tg-theme-primary); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; position: fixed; width: 100%; padding: 18px 30px; top: 0; left: 0; z-index: 9; } .wsus__course_header a, .wsus__course_header p { color: var(--tg-common-color-white); font-size: 16px; font-weight: 500; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; margin: 0; } .wsus__course_header a i { margin-right: 5px; } .wsus__course_header a:hover { color: var(--tg-theme-secondary); } .wsus__course_video_player { width: 75%; padding-top: 60px; } .wsus__course_sidebar { width: 25%; background: var(--tg-common-color-gray-2); height: 100vh; overflow: hidden; overflow-y: auto; position: fixed; top: 0; right: 0; padding-top: 60px; } .wsus__course_sidebar .video_heading { border-bottom: 1px solid rgb(30 30 47 / 15%) !important; color: var(--tg-heading-color); font-size: 16px; font-weight: 500; padding: 20px 20px; width: 100%; position: fixed; top: 60px; z-index: 999; background: var(--tg-common-color-gray-2); } .wsus__course_sidebar .accordion-item { margin-top: 0; border: none !important; border-bottom: 1px solid rgb(30 30 47 / 15%) !important; } .wsus__course_sidebar .accordion-item button { background: var(--tg-common-color-gray-2) !important; flex-wrap: wrap; } .wsus__course_sidebar .accordion-item button:focus { box-shadow: none; } .wsus__course_sidebar .accordion-item button b { color: var(--tg-heading-color) !important; font-size: 15px; font-weight: 400; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .wsus__course_sidebar .accordion-item button span { color: var(--tg-heading-color) !important; font-size: 12px; font-weight: 500; position: absolute; top: 20px; right: 60px; } .wsus__course_sidebar .accordion-button::after { background: transparent; border: none; background-image: var(--bs-accordion-btn-icon); width: 17px; height: 17px; } .wsus__course_sidebar .accordion-body { border-top: 1px solid rgb(30 30 47 / 15%) !important; padding: 25px 20px 7px 20px; } .wsus__course_sidebar .form-check { margin-bottom: 15px; } .wsus__course_sidebar .form-check input { border: 1px solid rgba(30, 30, 47, 0.7); padding: 0; border-radius: 0; width: 15px; height: 15px; margin-top: 7px; } .wsus__course_sidebar .form-check label { color: var(--tg-heading-color); font-size: 15px; font-weight: 400; } .wsus__course_sidebar .form-check label span { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; } .wsus__course_sidebar .form-check label span img { width: 16px !important; height: auto !important; } .wsus__course_sidebar .dropdown { margin-top: -35px; text-align: right; margin-bottom: 5px; position: relative; } .wsus__course_sidebar .dropdown button { color: var(--tg-heading-color); font-size: 12px; font-weight: 400; background: var(--colorWhite) !important; border: 1px solid rgba(30, 30, 47, 0.2); padding: 5px 20px; box-shadow: none; } .wsus__course_sidebar .dropdown button i { color: var(--tg-heading-color); margin-right: 3px; } .wsus__course_sidebar .dropdown-menu { border-radius: 0 !important; border: 1px solid rgba(30, 30, 47, 0.2); } .wsus__course_sidebar .dropdown-menu.show { display: block; width: auto; min-width: 130px; max-width: 350px; transform: translate(0) !important; top: 32px !important; right: 0 !important; left: auto !important; -webkit-transform: translate(0) !important; -moz-transform: translate(0) !important; -ms-transform: translate(0) !important; -o-transform: translate(0) !important; } .wsus__course_sidebar .dropdown-menu li a { font-size: 13px; position: relative; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; padding-left: 35px; } .wsus__course_sidebar .accordion-button:not(.collapsed) p { font-weight: 500; } .wsus__course_sidebar .accordion { height: 100%; overflow: hidden; overflow-y: auto; } .wsus__course_sidebar .accordion::-webkit-scrollbar { background: var(--tg-common-color-white); width: 6px; height: 30px; } .wsus__course_sidebar .accordion::-webkit-scrollbar-thumb { background: var(--tg-heading-color); } .video-js .vjs-big-play-button { background-color: var(--tg-theme-primary) !important; } .video-js { height: 700px; } .video_tabs_area .nav-pills { justify-content: center; border-bottom: 1px solid var(--bs-border-color); } .video_tabs_area .nav-pills .nav-link { color: var(--tg-heading-color); font-size: 15px; font-weight: 600; border-radius: 0; } .video_tabs_area .nav-pills .nav-link:hover, .video_tabs_area .nav-pills .nav-link.active { background: none; color: var(--tg-theme-primary); } .video_about { padding: 30px; } .video_about h1 { font-size: 24px; margin-bottom: 10px; } .video_about .short_description { max-width: 45%; margin-bottom: 0; color: var(--tg-heading-color); } .video_about table { margin-bottom: 0; margin-top: 30px; } .video_about table tr { border-top: 1px solid var(--bs-border-color); } .video_about table tr td { padding: 15px 0px; min-width: 250px; } .video_about table tr td p { margin-bottom: 5px; color: var(--tg-heading-color); } .video_about table tr td .table_btn { background: var(--tg-theme-primary); color: var(--tg-common-color-white); padding: 7px 20px; border-radius: 50px; } .video_about table tr td .table_btn:hover { background: var(--tg-heading-color); color: var(--tg-common-color-white); } .video_about table tr td ul, .video_about table tr td ol { padding-left: 17px; } .video_about table tr td ul li, .video_about table tr td ol li { font-size: 16px; font-weight: 400; } .video_about table tr td p a { color: var(--tg-theme-primary); } .video_announcement { padding: 30px; } .video_announcement h1 { font-size: 24px; text-align: center; margin-bottom: 0; } .video_announcement p { color: var(--tg-heading-color); text-align: center; width: 50%; margin: 0 auto; margin-top: 10px; } .video_review { padding: 30px; } .video_review .course-review-head { border-top: 0; border-bottom: 1px solid #dfdfdf; padding-top: 40px; margin: 0; padding-bottom: 40px; } .video_qna { padding: 30px; } .video_qna .video_qna_top { justify-content: space-between; align-items: center; } .video_qna .video_qna_top form { position: relative; width: 550px; border: 1px solid #d3d2df; border-radius: 100px; overflow: hidden; } .video_qna .video_qna_top form input { width: 100%; padding: 7px 25px; border: none; } .video_qna .video_qna_top form button { position: absolute; top: 2px; right: 2px; width: 38px; height: 38px; border: none; background: var(--tg-theme-primary); color: var(--tg-common-color-white); border-radius: 50%; } .video_qna .video_qna_top form button:hover { background: var(--tg-heading-color); color: var(--tg-common-color-white); } .video_qna .video_qna_top ul { list-style: none; gap: 20px; padding: 0; margin: 0; } .video_qna .video_qna_top ul li { padding-right: 10px; border-radius: 100px; position: relative; display: flex; flex-wrap: wrap; align-items: center; } .video_qna .video_qna_top ul li p { color: var(--tg-heading-color); margin: 0; font-size: 15px; font-weight: 600; margin-right: 10px; } .video_qna .video_qna_top ul li .select_box { border-radius: 100px; border: 1px solid #d3d2df; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } .video_qna .video_qna_top ul li select { width: 250px; padding: 10px; outline: none; position: relative; border: none; margin-right: 10px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } .video_qna .video_qna_top ul li select::after { position: absolute; content: ""; } .video_qna_list { margin-top: 30px; } .video_qna_list h3 { font-size: 24px; margin-bottom: 20px; } .video_qna_list_item { display: flex; flex-wrap: wrap; background: #ebeaff33; padding: 25px; margin-top: 20px; border: 1px solid rgb(30 30 47 / 6%); border-radius: 10px; } .video_qna_list_item .img, .video_qna_list_item .thumbnail { width: 50px; height: 50px; overflow: hidden; margin-right: 15px; } .video_qna_list_item .img { border-radius: 50%; } .video_qna_list_item .text { width: 95%; position: relative; } .video_qna_list_item .text a { color: var(--tg-heading-color); font-size: 18px; font-weight: 600; display: block; } .video_qna_list_item .text a:hover { color: var(--tg-theme-primary); } .video_qna_list_item .text p { color: var(--tg-heading-color); font-size: 15px; font-weight: 400; } .video_qna_list_item .text ul { list-style: none; display: flex; padding: 0; margin: 0; gap: 15px; } .video_qna_list_item .text ul li { font-size: 13px; font-weight: 500; color: var(--tg-heading-color); } .video_qna_list_item .text ul li a { font-size: 13px; font-weight: 500; color: var(--tg-theme-primary); } .video_qna_list_item .text ul li a:hover { color: var(--tg-heading-color); } .video_qna_list_item .text span { position: absolute; bottom: 0; right: 0; font-size: 15px; font-weight: 600; } .video_qna_list_item .text span i { margin-left: 2px; } .qna_details_area h4, .qna_details_area .flow { color: var(--tg-heading-color); font-size: 16px; font-weight: 600; display: block; margin-top: 20px; } .qna_details_area .flow:hover { color: var(--tg-theme-primary); } .qns_details_list_item { padding: 5px 100px; background: none; border: none; } .qns_details_list_item .text { width: 94%; } .qns_details_list_item .text span { display: block; position: initial; color: var(--tg-heading-color); font-size: 13px; font-weight: 600; } .qns_details_list_item .dot { position: absolute; top: 0; right: 0; color: var(--tg-heading-color); font-size: 12px; font-weight: 600; cursor: pointer; width: 25px; height: 25px; background: #edecff; text-align: center; border-radius: 50%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .qns_details_list_item .dot:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .qns_details_list_item .dot ul { position: absolute; top: 25px; right: 0; flex-wrap: wrap; background: #edecff; width: 125px; padding: 15px; border-radius: 6px; display: flex; transform: scaleY(0.5); transform-origin: top; opacity: 0; visibility: hidden; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; -webkit-transform: scaleY(0.5); -moz-transform: scaleY(0.5); -ms-transform: scaleY(0.5); -o-transform: scaleY(0.5); } .qns_details_list_item .dot ul li { width: 100%; text-align: left; } .qns_details_list_item .dot ul li a { color: var(--tg-heading-color); } .qns_details_list_item .dot ul li a:hover { color: var(--tg-theme-primary); } .qns_details_list_item .dot:hover ul { opacity: 1; transform: scaleY(1); visibility: visible; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); } .qna_details_reply { padding: 0px 100px; } .qna_details_reply form { margin-top: 25px; margin-bottom: 15px; } .qna_details_reply form textarea { width: 100%; border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 15px; } .video_qna.hide_qna_list .qna_list_area { display: none; } .video_qna.hide_qna_list .qna_details_area { display: block; } .video_review h2 { font-size: 24px; margin-bottom: 0; } .video_review_imput { margin-top: 55px; } .video_review_imput p { margin-top: 7px; } .video_review_imput p span { color: var(--tg-heading-color); text-transform: capitalize; font-weight: 600; font-size: 15px; margin-right: 10px; } .video_review_imput p i { font-size: 15px; cursor: pointer; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .video_review_imput p i:hover { color: #f8bc24; } .video_review_imput form textarea { width: 100%; border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 15px; } .wsus__course_sidebar .accordion { padding-bottom: 130px; } .wsus__course_sidebar { padding-top: 120px; } .wsus__course_sidebar .dropdown button { font-size: 13px; font-weight: 500; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .wsus__course_sidebar .dropdown button i { transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .wsus__course_sidebar .dropdown:hover button, .wsus__course_sidebar .dropdown:hover i { color: var(--tg-theme-primary); } .wsus__course_sidebar .dropdown ul { margin: 0; list-style: none; background: #fff; border: 1px solid #f5f5f5; box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15); width: 250px; position: absolute; top: 100%; right: 0; z-index: 9; border-radius: 6px; padding: 11px 25px; transform-origin: top; opacity: 0; visibility: hidden; transform: scaleY(0.5); -webkit-transform: scaleY(0.5); -moz-transform: scaleY(0.5); -ms-transform: scaleY(0.5); -o-transform: scaleY(0.5); transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .wsus__course_sidebar .dropdown ul li a { font-size: 15px; font-weight: 500; text-align: left; padding: 5px 0px; position: relative; padding-left: 20px; } .wsus__course_sidebar .dropdown ul li a::after { position: absolute; content: "\f019"; font-family: "font awesome 5 free"; font-weight: 600; font-size: 12px; top: 7px; left: 0; color: var(--tg-heading-color); transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; } .wsus__course_sidebar .dropdown ul li a:hover, .wsus__course_sidebar .dropdown ul li a:hover:after { color: var(--tg-theme-primary); } .wsus__course_sidebar .dropdown:hover ul { opacity: 1; visibility: visible; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .wsus__course_sidebar .dropdown { display: inline-block; float: right; } .video_course_content .wsus__course_sidebar { position: initial; width: 100%; padding-top: 0; } .video_course_content .video_heading { position: initial; } /*================================ COURSE VIDEO END ================================*/ .dashboard_courses .courses__item { padding: 20px; } .dashboard_courses .courses__item-thumb a { height: 200px; } .dashboard_courses .courses__item-thumb a img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .dashboard_courses .courses__item-thumb p { display: inline-block; background: var(--tg-theme-primary); color: var(--tg-common-color-white); position: absolute; top: 35px; left: 35px; z-index: 2; padding: 3px 15px; border-radius: 40px; font-size: 14px; } .dashboard_courses .edit_btn { list-style: none; gap: 7px; padding: 0; position: absolute; top: 0; right: 25px; margin: 0; z-index: 2; } .dashboard_courses .edit_btn li a { display: block; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 50%; font-size: 12px; background: var(--tg-common-color-gray) !important; } .dashboard_courses .edit_btn li:first-child a { color: var(--tg-theme-primary); } .dashboard_courses .edit_btn li:first-child a:hover { background: var(--tg-theme-primary) !important; color: var(--tg-common-color-white); } .dashboard_courses .edit_btn li:last-child a { color: var(--tg-common-color-red); } .dashboard_courses .edit_btn li:last-child a:hover { background: var(--tg-common-color-red) !important; color: var(--tg-common-color-white); } .dashboard_courses .dropdown { position: absolute; top: 25px; right: 25px; z-index: 2; } .dashboard_courses .dropdown .dropdown-toggle { display: block; width: 30px; height: 30px; background: #efeff2; text-align: center; line-height: 30px; color: var(--tg-heading-color); border-radius: 50%; font-size: 12px; } .dashboard_courses .dropdown .dropdown-toggle::after { display: none; } .dashboard_courses .dropdown .dropdown-toggle:hover { background: var(--tg-theme-primary); color: var(--tg-common-color-white); } .categories__item:hover .icon img { filter: brightness(0) saturate(100%) invert(100%) sepia(20%) saturate(0%) hue-rotate(31deg) brightness(109%) contrast(101%); } .payment_slidebar .list-wrap h6 { text-transform: capitalize; margin-top: 25px; margin-bottom: 15px; } .payment_slidebar .list-wrap p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; color: var(--tg-heading-color); margin-bottom: 10px; } .instructor__details-Skill .title { margin-bottom: 30px; } .instructor__details-Skill h5 { font-size: 18px; } .dashboard__review-table nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 10px; margin: 0; } .dashboard__review-table nav ul .page-item .page-link { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #e6e9ef; -ms-border-radius: 50% !important; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; -o-border-radius: 50% !important; border-radius: 50% !important; font-size: 18px; color: var(--tg-heading-color); font-family: var(--tg-heading-font-family); font-weight: var(--tg-fw-medium); border: none !important; } .dashboard__review-table nav ul .page-item.active .page-link, .dashboard__review-table nav ul .page-item .page-link:hover { color: var(--tg-common-color-white); background: var(--tg-theme-primary); } .google_drive_modal .modal { background: #00000057; } .google_drive_modal .modal-dialog { max-width: 1200px; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%) !important; } .google_drive_modal .modal-content { background: none; } .google_drive_modal .modal-header { padding: 0; position: relative; border: none; } .google_drive_modal .modal-header button { position: absolute; top: -25px; right: 10px; opacity: 0.7; background: none; color: var(--tg-common-color-white); padding: 0; } .google_drive_modal .modal-header button:hover { opacity: 1; } .google_drive_modal .modal-body { padding: 0; border: none; } .google_drive_modal .modal-body iframe { width: 100% !important; height: 100% !important; } @media (min-width: 1600px) and (max-width: 1800px) { .video_qna .video_qna_top ul li select { width: 170px; } .video_qna .video_qna_top ul li select { width: 235px; } .video_qna_list_item .text { width: 90%; } .video_qna .video_qna_top form { width: 430px; } } @media (min-width: 1400px) and (max-width: 1599px) { .wsus__course_video_player { width: 70%; } .video-js { height: 500px; } .wsus__course_sidebar { width: 30%; } .video_qna_list_item .text { width: 90%; } .video_qna .video_qna_top ul li select { width: 170px; } .video_qna .video_qna_top form { width: 360px; } .video_qna .video_qna_top ul { gap: 10px; } } @media (min-width: 1200px) and (max-width: 1399.99px) { .wsus__course_video_player { width: 70%; } .video-js { height: 470px; } .wsus__course_sidebar { width: 30%; } .video_qna_list_item .text { width: 90%; } .qns_details_list_item, .qna_details_reply { padding: 5px 60px; } .video_announcement p { width: 60%; } .video_qna .video_qna_top ul li:first-child { width: 100%; } .video_qna .video_qna_top ul li select { width: 215px; } .video_qna .video_qna_top ul { gap: 0; } .video_qna .video_qna_top form { width: 400px; } } @media (min-width: 992px) and (max-width: 1199.99px) { .wsus__course_video_player { width: 65%; } .video-js { height: 360px; } .wsus__course_sidebar .form-check label { font-size: 14px; } .video_about table tr td { min-width: 165px; } .video-js .vjs-big-play-button { line-height: 120px; height: 120px; width: 120px; } .video_about h1, .video_qna_list h3, .video_announcement h1 { font-size: 20px; } .video_about .short_description { max-width: 75%; } .video_qna_list_item .text, .video_announcement p { width: 82%; } .video_qna_list_item .text ul { gap: 10px; } .video_qna .video_qna_top ul { justify-content: start !important; } .video_qna .video_qna_top ul li { width: 100%; } .wsus__course_sidebar { width: 35%; } .qns_details_list_item, .qna_details_reply { padding: 5px 50px; } .dashboard_courses .courses__item-thumb a { height: 370px; } .dashboard_courses .courses__item-thumb p { top: 85px; } .google_drive_modal .modal-dialog { max-width: 900px; } } @media (min-width: 768px) and (max-width: 991.99px) { .wsus__course_video_player { width: 100%; } .video-js { height: 430px; } .wsus__course_header a, .wsus__course_header p { font-size: 14px; } .video-js .vjs-big-play-button { line-height: 80px; height: 80px; width: 80px; } .video_about h1, .video_qna_list h3, .video_announcement h1 { font-size: 20px; } .video_about .short_description { max-width: 65%; } .video_qna_list_item .text, .video_announcement p { width: 85%; } .video_qna_list_item .text ul { gap: 10px; } .video_qna .video_qna_top ul { justify-content: start !important; } .video_qna .video_qna_top ul li { width: 100%; } .dashboard_courses .courses__item-thumb a { height: 340px; } .dashboard_courses .courses__item-thumb p { top: 85px; } } @media (min-width: 576px) and (max-width: 767.99px) { .wsus__course_video_player { width: 100%; padding-top: 60px; } .video-js { height: 330px; } .wsus__course_header a, .wsus__course_header p { font-size: 14px; } .video-js .vjs-big-play-button { line-height: 80px; height: 80px; width: 80px; } .video_about h1, .video_qna_list h3, .video_announcement h1 { font-size: 20px; } .video_about .short_description { max-width: 100%; } .video_qna_list_item .text, .video_announcement p { width: 100%; } .video_qna_list_item .text ul { gap: 10px; } .video_qna .video_qna_top ul { justify-content: start !important; } .video_qna .video_qna_top ul li { width: 100%; } .video_qna_list_item .text { margin-top: 15px; } .qns_details_list_item, .qna_details_reply { padding: 5px 50px; } .dashboard_courses .courses__item-thumb a { height: 250px; } .dashboard_courses .courses__item-thumb p { top: 85px; } } @media (max-width: 575.99px) { .wsus__course_video_player { width: 100%; padding-top: 80px; } .video-js { height: 300px; } .wsus__course_header a, .wsus__course_header p { text-align: center; display: block; width: 100%; font-size: 13px; } .wsus__course_sidebar .accordion-item button span { display: none; } .video-js .vjs-big-play-button { line-height: 80px; height: 80px; width: 80px; } .video_about h1, .video_qna_list h3, .video_announcement h1 { font-size: 20px; } .video_about .short_description { max-width: 100%; } .video_qna_list_item .text { margin-top: 15px; } .video_qna_list_item .text, .video_announcement p { width: 100%; } .video_qna_list_item .text ul { gap: 10px; } .video_qna_list_item .text span { position: initial; } .video_about table tr td { min-width: 200px; } .qns_details_list_item, .qna_details_reply { padding: 5px 0px; } .dashboard_courses .courses__item-thumb a { height: auto; } .dashboard_courses .courses__item-thumb p { top: 85px; } .google_drive_modal .modal-dialog { max-width: 300px; } } .py-8 { padding-bottom: 4.5rem !important; padding-top: 4.5rem !important; } @media (min-width: 576px) { .py-sm-8 { padding-bottom: 4.5rem !important; padding-top: 4.5rem !important; } } @media (min-width: 768px) { .py-md-8 { padding-bottom: 4.5rem !important; padding-top: 4.5rem !important; } } @media (min-width: 992px) { .py-lg-8 { padding-bottom: 4.5rem !important; padding-top: 4.5rem !important; } } @media (min-width: 1200px) { .py-xl-8 { padding-bottom: 4.5rem !important; padding-top: 4.5rem !important; } } @media (min-width: 1400px) { .py-xxl-8 { padding-bottom: 4.5rem !important; padding-top: 4.5rem !important; } } .bsb-timeline-1 { --bsb-tl-color: var(--bs-primary-bg-subtle); --bsb-tl-circle-color: var(--bs-primary); --bsb-tl-circle-size: 18px; --bsb-tl-circle-offset: 9px; } .bsb-timeline-1 .timeline { list-style: none; margin: 0; padding: 0; position: relative; } .bsb-timeline-1 .timeline:after { background-color: var(--bsb-tl-color); bottom: 0; content: ""; left: 0; margin-left: -1px; position: absolute; top: 0; width: 2px; } .bsb-timeline-1 .timeline>.timeline-item { margin: 0; padding: 0; position: relative; } .bsb-timeline-1 .timeline>.timeline-item:before { background-color: var(--tg-theme-primary); border-radius: 50%; content: ""; height: var(--bsb-tl-circle-size); left: calc(var(--bsb-tl-circle-offset) * -1); position: absolute; top: 0; width: var(--bsb-tl-circle-size); z-index: 1; } .bsb-timeline-1 .timeline>.timeline-item .timeline-body { margin: 0; padding: 0; position: relative; } .bsb-timeline-1 .timeline>.timeline-item .timeline-content { padding: 0 0 2.5rem 2.5rem; } @media (min-width: 768px) { .bsb-timeline-1 .timeline>.timeline-item .timeline-content { padding-bottom: 3rem; } } .bsb-timeline-1 .timeline>.timeline-item:last-child .timeline-content { padding-bottom: 0; } .list-wrap.footer__social li a img { width: 16px !important; } @media (max-width: 991px) { .courses__sidebar { margin: 0; } .courses__sidebar { height: 0px; overflow: hidden; visibility: hidden; opacity: 0; } .courses__sidebar_area.show .courses__sidebar { height: auto; visibility: visible; margin-bottom: 20px; opacity: 1; } .video_qna_list h3 { margin-bottom: 0 !important; } .wsus__course_header_btn, .wsus__course_sidebar_btn { display: block; } .wsus__course_header { padding: 18px 70px 18px 30px; } .wsus__course_sidebar { width: 0%; height: 100vh; padding-top: 60px; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; z-index: 99; opacity: 0; } .wsus__course_sidebar.show { width: 100%; opacity: 1; } .wsus__course_sidebar .video_heading { top: 0; background: none; } } .course_shorting { position: relative; } .course_shorting .item-action { text-align: right; } .banner__images .main-img { width: 420px; height: 460px; object-fit: cover; } .banner__images-two .main-img { width: 480px; height: 595px; object-fit: cover; } @media (min-width: 1400px) and (max-width: 1600px) { .dashboard__nav-wrap .nav-tabs .nav-item button { padding: 8px 10px; } .shine__animate-link { height: 150px; } .tgmenu__search-form { width: 400px; } } @media (min-width: 1200px) and (max-width: 1399.99px) { .dashboard__nav-wrap .nav-tabs { gap: 5px 25px; } .dashboard__nav-wrap .nav-tabs .nav-item button { padding: 8px 10px; } .fact__inner-wrap-two .section__title { width: 40%; } .fact__item-wrap { width: 55%; } .shine__animate-link { height: 190px; } .banner__images .main-img { margin-top: 35px; } .banner__images-two .main-img { width: 480px; height: 590px; } .banner__student.instructor.aos-init.aos-animate { right: 0; } .tgmenu__search-form .form-select .current { display: none !important; } .tgmenu__search-form .select-grp { width: 50px !important; } .tgmenu__search-form .nice-select:after { display: none; } .tgmenu__search-form .nice-select .list { left: -32px; } .tgmenu__search .nice-select { margin-left: -20px; padding-top: 10px; padding-bottom: 10px; } .google_drive_modal .modal-dialog { max-width: 900px; } } @media (min-width: 992px) and (max-width: 1199.99px) { .video_qna .video_qna_top ul { width: 100%; } .dashboard__nav-wrap .nav-tabs { gap: 5px 25px; } .dashboard__nav-wrap .nav-tabs .nav-item { width: auto; } .dashboard__nav-wrap .nav-tabs .nav-item button { padding: 8px 0px; font-size: 15px; } .fact__inner-wrap-two { justify-content: center; } .dashboard_courses .edit_btn { top: -5px; right: 20px; } .shine__animate-link { height: 155px; } .edit_course_icons .bold-text { width: 100%; margin-left: 0 !important; margin-top: 10px; font-size: 16px; } .accordion-body.ui-sortable .item-action, .create_couese_item .item-action { position: absolute; top: 15px; right: 0px; z-index: 999; text-align: right; } .add_course_section_area .accordion-header { position: relative; } .add_course_section_area .accordion_header_content { position: relative; } .add_course_section_area .accordion-button .icon_area div { width: 100%; } .add_course_section_area .accordion-button .icon_area div p { margin-left: 0 !important; margin-top: 10px; margin-bottom: 10px !important; width: 100%; } .accordion_header_content .item_action_header { width: 100%; position: absolute !important; z-index: 999; } .add_course_section_area .accordion_header_content .button { padding: 15px !important; } .add_course_section_area .accordion-button { padding-bottom: 0 !important; } .accordion-header .item-action { position: absolute; top: 5px; right: 0; } .course-quiz-btn .bold-text { width: 100%; margin-left: 0 !important; margin-top: 10px; font-size: 16px; } .icon-container { width: 30px !important; height: 30px !important; font-size: 12px; } .add_course_section_area .accordion-button::after { margin-top: 40px; } .dashboard_courses .courses__item { padding: 0; } .banner__images .main-img { width: 345px; height: 380px; margin-top: 10px; } .banner__images-two .main-img { width: 480px; height: 555px; } } @media (min-width: 768px) and (max-width: 991.99px) { .wsus__course_sidebar.show { width: 60%; } .wsus__course_header_btn, .wsus__course_sidebar_btn { top: 10px; right: 10px; } .video_qna .video_qna_top form { width: 330px; } .video_qna .video_qna_top ul { gap: 0; } .dashboard__nav-wrap .nav-tabs .nav-item { width: auto; } .dashboard__nav-wrap .nav-tabs .nav-item button { padding: 8px 0px; font-size: 14px; } .fact__inner-wrap-two { padding: 50px; } .shine__animate-link { height: 180px; } .fact__item { margin-bottom: 30px; } .dashboard_courses .edit_btn { top: -4px; right: 20px; } .edit_course_icons .bold-text { width: 100%; margin-left: 0 !important; margin-top: 10px; font-size: 16px; } .accordion-body.ui-sortable .item-action, .create_couese_item .item-action { position: absolute; top: 15px; right: 0px; z-index: 999; text-align: right; } .add_course_section_area .accordion-header { position: relative; } .add_course_section_area .accordion_header_content { position: relative; } .add_course_section_area .accordion-button .icon_area div { width: 100%; } .add_course_section_area .accordion-button .icon_area div p { margin-left: 0 !important; margin-top: 10px; margin-bottom: 10px !important; width: 100%; } .accordion_header_content .item_action_header { width: 100%; position: absolute !important; z-index: 999; } .add_course_section_area .accordion_header_content .button { padding: 15px !important; } .add_course_section_area .accordion-button { padding-bottom: 0 !important; } .accordion-header .item-action { position: absolute; top: 5px; right: 0; } .course-quiz-btn .bold-text { width: 100%; margin-left: 0 !important; margin-top: 10px; font-size: 16px; } .icon-container { width: 30px !important; height: 30px !important; font-size: 12px; } .add_course_section_area .accordion-button::after { margin-top: 40px; } .footer__bottom-menu .list-wrap { gap: 15px; } .footer__bottom-menu .list-wrap li a { font-size: 15px; } .footer__bottom-menu .list-wrap li a::before, .footer__bottom-menu .list-wrap li a::after { display: none !important; } .dashboard_courses .courses__item { padding: 20px; } .course_shorting p { width: 100%; margin-left: 0 !important; } .course_shorting .item-action { position: absolute; top: -2px; right: 0; min-width: auto; margin-right: 0; } .banner__images-two .main-img { width: 400px; height: 490px; } .google_drive_modal .modal-dialog { max-width: 700px; } } @media (min-width: 576px) and (max-width: 767.99px) { .google_drive_modal .modal-dialog { max-width: 500px; } .video-payer .iframe-video { height: 350px; } .video_qna .video_qna_top ul li, .video_qna .video_qna_top ul li .select_box, .video_qna .video_qna_top ul li select { width: 100%; } .video_qna .video_qna_top ul { width: 100%; } .wsus__course_header { padding: 18px 80px 18px 30px; } .wsus__course_sidebar.show { width: 80%; } .wsus__course_header_btn, .wsus__course_sidebar_btn { top: 10px; right: 10px; } .dashboard__nav-wrap .nav-tabs .nav-item { width: auto; } .dashboard__nav-wrap .nav-tabs .nav-item button { padding: 8px 0px; } .fact__item-wrap { justify-content: center; } .fact__inner-wrap-two { padding: 50px; } .shine__animate-link { height: 300px; } .dashboard_courses .edit_btn { top: -5px; right: 25px; } .edit_course_icons .bold-text { width: 100%; margin-left: 0 !important; margin-top: 10px; font-size: 16px; } .accordion-body.ui-sortable .item-action, .create_couese_item .item-action { position: absolute; top: 15px; right: 0px; z-index: 999; text-align: right; } .add_course_section_area .accordion-header { position: relative; } .add_course_section_area .accordion_header_content { position: relative; } .add_course_section_area .accordion-button .icon_area div { width: 100%; } .add_course_section_area .accordion-button .icon_area div p { margin-left: 0 !important; margin-top: 10px; margin-bottom: 10px !important; width: 100%; } .accordion_header_content .item_action_header { width: 100%; position: absolute !important; z-index: 999; } .add_course_section_area .accordion_header_content .button { padding: 15px !important; } .add_course_section_area .accordion-button { padding-bottom: 0 !important; } .accordion-header .item-action { position: absolute; top: 5px; right: 0; } .course-quiz-btn .bold-text { width: 100%; margin-left: 0 !important; margin-top: 10px; font-size: 16px; } .icon-container { width: 30px !important; height: 30px !important; font-size: 12px; } .add_course_section_area .accordion-button::after { margin-top: 40px; } .pagination-wrap .page-link, .pagination-wrap .page-item span, .dashboard__review-table nav ul .page-item .page-link, .dashboard__review-table nav ul .page-item .page-link span { width: 40px; height: 40px; font-size: 16px; } .dashboard_courses .courses__item { padding: 20px; } .fact__area-two .fact__item-wrap { gap: 20px; } .course_shorting p { width: 100%; margin-left: 0 !important; } .course_shorting .item-action { position: absolute; top: -2px; right: 0; min-width: auto; margin-right: 0; } .banner__images-two .main-img { width: 350px; height: 430px; } .dashboard__top-bg { min-height: 250px; } .dashboard__instructor-info { padding: 30px; } } @media (max-width: 575px) { .video-payer .iframe-video { height: 300px; } .video_qna .video_qna_top form { width: 100%; } .video_qna .video_qna_top ul li p { width: 100%; margin-top: 10px; } .video_qna .video_qna_top ul { gap: 0; width: 100%; } .video_qna .video_qna_top ul li, .video_qna .video_qna_top ul li .select_box, .video_qna .video_qna_top ul li select { width: 100%; } .video_about h1, .video_qna_list h3, .video_announcement h1 { font-size: 18px; } .video_tabs_area .nav-pills .nav-link { font-size: 13px; padding: 10px 8px; } .video_qna_list h3 { margin-bottom: 10px !important; } .dashboard__nav-wrap .nav-tabs .nav-item { width: 100%; text-align: center; } .dashboard__nav-wrap .nav-tabs .nav-item button { text-align: center; padding: 8px 0px; margin: 0 auto; } .btn { font-size: 12px; padding: 12px 15px; } .fact__item-wrap { justify-content: center; } .fact__inner-wrap-two { padding: 25px; } .shine__animate-link { height: auto; } .dashboard_courses .edit_btn { top: -3px; right: 20px; } .edit_course_icons .bold-text { width: 100%; margin-left: 0 !important; font-size: 15px; margin-top: 10px; } .accordion-body.ui-sortable .item-action, .create_couese_item .item-action { position: absolute; top: 15px; right: 0px; z-index: 999; text-align: right; } .add_course_section_area .accordion-header { position: relative; } .add_course_section_area .accordion_header_content { position: relative; } .add_course_section_area .accordion-button .icon_area div { width: 100%; } .add_course_section_area .accordion-button .icon_area div p { margin-left: 0 !important; margin-top: 10px; margin-bottom: 10px !important; width: 100%; } .accordion_header_content .item_action_header { width: 100%; position: absolute !important; z-index: 999; } .add_course_section_area .accordion_header_content .button { padding: 15px !important; } .add_course_section_area .accordion-button { padding-bottom: 0 !important; } .accordion-header .item-action { position: absolute; top: 0; right: 0; } .course-quiz-btn .bold-text { width: 100%; margin-left: 0 !important; font-size: 15px; margin-top: 10px; } .icon-container { width: 30px !important; height: 30px !important; font-size: 12px; } .add_course_section_area .accordion-button::after { margin-top: 20px; } .footer__bottom-menu .list-wrap { gap: 15px; } .footer__bottom-menu .list-wrap li a { font-size: 15px; } .footer__bottom-menu .list-wrap li a::before { display: none; } .pagination-wrap .page-link, .pagination-wrap .page-item span, .dashboard__review-table nav ul .page-item .page-link, .dashboard__review-table nav ul .page-item .page-link span { width: 35px; height: 35px; font-size: 14px; } .pagination-wrap .pagination, .dashboard__review-table nav ul { gap: 10px 7px; } .blog__details-thumb img { min-height: auto; } .contact-info-wrap .list-wrap li { flex-direction: column; align-items: flex-start; } .instructor__details-social .list-wrap li a { width: 35px; height: 35px; } .instructor__details-content .badges li { width: 60px; } .dashboard_courses .courses__item { padding: 0px; } .fact__area-two .fact__item-wrap { gap: 20px; } .course_shorting p { width: 100%; margin-left: 0 !important; } .course_shorting .item-action { position: absolute; top: -2px; right: 0; min-width: auto; margin-right: 0; } .btn-hight-basic { height: 40px !important; line-height: 20px !important; } .dashboard__content-title .title { padding-bottom: 5px; } .dashboard__content-title .btn-hight-basic { margin-bottom: 20px; } .banner__images .main-img { width: auto; height: auto; } .banner__images-two .main-img { width: auto; height: auto; } .banner__student { top: 40%; } .courses__details-thumb img { min-height: auto; } .dashboard__top-bg { min-height: 300px; } .dashboard__instructor-info { padding: 30px; } .datepicker { left: 23px !important; } .datepicker-days table { min-width: 270px; } } .faq__wrap .accordion-button { padding-right: 20px !important; } .form-select:focus { border-color: inherit; -webkit-box-shadow: none; box-shadow: none; } .datepicker-days table { min-width: 300px; } .datepicker-days table td, .datepicker-days table th { text-align: center; } .document-preview-area { height: 720px; } .pdf_viewer_box { height: calc(100% - 32px); } .pdf_navigation_controls { bottom: 0; left: 0; right: 0; height: 32px; } #pdf_previous_btn, #pdf_next_btn, #pdf_current_page { background-color: var(--tg-theme-primary); color: #fff; border: none; } #pdf_previous_btn, #pdf_next_btn { width: 50%; max-width: 200px; cursor: pointer; border-right: 1px solid #fff; } #pdf_current_page { height: 32px; text-align: center; font-weight: 900; font-size: 18px; } .pdf_zoom_controls { bottom: 52px; left: 50%; transform: translateX(-50%); } .pdf_zoom_controls button { padding: 8px 12px; box-shadow: none; border: none; } .wsus_lesson_qna_list .wsus_thumbnail { width: 50px; height: 50px; object-fit: cover; } .wsus_lesson_qna_list .wsus_qna_question_title p { margin-bottom: 1px; font-weight: 600; } .wsus_qna_reply {} .wsus_qna_reply a { color: var(--tg-common-color-black); font-weight: 600; } .wsus_qna_reply p, .wsus_reply_content p { font-size: 15px; } .wsus_reply_content { margin-top: 10px; } .wsus_qna_reply p .image-popup, .wsus_reply_content p .image-popup,.video_qna_list_item .text .image-popup { max-width: 150px; height: auto; display: block; margin: 10px 0px; } .wsus_qna_reply_item { border-bottom: 1px solid #ddd; margin-bottom: 25px; padding-bottom: 15px; } .wsus_qna_reply_item:last-child { border: 0; margin: 0; padding: 0; } .footer_input .tox-tinymce,.footer_input .form-control { border: none!important; border-radius: 0; } .footer_input { background-color: #fff; } .wsus_lesson_qna_list { border-color: #d3d2df; } .wsus_lesson_qna_list .card-header { background: #fff; border-color: #d3d2df; } .footer_input,.footer_input { border-top: 1px solid #d3d2df !important; } .footer_input .form-control{ border-bottom: 1px solid #d3d2df !important; padding: .75rem .75rem .375rem!important; } .footer_input .tox-statusbar { border-top: 1px solid #d3d2df !important; border-bottom: 1px solid #d3d2df; } input.question-view.form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: none!important; } .wsus_qna_reply_count{ color: var(--tg-theme-secondary); } .progress-bar{ background-color: var(--tg-theme-primary); }