/* start bootstrap modification  */

:root {
    --corporate-color: #094ba9;
    --corporate-color-secondary: #f2812f;
    --text-color: #333;
}

.sticky-top {
    top: -1px;
}

body {
    /* font-family: 'Inter', sans-serif !important; */
    font-size: 14px !important;
    /* font-family: 'Montserrat', sans-serif !important ; */
    font-family: 'Poppins', sans-serif !important;
    color: var(--text-color);
}


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

a:hover {
    color: var(--corporate-color);
    text-decoration: underline;
}
.nav-item a:hover{
    text-decoration: none;
}
.nav-item a {
    font-size: 15px;
    font-weight: 600;
}

/* Custom background color for .bg-primary */
.bg-primary {
    background-color: var(--corporate-color) !important;
    /* Use !important to ensure override */
}

.bg-secondary {
    background-color: var(--corporate-color-secondary) !important;
    /* Use !important to ensure override */
}

.border-secondary {
    border-color: var(--corporate-color-secondary) !important;
}

/* Custom text color for .text-primary */
.text-primary {
    color: var(--corporate-color) !important;
    /* Use !important to ensure override */
}

.text-secondary {
    color: var(--corporate-color-secondary) !important;
    /* Use !important to ensure override */
}

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

h1 {
    font-size: 3rem;
    font-weight: 700;
    /* Bold */
    color: var(--corporate-color);
    margin-bottom: 20px;
}

h2 {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--corporate-color);
    /* Semi-Bold or Demi-Bold */

}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
    /* Medium */
    color: var(--corporate-color);
}

h4 {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--corporate-color);
    /* Normal or Regular */
}

h5 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--corporate-color);
    /* Normal or Regular */
}

h6 {
    font-weight: 400;
    font-size: 1rem !important;
}

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

    /* Mobile-first CSS */
    h1 {
        font-size: 2.5rem;
        /* Slightly smaller for mobile */
        font-weight: 700;
        color: var(--corporate-color);
        margin-bottom: 16px;
        /* Slightly smaller margin */
    }

    h2 {
        font-size: 2rem;
        /* Adjusted size for mobile */
        font-weight: 600;
    }

    h3 {
        font-size: 1.25rem;
        /* Smaller size for mobile */
        font-weight: 600;
        color: var(--corporate-color);
    }

    h4 {
        font-size: 1.19rem;
        /* Smaller size for mobile */
        font-weight: 600;
    }

    h6 {
        font-weight: 600;
        font-size: 18px;
        /* Adjusted size for mobile */
    }

}

/*start uiverse.io */
/* button {
    cursor: pointer;
    position: relative;
    padding: 7px 17px;
    font-size: 16px;
    color: var(--corporate-color-secondary);
    border: 2px solid var(--corporate-color-secondary);
    border-radius: 34px;
    background-color: transparent;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
}

button::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: -1px;
    height: 50px;
    border-radius: inherit;
    scale: 0;
    z-index: -1;
    background-color: var(--corporate-color-secondary);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

button:hover::before {
    scale: 3;
}

button:hover {
    color: #fff;
    scale: 1.01;
    box-shadow: 0 0px 20px rgba(193, 163, 98, 0.4);
}

button:active {
    scale: 1;
} */

/* start course card button  */
.course-card button {
    cursor: pointer;
    position: relative;
    padding: 7px 17px;
    font-size: 16px;
    color: var(--text-color);
    border-radius: 10px !important;
    border: 0;
    background-color: #f5f5f5;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
    width: 100%;
}

.course-card button:hover {
    cursor: pointer;
    position: relative;
    padding: 7px 17px;
    font-size: 16px;
    color: var(--text-color);
    border-radius: 10px !important;
    border: 0;
    background-color: #dfe1e3;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
    width: 100%;
}

/* end course-card button */

.course-card .button-enroll {
    cursor: pointer;
    position: relative;
    padding: 7px 17px;
    font-size: 16px;
    color: white;
    border-radius: 10px !important;
    border: 0;
    background-color: var(--corporate-color-secondary);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
    width: 100%;
}

