/* File: ihp.css */



/* TODO:Pacman */

.image-scroll-box-2 {
    width: 70vw;
    display: flex;
    height: 200px;
    overflow-x: scroll;
    border-radius: 25px;
    margin-bottom: 50px;
    align-items: center;
}

.pacman-container {
    width: 70vw;
    margin-top: 10%;
    height: auto;
    position: relative;
    text-align: center;
}

.pacman {
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    height: 400px;
}


/* Values */

.value-container {
    display: flex;
    align-items: flex-start;
    width: 100%;
    border: #555 solid 5px;
    border-radius: 20px;
    flex-direction: row;
    justify-content: space-evenly;
}

.value-btn-container {
    display: flex;
    width: 20%;
    height: 100%;
    /* position: relative; */
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

.value-btn {
    position: relative;
    /* margin: 3vh; */
    width: 60%;
    /* height: 15vh; */
    border-radius: 20px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.value-btn img {
    border: black solid 3px;
    border-radius: 30%;
    width: 70%;
    padding: 5px;
    object-fit: contain;
}

.value-btn p {
    text-align: center;
    margin: 0;
}

.p0 {
    left: 20%;
}

.p1 {
    right: 20%;
}

.p2 {
    left: 20%;
}

.p3 {
    right: 20%;
}

.p4 {
    left: 20%;
}

.value-content-container {
    margin: 20px;
    /*height: 80vh;*/
    /*display: flex;*/
    width: 70%;
    position: relative;
}

.value-title {
    position: relative;
    /*top: 0;*/
    font-size: 2em;
    /*margin: 1em 1em 1em 0;*/
}

.value-content-container blockquote {
    font-size: 1.2em;
    line-height: 1.6;
    margin: 20px 0;
    padding: 20px;
    background-color: white;
    border-left: 10px solid #ccc;
    margin-left: 30px;
}

.value-content-container blockquote:before {
    content: "\201C";
    font-size: 4em;
    color: #ccc;
    vertical-align: -0.4em;
    line-height: 0;
    margin-right: 10px;
}

.value-content-container blockquote:after {
    content: "\201D";
    font-size: 4em;
    color: #ccc;
    vertical-align: -0.4em;
    line-height: 0;
    margin-left: 10px;
}

.value-content-container blockquote p {
    display: inline;
    font-style: italic;
}

.value-content-container blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 0.9em;
    color: #555;
    text-align: right;
}

.value-content-container blockquote cite:before {
    content: "\2014 \00A0";
    /* em dash and non-breaking space */
    color: #555;
}

.value-quote {
    position: relative;
    /*font-size: 2em;*/
    margin: 1em 1em 1em 0;
}

.value-paragraph {
    position: relative;
    font-size: 1em;
    margin: 1em 1em 1em 0;
    padding: 2%;
    background-color: white;
}

.hidden {
    display: none;
}

.show {
    display: block;
}



/* Circle */

.circle-container {
    width: 50%;
    max-width: 1000px;
    position: relative;
    left: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px;
    /* border: #000000 solid 5px; */
    margin-top: 200px;
    transform: rotate(0deg);
}

.circle-container img {
    width: 100%;
    height: auto;
    /* margin-top: 200px; */
}

.circle-btn {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* border: #000000 solid 5px; */
    height: 50%;
    aspect-ratio: 1 / 1;
}

.circle-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0。5);
    border-radius: 50%;
    padding: 0px;
    width: 20px;
    height: 35px;
    overflow: hidden;
    opacity: 0;
    transition: top 0.6s, left 0.6s, width 1s, height 1s, opacity 1.2s, border-radius 1s, padding 1s, box-shadow 1s;
    display: flex;
    align-items: center;
}

.circle-btn:hover .circle-text {
    top: -50px;
    width: 500px;
    height: 200px;
    opacity: 1;
    border-radius: 35px;
    padding: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
    transition-delay: 0s, 0s, 0.6s, 0.6s, 0s, 0.6s, 0.6s, 0.6s;
}

.circle-text div {
    /* font-size: 25px; */
    /* font-weight: 500; */
    color: #000;
    text-align: center;
    margin: 0;
    padding: 0;
    transition: 1s;
    opacity: 0;
}

.circle-btn:hover .circle-text div {
    opacity: 1;
    transition-delay: 1.4s;
}


.event-img-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* border: #000000 solid 5px; */
}

.event-btn {
    position: absolute;
    /* border: #000000 solid 5px; */
    height: 100%;
    width: 20%;
}

.event-exp {
    position: absolute;
    bottom: -1em;
    margin: 0;
    color: gray;
}

.event-content-container {
    margin: 3em 20px;
    height: 150px;
}

.event-content {
    position: absolute;
    opacity: 0;
    transition: 1s;
    padding-right: 5%;
}

.event-content.active {
    opacity: 1;
}



/* Timeline */

.ihp-timeline {
    font-size: 0.8em;
    padding: 0px;
}

/* Card container */
.timeline-card {
    position: relative;
    max-width: 100%;
}

/* setting padding based on even or odd */
.timeline-card:nth-child(odd) {
    padding: 30px 0 30px 30px;
}

.timeline-card:nth-child(even) {
    padding: 30px 30px 30px 0;
}

/* Global ::before */
.timeline-card::before {
    content: "";
    position: absolute;
    width: 50%;
    border: solid #051b6b;
    pointer-events: none;
}

