@font-face { font-family: ArchivoRegular; src: url('../assets/font/Archivo-Regular.ttf'); } 

@font-face { font-family: ArchivoBold; src: url('../assets/font/Archivo-Bold.ttf'); } 

* {
    font-family: archivoRegular;
}

b {
    font-family: ArchivoBold !important;
}

.topnav {
    overflow: hidden;
    background-color: transparent;
}

.topnav .logo {
    font-size: 24px;
}

.topnav .menu-icon {
    border: none;
    background-color: transparent;
    scale: calc(0.7)
}

.topnav a {
    color: #000000;
    padding: 6px 16px;
    text-decoration: none;
    /* font-size: 0.8em; */
    font-size: 0.9em;
    display: block;
}

/* .topnav #menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    overflow-y: auto;
} */
.topnav #menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    /* background-color: rgba(255, 255, 255, 0.5); */
    background-color: #FFFFFF;
    overflow-y: auto;
}

.topnav .sticky-header {
    z-index: 3;
}

/* .submenu {
    font-size: 0.8em;
} */

.submenu:hover {
    color: #003c71;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #000000;
    margin: 6px 0;
    transition: 0.4s;
}
  
.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}
  
.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
}

.change-active {
    /* border: solid 2px #003c71 !important; */
    border: solid 2px #000000 !important;
    border-radius: 50%;
    padding: 10px;
}

/* .change-active .bar1, .change-active .bar2, .change-active .bar3 {
    background-color: #003c71 !important;
} */

.absolute-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    /* background-color: rgba(255, 255, 255, 0.5); */
}

#illuminating_our_legacy {
    background-image: url(../assets/home/illuminating-our-legacy.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;    
}

#illuminating_our_legacy .legacy-text {
    padding-top: 240px; 
    padding-right: 4%; 
    font-weight: bolder;
}

#messages_home {
    /* background-image: url(../assets/home/our-time.png); */
    background-image: url(../assets/message/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
}

