/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  /* widths for rows and containers
     */
  --header-height: 160px;
  --header-height-min: 80px;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* Theme Colors */
:root {
  --accent-color: #6f3ed0;
  --dark-color: #222222;
  --light-dark-color: #727272;
  --light-color: #fff;
  --grey-color: #dbdbdb;
  --light-grey-color: #fafafa;
  --primary-color: #6995B1;
  --light-primary-color: #eef1f3;
}

/* Fonts */
:root {
  --body-font: 'Tahoma', sans-serif;
  --heading-font: 'Tahoma', sans-serif;
  --secondary-font: 'Tahoma', sans-serif;
}



html {
  color-scheme: light;
}



body {
  --bs-link-color: #333;
  --bs-link-hover-color: #333;

  --bs-link-color-rgb: 40, 40, 40;
  --bs-link-hover-color-rgb: 0, 0, 0;

  /* --bs-link-color: #6f3ed0;
  --bs-link-hover-color: #6f3ed0; */

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: 'Tahoma', sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 2;
  --bs-body-color: #211042;

  --bs-primary: #6f3ed0; /* Original Hexadecimal */
  --bs-primary-rgb: #6f3ed0; /* Converted from 222, 173, 111 */
  
  --bs-primary-bg-subtle: #FFF9EB; /* Original Hexadecimal */
  --bs-border-color: #F7F7F7; /* Original Hexadecimal */
  
  --bs-secondary-rgb: #E6F3FB; /* Converted from 230, 243, 251 */
  
  --bs-success-rgb: #EEF5E4; /* Converted from 238, 245, 228 */
  --bs-danger-rgb: #F9EBE7; /* Converted from 249, 235, 231 */
  --bs-warning-rgb: #FFF9EB; /* Converted from 255, 249, 235 */
  --bs-info-rgb: #E6F3FA; /* Converted from 230, 243, 250 */
  
}

.btn-primary {
  padding: 1.2rem 3rem;
  --bs-btn-color: #fff;
  --bs-btn-bg: #6f3ed0;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6f3ed0;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6f3ed0;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: transparent;
}

.btn-outline-primary {
  transition: all 0.3s ease-in;
  padding: 1.2rem 3rem;
  letter-spacing: 0.02375rem;
  --bs-btn-color: #6f3ed0;
  --bs-btn-border-color: #6f3ed0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6f3ed0;
  --bs-btn-hover-border-color: #6f3ed0;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6f3ed0;
  --bs-btn-active-border-color: #6f3ed0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6f3ed0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6f3ed0;
  --bs-gradient: none;
}

.btn-outline-dark {
  transition: all 0.3s ease-in;
  padding: 1.2rem 3rem;
  letter-spacing: 0.02375rem;
  text-transform: uppercase;
  --bs-btn-color: #211042;
  --bs-btn-border-color: #211042;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #211042;
  --bs-btn-hover-border-color: #211042;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #211042;
  --bs-btn-active-border-color: #211042;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #211042;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #211042;
  --bs-gradient: none;
}

.btn-dark {
  padding: 1.2rem 3rem;
  font-size: 1.1875rem;
  text-transform: uppercase;
  --bs-btn-color: #fff;
  --bs-btn-bg: #211042;
  --bs-btn-border-color: #211042;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6f3ed0;
  --bs-btn-hover-border-color: #6f3ed0;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #211042;
  --bs-btn-active-border-color: #211042;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #211042;
  --bs-btn-disabled-border-color: #211042;
}

@media screen and (max-width:991px) {

  .btn-primary,
  .btn-outline-primary,
  .btn-outline-dark,
  .btn-dark {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
  }
}

body {
  letter-spacing: 0.01625rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  color: var(--bs-body-color);
  font-weight: 400;
  text-transform: capitalize;
}

a {
  text-decoration: none;
}

.breadcrumb.text-white {
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-item-active-color: var(--bs-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}

.secondary-font {
  font-family: var(--secondary-font);
  font-weight: 300;
}

/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preloader-logo {
  width: 64px;
  height: 64px;
  background-image: url('../images/owl.png');
  background-size: cover;
  background-position: center;
  z-index: 1; /* Ensure the logo is above the spinner */
}

.spinner {
  width: 80px;
  height: 80px;
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #6f3ed0; /* Blue spinner color */
  border-radius: 50%;
  animation: spin 2s linear infinite;
  position: absolute; /* Overlay on top of the logo */
}

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


/* search bar style  */
.search-bar {
  max-height: 65px;
  border: 1px solid #EAEAEA;
}

.search-bar ::placeholder {
  font-family: var(--secondary-font);
}

.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none;
}


/* nav bar style  */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.nav-link:focus,
.nav-link:hover {
  color: var(--accent-color);
}


/* category style */
iconify-icon.category-icon {
  color: #6f3ed099;
  font-size: 100px;
  transition: all 0.3s ease-in;

}

a.categories-item:hover iconify-icon.category-icon {
  color: #6f3ed0;
}


/* banner style */
.swiper-pagination-bullet {
  border: 1px solid var(--bs-body-color);
  background-color: transparent;
  opacity: 1;
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 15px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 15px));
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--bs-body-color);
  background: var(--bs-body-color);
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);
}



.gallery-cell {
  width: 100%; /* half-width */
  height: auto;
  padding: 0 15px; 
  text-align: center;
  /* top: 50%; */
  transform: translateY(-50%);
  @media (min-width: 548px) {
    width: 33.3%;
  }
  &.is-selected {
    img {
      transform: scale(1);
      -webkit-filter: grayscale(0) blur(0); 
      filter: grayscale(0) blur(0); 
    }
  }
  img {
    transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    max-width: 150px;
    display: inline-block; 
    transform: scale(0.7);
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
  }
}
.flickity-prev-next-button.previous {
  left: -40px;
 
}
.flickity-prev-next-button.next {
  right: -40px;
}

.brand-carousel {
 margin: 0 60px; /* space for prev/next buttons */
}
.flickity-prev-next-button .arrow {
  fill: #6f3ed0;
}

/* 
    ================================
        Best Viewed In Full Page
    ================================
*/

/* Hover over a card to flip, can tab too. */


