@charset "utf-8";
    @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;900&family=Montserrat:wght@400;700&family=Roboto+Serif&display=swap');
    /* RESET CSS START */
    /* @font-face {
    font-family: 'Bodoni MT Regular';
    src: url('BOD_R.woff') format('woff');
}

@font-face {
    font-family: 'Bodoni MT Bold';
    src: url('bodoni-mt-bold.woff') format('woff');
}

@font-face {
    font-family: 'Heavitas';
    src: url('../fonts/Heavitas.woff') format('woff');
}

@font-face {
    font-family: 'Basica Oxcer';
    src: url('Basica-solo-letras-para-dafont-lista__.woff');
}

@font-face {
    font-family: 'RubikMonoOne-Regular';
    src: url('RubikMonoOne-Regular.woff');
} */

    @font-face {
        font-family: 'Georgia Regular';
        src: url('./georgia.woff');
    }

    @font-face {
        font-family: 'Orbitron';
        src: url('./Orbitron-Black.woff');
    }

    @font-face {
        font-family: 'Orbitron Regular';
        src: url('./Orbitron-VariableFont_wght.woff');
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        overflow-x: hidden;
        position: relative;
        background-color: #2f3341 !important;
    }

    html {
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

    :root {
        --primary-heading: 'Orbitron';
        --secondary-heading: 'Orbitron Regular';
    }

    a,
    button {
        font-family: var(--primary-heading);
        transition: all .5s ease-in-out;
        text-decoration: none;
        outline: none;
        border: none;
        cursor: pointer;
    }

    a:hover,
    button:hover {
        text-decoration: none;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--primary-heading);
        margin: 0;
    }

    p,
    span,
    small {
        font-family: var(--primary-heading);
        margin: 0;
    }

    input,
    select,
    textarea {
        font-family: var(--primary-heading);
    }

    ul,
    ul.list-inline {
        margin: 0;
        padding: 0;
    }

    li {
        padding: 0;
        list-style: none;
        font-family: var(--primary-heading);
    }

    li a {
        font-family: var(--primary-heading);
    }

    /* RESET CSS END */
    /* MAIN SCREEN SECTION START */

    .main-screen {
        position: relative;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        height: 100vh;
    }

    .speaker-img img {
        width: 100%;
        display: block;
        object-fit: cover;
        max-width: 100%;
        background-size: contain;
        height: 100%;
    }

    .client-bottom {
        font-size: 1.1vw !important;
    }

    .col-center {
        margin: 0 auto;
    }

    .p-0 {
        padding: 0 !important;
    }

    .mc-b-3 {
        margin-bottom: 3vh !important;
    }

    .ticker-container {
        margin-bottom: 0 !important;
    }

    .computer-screen {
        position: relative;
        height: 60vh;
    }

    .computer-img {
        /* background-color: rgb(255 255 255); */
        background-color: #05050B !important;
    }

    .computer-img img {
        width: 100%;
        display: block;
        height: 100%;
        /* z-index: 1; */
        position: relative;
    }

    .main-card.card {
        border: none !important;
        box-shadow: none !important;
    }

    /*wikipedia css*/

    #left-navigation {
        margin-left: 0 !important;
    }

    #mw-data-after-content {
        margin-left: 0 !important;
    }

    div#mw-panel {
        display: none;
    }

    .mw-footer {
        margin-left: 0 !important;
    }

    /*wikipedia css end*/
    /* .computer-screen .computer-content {
    position: absolute;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 80%;
    padding: 0;
    overflow-y: auto;
    display: flex;
    align-items: start;
    justify-content: center;
    border-radius: 16px 0 0 0;
} */
    /* .computer-screen .computer-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 43vw;
    height: 50vh;
    padding: 0;
    overflow-y: auto;
    border-radius: 16px 0 0 0;
  } */

    .computer-screen .computer-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 44.2vw;
        height: 50.7vh;
        padding: 0;
        overflow-y: auto;
        /* border-radius: 16px 0 0 0; */
        border-radius: 3vh 0 0 3vh;
    }

    /* .computer-screen::before {
    content: '';
    background: url(/static/images/monitor-corner.png) no-repeat center center / contain;
    width: 10%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 11;
} */

    .computer-screen .computer-content p,
    .computer-screen .computer-content h2 {
        color: #fff;
    }

    .computer-screen .computer-content h2 {
        font-size: 40px;
        line-height: 50px;
        font-weight: 600;
        margin-bottom: 20px;
        border-bottom: 2px solid #fff;
    }

    .computer-screen .computer-content p {
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 20px;
        font-weight: 400;
    }

    .computer-screen .computer-content::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .computer-screen .computer-content::-webkit-scrollbar-track {
        background-color: rgb(211, 197, 197);
    }

    .computer-screen .computer-content::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 1);
    }

    .mapr-iframe iframe {
        border-radius: 10px 0px 0px 10px;
        width: -webkit-fill-available;
        height: 500 !important;
    }

    .vintage-select {
        width: 37%;
        position: absolute;
        right: 105%;
        bottom: 0px;
        z-index: 111;
        appearance: value !important;
    }

    .left-speaker-text .msg2,
    .right-speaker-text .msg12 {
        font-style: italic;
    }

    .left-speaker-text .msg,
    .left-speaker-text .msg3,
    .left-speaker-text .msg4,
    .left-speaker-text .msg6,
    .right-speaker-text .msg11,
    .right-speaker-text .msg13,
    .right-speaker-text .msg14,
    .right-speaker-text .msg15,
    .right-speaker-text .msg16,
    .right-speaker-text .msg18 {
        font-family: 'Orbitron', sans-serif !important;
        margin-bottom: 1vh;
    }

    .left-speaker-text .msg2,
    .right-speaker-text .msg12,
    .left-speaker-text .msg5,
    .right-speaker-text .msg17 {
        font-family: 'Orbitron', sans-serif !important;
        margin-bottom: 23px !important;
    }

    .left-speaker-text .msg2,
    .left-speaker-text .msg3,
    .left-speaker-text .msg4,
    .left-speaker-text .msg5,
    .right-speaker-text .msg13,
    .right-speaker-text .msg14,
    .right-speaker-text .msg15,
    .right-speaker-text .msg16,
    .right-speaker-text .msg17,
    .msg12 {
        font-size: 1.8vw;
    }

    .left-speaker-text, .right-speaker-text {
        top: 50vh;
        transform: translateY(-50%);
    }

    .left-speaker-text {
        color: #fff;
        width: 25vw;
        position: absolute;
        right: 49vw;
        z-index: 111;
        font-family: 'Orbitron', sans-;
        text-shadow: 3px 3px #000, 6px 6px #000;
    }

    .right-speaker-text {
        color: #fff;
        width: 25vw;
        left: 51vw;
        position: absolute;
        z-index: 111;
        font-family: 'Orbitron', sans-serif;
        text-shadow: 3px 3px #000, 6px 6px #000;
    }

    .left-speaker-text .msg,
    .right-speaker-text .msg11 {
        font-size: 2.5vw;
    }

    .right-speaker-text .msg18,
    .left-speaker-text .msg6 {
        font-size: 2vw;
    }


    .modern-select {
        width: 37%;
        position: absolute;
        left: 105%;
        z-index: 111;
        bottom: 0px;
        appearance: value !important;
    }