/* Setting the border of top, bottom, left */
.timeline-card:nth-child(odd)::before {
    left: 0px;
    top: -5px;
    bottom: -5px;
    border-width: 5px 0 5px 5px;
    border-radius: 50px 0 0 50px;
}

/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
    .timeline-card:nth-child(odd)::before {
        top: -5px;
        bottom: -5px;
    }
}

/* Setting the border of top, bottom, right */
.timeline-card:nth-child(even)::before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 5px 5px 5px 0;
    border-radius: 0 50px 50px 0;
}

/* Removing the border if it is the first card */
.timeline-card:first-child::before {
    border-top: 0;
    border-top-left-radius: 0;
}

/* Removing the border if it is the last card  and it's odd */
.timeline-card:last-child:nth-child(odd)::before {
    border-bottom: 0;
    border-bottom-left-radius: 0;
}

/* Removing the border if it is the last card  and it's even */
.timeline-card:last-child:nth-child(even)::before {
    border-bottom: 0;
    border-bottom-right-radius: 0;
}

.timeline-card::after {
    content: '';
    display: block;
    position: absolute;
    width: 5%;
    aspect-ratio: 1.2;
    top: 40px;
    right: 0;
    /* transform: translateX(-3%); */
    background-color: #fff9e6;
    background-color: #c9f2fd;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.timeline-card:nth-child(odd)::after {
    left: 0;
    transform: translateX(-10%);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* Information about the timeline */
.info {
    display: flex;
    flex-direction: column;
    background: #fff9e6;
    border: #ffe07c solid 5px;
    color: rgb(0, 0, 0);
    border-radius: 30px;
    padding: 10px;
}

/* Title of the card */
.title {
    color: #051b6b;
    position: relative;
    font-size: 2.5em;
}

.stage-title {
    color: #051b6b;
    position: relative;
    font-size: 5em !important;
    text-align: center;
}

.milestone-title {
    color: #051b6b;
    position: relative;
    font-size: 3em !important;
    text-align: center;
}

/* Timeline dot  */
/* .title::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 999px;
    border: 3px solid orangered;
} */

.info-context {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.colcen {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-context .imgandlable {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.info-lables {
    display: flex;
    flex-direction: column;
    width: 150px;
    align-items: center;
}

.info-lables img {
    transition: transform 0.5s;
    width: 100% !important;
    margin: 0 !important;
}

.info-lables img:hover {
    transform: scale(1.05);
}

.info-text {
    display: flex;
    padding: 15px;
    margin: 10px;
    background: white;
    border: #ffe07c solid 2px;
    border-radius: 30px;
    align-items: center;
}


/* text right if the card is even  */
.timeline-card:nth-child(even)>.info>.title {
    text-align: right;
}

/* setting dot to the left if the card is odd */
.timeline-card:nth-child(odd)>.info>.title::before {
    left: -50px;
}

/* setting dot to the right if the card is odd */
.timeline-card:nth-child(even)>.info>.title::before {
    right: -50px;
}

.info-context img {
    width: 80%;
    margin: 10px;
}

.readmorebtn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    /* -webkit-user-select: none;
    -moz-user-select: none; */
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    max-width: 200px;
    color: black;
    background-color: #ffa4a4;
    border-color: #ffa4a4;
    margin: auto;
}

.readmorebtn:hover {
    color: #fff;
    background-color: #ff7f7f;
    border-color: #ff7f7f;
}

#wholescreen {
    width: 100vw;
    height: 100vh;
    position: fixed;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
}

#wholescreen.active {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: center;
}

.card-expand {
    background: #c9f2fd;
    border: #afeeff solid 5px;
    color: rgb(0, 0, 0);
    border-radius: 20px;
    margin: 20px;
    padding: 10px;
    width: 80%;
    max-width: 1000px;
    min-height: 500px;
    max-height: 70vh;
    opacity: 0;
    position: absolute;
    bottom: 5vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    transition: all 0.5s;
    transition-delay: 2s;
    pointer-events: none;
}

.card-expand.show {
    opacity: 1;
    pointer-events: all;
}

.card-expand .card-heading {
    font-size: 2em;
    font-weight: bold;
    color: #051b6b;
    margin-top: 0;
}

.card-expand img {
    width: 100%;
    /* margin: 10px; */
}

.card-expand ol {
    font-size: 1.3em;
    margin: 1em 1vw;
}

.card-context div {
    padding: 20px;
    margin-top: 30px;
    background: white;
    border: #ffe07c solid 2px;
    border-radius: 30px;
}

.card-context h3 {
    color: #051b6b;
    margin: 0;
    font-size: 2em;
}

.card-expand .scroll {
    overflow-y: scroll;
    padding: 10px;
}

.close::after {
    content: "\26D2";
    color: #051b6b;
}

.close {
    position: absolute;
    top: -15px;
    right: 2px;
    font-size: 3em;
    color: #051b6b;
    transition: transform 0.5s;
}

.close:hover {
    transform: rotate(90deg);
}

.card-expand .labels {
    position: absolute;
    display: flex;
    height: 85px;
    top: -1em;
    left: 0;
    transform: translateY(-70%);
    background: rgba(238, 253, 255, 0.8);
    border-radius: 30px;
    overflow-y: hidden;
    align-items: center;
    backdrop-filter: blur(5px);
    padding: 10px;
}