﻿/* common css */
* {
    scroll-behavior: smooth !important;
    
}

body {
    overflow-x: hidden;
    color: #3D394D;
}
p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .chat-text {
    letter-spacing: 0.15rem;
    color: #3D394D;
}
p{
    line-height:180%;
}
.badge, .cta {
    letter-spacing: 0.1rem
}
.ls-02 {
    letter-spacing: 0.2rem;
}
.ls-0 {
    letter-spacing: 0;
}
.custom-nav {
    margin: 10px 0 -63px 0 !important;
    height: unset !important;
    padding: 0 !important;
}

    /*.custom-nav.stuck ul.nav-in-page {
        margin-top: 0 !important;
    }*/
    .custom-nav.bg-body {
        background-color: transparent !important;
    }

    .custom-nav.sticky.stuck.sticky-direction-top.stuck-depth {
        box-shadow: none ;
        top:10px !important;
    }
.result-badge  span{position:relative;}
.result-badge > span.badge:after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0px 8px 10px;
    border-style: solid;
    border-color: transparent transparent transparent #404040;
}
#sticky-nav ul:before {
    display: none;
}

#sticky-nav ul .nav-in-page-link:focus {
    outline: 0.1875rem dotted highlight;
}

#sticky-nav ul .nav-in-page-link:before {
    display: none;
}

#sticky-nav ul .nav-in-page-link.active {
    background-color: #0067b8 !important;
    color: #fff !important;
}

#sticky-nav-label + label {
    display: none;
}
.text-cuspurple{
    color:#a43477 !important;
}
.border-cuspurple {
    border-color: #a43477 !important;
}
.bg-cuspurple {
    background-color: #a43477;
}

ul.list-unstyled.font-weight-semibold.bannerul li {
    letter-spacing: 0.15rem;
}
div#mwf7c3e55d7 .modal-content {
    background: transparent;
    padding: 0px;
}
div#mwf7c3e55d7 .close {
    background: #fff;
    border-radius: 30px;
    margin-right: -4rem;
    padding: 0px;
}
    div#mwf7c3e55d7 .close::before {
        display: block;
        background: #fff;
        padding: 6px;
        border-radius: 30px;
        outline: 3px solid #ffffff;
    }

@media (max-width: 866px) {
    .text-start{
        text-align:left;
    }
    .result-badge > span.badge:after {
        content: "";
        position: absolute;
        bottom: -10px;
        top: initial;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
        border-width: 6px 0px 7px 10px;
        border-style: solid;
        border-color: transparent transparent transparent #404040;
        right: initial;
    }
    .custom-nav {
        margin: 5px 0 -45px 0 !important;
        box-shadow: unset !important;
        background-color: unset !important;
        padding-top: 5px !important;
    }

        .custom-nav .combobox .combobox-toggle {
            width: 35px;
            height: 35px;
            background-image: unset;
            background-color: #fff;
            margin: 0px 5px 0 auto;
            border-radius: 50%;
            padding: 0 5px 7px 7px;
        }

            .custom-nav .combobox .combobox-toggle span:last-child:before {
                content: "☰";
                color: #000;
                font-size: 20px;
            }

            .custom-nav .combobox .combobox-toggle span:first-child {
                display: none;
            }
}

.linedecoration {
    text-decoration: underline;
    text-decoration-color: #F8E383;
    text-decoration-thickness: 8px;
}
.chat-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    z-index: 1000;
    /* flex-direction: row-reverse; */
}

.chat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.5s ease-in forwards, rotate 2.8s cubic-bezier(0.15, 0.85, 0.25, 1) 0.4s forwards;
}

    .chat-icon img {
        width: 70px;
        filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 25%));
    }