.course-card .button-enroll:hover {
    cursor: pointer;
    position: relative;
    padding: 7px 17px;
    font-size: 16px;
    color: var(--text-color);
    border-radius: 10px !important;
    border: 0;
    background-color: var(--corporate-color-secondary);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
    width: 100%;
}




/*start button class  */
/* .button {
    cursor: pointer;
    position: relative;
    padding: 7px 17px;
    font-size: 16px;
    color: var(--corporate-color-secondary) !important;
    border: 2px solid var(--corporate-color-secondary) !important;
    border-radius: 25px !important;
    background-color: transparent !important;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
}

.button::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: -1px;
    height: 50px;
    border-radius: inherit;
    scale: 0;
    z-index: -1;
    background-color: var(--corporate-color-secondary);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {
    scale: 3;
}

.button:hover {
    color: #fff !important;
    scale: 1.01;
    box-shadow: 0 0px 20px rgba(193, 163, 98, 0.4);
}

.button:active {
    scale: 1;
} */
/*end button class  */

/*end uiverse.io */

/* === removing default button style ===*/
.button {
    margin: 0;
    height: auto;
    background: transparent;
    padding: 0;
    border: none;
}

/* button styling */
.button {
    --border-right: 3px;
    /* --text-stroke-color: rgba(255,255,255,0.6); */
    --animation-color: var(--corporate-color-secondary);
    --fs-size: 1.1em;
    letter-spacing: 3px;
    text-decoration: none;
    font-size: var(--fs-size);
    /* font-family: "Arial"; */
    position: relative;
    color: var(--text-color);
    /* -webkit-text-stroke: 1px var(--text-stroke-color); */
}

/* this is the text, when you hover on button */
.hover-text {
    position: absolute;
    box-sizing: border-box;
    content: attr(data-text);
    color: var(--animation-color);
    width: 0%;
    inset: 0;
    border-right: var(--border-right) solid var(--animation-color);
    overflow: hidden;
    transition: 0.5s;
    /* -webkit-text-stroke: 1px var(--animation-color); */
}

/* hover */
.button:hover .hover-text {
    width: 100%;
    /* filter: drop-shadow(0 0 23px var(--animation-color)) */
}

/* end bootstrap modification */

.border {
    border: 2px solid red !important;
    /*for demo purpose only*/
}

.border-slide {
    position: relative;
    transition: 0.2s;
}
.border-slide:hover {
    text-decoration: none;
}

.border-slide::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid var(--corporate-color-secondary);
    /* transform: translateX(); */
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: bottom right;
}

.border-slide:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* start header */

.logo {
    border-radius: 0px 0px 20px 20px;
    /* width: 180px;
    height: 120px; */    
    width: 153px;
    height: 83px;
    left: 6.5%;
    top: -35px;
    background-color: white;
    z-index: 100;
    /* box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; */
    /* box-shadow: 10px 10px 5px 12px rgba(0,0,0,.15)!important; */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}
@media screen and (min-width:1400px) {
    .header-container{
        max-width: 1524px !important;
    }
}


@media screen and (max-width:1800px) {
    .logo {
        width: 140px;
        height: 68px;
        /* left: 8.5%; */
        border-radius: 0px 0px 10px 10px;
        /* top: -24px; */
        top: -35px;
    }

    .logo img {
        width: 110px !important;
    }
}


.nav-responsive {
    padding: 5px 10% !important;

    @media screen and (max-width: 480px) {
        padding: 0 3% !important;
    }
}

.apply-now {
    cursor: pointer;
    position: relative;
    padding: 6px 17px;
    font-size: 14px;
    border: 2px solid var(--corporate-color-secondary);
    border-radius: 5px;
    /* background-color: transparent; */
    background-color: var(--corporate-color-secondary) !important;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
    color: white !important;
}

