* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Roboto', sans-serif; 
    scroll-behavior: smooth; 
} :root { 
    --charcoal: #353333; 
    --pink: #f5b7d2; 
    --brown: rgb(187, 125, 66); 
    --white: #fffdd0; 
    --black: #000000; 
    --blush: #F8C8DC; 
    --rose: #E75480; 
    }
html, body { 
    font-family: 'allura'; 
    background: var(--black); 
    width: 100%; cursor: pointer; 
    scroll-behavior:smooth; 
    overflow-x:hidden; 
    color: var(--white); 
} 
a{ 
    text-decoration:none; 
    color:inherit; 
} 
/* Feedback page */ form { 
    background: #111111; 
    padding: 25px; 
    margin-top: 30px; 
    width: 900px; 
    margin-right: 30px; 
    margin-left: 90px; 
    margin-bottom: 5px; 
}
.contact-info { 
    width: 900px; 
    margin-top: 30px; 
    margin-left: 100px; 
} 
.contact-info p{ 
    color: var(--white); 
    font-size: 16px; 
    margin-bottom: 18px; 
} 
    .info-item { 
        display: flex; 
        gap: 20px; 
        margin-bottom: 30px; 
        border-width: 1px; 
        border-color: #aaa; 
    } 
    .info-item i { 
        color: var(--pink); 
        font-size: 22px; 
        margin-top: 4px; 
        margin-left: 10px; 
    }
.info-item h4 { 
    display: flex; 
    gap: 20px; 
    font-size: 14px; 
    letter-spacing: 1px; 
    margin-bottom: 6px; 
    color: var(--white); 
} 
.info-item p { 
    color: #c9a87a; 
    line-height: 1.6; 
} hr { 
    border: none; 
    border-top: 1px solid #333; 
    margin: 50px auto; 
    max-width: 800px; 
} 
.contact-form h2 { 
    color: var(--pink); 
    font-family: 'Allura'; 
    font-size: 36px;
    margin-bottom: 8px; 
}
/* FORM ELEMENTS */ 
.contact-form label { 
    display: block; 
    margin-bottom: 8px; 
    font-size: 14px; 
} 
.contact-form input, 
.contact-form textarea, 
.contact-form select { 
    width: 100%; 
    background: var(--black); 
    border: 1px solid var(--black); 
    color: var(--white); 
    padding: 14px; 
    margin-bottom: 20px; 
    font-size: 15px; 
} 
.contact-form button { 
    width: 100%; 
    background: var(--pink); 
    border: none; 
    padding: 16px; 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 16px; 
}
.contact-form { 
    display: flex; 
    margin-left: 0 auto; 
    align-items: flex-start; 
    background-color: black; 
    flex: 2; /* bigger */ 
    margin-top: 50px; 
} /* RIGHT SIDE */ 
    
.pic-box { 
    background: #0b0b0b; 
    padding: 15px; 
    text-align: center; 
    color: white; 
    width: 100%; 
    height: 500px; 
    overflow: hidden; 
    transition: 0.3s ease; 
} 
    .pic-box.active { 
        opacity: 1; 
        transform: translateY(0); 
        display: block; 
    }
.pic-box:hover { 
    transform: scale(1.02); 
    cursor: pointer; 
} 
.pic-box video { 
    width: 100%; 
    border-radius: 10px; 
    height: 220px; 
    object-fit: cover; 
} 
/* ========================================= MOBILE ========================================= */
@media screen and (max-width:768px){ .contact-form{ display:flex; flex-direction:column; margin-top:80px; padding:20px; } .contact-info{ width:100%; margin:0 0 30px 0;
    } .contact-info h2{ 
        font-size:32px; 
        text-align:center; 
        margin-bottom:15px; 
    } 
    .contact-info p{ 
        font-size:15px; 
    } 
    .info-item{
        gap:15px; 
        margin-bottom:25px; 
    } 
    .info-item i{ 
        font-size:20px; 
        margin-left:0; 
    } 
    .info-item h4{ 
        font-size:13px; 
    }
        .info-item p{ 
            font-size:15px; 
        } 
        form{ 
            width:100%; 
            margin:0; 
            padding:20px; 
        } 
        .contact-form label{
            font-size:15px; 
        } 
        .contact-form input, 
        .contact-form textarea, 
        .contact-form select{ 
            padding:15px; 
            font-size:16px; 
        } 
        .contact-form button{ 
            padding:16px; 
            font-size:17px;
        } 
    } 
    /* ========================================= SMALL PHONES ========================================= */ @media screen and (max-width:420px){ .contact-form{ padding:15px; }
            .contact-info h2{ 
                 font-size:28px; 
            } .info-item{ 
                align-items:flex-start; 
            } 
            .contact-form input, 
            .contact-form textarea, 
            .contact-form select{ 
                font-size:15px; 
                padding:14px;
                } 
                .contact-form button{ 
                    font-size:16px; } 
                }