/* body */
.custom-flip-card-section{
  min-height: 40vh;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 6rem ;


/* .flip-card-container */
.flip-card-container {
  --hue: 150;

  width: 410px;
  height: 400px;
  margin: 0 40px;

  /* perspective: 1000px; */
}

/* .flip-card */
.flip-card {
  width: inherit;
  height: inherit;

  position: relative;
  transform-style: preserve-3d;
  transition: .6s .1s;
}

/* hover and focus-within states */
.flip-card-container:hover .flip-card,
.flip-card-container:focus-within .flip-card {
  transform: rotateY(180deg);
}

/* .card-... */
.card-front,
.card-back {
  width: 100%;
  height: 100%;
  border-radius: 24px;

  background: hsl(var(--hue), 25%, 10%);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;

  backface-visibility: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* .card-front */
.card-front {
  transform: rotateY(0deg);
  z-index: 2;
}

/* .card-back */
.card-back {
  transform: rotateY(180deg);
  z-index: 1;
}

/* figure */
figure {
  z-index: -1;
}

/* figure, .img-bg */
figure,
.img-bg {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  background-color: #6f3ed0;
}

/* img */
img {
  height: 100%;
  border-radius: 24px;
}

/* figcaption */
figcaption {
  display: block;

  width: auto;
  margin-top: 12%;
  padding: 8px 22px;

  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 2px;
  word-spacing: 6px;
  text-align: right;

  position: absolute;
  top: 0;
  right: 12px;

  color: hsl(0, 0%, 90%);
  background: hsla(var(--hue), 25%, 10%, .5);
}

/* .img-bg */
.img-bg {
  background: hsla(var(--hue), 25%, 10%, .5);
}

.card-front .img-bg {
  clip-path: polygon(0% 20%, 20% 20%, 100% 100%, 0 100%);
}




/* ul */
ul {
  padding-top: 50%;
  margin: 0 auto;
  width: 70%;
  height: 100%;

  list-style: none;
  color: hsl(0, 0%, 90%);

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


li {
  width: 100%;
  margin-top: 12px;
  padding-bottom: 12px;

  font-size: 14px;

  position: relative;
}

li:nth-child(2n) {
  color: hsl(0, 0%, 80%);
}

li:not(:last-child)::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background: currentColor;
  opacity: .2;
}


button {
  font-family: inherit;
  font-weight: bold;
  color: hsl(0, 0%, 90%);

  letter-spacing: 2px;

  padding: 9px 20px;
  border: 1px solid hsl(0, 0%, 50%);
  border-radius: 1000px;
  background: transparent;
  transition: .3s;

  cursor: pointer;
}

button:hover,
button:focus {
  color: #c1b2df;
  background: hsla(var(--hue), 25%, 10%, .2);
  border-color: currentColor;
}

button:active {
  transform: translate(2px);
}


.design-container {
  --tr: 90;
  --op: .5;

  width: 100%;
  height: 100%;

  background: transparent;
  position: absolute;
  top: 0;
  left: 0;

  pointer-events: none;
}


.design {
  display: block;

  background: hsl(0, 0%, 50%);
  position: absolute;

  opacity: var(--op);
  transition: .3s;
}



button:hover+.design-container,
button:active+.design-container,
button:focus+.design-container {
  --tr: 20;
  --op: .7;
}

.abs-site-link {
  position: fixed;
  bottom: 20px;
  left: 20px;
  color: hsla(0, 0%, 100%, .6);
  font-size: 16px;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  }

}













/**
* BEST TUTOR CARD
**/


.curriculums{

  min-height: 60vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

.card {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    border: #6f3ed0 1px solid;
    margin: 0 auto;
}

.card a {
    color: inherit;
    text-decoration: none;
}

.card:hover {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}


/**
* DATE
**/

.card__fav {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    padding-top: 10px;
    /* background-color: #6f3ed0; */
    border-radius: 50%;
    color: #6f3ed0;
    text-align: center;
    font-weight: 700;
    line-height: 13px;
}




/**
* THUMB
**/

.card__thumb {
    height: 245px;
    overflow: hidden;
    background-color: white;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
}

.card__thumb img {
    width: 100%;
    display: block;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, transform 0.5s;
    transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
}

.card:hover .card__thumb {
    height: 130px;
}

.card:hover .card__thumb img {
    opacity: 0.6;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}


/**
* card_BODY
**/

.card__body {
    height: 170px;
    padding: 20px;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
}

.card:hover .card__body {
    height: 350px;
}

.card__category {
    position: absolute;
    top: -25px;
    left: 0;
    height: 25px;
    padding: 0 15px;
    background-color: #6f3ed0;
    color: #fff;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 25px;
}

.card__title {
    margin: 0;
    padding: 0 0 10px 0;
    color: #000;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
}

.card_subtitle {
    margin: 0;
    padding: 0 0 10px 0;
    font-size: 19px;
    color: #6f3ed0 !important;
}

.card__description {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 56px;
    margin: 0;
    padding: 0;
    color: #666C74;
    line-height: 27px;
    opacity: 0;
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.card:hover .card__description {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.card__footer {
    position: absolute;
    bottom: 12px;
    left: 20px;
    right: 20px;
    font-size: 11px;
    color: #A3A9A2;
}

.icon {
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0 0 2px;
    font-size: 18px;
}

.icon+.icon {
    padding-left: 10px;
}

}




.card {
  --bs-card-inner-border-radius: none;
  --bs-card-bg: transparent;
  background-color: transparent;
  border: none;
}

a.btn-cart {
  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
}

a.btn-wishlist {

  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
}


button.filter-button {
  letter-spacing: 0.02125rem;
  border: none;
  border-bottom: 2px solid #D9D9D8;
  background: transparent;
  text-transform: uppercase;
  font-size: 1.0625rem;
  transition: all 0.3s ease-in;
}

button.filter-button.active,
button.filter-button:hover {
  border-bottom: 2px solid #6f3ed0;
}

/* testimonial style  */
.testimonial-content {
  color: #908F8D;
}

iconify-icon.quote-icon {
  color: #F7EEE4;
  font-size: 14rem;
}


/* register form  */
.form-control {
  color: #908F8D;
  line-height: normal;
  letter-spacing: 0.02125rem;
  text-transform: capitalize;
  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
  background: #FFF;
  display: flex;
  padding: 1.25rem 0rem 1.25rem 1.25rem;
  align-items: center;
  gap: 0.375rem;
  align-self: stretch;
}

.form-control:focus {
  border-color: #211042;
}


/* blog style */
.blog-paragraph {
  color: #908F8D;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--secondary-font);
}

.blog-read {
  color: #908F8D;
  font-size: 1rem;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
}

a.blog-read {
  border-bottom: 3px solid #D9D9D8;
  transition: all 0.3s ease-in;
}

a.blog-read:hover {
  border-bottom: 3px solid #8a8a8a;
}


/* services style  */
.service-icon {
  font-size: 30px;
  border-radius: 3.125rem;
  border: 1px solid #D9D9D8;
  padding: 1.25rem;
}


/* insta style  */
.instagram-item:hover:before,
.instagram-item:hover .icon-overlay {
  opacity: 1;
  cursor: pointer;
}

.icon-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  align-items: center;
  font-size: 3rem;
  cursor: pointer;
  opacity: 0;
  -moz-transition: 0.8s ease;
  -webkit-transition: 0.8s ease;
  transition: 0.8s ease;
}


/* footer style */
iconify-icon.social-icon {
  color: #CACACA;
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 4.375rem;
  border: 1px solid #D9D9D8;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.03);
  transition: all 0.5s ease;
}

li.social:hover iconify-icon.social-icon {
  color: #FFF;
  border: 1px solid #6f3ed0;
  background: #6f3ed0;
}

iconify-icon.send-icon {
  cursor: pointer;
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 4.375rem;
  color: #FFF;
  border: 1px solid #6f3ed0;
  background: #6f3ed0;
}


@media screen and (max-width: 991px) {

  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }

  .offcanvas-body .filter-categories {
    width: 100%;
    margin-bottom: 20px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 14px;
    border-radius: 8px;
  }

  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }

  .dropdown-menu a {
    padding-left: 0;
  }

  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 21px;
  }
}


/*--------------------------------------------------------------
faqs section style start
--------------------------------------------------------------*/
.accordion-button:not(.collapsed) {
  color: var(--body-text-color);
  background-color: transparent;
  box-shadow: none;
}

.accordion {
  --bs-accordion-color: var(--light-text-color);
  --bs-accordion-bg: none;
  --bs-accordion-btn-color: var(--body-text-color);
}

.accordion-button:not(.collapsed)::after {
  background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?color=%2341403e');

}

.accordion-button::after {
  background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?color=%2341403e');
}

.accordion-button:focus {
  z-index: 3;
  border-color: none;
  box-shadow: none;
}

/*--------------------------------------------------------------
Account section style start
--------------------------------------------------------------*/
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
Blog section style start
--------------------------------------------------------------*/
/* ------ Pagination ------*/
.pagination .page-numbers {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  color: var(--bs-body-color);
  padding: 0 10px;
  line-height: 1.4;
  transition: 0.9s all;
  border-radius: 8px;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  color: var(--accent-color);
}

iconify-icon.pagination-arrow {
  color: var(--bs-body-color);
  transition: 0.9s all;
}

iconify-icon.pagination-arrow:hover {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
Single Product section style start
--------------------------------------------------------------*/
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--light-color);
  background-color: var(--accent-color);
}




/*****=====*****=====*****=====*****=====
    08. Service Box / Icon Box Style Css
=====*****=====*****=====*****=====*****/