.modern-select .custom-dropdown-modern, .vintage-select .custom-dropdown-vintage {
    color: #fff;
    height: 3vw !important;
    border-radius: 0;
    background-color: transparent;
    font-size: 3.7vh;
    font-weight: 900;
    padding-left: 0;
    text-align: center;
    border: 1px solid transparent;
    font-family: var(--primary-heading);
    padding: 0;
    position: relative;
    /* text-shadow: 0.4vw 0.4vh #000; */
    transition: 1s ease-in-out;
    display: block;
    width: 100%;
    display: flex;
    justify-content: center;
}

    .modern-select select:focus,
    .vintage-select select:focus {
        background-color: #6f6f6f;
        color: #fff;
        border-color: transparent;
        box-shadow: none;
    }

    .main-heading {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* LOGO START */

    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        position: relative;
    }

    .logo img {
        width: 0%;
        display: block;
        animation-name: example;
        animation-duration: 4s;
        /* height: 0%; */
    }

    @keyframes example {
        from {
            top: 0px;
            width: 90%;
        }

        to {
            top: 70px;
            width: 0%;
        }
    }

    .main-img {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0%;
        left: 0;
    }

    /* .main-img img {
        display: block;
        animation-name: example1;
        animation-duration: 5s;
        z-index: -1;
    } */

    @keyframes example1 {
        from {
            width: 0;
            height: 0;
        }

        to {
            width: 90%;
            height: 90%;
        }
    }

    .main-img {
        overflow-x: hidden;
    }

    .main-img #rightArrow .fa, 
    .main-img #leftArrow .fa
    {
        font-weight: 1000;
    }

    .main-img #rightArrow
    {
        color: rgba(133, 117, 117, 0.726);
        font-size: 200px;
        position: absolute;
        right: 1vw;
        top: 50%;
        transform: translateY(-50%);
        transition: 1s ease-in-out;
        z-index: 1111111;
        display: none;
    }

    .main-img #leftArrow
    {
        color: rgba(133, 117, 117, 0.726);
        font-size: 200px;
        position: absolute;
        left: 1vw;
        top: 50%;
        transform: translateY(-50%);
        transition: 1s ease-in-out;
        z-index: 11111;
        display: none;
    }

    .main-img a:hover {
        color: rgba(161, 160, 160, 0.555);
    }

    .main-img #projectsGlobrLogoId{
        width: 90%;
        height: 90%;
        object-fit: contain;
        left: 0;
        position: relative;
        transition: 1s ease-in-out;
    }

    .main-img #projectsIframeId{
        width: 100%;
        height: 100%;
        position: absolute;
        right: -100%;
        top: 0;
        transition: 1s ease-in-out;
    }

    .main-screen-content.main-heading-expertise {
        height: auto !important;
    }

    .main-screen-content.main-heading-resource {
        height: auto !important;
    }

    .main-screen-content.main-heading-contact {
        height: 100% !important;
        padding-left: 10px !important;
        overflow-y: hidden;
    }
    
    /* MAIN SCREEN CONTENT START */

    .main-screen-content {
        width: 100%;
        font-family: var(--primary-heading);
        padding: 0 1vh;
        height: auto !important;
        margin-bottom: -10%;
    }

    .main-heading-projects {
        /* background-color: #07060f; */
        background-color: transparent;
    }

    /* .main-heading-projects .main-img img {
        display: block;
        animation-name: example1;
        animation-duration: 5s;
        z-index: -1;
    } */

    .globr-logo-animation {
        display: block;
        animation-name: example1;
        animation-duration: 5s;
        z-index: -1;
    }

    .main-heading-expertise {
        background-color: #ffbf6a;
    }

    .main-heading-expertise ul {
        padding: 0 5px;
    }

    .main-heading-client {
        background-color: #fff07d;
    }

    .main-heading-client p {
        background-color: #ffe733 !important;
    }

    .main-heading-resource {
        background-color: #7ced81;
    }

    .main-heading-about {
        background-color: #79f3ff;
    }

    .main-heading-contact {
        background-color: #283593;
    }

    .main-heading-dsstv {
        background: #fff;
    }

    .main-screen-content ul {
        padding: 2vh 2vh 0;
    }

    .main-screen-content.main-heading-expertise ul li {
        font-size: 1.85vw;
        line-height: 4.5vh;
    }

    .main-screen-content ul li {
        color: rgb(98 97 97) !important;
        font-family: 'Georgia Regular' !important;
        list-style-type: disc;
        font-size: 1.3vw;
        line-height: 3.15vh;
        font-weight: 500;
    }

    .main-screen-content ul li a {
        color: rgb(98 97 97) !important;
        font-family: 'Georgia Regular' !important;
    }

    .main-screen-content .box {
        border: 0.5vw solid rgb(98 97 97);
        min-height: 21vh;
        margin: 1.5vh 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-screen-content .box h4 {
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgb(98 97 97) !important;
        font-family: var(--primary-heading) !important;
        font-size: 3.5vw;
        line-height: 6vh;
        cursor: pointer;
        margin: 0;
        font-weight: 500;
    }

    .main-screen-content .box#box1 {
        border-color: rgb(98 97 97);
    }

    .main-screen-content .box#box2 {
        border-color: #af211f;
    }

    .main-screen-content .box#box3 {
        border-color: rgb(0, 0, 255);
    }

    .main-screen-content .box#box4 {
        border-color: rgb(0, 255, 0);
    }

    .main-screen-content .box#box1>h4 {
        font-size: 3.2vw;
        line-height: 6vh;
    }

    .main-screen-content .box#box2>h4 {
        font-size: 3.2vw;
        line-height: 6vh;
    }

    .main-screen-content .box#box3>h4 {
        font-size: 3.2vw;
        line-height: 6vh;
    }

    .main-screen-content .box#box4>h4 {
        font-size: 3.2vw;
        line-height: 6vh;
    }

    .main-screen-content p {
        display: flex;
        align-items: center;
        color: rgb(98 97 97) !important;
        font-family: 'Georgia Regular' !important;
        font-size: 1.2vw !important;
        line-height: 2vh !important;
    }

    .main-heading-contact p {
        text-align: center !important;
        width: 100%;
        font-size: 1vw !important;
        font-weight: 500 !important;
        display: flex;
        justify-content: center;
        margin-top: 2vh;
        font-family: var(--primary-heading) !important;
    }

    .main-screen-content .box a {
        font-size: 3vh;
        line-height: 4vh;
        display: block;
        text-align: center;
        font-family: var(--primary-heading);
        color: #fff;
        font-weight: 500;
    }

    /* .main-heading-client ul li {
    font-size: 0.65vw;
    line-height: 3.2vh;
  } */

    .main-heading-client ul li {
        font-size: 1.85vw;
        line-height: 4.5vh;
    }

    /* .main-heading-resource ul li a {
    font-size: 0.75vw;
    line-height: 3.2vh;
} */

    .main-heading-resource ul li a {
        font-size: 1.85vw;
        line-height: 4.5vh;
    }

    .main-heading-resource ul li a:hover {
        text-decoration: underline !important;
    }

    .main-heading-client ul li:not(:last-child) {
        margin-bottom: 2vh;
    }

    .main-heading-resource ul li:not(:last-child) {
        margin-bottom: 3.2vh;
    }

    /* .main-screen-content.main-heading-about p {
    line-height: 3vh !important;
    font-size: 1vw !important;
    margin-bottom: 3vh;
} */

    .main-screen-content.main-heading-about p {
        line-height: 4.5vh !important;
        font-size: 1.85vw !important;
        font-weight: 500;
        font-family: 'Georgia Regular' !important;
    }

    .client-bottom {
        position: sticky;
        bottom: 0;
        left: 0;
        top: auto;
        right: 0;
        text-align: center;
    }

    .client-bottom>p {
        line-height: 3vh !important;
        letter-spacing: 0.1vw;
        font-size: 2.5vh !important;
    }

    /* MAIN SCREEN CONTENT END */
    /* LOGO END */
    /* CARD BODY STYLE START */

    .card-body {
        flex: 1 1 auto;
        padding: 1rem 1rem;
        background: #2f3341 !important;
        color: #fff;
    }

    .card-body label {
        margin-right: 2.5vw;
        margin-top: 13px;
        font-size: 2vh;
        line-height: 3vh;
        font-weight: 600;
    }

    .card-body .scroll-area {
        overflow-x: hidden;
        height: 100vh;
    }

    /* CARD BODY STYLE END */
    /* MAIN SCREEN SECTION END */

    .ticker-container ul div.not-active {
        top: 10vh !important;
    }

    .ticker-container li span {
        font-size: 2.1vh;
        line-height: 3.5vh;
        font-family: var(--secondary-heading);
        color: #73797e;
        font-weight: 900;
    }

    .news-scroll a {
        font-family: var(--secondary-heading);
        font-size: 2.1vh;
        line-height: 8.5vh;
        color: #73797e !important;
        font-weight: 900;
    }

    .news-scroll a span {
        font-weight: 600;
    }

    .breaking-news {
        height: 3vh;
    }

    /* SPEAKER CONTENT START */

    .ticker-n-container.ticker-container {
        display: none;
        z-index: 111;
        position: fixed;
        bottom: 0;
        top: auto;
        width: 100%;
        height: 3vh !important;
        font-size: 1vh;
    }

    .speaker-img {
        position: relative;
    }

    .speaker-img .speaker-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
    }

    .mt-70 {
        margin-top: 70px
    }

    .mb-70 {
        margin-bottom: 70px
    }

    /* TIME LINES SECTION START */

    .card {
        box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
        border-width: 0;
        transition: all .2s
    }

    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(26, 54, 126, 0.125);
        border-radius: .25rem
    }

    .card-body {
        flex: 1 1 auto;
        padding: 1.25rem
    }

    .vertical-timeline {
        width: 100%;
        position: relative;
        padding: 1.5rem 0 1rem
    }

    .vertical-timeline::before {
        content: '';
        position: absolute;
        top: 0;
        left: 67px;
        height: 100%;
        width: 4px;
        background: transparent !important;
        border-radius: .25rem
    }

    .vertical-timeline-element {
        position: relative;
        margin: 0 0 1rem
    }

    .vertical-timeline--animate .vertical-timeline-element-icon.bounce-in {
        visibility: visible;
        animation: cd-bounce-1 .8s
    }

    .vertical-timeline-element-icon {
        position: absolute;
        top: 0;
        left: 60px
    }

    .vertical-timeline-element-icon .badge-dot-xl {
        box-shadow: 0 0 0 5px #fff
    }

    .badge-dot-xl {
        width: 18px;
        height: 18px;
        position: relative
    }

    .badge:empty {
        display: none
    }

    .badge-dot-xl::before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: .25rem;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -5px 0 0 -5px;
        background: #fff;
    }

    .vertical-timeline-element-content {
        position: relative;
        margin-left: 10px !important;
        font-size: .8rem
    }

    .vertical-timeline-element-content .timeline-title {
        font-size: .8rem;
        margin: 0 0 .5rem;
        padding: 2px 0 0;
        font-weight: bold;
        font-family: var(--secondary-heading);
    }

    .vertical-timeline-element-content .vertical-timeline-element-date {
        display: block;
        position: absolute;
        left: -90px;
        top: 0;
        padding-right: 10px;
        text-align: right;
        color: #adb5bd;
        font-size: .7619rem;
        white-space: nowrap
    }

    .speaker-content.date-left .vertical-timeline-element-content .vertical-timeline-element-date {
        position: static !important;
        font-size: 2vh !important;
        text-align: left !important;
        padding: 10px 0 2px;
    }

    .speaker-content.date-right .vertical-timeline-element-content .vertical-timeline-element-date {
        position: static !important;
        font-size: 2vh !important;
        text-align: right !important;
        padding: 10px 0 2px;
    }

    .death-left .vertical-timeline-element-content .timeline-title,
    .death-right .vertical-timeline-element-content .timeline-title {
        font-size: .8rem;
        margin: 0 0 0.5rem;
        padding: 2px 0 0;
        font-weight: bold;
        color: #fff !important;
        text-decoration: 1px solid #fff underline !important;
        font-family: var(--secondary-heading);
    }

    .birth-left .vertical-timeline-element-content .timeline-title,
    .birth-right .vertical-timeline-element-content .timeline-title {
        font-size: .8rem;
        margin: 0 0 0.5rem;
        padding: 2px 0 0;
        font-weight: bold;
        color: #000 !important;
        text-decoration: 1px solid #000 underline !important;
        font-family: var(--secondary-heading);
    }

    a {
        text-decoration: none !important;
    }

    .card-title {
        margin-left: 0 !important;
        text-align: center !important;
    }

    h4.timeline-title:hover {
        text-decoration: underline !important;
        color: black !important;
    }

    .event-left .vertical-timeline-element-content .timeline-title,
    .event-right .vertical-timeline-element-content .timeline-title {
        font-size: .8rem;
        margin: 0 0 0.5rem;
        padding: 2px 0 0;
        font-weight: bold;
        color: #000 !important;
        text-decoration: none;
        font-family: 'Georgia Regular' !important;
    }

    .death-left .vertical-timeline-element-date,
    .death-right .vertical-timeline-element-date {
        color: #fff !important;
    }

    .card-title {
        margin-bottom: 0.5rem;
        font-size: 3vh !important;
    }

    .left-scroll-area .vertical-timeline-element-content .timeline-title {
        text-align: left !important;
    }

    .vertical-timeline-element-content .timeline-title {
        font-size: 2.0vh !important;
        line-height: 3vh !important;
        letter-spacing: 0.1vh !important;
        text-transform: capitalize !important;
    }

    .vertical-timeline-element-content:after {
        content: "";
        display: table;
        clear: both
    }

    .timeline-head select,
    .timeline-head h5 {
        flex: 1;
    }

    .timeline-head select {
        border-radius: 0;
        appearance: menulist-button;
    }

    #modern,
    #vintage {
        transition: 1s ease-in-out;
        position: relative;
    }

    .card {
        border: 1px solid #6a6767 !important;
        border-radius: 0 !important;
    }

    .card-body input {
        width: 2vw;
        height: 2vh;
    }

    /* TIMELINES SCROLLER SECTION START */

    .scroll-area::-webkit-scrollbar {
        width: 1vh;
    }

    .scroll-area::-webkit-scrollbar-thumb {
        background-color: darkgrey;
        outline: 1px solid slategrey;
    }

    .flipped {
        direction: rtl;
    }

    .event-left {
        background-color: #7f7f7f;
        padding: 5px;
    }

    .birth-left {
        background-color: #c0c0c0;
        padding: 5px;
    }

    .death-left {
        background-color: #000;
        padding: 5px;
    }

    .event-right {
        background-color: #7f7f7f;
        padding: 5px;
    }

    .birth-right {
        background-color: #c0c0c0;
        padding: 5px;
    }

    .death-right {
        background-color: #000;
        padding: 5px;
    }

    .card-body .scroll-area iframe {
        width: 100% !important;
    }

    .card-body .scroll-area iframe::-webkit-scrollbar {
        width: 0.5em;
    }

    .card-body .scroll-area iframe::-webkit-scrollbar-thumb {
        background-color: #73797e;
    }

    /* TIMELINES SCROLLER SECTION END */
    /* TIMELINES SECTION END  */
    /* SPEAKER CONTENT END */
    /* NEWS TICKER START */

    .ticker-container {
        background-color: #2f3341 !important;
    }

    .breaking-news span {
        width: 5vw;
        height: 1vh;
        font-size: 1vw;
    }

    /* NEWS TICKER END */
    /* NEW KEYBOARD START */

    .new-keyboard {
        width: 100%;
        height: 34vh;
    }

    .new-keyboard ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
        height: 100%;
    }

    .new-keyboard ul li {
        flex: 1;
        width: 100%;
        height: 100%;
        box-shadow: inset -0.1vw -0.1vw 0.1vw #000;
        position: relative;
        border-bottom-right-radius: 0.8vw;
        border-bottom-left-radius: 0.5vw;
        display: flex;
        justify-content: end;
        align-items: center;
        flex-direction: column;
        padding-bottom: 1vh;
        cursor: pointer;
        box-shadow: inset -0.3vw 0vw #000, inset 0 -0.2vw #000, inset -0.38vw -0.1vw 0.1vw 0vw #fff;
    }

    .new-keyboard ul li:active,
    .new-keyboard ul li.active {
        box-shadow: 0.2vw 0 0.3vw rgb(0 0 0 / 58%) inset, -2.8vw 0.5vw 3.5vw rgb(0 0 0) inset, 0 0 0.3vw #00000000;
        outline: none;
    }

    .new-keyboard ul li:first-child {
        background-color: #af211f;
    }

    .new-keyboard ul li:nth-child(2) {
        background-color: #fc9d1d;
    }

    .new-keyboard ul li:nth-child(3) {
        background-color: #ffe629;
    }

    .new-keyboard ul li:nth-child(4) {
        background-color: #47d04e;
    }

    .new-keyboard ul li:nth-child(5) {
        background-color: #01e9ff;
    }

    .new-keyboard ul li:nth-child(6) {
        background-color: #2d34a8;
    }

    .new-keyboard ul li:nth-child(7) {
        background-color: #8931bc;
    }

    .new-keyboard ul li:first-child::before {
        content: '';
        height: 55%;
        width: 45%;
        margin: 0 0 0 -1em;
        z-index: 2;
        border: 1px solid #000;
        border-radius: 0 0 0.3vw 0.3vw;
        box-shadow: -0.1vw -0.1vw 0.2vw rgb(255 255 255 / 20%) inset, 0px -0.9vw 0.5vw 0.6vw rgb(0 0 0) inset, 0 0.2vw 0.4vw rgb(0 0 0 / 50%);
        background: linear-gradient(45deg, #222 0%, #555 100%);
        position: absolute;
        top: 0;
        right: -20%;
    }

    .new-keyboard ul li:nth-child(2)::before {
        content: '';
        height: 55%;
        width: 45%;
        margin: 0 0 0 -1em;
        z-index: 2;
        border: 1px solid #000;
        border-radius: 0 0 3px 3px;
        box-shadow: -0.1vw -0.1vw 0.2vw rgb(255 255 255 / 20%) inset, 0px -0.9vw 0.5vw 0.6vw rgb(0 0 0) inset, 0 0.2vw 0.4vw rgb(0 0 0 / 50%);
        background: linear-gradient(45deg, #222 0%, #555 100%);
        position: absolute;
        top: 0;
        right: -20%;
    }

    .new-keyboard ul li:nth-child(4)::before {
        content: '';
        height: 55%;
        width: 45%;
        margin: 0 0 0 -1em;
        z-index: 2;
        border: 1px solid #000;
        border-radius: 0 0 3px 3px;
        box-shadow: -0.1vw -0.1vw 0.2vw rgb(255 255 255 / 20%) inset, 0px -0.9vw 0.5vw 0.6vw rgb(0 0 0) inset, 0 0.2vw 0.4vw rgb(0 0 0 / 50%);
        background: linear-gradient(45deg, #222 0%, #555 100%);
        position: absolute;
        top: 0;
        right: -20%;
    }

    .new-keyboard ul li:nth-child(5)::before {
        content: '';
        height: 55%;
        width: 45%;
        margin: 0 0 0 -1em;
        z-index: 2;
        border: 1px solid #000;
        border-radius: 0 0 3px 3px;
        box-shadow: -0.1vw -0.1vw 0.2vw rgb(255 255 255 / 20%) inset, 0px -0.9vw 0.5vw 0.6vw rgb(0 0 0) inset, 0 0.2vw 0.4vw rgb(0 0 0 / 50%);
        background: linear-gradient(45deg, #222 0%, #555 100%);
        position: absolute;
        top: 0;
        right: -20%;
    }

    .new-keyboard ul li:nth-child(6)::before {
        content: '';
        height: 55%;
        width: 45%;
        margin: 0 0 0 -1em;
        z-index: 2;
        border: 1px solid #000;
        border-radius: 0 0 3px 3px;
        box-shadow: -0.1vw -0.1vw 0.2vw rgb(255 255 255 / 20%) inset, 0px -0.9vw 0.5vw 0.6vw rgb(0 0 0) inset, 0 0.2vw 0.4vw rgb(0 0 0 / 50%);
        background: linear-gradient(45deg, #222 0%, #555 100%);
        position: absolute;
        top: 0;
        right: -20%;
    }

    .new-keyboard ul li span {
        font-family: var(--primary-heading);
        font-size: 4vh;
        line-height: 3.5vh;
        color: #2f3341;
        font-weight: 900;
        text-shadow: 0.05vw 0.1vh #eff1ee;
    }

    .new-keyboard ul li:last-child::after,
    .new-keyboard ul li:nth-child(3)::after {
        display: none;
    }

    li#k-c1 span {
        font-size: 4vh;
        line-height: 3.5vh;
    }

    li#k-c3 span {
        font-size: 4vh;
        line-height: 3.5vh;
    }

    li#k-c5 span {
        font-size: 4vh;
        line-height: 3.5vh;
    }

    li#k-c6 span {
        font-size: 4vh;
        line-height: 3.5vh;
    }

    /* NEW KEYBOARD END */
    /* COMPUTER SCREEN TEXT START */

    .computer-img {
        position: relative;
    }

    .computer-img::before {
        content: 'DATA+SCIENCE=INFORMATIONᵀᴹ ';
        position: absolute;
        top: 1.5%;
        left: 50.2%;
        width: 100%;
        color: #fff;
        z-index: 11;
        transform: translateX(-50%);
        font-family: var(--secondary-heading);
        text-align: center;
        font-size: 1vw;
        line-height: 3vh;
        letter-spacing: 0.2vw;
        font-weight: 900;
        margin-left: 1px;
    }

    .contact-p {
        margin: 0 !important;
        margin-top: 1vh !important;
    }

    .new-keyboard ul li::after {
        content: '';
        background: #ffffffa3;
        width: 1px;
        height: 43%;
        position: absolute;
        top: 1%;
        right: -10%;
        z-index: 11;
        box-shadow: 0px 0px 0vw 0.01vw #fff;
    }

    #birthleft {
        margin-left: -41px;
    }

    #deathleft {
        margin-left: -41px;
    }

    /* .left-speaker-text,
{
    width: 100%;
} */

    #birthright {
        margin-left: -41px;
    }

    #deathright {
        margin-left: -41px;
    }

    #checkboxesleft {
        margin-left: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #checkboxesright {
        margin-left: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* COMPUTER SCREEN TEXT END */
    /* MEDIA QUERIES */

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

        .modern-select select,
        .vintage-select select {
            font-size: 1.5vw !important;
            padding: 0 !important;
        }

        .new-keyboard ul li span {
            line-height: 3.5vh !important;
        }

        .contact-p {
            bottom: -9vh;
        }

        .main-screen-content.main-heading-contact {
            overflow-x: hidden;
        }
    }

    @media only screen and (min-width: 768px) and (max-width: 1023px) {
        .contact-p {
            bottom: -10px;
        }

        .modern-select select,
        .vintage-select select {
            font-size: 1.8vw;
        }
    }

    @media only screen and (min-width: 300px) and (max-width:770px) {
        .contact-p {
            bottom: -4vh;
        }
    }

    /* NEW CSS START */

    .card-title {
        color: #73797e !important;
        margin-left: 75px;
    }

    .card-body input {
        width: 2vw;
        height: 2vh;
        background: #73797e;
        border: none;
        outline: none;
        padding: 0 0.5vw;
    }

    .card-body label {
        color: #000;
    }

    .card-body {
        padding: 0 !important;
    }

    .card-head {
        padding: 1vw !important;
    }

    .ticker-n-container li span {
        font-size: 2.1vh;
        line-height: 3.5vh;
        font-family: var(--secondary-heading);
        color: #73797e;
        top: -0.3vh;
        position: relative;
    }

    .main-heading-projects,
    .main-heading-expertise,
    .main-heading-client,
    .main-heading-resource,
    .main-heading-about,
    .main-heading-contact {
        display: none;
    }

    #text_left,
    #text_right {
        width: 19vw;
        height: 3.1vh;
    }

    #searchbutton_left {
        height: 2.87vh;
        width: 2vw;
        margin-left: -6%;
    }

    #searchbutton_right {
        height: 2.87vh;
        width: 2vw;
        margin-left: -10%;
    }

    #search_stk_left,
    #search_stk_right {
        width: 19vw;
        height: 3.1vh;
    }

    #searchstkbutton_left {
        height: 2.87vh;
        width: 2vw;
        margin-left: -6%;
    }

    #searchstkbutton_right {
        height: 2.87vh;
        width: 2vw;
        margin-left: -10%;
    }

    ::placeholder {
        color: white;
        opacity: 1;
        /* Firefox */
    }

    :-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: white;
    }

    ::-ms-input-placeholder {
        /* Microsoft Edge */
        color: white;
    }

    .main-heading-dsstv {
        background-color: #fff !important;
    }

    .main-heading-dsstv ul li a {
        font-size: 1.5vw;
        line-height: 3vw;
        color: #000 !important;
    }

    .main-heading-dsstv ul li {
        color: #000 !important;
    }

    .main-heading-dsstv ul li:not(:last-child) {
        margin-bottom: 5px;
    }

    /* NEW CSS END */

    @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
        .main-screen {
            transform: rotate(-90deg);
            transform-origin: left top;
            width: 100vh;
            position: absolute;
            top: 100%;
            left: 0;
            overflow-y: scroll !important;
            height: 100vw;
        }

        .ticker-n-container.ticker-container {
            bottom: auto;
            top: auto;
        }

        .computer-img::before {
            font-size: 3vw;
        }

        .computer-screen .computer-content {
            width: 78vw;
            height: 50.7vh;
            overflow-y: auto;
        }

        .main-img #projectsGlobrLogoId{
            width: 70%;
        }

        .main-img #leftArrow,
        .main-img #rightArrow {
            font-size: 9vh;
        }
    }

    @media screen and (min-width: 320px) and (max-width: 1000px) and (orientation: landscape) {
        .main-screen-content #tags_div li a {
            text-decoration: underline !important;
        }
    }

    .outer-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 95px;
    }



    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* MAIN MESSAGE SECTION START */

    .main-message {
        background: #000;
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .message-box {
        background: #2c2b2b47;
        padding: 20px;
        color: #fff;
        position: relative;
        min-height: 100vh;
        min-width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .close-btn button {
        position: absolute;
        top: -15px;
        right: -15px;
        font-size: 15px;
        background-color: #000;
        border-radius: 50px;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        border-color: #fff;
    }

    .message-box p {
        font-weight: bold;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .message-box .mb1,
    .message-box .mb7 {
        color: #ffe629;
        text-transform: uppercase;
        text-align: center;
    }

    .message-box .mb2,
    .message-box .mb6 {
        text-align: center;
    }

    .mobile_text2 {
        padding: 20px;
        text-align: left;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-evenly;
        font-size: 120%;
        gap: 1vh;
    }

    .mb3 {
        height: 9vh;
    }
    .mb4 {
        height: 17vh;
    }
    .mb5 {
        height: 26vh;
    }


    @media (orientation: landscape) {
        .main-screen {
            display: block;
        }

        .main-message {
            display: none;
        }
    }

    @media (orientation: portrait) {
        .main-screen {
            display: none;
        }
        .main-message {
            display: flex;
        }
    }

    .main-screen-content #tags_div li a:hover {
        text-decoration: underline !important;
    }

    /* URL BOX CSS START */

    .url-box {
        position: absolute;
        bottom: 2%;
        left: 50.2%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
    }

    .url-box>a {
        color: #fff;
        font-family: var(--secondary-heading);
        text-align: center;
        font-size: 1vw;
        line-height: 3vh;
        letter-spacing: 0.2vw;
        font-weight: 900;
    }

    .url-box>a:hover {
        color: #fff;
    }

    .url-box>a#url-link {
        display: inline-block;
        width: 40%;
        max-width: 70%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        position: relative;
        top: 0vh;
    }

    #data-c {
        background-color: #000;
    }

    /* URL BOX CSS END */

    .vintage-box {
        text-align: center;
        position: relative;
    }

    .vintage-box .vintage-item {
        color: #fff;
        font-family: var(--primary-heading);
        font-size: 3vh;
    }

    .vintage-box .vintage-menu>.vintage-item {
        display: none;
    }

    .vintage-box .vintage-menu:hover.vintage-item {
        display: block;
    }

    .vintage-menu {
        color: #fff;
        font-size: 3vh;
        font-family: var(--primary-heading);
    }

    .vintagemenu-box {
        display: none;
    }

    .vintage-menu:hover .vintagemenu-box {
        display: block;
    }

    .select-wrapper {
        position: relative;
        user-select: none;
        width: 100%;
    }

    .select {
        position: relative;
        display: flex;
        flex-direction: column;
        border-width: 0 2px 0 2px;
        border-style: solid;
        border-color: #394a6d;
    }

    .select__trigger {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 22px;
        font-size: 20px;
        font-weight: 300;
        color: #3b3b3b;
        height: 60px;
        line-height: 60px;
        background: #ffffff;
        cursor: pointer;
        border-width: 2px 0 2px 0;
        border-style: solid;
        border-color: #394a6d;
    }

    .custom-options {
        position: absolute;
        display: block;
        top: 100%;
        left: 0;
        right: 0;
        border: 2px solid #394a6d;
        border-top: 0;
        background: #fff;
        transition: all 0.5s;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 2;
    }

    .select.open .custom-options {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    .custom-option {
        position: relative;
        display: block;
        padding: 0 22px 0 22px;
        font-size: 22px;
        font-weight: 300;
        color: #3b3b3b;
        line-height: 60px;
        cursor: pointer;
        transition: all 0.5s;
    }

    .custom-option:hover {
        cursor: pointer;
        background-color: #b2b2b2;
    }

    .custom-option.selected {
        color: #ffffff;
        background-color: #305c91;
    }

    .arrow {
        position: relative;
        height: 15px;
        width: 15px;
    }

    .arrow::before,
    .arrow::after {
        content: "";
        position: absolute;
        bottom: 0px;
        width: 0.15rem;
        height: 100%;
        transition: all 0.5s;
    }

    .arrow::before {
        left: -5px;
        transform: rotate(45deg);
        background-color: #394a6d;
    }

    .arrow::after {
        left: 5px;
        transform: rotate(-45deg);
        background-color: #394a6d;
    }

    .open .arrow::before {
        left: -5px;
        transform: rotate(-45deg);
    }

    .open .arrow::after {
        left: 5px;
        transform: rotate(45deg);
    }

    input#datetimepickerleft,
    input#datetimepickerright {
        width: 80% !important;
        padding: 2vh;
        margin: 1vh auto;
        display: block;
    }

    #search_left,
    #search_right,
    #search_stk_left,
    #search_stk_right {
        display: block !important;
        margin: 2vh auto;
        width: 80%;
        position: relative;
    }

    #search_left input,
    #search_right input,
    #search_stk_left input,
    #search_stk_right input {
        width: 100%;
        padding: 2vh;
        /* position: relative; */
    }

    #searchbutton_left,
    #searchbutton_right,
    #searchstkbutton_left,
    #searchstkbutton_right {
        position: absolute;
        top: 65%;
        transform: translateY(-50%);
        right: 0%;
    }

    #search_left_stk,
    #search_right_stk {
        position: relative;
    }

    #search_stk_left,
    #search_stk_right {
        height: 3.1vh;
        padding: 20px;
    }

    a#searchstkbutton_left,
    a#searchstkbutton_right {
        right: 10%;
    }

    .map_graph {
        width: 100%;
        height: 60%;
        padding: 2vh;
    }

    @media only screen and (min-width: 300px) and (max-width: 767px) {
        .map_graph {
            width: 100%;
            height: 40%;
            padding: 1vh;
        }

        .c3 svg {
            font-size: 2.5vh !important;
        }

        #search_left input,
        #search_right input,
        #search_stk_left input,
        #search_stk_right input {
            width: 100%;
            padding: 3vh;
        }

        #searchbutton_left,
        #searchbutton_right,
        #searchstkbutton_left,
        #searchstkbutton_right {
            position: absolute;
            top: 55%;
            transform: translateY(-50%);
            right: 10%;
            font-size: 3vh;
        }
    }

    @media only screen and (min-width: 1023px) and (max-width: 768px) {
        .map_graph {
            width: 100%;
            height: 60%;
            padding: 1vh;
        }

        select#vintage {
            background-position: 16vw 1vh !important;
        }

        #text_left,
        #text_right {
            width: 19vw;
            height: 6.1vh;
            padding: 2vh;
        }

        #searchbutton_left,
        #searchbutton_right,
        #searchstkbutton_left,
        #searchstkbutton_right {
            top: 55%;
            right: 2%;
        }

        #search_stk_left,
        #search_stk_right {
            height: 6.1vh;
            padding: 2vh;
        }

        a#searchstkbutton_left,
        a#searchstkbutton_right {
            right: 11%;
        }
    }

    @media only screen and (min-width: 1024px) and (max-width: 1280px) {
        .map_graph {
            width: 100%;
            height: 60%;
            padding: 1vh;
        }

        select#vintage {
            background-position: 0.1vw 2vh !important;
        }
    }

    /* for test */

    #main-secreen-test2,
    #main-secreen-test {
        position: absolute;
        top: 0;
        right: -110%;
        width: 100%;
        height: 100%;
        background-color: white;
        z-index: 1;
        transition: 1s ease-in-out;
    }

    #news_headline_title2 li,
    #news_headline_title li {
        color: rgb(98 97 97) !important;
        font-family: 'Georgia Regular' !important;
        list-style-type: disc;
        font-size: 1.3vw;
        line-height: 3.15vh;
        font-weight: 500;
        padding: 2vh 2vh 0;
    }

    #news_headline_title2 li a,
    #news_headline_title li a {
        text-decoration: underline !important;
        text-decoration-line: underline;
        text-decoration-thickness: initial;
        text-decoration-style: initial;
        text-decoration-color: initial;
        font-size: 1.5vw;
        line-height: 3vw;
        color: #000 !important;
        font-family: 'Georgia Regular' !important;
    }

    .news-video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .news-video-container {
        position: relative;
        padding-bottom: 46.25%;
        padding-top: 45px;
        height: 0px;
        overflow: hidden;
    }

    #news_headline_title2 li:not(:last-child),
    #news_headline_title li:not(:last-child) {
        margin-bottom: 5px;
    }

    #news_headline_title2,
    #news_headline_title {
        background-color: white;
    }

    /* Custom DropDown */
  
      .dropdown_header_modern, .dropdown_header_vintage {
        cursor: pointer;
        padding: 5px;
        background-color: transparent;
        position: relative;
        display: flex;
        align-items: center;
        font-size: 3.5vh;
        color: #fff;
        width: fit-content;
    }
  
    .dropdown_header_modern .arrow-down, .dropdown_header_vintage .arrow-down {
        margin-left: 5px;
        font-size: 3vh;
        border: 1px solid white;
        padding: 0 2%;
        border-radius: 2px;
    }
  
    .dropdown-list-modern, .dropdown-list-vintage {
        display: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: #6e6e6e;
        /* border: 1px solid #ccc; */
        border-top: none;
        border-radius: 0 0 4px 4px;
        position: absolute;
        width: max-content;
        z-index: 1;
        color: #fff;
        /* width: 100%; */
        text-align: center;
        text-shadow: none;
        height: 500%;
        overflow-y: scroll;
        top: 100%;
        left: 0;
    }
  
    .dropdown-list-vintage li, .dropdown-list-modern li {
        padding: 5px;
        cursor: pointer;
        color: #fff;
        width: 100%;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* display: inline-block; */
        font-size: 2.2vh;
    }
  
      .dropdown-list-vintage::-webkit-scrollbar , .dropdown-list-modern::-webkit-scrollbar {
        width: 2px;
      }
       
      .dropdown-list-vintage::-webkit-scrollbar-track, .dropdown-list-modern::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      }
       
      .dropdown-list-vintage::-webkit-scrollbar-thumb , .dropdown-list-modern::-webkit-scrollbar-thumb {
        background-color: darkgrey;
      }


      .dropdown-list-vintage li:hover , .dropdown-list-modern li:hover {
        background-color: #8a8787;
      }
     
    @media only screen and (min-width: 300px) and (max-width: 768px) {
        .customscrollmap{
            overflow: scroll;
            height: 400px;
        }
        .card-body .scroll-area {
            height: 70vh;
            padding-bottom: 40%;
        }
      
    }
    @media only screen and (min-width: 390px) and (max-width: 844px) {
     .outer-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
        }
     .video-container {
            position: relative;
            padding-bottom: 37% ! important;
            padding-top: 52px;
            height: 0;
            overflow: hidden;
    }
      .dropDownSection {
        padding-top: 2px;
        padding-left: 1px !important;
        }
        .url-box {
        position: absolute;
        bottom: 0.8%;
        left: 50.2%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
    }
        .carousel-control-prev {
            top: 30px !important;
        }
        .carousel-control-next{
            top: 30px !important;
        }

    }
    @media only screen and (min-width: 430px) and (max-width: 932px) {
     .outer-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
        }
        .dropDownSection {
        padding-top: 2px;
        padding-left: 1px !important;
        }
        .video-container {
            position: relative;
            padding-bottom: 40% ! important;
            padding-top: 52px;
            height: 0;
            overflow: hidden;
    }
    .url-box {
        position: absolute;
        bottom: 0.8%;
        left: 50.2%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
    }

    }
    @media only screen and (min-width: 947px) and (max-width: 1080px) {
     .outer-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 70px !important;
        }
        .dropDownSection {
        padding-top: 2px;
        padding-left: 1px !important;
        }
        .video-container {
            position: relative;
            padding-bottom: 50.25% ! important;
            padding-top: 52px;
            height: 0;
            overflow: hidden;
    }
    .url-box {
        position: absolute;
        bottom: 0.8%;
        left: 50.2%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
    }
        }
     @media only screen and (min-width: 947px) and (max-width: 1500px) {
     .outer-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 180px !important;
        }
        .video-container {
        position: relative;
        padding-bottom: 60%;
        padding-top: 52px;
        height: 0;
        overflow: hidden;
    }
        }
       @media only screen and (min-width: 1500px) {
    .outer-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 220px !important;
    }
    .video-container {
        position: relative;
        padding-bottom: 64%;
        padding-top: 52px;
        height: 0;
        overflow: hidden;
    }
    .video-container{
        top: -25px;

    }
    .headline {
        margin-bottom: 1px;
        margin-top: 1px;
    }
    .dropDownSection {
    padding-top: 5px !important;
    padding-left: 0px;
}
.main-screen-content {
    width: 100%;
    font-family: var(--primary-heading);
    padding: 0 1.5vh;
    height: auto !important;
    margin-bottom: -10%;
}
.mapr-iframe iframe {
        border-radius: 10px 0px 0px 10px;
        width: -webkit-fill-available;
        height: 544 !important;
    }
    .carousel-control-prev {
top: 160px !important;
}
.carousel-control-next{
top: 160px !important;
}
}
.main-screen-content .box {
    border: 0.5vw solid rgb(98, 97, 97);
    min-height: 21vh;
    margin: 1.5vh 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px; /* Rounded corners */
    background: linear-gradient(to bottom, #ffffff, #d9d9d9); /* Glare effect */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 8px rgba(0, 0, 0, 0.2); /* 3D shadow */
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.main-screen-content .box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    transform: rotate(-45deg);
    transition: all 0.5s ease;
}

.main-screen-content .box:hover::before {
    left: 100%;
}

.main-screen-content .box:hover {
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4), inset 0px -4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-3px); /* Subtle lift on hover */
}

