.common_banner--wrapper { overflow: hidden; } .common_banner--wrapper .common_banner_title--wrapper { position: relative; text-align: center; padding: 65px 0px 31px; } .common_banner_title--wrapper::before { content: ""; background: url('../../images/banner-bg-mid.png') no-repeat 0 0; background-size: cover; position: absolute; height: 500px; width: 100%; max-width: 100%; margin: auto; left: 0rem; right: 0; bottom: 0; z-index: -1; } .common_banner--wrapper .banner_title { font-family: var(--open-sans); font-style: normal; font-weight: 900; font-size: 60px; line-height: 85px; text-align: center; letter-spacing: -0.05em; text-transform: uppercase; margin-bottom: 0; text-shadow: 25px 30px 35px rgba(135, 20, 20, 0.25); margin-bottom: 0; color: var(--white); -webkit-text-fill-color: var(--primary-color); -webkit-text-stroke-width: 5px; -webkit-text-stroke-color: var(--white); } .banner_subtext--wrapper { text-align: center; } .banner_subtext--wrapper .subtext { font-family: var(--open-sans); font-style: normal; font-weight: 600; font-size: 12px; line-height: 13px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--quaternary-color); background: #eaeaea; margin: 0 auto; width: 154px; padding: 5px 0px; margin-bottom: 0; display: block; } .subtext .since_yr { color: var(--primary-color); } .common_banner--wrapper .common_banner_container { padding-left: 0; padding-right: 0; } .common_join_now--wrapper { position: relative; } @media ( min-width: 380px ) { .common_banner--wrapper .common_banner_container { padding-left: 15px; padding-right: 15px; } .common_banner_title--wrapper::before { width: 300px; } } @media ( min-width: 480px ) { .common_banner--wrapper .banner_title { font-size: 85px; -webkit-text-stroke-width: 9px; } } @media ( min-width: 576px ) { .common_banner--wrapper .banner_title { font-size: 90px; line-height: 170px; } } @media ( min-width: 768px ) { .common_banner--wrapper { padding-bottom: 13.625rem; } .common_banner--wrapper .common_banner_title--wrapper { padding: 216px 0px 61px; } .common_banner--wrapper .banner_title { font-size: 120px; } .common_join_now--wrapper::before, .common_join_now--wrapper::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; } .common_join_now--wrapper::before { top: -7rem; left: -6rem; } .common_join_now--wrapper::after { right: -5rem; bottom: -16rem; } } @media ( min-width: 992px ) { .common_banner--wrapper { padding-bottom: 23.625rem; } } @media ( min-width: 1200px ) { .common_join_now--wrapper::before, .common_join_now--wrapper::after { width: 680px; } .common_join_now--wrapper::before { top: -15rem; left: -20rem; } .common_join_now--wrapper::after { right: -25rem; bottom: -15rem; } } /* ====== common-navbar-and-banner ========= */ @media ( min-width: 992px ) { .common_header .navbar_v1 .custom_navbrand { transform: translateX(-50%); } .common_join_now--wrapper { max-width: 819px; margin: 0 auto; } } @media ( min-width: 1200px ) { .common_header .navbar_v1 .custom_navbrand { left: 50%; } }