*{box-sizing:border-box;color:#fff;margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}html,body{margin:0;padding:0}body{color:#fff;background-color:#000;font-family:sans-serif}#root{width:100%;height:100%}main{width:100%;position:relative;top:0;left:0}section{z-index:1;width:100%;min-height:100vh;position:relative}#canvas-elem:after{content:"";z-index:-1;background-image:url(/background-m.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;transition:all .3s linear;position:absolute;top:0;left:0}.section-1{width:100%;height:100vh;position:relative}.section-1 nav{justify-content:space-between;align-items:center;padding:clamp(1.5rem,4vw,4rem) clamp(1.5rem,5vw,5rem);display:flex}.section-1 nav .nav-elem1{width:clamp(90px,8vw,120px);height:auto;display:flex}.section-1 nav .nav-elem1:nth-child(2) i{color:red}.section-1 nav svg{width:100%;height:100%;display:block}.bottom{width:100%;display:flex}.bottom .bottom-left,.bottom .bottom-right{width:50%}.bottom .bottom-right{justify-content:flex-start;align-items:center;padding-top:clamp(2rem,8vh,8rem);padding-left:clamp(1rem,4vw,3rem);display:flex}.bottom .bottom-right p{width:min(420px,90%);font-size:clamp(.9rem,1vw,1rem);line-height:1.6}.firstline1{background-color:#c6171731;width:25rem;height:1px;transform:rotate(45deg)translateY(-10rem)}.secondline1{background-color:#c6171731;width:25rem;height:1px;display:flex;position:absolute;bottom:20%;left:65%;transform:rotate(130deg)}.middle{display:flex}.middle .left,.middle .right{width:50%}.middle .left{padding-block:1rem;justify-content:flex-end;align-items:center;padding-left:2rem;display:flex}.middle .left h1{width:min(450px,90%);font-size:clamp(2rem,5vw,4.5rem);line-height:.95}.section-2 .titles{flex-direction:column;gap:2vh;padding-left:clamp(2rem,8vw,10rem);display:flex}.section-2 .titles .title{opacity:.3;cursor:pointer;flex-direction:row;gap:clamp(1rem,6vw,8rem);padding-block:1rem;transition:all .3s linear;display:flex}.section-2 .titles .title h3{font-size:clamp(2rem,5vw,5rem);font-weight:100;line-height:1}.section-2 .titles .title small{margin-top:.7rem;font-size:clamp(12px,.9vw,15px)}.section-2 .titles .title:hover{opacity:1}main:has(.section-2 .title:hover) #canvas-elem:after{opacity:0}.images{width:100%;height:100%;position:fixed;top:0;left:0}.images img{object-fit:cover;opacity:0;width:100%;height:100%;position:absolute;top:0;left:0}main:has(.section-2 .title[img-title=tommorwland]:hover) .images #tommorwland{opacity:1}main:has(.section-2 .title[img-title=navy]:hover) .images #navy{opacity:1}main:has(.section-2 .title[img-title=msi]:hover) .images #msi{opacity:1}main:has(.section-2 .title[img-title=phone]:hover) .images #phone{opacity:1}main:has(.section-2 .title[img-title=kikk]:hover) .images #kikk{opacity:1;background-color:#2b2bb0a4}main:has(.section-2 .title[img-title=kennedy]:hover) .images #kennedy{opacity:1}main:has(.section-2 .title[img-title=opera]:hover) .images #opera{opacity:1;background-color:#71101052}.section-3{z-index:-1;padding-block:clamp(4rem,8vw,10rem);padding-inline:clamp(2rem,8vw,12rem);position:absolute}.section-3 .top{display:flex}.section-3 .top .left,.section-3 .top .right{width:50%}.section-3 .top .left{text-align:left;font-size:1.5rem}.section-3 .top .left .left h3{width:20vw}.section-3 .bottom{gap:clamp(2rem,10vw,10rem);display:flex}.section-3 .bottom .left,.section-3 .bottom .right{width:50%}.section-3 .bottom .right{width:100%;padding-block:4rem;padding-inline:2rem}.section-3 .bottom .right p{opacity:.7;width:100%;max-width:500px;font-size:clamp(.9rem,1vw,1rem);line-height:1.7}@media (width<=1200px){.middle .left h1{width:80%}.section-3{padding-inline:5rem}.section-3 .bottom{gap:5rem}}@media (width<=992px){.bottom,.middle,.section-3 .top,.section-3 .bottom{flex-direction:column}.bottom-left,.bottom-right,.middle .left,.middle .right,.section-3 .left,.section-3 .right{width:100%}.section-3{padding-inline:2rem}.section-2 .title{gap:2rem}.section-2 .title h3{font-size:clamp(2rem,7vw,3.5rem)}}@media (width<=768px){.section-1 nav{padding:1.5rem}.section-2 .titles{padding-left:2rem}.firstline1,.secondline1{display:none}.middle .left h1{width:100%}.bottom-right{padding-left:0}}