first

resources/css/sass/section/_sponsors.scss

@@ -0,0 +1,169 @@
+
+/*==========================================================================
+* 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;
+		}
+	}
+}