/* Corner images hidden initially .corner-img, .corner-img-1, .corner-img-3, .corner-img-4, .corner-resized-img, .corner-resized-img-4 { opacity: 0; visibility: hidden; /* hide completely until animation pointer-events: none; }*/ /* Container */ .container-persons { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 50px; isolation: isolate; } /* Hero background */ .hero-header { position: relative; overflow: hidden; background: linear-gradient(135deg, #1e293b, #020617); } /* HERO CONTENT (centered text) */ .hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; text-align: center; } .person-wrapper { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .person-wrapper .person { width: 100%; /* fill wrapper */ height: auto; display: block; object-fit: cover; image-rendering: -webkit-optimize-contrast; /* sharp rendering */ transform: translateZ(0); } /* Main button absolute at bottom center */ .main-header-demo-btn { position: absolute; bottom: 50px; opacity: 0; /* start hidden */ /* INITIAL STATE (prevents jump) */ transform: translateY(20px); z-index: 0; pointer-events: none; /* GSAP will enable */ } /* Corner images */ .corner-img{ position: absolute; top: 70%; opacity: 0; pointer-events: none; transform: translateX(90%) translateZ(0); z-index: 99; max-width:68px; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; image-rendering: auto; /* smooth scaling */ } .corner-img-1{ position: absolute; top: 50%; opacity: 0; pointer-events: none; transform: translateX(80%) translateZ(0); z-index: 99; max-width:100px; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; image-rendering: auto; /* smooth scaling */ } .corner-img-3{ position: absolute; top: 50%; opacity: 0; pointer-events: none; transform: translateX(-85%) translateZ(0); z-index: 99; max-width:68px; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; image-rendering: auto; /* smooth scaling */ } .corner-img-4{ position: absolute; top: 50%; opacity: 0; pointer-events: none; transform: translateX(-105%) translateZ(0); z-index: 99; max-width:55px !important; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; image-rendering: auto; /* smooth scaling */ } .corner-resized-img { position: absolute; top: 50%; opacity: 0; width: 120px; max-width: 150px; pointer-events: none; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; image-rendering: auto; /* smooth scaling */ transform: translateX(70%) translateZ(0); z-index: 99; } .corner-resized-img-4 { position: absolute; top: 35%; opacity: 0; width: 110px; max-width: 150px; pointer-events: none; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; image-rendering: auto; /* smooth scaling */ transform: translateX(-76%) translateZ(0); z-index: 99; } /* RESPONSIVE */ @media (max-width: 768px) { .person { width: 50px; height: 50px; } .corner-img { width: 60px; } } @media (max-width: 1023px) { .main-header-demo-btn { opacity: 1 !important; transform: none !important; visibility: visible !important; } } /* Screens between 1240px and 1440px */ @media (min-width: 1240px) and (max-width: 1440px) { .corner-img { top: 72%; width: 40px; max-width: 100px; } .corner-img-1 { top: 72%; width: 75px; max-width: 100px; } .corner-img-3 { transform: translateX(-95%) translateZ(0); max-width: 45px;} .corner-img-4 { transform: translateX(-95%) translateZ(0); max-width: 40px !important;} .corner-resized-img { top: 60%; width: 70px; max-width: 150px; transform: translateX(75%); } .corner-resized-img-4 { width: 75px; max-width: 120px; transform: translateX(-72%) translateZ(0);} .person-wrapper { max-width: 40px; } } /* Screens between 1024px and 1239px */ @media (min-width: 1024px) and (max-width: 1239px) { .corner-img { top: 60%; width: 40px; max-width: 95px; transform: translateX(90%) !important;} .corner-img-1 { top: 68%; width: 75px; max-width: 110px; } .corner-img-3 { top: 35%; width: 40px; max-width: 110px; } .corner-img-4 { top: 55%; width: 35px; max-width: 110px; } .corner-resized-img { top: 55%; width: 58px; max-width: 140px; transform: translateX(70%) !important ; } .main-header-demo-btn { font-size: 17px; padding: 13px 26px; } .corner-resized-img-4 { top: 48%; width: 65px; transform: translateX(-70%) translateZ(0); } }