.service-item {
  margin-bottom: 30px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.grade-icon {
  display: inline-block;
  position: relative;
  width: 25px; 
  height: 25px; 
}

.arrow-right {
  display: inline-block;
  font-size: 25px; 
  color: #211042;
  position: absolute;
  font-weight: bold;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}



.title-box {
  display: flex;
  align-items: center;
  gap: 10px; 
}


.title-box img{
  left: 50px;
}


.title-icon {
  width: 50px; 
  height: auto; /* Maintain aspect ratio if possible */
  object-fit: contain; /* Ensure the image fits well */
}

.service-item.style-2 .title-box {
    background-color: #ffffff;
    padding: 12px 18px;
    position: relative; 
    border: solid 1px #211042;
}

.service-item.style-2 .title-box h4 {
    color: #211042;
    font-size: 25px;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.service-item.style-2 .title-box h5 {
    color: #211042;
    font-size: 13px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.service-item.style-2 .grade-icon {
    color: #211042;
    font-size: 25px;
    position: absolute;
    right: 14px;
    top: 16px;
}

.service-item:hover .title-box {
  background: linear-gradient(-120deg, #6f3ed08a, #f5f5fd );
}



.services-section .all-view-btn {
    border: 1px solid #211042;
    border-radius: 50px;
    color: #211042;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-top: 34px;
    padding: 12px 22px;
    text-transform: uppercase;
}

/******/





/* [ 7.1 tutor CARD CSS START ] */
.tutor-name h4 {
  font-size: 20px;
  padding: 10px 0;
  margin: 0;
  background: #6f3ed0; }
  .tutor-name h4 a {
    color: #FFF !important; }

.tutor-details {
  padding: 10px; }

.tutor-specility p {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 1px;
  color: #333;
  padding: 0 10px 5px 10px;
  margin: 0 0 10px 0;
  border-bottom: 2px dotted #DDD; }

.tutor-details-extra {
  text-align: center;
  padding: 0 0 0 0; }
  .tutor-details-extra p {
    display: inline-block;
    vertical-align: top;
    width: 150px;
    padding: 10px 0;
    margin: 0;
    font-size: 12px;
    color: #555;
    letter-spacing: 1px; }
  .tutor-details-extra .fa {
    font-size: 24px;
    text-align: center;
    display: block;
    margin: 5px auto;
    color: #999; }

.tutor-social {
  position: absolute;
  bottom: 5px;
  right: 0;
  left: 0; }

.tutor-details-extra-3 {
  text-align: left;
  padding: 0 10px; }
  .tutor-details-extra-3 p {
    width: auto;
    display: block;
    font-size: 14px;
    padding: 2px 5px; }
    .tutor-details-extra-3 p .fa {
      display: inline-block;
      vertical-align: middle;
      width: 30px;
      font-size: 16px;
      padding: 0 10px 0 0; }
    .tutor-details-extra-3 p:nth-child(1) {
      color: #55acee; }
    .tutor-details-extra-3 p:nth-child(3) {
      color: #dc4a38; }

.tutorp-name {
  position: relative;
  border-bottom: 2px dotted #DDD; }
  .tutorp-name h3 {
    font-size: 24px;
    color: #555;
    font-weight: 500;
    margin: 0 0 10px 0; }
  .tutorp-name p {
    font-size: 14px;
    color: #777;
    margin: 5px 0 10px 5px; }

.tutorp-social {
  position: absolute;
  bottom: 0;
  right: 0; }

.layer-wrapper, .button-icon span, .button-icon .fa, .theme-block-hover,
.theme-block-picture img, .theme-block-picture::before, .theme-block-hidden, .slider-appointment a, .feature-icon, .feature-icon .fa,
.blog-list-picture img, .blog-full-img img, .contact-info-inner, .blog-picture, .hm-service-block .fa,
.hm-about-icon .fa, .theme-dropdown li::after, .theme-img img, .theme-img::before, .hm-doctor, .hm-doctor h6 {
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; }

  .theme-block {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 4px;
    margin: 0 0 30px 0;
    text-align: center;
    background: #f5f5f5;
    border-radius: 2px;
    overflow: hidden;
    min-height: 400px; 
  }


  .theme-block:hover .theme-block-hidden {
    opacity: 1;
    z-index: 2;
    bottom: 0; }
  .theme-block:hover .service-block-data a {
    color: #6f3ed0; }

.theme-block-hover:hover .theme-block-picture img {
  opacity: 0.7;
  -webkit-transform: scale(1.2) rotate(6deg);
  -moz-transform: scale(1.2) rotate(6deg);
  -ms-transform: scale(1.2) rotate(6deg);
  -o-transform: scale(1.2) rotate(6deg);
  transform: scale(1.2) rotate(6deg); }
.theme-block-hover:hover .theme-block-picture:before {
  background: linear-gradient(-90deg, #6f3ed0, #211042); }

  .theme-block:hover .theme-block-hidden {
    opacity: 1;
    z-index: 2;
    bottom: 0; }

  .theme-block-picture {
    position: relative;
    width: 100%;
    height: 350px; 
    overflow: hidden;
  }
  
  .theme-block-picture img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

.theme-block-picture::before, .theme-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

  .theme-block-data {
    flex-grow: 1; /* Ensures content fills the remaining space */
    padding: 15px;
  }
  
  .tutor-name h4 {
    font-size: 20px;
    padding: 10px 0;
    margin: 0;
    background: #6f3ed0;
  }
  
  .tutor-name h4 a {
    color: #FFF !important;
  }

  .theme-block-data p {
    margin: 0; }
    .theme-block-data p a {
      color: #6f3ed0; }

.theme-block-hidden {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
  border: 1px solid #EEE;
  opacity: 0;
  z-index: -2; }

.theme-block-padding {
  padding: 10px; }

.theme-owl-dot .owl-dots .owl-dot {
  vertical-align: middle; }
  .theme-owl-dot .owl-dots .owl-dot span {
    margin-bottom: 0;
    background: transparent;
    border: 2px solid #6f3ed0; }
    .theme-owl-dot .owl-dots .owl-dot span:hover {
      background: #6f3ed0; }
  .theme-owl-dot .owl-dots .owl-dot.active span {
    width: 15px;
    height: 15px;
    background: #6f3ed0; }

    .tutor-name h4 {
      font-size: 20px;
      padding: 10px 0;
      margin: 0;
      background: #6f3ed0; }
      .tutor-name h4 a {
        color: #FFF !important; }
        
        .section-title {
          font-size: 2rem;
          font-weight: bold;
          color: #333;
          text-transform: uppercase;
          position: relative;
      }
      
      .section-title::after {
          content: '';
          display: block;
          width: 80px;
          height: 4px;
          background-color: #6f3ed0;
          margin: 10px auto 0;
      }


/* Position the button over the image */
.book-now-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  text-align: center;
}

/* Ensure the container has a relative position */
.theme-block-picture {
  position: relative;
  overflow: hidden;
}

/* Show the button when hovering over the tutor block */
.theme-block-hover:hover .book-now-btn {
  display: block;
}

/* Improve button styling */
.book-now-btn .btn {
  background: rgba(111, 62, 208, 0.9); /* Semi-transparent theme color */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: 0.3s ease-in-out;
  font-weight: bold;
}

/* Button hover effect */
.book-now-btn .btn:hover {
  background: #211042; /* Darker shade */
}











/* Hide the button initially */
.book-now-btn2 {
  display: none;
  text-align: center;
  margin-top: 10px;
}

/* Show the button when hovering over the tutor block */
.theme-block-hover:hover .book-now-btn2 {
  display: block;
}

/* Optional: Improve button styling */
.book-now-btn2 .btn {
  background: #6f3ed0; 
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: 0.3s;
}

/* Optional: Button hover effect */
.book-now-btn2 .btn:hover {
  background: #211042; /* Darker shade */
}



/*****=====*****=====*****=====*****=====
    15. Funfact Style css
=====*****=====*****=====*****=====*****/
.funfact-item {
  margin-bottom: 30px;
  position: relative;
  float: left;
  width: 100%;
}

.funfact-item.style-1 .count .icon {
  display: inline-block;
  margin-bottom: 10px;
}

.funfact-item.style-1 .count .icon img {
  width: 60px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.funfact-item.style-1:hover .count .icon img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
}

.funfact-item.style-1 .count i {
  display: inline-block;
  position: relative;
  margin-bottom: 10px;
}

.funfact-item.style-1 .count .start-count {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #fff;
  margin-top: 20px;
}

.funfact-item.style-1 p {
  color: #6f3ed0;
  text-transform: capitalize;
  margin-top: 15px;
  font-size: 18px;
}

/* Funfact Item Style Two */ 
.funfact-item.style-2 .count .icon {
  position: relative;
}

.funfact-item.style-2 .count .icon:after {
  background-color: #ddd;
  content: "";
  height: 100px;
  left: 0;
  position: absolute;
  top: 12px;
  width: 1px;
}

.funfact-item.style-2 .count .icon i {
  color: #6f3ed0;
  display: inline-block;
  float: left;
  left: 25%;
  position: relative;
  font-size: 42px;
  margin-left: 0;
}

.funfact-item.style-2 .count h2.start-count {
  color: #333;
  font-size: 28px;
  line-height: 1;
}

.funfact-item.style-2 p {
  color: #6f3ed0;
  float: left;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 18px;
  padding-top: 10px;
  text-transform: uppercase;
  width: 100%;
}

.funfact-divider.over-layer-white-deep:before {
  background-color: rgba(255, 255, 255, 0.9);
}

.funfact-divider.over-layer-black-deep:before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
}




/*======= ****========****=======
    24. All Shop Style Css
/*======= ****========****=======*/



.shop-item {
  /* height: 530px; */
  position: relative;
  overflow: hidden;
  border: 1px solid #f2f2f2;
  margin-bottom: 30px;
}

.shop-img {
  position: relative;
  overflow: hidden;
}
.shop-content {
  padding: 10px;
}
.shop-item .shop-content h5 {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 0;
}

.btn-download:hover{
  background: #6f3ed0;
  border: 1px solid #f7f7f7;
  color: #fff;
}

.product-price {
    color: #333038;
    font-size: 15px;
    font-weight: 500;
    padding: 5px 0 8px;
}
.product-price del {
    color: #9e9d9e;
    font-size: 13px;
    margin-right: 5px;
}
.product-price ins {
    color: #333333;
    font-size: 16px;
    text-decoration: none;
    font-weight: 600;
}

.product-size {
    display: block;
}
.product-size li {
    display: inline-block;
    border: 1px solid;
    padding: 5px;
    line-height: 1;
    margin-bottom: 10px;
}
.discount,
.in-stock {
  position: absolute;
  right: 0;
  bottom: 8%;
  background: #2facde;
  color: #fff;
  padding: 10px;
  line-height: 1;
  z-index: 2;
}




.shop-item .shop-img img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    width: 100%;
}
.shop-item:hover .shop-img img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.product-img-icon {
  display: block;
  text-align: center;
  z-index: 2;
  position: absolute;
  left: 0;
  right: 0;
  padding: 10px 0 10px;
  margin: 0 auto;
  bottom: -22%;
  background: #2facde;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.product-img-icon li {
  display: inline-block;
  padding: 8px;
  border: 1px solid #FFF;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}



.product-img-icon li i {
  color: #fff;
  font-size: 18px;
}
.product-img-icon li:hover{
  background: #6f3ed0;
  border: 1px solid #f7f7f7;
  color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.shop-item:hover {
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.06);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.06);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.shop-item:hover .product-img-icon {
  bottom: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.shop-item.shop-list .shop-content {
    margin-top: 15px;
}
.shop-item.shop-list .shop-content p {
    margin-bottom: 10px
}
.shop-item.shop-list .discount {
    bottom: 14%;
    right: 0;
}
.shop-item.shop-list .in-stock {
    right: auto;
    left: 0;
}

.product-size-item h6,
.product-color-item h6,
.product-number-item h6,
.product-rating-item h6 {
  color: #000;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  margin-right: 10px;
  text-transform: capitalize;
}
.product-size-item ul,
.product-color-item li,
.product-rating-item .shop-rating,
.product-color {
  display: inline-block !important;
}

.product-rating-item .shop-rating {
  top: 10px;
}



.product-number-item input {
    height: 30px;
    padding: 10px;
    width: 70px;
}
.product-color {
  line-height: 1;
} 
.product-color li {
    display: block;
    height: 25px;
    text-align: center;
    width: 25px;
    border-radius: 50%;
}


.shop-tab-menu .nav-item {
  text-transform: uppercase;
  font-size: 13px;
}


.shop-product-row {
  margin-top: 20px;
}
.shop-tab-content .shop-product-details-row {
    clear: both;
    display: table-row;
}

.shop-tab-content .shop-product-details-row .details {
    display: table-cell;
    border-top: 1px solid #ddd;
    padding: 10px 0;
    padding-right: 20px;
    width: 25%;
    color: #333;
    font-weight: bold;

}
.shop-tab-content .shop-product-details-row .product-type {
    display: table-cell;
    border-top: 1px solid #ddd;
    padding: 10px 0;
}

.shop-tab-content .form-group {
    margin-bottom: 0;
}

.shop-tab-content.form-horizontal .form-group {
    margin: 0;
}

.shop-checkout{
  display: flex;
}

/* Shop Responsived Css*/

@media only screen and (min-width: 1200px) and (max-width: 1880px)  { 
    .shop-item.shop-list .shop-content {
        margin-top: 40px;
    }
    .shop-item.shop-list .shop-content p {
        margin-bottom: 10px
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) { 
    .shop-item.shop-list .shop-content {
        margin-top: 10px;
    }
    .shop-item.shop-list .shop-content p {
        margin-bottom: 10px
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) { 
    .shop-item.shop-list .shop-content {
        margin-top: 10px;
    }
    /*.display-none {
        display: none;
    }*/
  
}
@media only screen and (min-width: 420px) and (max-width: 767px) { 
    .shop-item.shop-list .shop-content {
        margin-top: 10px;
        padding-left: 30px;
        margin-bottom: 20px;
    }
}



/* End Css Reset */



.login{
  display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
  
  /* Wrapper Area */
  .wrapper__area{
    position: relative;
    width: 1000px;
    height: 800px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.439);
    border: 5px solid rgba(255, 255, 255, 0.439);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    transform: scale(0.9);
  }
  
  /* Forms Area */
  .forms__area{
    border-bottom: 1px solid #6f3ed0;
    border-left: 1px solid #6f3ed0;
    border-top: solid 1px #6f3ed0;
    
    position: relative;
    width: calc(100% - 330px);
    height: 100%;
    background-color: transparent;
    margin-right: 10px;
  }
  /* Form */
  .forms__area form{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding: 20px 20px 10px 20px;
    transition: 1.2s cubic-bezier(0.18, 0.02, 0.36, 0.96);
    opacity: 1;
  }
  form.sign-up__form{ /* Hide The Sign Up */
    margin-top: -1000px;
  }
  /* Form Title */
  form .form__title{
    font-size: 45px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 40px;
  }
  .sign-up__form .form__title{ /* Sign Up Form Title */
    margin-top: 1px;
    margin-bottom: 15px;
  }
  /* Input Group */
  form .input__group{
    position: relative;
    width: 100%;
    margin: 10px 0;
  }
  /* Field */
  form .input__group .field{
    position: relative;
    width: 100%;
    height: auto;
    display: inline-block;
    transition: 0.3s ease-in-out;
    overflow: hidden;
  }
  /* Field After ( For Border Animation Focus ) */
  form .input__group .field::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: #6f3ed0;
    transform: translateX(-100%);
    transition: 0.3s ease-in-out;
  }
  form .input__group .field:focus::after,
  form .input__group .field:focus-within::after{
    transform: translateX(0);
  }
  /* Text And Password Inputs */
  form .input__group input[type="text"],
  form .input__group input[type="time"],
  form .input__group input[type="number"],
  form .input__group input[type="file"],
  form .input__group input[type="email"],
  form .input__group input[type="date"],
  form .input__group input[type="password"]{
    position: relative;
    outline: none;
    width: 100%;
    border: none;
    padding: 15px 40px 15px 40px;
    background: transparent;
    border-bottom: 2px solid rgb(152, 169, 192);
  }

  form .input__group select {
    position: relative;
    width: 100%;
    padding: 12px 40px 15px 40px; /* Adjusted padding for better alignment */
    background: transparent; /* Ensure background doesn't conflict */
    border: none; /* Remove default border */
    border-bottom: 2px solid rgb(152, 169, 192); /* Custom border */

    outline: none; /* Remove focus outline */
    appearance: none; /* Remove default arrow icon for better customization */
}
form .input__group select::after {
  content: '\25BC'; /* Unicode for down arrow */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

form .input__group select:focus {
  width: 95%;
}

  form .input__group input[type="file"]{
    position: relative;
    outline: none;
    width: 100%;
    border: none;
    padding: 15px 40px 15px 40px;
    background: transparent;
  }
  /* Form Error */
  form .formError .field input{
    border-color: rgb(231, 76, 60);
  }
  /* FormSuccess */
  form .formSuccess .field input{
    border-color: rgb(46, 204, 113);
  }
  /* For Input Autofill */
  form .input__group input:-webkit-autofill,
  form .input__group input:-webkit-autofill:hover, 
  form .input__group input:-webkit-autofill:focus, 
  form .input__group input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    box-shadow: 0 0 0 30px white inset !important;
    background: transparent;
  }
  /* Next Span */
  form .input__group > span{
    position: absolute;
    font-size: 18px;
    color: rgb(184, 180, 180);
    transition: 0.3s ease-in-out;
  }

  
  form .input__group input[type="text"]:focus ~ span,
  form .input__group input[type="number"]:focus ~ span,
  form .input__group input[type="email"]:focus ~ span,
  form .input__group input[type="date"]:focus ~ span,
  form .input__group input[type="password"]:focus ~ span{
    color:#6f3ed0;
  }
  /* Input Icon */
  form .input__group .input__icon{
    top: 13px;
    left: 13px;
    pointer-events: none;
  }
  /* Show Hide Icon */
  form .input__group .showHide__Icon{
    top: 13px;
    right: 13px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  form .input__group .showHide__Icon:hover{
    color: #6f3ed0;
  }
  /* Error Message */
  form .input__group .input__error_message{
    display: block;
    color: rgb(231, 76, 60);
    margin: 0 10px;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out;
    text-transform: capitalize;
  }
  /* Form Error class */
  form .formError .input__error_message{
    opacity: 1;
  }
  /* Form Success class */
  form .formSuccess .input__error_message{
    opacity: 0;
  }
  
  /* Form Actions */
  form .form__actions{
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  /* EveryThing In The Form Action */
  form .form__actions *{
    transition: 0.3s ease-in-out;
  }
  /* Next Label And Next Div */
  form  .form__actions > label:hover,
  form  .form__actions > div:hover{
    opacity: 0.7;
  }
  /* Remeber Me And Input */
  .form__actions .remeber_me,
  .form__actions .remeber_me input{  
    position: relative;
    cursor: pointer;
    font-size: 15px;
    color: rgb(184, 180, 180);
  }
  /* Input And Checkmark box */
  .form__actions .remeber_me input,
  .form__actions .remeber_me .checkmark{
    width: 20px;
    height: 20px;
    top: 5px;
  }
  .form__actions .remeber_me input{
    opacity: 0;
    z-index: 2;
  }
  .form__actions .remeber_me .checkmark{
    position: absolute;
    left: 0;
    border: 2px solid rgb(184, 180, 180);
    border-radius: 3px;
    z-index: 1;
  }
  /* Create Check Mark */
  .form__actions .remeber_me .checkmark::after{
    content: "";
    position: absolute;
    opacity: 0;
    left: 5px;
    top: 2px;
    width: 3px;
    height: 8px;
    border: solid #6f3ed0;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg) scale(0);
    transform: rotate(45deg) scale(0);
    transition: 0.3s ease-in-out;
  }
  /* When Input Checkbox Is Checked */
  .form__actions .remeber_me input:checked ~ .checkmark ~ span{
    color: #6f3ed0;
  }
  .form__actions .remeber_me input:checked ~ .checkmark{
    border-color: #6f3ed0;
  }
  .form__actions .remeber_me input:checked ~ .checkmark::after{
    opacity: 1;
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  /* Forgot Password */
  .form__actions .forgot_password{
    position: relative;
    top: 4px;
    cursor: pointer;
    font-size: 15px;
    color: #6f3ed0;
    transition: 0.3s ease-in-out;
    font-weight: 550;
  }
  
  /* Submit Button */
  button.submit-button{
    position: relative;
    width: 65%;
    background-color: #6f3ed0;
    color: rgb(255, 255, 255);
    cursor: pointer;
    padding: 16px 0;
    border: none;
    border-radius: 5px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 50px auto 10px ;
    display: block;
    outline: none;
    transition: 0.5s ease-in-out;
    overflow: hidden;
    text-transform: uppercase;
  }
  .sign-up__form button.submit-button{ /* Sign Up Submit Button */
    margin-top: 25px;
  }
  button.submit-button:hover{
    opacity: 0.8;
  }
  button.submit-button:active{
    opacity: 1;
  }
  
  /* Alternate Login */
  .alternate-login{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
  }
  .sign-up__form .alternate-login{ /* Sign Up Alternate Login */
    margin-top: 15px;
  }
  .alternate-login .link{
    border: 2px solid rgb(184, 180, 180);
    margin: 10px;
    padding: 7px 25px 5px;
    border-radius:50px;
    cursor: pointer;
    transition: 0.4s ease-out;
    color: rgb(184, 180, 180);
  }

  .alternate-login .link:hover{
    border-color: #6f3ed0;
    color: #6f3ed0;
  }

  .alternate-login .link i{
    font-size: 18px;
    position: relative;
    top: 2px;
  }
  /* Forms Animation */
  
  /* When Sign Up Mode Is Active\ Sign Up Form */
  form.sign-up__form{
    opacity: 0;
  }
  .wrapper__area.sign-up__Mode-active form.sign-up__form {
    margin-top: 0;
    opacity: 1;
  }
  /* When Sign Up Mode Is Active\ Login Form */
  .wrapper__area.sign-up__Mode-active form.login__form {
    margin-top: 650px;
    opacity: 0;
  }
  
  /* End Forms Animation */
  
  /* Aside Area */
  .aside__area{
    position: relative;
    width: 400px;
    height: 100%;
    background-color: #6f3ed0;
    border-radius: 5px;
    opacity: 1;
  }
  /* Sides */
  .aside__area > div{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px;
    text-align: center;
    transition: 1.2s cubic-bezier(0.18, 0.02, 0.36, 0.96);
    /* margin-top: 30px; */
  }
  .aside__area > div h4{
    color: rgb(255, 255, 255);
    letter-spacing: 5px;
    font-weight: 500;
    font-size: 35px;
    margin: 2rem 0;
  }
  .aside__area > div img{
    width: 100%;
    pointer-events: none;
  }
  .aside__area > div p{
    color: rgb(231, 231, 231);
    font-size: 14px;
    padding: 20px;
    margin-bottom: 20px;
  }
  .aside__area > div button{
    display: block;
    outline: none;
    background-color: transparent;
    width: 60%;
    margin: auto;
    border: 2px solid rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    cursor: pointer;
    padding: 14px 0;
    border-radius: 2px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    transition: 0.5s ease-in-out;
  }
  .aside__area > div button:hover{
    border-color: rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
  }
  .aside__area > div button:active{
    opacity: 0.8;
  }
  /* Aside Animation */
  
  /* When Sign Up Mode Is Active\ Sign Up Side */
  .wrapper__area.sign-up__Mode-active .login__aside-info{ /* Login Aside */
    margin-top: -800px;
    opacity: 0;
  }
  /* When Sign Up Mode Is Active\ Login Side */
  .sign-up__aside-info{ /* Sign Up Aside */
    opacity: 0;
  }
  .wrapper__area.sign-up__Mode-active .sign-up__aside-info{
    opacity: 1;
  }

  /* Two Columns Styling */
.two-columns {
  display: flex;
  gap: 20px; /* Adjust spacing between fields */
}

.two-columns .field {
  flex: 1; /* Make fields equal in width */
}

/* Radio Buttons Group */
.radio__group {
  display: flex;
  gap: 20px; /* Space between radio options */
  align-items: center;
}

.radio__option {
  display: flex;
  align-items: center;
  gap: 5px; /* Space between radio button and label */
}

.radio__label {
  font-size: 14px;
  color: #555;
}

/* File Input */
.file__input {
  padding: 5px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%; /* Ensures full-width file input */
}

/* Error Message */
small.input__error_message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

/* Change label color when the radio button is selected */
.radio__option input[type="radio"]:checked + .radio__label {
  color: purple; 
  font-weight: bold;
}

/* Style the radio button itself */
.radio__option input[type="radio"] {
  accent-color: purple;
  cursor: pointer;
}
  }


    /* Add media query for responsiveness */
@media (max-width: 768px) {
  /* Hide the aside area on small screens */
  .aside__area {
    display: none;
  }

  /* Center the form area with borders */
  .forms__area {
    width: 100% !important; /* Full width */
    height: auto; /* Adjust height dynamically */
    margin: 20px; /* Add margin for spacing */
    padding: 20px; /* Add padding inside the form */
    border: 2px solid #6f3ed0; /* Add a border around the form */
    border-radius: 10px; /* Slight rounding for corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add a shadow effect */
    background-color: #fff; 
    
  }

  .forms__area form{
    padding: 20px 54px 10px 20px  !important;
    
  }

  /* Center the form within the wrapper */
  .wrapper__area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stack content vertically */
    padding: 10px; /* Padding around the wrapper */
  }

  /* Ensure buttons and inputs scale appropriately */
  form .input__group input,
  form .input__group select,
  button.submit-button {
    font-size: 16px !important; /* Adjust font size */
    padding: 12px; /* Adjust padding for touch-friendly elements */
  }



  /* Adjust form title size */
  form .form__title {
    font-size: 28px !important; /* Smaller font size for titles */
  }
}



.tutor_dashboard{

/*-----Dashboard panels-----*/


/* Panel 1 - Deep Purple */
.panel-primary {
  border: 1px solid #4B0082;
}
.panel-primary .panel-heading {
  background-color: #4B0082;
  color: white;
}

/* Panel 2 - Bright Purple */
.panel-slightly-lighter-purple {
  border: 1px solid #8A2BE2;
}
.panel-slightly-lighter-purple .panel-heading {
  background-color: #8A2BE2;
  color: white;
}

/* Panel 3 - Light Purple */
.panel-slightly-darker-purple {
  border: 1px solid #C8A2C8;
}
.panel-slightly-darker-purple .panel-heading {
  background-color: #C8A2C8;
  color: #333333; /* Dark Gray for contrast */
}

/* Panel 4 - Soft Gray-Purple */
.panel-muted-dark-purple {
  border: 1px solid #333333;
}
.panel-muted-dark-purple .panel-heading {
  background-color: #666666; /* A muted complement to purple */
  color: white;
}

/* Panel 5 - Dark Slate Blue */
.panel-dark-slate-blue {
  border: 1px solid #483d8b;
}
.panel-dark-slate-blue .panel-heading {
  background-color: #483d8b; 
  color: white;
}

/* Footer - Soft White */
.panel-footer {
  background-color: #F5F5F5; /* Light, neutral background */
  color: #4B0082; /* Deep Purple for text */
}



.panel-info > .panel-heading {
  color: #4a3f67; /* A calm, muted purple for the text */
  background-color: #ede7f6; /* Very light lavender for the background */
  border-color: #d1c4e9; /* Soft purple for the border */
}

.panel-info {
  border-color: #d1c4e9; /* Same soft purple as the heading border */
}

.panel-info > .panel-footer {
  background-color: #f3e5f5; /* Slightly warmer lavender for the footer */
  color: #4a3f67; /* Matching calm text color */
}


/*-----Breadcrumbs-----*/

.page-title-box{
      border-bottom: 1px solid #337ab7;
    margin-bottom: 30px;
}
.breadcrumb{
  margin-top: 14px;
  margin-bottom: 0;
  background-color: transparent;
}

/*-----List Group-----*/

/* .list-group {
    height: 206px;
    overflow: auto;
} */

/*-----Data Tables-----*/
table th{
  white-space: nowrap;
}

.huge{
	font-size: 200%;
}

#bookingStatusChart{
  height: auto;
  width: 100%
}






.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
.panel-body{padding:15px}
.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-heading>.dropdown .dropdown-toggle{color:inherit}
.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}
.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit}
.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}
.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0}
.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0}
.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-left-radius:3px;border-top-right-radius:3px}
.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}
.panel>.panel-heading+.panel-collapse>.list-group .list-group-item:first-child{border-top-left-radius:0;border-top-right-radius:0}
.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}
.list-group+.panel-footer{border-top-width:0}
.panel>.panel-collapse>.table,.panel>.table,.panel>.table-responsive>.table{margin-bottom:0}
.panel>.panel-collapse>.table caption,.panel>.table caption,.panel>.table-responsive>.table caption{padding-right:15px;padding-left:15px}
.panel>.table-responsive:first-child>.table:first-child,.panel>.table:first-child{border-top-left-radius:3px;border-top-right-radius:3px}
.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table:first-child>thead:first-child>tr:first-child{border-top-left-radius:3px;border-top-right-radius:3px}
.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child{border-top-left-radius:3px}
.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child{border-top-right-radius:3px}
.panel>.table-responsive:last-child>.table:last-child,.panel>.table:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}
.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}
.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:3px}
.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:3px}
.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd}
.panel>.table>tbody:first-child>tr:first-child td,.panel>.table>tbody:first-child>tr:first-child th{border-top:0}
.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}
.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}
.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}
.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th{border-bottom:0}
.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}
.panel>.table-responsive{margin-bottom:0;border:0}
.panel-group{margin-bottom:20px}
.panel-group .panel{margin-bottom:0;border-radius:4px}
.panel-group .panel+.panel{margin-top:5px}
.panel-group .panel-heading{border-bottom:0}
.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd}
.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}
.panel-default{border-color:#ddd}
.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}
.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd}
.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#333}
.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ddd}
.panel-success{border-color:#d6e9c6}
.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}
.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}
.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d}
.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}

