From 85cadf104081aa5d6f36dde7129ab610644183a8 Mon Sep 17 00:00:00 2001 From: bart Date: Tue, 20 Oct 2026 22:02:19 +0200 Subject: [PATCH] Update contact section styling and cards --- eendoe/css/style.css | 397 ++++++++++++++++++++++++++++++++++------- eendoe/index.html | 96 ++++++++-- eendoe/sass/style.scss | 372 ++++++++++++++++++++++++++++++++++++-- 3 files changed, 770 insertions(+), 95 deletions(-) diff --git a/eendoe/css/style.css b/eendoe/css/style.css index e093eed..adc1efd 100644 --- a/eendoe/css/style.css +++ b/eendoe/css/style.css @@ -994,23 +994,34 @@ margin-top: -10px; #fh5co-contact { overflow: hidden; position: relative; - color: rgba(255, 255, 255, 0.8); - background-color: #52d3aa; - /* IE9, iOS 3.2+ */ - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMzZjk1ZWEiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzUyZDNhYSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+); - background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #52d3aa)); - /* Android 2.3 */ - background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%); - /* IE10+ */ - background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #52d3aa 100%); - background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%); + color: rgba(255, 255, 255, 0.85); + background-color: #1a425b; +} +#fh5co-contact .gradient { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; + opacity: .94; + background-color: #1a425b; + background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #1c4b72), color-stop(1, #1e7a68)); + background: linear-gradient(135deg, rgba(28, 75, 114, 0.95) 0%, rgba(30, 122, 104, 0.95) 100%); +} +#fh5co-contact .container { + position: relative; + z-index: 4; } #fh5co-contact a { - color: rgba(255, 255, 255, 0.5); - text-decoration: underline; + color: #52d3aa; + text-decoration: none; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; } #fh5co-contact a:hover { - color: white; + color: #fff; } #fh5co-contact:before, #fh5co-contact:after { position: absolute; @@ -1039,67 +1050,329 @@ margin-top: -10px; color: #fff; } #fh5co-contact .section-heading h2:after { - background: rgba(255, 255, 255, 0.3); + background: #52d3aa; } #fh5co-contact .section-heading h3 { - color: rgba(255, 255, 255, 0.8); + color: rgba(255, 255, 255, 0.9); } -#fh5co-contact .fh5co-project-item { - display: block; - width: 100%; - position: relative; - top: 0; - background: #fff; - overflow: hidden; - z-index: 9; + +/* Modern Contact Card */ +.contact-card { + background: rgba(255, 255, 255, 0.1); + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.22); + border-radius: 16px; + padding: 35px 35px 30px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); margin-bottom: 30px; - -webkit-border-radius: 7px; - -moz-border-radius: 7px; - -ms-border-radius: 7px; - border-radius: 7px; - -webkit-transition: 0.3s; - -o-transition: 0.3s; - transition: 0.3s; + color: #fff; } -#fh5co-contact .fh5co-project-item img { - z-index: 8; - opacity: 1; - -webkit-transition: 0.3s; - -o-transition: 0.3s; - transition: 0.3s; +.contact-card-header { + margin-bottom: 25px; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); + padding-bottom: 18px; } -#fh5co-contact .fh5co-project-item .fh5co-text { - padding: 10px 20px; - height: 7em; - background-color: #f6f4f4; +.contact-card-header h3 { + color: #fff; + font-size: 26px; + font-weight: 600; + margin: 0 0 8px 0; } -#fh5co-contact .fh5co-project-item .fh5co-text h2, #fh5co-contact .fh5co-project-item .fh5co-text span { - text-decoration: none !important; -} -#fh5co-contact .fh5co-project-item .fh5co-text h2 { - font-size: 18px; - font-weight: bold; +.contact-card-header p { + color: rgba(255, 255, 255, 0.85); + font-size: 15px; margin: 0; + line-height: 1.5; } -#fh5co-contact .fh5co-project-item .fh5co-text span { - color: #b3b3b3; + +/* Contact Info List */ +.contact-info-list { + list-style: none; + padding: 0; + margin: 0 0 25px 0; +} +.contact-item { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + align-items: flex-start; + padding: 12px 14px; + border-radius: 10px; + margin-bottom: 8px; + -webkit-transition: background 0.2s ease, -webkit-transform 0.2s ease; + transition: background 0.2s ease, transform 0.2s ease; +} +.contact-item:hover { + background: rgba(255, 255, 255, 0.08); + -webkit-transform: translateX(4px); + transform: translateX(4px); +} +.contact-icon { + width: 42px; + height: 42px; + min-width: 42px; + border-radius: 10px; + background: rgba(255, 255, 255, 0.18); + border: 1px solid rgba(255, 255, 255, 0.25); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + margin-right: 16px; + color: #52d3aa; + font-size: 18px; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; +} +.contact-item:hover .contact-icon { + background: #52d3aa; + color: #1a4a40; + box-shadow: 0 4px 12px rgba(82, 211, 170, 0.4); +} +.contact-content { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} +.contact-label { + display: block; + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + color: rgba(255, 255, 255, 0.65); + margin-bottom: 2px; +} +.contact-value { + display: block; font-size: 16px; - font-weight: 400; + font-weight: 500; + color: #fff; + line-height: 1.4; } -#fh5co-contact .fh5co-project-item:hover, #fh5co-contact .fh5co-project-item:focus { - -webkit-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4); - -moz-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4); - -ms-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4); - -o-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4); - box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4); - text-decoration: none; - top: -15px; -} -#fh5co-contact .fh5co-project-item:hover img, #fh5co-contact .fh5co-project-item:focus img { - opacity: .7; -} -#fh5co-contact .fh5co-project-item:hover h2, #fh5co-contact .fh5co-project-item:hover span, #fh5co-contact .fh5co-project-item:focus h2, #fh5co-contact .fh5co-project-item:focus span { +.contact-link { + display: inline-block; + font-size: 16px; + font-weight: 500; + color: #fff !important; text-decoration: none !important; + border-bottom: 1px dashed rgba(255, 255, 255, 0.4); + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; +} +.contact-link:hover, .contact-link:focus { + color: #52d3aa !important; + border-bottom-color: #52d3aa; + text-decoration: none !important; +} + +/* Contact Badges / Meta */ +.contact-meta { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + padding-top: 18px; + border-top: 1px solid rgba(255, 255, 255, 0.15); +} +.contact-badge { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + background: rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 6px 14px; + border-radius: 20px; + font-size: 13px; + font-weight: 500; + color: rgba(255, 255, 255, 0.95); + margin-right: 10px; + margin-bottom: 8px; +} +.contact-badge i { + color: #52d3aa; + margin-right: 6px; + font-size: 11px; +} + +/* Contact Side Card (Right Column) */ +.contact-side-card { + background: rgba(255, 255, 255, 0.1); + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.22); + border-radius: 16px; + overflow: hidden; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); + margin-bottom: 30px; + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + flex-direction: column; +} +.contact-image-wrap { + position: relative; + overflow: hidden; + max-height: 250px; +} +.contact-image-wrap img { + width: 100%; + height: 250px; + object-fit: cover; + -webkit-transition: -webkit-transform 0.5s ease; + transition: transform 0.5s ease; +} +.contact-side-card:hover .contact-image-wrap img { + -webkit-transform: scale(1.04); + transform: scale(1.04); +} +.contact-image-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, rgba(0,0,0,0.1)), color-stop(1, rgba(20,50,75,0.7))); + background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(20,50,75,0.7) 100%); +} +.contact-cta-box { + padding: 30px 30px; + color: #fff; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-justify-content: center; + justify-content: center; +} +.contact-cta-box h4 { + color: #fff; + font-size: 22px; + font-weight: 600; + margin: 0 0 10px 0; +} +.contact-cta-box p { + color: rgba(255, 255, 255, 0.85); + font-size: 15px; + line-height: 1.6; + margin-bottom: 25px; +} +.contact-actions { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; +} +.btn-contact-primary { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + background: #52d3aa; + color: #0d382d !important; + font-weight: 600; + font-size: 14px; + letter-spacing: 0.5px; + text-transform: none; + padding: 12px 22px; + border-radius: 8px; + border: 2px solid #52d3aa; + text-decoration: none !important; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + margin-right: 12px; + margin-bottom: 10px; +} +.btn-contact-primary i { + margin-right: 8px; + font-size: 16px; +} +.btn-contact-primary:hover, .btn-contact-primary:focus { + background: #3ec095; + border-color: #3ec095; + color: #0d382d !important; + box-shadow: 0 6px 18px rgba(82, 211, 170, 0.4); + -webkit-transform: translateY(-2px); + transform: translateY(-2px); +} +.btn-contact-outline { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + background: transparent; + color: #fff !important; + font-weight: 600; + font-size: 14px; + letter-spacing: 0.5px; + text-transform: none; + padding: 12px 22px; + border-radius: 8px; + border: 2px solid rgba(255, 255, 255, 0.6); + text-decoration: none !important; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + margin-bottom: 10px; +} +.btn-contact-outline i { + margin-right: 8px; + font-size: 16px; +} +.btn-contact-outline:hover, .btn-contact-outline:focus { + background: rgba(255, 255, 255, 0.2); + border-color: #fff; + color: #fff !important; + -webkit-transform: translateY(-2px); + transform: translateY(-2px); +} + +@media screen and (max-width: 768px) { + .contact-card { + padding: 25px 20px 20px; + } + .contact-cta-box { + padding: 24px 20px; + } + .btn-contact-primary, .btn-contact-outline { + width: 100%; + margin-right: 0; + } } diff --git a/eendoe/index.html b/eendoe/index.html index 1ac297e..05e5728 100644 --- a/eendoe/index.html +++ b/eendoe/index.html @@ -269,38 +269,98 @@
- +

