/* DIA BD base theme: layout and component styles for diabd.org. */ :root { --dia-font: "Manrope", sans-serif; --dia-font2: "Roboto", sans-serif; --dia-heading-font: "Geologica", sans-serif; --dia-text: #5E6B66; --dia-text-rgb: 94, 107, 102; --dia-text-dark: #3F4C47; --dia-text-dark-rgb: 63, 76, 71; --dia-text-gray: #4A5752; --dia-text-gray-rgb: 74, 87, 82; --dia-base: #1B7A5A; --dia-base-rgb: 27, 122, 90; --dia-primary: #F4B942; --dia-primary-rgb: 244, 185, 66; --dia-yellow: #F4B942; --dia-yellow-rgb: 244, 185, 66; --dia-yellow2: #FFF8E6; --dia-yellow2-rgb: 255, 248, 230; --dia-orange: #D99A1F; --dia-orange-rgb: 217, 154, 31; --dia-soft-blue: #FCE9C2; --dia-soft-blue-rgb: 252, 233, 194; --dia-soft-lavender: #E3F2EC; --dia-soft-lavender-rgb: 227, 242, 236; --dia-soft-lavender2: #DDF1E8; --dia-soft-lavender2-rgb: 221, 241, 232; --dia-gray: #4E5A55; --dia-gray-rgb: 78, 90, 85; --dia-gray2: #DCE6E1; --dia-gray2-rgb: 220, 230, 225; --dia-gray3: #D9E6DF; --dia-gray3-rgb: 217, 230, 223; --dia-gray4: #4E5A55; --dia-gray4-rgb: 78, 90, 85; --dia-gray5: #D5E2DB; --dia-gray5-rgb: 213, 226, 219; --dia-gray6: #D9E3DE; --dia-gray6-rgb: 217, 227, 222; --dia-gray7: #DCE3DF; --dia-gray7-rgb: 220, 227, 223; --dia-gray8: #F3EBDD; --dia-gray8-rgb: 243, 235, 221; --dia-gray9: #BFD3C9; --dia-gray9-rgb: 191, 211, 201; --dia-gray10: #D3DED8; --dia-gray10-rgb: 211, 222, 216; --dia-gray11: #E4EAE7; --dia-gray11-rgb: 228, 234, 231; --dia-gray12: #C5D6CD; --dia-gray12-rgb: 197, 214, 205; --dia-gray13: #DCE2DE; --dia-gray13-rgb: 220, 226, 222; --dia-gray14: #FDF3DC; --dia-gray14-rgb: 253, 243, 220; --dia-white: #FFFFFF; --dia-white-rgb: 255, 255, 255; --dia-white2: #E8F4EE; --dia-white2-rgb: 232, 244, 238; --dia-white3: #F4FAF7; --dia-white3-rgb: 244, 250, 247; --dia-white4: #EAF5EF; --dia-white4-rgb: 234, 245, 239; --dia-white5: #E6F5EE; --dia-white5-rgb: 230, 245, 238; --dia-white6: #F2F8F4; --dia-white6-rgb: 242, 248, 244; --dia-white7: #F3F6F4; --dia-white7-rgb: 243, 246, 244; --dia-white8: #F2F9F5; --dia-white8-rgb: 242, 249, 245; --dia-white9: #F1F4F2; --dia-white9-rgb: 241, 244, 242; --dia-white10: #F2F4F3; --dia-white10-rgb: 242, 244, 243; --dia-white11: #DDE3E0; --dia-white11-rgb: 221, 227, 224; --dia-white12: #EFF8F3; --dia-white12-rgb: 239, 248, 243; --dia-white13: #F4F2EE; --dia-white13-rgb: 244, 242, 238; --dia-white14: #EEF7F2; --dia-white14-rgb: 238, 247, 242; --dia-white15: #E9F1ED; --dia-white15-rgb: 233, 241, 237; --dia-white16: #DCE6E1; --dia-white16-rgb: 220, 230, 225; --dia-white17: #DFF2E8; --dia-white17-rgb: 223, 242, 232; --dia-white18: #EAF6F0; --dia-white18-rgb: 234, 246, 240; --dia-white19: #DCE3DF; --dia-white19-rgb: 220, 227, 223; --dia-white20: #EEF6F2; --dia-white20-rgb: 238, 246, 242; --dia-white21: #F2F4F3; --dia-white21-rgb: 242, 244, 243; --dia-white22: #F1F8F4; --dia-white22-rgb: 241, 248, 244; --dia-white23: #F3F8F5; --dia-white23-rgb: 243, 248, 245; --dia-white24: #F7FBF9; --dia-white24-rgb: 247, 251, 249; --dia-white25: #EBF2EE; --dia-white25-rgb: 235, 242, 238; --dia-white26: #EAF5EF; --dia-white26-rgb: 234, 245, 239; --dia-white27: #F8FCFA; --dia-white27-rgb: 248, 252, 250; --dia-white28: #F6FAF8; --dia-white28-rgb: 246, 250, 248; --dia-black: #14352B; --dia-black-rgb: 20, 53, 43; --dia-black2: #0F2A22; --dia-black2-rgb: 15, 42, 34; --dia-black3: #14352B; --dia-black3-rgb: 20, 53, 43; --dia-black4: #0F2A22; --dia-black4-rgb: 15, 42, 34; --dia-black5: #000000; --dia-black5-rgb: 0, 0, 0; --dia-black6: #0F2A22; --dia-black6-rgb: 15, 42, 34; --dia-border-color: #DCE6E1; --dia-border-color-rgb: 220, 230, 225; --section-space: 130px; } body { font-family: var(--dia-font, "Manrope", sans-serif); color: var(--dia-text, #5E6B66); font-size: 18px; font-weight: 400; line-height: 1.777; } body.locked { overflow: hidden; } a { color: var(--dia-base, #1B7A5A); transition: all 400ms ease; } a, a:hover, a:focus, a:visited { text-decoration: none; } ::placeholder { color: inherit; opacity: 1; } h1, h2, h3, h4, h5, h6 { font-family: var(--dia-heading-font, "Geologica", sans-serif); color: var(--dia-black, #14352B); } @media (max-width: 575px) { h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { display: none; } } @media (max-width: 575px) { p br { display: none; } } .page-wrapper { position: relative; margin: 0 auto; width: 100%; min-width: 300px; overflow: hidden; } .section-space { padding-top: var(--section-space, 130px); padding-bottom: var(--section-space, 130px); } @media (max-width: 767px) { .section-space { padding-top: 100px; padding-bottom: 100px; } } @media (max-width: 575px) { .section-space { padding-top: 80px; padding-bottom: 80px; } } .section-space-top { padding-top: var(--section-space, 130px); } @media (max-width: 767px) { .section-space-top { padding-top: 100px; } } @media (max-width: 575px) { .section-space-top { padding-top: 80px; } } .section-space-bottom { padding-bottom: var(--section-space, 130px); } @media (max-width: 767px) { .section-space-bottom { padding-bottom: 100px; } } @media (max-width: 575px) { .section-space-bottom { padding-bottom: 80px; } } .container-fluid, .container { padding-left: 15px; padding-right: 15px; } @media (min-width: 1200px) { .container { max-width: 1200px; } } .row { --bs-gutter-x: 30px; } .gutter-y-30 { --bs-gutter-y: 30px; } .gutter-y-40 { --bs-gutter-y: 40px; } .gutter-y-50 { --bs-gutter-y: 50px; } .logo-retina img { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; -webkit-backface-visibility: hidden; backface-visibility: hidden; -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); } .dia-btn { --tilt: 40px; display: inline-block; vertical-align: middle; -webkit-appearance: none; border: none; outline: none !important; position: relative; z-index: 1; overflow: hidden; background-color: var(--dia-base, #1B7A5A); font-family: var(--dia-heading-font, "Geologica", sans-serif); padding: 13.3px 40px; color: var(--dia-white, #FFFFFF); font-size: 16px; font-weight: 500; text-align: center; text-transform: capitalize; border-radius: 30px; transition: all 500ms ease; } .dia-btn span { position: relative; z-index: 1; } .dia-btn::before, .dia-btn::after { content: ""; width: calc(100% + var(--tilt)); height: 100%; position: absolute; top: 0; left: calc(-100% - var(--tilt)); background-color: var(--dia-primary, #F4B942); z-index: -1; clip-path: polygon(0 0, calc(100% - var(--tilt)) 0, 100% 50%, calc(100% - var(--tilt)) 100%, 0 100%); transition: transform 0.6s; } .dia-btn::before { left: calc(-100% - var(--tilt)); } .dia-btn::after { left: 100%; transform: rotate(180deg); } .dia-btn:hover::before { transform: translateX(100%); } .dia-btn:hover::after { transform: rotate(180deg) translateX(100%); } .dia-btn:hover { color: var(--dia-black, #14352B); } .dia-btn--primary { color: var(--dia-black, #14352B); background-color: var(--dia-primary, #F4B942); } .dia-btn--primary::before, .dia-btn--primary::after { background-color: var(--dia-base, #1B7A5A); } .dia-btn--primary:hover { color: var(--dia-white, #FFFFFF); } .dia-btn--white { color: var(--dia-black, #14352B); background-color: var(--dia-white, #FFFFFF); } .dia-btn--white::before, .dia-btn--white::after { background-color: var(--dia-base, #1B7A5A); } .dia-btn--white:hover { color: var(--dia-white, #FFFFFF); } .sec-title--center { margin-bottom: 46px; text-align: center; } .sec-title--center .sec-title__top { justify-content: center; } .sec-title__shape { max-width: 100%; height: auto; } .sec-title__top { margin-bottom: 21px; padding: 4px 7px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--dia-gray6, #D9E3DE); } .sec-title__tagline { margin: 0; font-family: var(--dia-font, "Manrope", sans-serif); font-size: 16px; color: var(--dia-base, #1B7A5A); font-weight: 600; line-height: 1.25; } .sec-title__title { margin: 0; font-size: 60px; font-weight: 600; line-height: 1.161; } @media (max-width: 1199px) { .sec-title__title { font-size: 50px; } } @media (max-width: 767px) { .sec-title__title { font-size: 45px; } } @media (max-width: 575px) { .sec-title__title { font-size: 40px; } } @media (max-width: 430px) { .sec-title__title { font-size: 35px; } } .total-fund { display: inline-block; padding: 20.5px 44px 28.5px; background-color: var(--dia-gray14, #FDF3DC); border-radius: 100px; border: 1px solid var(--dia-black5, #000000); } @media (max-width: 1599px) { .total-fund { padding: 12px 44px 20px; } } .total-fund__title { margin-bottom: 8px; font-family: var(--dia-font, "Manrope", sans-serif); font-size: 24px; font-weight: 600; color: var(--dia-black5, #000000); text-transform: capitalize; line-height: 1.75; } @media (max-width: 1599px) { .total-fund__title { font-size: 19px; } } @media (max-width: 430px) { .total-fund__title { font-size: 18px; } } .total-fund__text { margin: 0; font-weight: 600; font-size: 64px; color: var(--dia-black5, #000000); line-height: 1; } @media (max-width: 1599px) { .total-fund__text { font-size: 35px; } } @media (max-width: 430px) { .total-fund__text { font-size: 30px; } } .preloader { position: fixed; background-color: var(--dia-black4, #0F2A22); background-position: center center; background-repeat: no-repeat; top: 0; left: 0; right: 0; bottom: 0; z-index: 9991; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: center; } .preloader__image { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-repeat: no-repeat; background-position: center center; background-size: 60px auto; width: 100%; height: 100%; } .scroll-top { position: fixed; right: 30px; bottom: 30px; height: 50px; width: 50px; cursor: pointer; display: block; border-radius: 50%; background-color: var(--dia-black, #14352B); z-index: 99; opacity: 0; padding: 6px; visibility: hidden; transform: translateY(15px); -webkit-transition: all 200ms linear; transition: all 200ms linear; } .scroll-top--active { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top::after { content: "\f30c"; font-family: "Font Awesome 5 Free"; font-size: 18px; color: var(--dia-primary, #F4B942); text-align: center; font-weight: 900; line-height: 50px; -moz-osx-font-smoothing: textscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .scroll-top__circle path { stroke: var(--dia-primary, #F4B942); stroke-width: 4; fill: none; box-sizing: border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .dia-owl__carousel--basic-nav.owl-carousel .owl-nav { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 60px; } .dia-owl__carousel--basic-nav.owl-carousel .owl-nav button { border: none; outline: none; margin: 0; padding: 0; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; font-size: 16px; color: var(--dia-black, #14352B); background-color: var(--dia-white10, #F2F4F3); border-radius: 50%; transition: all 400ms ease; } .dia-owl__carousel--basic-nav.owl-carousel .owl-nav button svg { width: 1em; height: 1em; fill: currentColor; } .dia-owl__carousel--basic-nav.owl-carousel .owl-nav button:hover { color: var(--dia-white, #FFFFFF); background-color: var(--dia-base, #1B7A5A); } .dia-owl__carousel--basic-nav.owl-carousel .owl-nav button span { border: none; outline: none; color: inherit; } .dia-owl__carousel--basic-nav.owl-carousel .owl-dots { display: flex; align-items: center; justify-content: center; gap: 10px; } .dia-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot { outline: 0; border: 0; position: relative; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--dia-black5, #000000); transition: all 400ms ease; } .dia-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot span { background-color: transparent; } .dia-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot:hover, .dia-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot.active { background-color: var(--dia-black5, #000000); } .dia-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot:hover span, .dia-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot.active span { background-color: transparent; } .dia-owl__carousel--basic-nav.owl-carousel .owl-nav.disabled + .owl-dots { margin-top: 60px; } .dia-owl__carousel--basic-nav.owl-carousel .owl-dots.disabled, .dia-owl__carousel--basic-nav.owl-carousel .owl-nav.disabled { display: none; } .custom-cursor__cursor { width: 25px; height: 25px; border-radius: 100%; border: 1px solid var(--dia-base, #1B7A5A); -webkit-transition: all 200ms ease-out; transition: all 200ms ease-out; position: fixed; pointer-events: none; left: 0; top: 0; -webkit-transform: translate(calc(-50% + 5px), -50%); transform: translate(calc(-50% + 5px), -50%); z-index: 999991; } .custom-cursor__cursor-two { width: 10px; height: 10px; border-radius: 100%; background-color: var(--dia-base, #1B7A5A); opacity: 0.3; position: fixed; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; -webkit-transition: width 0.3s, height 0.3s, opacity 0.3s; transition: width 0.3s, height 0.3s, opacity 0.3s; z-index: 999991; } .custom-cursor__hover { background-color: var(--dia-base, #1B7A5A); opacity: 0.4; } .custom-cursor__innerhover { width: 25px; height: 25px; opacity: 0.4; } @keyframes bubbleMover { 0% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); } 30% { -webkit-transform: translateY(30px) translateX(50px) rotate(15deg); transform: translateY(30px) translateX(50px) rotate(15deg); -webkit-transform-origin: center center; transform-origin: center center; } 50% { -webkit-transform: translateY(50px) translateX(100px) rotate(45deg); transform: translateY(50px) translateX(100px) rotate(45deg); -webkit-transform-origin: right bottom; transform-origin: right bottom; } 80% { -webkit-transform: translateY(30px) translateX(50px) rotate(15deg); transform: translateY(30px) translateX(50px) rotate(15deg); -webkit-transform-origin: left top; transform-origin: left top; } 100% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); -webkit-transform-origin: center center; transform-origin: center center; } } @keyframes shapeMover { 0%, 100% { transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0); } 50% { transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px); } } @keyframes banner3Shake { 0% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } 30% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 60% { -webkit-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } } @keyframes squareMover { 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20%, 60% { -webkit-transform: translate(20px, 40px) rotate(180deg); transform: translate(20px, 40px) rotate(180deg); } 30%, 80% { -webkit-transform: translate(40px, 60px) rotate(0deg); transform: translate(40px, 60px) rotate(0deg); } } @keyframes treeMove { 0%, 100% { -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); } 25%, 75% { -webkit-transform: rotate(5deg) translateX(15px); transform: rotate(5deg) translateX(15px); } 50% { -webkit-transform: rotate(10deg) translateX(30px); transform: rotate(10deg) translateX(30px); } } @keyframes leafMove { 0%, 100% { -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); } 25%, 75% { transform: rotate(-2deg) translateX(5px); } 50% { transform: rotate(-4deg) translateX(10px); } } @keyframes messageMove { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(5px); } 50% { transform: translateX(10px); } } @keyframes textRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes shapeRotate { 0% { transform: rotate(0); } 50% { transform: rotate(90deg); } 100% { transform: rotate(0); } } @keyframes flowerRotate { 0%, 100% { transform: rotate(0deg); } 25%, 75% { transform: rotate(5deg); } 50% { transform: rotate(10deg); } } @keyframes zump { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 50% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes zumpBottom { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 50% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes zoomIn { 0% { transform: scale(1.15); } 50% { transform: scale(1); } 100% { transform: scale(1.15); } } @keyframes zoomOut { 0% { transform: scale(0.8); } 50% { transform: scale(1); } 100% { transform: scale(0.8); } } @keyframes moveHorizontal { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 50% { -webkit-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes moveHorizontal2 { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 50% { -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @keyframes wobble-horizontal-hover { 16.65% { transform: translateX(5px); } 33.3% { transform: translateX(-3px); } 49.95% { transform: translateX(4px); } 66.6% { transform: translateX(-2px); } 83.25% { transform: translateX(1px); } 100% { transform: translateX(0); } } @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } } @keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @keyframes flip { from { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); } 40% { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 50px) rotate3d(0, 1, 0, -190deg); } 50% { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 50px) rotate3d(0, 1, 0, -170deg); } 80% { transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); } to { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); } } @keyframes smartMove { 0% { width: 0; } 15% { width: 100%; } 85% { opacity: 1; } 90% { width: 100%; opacity: 0; } 100% { width: 0; opacity: 0; } } @keyframes smartMove2 { 0% { width: 0; } 15% { width: 126px; } 85% { opacity: 1; } 90% { width: 126px; opacity: 0; } 100% { width: 0; opacity: 0; } } @keyframes smartMove3 { 0% { width: 0; } 15% { width: 173px; } 85% { opacity: 1; } 90% { width: 173px; opacity: 0; } 100% { width: 0; opacity: 0; } } @keyframes float-bob-y { 0% { -webkit-transform: translateY(0px) translateX(0px) rotate(0deg); transform: translateY(0px) translateX(0px) rotate(0deg); } 50% { -webkit-transform: translateY(10px) translateX(10px) rotate(5deg); transform: translateY(10px) translateX(10px) rotate(5deg); } 100% { -webkit-transform: translateY(0px) translateX(0px) rotate(0deg); transform: translateY(0px) translateX(0px) rotate(0deg); } } @keyframes rectMove { 0%, 50%, 100% { -webkit-transform: scale(1); transform: scale(1); } 25%, 75% { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes moveBackground { 0% { background-position: -1920px 100%; } 100% { background-position: 0 100%; } } @keyframes moveBackgroundY { 0% { background-position: 100% 1920px; } 100% { background-position: 100% 0; } } @keyframes slideTop { 49% { -webkit-transform: translateY(100%); transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51% { opacity: 1; } } @keyframes slideRight { 49% { -webkit-transform: translateX(100%); transform: translateX(100%); } 50% { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } 51% { opacity: 1; } } @keyframes slideLeft { 49% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 50% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 51% { opacity: 1; } } @keyframes animatedCircle { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); } 20% { transform: translate(73px, -1px) rotate(36deg) scale(0.9); } 40% { transform: translate(141px, 72px) rotate(72deg) scale(1); } 60% { transform: translate(83px, 122px) rotate(108deg) scale(1.2); } 80% { transform: translate(-40px, 72px) rotate(144deg) scale(1.1); } 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } } .donation-card { background-color: var(--dia-white, #FFFFFF); border-radius: 5px; border: 1px solid var(--dia-border-color, #DCE6E1); } .donation-card__image { position: relative; border-radius: inherit; overflow: hidden; } .donation-card__image img { width: 100%; display: block; border-radius: inherit; } .donation-card__image img:nth-child(2) { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.5); opacity: 0; z-index: 1; } .donation-card:hover img:nth-child(2) { transform: translate(-50%, -50%) scale(1); opacity: 1; transition: all 1000ms ease; } .donation-card__content { padding: 25px 30px 30px; } @media (min-width: 768px) and (max-width: 991px) { .donation-card__content { padding: 20px; } } @media (max-width: 390px) { .donation-card__content { padding: 20px; } } .donation-card__title { margin-bottom: 11px; font-size: 24px; font-weight: 500; line-height: 1.25; text-transform: capitalize; } @media (min-width: 768px) and (max-width: 991px) { .donation-card__title { font-size: 22px; } } @media (max-width: 390px) { .donation-card__title { font-size: 22px; } } .donation-card__title:hover { color: var(--dia-base, #1B7A5A); } .donation-card__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .donation-card__title a:hover { background-size: 100% 1px; } .donation-card__text { margin-bottom: 27px; font-size: 15px; line-height: 1.866; } .donation-card .dia-btn { display: block; padding: 9px 30px; border-radius: 5px; } .donations-page { background-color: var(--dia-white, #FFFFFF); } .donations-one { padding-bottom: 476px; position: relative; } @media (max-width: 767px) { .donations-one { padding-bottom: 446px; } } @media (max-width: 575px) { .donations-one { padding-bottom: 426px; } } .donations-one__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: top center; background-size: cover; } .donations-one .container { position: relative; z-index: 1; } @media (min-width: 1600px) { .donations-one .container { max-width: 1600px; } } .donations-one__carousel.owl-carousel .owl-nav button { background-color: var(--dia-white, #FFFFFF); } .blog-card { position: relative; background-color: var(--dia-white, #FFFFFF); border-radius: 10px; overflow: hidden; } .blog-card__image { display: block; position: relative; overflow: hidden; border-radius: 10px 10px 0px 0px; } .blog-card__image img { width: 100%; display: block; border-radius: inherit; transition: all 500ms ease; } .blog-card:hover .blog-card__image img { transform: rotate(3deg) scale(1.1); } .blog-card__date { display: inline-block; margin: 0; padding: 7.5px 11px; position: absolute; top: 20px; left: 20px; font-size: 15px; color: var(--dia-black, #14352B); font-weight: 600; line-height: 1; text-align: center; text-transform: uppercase; background-color: var(--dia-primary, #F4B942); border-radius: 10px; } .blog-card__content { position: relative; padding: 29px 29px 30px; z-index: 1; } @media (min-width: 992px) and (max-width: 1199px) { .blog-card__content { padding: 29px 20px 20px; } } @media (min-width: 768px) and (max-width: 991px) { .blog-card__content { padding: 29px 25px 25px; } } @media (max-width: 375px) { .blog-card__content { padding: 29px 20px 20px; } } .blog-card__meta { margin-bottom: 20px; display: flex; align-items: center; gap: 20px; } .blog-card__meta li { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--dia-text-gray, #4A5752); font-weight: 500; text-transform: capitalize; line-height: 1.25; } @media (min-width: 992px) and (max-width: 1199px) { .blog-card__meta li { font-size: 13px; } } @media (max-width: 375px) { .blog-card__meta li { font-size: 13px; } } .blog-card__meta li a { color: inherit; } .blog-card__meta li a:hover { color: var(--dia-base, #1B7A5A); } .blog-card__meta__icon { display: inline-flex; font-size: 16px; color: var(--dia-base, #1B7A5A); } .blog-card__meta__icon svg { width: 1em; height: 1em; fill: currentColor; } @media (min-width: 992px) and (max-width: 1199px) { .blog-card__meta__icon { font-size: 14px; } } .blog-card__title { margin-bottom: 22px; font-size: 20px; text-transform: capitalize; font-weight: 600; line-height: 1.5; } .blog-card__title:hover { color: var(--dia-base, #1B7A5A); } .blog-card__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-card__title a:hover { background-size: 100% 1px; } .blog-card .dia-btn { padding: 10px 36.5px; font-size: 15px; } .blog-card__shape { width: auto !important; max-width: 100%; height: auto; position: absolute; right: 27px; bottom: -6px; animation: textRotate 4s linear infinite; } .blog-one { position: relative; } .blog-one__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: top center; background-size: cover; } .blog-one .container { position: relative; z-index: 1; } @media (min-width: 1600px) { .blog-one .container { max-width: 1600px; } } .blog-one__carousel.owl-carousel .owl-nav button { background-color: var(--dia-white, #FFFFFF); } .blog-page { background-color: var(--dia-white, #FFFFFF); } .topbar { position: relative; background-color: RGBA(var(--dia-primary-rgb, 244, 185, 66), 0.4); z-index: 999; overflow: hidden; } @media (max-width: 1199px) { .topbar { display: none; } } .topbar .container-fluid { padding-left: 50px; padding-right: 50px; } @media (max-width: 1799px) { .topbar .container-fluid { padding-left: 30px; padding-right: 30px; } } @media (max-width: 1399px) { .topbar .container-fluid { padding-left: 20px; padding-right: 20px; } } @media (max-width: 575px) { .topbar .container-fluid { padding-left: 15px; padding-right: 15px; } } .topbar__inner { padding: 15.5px 0; position: relative; display: flex; align-items: center; justify-content: space-between; z-index: 1; } .topbar__info, .topbar__pages { margin: 0; display: flex; align-items: center; } .topbar__info li, .topbar__pages li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--dia-black, #14352B); line-height: 1.25; } .topbar__info li a, .topbar__pages li a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .topbar__info li a:hover, .topbar__pages li a:hover { color: var(--dia-base, #1B7A5A); } .topbar__info li a:hover, .topbar__pages li a:hover { background-size: 100% 1px; } .topbar__info__icon { display: inline-flex; font-size: 14px; color: var(--dia-black, #14352B); } .topbar__info__icon svg { width: 1em; height: 1em; fill: currentColor; } .topbar__info { position: relative; gap: 29px; z-index: 1; } .topbar__info::after { content: ""; position: absolute; width: calc(100% + 100px); height: calc(100% + 32px); top: 50%; left: -50px; transform: translateY(-50%); background: linear-gradient(270deg, #D3EFE1 4.55%, rgba(255, 255, 255, 0) 100%); clip-path: polygon(0% 0%, 98% 0, 100% 50%, 98% 100%, 0% 100%); z-index: -1; } @media (max-width: 1799px) { .topbar__info::after { width: calc(100% + 80px); left: -30px; } } @media (max-width: 1399px) { .topbar__info::after { width: calc(100% + 70px); left: -20px; } } .topbar__info li { gap: 8px; } .topbar__right { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 39px; z-index: 1; } .topbar__pages { gap: 10px; } .topbar__pages li { gap: 0px; text-transform: capitalize; } .main-header { background-color: transparent; position: absolute; left: 0; top: 0; width: 100%; z-index: 999; } .main-header .container-fluid { padding-left: 50px; padding-right: 50px; } @media (max-width: 1799px) { .main-header .container-fluid { padding-left: 30px; padding-right: 30px; } } @media (max-width: 1399px) { .main-header .container-fluid { padding-left: 20px; padding-right: 20px; } } @media (max-width: 575px) { .main-header .container-fluid { padding-left: 15px; padding-right: 15px; } } .main-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 1199px) { .main-header__inner { padding: 20px 0; } } @media (max-width: 1199px) { .main-header__logo { margin-right: 20px; } } .main-header__logo img { max-width: 100%; height: auto; } .main-header__right { display: flex; align-items: center; justify-content: flex-end; } .main-header__nav { margin-right: 261px; } @media (max-width: 1799px) { .main-header__nav { margin-right: 150px; } } @media (max-width: 1599px) { .main-header__nav { margin-right: 50px; } } @media (max-width: 1199px) { .main-header__nav { margin-right: 0px; } } @media (min-width: 1200px) and (max-width: 1399px) { .main-header__nav { margin-right: 50px; } } .main-header__link { position: relative; padding-left: 34px; display: flex; align-items: center; gap: 30px; border-radius: 30px; z-index: 1; } @media (max-width: 1599px) { .main-header__link { padding-left: 30px; gap: 25px; } } @media (max-width: 1199px) { .main-header__link { margin-left: 30px; } } @media (max-width: 767px) { .main-header__link { margin-left: 25px; padding: 15px 30px; } } @media (max-width: 412px) { .main-header__link { margin-left: 20px; padding-left: 25px; padding-right: 25px; gap: 15px; } } @media (min-width: 1200px) and (max-width: 1299px) { .main-header__link { padding: 18px 30px; } } .main-header__link::after { content: ""; width: calc(100% - 20px); height: 100%; background-color: var(--dia-white, #FFFFFF); position: absolute; top: 0; left: 0; border-radius: 30px; border: 1px solid var(--dia-white2, #E8F4EE); z-index: -1; } @media (max-width: 767px) { .main-header__link::after { width: 100%; } } @media (min-width: 1200px) and (max-width: 1299px) { .main-header__link::after { width: 100%; } } .main-header__cart { display: inline-flex; font-size: 20px; color: var(--dia-black, #14352B); transition: all 500ms ease; } @media (max-width: 430px) { .main-header__cart { font-size: 16px; } } .main-header__cart:hover { color: var(--dia-base, #1B7A5A); } .main-header__cart svg { width: 1em; height: 1em; fill: currentColor; } .main-header__btn { padding: 11.8px 51.5px; } @media (max-width: 767px) { .main-header__btn { display: none; } } @media (min-width: 1200px) and (max-width: 1299px) { .main-header__btn { display: none; } } @media (min-width: 1300px) and (max-width: 1399px) { .main-header__btn { padding-left: 40px; padding-right: 40px; } } .sticky-header--cloned { position: fixed; top: 0; left: 0; right: 0; z-index: 999; top: 0; background-color: var(--dia-white, #FFFFFF); transform: translateY(-100%); box-shadow: 0px 3px 18px rgba(var(--dia-black-rgb, 20, 53, 43), 0.07); transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1); visibility: hidden; transition: transform 500ms ease, visibility 500ms ease; } .sticky-header--cloned.active { transform: translateY(0%); visibility: visible; } .mobile-nav__btn { width: 26px; display: flex; align-items: center; flex-direction: column; flex-wrap: wrap; cursor: pointer; z-index: 3; } @media (min-width: 1200px) { .mobile-nav__btn { display: none; } } .mobile-nav__btn span { width: 100%; height: 2px; background-color: var(--dia-black, #14352B); transition: all 500ms ease; } .mobile-nav__btn span:nth-child(2) { margin-top: 5px; margin-bottom: 5px; } .mobile-nav__btn:hover span { background-color: var(--dia-base, #1B7A5A); } .main-menu { /* after third level no menu */ } .main-menu .main-menu__list, .main-menu .main-menu__list ul { margin: 0; padding: 0; list-style-type: none; align-items: center; display: none; } @media (min-width: 1200px) { .main-menu .main-menu__list, .main-menu .main-menu__list ul { display: flex; } } .main-menu .main-menu__list > li { padding-top: 42px; padding-bottom: 42px; position: relative; } .main-menu .main-menu__list > li.dropdown > a { position: relative; } .main-menu .main-menu__list > li + li { margin-left: 34px; } @media (min-width: 1300px) and (max-width: 1399px) { .main-menu .main-menu__list > li + li { margin-left: 30px; } } .main-menu .main-menu__list > li > a { display: flex; align-items: center; font-family: var(--dia-font, "Manrope", sans-serif); font-size: 18px; color: var(--dia-black, #14352B); font-weight: 500; text-transform: capitalize; position: relative; transition: all 500ms ease; } @media (max-width: 1599px) { .main-menu .main-menu__list > li > a { font-size: 17px; } } .main-menu .main-menu__list > li.current > a, .main-menu .main-menu__list > li:hover > a { color: var(--dia-base, #1B7A5A); text-shadow: 0 0 0.5px currentColor; } .main-menu .main-menu__list li ul { position: absolute; top: 100%; left: -25px; min-width: 270px; flex-direction: column; justify-content: flex-start; align-items: flex-start; opacity: 0; visibility: hidden; transform-origin: top center; transform: scaleY(0) translateZ(100px); transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease; z-index: 99; border-radius: 0px 0px 10px 10px; background-color: var(--dia-white, #FFFFFF); box-shadow: 0px 10px 60px 0px RGBA(var(--dia-white-rgb, 255, 255, 255), 0.07); padding: 15px 20px 11px; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); } .main-menu .main-menu__list li:hover > ul { opacity: 1; visibility: visible; transform: scaleY(1) translateZ(0px); } .main-menu .main-menu__list li ul li { flex: 1 1 100%; width: 100%; position: relative; } .main-menu .main-menu__list li ul li > a { font-size: 16px; line-height: 26px; color: var(--dia-black, #14352B); font-weight: 500; display: flex; text-transform: capitalize; padding: 8px 20px; margin-bottom: 4px; border-radius: 6px; transition: 400ms; } @media (max-width: 1599px) { .main-menu .main-menu__list li ul li > a { font-size: 15px; } } .main-menu .main-menu__list li ul li > a::after { position: absolute; right: 20px; top: 8px; border-radius: 0; font-size: 6px; font-weight: 700; font-family: "Font Awesome 5 Free"; content: "\f111"; color: var(--dia-white, #FFFFFF); visibility: hidden; opacity: 0; transition: all 500ms ease; transform: scale(0); } .main-menu .main-menu__list li ul li.current > a, .main-menu .main-menu__list li ul li:hover > a { color: var(--dia-white, #FFFFFF); background-color: var(--dia-base, #1B7A5A); } .main-menu .main-menu__list li ul li.current > a::after, .main-menu .main-menu__list li ul li:hover > a::after { visibility: visible; opacity: 1; transform: scale(1); } .main-menu .main-menu__list li ul li > ul { top: 0; left: calc(100% + 20px); } .main-menu .main-menu__list li ul li > ul ul { display: none; } @media (min-width: 1200px) and (max-width: 1400px) { .main-menu__list li:nth-last-child(1) ul li > ul, .main-menu__list li:nth-last-child(2) ul li > ul { left: auto; right: calc(100% + 20px); } } .mobile-nav__wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; transform: translateX(-100%); transform-origin: left center; transition: transform 500ms ease 500ms, visibility 500ms ease 500ms; visibility: hidden; position: fixed; } .mobile-nav__wrapper .container { padding-left: 0; padding-right: 0; } .mobile-nav__wrapper.expanded { opacity: 1; transform: translateX(0%); visibility: visible; transition: transform 500ms ease 0ms, visibility 500ms ease 0ms; } .mobile-nav__wrapper.expanded .mobile-nav__content { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms; } .mobile-nav__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; opacity: 0.7; cursor: url(../images/close.png), auto; } .mobile-nav__content { width: 300px; background-color: var(--dia-black4, #0F2A22); z-index: 10; position: relative; height: 100%; overflow-y: auto; padding-top: 60px; padding-bottom: 30px; padding-left: 15px; padding-right: 15px; opacity: 0; visibility: hidden; transform: translateX(-100%); transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms; } .mobile-nav__content .logo-box { margin-bottom: 40px; display: flex; } .mobile-nav__close { display: inline-flex; position: absolute; top: 20px; right: 20px; font-size: 20px; color: var(--dia-white, #FFFFFF); cursor: pointer; transition: all 500ms ease; } .mobile-nav__close svg { width: 1em; height: 1em; fill: currentColor; } .mobile-nav__close:hover { color: var(--dia-base, #1B7A5A); } .mobile-nav__content .main-menu__list, .mobile-nav__content .main-menu__list ul { margin: 0; padding: 0; list-style-type: none; } .mobile-nav__content .main-menu__list ul { display: none; border-top: 1px solid RGBA(var(--dia-white-rgb, 255, 255, 255), 0.1); } .mobile-nav__content .main-menu__list ul li > a { padding-left: 1em; } .mobile-nav__content .main-menu__list li:not(:last-child) { border-bottom: 1px solid RGBA(var(--dia-white-rgb, 255, 255, 255), 0.1); } .mobile-nav__content .main-menu__list li > a { display: flex; justify-content: space-between; font-family: var(--dia-font, "Manrope", sans-serif); line-height: 30px; color: var(--dia-white, #FFFFFF); font-size: 16px; text-transform: capitalize; font-weight: 600; height: 46px; align-items: center; transition: 500ms; } .mobile-nav__content .main-menu__list > li > ul > li > a { font-size: 14px; } .mobile-nav__content .main-menu__list li a.expanded { color: var(--dia-base, #1B7A5A); } .mobile-nav__content .main-menu__list li a button { width: 30px; height: 30px; background-color: var(--dia-base, #1B7A5A); border: none; outline: none; color: var(--dia-white, #FFFFFF); display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(-90deg); transition: transform 500ms ease; } .mobile-nav__content .main-menu__list li a button svg { width: 1em; height: 1em; fill: currentColor; } .mobile-nav__content .main-menu__list li a button.expanded { transform: rotate(0deg); background-color: var(--dia-white, #FFFFFF); color: var(--dia-black, #14352B); } .mobile-nav__contact { margin-bottom: 0; margin-top: 30px; margin-bottom: 30px; } .mobile-nav__contact li { color: var(--dia-white, #FFFFFF); font-size: 14px; font-weight: 500; position: relative; display: flex; align-items: center; } .mobile-nav__contact li + li { margin-top: 15px; } .mobile-nav__contact li a { color: inherit; transition: 500ms; } .mobile-nav__contact li a:hover { color: var(--dia-base, #1B7A5A); } .mobile-nav__contact__icon { width: 32px; height: 32px; border-radius: 50%; background-color: var(--dia-base, #1B7A5A); display: flex; justify-content: center; align-items: center; text-align: center; font-size: 12px; margin-right: 10px; color: var(--dia-white, #FFFFFF); } .mobile-nav__contact__icon svg { width: 1em; height: 1em; fill: currentColor; } .mobile-nav__social { display: flex; align-items: center; } .mobile-nav__social a { font-size: 16px; color: var(--dia-white, #FFFFFF); transition: 500ms; } .mobile-nav__social a + a { margin-left: 20px; } .mobile-nav__social a:hover { color: var(--dia-base, #1B7A5A); } .mobile-nav__social a svg { width: 1em; height: 1em; fill: currentColor; } .page-header { position: relative; padding-top: 167px; padding-bottom: 175px; background-color: var(--dia-white4, #EAF5EF); overflow: hidden; } @media (max-width: 1399px) { .page-header { padding-top: 117px; padding-bottom: 125px; } } @media (max-width: 991px) { .page-header { padding-top: 89px; padding-bottom: 97px; } } @media (max-width: 575px) { .page-header { padding-top: 79px; padding-bottom: 87px; } } .page-header__bg { position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: top center; background-repeat: no-repeat; background-size: cover; } .page-header .container { position: relative; z-index: 1; } .page-header__content { text-align: center; } .page-header__title { margin-bottom: 4px; font-size: 60px; color: var(--dia-black, #14352B); font-weight: 700; text-transform: capitalize; line-height: 1.333; } @media (max-width: 1399px) { .page-header__title { font-size: 55px; } } @media (max-width: 1199px) { .page-header__title { font-size: 50px; } } @media (max-width: 991px) { .page-header__title { font-size: 45px; } } @media (max-width: 767px) { .page-header__title { font-size: 40px; } } @media (max-width: 575px) { .page-header__title { font-size: 35px; } } @media (max-width: 430px) { .page-header__title { font-size: 30px; } } .page-header__shape-1 { width: 847px; height: 847px; position: absolute; top: 39px; left: -35px; background: radial-gradient(50% 50% at 50% 50%, #FDF3DC 0%, rgba(255, 255, 255, 0) 100%); mix-blend-mode: normal; border-radius: 50%; z-index: 1; } .page-header__shape-2 { width: 525px; height: 525px; position: absolute; top: 39px; right: 21.2%; background: radial-gradient(50% 50% at 50% 50%, rgba(199, 236, 216, 0.28) 0%, rgba(255, 255, 255, 0) 100%); mix-blend-mode: normal; border-radius: 50%; z-index: 1; } .dia-breadcrumb { margin: 0; display: inline-flex; justify-content: center; align-items: center; gap: 8px 0; flex-wrap: wrap; } .dia-breadcrumb li { display: flex; align-items: center; font-size: 20px; color: var(--dia-black, #14352B); font-weight: 500; text-transform: capitalize; line-height: 1.25; } @media (max-width: 1199px) { .dia-breadcrumb li { font-size: 18px; } } @media (max-width: 575px) { .dia-breadcrumb li { font-size: 17px; } } .dia-breadcrumb li:not(:last-of-type)::after { content: "\f0c8"; font-family: "Font Awesome 5 Free"; font-size: 4px; color: var(--dia-black, #14352B); font-weight: 900; -moz-osx-font-smoothing: textscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; position: relative; top: 5px; margin-left: 10px; margin-right: 10px; } .dia-breadcrumb li span, .dia-breadcrumb li a { display: inline-block; } .dia-breadcrumb li:not(:first-child) span { color: var(--dia-base, #1B7A5A); } .dia-breadcrumb li a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .dia-breadcrumb li a:hover { background-size: 100% 1px; } .dia-breadcrumb li a:hover { color: var(--dia-base, #1B7A5A); } .google-map { position: relative; } .google-map iframe { position: relative; display: block; border: none; height: 384px; width: 100%; mix-blend-mode: luminosity; border-radius: inherit; } .google-map__contact { overflow: hidden; background-color: var(--dia-black5, #000000); border-radius: 0px 0px 30px 30px; } .contact-map { position: relative; overflow: hidden; z-index: 1; } .form-one__group { margin: 0; display: grid; grid-template-columns: 1fr; grid-gap: 15px; } @media (min-width: 576px) { .form-one__group { grid-template-columns: repeat(2, 1fr); } } .form-one__control { border: none; width: auto; height: auto; border-radius: 0; padding: 0; position: relative; } .form-one__control label { margin-bottom: 17px; font-size: 16px; font-weight: 500; color: var(--dia-black, #14352B); text-transform: capitalize; line-height: 1.25; } .form-one__control--full { grid-column-start: 1; grid-column-end: -1; } .form-one input[type=text], .form-one input[type=tel], .form-one input[type=email], .form-one input[type=password], .form-one textarea { display: block; width: 100%; height: 50px; background-color: var(--dia-white, #FFFFFF); font-size: 16px; color: var(--dia-text-gray, #4A5752); font-weight: 500; border: none; outline: none; padding-left: 30px; padding-right: 30px; border-radius: 30px; border: 1px solid transparent; transition: all 500ms ease; } .form-one input[type=text]:focus, .form-one input[type=tel]:focus, .form-one input[type=email]:focus, .form-one input[type=password]:focus, .form-one textarea:focus { color: var(--dia-black, #14352B); border-color: var(--dia-base, #1B7A5A); } .form-one textarea { height: 157px; padding-top: 15px; } .form-one button[type=submit] { font-family: var(--dia-font, "Manrope", sans-serif); margin-top: 10px; padding: 10.9px 40px; width: 100%; color: var(--dia-black5, #000000); } .form-one button[type=submit]:hover { color: var(--dia-white, #FFFFFF); } .main-footer { position: relative; background-color: var(--dia-white3, #F4FAF7); overflow: hidden; } .main-footer__top { margin-bottom: 96px; } @media (max-width: 767px) { .main-footer__top { margin-bottom: 70px; } } .main-footer .container { position: relative; z-index: 1; } .main-footer__bottom { position: relative; } .main-footer__bottom__inner { padding: 21px 65px; background-color: var(--dia-white4, #EAF5EF); border-radius: 16px; } @media (max-width: 1199px) { .main-footer__bottom__inner { padding: 30px; } } .main-footer__social { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; } @media (max-width: 767px) { .main-footer__social { justify-content: center; } } .main-footer__social a { position: relative; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; z-index: 1; font-size: 21px; color: var(--dia-black, #14352B); border: 1px solid var(--dia-black, #14352B); transition: all 500ms ease; } .main-footer__social a:hover { color: var(--dia-white, #FFFFFF); background-color: var(--dia-black, #14352B); } .main-footer__social a svg { width: 1em; height: 1em; fill: currentColor; } .main-footer__copyright { margin: 0; font-size: 16px; color: var(--dia-text-gray, #4A5752); text-align: center; line-height: 1.875; } .main-footer__back-to-top { padding: 7.5px 30px; font-family: var(--dia-font, "Manrope", sans-serif); font-size: 15px; color: var(--dia-black, #14352B); text-transform: uppercase; font-weight: 500; line-height: 1.5; border-radius: 30px; background-color: transparent; border: 1px solid var(--dia-base, #1B7A5A); } .main-footer__back-to-top::before, .main-footer__back-to-top::after { background-color: var(--dia-base, #1B7A5A); } .main-footer__back-to-top:hover { color: var(--dia-white, #FFFFFF); } .main-footer__shape-1, .main-footer__shape-2, .main-footer__shape-3, .main-footer__shape-4 { max-width: 100%; height: auto; } .main-footer__shape-1 { position: absolute; top: 126px; left: 5.5%; animation: textRotate 4s linear infinite; } @media (max-width: 1599px) { .main-footer__shape-1 { top: 60px; left: 3%; } } @media (max-width: 767px) { .main-footer__shape-1 { top: 25px; } } @media (max-width: 575px) { .main-footer__shape-1 { top: 15px; } } .main-footer__shape-2 { position: absolute; left: 6.5%; bottom: 61px; animation: textRotate 5s linear infinite; } @media (max-width: 1799px) { .main-footer__shape-2 { left: 2%; } } @media (max-width: 1599px) { .main-footer__shape-2 { bottom: -30px; } } @media (max-width: 1399px) { .main-footer__shape-2 { display: none; } } .main-footer__shape-3 { position: absolute; top: 66px; right: 11.9%; animation: moveHorizontal 2s linear infinite; } @media (max-width: 1799px) { .main-footer__shape-3 { top: 50px; right: 5%; } } @media (max-width: 1599px) { .main-footer__shape-3 { top: 30px; right: 2%; } } @media (max-width: 425px) { .main-footer__shape-3 { top: -30px; } } .main-footer__shape-4 { position: absolute; right: 3.5%; bottom: -14px; animation: moveHorizontal2 2s linear infinite; } @media (max-width: 1799px) { .main-footer__shape-4 { right: 2%; bottom: -30px; } } @media (max-width: 1599px) { .main-footer__shape-4 { right: 0; bottom: -50px; } } @media (max-width: 1399px) { .main-footer__shape-4 { bottom: -80px; } } @media (max-width: 767px) { .main-footer__shape-4 { display: none; } } .footer-widget--links .footer-widget__title { margin-bottom: 34px; } @media (max-width: 767px) { .footer-widget--links .footer-widget__title { margin-bottom: 25px; } } .footer-widget--newsletter { padding-left: 27px; } @media (max-width: 1199px) { .footer-widget--newsletter { padding-left: 0px; } } .footer-widget--newsletter .footer-widget__title { margin-bottom: 30px; } @media (max-width: 1199px) { .footer-widget--newsletter .footer-widget__title { margin-bottom: 25px; } } .footer-widget__title { margin: 0 0 25px; font-size: 20px; font-weight: 600; color: var(--dia-black, #14352B); text-transform: capitalize; line-height: 1.25; } .footer-widget__logo { display: inline-block; margin-bottom: 33px; } .footer-widget__logo img { max-width: 100%; height: auto; } .footer-widget__btn { padding: 8px 30.4px; font-family: var(--dia-font2, "Roboto", sans-serif); font-weight: 400; line-height: 1.5; } .footer-widget__links { padding: 0; margin: 0; } .footer-widget__links li + li { margin-top: 8px; } .footer-widget__links li { font-size: 16px; color: var(--dia-text-gray, #4A5752); line-height: 1.875; text-transform: capitalize; } .footer-widget__links li a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .footer-widget__links li a:hover { background-size: 100% 1px; } .footer-widget__links li a:hover { color: var(--dia-base, #1B7A5A); } .footer-widget__contact { margin: 0; padding: 0; } .footer-widget__contact li + li { margin-top: 19px; } .footer-widget__contact li { display: flex; align-items: flex-start; gap: 15px; } .footer-widget__contact__icon { position: relative; top: 6px; overflow: hidden; z-index: 1; width: 38px; height: 38px; border-radius: 50%; background-color: var(--dia-base, #1B7A5A); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 19px; color: var(--dia-white, #FFFFFF); transition: all 500ms ease; } .footer-widget__contact__icon::after { content: ""; width: 0; height: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: var(--dia-black, #14352B); border-radius: inherit; z-index: -1; transition: all 500ms ease; } .footer-widget__contact__icon svg { width: 1em; height: 1em; fill: currentColor; } li:hover .footer-widget__contact__icon::after { width: 100%; height: 100%; } .footer-widget__contact__link { font-weight: 700; color: var(--dia-black4, #0F2A22); background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .footer-widget__contact__link:hover { background-size: 100% 1px; } .footer-widget__contact__link:hover { color: var(--dia-base, #1B7A5A); } .footer-widget__contact__title { margin: -3px 0 0; font-size: 16px; font-weight: 400; line-height: 1.75; } .main-slider { position: relative; overflow: hidden; z-index: 1; } .main-slider__carousel { position: relative; } .main-slider__carousel.owl-carousel .owl-dots { margin: 0 !important; flex-direction: column; position: absolute; top: 50%; left: 40px; transform: translateY(-50%); z-index: 2; } @media (max-width: 1399px) { .main-slider__carousel.owl-carousel .owl-dots { flex-direction: row; top: auto; left: 50%; bottom: 60px; transform: translate(-50%, 0); } } .main-slider__carousel.owl-carousel .owl-dots .owl-dot { position: relative; width: 18px; height: 18px; border: 0; background-color: var(--dia-primary, #F4B942); } .main-slider__carousel.owl-carousel .owl-dots .owl-dot::after { content: ""; width: 9px; height: 9px; border-radius: inherit; background-color: var(--dia-white, #FFFFFF); opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 500ms ease; } .main-slider__carousel.owl-carousel .owl-dots .owl-dot:hover, .main-slider__carousel.owl-carousel .owl-dots .owl-dot.active { background-color: var(--dia-primary, #F4B942); } .main-slider__carousel.owl-carousel .owl-dots .owl-dot:hover::after, .main-slider__carousel.owl-carousel .owl-dots .owl-dot.active::after { opacity: 1; } .main-slider__item { position: relative; padding-top: 284px; padding-bottom: 202px; overflow: hidden; } @media (max-width: 1399px) { .main-slider__item { padding-bottom: 230px; } } .main-slider__bg { position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .main-slider__bg__inner { position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: top center; background-size: cover; } .main-slider__bg__shape-1, .main-slider__bg__shape-2, .main-slider__bg__shape-3, .main-slider__bg__shape-4 { display: inline-block !important; width: auto !important; max-width: 100%; height: auto; position: absolute; } .main-slider__bg__shape-2, .main-slider__bg__shape-3, .main-slider__bg__shape-4 { opacity: 0; visibility: hidden; } .main-slider__bg__shape-1 { left: 31px; bottom: -25px; opacity: 0; transform: translateX(100%); z-index: 1; mix-blend-mode: color-burn; } .main-slider__bg__shape-2 { top: 168px; left: 13%; z-index: 2; animation: textRotate 5s linear infinite; } @media (max-width: 1199px) { .main-slider__bg__shape-2 { top: 140px; left: 10%; } } .main-slider__bg__shape-3 { left: 9.4%; bottom: 122px; z-index: 2; animation: textRotate 5s linear infinite; } @media (max-width: 1399px) { .main-slider__bg__shape-3 { bottom: 100px; } } .main-slider__bg__shape-4 { position: absolute; top: 163px; right: 29.5%; z-index: 2; animation: moveHorizontal 2s linear infinite; } @media (max-width: 1199px) { .main-slider__bg__shape-4 { top: 140px; right: 15%; } } .main-slider__bg__shape-5 { position: absolute; width: 847px; height: 847px; left: 8%; bottom: -48px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, #F2F7F4 0%, rgba(255, 255, 255, 0) 100%); } .main-slider__bg__shape-6 { position: absolute; width: 906px; height: 906px; top: -5px; right: -255px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(244, 185, 66, 0.19) 0%, rgba(255, 255, 255, 0) 100%); } .main-slider .container { position: relative; z-index: 2; } @media (min-width: 1400px) and (max-width: 1850px) { .main-slider .container { max-width: 100%; padding-left: 100px; padding-right: 100px; } } .main-slider__content { position: relative; padding-right: 75px; z-index: 1; } @media (max-width: 1199px) { .main-slider__content { padding-right: 0; } } @media (min-width: 1200px) and (max-width: 1399px) { .main-slider__content { padding-right: 0; max-width: 700px; } } @media (min-width: 1400px) and (max-width: 1599px) { .main-slider__content { padding-right: 0; max-width: 730px; } } @media (min-width: 1600px) and (max-width: 1799px) { .main-slider__content { padding-right: 0; max-width: 840px; } } @media (min-width: 1800px) and (max-width: 1850px) { .main-slider__content { padding-right: 0; max-width: 900px; } } .main-slider__title { overflow: hidden; position: relative; margin-bottom: 43px; font-weight: 700; font-size: 80px; text-transform: capitalize; line-height: 1.125; } @media (max-width: 1599px) { .main-slider__title { font-size: 65px; } } @media (max-width: 1399px) { .main-slider__title { font-size: 60px; } } @media (max-width: 767px) { .main-slider__title { font-size: 55px; } } @media (max-width: 575px) { .main-slider__title { font-size: 50px; } } @media (max-width: 430px) { .main-slider__title { font-size: 45px; } } @media (min-width: 1600px) and (max-width: 1799px) { .main-slider__title { font-size: 70px; } } .main-slider__title__inner { position: relative; display: table; opacity: 0; transform: translateY(-300px); } .main-slider__button { margin-bottom: 33px; overflow: hidden; } .main-slider__button__inner { opacity: 0; transform: translateY(80px); } .main-slider__button .dia-btn { padding: 12.3px 39px; border: 1px solid var(--dia-black, #14352B); } .main-slider__button .dia-btn:hover { border-color: var(--dia-base, #1B7A5A); } .main-slider__donors { padding-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 34px; overflow: hidden; } .main-slider__donors__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 19px; opacity: 0; transform: translateY(150px); } .main-slider__donors__images { display: flex; align-items: center; } .main-slider__donors__images img { flex-shrink: 0; position: relative; z-index: 1; display: inline-block !important; width: 80px !important; height: 80px; border-radius: 50%; } .main-slider__donors__images img:not(:first-child) { margin-left: -12px; } .main-slider__donors__title { margin-bottom: 2px; font-weight: 600; font-size: 20px; text-transform: capitalize; color: var(--dia-black2, #0F2A22); line-height: 1.4; } .main-slider__donors__text { margin: 0px; font-weight: 500; font-size: 16px; color: var(--dia-black, #14352B); line-height: 1.375; } .main-slider__donors__nonprofits { position: relative; padding: 14px 27px 19px; text-align: center; background-color: var(--dia-base, #1B7A5A); border-radius: 5px; opacity: 0; transform: translateY(150px); } .main-slider__donors__nonprofits::after { content: ""; width: 18px; height: 18px; border-radius: 50%; background-color: var(--dia-primary, #F4B942); position: absolute; top: -6px; right: -6px; } .main-slider__donors__nonprofits__total { margin-bottom: 0; font-weight: 700; font-size: 36px; color: var(--dia-white, #FFFFFF); line-height: 1.25; } .main-slider__donors__nonprofits__title { margin: 0; font-weight: 500; font-size: 16px; color: var(--dia-white, #FFFFFF); line-height: 1.375; } .main-slider__image { display: inline-block; position: relative; position: absolute; right: 0px; bottom: 0px; border-radius: 400px 0px 0px 0px; z-index: 3; opacity: 0; transform: translateX(300px); } @media (max-width: 1199px) { .main-slider__image { display: none; } } @media (min-width: 1200px) and (max-width: 1399px) { .main-slider__image { margin-right: -150px; } } @media (min-width: 1400px) and (max-width: 1599px) { .main-slider__image { margin-right: -80px; } } .main-slider__image::after { content: ""; width: 100%; height: 100%; border-radius: inherit; background-color: var(--dia-base, #1B7A5A); position: absolute; top: 0px; left: -19px; z-index: -1; } .main-slider__image img { display: inline-block !important; width: auto !important; max-width: 100% !important; height: auto; border-radius: inherit; } .main-slider .active .main-slider__bg__shape-1 { opacity: 1; transform: translateX(0); transition: transform 1200ms ease 500ms, opacity 1200ms ease 500ms; } .main-slider .active .main-slider__bg__shape-2, .main-slider .active .main-slider__bg__shape-3, .main-slider .active .main-slider__bg__shape-4 { opacity: 1; visibility: visible; transition: opacity 1000ms ease 500ms, visibility 1000ms ease 500ms; } .main-slider .active .main-slider__title__inner, .main-slider .active .main-slider__button__inner, .main-slider .active .main-slider__donors__inner, .main-slider .active .main-slider__donors__nonprofits { opacity: 1; transform: translateY(0); transition: transform 1500ms ease, opacity 1500ms ease; } .main-slider .active .main-slider__title__inner { transition-delay: 500ms; } .main-slider .active .main-slider__button__inner { transition-delay: 800ms; } .main-slider .active .main-slider__donors__inner { transition-delay: 1200ms; } .main-slider .active .main-slider__donors__nonprofits { transition-delay: 1500ms; } .main-slider .active .main-slider__image { transform: translateX(0); opacity: 1; transition: transform 1000ms ease, opacity 1000ms ease; } .about-one { position: relative; background-color: var(--dia-white, #FFFFFF); overflow: hidden; } .about-one .container { position: relative; z-index: 1; } @media (min-width: 1600px) { .about-one__col-1 { flex: 0 0 auto; width: 41.66666667%; } } @media (min-width: 1600px) { .about-one__col-2 { flex: 0 0 auto; width: 58.3333333333%; } } .about-one__image { position: relative; margin-left: -215px; } @media (max-width: 1599px) { .about-one__image { margin-left: -80px; } } @media (max-width: 1399px) { .about-one__image { margin-left: 0; } } @media (max-width: 1199px) { .about-one__image { max-width: 690px; } } .about-one__image__one { display: inline-block; -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: auto; mask-size: auto; } .about-one__image__one img { max-width: 100%; height: auto; } .about-one__image__two { display: inline-block; padding: 4px; position: relative; position: absolute; right: 19px; bottom: 0px; background-color: var(--dia-white, #FFFFFF); z-index: 2; -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: auto; mask-size: auto; } @media (max-width: 767px) { .about-one__image__two { display: none; } } .about-one__image__two::after { content: ""; width: 141px; height: 141px; border-radius: 50%; position: absolute; top: -55px; right: -16px; background-color: var(--dia-white, #FFFFFF); z-index: 1; } .about-one__image__two img { max-width: 100%; height: auto; -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: auto; mask-size: auto; } .about-one__image__shape-1 { max-width: 100%; height: auto; position: absolute; top: 7px; right: -22px; transform: rotate(-47.63deg); z-index: 1; } @media (max-width: 1399px) { .about-one__image__shape-1 { right: 0px; } } @media (max-width: 767px) { .about-one__image__shape-1 { display: none; } } .about-one__image__shape-2 { max-width: 100%; height: auto; position: absolute; top: -10px; left: -26px; } @media (max-width: 1399px) { .about-one__image__shape-2 { left: 0px; } } @media (max-width: 1199px) { .about-one__image__shape-2 { display: none; } } .about-one__content { position: relative; padding-left: 65px; } @media (max-width: 1599px) { .about-one__content { padding-left: 30px; } } @media (max-width: 1399px) { .about-one__content { padding-left: 10px; } } @media (max-width: 1199px) { .about-one__content { padding-left: 0px; } } .about-one .sec-title { margin-bottom: 31px; } .about-one__text { margin-bottom: 35px; } .about-one__inner { margin-bottom: 32px; display: flex; align-items: center; gap: 20px; } @media (max-width: 767px) { .about-one__inner { flex-direction: column; align-items: flex-start; } } .about-one__inner__item { width: calc(50% - 10px); position: relative; padding: 21px 24px; display: flex; align-items: center; gap: 20px; background-color: var(--dia-white26, #EAF5EF); border-radius: 5px; overflow: hidden; z-index: 1; transition: all 500ms ease; } @media (min-width: 1400px) and (max-width: 1599px) { .about-one__inner__item { padding: 20px; } } @media (max-width: 767px) { .about-one__inner__item { width: 100%; } } .about-one__inner__item::after { content: ""; width: 0; height: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: var(--dia-base, #1B7A5A); border-radius: inherit; z-index: -1; transition: all 500ms ease; } .about-one__inner__item:hover::after { width: 100%; height: 100%; } .about-one__inner__icon { display: inline-flex; font-size: 61px; color: var(--dia-black, #14352B); transition: all 500ms ease; } .about-one__inner__icon svg { width: 1em; height: 1em; fill: currentColor; } .about-one__inner__title { margin: 0; font-size: 20px; font-weight: 500; text-transform: capitalize; line-height: 1.6; transition: all 500ms ease; } .about-one__inner__item:hover .about-one__inner__icon, .about-one__inner__item:hover .about-one__inner__title { color: var(--dia-white, #FFFFFF); } .about-one .total-fund { margin-bottom: 40px; } @media (min-width: 1850px) { .about-one .total-fund { margin: 0; position: absolute; top: 80px; right: -345px; transform: rotate(-24.23deg); } } .about-one__shape { max-width: 100%; height: auto; position: absolute; right: 0px; bottom: 0px; animation: zumpBottom 2s linear infinite; } @media (max-width: 1399px) { .about-one__shape { display: none; } } .about-two { position: relative; background-color: var(--dia-white27, #F8FCFA); } .about-two .container { position: relative; z-index: 1; } .about-two__image { position: relative; margin-left: -83px; } @media (max-width: 1599px) { .about-two__image { margin-left: -40px; } } @media (max-width: 1399px) { .about-two__image { margin-left: 0; } } @media (max-width: 1199px) { .about-two__image { margin-bottom: 40px; } } @media (max-width: 430px) { .about-two__image { margin-bottom: 60px; } } .about-two__image__img { max-width: 100%; height: auto; border-radius: 293px 0px 298.5px 298.5px; } .about-two__image__shape { max-width: 100%; height: auto; position: absolute; top: 12px; left: -128px; transform: rotate(-47.63deg); } @media (max-width: 1599px) { .about-two__image__shape { left: -60px; } } @media (max-width: 1399px) { .about-two__image__shape { top: -10px; left: 0px; } } @media (max-width: 575px) { .about-two__image__shape { display: none; } } .about-two .total-fund { position: absolute; left: -89px; bottom: 8px; transform: rotate(-24.23deg); } @media (max-width: 1599px) { .about-two .total-fund { left: -70px; } } @media (max-width: 1399px) { .about-two .total-fund { left: 0px; } } @media (max-width: 430px) { .about-two .total-fund { bottom: -30px; } } .about-two .sec-title { margin-bottom: 30px; } .about-two__text { margin-bottom: 29px; } .about-two__inner { margin-bottom: 36px; display: flex; align-items: center; gap: 26px; } @media (max-width: 767px) { .about-two__inner { display: block; } } .about-two__inner__item + .about-two__inner__item { margin-top: 10px; } .about-two__inner__item { position: relative; padding: 21px 23px; display: flex; align-items: center; gap: 24px; background-color: var(--dia-white26, #EAF5EF); border-radius: 5px; overflow: hidden; z-index: 1; transition: all 500ms ease; } .about-two__inner__item::after { content: ""; width: 0; height: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: var(--dia-base, #1B7A5A); border-radius: inherit; z-index: -1; transition: all 500ms ease; } .about-two__inner__item:hover::after { width: 100%; height: 100%; } .about-two__inner__icon { display: inline-flex; font-size: 56px; color: var(--dia-black, #14352B); transition: all 500ms ease; } .about-two__inner__icon svg { width: 1em; height: 1em; fill: currentColor; } .about-two__inner__title { margin: 0; font-size: 20px; font-weight: 500; text-transform: capitalize; line-height: 1.6; transition: all 500ms ease; } .about-two__inner__item:hover .about-two__inner__icon, .about-two__inner__item:hover .about-two__inner__title { color: var(--dia-white, #FFFFFF); } .about-two__inner__image { flex-shrink: 0; } @media (max-width: 767px) { .about-two__inner__image { margin-top: 30px; } } .about-two__inner__image img { max-width: 100%; height: auto; border-radius: 58.5px; } .about-two__bottom { display: flex; align-items: center; gap: 30px 40px; } @media (max-width: 767px) { .about-two__bottom { flex-direction: column; align-items: flex-start; } } .about-two__bottom__text { margin: 0; } .about-two__button { flex-shrink: 0; } .about-two__shape { max-width: 100%; height: auto; position: absolute; top: 111px; right: 0px; animation: zump 2s linear infinite; } @media (max-width: 1799px) { .about-two__shape { display: none; } } .contact { background-color: var(--dia-white, #FFFFFF); } .contact__content { padding-right: 44px; } @media (max-width: 1199px) { .contact__content { padding-right: 0; } } .contact__info { padding: 39.5px; border-radius: 30px 30px 0px 0px; background-color: var(--dia-white5, #E6F5EE); } @media (max-width: 1199px) { .contact__info { padding: 35px; } } @media (max-width: 575px) { .contact__info { padding: 30px; } } @media (max-width: 440px) { .contact__info { padding: 25px; } } @media (max-width: 375px) { .contact__info { padding: 20px; } } .contact__info__inner { padding: 32px 44px 31px; border-radius: 30px; background-color: var(--dia-white, #FFFFFF); } @media (max-width: 1199px) { .contact__info__inner { padding-left: 35px; padding-right: 35px; } } @media (max-width: 575px) { .contact__info__inner { padding-left: 30px; padding-right: 30px; } } .contact__info__item + .contact__info__item { margin-top: 21px; } .contact__info__item { position: relative; display: flex; align-items: flex-start; gap: 15px; } @media (max-width: 425px) { .contact__info__item { flex-direction: column; } } .contact__info__icon { width: 58px; height: 58px; background-color: var(--dia-white6, #F2F8F4); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; position: relative; z-index: 1; font-size: var(--icon-size); color: var(--dia-black5, #000000); transition: all 300ms ease; } .contact__info__icon::after { content: ""; width: 0; height: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: var(--dia-base, #1B7A5A); border-radius: inherit; z-index: -1; transition: all 500ms ease; } .contact__info__icon svg { width: 1em; height: 1em; fill: currentColor; } .contact__info__item:hover .contact__info__icon { color: var(--dia-white, #FFFFFF); } .contact__info__item:hover .contact__info__icon::after { width: 100%; height: 100%; } .contact__info__title { margin-bottom: 9px; font-size: 20px; font-weight: 500; text-transform: capitalize; line-height: 1.6; } .contact__info__text { margin: 0; font-size: 15px; color: var(--dia-text-gray, #4A5752); line-height: 1.25; } .contact__info__text a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .contact__info__text a:hover { background-size: 100% 1px; } .contact__info__text a:hover { color: var(--dia-base, #1B7A5A); } .contact__info__text--location { line-height: 1.75; } .contact__info__text--email { color: var(--dia-black, #14352B); } .contact__form { padding: 47.5px 43px 58.5px; background: linear-gradient(179.57deg, #E1F4EA 14.47%, #FFF8E6 51%, #DFF2E8 97.5%); border-radius: 10px; } @media (max-width: 1199px) { .contact__form { padding-top: 43px; padding-bottom: 54px; } } @media (max-width: 575px) { .contact__form { padding: 34px 35px 45px; } } @media (max-width: 430px) { .contact__form { padding: 30px 30px 41px; } } @media (max-width: 360px) { .contact__form { padding-left: 25px; padding-right: 25px; } } .contact__form__title { margin-bottom: 26px; font-size: 32px; font-weight: 500; color: var(--dia-black5, #000000); text-transform: capitalize; line-height: 156%; } @media (max-width: 575px) { .contact__form__title { font-size: 30px; } } .become-volunteer { background-color: var(--dia-white, #FFFFFF); } .become-volunteer__top { margin-bottom: 58px; } .become-volunteer__top__image { margin-bottom: 45px; position: relative; } .become-volunteer__top__image img { display: block; width: 100%; border-radius: 8px; } .become-volunteer__top__content { padding: 50px 45px; border-radius: 5px; background-color: var(--dia-soft-lavender2, #DDF1E8); position: absolute; right: 76px; bottom: 71px; } @media (max-width: 1199px) { .become-volunteer__top__content { right: 40px; bottom: 40px; } } @media (max-width: 991px) { .become-volunteer__top__content { margin-top: 40px; position: static; } } @media (max-width: 767px) { .become-volunteer__top__content { padding: 30px; } } .become-volunteer__top__title { margin-bottom: 32px; font-weight: 400; font-size: 36px; color: var(--dia-black5, #000000); line-height: 1.194; text-transform: capitalize; } @media (max-width: 991px) { .become-volunteer__top__title { margin-bottom: 20px; } } @media (max-width: 767px) { .become-volunteer__top__title { font-size: 30px; } } @media (max-width: 991px) { .become-volunteer__top__title br { display: none; } } .become-volunteer__top__text-1 { margin: 0; font-size: 16px; line-height: 1.5; } @media (max-width: 991px) { .become-volunteer__top__text-1 br { display: none; } } .become-volunteer__top__text-2 { margin: 0; font-size: 20px; line-height: 1.6; } @media (max-width: 767px) { .become-volunteer__top__text-2 { font-size: 18px; } } .become-volunteer__text { margin-bottom: 35px; font-size: 32px; font-weight: 500; line-height: 1.5625; } @media (max-width: 1199px) { .become-volunteer__text { font-size: 25px; } } @media (max-width: 767px) { .become-volunteer__text { font-size: 20px; } } .become-volunteer__image { max-width: 100%; height: auto; border-radius: 8px; } @media (min-width: 1200px) { .become-volunteer__form .contact__form { padding: 63.5px 43px 71.5px; } } .become-volunteer__form .dia-btn { margin-top: 12px !important; } .faq-page { background-color: var(--dia-white, #FFFFFF); } .faq-one { background-color: RGBA(var(--dia-primary-rgb, 244, 185, 66), 0.3); } @media (min-width: 1200px) { .faq-one .container { max-width: 1565px; } } .faq-one__inner { padding: 80px 64px; background-color: var(--dia-white20, #EEF6F2); border-radius: 10px; } @media (max-width: 1599px) { .faq-one__inner { padding: 60px 40px; } } @media (max-width: 767px) { .faq-one__inner { padding: 40px 30px; } } @media (max-width: 575px) { .faq-one__inner { padding: 35px 25px; } } @media (max-width: 360px) { .faq-one__inner { padding: 30px 20px; } } .faq-one .sec-title { margin-bottom: 64px; } @media (max-width: 1199px) { .faq-one .sec-title { margin-bottom: 50px; } } .faq-one .sec-title__title { font-weight: 400; line-height: 1.2; } .faq-one__image { display: table; position: relative; } .faq-one__image img { max-width: 100%; height: auto; border-radius: 10px; } @keyframes videoRipple { 70% { box-shadow: 0 0 0 40px RGBA(var(--dia-base-rgb, 27, 122, 90), 0); } 100% { box-shadow: 0 0 0 0 RGBA(var(--dia-base-rgb, 27, 122, 90), 0); } } .faq-one__accordion { padding-left: 51px; } @media (max-width: 1599px) { .faq-one__accordion { padding-left: 30px; } } @media (max-width: 1199px) { .faq-one__accordion { padding-left: 0px; } } .faq-one__accordion .dia-accordion__item { position: relative; border-radius: 61px; background-color: var(--dia-white, #FFFFFF); transition: all 500ms ease; } .faq-one__accordion .dia-accordion__item + .dia-accordion__item { margin-top: 16px; } .faq-one__accordion .dia-accordion__title { position: relative; cursor: pointer; padding: 20px 65px 20px 32px; } @media (max-width: 575px) { .faq-one__accordion .dia-accordion__title { padding: 18px 65px 18px 30px; } } .faq-one__accordion .dia-accordion__title::after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 18px; color: var(--dia-text, #5E6B66); position: absolute; top: 50%; right: 32px; transform: translateY(-50%); z-index: 1; transition: all 500ms ease; } @media (max-width: 575px) { .faq-one__accordion .dia-accordion__title::after { right: 30px; } } .faq-one__accordion .dia-accordion__title h4 { position: relative; margin: 0; font-size: 20px; font-weight: 500; text-transform: capitalize; letter-spacing: -0.015em; line-height: 1.5; transition: all 500ms ease; } @media (max-width: 575px) { .faq-one__accordion .dia-accordion__title h4 { font-size: 18px; } } @media (max-width: 430px) { .faq-one__accordion .dia-accordion__title h4 { font-size: 17px; } } .faq-one__accordion .active.dia-accordion__item { border-radius: 16px; } .faq-one__accordion .active .dia-accordion__title::after { color: var(--dia-black, #14352B); transform: translateY(-50%) rotate(180deg); } .faq-one__accordion .dia-accordion__content { padding: 0px 65px 20px 32px; } @media (max-width: 575px) { .faq-one__accordion .dia-accordion__content { padding: 0px 65px 18px 30px; } } .faq-one__accordion .dia-accordion__content p { margin: 0; font-family: var(--dia-font2, "Roboto", sans-serif); font-size: 16px; color: var(--dia-text, #5E6B66); line-height: 1.5; } .faq-two__accordion .dia-accordion { padding: 26.5px 27px; background-color: var(--dia-white14, #EEF7F2); border-radius: 10px; } @media (max-width: 412px) { .faq-two__accordion .dia-accordion { padding: 20px; } } .faq-two__accordion .dia-accordion__item { position: relative; } .faq-two__accordion .dia-accordion__item + .dia-accordion__item { margin-top: 10px; } .faq-two__accordion .dia-accordion__title { cursor: pointer; margin-bottom: 1px; background-color: var(--dia-white, #FFFFFF); border-radius: 5px; } .faq-two__accordion .dia-accordion__title h4 { position: relative; margin: 0; padding: 15px 55px 15px 18px; font-size: 16px; color: var(--dia-gray4, #4E5A55); font-weight: 500; text-transform: capitalize; line-height: 1.875; transition: all 500ms ease; } .faq-two__accordion .dia-accordion__icon { position: relative; position: absolute; right: 28px; top: 50%; transform: translateY(-50%); } .faq-two__accordion .dia-accordion__icon::after, .faq-two__accordion .dia-accordion__icon::before { width: 2px; height: 15px; position: absolute; background-color: var(--dia-black5, #000000); border-radius: 5px; top: 50%; left: 50%; content: ""; transform: translate(-50%, -50%); transition: all 500ms ease; } .faq-two__accordion .dia-accordion__icon::after { width: 16px; height: 2px; } .faq-two__accordion .active .dia-accordion__icon::before { opacity: 0; } .faq-two__accordion .dia-accordion__content { padding: 11px 18px 11px 18px; background-color: var(--dia-white, #FFFFFF); border-radius: 5px; } .faq-two__accordion .dia-accordion__content p { margin: 0; font-size: 16px; color: var(--dia-gray4, #4E5A55); line-height: 1.75; } .support-categories { background-color: var(--dia-white, #FFFFFF); } @media (min-width: 1200px) { .support-categories .container { max-width: 1471px; } } @media (min-width: 768px) { .support-categories__item--card-bottom { display: flex; flex-direction: column-reverse; } } @media (min-width: 768px) { .support-categories__item--card-bottom .support-categories__item__text { margin: 0px 0px 30px; } } .support-categories__item__text { margin: 30px 0px 0px; font-size: 24px; line-height: 1.583; letter-spacing: -0.015em; } @media (max-width: 1399px) { .support-categories__item__text { font-size: 20px; } } @media (min-width: 768px) and (max-width: 991px) { .support-categories__item__text { font-size: 18px; } } @media (max-width: 412px) { .support-categories__item__text { font-size: 18px; } } .support-categories__card { padding: 32px 42px; background-color: var(--accent-color); border-radius: 24px; } @media (max-width: 1399px) { .support-categories__card { padding: 20px 32px 32px; } } @media (min-width: 768px) and (max-width: 991px) { .support-categories__card { padding-top: 23px; } } @media (max-width: 412px) { .support-categories__card { padding-top: 23px; } } .support-categories__card__title { margin-bottom: 16px; font-size: 40px; font-weight: 600; text-transform: capitalize; line-height: 1.5; } @media (max-width: 1399px) { .support-categories__card__title { font-size: 30px; } } @media (min-width: 768px) and (max-width: 991px) { .support-categories__card__title { font-size: 26px; } } @media (max-width: 412px) { .support-categories__card__title { font-size: 26px; } } .support-categories__card__text { margin-bottom: 32px; font-size: 16px; line-height: 1.5; } .support-categories__card .dia-btn { padding: 6px 30.5px; font-family: var(--dia-font, "Manrope", sans-serif); color: var(--dia-black3, #14352B); } .support-categories__card .dia-btn:hover { color: var(--dia-white, #FFFFFF); } .get-involved { margin-top: -374px; } @media (min-width: 1400px) { .get-involved .container { max-width: 1800px; } } .get-involved__card { height: 100%; position: relative; border-radius: 10px; } .get-involved__card__bg { position: relative; padding-top: 730px; border-radius: 10px; background-color: var(--dia-black5, #000000); } @media (max-width: 991px) { .get-involved__card__bg { padding-top: 650px; } } .get-involved__card__bg__inner { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-position: top center; background-size: cover; border-radius: inherit; mix-blend-mode: luminosity; } .get-involved__card__content { padding: 57px 43px; position: absolute; left: 0; bottom: 0; border-radius: inherit; z-index: 1; } @media (max-width: 1599px) { .get-involved__card__content { padding: 57px 30px 30px; } } @media (max-width: 991px) { .get-involved__card__content { padding-top: 40px; } } @media (max-width: 390px) { .get-involved__card__content { padding: 40px 25px 25px; } } .get-involved__card__title { margin-bottom: 23px; font-weight: 500; font-size: 36px; color: var(--dia-white, #FFFFFF); line-height: 1.5; text-transform: capitalize; } .get-involved__card__title:hover { color: var(--dia-primary, #F4B942); } @media (max-width: 1599px) { .get-involved__card__title { font-size: 30px; } } @media (max-width: 430px) { .get-involved__card__title { font-size: 28px; } } .get-involved__card__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .get-involved__card__title a:hover { background-size: 100% 1px; } .get-involved__card__text { margin-bottom: 21px; font-weight: 500; font-size: 16px; color: var(--dia-white, #FFFFFF); line-height: 1.875; } .get-involved__card .dia-btn { font-family: var(--dia-font, "Manrope", sans-serif); padding: 9px 30px; } @media (max-width: 375px) { .get-involved__card .dia-btn { padding-left: 20px; padding-right: 20px; font-size: 14px; } } .get-involved__card--1 .get-involved__card__content { padding-top: 138px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, #E3F4EB 100%); } @media (max-width: 991px) { .get-involved__card--1 .get-involved__card__content { padding-top: 100px; } } .get-involved__card--1 .get-involved__card__title { color: var(--dia-black, #14352B); } .get-involved__card--1 .get-involved__card__title:hover { color: var(--dia-primary, #F4B942); } .get-involved__card--1 .get-involved__card__text { color: var(--dia-black5, #000000); } .get-involved__card--2 .get-involved__card__content { background: linear-gradient(180deg, rgba(15, 42, 34, 0) 0.04%, rgba(20, 53, 43, 0.06) 40.5%, #0B1F18 100%); } .get-involved__card--3 { overflow: hidden; background-color: var(--dia-base, #1B7A5A); } .get-involved__card--3 .get-involved__card__content { padding: 100px 43px 0px; position: relative; } @media (max-width: 1599px) { .get-involved__card--3 .get-involved__card__content { padding: 139px 30px 0px; } } @media (max-width: 1399px) { .get-involved__card--3 .get-involved__card__content { padding-top: 100px; } } @media (max-width: 430px) { .get-involved__card--3 .get-involved__card__content { padding-top: 40px; } } @media (max-width: 390px) { .get-involved__card--3 .get-involved__card__content { padding: 40px 25px 25px; } } .get-involved__card--3 .get-involved__card__icon { margin-bottom: 53px; display: inline-flex; font-size: 286px; color: var(--dia-white, #FFFFFF); } @media (max-width: 1799px) { .get-involved__card--3 .get-involved__card__icon { margin-bottom: 159px; font-size: 180px; } } @media (max-width: 1599px) { .get-involved__card--3 .get-involved__card__icon { margin-bottom: 159px; font-size: 150px; } } @media (max-width: 1399px) { .get-involved__card--3 .get-involved__card__icon { margin-bottom: 53px; } } @media (max-width: 575px) { .get-involved__card--3 .get-involved__card__icon { font-size: 130px; } } .get-involved__card--3 .get-involved__card__icon svg { width: 1em; height: 1em; fill: currentColor; } .get-involved__card--3 .get-involved__card__border-text { position: relative; position: absolute; margin: 0; padding: 7px 20px 7px 36px; display: table; font-size: 14px; font-weight: 600; color: var(--dia-white, #FFFFFF); line-height: 1.5; border: 1px solid var(--dia-white, #FFFFFF); border-radius: 60px; transition: all 500ms ease; } .get-involved__card--3 .get-involved__card__border-text::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background-color: var(--dia-white, #FFFFFF); position: absolute; top: 50%; left: 22px; transform: translateY(-50%); } .get-involved__card--3 .get-involved__card__border-text--1 { top: 100px; right: 49px; transform: rotate(-26.55deg); } @media (max-width: 575px) { .get-involved__card--3 .get-involved__card__border-text--1 { right: 30px; } } @media (max-width: 430px) { .get-involved__card--3 .get-involved__card__border-text--1 { margin-bottom: 20px; position: relative; top: 0; left: 0; transform: rotate(0); } } .get-involved__card--3 .get-involved__card__border-text--2 { top: 279px; right: 29px; transform: rotate(14.75deg); } @media (max-width: 1399px) { .get-involved__card--3 .get-involved__card__border-text--2 { top: 220px; } } @media (max-width: 430px) { .get-involved__card--3 .get-involved__card__border-text--2 { margin-bottom: 30px; position: relative; top: 0; left: 0; transform: rotate(0); } } .get-involved__card--3 .get-involved__card__text { margin: 0; padding-bottom: 124px; } @media (max-width: 1399px) { .get-involved__card--3 .get-involved__card__text { padding: 0; margin-bottom: 40px; } } .get-involved__card--3 .get-involved__card__button { position: absolute; bottom: 0; right: 0; padding: 20px 12px 4px 22px; display: table; margin-left: auto; background-color: var(--dia-white, #FFFFFF); border-radius: 50px 0px 10px 0px; } @media (max-width: 1399px) { .get-involved__card--3 .get-involved__card__button { position: relative; } } .get-involved__card--3 .get-involved__card__shape { max-width: 100%; height: auto; position: absolute; left: 74px; bottom: 0px; animation: textRotate 4s linear infinite; } .get-involved__card:hover .get-involved__card__border-text { border-color: var(--dia-primary, #F4B942); } .donate-one { position: relative; margin-bottom: -142px; counter-reset: chooseNumber; } .donate-one .container { position: relative; z-index: 1; } .donate-one__card { padding: 44px 30px 35px; text-align: center; background-color: var(--accent-color); border-radius: 10px; } @media (min-width: 992px) and (max-width: 1199px) { .donate-one__card { padding: 39px 25px 30px; } } @media (max-width: 375px) { .donate-one__card { padding: 39px 25px 30px; } } .donate-one__card__serial { position: relative; margin: 0 auto 17px; width: 119px; height: 119px; display: flex; align-items: center; justify-content: center; border: 1px dotted var(--dia-black5, #000000); border-radius: 50%; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .donate-one__card__serial::before { content: ""; position: absolute; top: 50%; left: 50%; width: calc(100% + 148px); height: 16px; transform: translate(-50%, -50%); background-color: var(--dia-black, #14352B); transition: all 500ms ease; } @media (min-width: 992px) and (max-width: 1199px) { .donate-one__card__serial::before { width: calc(100% + 100px); } } @media (max-width: 375px) { .donate-one__card__serial::before { width: calc(100% + 110px); } } .donate-one__card__serial__number { position: relative; width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; background-color: var(--dia-white, #FFFFFF); border-radius: 50%; border: 1px solid var(--dia-black5, #000000); z-index: 1; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .donate-one__card__serial__number::after { content: counter(chooseNumber); counter-increment: chooseNumber; font-family: var(--dia-heading-font, "Geologica", sans-serif); font-size: 32px; color: var(--dia-black4, #0F2A22); font-weight: 600; z-index: 1; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .donate-one__card:hover .donate-one__card__serial { border-color: var(--dia-base, #1B7A5A); } .donate-one__card:hover .donate-one__card__serial::before { background-color: var(--dia-base, #1B7A5A); } .donate-one__card:hover .donate-one__card__serial__number { background-color: var(--dia-base, #1B7A5A); border-color: var(--dia-base, #1B7A5A); } .donate-one__card:hover .donate-one__card__serial__number::after { color: var(--dia-white, #FFFFFF); } .donate-one__card__title { margin-bottom: 12px; font-weight: 500; font-size: 28px; line-height: 1.285; text-transform: capitalize; } @media (min-width: 992px) and (max-width: 1199px) { .donate-one__card__title { font-size: 23px; } } @media (max-width: 375px) { .donate-one__card__title { font-size: 25px; } } .donate-one__card__text { margin: 0; font-size: 16px; line-height: 2; text-transform: capitalize; } .donation-details { background-color: var(--dia-white, #FFFFFF); } .donation-details__title { margin-bottom: 20px; font-weight: 500; font-size: 24px; color: var(--dia-base, #1B7A5A); line-height: 1.25; text-transform: capitalize; } @media (max-width: 430px) { .donation-details__title { font-size: 22px; } } .donation-details__text { margin: 0; font-size: 16px; color: var(--dia-black, #14352B); line-height: 1.875; } .donation-details__inner__content { padding: 34px 30px 56px; } @media (max-width: 767px) { .donation-details__inner__content { padding-bottom: 40px; } } @media (max-width: 575px) { .donation-details__inner__content { padding: 30px 25px 30px; } } @media (max-width: 390px) { .donation-details__inner__content { padding-left: 20px; padding-right: 20px; } } .donation-details__thumbnail { border-radius: 5px; } .donation-details__thumbnail img { width: 100%; display: block; border-radius: inherit; } .donation-details__thumb-title { margin-bottom: 12px; font-weight: 500; font-size: 32px; text-transform: capitalize; line-height: 1.1875; } @media (min-width: 992px) and (max-width: 1199px) { .donation-details__thumb-title { font-size: 26px; } } @media (max-width: 767px) { .donation-details__thumb-title { font-size: 26px; } } @media (max-width: 430px) { .donation-details__thumb-title { font-size: 24px; } } .donation-details__details { margin-bottom: 26px; } .donation-details__details p + p { margin-top: 26px; } .error-404 { position: relative; background-color: var(--dia-white, #FFFFFF); } .error-404__content { text-align: center; } .error-404__title { display: flex; align-items: center; justify-content: center; margin-bottom: 5px; font-size: 180px; font-weight: 800; text-transform: uppercase; line-height: 1; } @media (max-width: 575px) { .error-404__title { font-size: 130px; } } .error-404__title img { width: 129px; height: 129px; border-radius: 50%; } @media (max-width: 575px) { .error-404__title img { width: 100px; height: 100px; } } .error-404__sub-title { margin-bottom: 6px; font-size: 36px; font-weight: 600; color: var(--dia-base, #1B7A5A); text-transform: capitalize; line-height: 1.5; } @media (max-width: 991px) { .error-404__sub-title { font-size: 30px; } } @media (max-width: 575px) { .error-404__sub-title { font-size: 25px; } } .error-404__text { margin-bottom: 50px; font-size: 16px; color: var(--dia-text-gray, #4A5752); line-height: 1.75; } .error-404 .dia-btn { padding-top: 15.5px; padding-bottom: 15.5px; }