.rsg-contact {
font-family: Arial, Helvetica, sans-serif;
color: #333;
background: #fff;
}
/* HERO */
.rsg-contact-hero {
background: #003366;
color: #fff;
padding: 75px 30px;
text-align: center;
}
.rsg-contact-hero > div {
max-width: 850px;
margin: auto;
}
.rsg-contact-kicker,
.rsg-section-title > span,
.rsg-info-header > span,
.rsg-location-content > span,
.rsg-contact-cta span {
display: block;
color: #ff6600;
font-weight: 700;
letter-spacing: 2px;
font-size: 13px;
margin-bottom: 12px;
}
.rsg-contact-hero h1 {
margin: 0 0 18px;
color: #fff;
font-size: 44px;
line-height: 1.15;
font-weight: 800;
}
.rsg-contact-hero p {
max-width: 700px;
margin: auto;
font-size: 18px;
line-height: 1.7;
color: #fff;
}
/* CARDS */
.rsg-contact-options {
max-width: 1150px;
margin: -35px auto 70px;
padding: 0 25px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
position: relative;
}
.rsg-contact-card {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 8px 30px rgba(0,0,0,.10);
border: 1px solid #eee;
}
.rsg-contact-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #fff3eb;
border-radius: 50%;
font-size: 21px;
margin-bottom: 18px;
}
.rsg-contact-card h2 {
color: #003366;
font-size: 20px;
margin: 0 0 10px;
}
.rsg-contact-card p {
color: #666;
line-height: 1.6;
}
.rsg-contact-card a {
color: #003366;
font-weight: 700;
text-decoration: none;
}
.rsg-contact-card a:hover {
color: #ff6600;
}
.rsg-contact-card span {
font-size: 13px;
color: #777;
}
/* MAIN */
.rsg-contact-main {
max-width: 1150px;
margin: 0 auto 80px;
padding: 0 25px;
display: grid;
grid-template-columns: 1.5fr .8fr;
gap: 60px;
}
.rsg-section-title {
margin-bottom: 35px;
}
.rsg-section-title h2 {
color: #003366;
font-size: 34px;
margin: 0 0 10px;
}
.rsg-section-title p {
color: #666;
margin: 0;
}
/* FORM */
.rsg-form {
background: #f7f7f7;
padding: 35px;
border-radius: 8px;
}
.rsg-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.rsg-field {
margin-bottom: 22px;
}
.rsg-field label {
display: block;
color: #003366;
font-weight: 700;
font-size: 14px;
margin-bottom: 8px;
}
.rsg-field input,
.rsg-field select,
.rsg-field textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #d5d5d5;
background: #fff;
border-radius: 5px;
padding: 14px 15px;
font-family: inherit;
font-size: 15px;
color: #333;
outline: none;
}
.rsg-field input:focus,
.rsg-field select:focus,
.rsg-field textarea:focus {
border-color: #003366;
box-shadow: 0 0 0 2px rgba(0,51,102,.08);
}
.rsg-field textarea {
resize: vertical;
}
.rsg-form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
margin-top: 10px;
}
.rsg-form-footer p {
color: #777;
font-size: 12px;
line-height: 1.5;
margin: 0;
}
.rsg-form-footer button {
flex-shrink: 0;
border: 0;
background: #ff6600;
color: #fff;
padding: 16px 25px;
border-radius: 5px;
font-weight: 800;
cursor: pointer;
letter-spacing: .5px;
}
.rsg-form-footer button:hover {
background: #003366;
}
.rsg-form-footer button span {
margin-left: 8px;
}
/* INFO */
.rsg-contact-info {
border-left: 1px solid #ddd;
padding-left: 40px;
}
.rsg-info-header h2 {
color: #003366;
font-size: 30px;
margin: 0 0 30px;
}
.rsg-info-item {
padding-bottom: 22px;
margin-bottom: 22px;
border-bottom: 1px solid #eee;
}
.rsg-info-item strong {
color: #003366;
font-size: 16px;
}
.rsg-info-item p {
color: #666;
font-size: 14px;
line-height: 1.6;
margin: 8px 0 0;
}
.rsg-info-highlight {
background: #003366;
color: #fff;
padding: 25px;
border-radius: 6px;
}
.rsg-info-highlight strong {
color: #fff;
font-size: 18px;
}
.rsg-info-highlight p {
color: #fff;
font-size: 14px;
line-height: 1.6;
}
.rsg-info-highlight a {
display: inline-block;
color: #fff;
font-size: 13px;
font-weight: 800;
text-decoration: none;
margin-top: 8px;
}
/* LOCATION */
.rsg-location {
max-width: 1150px;
margin: 0 auto 80px;
padding: 0 25px;
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 30px;
}
.rsg-location-content {
padding: 40px;
background: #f5f5f5;
border-radius: 8px;
}
.rsg-location-content h2 {
color: #003366;
font-size: 32px;
margin: 0 0 20px;
}
.rsg-location-content p {
line-height: 1.7;
}
.rsg-location-content a {
display: inline-block;
margin-top: 15px;
color: #003366;
font-weight: 800;
text-decoration: none;
}
.rsg-map-placeholder {
min-height: 300px;
background:
linear-gradient(rgba(0,51,102,.08), rgba(0,51,102,.08)),
#e8e8e8;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.rsg-map-placeholder div {
background: #fff;
padding: 25px 35px;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,.12);
}
.rsg-map-placeholder span {
display: block;
font-size: 30px;
margin-bottom: 10px;
}
.rsg-map-placeholder strong {
display: block;
color: #003366;
}
.rsg-map-placeholder small {
display: block;
margin-top: 5px;
color: #666;
}
/* CTA */
.rsg-contact-cta {
background: #003366;
color: #fff;
padding: 55px 8%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}
.rsg-contact-cta h2 {
color: #fff;
font-size: 34px;
max-width: 650px;
margin: 0 0 12px;
}
.rsg-contact-cta p {
color: #fff;
max-width: 650px;
margin: 0;
line-height: 1.6;
}
.rsg-contact-cta a {
flex-shrink: 0;
background: #ff6600;
color: #fff;
padding: 17px 25px;
border-radius: 5px;
text-decoration: none;
font-weight: 800;
}
/* MOBILE */
@media (max-width: 800px) {
.rsg-contact-hero {
padding: 55px 20px;
}
.rsg-contact-hero h1 {
font-size: 32px;
}
.rsg-contact-hero p {
font-size: 16px;
}
.rsg-contact-options {
grid-template-columns: 1fr;
margin-top: 25px;
margin-bottom: 50px;
}
.rsg-contact-main {
grid-template-columns: 1fr;
gap: 45px;
}
.rsg-contact-info {
border-left: 0;
border-top: 1px solid #ddd;
padding-left: 0;
padding-top: 35px;
}
.rsg-form-grid {
grid-template-columns: 1fr;
gap: 0;
}
.rsg-form {
padding: 22px;
}
.rsg-form-footer {
flex-direction: column;
align-items: stretch;
}
.rsg-form-footer button {
width: 100%;
}
.rsg-location {
grid-template-columns: 1fr;
}
.rsg-contact-cta {
flex-direction: column;
align-items: flex-start;
padding: 45px 25px;
}
.rsg-contact-cta h2 {
font-size: 28px;
}
.rsg-contact-cta a {
width: 100%;
text-align: center;
box-sizing: border-box;
}
}