/*** ==================================================================== Create Something ==================================================================== ***/ .create-something { position: relative; display: block; padding: 120px 0 0; z-index: 1; } .create-something__inner { position: relative; display: block; border-radius: 16px; border: 2px solid #7E65FF; background: #0F0F24; padding-left: 110px; padding-right: 22px; padding-top: 22px; padding-bottom: 6px; z-index: 1; } .create-something__star-1 { position: absolute; top: 109px; left: 604px; } .create-something__star-1 img { width: auto; } .create-something__shape-1 { position: absolute; top: 22px; left: 100px; right: 22px; bottom: 26px; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .create-something__shape-2 { position: absolute; bottom: 0; left: 158px; background: linear-gradient(103deg, #00E3F2 8.08%, #0000F2 31.54%, #F87D7D 60.38%, #FF2828 89.73%); opacity: 0.15; filter: blur(50px); width: 400px; height: 320px; transform: rotate(25deg); z-index: -1; } .create-something__shape-3 { position: absolute; top: 80px; right: 158px; background: linear-gradient(103deg, #00E3F2 8.08%, #0000F2 31.54%, #F87D7D 60.38%, #FF2828 89.73%); opacity: 0.15; filter: blur(50px); width: 400px; height: 320px; transform: rotate(25deg); z-index: -1; } .create-something__left { position: relative; display: block; margin-top: 90px; margin-right: 100px; } .create-something__content { position: relative; display: block; } .create-something__title { font-size: 40px; color: var(--thm-white); font-weight: 500; line-height: 56px; } .create-something__title span { color: var(--thm-primary); } .create-something__text { padding-top: 14px; padding-bottom: 27px; } .create-something__btn-two-box { position: relative; display: block; } .create-something__right { position: relative; display: block; margin-left: -24px; } .create-something__gallery { position: relative; display: flex; align-items: center; flex-wrap: wrap; margin: 0 -8px; border-radius: 16px; z-index: 1; } .create-something__gallery li { position: relative; display: block; padding: 0 8px; flex: 0 0 25%; max-width: 25%; width: 100%; margin-bottom: 16px; } .create-something__gallery-single { position: relative; display: block; border-radius: 14px; overflow: hidden; z-index: 1; } .create-something__gallery-single img { width: 100%; border-radius: 16px; } .create-something__gallery-single:after { content: ""; position: absolute; top: 0; bottom: -2px; left: 0; right: 0; background-color: rgba(var(--thm-black-rgb), .50); opacity: 0; visibility: hidden; -webkit-transform-origin: top center; transform-origin: top center; -webkit-transform: scaleY(0) translateZ(100px); transform: scaleY(0) translateZ(100px); -webkit-transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease; z-index: 2; } .create-something__gallery-single:hover:after { opacity: .90; visibility: visible; -webkit-transform: scaleY(1) translateZ(0px); transform: scaleY(1) translateZ(0px); } .create-something__gallery-single:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 0; background: linear-gradient(180deg, rgba(23, 24, 37, 0.46) 0%, rgba(23, 24, 37, 0.94) 96.49%); z-index: 1; } .create-something__gallery-icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 5; } .create-something__gallery-icon a { height: 50px; width: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--thm-white); -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 2; } .create-something__gallery-single:hover .create-something__gallery-icon a { -webkit-transform: scale(1); transform: scale(1); transition-delay: 500ms; opacity: 1; } .create-something__gallery-icon a:hover { color: var(--thm-base); } /* End */