.enroll-now {
    padding: 3px 11px;
    font-size: 13px;
}

/* .apply-now::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: -1px;
    height: 50px;
    border-radius: inherit;
    scale: 0;
    z-index: -1;
    background-color: var(--corporate-color-secondary) !important;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
} */

.apply-now:hover::before {
    scale: 3;
}

.apply-now:hover {
    color: #fff;
    scale: 1.01;
    box-shadow: 0 0px 20px rgba(193, 163, 98, 0.4);
}

.apply-now:active {
    scale: 1;
}

.btn-primary{
    background-color: var(--corporate-color);
    border: 1px solid var(--corporate-color);
    font-size: 13px;
}
.btn-secondary{
    background-color: var(--corporate-color-secondary);
    color: white;
}
.btn-secondary:hover{
    background-color: #c36726 !important;
}
.btn-primary:hover{
    background-color: #074193;
    border: 1px solid #074193;
}
/* .btn:first-child:hover, :not(.btn-check)+.btn:hover {
    background-color: #074193;
    border: 1px solid #074193;
} */
.btn-tertiary{
    border: 1px solid grey;
    background-color: transparent;
    border-radius: 4px;
    padding: 5px 6px;
    transition: all 0.2s ;
    scale: 1;
    font-size: 12px;
}
.btn-tertiary:hover{
    background-color: var(--corporate-color-secondary);
    color: #fff;
    border: 0px;
    /* scale: 1.01; */
    box-shadow: 0 0px 20px rgba(193, 163, 98, 0.4);
}

.btn-outline-primary{
    border: 1px solid var(--corporate-color) !important;
    box-shadow: none;
    color:var(--corporate-color) ;
    border-radius: 4px;
    padding: 5px 6px;
    transition: all 0.2s;
    scale: 1;
    font-size: 12px;
    background-color: transparent;
}
.btn-outline-primary:hover{
    background-color: #eae8fd;
}

/* end header */


/* start navigation */
/* .nav-item:hover .dropdown-menu{
        margin-top: 10px;
        display: block;
    } */
.dropdown-menu {
    /* margin-top: 10px !important; */
    border: 0px;
}

/* end  navigation */

/* start banner  */
.banner-height {
    height: 70vh;

    @media screen and (max-width: 768px) {
        height: 40vh;
    }
}

/* start about us  */
.about-us li {
    font-size: 1.2em;
    font-weight: 500;
}

.about-us i {
    color: var(--corporate-color-secondary);
    font-weight: 900;
}

/* end about us  */
/* start study in japan  */
.position-text {
    padding-left: 10%;
    padding-top: 10%;
    /* left: 10%;
    top: 20%; */

    @media screen and (max-width: 480px) {
        left: 10%;
        top: 0;
        transform: translate(0%, 18%) !important;
    }

}

@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideOutDown {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
    }
}

.owl-carousel .owl-item.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.owl-carousel .owl-item.fadeInUp {
    animation-name: slideInUp;
}

.owl-carousel .owl-item.fadeOutDown {
    animation-name: slideOutDown;
}


/* end study in japan  */

/* end banner  */


/* start main sections  */

/* margin to push the study in japan sectin down */
@media screen and (max-width: 480px) {
    .margin-main {
        margin-bottom: 315px !important;
    }
}

@media screen and (max-width: 480px) {
    .contact-margin-main {
        margin-bottom: 385px !important;
    }
}



.shadow-blue {
    box-shadow: 0 .5rem 1rem hsla(203, 88%, 46%, 0.2) !important;
    transform: translate(0, 0) !important;
    transition: transform .2s ease-out 50ms, box-shadow .2s ease-out 50ms;

}

.shadow-blue:hover {
    transform: translate(0, -5px) !important;
    box-shadow: 0 .5rem 1rem hsla(203, 88%, 46%, .8) !important;
    cursor: pointer;
}

.shadow-blue h3 {
    margin-bottom: 15px;
}

