ÿØÿÛC  ÿØÿÛC  @import "../scss/variable.scss"; h1, .fs-1 { font-size: 48px !important; @media (max-width: 991px) { font-size: 40px !important; } @media (max-width: 575px) { font-size: 36px !important; } } h2, .fs-2 { font-size: 40px !important; @media (max-width: 767px) { font-size: 32px !important; } @media (max-width: 480px) { font-size: 26px !important; } } h3 { font-size: 22px; } .fs-16 { font-size: 16px !important; line-height: 29px !important; } .fs-18 { font-size: 18px; } .fs-14 { font-size: 14px; } .fs-26 { font-size: 26px; line-height: 34px; } .fs-20 { font-size: 20px; } .fw-5 { font-weight: 500; } .fw-6 { font-weight: 600; } .bg-gray { background-color: $gray-100; } .bg-primary { background-color: $primary; } .text-gray { color: $gray; } .text-dark { color: $black; } .rounded-10 { border-radius: 10px; } .rounded-20 { border-radius: 20px; } li { list-style: none; } a { text-decoration: none; } .btn { font-size: 14px; font-weight: 500; padding: 12px 25px; border-radius: $border-radius; box-shadow: none !important; } .btn-primary { color: $white; &:hover, &:focus, &:active { color: $white; } } .btn-gray { background-color: $gray-200; color: $black; transition: all 0.3s ease-in-out; &:hover, &:focus, &:active { color: $gray-200; background-color: $black; } } .badge { font-weight: 400; padding: 5px 20px; height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 14px; } .small-btn { position: absolute; top: 20px; left: 30px; background-color: $primary; color: $white; transition: all 0.3s ease-in-out; &:hover { background-color: $gray-200; color: $black; } } .object-fit-cover { object-fit: cover; } .object-fit-contain { object-fit: contain; } .pt-100 { padding-top: 100px; @media (max-width: 991px) { padding-top: 50px; } } .pt-60 { padding-top: 60px; @media (max-width: 991px) { padding-top: 40px; } } .pb-20 { padding-bottom: 20px } .pt-30 { padding-top: 30px; } .mt-15 { margin-top: 15px } .mb-20 { margin-bottom: 20px } .pb-100 { padding-bottom: 100px; @media (max-width: 991px) { padding-bottom: 50px; } } .p-30 { padding: 30px; @media (max-width: 480px) { padding: 20px; } } .py-60 { padding-top: 60px; padding-bottom: 60px; @media (max-width: 991px) { padding-top: 40px; padding-bottom: 40px; } @media (max-width: 480px) { padding-top: 25px; padding-bottom: 25px; } } .px-60 { padding-left: 60px; padding-right: 60px; @media (max-width: 991px) { padding-left: 40px; padding-right: 40px; } @media (max-width: 480px) { padding-left: 25px; padding-right: 25px; } } .mb-60 { margin-bottom: 60px; @media (max-width: 991px) { margin-bottom: 40px; } } .mt-40 { margin-top: 40px; @media (max-width: 991px) { margin-top: 30px; } } .mb-40 { margin-bottom: 40px; @media (max-width: 991px) { margin-bottom: 30px; } } .carousel-control-prev, .carousel-control-next { width: 10%; @media (max-width: 1499px) { width: 5%; } } .accordion { padding: 0 30px; background-color: $gray-100; border-radius: 20px; .accordion-item { background-color: $gray-100; border: 0; border-bottom: 1px solid $gray-200; &:last-child { border-bottom: 0; } } .accordion-button { background-color: $gray-100; line-height: 29px; padding-top: 20px; padding-bottom: 20px; &::after { content: none; } } .accordion-button:not(.collapsed) { background-color: transparent; box-shadow: none; } .accordion-body { color: $gray; font-weight: 300; line-height: 25.2px; } } .inner-bgimg { width: 100%; background-position: right !important; background-size: contain; background-repeat: no-repeat !important; padding-top: 180px; padding-bottom: 100px; @media (max-width: 767px) { padding-top: 140px; padding-bottom: 70px; background-size: cover !important; } &::before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba($black, 0.6); top: 0; bottom: 0; right: 0; left: 0; } .breadcrumb-nav { z-index: 2; } .breadcrumb-item + .breadcrumb-item::before { color: $white; } .parallelogram-shape { &::before { @media (min-width: 768px) { content: ""; position: absolute; top: 0; left: -200px; bottom: 0; background: $black; -webkit-transform: skew(30deg); transform: skew(30deg); width: 55%; } @media (max-width: 1399px) and (min-width: 992px) { width: 60%; } @media (max-width: 991px) and (min-width: 768px) { width: 80%; } } } } .card { height: 100%; border-color: $gray-200; transition: all 0.3s ease-in-out; &:hover { box-shadow: $box-shadow; } .card-title { color: $black; } .card-img { height: 220px; overflow: hidden; border-bottom-left-radius: 0; border-bottom-right-radius: 0; img { width: auto; min-width: 100%; min-height: 100%; } } .card-body { padding: 20px 30px; @media (max-width: 767px) { padding: 20px 24px; } } } .video-play-btn { width: 80px; height: 80px; background: #ffff; border-radius: 15px; animation: playVideo infinite 3s; display: flex; align-items: center; justify-content: center; position: relative; z-index: 0; outline: none; .play-video { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; text-decoration: none; border-radius: 15px; outline: none; } } @keyframes playVideo { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); } 40% { -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } 80% { -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .paragrph { font-size: 14px; color: $gray; font-weight: 300; } .trending-causes-section { .trending-card { margin-bottom: 20px; .dropdown { position: absolute; top: 20px; right: 30px; .dropdown-toggle { &:after { display: none; } } .share-btn { width: 35px; height: 35px; background-color: $black; display: flex; border-radius: 5px; align-items: center; justify-content: center; top: 20px; right: 30px; border: 0; } } .dropdown-menu { min-width: 12rem; border: none; box-shadow: $box-shadow; inset: 0px 0px auto auto !important; right: 0 !important; .share-icon { width: 22px; height: 22px; } } .count-num { color: $black; font-size: 14px; font-weight: 500; } .count-num2 { position: relative; &::before { position: absolute; content: ""; top: 0; left: -30px; height: 25px; width: 1px; background: $primary; display: inline-block; margin: auto; } } } } .companies-logo-section { .company-logo { width: 160px !important; height: 40px; } } .pagination { .page-item { .page-link { color: #757e81; padding: 6px 14px; margin: 2px; border: 0; box-shadow: none; &:hover { background-color: transparent; } &:focus { color: $white !important; background-color: $primary; border-radius: $border-radius; } } .active { color: $white !important; //background-color: $primary; border-radius: $border-radius; &:hover { color: $white !important; background-color: $primary; border-radius: $border-radius; } } } } .offcanvas-toggle { .navbar-toggler-icon { width: 30px; height: 30px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .content { border-bottom: 0 !important; } } .offcanvas { padding: 20px; background-color: $white; height: 100vh !important; width: 320px; position: fixed; z-index: 9999; top: 0; right: 0; overflow-x: hidden; visibility: hidden; border: 0; .btn-close { -webkit-box-sizing: content-box; box-sizing: content-box; width: 5px; font-size: 10px; height: 5px; border: 1px solid $black; padding: 8px; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23001D24'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border-radius: 50px; opacity: 1; box-shadow: none; } .offcanvas-body { .nav-item .active { color: $white; background-color: $black; } .set { position: relative; width: 100%; height: auto; background-color: $white; .active { color: white; background-color: #001d24; } a i { font-size: 14px; float: right; padding-right: 15px; margin-top: -30px; color: $black; } .content { background-color: #fff; display: none; li { text-decoration: none; border-bottom: 1px solid $gray-200; a { display: block; padding: 10px 30px; color: $black; &:hover { color: $primary; } } .active, &:hover { color: $white; background-color: $black; a { color: $white; } } } } } .nav-link { padding: 12px 15px; color: $black; border-bottom: 1px solid $gray-200; &:hover { color: $primary; } } } .fa-minus:before { color: #ffffff; } .fa-plus:before { color: #009e74; } } .offcanvas-backdrop.show { .offcanvas-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: $black; opacity: 0.5; } } .our-team-section { .our-team-block { @media (min-width: 480px) and (max-width: 575px) { width: 50%; } } .card { box-shadow: none; //@media (max-width: 991px) { // margin-bottom: 25px; //} .card-image { height: 250px; overflow: hidden; padding: 0 20px; z-index: 0; img { min-width: 100%; width: auto; min-height: 100%; border-radius: 20px; } } .card-body { border: 1px solid $gray-200; border-radius: 20px; padding: 120px 20px 20px; margin-top: -100px; transition: all 0.3s linear; &:hover { box-shadow: $box-shadow; } } } } .social-media { .icon { width: 40px; height: 40px; min-width: 40px; background-color: $secondary; @media (max-width: 375px) { margin-bottom: 10px; } &:hover { background-color: $primary; } i { color: $white; } } } .news-right-section { .rectangle-shape { height: 12px; background-color: $primary; display: block; width: 100px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; position: absolute; right: 0; @media (max-width: 480px) { width: 80px; } } .search-object { input { padding: 12px 20px; border: 1px solid $gray-200; border-top-left-radius: 10px; border-bottom-left-radius: 10px; outline: 0; } .search-icon { min-width: 50px; width: 50px; height: 50px; background-color: $secondary; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } } .about-section { .about-post { min-width: 60px; width: 60px; height: 60px; border-radius: 50px; } } .popular-feeds { .feeds-post { min-width: 90px; width: 90px; height: 90px; } } .categories-section { .categories { padding: 10px 7px 10px 7px; &:focus, &:hover { span { color: $primary !important; } } span { color: #757e81; } button { width: 40px; height: 40px; min-width: 40px; border-radius: 5px; background-color: $gray-200; } } } .popular-tags { padding: 30px 30px 10px 30px; @media (max-width: 480px) { padding: 20px 20px 5px 20px; } .tags { .tag { padding: 8px 25px; border: 1px solid $gray-200; border-radius: 5px; background-color: $white; a { color: $gray; } &:hover, .active { background-color: $primary; a { color: $white !important; } } } } } }