diff --git a/eendoe/css/style.css b/eendoe/css/style.css index adc1efd..3444b7c 100644 --- a/eendoe/css/style.css +++ b/eendoe/css/style.css @@ -994,8 +994,16 @@ margin-top: -10px; #fh5co-contact { overflow: hidden; position: relative; - color: rgba(255, 255, 255, 0.85); - background-color: #1a425b; + 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%); } #fh5co-contact .gradient { position: absolute; @@ -1003,25 +1011,63 @@ margin-top: -10px; 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%); + z-index: 2; + opacity: .9; + -webkit-backface-visibility: hidden; + background-color: #52d3aa; + 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)); + background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%); + background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #52d3aa 100%); + background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%); } #fh5co-contact .container { position: relative; z-index: 4; } -#fh5co-contact a { - color: #52d3aa; - text-decoration: none; +#fh5co-contact h3 { + color: #fff; + margin-bottom: 25px; + font-size: 26px; + font-weight: 300; +} +#fh5co-contact .fh5co-contact-info { + padding: 0; + margin: 0 0 1.5em 0; +} +#fh5co-contact .fh5co-contact-info li { + position: relative; + padding: 0; + margin: 0 0 1.5em 0; + padding-left: 50px; + list-style: none; + font-size: 18px; + line-height: 1.6; + color: rgba(255, 255, 255, 0.9); +} +#fh5co-contact .fh5co-contact-info li i { + position: absolute; + top: 3px; + left: 0; + font-size: 24px; + color: #fff; +} +#fh5co-contact .fh5co-contact-info li a { + color: #fff; + text-decoration: underline; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } -#fh5co-contact a:hover { +#fh5co-contact .fh5co-contact-info li a:hover { color: #fff; + text-decoration: none; +} +#fh5co-contact img { + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + -ms-border-radius: 7px; + border-radius: 7px; } #fh5co-contact:before, #fh5co-contact:after { position: absolute; @@ -1050,329 +1096,10 @@ margin-top: -10px; color: #fff; } #fh5co-contact .section-heading h2:after { - background: #52d3aa; + background: rgba(255, 255, 255, 0.3); } #fh5co-contact .section-heading 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; -} -.contact-card-header h3 { - color: #fff; - font-size: 26px; - font-weight: 600; - margin: 0 0 8px 0; -} -.contact-card-header 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; -} -.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: 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; -} -.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; - } + color: rgba(255, 255, 255, 0.8); } @@ -1740,4 +1467,62 @@ margin-top: -10px; animation-fill-mode: both; } +/* Modals */ +.modal-content { + border-radius: 6px; + border: none; + -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); + box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); +} +.modal-header { + padding: 20px 25px 15px; + border-bottom: 1px solid #eeeeee; +} +.modal-header .close { + font-size: 28px; + font-weight: 300; + line-height: 1; + opacity: 0.5; + outline: none; +} +.modal-header .close:hover { + opacity: 1; +} +.modal-title { + font-size: 22px; + font-weight: 700; + color: #393e46; + margin: 0; +} +.modal-body { + padding: 25px; + font-size: 16px; + line-height: 1.7; + color: #555555; +} +.modal-body img { + max-height: 250px; + width: auto; + max-width: 100%; + object-fit: contain; + margin: 0 auto 20px auto; + border-radius: 4px; +} +.modal-body p { + margin-bottom: 15px; +} +.modal-body p:last-child { + margin-bottom: 0; +} +.modal-footer { + padding: 15px 25px; + border-top: 1px solid #eeeeee; +} +.modal-footer .btn { + padding: 8px 25px; + font-size: 13px; + font-weight: 600; + letter-spacing: 1px; +} + /*# sourceMappingURL=style.css.map */ diff --git a/eendoe/images/work_3.jpg b/eendoe/images/work_3.jpg index 56cd32e..af8648d 100644 Binary files a/eendoe/images/work_3.jpg and b/eendoe/images/work_3.jpg differ diff --git a/eendoe/index.html b/eendoe/index.html index 05e5728..1bf514a 100644 --- a/eendoe/index.html +++ b/eendoe/index.html @@ -178,8 +178,8 @@
- - Image + + Oracle Application Express

Oracle Application Express

De tool voor snelle applicatieontwikkeling en deployment. In recordtijd een werkende oplossing. @@ -187,8 +187,8 @@
- - Image + + Oracle Database

Oracle Database

