a{
text-decoration: none !important;
}
.social .slborder{
    color:#ddd; 
    font-weight: normal; 
    margin-top: -5px;
}
.edu-text-color{
    color: #434343;
}
.edu-color{
    color: #180d60;
}
.border-radius-call{
    border-radius: 16px;
}
.ee-bg{
    background-color: #180d60 !important;
}
.edu-bg-back{
    background-image: linear-gradient(180deg, #8A7CDBFA 0%, #FF922EFA 100%);
}
.edu-orange-color{
    color: #ff922e;
}

.eduhover:hover {
    color: #fab879 !important; }

.edu-box-shadow{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;
}
.edu-ul  li { list-style: circle;}
.text-justify {
    text-align: justify;
  }
.edu-bg-tarnsparent {
    background: #f9f9f98f;
}

.custom-cart-hr{
    border: 1px solid;
    margin-top: 3px;
}
.ee-orange-bg-color{
    background-color: #ff922e;
}

ul.dtlms-custom-login li a[title="Register Now"]:hover {
    background: var(--wdtSecondaryColor);
    color: var(--wdtAccentTxtColor);
}
.edu-btn {
    background-color: #ff922e;
    color: white;
    padding: 10px 18px;
    border-radius: 37px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.5s ease; 
}
.edu-btn:hover {
    background-color: #180d60;
}
@keyframes moveRight {
    0% {
        transform: translateX(0); 
    }
    100% {
        transform: translateX(10px); 
    }
}
.edu-btn:hover .move-icon-btn {
    display: inline-block;
    animation: moveRight 1s ease-in-out infinite; 
}
.element {
    background: linear-gradient(to right, rgb(28, 2, 122), rgb(28, 2, 122), #ff922e, #ff922e, #ff922e);
    transition: background-position 1s ease; 
    background-size: 200% 100%;
    background-position: right; 
}
.element:hover {
    background-position: left; 
}
.cart-register-area {
    display: flex;
    align-items: center;
    gap: 3px;
}
.section-height{
    height:463px; overflow: hidden;
}
.dropdown-item {
    color: #180d60;
    font-weight: 600;
    font-size: 15px;
    background-color: white !important;
    line-height: 1.7;
    margin-left: -15px;
    width: 250px;
    white-space: pre-line !important;
    width: 253px !important;
}
.dropdown-menu, .nav-item  a:hover{
    color: #ff922e;
}
.dropdown-menu .nav-item.dropdown a{
    text-transform: capitalize;
}
.nav-item a{
    color: #333;
    font-weight: 700;
    text-transform: uppercase;
}
.cart-count {
    position: relative;
    top: -13px;
    right: 2px;
    width: 18px;
    background-color: #180d60;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
}
.edu-outline-btn {
    height: 35px;
    padding-left: 18px;
    padding-right: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: .5px solid #afafaf;
    color: var(--grey-1100);
    font-size: 12px;
}
.edu-outline-btn-hover:hover{
    border-radius: 50px;
    border: .5px solid #afafaf;
}

.close-model-btn{
    border: 2px solid #ef7a0f !important;
    padding: 3px !important;
    font-size: 15px !important;
    border-radius: 9px !important;
    height: 19px !important;
    width: 51px !important;
}

/* start @media query */

@media(min-width: 320px){
  
   .navbar-nav .sub-dropdowns{
        margin-left: 0px;   
        /* margin-top: px; */
    }
    .w-sm-75{
        width: 90% !important;
    }
    .top-h{
        margin-top: 6rem !important;
    }
    .text-top-h{
        font-size: 4rem;
    }
 .future{
        position: relative; 
        top: -17px 
    }
    .top-para{
        width: 91%;
    }
    .marquee-content {
        display: flex;
        animation: scroll 5s linear infinite;
        gap: 40px;
    }
    .E-leanern-Fav-top{
        font-size: 36px;
    }
    .E-leanern-top{
        position: relative;
        top: -13px;
        font-size: 30px;

    }
    .meettings-section{
        margin-top: 1rem; width: 100%;
    }
    .section-wrapper {
         padding: 30px 0px 0px 3px;
     }
     .lg-w-50{
        width: 100%;
     }
}

@media(min-width: 768px){
    .w-sm-75{
        width: 50% !important;
    }  
    
}

@media(min-width: 1024px){    
    .state-line{
        display: none;
    }
    .offcanvas-body .navbar-nav{
        display: block;
        display: flex;
    }
    .login-cart-registertion-code .register-btn{
        display: none;
    }
    .login-cart-registertion-code .register-icon{
        display: block;
    }
       .top-h{
        margin-top: 12.6rem !important;
    }

    .text-top-h{
        font-size: 6rem;
    }
 .future{
        position: relative; 
        top: -20px 
    }
    .top-para{
        width: 85%;
    }
    .marquee-content {
        display: flex;
        animation: scroll 28s linear infinite;
    }
    .meettings-section{
        margin-top: -7rem; width: 80%;
    }
    .section-wrapper {
       padding: 40px 6px 0px 40px;
    }
    .lg-w-50{
        width: 60%;
     }
    .navbar-expand-lg .offcanvas .offcanvas-body {
        font-size: 0.8rem;
    }
}
@media(min-width: 1280px){  
    
  .navbar-nav .sub-dropdowns{
        margin-left: 100%;   
        margin-top: -50px;
        position: relative;
    }
    .state-line{
        display: block;
    }
    .cart-register-area .register-btn{
        display: block;
    }

    .login-cart-registertion-code .register-icon{
        display: none;
    }
    .text-top-h{
        font-size: 8rem;
        font-weight: 700;
    }
 .future{
        position: relative; 
        top: -47px;
    }
    
    .top-para{
        width: 80%;
        font-size: 18px;
    }

    .meettings-section{
        margin-top: -8rem; width: 90%;
    }    

    .navbar-expand-lg .offcanvas .offcanvas-body {
        font-size: 0.9rem;
    }
}

@media(min-width: 1400px){
    .navbar-expand-lg .offcanvas .offcanvas-body {
        font-size: 1rem;
    }

    .navbar-nav .sub-dropdowns{
          margin-left: 100%;   
          margin-top: -50px;
          position: relative;
      }   

    .login-cart-registertion-code .register-btn{
        display: block;
    }

    .login-cart-registertion-code .register-icon{
        display: none;
    }
  
          .offcanvas-body .navbar-nav{
            display: block;
            display: flex;
        }
  }

.subjects-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 20px;
    padding-bottom: 20px;
    width: 100%;
    max-width: 100%;
}
.subjects-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}

.subject-box {
    flex: 0 0 auto;
    width: 225px;
    border: 2px solid #180d60;
    border-radius: 10px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.2); 
}
.subject-box:hover {
    background-color: transparent;
    background-image: linear-gradient(99.5deg, #8A7CDB30 0%, #FF922E1A 99.13%);
    /* background: linear-gradient(89deg, rgb(195 208 238 / 77%), rgb(164 154 241 / 24%), rgb(201 202 155 / 42%)); */
    box-shadow: 0px 4px 15px rgb(244 237 237 / 90%);
    border-color: #fdf1f100;
    cursor: pointer;
    text-align: center;
}
.subject-title {
    font-weight: bold;
    margin-top: 15px;
    font-size: 18px;
}

.subject-description {
    transition: opacity 0.3s ease; 
    opacity: 1; 
}
.subject-box:hover .subject-title,
.subject-box:hover .subject-description {
    opacity: 0; /* Hide text */
}

.subject-box:hover .subject-icon {
    color: #fff; 
}

.section-heading {
    font-size: 33px;
    text-align: start;
    font-weight: bold;
}
.subject-box .subject-icon {
    transition: transform 0.7s ease, color 0.7s ease; 
    transform: scale(1);
    color: inherit; 
}
.subject-box:hover .subject-icon {
    transform: scale(1.4); /* Zoom in on hover */
}
.subject-box:hover svg {
    color: #180d60; 

}
.subject-box {
    position: relative; 
}

.subject-box p {
    position: absolute; 
    bottom: 0px;
    transform: translateY(100%);
    transition: transform 0.9s ease, bottom 0.9s ease; 
    opacity: 0;
    font-size: 18px;
    text-align: center;
}
.subject-box:hover p {
    transform: translateY(0); 
    bottom: 55px;
    opacity: 1; 
    text-align: center;
}
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
}
.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}


