/* =============== 1. Google fonts =============== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* =============== 2. Variables =============== */
:root {
   --orange: hsl(36, 80%, 50%);
   --white: hsl(0, 0%, 100%);
   --WHITE: hsl(0, 0%, 100%);
   --BLACK: hsl(0, 0%, 0%);
   --black-90: hsl(0, 0%, 10%);
   --black-70: hsl(0, 0%, 30%);
   --black-alpha-40: hsla(0, 0%, 0%, 0.4);
   --yellow-light: hsl(44, 95%, 83%);
   --green-light: hsl(158, 68%, 75%);
   --red-light: hsl(0, 84%, 80%);
   --orange-light: hsl(22, 85%, 80%);
   --select-box-bg-color: hsl(0, 0%, 100%);
   --border-color-1: hsl(0, 0%, 90%);
}

/* =============== 3. Overrides variables for - Theme Dark =============== */


/* =============== 4. Base =============== */
body {
   background-color: var(--body-bg-color);
   font-family: 'Roboto', sans-serif;
   font-size: 16px;
   font-weight: 300;
   color: var(--black-70);
   min-height: 100vh;
   overflow-x: hidden;
}

a {
   color: var(--main-color);
   color: #000000;
   text-decoration: none;
}

a:hover {
   color: var(--main-color);
}

img {
   max-width: 100%;
}

ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

h1, h2, h3, h4, h5, h6 {
   color: var(--black-90);
   line-height: 1.3;
}

h3 {
   font-size: 20px;
}

::selection {
   color: var(--WHITE);
   background-color: var(--main-color);
}

/* =============== 5. Box =============== */
.box {
   background-color: var(--white);
   border-radius: 5px;
   box-shadow: var(--shadow);
   padding: 30px;
}

/* =============== 6. Customized Bootstrap Classes =============== */
.container {
   --bs-gutter-x: 15px;
   max-width: 1140px;
}

.row {
   /* --bs-gutter-x: 30px; */
}

/* =============== 7. Animation Keyframe =============== */
@keyframes spin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

/* =============== 8. Section - Padding, Title =============== */
.section-padding {
   padding: 60px 0;
}

.section-padding-une {
   padding-top: 0;
}

.section-title {
   margin-bottom: 40px;
}

.section-title .title {
   font-size: 20px;
   color: var(--main-color);
   text-transform: uppercase;
}

.section-title .sub-title {
   font-size: 35px;
   font-weight: 600;
   color: var(--black-90);
}

.title-une {
   padding: 30px 0 30px 0;
   text-align: center;
   text-transform: uppercase;
   background-color: var(--main-color);;
}


/* =============== 9. Buttons =============== */
.btn-theme {
   background-color: var(--main-color);
   color: var(--WHITE);
   font-size: 16px;
   text-transform: capitalize;
   font-weight: 500;
   padding: 8px 20px;
   transition: all 0.3s ease;
}

.btn-theme:hover {
   color: var(--WHITE);
   background-color: var(--button-hover-color);
}

.btn-theme:focus {
   box-shadow: 0 0 8px var(--main-color);
}

.btn-form {
   height: 48px;
}

/* =============== 10. Page Loader =============== */


/* =============== 11. Circular img =============== */
.circular-img {
   max-width: 360px;
   margin: auto;
   position: relative;
   z-index: 1;
}

.circular-img-inner {
   text-align: center;
   border-radius: 0 0 180px 180px;
   overflow: hidden;
}

.circular-img-circle {
   height: 360px;
   width: 360px;
   position: absolute;
   left: 0;
   bottom: 0;
   border-radius: 50%;
}

.circular-img img {
   position: relative;
   z-index: 1;
}

/* =============== 12. Forms =============== */
.form-title {
   font-size: 24px;
   margin: 0 0 30px;
   font-weight: 600;
}

.form-control::placeholder {
   color: var(--black-70);
}

.form-group {
   margin-bottom: 25px;
   position: relative;
}

.form-control {
   height: 48px;
   border-color: var(--border-color-1);
   color: var(--black-90);
   background-color: transparent;
}

.form-control:focus {
   background-color: transparent;
   border-color: var(--border-color-1);
   color: var(--black-90);
   box-shadow: none;
}

.select-icon {
   position: absolute;
   right: 15px;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
   font-size: 13px;
}
select.form-control:focus option {
   background-color: var(--select-box-bg-color);
}