Database applicatieontwikkeling door onze Oracle certified professionals. @@ -199,17 +199,17 @@
- - Image + + Web development

Web development

- Website onderhoud en ontwikkeling met nieuwe technieken als PHP, jQuery, bootstrap etc + Website onderhoud en ontwikkeling met moderne technieken als React, HTML5, Kubernetes etc
- - Image + + Multi-platform

Multi-platform

Oplossingen die aansluiten bij uw huidige omgeving, zonder hoge investeringen @@ -220,8 +220,8 @@
- - Image + + Overal en altijd

Overal en altijd

Moderne oplossingen ongeacht tijd of plaats met behulp van hedendaagse apparatuur. Lokaal, in beheer of in de cloud. @@ -229,8 +229,8 @@
- - Image + + Integratie

Integratie

Systemen koppelen door integratie met behulp van technieken als ETL en webservices @@ -276,91 +276,27 @@

Neem contact op

-

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

+

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

-
-
-

Contactgegevens

-

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

-
- -
- KvK: 71 604 839 - BTW: NL858780100B01 -
-
+

Contactgegevens

+
-
-
- 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 - -
-
-
+ Contact
@@ -381,10 +317,122 @@
- - - + + + + + + + + + + + + + diff --git a/eendoe/sass/style.scss b/eendoe/sass/style.scss index 1ec945b..b11fed3 100644 --- a/eendoe/sass/style.scss +++ b/eendoe/sass/style.scss @@ -1096,8 +1096,9 @@ h1, h2, h3, h4, h5, h6 { #fh5co-contact { padding-bottom: 0; position: relative; - color: rgba(255, 255, 255, 0.85); - background-color: #1a425b; + color: rgba(255, 255, 255, 0.8); + background-color: $brand-primary; + @include fh5co-gradient; .gradient { position: absolute; @@ -1105,11 +1106,11 @@ h1, h2, h3, h4, h5, h6 { 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%); + z-index: 2; + opacity: .9; + -webkit-backface-visibility: hidden; + background-color: $brand-primary; + @include fh5co-gradient; } .container { @@ -1117,347 +1118,63 @@ h1, h2, h3, h4, h5, h6 { z-index: 4; } - a { - color: $brand-primary; - text-decoration: none; - @include transition(.3s); - &:hover { - color: #fff; + h3 { + color: #fff; + margin-bottom: 25px; + font-size: 26px; + font-weight: 300; + } + + .fh5co-contact-info { + 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; + font-size: 18px; + line-height: 1.6; + color: rgba(255, 255, 255, 0.9); + + i { + position: absolute; + top: 3px; + left: 0; + font-size: 24px; + color: #fff; + } + + a { + color: #fff; + text-decoration: underline; + @include transition(.3s); + &:hover { + color: #fff; + text-decoration: none; + } + } } } + img { + @include border-radius(7px); + } + .section-heading { h2 { color: #fff; &:after { - background: $brand-primary; + background: rgba(255, 255, 255, 0.3); } } h3 { - color: rgba(255, 255, 255, 0.9); + color: rgba(255, 255, 255, 0.8); } } } -/* 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; - } -} - .section-heading { float: left; @@ -1818,4 +1535,62 @@ h1, h2, h3, h4, h5, h6 { // float: left; // @include inline-block; // } -// } \ No newline at end of file +// } + +// Modals +.modal-content { + @include border-radius(6px); + border: none; + -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); + box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); +} +.modal-header { + padding: 20px 25px 15px; + border-bottom: 1px solid #eeeeee; + .close { + font-size: 28px; + font-weight: 300; + line-height: 1; + opacity: 0.5; + outline: none; + &:hover { + opacity: 1; + } + } +} +.modal-title { + font-size: 22px; + font-weight: 700; + color: #393e46; + margin: 0; +} +.modal-body { + padding: 25px; + font-size: 16px; + line-height: 1.7; + color: #555555; + img { + max-height: 250px; + width: auto; + max-width: 100%; + object-fit: contain; + margin: 0 auto 20px auto; + @include border-radius(4px); + } + p { + margin-bottom: 15px; + &:last-child { + margin-bottom: 0; + } + } +} +.modal-footer { + padding: 15px 25px; + border-top: 1px solid #eeeeee; + .btn { + padding: 8px 25px; + font-size: 13px; + font-weight: 600; + letter-spacing: 1px; + } +} \ No newline at end of file