﻿/* Page-specific styles for about-us.html */

/* Fix: Override height:100% from general-opt that causes header to be viewport height */
.tmgm-header-page-content {
    height: auto !important;
}

/* Hide the breadcrumb navigation bar below the header banner */
.additional-header-wrapper {
    display: none !important;
}

.p-section-1 {
            font-size: 22px;
            line-height: 32px;
            color: #464646;
        }

        @media(max-width: 575px) {
            .p-section-1 {
                font-size: 18px;
                line-height: 26px;
            }
        }

        .p-section-2 {
            color: #464646;
        }

        .p-link {
            cursor: pointer;
            color: #1B79DE;
            font-family: 'NunitoSans-Bold';
        }

        ol.ol-custom {
            padding-left: 1rem;
        }

        ol.ol-custom li {
            color: #464646;
            padding-left: 5px;
            margin-bottom: 5px;
        }

        .h2-section-1 {
            font-weight: 600;
            color: #464646;
        }

        .h4-section-1 {
            color: #1B79DE;
            font-weight: 600;
        }

        .card-section-1 {
            box-shadow: 0px 12px 24px #D9E7F1;
            border: none !important;
            border-radius: 10px !important;
        }

        .card-section-1>div p {
            color: #838386;
            font-size: 15px;
        }

        .img-circle {
            width: 64px;
            height: 64px;
            border-radius: 64px;
            background-color: #EEF3FE;
        }

        .tm-locations-wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 60px;
            text-align: center;
        }

        .tm-locations-wrap>div {
            flex: 0 0 33.33%;
            margin-bottom: 30px;
            padding: 0 30px;
        }

        @media(max-width: 767px) {
            .tm-locations-wrap>div {
                flex: 0 0 50% !important;
            }
        }

        @media(max-width: 575px) {
            .tm-locations-wrap>div {
                flex: 0 0 100% !important;
            }
        }

        .flex-section-5 {
            flex-wrap: wrap;
            justify-content: center;
        }

        .flex-section-5>div {
            border-bottom: 1px solid rgba(0, 0, 0, .18);
            border-right: 1px solid rgba(0, 0, 0, .18);
            flex: 0 0 20%;
            text-align: center;
        }

        .flex-section-5>div:last-child,
        .flex-section-5>div:nth-child(5n) {
            border-right: none;
        }

        @media(max-width: 767px) {
            .flex-section-5>div {
                border: none;
                flex: 0 0 50%;
            }
        }

        .animated-languages {
            display: inline-block;
            height: 416px;
            margin: 0 auto;
            position: relative;
            width: 540px;
        }

        .animated-languages .lang-pop {
            background-color: #176af3;
            border-radius: 6px;
            color: rgba(0, 0, 0, .68);
            color: #fff;
            display: none;
            font-size: 14px;
            font-weight: 700;
            padding: 11px 17px;
            position: absolute;
        }

        .animated-languages .lang-pop.lang-en {
            bottom: 90px;
            right: 30px;
        }

        .animated-languages .lang-pop:before {
            border: 10px solid transparent;
            border-top-color: #176af3;
            bottom: -16px;
            content: "";
            left: calc(50% - 10px);
            left: -webkit-calc(50% - 10px);
            position: absolute
        }

        .animated-languages .lang-pop:after {
            background-color: #40dcfd;
            border-radius: 50%;
            bottom: -30px;
            content: "";
            height: 14px;
            left: calc(50% - 7px);
            left: -webkit-calc(50% - 7px);
            position: absolute;
            width: 14px
        }

        .animated-languages .lang-pop.lang-en {
            bottom: 90px;
            right: 30px
        }

        .animated-languages .lang-pop.lang-en:after,
        .animated-languages .lang-pop.lang-en:before {
            left: auto;
            right: 20px
        }

        .animated-languages .lang-pop.lang-en:after {
            right: 24px
        }

        .animated-languages .lang-pop.lang-cn {
            right: 40px;
            top: 120px
        }

        .animated-languages .lang-pop.lang-es {
            left: 166px;
            top: 122px
        }

        .animated-languages .lang-pop.lang-me {
            direction: rtl;
            left: 266px;
            text-align: right;
            top: 166px
        }

        @media(max-width: 620px) {
            .animated-languages {
                transform: translateX(-50%) scale(.85);
                left: 50%;
                margin-top: -20px;
                margin-bottom: -25px;
            }
        }

        @media(max-width: 500px) {
            .animated-languages {
                transform: translateX(-50%) scale(.7);
                margin-top: -50px;
                margin-bottom: -65px;
            }
        }


        @media(min-width: 1200px) {
            .h2-section-1 {
                margin-top: -18px;
            }
        }

        #main section:last-of-type {
            padding-bottom: 5%;
        }

        @media (max-width:1026px) {
            #main section:last-of-type {
                padding-bottom: 25%;
            }
        }

        @media (max-width:768px) {
            #main section:last-of-type {
                padding-bottom: 50%;
            }
        }

        #section-3-carousel .year {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
            display: inline-block;
            font-weight: 700;
            line-height: 40px;
            padding: 0 20px;
            position: relative;
        }

        #section-3-carousel .year:before {
            border: 7px solid transparent;
            border-top-color: #fff;
            bottom: -13px;
            content: "";
            left: 40%;
            position: absolute;
        }

        #section-3-carousel .circle {
            position: absolute;
            transform: translateX(-6px);
            margin-top: 18px;
            background-color: #40dcfd;
            border-radius: 12px;
            height: 10px;
            width: 10px;
        }

        #section-3-carousel .line {
            position: absolute;
            left: 0;
            margin-top: 22px;
            border: 1px dashed #609cf7;
            height: 0px;
            width: 100%;
            z-index: -1;
        }

        .slick-prev,
        .slick-next {
            top: 63px !important;
        }

        .bg-section-2 {
            background-color: #E9F7FD;
        }

        .bg-section-3 {
            background-color: #166AF3;
        }

        .bg-section-4 {
            background-color: #FAFAFA;
        }

        .d-flex {
            align-items: center;
        }

        .additional-header>div {
            gap: 22px;
        }

        .additional-header>div>div {
            cursor: pointer;
            user-select: none;
            transition: 0.2s all;
            padding-left: 5px !important;
            padding-right: 5px !important;
            padding-top: 12px;
            padding-bottom: 9px;
            border-bottom: 3px solid #fff;
        }

        .additional-header>div>div.active {
            border-bottom-color: #1B79DE;
        }

        .additional-header>div>div>div>p {
            color: #838386 !important;
            font-size: 16px;
        }

        .additional-header>div>div.active>div>p {
            color: #1B79DE !important;
        }

        #_asic>table,
        #_fma>table,
        #_vfsc>table {
            border: 1px solid #dee2e6;
        }

        #_asic>table>thead h6,
        #_fma>table>thead h6,
        #_vfsc>table>thead h6 {
            font-size: 14px;
            letter-spacing: -0.4px;
        }

        #_asic>table>tbody td,
        #_fma>table>tbody td,
        #_vfsc>table>tbody td {
            font-size: 15px;
            border: 1px solid #dee2e6;
        }

        #_asic>table>tbody td:not(:first-child),
        #_fma>table>tbody td:not(:first-child),
        #_vfsc>table>tbody td:not(:first-child) {
            font-weight: 600;
        }