textarea.form-control {
   height: 120px;
   resize: none;
}

/* =============== 13. Video Modal =============== */
.video-modal .btn-close {
   height: 35px;
   width: 35px;
   background-image: none;
   border-radius: 50%;
   opacity: 1;
   z-index: 1;
   position: absolute;
   right: 0;
   top: -35px;
   color: var(--WHITE);
   font-size: 16px;
   padding: 0;
}

.video-modal .modal-content {
   border: 0;
}

/* =============== 14. Pagination =============== */
.page-item.disabled .page-link,
.page-link {
   border: none;
   background-color: transparent;
   color: var(--black-70);
}

.page-item.active .page-link {
   background-color: var(--main-color);
}

.page-link:hover {
   background-color: var(--main-color);
   color: var(--WHITE);
}

/* =============== 15. Breadcrumb =============== */
.breadcrumb-nav {
   padding: 10px 0;
}

.breadcrumb-nav .breadcrumb-item {
   font-size: 14px;
   text-transform: capitalize;
}

.breadcrumb-nav .breadcrumb-item + .breadcrumb-item:before,
.breadcrumb-nav .breadcrumb-item.active {
   color: var(--black-70);
}

/* =============== 16. Tabs =============== */
.nav-tabs .nav-link {
   background-color: var(--white);
   /*text-transform: capitalize;*/
   border-color: var(--border-color-2);
   padding: 5px 12px;
   margin: 0 5px 10px;
   border-radius: 5px;
   color: var(--black-70);
   font-size: 16px;
}

.nav-tabs .nav-link:hover {
   border-color: var(--border-color-2);
}

.nav-tabs .nav-link.active {
   background-color: var(--main-color);
   border-color: transparent;
   color: var(--WHITE);
}

/* =============== 17. Bubble animation =============== */


/* =============== 18. Style Switcher =============== */
.style-switcher {
   width: 250px;
   position: fixed;
   height: 100%;
   background-color: var(--white);
   right: -250px;
   top: 0;
   z-index: 10;
   padding: 30px;
   box-shadow: var(--shadow);
   transition: right 0.3s ease;
}

.style-switcher.open {
   right: 0;
}

.style-switcher-toggler {
   height: 40px;
   width: 40px;
   position: absolute;
   top: 28%;
   left: -40px;
   background-color: var(--main-color);
   color: var(--WHITE);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px 0 0 8px;
   cursor: pointer;
}

.style-switcher h3 {
   font-size: 18px;
   text-transform: capitalize;
   border-bottom: 1px solid var(--border-color-1);
   padding: 0 0 10px;
}

.style-switcher-item {
   padding: 10px 0;
   border-bottom: 1px solid var(--border-color-1);
}

.theme-colors button {
   height: 30px;
   width: 30px;
   border: none;
   border-radius: 50%;
   vertical-align: middle;
   padding: 0;
   position: relative;
}

.theme-colors button:before {
   content: "\f00c";
   font-family: 'Font Awesome 5 Free';
   font-size: 12px;
   font-weight: 900;
   color: var(--white);
   transition: all 0.3s ease;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   opacity: 0;
}

.theme-colors button.active:before {
   opacity: 1;
}

.theme-colors .color-1 {
   background-color: hsl(0, 74%, 61%);
}

.theme-colors .color-2 {
   background-color: hsl(230, 74%, 61%);
}

.theme-colors .color-3 {
   background-color: hsl(36, 74%, 61%);
}

.theme-colors .color-4 {
   background-color: hsl(277, 74%, 61%);
}

.theme-colors .color-5 {
   background-color: hsl(164, 74%, 61%);
}

/* =============== 19. Header =============== */
.header {
   border-bottom: 1px solid var(--border-color-2);
}

.header-logo a {
   font-size: 26px;
   text-transform: uppercase;
   font-weight: 700;
   color: var(--black-70);
}

.header-logo span {
   color: var(--main-color );
}

.header .menu-item {
   display: inline-block;
   margin-left: 40px;
   position: relative;
}

.header .menu-item > a {
   display: block;
   padding: 24px 0;
   font-weight: 400;
   color: var(--black-90);
   text-transform: capitalize;
   transition: color 0.3s ease;
}

.header .sub-menu-item a:hover,
.header .menu-item:hover > a {
   color: var(--main-color);
}