.chat-text {
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    position:relative;
    z-index: -1;
    animation: slideInRight 0.8s ease-out 2.3s forwards;
}

    .chat-text::after {
        content: ""; 
        position: absolute;
        right: -8px;
        top: 50%;
        transform: translateY(-50%);
        border-width: 6px 0px 8px 10px;
        border-style: solid;
        border-color: transparent transparent transparent white;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotate {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(1800deg);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.brown-text {
    color: #5b4652;
}

.hover-effect {
    transition: 0.3s;
}

    .hover-effect:hover {
        transform: scale(1.03);
        box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.2);
        transition-property: box-shadow, transform;
        transition-duration: 600ms;
        transition-timing-function: cubic-bezier(0.16, 1, 0.29, 0.99);
    }
.text-purple2 {
    color: #775CA4 !important;
}
.bg-purple2 {
    background-color: #775CA4 !important;
}
.text-dustyblue {
    color: #5B75A4;
}
.btn-outline-dustyblue {
    border-color: #5B75A4;
}
.text-dustyorange {
    color: #B35A62;
}

.btn-outline-dustyorange {
    border-color: #B35A62;
}
.badgepop:after {
    content: "";
    position: absolute;
    bottom: -15px;
    top: initial;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    border-width: 9px 0px 9px 13px;
    border-style: solid;
    border-color: transparent transparent transparent #ffffff;
    right: initial;
}
.border-dashed {
    border-top-style: dashed;
    border-width: 2px;
}
.border-top-style1 {
    border-color: #775CA4 !important;
}
.border-top-style2 {
    border-color: #C0488F !important;
}
.border-top-style3 {
    border-color: #C74E2D !important;
}
.border-top-style4 {
    border-color: #9D6B0D !important;
}
.border-top-style5 {
    border-color: #5B7F42 !important;
}
.text-color2 {
    color: #C0488F !important;
}
.bg-color2 {
    background-color: #C0488F !important;
}
.text-color3 {
    color: #C74E2D !important;
}

.bg-color3 {
    background-color: #C74E2D !important;
}
.text-color4 {
    color: #9D6B0D !important;
}

.bg-color4 {
    background-color: #9D6B0D !important;
}
.text-color5 {
    color: #5B7F42 !important;
}

.bg-color5 {
    background-color: #5B7F42 !important;
}

.text-color6 {
    color: #796EA2 !important;
}
    .gradient-1 {
        background: linear-gradient( 115deg, rgb(201, 229, 255) 0%, rgb(238, 221, 212) 100% );
    }

.gradient-2 {
    background: linear-gradient(115deg, #ffc7cc 0%, #ffe8cd 100%);
}

.gradient-3 {
    background: linear-gradient(160deg, #7193c9 0%, #d7cce4 50%, #a0aed7 100%);
}

.gradient-4 {
    background: linear-gradient(115deg, #C5DAE2 0%, #E9E4E1 100%);
}

.gradient-text {
    background: linear-gradient(115deg, rgb(31 126 213) 0%, rgb(191 84 31) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.iframe-videos {
    position: relative;
    z-index: 0;
    padding-top: 52.25%;
    margin: 1rem 0;
}
.iframe-videos1 {
    padding-top: 56.46%;
}

    .iframe-videos iframe,
    .iframe-videos .iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border: none;
    }
.ln-2 {
    line-height: 2;
}
.ln-15 {
    line-height: 1.5;
}
.transparent-borders{
    position: relative;
    z-index: 0;
}

    .student-life-wrap .iframe-videos:before,
    .transparent-borders:before, .iframe-img:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #c9e5ff;
        z-index: -1;
        top: -12px;
        left: -12px;
        border-radius: 10px;
    }

    .student-life-wrap .iframe-videos:after,
    .transparent-borders:after, .iframe-img:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #eeddd4;
        z-index: -1;
        top: 12px;
        left: 12px;
        border-radius: 10px;
    }

html:not([dir="rtl"])
.student-life-wrap
.carousel-sneak-peek.carousel-content-cards
.carousel-item-next:not(.carousel-item-left)
.iframe-videos:before,
html:not([dir="rtl"])
.student-life-wrap
.carousel-sneak-peek.carousel-content-cards
.carousel-item-next:not(.carousel-item-left)
.iframe-videos:after,
html:not([dir="ltr"])
.student-life-wrap
.carousel-sneak-peek.carousel-content-cards
.carousel-item-prev:not(.carousel-item-right)
.iframe-videos:before,
html:not([dir="ltr"])
.student-life-wrap
.carousel-sneak-peek.carousel-content-cards
.carousel-item-prev:not(.carousel-item-right)
.iframe-videos:after {
    display: none;
}

.transparent-borders:before,
.transparent-borders:after {
    background-color: #0000001a;
}

.number-indicator li:after {
    content: "" !important;
    position: absolute;
    background-color: #6a6868;
    width: 220%;
    height: 2px;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
}

.number-indicator li {
    position: relative;
    color: #000000;
    width:18px;
}

    .number-indicator li.active {
        color: #000;
        font-weight: 700;
    }

        .number-indicator li.active:after {
            background-color: #000;
        }

.row-gap-2 {
    row-gap: 2rem;
}

.row-gap-3 {
    row-gap: 3rem;
}

.row-gap-4 {
    row-gap: 4rem;
}

html:not([dir="rtl"])
.curve-slider
.carousel-sneak-peek.carousel-content-cards
.carousel-item-next:not(.carousel-item-left) {
    transform: scale(0.91) translate(54%, 0) rotate(15deg);
    opacity: 1;
}

html:not([dir="rtl"])
.curve-slider
.carousel-sneak-peek.carousel-content-cards
.carousel-item-prev:not(.carousel-item-right) {
    transform: scale(0.91) translate(-54%, 0) rotate(-15deg);
    opacity: 1;
}

    html:not([dir="rtl"])
    .student-life-wrap
    .carousel-sneak-peek.carousel-content-cards
    .carousel-item-next:not(.carousel-item-left)
    .iframe-videos + .card,
    html:not([dir="rtl"])
    .student-life-wrap
    .carousel-sneak-peek.carousel-content-cards
    .carousel-item-prev:not(.carousel-item-right)
    .iframe-videos + .card,
    html:not([dir="rtl"])
    .curve-slider
    .carousel-sneak-peek.carousel-content-cards
    .carousel-item-next:not(.carousel-item-left)
    .bodytext,
    html:not([dir="rtl"])
    .curve-slider
    .carousel-sneak-peek.carousel-content-cards
    .carousel-item-prev:not(.carousel-item-right)
    .bodytext {
        visibility: hidden;
    }

#result-view {
    transition: opacity 0.3s ease-in-out;
}

#section-6 .tab-label.tab-image-label,
#section-7 .tab-label.tab-image-label {
    display: none;
    opacity: 1 !important;
    /* position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: block; */
}

#section-6 a.tab-image.active .tab-label.tab-image-label,
#section-7 a.tab-image.active .tab-label.tab-image-label {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: block;
    min-width: max-content;
}