.image-absolute {
    position: absolute;
    bottom: -1%;
    right: 1%;
    height: 90%;
    border-radius: 30px;


    @media screen and (max-width: 480px) {
        position: absolute;
        top: 95%;
        bottom: 0%;
        right: 0%;
        left: 0%;
        height: 400px;
        border-radius: 0px;
    }
}

.image-absolute-left {
    position: absolute;
    bottom: -1%;
    left: 1%;
    height: 90%;
    border-radius: 30px;


    @media screen and (max-width: 480px) {
        position: absolute;
        top: 95%;
        bottom: 0%;
        right: 0%;
        left: 0%;
        height: 400px;
        border-radius: 0px;
    }
}

/* start work in japan section  */
.padding-top-japan {
    padding-top: 100px;

    @media screen and (max-width: 480px) {
        padding-top: 30px !important;
    }
}

.card-absolute {
    /* position: absolute; */
    bottom: 0%;
    left: 50%;
    transform: translate(-0%, 50%);

    @media screen and (max-width: 480px) {
        transform: translate(-0%, 38%);
    }
}

/* @media screen and (max-width: 480px) {
    .work-in-japan-bg {
        background-color: var(--corporate-color);
    }
} */

.margin-card {
    margin-top: -25px !important;
    margin-bottom: 0px !important;

    @media screen and (max-width:480px) {
        margin-top: 8px !important;
        margin-bottom: 150px !important;
    }
}

.work-in-japan {
    margin-top: 65px !important;

    @media screen and (max-width:480px) {
        margin-top: 380px !important;
    }

}

/* end work in japan section  */
/* end main sections  */

/* start our services */
/* .service-padding{
        padding-top: 200px;
        @media screen and (max-width:480px){
            padding-top: 120px;
        }
    } */

.our-services-svg svg {
    height: 70px !important;
}

.service-padding {

    /* padding-top: 200px; */
    @media screen and (max-width:480px) {
        padding-top: 120px;
    }
}

.service-transform {

    /* box-shadow: 0 .5rem 1rem hsla(203, 88%, 46%, 0.2)!important;     */
    transform: translate(0, 0) !important;
    transition: transform .2s ease-out 50ms, box-shadow .2s ease-out 50ms;

}

.service-transform:hover {
    transform: translate(0, -5px) !important;
    box-shadow: 0 .5rem 1rem hsla(203, 88%, 46%, .8) !important;
    cursor: pointer;
}

.service-transform h3 {
    margin-bottom: 15px;
}

.card div {
    border-radius: 10px;
}

.service-card {
    border: 1px solid lightgrey;
    border-radius: 12px;
    transition: background-color .2s ease-out 50ms, color .2s ease-out 50ms;

}

.service-card:hover {
    background-color: rgba(17, 76, 167, 1);
    border: 0px;
}

.service-card:hover p {
    color: white;
}

.service-card:hover h3 {
    color: white;
}

/* end our services */

/* start why choose us  */
.service-button {
    font-size: 40px;
    background-color: var(--corporate-color-secondary);
    height: 40px;
    width: 40px;
    display: inline-block;
    border-radius: 50%;
}

/* end why choose us  */

/* start news and events */
.news-card {
    overflow: hidden;
}

.news-card .hover-dark {
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: background-color 0.5s;
}

.news-card:hover .hover-dark {
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    /* transition: background-color 0.5s; */
}

.news-card img {
    transform: scale(1);
    transition: transform 0.5s;
    /* overflow: hidden; */
}

.news-card:hover img {
    transform: scale(1.04);
    /* overflow: hidden; */
}

.news-button {
    opacity: 0;
    transition: opacity 0.5s;
}

.news-card:hover .news-button {
    opacity: 1;
}

.news-button button {
    color: white;
    border: 0px;
}

.news-button button::before {
    background-color: transparent;
}

.news-button button:hover {
    color: white;
    border: 0px;
    border-radius: 0px;
    background-color: transparent !important;
    scale: 1;
    box-shadow: none;
}