.header .menu-item > a i {
   font-size: 13px;
   margin-left: 3px;
   pointer-events: none;
}

.header .sub-menu {
   position: absolute;
   top: 100%;
   background-color: var(--white);
   left: 0;
   width: 210px;
   padding: 10px 0;
   border-radius: 5px;
   box-shadow: var(--shadow);
   transition: all 0.3s ease;
   z-index: 2;
   visibility: hidden;
   opacity: 0;
   transform: translateY(10px);
}

@media (min-width: 992px) {
   .header .menu-item:hover > .sub-menu {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
   }
}

.header .sub-menu a {
   display: block;
   padding: 10px 20px;
   color: var(--black-90);
   text-transform: capitalize;
   font-weight: 400;
   transition: color 0.3s ease;
}

.header-backdrop,
.header-close-btn,
.header-hamburger-btn {
   display: none;
}

/* =============== 20. Footer =============== */
.footer-top {
   padding: 50px 0 20px;
   border-top: 1px solid var(--border-color-2);
}

.footer-item {
   margin: 0 0 30px;
}

.footer-item h3 {
   text-transform: capitalize;
   margin: 0 0 20px;
}

.footer-item .footer-logo {
   color: var(--black-70);
   text-transform: uppercase;
}

.footer-item .footer-logo span {
   color: var(--main-color);
}

.footer-item ul li:not(:last-child) {
   margin-bottom: 8px;
}

.footer-item ul a {
   text-transform: capitalize;
   color: var(--black-70);
   transition: color 0.3s ease;
   position: relative;
}

.footer-item ul a:hover {
   color: var(--main-color);
}

.footer-item ul a:before {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0;
   height: 1px;
   background-color: var(--main-color);
   transition: width 0.3s ease;
}

.footer-item ul a:hover:before {
   width: 100%;
}

.footer-item ul a .social-icon {
   margin-right: 5px;
}

.footer-bottom {
   border-top: 1px solid var(--border-color-2);
}

.footer-bottom p {
   font-size: 14px;
}

/* =============== 21. Banner Section =============== */
.banner-section {
   padding: 80px 0;
   min-height: 680px;
}

.banner-text h2 {
   font-size: 20px;
   color: var(--main-color);
}

.banner-text h1 {
   font-size: 45px;
   font-weight: 700;
}

/*.banner-section .circular-img-circle {*/
/*   background-color: var(--red-light);*/
/*}*/

/* =============== 22. Fun Facts Section =============== */
.fun-facts-item {
   padding: 15px 0;
}

.fun-facts-item h2 {
   font-weight: 700;
   font-size: 30px;
   text-transform: uppercase;
}

.fun-facts-item p {
   margin: 0;
   text-transform: uppercase;
}

.fun-facts-item .style-1 {
   color: var(--black-70);
}

.fun-facts-item .style-2 {
   color: var(--green-light);
}

.fun-facts-item .style-3 {
   color: var(--red-light);
}

.fun-facts-item .style-4 {
   color: var(--orange-light);
}

/* =============== 23. Courses Section =============== */
.courses-item {
   margin-bottom: 30px;
   position: relative;
}

.courses-item .img-box img {
   width: 100%;
   border-radius: 5px;
}

.courses-item .link {
   color: var(--black-70);
   display: inline-block;
}

.courses-item .title {
   text-transform: capitalize;
   margin: 15px 0;
   transition: color 0.3s ease;
}

.courses-item:hover .title {
   color: var(--main-color);
}

.courses-item .instructor {
   text-transform: capitalize;
   margin: 0 0 12px;
}

.courses-item .instructor img {
   width: 30px;
   border-radius: 50%;
   margin-right: 5px;
}

.courses-item .rating {
   font-size: 14px;
}

.courses-item .average-rating {
   font-weight: 600;
   color: var(--orange);
}

.courses-item .average-stars i {
   color: var(--orange);
}

.courses-item .price {
   position: absolute;
   right: 15px;
   top: 15px;
   background-color: var(--main-color);
   color: var(--WHITE);
   font-weight: 600;
   padding: 4px 8px;
   border-radius: 4px;
}

/* =============== 24. Testimonials =============== */
.testimonials-section .img-box {
   height: 150px;
   width: 150px;
   background-color: var(--red-light);
   margin: 30px auto 50px;
}

