/* Container Elements */

section {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0px;
    scroll-margin-top: 50px;
}

.display-case {
    position: relative;
    width: 110%;
    padding: 35px 50px;
    background-color: var(--pri-clr-white);
    border: 1px solid var(--sec-clr-gray);
    border-radius: 8px;
}

.double-display {
    width: 110%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.half-display {
    position: relative;
    height: 460px;
    width: calc(50% - 15px);
    padding: 35px 50px;
    background-color: var(--pri-clr-white);
    border: 1px solid var(--sec-clr-gray);
    border-radius: 8px;
}

.pos-right {
    text-align: right;
    float: right;
}

.photo-holder {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0px;
}

.floating-data {
    position: absolute;
    height: 40px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
}

.inner-float {
    position: relative;
    height: 60%;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 10px 10px;
    background-color: var(--pri-clr-white);
}

.bottom-content {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 35px 50px;
}

/* Text Elements */

h1 {
    text-align: center;
    font-size: 86px;
    font-weight: 900;
}

h2:not(#contact-modal h2) {
    font-size: 64px;
    font-weight: 900;
    color: var(--pri-clr-black);
}

h3 {
    font-size: 48px;
    font-weight: 900;
    text-align: center;
}

h5 {
    width: 100%;
    font-size: 32px;
    font-weight: 900;
    text-align: left;
}

h6 {
    margin-top: 5px;
    margin-bottom: -5px;
    font-size: 16px;
    font-weight: 700;
}

.secp {
    width: 633px;
    max-width: 100%;
    padding: 35px 0px;
    text-align: center;
    font-family: 'Roboto Mono';
    font-size: 20px;
}

.disp {
    width: 400px;
    font-family: 'Roboto Mono';
    font-size: 15px;
}

.half-disp {
    width: 320px;
    font-family: 'Roboto Mono';
    font-size: 15px;
}

.full-disp {
    width: 90%;
    font-family: 'Roboto Mono';
    font-size: 15px;
}

.highlight-uline {
    position: relative;
    display: inline-block;
    font-family: 'Roboto Mono';
    z-index: 1;
}

.highlight-uline::after {
    content: '';
    position: absolute;
    bottom: 0.1em;
    left: 0;
    height: 0.4em;
    width: 100%;
    background-color: var(--sec-clr-peach); 
    border-radius: 2px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transform: skewX(-15deg);
    z-index: -1;
}

.learn-more-btn p {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    padding: 8px 15px;
    font-size: 10px;
    font-weight: 300;
    font-family: 'Roboto Mono';
    background-color: var(--pri-clr-white);
    border-radius: 3px;
    z-index: 2;
}

.float-title {
    width: 110px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.inner-float p {
    right: 0;
    top: 50%;
    margin-left: 20px;
    font-size: 8px;
    font-family: 'Roboto Mono';
}

/* Action Elements */

.action-btns {
    height: 72px;
    width: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.faq-btns {
    height: 72px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

button[type="button"], .pri-btn, .sec-btn {
    padding: 0px 24px;
    padding-top: 16px;
    padding-bottom: 12px;
    text-transform: uppercase;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.pri-btn {
    color: var(--pri-clr-white);
    background-color: var(--pri-clr-coral);
    border: 2px solid var(--pri-clr-coral);
}

.sec-btn {
    color: var(--pri-clr-coral);
    background-color: var(--pri-clr-white);
    border: 2px solid var(--pri-clr-coral);
}

.sec-btn:hover {
    color: var(--pri-clr-white);
    background-color: var(--sec-clr-gray);
    border-color: var(--pri-clr-white);
}

.learn-more-opts {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    gap: 50px;
    padding: 40px 0px;
}

.learn-more-btn {
    position: relative;
    height: 50px;
    width: 330px;
    display: flex;
    align-items: left;
    justify-content: flex-start;
    padding: 15px 50px;
    background-color: var(--sec-clr-gray);
    border-radius: 6px;
    cursor: pointer;
}

.learn-more-btn:hover {
    background-image: linear-gradient(to right, #7e9faa, #85bbd0);
}

/* Image Elements */

.numeri-img {
    height: auto;
    width: 100%;
    border: none;
    border-radius: 8px;
    z-index: 1;
}

#numeri-img-calc::after {
    content: '';
    position: absolute;
    height: 400px;
    width: 100%;
    left: 0;
    bottom: 50px;
    background-image: linear-gradient(to bottom, transparent, #f6cfc2);
    pointer-events: none;
    z-index: 2;
}

.board-img {
    position: absolute;
    height: auto;
    width: 360px;
    bottom: 0;
}

#board-right {
    right: 0;
}

#board-left {
    left: 0;
    border-radius: 8px;
    clip-path: polygon(0% 0%, 70% 0, 100% 47%, 100% 100%, 0% 100%);
}

.graph-holder svg {
    position: absolute;
    bottom: 25%;
    right: 50px;
}

.floating-data svg {
    height: 15px;
    width: 15px;
}

#floater1 {
    top: 50%;
    left: 50%;
    transform: translate(-60%, -50%);
    background-image: linear-gradient(to right, #BFBFC0, #C8DDE5);
}

#floater1 svg {
    color: var(--sec-clr-blue);
}

#floater2 {
    top: 65%;
    left: 35%;
    transform: translateX(-50%);
    background-color: #BFBFC0;
}

#floater2 svg {
    color: var(--sec-clr-gray);
}

.inner-float svg {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.center-img {
    height: auto;
    width: 80%;
}

#center-data {
    margin-top: -20px;
}

#center-code {
    margin-top: -50px;
}