.flex-1 {
    flex: 1;
}

.animation.faderight {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .animation.faderight.visible {
        opacity: 1;
        transform: translateX(0);
    }

.animation.fadeleft {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .animation.fadeleft.visible {
        opacity: 1;
        transform: translateX(0);
    }

.animation.scaleup {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .animation.scaleup.visible {
        opacity: 1;
        transform: scale(1);
    }

.animation.scaledown {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .animation.scaledown.visible {
        opacity: 1;
        transform: translateY(0);
    }
/* end common css */

/* section 2 */
.cross-laptop {
    margin: -15rem 0;
}
/* end section 2 */

/* section 3 */
/* end section 3 */
@media (min-width: 1400px) {
    .card-img-overlay>.card-background .card-img {
        width: 100%;
    }
}

/* responsive */
@media (max-width: 1086px) {
    #section-1 .card-foreground {
        position: absolute;
        margin-inline-start: unset !important;
        bottom:0px;
    }

    #section-2 h1,
    .bannerul {
        text-align: center;
    }

    .cross-laptop {
        margin: 1rem 0;
    }

    .number-indicator li {
        margin: 0 10px;
    }
    .chat-widget{
        display: none;
    }
}


@media(min-width: 768px) and (max-width: 1024px) {
    .number-indicator li:after {
        width: 160%;
    }
}
@media(max-width:768px) {
    .number-indicator li:after {
        width: 180%;
    }
    div#mwf7c3e55d7 .close {
        margin-right: 0rem;
    }
    .chat-text{font-size:10px;}
}

@media (max-width: 540px) {
    .real-voice-top div span.badge {
        width: 100%;
    }
    html:not([dir="rtl"])
    .curve-slider
    .carousel-sneak-peek.carousel-content-cards
    .carousel-item-next:not(.carousel-item-left) {
        transform: translateX(102%);
    }

    html:not([dir="rtl"])
    .curve-slider
    .carousel-sneak-peek.carousel-content-cards
    .carousel-item-prev:not(.carousel-item-right) {
        transform:translateX(-102%);
    }
    .iframe-videos iframe, .iframe-videos .iframe {
        border-radius: 0px;
    }

    .iframe-videos {
        position: relative;
        z-index: 0;
        padding-top: 85%;
        margin: 1rem 0;
    }
    .student-life-wrap .iframe-videos:before, .student-life-wrap .iframe-videos:after, .iframe-img:before, .iframe-img:after, .transparent-borders:before, .transparent-borders:after{
        display: none
    }
    #mwf7c3e55d7 .modal-dialog {
        padding: 0px;
    }

    #sticky-nav ul .nav-in-page-link.active + span{
        display: none;
    }
    html:not([dir=rtl]) .combobox .combobox-item {
        padding-left: 1.5rem;
    }
    #sticky-nav ul .nav-in-page-link:first-child {
        margin-left: 0px !important;
    }
}

/* end responsive */
