/* GLOBAL STYLES */
body {
    font-family: 'Raleway';
}

.website-wrap {
    width: 91vw;
    margin: auto;
}

.is-flex {
    display: flex;
}



/* TYPOGRAPHY */
h1.h1 {
    color: #A67D2D;
    font-family: Raleway;
    font-size: 2rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    padding-bottom: 24px;
}

h2.h2 {
    color: #A67D2D;
    text-align: center;
    font-family: Raleway;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    background-color: #1A1F52;
    width: 21.1vw;
}

h3.h3 {
    color: #A67D2D;
    font-family: Raleway;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background-color: #1A1F52;
    width: 21.1vw;
    padding: 4px 0px 4px 12px;
    margin-bottom: 12px;
}

h3.h3-2 {
    color: #1A1F52;
    font-family: Raleway;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 12px;
}

h4.h4 {
    color: #1A1F52;
    font-family: Raleway;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    padding-bottom: 4px;
}

h5.h5 {
    color: #1A1F52;
    font-family: Raleway;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 4px;
}

.sidebar-txt {
    color: #A67D2D;
    font-family: Raleway;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 0.75rem;
}

.last-p {
    padding-bottom: 44px;
}




/* NAVIGATION */
nav {
    background-color: #1A1F52;
}

ul.is-flex {
    height: 124px;
    justify-content: center;
    align-items: center;
}

.navbar-logo {
    height: 5.5vw;
    padding: 6.1vw;
}

.navbar-links {
    color: #A67D2D;
    font-family: 'Bodoni Moda';
    /* clamp = min size, ideal size, max size */
    font-size: clamp(0.875rem, 1.5rem, 1.5rem);
    font-weight: 600;
    text-decoration: none;
}

.navbar-links:hover {
    color: #fff;
}



/* SIDEBAR */
.side-col {
    width: 21vw;
    background-color: #1A1F52;
    margin-top: 62px;
}

.sidebar-logo {
    padding: 32px;
}

.sidebar-txt-wrap {
    padding-left: 2.2vw;
    padding-right: 2.2vw;
}

.first-p {
    color: #A67D2D;
    font-family: Raleway;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}




/* MAIN BODY */
.body-col {
    width: 67vw;
    margin-left: 2.2vw;
    margin-top: 168px;
}




/* CONTACT FORM SECTION */
.body-col {
    margin-left: 2.2vw;
    height: 57.7vh;
    width: 60vw;
}

.name-left {
    width: 28.8vw;
}

.surname-right {
    width: 28.8vw;
    margin-left: 2.2vw;
}

/* Label Styles */
label[for="firstName"], label[for="lastName"], label[for="email"], label[for="text"], label[for="selection"] {
    color: #1A1F52;
    font-family: Raleway;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* Input Styles */
input[type="text"], input[type="password"], input[type="email"] {
    background-color: #1a1f5248;
    width: 100%;
    height: 40px;
    padding-left: 8px;
    margin-bottom: 32px;
    border-radius: 0;
    margin-top: 12px;
}

input[type="submit"] {
    background-color: #1A1F52;
    color: #A67D2D;
    text-align: center;
    font-family: Raleway;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 13.3vw;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid #1A1F52;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
}

/* Hover States */
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover {
    background-color: #1A1F52;
    border-radius: 0;
    transition: all .2s ease-in-out;
}

input[type="submit"]:hover {
    transform: scale(1.1); 
}

select[name="service"]:hover {
    background-color: #1A1F52;
    border-radius: 0;
    transition: all .2s ease-in-out;
}

/* Focus States */
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="address"]:focus {
    background-color: #1a1f5248;
    outline-color: #1A1F52;
    border-radius: 0;
}

select[name="service"]:focus {
    background-color: #1a1f5248;
    outline-color: #1A1F52;
    border-radius: 0;
}

/* Dropdown */
.dropdown {
    flex-direction: column;
}

select[name="service"] {
    background-color: #1a1f5248;
    width: 100%;
    height: 40px;
    padding-left: 8px;
    margin-bottom: 32px;
    border-radius: 0;
    margin-top: 12px;
}

/* Option Styles */
option[value="User Experience"], option[value="User Interface"], option[value="Branding"], option[value="Pitch Deck"], option[value="Novel Interiors"], option[value="Multiple Services"] {
    font-family: 'Raleway';
    color: #1A1F52;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    padding: 2px 0 2px 0;
}