@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
.filter-buttons {
    display: flex;
    gap: 15px;
    line-height: 2;
}
.home-card .homeimage {
    overflow: hidden;
    position: relative;
}

.home-card .homeimage img {
    transition: transform 0.7s ease-in-out;
    transform: scale(1);
    display: block;
    width: 100%; 
}

.home-card .homeimage:hover img {
    transform: scale(1.1); 
    cursor: pointer;
}
.card-container {
    display: flex;
    gap: 17px;
    justify-content: space-between;
}
.card .info {
    display: flex;
    font-size: 14px;
    height: 44px;
}
.card .info span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.card .price {
    font-size: 16px;
    font-weight: 600;
    border-radius: 23px  ;
    border: 1px solid #646262;
    padding: 3px 17px;
    line-height: 2.1;
}
.image-wrapper {
    position: relative;
}
.orange-circle {
    position: absolute;
    top: -41px;
    right: -29px;
    background-color: #ff922e;
    color: white;
    border-radius: 100%;
    padding: 45px;
    text-align: center;
    width: 200px;
    height: 200px;
}
.section-wrapper {
    background-color: #44328C;
    color: white;
    border-radius: 20px;
   }
.platform-logo {
    background-color: white;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 20px;
}
.Testimonial {
    border: 1px solid #180d60;
    border-radius: 10px;
    padding: 26px;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.2); 
}
.Testimonial:hover {
    background-color: transparent;
    background-image: linear-gradient(99.5deg, #8A7CDB30 0%, #FF922E1A 99.13%);
    box-shadow: 0px 4px 15px rgb(244 237 237 / 90%);
    border-color: #fdf1f100;
}

.Student-Performance {
    background: url(../../images/studentperformance.png) no-repeat center center; 
    background-size: cover; 
    padding: 30px;
    border-radius: 10px;
    height: 650px; 
    text-align: center;
    background-color: #FFFFFF; 
}

.Testimonial {
    display: inline-block;
    width: 100%;
    transition: transform 1s ease-in-out;
    white-space: normal;
}

.Events-bg{
    background-image: linear-gradient(99.5deg, #8A7CDB30 0%, #FF922E1A 99.13%);
  
}
.event-item {   
    background-color: white;
    padding: 15px;
    margin-bottom: 15px;
    border: 2px solid #4d2c90 !important;
    border-radius: 10px;
}
.event-item a:hover{
    color: #ff922e;
}

.footer-section ul li a{
    color: white;
    line-height: 2;
}
.footer-section ul li a:hover{
    color: #ff922e;
}

.top-btns-scroll{
    position: fixed;
    height: 45px;
    right: 14px;
    bottom: 16px;
  }
  
  .hover-bottom-top {
    position: relative;
    overflow: hidden;
}
.hover-bottom-top::before {
    content: "";
    position: absolute;
    top: 100%; 
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(99.5deg, #8A7CDB30 0%, #FF922E1A 99.13%);
    transition: top 0.5s ease-in-out; 
    z-index: 0;
}
.hover-bottom-top{
    border: 1px solid #ff922e;
}
.hover-bottom-top:hover::before {
    top: 0; 
}
.hover-bottom-top:hover {
    box-shadow: 0px 4px 15px rgb(244 237 237 / 90%);
    border-color: #fdf1f100;
    background-image: none;
    border:none;
}
.hover-bottom-top > * {
    position: relative; 
    z-index: 1;
    background-color: transparent; 
}
.icon {
    font-size: 40px;
    transition: transform 0.7s ease; /* Smooth zoom effect */
}
.icon-container:hover .icon {
    transform: scale(1.4); /* Zoom in on hover */
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #ff922e;
    border-radius: 50%;
}
.carousel-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.3);
    z-index: 1;
}
.carousel-item .carousel-caption {
    position: absolute;
    z-index: 2;
}
.head-border{
    border:1px solid #ff922e; 
    width: 20%;
}
.containerss {
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 100%;
max-width: 100%;
height: 520px;
}

.form-containerss {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}

.sign-in-containerss {
left: 0;
width: 50%;
z-index: 2;
}

.containerss.right-panel-active .sign-in-containerss {
transform: translateX(100%);
}
.overlay-containerss .overlay{
    background: #ff922e !important;
}
.sign-up-containerss {
left: 12px;
width: 50%;
opacity: 0;
z-index: 1;
}

.containerss.right-panel-active .sign-up-containerss {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}

@keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}

