* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 
/* =========== Common-Css ============= */ 
ul { list-style-type: none; padding-left: 0; margin-bottom: 0; } img { max-width: 100%; height: auto; } .btn_common { font-family: var(--poppins); font-style: normal; font-weight: 600!important; font-size: 13px; line-height: 19px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white)!important; background: var(--secondary-color); padding: 18px 11px!important; transition: all 0.5s ease-in-out; max-width: 160px; width: 100%; text-align: center; position: relative; text-decoration: none!important; } .btn_common:hover { background: var(--btn--hover); } /* Red Button ****/ .btn.red-btn { background-color: var(--primary-color); padding: 0.5em 1em; border: none; position: relative; } .btn.red-btn:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #F35C5D; opacity: 0.3; border-radius: 6px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .btn.red-btn:hover:before { -webkit-transform: scale(1); transform: scale(1); z-index: 1; } .btn_item { position: relative; padding: 0; } .donate_box { position: absolute; width: 100%; height: 167px; top: -10.5rem; left: 0rem; z-index: -1; font-family: var(--montserrat); font-style: normal; font-weight: 900; font-size: 55px; line-height: 200px; text-align: center; text-transform: uppercase; color: #F4F6F6; } p { font-family: var(--open-sans); font-style: normal; font-weight: normal; font-size: 16px; line-height: 26px; color: var(--tertiary-color); margin-bottom: 0; } 
.title { font-family: var(--poppins); font-style: normal; font-weight: bold; font-size: 30px; line-height: 34px; text-align: center; text-transform: capitalize; color: var(--quaternary-color); margin-bottom: 0; position: relative; z-index: 1000;} 
.common_title { font-family: var(--montserrat); font-style: normal; font-weight: bold; font-size: 25px; line-height: 34px; text-align: center; text-transform: capitalize; margin-bottom: 0; } .outer_line_v2--wrapper { position: relative; border-left: 0.5px solid rgb(201, 204, 217, 0.5); border-right: 0.5px solid rgb(201, 204, 217, 0.5); z-index: 0; } .outer_line_v2--wrapper::after { content: ''; position: absolute; height: 100%; width: 0.5px; background: rgb(201, 204, 217, 0.5); right: 120px; top: 0rem; z-index: 0; } .banner_for_custom_header { margin-top: 58px; } .home_one--wrapper { overflow: hidden; } 

@media ( min-width: 576px ) { .donate_box { font-size: 68px; } .common_title { font-size: 30px; line-height: 36px; } } 

@media ( min-width: 768px ) { .donate_box { font-size: 105px; top: -15rem; } .title { font-size: 50px; line-height: 54px; position: relative; z-index: 1000; } .outer_line_v2--wrapper::after { right: 220px; } } 

@media ( min-width: 992px ) { 
.btn_common::after { content: ''; position: absolute; width: 30px; height: 1px; top: 50%; right: -30px; background-color: #D1D4DD; } 
.donate_box { font-size: 135px; } 
.banner_for_custom_header { margin-top: 0px; } 
} 

@media ( min-width: 1200px ) {
.btn_common::after { width: 55px; right: -55px; } 
.donate_box { font-size: 150px; } 
} 

.top-icon { background: #29afd1; display: inline-block; border-radius: 500px; margin: 10px; position: relative; padding: 80px; cursor: pointer; } .main-item { width: 150px; height: 150px; position: relative; } .line { position: absolute; height: 15px; width: 100%; background: white; border-radius: 10px; transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s; } .line01 { top: 19%; } .line02 { top: 49%; } .line03 { top: 79%; 
} 

@media ( min-width: 992px ) { .top-icon { display: none; } } /* == landing-page == */ .banner--wrapper { position: relative; z-index: 0; overflow: hidden; } .banner--wrapper::before { position: absolute; content: ""; background: url('../../images/vector-banner.svg') no-repeat center center; background-size: cover; max-width: 100%; max-height: 100%; width: 1800px; height: 884px; margin: auto; left: 0; right: 0; bottom: auto; z-index: -1; } .dotted_map_before::before, .dotted_map_after::after { content: ''; position: absolute; background: url('../../images/dotted-map.png')no-repeat 0 0; background-size: 100%; max-width: 680px; width: 320px; height: 330px; z-index: -1; } 

@media ( min-width: 1200px ) { .dotted_map_before::before, .dotted_map_after::after { width: 500px; height: 500px; } .banner--wrapper { margin-top: -9.5rem!important; } } .overlap_box { font-family: var(--montserrat); font-style: normal; font-weight: 900; font-size: 75px; line-height: 200px; color: #F4F6F6; text-align: center; text-transform: uppercase; position: absolute; width: 100%; top: -7rem; left: 0rem; right: 0rem; z-index: -1; } 

@media ( min-width: 576px ) { .overlap_box { font-size: 130px; top: -8rem; } } .banner_mid_bg { position: relative; } 

@media ( min-width: 768px ) { .banner_mid_bg::before { content: ""; background: url('../../images/banner-bg-mid.png') no-repeat 0 0; background-size: cover; position: absolute; height: 500px; width: 200px; max-width: 100%; right: 2rem; bottom: 0; z-index: -1; } .banner--wrapper { margin-top: -7.5rem; } } 

@media ( min-width: 1200px ) { .banner_mid_bg::before { margin: auto; left: 0rem; right: 0; width: 300px; } } 

@media ( min-width: 1680px ) { .banner_mid_bg::before { height: 530px; } } .common_header { z-index: 999; position: relative; } /* ----- image-animation ------ */ .overflow_img--wrapper { overflow: hidden; width: 100%; } .overflow_img--wrapper a img { transition: transform 0.5s ease, opacity 0.5s ease; } .overflow_img--wrapper a:hover img { transform: scale(1.2); opacity: 0.8; } 
/* =========== Common-Css-ends ============= */