/* end news and events */


/* start testimonial  */
.parallax-bg {
    padding: 60px 0 70px 0;
    background: #f8f8f8;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.student-block {
    padding: 20px 20px;
    background: #f5f5f5;
    border-radius: 20px;
    margin: 8px;
    box-shadow: 0px 11px 8px 0px rgba(0, 0, 0, 0.02);
    position: relative;
    border: 1px solid #fff
}

.student-block .student-img img {
    width: 80px;
    border-radius: 100%;
    margin-right: 15px;
    margin-top: 18px
}

.student-block .student-desc {
    font-size: 15px;
    font-weight: 500
}

.student-block .student-name {
    font-family: "poppins", sans-serif;
    color: var(--corporate-color);
    font-size: 15px;
    text-transform: uppercase;
    margin-bottom: -1px;
    font-weight: 700
}

.student-block .student-batch {
    color: #b9b9b9;
    font-size: 15px
}

.student-block .quote {
    width: 30px;
    margin-bottom: 15px
}

.student-block a {
    position: absolute;
    bottom: 15px;
    right: 15px
}

.student-block a img {
    width: 25px;
    opacity: 40%
}

/* end testimonial  */

/* start footer */
.footer h3 {
    /* color:var(--corporate-color-secondary); */
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.2rem;

    @media screen and (max-width:480px) {
        margin-bottom: 10px;
    }
}

.footer li a {
    color: #ffffffac;
    text-decoration: none;
}

.footer ul {
    list-style-type: none;
    padding-left: 0px;
}

/* end footer */


.page-head {
    /* background: linear-gradient(to right, #187FD9, #a8d6ff), center center no-repeat; */
    /* background: linear-gradient(to right, #1c5d99, #27c4ec), center center no-repeat; */
    /* padding: 50px 0; */
    margin-bottom: 70px;

}

/* start course page  */

.overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Adjust the alpha value (0.5) for transparency */
}


th {
    background-color: #4e4e4e !important;
    color: white;
}

.course-heading {
    background-color: #4e4e4e !important;
    color: white;
}

/* end course page  */

/* start university card */

.university-card {
    border: 1px solid lightgrey;
    /* border-radius: 12px; */
    transition: background-color .2s ease-out 50ms, color .2s ease-out 50ms;
    margin-bottom: 1.5rem;

}

.university-card img {
    /* border-radius: 12px 12px 0 0 ; */
    margin-bottom: 0.9rem;
    height: 180px;
    object-fit: cover;
}

/* end university card */

/* star .our-courses-card */
.our-courses-card {
    transition:all .15s ease-out 50ms;
    /* transition: background-color .2s ease-out 50ms,scale .2s, color .2s ease-out 50ms; */
    margin-bottom: 0rem;
    background-color: white;
    scale: 1;

}
.our-courses-card:hover{
    box-shadow: 0 1rem 1rem rgba(0,0,0,.05) !important;
    scale: 1.02;
}

.our-courses-card img {
    /* border-radius: 12px 12px 0 0 ; */
    margin-bottom: 0.9rem;
    height: 180px;
    object-fit: cover;
}

.our-courses-card-date {
    font-size: 0.9rem;
    color: #8d8d8d !important;
    /*  margin-bottom: 0 !important;*/
}


/* end .our-courses-card */

/* start requirements */
.requirements .service-button {
    color: var(--corporate-color) !important;
    background-color: white;
}

/* end requirements */

/* start form-card for contact page  */
.form-card {
    padding: 85px 200px 85px 85px;

    @media screen and (max-width:480px) {
        padding: 12px 20px 10px 10px;
    }
}

/*end form-card for contact page  */

/* start address card  */
.address-card {
    padding: 50px;

    @media screen and (max-width:480px) {
        padding: 10px;
    }
}

@media screen and (max-width:480px) {
    .enquiry-card {
        padding: 15px;
        padding-top: 35px;
    }
}