.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1}
.panel-info>.panel-heading .badge{color:#d9edf7;background-color:#31708f}
.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bce8f1}


.panel-info > .panel-heading {
  color: #4a3f67; /* A calm, muted purple for the text */
  background-color: #ede7f6; /* Very light lavender for the background */
  border-color: #d1c4e9; /* Soft purple for the border */
}

.panel-info {
  border-color: #d1c4e9; /* Same soft purple as the heading border */
}

.panel-warning{border-color:#faebcc}
.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}
.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}
.panel-warning>.panel-heading .badge{color:#fcf8e3;background-color:#8a6d3b}
.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}
.panel-danger{border-color:#ebccd1}
.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}
.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}
.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442}
.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}
.text-right{text-align:right}



.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}
.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}
.col-xs-12{width:100%}
.col-xs-11{width:91.66666667%}
.col-xs-10{width:83.33333333%}
.col-xs-9{width:75%}
.col-xs-8{width:66.66666667%}
.col-xs-7{width:58.33333333%}
.col-xs-6{width:50%}
.col-xs-5{width:41.66666667%}
.col-xs-4{width:33.33333333%}
.col-xs-3{width:25%}
.col-xs-2{width:16.66666667%}
.col-xs-1{width:8.33333333%}


}




.order-box{

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

/*** Fixed Height and Parent div flex ***/
.verticalCenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*********** header *********/
.order-card {
  margin-top: 30px;
  padding:20px;
    width: 100%;
    max-width: 500px;
    border: 1px solid #d1c4e9;
    height: 95%;
  
}
.order-card:hover {
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2), 0 5px 5px rgba(0, 0, 0, 0.15);

}