Neem contact op

-

Voor vrijblijvende informatie over onze diensten en aanvraag offertes kunt u contact met ons opnemen op de volgende manieren.

+

Voor vrijblijvende informatie over onze diensten of het aanvragen van offertes kunt u direct contact met ons opnemen.

-

Contactgegevens

-
    - - -  Eendoe Services B.V. - -
  • - -  Adriana van Roonlaan
    2544NM Den Haag -
    • -
  •  +31 (0)85 00 91 824
    • -
  •  info@eendoe.nl
    • -
  •  eendoe.nl
    • -
+
+
+

Contactgegevens

+

Heeft u een vraag of wilt u een project bespreken? Wij zijn eenvoudig bereikbaar.

+
+
    +
  • +
    + +
    +
    + Organisatie + Eendoe Services B.V. +
    +
    • +
  • +
    + +
    +
    + Vestigingsadres + Adriana van Roonlaan
    2544 NM Den Haag     +
    +
    • +
  • +
    + +
    +
    + Telefoon + +31 (0)85 00 91 824 +
    +
    • +
  • +
    + +
    +
    + E-mail + info@eendoe.nl +
    +
    • +
  • +
    + +
    +
    + Website + www.eendoe.nl +
    +
    • +
+
+ KvK: 71 604 839 + BTW: NL858780100B01 +
+
- Contact +
+
+ Contact met Eendoe Services +
+
+
+

