/* =========================
REVONOR BUSINESS CARD
========================= */

.business-card-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
box-sizing: border-box;
background: #F7F4EF;
font-family: Arial, Helvetica, sans-serif;
}

/* BUSINESS CARD */
.business-card {
width: 900px;
max-width: 100%;
aspect-ratio: 1.75 / 1;
background: #FFFFFF;
display: flex;
overflow: hidden;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
}

/* =========================
LEFT SIDE / LOGO
========================= */

.business-card-left {
width: 42%;
background: #234234;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
box-sizing: border-box;
}

/* YOUR LOGO */
.business-logo {
width: 220px;
height: auto;
max-width: 100%;
display: block;
}

/* =========================
RIGHT SIDE / DETAILS
========================= */

.business-card-right {
width: 58%;
padding: 60px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
background: #FFFFFF;
}

/* Decorative line */
.business-card-line {
width: 60px;
height: 3px;
background: #B87333;
margin-bottom: 25px;
}

/* Business name */
.business-name {
margin: 0 0 12px 0;
color: #234234;
font-size: 38px;
font-weight: 600;
letter-spacing: 1px;
}

/* Your name */
.person-name {
margin: 0 0 35px 0;
color: #333333;
font-size: 22px;
font-weight: 400;
}

/* Contact details */
.contact-details {
display: flex;
flex-direction: column;
gap: 14px;
}

/* Individual contact link */
.contact-item {
color: #333333;
font-size: 17px;
text-decoration: none;
transition: color 0.2s ease;
}

.contact-item:hover {
color: #B87333;
}

/* Contact letters */
.contact-label {
color: #B87333;
font-weight: 600;
display: inline-block;
width: 22px;
margin-right: 4px;
}

/* =========================
MOBILE
========================= */

@media (max-width: 700px) {

.business-card-page {
padding: 20px;
min-height: 100vh;
}

.business-card {
width: 100%;
max-width: 420px;
aspect-ratio: auto;
min-height: 650px;
flex-direction: column;
}

.business-card-left {
width: 100%;
height: 42%;
min-height: 250px;
padding: 35px;
}

.business-logo {
width: 180px;
max-width: 80%;
}

.business-card-right {
width: 100%;
height: 58%;
padding: 40px 30px;
justify-content: center;
}

.business-name {
font-size: 30px;
}

.person-name {
font-size: 20px;
margin-bottom: 30px;
}

.contact-item {
font-size: 16px;
}
}

/* =========================
VERY SMALL PHONES
========================= */

@media (max-width: 380px) {

.business-card-page {
padding: 12px;
}

.business-card {
min-height: 620px;
}

.business-card-left {
min-height: 220px;
}

.business-logo {
width: 150px;
}

.business-card-right {
padding: 30px 24px;
}

.business-name {
font-size: 26px;
}

.person-name {
font-size: 18px;
}

.contact-item {
font-size: 15px;
}
}