@charset "UTF-8";

:root {
    --white: #ffffff;
    --black: #000000;
    --Black: "Black", SourceSansPro-Black;
    --BoldItalic: "BoldItalic", SourceSansPro-BoldItalic;
    --BlackItalic: "BlackItalic", SourceSansPro-BlackItalic;
    --ExtraLight: "ExtraLight", SourceSansPro-ExtraLight;
    --ExtraLightItalic: "ExtraLightItalic", SourceSansPro-ExtraLightItalic;
    --Bold: "Bold", MahindraType-Bold_4.03;
    --Italic: "Italic", SourceSansPro-Italic;
    --Regular: "Regular", MahindraType-Normal_4.03;
    --ExtendedBold: "ExtendedBold", MahindraType-ExtendedBold_03;
    --SemiBoldItalic: "SemiBoldItalic", SourceSansPro-SemiBoldItalic;
    --Light: "Light", SourceSansPro-Light;
    --SemiBold: "SemiBold", SourceSansPro-SemiBold;
    --LightItalic: "LightItalic", SourceSansPro-LightItalic
}

@font-face {
    font-family: Bold;
    src: url(MahindraType-Bold_4.03.2d23057ed82e1cb8.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Regular;
    src: url(MahindraType-Normal_4.03.d2425d896c26e577.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ExtendedBold;
    src: url(MahindraType-ExtendedBold_03.b1e37d3e3f016be0.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}


.row {
    margin-right: 0 !important;
    margin-left: 0 !important
}

:focus {
    outline: none
}

.carousel-control-prev {
    left: 5%;
    bottom: 180px;
    top: unset !important;
    opacity: 1;
    width: 3%;
    height: 50px;
    background: rgba(0, 0, 0, .5);
    position: unset !important
}

.carousel-control-next {
    left: 10%;
    right: unset !important;
    bottom: 180px;
    top: unset !important;
    opacity: 1;
    width: 3%;
    height: 50px;
    background: rgba(0, 0, 0, .5);
    position: unset !important
}

.carousel-caption {
    position: unset;
    right: 15%;
    bottom: 15%;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    font-size: 1rem;
    text-align: left
}

.carousel-indicators {
    position: unset;
    right: 0;
    bottom: 15%;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 15;
    display: flex;
    justify-content: center;
    margin-right: 0;
    align-items: center;
    margin-left: auto;
    list-style: none
}

.carousel-indicators .active {
    background-color: #ff5722
}

.video-fluid {
    width: 100%;
    height: 100%
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.load-block {
    background: rgb(26, 33, 48)
}

.loading-section {
    z-index: 999999;
    position: absolute;
    margin: auto;
    inset: 0;
    overflow: hidden;
    display: none;
    background: rgb(26, 33, 48)
}

.load-Trans {
    background: rgba(26, 33, 48, .9)
}

.load-content {
    color: var(--white);
    position: absolute;
    margin: auto;
    inset: 0;
    width: 40%
}

.load-content .loadInnerText {
    position: absolute;
    margin: auto;
    right: 0;
    left: 0;
    bottom: 25%
}

.load-content .loadInnerText span {
    width: 100%;
    text-decoration: underline;
    padding-top: 5px;
    cursor: pointer
}

.loading-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.loading-container img {
    width: 80px;
    height: 80px
}

.loading {
    display: flex;
    flex-direction: row
}

.loading_letter {
    font-family: var(--ExtendedBold);
    padding-top: .5rem;
    font-size: 1.5rem;
    letter-spacing: 1px;
    text-transform: initial;
    color: var(--white)
}

.dot-animate {
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    font-size: 2rem;
    letter-spacing: 5px;
    color: var(--white);
    position: relative;
    bottom: 0
}

.dot-animate:nth-child(8) {
    animation-delay: .6s
}

.dot-animate:nth-child(9) {
    animation-delay: .8s
}

.dot-animate:nth-child(10) {
    animation-delay: 1s
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1) translate(0);
        opacity: 1
    }

    50% {
        transform: scale(.75) translate(0);
        opacity: .25
    }

    to {
        transform: scale(1) translate(0);
        opacity: 1
    }
}

.spinner-border {
    position: absolute;
    margin: auto;
    inset: 0;
    border: .25em solid rgba(255, 255, 255, 0) !important;
    border-right-color: #fff !important;
    border-radius: 50%;
    animation: spinner-border 1s linear infinite !important;
    width: 12rem !important;
    height: 12rem !important
}

.customDFlex {
    display: flex;
    align-items: center;
    justify-content: center
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important
}

body.msb-x .mcw,
body.msb-x .mnb {
    margin-left: 0;
    animation: bodyslideout .3s forwards;
    transform-style: preserve-3d
}

body.msb-x .msb {
    animation: slideout .3s forwards;
    transform-style: preserve-3d
}

.fa-times-thin:before {
    content: "\d7"
}

.msb {
    width: calc(25% + -0px);
    position: fixed;
    padding-top: 0;
    left: auto;
    top: 0;
    right: 0;
    text-align: center;
    min-height: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, .8)
}

.msb .closeIcon {
    position: absolute;
    top: 5%;
    left: -8%;
    font-size: 2.5rem;
    height: auto;
    padding: 5px 10px;
    line-height: .5;
    cursor: pointer;
    background: rgba(0, 0, 0, .7);
    color: var(--white)
}

.msb,
.mnb {
    animation: move .5s 1 alternate
}

@keyframes move {
    0% {
        right: -600px
    }

    to {
        right: 0
    }
}

.closeMenuIcon {
    animation: moveRight .6s 1 alternate
}

@keyframes moveRight {
    0% {
        right: -600px
    }

    to {
        right: 0
    }
}

@keyframes slidein {
    0% {
        right: -600px
    }

    to {
        right: 0
    }
}

@keyframes slideout {
    0% {
        right: 0
    }

    to {
        right: -600px
    }
}

.customXScroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    border-radius: 10px;
    background-color: #f5f5f5
}