.section-2-bg {
    background-image: url(../assets/home/our-heritage.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.right-blue-arrow {
    width: 40px;
}

.section-3-bg {
    background-image: url(../assets/home/our-time.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.left-arrow {
    width: 70px;
}

.right-arrow {
    width: 70px;
}

.male {
    position: absolute;
    left: 0;
    top: -320px;
}

.female {
    position: absolute;
    right: 0;
    top: -180px;
}

.first-portrait-banner {
    background-image: url(../assets/home/1_home_v3_0004s_0013_Vector-Smart-Object.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 650px !important;
}

/* .first-portrait-banner:hover {
    background-image: url(../assets/home/1_home_hover_0004s_0007_Vector-Smart-Object.png);
}

.first-portrait-banner:hover .h3,
.first-portrait-banner:hover .h6 {
    visibility: hidden;
} */

.second-portrait-banner {
    background-image: url(../assets/home/1_home_v3_0004s_0011_Vector-Smart-Object.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 650px !important;
}

/* .second-portrait-banner:hover {
    background-image: url(../assets/home/1_home_hover_0004s_0005_Vector-Smart-Object.png);
}

.second-portrait-banner:hover .h3,
.second-portrait-banner:hover .h6 {
    visibility: hidden;
} */

.third-portrait-banner {
    background-image: url(../assets/home/1_home_v3_0004s_0009_Vector-Smart-Object.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 650px !important;
}

/* .third-portrait-banner:hover {
    background-image: url(../assets/home/1_home_hover_0004s_0003_Vector-Smart-Object.png);
}

.third-portrait-banner:hover .h3,
.third-portrait-banner:hover .h6 {
    visibility: hidden;
} */

.right-white-arrow {
    width: 40px;
}

.section-5-bg {
    background-color: #e7e7e7;
}

.bullet-arrow {
    height: 20px;
    width: 10px;
}

#our-milestones {
    background-color: #e1e8f4;
}

.milestone-desc-text {
    width: 100%;
}

#our-milestones {
    background-color: #e1e8f4;
}

#our-heritage {
    background-image: url(../assets/our_milestones/background.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#zeingeist-of-our-time .bg-1 {
    background-image: url(../assets/zeitgeist-of-our-time/background.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#zeingeist-of-our-time .bg-2 {
    background-image: url(../assets/zeitgeist-of-our-time/background2.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#message .bg-1 {
    background-image: url(../assets/message/background.png);
    background-color: #f1f1f1;
    background-size: cover;
    background-repeat: no-repeat;
}

#appreciating-the-past {
    background-color: #ECEAE5;
}

#appreciating-the-past .bg-1 {
    background-image: url(../assets/appreciating_the_past/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#appreciating-the-past .bg-2 {
    background-image: url(../assets/appreciating_the_past/4_past_0046_Rectangle-1-copy.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#acknowledging-the-present {
    background-color: #E5E3DE;
}

#acknowledging-the-present .bg-1 {
    background-image: url(../assets/acknowledging_the_present/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#acknowledging-the-present .bg-2 {
    background-image: url(../assets/acknowledging_the_present/Rectangle_1_copy.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#anticipating-the-future {
    background-color: #F4EDD0;
}

#anticipating-the-future .bg-1 {
    background-image: url(../assets/anticipating_the_future/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#anticipating-the-future .bg-2 {
    background-image: url(../assets/anticipating_the_future/Rectangle_1_copy.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#now-and-then {
    background-color: #EFF0F1;
}

#now-and-then .bg-1 {
    background-image: url(../assets/now_then/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#back-btn {
    position: absolute;
    left: -50px;
    top: 47%;
    cursor: pointer;
}

#next-btn {
    position: absolute;
    top: 0px;
    right: -50px;
    top: 47%;
    cursor: pointer;
}

#pcm-background .image-grid-btn {
    cursor: pointer;
}

#pcm-background .main-grid-text {
    /* z-index: 0; */
    max-width: 300px;
    /* top: 10%;
    left: 5%; */
    /* transform: translate(-50%, -50%); */
}

#pcm-background .image-grid-text {
    z-index: 0;
    max-width: 300px;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */
    transform: translate(-50%, -50%);
}

#pcm-detail-background {
    background-color: #000c53;
}

#pcm-detail-background .absolute-content {
    top: 0;
    position: absolute;
    max-width: 500px;
}

#pcm-detail-background .title-container {
    position: absolute;
    top: 19%;
    left: 8%;
}

#pcm-detail-background .icon {
    height: 90px;
    width: 90px;
}

#pcm-detail-background .title {
    position: absolute;
    top: 20%;
    left: 40%;
}

#pcm-detail-background .title2 {
    position: absolute;
    top: 20%;
    left: 5%;
}

#video-background {
    background-image: url(../assets/video/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#our-identity .bg-1 {
    background-image: url(../assets/our_identity/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
}

#our-odyssey .bg-1 {
    background-image: url(../assets/our_odyssey/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left  -30px;
}

#our-odyssey .text-body {
    max-width: 100%;
}

.card {
    position: relative;
    display: inline-block;
    background-color: transparent;
    border: none;
}

.card .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.card:hover .img-top {
    display: inline;
}

.image-grid-btn:hover .img-top {
    display: inline;
}

.circle-item {
    color: #222e37;
}

.circle-item:hover {
    color: #003c71;
}

.circle-item:hover .img-top {
    display: inline;
}

.body-text {
    font-size: 14px;
}

.triangle-corner {
    background-image: url(../assets/home/1_home_v3_0003s_0012_quote-mark-top.png),
    url(../assets/home/1_home_v3_0003s_0011_quote-mark-bottom.png);
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: top left, bottom right;
    padding: 10px 10px 10px 10px;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    #back-btn {
        left: 0px;
        background-color: #FFFFFF;
        padding: 2%;
        top: 75%;
    }
    
    #next-btn {
        right: 0px;
        background-color: #FFFFFF;
        padding: 2%;
        top: 75%;
    }

    /* #pcm-background .main-grid-text {
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5%;
    } */

    #backToTopBtn {
      bottom: 100px !important;
    }

    .topnav .logo img {
      width: 100px !important;
    }
}

#pcm-background .main-grid-text {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2%;
}