/* Animations */ 

/* EKG */ 

.ekg-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.monitor {
    height: 50px;
    width: 300px;
    margin-top: -40px;
    margin-bottom: 40px;
}

.monitor svg {
	position: relative;
	transition: all 0.5s ease-in-out;
}

.monitor svg .ekg {
	fill: none;
	stroke: var(--sec-clr-blue);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: miter;
	stroke-dashoffset: 1000;
	stroke-dasharray: 1000;
	animation: 1.5s linear forwards infinite ekg;
	opacity: 0;
}

@keyframes ekg {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    50% {
      stroke-dashoffset: 2000;
    }
    99% {
      opacity: 0;
      stroke-dashoffset: 3000;
    }
    100% {
      stroke-dashoffset: 1000;
    }
}

/* Beating Heart */

#heart-holder {
    position: absolute;
    height: 450px;
    width: 450px;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: circle(50%);
    animation: 1.5s ease 0s infinite pulse;
}

#beating-heart {
    height: 500px;
    width: 500px;
    animation: 1.5s ease 0s infinite beat;
}

@keyframes pulse {
    0%, 50%, 100% {
        background: #F5EBE8;
    }
    30%, 80% { 
        background: var(--pri-clr-white); 
    }
}

@keyframes beat {
    0%, 50%, 100% {
        transform: scale(1, 1);
    }
    30%, 80% {
        transform: scale(0.92, 0.95); 
    }
}

/* Graph */ 

#graph-container {
    height: 200px;
}

#boxes-bg {
    position: absolute;
    right: 80px;
    top: 100px;
    background-color: var(--pri-clr-white);
    z-index: 2;
}


.icon-lib {
    position: absolute;
    right: 35%;
    top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.icon-lines {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.icon-line {
    margin-left: -20px;
    z-index: 1;
}

.icon {
    z-index: 2;
}

.icon-line.blue .bump-group {
  animation: move-bump-blue 3s linear infinite;
}

@keyframes move-bump-blue {
  0%   { transform: translateX(0); }
  100% { transform: translateX(284px); }
}

.icon-line.black .bump-group {
  animation: move-bump-black 3s linear infinite;
}

@keyframes move-bump-black {
  0%   { transform: translateX(0); }
  100% { transform: translateX(277px); } 
}

.icon-line.orange .bump-group {
  animation: move-bump-orange 3s linear infinite;
}

@keyframes move-bump-orange {
  0%   { transform: translateX(0); }
  100% { transform: translateX(278px); } 
}

.rbw-container {
    position: absolute;
    right: 300px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.rainbow-shadow {
    position: relative;
}

.rainbow-shadow svg, 
.rainbow-shadow img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Adjustability */

@media screen and (max-width: 800px) {
    section {
        width: 90%;
    }
    #center-data {
        width: 100%;
    }
}

@media screen and (max-width: 1000px) {
    #sec-adjust .double-display {
        flex-direction: column;
        gap: 20px;
    }
    #sec-adjust .half-display {
        width: 75%;
    }
}

@media screen and (max-width: 1100px) {
    #heart-holder {
        display: none;
    }
    #sec-data .half-display {
        height: 500px;
    }
}

@media screen and (max-width: 1300px) {
    #sec-outcomes .display-case {
        height: 500px;
    }
    .icon-lib {
        left: 180px;
        top: 200px;
    }
    #boxes-bg {
        top: 200px;
    }
    .rbw-container {
        top: 60%;
    }
}

@media screen and (max-width: 1450px) {
    .monitor {
        display: none;
    }
    #sec-data .double-display {
        flex-direction: column;
        gap: 20px;
    }
    #sec-data .half-display {
        width: 75%;
    }
}