//growth-path-item z .growth-path-item { .boxes { max-width: 342px; @include breakpoint(max-md) { margin: 0 auto; } } } //growth-path-item z //audit-section .audit-section { background: url(../../assets/img/services/audit.png) no-repeat center center; background-size: cover; padding: 160px 0; background-attachment: fixed; @include breakpoint(max-xl) { padding: 120px 0; } @include breakpoint(max-lg) { padding: 100px 0; } @include breakpoint(max-md) { padding: 80px 0; } } //audit-section //Network section .netwrok-items { .content { span { font-size: 60px; font-weight: 700; color: $black; } } &:hover { border-top: 1px solid $p1-clr !important; .content { span { color: $p1-clr; } } } @include breakpoint(max-xl) { .content { span { font-size: 40px; } } } } //Network section //custom-images-wrapper .custom-images-wrapper { .accordion { display: flex; gap: 44px; .accordion-item { width: 25%; height: 420px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; position: relative; img { width: 100%; height: 100%; object-fit: cover; } transition: all 0.5s; .conte-box { background: $white; border-radius: 12px; padding: 36px 26px 36px 36px; position: absolute; bottom: 26px; left: 50px; transition: all 0.5s; width: 0; opacity: 0; .serial-inner { margin-left: -60px; } .serial { width: 40px; height: 40px; min-width: 40px; background: linear-gradient(135deg, #5135ff 0%, #ff5455 100%); border-radius: 6px; color: $white; } .box { max-width: 290px; } } &.active { width: 100%; .conte-box { opacity: 1; width: initial; } } &:hover { cursor: pointer; } } @media screen and (max-width: 1600px) { gap: 20px; .accordion-item { width: 25%; height: 420px; .conte-box { border-radius: 12px; padding: 22px 16px 22px 24px; position: absolute; bottom: 26px; left: 26px; .serial-inner { margin-left: -0px; } .serial { width: 34px; height: 34px; min-width: 34px; } .box { max-width: 290px; } } &.active { width: 100%; } } } @media screen and (max-width: 1199px) { gap: 16px; .accordion-item { width: 25%; height: 420px; .conte-box { border-radius: 12px; padding: 18px 12px 18px 18px; position: absolute; bottom: 18px; left: 18px; .serial { width: 32px; height: 32px; min-width: 32px; } } &.active { width: 100%; } } } @include breakpoint(max-md) { flex-wrap: wrap; .accordion-item { width: 100%; height: 350px; .conte-box { left: 10px; bottom: 10px; margin: 10px; } } } } } //custom-images-wrapper //work-learn-item .work-learn-item { .thumb-author { position: relative; width: 190px; height: 190px; border-radius: 50%; background: #dbe3f5; margin: 0 auto; transition: all 0.4s; .serial { width: 55px; height: 55px; background: #dbe3f5; font-size: 20px; font-weight: 500; color: $black; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: all 0.4s; } &::before { position: absolute; right: -28px; top: 50%; transform: translateY(-50%); content: ""; width: 30px; height: 30px; clip-path: polygon(100% 48%, 0 0, 0 100%); background: #dbe3f5; transition: all 0.4s; } } &:hover { .thumb-author { background: $p1-clr; .serial { background: $p1-clr; font-size: 20px; color: $white; } &::before { background: $p1-clr; } } } } //work-learn-item