.main-screen-content .box:active {
    transform: translateY(4px); /* Button press effect */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), inset 0px -2px 6px rgba(0, 0, 0, 0.2);
}

.main-screen-content .box h4 {
    color: rgb(98, 97, 97) !important;
    font-family: var(--primary-heading) !important;
    font-size: 3.5vw;
    line-height: 6vh;
    margin: 0;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for clarity */
}

/* Box-specific styles */
.main-screen-content .box#box1 {
    border-color: rgb(98, 97, 97);
    background: linear-gradient(to bottom, #f5f5f5, #e6e6e6);
}

.main-screen-content .box#box2 {
    border-color: #af211f;
    background: linear-gradient(to bottom, #ffd6d6, #e6a8a8);
}

.main-screen-content .box#box3 {
    border-color: rgb(0, 0, 255);
    background: linear-gradient(to bottom, #d6d6ff, #a8a8e6);
}

.main-screen-content .box#box4 {
    border-color: rgb(0, 255, 0);
    background: linear-gradient(to bottom, #d6ffd6, #a8e6a8);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .main-screen-content .box {
        min-height: 15vh;
        margin: 1vh 0;
        border-width: 0.3vw;
    }

    .main-screen-content .box h4 {
        font-size: 4vw;
        line-height: 4vh;
    }
}