/* ------------------------------------------------------------------------------------------------------------------------------- */
html{
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));   
  }

/* ------------------------------------------------------------------------------------------------------------------------------- */
.home{
    display:flex;
    height:100%;
    width:100%;
    color: white;
    flex-direction: column;
    overflow: hidden;
    /* font-size: clamp(0.85rem, 1vw, 1rem); */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

}
/* -------------------------------------------- Container vertical divider -------------------------------------------------------- */
.cad-area, .cam-area, .results-area{
    display: flex;
    height: 33.3%;
    align-items: center;
    justify-content: center;
    background-color:   rgba(52,73,94,1);
    background-color: rgba(0, 0, 0, 0.189);
    border: 2px solid rgba(255, 255, 255, 0.245);
}
.cad-area, .cam-area{
    border-bottom: 2px solid rgba(255, 255, 255, 0.245);  
}
/* --------------------------------------------Text Area--------------------------------------------------------------------------- */
.cad-text, .cam-text, .results-text{
    display:flex;
    padding-left: 2vw;
    padding-right: 1vw;
    flex-direction: column;
    width:60%;
    height:80%;
    align-items: center;
    justify-content: start;
    overflow: hidden;
    /* font-size: clamp(0.95rem, 1vw, 1.1rem); */
    font-size: 0.6rem;
}
.cad-text-header p, .cam-text-header p, .results-text-header p {
    margin: 0.2rem 0.5vw;
    font-weight:600 ;
    color: orange;
    color: #f5c978;
    font-size: 0.8rem;    
}
.cad-text-text, .cam-text-text, .results-text-text {
    display: flex;
    overflow:auto;
    align-items: center;
    justify-content: center;
    padding-top: 3vh;
    justify-content: start;
}
.highlighted, a{
    font-style: normal;
    color: orange;
    font-weight: 500;
    font-size: 0.6rem;
    /* font-family: sans-serif; */

}
/* ------------------------------------------Scroller Area------------------------------------------------------------------------- */
.scroller{
    width:40%;
    position: relative;
    height: 100%;
}
.scroller__inner{
    display:flex;
    flex-wrap: nowrap;
    /* border: 2px solid orange; */
    background-color: rgba(0, 0, 0, 0.189);
    border: 2px solid rgba(255, 255, 255, 0.245);
    box-sizing: border-box;
    gap:1rem;
    align-items: center;
    
    padding-inline: 0;
    width:100%;
    height:100%;
    overflow-x:hidden;
    justify-content:space-evenly;
}
.scroller__inner img {
    background-color: #333;
    background-color: #9f9d9d;
    border-radius: 0.5rem;
    color:aliceblue;

    max-width: 90%;
    max-height: 90%;
    /* display: block;  */
    display:inline-block;
}
.scroller[data-animated="true"]{
    overflow: hidden;
    -webkit-mask:
    linear-gradient(90deg, 
    transparent, white 20%, white 80%, transparent);
    mask:
    linear-gradient(90deg, 
    transparent, white 20%, white 80%, transparent);
  
    border: 3px solid rgba(1, 5, 19, 0.6);
}
/* animation: scroll 20s linear infinite; */
.scroller[data-animated="true"] .scroller__inner{
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll
                        var(--_animation-duration, 40s)
                        var(--_animation-direction, forwards)
    linear infinite;
}
.scroller__inner:hover{
    background: rgba(255, 166, 0, 0.24) !important;
    animation-play-state: paused !important;
    }
    
.scroller[data-direction = "right"]{
    --_animation-direction: reverse;
}
.scroller[data-direction = "left"]{
    --_animation-direction: forwards;
}

@keyframes scroll{
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}
/* ------------------------------------------------------------------------------------------------------------------------------- */
.overlapping-image {
    position: absolute;
    height: 30vh;
    z-index: 999;
    visibility: hidden; 
    border: 10px solid rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    top:42%;
    left:40%;    
}
/* ------------------------------------------------------------------------------------------------------------------------------- */