.testimonials-section .img-box:before,
.testimonials-section .img-box:after {
   content: '';
   position: absolute;
   border-radius: 50%;
   border: 1px solid var(--red-light);
   animation: spin 15s linear infinite;
}

.testimonials-section .img-box:before {
   height: 180px;
   width: 180px;
   left: -15px;
   top: -15px;
   border-left: 1px solid transparent;
}

.testimonials-section .img-box:after {
   height: 210px;
   width: 210px;
   left: -30px;
   top: -30px;
   border-right: 1px solid transparent;
}

.testimonials-item h3 {
   text-transform: capitalize;
}

.testimonials-item .text-2 {
   margin: 0;
   text-transform: capitalize;
}

.testimonials-section .carousel-control-prev,
.testimonials-section .carousel-control-next {
   position: relative;
   height: 35px;
   width: 35px;
   background-color: var(--main-color);
   display: inline-block;
   border-radius: 50%;
   margin: 0 4px;
}

.testimonials-section .decoration-circles-items {
   position: absolute;
   border-radius: 50%;
   opacity: 0.4;
}

.testimonials-section .decoration-circles-items:nth-child(1) {
   left: 10%;
   top: 10%;
   height: 30px;
   width: 30px;
   background-color: var(--yellow-light);
}

.testimonials-section .decoration-circles-items:nth-child(2) {
   left: 40%;
   top: 40%;
   height: 50px;
   width: 50px;
   background-color: var(--green-light);
}

.testimonials-section .decoration-circles-items:nth-child(3) {
   left: 70%;
   top: 70%;
   height: 50px;
   width: 50px;
   background-color: var(--red-light);
}

.testimonials-section .decoration-circles-items:nth-child(4) {
   left: 20%;
   top: 50%;
   height: 20px;
   width: 20px;
   background-color: var(--red-light);
}

.testimonials-section .decoration-imgs-item {
   position: absolute;
   border-radius: 50%;
   opacity: 0.4;
}

.testimonials-section .decoration-imgs-item:nth-child(1) {
   height: 60px;
   width: 60px;
   left: 20%;
   top: 30%;
   background-color: var(--yellow-light);
}

.testimonials-section .decoration-imgs-item:nth-child(2) {
   height: 80px;
   width: 80px;
   left: 90%;
   top: 40%;
   background-color: var(--red-light);
}

.testimonials-section .decoration-imgs-item:nth-child(3) {
   height: 40px;
   width: 40px;
   left: 10%;
   top: 60%;
   background-color: var(--green-light);
}

/* =============== 25. Bai Section =============== */
.bai-section .circular-img-circle {
   background-color: var(--yellow-light);
}

/* =============== 26. Course Details Section =============== */
/* Course Header */
.course-header h2 {
   font-size: 30px;
   margin: 0 0 15px;
   font-weight: 600;
}

.course-header .average-rating {
   font-weight: 600;
   color: var(--orange);
}

.course-header .average-stars i {
   font-size: 14px;
   color: var(--orange);
}

.course-header .average span {
   vertical-align: middle;
}

.course-header ul li {
   margin: 6px 0 0;
   text-transform: capitalize;
}

.course-header ul li span {
   margin-left: 5px;
}

/* Course Tabs */
.course-tabs {
   margin: 30px 0 20px;
}

.course-tabs .nav-link {
   margin: 0 10px 10px 0;
}

/* Course Curriculum */
.course-curriculum .accordion-item {
   border-color: var(--border-color-1);
   background-color: transparent;
}

.course-curriculum .accordion-button span {
   position: absolute;
   right: 17px;
   font-size: 14px;
}

.course-curriculum .accordion-button:after {
   content: "\f077";
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   background-image: none;
   position: absolute;
   left: 17px;
   top: 50%;
   transform: translateY(-50%);
   height: auto;
   width: auto;
   line-height: 1;
}


.course-curriculum .arrow-none:after {
   content: "\f06e";
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   background-image: none;
   position: absolute;
   left: 17px;
   top: 50%;
   transform: translateY(-50%);
   height: auto;
   width: auto;
   line-height: 1;
}

.course-curriculum .accordion-button {
   background-color: transparent;
   color: var(--black-90);
   font-weight: 300;
   flex-wrap: wrap;
   padding-left: 50px;
   /* padding-right: 160px; */
   line-height: 1.5;
}

.course-curriculum .accordion-button:focus {
   box-shadow: none;
}