/* end address card  */




/* start process */

/*** start Facts ***/
.fact-item .fact-icon {
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 120px;
    transition: .5s;
    padding: 20px;
    color: white !important;
}

.fact-item .st0 {
    fill: #415A5C;
}

.fact-item .fact-icon h3 {
    /* color: var(cor) !important; */
}

.fact-item:hover .st0 {
    /* background: var(--dark); */
    fill: #fff;
}

.fact-item:hover .fact-icon {
    /* background: var(--dark); */
    /* background: rgba(0, 0, 0, 0.4); */
    background: var(--corporate-color-secondary);
}

.fact-item:hover .fact-icon h3 {
    /* background: var(--dark); */
    color: white !important;
}

.fact-item .fact-icon i {
    color: var(--primary);
    transition: .5;
}

.fact-item:hover .fact-icon i {
    color: #FFFFFF;
}

/* End facts page  */
/* end process */

/* start form */
label {
    color: #5d596c;
}

.form-label {
    margin-bottom: 0.25rem;
    font-size: 12px;
    color: #5d596c;
    font-weight: 500;
}

.form-control {
    /* background-color: rgb(17, 76, 167, 0.1); */
    font-size: 0.8125rem;
    font-family: Poppins;
}


::placeholder {
    /* color: red !important; */
    font-size: 11px !important;
    color: rgba(0, 0, 0, 0.5) !important;
}

/*end  off canvas sidebar modification  */

@media screen and (min-width:900px) {

    .ps-form-relative {
        position: relative;
        height: 80vh;
    }

    .ps-form-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

    }
}

/* end form */


/* start course detail  */
.course-detail-section {}

.course-detail-section h1 {
    font-size: 2rem;
    padding-right: 2.5rem;
    color: var(--text-color);
}

.course-detail-section h2 {
    font-size: 1.3rem;
    color: var(--text-color);
}

.course-detail-section h3 {
    font-size: 1.2rem;
    color: var(--text-color);
}

@media screen and (max-width:480px) {
    .course-detail-section h1 {
        font-size: 1.5rem;
    }
    .course-detail-section h2 {
        font-size: 1.2rem;
    }
}

.course-detail-section .course-details h2 {
    margin-top: 1.8rem;
    margin-bottom: 1.3rem;
}

.course-detail-section .short-desc {
    font-size: 1.2rem;
}