.order-card h2.title {
    border-bottom: 1px solid #eeeeee;
    display: block;
    position: relative;
    padding: 15px 0 15px 25px;
    margin: 0;
}

.order-card .c-body {
    padding: 20px 0;
}

.order-card ul.progress-line {
    display: flex;
}

.order-card ul.progress-line li {
    flex: 1;
    margin-bottom: 30px;
    position: relative;
}
.order-card ul.progress-line li:after {
    content: '';
    height: 2px;
    width: 100%;
    border: 1px dashed #dddddd;
    position: absolute;
    right: -50%;
    bottom: 24px;
    z-index: 11;
}
.order-card ul.progress-line li.purple:after {
    border: 1px dashed #6f3ed0;

}

.order-card ul.progress-line li span {
    display: block;
    text-align: center;
    font-weight: 600;
    padding-bottom: 0px;
    font-size: 12px;
    min-height: 18px;
}

.order-card .purple {
    color: #6f3ed0 !important;
}
.order-card .red {
    color: red !important;
}

.order-card ul.progress-line li .icon {
    width: 50px;
    height: 50px;
    margin: 10px auto auto auto;
    border-radius: 50%;
    background: #ddd;
    align-items: center;
    text-align: center;
    display: flex;
    z-index: 999;
    position: relative;
}
.order-card ul.progress-line li.purple .icon {
    background: #6f3ed0;

}

.order-card ul.progress-line li .icon svg {
    width: 19px;
    height: 19px;
    margin: auto;

}

.order-card ul.progress-line li .icon-text {
    border-radius: 50px;
    background: #ddd;
    align-items: center;
    text-align: center;
    display: flex;
    height: 50px;
    margin: 10px auto auto auto;
    padding: 0 5px;
    color: #ffffff;
    width: auto;
    max-width: 85px;
    z-index: 999;
    position: relative;
}
.order-card ul.progress-line li:last-child {
    overflow: hidden;
}
.order-card ul.progress-line li:last-child:after {
    border: none;
}
.order-card ul.progress-line li .icon-text span {
    margin: auto;
}

.order-card .c-media {
    margin : 5px 0 0 10px;
    padding-left: 25px;
    min-height: 60px;
}

.order-card .c-media .img {
    position: relative;
    overflow: hidden;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    float: left;
    margin-right: 20px;

}

.order-card .c-media .img img {
    width: 100%;
    max-width: 100%;
}

.order-card .c-media .details h2 {
    font-weight: 400;
    margin: 0;
}

.order-card .c-media .details h4 {
    color: #9e9e9e;
    font-weight: 400;
    margin: 0 0;
}

