ÿØÿÛC  ÿØÿÛC  @import "../scss/variable.scss"; .cause-image { width: 100%; height: 460px; overflow: hidden; } .cause-tab { .nav { .nav-item { .nav-link { color: $gray; position: relative; display: block; width: 180px; padding: 15px; border-radius: 0; @media (max-width: 991px) { width: 140px; } &::after { content: ""; position: absolute; bottom: 0; width: auto; height: 3px; color: $primary; background-color: $primary; left: 0; right: 0; display: none; } } .nav-link.active { color: $primary !important; background-color: transparent !important; &::after { display: block; } } } } } .gallery { .img-box { width: 100%; height: 100px; overflow: hidden; .img-timg { width: 100%; height: 100%; object-fit: cover; &:hover { cursor: pointer; } } } .modal { display: none; position: fixed; z-index: 999; top: 0; left: 0; padding: 5rem 1rem; width: 100%; height: 100%; overflow: auto; background: rgba(0, 0, 0, 0.9); .close, .previous, .next { position: absolute; color: $white; opacity: 0.7; user-select: none; &:hover { cursor: pointer; opacity: 1; transition: 200ms ease-in; } } .close { font-size: 3rem; font-weight: bold; top: 10px; right: 2rem; @media (max-width: 575px) { font-size: 36px; } } .previous, .next { font-size: 4rem; top: 45%; z-index: 2; } .previous { left: 2rem; } .next { right: 2rem; } .modal-content { margin: auto; display: block; height: auto; width: 60%; border-radius: 0.5rem; object-fit: cover; @media (max-width: 991px) { width: 80%; } @media (max-width: 575px) { width: 100%; height: 340px; } } } } .counter-section { ul { li{ width: 70px; max-width:70px; height: 70px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background-color: $primary; border-radius: 10px; @media (max-width:1199px) { margin: 0 3px; } @media (max-width:480px) { width: 60px; max-width:60px; height: 60px; } } } .progress { width:100%; height: 6px; } }