@media only screen and (min-width: 768px) { 
    .first-portrait-banner:hover {
        background-image: url(../assets/home/1_home_hover_0004s_0007_Vector-Smart-Object.png);
    }

    .first-portrait-banner:hover .h3,
    .first-portrait-banner:hover .h6 {
        visibility: hidden;
    }

    .second-portrait-banner:hover {
        background-image: url(../assets/home/1_home_hover_0004s_0005_Vector-Smart-Object.png);
    }
    
    .second-portrait-banner:hover .h3,
    .second-portrait-banner:hover .h6 {
        visibility: hidden;
    }

    .third-portrait-banner:hover {
        background-image: url(../assets/home/1_home_hover_0004s_0003_Vector-Smart-Object.png);
    }
    
    .third-portrait-banner:hover .h3,
    .third-portrait-banner:hover .h6 {
        visibility: hidden;
    }

    /* #illuminating_our_legacy .legacy-text {
        padding-top: 120px; 
    } */

    /* #pcm-background .main-grid-text {
        background-color: transparent;
        padding: 0%;
    } */

    .roll-over-animation:hover {
      animation: breath-in 0.4s linear;
      /* background-size: 100%; */
      background-size: 140%;
    }

    #illuminating_our_legacy .legacy-text {
      padding-right: 18%; 
    }
}

@media only screen and (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
/* @media only screen and (min-width: 768px) { */
    /* For desktop: */
    .topnav #menu {
        width: 40%;
    }

    .first-portrait-banner {
        border-right: solid 3px #FFFFFF;
    }
    
    .second-portrait-banner {
        border-left: solid 2px #FFFFFF;
        border-right: solid 2px #FFFFFF;
    }

    .third-portrait-banner {
        border-left: solid 3px #FFFFFF;
    }

    .milestone-desc-text {
        width: 400px;
    }

    #pcm-background .image-grid-btn:hover .image-grid-text {
        visibility: hidden;
    }
    
    #our-identity .bg-1 {
        background-position: center;
    }

    #our-odyssey .bg-1 {
        background-position: center -30px;
    }

    #our-odyssey .text-body {
        /* max-width: 230px; */
    }

    #pcm-background .main-grid-text {
        background-color: transparent;
        padding: 0%;
    }

    .roll-over-animation:hover {
      animation: breath-in 0.4s linear;
      background-size: 140%;
    }

    /* .first-portrait-banner:hover {
        background-image: url(../assets/home/1_home_hover_0004s_0007_Vector-Smart-Object.png);
    }

    .first-portrait-banner:hover .h3,
    .first-portrait-banner:hover .h6 {
        visibility: hidden;
    }

    .second-portrait-banner:hover {
        background-image: url(../assets/home/1_home_hover_0004s_0005_Vector-Smart-Object.png);
    }
    
    .second-portrait-banner:hover .h3,
    .second-portrait-banner:hover .h6 {
        visibility: hidden;
    }

    .third-portrait-banner:hover {
        background-image: url(../assets/home/1_home_hover_0004s_0003_Vector-Smart-Object.png);
    }
    
    .third-portrait-banner:hover .h3,
    .third-portrait-banner:hover .h6 {
        visibility: hidden;
    } */

    /* #illuminating_our_legacy {
      height: 100vh;    
    } */

    #illuminating_our_legacy .legacy-text {
      padding-right: 18%; 
    }
}

.lightboxcontainer {
    width:100%;
    text-align:left;
  }
  .lightboxleft {
    width: 40%;
    float:left;
  }
  .lightboxright {
    width: 60%;
    float:left;
  }
  .lightboxright iframe {
    min-height: 390px;
  }
  .divtext {
    margin: 36px;
  }
  @media (max-width: 800px) {
    .lightboxleft {
      width: 100%;
    }
    .lightboxright {
      width: 100%;
    }
    .divtext {
      margin: 12px;
    }
  }

/* Footer */
.footer-text {
    font-size: 12px;
}

/* Utilities */
.text-black {
    color: #222e37;
}

.primary-color {
    color: #003c71;
}

.primary-bg {
    background-color: #003c71;
}

.secondary-color {
    color: #a28860;
}

.tertiary-color {
    color: #dfddcc;
}

.text-shadow {
    text-shadow: 2px 2px rgba(223, 221, 204, 0.5);
}

.cursor-pointer {
    cursor: pointer;
}

.absoulte-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-animate-delay-1 {
    animation-delay: 0.5s;
}