.order-card .c-media.b-border {
    border-bottom: 1px solid rgba(214, 216, 219, 0.5);
}
.order-card .prices.b-border {
    border-bottom: 1px solid rgba(214, 216, 219, 0.5);
}

.order-card .prices {}
.order-card .prices ul{
    padding-left: 5px;
}
.order-card .prices ul li {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 5px 0 5px 30px;
}

.order-card .prices ul li .left {
  padding: 5px 15px 0 0;
    float: left;
    display: block;
}
.order-card .prices ul li .left h2{
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}
.order-card .prices ul li .left h2 small{
    font-weight: 400;
    display: block;
}
.order-card .prices ul li .left h4 {
    font-weight: 400;
    margin: 0;
    font-size: 16px;

}
.order-card .prices ul li .left {}
.order-card .prices ul li .right {
    width: 100%;
    text-align: right;
    padding: 5px 15px 0 0;
    font-weight: 600;
    font-size: 16px;
}
.order-card .prices ul li.total {
    padding: 15px 0 15px 30px;
    border-top: 1px solid #dddddd;
    font-size: 20px;
}
.order-card .prices {}
.badge {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
}
.btn-purple {
  background-color: #6f42c1; /* Bootstrap's purple color */
  color: white;
}
.btn-purple:hover {
  background-color: #5a32a3;
}
.badge-warning-serial {
    background-color: #6f3ed0;
    color: white;
}
.badge-warning {
    background-color: #ffc107;
    color: white;
}
.badge-success{
  color: #28a745;
}
.badge-danger{
  color: red;
}
.actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.actions .btn {
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.actions .btn-success {
    background-color: #28a745;
    color: white;
}

.actions .btn-danger {
    background-color: #dc3545;
    color: white;
}



/* Reduce font size for the order-card elements */
.order-card h2.title {
  font-size: 18px; /* Reduced from default */
  font-weight: 500; 
}

.order-card .c-body {
  font-size: 14px; /* General body text size */
  line-height: 1.4; /* Adjust line height for better spacing */
}

.order-card ul.progress-line li span {
  font-size: 12px; 
}

.order-card .c-media h4 {
  font-size: 14px; /* Smaller font for secondary headings */
}

.order-card .c-media h2 {
  font-size: 14px; /* Smaller font for primary headings */
  font-weight: 600; 
}

.order-card .prices ul li .left h4,
.order-card .prices ul li .right {
  font-size: 14px; /* Smaller text for price details */
}

.order-card .prices ul li .left h2 {
  font-size: 14px; 
}

.order-card .badge {
  font-size: 14px; /* Smaller badge text */
  padding: 3px 8px; 
}

.order-card .actions .btn {
  font-size: 12px; /* Smaller font for buttons */
  padding: 6px 12px; /* Compact button size */
}


.progress-line li {
  flex: 1;
  position: relative;
  text-align: center;
  color: gray; /* Default */
}

.progress-line li.gray .icon {
  background-color: #d3d3d3; /* Light gray */
}

.progress-line li.purple .icon {
  background-color: purple; /* Purple for active steps */
}

.progress-line li .icon {
  width: 50px;
  height: 50px;
  margin: 10px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}


}




.tutor_profile{

.account-settings .user-profile {
    margin: 0 0 1rem 0;
    padding-bottom: 1rem;
    text-align: center;
}
.account-settings .user-profile .user-avatar {
    margin: 0 0 1rem 0;
}
.account-settings .user-profile .user-avatar img {
    width: 90px;
    height: 90px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.account-settings .user-profile h5.user-name {
    margin: 0 0 0.5rem 0;
}
.account-settings .user-profile h6.user-email {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 400;
    color: #9fa8b9;
}
.account-settings {
  display: flex;
  flex-direction: column;
  height: 100%; /* Makes the container span the full height */
}

.account-settings .tips {
  margin: 2rem 0 0 0;
  padding: 0.5rem;
  border-radius: 8px;
}

.account-settings .tips h5 {
  margin: 0 0 15px 0;
  color: #6f3ed0;
  font-size: 1.25rem;
  font-weight: bold;
  border-bottom: 2px solid #6f3ed0;
  padding-bottom: 5px;
}

.account-settings .tips a {
  display: block;
  margin: 0 auto;
  background-color: #6f3ed0;
  color: white;
  border: none;
  border-radius: 0.4rem;
  padding: 5px 10px;
  text-align: center;
  width: 100%;
  text-decoration: none;
}

.account-settings .tips:last-child {
  margin-top: auto; /* Pushes the last .tips (Cancel) to the bottom */
}


.account-settings .tips ul {
  list-style: none; /* Removes bullet points */
  padding: 0; /* Removes default padding */
  font-size: 0.9rem; /* Slightly larger text for better readability */
  line-height: 1.5; /* Improves spacing between lines */
}

.account-settings .tips ul li {
  margin-bottom: 10px; /* Adds spacing between list items */
  display: flex;
  /* align-items: center; Centers icon and text vertically */
}

.account-settings .tips ul li:before {
  content: "✔"; /* Adds a checkmark icon before each list item */
  color: #6f3ed0; /* Matches heading color */
  font-size: 1rem;
  margin-right: 10px; /* Spacing between icon and text */
}

.form-control {
    border: 1px solid #cfd1d8;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: .825rem;
    background: #ffffff;
    color: #2e323c;
}

.card {
    background: #ffffff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    margin-bottom: 1rem;
}

.card-body{
  border: 1px solid #9fa8b9;
  width: 100%;
  margin: 10px;
}

h5.text-primary {
  font-weight: bold;
}



   section {
    height: 8rem;
   border: 1px solid #6f3ed0;
   background-color: #fff;
   border-radius: 0.8rem;

   /* Center content using flexbox */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   text-align: center; 
   transition: transform 0.3s ease-in-out;

   margin-bottom: 20px;
   
}

section > h2{
   font-size: 1rem;
   letter-spacing: .2rem;
   font-weight: 400;
   color: #6f3ed0;
 margin-top:-20px;
 text-transform: none;
}



.distance__section {
   position: relative;
   padding: 20px 10px;
}
.distance__section::after {
   content: '';
   height: 1rem;
   width: 80%;
   background-color: #6f3ed0;
   position: absolute;
   top:0;
   border-radius: 0 0 1.2rem 1.2rem;
   box-shadow: inset .4rem .4rem 1rem rgba(0,0,0,.2);
}
p {
   color: black;
   font-size: 1rem;
}
.distance__section > h2 {
   font-weight: 400;
   font-size: 0.8rem;
   letter-spacing: 0;
}
.delete-button {
   background-color: #6f3ed0;
 color:white;
   margin: 0.5rem 0 0 0 ;
   border-radius: 0.4rem;
   border: none;
   padding: 5px 15px;
   font-size: 10px;

 


}
.update-button {
   background-color: #6f3ed0;
 color:white;
   margin: 0.5rem 0 0 0 ;
   border-radius: 0.4rem;
   border: none;
   padding: 5px 25px;
   width: 100%;
   

}

}

/* Notifications */



@media (max-width: 600px) {
  .notification_details {
    width: 400px !important;
}
}


.hidden {
  display: none !important;
}

.notification-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.notification_details {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 50%;
  max-height: 50vh;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center everything */
}

/* Notification title */
.notification-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #6f3ed0; 
}
/* Make only the list scrollable, not the entire popup */
.notification-list-container {
  max-height: 35vh;
  overflow-y: auto;
  padding-bottom: 20px; /* Space before the close button */
  width: 100%;
}


.notification_card {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.notification {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.notification__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
}
/* Center the Close button & add space below */
.close-popup , .close-admin-popup {
  padding: 10px 20px;
  background: #6f3ed0; /* Purple */
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  margin-top: 10px; 
  margin-bottom: 20px; 
  width: 80%;
}



  .rolecard {
   
      height: 100px;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 36px;
    perspective: 2500px;
    margin: 600px 50px 0px 100px;
    cursor: pointer;
  }
  
  .cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .wrapperrole {
      height: 580px;
    transition: all 0.5s;
    position: absolute;
    width: 100%;
    z-index: -1;
  }
  
  .rolecard:hover .wrapperrole {
    transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
    box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  }
  
  .wrapperrole::before,
  .wrapperrole::after {
    content: "";
    opacity: 0;
    width: 100%;
    height: 80px;
    transition: all 0.5s;
    position: absolute;
    left: 0;
  }
  .wrapperrole::before {
    top: 0;
    height: 100%;
    background-image: linear-gradient(
      to top,
      transparent 46%,
      rgba(12, 13, 19, 0.5) 68%,
      rgba(12, 13, 19) 97%
    );
  }
  .wrapperrole::after {
    bottom: 0;
    opacity: 1;
    background-image: linear-gradient(
      to bottom,
      transparent 46%,
      rgba(12, 13, 19, 0.5) 68%,
      rgba(12, 13, 19) 97%
    );
  }
  
  .rolecard:hover .wrapperrole::before,
  .wrapperrole::after {
    opacity: 1;
  }
  
  .rolecard:hover .wrapperrole::after {
    height: 120px;
  }
  .ola_title {
    width: 100%;
    transition: transform 0.5s;
  }
  .rolecard:hover .ola_title {
    transform: translate3d(0%, -50px, 100px);
  }
  
  .character {
    width: 100%;
    opacity: 0;
    transition: all 0.5s;
    position: absolute;
    z-index: -1;
  }
  
  .rolecard:hover .character {
    opacity: 1;
    transform: translate3d(0%, -20%, 100px);
  }




  .tile {
    width: 80%;
    margin: 60px auto;
}
#tile-1 .tab-pane {
  padding: 15px;
  height: auto;
}

#tile-1 .nav-tabs {
    position: relative;
    border-bottom: 1px solid #6f3ed056 !important;
    background-color: #fff;
    border-radius: 6px;
    margin-bottom: 45px;
}
#tile-1 .nav-tabs li {
    margin: 0px !important;
}
#tile-1 .nav-tabs li a {
    position: relative;
    padding: 20px 40px !important;
    font-size: 16px;
    border: none !important;
    color: #333;
}
#tile-1 .nav-tabs a:hover {
  /* border-bottom: 3px solid #6f3ed0 !important; */
}
#tile-1 .slider {
    display: inline-block;
    width: 30px;
    height: 4px;
    border-radius: 3px;
    background-color: #6f3ed0;
    position: absolute;
    bottom: 0;
    transition: all 0.4s linear;
}
#tile-1 .nav-tabs .active {
    background-color: transparent !important;
    
    border-bottom: 3px solid #6f3ed0 !important;
    color: #6f3ed0 !important;
}



