.nomad-strip {
position: relative;
display: grid !important;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
width: 100% !important;
padding: 18px 22px !important;
background: #0e2946 !important;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px !important;
box-shadow: 0 12px 30px rgba(2, 16, 31, 0.15);
overflow: hidden;
text-decoration: none;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
cursor: pointer;
margin: 2rem 0 !important;
}
.nomad-strip:hover {
transform: translateY(-2px);
border-color: rgba(127, 212, 255, 0.25);
box-shadow: 0 18px 40px rgba(2, 16, 31, 0.25);
} .nomad-strip::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(127, 212, 255, 0.06) 50%,
transparent 100%);
pointer-events: none;
transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1;
}
.nomad-strip:hover::before {
left: 100%;
} .nomad-strip::after {
content: "";
position: absolute;
top: 12px;
bottom: 12px;
left: 0;
width: 3px;
background: linear-gradient(180deg, var(--bee-blue), transparent);
border-radius: 0 3px 3px 0;
pointer-events: none;
z-index: 2;
} .nomad-strip .nomad-strip-icon {
position: relative;
z-index: 2;
display: grid !important;
place-items: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(127, 212, 255, 0.10);
border: 1px solid rgba(127, 212, 255, 0.18);
}
.nomad-strip .nomad-strip-icon i,
.nomad-strip .nomad-strip-icon svg {
font-size: 16px;
width: 16px;
height: 16px;
color: var(--bee-blue);
fill: var(--bee-blue);
} .nomad-strip .nomad-strip-content {
position: relative;
z-index: 2;
min-width: 0;
display: grid !important;
gap: 4px;
} .nomad-strip .nomad-strip-meta {
display: grid !important;
padding: 0 !important;
grid-auto-flow: column;
grid-auto-columns: max-content;
align-items: center;
gap: 10px;
}
.nomad-strip .nomad-strip-eyebrow,
.nomad-strip .nomad-strip-eyebrow p {
font-size: 14px;
font-weight: 700;
color: var(--bee-blue);
letter-spacing: 1.2px;
text-transform: uppercase;
margin: 0;
line-height: 1;
} .nomad-strip .nomad-strip-eyebrow::after {
content: "";
display: inline-block;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
margin-left: 10px;
vertical-align: middle;
position: relative;
top: -1px;
}
.nomad-strip .nomad-strip-scope,
.nomad-strip .nomad-strip-scope p {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.5px;
text-transform: uppercase;
margin: 0;
line-height: 1;
} .nomad-strip .nomad-strip-title,
.nomad-strip .nomad-strip-title .elementor-heading-title {
font-size: 22px;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
line-height: 1.4;
margin: 0;
letter-spacing: -0.1px;
}
.nomad-strip .nomad-strip-title em,
.nomad-strip .nomad-strip-title .elementor-heading-title em {
font-style: italic;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--bee-blue) 0%, #fff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}                            @media (max-width: 900px) {
.nomad-strip {
gap: 18px;
padding: 16px 18px;
}
.nomad-strip .nomad-strip-title,
.nomad-strip .nomad-strip-title .elementor-heading-title {
font-size: 14px;
}
.nomad-strip .nomad-strip-scope{
display:none !important;
}
}
@media (max-width: 700px) {
.nomad-strip {
grid-template-columns: auto 1fr;
grid-template-areas:
"icon content"
"cta cta";
gap: 14px 14px;
padding: 16px;
}
.nomad-strip .nomad-strip-icon {
grid-area: icon;
}
.nomad-strip .nomad-strip-content {
grid-area: content;
}
.nomad-strip .nomad-strip-cta {
grid-area: cta;
justify-self: stretch;
justify-content: center;
}
.nomad-strip::after {
top: 0;
left: 16px;
right: 16px;
bottom: auto;
width: auto;
height: 3px;
background: linear-gradient(90deg, var(--bee-blue), transparent);
border-radius: 0 0 3px 3px;
}
}
@media (max-width: 480px) {
.nomad-strip {
border-radius: 14px;
padding: 14px;
}
.nomad-strip .nomad-strip-title,
.nomad-strip .nomad-strip-title .elementor-heading-title {
font-size: 13px;
line-height: 1.45;
}
}