50%, 100% {
opacity: 1;
z-index: 5;
}
}

.overlay-containerss {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}

.containerss.right-panel-active .overlay-containerss{
transform: translateX(-100%);
}

.overlay {
background: rgba(0, 0, 0, 0.4) !important;
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}

.containerss.right-panel-active .overlay {
transform: translateX(50%);
}

.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}

.overlay-left {
transform: translateX(-20%);
}

.containerss.right-panel-active .overlay-left {
transform: translateX(0);
}

.overlay-right {
right: 0;
transform: translateX(0);
}

.containerss.right-panel-active .overlay-right {
transform: translateX(20%);
}

.sign-control {
padding: 0.65rem .75rem;
font-size: 1rem;
color: var(--bs-body-color);
background-color: #ffffffcc;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: .375rem;
}
@media (max-width: 992px) {
.overlay-panel {
padding: 0 5px;
}
.containerss {
height: 660px;
}
}
@media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
.section-height{
    height:auto;
} 
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}

@media (min-width: 768px) {

.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}

.carousel-inner .carousel-item-start.active, 
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
transform: translateX(0);
}

.swiper-button-next, .swiper-button-prev {
    background: orange !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    color: #fff !important;
    text-align: center !important;
    font-weight: bolder !important;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    color: #000 !important;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 20px !important;
}