.ab-top-container {
    height: 90vh;
}

.ab-top-img-mobile {
    width: 105%;
}

.ab_arrow_down_white {
    height: 10vh;
    background: #fff url(../assets/arrow_right2.png) 50% 50% no-repeat;
    background-size: 30px auto;
    border: none;
    border-radius: 20px;
    height: 45px;
    position: relative;
    transform: rotate(90deg)!important;
    width: 90px;
    box-shadow: 0 0 20px 19px rgb(36 36 36 / 5%);
    cursor: pointer;
}

.ab-map-container {
    margin: 8rem auto 8rem;
    position: relative;
    height: 100%;
    padding: 0;
}


.location-title {
    padding: 5px 12px;
} 

/* map parallax */

.a2858f2f-8d82-4194-b219-a5cf84db89b3, .e7e64878-22eb-4acd-9890-c77146621f76 {
    fill: #8ed9e5;
}


.ab-map-img {
    transition: all 1.5s;
    height: 100vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat; 
    background-size: 100%;
    transform: scale(1) translate(0, 0);
}

.is-inview .ab-map-img {
    position: fixed;
    top: 0;
    left: 0;
}

.is-inview-2 .ab-map-img {
    position: relative !important;
    top: 0;
    left: 0;
    opacity: 100%;
}

.is-inview-2 .hide-map-part {
    opacity: 0;
}

.is-inview-2 .bottom-map {
    position: relative !important;
    top: 0;
    left: 0;
    opacity: 100%;
}

.is-inview-animation .ab-map-img {
    transition: all 1.5s;
    transform: scale(3.2) translate(26%, 21%);
}

.bottom-map {
    position: fixed;
    opacity: 0%;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat; 
    background-size: 100%;
    transform: scale(3.2) translate(26%, 21%)
}


.locations-group {
    transition: all .5;
    opacity: 100%;
}

.is-inview-animation .locations-group {
    transition: all .5;
    opacity: 0%;
}

.proudly-canadian, .canada-flag {
    transition: all .5;
    opacity: 0%;
}

.is-inview-animation .proudly-canadian, .is-inview-animation .canada-flag {
    transition: all .5;
    opacity: 100%;
}





