/* MeTAI */ .meta-ai-header { background: url(../images/ar/AR.png) no-repeat; background-size: cover; position: relative; overflow: hidden; padding: 50px 0; } .meta-ar-image-header { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .meta-ai-header-video { position: absolute; top: 0; right: 0; z-index: -5; width: 46%; background-size: cover; } .meta-ai-header-video video { display: block; width: 100%; } .meta-ai-header h3 { font-size: 44px; max-width: 630px; color: var(--Yellow); } .meta-ai-description { color: var(--color-white); font-size: 16px; padding: 20px 30px; box-sizing: border-box; background: var(--Dark-blue); border-radius: 10px; position: relative; max-width: 600px; margin: 0; margin-left: auto; } .meta-text-second { position: relative; margin-bottom: 5em; background-color: #090c43; } .meta-ai-text-box { position: absolute; top: 50%; transform: translate(-20%, -50%); left: 50%; color: var(--color-white); font-size: 17px; padding: 20px 30px; box-sizing: border-box; background: var(--theme-blue); border-radius: 10px; max-width: 600px; margin: 0; margin-left: auto; box-shadow: 2px 2px 0px 0px #ffffff; } .meta-text-second-image video { display: block; width: 50%; } .meta-text-second-image:before { content: ""; position: absolute; background: linear-gradient(270deg, #090c43 51%, transparent); width: 100%; left: 0; height: 100%; } .meta-text-second-image img { display: block; width: 100%; } .meta-text-ar-description { font-size: 17px; color: var(--Dark-blue); } .meta-ar-software { display: flex; align-items: center; } .meta-ar-software p { width: 70%; font-size: 18px; color: var(--Dark-blue); } .meta-ar-software-image { width: 30%; margin-right: 30px; overflow: hidden; border-radius: 25px; } .meta-ar-software-image img { display: block; width: 100%; } .virtual-comparative-main-div { display: flex; justify-content: space-between; position: relative; } .virtual-comparative { position: sticky; max-width: 100%; min-height: 400px; top: 120px; opacity: 0; transition: 0.5s; } .virtual-comparative img { display: block; width: 100%; } .virtual-comparative-text { width: 100%; position: sticky; top: 140px; height: 400px; opacity: 0; transition: 0.5s; } .virtual-comparative-text h3 { color: var(--Dark-blue); font-size: 34px; max-width: 330px; } .virtual-comparative-text h5 { color: var(--bs-blue); font-size: 24px; } .virtual-comparative-text p { font-size: 18px; margin: 0; } .arrow-animation-div { position: absolute; } .virtual-comparative-image-div { width: 47%; } .virtual-comparative-text-div { width: 47%; } .virtual-comparative-active { opacity: 1; transition: 0.5s; } .avatar-images { position: relative; display: block; margin-bottom: 10em; } .avatar-images img { display: block; width: 230px; } .avatar-images .Avatar_Line { display: block; width: 320px; } .Avatar_pink { position: absolute; bottom: -125px; left: 8px; transition: 0.5s; } .Avatar_orange { position: absolute; bottom: -78px; left: 214px; z-index: 1; transition: 0.5s; } .Avatar_purple { position: absolute; bottom: 40px; left: 274px; transition: 0.5s; } .patient-images { width: 100%; min-height: 400px; position: relative; transition: 0.5s; } .patient-images img { display: block; } .patient-images .Patient-image-man { width: 80%; } .patient-images .Phantom_doctor { position: absolute; top: 17%; left: 48%; width: 24%; } .patient-images .Phantom_back_table_image { position: absolute; top: 37%; left: 67%; width: 25%; } .patient-images .Patient-chair { position: absolute; top: 51%; left: 14%; width: 49%; } .patient-images .Phantom_table_image { position: absolute; top: 19%; left: -10%; width: 31%; } .virtual-comparative-section { display: flex; justify-content: space-between; width: 100%; position: sticky; top: 120px; opacity: 0; transition: 0.5s; } .virtual-comparative-active { opacity: 1; transition: 0.5s; } .virtual-comparative-section-image { width: 47%; transition: 0.5s; } .virtual-comparative-section-text { width: 47%; transition: 0.5s; } .virtual-comparative-section-text h3 { color: var(--Dark-blue); font-size: 34px; max-width: 330px; } .virtual-comparative-section-text h5 { color: var(--bs-blue); font-size: 24px; } .virtual-comparative-section-text p { font-size: 18px; margin: 0; }