.course-detail-section .course-instructor {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.course-detail-section .course-instructor .course-instructor-profile {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.course-detail-section .course-instructor p {
    margin-bottom: 0px;
    padding-left: .6rem;
    font-weight: 600;
    font-size: 1rem;
}

.course-detail-section .course-facts {
    display: flex;
    margin-bottom: 2rem;
}

.course-detail-section .course-facts .our-courses-card-date {
    margin-bottom: unset !important;
}

.course-detail-section .featured-thumbnail iframe {
    border-radius: 10px;
}

.course-detail-section .short-desc {
    font-size: 1.2rem;
    font-weight: 500;
}

.course-detail-section .featured-thumbnail {
    margin-bottom: 1.5rem;
}

.course-detail-section .featured-thumbnail iframe{
    height: 415px;
}


.course-detail-section i {
    color: black ;
}

@media screen and (max-width:480px) {
    .course-detail-section .course-facts {
        display: block;
    }

    .course-detail-section .course-facts .our-courses-card-date {
        margin-bottom: 0.6rem !important;
    }
    .course-detail-section .featured-thumbnail iframe{
        height: 220px;
    }
}
.ul-li-flex li{
    display: flex;
    margin-bottom: 0.5rem;
}
.ul-li-flex li i {
    padding-top: 0.25rem;
    margin-right: 1rem;
} 

/* end course detail  */

/* start accordion modification  */
.accordion-button::before {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: cover;
    transition: var(--bs-accordion-btn-icon-transition);
    margin-right: 13px;
}

.accordion-button::after {
    display: none;
}

.accordion-button:not(.collapsed)::before {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-item .accordion-button {
    font-weight: 600;
    font-size: 15px;
}

.accordion-header .course-includes {
    width: 50%;
    text-align: end;
    font-size: 14px;
}

.accordion-button:not(.collapsed) {
    color: unset;
}

.accordion-button:focus {
    box-shadow: unset;
}

.accordion-body p {
    color: var(--corporate-color);
    font-weight: 500;
}

.accordion-body p{
    margin-bottom: 0px;
}
.accordion-body .ps-course-tab:first-child{
    margin-top: 0px;
}
.accordion-body .ps-course-tab{
    margin-top: 15px;
}



.ps-preview {
    background-color: rgb(9, 75, 169, 0.9);
    margin-right: 10px;
    font-size: 12px;
    color: white;
    border-radius: 10px;
    padding: 3px 10px
}
@media screen and (max-width:480px) {
    .ps-preview{
        margin-right: 0px;
        margin-bottom: 10px;

    }
}
.course-detail-section .ps-preview i{
    color: white;
}
.course-detail-section .ps-course-content-title{
    width: 70%;
}

/* end accordion modification  */

.ps-side-bar p{
    margin-bottom: 0.75rem;
}



/* start mega-menu  */
.dropdown-item{
    font-size: 14px;
    font-weight: 500;
    white-space:unset;
}
.dropdown-item i{
    font-size: 20px;
    color: var(--corporate-color-secondary);
}
.dropdown-item span{
    width: 50px;
}
.dropdown-item:hover{
    background-color:rgb(243, 244, 246);
    color: var(--text-color) !important;
    border-radius: 10px;
}
.dropdown-item a:hover{
    color: var(--text-color) !important;
}
.study-abroad-menu{
    margin-left: -280px;
    @media screen and (max-width:768px) {
        margin-left: 0px;
    }
}
@media only screen and (min-width: 992px) {
    .ps-dropdown-700{
        width: 700px;
    }
    .dropdown-menu {
        width: 700px;
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease ;
    }
    .dropdown:hover .dropdown-menu {
      /* display: block; */
      visibility: visible;
      opacity: 1;
    }
    .dropdown-menu.show {
      /* display: block; */
      visibility: visible;
      opacity: 1;
    }
  }
  .dropdown:not(:hover) .dropdown-menu {
    transition: opacity 0.6s ease, visibility 0.6s ease;
    }
  .nav-service {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
  }
  .nav-service-detail {
    margin-bottom: 0px;
    font-size: 13px;
    font-weight: 400;
  }

  .ps-log-out-btn{
    border-radius:50%; width:32px; height:32px; font-size:15px; background:white !important; color:#333; font-weight:700; border:0px;
    display: block;
    }
    .ps-log-out-menu{
        width: 220px !important;
        z-index: 10000 !important;
        right: -5px ;
        top: 36px ;
        box-shadow: 0 .25rem 1.125rem 0 rgba(47,43,61,.16);
    }
    .ps-log-out-menu .dropdown-item{
        font-size: 13px !important;
        font-weight: 400 !important;
    }
    
    .ps-log-out-group>.dropdown-toggle::after{
        /* display: inline-block; */
        display: none;   
    }

    .ps-log-out-menu li .dropdown-item i {
        font-size: 12px;
        color: var(--corporate-color);
        margin-right:5px;
    }

  /* end mega-menu  */

  /* start confirm course  */
  .btn-pinned {
    position: absolute;
    top: 8px;
    font-size: 12px;
  }
  html:not([dir=rtl]) .btn-pinned{
    right: 8px;
  }
  .text-heading{
    font-weight: 500;
    font-size: 15px;
  }

  .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color:#e0ecff ;
  }
  .qr-image {
    width: 100%;
    @media screen and (max-width:480px) {
        width:180px ;
    }
  }
  /* end confirm course  */

/* start home page   */
.text-truncate-2line{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 42px;
}           
/* End home page   */