.layer-stretch {
  position: relative;
  max-width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
  overflow: hidden; }


  .layer-wrapper-tutor {
    position: relative;
    width: 100%;
    padding: 50px 0 50px 0;
    margin: 0; }

    .layer-bottom-0 {
      padding: 0px 0 0 0; }


      .newtutorpending-text {
        font-size: 14px;
        color: #333;
        padding: 5px 0; }
        .newtutorpending-text .fa {
          vertical-align: middle;
          width: 30px;
          height: 20px;
          line-height: 20px;
          font-size: 16px;
          text-align: center;
          color: #777; }
        .newtutorpending-text span {
          display: inline-block;
          vertical-align: middle;
          max-width: 85%;
          margin: 0;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden; }



          .newtutorpending-container .theme-material-card {
            margin: 0 0 30px 0; }
          
          .newtutorpending-view,
          .myfeedback-view {
            overflow: hidden;
            padding: 10px 0 0 0; }
          
          .newtutorpending-popup-tbl .tbl-cell,
          .myfeedback-popup-tbl .tbl-cell {
            vertical-align: top;
            padding: 5px 10px; }
            .newtutorpending-popup-tbl .tbl-cell span,
            .myfeedback-popup-tbl .tbl-cell span {
              display: inline-block;
              margin: 0; }
            .newtutorpending-popup-tbl .tbl-cell .fa,
            .myfeedback-popup-tbl .tbl-cell .fa {
              font-size: 18px;
              color: #999;
              width: 40px;
              height: 30px;
              line-height: 30px;
              text-align: center; }
            .newtutorpending-popup-tbl .tbl-cell p,
            .myfeedback-popup-tbl .tbl-cell p {
              text-align: left;
              margin: 0; }
              .theme-material-card {
            margin: 0 0 30px 0;
            padding: 15px;
            background: #FFF;
            border-top: 2px solid #6f3ed0;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }



            .language-container {
              display: flex;
              justify-content: flex-end; /* Aligns the switcher to the right */
          }
        
          .language-switcher {
              display: flex;
              gap: 10px;
              font-size: 16px;
              font-weight: bold;
              z-index: 1000;

              margin-top: -47px !important;
          }
        
          .language-switcher a {
              text-decoration: none;
              padding: 0px 15px;
              border-radius: 8px;
              transition: background 0.3s, color 0.3s;

          }
        
          .language-switcher a:hover {
              color: #6c63ff;
          }
















              
.availabilities{
  .container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  h1 {
    text-align: center;
    color: #333;
  }
  
  form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  form input,
  form button {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  form button {
    background-color: #6f3ed0;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  form button:hover {
    background-color: #6c63ff;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }
  
  table th,
  table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
  }
  
  table th {
    background-color: #f8f9fa;
  }
  
  table tr:nth-child(even) {
    background-color: #f4f4f9;
  }
  
  .total {
    font-size: 18px;
    text-align: right;
    color: #333;
  }}




  
/*--------------------
Buttons
--------------------*/
.btn_checkout_section {
  display: block;
  color: hsl(0, 0, 100);
  text-decoration: none;
  margin: 20px 0;
  padding: 15px 15px;
  border-radius: 5px;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .2s ease-in-out;
    box-shadow: inset 0 3px 0 hsla(0, 0, 0, 0), 0 3px 3px hsla(0, 0, 0, .2);
    border-radius: 5px;
  }

  &:hover::after {
    background: hsla(0, 0, 0, 0.1);
    box-shadow: inset 0 3px 0 hsla(0, 0, 0, 0.2);
  }

}

/*--------------------
Form
--------------------*/
.form_checkout_section {

  fieldset {
    border: none;
    padding: 0;
    padding: 10px 0;
    position: relative;
    clear: both;

    &.fieldset-expiration {
      float: left;
      width: 60%;

      & .select {
        border: 1px solid;
        width: 84px;
        margin-right: 12px;
        float: left;
      }
    }

        &.fieldset-type{
          float: left;
          width: 100%;
    
        & .select {
          border: 1px solid;
          width: 184px;
          margin-right: 12px;
          float: left;
        }}

    &.fieldset-ccv {
      clear: none;
      float: right;
      width: 86px;
    }

    label {
      display: block;
      text-transform: uppercase;
      font-size: 11px;
      color: hsla(0, 0, 0, .6);
      margin-bottom: 5px;
      font-weight: bold;
      font-family: Inconsolata;
    }

    input,
    .select {
      width: 100%;
      height: 38px;
      color: hsl(0, 0, 20);
      padding: 10px;
      border-radius: 5px;
      font-size: 15px;
      outline: none!important;
      border: 1px solid hsla(0, 0, 0, 0.3);
      box-shadow: inset 0 1px 4px hsla(0, 0, 0, 0.2);

      &.input-cart-number {
        width: 82px;
        display: inline-block;
        margin-right: 8px;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .select {
      position: relative;

      &::after {
        content: '';
        border-top: 8px solid #222;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        position: absolute;
        z-index: 2;
        top: 14px;
        right: 10px;
        pointer-events: none;
      }

      select {
        appearance: none;
        position: absolute;
        padding: 0;
        border: none;
        width: 100%;
        outline: none!important;
        top: 6px;
        left: 6px;
        background: none;

        :-moz-focusring {
          color: transparent;
          text-shadow: 0 0 0 #000;
        }

      }
    }


  }

  button {
    width: 100%;
    outline: none!important;
    background: #6f3ed0;
    text-transform: uppercase;
    font-weight: bold;
    border: none;
    box-shadow: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    margin-top: 90px;
    color: white;

    & .fa {
      margin-right: 6px;
    }
  }

}

/*--------------------
Checkout
--------------------*/
.checkout {
  margin: 150px auto 30px;
  position: relative;
  width: 460px;
  background: white;
  border-radius: 15px;
  padding: 160px 45px 30px;
  box-shadow: 0px 1px 15px gray;
}

/*--------------------
Credit Card
--------------------*/
.credit-card-box {
  perspective: 1000;
  width: 400px;
  height: 280px;
  position: absolute;
  top: -112px;
  left: 50%;
  transform: translateX(-50%);

  &:hover .flip,
  &.hover .flip {
    transform: rotateY(180deg);
  }

  .front,
  .back {
    width: 400px;
    height: 250px;
    border-radius: 15px;
    backface-visibility: hidden;
    background: linear-gradient(135deg, #6f3ed0, #c0a0ff);
    position: absolute;
    color: #fff;
    font-family: Inconsolata;
    top: 0;
    left: 0;
    text-shadow: 0 1px 1px hsla(0, 0, 0, 0.3);
    box-shadow: 0 1px 6px hsla(0, 0, 0, 0.3);

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: cover;
      opacity: .05;
    }
  }

  .flip {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
  }

  .logo {
    position: absolute;
    top: 9px;
    right: 20px;
    width: 60px;

    svg {
      width: 100%;
      height: auto;
      fill: #fff;
    }
  }

  .front {
    z-index: 2;
    transform: rotateY(0deg);
  }

  .back {
    transform: rotateY(180deg);

    .logo {
      top: 185px;
    }

  }

  .chip {
    position: absolute;
    width: 60px;
    height: 45px;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, hsl(269,54%,87%) 0%,hsl(200,64%,89%) 44%,hsl(18,55%,94%) 100%);;
    border-radius: 8px;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      border: 4px solid hsla(0, 0, 50, .1);
      width: 80%;
      height: 70%;
      border-radius: 5px;
    }
  }

  .strip {
    background: linear-gradient(135deg, hsl(0, 0, 25%), hsl(0, 0, 10%));
    position: absolute;
    width: 100%;
    height: 50px;
    top: 30px;
    left: 0;
  }

  .number {
    position: absolute;
    margin: 0 auto;
    top: 103px;
    left: 19px;
    font-size: 38px;
  }

  label {
    font-size: 10px;
    letter-spacing: 1px;
    text-shadow: none;
    text-transform: uppercase;
    font-weight: normal;
    opacity: 0.5;
    display: block;
    margin-bottom: 3px;
  }

  .card-holder,
  .card-expiration-date {
    position: absolute;
    margin: 0 auto;
    top: 180px;
    left: 19px;
    font-size: 22px;
    text-transform: capitalize;
  }

  .card-expiration-date {
    text-align: right;
    left: auto;
    right: 20px;
  }

  .ccv {
    height: 36px;
    background: #fff;
    width: 91%;
    border-radius: 5px;
    top: 110px;
    left: 0;
    right: 0;
    position: absolute;
    margin: 0 auto;
    color: #000;
    text-align: right;
    padding: 10px;

    label {
      margin: -25px 0 0px;
      color: #fff;
    }
  }


}


.the-most {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 50vw;
  max-width: 200px;
  padding: 10px;
  
  img {
    max-width: 100%;
  }
}

.card-icon{
    height:40px;
    margin: 16px 0px 0px -86px;
}
.card-icon2{
    height:40px;
    margin: 0px 0px 0px -86px;
}



.btn-purple-hover {
  background-color: #6f3ed0; /* default warning */
  color: white;
  transition: background-color 0.3s ease;
}

.btn-purple-hover:hover {
  background-color: #211042 !important;
  color: white !important;
}


.btn.btn-reschedule-custom {
  background-color: #6f3ed0 !important;
  color: white !important;
}

.btn.btn-reschedule-custom:hover {
  background-color: #5931aa !important;
  color: white !important;
}



.star-yellow {
  color: gold;
}
.star-gray {
  color: lightgray;
}




.mainCenter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 0;


.wrap {
  margin: 0.5rem;
  transform-style: preserve-3d;
  transform: perspective(80rem);
  cursor: pointer;
}

.container {
  --rX: 0;
  --rY: 0;
  --bX: 50%;
  --bY: 80%;

  width: 18rem;         
  height: 22rem;       
  border: 1px solid #ccc;
  border-radius: 1.2rem;
  padding: 0rem;
  display: flex;
  align-items: flex-end;
  position: relative;

  background-position: center;
  background-size: cover;
  box-shadow: 0 0 1rem 0.2rem rgba(0, 0, 0, 0.1);
  transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
  transition: transform 0.4s ease;
}

.container::before,
.container::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 1px solid #fff;
  position: absolute;
  z-index: 2;
  opacity: 0.7;
  transition: 0.3s;
}

.container::before {
  top: 1rem;
  right: 1rem;
  border-bottom: 0;
  border-left: 0;
}

.container::after {
  bottom: 1rem;
  left: 1rem;
  border-top: 0;
  border-right: 0;
}

.wrap:hover .container::before,
.wrap:hover .container::after {
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
}

/* Text inside the card */
.container > div {
  background-color: rgba(0, 0, 0, 0.394);
  border-radius: 0.8rem;
  padding: 2rem !important;
  color: #fff;
  width: 100%;
  height: 100%;
}



}