.customXScroll::-webkit-scrollbar {
    width: 12px;
    height: 5px;
    background-color: #f5f5f5
}

.customXScroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #a7a7a7
}

.customYScroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    border-radius: 10px;
    background-color: #f5f5f5
}

.customYScroll::-webkit-scrollbar {
    width: 12px;
    height: 10px;
    background-color: #f5f5f5
}

.customYScroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #d62929
}

.animateSlide {
    transition: all .45s;
    transform: translate(-100px)
}

.animateBackToSlide {
    transition: all .5s;
    transform: translate(0)
}

@media (min-width: 1025px) and (max-width: 1680px) {
    .msb {
        width: calc(35% + -0px)
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    html,
    body {
        font-size: 14px
    }

    .carousel-indicators {
        right: 10px;
        bottom: 8%
    }

    .total-container .footer {
        padding: 6px 30px
    }

    .carousel-caption {
        left: 5%
    }

    .msb {
        width: calc(40% + -0px)
    }
}

.guideModalPopup .modal-dialog {
    max-width: 750px
}

.guideModalPopup .modal-dialog .modal-content {
    padding: 1rem
}

.guideModalPopup .modal-dialog .modal-content .guideClose {
    opacity: 1
}

.guideModalPopup .modal-dialog .modal-content .guideClose:focus {
    outline: none
}

.guideModalPopup .modal-dialog .modal-content .modal-body ul {
    list-style: none;
    padding: 0
}

.guideModalPopup .modal-dialog .modal-content .modal-body .guideLeftContent li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 1rem 0rem
}

.guideModalPopup .modal-dialog .modal-content .modal-body .guideLeftContent li .guideIcon {
    width: 100%;
    text-align: center
}

.guideModalPopup .modal-dialog .modal-content .modal-body .guideLeftContent li .guideIcon .cameraMenu {
    width: 40%
}

.guideModalPopup .modal-dialog .modal-content .modal-body .guideLeftContent li .guideContent {
    width: 100%
}

.guideModalPopup .modal-dialog .modal-content .modal-body .guideRightContent li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 1rem 0rem
}

.guideModalPopup .modal-dialog .modal-content .modal-body .guideRightContent li .guideIcon {
    width: 100%;
    text-align: center
}

.guideModalPopup .modal-dialog .modal-content .modal-body .guideRightContent li .guideIcon img {
    border: 1px solid #000;
    width: 45px;
    height: 45px;
    padding: .5rem
}

.guideModalPopup .modal-dialog .modal-content .modal-body .guideRightContent li .guideContent {
    width: 100%
}

.guideModalPopup .modal-dialog .modal-content .modal-footer {
    border-top: none
}

.guideModalPopup .modal-dialog .modal-content .modal-footer .getStartedBtn {
    background: var(--black);
    color: var(--white);
    padding: .8rem 5rem;
    border: 1px solid #404040;
    cursor: pointer;
    text-transform: uppercase
}

@media (min-width: 360px) and (max-width: 768px) {
    .carousel-control-next {
        left: 20%;
        width: 40px;
        height: 40px
    }

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        background-size: 70% 100%
    }

    .carousel-control-prev {
        width: 40px;
        height: 40px
    }

    .carousel-caption {
        right: 15%;
        bottom: 10%;
        left: 0;
        z-index: 10;
        padding: 20px;
        color: #fff;
        font-size: 1rem;
        text-align: left
    }
}

#webview3d-variants-packs-features-mobile .webview3d-variant-features-tabs-box {
    width: 50% !important
}

.webview3d-features-listing-mobile {
    justify-content: space-evenly
}

.webview3d-footer-panel-inner .webview3d-features-list-dropdown {
    display: flex;
    justify-content: space-evenly !important
}

.webview3d-microintractions .webview3d-micro-background {
    background-size: 700px !important;
    background-position: -185px -29px !important
}

@media screen and (min-width: 375px) and (max-width: 768px) {
    #video_section {
        width: 100% !important
    }

    .webview3d-features-list>li.active ul,
    .webview3d-variants-packs-list>li.active ul {
        display: flex;
        justify-content: space-evenly
    }

    .webview3d-footer-panel {
        display: none !important
    }

    .webview3d-features-showcase-back {
        top: -29px;
        right: 28px
    }

    .webview3d-features-showcase,
    .webview3d-features-showcase-special {
        height: 143px
    }

    .webview3d-features-showcase-back-icon {
        background-position: -401px -404px
    }

    .webview3d-features-showcase-back {
        top: 0;
        right: -2px
    }

    .loading-section {
        top: -23%
    }

    #video_section {
        height: 78%
    }

    .video_video {
        height: 62%
    }

    #video_player_popup {
        width: 100%;
        height: 163%
    }
}

@media screen and (max-width: 900px) {
    .webview3d-features-showcase-back {
        width: 30px
    }

    .owl-nav button.owl-prev span,
    .owl-nav button.owl-next span {
        top: 7px !important;
        color: transparent !important
    }
}

.webview3d-features-list>.ecAccordion.active:after {
    display: none
}

.webview3d-features-list>.ecAccordion.active-again:after {
    display: none
}

.webview3d-features-list>.ecAccordion:after {
    display: none
}