/* Start custom CSS for html, class: .elementor-element-e0c1701 *//* =========================================================
BANNER EXCHANGE PAGE
PREMIUM LOCATION-PAGE STYLE
========================================================= */
#iew-banner-exchange {
--iew-be-purple: #9B8EC7;
--iew-be-lavender: #BDA6CE;
--iew-be-blue: #B4D3D9;
--iew-be-cream: #F2EAE0;
--iew-be-dark: #292334;
--iew-be-dark-2: #332C40;
--iew-be-text: #4B4651;
--iew-be-white: #ffffff;
--iew-be-border: rgba(155,142,199,.22);
width: 100%;
overflow: hidden;
background: var(--iew-be-cream);
color: var(--iew-be-text);
font-family: Arial, Helvetica, sans-serif;
}
/* =========================================================
RESET
========================================================= */
#iew-banner-exchange *,
#iew-banner-exchange *::before,
#iew-banner-exchange *::after {
box-sizing: border-box;
}
#iew-banner-exchange img {
max-width: 100%;
display: block;
}
#iew-banner-exchange a {
text-decoration: none;
}
#iew-banner-exchange .iew-be-container {
width: min(1180px, calc(100% - 50px));
margin: 0 auto;
}
/* =========================================================
HERO
========================================================= */
#iew-banner-exchange .iew-be-hero {
position: relative;
min-height: 650px;
display: flex;
align-items: center;
background:
linear-gradient(
90deg,
rgba(41,35,52,.97) 0%,
rgba(41,35,52,.88) 43%,
rgba(41,35,52,.55) 75%,
rgba(41,35,52,.70) 100%
),
radial-gradient(
circle at 80% 20%,
rgba(189,166,206,.25),
transparent 35%
),
var(--iew-be-dark);
}
#iew-banner-exchange .iew-be-hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 82% 25%,
rgba(189,166,206,.22),
transparent 28%
);
pointer-events: none;
}
#iew-banner-exchange .iew-be-hero-content {
position: relative;
z-index: 2;
width: min(1180px, calc(100% - 50px));
margin: 0 auto;
padding: 100px 0;
}
#iew-banner-exchange .iew-be-eyebrow,
#iew-banner-exchange .iew-be-section-tag {
display: inline-block;
color: var(--iew-be-purple);
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
#iew-banner-exchange .iew-be-hero h1 {
max-width: 850px;
margin: 18px 0 23px;
color: var(--iew-be-white);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(52px, 7vw, 90px);
line-height: .96;
font-weight: 400;
letter-spacing: -3px;
}
#iew-banner-exchange .iew-be-hero h1 em {
color: var(--iew-be-lavender);
font-style: italic;
}
#iew-banner-exchange .iew-be-hero-content > p {
max-width: 650px;
margin: 0;
color: rgba(255,255,255,.78);
font-size: 16px;
line-height: 1.9;
}
/* =========================================================
BUTTONS
========================================================= */
#iew-banner-exchange .iew-be-hero-buttons {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 35px;
}
#iew-banner-exchange .iew-be-btn {
min-height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 27px;
border: 1px solid transparent;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: .3s ease;
}
#iew-banner-exchange .iew-be-btn-primary {
background: var(--iew-be-purple);
color: var(--iew-be-white);
}
#iew-banner-exchange .iew-be-btn-primary:hover {
background: var(--iew-be-lavender);
transform: translateY(-3px);
}
#iew-banner-exchange .iew-be-btn-outline {
border-color: rgba(255,255,255,.38);
background: rgba(255,255,255,.03);
color: var(--iew-be-white);
}
#iew-banner-exchange .iew-be-btn-outline:hover {
border-color: var(--iew-be-blue);
background: var(--iew-be-blue);
color: var(--iew-be-dark);
transform: translateY(-3px);
}
/* =========================================================
HERO LOCATION
========================================================= */
#iew-banner-exchange .iew-be-hero-location {
position: absolute;
right: 6%;
bottom: 45px;
z-index: 2;
display: flex;
align-items: center;
gap: 13px;
color: rgba(255,255,255,.75);
}
#iew-banner-exchange .iew-be-hero-location span {
color: var(--iew-be-purple);
font-family: Georgia, serif;
font-size: 18px;
}
#iew-banner-exchange .iew-be-hero-location strong {
font-size: 11px;
letter-spacing: 2px;
}
#iew-banner-exchange .iew-be-hero-location small {
padding-left: 13px;
border-left: 1px solid rgba(255,255,255,.2);
color: rgba(255,255,255,.45);
font-size: 9px;
letter-spacing: 1.5px;
}
/* =========================================================
INTRO
========================================================= */
#iew-banner-exchange .iew-be-intro {
padding: 115px 0;
background: var(--iew-be-cream);
}
#iew-banner-exchange .iew-be-intro .iew-be-container {
display: grid;
grid-template-columns: 180px 1fr;
gap: 75px;
}
#iew-banner-exchange .iew-be-intro-label {
position: relative;
padding-top: 5px;
}
#iew-banner-exchange .iew-be-intro-label::after {
content: "";
position: absolute;
top: 38px;
left: 0;
width: 45px;
height: 1px;
background: var(--iew-be-purple);
}
#iew-banner-exchange .iew-be-intro-label span {
display: block;
color: var(--iew-be-purple);
font-family: Georgia, serif;
font-size: 15px;
}
#iew-banner-exchange .iew-be-intro-label p {
margin: 38px 0 0;
color: var(--iew-be-dark);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
#iew-banner-exchange .iew-be-intro-content {
max-width: 850px;
}
#iew-banner-exchange .iew-be-intro-content h2,
#iew-banner-exchange .iew-be-section-heading h2,
#iew-banner-exchange .iew-be-banner-preview h2,
#iew-banner-exchange .iew-be-after-box h2,
#iew-banner-exchange .iew-be-final-box h2 {
margin: 14px 0 27px;
color: var(--iew-be-dark);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(38px, 5vw, 62px);
line-height: 1.08;
font-weight: 400;
letter-spacing: -1.8px;
}
#iew-banner-exchange .iew-be-intro-content h2 strong,
#iew-banner-exchange .iew-be-section-heading h2 strong,
#iew-banner-exchange .iew-be-banner-preview h2 strong,
#iew-banner-exchange .iew-be-after-box h2 strong,
#iew-banner-exchange .iew-be-final-box h2 strong {
display: block;
color: var(--iew-be-purple);
font-weight: 400;
}
#iew-banner-exchange .iew-be-intro-content p {
max-width: 820px;
margin: 0 0 18px;
color: var(--iew-be-text);
font-size: 15px;
line-height: 1.9;
}
#iew-banner-exchange .iew-be-intro-content .iew-be-lead {
color: var(--iew-be-dark);
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
line-height: 1.75;
}
/* =========================================================
PROCESS
========================================================= */
#iew-banner-exchange .iew-be-process {
padding: 110px 0;
background: var(--iew-be-dark);
}
#iew-banner-exchange .iew-be-section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 50px;
margin-bottom: 55px;
}
#iew-banner-exchange .iew-be-section-heading h2 {
margin-bottom: 0;
color: var(--iew-be-white);
}
#iew-banner-exchange .iew-be-section-heading h2 strong {
color: var(--iew-be-lavender);
}
#iew-banner-exchange .iew-be-section-heading > p {
max-width: 390px;
margin: 0 0 7px;
color: rgba(255,255,255,.62);
font-size: 14px;
line-height: 1.8;
}
#iew-banner-exchange .iew-be-process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#iew-banner-exchange .iew-be-process-card {
position: relative;
min-height: 350px;
padding: 32px 27px;
border: 1px solid rgba(255,255,255,.09);
background: var(--iew-be-dark-2);
overflow: hidden;
transition: .35s ease;
}
#iew-banner-exchange .iew-be-process-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 3px;
background: var(--iew-be-purple);
transition: .35s ease;
}
#iew-banner-exchange .iew-be-process-card:hover {
transform: translateY(-8px);
border-color: rgba(189,166,206,.35);
}
#iew-banner-exchange .iew-be-process-card:hover::before {
width: 100%;
}
#iew-banner-exchange .iew-be-card-number {
color: rgba(255,255,255,.3);
font-family: Georgia, serif;
font-size: 12px;
}
#iew-banner-exchange .iew-be-card-icon {
margin: 34px 0 20px;
color: var(--iew-be-lavender);
font-family: Georgia, serif;
font-size: 29px;
}
#iew-banner-exchange .iew-be-process-card h3 {
margin: 0 0 15px;
color: var(--iew-be-white);
font-family: Georgia, "Times New Roman", serif;
font-size: 23px;
font-weight: 400;
line-height: 1.25;
}
#iew-banner-exchange .iew-be-process-card p {
margin: 0;
color: rgba(255,255,255,.58);
font-size: 13px;
line-height: 1.75;
}
/* =========================================================
BANNER SECTION
========================================================= */
#iew-banner-exchange .iew-be-banner-section {
padding: 120px 0;
background: var(--iew-be-blue);
}
#iew-banner-exchange .iew-be-banner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 80px;
}
#iew-banner-exchange .iew-be-banner-preview h2 {
margin-bottom: 20px;
}
#iew-banner-exchange .iew-be-banner-preview > p {
max-width: 570px;
margin: 0 0 35px;
color: rgba(41,35,52,.72);
font-size: 14px;
line-height: 1.85;
}
#iew-banner-exchange .iew-be-banner-frame {
padding: 25px;
border: 1px solid rgba(41,35,52,.15);
background: rgba(255,255,255,.38);
box-shadow: 0 20px 55px rgba(41,35,52,.08);
}
#iew-banner-exchange .iew-be-banner-frame a {
display: block;
overflow: hidden;
background: var(--iew-be-white);
}
#iew-banner-exchange .iew-be-banner-frame img {
width: 100%;
height: auto;
transition: transform .5s ease;
}
#iew-banner-exchange .iew-be-banner-frame:hover img {
transform: scale(1.025);
}
/* =========================================================
CODE AREA
========================================================= */
#iew-banner-exchange .iew-be-code-area {
padding: 42px;
background: var(--iew-be-dark);
box-shadow: 0 25px 65px rgba(41,35,52,.12);
}
#iew-banner-exchange .iew-be-code-label {
display: inline-block;
color: var(--iew-be-purple);
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
}
#iew-banner-exchange .iew-be-code-area h3 {
margin: 15px 0 12px;
color: var(--iew-be-white);
font-family: Georgia, serif;
font-size: 30px;
font-weight: 400;
}
#iew-banner-exchange .iew-be-code-area > p {
margin: 0 0 25px;
color: rgba(255,255,255,.58);
font-size: 13px;
line-height: 1.75;
}
#iew-banner-exchange .iew-be-code-box {
padding: 22px;
overflow-x: auto;
border: 1px solid rgba(189,166,206,.18);
background: #211d2a;
}
#iew-banner-exchange .iew-be-code-box pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
#iew-banner-exchange .iew-be-code-box code {
color: rgba(255,255,255,.75);
font-family: Consolas, Monaco, monospace;
font-size: 12px;
line-height: 1.8;
}
#iew-banner-exchange .iew-be-copy-btn {
min-height: 50px;
margin-top: 18px;
padding: 0 23px;
border: 0;
background: var(--iew-be-purple);
color: var(--iew-be-white);
cursor: pointer;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: .3s ease;
}
#iew-banner-exchange .iew-be-copy-btn:hover {
background: var(--iew-be-lavender);
transform: translateY(-2px);
}
#iew-banner-exchange .iew-be-copy-message {
display: block;
min-height: 18px;
margin-top: 12px;
color: var(--iew-be-blue);
font-size: 12px;
}
/* =========================================================
AFTER PLACEMENT
========================================================= */
#iew-banner-exchange .iew-be-after {
padding: 110px 0;
background: var(--iew-be-cream);
}
#iew-banner-exchange .iew-be-after-box {
max-width: 850px;
margin: 0 auto;
text-align: center;
}
#iew-banner-exchange .iew-be-after-box h2 {
margin-bottom: 20px;
}
#iew-banner-exchange .iew-be-after-box > p {
max-width: 650px;
margin: 0 auto 30px;
color: var(--iew-be-text);
font-size: 14px;
line-height: 1.85;
}
/* =========================================================
FINAL CTA
========================================================= */
#iew-banner-exchange .iew-be-final {
padding: 110px 0;
background: var(--iew-be-cream);
}
#iew-banner-exchange .iew-be-final-box {
position: relative;
padding: 85px 70px;
overflow: hidden;
text-align: center;
background:
radial-gradient(
circle at 15% 20%,
rgba(180,211,217,.15),
transparent 28%
),
radial-gradient(
circle at 85% 80%,
rgba(189,166,206,.18),
transparent 30%
),
var(--iew-be-dark);
}
#iew-banner-exchange .iew-be-final-box::before,
#iew-banner-exchange .iew-be-final-box::after {
content: "";
position: absolute;
border: 1px solid rgba(189,166,206,.15);
border-radius: 50%;
pointer-events: none;
}
#iew-banner-exchange .iew-be-final-box::before {
width: 250px;
height: 250px;
left: -100px;
top: -100px;
}
#iew-banner-exchange .iew-be-final-box::after {
width: 330px;
height: 330px;
right: -140px;
bottom: -170px;
}
#iew-banner-exchange .iew-be-final-box .iew-be-section-tag {
position: relative;
z-index: 2;
}
#iew-banner-exchange .iew-be-final-box h2 {
position: relative;
z-index: 2;
max-width: 800px;
margin: 15px auto 20px;
color: var(--iew-be-white);
}
#iew-banner-exchange .iew-be-final-box h2 strong {
color: var(--iew-be-lavender);
}
#iew-banner-exchange .iew-be-final-box > p {
position: relative;
z-index: 2;
max-width: 620px;
margin: 0 auto;
color: rgba(255,255,255,.62);
font-size: 14px;
line-height: 1.85;
}
#iew-banner-exchange .iew-be-final-box .iew-be-btn {
position: relative;
z-index: 2;
margin-top: 30px;
}
/* =========================================================
RESPONSIVE — 1100px
========================================================= */
@media (max-width: 1100px) {
#iew-banner-exchange .iew-be-process-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================================================
RESPONSIVE — 900px
========================================================= */
@media (max-width: 900px) {
#iew-banner-exchange .iew-be-banner-grid {
grid-template-columns: 1fr;
gap: 55px;
}
}
/* =========================================================
RESPONSIVE — 800px
========================================================= */
@media (max-width: 800px) {
#iew-banner-exchange .iew-be-hero {
min-height: 620px;
}
#iew-banner-exchange .iew-be-hero-location {
display: none;
}
#iew-banner-exchange .iew-be-intro .iew-be-container {
grid-template-columns: 1fr;
gap: 25px;
}
#iew-banner-exchange .iew-be-intro-label {
display: flex;
align-items: center;
gap: 15px;
}
#iew-banner-exchange .iew-be-intro-label::after {
display: none;
}
#iew-banner-exchange .iew-be-intro-label p {
margin: 0;
}
#iew-banner-exchange .iew-be-section-heading {
display: block;
}
#iew-banner-exchange .iew-be-section-heading > p {
margin-top: 22px;
}
}
/* =========================================================
RESPONSIVE — 600px
========================================================= */
@media (max-width: 600px) {
#iew-banner-exchange .iew-be-container,
#iew-banner-exchange .iew-be-hero-content {
width: min(100% - 34px, 1180px);
}
#iew-banner-exchange .iew-be-hero h1 {
font-size: 51px;
letter-spacing: -2px;
}
#iew-banner-exchange .iew-be-hero-content > p {
font-size: 14px;
line-height: 1.75;
}
#iew-banner-exchange .iew-be-intro,
#iew-banner-exchange .iew-be-process,
#iew-banner-exchange .iew-be-banner-section,
#iew-banner-exchange .iew-be-after,
#iew-banner-exchange .iew-be-final {
padding: 80px 0;
}
#iew-banner-exchange .iew-be-process-grid {
grid-template-columns: 1fr;
}
#iew-banner-exchange .iew-be-code-area {
padding: 30px 22px;
}
#iew-banner-exchange .iew-be-final-box {
padding: 65px 25px;
}
#iew-banner-exchange .iew-be-banner-frame {
padding: 15px;
}
}
/* =========================================================
RESPONSIVE — 430px
========================================================= */
@media (max-width: 430px) {
#iew-banner-exchange .iew-be-hero h1 {
font-size: 43px;
}
#iew-banner-exchange .iew-be-eyebrow,
#iew-banner-exchange .iew-be-section-tag {
font-size: 9px;
letter-spacing: 2px;
}
#iew-banner-exchange .iew-be-btn {
width: 100%;
}
#iew-banner-exchange .iew-be-hero-buttons {
width: 100%;
}
#iew-banner-exchange .iew-be-intro-content h2,
#iew-banner-exchange .iew-be-section-heading h2,
#iew-banner-exchange .iew-be-banner-preview h2,
#iew-banner-exchange .iew-be-after-box h2,
#iew-banner-exchange .iew-be-final-box h2 {
font-size: 36px;
}
#iew-banner-exchange .iew-be-process-card {
min-height: 310px;
}
}/* End custom CSS */