.course-curriculum .accordion-button:not(.collapsed) span {
   font-weight: 500;
}

.course-curriculum .accordion-button:not(.collapsed):after {
   transform: translateY(-50%) rotate(-180deg);
}

.course-curriculum .accordion-button:not(.collapsed) {
   font-weight: 600;
   border-bottom: 1px solid var(--border-color-1);
   transition: none;
}

.course-curriculum ul li {
   position: relative;
   padding: 0 50px 0 20px;
}

.course-curriculum ul li span {
   position: absolute;
   font-size: 14px;
   right: 0;
   top: 0;
}

.course-curriculum ul li i {
   position: absolute;
   left: 0;
   top: 6px;
   color: var(--black-70);
   font-size: 12px;
}

/* Course Description */
.course-description h4 {
   font-size: 16px;
}

/* Course Instructor */
.course-instructor .img-box img {
   max-width: 128px;
   margin-bottom: 15px;
}

.course-instructor h4 {
   font-size: 16px;
   text-transform: capitalize;
   margin-bottom: 10px;
}

.course-instructor h4 span {
   font-weight: 300;
}

.course-instructor ul li i {
   color: var(--main-color);
   margin-right: 5px;
}

.course-instructor ul li:not(:last-child) {
   margin-bottom: 5px;
}

/* Course Reviews */
.rating-summary .average-rating {
   font-size: 50px;
   font-weight: 700;
   color: var(--black-90);
}

.rating-summary .average-stars i {
   color: var(--orange);
}

.rating-summary .rating-bars-item {
   display: flex;
   align-items: center;
   margin-bottom: 8px;
}

.rating-summary .progress {
   height: 8px;
   width: calc(100% - 120px);
   background-color: var(--border-color-2);
   margin-left: 5px;
   margin-right: 20px;
}

.rating-summary .progress-bar {
   background-color: var(--main-color);
}

.rating-summary .star-text {
   min-width: 60px;
   color: var(--orange);
}

.reviews-filter {
   margin: 0 0 35px;
   width: 200px;
}

.reviews-item {
   position: relative;
   margin-bottom: 30px;
   padding-left: 65px;
}

.reviews-item .img-box {
   max-width: 50px;
   border-radius: 50%;
   overflow: hidden;
   position: absolute;
   left: 0;
   top: 0;
}

.reviews-item h4 {
   font-size: 16px;
   font-weight: 500;
   text-transform: capitalize;
   margin: 0 0 5px;
   color: var(--black-90);
}

.reviews-item .star-rating i {
   color: var(--orange);
   font-size: 14px;
}

.reviews-item .star-rating .date {
   margin-left: 5px;
   font-size: 14px;
   display: inline-block;
}

.reviews-item p {
   margin: 5px 0 0;
}

/* Course Sidebar */
.course-sidebar .img-box {
   margin-bottom: 20px;
   border-radius: 5px;
   overflow: hidden;
   cursor: pointer;
}

.course-sidebar .img-box:before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background-color: var(--black-alpha-40);
}

.course-sidebar .play-icon {
   position: absolute;
   height: 50px;
   width: 50px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: var(--main-color);
   font-size: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   color: var(--WHITE);
}

.course-sidebar .img-box p {
   position: absolute;
   color: var(--WHITE);
   top: calc(50% + 40px);
   font-weight: 500;
   width: 100%;
}

.course-sidebar .price span {
   margin-right: 8px;
}

.course-sidebar .price-new {
   font-size: 30px;
   font-weight: 700;
   color: var(--black-90);
}

.course-sidebar .price-discount {
   color: var(--main-color);
}

.course-sidebar .features-list {
   margin: 0 0 20px;
}

.course-sidebar .features-list li {
   position: relative;
   padding-left: 21px;
   margin-bottom: 8px;
}

.course-sidebar .features-list li:before {
   content: '';
   height: 6px;
   width: 6px;
   background-color: var(--main-color);
   position: absolute;
   left: 0;
   top: 9px;
   border-radius: 50%;
}

.btn-block {
   width: 100%;
}

/* =============== 27. Contact Section =============== */
.contact-item {
   position: relative;
   padding-left: 55px;
   margin-bottom: 40px;
}

.contact-item .icon-box {
   position: absolute;
   height: 40px;
   width: 40px;
   background-color: var(--main-color);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   left: 0;
   top: 0;
   color: var(--WHITE);
}