.cards-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  max-width: 1240px;
  margin: 0 auto;
  justify-content: center;
  


.card {
  flex: 1 0 380px;
  max-width: 380px;
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #333;
  padding: 1.25rem;
  background-color: #F8F8F8;
  transition: .15s ease-in;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 20px 50px 0 rgba(0,0,0,0.1);
  border-radius: 0.4em;
 
}

.card .card-item-price {
  transition: .15s ease-in;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 20px 50px 0 rgba(0,0,0,0.1);
  border-radius: 0.4em;
}

.card:hover .card-item-price,
.card:hover, 
.card:focus-within {
  box-shadow: 0 0 0 2px #6f3ed0, 0 10px 60px 0 rgba(0,0,0,0.1);
}

.card:hover {
  transform: scale(1.03);
  background-color: #FFF;
}

.card:hover .card-image {
  margin: -1.28em -1.28em 0 !important;
  border-radius: calc(0.4em * 1.4);
}

.card:hover .card-content {
  margin-top: -2.30em;
  margin-left: -0.5em;
  margin-right: -0.5em;
}

.card:hover .author {
  --avatar-size: 6em;
  --font-size: 1.2em;
}

.card a {
  text-decoration: none;
  color: #6f3ed0;
}

.card .icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.card-type:before {
  display: block;
  position: absolute;
  top: 0.9em;
  right: 0.9em;
  background: #6f3ed0;
  color: #FFF;
  border-radius: 0.4em;
  font-size: 0.9em;
  padding: 0.2em 0.7em;
  z-index: 120;
  opacity: 0.7;
  transition: .15s ease-in;
}

.card-type:hover:before {
  opacity: 1;
}

.card-type-course-live:before {
  content: 'Live Course';
}
.card-type-course-online:before {
  content: 'Online Course';
}

.card-type-course-recorded:before {
  background: purple;
  content: 'Video Course';      
}

.card-type-course-workshop:before {
  background: orange;
  content: 'Workshop';
}

.card img {
  display: block;
  width: 100%;
  height: auto;
}

.card-image {
  border-radius: 0.4em;
  overflow: hidden;
  margin: -0.7em;
  position: relative;
  transition: .15s ease-in;
}

.card-image:before,
.card-image:after {
  display: block;
  content: '';
}

.card-image:before {
  padding-top: 56.25%;
}

.card-image:after {
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  background: rgba(0,0,0,0.1);
  border: 1px solid #CCC;
  box-shadow: 0 0 0.8em 0.1em rgba(0,0,0,0.3) inset;
}

.card-image > img {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
}

.card-title {
  display: block;
  font-weight: bold;
  font-size: 1.6em;
  line-height: 1.1;
  border-bottom: 2px solid #DDD;
  padding: 0 0 0.2em 0;
  margin-bottom: 0.2em;
}

.card-content {
  --font-size: 1em;
  background: #FFF;
  border-radius: 0.4em;
  box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.1);
  padding: 0.7em 1em;
  margin: -1.5em 0 0 0;
  margin-bottom: 1em;
  position: relative;
  font-size: var(--font-size);
  transition: .15s ease-in;
}

.card-content p {
  line-height: 1.35;
}

.card-item-groups-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0.3em 0.5em;
  margin-bottom: 0.3em;
  line-height: 1;
}

.card-item-groups-title .title {
  display: block;
  font-weight: bold;
  font-size: 1.2em;
}

.card-item-groups-title .see-all {
  display: block;
  font-size: 0.9em;
}

.card-item-groups-title .see-all:hover {
  text-decoration: underline;
}

.card-item-groups-entry {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.5em;
  font-size: 0.9em;
  padding: 0.5em 1em;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 0.4em;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.2s ease-in;
  position: relative;
  z-index: 20;
  background-color: #FDFDFD;
}

.card-item-groups-entry:hover {
  opacity: 1;
}

.card-item-groups-entry .start, 
.card-item-groups-entry .end {
  display: flex;
  flex-direction: column;
}

.card-item-groups-entry .start .label,
.card-item-groups-entry .end .label {
  font-size: 0.9em;
}

.card-item-groups-entry .start .value,
.card-item-groups-entry .end .value {
  display: flex;
  align-items: center;
}

.card-item-groups-entry .start .value .icon,
.card-item-groups-entry .end .value .icon {
  opacity: 0.5;
  margin-right: 0.2em;
}

.card-item-groups-entry .start .value .icon:not(:first-child),
.card-item-groups-entry .end .value .icon:not(:first-child) {
  margin-left: 0.5em;
}

.card-item-groups-entry .price {
  font-weight: bold;
  font-size: 1.2em;
}

.card-item-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #6f3ed0;
  background: #FFF;
  padding: 0.7em 2em;
  cursor: pointer;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.1) !important;
  margin-top: 1em;
}

.card-item-price .value-price {
  font-weight: bold;
  font-size: 1.8em;
}

.card-item-price .value-price .icon {
  fill: #6f3ed0;
  vertical-align: -0.125em;
  display: inline-block;
  margin-right: 0.1em;
  transition: fill 0.2s ease-in;
}




.author {
  --avatar-size: 5em;
  --font-size: 1em;
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: 0; 
  overflow: hidden;
  padding: 0.5em 0;
  z-index: 100;
}

.author .label {
  display: flex;
  align-items: center;
  gap: 0.3em;
  box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.1);
  padding: 0.3em 0.8em;
  padding-right: 1.5em;
  position: relative;
  right: -1.5em;
  z-index: 5;
  background: #FFF;
  border-radius: 0.3em;
  font-size: var(--font-size);
  font-weight: bold;
  transition: .15s ease-in;
}

.author .label img, 
.author .label span, 
.author .label svg {
  display: block;
}

.author .label svg {
  width: 1.2em;
  margin-right: 0.2em;
}

.author .avatar {
  display: block;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border: 0.3em solid #FFF;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.1);
  z-index: 10;
  position: relative;
  right: -0.8em;
  transition: .15s ease-in;
}

/* Enrollment status styles */
.enrollment-status {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.9em;
  z-index: 100;
}

.enrolled {
  background: green;
}

.pending {
  background: orange;
}

/* Tutor controls */
.tutor-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 5px;
  z-index: 100;
}

.tutor-controls span {
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.9em;
}

.approved {
  background: green;
}

.pending-approval {
  background: orange;
}

.tutor-controls a {
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.9em;
  text-decoration: none;
}

.edit-btn {
  background: #666;
}

.delete-btn {
  background: #d33;
}

/* Enrollment form styles */
.enrollment-form {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
  background: rgba(255,255,255,0.9);
  padding: 5px;
  border-radius: 4px;
}

.enrollment-form select {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ddd;
  margin-right: 5px;
}

.enrollment-form button {
  background: #6f3ed0;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.enrollment-form button:hover {
  opacity: 0.9;
}

.course-type-badge {
    display: inline-block;
    background: #eee;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-left: 8px;
    color: #666;
}
}





.page-wrapper_centers {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;


.center-container {
  display: flex;
  width: 100%;
  max-width: 1000px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin: 10px 0;
}

.center-info {
  padding: 40px;
  color: black;
  flex: 1;
}

.center-info h1 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: black;
}

.center-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 25px;
  max-height: 250px;
  object-fit: cover;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.info-item .icon {
  margin-right: 15px;
  color: #7838f9;
  font-size: 1.5rem;
  min-width: 30px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  margin-top: 30px;
  color: black;
  text-decoration: none;
  transition: all 0.3s ease;
}

.back-link:hover {
  transform: translateX(-5px);
}

.back-link .icon {
  margin-right: 8px;
}

#map {
  flex: 1;
  min-height: 500px;
}

.no-map {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  color: #666;
  padding: 20px;
}
}
@media (max-width: 768px) {
  

  .page-wrapper_centers {
      min-height: calc(100vh - 140px); /* Adjust for mobile */
      padding: 15px;
      align-items: flex-start; /* Align to top on mobile */
  

  .center-container {
      flex-direction: column;
      margin: 10px 0;
  }

  .center-info {
      padding: 25px;
  }

  #map {
      min-height: 300px;
  }
}}

@media (max-width: 480px) {
  .page-wrapper_centers {
  .center-info h1 {
      font-size: 1.5rem;
  }
  
  .info-item {
      font-size: 1rem;
  }}
}






.card-item-price { display:block; }
.course-rows { display:flex; flex-direction:column; gap:15px; }

/* Row 1: price | enroll */
.course-row-1 { display:flex; gap:10px; align-items:center; }
.course-row-1 .value-price,
.course-row-1 .enroll-cell { flex:1; }

.value-price {
  display:block; text-align:center; font-weight:700;
  padding:8px 12px; 
}
.enroll-btn {
  width:100%; text-align:center; background:#6f3ed0; color:#fff;
  border:none; padding:8px 12px; border-radius:6px; cursor:pointer; display:inline-block;
}
.status-chip { width:100%; text-align:center; font-weight:600; }

/* Row 2: select (full width) */
.course-row-2 select.form-select {
  width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:6px; background:#fff;
}