/* Start custom CSS for html, class: .elementor-element-c03acfc */.ls-hero {
position: relative;
width: 100%;
min-height: 850px;
overflow: hidden;
background:
radial-gradient(
circle at 50% 72%,
rgba(100,72,45,.25),
transparent 28%
),
#050505;
color: #f3eee7;
}
.ls-hero-container {
position: relative;
width: min(1180px, calc(100% - 70px));
height: 850px;
margin: auto;
}
/* DESCRIPTION */
.ls-hero-description {
position: absolute;
top: 235px;
left: 0;
width: 210px;
color: #9d9992;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.6;
}
/* HEADING */
.ls-hero-title {
position: absolute;
top: 130px;
left: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: clamp(60px, 7vw, 105px);
font-weight: 400;
line-height: .88;
letter-spacing: -.055em;
color: #f3eee7;
}
.ls-hero-title span {
display: block;
margin-left: 175px;
margin-top: 15px;
font-family: Georgia, serif;
font-style: italic;
font-weight: 400;
}
/* BUTTON */
.ls-hero-button {
position: absolute;
top: 430px;
right: 12%;
color: #f3eee7 !important;
text-decoration: none !important;
font-size: 12px;
border-bottom:
1px solid rgba(255,255,255,.5);
padding-bottom: 6px;
transition: .3s ease;
}
.ls-hero-button::after {
content: "↗";
margin-left: 8px;
}
.ls-hero-button:hover {
color: #fff !important;
border-color: #fff;
}
/* SPEAKER */
.ls-hero-speaker {
position: absolute;
width: 350px;
right: 27%;
bottom: 70px;
z-index: 3;
}
.ls-hero-speaker img {
display: block;
width: 100%;
height: auto;
filter:
drop-shadow(
0 30px 35px rgba(0,0,0,.85)
);
}
/* FLOOR */
.ls-hero-floor {
position: absolute;
left: 10%;
right: 10%;
bottom: 65px;
height: 2px;
background:
radial-gradient(
ellipse,
rgba(255,255,255,.22),
transparent 70%
);
filter: blur(8px);
}
/* MOBILE */
@media(max-width:767px) {
.ls-hero {
min-height: 720px;
}
.ls-hero-container {
width: calc(100% - 30px);
height: 720px;
}
.ls-hero-title {
top: 130px;
font-size: 54px;
}
.ls-hero-title span {
margin-left: 0;
margin-top: 12px;
}
.ls-hero-description {
top: 275px;
width: 220px;
font-size: 11px;
}
.ls-hero-speaker {
width: 240px;
right: 50%;
transform: translateX(50%);
bottom: 40px;
}
.ls-hero-button {
right: 20px;
top: auto;
bottom: 55px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ecc1d0c */.ls-collection {
width: 100%;
padding: 0 0 150px;
background: #0b0a09;
color: #fff;
}
.ls-collection-container {
width: min(1180px, calc(100% - 70px));
margin: auto;
}
/* HEADER */
.ls-collection-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.ls-collection-label {
display: flex;
align-items: center;
gap: 10px;
color: #77736d;
font-size: 11px;
}
.ls-collection-label::before {
content: "";
width: 7px;
height: 7px;
border:
1px solid #77736d;
border-radius: 50%;
}
.ls-view-all {
color: #ddd8d0 !important;
text-decoration: none !important;
font-size: 12px;
border-bottom:
1px solid rgba(255,255,255,.4);
padding-bottom: 5px;
}
/* GRID */
.ls-product-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 18px;
}
/* CARD */
.ls-product-card {
position: relative;
height: 450px;
overflow: hidden;
background: #11100f;
}
/* IMAGE */
.ls-product-image {
position: absolute;
inset: 0;
}
.ls-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform .8s
cubic-bezier(.2,.7,.2,1);
}
.ls-product-card:hover
.ls-product-image img {
transform: scale(1.06);
}
/* GRADIENT */
.ls-product-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(0,0,0,.9),
rgba(0,0,0,.05) 65%
);
}
/* PRODUCT INFO */
.ls-product-info {
position: absolute;
left: 20px;
right: 20px;
bottom: 18px;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
/* PRODUCT NAME */
.ls-product-name {
display: block;
color: #fff;
font-family: Arial, sans-serif;
font-size: 13px;
margin-bottom: 5px;
}
/* SUBTITLE */
.ls-product-price {
display: block;
color: rgba(255,255,255,.55);
font-size: 10px;
}
/* LINK */
.ls-product-link {
color: rgba(255,255,255,.75) !important;
text-decoration: none !important;
font-size: 11px;
border-bottom:
1px solid rgba(255,255,255,.35);
padding-bottom: 4px;
}
.ls-product-link::after {
content: " ↗";
}
/* TABLET */
@media(max-width:900px) {
.ls-product-grid {
grid-template-columns:
repeat(2,1fr);
}
}
/* MOBILE */
@media(max-width:600px) {
.ls-collection {
padding-bottom: 90px;
}
.ls-collection-container {
width: calc(100% - 30px);
}
.ls-product-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.ls-product-card {
height: 470px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fc93c99 *//* ==========================================
PHILOSOPHY SECTION
========================================== */
.ls-philosophy {
position: relative;
width: 100%;
padding: 150px 0 170px;
background: #0b0a09;
color: #f2eee8;
overflow: hidden;
}
/* ==========================================
CONTAINER
========================================== */
.ls-philosophy-container {
width: min(1180px, calc(100% - 70px));
margin: 0 auto;
display: grid;
grid-template-columns: 30% 70%;
align-items: start;
}
/* ==========================================
LABEL
========================================== */
.ls-philosophy-label {
display: flex;
align-items: center;
gap: 10px;
padding-top: 8px;
color: #77736d;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 400;
}
.ls-label-dot {
display: block;
width: 7px;
height: 7px;
border: 1px solid #77736d;
border-radius: 50%;
flex-shrink: 0;
}
/* ==========================================
CONTENT
========================================== */
.ls-philosophy-content {
width: 100%;
max-width: 850px;
}
/* ==========================================
HEADING
========================================== */
.ls-philosophy-heading {
margin: 0;
padding: 0;
color: #f1ede6;
font-family:
Arial,
Helvetica,
sans-serif;
font-size:
clamp(48px, 5.3vw, 76px);
font-weight: 400;
line-height: .98;
letter-spacing: -.055em;
}
.ls-philosophy-heading em {
font-family:
Georgia,
"Times New Roman",
serif;
font-style: italic;
font-weight: 400;
letter-spacing: -.045em;
}
/* ==========================================
TEXT AREA
========================================== */
.ls-philosophy-bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 45px;
margin-left: 25%;
}
.ls-philosophy-text {
width: 100%;
max-width: 380px;
}
.ls-philosophy-text p {
margin: 0 0 18px;
color: #8e8982;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 12px;
line-height: 1.65;
}
/* ==========================================
LINK
========================================== */
.ls-philosophy-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
color: #e8e2d9 !important;
font-family: Arial, sans-serif;
font-size: 11px;
text-decoration: none !important;
border-bottom:
1px solid rgba(255,255,255,.35);
padding-bottom: 6px;
transition: .3s ease;
}
.ls-philosophy-link span {
font-size: 13px;
transition: transform .3s ease;
}
.ls-philosophy-link:hover {
color: #fff !important;
border-color: #fff;
}
.ls-philosophy-link:hover span {
transform:
translate(3px,-3px);
}
/* ==========================================
IMAGE
========================================== */
.ls-philosophy-image {
position: relative;
width: 100%;
margin-top: 80px;
margin-left: 0;
overflow: hidden;
background: #111;
}
.ls-philosophy-image img {
display: block;
width: 100%;
height: 520px;
object-fit: cover;
object-position: center;
transition:
transform .8s
cubic-bezier(.2,.7,.2,1);
}
/* IMAGE HOVER */
.ls-philosophy-image:hover img {
transform: scale(1.035);
}
/* ==========================================
IMAGE OVERLAY
========================================== */
.ls-philosophy-image::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(0,0,0,.05),
rgba(0,0,0,.18)
);
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 900px) {
.ls-philosophy {
padding: 120px 0 130px;
}
.ls-philosophy-container {
width: calc(100% - 50px);
grid-template-columns: 25% 75%;
}
.ls-philosophy-heading {
font-size:
clamp(43px, 6vw, 65px);
}
.ls-philosophy-bottom {
margin-left: 15%;
}
.ls-philosophy-image {
margin-top: 65px;
}
.ls-philosophy-image img {
height: 450px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.ls-philosophy {
padding: 90px 0 100px;
}
.ls-philosophy-container {
width: calc(100% - 30px);
display: block;
}
/* LABEL */
.ls-philosophy-label {
margin-bottom: 40px;
}
/* HEADING */
.ls-philosophy-heading {
font-size: 45px;
line-height: .98;
letter-spacing: -.045em;
}
/* TEXT */
.ls-philosophy-bottom {
margin-left: 0;
margin-top: 38px;
}
.ls-philosophy-text {
max-width: 100%;
}
.ls-philosophy-text p {
font-size: 12px;
line-height: 1.7;
}
/* IMAGE */
.ls-philosophy-image {
margin-top: 55px;
}
.ls-philosophy-image img {
width: 100%;
height: 360px;
object-fit: cover;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.ls-philosophy {
padding: 75px 0 85px;
}
.ls-philosophy-heading {
font-size: 39px;
}
.ls-philosophy-image {
margin-top: 45px;
}
.ls-philosophy-image img {
height: 300px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4b0c38e *//* ==========================================
MS TRADERS
OUR STORY SECTION
========================================== */
.ms-story-section {
position: relative;
width: 100%;
padding: 160px 0 170px;
background: #0d0c0b;
color: #f3eee8;
overflow: hidden;
}
/* ==========================================
MAIN CONTAINER
========================================== */
.ms-story-container {
width: min(1180px, calc(100% - 70px));
margin: 0 auto;
display: grid;
grid-template-columns: 30% 70%;
align-items: start;
}
/* ==========================================
LEFT LABEL
========================================== */
.ms-story-label {
display: flex;
align-items: center;
gap: 10px;
padding-top: 9px;
color: #77736d;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 400;
}
/* DOT */
.ms-story-dot {
display: block;
width: 7px;
height: 7px;
border: 1px solid #77736d;
border-radius: 50%;
flex-shrink: 0;
}
/* ==========================================
RIGHT CONTENT
========================================== */
.ms-story-content {
width: 100%;
max-width: 850px;
}
/* ==========================================
MAIN HEADING
========================================== */
.ms-story-heading {
margin: 0;
padding: 0;
max-width: 820px;
color: #f3eee8;
font-family:
Arial,
Helvetica,
sans-serif;
font-size:
clamp(52px, 6vw, 82px);
font-weight: 400;
line-height: .93;
letter-spacing: -.055em;
}
/* ITALIC WORD */
.ms-story-heading em {
font-family:
Georgia,
"Times New Roman",
serif;
font-style: italic;
font-weight: 400;
letter-spacing: -.045em;
}
/* ==========================================
IMAGE
========================================== */
.ms-story-image {
position: relative;
width: 100%;
margin-top: 70px;
overflow: hidden;
background: #11100f;
}
/* IMAGE */
.ms-story-image img {
display: block;
width: 100%;
height: 520px;
object-fit: cover;
object-position: center;
transition:
transform .9s
cubic-bezier(.2,.7,.2,1);
}
/* HOVER */
.ms-story-image:hover img {
transform: scale(1.035);
}
/* IMAGE DARK OVERLAY */
.ms-story-image::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(0,0,0,.02),
rgba(0,0,0,.20)
);
}
/* ==========================================
BOTTOM AREA
========================================== */
.ms-story-bottom {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 70px;
margin-top: 48px;
margin-left: 15%;
}
/* ==========================================
DESCRIPTION
========================================== */
.ms-story-text {
width: 100%;
max-width: 390px;
}
.ms-story-text p {
margin: 0 0 18px;
color: #8e8982;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.7;
}
/* ==========================================
CTA
========================================== */
.ms-story-button {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-top: 4px;
color: #e9e3db !important;
text-decoration: none !important;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
font-weight: 400;
border-bottom:
1px solid rgba(255,255,255,.4);
padding-bottom: 7px;
transition:
color .3s ease,
border-color .3s ease;
}
/* ARROW */
.ms-story-button span {
font-size: 13px;
transition:
transform .3s ease;
}
/* BUTTON HOVER */
.ms-story-button:hover {
color: #ffffff !important;
border-color: #ffffff;
}
.ms-story-button:hover span {
transform:
translate(3px,-3px);
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 900px) {
.ms-story-section {
padding: 120px 0 130px;
}
.ms-story-container {
width: calc(100% - 50px);
grid-template-columns: 25% 75%;
}
.ms-story-heading {
font-size:
clamp(45px, 6vw, 68px);
}
.ms-story-image {
margin-top: 55px;
}
.ms-story-image img {
height: 450px;
}
.ms-story-bottom {
margin-left: 8%;
gap: 40px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.ms-story-section {
padding: 90px 0 100px;
}
.ms-story-container {
width: calc(100% - 30px);
display: block;
}
/* LABEL */
.ms-story-label {
margin-bottom: 40px;
}
/* HEADING */
.ms-story-heading {
font-size: 46px;
line-height: .96;
letter-spacing: -.045em;
}
/* IMAGE */
.ms-story-image {
margin-top: 45px;
}
.ms-story-image img {
width: 100%;
height: 360px;
object-fit: cover;
}
/* BOTTOM */
.ms-story-bottom {
display: block;
margin-left: 0;
margin-top: 35px;
}
/* TEXT */
.ms-story-text {
max-width: 100%;
}
.ms-story-text p {
font-size: 12px;
line-height: 1.7;
}
/* BUTTON */
.ms-story-button {
margin-top: 12px;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.ms-story-section {
padding: 75px 0 85px;
}
.ms-story-heading {
font-size: 40px;
}
.ms-story-image img {
height: 300px;
}
}/* End custom CSS */