.ab-map-title {
    font-size: 2rem;
    position: absolute;
    opacity: 100%;
    /* top: 50%; */
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.is-inview-animation h1.ab-map-title {
    transition: all .5s;
    opacity: 0%;
}

/* End map parallax */



.ab-team-container {
    padding: 0;
}

.ab-team-cards-container {
    margin: 2rem 0;
    background-color: #F5FAFA;
    padding: 2rem 0 2rem 10rem !important;
    position: relative;
    display: flex;
}

.ab-team-cards-container::after {
    bottom: 0;
    z-index: 2;
    content: '';
    position: absolute;
    height: 100%;
    border-right: 30px solid #21CCDD;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    filter: blur(40px) opacity(.9);
}

.team-member-title {
    padding: 0;
    text-align: center;
    display: none;
    font-weight: 600;
    font-size: 18px;
    margin: 0 auto;
}

/* .team-member-info, .team-member-info-container {
    display: none;
} */

.team-member-info-show {
    display: block;
}

.team-member-img {
    width: 120px;
    height: 120px;
    align-self: center;
    /* cursor: pointer; */
    border-radius: 50%;
}

.team-blue {
    border: 5px solid #21CCDD;
    margin: 5px;
}

.team-yellow {
    border: 5px solid #FCD25C;
    margin: 5px;
}

.team-purple {
    border: 5px solid #6C63FF;
    margin: 5px;
}

.team-light-blue {
    border: 5px solid #AADFE5;
    margin: 5px;
}

.team-member {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 300px;
    z-index: 2;
}

.ab-card-container {
    max-width: 100% !important;
    width: 300px;
    max-height: 100%;
    padding: 1rem 2rem 1.5rem;
    border-radius: 25px;
    align-items: flex-start;
}

.ab-blue-card {
    background-color: #21ccdd;
}

.ab-yellow-card {
    background-color: #FCD25C;
}

.ab-purple-card {
    background-color: #6C63FF;
}

.ab-light-blue-card {
    background-color: #AADFE5;
}

/* .no-bg-color {
    background: none!important;
} */

.team-member-name {
    color: #fff;
    margin-bottom: 0 !important;
    padding: 0.5rem 0;
    font-weight: 600;
}

.team-member-position {
    text-align: center;
    background-color: #f5fafa81;
    color: #fff;
    border-radius: 10px;
    padding: .5rem;
    max-width: 100%;
    display: inline;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0 !important;
}

.team-member-info {
    position: relative;
    top: -1rem;
    background-color: #fff;
    border-radius: 0 0 25px 25px;
    width: 300px;
    max-width: 100%;
    max-height: 100%;
    padding: 2rem 2rem 2rem;
}

.team-member-info p {
    font-size: 14px;
    margin-bottom: 0 !important;
}


.ab-mission-container {
    margin: 10rem 0;
}

.ab-mission-hand-desktop {
    position: absolute;
    left: 0;
    max-width: 120px;
}

.ab-mission-hand-mobile {
    position: absolute;
    right: -4rem;
    max-width: 160px;
}

.ab-mission-text {
    padding: 0 10rem 0 8rem;
}

.ab-mission-title {
    padding-bottom: 2rem;
}

.ab-list-container {
    background-color: #F5FAFA;
    margin: 0 0 0 -1rem;
    left: 0;
    padding: 2rem 0 1rem 7rem;
    max-width: 750px;
    border-radius: 0 15px 15px 0;
}


.ab-list-container ul li {
    padding-bottom: 1rem;
    list-style-type: none;
    display: flex;
    align-items: center;
    font-weight: 600 !important;
}

.ab-pc-img {
    width: 600px;
    max-width: 100%;
    position: relative;
    left: 0;
}

.ab-dot-blue {
    position: relative;
    width: 10px;
    height: 10px;
    background-color: #21ccdd;
    border-radius: 50%;
    padding: 0;
    margin-right: .5rem;
}

.ab-dot-purple {
    position: relative;
    width: 10px;
    height: 10px;
    background-color: #6C63FF;
    border-radius: 50%;
    padding: 0;
    margin-right: .5rem;
}

.ab-dot-yellow {
    position: relative;
    width: 10px;
    height: 10px;
    background-color: #FCD25C;
    border-radius: 50%;
    padding: 0;
    margin-right: .5rem;
}



@media screen and (max-width: 1200px) {
    
    .arrow-down-btn {
        display: block;
    }

    .ab-pc-img {
        width: 420px; 
    }

    .is-inview-animation .ab-map-img {
        transition: all 1.5s;
        transform: scale(4.6) translate(30%, -2%);
    }

    .bottom-map {
        display: flex;
        flex-direction: column;
        justify-content: center;
        transform: scale(4.6) translate(30%, 2%)
    }

    .bottom-map h1 {
        opacity: 0%;
    }

    .ab-map-title {
        position: relative;
        width: 100%;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0 6rem 2rem;
    }

    .ab-map-img {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    
    .ab-top-img-desktop {
        display: none;
    }

    .ab-top-container {
        padding: 0;
    }

    .ab-top-img-mobile {
        padding-bottom: 8rem;
    }

    .ab-team-cards-container {
        padding: 2rem 6rem !important;
    }

    .ab-team-cards-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 1rem;
    }

    .ab-team-cards-container::after {
        display: none;
    }

    .team-member, .team-member-info {
        margin: auto;
    }

    .ab-team-title {
        text-align: center;
        padding: 2rem 7rem;
    }

    .ab-mission-text {
        padding-left: 10rem;
    }

    .ab-mission-text {
        padding-left: 3rem;
    }

    .ab-list-container {
        padding: 2rem 0 1rem 3rem; 
        max-width: 640px;
    }

    .ab-pc-img-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 3rem;
    }

    .ab-mission-hand-desktop { 
        display: none;
    }
}

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

    .ab-mission-title {
        font-size: 3rem !important;
    }

    .display-5, h1 {
        font-size: 3rem !important;
    }

    .team-member-info p {
        font-size: 14px !important;
    }
}


@media screen and (min-width: 1601px) {
    .ab-mission-title {
        font-size: 2.5rem !important;
    }
}

@media screen and (min-width: 1201px) {
    .team-member-position {
        font-size: 12px;
    }

    .team-member-info p {
        font-size: 13px;
    }

    .ab-team-title {
        padding: 0 8rem;
    }

    .ab-mission-title {
        font-size: 2rem;
    }
    
    .ab-top-img-mobile {
        display: none;
    }

    .ab-mission-hand-mobile {
        display: none;
    }
}

@media screen and (max-width: 900px){
    .ab-team-cards-container {
        padding: 2rem 2rem !important;
    }

    .ab-map-title {
        padding: 0 6rem 0;
    }
}

