/*---------------------- About -----------------------*/ .about-img { position: relative; img { border-radius: 5px; } } .about-badge { display: flex; align-items: center; justify-content: center; position: relative; width: 120px; height: 120px; &:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; animation: spinner 10s infinite; background: url(../images/text-badge.png) no-repeat; } .about-icon { display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; font-size: 42px; color: $color-white; background-color: $color-secondary; } } .about-layout1 { .about-badge { position: absolute; top: -60px; right: 60px; } .about-Text { padding: 170px 0 0 70px; p { font-size: 16px; color: $color-heading; &:first-of-type { position: relative; font-weight: 600; } } } .btn-xl { min-width: 230px; } } .about-layout2 { .about-img { padding-right: 40px; } .about-text { position: absolute; top: 0; z-index: 2; } .about-text-banner { position: relative; width: 470px; /*height: 400px;*/ height:130px; padding-right: 40px; display: flex; align-items: center; &:before, &:after { content: ''; position: absolute; top: 0; bottom: 0; z-index: -1; background-color: $color-white; } &:before { left: 0; width: calc(100% - 140px); } &:after { right: 0; width: 141px; clip-path: url(#path-direction-right); } } .about-Text p { font-size: 16px; padding:10px; } .author-img { display: flex; align-items: center; justify-content: center; padding: 5px; width: 68px; height: 68px; border-radius: 50%; border: 2px solid #dfdfea; margin-right: 20px; img { border-radius: 50%; } } .author-title { font-size: 19px; margin-bottom: 0; } .author-desc { font-size: 14px; } .author-singnture { margin-left: 30px; } } @media (max-width:1199px) { .about-layout1 { .about-img { margin-top: 70px; } .about-Text { padding: 30px 0 0 0; } } } /* Extra Small Devices */ @include xs-screens { .about-layout2 { .about-img { padding-right: 0; } .about-text-banner { display: none; } } }