/*========================================================================== * Award CSS ==========================================================================*/ .award__area { background: var(--color-2); &-content { display: flex; p { max-width: 480px; margin-bottom: 0; } } &-left { height: 450px; position: relative; &-image { position: absolute; left: 0; top: 0; opacity: 0; transition: 0.4s; height: 100%; width: 100%; img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; transform: scale(0.8) rotate(-10deg); } &.active { opacity: 1; img { transform: scale(1) rotate(0); } } } } &-list-item { border-bottom: 1px solid var(--border-color-2); padding: 40px 0px 40px 0px; position: relative; &::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: var(--primary-color-1); transition: 0.8s; } &-content { display: flex; justify-content: space-between; flex-wrap: wrap; h4 { &:nth-child(1) { width: 55%; } &:nth-child(2) { width: 33%; } &:nth-child(3) { width: 12%; text-align: right; } } } &.active { &::after { width: 100%; } } } } @media (max-width: 991px) { .award__area-content p { max-width: 100%; } .award__area-list-item-content h4 { &:nth-child(1) { width: 48%; } &:nth-child(2) { width: 35%; } &:nth-child(3) { width: 17%; } } } /*========================================================================== * Text Slider CSS ==========================================================================*/ .scroll__slider { position: relative; overflow: hidden; .text-slide { display: flex; } ul { padding: 0; margin: 0; display: flex; li { display: inline-flex; img { margin: 0 50px; } a { font-family: var(--heading-font); font-size: 80px; font-weight: 700; text-transform: uppercase; line-height: 88px; color: var(--text-heading-color); transition: 0.4s; &:hover { color: var(--primary-color-1); } } &:nth-child(even) { a { -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; } } } } } .sliders { flex-shrink: 0; } .text_scroll { animation: scroll 40s linear infinite; animation-direction: reverse !important; } @keyframes scroll { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } .brand__area { background: var(--color-2); ul li img { filter: invert(1); } } @media (max-width: 767px) { .scroll__slider ul li a { font-size: 40px; font-weight: 600; line-height: 50px; } .scroll__slider ul li img { margin: 0 30px; max-width: 40px; } .brand__area { .scroll__slider ul li img { max-width: inherit; } } }