@media screen and (max-width: 321px){
    .arrow-down-btn {
        bottom: -2rem;
    }

    .ab-top-img-mobile {
        padding: 4rem 0 3rem !important;
    }

    .is-inview-animation .ab-map-img {
        transition: all 1.5s;
        transform: scale(4.6) translate(30%, -60px) !important;

    }

    .bottom-map {
        display: flex;
        flex-direction: column;
        justify-content: center;
        transform: scale(4.6) translate(30%, -60px) !important;
    }

    .ab-map-title {
        padding: 0 2rem !important;
        font-size: 16px !important;
    }
}

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

    .team-blue {
        border: 4px solid #21CCDD;
    }
    
    .team-yellow {
        border: 4px solid #FCD25C;
    }
    
    .team-purple {
        border: 4px solid #6C63FF;
    }
    
    .team-light-blue {
        border: 4px solid #AADFE5;
    }

    .display-5 {
        font-size: 21px !important;
    }

    .ab-pc-img {
        width: 300px;
    }

    .bottom-map {
        transform: scale(6.5) translate(33%, 0);
    }

    .is-inview-animation .ab-map-img {
        transition: all 1.5s;
        transform: scale(6.5) translate(33%, -5%);
    }

    .ab_arrow_down_white {
        background-size: 25px auto;
        height: 35px;
        width: 60px;
    }

    .ab-top-container h1 {
        padding: 0 3rem;
    }

    .ab-top-img-mobile {
        padding: 4rem 0 6rem;
    }
    

    .ab-team-title {
        padding: 2rem 1rem;
    }

    .ab-map-title {
        padding: 0 2rem 0;
        font-size: 21px !important;
    }

    .team-member-img {
        width: 100px; 
        height: 100px;
        align-self: flex-start;
    }

    .ab-card-container {
        width: 280px;
        height: 200px;
        max-width: 100% !important;
        padding: .2rem 1.2rem 1rem;
    }

    .team-member-title {
        text-align: center;
        font-size: 14px;
        padding: .5rem 0;
        margin: auto;
    }

    .no-bg-color {
        width: 100% !important;
    }

    .team-member-info {
        width: 280px;
        max-width: 100%;
        height: auto;
        max-height: 100%;
        padding: 2rem 1rem 1.5rem;
    }

    .no-bg-color img {
        align-self: center;
    }

    .team-member-full-container {
        
        margin: 0 auto;
    }

    .team-member-position {
        font-size: 10px;
    }

    .team-member-info p {
        font-size: 12px !important;
    }

    .ab-team-cards-container {
        grid-template-columns: repeat(1, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 1rem;
    }

    .ab-mission-text {
        padding: 0 3rem 0 1rem;
    }

    .ab-mission-text p:nth-of-type(1) {
        color: #b4b4b4;
        font-size: 12px;
    }

    .ab-mission-title {
        font-size: 24px;
        margin-bottom: 0;
        padding-bottom: 1rem;        
    }

    .ab-mission-hand-mobile {
        max-width: 140px;
    }

    .ab-list-container {
        padding: 2rem 0 1rem 0;
        max-width: 350px;
    }

    .ab-list-container ul li {
        font-size: 14px;
    }

}




.map-container-fr {
    position: relative;
    height: 100vh;
    width: 100%;
}

.map-fr-1 {
    z-index: -1;
    height: 50vh;
}

.map-fr-2 {
    z-index: -1;
    height: 100vh !important;
}

@media screen and (min-width: 1200px) {
    svg.map-bh-team {
        height: 100%;
        width: 100%;
    }   
}

@media screen and (orientation:portrait) and (max-width: 1200px) {
    .map-container-fr {
        height: 100vh;
    }

    .map-fr-1 {
        height: 50vh;
    }

    .team-member-info p {
        font-size: 13px;
    }

    .team-member-name {
        font-size: 14px !important;
    }
}

@media screen and (orientation:landscape) and (max-width: 1370px) {
    .arrow-down-container {
        display: none !important;
    }

    .ab-top-img-desktop {
        padding-bottom: 10rem;
    }
}

@media screen and (orientation:landscape) and (max-width: 1200px) {

    .ab-top-img-desktop {
        padding-bottom: 0;
    }

    .is-inview-animation .ab-map-img {
        transition: all 1.5s;
        transform: scale(4.6) translate(30%, 11%);
    }

    .bottom-map {
        transform: scale(4.6) translate(30%, 11%);
    }

    .ab-map-title {
        position: relative;
        width: 100%;
        top: 38%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0 6rem 0;
        font-size: 24px !important;
    }

    .ab-top-container, .map-container-fr {
        height: 100vh;
    }

    .ab-top-img-mobile {
        width: 600px !important;
        padding-bottom: 4rem;
    }

    .arrow-down-container {
        display: none !important;
    }
}

@media screen and (orientation:landscape) and (max-width: 1000px) {
    .is-inview-animation .ab-map-img {
        transition: all 1.5s;
        transform: scale(4.6) translate(21vw, 11vh);
    }

    .bottom-map {
        transform: scale(4.6) translate(24vw, 17vh);
    }

    .ab-top-container, .map-container-fr {
        height: 150vh;
    }

    .ab-map-title {
        position: relative;
        width: 100%;
        top: 50%;
    }
}

@media screen and (orientation:landscape) and (max-width: 800px) {
    
    .ab-map-title {
        position: relative;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0 6rem 0;
        font-size: 24px !important;
    }

    .ab-top-container, .map-container-fr {
        height: 150vh;
    }

    .ab-top-img-mobile {
        width: 600px !important;
        padding-bottom: 4rem;
    }

    .arrow-down-container {
        display: none !important;
    }
}

@media screen and (orientation:landscape) and (max-width: 568px) {
    .ab-top-img-mobile {
        width: 400px !important;
        padding-bottom: 2rem;
    }

    .is-inview-animation .ab-map-img {
        transition: all 1.5s;
        transform: scale(4.6) translate(30vw, 18vh);
    }

    .bottom-map {
        transform: scale(4.6) translate(30vw, 18vh);
    }

    .ab-top-container {
        height: 120vh;
    }

    .map-container-fr {
        height: 150vh;
    }

    .ab-map-title {
        padding: 0 2rem !important;
    }
}