Direct sparren over uw IT-omgeving?

+

Wij denken graag met u mee over pragmatische en schaalbare oplossingen op maat.

+
+ + Stuur een bericht + + + Bel direct + +
+
+
@@ -314,7 +374,7 @@
-

Eendoe Services B.V. | www.eendoe.nl | KvK 71 604 839 | BTW NL858780100B01

+

Eendoe Services B.V. | www.eendoe.nl | KvK 71 604 839 | BTW NL858780100B01

Algemene voorwaarden

diff --git a/eendoe/sass/style.scss b/eendoe/sass/style.scss index 9f95cce..1ec945b 100644 --- a/eendoe/sass/style.scss +++ b/eendoe/sass/style.scss @@ -1094,25 +1094,367 @@ h1, h2, h3, h4, h5, h6 { } } #fh5co-contact { - // Contacts padding-bottom: 0; - .fh5co-contact-info { - // color: rgba(255,255,255,.7); - padding: 0; - margin: 0 0 1.5em 0; - li { - position: relative; - padding: 0; - margin: 0 0 1.5em 0; - padding-left: 50px; - list-style: none; + position: relative; + color: rgba(255, 255, 255, 0.85); + background-color: #1a425b; - i { - position: absolute; - top: .2em; - left: 0; + .gradient { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; + opacity: .94; + background-color: #1a425b; + background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #1c4b72), color-stop(1, #1e7a68)); + background: linear-gradient(135deg, rgba(28, 75, 114, 0.95) 0%, rgba(30, 122, 104, 0.95) 100%); + } + + .container { + position: relative; + z-index: 4; + } + + a { + color: $brand-primary; + text-decoration: none; + @include transition(.3s); + &:hover { + color: #fff; + } + } + + .section-heading { + h2 { + color: #fff; + &:after { + background: $brand-primary; } } + h3 { + color: rgba(255, 255, 255, 0.9); + } + } +} + +/* Modern Contact Card */ +.contact-card { + background: rgba(255, 255, 255, 0.1); + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.22); + border-radius: 16px; + padding: 35px 35px 30px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); + margin-bottom: 30px; + color: #fff; +} +.contact-card-header { + margin-bottom: 25px; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); + padding-bottom: 18px; + h3 { + color: #fff; + font-size: 26px; + font-weight: 600; + margin: 0 0 8px 0; + } + p { + color: rgba(255, 255, 255, 0.85); + font-size: 15px; + margin: 0; + line-height: 1.5; + } +} + +/* Contact Info List */ +.contact-info-list { + list-style: none; + padding: 0; + margin: 0 0 25px 0; +} +.contact-item { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + align-items: flex-start; + padding: 12px 14px; + border-radius: 10px; + margin-bottom: 8px; + -webkit-transition: background 0.2s ease, -webkit-transform 0.2s ease; + transition: background 0.2s ease, transform 0.2s ease; + &:hover { + background: rgba(255, 255, 255, 0.08); + -webkit-transform: translateX(4px); + transform: translateX(4px); + .contact-icon { + background: $brand-primary; + color: #1a4a40; + box-shadow: 0 4px 12px rgba(82, 211, 170, 0.4); + } + } +} +.contact-icon { + width: 42px; + height: 42px; + min-width: 42px; + border-radius: 10px; + background: rgba(255, 255, 255, 0.18); + border: 1px solid rgba(255, 255, 255, 0.25); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + margin-right: 16px; + color: $brand-primary; + font-size: 18px; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; +} +.contact-content { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} +.contact-label { + display: block; + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + color: rgba(255, 255, 255, 0.65); + margin-bottom: 2px; +} +.contact-value { + display: block; + font-size: 16px; + font-weight: 500; + color: #fff; + line-height: 1.4; +} +.contact-link { + display: inline-block; + font-size: 16px; + font-weight: 500; + color: #fff !important; + text-decoration: none !important; + border-bottom: 1px dashed rgba(255, 255, 255, 0.4); + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + &:hover, &:focus { + color: $brand-primary !important; + border-bottom-color: $brand-primary; + text-decoration: none !important; + } +} + +/* Contact Badges / Meta */ +.contact-meta { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + padding-top: 18px; + border-top: 1px solid rgba(255, 255, 255, 0.15); +} +.contact-badge { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + background: rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 6px 14px; + border-radius: 20px; + font-size: 13px; + font-weight: 500; + color: rgba(255, 255, 255, 0.95); + margin-right: 10px; + margin-bottom: 8px; + i { + color: $brand-primary; + margin-right: 6px; + font-size: 11px; + } +} + +/* Contact Side Card (Right Column) */ +.contact-side-card { + background: rgba(255, 255, 255, 0.1); + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.22); + border-radius: 16px; + overflow: hidden; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); + margin-bottom: 30px; + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + flex-direction: column; +} +.contact-image-wrap { + position: relative; + overflow: hidden; + max-height: 250px; + img { + width: 100%; + height: 250px; + object-fit: cover; + -webkit-transition: -webkit-transform 0.5s ease; + transition: transform 0.5s ease; + } +} +.contact-side-card:hover .contact-image-wrap img { + -webkit-transform: scale(1.04); + transform: scale(1.04); +} +.contact-image-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, rgba(0,0,0,0.1)), color-stop(1, rgba(20,50,75,0.7))); + background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(20,50,75,0.7) 100%); +} +.contact-cta-box { + padding: 30px 30px; + color: #fff; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-justify-content: center; + justify-content: center; + h4 { + color: #fff; + font-size: 22px; + font-weight: 600; + margin: 0 0 10px 0; + } + p { + color: rgba(255, 255, 255, 0.85); + font-size: 15px; + line-height: 1.6; + margin-bottom: 25px; + } +} +.contact-actions { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; +} +.btn-contact-primary { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + background: $brand-primary; + color: #0d382d !important; + font-weight: 600; + font-size: 14px; + letter-spacing: 0.5px; + text-transform: none; + padding: 12px 22px; + border-radius: 8px; + border: 2px solid $brand-primary; + text-decoration: none !important; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + margin-right: 12px; + margin-bottom: 10px; + i { + margin-right: 8px; + font-size: 16px; + } + &:hover, &:focus { + background: #3ec095; + border-color: #3ec095; + color: #0d382d !important; + box-shadow: 0 6px 18px rgba(82, 211, 170, 0.4); + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } +} +.btn-contact-outline { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + background: transparent; + color: #fff !important; + font-weight: 600; + font-size: 14px; + letter-spacing: 0.5px; + text-transform: none; + padding: 12px 22px; + border-radius: 8px; + border: 2px solid rgba(255, 255, 255, 0.6); + text-decoration: none !important; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + margin-bottom: 10px; + i { + margin-right: 8px; + font-size: 16px; + } + &:hover, &:focus { + background: rgba(255, 255, 255, 0.2); + border-color: #fff; + color: #fff !important; + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } +} + +@media screen and (max-width: 768px) { + .contact-card { + padding: 25px 20px 20px; + } + .contact-cta-box { + padding: 24px 20px; + } + .btn-contact-primary, .btn-contact-outline { + width: 100%; + margin-right: 0; } }