.custom-animate-delay-2 {
    animation-delay: 1s;
}

.custom-animate-delay-3 {
    animation-delay: 1.5s;
}

.custom-animate-delay-4 {
    animation-delay: 2s;
}

.custom-animate-delay-5 {
    animation-delay: 2.5s;
}

.custom-animate-delay-6 {
    animation-delay: 3s;
}

.custom-animate-delay-7 {
    animation-delay: 3.5s;
}

.custom-animate-delay-8 {
    animation-delay: 4s;
}

.custom-animate-delay-9 {
    animation-delay: 4.5s;
}

.custom-animate-delay-10 {
    animation-delay: 5s;
}

:not(.topnav) > .animate__animated {
    opacity: 0;
    animation-fill-mode: both;
}

/* Scroll progress bar */
.progress-container {
    width: 100%;
    height: 4px;
    background: #ccc;
    position: fixed;
    z-index: 30;
}
  
.progress-bar {
    height: 4px;
    background: #003c71;
    width: 0%;
}

.point-style-1 {
  background-color: #00427a;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

.point-style-2 {
  background-color: #445D82;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

.point-style-3 {
  background-color: #9c9277;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

.point-style-4 {
  background-color: #B8A777;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

.point-style-5 {
  background-color: #4A7899;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

.point-style-6 {
  background-color: #707C8A;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    /* bottom: 80px; */
    right: 30px;
    z-index: 99;
  }

  #backToTopBtn button {
    font-size: 28px;
    font-weight: bold;
    border: solid 1px #003c71;
    outline: none;
    background-color: #FFFFFF;
    color: #003c71;
    cursor: pointer;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #backToTopBtn button:hover {
    color: #a28860;
  }

  @keyframes breath-out {
    /* 0%   { background-size: 100% auto; }
    50% { background-size: 120% auto; }
    100% { background-size: 140% auto; } */

    0%   { background-size: 140% auto; }
    50% { background-size: 120% auto; }
    100% { background-size: 100% auto; }
  }

  @keyframes breath-in {
    /* 0%   { background-size: 140% auto; }
    50% { background-size: 120% auto; }
    100% { background-size: 100% auto; } */

    0%   { background-size: 100% auto; }
    50% { background-size: 120% auto; }
    100% { background-size: 140% auto; }
  }

  .roll-over-animation {
    animation: breath-out 0.4s linear;
    /* background-size: 140%; */
    background-size: 100%;
  }

  /* .roll-over-animation:hover {
    animation: breath-in 1s linear;
    background-size: 100%;
  } */
  
  .background-image-format {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* cognitive carousel background image and hover */
  .grid-1 {
    min-height: 300px;
    background-image: url(../assets/pcm/6_pcm_0033_Vector-Smart-Object.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .grid-2 {
    cursor: pointer;
    min-height: 210px;
    background-image: url(../assets/pcm/6_pcm_0030_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .grid-2:hover {
    background-image: url(../assets/pcm/6_pcm_hover_0019_Vector-Smart-Object.png);
  }

  .grid-2:hover .grid-2-text {
    visibility: hidden;
  }

  .grid-3 {
    cursor: pointer;
    min-height: 210px;
    background-image: url(../assets/pcm/6_pcm_0016_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .grid-3:hover {
    background-image: url(../assets/pcm/6_pcm_hover_0017_Vector-Smart-Object.png);
  }

  .grid-3:hover .grid-3-text {
    visibility: hidden;
  }

  .grid-4 {
    cursor: pointer;
    min-height: 210px;
    background-image: url(../assets/pcm/6_pcm_0025_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .grid-4:hover {
    background-image: url(../assets/pcm/6_pcm_hover_0014_Vector-Smart-Object.png);
  }

  .grid-4:hover .grid-4-text {
    visibility: hidden;
  }

  .grid-5 {
    cursor: pointer;
    min-height: 200px;
    background-image: url(../assets/pcm/6_pcm_0023_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .grid-5:hover {
    background-image: url(../assets/pcm/6_pcm_hover_0012_Vector-Smart-Object.png);
  }

  .grid-5:hover .grid-5-text {
    visibility: hidden;
  }

  .grid-6 {
    cursor: pointer;
    min-height: 170px;
    background-image: url(../assets/pcm/6_pcm_0021_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .grid-6:hover {
    background-image: url(../assets/pcm/6_pcm_hover_0010_Vector-Smart-Object.png);
  }

  .grid-6:hover .grid-6-text {
    visibility: hidden;
  }

  .grid-7 {
    cursor: pointer;
    min-height: 190px;
    background-image: url(../assets/pcm/6_pcm_hover_0000_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .grid-7:hover {
    background-image: url(../assets/pcm/6_pcm_hover_0000_Vector-Smart-Object.png);
  }

  .grid-7:hover .grid-7-text {
    visibility: hidden;
  }

  .grid-8 {
    cursor: pointer;
    min-height: 190px;
    background-image: url(../assets/pcm/6_pcm_0013_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .grid-8:hover {
    background-image: url(../assets/pcm/6_pcm_hover_0002_Vector-Smart-Object.png);
  }

  .grid-8:hover .grid-8-text {
    visibility: hidden;
  }

  .grid-9 {
    cursor: pointer;
    min-height: 190px;
    background-image: url(../assets/pcm/6_pcm_0017_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .grid-9:hover {
    background-image: url(../assets/pcm/6_pcm_0017_Vector-Smart-Object.png);
  }

  .grid-9:hover .grid-9-text {
    visibility: hidden;
  }

  .grid-10 {
    cursor: pointer;
    min-height: 190px;
    background-image: url(../assets/pcm/6_pcm_0015_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .grid-10:hover {
    background-image: url(../assets/pcm/6_pcm_hover_0004_Vector-Smart-Object.png);
  }

  .grid-10:hover .grid-10-text {
    visibility: hidden;
  }

  .grid-11 {
    cursor: pointer;
    min-height: 380px;
    background-image: url(../assets/pcm/6_pcm_0019_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .grid-11:hover {
    background-image: url(../assets/pcm/6_pcm_hover_0008_Vector-Smart-Object.png);
  }

  .grid-11:hover .grid-11-text {
    visibility: hidden;
  }

  #appreciating-the-past .rounded-button-1 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/appreciating_the_past/Ellipse_1_copy_6.png); */
    background-image: url(../assets/appreciating_the_past/4_past_0036_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #appreciating-the-past .rounded-button-1:hover {
    background-image: url(../assets/appreciating_the_past/4_past_0036_Vector-Smart-Object.png);
  }

  #appreciating-the-past .rounded-button-2 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/appreciating_the_past/Layer_1.png); */
    background-image: url(../assets/appreciating_the_past/4_past_0034_Layer-1.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #appreciating-the-past .rounded-button-2:hover {
    background-image: url(../assets/appreciating_the_past/4_past_0034_Layer-1.png);
  }

  #appreciating-the-past .rounded-button-3 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/appreciating_the_past/Vector_Smart_Object-7.png); */
    background-image: url(../assets/appreciating_the_past/4_past_0031_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #appreciating-the-past .rounded-button-3:hover {
    background-image: url(../assets/appreciating_the_past/4_past_0031_Vector-Smart-Object.png);
  }

  #appreciating-the-past .rounded-button-4 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/appreciating_the_past/Vector_Smart_Object-6.png); */
    background-image: url(../assets/appreciating_the_past/4_past_0028_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #appreciating-the-past .rounded-button-4:hover {
    background-image: url(../assets/appreciating_the_past/4_past_0028_Vector-Smart-Object.png);
  }

  #appreciating-the-past .rounded-button-5 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/appreciating_the_past/Vector_Smart_Object-5.png); */
    background-image: url(../assets/appreciating_the_past/4_past_0025_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #appreciating-the-past .rounded-button-5:hover {
    background-image: url(../assets/appreciating_the_past/4_past_0025_Vector-Smart-Object.png);
  }

  #appreciating-the-past .rounded-button-6 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/appreciating_the_past/Vector_Smart_Object-4.png); */
    background-image: url(../assets/appreciating_the_past/4_past_0022_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #appreciating-the-past .rounded-button-6:hover {
    background-image: url(../assets/appreciating_the_past/4_past_0022_Vector-Smart-Object.png);
  }

  #appreciating-the-past .rounded-button-7 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/appreciating_the_past/Vector_Smart_Object-3.png); */
    background-image: url(../assets/appreciating_the_past/4_past_0019_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #appreciating-the-past .rounded-button-7:hover {
    background-image: url(../assets/appreciating_the_past/4_past_0019_Vector-Smart-Object.png);
  }

  #appreciating-the-past .rounded-button-8 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/appreciating_the_past/Vector_Smart_Object-2.png); */
    background-image: url(../assets/appreciating_the_past/4_past_0016_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #appreciating-the-past .rounded-button-8:hover {
    background-image: url(../assets/appreciating_the_past/4_past_0016_Vector-Smart-Object.png);
  }

  #appreciating-the-past .rounded-button-9 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/appreciating_the_past/Vector_Smart_Object.png); */
    background-image: url(../assets/appreciating_the_past/4_past_0013_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #appreciating-the-past .rounded-button-9:hover {
    background-image: url(../assets/appreciating_the_past/4_past_0013_Vector-Smart-Object.png);
  }

  #acknowledging-the-present .rounded-button-1 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/acknowledging_the_present/Ellipse_1_copy_6.png); */
    background-image: url(../assets/acknowledging_the_present/present_0016_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #acknowledging-the-present .rounded-button-1:hover {
    background-image: url(../assets/acknowledging_the_present/present_0016_Vector-Smart-Object.png);
  }

  #acknowledging-the-present .rounded-button-2 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/acknowledging_the_present/Ellipse_1_copy.png); */
    background-image: url(../assets/acknowledging_the_present/present_0013_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #acknowledging-the-present .rounded-button-2:hover {
    background-image: url(../assets/acknowledging_the_present/present_0013_Vector-Smart-Object.png);
  }

  #acknowledging-the-present .rounded-button-3 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/acknowledging_the_present/Ellipse_1_copy_2.png); */
    background-image: url(../assets/acknowledging_the_present/present_0037_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #acknowledging-the-present .rounded-button-3:hover {
    background-image: url(../assets/acknowledging_the_present/present_0037_Vector-Smart-Object.png);
  }

  #acknowledging-the-present .rounded-button-4 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/acknowledging_the_present/Ellipse_1_copy_3.png); */
    background-image: url(../assets/acknowledging_the_present/present_0039_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #acknowledging-the-present .rounded-button-4:hover {
    background-image: url(../assets/acknowledging_the_present/present_0039_Vector-Smart-Object.png);
  }

  #acknowledging-the-present .rounded-button-5 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/acknowledging_the_present/Ellipse_1_copy_4.png); */
    background-image: url(../assets/acknowledging_the_present/present_0034_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #acknowledging-the-present .rounded-button-5:hover {
    background-image: url(../assets/acknowledging_the_present/present_0034_Vector-Smart-Object.png);
  }

  #acknowledging-the-present .rounded-button-6 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/acknowledging_the_present/Ellipse_1_copy_5-4.png); */
    background-image: url(../assets/acknowledging_the_present/present_0031_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #acknowledging-the-present .rounded-button-6:hover {
    background-image: url(../assets/acknowledging_the_present/present_0031_Vector-Smart-Object.png);
  }

  #acknowledging-the-present .rounded-button-7 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/acknowledging_the_present/Ellipse_1_copy_5-3.png); */
    background-image: url(../assets/acknowledging_the_present/present_0028_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #acknowledging-the-present .rounded-button-7:hover {
    background-image: url(../assets/acknowledging_the_present/present_0028_Vector-Smart-Object.png);
  }

  #acknowledging-the-present .rounded-button-8 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/acknowledging_the_present/Ellipse_1_copy_5-2.png); */
    background-image: url(../assets/acknowledging_the_present/present_0022_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #acknowledging-the-present .rounded-button-8:hover {
    background-image: url(../assets/acknowledging_the_present/present_0022_Vector-Smart-Object.png);
  }

  #acknowledging-the-present .rounded-button-9 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/acknowledging_the_present/Ellipse_1_copy_5.png); */
    background-image: url(../assets/acknowledging_the_present/present_0025_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #acknowledging-the-present .rounded-button-9:hover {
    background-image: url(../assets/acknowledging_the_present/present_0025_Vector-Smart-Object.png);
  }

  #acknowledging-the-present .rounded-button-10 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/acknowledging_the_present/Ellipse_1_copy_7.png); */
    background-image: url(../assets/acknowledging_the_present/present_0019_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #acknowledging-the-present .rounded-button-10:hover {
    background-image: url(../assets/acknowledging_the_present/present_0019_Vector-Smart-Object.png);
  }

  #anticipating-the-future .rounded-button-1 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/anticipating_the_future/Ellipse_1_copy.png); */
    background-image: url(../assets/anticipating_the_future/future_0017_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #anticipating-the-future .rounded-button-1:hover {
    /* background-image: url(../assets/anticipating_the_future/future_0017_Vector-Smart-Object.png); */
  }

  #anticipating-the-future .rounded-button-2 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/anticipating_the_future/Ellipse_1_copy_2.png); */
    background-image: url(../assets/anticipating_the_future/future_0014_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #anticipating-the-future .rounded-button-2:hover {
    background-image: url(../assets/anticipating_the_future/future_0014_Vector-Smart-Object.png);
  }

  #anticipating-the-future .rounded-button-3 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/anticipating_the_future/Ellipse_1_copy_3.png); */
    background-image: url(../assets/anticipating_the_future/future_0011_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #anticipating-the-future .rounded-button-3:hover {
    /* background-image: url(../assets/anticipating_the_future/future_0011_Vector-Smart-Object.png); */
  }

  #anticipating-the-future .rounded-button-4 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* background-image: url(../assets/anticipating_the_future/Ellipse_1_copy_4.png); */
    background-image: url(../assets/anticipating_the_future/future_0008_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #anticipating-the-future .rounded-button-4:hover {
    background-image: url(../assets/anticipating_the_future/future_0008_Vector-Smart-Object.png);
  }

  #rounded-navigation .rounded-button-1 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: url(../assets/home/1_home_v3_0005s_0005_Vector-Smart-Object.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #rounded-navigation .rounded-button-1:hover {
    background-image: url(../assets/home/1_home_hover_0005s_0005_Vector-Smart-Object.png);
  }

  #rounded-navigation .rounded-button-2 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: url(../assets/home/Vector_Smart_Object-3.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #rounded-navigation .rounded-button-2:hover {
    background-image: url(../assets/home/1_home_v3_0005s_0009_Vector-Smart-Object.png);
  }

  #rounded-navigation .rounded-button-3 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: url(../assets/home/Vector_Smart_Object-2.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #rounded-navigation .rounded-button-3:hover {
    background-image: url(../assets/home/1_home_v3_0005s_0007_Vector-Smart-Object.png);
  }

  #rounded-navigation .rounded-button-4 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: url(../assets/home/Vector_Smart_Object-6.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #rounded-navigation .rounded-button-4:hover {
    background-image: url(../assets/home/1_home_v3_0005s_0014_Vector-Smart-Object.png);
  }

  #rounded-navigation .rounded-button-5 {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: url(../assets/home/Vector_Smart_Object-4.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  #rounded-navigation .rounded-button-5:hover {
    background-image: url(../assets/home/1_home_v3_0005s_0011_Vector-Smart-Object.png);
  }

  /* Booklet */
  .booklet {
      width: 50%;
      object-fit: cover;
      object-position: center;
      box-shadow:5px 5px 5px #999;
  }

  .booklet-mobile {
      max-width: 50%;
  }

  @media(min-width:768px) {
    /* Home */
    #index .booklet {
        object-position: right;
    }
  }

  .download-book {
    height: 30px;
  }

  /* @media(max-width:767px) {
    .download-book {
        height: 30px;
    }
  }

  @media(min-width:768px) {
    .download-book {
        height: 30px;
    }
  }

  @media only screen and (min-width: 992px) {
    .download-book {
        height: 20px;
    }
  }

  @media only screen  and (min-width : 1224px) {
    .download-book {
        height: 24px;
    }
  }

  @media only screen  and (min-width : 1600px) {
    .download-book {
        height: 30px;
    }
  } */

  /* .btn-custom-primary {
    background-color: #003c71;
  } */

  .video {
    /* override other styles to make responsive */
    width: 100%    !important;
    height: auto   !important;
    display: block;
  }

  .justify-text {
    text-align: justify;
    text-justify: inter-word;
  }