/* Brand 1 ---------------------------------- */ .brand-sec1 { background-color: $smoke-color; position: relative; overflow: hidden; .brand-title-area { position: absolute; top: 0; left: 0; background-color: $theme-color; } } .brand-title-area { background-color: $theme-color; } .brand-sec2 { .title-area2 { padding: 40px 50px; } } #brandSlide1 { margin-left: 300px; } @media (min-width: 2350px) { #brandSlide1 { margin-left: 0px; } } .brand-box { padding: 54px 0; text-align: center; filter: grayscale(1); transition: 0.4s ease-in-out; &:hover { filter: none; } } @include xxl { #brandSlide1 { margin-left: 430px; } } @include lg { #brandSlide1 { margin-left: 360px; } .brand-box { padding: 46px 0; } } @include md { .brand-sec2 .title-area2 { text-align: center; .title { max-width: 100%; } } } @include sm { .brand-sec1 .brand-title-area { position: relative; } #brandSlide1 { margin-left: 0; } } @include vxs { .brand-sec2 .title-area2 { padding: 40px 20px; } } /* Brand 3 ---------------------------------- */ .brand-sec3 { background-color: $title-color; padding-top: 60px; } .brand-title { &-border { position: relative; z-index: 2; &:before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #2A2F3C; z-index: -1; } } text-align: center; margin: -0.3em auto; font-weight: 600; position: relative; z-index: 2; max-width: fit-content; padding: 0 20px; background-color: $title-color; } @include lg { .brand-sec3 { padding-top: 46px; } }